npm - @yamada-ui/react - Versions diffs - 2.2.1-dev-20260412151047 → 2.2.1-dev-20260413015504 - Mend

@yamada-ui/react 2.2.1-dev-20260412151047 → 2.2.1-dev-20260413015504

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 (206) hide show

package/dist/cjs/components/color-selector/color-selector.cjs CHANGED Viewed

@@ -3,6 +3,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_var = require('../../core/system/var.cjs');
 const require_factory = require('../../core/system/factory.cjs');
+const require_props = require('../../core/components/props.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
 const require_pipette_icon = require('../icon/icons/pipette-icon.cjs');
@@ -98,10 +99,7 @@ const ColorSelectorSaturationSlider = withContext((props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_saturation_slider.SaturationSliderRoot, {
 		size,
 		shape,
-		...getSaturationSliderProps({
-			...saturationSliderProps,
-			...props
-		})
+		...getSaturationSliderProps(require_props.mergeProps(saturationSliderProps, props)())
 	});
 }, "saturationSlider")();
 const ColorSelectorHueSlider = withContext((props) => {
@@ -109,10 +107,7 @@ const ColorSelectorHueSlider = withContext((props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hue_slider.HueSliderRoot, {
 		size,
 		shape,
-		...getHueSliderProps({
-			...hueSliderProps,
-			...props
-		})
+		...getHueSliderProps(require_props.mergeProps(hueSliderProps, props)())
 	});
 }, "hueSlider")();
 const ColorSelectorAlphaSlider = withContext((props) => {
@@ -121,10 +116,7 @@ const ColorSelectorAlphaSlider = withContext((props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alpha_slider.AlphaSliderRoot, {
 		size,
 		shape,
-		...getAlphaSliderProps({
-			...alphaSliderProps,
-			...props
-		})
+		...getAlphaSliderProps(require_props.mergeProps(alphaSliderProps, props)())
 	});
 }, "alphaSlider")();
 const ColorSelectorEyeDropper = withContext("div", "eyeDropper")(void 0, ({ children, icon, ...rest }) => {
@@ -136,25 +128,15 @@ const ColorSelectorEyeDropper = withContext("div", "eyeDropper")(void 0, ({ chil
 });
 const ColorSelectorColorSwatchGroupLabel = withContext("span", "colorSwatchGroupLabel")(void 0, (props) => {
 	const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } = useComponentContext();
-	return getColorSwatchGroupLabelProps({
-		...colorSwatchGroupLabelProps,
-		...props
-	});
+	return getColorSwatchGroupLabelProps(require_props.mergeProps(colorSwatchGroupLabelProps, props)());
 });
 const ColorSelectorColorSwatchGroup = withContext("div", "colorSwatchGroup")(void 0, ({ children, ...rest }) => {
 	const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } = useComponentContext();
-	return getColorSwatchGroupProps({
-		children: children ?? colorSwatchGroupProps?.children ?? colorSwatches?.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorSelectorColorSwatchItem, { value }, index)),
-		...colorSwatchGroupProps,
-		...rest
-	});
+	return getColorSwatchGroupProps(require_props.mergeProps(colorSwatchGroupProps, rest, { children: children ?? colorSwatchGroupProps?.children ?? colorSwatches?.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorSelectorColorSwatchItem, { value }, index)) })());
 });
 const ColorSelectorColorSwatchItem = withContext(require_color_swatch.ColorSwatch, "colorSwatchItem")(void 0, (props) => {
 	const { colorSwatchItemProps, getColorSwatchItemProps } = useComponentContext();
-	return getColorSwatchItemProps({
-		...colorSwatchItemProps,
-		...props
-	});
+	return getColorSwatchItemProps(require_props.mergeProps(colorSwatchItemProps, props)());
 });
 //#endregion

