@yamada-ui/color-picker 1.0.0 → 1.0.1-dev-20240119044050

package/dist/alpha-slider.js

@@ -34,44 +34,6 @@ var import_use_pan_event = require("@yamada-ui/use-pan-event");
 var import_use_size = require("@yamada-ui/use-size");
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
-
-// ../../utils/src/object.ts
-var pickObject = (obj, keys) => {
-  const result = {};
-  keys.forEach((key) => {
-    if (key in obj)
-      result[key] = obj[key];
-  });
-  return result;
-};
-var getObject = (obj, path, fallback, i) => {
-  const k = typeof path === "string" ? path.split(".") : [path];
-  for (i = 0; i < k.length; i += 1) {
-    if (!obj)
-      break;
-    obj = obj[k[i]];
-  }
-  return obj === void 0 ? fallback : obj;
-};
-var memoizeObject = (func) => {
-  const cache = /* @__PURE__ */ new WeakMap();
-  const memoizedFunc = (obj, path, fallback, i) => {
-    if (typeof obj === "undefined")
-      return func(obj, path, fallback);
-    if (!cache.has(obj))
-      cache.set(obj, /* @__PURE__ */ new Map());
-    const map = cache.get(obj);
-    if (map.has(path))
-      return map.get(path);
-    const value = func(obj, path, fallback, i);
-    map.set(path, value);
-    return value;
-  };
-  return memoizedFunc;
-};
-var getMemoizedObject = memoizeObject(getObject);
-
-// src/use-color-slider.ts
 var useColorSlider = ({
   focusThumbOnChange = true,
   ...props
@@ -244,7 +206,7 @@ var useColorSlider = ({
   );
   const getInputProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...pickObject(rest, import_form_control.formControlProperties),
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
       ...props2,
       id,
       ref,
@@ -259,7 +221,7 @@ var useColorSlider = ({
   );
   const getTrackProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...pickObject(
+      ...(0, import_utils.pickObject)(
         rest,
         (0, import_form_control.getFormControlProperties)({ omit: ["aria-readonly"] })
       ),
@@ -282,7 +244,7 @@ var useColorSlider = ({
       return {
         "aria-label": "Slider thumb",
         bg: thumbColor != null ? thumbColor : `hsl(${value}, 100%, 50%)`,
-        ...pickObject(rest, import_form_control.formControlProperties),
+        ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
         ...props2,
         ref: (0, import_utils.mergeRefs)(ref, thumbRef),
         tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,

package/dist/alpha-slider.mjs

@@ -1,8 +1,7 @@
 import {
   AlphaSlider
-} from "./chunk-U6OJ4TDG.mjs";
-import "./chunk-DTB2Z3IJ.mjs";
-import "./chunk-N2GG5L7Q.mjs";
+} from "./chunk-TOGKHI2V.mjs";
+import "./chunk-XAL3WIW7.mjs";
 export {
   AlphaSlider
 };

package/dist/{chunk-EMWFECJD.mjs → chunk-24BBRCTU.mjs}

@@ -2,20 +2,20 @@ import {
   SaturationSlider
 } from "./chunk-3KASGDAY.mjs";
 import {
-  ColorPickerBody
-} from "./chunk-73BVTMII.mjs";
+  ColorSelectorBody
+} from "./chunk-LG5AH76C.mjs";
 import {
-  ColorPickerChannels
-} from "./chunk-PVWIBTBL.mjs";
+  ColorSelectorChannels
+} from "./chunk-F7CBAED2.mjs";
 import {
-  ColorPickerSwatches
-} from "./chunk-TFQ62YSQ.mjs";
+  ColorSelectorSwatches
+} from "./chunk-25HMRK5Y.mjs";
 import {
-  ColorPickerProvider,
-  useColorPicker
-} from "./chunk-NR2XCTSD.mjs";
+  ColorSelectorProvider,
+  useColorSelector
+} from "./chunk-KCQQ4JHN.mjs";
 
-// src/color-picker.tsx
+// src/color-selector.tsx
 import {
   ui,
   forwardRef,
@@ -24,9 +24,9 @@ import {
 } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-var ColorPicker = forwardRef(
+var ColorSelector = forwardRef(
   ({ size, ...props }, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle("ColorPicker", {
+    const [styles, mergedProps] = useMultiComponentStyle("ColorSelector", {
       size,
       ...props
     });
@@ -57,17 +57,17 @@ var ColorPicker = forwardRef(
       getInputProps,
       getSaturationSliderProps,
       ...rest
-    } = useColorPicker(computedProps);
+    } = useColorSelector(computedProps);
     const css = {
       display: "flex",
       flexDirection: "column",
       ...styles.container
     };
-    return /* @__PURE__ */ jsx(ColorPickerProvider, { value: { styles, size, ...rest }, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(ColorSelectorProvider, { value: { styles, size, ...rest }, children: /* @__PURE__ */ jsxs(
       ui.div,
       {
         ref,
-        className: cx("ui-color-picker", className),
+        className: cx("ui-color-selector", className),
         __css: css,
         ...getContainerProps(),
         children: [
@@ -76,7 +76,7 @@ var ColorPicker = forwardRef(
             SaturationSlider,
             {
               size,
-              className: "ui-color-picker__saturation-slider",
+              className: "ui-color-selector__saturation-slider",
               __css: { ...styles.saturationSlider },
               ...getSaturationSliderProps(
                 saturationSliderProps,
@@ -85,7 +85,7 @@ var ColorPicker = forwardRef(
             }
           ) : null,
           withPicker ? /* @__PURE__ */ jsx(
-            ColorPickerBody,
+            ColorSelectorBody,
             {
               ...{
                 withResult,
@@ -99,9 +99,9 @@ var ColorPicker = forwardRef(
               }
             }
           ) : null,
-          withPicker && withChannel ? /* @__PURE__ */ jsx(ColorPickerChannels, {}) : null,
+          withPicker && withChannel ? /* @__PURE__ */ jsx(ColorSelectorChannels, {}) : null,
           /* @__PURE__ */ jsx(
-            ColorPickerSwatches,
+            ColorSelectorSwatches,
             {
               ...{
                 swatchesLabel,
@@ -119,5 +119,5 @@ var ColorPicker = forwardRef(
 );
 
 export {
-  ColorPicker
+  ColorSelector
 };

package/dist/{chunk-TFQ62YSQ.mjs → chunk-25HMRK5Y.mjs}

@@ -2,14 +2,14 @@ import {
   ColorSwatch
 } from "./chunk-3N443XSV.mjs";
 import {
-  useColorPickerContext
-} from "./chunk-NR2XCTSD.mjs";
+  useColorSelectorContext
+} from "./chunk-KCQQ4JHN.mjs";
 
-// src/color-picker-swatches.tsx
+// src/color-selector-swatches.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
 import { cx, replaceObject } from "@yamada-ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-var ColorPickerSwatches = forwardRef(
+var ColorSelectorSwatches = forwardRef(
   ({
     className,
     swatchesLabel,
@@ -19,7 +19,7 @@ var ColorPickerSwatches = forwardRef(
     swatchesColumns,
     ...rest
   }, ref) => {
-    const { getSwatchProps, readOnly, styles } = useColorPickerContext();
+    const { getSwatchProps, readOnly, styles } = useColorSelectorContext();
     const css = {
       display: "grid",
       gridTemplateColumns: replaceObject(
@@ -32,7 +32,7 @@ var ColorPickerSwatches = forwardRef(
       swatchesLabel ? /* @__PURE__ */ jsx(
         ui.p,
         {
-          className: "ui-color-picker__swatches__label",
+          className: "ui-color-selector__swatches__label",
           __css: { ...styles.swatchesLabel },
           children: swatchesLabel
         }
@@ -41,7 +41,7 @@ var ColorPickerSwatches = forwardRef(
         ui.div,
         {
           ref,
-          className: cx("ui-color-picker__swatches", className),
+          className: cx("ui-color-selector__swatches", className),
           __css: css,
           ...rest,
           children: swatches.map((color) => /* @__PURE__ */ jsx(
@@ -64,5 +64,5 @@ var ColorPickerSwatches = forwardRef(
 );
 
 export {
-  ColorPickerSwatches
+  ColorSelectorSwatches
 };

package/dist/{chunk-7QGCTVDG.mjs → chunk-3JCJHD24.mjs}

@@ -1,18 +1,18 @@
 import {
   HueSlider
-} from "./chunk-PTTNJPGJ.mjs";
+} from "./chunk-LDCDIBTZ.mjs";
 import {
   AlphaSlider
-} from "./chunk-U6OJ4TDG.mjs";
+} from "./chunk-TOGKHI2V.mjs";
 import {
-  useColorPickerContext
-} from "./chunk-NR2XCTSD.mjs";
+  useColorSelectorContext
+} from "./chunk-KCQQ4JHN.mjs";
 
-// src/color-picker-sliders.tsx
+// src/color-selector-sliders.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-var ColorPickerSliders = forwardRef(
+var ColorSelectorSliders = forwardRef(
   ({
     className,
     hueSliderRef,
@@ -21,7 +21,7 @@ var ColorPickerSliders = forwardRef(
     alphaSliderProps,
     ...rest
   }, ref) => {
-    let { size, withAlpha, getHueSliderProps, getAlphaSliderProps, styles } = useColorPickerContext();
+    let { size, withAlpha, getHueSliderProps, getAlphaSliderProps, styles } = useColorSelectorContext();
     if (size === "full")
       size = "lg";
     const css = {
@@ -33,7 +33,7 @@ var ColorPickerSliders = forwardRef(
       ui.div,
       {
         ref,
-        className: cx("ui-color-picker__sliders", className),
+        className: cx("ui-color-selector__sliders", className),
         __css: css,
         ...rest,
         children: [
@@ -41,7 +41,7 @@ var ColorPickerSliders = forwardRef(
             HueSlider,
             {
               size,
-              className: "ui-color-picker__hue-slider",
+              className: "ui-color-selector__hue-slider",
               __css: { ...styles.hueSlider },
               ...getHueSliderProps(hueSliderProps, hueSliderRef)
             }
@@ -50,7 +50,7 @@ var ColorPickerSliders = forwardRef(
             AlphaSlider,
             {
               size,
-              className: "ui-color-picker__alpha-slider",
+              className: "ui-color-selector__alpha-slider",
               __css: { ...styles.alphaSlider },
               ...getAlphaSliderProps(alphaSliderProps, alphaSliderRef)
             }
@@ -62,5 +62,5 @@ var ColorPickerSliders = forwardRef(
 );
 
 export {
-  ColorPickerSliders
+  ColorSelectorSliders
 };

package/dist/{chunk-KJS52X4M.mjs → chunk-5BN4WU5H.mjs}

@@ -1,4 +1,4 @@
-// src/use-color-input.ts
+// src/use-color-picker.ts
 import { layoutStyleProperties } from "@yamada-ui/core";
 import {
   useFormControlProps,
@@ -22,11 +22,11 @@ import {
   useUpdateEffect
 } from "@yamada-ui/utils";
 import { useCallback, useRef, useState } from "react";
-var [ColorInputProvider, useColorInputContext] = createContext({
-  name: "ColorInputContext",
-  errorMessage: `useColorInputContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorInput />"`
+var [ColorPickerProvider, useColorPickerContext] = createContext({
+  name: "ColorPickerContext",
+  errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorPicker />"`
 });
-var useColorInput = ({
+var useColorPicker = ({
   value: valueProp,
   defaultValue,
   fallbackValue,
@@ -52,10 +52,10 @@ var useColorInput = ({
   withPicker,
   withChannel,
   withResult = false,
-  withColorPickerEyeDropper = false,
-  colorPickerVariant,
-  colorPickerSize,
-  colorPickerColorScheme,
+  withColorSelectorEyeDropper = false,
+  colorSelectorVariant,
+  colorSelectorSize,
+  colorSelectorColorScheme,
   ...rest
 }) => {
   rest = useFormControlProps(rest);
@@ -77,7 +77,7 @@ var useColorInput = ({
   const isInputFocused = useRef(false);
   const [inputValue, setInputValue] = useState(value != null ? value : "");
   const [isOpen, setIsOpen] = useState(defaultIsOpen != null ? defaultIsOpen : false);
-  const isColorPickerFull = colorPickerSize === "full";
+  const isColorSelectorFull = colorSelectorSize === "full";
   const onOpen = useCallback(() => {
     if (disabled || readOnly)
       return;
@@ -156,7 +156,7 @@ var useColorInput = ({
     },
     [setInputValue, formatInput, setValue]
   );
-  const onColorPickerChange = useCallback(
+  const onColorSelectorChange = useCallback(
     (value2) => {
       setValue(value2);
       if (!isInputFocused.current)
@@ -173,11 +173,11 @@ var useColorInput = ({
         const { sRGBHex } = (_a = await onEyeDropperOpen()) != null ? _a : {};
         if (!sRGBHex)
           return;
-        onColorPickerChange(sRGBHex);
+        onColorSelectorChange(sRGBHex);
       } catch {
       }
     },
-    [onEyeDropperOpen, onColorPickerChange]
+    [onEyeDropperOpen, onColorSelectorChange]
   );
   useOutsideClick({
     ref: containerRef,
@@ -196,7 +196,7 @@ var useColorInput = ({
   }, [format, fallbackValue]);
   const getPopoverProps = useCallback(
     (props) => ({
-      matchWidth: isColorPickerFull,
+      matchWidth: isColorSelectorFull,
       ...rest,
       ...props,
       isOpen,
@@ -207,7 +207,7 @@ var useColorInput = ({
       trigger: "never",
       closeOnButton: false
     }),
-    [isColorPickerFull, duration, onClose, onOpen, placement, rest, isOpen]
+    [isColorSelectorFull, duration, onClose, onOpen, placement, rest, isOpen]
   );
   const getContainerProps = useCallback(
     (props = {}, ref = null) => ({
@@ -261,14 +261,14 @@ var useColorInput = ({
     }),
     [disabled, onEyeDropperClick, readOnly]
   );
-  const getPickerProps = useCallback(
+  const getSelectorProps = useCallback(
     (props) => ({
       ...formControlProps,
       ...props,
       value,
       defaultValue: defaultColor,
       fallbackValue,
-      onChange: onColorPickerChange,
+      onChange: onColorSelectorChange,
       onChangeStart,
       onChangeEnd,
       onSwatchClick: handlerAll(
@@ -279,20 +279,20 @@ var useColorInput = ({
       withPicker,
       withChannel,
       withResult,
-      withEyeDropper: withColorPickerEyeDropper,
+      withEyeDropper: withColorSelectorEyeDropper,
       swatchesLabel,
       swatches,
       swatchesColumns,
-      variant: colorPickerVariant,
-      size: colorPickerSize,
-      colorScheme: colorPickerColorScheme
+      variant: colorSelectorVariant,
+      size: colorSelectorSize,
+      colorScheme: colorSelectorColorScheme
     }),
     [
       formControlProps,
       value,
       fallbackValue,
       defaultColor,
-      onColorPickerChange,
+      onColorSelectorChange,
       onChangeStart,
       onChangeEnd,
       onSwatchClick,
@@ -302,13 +302,13 @@ var useColorInput = ({
       withPicker,
       withChannel,
       withResult,
-      withColorPickerEyeDropper,
+      withColorSelectorEyeDropper,
       swatchesLabel,
       swatches,
       swatchesColumns,
-      colorPickerColorScheme,
-      colorPickerSize,
-      colorPickerVariant
+      colorSelectorColorScheme,
+      colorSelectorSize,
+      colorSelectorVariant
     ]
   );
   return {
@@ -318,13 +318,13 @@ var useColorInput = ({
     getPopoverProps,
     getContainerProps,
     getFieldProps,
-    getPickerProps,
+    getSelectorProps,
     getEyeDropperProps
   };
 };
 
 export {
-  ColorInputProvider,
-  useColorInputContext,
-  useColorInput
+  ColorPickerProvider,
+  useColorPickerContext,
+  useColorPicker
 };

package/dist/chunk-F7CBAED2.mjs

@@ -0,0 +1,63 @@
+import {
+  useColorSelectorContext
+} from "./chunk-KCQQ4JHN.mjs";
+
+// src/color-selector-channels.tsx
+import { forwardRef, ui } from "@yamada-ui/core";
+import { Input } from "@yamada-ui/input";
+import { cx } from "@yamada-ui/utils";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorSelectorChannels = forwardRef(({ className, channelProps, ...rest }, ref) => {
+  const { withAlpha, channels, getChannelProps, styles } = useColorSelectorContext();
+  const css = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${withAlpha ? "4" : "3"}, 1fr)`,
+    ...styles.channels
+  };
+  return /* @__PURE__ */ jsx(
+    ui.div,
+    {
+      ref,
+      className: cx("ui-color-selector__channels", className),
+      __css: css,
+      ...rest,
+      children: channels.map(({ label, space, value, min, max }) => /* @__PURE__ */ jsx(
+        ColorSelectorChannel,
+        {
+          channelLabel: label,
+          ...getChannelProps({ ...channelProps, space, value, min, max })
+        },
+        label
+      ))
+    }
+  );
+});
+var ColorSelectorChannel = forwardRef(({ className, channelLabel, ...rest }, ref) => {
+  const id = useId();
+  let { size, disabled, readOnly, styles } = useColorSelectorContext();
+  if (size === "full")
+    size = "lg";
+  const css = { ...styles.channel };
+  return /* @__PURE__ */ jsxs(ui.div, { className: cx("ui-color-selector__channel", className), children: [
+    channelLabel ? /* @__PURE__ */ jsx(
+      ui.label,
+      {
+        htmlFor: id,
+        style: { cursor: disabled ? "not-allowed" : void 0 },
+        __css: {
+          display: "block",
+          pointerEvents: readOnly ? "none" : void 0,
+          ...styles.channelLabel
+        },
+        children: channelLabel
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Input, { ref, id, size, __css: css, ...rest })
+  ] });
+});
+
+export {
+  ColorSelectorChannels,
+  ColorSelectorChannel
+};

package/dist/{chunk-NR2XCTSD.mjs → chunk-KCQQ4JHN.mjs}

@@ -1,8 +1,4 @@
-import {
-  pickObject
-} from "./chunk-N2GG5L7Q.mjs";
-
-// src/use-color-picker.ts
+// src/use-color-selector.ts
 import {
   useFormControlProps,
   formControlProperties
@@ -23,7 +19,8 @@ import {
   parseToRgba,
   parseToHsla,
   rgbaTo,
-  hslaTo
+  hslaTo,
+  pickObject
 } from "@yamada-ui/utils";
 import { useCallback, useMemo, useRef, useState } from "react";
 var convertHsla = (value, fallback) => {
@@ -50,11 +47,11 @@ var convertHsva = (value, fallback) => {
   const [h, s, v, a] = parseToHsv(value, fallback);
   return { h, s, v, a };
 };
-var [ColorPickerProvider, useColorPickerContext] = createContext({
-  name: "ColorPickerContext",
-  errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorPicker />"`
+var [ColorSelectorProvider, useColorSelectorContext] = createContext({
+  name: "ColorSelectorContext",
+  errorMessage: `useColorSelectorContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorSelector />"`
 });
-var useColorPicker = ({
+var useColorSelector = ({
   isInvalid,
   ...props
 }) => {
@@ -424,7 +421,7 @@ var useColorPicker = ({
 };
 
 export {
-  ColorPickerProvider,
-  useColorPickerContext,
-  useColorPicker
+  ColorSelectorProvider,
+  useColorSelectorContext,
+  useColorSelector
 };

package/dist/{chunk-PTTNJPGJ.mjs → chunk-LDCDIBTZ.mjs}

@@ -1,6 +1,6 @@
 import {
   useColorSlider
-} from "./chunk-DTB2Z3IJ.mjs";
+} from "./chunk-XAL3WIW7.mjs";
 
 // src/hue-slider.tsx
 import {

package/dist/{chunk-73BVTMII.mjs → chunk-LG5AH76C.mjs}

@@ -1,21 +1,21 @@
 import {
-  ColorPickerEyeDropper
-} from "./chunk-3EO2XBIZ.mjs";
+  ColorSelectorEyeDropper
+} from "./chunk-X3D4OUWF.mjs";
 import {
-  ColorPickerSliders
-} from "./chunk-7QGCTVDG.mjs";
+  ColorSelectorSliders
+} from "./chunk-3JCJHD24.mjs";
 import {
   ColorSwatch
 } from "./chunk-3N443XSV.mjs";
 import {
-  useColorPickerContext
-} from "./chunk-NR2XCTSD.mjs";
+  useColorSelectorContext
+} from "./chunk-KCQQ4JHN.mjs";
 
-// src/color-picker-body.tsx
+// src/color-selector-body.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-var ColorPickerBody = forwardRef(
+var ColorSelectorBody = forwardRef(
   ({
     className,
     withEyeDropper = true,
@@ -28,7 +28,7 @@ var ColorPickerBody = forwardRef(
     alphaSliderProps,
     ...rest
   }, ref) => {
-    const { value, eyeDropperSupported, styles } = useColorPickerContext();
+    const { value, eyeDropperSupported, styles } = useColorSelectorContext();
     const css = {
       display: "flex",
       w: "full",
@@ -38,12 +38,12 @@ var ColorPickerBody = forwardRef(
       ui.div,
       {
         ref,
-        className: cx("ui-color-picker__body", className),
+        className: cx("ui-color-selector__body", className),
         __css: css,
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
-            ColorPickerSliders,
+            ColorSelectorSliders,
             {
               ...{
                 hueSliderRef,
@@ -53,11 +53,11 @@ var ColorPickerBody = forwardRef(
               }
             }
           ),
-          withEyeDropper && eyeDropperSupported ? /* @__PURE__ */ jsx(ColorPickerEyeDropper, { ref: eyeDropperRef, ...eyeDropperProps }) : null,
+          withEyeDropper && eyeDropperSupported ? /* @__PURE__ */ jsx(ColorSelectorEyeDropper, { ref: eyeDropperRef, ...eyeDropperProps }) : null,
           withResult ? /* @__PURE__ */ jsx(
             ColorSwatch,
             {
-              className: "ui-color-picker__result",
+              className: "ui-color-selector__result",
               color: value,
               __css: { ...styles.result }
             }
@@ -69,5 +69,5 @@ var ColorPickerBody = forwardRef(
 );
 
 export {
-  ColorPickerBody
+  ColorSelectorBody
 };

package/dist/{chunk-U6OJ4TDG.mjs → chunk-TOGKHI2V.mjs}

@@ -1,6 +1,6 @@
 import {
   useColorSlider
-} from "./chunk-DTB2Z3IJ.mjs";
+} from "./chunk-XAL3WIW7.mjs";
 
 // src/alpha-slider.tsx
 import {