@yamada-ui/color-picker 1.0.6-dev-20240218063424 → 1.1.0

package/dist/{chunk-NKOO74IZ.mjs → chunk-RLVNTNR5.mjs}

@@ -22,7 +22,7 @@ import {
   useMultiComponentStyle,
   omitThemeProps
 } from "@yamada-ui/core";
-import { cx } from "@yamada-ui/utils";
+import { cx, runIfFunc } from "@yamada-ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ColorSelector = forwardRef(
   ({ size, ...props }, ref) => {
@@ -32,6 +32,7 @@ var ColorSelector = forwardRef(
     });
     const {
       className,
+      children,
       withResult = true,
       withPicker = true,
       withChannel = true,
@@ -55,6 +56,7 @@ var ColorSelector = forwardRef(
       ...computedProps
     } = omitThemeProps(mergedProps);
     const {
+      value,
       getContainerProps,
       getInputProps,
       getSaturationSliderProps,
@@ -65,7 +67,7 @@ var ColorSelector = forwardRef(
       flexDirection: "column",
       ...styles.container
     };
-    return /* @__PURE__ */ jsx(ColorSelectorProvider, { value: { styles, size, ...rest }, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(ColorSelectorProvider, { value: { styles, size, value, ...rest }, children: /* @__PURE__ */ jsxs(
       ui.div,
       {
         ref,
@@ -113,7 +115,8 @@ var ColorSelector = forwardRef(
                 ...swatchesProps
               }
             }
-          )
+          ),
+          runIfFunc(children, { value })
         ]
       }
     ) });

package/dist/{chunk-EHKRI7PV.mjs → chunk-VVKPF2XB.mjs}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-RSF3HAQH.mjs";
 import {
   ColorSelector
-} from "./chunk-NKOO74IZ.mjs";
+} from "./chunk-RLVNTNR5.mjs";
 import {
   EyeDropperIcon
 } from "./chunk-J62WY74P.mjs";
@@ -38,6 +38,7 @@ var ColorPicker = forwardRef(
     });
     let {
       className,
+      children,
       withEyeDropper = true,
       color,
       h,
@@ -131,7 +132,8 @@ var ColorPicker = forwardRef(
                     alphaSliderProps,
                     channelsProps,
                     channelProps
-                  })
+                  }),
+                  children
                 }
               )
             }

package/dist/color-picker.d.mts

@@ -67,7 +67,7 @@ type ColorPickerOptions = {
      */
     portalProps?: Omit<PortalProps, "children">;
 };
-type ColorPickerProps = ThemeProps<"ColorPicker"> & UseColorPickerProps & ColorPickerOptions & Pick<ColorSelectorProps, "saturationSliderRef" | "saturationSliderProps" | "swatchesProps" | "hueSliderRef" | "hueSliderProps" | "alphaSliderRef" | "alphaSliderProps" | "channelsProps" | "channelProps">;
+type ColorPickerProps = ThemeProps<"ColorPicker"> & UseColorPickerProps & ColorPickerOptions & Pick<ColorSelectorProps, "saturationSliderRef" | "saturationSliderProps" | "swatchesProps" | "hueSliderRef" | "hueSliderProps" | "alphaSliderRef" | "alphaSliderProps" | "channelsProps" | "channelProps" | "children">;
 /**
  * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.
  *

package/dist/color-picker.d.ts

@@ -67,7 +67,7 @@ type ColorPickerOptions = {
      */
     portalProps?: Omit<PortalProps, "children">;
 };