package/dist/cjs/components/color-selector/color-selector.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-selector.cjs","names":["createSlotComponent","colorSelectorStyle","useColorSelector","styled","varAttr","PipetteIcon","ColorSwatch"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n UseColorSelectorProps,\n UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n extends\n Pick<\n ColorSelectorRootProps,\n \| \"alphaSliderProps\"\n \| \"colorSwatches\"\n \| \"colorSwatchGroupLabelProps\"\n \| \"colorSwatchGroupProps\"\n \| \"colorSwatchItemProps\"\n \| \"hueSliderProps\"\n \| \"saturationSliderProps\"\n \| \"shape\"\n \| \"size\"\n >,\n Pick<\n UseColorSelectorReturn,\n \| \"alpha\"\n \| \"getAlphaSliderProps\"\n \| \"getColorSwatchGroupLabelProps\"\n \| \"getColorSwatchGroupProps\"\n \| \"getColorSwatchItemProps\"\n \| \"getEyeDropperProps\"\n \| \"getHueSliderProps\"\n \| \"getSaturationSliderProps\"\n > {}\n\nexport interface ColorSelectorRootProps\n extends\n Merge<HTMLStyledProps, UseColorSelectorProps>,\n ThemeProps<ColorSelectorStyle> {\n /*\n An array of colors in one of the supported formats.\n * Used to render swatches list below the color selector.\n /\n colorSwatches?: string[]\n /\n The number of columns in the color swatch group.\n \n @default 8\n /\n colorSwatchGroupColumns?: StyleValue<number>\n /\n The label of the color swatch group.\n /\n colorSwatchGroupLabel?: ReactNode\n /\n If `true`, the alpha slider will be displayed.\n \n @default false\n /\n withAlpha?: boolean\n /\n Props for the alpha slider.\n /\n alphaSliderProps?: ColorSelectorAlphaSliderProps\n /\n Props for the color swatch group label.\n /\n colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n /\n Props for the color swatch group.\n /\n colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n /\n Props for the color swatch item.\n /\n colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n /\n Props for the hue slider.\n /\n hueSliderProps?: ColorSelectorHueSliderProps\n /\n Props for the saturation slider.\n /\n saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorSelectorPropsContext,\n useComponentContext,\n usePropsContext: useColorSelectorPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n ColorSelectorRootProps,\n ColorSelectorStyle,\n ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/\n `ColorSelector` is a component used by the user to select a color.\n \n @see https://yamada-ui.com/docs/components/color-selector\n /\nexport const ColorSelectorRoot = withProvider<\n \"div\",\n ColorSelectorRootProps,\n \"shape\" \| \"size\"\n>(\n ({\n size,\n children,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n withAlpha,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...rest\n }) => {\n const {\n alpha,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n } = useColorSelector(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <ColorSelectorSaturationSlider />\n <ColorSelectorHueSlider />\n <ColorSelectorAlphaSlider />\n\n {colorSwatchGroupLabel ? (\n <ColorSelectorColorSwatchGroupLabel>\n {colorSwatchGroupLabel}\n </ColorSelectorColorSwatchGroupLabel>\n ) : null}\n {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n </>\n )\n }, [children, colorSwatchGroupLabel, colorSwatches])\n const context = useMemo(\n () => ({\n size,\n alpha: withAlpha ?? alpha,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n hueSliderProps,\n saturationSliderProps,\n }),\n [\n size,\n withAlpha,\n alpha,\n shape,\n colorSwatches,\n colorSwatchGroupLabel,\n alphaSliderProps,\n getAlphaSliderProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n \"input\",\n ColorSelectorSaturationSliderProps\n>((props) => {\n const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n useComponentContext()\n\n return (\n <SaturationSlider.Root\n size={size}\n shape={shape}\n {...getSaturationSliderProps({ ...saturationSliderProps, ...props })}\n />\n )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n \"input\",\n ColorSelectorHueSliderProps\n>((props) => {\n const { size, shape, getHueSliderProps, hueSliderProps } =\n useComponentContext()\n\n return (\n <HueSlider.Root\n size={size}\n shape={shape}\n {...getHueSliderProps({ ...hueSliderProps, ...props })}\n />\n )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n \"input\",\n ColorSelectorAlphaSliderProps\n>((props) => {\n const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n useComponentContext()\n\n if (!alpha) return null\n\n return (\n <AlphaSlider.Root\n size={size}\n shape={shape}\n {...getAlphaSliderProps({ ...alphaSliderProps, ...props })}\n />\n )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n /\n The icon to display in the eye dropper.\n /\n icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n \"div\",\n ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon \|\| children \|\| <PipetteIcon />,\n ...rest,\n })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n \"span\",\n ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n useComponentContext()\n\n return getColorSwatchGroupLabelProps({\n ...colorSwatchGroupLabelProps,\n ...props,\n })\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n \"div\",\n ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n useComponentContext()\n\n return getColorSwatchGroupProps({\n children:\n children ??\n colorSwatchGroupProps?.children ??\n colorSwatches?.map((value, index) => (\n <ColorSelectorColorSwatchItem key={index} value={value} />\n )),\n ...colorSwatchGroupProps,\n ...rest,\n })\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n ColorSwatchProps,\n \"color\"\n> {\n /\n The value of the color swatch.\n */\n value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n \"div\",\n ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n const { colorSwatchItemProps, getColorSwatchItemProps } =\n useComponentContext()\n\n return getColorSwatchItemProps({ ...colorSwatchItemProps, ...props })\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"color-selector.cjs","names":["createSlotComponent","colorSelectorStyle","useColorSelector","styled","varAttr","mergeProps","PipetteIcon","ColorSwatch"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n UseColorSelectorProps,\n UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n extends\n Pick<\n ColorSelectorRootProps,\n \| \"alphaSliderProps\"\n \| \"colorSwatches\"\n \| \"colorSwatchGroupLabelProps\"\n \| \"colorSwatchGroupProps\"\n \| \"colorSwatchItemProps\"\n \| \"hueSliderProps\"\n \| \"saturationSliderProps\"\n \| \"shape\"\n \| \"size\"\n >,\n Pick<\n UseColorSelectorReturn,\n \| \"alpha\"\n \| \"getAlphaSliderProps\"\n \| \"getColorSwatchGroupLabelProps\"\n \| \"getColorSwatchGroupProps\"\n \| \"getColorSwatchItemProps\"\n \| \"getEyeDropperProps\"\n \| \"getHueSliderProps\"\n \| \"getSaturationSliderProps\"\n > {}\n\nexport interface ColorSelectorRootProps\n extends\n Merge<HTMLStyledProps, UseColorSelectorProps>,\n ThemeProps<ColorSelectorStyle> {\n /*\n An array of colors in one of the supported formats.\n * Used to render swatches list below the color selector.\n /\n colorSwatches?: string[]\n /\n The number of columns in the color swatch group.\n \n @default 8\n /\n colorSwatchGroupColumns?: StyleValue<number>\n /\n The label of the color swatch group.\n /\n colorSwatchGroupLabel?: ReactNode\n /\n If `true`, the alpha slider will be displayed.\n \n @default false\n /\n withAlpha?: boolean\n /\n Props for the alpha slider.\n /\n alphaSliderProps?: ColorSelectorAlphaSliderProps\n /\n Props for the color swatch group label.\n /\n colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n /\n Props for the color swatch group.\n /\n colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n /\n Props for the color swatch item.\n /\n colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n /\n Props for the hue slider.\n /\n hueSliderProps?: ColorSelectorHueSliderProps\n /\n Props for the saturation slider.\n /\n saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorSelectorPropsContext,\n useComponentContext,\n usePropsContext: useColorSelectorPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n ColorSelectorRootProps,\n ColorSelectorStyle,\n ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/\n `ColorSelector` is a component used by the user to select a color.\n \n @see https://yamada-ui.com/docs/components/color-selector\n /\nexport const ColorSelectorRoot = withProvider<\n \"div\",\n ColorSelectorRootProps,\n \"shape\" \| \"size\"\n>(\n ({\n size,\n children,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n withAlpha,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...rest\n }) => {\n const {\n alpha,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n } = useColorSelector(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <ColorSelectorSaturationSlider />\n <ColorSelectorHueSlider />\n <ColorSelectorAlphaSlider />\n\n {colorSwatchGroupLabel ? (\n <ColorSelectorColorSwatchGroupLabel>\n {colorSwatchGroupLabel}\n </ColorSelectorColorSwatchGroupLabel>\n ) : null}\n {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n </>\n )\n }, [children, colorSwatchGroupLabel, colorSwatches])\n const context = useMemo(\n () => ({\n size,\n alpha: withAlpha ?? alpha,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n hueSliderProps,\n saturationSliderProps,\n }),\n [\n size,\n withAlpha,\n alpha,\n shape,\n colorSwatches,\n colorSwatchGroupLabel,\n alphaSliderProps,\n getAlphaSliderProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n \"input\",\n ColorSelectorSaturationSliderProps\n>((props) => {\n const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n useComponentContext()\n\n return (\n <SaturationSlider.Root\n size={size}\n shape={shape}\n {...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())}\n />\n )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n \"input\",\n ColorSelectorHueSliderProps\n>((props) => {\n const { size, shape, getHueSliderProps, hueSliderProps } =\n useComponentContext()\n\n return (\n <HueSlider.Root\n size={size}\n shape={shape}\n {...getHueSliderProps(mergeProps(hueSliderProps, props)())}\n />\n )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n \"input\",\n ColorSelectorAlphaSliderProps\n>((props) => {\n const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n useComponentContext()\n\n if (!alpha) return null\n\n return (\n <AlphaSlider.Root\n size={size}\n shape={shape}\n {...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())}\n />\n )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n /\n The icon to display in the eye dropper.\n /\n icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n \"div\",\n ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon \|\| children \|\| <PipetteIcon />,\n ...rest,\n })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n \"span\",\n ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n useComponentContext()\n\n return getColorSwatchGroupLabelProps(\n mergeProps(colorSwatchGroupLabelProps, props)(),\n )\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n \"div\",\n ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n useComponentContext()\n const computedChildren =\n children ??\n colorSwatchGroupProps?.children ??\n colorSwatches?.map((value, index) => (\n <ColorSelectorColorSwatchItem key={index} value={value} />\n ))\n\n return getColorSwatchGroupProps(\n mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })(),\n )\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n ColorSwatchProps,\n \"color\"\n> {\n /\n The value of the color swatch.\n */\n value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n \"div\",\n ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n const { colorSwatchItemProps, getColorSwatchItemProps } =\n useComponentContext()\n\n return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)())\n})\n"],"mappings":"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"}

