@yamada-ui/color-picker 1.0.5 → 1.0.6-dev-20240216040013

package/dist/{chunk-5FH26WWX.mjs → chunk-3HWVWHMW.mjs}

@@ -2,7 +2,7 @@ import {
   ColorPickerProvider,
   useColorPicker,
   useColorPickerContext
-} from "./chunk-AW3DGG4U.mjs";
+} from "./chunk-RSF3HAQH.mjs";
 import {
   ColorSelector
 } from "./chunk-3KJJKEBS.mjs";

package/dist/{chunk-AW3DGG4U.mjs → chunk-RSF3HAQH.mjs}

@@ -4,6 +4,7 @@ import {
   useFormControlProps,
   getFormControlProperties
 } from "@yamada-ui/form-control";
+import { popoverProperties } from "@yamada-ui/popover";
 import { useControllableState } from "@yamada-ui/use-controllable-state";
 import { useEyeDropper } from "@yamada-ui/use-eye-dropper";
 import { useOutsideClick } from "@yamada-ui/use-outside-click";
@@ -65,7 +66,10 @@ var useColorPicker = ({
     getFormControlProperties({ omit: ["aria-readonly"] })
   );
   const { disabled, readOnly } = formControlProps;
-  const computedProps = splitObject(rest, layoutStyleProperties);
+  const [containerProps, inputProps] = splitObject(
+    omitObject(rest, [...popoverProperties]),
+    [...layoutStyleProperties, "aria-readonly"]
+  );
   const containerRef = useRef(null);
   const fieldRef = useRef(null);
   const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } = useEyeDropper();
