@yamada-ui/react 2.4.0-next-20261111072902 → 2.4.0-next-20261111080835

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/cjs/core/system/styled.cjs +2 -2
  2. package/dist/cjs/core/system/styled.cjs.map +1 -1
  3. package/dist/esm/core/system/styled.js +3 -3
  4. package/dist/esm/core/system/styled.js.map +1 -1
  5. package/dist/types/components/calendar/calendar.style.d.ts +2 -2
  6. package/dist/types/components/carousel/carousel.style.d.ts +2 -2
  7. package/dist/types/components/checkbox-card/checkbox-card.d.ts +3 -3
  8. package/dist/types/components/checkbox-card/checkbox-card.style.d.ts +1 -1
  9. package/dist/types/components/color-selector/use-color-selector.d.ts +2 -2
  10. package/dist/types/components/data-list/data-list.style.d.ts +1 -1
  11. package/dist/types/components/empty-state/empty-state.style.d.ts +2 -2
  12. package/dist/types/components/menu/menu.style.d.ts +2 -2
  13. package/dist/types/components/number-input/number-input.style.d.ts +1 -1
  14. package/dist/types/components/radio-card/radio-card.d.ts +3 -3
  15. package/dist/types/components/radio-card/radio-card.style.d.ts +1 -1
  16. package/dist/types/components/segmented-control/segmented-control.style.d.ts +2 -2
  17. package/dist/types/components/steps/steps.style.d.ts +1 -1
  18. package/dist/types/components/timeline/timeline.d.ts +1 -1
  19. package/dist/types/components/timeline/timeline.style.d.ts +1 -1
  20. package/dist/types/components/tree/tree.style.d.ts +1 -1
  21. package/dist/types/core/components/index.type.d.ts +8 -4
  22. package/package.json +1 -1
package/dist/cjs/core/system/styled.cjs CHANGED
@@ -97,11 +97,11 @@ function createStyled(el, { name, base, compounds, props, sizes, variants, defau
97
97
  const [, rest] = require_use_component_style.useComponentStyle(omittedProps, componentStyleOptions);
98
98
  const suppressHydrationWarning = useHydrationContext();
99
99
  const [cssArray, colorScheme, forwardProps] = (0, react.useMemo)(() => {
100
- const { css, colorScheme, ...forwardProps } = rest;
100
+ const { css, colorScheme, attrs, ...forwardProps } = rest;
101
101
  return [
102
102
  (0, require_utils_index.utils_exports.toArray)(css),
103
103
  colorScheme,
104
- forwardProps
104
+ require_props.mergeProps(forwardProps, attrs ?? {})()
105
105
  ];
106
106
  }, [rest]);
107
107
  styleProps.colorScheme ??= colorScheme;
package/dist/cjs/core/system/styled.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styled.cjs","names":["useInsertionEffectAlwaysWithSyncFallback","useRef","isEqual","useMemo","createContext","getDisplayName","createShouldForwardProp","withEmotionCache","useSystem","useTheme","useComponentStyle","getRegisteredStyles","css","serializeStyles","Slot"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type {\n As,\n HTMLProps,\n ShouldForwardProp,\n StyledComponent,\n} from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.type\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport { getRegisteredStyles, registerStyles } from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nfunction normalizeHostSelector(rule: string, className: string) {\n const selector = `.${className}`\n\n return rule\n .replaceAll(\n `${selector}:host([data-mode=dark]) ${selector}`,\n `:host([data-mode=dark]) ${selector}`,\n )\n .replaceAll(\n `${selector}:host([data-mode=light]) ${selector}`,\n `:host([data-mode=light]) ${selector}`,\n )\n}\n\nfunction insertStyles(cache: EmotionCache, serialized: SerializedStyles) {\n const className = `${cache.key}-${serialized.name}`\n\n if (!isUndefined(cache.inserted[serialized.name])) return\n\n const sheet = Object.create(cache.sheet) as typeof cache.sheet\n\n sheet.insert = (rule) => {\n cache.sheet.insert(normalizeHostSelector(rule, className))\n }\n\n let styleForSsr = \"\"\n let current: SerializedStyles | undefined = serialized\n\n do {\n const style =\n cache.insert(\n serialized === current ? `.${className}` : \"\",\n current,\n sheet,\n true,\n ) || undefined\n\n if (!createdDom() && !isUndefined(style))\n styleForSsr += normalizeHostSelector(style, className)\n\n current = current.next\n } while (current !== undefined)\n\n return styleForSsr || undefined\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport const [HydrationContext, useHydrationContext] = createContext<boolean>({\n name: \"HydrationContext\",\n strict: false,\n})\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) | string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean | ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string | undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const suppressHydrationWarning = useHydrationContext()\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, ...forwardProps } = rest\n\n return [toArray(css), colorScheme, forwardProps]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n forwardProps.suppressHydrationWarning ??= suppressHydrationWarning\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps: HTMLProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <HydrationContext value={mergedProps.suppressHydrationWarning}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </HydrationContext>\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName || \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"styled.cjs","names":["useInsertionEffectAlwaysWithSyncFallback","useRef","isEqual","useMemo","createContext","getDisplayName","createShouldForwardProp","withEmotionCache","useSystem","useTheme","useComponentStyle","mergeProps","getRegisteredStyles","css","serializeStyles","Slot"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type {\n As,\n HTMLProps,\n ShouldForwardProp,\n StyledComponent,\n} from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.type\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport { getRegisteredStyles, registerStyles } from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n mergeProps,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nfunction normalizeHostSelector(rule: string, className: string) {\n const selector = `.${className}`\n\n return rule\n .replaceAll(\n `${selector}:host([data-mode=dark]) ${selector}`,\n `:host([data-mode=dark]) ${selector}`,\n )\n .replaceAll(\n `${selector}:host([data-mode=light]) ${selector}`,\n `:host([data-mode=light]) ${selector}`,\n )\n}\n\nfunction insertStyles(cache: EmotionCache, serialized: SerializedStyles) {\n const className = `${cache.key}-${serialized.name}`\n\n if (!isUndefined(cache.inserted[serialized.name])) return\n\n const sheet = Object.create(cache.sheet) as typeof cache.sheet\n\n sheet.insert = (rule) => {\n cache.sheet.insert(normalizeHostSelector(rule, className))\n }\n\n let styleForSsr = \"\"\n let current: SerializedStyles | undefined = serialized\n\n do {\n const style =\n cache.insert(\n serialized === current ? `.${className}` : \"\",\n current,\n sheet,\n true,\n ) || undefined\n\n if (!createdDom() && !isUndefined(style))\n styleForSsr += normalizeHostSelector(style, className)\n\n current = current.next\n } while (current !== undefined)\n\n return styleForSsr || undefined\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport const [HydrationContext, useHydrationContext] = createContext<boolean>({\n name: \"HydrationContext\",\n strict: false,\n})\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) | string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean | ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string | undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const suppressHydrationWarning = useHydrationContext()\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, attrs, ...forwardProps } = rest\n\n return [\n toArray(css),\n colorScheme,\n mergeProps(forwardProps, attrs ?? {})(),\n ]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n forwardProps.suppressHydrationWarning ??= suppressHydrationWarning\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps: HTMLProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <HydrationContext value={mergedProps.suppressHydrationWarning}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </HydrationContext>\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName || \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":"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"}
package/dist/esm/core/system/styled.js CHANGED
@@ -5,7 +5,7 @@ import { useSystem } from "./system-provider.js";
5
5
  import { useTheme } from "./theme-provider.js";
6
6
  import { Slot } from "../../components/slot/slot.js";
7
7
  import { css } from "../css/css.js";
8
- import { createShouldForwardProp } from "../components/props.js";
8
+ import { createShouldForwardProp, mergeProps } from "../components/props.js";
9
9
  import { useComponentStyle } from "../components/use-component-style.js";
10
10
  import { getDisplayName } from "../components/utils.js";
11
11
  import { useMemo, useRef } from "react";
@@ -95,11 +95,11 @@ function createStyled(el, { name, base, compounds, props, sizes, variants, defau
95
95
  const [, rest] = useComponentStyle(omittedProps, componentStyleOptions);
96
96
  const suppressHydrationWarning = useHydrationContext();
97
97
  const [cssArray, colorScheme, forwardProps] = useMemo(() => {
98
- const { css, colorScheme, ...forwardProps } = rest;
98
+ const { css, colorScheme, attrs, ...forwardProps } = rest;
99
99
  return [
100
100
  (0, utils_exports.toArray)(css),
101
101
  colorScheme,
102
- forwardProps
102
+ mergeProps(forwardProps, attrs ?? {})()
103
103
  ];
104
104
  }, [rest]);
105
105
  styleProps.colorScheme ??= colorScheme;
package/dist/esm/core/system/styled.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styled.js","names":["isUndefined","createdDom","cx","splitObject","createContext","filterUndefined","runIfFn","toKebabCase","isString","toArray","filterEmpty"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type {\n As,\n HTMLProps,\n ShouldForwardProp,\n StyledComponent,\n} from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.type\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport { getRegisteredStyles, registerStyles } from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nfunction normalizeHostSelector(rule: string, className: string) {\n const selector = `.${className}`\n\n return rule\n .replaceAll(\n `${selector}:host([data-mode=dark]) ${selector}`,\n `:host([data-mode=dark]) ${selector}`,\n )\n .replaceAll(\n `${selector}:host([data-mode=light]) ${selector}`,\n `:host([data-mode=light]) ${selector}`,\n )\n}\n\nfunction insertStyles(cache: EmotionCache, serialized: SerializedStyles) {\n const className = `${cache.key}-${serialized.name}`\n\n if (!isUndefined(cache.inserted[serialized.name])) return\n\n const sheet = Object.create(cache.sheet) as typeof cache.sheet\n\n sheet.insert = (rule) => {\n cache.sheet.insert(normalizeHostSelector(rule, className))\n }\n\n let styleForSsr = \"\"\n let current: SerializedStyles | undefined = serialized\n\n do {\n const style =\n cache.insert(\n serialized === current ? `.${className}` : \"\",\n current,\n sheet,\n true,\n ) || undefined\n\n if (!createdDom() && !isUndefined(style))\n styleForSsr += normalizeHostSelector(style, className)\n\n current = current.next\n } while (current !== undefined)\n\n return styleForSsr || undefined\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport const [HydrationContext, useHydrationContext] = createContext<boolean>({\n name: \"HydrationContext\",\n strict: false,\n})\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) | string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean | ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string | undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const suppressHydrationWarning = useHydrationContext()\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, ...forwardProps } = rest\n\n return [toArray(css), colorScheme, forwardProps]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n forwardProps.suppressHydrationWarning ??= suppressHydrationWarning\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps: HTMLProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <HydrationContext value={mergedProps.suppressHydrationWarning}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </HydrationContext>\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName || \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"styled.js","names":["isUndefined","createdDom","cx","splitObject","createContext","filterUndefined","runIfFn","toKebabCase","isString","toArray","filterEmpty"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type {\n As,\n HTMLProps,\n ShouldForwardProp,\n StyledComponent,\n} from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.type\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport { getRegisteredStyles, registerStyles } from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n mergeProps,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nfunction normalizeHostSelector(rule: string, className: string) {\n const selector = `.${className}`\n\n return rule\n .replaceAll(\n `${selector}:host([data-mode=dark]) ${selector}`,\n `:host([data-mode=dark]) ${selector}`,\n )\n .replaceAll(\n `${selector}:host([data-mode=light]) ${selector}`,\n `:host([data-mode=light]) ${selector}`,\n )\n}\n\nfunction insertStyles(cache: EmotionCache, serialized: SerializedStyles) {\n const className = `${cache.key}-${serialized.name}`\n\n if (!isUndefined(cache.inserted[serialized.name])) return\n\n const sheet = Object.create(cache.sheet) as typeof cache.sheet\n\n sheet.insert = (rule) => {\n cache.sheet.insert(normalizeHostSelector(rule, className))\n }\n\n let styleForSsr = \"\"\n let current: SerializedStyles | undefined = serialized\n\n do {\n const style =\n cache.insert(\n serialized === current ? `.${className}` : \"\",\n current,\n sheet,\n true,\n ) || undefined\n\n if (!createdDom() && !isUndefined(style))\n styleForSsr += normalizeHostSelector(style, className)\n\n current = current.next\n } while (current !== undefined)\n\n return styleForSsr || undefined\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport const [HydrationContext, useHydrationContext] = createContext<boolean>({\n name: \"HydrationContext\",\n strict: false,\n})\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) | string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean | ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string | undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const suppressHydrationWarning = useHydrationContext()\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, attrs, ...forwardProps } = rest\n\n return [\n toArray(css),\n colorScheme,\n mergeProps(forwardProps, attrs ?? {})(),\n ]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n forwardProps.suppressHydrationWarning ??= suppressHydrationWarning\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps: HTMLProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <HydrationContext value={mergedProps.suppressHydrationWarning}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </HydrationContext>\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName || \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":"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"}
package/dist/types/components/calendar/calendar.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.type.js";
3
3
  import "../../index.js";
4
- export declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "weekday" | "day" | "months" | "years" | "weeks" | "control" | "prev", {
4
+ export declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks" | "prev", {
5
5
  /**
6
6
  * If `true`, the calendar will be fixed rows.
7
7
  *
@@ -73,6 +73,6 @@ export declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "ce
73
73
  "--font-size": "fontSizes.xl";
74
74
  };
75
75
  };
76
- }, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "weekday" | "day" | "months" | "years" | "weeks" | "control" | "prev">>>;
76
+ }, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks" | "prev">>>;
77
77
  export type CalendarStyle = typeof calendarStyle;
78
78
  //# sourceMappingURL=calendar.style.d.ts.map
package/dist/types/components/carousel/carousel.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
3
3
  import "../../index.js";
4
- export declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators">>, {
4
+ export declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators">>, {
5
5
  sm: {
6
6
  root: {
7
7
  h: "sm";
@@ -17,6 +17,6 @@ export declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root"
17
17
  h: "lg";
18
18
  };
19
19
  };
20
- }, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators">>>;
20
+ }, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators">>>;
21
21
  export type CarouselStyle = typeof carouselStyle;
22
22
  //# sourceMappingURL=carousel.style.d.ts.map
package/dist/types/components/checkbox-card/checkbox-card.d.ts CHANGED
@@ -63,7 +63,7 @@ export interface CheckboxCardRootProps<Y extends string = string> extends Merge<
63
63
  */
64
64
  rootProps?: HTMLStyledProps<"label">;
65
65
  }
66
- declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
66
+ declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
67
67
  justify: {
68
68
  end: {
69
69
  addon: {
@@ -209,7 +209,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
209
209
  };
210
210
  };
211
211
  };
212
- }>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: import("react").Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
212
+ }>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: import("react").Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
213
213
  justify: {
214
214
  end: {
215
215
  addon: {
@@ -355,7 +355,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
355
355
  };
356
356
  };
357
357
  };