package/dist/esm/components/color-selector/color-selector.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { varAttr } from "../../core/system/var.js";
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { PipetteIcon } from "../icon/icons/pipette-icon.js";
@@ -97,10 +98,7 @@ const ColorSelectorSaturationSlider = withContext((props) => {
 	return /* @__PURE__ */ jsx(SaturationSliderRoot, {
 		size,
 		shape,
-		...getSaturationSliderProps({
-			...saturationSliderProps,
-			...props
-		})
+		...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())
 	});
 }, "saturationSlider")();
 const ColorSelectorHueSlider = withContext((props) => {
@@ -108,10 +106,7 @@ const ColorSelectorHueSlider = withContext((props) => {
 	return /* @__PURE__ */ jsx(HueSliderRoot, {
 		size,
 		shape,
-		...getHueSliderProps({
-			...hueSliderProps,
-			...props
-		})
+		...getHueSliderProps(mergeProps(hueSliderProps, props)())
 	});
 }, "hueSlider")();
 const ColorSelectorAlphaSlider = withContext((props) => {
@@ -120,10 +115,7 @@ const ColorSelectorAlphaSlider = withContext((props) => {
 	return /* @__PURE__ */ jsx(AlphaSliderRoot, {
 		size,
 		shape,
-		...getAlphaSliderProps({
-			...alphaSliderProps,
-			...props
-		})
+		...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())
 	});
 }, "alphaSlider")();
 const ColorSelectorEyeDropper = withContext("div", "eyeDropper")(void 0, ({ children, icon, ...rest }) => {
@@ -135,25 +127,15 @@ const ColorSelectorEyeDropper = withContext("div", "eyeDropper")(void 0, ({ chil
 });
 const ColorSelectorColorSwatchGroupLabel = withContext("span", "colorSwatchGroupLabel")(void 0, (props) => {
 	const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } = useComponentContext();
-	return getColorSwatchGroupLabelProps({
-		...colorSwatchGroupLabelProps,
-		...props
-	});
+	return getColorSwatchGroupLabelProps(mergeProps(colorSwatchGroupLabelProps, props)());
 });
 const ColorSelectorColorSwatchGroup = withContext("div", "colorSwatchGroup")(void 0, ({ children, ...rest }) => {
 	const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } = useComponentContext();
-	return getColorSwatchGroupProps({
-		children: children ?? colorSwatchGroupProps?.children ?? colorSwatches?.map((value, index) => /* @__PURE__ */ jsx(ColorSelectorColorSwatchItem, { value }, index)),
-		...colorSwatchGroupProps,
-		...rest
-	});
+	return getColorSwatchGroupProps(mergeProps(colorSwatchGroupProps, rest, { children: children ?? colorSwatchGroupProps?.children ?? colorSwatches?.map((value, index) => /* @__PURE__ */ jsx(ColorSelectorColorSwatchItem, { value }, index)) })());
 });
 const ColorSelectorColorSwatchItem = withContext(ColorSwatch, "colorSwatchItem")(void 0, (props) => {
 	const { colorSwatchItemProps, getColorSwatchItemProps } = useComponentContext();
-	return getColorSwatchItemProps({
-		...colorSwatchItemProps,
-		...props
-	});
+	return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)());
 });
 //#endregion

package/dist/esm/components/color-selector/color-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-selector.js","names":["SaturationSlider.Root","HueSlider.Root","AlphaSlider.Root"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n UseColorSelectorProps,\n UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n extends\n Pick<\n ColorSelectorRootProps,\n \| \"alphaSliderProps\"\n \| \"colorSwatches\"\n \| \"colorSwatchGroupLabelProps\"\n \| \"colorSwatchGroupProps\"\n \| \"colorSwatchItemProps\"\n \| \"hueSliderProps\"\n \| \"saturationSliderProps\"\n \| \"shape\"\n \| \"size\"\n >,\n Pick<\n UseColorSelectorReturn,\n \| \"alpha\"\n \| \"getAlphaSliderProps\"\n \| \"getColorSwatchGroupLabelProps\"\n \| \"getColorSwatchGroupProps\"\n \| \"getColorSwatchItemProps\"\n \| \"getEyeDropperProps\"\n \| \"getHueSliderProps\"\n \| \"getSaturationSliderProps\"\n > {}\n\nexport interface ColorSelectorRootProps\n extends\n Merge<HTMLStyledProps, UseColorSelectorProps>,\n ThemeProps<ColorSelectorStyle> {\n /*\n An array of colors in one of the supported formats.\n * Used to render swatches list below the color selector.\n /\n colorSwatches?: string[]\n /\n The number of columns in the color swatch group.\n \n @default 8\n /\n colorSwatchGroupColumns?: StyleValue<number>\n /\n The label of the color swatch group.\n /\n colorSwatchGroupLabel?: ReactNode\n /\n If `true`, the alpha slider will be displayed.\n \n @default false\n /\n withAlpha?: boolean\n /\n Props for the alpha slider.\n /\n alphaSliderProps?: ColorSelectorAlphaSliderProps\n /\n Props for the color swatch group label.\n /\n colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n /\n Props for the color swatch group.\n /\n colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n /\n Props for the color swatch item.\n /\n colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n /\n Props for the hue slider.\n /\n hueSliderProps?: ColorSelectorHueSliderProps\n /\n Props for the saturation slider.\n /\n saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorSelectorPropsContext,\n useComponentContext,\n usePropsContext: useColorSelectorPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n ColorSelectorRootProps,\n ColorSelectorStyle,\n ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/\n `ColorSelector` is a component used by the user to select a color.\n \n @see https://yamada-ui.com/docs/components/color-selector\n /\nexport const ColorSelectorRoot = withProvider<\n \"div\",\n ColorSelectorRootProps,\n \"shape\" \| \"size\"\n>(\n ({\n size,\n children,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n withAlpha,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...rest\n }) => {\n const {\n alpha,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n } = useColorSelector(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <ColorSelectorSaturationSlider />\n <ColorSelectorHueSlider />\n <ColorSelectorAlphaSlider />\n\n {colorSwatchGroupLabel ? (\n <ColorSelectorColorSwatchGroupLabel>\n {colorSwatchGroupLabel}\n </ColorSelectorColorSwatchGroupLabel>\n ) : null}\n {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n </>\n )\n }, [children, colorSwatchGroupLabel, colorSwatches])\n const context = useMemo(\n () => ({\n size,\n alpha: withAlpha ?? alpha,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n hueSliderProps,\n saturationSliderProps,\n }),\n [\n size,\n withAlpha,\n alpha,\n shape,\n colorSwatches,\n colorSwatchGroupLabel,\n alphaSliderProps,\n getAlphaSliderProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n \"input\",\n ColorSelectorSaturationSliderProps\n>((props) => {\n const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n useComponentContext()\n\n return (\n <SaturationSlider.Root\n size={size}\n shape={shape}\n {...getSaturationSliderProps({ ...saturationSliderProps, ...props })}\n />\n )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n \"input\",\n ColorSelectorHueSliderProps\n>((props) => {\n const { size, shape, getHueSliderProps, hueSliderProps } =\n useComponentContext()\n\n return (\n <HueSlider.Root\n size={size}\n shape={shape}\n {...getHueSliderProps({ ...hueSliderProps, ...props })}\n />\n )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n \"input\",\n ColorSelectorAlphaSliderProps\n>((props) => {\n const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n useComponentContext()\n\n if (!alpha) return null\n\n return (\n <AlphaSlider.Root\n size={size}\n shape={shape}\n {...getAlphaSliderProps({ ...alphaSliderProps, ...props })}\n />\n )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n /\n The icon to display in the eye dropper.\n /\n icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n \"div\",\n ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon \|\| children \|\| <PipetteIcon />,\n ...rest,\n })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n \"span\",\n ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n useComponentContext()\n\n return getColorSwatchGroupLabelProps({\n ...colorSwatchGroupLabelProps,\n ...props,\n })\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n \"div\",\n ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n useComponentContext()\n\n return getColorSwatchGroupProps({\n children:\n children ??\n colorSwatchGroupProps?.children ??\n colorSwatches?.map((value, index) => (\n <ColorSelectorColorSwatchItem key={index} value={value} />\n )),\n ...colorSwatchGroupProps,\n ...rest,\n })\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n ColorSwatchProps,\n \"color\"\n> {\n /\n The value of the color swatch.\n */\n value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n \"div\",\n ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n const { colorSwatchItemProps, getColorSwatchItemProps } =\n useComponentContext()\n\n return getColorSwatchItemProps({ ...colorSwatchItemProps, ...props })\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"color-selector.js","names":["SaturationSlider.Root","HueSlider.Root","AlphaSlider.Root"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n UseColorSelectorProps,\n UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n extends\n Pick<\n ColorSelectorRootProps,\n \| \"alphaSliderProps\"\n \| \"colorSwatches\"\n \| \"colorSwatchGroupLabelProps\"\n \| \"colorSwatchGroupProps\"\n \| \"colorSwatchItemProps\"\n \| \"hueSliderProps\"\n \| \"saturationSliderProps\"\n \| \"shape\"\n \| \"size\"\n >,\n Pick<\n UseColorSelectorReturn,\n \| \"alpha\"\n \| \"getAlphaSliderProps\"\n \| \"getColorSwatchGroupLabelProps\"\n \| \"getColorSwatchGroupProps\"\n \| \"getColorSwatchItemProps\"\n \| \"getEyeDropperProps\"\n \| \"getHueSliderProps\"\n \| \"getSaturationSliderProps\"\n > {}\n\nexport interface ColorSelectorRootProps\n extends\n Merge<HTMLStyledProps, UseColorSelectorProps>,\n ThemeProps<ColorSelectorStyle> {\n /*\n An array of colors in one of the supported formats.\n * Used to render swatches list below the color selector.\n /\n colorSwatches?: string[]\n /\n The number of columns in the color swatch group.\n \n @default 8\n /\n colorSwatchGroupColumns?: StyleValue<number>\n /\n The label of the color swatch group.\n /\n colorSwatchGroupLabel?: ReactNode\n /\n If `true`, the alpha slider will be displayed.\n \n @default false\n /\n withAlpha?: boolean\n /\n Props for the alpha slider.\n /\n alphaSliderProps?: ColorSelectorAlphaSliderProps\n /\n Props for the color swatch group label.\n /\n colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n /\n Props for the color swatch group.\n /\n colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n /\n Props for the color swatch item.\n /\n colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n /\n Props for the hue slider.\n /\n hueSliderProps?: ColorSelectorHueSliderProps\n /\n Props for the saturation slider.\n /\n saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorSelectorPropsContext,\n useComponentContext,\n usePropsContext: useColorSelectorPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n ColorSelectorRootProps,\n ColorSelectorStyle,\n ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/\n `ColorSelector` is a component used by the user to select a color.\n \n @see https://yamada-ui.com/docs/components/color-selector\n /\nexport const ColorSelectorRoot = withProvider<\n \"div\",\n ColorSelectorRootProps,\n \"shape\" \| \"size\"\n>(\n ({\n size,\n children,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n withAlpha,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...rest\n }) => {\n const {\n alpha,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n } = useColorSelector(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <ColorSelectorSaturationSlider />\n <ColorSelectorHueSlider />\n <ColorSelectorAlphaSlider />\n\n {colorSwatchGroupLabel ? (\n <ColorSelectorColorSwatchGroupLabel>\n {colorSwatchGroupLabel}\n </ColorSelectorColorSwatchGroupLabel>\n ) : null}\n {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n </>\n )\n }, [children, colorSwatchGroupLabel, colorSwatches])\n const context = useMemo(\n () => ({\n size,\n alpha: withAlpha ?? alpha,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n hueSliderProps,\n saturationSliderProps,\n }),\n [\n size,\n withAlpha,\n alpha,\n shape,\n colorSwatches,\n colorSwatchGroupLabel,\n alphaSliderProps,\n getAlphaSliderProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n \"input\",\n ColorSelectorSaturationSliderProps\n>((props) => {\n const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n useComponentContext()\n\n return (\n <SaturationSlider.Root\n size={size}\n shape={shape}\n {...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())}\n />\n )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n \"input\",\n ColorSelectorHueSliderProps\n>((props) => {\n const { size, shape, getHueSliderProps, hueSliderProps } =\n useComponentContext()\n\n return (\n <HueSlider.Root\n size={size}\n shape={shape}\n {...getHueSliderProps(mergeProps(hueSliderProps, props)())}\n />\n )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n \"input\",\n ColorSelectorAlphaSliderProps\n>((props) => {\n const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n useComponentContext()\n\n if (!alpha) return null\n\n return (\n <AlphaSlider.Root\n size={size}\n shape={shape}\n {...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())}\n />\n )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n /\n The icon to display in the eye dropper.\n /\n icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n \"div\",\n ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon \|\| children \|\| <PipetteIcon />,\n ...rest,\n })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n \"span\",\n ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n useComponentContext()\n\n return getColorSwatchGroupLabelProps(\n mergeProps(colorSwatchGroupLabelProps, props)(),\n )\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n \"div\",\n ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n useComponentContext()\n const computedChildren =\n children ??\n colorSwatchGroupProps?.children ??\n colorSwatches?.map((value, index) => (\n <ColorSelectorColorSwatchItem key={index} value={value} />\n ))\n\n return getColorSwatchGroupProps(\n mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })(),\n )\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n ColorSwatchProps,\n \"color\"\n> {\n /\n The value of the color swatch.\n */\n value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n \"div\",\n ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n const { colorSwatchItemProps, getColorSwatchItemProps } =\n useComponentContext()\n\n return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)())\n})\n"],"mappings":"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"}