-type ColorPickerProps = ThemeProps<"ColorPicker"> & UseColorPickerProps & ColorPickerOptions & Pick<ColorSelectorProps, "saturationSliderRef" | "saturationSliderProps" | "swatchesProps" | "hueSliderRef" | "hueSliderProps" | "alphaSliderRef" | "alphaSliderProps" | "channelsProps" | "channelProps">;
+type ColorPickerProps = ThemeProps<"ColorPicker"> & UseColorPickerProps & ColorPickerOptions & Pick<ColorSelectorProps, "saturationSliderRef" | "saturationSliderProps" | "swatchesProps" | "hueSliderRef" | "hueSliderProps" | "alphaSliderRef" | "alphaSliderProps" | "channelsProps" | "channelProps" | "children">;
 /**
  * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.
  *

package/dist/color-picker.js

@@ -1664,6 +1664,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
     });
     const {
       className,
+      children,
       withResult = true,
       withPicker = true,
       withChannel = true,
@@ -1687,6 +1688,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
       ...computedProps
     } = (0, import_core10.omitThemeProps)(mergedProps);
     const {
+      value,
       getContainerProps,
       getInputProps,
       getSaturationSliderProps,
@@ -1697,7 +1699,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
       flexDirection: "column",
       ...styles.container
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorSelectorProvider, { value: { styles, size, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorSelectorProvider, { value: { styles, size, value, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       import_core10.ui.div,
       {
         ref,
@@ -1745,7 +1747,8 @@ var ColorSelector = (0, import_core10.forwardRef)(
                 ...swatchesProps
               }
             }
-          )
+          ),
+          (0, import_utils13.runIfFunc)(children, { value })
         ]
       }
     ) });
@@ -2080,6 +2083,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
     });
     let {
       className,
+      children,
       withEyeDropper = true,
       color,
       h,
@@ -2173,7 +2177,8 @@ var ColorPicker = (0, import_core12.forwardRef)(
                     alphaSliderProps,
                     channelsProps,
                     channelProps
-                  })
+                  }),
+                  children
                 }
               )
             }

package/dist/color-picker.mjs

@@ -1,8 +1,8 @@
 import {
   ColorPicker
-} from "./chunk-EHKRI7PV.mjs";
+} from "./chunk-VVKPF2XB.mjs";
 import "./chunk-RSF3HAQH.mjs";
-import "./chunk-NKOO74IZ.mjs";
+import "./chunk-RLVNTNR5.mjs";
 import "./chunk-3KASGDAY.mjs";
 import "./chunk-MAHWFXUG.mjs";
 import "./chunk-AZHLF5KM.mjs";

package/dist/color-selector.d.mts

@@ -1,6 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
-import { ForwardedRef } from 'react';
+import { ForwardedRef, ReactNode } from 'react';
 import { ColorSelectorBodyProps } from './color-selector-body.mjs';
 import { ColorSelectorChannelsProps } from './color-selector-channels.mjs';
 import { ColorSelectorSwatchesProps } from './color-selector-swatches.mjs';
@@ -52,6 +52,9 @@ type ColorSelectorOptions = {
      * Props for the channels component.
      */
     channelsProps?: ColorSelectorChannelsProps;
+    children?: ReactNode | ((props: {
+        value: string;
+    }) => ReactNode);
 };
 type ColorSelectorProps = ThemeProps<"ColorSelector"> & UseColorSelectorProps & ColorSelectorOptions & Pick<ColorSelectorBodyProps, "withResult" | "withEyeDropper" | "eyeDropperRef" | "eyeDropperProps" | "hueSliderRef" | "hueSliderProps" | "alphaSliderRef" | "alphaSliderProps"> & Pick<ColorSelectorSwatchesProps, "swatchesLabel" | "swatches" | "swatchesColumns" | "swatchProps"> & Pick<ColorSelectorChannelsProps, "channelProps">;
 /**

package/dist/color-selector.d.ts

@@ -1,6 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
-import { ForwardedRef } from 'react';
+import { ForwardedRef, ReactNode } from 'react';
 import { ColorSelectorBodyProps } from './color-selector-body.js';
 import { ColorSelectorChannelsProps } from './color-selector-channels.js';
 import { ColorSelectorSwatchesProps } from './color-selector-swatches.js';
@@ -52,6 +52,9 @@ type ColorSelectorOptions = {
      * Props for the channels component.
      */
     channelsProps?: ColorSelectorChannelsProps;
