@yamada-ui/color-picker 1.0.0

package/dist/index.js

@@ -0,0 +1,2295 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AlphaSlider: () => AlphaSlider,
+  ColorInput: () => ColorInput,
+  ColorPicker: () => ColorPicker,
+  ColorSwatch: () => ColorSwatch,
+  HueSlider: () => HueSlider,
+  SaturationSlider: () => SaturationSlider
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/color-picker.tsx
+var import_core10 = require("@yamada-ui/core");
+var import_utils13 = require("@yamada-ui/utils");
+
+// src/color-picker-body.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+
+// src/color-picker-eye-dropper.tsx
+var import_button = require("@yamada-ui/button");
+var import_core = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/use-color-picker.ts
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_eye_dropper = require("@yamada-ui/use-eye-dropper");
+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-picker.ts
+var convertHsla = (value, fallback) => {
+  var _a;
+  let [h, s, l, a] = (_a = (0, import_utils.parseToHsla)(value, fallback)) != null ? _a : [0, 0, 1, 1];
+  if (a > 1)
+    a = 1;
+  return { h, s, l, a };
+};
+var convertRgba = (value, fallback) => {
+  var _a;
+  let [r, g, b, a] = (_a = (0, import_utils.parseToRgba)(value, fallback)) != null ? _a : [255, 255, 255, 1];
+  if (r > 255)
+    r = 255;
+  if (g > 255)
+    g = 255;
+  if (b > 255)
+    b = 255;
+  if (a > 1)
+    a = 1;
+  return { r, g, b, a };
+};
+var convertHsva = (value, fallback) => {
+  const [h, s, v, a] = (0, import_utils.parseToHsv)(value, fallback);
+  return { h, s, v, a };
+};
+var [ColorPickerProvider, useColorPickerContext] = (0, import_utils.createContext)({
+  name: "ColorPickerContext",
+  errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorPicker />"`
+});
+var useColorPicker = ({
+  isInvalid,
+  ...props
+}) => {
+  var _a;
+  let {
+    id,
+    name,
+    value: valueProp,
+    defaultValue,
+    fallbackValue,
+    onChange: onChangeProp,
+    onChangeStart: onChangeStartProp,
+    onChangeEnd: onChangeEndProp,
+    format,
+    required,
+    disabled,
+    readOnly,
+    onSwatchClick,
+    ...rest
+  } = (0, import_form_control.useFormControlProps)({ isInvalid, ...props });
+  const onChangeStartRef = (0, import_utils.useCallbackRef)(onChangeStartProp);
+  const onChangeEndRef = (0, import_utils.useCallbackRef)(onChangeEndProp);
+  const { supported: eyeDropperSupported, onOpen } = (0, import_use_eye_dropper.useEyeDropper)();
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: valueProp,
+    defaultValue: (_a = defaultValue != null ? defaultValue : fallbackValue) != null ? _a : "#ffffffff",
+    onChange: onChangeProp
+  });
+  const timeoutId = (0, import_react.useRef)(void 0);
+  const formatRef = (0, import_react.useRef)(format != null ? format : (0, import_utils.calcFormat)(value));
+  const isDraggingRef = (0, import_react.useRef)(false);
+  const [parsedValue, setParsedValue] = (0, import_react.useState)(
+    convertHsva(value, fallbackValue)
+  );
+  const { h, s, v, a } = parsedValue;
+  const withAlpha = formatRef.current.endsWith("a");
+  const isInteractive = !(disabled || readOnly);
+  const channels = (0, import_react.useMemo)(() => {
+    if (value.startsWith("hsl")) {
+      const { h: h2, s: s2, l, a: a2 } = convertHsla(value, fallbackValue);
+      let channels2 = [
+        { label: "H", space: "h", value: Math.round(h2), min: 0, max: 360 },
+        {
+          label: "S(%)",
+          space: "s",
+          value: Math.round(s2 * 100),
+          min: 0,
+          max: 100
+        },
+        {
+          label: "L(%)",
+          space: "l",
+          value: Math.round(l * 100),
+          min: 0,
+          max: 100
+        }
+      ];
+      if (withAlpha) {
+        channels2 = [
+          ...channels2,
+          {
+            label: "A(%)",
+            space: "a",
+            value: Math.round(a2 * 100),
+            min: 0,
+            max: 100
+          }
+        ];
+      }
+      return channels2;
+    } else {
+      const { r, g, b, a: a2 } = convertRgba(value, fallbackValue);
+      let channels2 = [
+        { label: "R", space: "r", value: Math.round(r), min: 0, max: 255 },
+        { label: "G", space: "g", value: Math.round(g), min: 0, max: 255 },
+        { label: "B", space: "b", value: Math.round(b), min: 0, max: 255 }
+      ];
+      if (withAlpha) {
+        channels2 = [
+          ...channels2,
+          {
+            label: "A(%)",
+            space: "a",
+            value: Math.round(a2 * 100),
+            min: 0,
+            max: 100
+          }
+        ];
+      }
+      return channels2;
+    }
+  }, [value, withAlpha, fallbackValue]);
+  const onChange = (0, import_react.useCallback)(
+    (value2) => {
+      if ((0, import_utils.isString)(value2)) {
+        setParsedValue(convertHsva(value2, fallbackValue));
+      } else {
+        setParsedValue((prev) => ({ ...prev, ...value2 }));
+      }
+    },
+    [fallbackValue]
+  );
+  const onChangeStart = (0, import_react.useCallback)(
+    (value2) => {
+      window.clearTimeout(timeoutId.current);
+      isDraggingRef.current = true;
+      const { h: h2, s: s2, v: v2, a: a2 } = { ...parsedValue, ...value2 };
+      const nextValue = (0, import_utils.hsvTo)([h2, s2, v2, a2], fallbackValue)(formatRef.current);
+      if (nextValue)
+        onChangeStartRef(nextValue);
+    },
+    [formatRef, onChangeStartRef, fallbackValue, parsedValue]
+  );
+  const onChangeEnd = (0, import_react.useCallback)(
+    (value2) => {
+      window.clearTimeout(timeoutId.current);
+      timeoutId.current = window.setTimeout(() => {
+        isDraggingRef.current = false;
+      }, 200);
+      let nextValue;
+      if ((0, import_utils.isString)(value2)) {
+        nextValue = (0, import_utils.convertColor)(value2, fallbackValue)(formatRef.current);
+      } else {
+        const { h: h2, s: s2, v: v2, a: a2 } = { ...parsedValue, ...value2 };
+        nextValue = (0, import_utils.hsvTo)([h2, s2, v2, a2], fallbackValue)(formatRef.current);
+      }
+      if (nextValue)
+        onChangeEndRef(nextValue);
+    },
+    [formatRef, onChangeEndRef, fallbackValue, parsedValue]
+  );
+  const onChannelChange = (0, import_react.useCallback)(
+    (ev, space) => {
+      let n = Math.floor(parseFloat(ev.target.value));
+      if (isNaN(n))
+        n = 0;
+      if (["s", "l", "a"].includes(space))
+        n = n / 100;
+      let nextValue;
+      if (value.startsWith("hsl")) {
+        const { h: h2, s: s2, l, a: a2 } = Object.assign(
+          convertHsla(value, fallbackValue),
+          { [space]: n }
+        );
+        nextValue = (0, import_utils.hslaTo)([h2, s2, l, a2], fallbackValue)(formatRef.current);
+      } else {
+        const { r, g, b, a: a2 } = Object.assign(
+          convertRgba(value, fallbackValue),
+          { [space]: n }
+        );
+        nextValue = (0, import_utils.rgbaTo)([r, g, b, a2], fallbackValue)(formatRef.current);
+      }
+      if (!nextValue)
+        return;
+      onChange(nextValue);
+      onChangeEnd(nextValue);
+    },
+    [value, onChange, onChangeEnd, formatRef, fallbackValue]
+  );
+  const onEyeDropperClick = (0, import_react.useCallback)(async () => {
+    var _a2;
+    try {
+      const { sRGBHex } = (_a2 = await onOpen()) != null ? _a2 : {};
+      if (!sRGBHex)
+        return;
+      onChange(sRGBHex);
+      onChangeEnd(sRGBHex);
+    } catch {
+    }
+  }, [onOpen, onChange, onChangeEnd]);
+  (0, import_utils.useUpdateEffect)(() => {
+    const value2 = (0, import_utils.hsvTo)([h, s, v, a], fallbackValue)(formatRef.current);
+    if (value2)
+      setValue(value2);
+  }, [h, s, v, a, fallbackValue]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (isDraggingRef.current)
+      return;
+    if (valueProp)
+      setParsedValue(convertHsva(valueProp, fallbackValue));
+  }, [valueProp]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!format)
+      return;
+    formatRef.current = format;
+    const nextValue = (0, import_utils.convertColor)(value, fallbackValue)(format);
+    if (nextValue)
+      setValue(nextValue);
+  }, [format, fallbackValue]);
+  const getContainerProps = (props2 = {}, ref = null) => ({
+    ...props2,
+    ref,
+    ...(0, import_utils.omitObject)(rest, ["aria-readonly"])
+  });
+  const getInputProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, import_form_control.formControlProperties),
+      ...props2,
+      id,
+      ref,
+      type: "hidden",
+      name,
+      value,
+      required,
+      disabled,
+      readOnly
+    }),
+    [disabled, id, name, readOnly, required, rest, value]
+  );
+  const getSaturationSliderProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      ...props2,
+      ref,
+      value: [h, s, v],
+      onChange: (0, import_utils.handlerAll)(props2.onChange, ([, s2, v2]) => onChange({ s: s2, v: v2 })),
+      onChangeStart: (0, import_utils.handlerAll)(
+        props2.onChangeStart,
+        ([, s2, v2]) => onChangeStart({ s: s2, v: v2 })
+      ),
+      onChangeEnd: (0, import_utils.handlerAll)(
+        props2.onChangeEnd,
+        ([, s2, v2]) => onChangeEnd({ s: s2, v: v2 })
+      )
+    }),
+    [
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      h,
+      s,
+      v,
+      onChange,
+      onChangeStart,
+      onChangeEnd
+    ]
+  );
+  const getHueSliderProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      ...props2,
+      ref,
+      value: h,
+      onChange: (0, import_utils.handlerAll)(props2.onChange, (h2) => onChange({ h: h2 })),
+      onChangeStart: (0, import_utils.handlerAll)(
+        props2.onChangeStart,
+        (h2) => onChangeStart({ h: h2 })
+      ),
+      onChangeEnd: (0, import_utils.handlerAll)(props2.onChangeEnd, (h2) => onChangeEnd({ h: h2 }))
+    }),
+    [
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      h,
+      onChange,
+      onChangeStart,
+      onChangeEnd
+    ]
+  );
+  const getAlphaSliderProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      ...props2,
+      ref,
+      value: a,
+      color: (0, import_utils.hsvTo)([h, s, v, a], fallbackValue)(formatRef.current),
+      onChange: (0, import_utils.handlerAll)(props2.onChange, (a2) => onChange({ a: a2 })),
+      onChangeStart: (0, import_utils.handlerAll)(
+        props2.onChangeStart,
+        (a2) => onChangeStart({ a: a2 })
+      ),
+      onChangeEnd: (0, import_utils.handlerAll)(props2.onChangeEnd, (a2) => onChangeEnd({ a: a2 }))
+    }),
+    [
+      fallbackValue,
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      formatRef,
+      h,
+      s,
+      v,
+      a,
+      onChange,
+      onChangeStart,
+      onChangeEnd
+    ]
+  );
+  const getChannelProps = (0, import_react.useCallback)(
+    ({ space, ...props2 }, ref = null) => {
+      return {
+        required,
+        disabled,
+        readOnly,
+        isInvalid,
+        ...props2,
+        ref,
+        type: "number",
+        step: 1,
+        onChange: (0, import_utils.handlerAll)(
+          props2.onChange,
+          (ev) => onChannelChange(ev, space)
+        )
+      };
+    },
+    [required, disabled, readOnly, isInvalid, onChannelChange]
+  );
+  const getEyeDropperProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      disabled,
+      "aria-label": "Pick a color",
+      ...props2,
+      ref,
+      onClick: (0, import_utils.handlerAll)(props2.onClick, onEyeDropperClick)
+    }),
+    [disabled, onEyeDropperClick]
+  );
+  const getSwatchProps = (0, import_react.useCallback)(
+    ({ color, ...props2 } = {}, ref = null) => ({
+      "aria-label": `select ${color} as the color`,
+      disabled,
+      readOnly,
+      ...props2,
+      ref,
+      color,
+      onClick: (0, import_utils.handlerAll)(props2.onClick, () => {
+        if (!color)
+          return;
+        onSwatchClick == null ? void 0 : onSwatchClick(color);
+        onChange(color);
+        onChangeEnd(color);
+      })
+    }),
+    [disabled, readOnly, onSwatchClick, onChange, onChangeEnd]
+  );
+  return {
+    value,
+    onChange,
+    eyeDropperSupported,
+    withAlpha,
+    isInteractive,
+    disabled,
+    readOnly,
+    channels,
+    getContainerProps,
+    getInputProps,
+    getSaturationSliderProps,
+    getHueSliderProps,
+    getAlphaSliderProps,
+    getEyeDropperProps,
+    getChannelProps,
+    getSwatchProps
+  };
+};
+
+// src/color-picker-eye-dropper.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ColorPickerEyeDropper = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
+  const { getEyeDropperProps, readOnly, size, styles } = useColorPickerContext();
+  const css = {
+    h: "auto",
+    minW: "auto",
+    pointerEvents: readOnly ? "none" : void 0,
+    ...styles.eyeDropper
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.IconButton,
+    {
+      className: (0, import_utils2.cx)("ui-color-picker__eye-dropper", className),
+      variant: "outline",
+      size,
+      __css: css,
+      ...getEyeDropperProps(rest, ref),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeDropperIcon, { className: "ui-color-picker__eye-dropper__icon" })
+    }
+  );
+});
+var EyeDropperIcon = ({ ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_icon.Icon,
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m2 22 1-1h3l9-9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 21v-3l9-9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
+      ]
+    }
+  );
+};
+
+// src/color-picker-sliders.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+
+// src/alpha-slider.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+
+// src/use-color-slider.ts
+var import_form_control2 = require("@yamada-ui/form-control");
+var import_use_controllable_state2 = require("@yamada-ui/use-controllable-state");
+var import_use_latest_ref = require("@yamada-ui/use-latest-ref");
+var import_use_pan_event = require("@yamada-ui/use-pan-event");
+var import_use_size = require("@yamada-ui/use-size");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var useColorSlider = ({
+  focusThumbOnChange = true,
+  ...props
+}) => {
+  if (!focusThumbOnChange)
+    props.isReadOnly = true;
+  let {
+    id,
+    name,
+    value: valueProp,
+    defaultValue,
+    min = 0,
+    max,
+    step = 1,
+    onChange: onChangeProp,
+    onChangeStart: onChangeStartProp,
+    onChangeEnd: onChangeEndProp,
+    thumbColor,
+    required,
+    disabled,
+    readOnly,
+    ...rest
+  } = (0, import_form_control2.useFormControlProps)(props);
+  const onChangeStart = (0, import_utils3.useCallbackRef)(onChangeStartProp);
+  const onChangeEnd = (0, import_utils3.useCallbackRef)(onChangeEndProp);
+  const [computedValue, setValue] = (0, import_use_controllable_state2.useControllableState)({
+    value: valueProp,
+    defaultValue: defaultValue != null ? defaultValue : min + (max - min) / 2,
+    onChange: onChangeProp
+  });
+  const value = (0, import_utils3.clampNumber)(computedValue, min, max);
+  const thumbPercent = (0, import_utils3.valueToPercent)(value, min, max);
+  const [isDragging, setDragging] = (0, import_react2.useState)(false);
+  const isInteractive = !(disabled || readOnly);
+  const oneStep = step || (max - min) / 100;
+  const tenStep = (max - min) / 10;
+  const containerRef = (0, import_react2.useRef)(null);
+  const trackRef = (0, import_react2.useRef)(null);
+  const thumbRef = (0, import_react2.useRef)(null);
+  const latestRef = (0, import_use_latest_ref.useLatestRef)({
+    value,
+    min,
+    max,
+    step,
+    isInteractive,
+    eventSource: null,
+    focusThumbOnChange
+  });
+  const thumbSize = (0, import_use_size.useSize)(thumbRef);
+  const getValueFromPointer = (0, import_react2.useCallback)(
+    (ev) => {
+      var _a, _b;
+      if (!trackRef.current)
+        return;
+      const { min: min2, max: max2, step: step2 } = latestRef.current;
+      latestRef.current.eventSource = "pointer";
+      const { left, width } = trackRef.current.getBoundingClientRect();
+      const { clientX } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
+      let percent = (clientX - left) / width;
+      let nextValue = (0, import_utils3.percentToValue)(percent, min2, max2);
+      if (step2)
+        nextValue = parseFloat((0, import_utils3.roundNumberToStep)(nextValue, min2, step2));
+      nextValue = (0, import_utils3.clampNumber)(nextValue, min2, max2);
+      return nextValue;
+    },
+    [latestRef]
+  );
+  const setValueFromPointer = (ev) => {
+    const { value: value2 } = latestRef.current;
+    const nextValue = getValueFromPointer(ev);
+    if (nextValue != null && nextValue !== value2)
+      setValue(nextValue);
+  };
+  const focusThumb = (0, import_react2.useCallback)(() => {
+    const { focusThumbOnChange: focusThumbOnChange2 } = latestRef.current;
+    if (focusThumbOnChange2)
+      setTimeout(() => {
+        var _a;
+        return (_a = thumbRef.current) == null ? void 0 : _a.focus();
+      });
+  }, [latestRef]);
+  const constrain = (0, import_react2.useCallback)(
+    (value2) => {
+      const { isInteractive: isInteractive2, min: min2, max: max2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      value2 = parseFloat((0, import_utils3.roundNumberToStep)(value2, min2, oneStep));
+      value2 = (0, import_utils3.clampNumber)(value2, min2, max2);
+      setValue(value2);
+    },
+    [setValue, latestRef, oneStep]
+  );
+  const stepUp = (0, import_react2.useCallback)(
+    (step2 = oneStep) => constrain(value + step2),
+    [constrain, value, oneStep]
+  );
+  const stepDown = (0, import_react2.useCallback)(
+    (step2 = oneStep) => constrain(value - step2),
+    [constrain, value, oneStep]
+  );
+  const onKeyDown = (0, import_react2.useCallback)(
+    (ev) => {
+      const { min: min2, max: max2 } = latestRef.current;
+      const actions = {
+        ArrowRight: () => stepUp(),
+        ArrowUp: () => stepUp(),
+        ArrowLeft: () => stepDown(),
+        ArrowDown: () => stepDown(),
+        PageUp: () => stepUp(tenStep),
+        PageDown: () => stepDown(tenStep),
+        Home: () => constrain(min2),
+        End: () => constrain(max2)
+      };
+      const action = actions[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      action(ev);
+      latestRef.current.eventSource = "keyboard";
+    },
+    [constrain, latestRef, stepDown, stepUp, tenStep]
+  );
+  (0, import_use_pan_event.usePanEvent)(containerRef, {
+    onSessionStart: (ev) => {
+      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setDragging(true);
+      focusThumb();
+      setValueFromPointer(ev);
+      onChangeStart(value2);
+    },
+    onSessionEnd: () => {
+      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setDragging(false);
+      onChangeEnd(value2);
+    },
+    onMove: (ev) => {
+      const { isInteractive: isInteractive2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setValueFromPointer(ev);
+    }
+  });
+  (0, import_utils3.useUpdateEffect)(() => {
+    const { eventSource, value: value2 } = latestRef.current;
+    if (eventSource === "keyboard")
+      onChangeEnd(value2);
+  }, [value, onChangeEnd]);
+  const getContainerProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => {
+      const { width: w } = thumbSize != null ? thumbSize : { width: 0 };
+      const style = {
+        ...props2.style,
+        ...rest.style,
+        paddingInline: `${w / 2}px`
+      };
+      return {
+        ...props2,
+        ...(0, import_utils3.omitObject)(rest, ["aria-readonly"]),
+        ref: (0, import_utils3.mergeRefs)(ref, containerRef),
+        tabIndex: -1,
+        style
+      };
+    },
+    [rest, thumbSize]
+  );
+  const getInputProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, import_form_control2.formControlProperties),
+      ...props2,
+      id,
+      ref,
+      type: "hidden",
+      name,
+      value,
+      required,
+      disabled,
+      readOnly
+    }),
+    [disabled, id, name, readOnly, required, rest, value]
+  );
+  const getTrackProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(
+        rest,
+        (0, import_form_control2.getFormControlProperties)({ omit: ["aria-readonly"] })
+      ),
+      ...props2,
+      ref: (0, import_utils3.mergeRefs)(ref, trackRef)
+    }),
+    [rest]
+  );
+  const getThumbProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => {
+      const n = thumbPercent;
+      const { width: w } = thumbSize != null ? thumbSize : { width: 0 };
+      const style = {
+        ...props2.style,
+        position: "absolute",
+        userSelect: "none",
+        touchAction: "none",
+        left: `calc(${n}% - ${w / 2}px)`
+      };
+      return {
+        "aria-label": "Slider thumb",
+        bg: thumbColor != null ? thumbColor : `hsl(${value}, 100%, 50%)`,
+        ...pickObject(rest, import_form_control2.formControlProperties),
+        ...props2,
+        ref: (0, import_utils3.mergeRefs)(ref, thumbRef),
+        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        role: "slider",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "data-active": (0, import_utils3.dataAttr)(isDragging && focusThumbOnChange),
+        onKeyDown: (0, import_utils3.handlerAll)(props2.onKeyDown, onKeyDown),
+        onFocus: (0, import_utils3.handlerAll)(props2.onFocus, rest.onFocus),
+        onBlur: (0, import_utils3.handlerAll)(props2.onBlur, rest.onBlur),
+        style
+      };
+    },
+    [
+      thumbColor,
+      focusThumbOnChange,
+      isDragging,
+      isInteractive,
+      min,
+      max,
+      onKeyDown,
+      rest,
+      thumbPercent,
+      thumbSize,
+      value
+    ]
+  );
+  return {
+    value,
+    getContainerProps,
+    getTrackProps,
+    getInputProps,
+    getThumbProps
+  };
+};
+
+// src/alpha-slider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultOverlays = (color, min, max, withShadow) => {
+  let overlays = [
+    {
+      bgImage: "linear-gradient(45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ui-checkers) 75%), linear-gradient(-45deg, var(--ui-body) 75%, var(--ui-checkers) 75%)",
+      bgSize: `8px 8px`,
+      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
+      var: [
+        {
+          name: "checkers",
+          token: "colors",
+          value: ["blackAlpha.300", "whiteAlpha.300"]
+        },
+        {
+          name: "body",
+          token: "colors",
+          value: ["whiteAlpha.500", "blackAlpha.500"]
+        }
+      ]
+    },
+    {
+      bgGradient: `linear(to-r, ${(0, import_utils4.convertColor)(color)("hex") + (0, import_utils4.alphaToHex)(min)}, ${(0, import_utils4.convertColor)(color)("hex") + (0, import_utils4.alphaToHex)(max)})`
+    }
+  ];
+  if (withShadow)
+    overlays = [
+      ...overlays,
+      {
+        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`
+      }
+    ];
+  return overlays;
+};
+var AlphaSlider = (0, import_core2.forwardRef)(
+  (props, ref) => {
+    const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("AlphaSlider", props);
+    const {
+      className,
+      inputProps,
+      trackProps,
+      thumbProps,
+      color = "#ffffff",
+      min = 0,
+      max = 1,
+      withShadow = true,
+      overlays = defaultOverlays(color, min, max, withShadow),
+      __css,
+      ...computedProps
+    } = (0, import_core2.omitThemeProps)(mergedProps);
+    const { getContainerProps, getTrackProps, getInputProps, getThumbProps } = useColorSlider({
+      min,
+      max,
+      step: 0.01,
+      thumbColor: "transparent",
+      ...computedProps
+    });
+    const css = {
+      position: "relative",
+      ...styles.container,
+      ...__css
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.div,
+      {
+        className: (0, import_utils4.cx)("ui-alpha-slider", className),
+        __css: css,
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.input, { ...getInputProps(inputProps, ref) }),
+          overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core2.ui.div,
+            {
+              className: "ui-alpha-slider__overlay",
+              __css: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                ...styles.overlay
+              },
+              ...props2
+            },
+            index
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core2.ui.div,
+            {
+              className: "ui-alpha-slider__track",
+              __css: {
+                position: "relative",
+                w: "full",
+                h: "full",
+                ...styles.track
+              },
+              ...getTrackProps(trackProps),
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_core2.ui.div,
+                {
+                  className: "ui-alpha-slider__thumb",
+                  __css: { ...styles.thumb },
+                  ...getThumbProps(thumbProps)
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/hue-slider.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultOverlays2 = (min, max, withShadow) => {
+  let overlays = [
+    {
+      bgGradient: `linear(to-r, ${[...Array(7)].map(
+        (_, index) => `hsl(${Math.round(min + (max - min) / 6 * index)}, 100%, 50%)`
+      ).join(", ")})`
+    }
+  ];
+  if (withShadow)
+    overlays = [
+      ...overlays,
+      {
+        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`
+      }
+    ];
+  return overlays;
+};
+var HueSlider = (0, import_core3.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core3.useMultiComponentStyle)("HueSlider", props);
+  const {
+    className,
+    inputProps,
+    trackProps,
+    thumbProps,
+    min = 0,
+    max = 360,
+    withShadow = true,
+    overlays = defaultOverlays2(min, max, withShadow),
+    __css,
+    ...computedProps
+  } = (0, import_core3.omitThemeProps)(mergedProps);
+  const { getContainerProps, getTrackProps, getInputProps, getThumbProps } = useColorSlider({ min, max, step: 1, ...computedProps });
+  const css = {
+    position: "relative",
+    ...styles.container,
+    ...__css
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_core3.ui.div,
+    {
+      className: (0, import_utils5.cx)("ui-hue-slider", className),
+      __css: css,
+      ...getContainerProps(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.input, { ...getInputProps(inputProps, ref) }),
+        overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_core3.ui.div,
+          {
+            className: "ui-hue-slider__overlay",
+            __css: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              ...styles.overlay
+            },
+            ...props2
+          },
+          index
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_core3.ui.div,
+          {
+            className: "ui-hue-slider__track",
+            __css: { position: "relative", w: "full", h: "full", ...styles.track },
+            ...getTrackProps(trackProps),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_core3.ui.div,
+              {
+                className: "ui-hue-slider__thumb",
+                __css: { ...styles.thumb },
+                ...getThumbProps(thumbProps)
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/color-picker-sliders.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ColorPickerSliders = (0, import_core4.forwardRef)(
+  ({
+    className,
+    hueSliderRef,
+    hueSliderProps,
+    alphaSliderRef,
+    alphaSliderProps,
+    ...rest
+  }, ref) => {
+    let { size, withAlpha, getHueSliderProps, getAlphaSliderProps, styles } = useColorPickerContext();
+    if (size === "full")
+      size = "lg";
+    const css = {
+      display: "flex",
+      flexDirection: "column",
+      ...styles.sliders
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_core4.ui.div,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-color-picker__sliders", className),
+        __css: css,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            HueSlider,
+            {
+              size,
+              className: "ui-color-picker__hue-slider",
+              __css: { ...styles.hueSlider },
+              ...getHueSliderProps(hueSliderProps, hueSliderRef)
+            }
+          ),
+          withAlpha ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            AlphaSlider,
+            {
+              size,
+              className: "ui-color-picker__alpha-slider",
+              __css: { ...styles.alphaSlider },
+              ...getAlphaSliderProps(alphaSliderProps, alphaSliderRef)
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+
+// src/color-swatch.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var defaultOverlays3 = (background, withShadow) => {
+  let overlays = [
+    {
+      bgImage: "linear-gradient(45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ui-checkers) 75%), linear-gradient(-45deg, var(--ui-body) 75%, var(--ui-checkers) 75%)",
+      bgSize: `8px 8px`,
+      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
+      var: [
+        {
+          name: "checkers",
+          token: "colors",
+          value: ["blackAlpha.300", "whiteAlpha.300"]
+        },
+        {
+          name: "body",
+          token: "colors",
+          value: ["whiteAlpha.500", "blackAlpha.500"]
+        }
+      ]
+    },
+    { background }
+  ];
+  if (withShadow)
+    overlays = [
+      ...overlays,
+      {
+        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`
+      }
+    ];
+  return overlays;
+};
+var ColorSwatch = (0, import_core5.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core5.useMultiComponentStyle)("ColorSwatch", props);
+  const {
+    className,
+    color = "#ffffff00",
+    withShadow = true,
+    overlays = defaultOverlays3(color, withShadow),
+    isRounded,
+    __css,
+    ...rest
+  } = (0, import_core5.omitThemeProps)(mergedProps);
+  const css = {
+    position: "relative",
+    _before: {
+      content: `""`,
+      display: "block",
+      h: 0,
+      pb: "100%"
+    },
+    "& > *": {
+      overflow: "hidden",
+      position: "absolute",
+      top: "0",
+      right: "0",
+      bottom: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      w: "100%",
+      h: "100%"
+    },
+    ...styles.container,
+    ...__css
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_core5.ui.div,
+    {
+      ref,
+      className: (0, import_utils7.cx)("ui-color-swatch", className),
+      ...isRounded ? { rounded: "full" } : {},
+      __css: css,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.div, { ...isRounded ? { rounded: "full" } : {}, children: overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_core5.ui.div,
+        {
+          __css: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ...styles.overlay
+          },
+          ...isRounded ? { rounded: "full" } : {},
+          ...props2
+        },
+        index
+      )) })
+    }
+  );
+});
+
+// src/color-picker-body.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ColorPickerBody = (0, import_core6.forwardRef)(
+  ({
+    className,
+    withEyeDropper = true,
+    withResult,
+    eyeDropperRef,
+    eyeDropperProps,
+    hueSliderRef,
+    hueSliderProps,
+    alphaSliderRef,
+    alphaSliderProps,
+    ...rest
+  }, ref) => {
+    const { value, eyeDropperSupported, styles } = useColorPickerContext();
+    const css = {
+      display: "flex",
+      w: "full",
+      ...styles.body
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_core6.ui.div,
+      {
+        ref,
+        className: (0, import_utils8.cx)("ui-color-picker__body", className),
+        __css: css,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ColorPickerSliders,
+            {
+              ...{
+                hueSliderRef,
+                hueSliderProps,
+                alphaSliderRef,
+                alphaSliderProps
+              }
+            }
+          ),
+          withEyeDropper && eyeDropperSupported ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ColorPickerEyeDropper, { ref: eyeDropperRef, ...eyeDropperProps }) : null,
+          withResult ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ColorSwatch,
+            {
+              className: "ui-color-picker__result",
+              color: value,
+              __css: { ...styles.result }
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+
+// src/color-picker-channels.tsx
+var import_core7 = require("@yamada-ui/core");
+var import_input = require("@yamada-ui/input");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ColorPickerChannels = (0, import_core7.forwardRef)(
+  ({ className, channelProps, ...rest }, ref) => {
+    const { withAlpha, channels, getChannelProps, styles } = useColorPickerContext();
+    const css = {
+      display: "grid",
+      gridTemplateColumns: `repeat(${withAlpha ? "4" : "3"}, 1fr)`,
+      ...styles.channels
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_core7.ui.div,
+      {
+        ref,
+        className: (0, import_utils9.cx)("ui-color-picker__channels", className),
+        __css: css,
+        ...rest,
+        children: channels.map(({ label, space, value, min, max }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ColorPickerChannel,
+          {
+            channelLabel: label,
+            ...getChannelProps({ ...channelProps, space, value, min, max })
+          },
+          label
+        ))
+      }
+    );
+  }
+);
+var ColorPickerChannel = (0, import_core7.forwardRef)(
+  ({ className, channelLabel, ...rest }, ref) => {
+    const id = (0, import_react3.useId)();
+    let { size, disabled, readOnly, styles } = useColorPickerContext();
+    if (size === "full")
+      size = "lg";
+    const css = { ...styles.channel };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.ui.div, { className: (0, import_utils9.cx)("ui-color-picker__channel", className), children: [
+      channelLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_core7.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__ */ (0, import_jsx_runtime7.jsx)(import_input.Input, { ref, id, size, __css: css, ...rest })
+    ] });
+  }
+);
+
+// src/color-picker-swatches.tsx
+var import_core8 = require("@yamada-ui/core");
+var import_utils10 = require("@yamada-ui/utils");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ColorPickerSwatches = (0, import_core8.forwardRef)(
+  ({
+    className,
+    swatchesLabel,
+    swatches,
+    swatchesContainerProps,
+    swatchProps,
+    swatchesColumns,
+    ...rest
+  }, ref) => {
+    const { getSwatchProps, readOnly, styles } = useColorPickerContext();
+    const css = {
+      display: "grid",
+      gridTemplateColumns: (0, import_utils10.replaceObject)(
+        swatchesColumns,
+        (value) => value != null ? `repeat(${value}, minmax(0, 1fr))` : void 0
+      ),
+      ...styles.swatches
+    };
+    return (swatches == null ? void 0 : swatches.length) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.ui.div, { ...swatchesContainerProps, children: [
+      swatchesLabel ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_core8.ui.p,
+        {
+          className: "ui-color-picker__swatches__label",
+          __css: { ...styles.swatchesLabel },
+          children: swatchesLabel
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_core8.ui.div,
+        {
+          ref,
+          className: (0, import_utils10.cx)("ui-color-picker__swatches", className),
+          __css: css,
+          ...rest,
+          children: swatches.map((color) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            ColorSwatch,
+            {
+              as: "button",
+              __css: {
+                boxSize: "full",
+                pointerEvents: readOnly ? "none" : void 0,
+                ...styles.swatch
+              },
+              ...getSwatchProps({ color, ...swatchProps })
+            },
+            color
+          ))
+        }
+      )
+    ] }) : null;
+  }
+);
+
+// src/saturation-slider.tsx
+var import_core9 = require("@yamada-ui/core");
+var import_utils12 = require("@yamada-ui/utils");
+
+// src/use-saturation-slider.ts
+var import_form_control3 = require("@yamada-ui/form-control");
+var import_use_controllable_state3 = require("@yamada-ui/use-controllable-state");
+var import_use_latest_ref2 = require("@yamada-ui/use-latest-ref");
+var import_use_pan_event2 = require("@yamada-ui/use-pan-event");
+var import_use_size2 = require("@yamada-ui/use-size");
+var import_utils11 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+var defaultOverlays4 = (withShadow) => {
+  let overlays = [
+    ([h]) => ({
+      bg: `hsl(${h}, 100%, 50%)`,
+      bgImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)"
+    })
+  ];
+  if (withShadow)
+    overlays = [
+      ...overlays,
+      {
+        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`
+      }
+    ];
+  return overlays;
+};
+var useSaturationSlider = ({
+  focusThumbOnChange = true,
+  ...props
+}) => {
+  if (!focusThumbOnChange)
+    props.isReadOnly = true;
+  let {
+    id,
+    name,
+    value: valueProp,
+    defaultValue = [0, 0, 1],
+    onChange: onChangeProp,
+    onChangeStart: onChangeStartProp,
+    onChangeEnd: onChangeEndProp,
+    step = 0.01,
+    thumbColor,
+    required,
+    disabled,
+    readOnly,
+    withShadow = true,
+    overlays: overlaysProp = defaultOverlays4(withShadow),
+    ...rest
+  } = (0, import_form_control3.useFormControlProps)(props);
+  const onChangeStart = (0, import_utils11.useCallbackRef)(onChangeStartProp);
+  const onChangeEnd = (0, import_utils11.useCallbackRef)(onChangeEndProp);
+  const [value, setValue] = (0, import_use_controllable_state3.useControllableState)({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp
+  });
+  const [isDragging, setDragging] = (0, import_react4.useState)(false);
+  const isInteractive = !(disabled || readOnly);
+  let [h, s, v] = value;
+  s = (0, import_utils11.clampNumber)(s, 0, 1);
+  v = (0, import_utils11.clampNumber)(v, 0, 1);
+  const containerRef = (0, import_react4.useRef)(null);
+  const trackRef = (0, import_react4.useRef)(null);
+  const thumbRef = (0, import_react4.useRef)(null);
+  const latestRef = (0, import_use_latest_ref2.useLatestRef)({
+    value,
+    step,
+    isInteractive,
+    eventSource: null,
+    focusThumbOnChange
+  });
+  const thumbSize = (0, import_use_size2.useSize)(thumbRef);
+  const overlays = (0, import_react4.useMemo)(
+    () => overlaysProp.map((propsOrFunc) => (0, import_utils11.runIfFunc)(propsOrFunc, [h, s, v])),
+    [overlaysProp, h, s, v]
+  );
+  const getValueFromPointer = (0, import_react4.useCallback)(
+    (ev) => {
+      var _a, _b;
+      if (!trackRef.current)
+        return [];
+      const { step: step2 } = latestRef.current;
+      latestRef.current.eventSource = "pointer";
+      const { bottom, left, height, width } = trackRef.current.getBoundingClientRect();
+      const { clientX, clientY } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
+      let s2 = (0, import_utils11.clampNumber)((clientX - left) / width, 0, 1);
+      let v2 = (0, import_utils11.clampNumber)((bottom - clientY) / height, 0, 1);
+      if (step2) {
+        s2 = parseFloat((0, import_utils11.roundNumberToStep)(s2, 0, step2));
+        v2 = parseFloat((0, import_utils11.roundNumberToStep)(v2, 0, step2));
+      }
+      return [s2, v2];
+    },
+    [latestRef]
+  );
+  const setValueFromPointer = (ev) => {
+    const { value: value2 } = latestRef.current;
+    const [nextS, nextV] = getValueFromPointer(ev);
+    if (nextS == null || nextV == null)
+      return;
+    const [, s2, v2] = value2;
+    if (nextS !== s2 || nextV !== v2)
+      setValue(([h2]) => [h2, nextS, nextV]);
+  };
+  const focusThumb = (0, import_react4.useCallback)(() => {
+    const { focusThumbOnChange: focusThumbOnChange2 } = latestRef.current;
+    if (focusThumbOnChange2)
+      setTimeout(() => {
+        var _a;
+        return (_a = thumbRef.current) == null ? void 0 : _a.focus();
+      });
+  }, [latestRef]);
+  const constrain = (0, import_react4.useCallback)(
+    ([s2, v2]) => {
+      const { isInteractive: isInteractive2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      s2 = (0, import_utils11.clampNumber)(s2, 0, 1);
+      v2 = (0, import_utils11.clampNumber)(v2, 0, 1);
+      setValue(([h2]) => [h2, s2, v2]);
+    },
+    [latestRef, setValue]
+  );
+  const onKeyDown = (0, import_react4.useCallback)(
+    (ev) => {
+      const actions = {
+        ArrowRight: () => constrain([s + step, v]),
+        ArrowUp: () => constrain([s, v + step]),
+        ArrowLeft: () => constrain([s - step, v]),
+        ArrowDown: () => constrain([s, v - step])
+      };
+      const action = actions[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      action(ev);
+      latestRef.current.eventSource = "keyboard";
+    },
+    [latestRef, constrain, s, v, step]
+  );
+  (0, import_use_pan_event2.usePanEvent)(containerRef, {
+    onSessionStart: (ev) => {
+      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setDragging(true);
+      focusThumb();
+      setValueFromPointer(ev);
+      onChangeStart(value2);
+    },
+    onSessionEnd: () => {
+      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setDragging(false);
+      onChangeEnd(value2);
+    },
+    onMove: (ev) => {
+      const { isInteractive: isInteractive2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setValueFromPointer(ev);
+    }
+  });
+  (0, import_utils11.useUpdateEffect)(() => {
+    const { eventSource, value: value2 } = latestRef.current;
+    if (eventSource === "keyboard")
+      onChangeEnd(value2);
+  }, [value, onChangeEnd]);
+  const getContainerProps = (0, import_react4.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...(0, import_utils11.omitObject)(rest, ["aria-readonly"]),
+      ref: (0, import_utils11.mergeRefs)(ref, containerRef),
+      tabIndex: -1
+    }),
+    [rest]
+  );
+  const getInnerProps = (0, import_react4.useCallback)(
+    (props2 = {}, ref = null) => {
+      const { width: w } = thumbSize != null ? thumbSize : { width: 0 };
+      const style = {
+        ...props2.style,
+        ...rest.style,
+        padding: `${w / 2}px`
+      };
+      return {
+        ...props2,
+        ref,
+        style
+      };
+    },
+    [rest, thumbSize]
+  );
+  const getInputProps = (0, import_react4.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils11.pickObject)(rest, import_form_control3.formControlProperties),
+      ...props2,
+      id,
+      ref,
+      type: "hidden",
+      name,
+      value: [h, s, v].toString(),
+      required,
+      disabled,
+      readOnly
+    }),
+    [disabled, id, name, readOnly, required, rest, h, s, v]
+  );
+  const getTrackProps = (0, import_react4.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils11.pickObject)(
+        rest,
+        (0, import_form_control3.getFormControlProperties)({ omit: ["aria-readonly"] })
+      ),
+      ...props2,
+      ref: (0, import_utils11.mergeRefs)(ref, trackRef)
+    }),
+    [rest]
+  );
+  const getThumbProps = (0, import_react4.useCallback)(
+    (props2 = {}, ref = null) => {
+      const { width, height } = thumbSize != null ? thumbSize : { width: 0, height: 0 };
+      const x = s * 100;
+      const y = v * 100;
+      const style = {
+        ...props2.style,
+        position: "absolute",
+        userSelect: "none",
+        touchAction: "none",
+        left: `calc(${x}% - ${width / 2}px)`,
+        bottom: `calc(${y}% - ${height / 2}px)`
+      };
+      return {
+        "aria-label": "Saturation and brightness thumb",
+        bg: thumbColor != null ? thumbColor : (0, import_utils11.hsvTo)([h, s, v])(),
+        ...(0, import_utils11.pickObject)(rest, import_form_control3.formControlProperties),
+        ...props2,
+        ref: (0, import_utils11.mergeRefs)(ref, thumbRef),
+        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        role: "slider",
+        "aria-valuenow": s,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuetext": `saturation ${s}, brightness ${v}`,
+        "data-active": (0, import_utils11.dataAttr)(isDragging && focusThumbOnChange),
+        onKeyDown: (0, import_utils11.handlerAll)(props2.onKeyDown, onKeyDown),
+        onFocus: (0, import_utils11.handlerAll)(props2.onFocus, rest.onFocus),
+        onBlur: (0, import_utils11.handlerAll)(props2.onBlur, rest.onBlur),
+        style
+      };
+    },
+    [
+      h,
+      s,
+      v,
+      thumbColor,
+      focusThumbOnChange,
+      isDragging,
+      isInteractive,
+      onKeyDown,
+      rest,
+      thumbSize
+    ]
+  );
+  return {
+    value,
+    overlays,
+    getContainerProps,
+    getInnerProps,
+    getTrackProps,
+    getInputProps,
+    getThumbProps
+  };
+};
+
+// src/saturation-slider.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SaturationSlider = (0, import_core9.forwardRef)(
+  (props, ref) => {
+    const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)(
+      "SaturationSlider",
+      props
+    );
+    const {
+      className,
+      ratio = 16 / 9,
+      innerProps,
+      inputProps,
+      trackProps,
+      thumbProps,
+      __css,
+      ...computedProps
+    } = (0, import_core9.omitThemeProps)(mergedProps);
+    const {
+      overlays,
+      getContainerProps,
+      getInnerProps,
+      getTrackProps,
+      getInputProps,
+      getThumbProps
+    } = useSaturationSlider(computedProps);
+    const css = {
+      position: "relative",
+      _before: {
+        content: `""`,
+        display: "block",
+        h: 0,
+        pb: (0, import_utils12.replaceObject)(ratio, (r) => `${1 / r * 100}%`)
+      },
+      "& > *": {
+        position: "absolute",
+        top: "0",
+        right: "0",
+        bottom: "0",
+        left: "0",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        w: "100%",
+        h: "100%"
+      },
+      ...styles.container,
+      ...__css
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_core9.ui.div,
+      {
+        className: (0, import_utils12.cx)("ui-saturation-slider", className),
+        __css: css,
+        ...getContainerProps(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          import_core9.ui.div,
+          {
+            className: (0, import_utils12.cx)("ui-saturation-slider__inner", className),
+            __css: { ...styles.inner },
+            ...getInnerProps(innerProps),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.ui.input, { ...getInputProps(inputProps, ref) }),
+              overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                import_core9.ui.div,
+                {
+                  className: "ui-saturation-slider__overlay",
+                  __css: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    ...styles.overlay
+                  },
+                  ...props2
+                },
+                index
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                import_core9.ui.div,
+                {
+                  className: "ui-saturation-slider__track",
+                  __css: {
+                    position: "relative",
+                    w: "full",
+                    h: "full",
+                    ...styles.track
+                  },
+                  ...getTrackProps(trackProps),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_core9.ui.div,
+                    {
+                      className: "ui-saturation-slider__thumb",
+                      __css: { ...styles.thumb },
+                      ...getThumbProps(thumbProps)
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+// src/color-picker.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ColorPicker = (0, import_core10.forwardRef)(
+  ({ size, ...props }, ref) => {
+    const [styles, mergedProps] = (0, import_core10.useMultiComponentStyle)("ColorPicker", {
+      size,
+      ...props
+    });
+    const {
+      className,
+      withResult = true,
+      withPicker = true,
+      withChannel = true,
+      swatches,
+      swatchesColumns = 7,
+      inputProps,
+      withEyeDropper,
+      eyeDropperRef,
+      eyeDropperProps,
+      saturationSliderRef,
+      saturationSliderProps,
+      hueSliderRef,
+      hueSliderProps,
+      alphaSliderRef,
+      alphaSliderProps,
+      swatchesLabel,
+      swatchProps,
+      swatchesProps,
+      ...computedProps
+    } = (0, import_core10.omitThemeProps)(mergedProps);
+    const {
+      getContainerProps,
+      getInputProps,
+      getSaturationSliderProps,
+      ...rest
+    } = useColorPicker(computedProps);
+    const css = {
+      display: "flex",
+      flexDirection: "column",
+      ...styles.container
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorPickerProvider, { value: { styles, size, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      import_core10.ui.div,
+      {
+        ref,
+        className: (0, import_utils13.cx)("ui-color-picker", className),
+        __css: css,
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.ui.input, { ...getInputProps(inputProps, ref) }),
+          withPicker ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            SaturationSlider,
+            {
+              size,
+              className: "ui-color-picker__saturation-slider",
+              __css: { ...styles.saturationSlider },
+              ...getSaturationSliderProps(
+                saturationSliderProps,
+                saturationSliderRef
+              )
+            }
+          ) : null,
+          withPicker ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            ColorPickerBody,
+            {
+              ...{
+                withResult,
+                withEyeDropper,
+                eyeDropperRef,
+                eyeDropperProps,
+                hueSliderRef,
+                hueSliderProps,
+                alphaSliderRef,
+                alphaSliderProps
+              }
+            }
+          ) : null,
+          withPicker && withChannel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColorPickerChannels, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            ColorPickerSwatches,
+            {
+              ...{
+                swatchesLabel,
+                swatches,
+                swatchesColumns,
+                swatchProps,
+                ...swatchesProps
+              }
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+
+// src/color-input.tsx
+var import_core12 = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_portal = require("@yamada-ui/portal");
+var import_utils15 = require("@yamada-ui/utils");
+var import_react6 = require("react");
+
+// src/use-color-input.ts
+var import_core11 = require("@yamada-ui/core");
+var import_form_control4 = require("@yamada-ui/form-control");
+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");
+var import_utils14 = require("@yamada-ui/utils");
+var import_react5 = require("react");
+var [ColorInputProvider, useColorInputContext] = (0, import_utils14.createContext)({
+  name: "ColorInputContext",
+  errorMessage: `useColorInputContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorInput />"`
+});
+var useColorInput = ({
+  value: valueProp,
+  defaultValue,
+  fallbackValue,
+  defaultColor,
+  onChange: onChangeProp,
+  onChangeStart,
+  onChangeEnd,
+  onSwatchClick,
+  formatInput = (value) => value,
+  closeOnBlur = true,
+  closeOnEsc = true,
+  placement = "bottom-start",
+  duration = 0.2,
+  defaultIsOpen,
+  onOpen: onOpenProp,
+  onClose: onCloseProp,
+  allowInput = true,
+  closeOnSelectSwatch,
+  format,
+  swatchesLabel,
+  swatches,
+  swatchesColumns,
+  withPicker,
+  withChannel,
+  withResult = false,
+  withColorPickerEyeDropper = false,
+  colorPickerVariant,
+  colorPickerSize,
+  colorPickerColorScheme,
+  ...rest
+}) => {
+  rest = (0, import_form_control4.useFormControlProps)(rest);
+  const formControlProps = (0, import_utils14.pickObject)(
+    rest,
+    (0, import_form_control4.getFormControlProperties)({ omit: ["aria-readonly"] })
+  );
+  const { disabled, readOnly } = formControlProps;
+  const computedProps = (0, import_utils14.splitObject)(rest, import_core11.layoutStyleProperties);
+  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)();
+  const [value, setValue] = (0, import_use_controllable_state4.useControllableState)({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp
+  });
+  const formatRef = (0, import_react5.useRef)(format != null ? format : (0, import_utils14.calcFormat)(value != null ? value : ""));
+  const isInputFocused = (0, import_react5.useRef)(false);
+  const [inputValue, setInputValue] = (0, import_react5.useState)(value != null ? value : "");
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(defaultIsOpen != null ? defaultIsOpen : false);
+  const isColorPickerFull = colorPickerSize === "full";
+  const onOpen = (0, import_react5.useCallback)(() => {
+    if (disabled || readOnly)
+      return;
+    setIsOpen(true);
+    onOpenProp == null ? void 0 : onOpenProp();
+  }, [onOpenProp, disabled, readOnly]);
+  const onClose = (0, import_react5.useCallback)(() => {
+    if (!isOpen)
+      return;
+    const next = (0, import_utils14.convertColor)(value, fallbackValue)(formatRef.current);
+    setValue((prev) => !next || prev === next ? prev : next);
+    setInputValue(formatInput(next != null ? next : ""));
+    setIsOpen(false);
+    onCloseProp == null ? void 0 : onCloseProp();
+  }, [
+    formatRef,
+    isOpen,
+    setValue,
+    onCloseProp,
+    value,
+    formatInput,
+    setInputValue,
+    fallbackValue
+  ]);
+  const onContainerClick = (0, import_react5.useCallback)(() => {
+    if (isOpen)
+      return;
+    onOpen();
+  }, [isOpen, onOpen]);
+  const onInputFocus = (0, import_react5.useCallback)(() => {
+    isInputFocused.current = true;
+    if (isOpen)
+      return;
+    onOpen();
+  }, [isOpen, onOpen]);
+  const onInputBlur = (0, import_react5.useCallback)(() => {
+    isInputFocused.current = false;
+  }, []);
+  const onContainerBlur = (0, import_react5.useCallback)(
+    (ev) => {
+      const relatedTarget = (0, import_utils14.getEventRelatedTarget)(ev);
+      if ((0, import_utils14.isContains)(containerRef.current, relatedTarget))
+        return;
+      if (!closeOnBlur)
+        return;
+      if (isOpen)
+        onClose();
+    },
+    [closeOnBlur, isOpen, onClose]
+  );
+  const onInputKeyDown = (0, import_react5.useCallback)(
+    (ev) => {
+      if (ev.key === " ")
+        ev.key = ev.code;
+      if (disabled || readOnly)
+        return;
+      const actions = {
+        Space: !isOpen ? onOpen : void 0,
+        Enter: !isOpen ? onOpen : void 0,
+        Escape: closeOnEsc ? onClose : void 0
+      };
+      const action = actions[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      action();
+    },
+    [disabled, readOnly, isOpen, onOpen, closeOnEsc, onClose]
+  );
+  const onInputChange = (0, import_react5.useCallback)(
+    (ev) => {
+      const value2 = ev.target.value;
+      setInputValue(formatInput(value2));
+      setValue(value2);
+    },
+    [setInputValue, formatInput, setValue]
+  );
+  const onColorPickerChange = (0, import_react5.useCallback)(
+    (value2) => {
+      setValue(value2);
+      if (!isInputFocused.current)
+        setInputValue(formatInput(value2));
+    },
+    [setValue, formatInput]
+  );
+  const onEyeDropperClick = (0, import_react5.useCallback)(
+    async (ev) => {
+      var _a;
+      ev.preventDefault();
+      ev.stopPropagation();
+      try {
+        const { sRGBHex } = (_a = await onEyeDropperOpen()) != null ? _a : {};
+        if (!sRGBHex)
+          return;
+        onColorPickerChange(sRGBHex);
+      } catch {
+      }
+    },
+    [onEyeDropperOpen, onColorPickerChange]
+  );
+  (0, import_use_outside_click.useOutsideClick)({
+    ref: containerRef,
+    handler: onClose,
+    enabled: closeOnBlur
+  });
+  (0, import_utils14.useUpdateEffect)(() => {
+    if (!format)
+      return;
+    formatRef.current = format;
+    const nextValue = (0, import_utils14.convertColor)(value, fallbackValue)(format);
+    if (!nextValue)
+      return;
+    setInputValue(formatInput(nextValue));
+    setValue(nextValue);
+  }, [format, fallbackValue]);
+  const getPopoverProps = (0, import_react5.useCallback)(
+    (props) => ({
+      matchWidth: isColorPickerFull,
+      ...rest,
+      ...props,
+      isOpen,
+      onOpen,
+      onClose,
+      placement,
+      duration,
+      trigger: "never",
+      closeOnButton: false
+    }),
+    [isColorPickerFull, duration, onClose, onOpen, placement, rest, isOpen]
+  );
+  const getContainerProps = (0, import_react5.useCallback)(
+    (props = {}, ref = null) => ({
+      ref: (0, import_utils14.mergeRefs)(containerRef, ref),
+      ...computedProps[0],
+      ...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]
+  );
+  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"]),
+      ...props,
+      style: {
+        ...props.style,
+        ...!allowInput ? { pointerEvents: "none" } : {}
+      },
+      value: inputValue,
+      "data-active": (0, import_utils14.dataAttr)(isOpen),
+      "aria-expanded": (0, import_utils14.dataAttr)(isOpen),
+      onFocus: (0, import_utils14.handlerAll)(props.onFocus, rest.onFocus, onInputFocus),
+      onKeyDown: (0, import_utils14.handlerAll)(props.onKeyDown, rest.onKeyDown, onInputKeyDown),
+      onChange: (0, import_utils14.handlerAll)(props.onChange, onInputChange),
+      onBlur: (0, import_utils14.handlerAll)(props.onFocus, onInputBlur)
+    }),
+    [
+      allowInput,
+      computedProps,
+      inputValue,
+      isOpen,
+      rest,
+      onInputFocus,
+      onInputKeyDown,
+      onInputChange,
+      onInputBlur
+    ]
+  );
+  const getEyeDropperProps = (0, import_react5.useCallback)(
+    (props = {}, ref = null) => ({
+      disabled,
+      "aria-label": "Pick a color",
+      ...props,
+      ref,
+      style: { ...props.style, pointerEvents: readOnly ? "none" : void 0 },
+      onClick: (0, import_utils14.handlerAll)(props.onClick, onEyeDropperClick)
+    }),
+    [disabled, onEyeDropperClick, readOnly]
+  );
+  const getPickerProps = (0, import_react5.useCallback)(
+    (props) => ({
+      ...formControlProps,
+      ...props,
+      value,
+      defaultValue: defaultColor,
+      fallbackValue,
+      onChange: onColorPickerChange,
+      onChangeStart,
+      onChangeEnd,
+      onSwatchClick: (0, import_utils14.handlerAll)(
+        onSwatchClick,
+        closeOnSelectSwatch ? onClose : void 0
+      ),
+      format: formatRef.current,
+      withPicker,
+      withChannel,
+      withResult,
+      withEyeDropper: withColorPickerEyeDropper,
+      swatchesLabel,
+      swatches,
+      swatchesColumns,
+      variant: colorPickerVariant,
+      size: colorPickerSize,
+      colorScheme: colorPickerColorScheme
+    }),
+    [
+      formControlProps,
+      value,
+      fallbackValue,
+      defaultColor,
+      onColorPickerChange,
+      onChangeStart,
+      onChangeEnd,
+      onSwatchClick,
+      onClose,
+      closeOnSelectSwatch,
+      formatRef,
+      withPicker,
+      withChannel,
+      withResult,
+      withColorPickerEyeDropper,
+      swatchesLabel,
+      swatches,
+      swatchesColumns,
+      colorPickerColorScheme,
+      colorPickerSize,
+      colorPickerVariant
+    ]
+  );
+  return {
+    value,
+    eyeDropperSupported,
+    allowInput,
+    getPopoverProps,
+    getContainerProps,
+    getFieldProps,
+    getPickerProps,
+    getEyeDropperProps
+  };
+};
+
+// src/color-input.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ColorInput = (0, import_core12.forwardRef)(
+  ({ withSwatch = true, ...props }, ref) => {
+    const [styles, mergedProps] = (0, import_core12.useMultiComponentStyle)("ColorInput", {
+      withSwatch,
+      ...props
+    });
+    let {
+      className,
+      withEyeDropper = true,
+      color,
+      h,
+      height,
+      minH,
+      minHeight,
+      containerProps,
+      inputProps,
+      swatchProps,
+      eyeDropperProps,
+      portalProps = { isDisabled: true },
+      ...computedProps
+    } = (0, import_core12.omitThemeProps)((0, import_utils15.omitObject)(mergedProps, ["withSwatch"]));
+    const {
+      allowInput,
+      getPopoverProps,
+      getContainerProps,
+      getFieldProps,
+      getPickerProps,
+      getEyeDropperProps,
+      ...rest
+    } = useColorInput(computedProps);
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    const css = {
+      w: "100%",
+      h: "fit-content",
+      color,
+      ...styles.container
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorInputProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_core12.ui.div,
+      {
+        className: (0, import_utils15.cx)("ui-color-input", className),
+        __css: css,
+        ...getContainerProps(containerProps),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_core12.ui.div,
+            {
+              className: "ui-color-input__inner",
+              __css: {
+                position: "relative",
+                cursor: !allowInput ? "pointer" : void 0,
+                ...styles.inner
+              },
+              children: [
+                withSwatch ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColorInputSwatch, { ...swatchProps }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  ColorInputField,
+                  {
+                    h,
+                    minH,
+                    ...getFieldProps(inputProps, ref)
+                  }
+                ) }),
+                withEyeDropper ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  ColorInputEyeDropper,
+                  {
+                    ...getEyeDropperProps(eyeDropperProps)
+                  }
+                ) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_popover.PopoverContent,
+            {
+              className: "ui-color-input__popover",
+              __css: { ...styles.list },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                ColorPicker,
+                {
+                  className: "ui-color-input__picker",
+                  ...getPickerProps()
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ) }) });
+  }
+);
+var ColorInputField = (0, import_core12.forwardRef)(
+  ({ className, h, minH, ...rest }, ref) => {
+    const { styles } = useColorInputContext();
+    const css = {
+      ps: "2rem",
+      pe: "2rem",
+      h,
+      minH,
+      display: "flex",
+      alignItems: "center",
+      ...styles.field
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_core12.ui.input,
+      {
+        ref,
+        className: (0, import_utils15.cx)("ui-color-input__field", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var ColorInputSwatch = (0, import_core12.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { value, styles } = useColorInputContext();
+    const css = {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      ...styles.swatch
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ColorSwatch,
+      {
+        ref,
+        className: (0, import_utils15.cx)("ui-color-input__swatch", className),
+        __css: css,
+        color: value,
+        isRounded: true,
+        ...rest
+      }
+    );
+  }
+);
+var ColorInputEyeDropper = (0, import_core12.forwardRef)(
+  ({ className, children, ...rest }, ref) => {
+    const { styles } = useColorInputContext();
+    const css = {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 1,
+      ...styles.eyeDropper
+    };
+    const validChildren = (0, import_utils15.getValidChildren)(children);
+    const cloneChildren = validChildren.map(
+      (child) => (0, import_react6.cloneElement)(child, {
+        focusable: false,
+        "aria-hidden": true,
+        style: {
+          maxWidth: "1em",
+          maxHeight: "1em",
+          color: "currentColor"
+        }
+      })
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_core12.ui.button,
+      {
+        ref,
+        className: (0, import_utils15.cx)("ui-color-input__eye-dropper", className),
+        __css: css,
+        ...rest,
+        children: (0, import_utils15.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EyeDropperIcon, { className: "ui-color-input__eye-dropper__icon" })
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlphaSlider,
+  ColorInput,
+  ColorPicker,
+  ColorSwatch,
+  HueSlider,
+  SaturationSlider
+});