package/dist/types/components/accordion/accordion.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react1086 from "react";
+import * as react1217 from "react";
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react1086.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react1217.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/accordion.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/accordion/use-accordion.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react1087 from "react";
+import * as react1199 from "react";
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react1087.Context<{
+declare const AccordionDescendantsContext: react1199.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react1087.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1087.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1199.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react1087.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react1087.RefCallback<HTMLButtonElement>;
+      } | undefined) => react1199.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react1087.RefCallback<HTMLButtonElement>;
+    register: react1199.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react1087.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1087.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1199.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react1087.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react1199.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react1087.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react1199.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1087.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1199.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react1087.Dispatch<react1087.SetStateAction<number>>;
-  setIndex: react1087.Dispatch<react1087.SetStateAction<number | number[]>>;
+  setFocusedIndex: react1199.Dispatch<react1199.SetStateAction<number>>;
+  setIndex: react1199.Dispatch<react1199.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/action-bar/action-bar.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import { UsePopupAnimationProps } from "../popover/popover.js";
 import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react1085 from "react";
+import * as react248 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 //#region src/components/action-bar/action-bar.d.ts
@@ -29,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react1085.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react248.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

package/dist/types/components/airy/airy.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react1084 from "react";
+import * as react249 from "react";
 import { ReactNode } from "react";
 //#region src/components/airy/airy.d.ts
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react1084.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react249.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