+    children?: ReactNode | ((props: {
+        value: string;
+    }) => ReactNode);
 };
 type ColorSelectorProps = ThemeProps<"ColorSelector"> & UseColorSelectorProps & ColorSelectorOptions & Pick<ColorSelectorBodyProps, "withResult" | "withEyeDropper" | "eyeDropperRef" | "eyeDropperProps" | "hueSliderRef" | "hueSliderProps" | "alphaSliderRef" | "alphaSliderProps"> & Pick<ColorSelectorSwatchesProps, "swatchesLabel" | "swatches" | "swatchesColumns" | "swatchProps"> & Pick<ColorSelectorChannelsProps, "channelProps">;
 /**

package/dist/color-selector.js

@@ -1657,6 +1657,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
     });
     const {
       className,
+      children,
       withResult = true,
       withPicker = true,
       withChannel = true,
@@ -1680,6 +1681,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
       ...computedProps
     } = (0, import_core10.omitThemeProps)(mergedProps);
     const {
+      value,
       getContainerProps,
       getInputProps,
       getSaturationSliderProps,
@@ -1690,7 +1692,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
       flexDirection: "column",
       ...styles.container
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorSelectorProvider, { value: { styles, size, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorSelectorProvider, { value: { styles, size, value, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       import_core10.ui.div,
       {
         ref,
@@ -1738,7 +1740,8 @@ var ColorSelector = (0, import_core10.forwardRef)(
                 ...swatchesProps
               }
             }
-          )
+          ),
+          (0, import_utils13.runIfFunc)(children, { value })
         ]
       }
     ) });

package/dist/color-selector.mjs

@@ -1,6 +1,6 @@
 import {
   ColorSelector
-} from "./chunk-NKOO74IZ.mjs";
+} from "./chunk-RLVNTNR5.mjs";
 import "./chunk-3KASGDAY.mjs";
 import "./chunk-MAHWFXUG.mjs";
 import "./chunk-AZHLF5KM.mjs";

package/dist/index.js

@@ -1664,6 +1664,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
     });
     const {
       className,
+      children,
       withResult = true,
       withPicker = true,
       withChannel = true,
@@ -1687,6 +1688,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
       ...computedProps
     } = (0, import_core10.omitThemeProps)(mergedProps);
     const {
+      value,
       getContainerProps,
       getInputProps,
       getSaturationSliderProps,
@@ -1697,7 +1699,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
       flexDirection: "column",
       ...styles.container
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorSelectorProvider, { value: { styles, size, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorSelectorProvider, { value: { styles, size, value, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       import_core10.ui.div,
       {
         ref,
@@ -1745,7 +1747,8 @@ var ColorSelector = (0, import_core10.forwardRef)(
                 ...swatchesProps
               }
             }
-          )
+          ),
+          (0, import_utils13.runIfFunc)(children, { value })
         ]
       }
     ) });
@@ -2087,6 +2090,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
     });
     let {
       className,
+      children,
       withEyeDropper = true,
       color,
       h,
@@ -2180,7 +2184,8 @@ var ColorPicker = (0, import_core12.forwardRef)(
                     alphaSliderProps,
                     channelsProps,
                     channelProps
-                  })
+                  }),
+                  children
                 }
               )
             }

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import {
   ColorPicker
-} from "./chunk-EHKRI7PV.mjs";
+} from "./chunk-VVKPF2XB.mjs";
 import "./chunk-RSF3HAQH.mjs";
 import {
   ColorSelector
-} from "./chunk-NKOO74IZ.mjs";
+} from "./chunk-RLVNTNR5.mjs";
 import {
   SaturationSlider
 } from "./chunk-3KASGDAY.mjs";

package/dist/use-color-picker.d.mts

@@ -75,7 +75,7 @@ type UseColorPickerOptions = {
      */
     colorSelectorProps?: ColorSelectorProps;
 };
