feat: add JSDoc to theme

.changeset/khaki-pianos-hope.md

@@ -0,0 +1,5 @@
+---
+'@yamada-ui/core': minor
+---
+
+Added JSDoc to theme.

packages/core/src/theme.types.ts

@@ -30,77 +30,275 @@ export type NoticeStatus = 'warning' | 'info' | 'success' | 'error' | 'loading'
 export type NoticeComponentProps = NoticeConfigOptions & { onClose: () => void }
 
 export type NoticeConfigOptions = ThemeProps<'Alert'> & {
+  /**
+   * The placement of the notice.
+   *
+   * @default 'top'
+   */
   placement?: NoticePlacement
+  /**
+   * The number of `ms` the notice will continue to be displayed.
+   *
+   * If `null`, the notice will continue to display.
+   * Please use in conjunction with `isClosable`.
+   *
+   * @default 5000
+   */
   duration?: number | null
+  /**
+   * The maximum value at which notice will be displayed.
+   */
   limit?: number
+  /**
+   * The status of the notice.
+   *
+   * @default 'info'
+   */
   status?: NoticeStatus
+  /**
+   * The loading icon to use.
+   */
   icon?: {
     variant?: LoadingVariant
+    /**
+     * The CSS `color` property.
+     */
     color?: CSSUIProps['color']
     children?: ReactNode
   }
+  /**
+   * The title of the notice.
+   */
   title?: ReactNode
+  /**
+   * The description of the notice.
+   */
   description?: ReactNode
+  /**
+   * The custom notice component to use.
+   */
   component?: (props: NoticeComponentProps) => ReactNode
+  /**
+   * If `true`, allows the notice to be removed.
+   *
+   * @default false
+   */
   isClosable?: boolean
+  /**
+   * The custom style to use.
+   */
   style?: CSSUIObject
 }
 
 export type LoadingComponentProps = {
   initialState?: boolean
   icon: LoadingConfigOptions['icon']
   text: LoadingConfigOptions['text']
-  timeout: number | null
+  duration: number | null
   message: ReactNode | undefined
   onFinish: () => void
 }
 
 type LoadingConfigOptions = {
+  /**
+   * If `true`, loaded from the initial rendering.
+   *
+   * @default false
+   */
   initialState?: boolean
+  /**
+   * Props for loading icon element.
+   */
   icon?: {
     variant?: LoadingVariant
+    /**
+     * The CSS `color` property.
+     */
     color?: CSSUIProps['color']
+    /**
+     * The CSS `color` property.
+     */
     secondaryColor?: CSSUIProps['color']
+    /**
+     * The CSS `box-size` property.
+     */
     size?: CSSUIProps['boxSize']
   }
+  /**
+   * Props for loading text element.
+   */
   text?: {
+    /**
+     * The CSS `font-family` property.
+     */
     fontFamily?: CSSUIProps['fontFamily']
+    /**
+     * The CSS `color` property.
+     */
     color?: CSSUIProps['color']
+    /**
+     * The CSS `font-size` property.
+     */
     fontSize?: CSSUIProps['fontSize']
+    /**
+     * The CSS `font-weight` property.
+     */
     fontWeight?: CSSUIProps['fontWeight']
+    /**
+     * The CSS `letter-spacing` property.
+     */
     letterSpacing?: CSSUIProps['letterSpacing']
+    /**
+     * The CSS `line-height` property.
+     */
     lineHeight?: CSSUIProps['letterSpacing']
   }
-  timeout?: number | null
+  /**
+   * The number of `ms` the loading will continue to be displayed.
+   *
+   * If `null`, the notice will continue to display.
+   *
+   * @default null
+   */
+  duration?: number | null
+  /**
+   * The custom loading component to use.
+   */
   component?: (props: LoadingComponentProps) => ReactNode
+  /**
+   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
+   *
+   * @default false.
+   */
   allowPinchZoom?: boolean
+  /**
+   * If `true`, scrolling will be disabled on the `body` when the modal opens.
+   *
+   * @default true
+   */
   blockScrollOnMount?: boolean
+  /**
+   * If `true`, the portal will check if it is within a parent portal
+   * and append itself to the parent's portal node.
+   * This provides nesting for portals.
+   *
+   * If `false`, the portal will always append to `document.body`
+   * regardless of nesting. It is used to opt out of portal nesting.
+   *
+   * @default true
+   */
   appendToParentPortal?: PortalProps['appendToParentPortal']
+  /**
+   * The `ref` to the component where the portal will be attached to.
+   */
   containerRef?: PortalProps['containerRef']
 }
 
 export type ThemeConfig = {
+  /**
+   * The initial theme scheme.
+   * This is only applicable if multiple themes are provided.
+   */
   initialThemeScheme?: string | number
+  /**
+   * The initial color mode.
+   *
+   * @default 'light'
+   */
   initialColorMode?: 'light' | 'dark' | 'system'
+  /**
+   * If `true`, the system will apply the color mode.
+   *
+   * @default false
+   */
   useSystemColorMode?: boolean
+  /**
+   * If `true`, temporarily disable transitions.
+   * This is used to avoid unnecessary movements caused by transitions during color mode switching, for example.
+   *
+   * @default false
+   */
   disableTransitionOnChange?: boolean
+  /**
+   * The config of the calendar or date picker etc.
+   */
   date?: {
+    /**
+     * The locale of the calendar or date picker etc.
+     * Check the docs to see the locale of possible modifiers you can pass.
+     *
+     * @see Doc https://day.js.org/docs/en/i18n/instance-locale
+     * @default 'en'
+     */
     locale?: string
   }
+  /**
+   * The config of CSS variables.
+   */
   var?: {
+    /**
+     * The prefix to attach to variable names when converting each token of the theme to CSS variable names.
+     *
+     * @default 'ui'
+     */
     prefix?: StringLiteral
   }
+  /**
+   * The config of the notice.
+   */
   notice?: {
+    /**
+     * The options of the notice.
+     */
     options?: NoticeConfigOptions
+    /**
+     * The variants of the notice.
+     * Check the docs to see the variants of possible modifiers you can pass.
+     *
+     * @see Doc https://www.framer.com/motion/animation/#variants
+     */
     variants?: Variants
+    /**
+     * The CSS `gap` property.
+     *
+     * @default 'md'
+     */
     gap?: CSSUIProps['gap']
+    /**
+     * If `true`, the portal will check if it is within a parent portal
+     * and append itself to the parent's portal node.
+     * This provides nesting for portals.
+     *
+     * If `false`, the portal will always append to `document.body`
+     * regardless of nesting. It is used to opt out of portal nesting.
+     *
+     * @default true
+     */
     appendToParentPortal?: PortalProps['appendToParentPortal']
+    /**
+     * The `ref` to the component where the portal will be attached to.
+     */
     containerRef?: PortalProps['containerRef']
   }
+  /**
+   * The config of the loading.
+   */
   loading?: {
+    /**
+     * The options of the screen loading.
+     */
     screen?: LoadingConfigOptions
+    /**
+     * The options of the page loading.
+     */
     page?: LoadingConfigOptions
+    /**
+     * The options of the background loading.
+     */
     background?: LoadingConfigOptions
+    /**
+     * The options of the custom loading.
+     */
     custom?: LoadingConfigOptions
   }
 }
@@ -154,9 +352,21 @@ export type ComponentDefaultProps<
 }
 
 export type ComponentStyle<Y extends Dict = Dict> = {
+  /**
+   * The base style of the component.
+   */
   baseStyle?: ComponentBaseStyle
+  /**
+   * The sizes of the component.
+   */
   sizes?: ComponentSizes
+  /**
+   * The variants of the component.
+   */
   variants?: ComponentVariants
+  /**
+   * The default props of the component.
+   */
   defaultProps?: ComponentDefaultProps<Y>
 }
 
@@ -165,9 +375,21 @@ export type ComponentMultiVariants = Record<string, UIMultiStyle>
 export type ComponentMultiSizes = Record<string, UIMultiStyle>
 
 export type ComponentMultiStyle = {
+  /**
+   * The base style of the component.
+   */
   baseStyle?: ComponentMultiBaseStyle
+  /**
+   * The sizes of the component.
+   */
   sizes?: ComponentMultiSizes
+  /**
+   * The variants of the component.
+   */
   variants?: ComponentMultiVariants
+  /**
+   * The default props of the component.
+   */
   defaultProps?: ComponentDefaultProps
 }