358
- }>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
358
+ }>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
359
359
  justify: {
360
360
  end: {
361
361
  addon: {
package/dist/types/components/checkbox-card/checkbox-card.style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import "../../index.js";
3
- export declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
3
+ export declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
4
4
  /**
5
5
  * The justify indicator of the component
6
6
  *
package/dist/types/components/color-selector/use-color-selector.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ColorFormat } from "../../utils/index.js";
2
- import { HTMLProps, PropGetter, RequiredPropGetter, StyledProps } from "../../core/components/index.type.js";
2
+ import { As, HTMLProps, PropGetter, RequiredPropGetter, StyledProps } from "../../core/components/index.type.js";
3
3
  import "../../core/index.js";
4
4
  import { UseSliderProps } from "../slider/use-slider.js";
5
5
  import "../slider/index.js";
@@ -68,7 +68,7 @@ export declare const useColorSelector: ({ fallbackValue, defaultValue, disabled,
68
68
  getColorSwatchGroupProps: PropGetter<"div", undefined, undefined>;
69
69
  getColorSwatchItemProps: RequiredPropGetter<"div", {
70
70
  value: string;
71
- }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size" | keyof StyledProps> & import("react").DataAttributes & {
71
+ }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size" | keyof StyledProps<As>> & import("react").DataAttributes & {
72
72
  color: string;
73
73
  }>;
74
74
  getEyeDropperProps: PropGetter<"div", undefined, undefined>;
package/dist/types/components/data-list/data-list.style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import "../../index.js";
3
- export declare const dataListStyle: ComponentSlotStyle<"term" | "root" | "item" | "description", {
3
+ export declare const dataListStyle: ComponentSlotStyle<"term" | "root" | "description" | "item", {
4
4
  /**
5
5
  * The orientation of the data list.
6
6
  *
package/dist/types/components/empty-state/empty-state.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
3
3
  import "../../index.js";
4
- export declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "description", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>, {
4
+ export declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "description" | "indicator", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "description" | "indicator">>, {
5
5
  sm: {
6
6
  content: {
7
7
  gap: "xs";
@@ -47,6 +47,6 @@ export declare const emptyState: ComponentSlotStyle<"title" | "content" | "root"
47
47
  fontSize: "xl";
48
48
  };
49
49
  };
50
- }, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>>;
50
+ }, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "description" | "indicator">>>;
51
51
  export type EmptyState = typeof emptyState;
52
52
  //# sourceMappingURL=empty-state.style.d.ts.map
package/dist/types/components/menu/menu.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
3
3
  import "../../index.js";
4
- export declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>, {
4
+ export declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>, {
5
5
  sm: {
6
6
  command: {
7
7
  fontSize: "2xs";
@@ -86,6 +86,6 @@ export declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label"
86
86
  px: "2";
87
87
  };
88
88
  };
89
- }, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>>;
89
+ }, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>>;
90
90
  export type MenuStyle = typeof menuStyle;
91
91
  //# sourceMappingURL=menu.style.d.ts.map
package/dist/types/components/number-input/number-input.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import { CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
3
3
  import "../../index.js";
4
- export declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "control" | "decrement" | "increment", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "control" | "decrement" | "increment">>, {
4
+ export declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "decrement" | "increment" | "field" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "decrement" | "increment" | "field" | "control">>, {
5
5
  xs: {
6
6
  control: {
7
7
  boxSize: "calc({--height} - {spaces.2})";
package/dist/types/components/radio-card/radio-card.d.ts CHANGED
@@ -55,7 +55,7 @@ export interface RadioCardRootProps<Y extends string = string> extends Merge<HTM
55
55
  */
56
56
  rootProps?: HTMLStyledProps<"label">;
57
57
  }
58
- declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
58
+ declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
59
59
  justify: {
60
60
  end: {
61
61
  addon: {
@@ -228,7 +228,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
228
228
  };
229
229
  };
230
230
  };
231
- }>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: import("react").Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
231
+ }>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: import("react").Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
232
232
  justify: {
233
233
  end: {
234
234
  addon: {
@@ -401,7 +401,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
401
401
  };
402
402
  };
403
403
  };
404
- }>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
404
+ }>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
405
405
  justify: {
406
406
  end: {
407
407
  addon: {
package/dist/types/components/radio-card/radio-card.style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import "../../index.js";
3
- export declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
3
+ export declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
4
4
  /**
5
5
  * The justify indicator of the component
6
6
  *
package/dist/types/components/segmented-control/segmented-control.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.type.js";
3
3
  import "../../index.js";
4
- export declare const segmentedControlStyle: ComponentSlotStyle<"root" | "item" | "indicator", {
4
+ export declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "item", {
5
5
  /**
6
6
  * If `true`, the segmented control will be full rounded.
7
7
  *
@@ -113,6 +113,6 @@ export declare const segmentedControlStyle: ComponentSlotStyle<"root" | "item" |
113
113
  };
114
114
  };
115
115
  };
116
- }, CSSModifierObject<CSSSlotObject<"root" | "item" | "indicator">>>;
116
+ }, CSSModifierObject<CSSSlotObject<"root" | "indicator" | "item">>>;
117
117
  export type SegmentedControlStyle = typeof segmentedControlStyle;
118
118
  //# sourceMappingURL=segmented-control.style.d.ts.map
package/dist/types/components/steps/steps.style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import "../../index.js";
3
- export declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "item" | "indicator" | "description", {
3
+ export declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "description" | "indicator" | "item", {
4
4
  /**
5
5
  * The orientation of the steps.
6
6
  *
package/dist/types/components/timeline/timeline.d.ts CHANGED
@@ -61,7 +61,7 @@ declare const TimelinePropsContext: import("react").Context<Partial<TimelineRoot
61
61
  *
62
62
  * @see https://yamada-ui.com/docs/components/timeline
63
63
  */
64
- export declare const TimelineRoot: Component<({ variant: variantProp, children, index, items, ...rest }: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "item" | "indicator" | "description" | "connector", {
64
+ export declare const TimelineRoot: Component<({ variant: variantProp, children, index, items, ...rest }: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "description" | "indicator" | "item" | "connector", {
65
65
  align: {
66
66
  center: {
67
67
  content: {
package/dist/types/components/timeline/timeline.style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import "../../index.js";
3
- export declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "item" | "indicator" | "description" | "connector", {
3
+ export declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "description" | "indicator" | "item" | "connector", {
4
4
  /**
5
5
  * The alignment of the timeline.
6
6
  *
package/dist/types/components/tree/tree.style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.type.js";
2
2
  import "../../index.js";
3
- export declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "item" | "indicator", {
3
+ export declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "indicator" | "item", {
4
4
  /**
5
5
  * The shape of the component
6
6
  *
package/dist/types/core/components/index.type.d.ts CHANGED
@@ -11,7 +11,7 @@ declare module "react" {
11
11
  }
12
12
  }
13
13
  export type DOMElement = keyof React.JSX.IntrinsicElements;
14
- export interface StyledProps extends CSSProps {
14
+ export interface StyledProps<Y extends As = As> extends CSSProps {
15
15
  /**
16
16
  * The HTML element to render.
17
17
  */
@@ -20,13 +20,17 @@ export interface StyledProps extends CSSProps {
20
20
  * Merges its props onto its immediate child.
21
21
  */
22
22
  asChild?: boolean;
23
+ /**
24
+ * The HTML or SVG attributes to pass directly to the rendered element, bypassing style prop processing.
25
+ */
26
+ attrs?: Omit<React.ComponentPropsWithoutRef<Y>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | keyof React.DOMAttributes<Y>> & React.DataAttributes;
23
27
  }
24
28
  export type WithoutAs<Y extends object> = Omit<Y, "as">;
25
29
  export type WithoutRef<Y extends object> = Omit<Y, "ref">;
26
30
  export type OmitProps<Y extends object = {}, M extends object = {}> = Omit<Y, "as" | keyof M> & WithoutAs<M>;
27
31
  type OverrideProps<Y extends object, M extends object> = M & Omit<Y, "as" | keyof M>;
28
32
  type ComponentConditionalProps<Y extends As, M extends As, D extends object = {}> = Y extends M ? OverrideProps<React.ComponentProps<Y>, D> : OverrideProps<React.ComponentProps<M>, D>;
29
- type ComponentProps$1<Y extends As, M extends As, D extends object = {}> = ComponentConditionalProps<Y, M, Omit<D, "as" | "ref">> & {
33
+ type ComponentProps$1<Y extends As, M extends As, D extends object = {}> = ComponentConditionalProps<Y, M, Omit<D, "as" | "attrs" | "ref">> & Pick<StyledProps<M>, "attrs"> & {
30
34
  as?: M;
31
35
  };
32
36
  export interface ComponentArgs extends Pick<React.FunctionComponent, "displayName" | "propTypes"> {}
@@ -35,13 +39,13 @@ export interface Component<Y extends As, D extends object = {}> extends Componen
35
39
  }
36
40
  export type GenericsComponent<Y extends Function> = ComponentArgs & Y;
37
41
  export type As = React.ElementType;
38
- export interface StyledComponent<Y extends As = As, M extends object = {}> extends Component<Y, Merge<StyledProps, M>> {}
42
+ export interface StyledComponent<Y extends As = As, M extends object = {}> extends Component<Y, Merge<StyledProps<Y>, M>> {}
39
43
  export interface HTMLRefAttributes<Y extends DOMElement = "div"> {
40
44
  ref?: React.Ref<React.ComponentRef<Y>>;
41
45
  }
42
46
  export interface HTMLElementProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {}
43
47
  export type HTMLProps<Y extends DOMElement = "div"> = Omit<React.JSX.IntrinsicElements[Y], "size" | keyof StyledProps> & React.DataAttributes;
44
- export type HTMLStyledProps<Y extends DOMElement = "div"> = Merge<HTMLProps<Y>, StyledProps>;
48
+ export type HTMLStyledProps<Y extends DOMElement = "div"> = Merge<HTMLProps<Y>, StyledProps<Y>>;
45
49
  export type HTMLStyledPropsWithoutAs<Y extends DOMElement = "div"> = WithoutAs<HTMLStyledProps<Y>>;
46
50
  export type HTMLStyledPropsWithoutRef<Y extends DOMElement = "div"> = Omit<HTMLStyledProps<Y>, "ref">;
47
51
  type ConditionalProps<Y> = Y extends DOMElement ? HTMLProps<Y> : Y;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@yamada-ui/react",
3
3
  "type": "module",
4
- "version": "2.4.0-next-20261111072902",
4
+ "version": "2.4.0-next-20261111080835",
5
5
  "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
6
6
  "keywords": [
7
7
  "yamada",