-type UseColorPickerProps = Omit<HTMLUIProps<"input">, "size" | "offset" | "value" | "defaultValue" | "onChange"> & Omit<UseColorSelectorBaseProps, "id" | "name"> & Omit<PopoverProps, "initialFocusRef" | "closeOnButton" | "isOpen" | "trigger" | "autoFocus" | "restoreFocus" | "openDelay" | "closeDelay"> & Pick<ColorSelectorProps, "withPicker" | "withChannel" | "swatchesLabel" | "swatches" | "swatchesColumns"> & UseColorPickerOptions;
+type UseColorPickerProps = Omit<HTMLUIProps<"input">, "size" | "offset" | "value" | "defaultValue" | "onChange" | "children"> & Omit<UseColorSelectorBaseProps, "id" | "name"> & Omit<PopoverProps, "initialFocusRef" | "closeOnButton" | "isOpen" | "trigger" | "autoFocus" | "restoreFocus" | "openDelay" | "closeDelay" | "children"> & Pick<ColorSelectorProps, "withPicker" | "withChannel" | "swatchesLabel" | "swatches" | "swatchesColumns"> & UseColorPickerOptions;
 declare const useColorPicker: ({ value: valueProp, defaultValue, fallbackValue, defaultColor, onChange: onChangeProp, onChangeStart, onChangeEnd, onSwatchClick, formatInput, closeOnBlur, closeOnEsc, placement, duration, defaultIsOpen, onOpen: onOpenProp, onClose: onCloseProp, allowInput, closeOnSelectSwatch, format, swatchesLabel, swatches, swatchesColumns, withPicker, withChannel, withResult, withColorSelectorEyeDropper, colorSelectorVariant, colorSelectorSize, colorSelectorColorScheme, ...rest }: UseColorPickerProps) => {
     value: string;
     eyeDropperSupported: boolean;

package/dist/use-color-picker.d.ts

@@ -75,7 +75,7 @@ type UseColorPickerOptions = {
      */
     colorSelectorProps?: ColorSelectorProps;
 };
-type UseColorPickerProps = Omit<HTMLUIProps<"input">, "size" | "offset" | "value" | "defaultValue" | "onChange"> & Omit<UseColorSelectorBaseProps, "id" | "name"> & Omit<PopoverProps, "initialFocusRef" | "closeOnButton" | "isOpen" | "trigger" | "autoFocus" | "restoreFocus" | "openDelay" | "closeDelay"> & Pick<ColorSelectorProps, "withPicker" | "withChannel" | "swatchesLabel" | "swatches" | "swatchesColumns"> & UseColorPickerOptions;
+type UseColorPickerProps = Omit<HTMLUIProps<"input">, "size" | "offset" | "value" | "defaultValue" | "onChange" | "children"> & Omit<UseColorSelectorBaseProps, "id" | "name"> & Omit<PopoverProps, "initialFocusRef" | "closeOnButton" | "isOpen" | "trigger" | "autoFocus" | "restoreFocus" | "openDelay" | "closeDelay" | "children"> & Pick<ColorSelectorProps, "withPicker" | "withChannel" | "swatchesLabel" | "swatches" | "swatchesColumns"> & UseColorPickerOptions;
 declare const useColorPicker: ({ value: valueProp, defaultValue, fallbackValue, defaultColor, onChange: onChangeProp, onChangeStart, onChangeEnd, onSwatchClick, formatInput, closeOnBlur, closeOnEsc, placement, duration, defaultIsOpen, onOpen: onOpenProp, onClose: onCloseProp, allowInput, closeOnSelectSwatch, format, swatchesLabel, swatches, swatchesColumns, withPicker, withChannel, withResult, withColorSelectorEyeDropper, colorSelectorVariant, colorSelectorSize, colorSelectorColorScheme, ...rest }: UseColorPickerProps) => {
     value: string;
     eyeDropperSupported: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/color-picker",
-  "version": "1.0.6-dev-20240218063424",
+  "version": "1.1.0",
   "description": "Yamada UI color picker component",
   "keywords": [
     "yamada",
@@ -36,12 +36,12 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/button": "1.0.14-dev-20240218063424",
-    "@yamada-ui/core": "1.4.0-dev-20240218063424",
-    "@yamada-ui/form-control": "1.0.15-dev-20240218063424",
-    "@yamada-ui/icon": "1.0.12-dev-20240218063424",
-    "@yamada-ui/input": "1.0.15-dev-20240218063424",
-    "@yamada-ui/popover": "1.0.13-dev-20240218063424",
+    "@yamada-ui/button": "1.0.14",
+    "@yamada-ui/core": "1.4.0",
+    "@yamada-ui/form-control": "1.0.15",
+    "@yamada-ui/icon": "1.0.12",
+    "@yamada-ui/input": "1.0.15",
+    "@yamada-ui/popover": "1.0.13",
     "@yamada-ui/portal": "1.0.5",
     "@yamada-ui/use-controllable-state": "1.0.5",
     "@yamada-ui/use-eye-dropper": "^1.0.2",