@@ -217,19 +221,19 @@ var useColorPicker = ({
   const getContainerProps = useCallback(
     (props = {}, ref = null) => ({
       ref: mergeRefs(containerRef, ref),
-      ...computedProps[0],
+      ...containerProps,
       ...props,
       ...formControlProps,
       onClick: handlerAll(props.onClick, rest.onClick, onContainerClick),
       onBlur: handlerAll(props.onBlur, rest.onBlur, onContainerBlur)
     }),
-    [computedProps, formControlProps, onContainerBlur, onContainerClick, rest]
+    [containerProps, formControlProps, onContainerBlur, onContainerClick, rest]
   );
   const getFieldProps = useCallback(
     (props = {}, ref = null) => ({
       ref: mergeRefs(fieldRef, ref),
       tabIndex: !allowInput ? -1 : 0,
-      ...omitObject(computedProps[1], ["aria-readonly"]),
+      ...inputProps,
       ...props,
       style: {
         ...props.style,
@@ -245,7 +249,7 @@ var useColorPicker = ({
     }),
     [
       allowInput,
-      computedProps,
+      inputProps,
       inputValue,
       isOpen,
       rest,

package/dist/color-picker.js

@@ -24,7 +24,7 @@ __export(color_picker_exports, {
 });
 module.exports = __toCommonJS(color_picker_exports);
 var import_core12 = require("@yamada-ui/core");
-var import_popover = require("@yamada-ui/popover");
+var import_popover2 = require("@yamada-ui/popover");
 var import_portal = require("@yamada-ui/portal");
 var import_utils15 = require("@yamada-ui/utils");
 var import_react6 = require("react");
@@ -1753,6 +1753,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
 // src/use-color-picker.ts
 var import_core11 = require("@yamada-ui/core");
 var import_form_control4 = require("@yamada-ui/form-control");
+var import_popover = require("@yamada-ui/popover");
 var import_use_controllable_state4 = require("@yamada-ui/use-controllable-state");
 var import_use_eye_dropper2 = require("@yamada-ui/use-eye-dropper");
 var import_use_outside_click = require("@yamada-ui/use-outside-click");
@@ -1801,7 +1802,10 @@ var useColorPicker = ({
     (0, import_form_control4.getFormControlProperties)({ omit: ["aria-readonly"] })
   );
   const { disabled, readOnly } = formControlProps;
-  const computedProps = (0, import_utils14.splitObject)(rest, import_core11.layoutStyleProperties);
+  const [containerProps, inputProps] = (0, import_utils14.splitObject)(
+    (0, import_utils14.omitObject)(rest, [...import_popover.popoverProperties]),
+    [...import_core11.layoutStyleProperties, "aria-readonly"]
+  );
   const containerRef = (0, import_react5.useRef)(null);
   const fieldRef = (0, import_react5.useRef)(null);
   const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } = (0, import_use_eye_dropper2.useEyeDropper)();
@@ -1953,19 +1957,19 @@ var useColorPicker = ({
   const getContainerProps = (0, import_react5.useCallback)(
     (props = {}, ref = null) => ({
       ref: (0, import_utils14.mergeRefs)(containerRef, ref),
-      ...computedProps[0],
+      ...containerProps,
       ...props,
       ...formControlProps,
       onClick: (0, import_utils14.handlerAll)(props.onClick, rest.onClick, onContainerClick),
       onBlur: (0, import_utils14.handlerAll)(props.onBlur, rest.onBlur, onContainerBlur)
     }),
-    [computedProps, formControlProps, onContainerBlur, onContainerClick, rest]
+    [containerProps, formControlProps, onContainerBlur, onContainerClick, rest]
   );
   const getFieldProps = (0, import_react5.useCallback)(
     (props = {}, ref = null) => ({
       ref: (0, import_utils14.mergeRefs)(fieldRef, ref),
       tabIndex: !allowInput ? -1 : 0,
-      ...(0, import_utils14.omitObject)(computedProps[1], ["aria-readonly"]),
+      ...inputProps,
       ...props,
       style: {
         ...props.style,
@@ -1981,7 +1985,7 @@ var useColorPicker = ({
     }),
     [
       allowInput,
-      computedProps,
+      inputProps,
       inputValue,
       isOpen,
       rest,
@@ -2104,7 +2108,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
       color,
       ...styles.container
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorPickerProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorPickerProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       import_core12.ui.div,
       {
         className: (0, import_utils15.cx)("ui-color-picker", className),
@@ -2122,7 +2126,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
               },
               children: [
                 withSwatch ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorPickerSwatch, { ...swatchProps }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   ColorPickerField,
                   {
                     h,
@@ -2140,7 +2144,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_popover.PopoverContent,
+            import_popover2.PopoverContent,
             {
               className: "ui-color-picker__popover",
               __css: { ...styles.list },

package/dist/color-picker.mjs

@@ -1,7 +1,7 @@
 import {
   ColorPicker
-} from "./chunk-5FH26WWX.mjs";
-import "./chunk-AW3DGG4U.mjs";
+} from "./chunk-3HWVWHMW.mjs";
+import "./chunk-RSF3HAQH.mjs";
 import "./chunk-3KJJKEBS.mjs";
 import "./chunk-3KASGDAY.mjs";
 import "./chunk-MAHWFXUG.mjs";

package/dist/index.js

@@ -1752,7 +1752,7 @@ var ColorSelector = (0, import_core10.forwardRef)(
 
 // src/color-picker.tsx
 var import_core12 = require("@yamada-ui/core");
-var import_popover = require("@yamada-ui/popover");
+var import_popover2 = require("@yamada-ui/popover");
 var import_portal = require("@yamada-ui/portal");
 var import_utils15 = require("@yamada-ui/utils");
 var import_react6 = require("react");
@@ -1760,6 +1760,7 @@ var import_react6 = require("react");
 // src/use-color-picker.ts
 var import_core11 = require("@yamada-ui/core");
 var import_form_control4 = require("@yamada-ui/form-control");
+var import_popover = require("@yamada-ui/popover");
 var import_use_controllable_state4 = require("@yamada-ui/use-controllable-state");
 var import_use_eye_dropper2 = require("@yamada-ui/use-eye-dropper");
 var import_use_outside_click = require("@yamada-ui/use-outside-click");
@@ -1808,7 +1809,10 @@ var useColorPicker = ({
     (0, import_form_control4.getFormControlProperties)({ omit: ["aria-readonly"] })
   );
   const { disabled, readOnly } = formControlProps;
-  const computedProps = (0, import_utils14.splitObject)(rest, import_core11.layoutStyleProperties);
+  const [containerProps, inputProps] = (0, import_utils14.splitObject)(
+    (0, import_utils14.omitObject)(rest, [...import_popover.popoverProperties]),
+    [...import_core11.layoutStyleProperties, "aria-readonly"]
+  );
   const containerRef = (0, import_react5.useRef)(null);
   const fieldRef = (0, import_react5.useRef)(null);
   const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } = (0, import_use_eye_dropper2.useEyeDropper)();
@@ -1960,19 +1964,19 @@ var useColorPicker = ({
   const getContainerProps = (0, import_react5.useCallback)(
     (props = {}, ref = null) => ({
       ref: (0, import_utils14.mergeRefs)(containerRef, ref),
-      ...computedProps[0],
+      ...containerProps,
       ...props,
       ...formControlProps,
       onClick: (0, import_utils14.handlerAll)(props.onClick, rest.onClick, onContainerClick),
       onBlur: (0, import_utils14.handlerAll)(props.onBlur, rest.onBlur, onContainerBlur)
     }),
-    [computedProps, formControlProps, onContainerBlur, onContainerClick, rest]
+    [containerProps, formControlProps, onContainerBlur, onContainerClick, rest]
   );
   const getFieldProps = (0, import_react5.useCallback)(
     (props = {}, ref = null) => ({
       ref: (0, import_utils14.mergeRefs)(fieldRef, ref),
       tabIndex: !allowInput ? -1 : 0,
-      ...(0, import_utils14.omitObject)(computedProps[1], ["aria-readonly"]),
+      ...inputProps,
       ...props,
       style: {
         ...props.style,
@@ -1988,7 +1992,7 @@ var useColorPicker = ({
     }),
     [
       allowInput,
-      computedProps,
+      inputProps,
       inputValue,
       isOpen,
       rest,
@@ -2111,7 +2115,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
       color,
       ...styles.container
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorPickerProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorPickerProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       import_core12.ui.div,
       {
         className: (0, import_utils15.cx)("ui-color-picker", className),
@@ -2129,7 +2133,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
               },
               children: [
                 withSwatch ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorPickerSwatch, { ...swatchProps }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   ColorPickerField,
                   {
                     h,
@@ -2147,7 +2151,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_popover.PopoverContent,
+            import_popover2.PopoverContent,
             {
               className: "ui-color-picker__popover",
               __css: { ...styles.list },

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import {
   ColorPicker
-} from "./chunk-5FH26WWX.mjs";
-import "./chunk-AW3DGG4U.mjs";
+} from "./chunk-3HWVWHMW.mjs";
+import "./chunk-RSF3HAQH.mjs";
 import {
   ColorSelector
 } from "./chunk-3KJJKEBS.mjs";

package/dist/use-color-picker.js

@@ -27,6 +27,7 @@ __export(use_color_picker_exports, {
 module.exports = __toCommonJS(use_color_picker_exports);
 var import_core = require("@yamada-ui/core");
 var import_form_control = require("@yamada-ui/form-control");
+var import_popover = require("@yamada-ui/popover");
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
 var import_use_eye_dropper = require("@yamada-ui/use-eye-dropper");
 var import_use_outside_click = require("@yamada-ui/use-outside-click");
@@ -75,7 +76,10 @@ var useColorPicker = ({
     (0, import_form_control.getFormControlProperties)({ omit: ["aria-readonly"] })
   );
   const { disabled, readOnly } = formControlProps;
-  const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
+  const [containerProps, inputProps] = (0, import_utils.splitObject)(
+    (0, import_utils.omitObject)(rest, [...import_popover.popoverProperties]),
+    [...import_core.layoutStyleProperties, "aria-readonly"]
+  );
   const containerRef = (0, import_react.useRef)(null);
   const fieldRef = (0, import_react.useRef)(null);
   const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } = (0, import_use_eye_dropper.useEyeDropper)();
@@ -227,19 +231,19 @@ var useColorPicker = ({
   const getContainerProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
       ref: (0, import_utils.mergeRefs)(containerRef, ref),
-      ...computedProps[0],
+      ...containerProps,
       ...props,
       ...formControlProps,
       onClick: (0, import_utils.handlerAll)(props.onClick, rest.onClick, onContainerClick),
       onBlur: (0, import_utils.handlerAll)(props.onBlur, rest.onBlur, onContainerBlur)
     }),
-    [computedProps, formControlProps, onContainerBlur, onContainerClick, rest]
+    [containerProps, formControlProps, onContainerBlur, onContainerClick, rest]
   );
   const getFieldProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
       ref: (0, import_utils.mergeRefs)(fieldRef, ref),
       tabIndex: !allowInput ? -1 : 0,
-      ...(0, import_utils.omitObject)(computedProps[1], ["aria-readonly"]),
+      ...inputProps,
       ...props,
       style: {
         ...props.style,
@@ -255,7 +259,7 @@ var useColorPicker = ({
     }),
     [
       allowInput,
-      computedProps,
+      inputProps,
       inputValue,
       isOpen,
       rest,

package/dist/use-color-picker.mjs

@@ -2,7 +2,7 @@ import {
   ColorPickerProvider,
   useColorPicker,
   useColorPickerContext
-} from "./chunk-AW3DGG4U.mjs";
+} from "./chunk-RSF3HAQH.mjs";
 export {
   ColorPickerProvider,
   useColorPicker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/color-picker",
-  "version": "1.0.5",
+  "version": "1.0.6-dev-20240216040013",
   "description": "Yamada UI color picker component",
   "keywords": [
     "yamada",