package/dist/types/components/alert/alert.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react1083 from "react";
+import * as react1161 from "react";
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react1083.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react1161.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alpha-slider/alpha-slider.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../hue-slider/index.js";
 import "../../index.js";
-import * as react1099 from "react";
+import * as react247 from "react";
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react1099.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react247.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react1082 from "react";
+import * as react246 from "react";
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react1082.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react246.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

package/dist/types/components/autocomplete/autocomplete.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react1080 from "react";
+import * as react245 from "react";
 import { ReactElement, ReactNode } from "react";
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -68,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react1080.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react245.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

package/dist/types/components/autocomplete/autocomplete.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "empty" | "indicator" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "empty" | "indicator" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "empty" | "field" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "empty" | "field" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import "../field/index.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react1074 from "react";
+import * as react239 from "react";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react1074.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react239.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -156,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react1074.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react239.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react1074.Dispatch<react1074.SetStateAction<string>>;
-  setValue: react1074.Dispatch<react1074.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react239.Dispatch<react239.SetStateAction<string>>;
+  setValue: react239.Dispatch<react239.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

package/dist/types/components/avatar/avatar.d.ts CHANGED Viewed

@@ -6,9 +6,9 @@ import "../../core/index.js";
 import { AvatarStyle } from "./avatar.style.js";
 import { UseAvatarProps } from "./use-avatar.js";
 import "../../index.js";
-import * as react1069 from "react";
+import * as react236 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils7 from "@yamada-ui/utils";
+import * as _yamada_ui_utils4 from "@yamada-ui/utils";
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends As | "fragment" = "div", R extends _yamada_ui_utils7.Dict = _yamada_ui_utils7.Dict<any>>(el: H | react1069.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils4.Dict = _yamada_ui_utils4.Dict<any>>(el: H | react236.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1069.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1069.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils7.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react236.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react236.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils4.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils7.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils4.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

package/dist/types/components/avatar/avatar.style.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import "../../index.js";
 //#region src/components/avatar/avatar.style.d.ts
-declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
+declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
   /**
    * The shape of the component
    *

package/dist/types/components/avatar/use-avatar-group.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react1072 from "react";
+import * as react234 from "react";
 //#region src/components/avatar/use-avatar-group.d.ts
 interface UseAvatarGroupProps extends HTMLProps {
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
   reverse,
   ...rest
 }?: UseAvatarGroupProps) => {
-  children: react1072.ReactElement<any, string | react1072.JSXElementConstructor<any>>[];
+  children: react234.ReactElement<any, string | react234.JSXElementConstructor<any>>[];
   excess: number;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };