@yamada-ui/color-picker 1.0.0

package/dist/chunk-NR2XCTSD.mjs

@@ -0,0 +1,430 @@
+import {
+  pickObject
+} from "./chunk-N2GG5L7Q.mjs";
+
+// src/use-color-picker.ts
+import {
+  useFormControlProps,
+  formControlProperties
+} from "@yamada-ui/form-control";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import { useEyeDropper } from "@yamada-ui/use-eye-dropper";
+import {
+  calcFormat,
+  convertColor,
+  createContext,
+  handlerAll,
+  hsvTo,
+  isString,
+  parseToHsv,
+  useCallbackRef,
+  useUpdateEffect,
+  omitObject,
+  parseToRgba,
+  parseToHsla,
+  rgbaTo,
+  hslaTo
+} from "@yamada-ui/utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+var convertHsla = (value, fallback) => {
+  var _a;
+  let [h, s, l, a] = (_a = 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 = 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] = 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 useColorPicker = ({
+  isInvalid,
+  ...props
+}) => {
+  var _a;
+  let {
+    id,
+    name,
+    value: valueProp,
+    defaultValue,
+    fallbackValue,
+    onChange: onChangeProp,
+    onChangeStart: onChangeStartProp,
+    onChangeEnd: onChangeEndProp,
+    format,
+    required,
+    disabled,
+    readOnly,
+    onSwatchClick,
+    ...rest
+  } = useFormControlProps({ isInvalid, ...props });
+  const onChangeStartRef = useCallbackRef(onChangeStartProp);
+  const onChangeEndRef = useCallbackRef(onChangeEndProp);
+  const { supported: eyeDropperSupported, onOpen } = useEyeDropper();
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: (_a = defaultValue != null ? defaultValue : fallbackValue) != null ? _a : "#ffffffff",
+    onChange: onChangeProp
+  });
+  const timeoutId = useRef(void 0);
+  const formatRef = useRef(format != null ? format : calcFormat(value));
+  const isDraggingRef = useRef(false);
+  const [parsedValue, setParsedValue] = useState(
+    convertHsva(value, fallbackValue)
+  );
+  const { h, s, v, a } = parsedValue;
+  const withAlpha = formatRef.current.endsWith("a");
+  const isInteractive = !(disabled || readOnly);
+  const channels = 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 = useCallback(
+    (value2) => {
+      if (isString(value2)) {
+        setParsedValue(convertHsva(value2, fallbackValue));
+      } else {
+        setParsedValue((prev) => ({ ...prev, ...value2 }));
+      }
+    },
+    [fallbackValue]
+  );
+  const onChangeStart = useCallback(
+    (value2) => {
+      window.clearTimeout(timeoutId.current);
+      isDraggingRef.current = true;
+      const { h: h2, s: s2, v: v2, a: a2 } = { ...parsedValue, ...value2 };
+      const nextValue = hsvTo([h2, s2, v2, a2], fallbackValue)(formatRef.current);
+      if (nextValue)
+        onChangeStartRef(nextValue);
+    },
+    [formatRef, onChangeStartRef, fallbackValue, parsedValue]
+  );
+  const onChangeEnd = useCallback(
+    (value2) => {
+      window.clearTimeout(timeoutId.current);
+      timeoutId.current = window.setTimeout(() => {
+        isDraggingRef.current = false;
+      }, 200);
+      let nextValue;
+      if (isString(value2)) {
+        nextValue = convertColor(value2, fallbackValue)(formatRef.current);
+      } else {
+        const { h: h2, s: s2, v: v2, a: a2 } = { ...parsedValue, ...value2 };
+        nextValue = hsvTo([h2, s2, v2, a2], fallbackValue)(formatRef.current);
+      }
+      if (nextValue)
+        onChangeEndRef(nextValue);
+    },
+    [formatRef, onChangeEndRef, fallbackValue, parsedValue]
+  );
+  const onChannelChange = 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 = hslaTo([h2, s2, l, a2], fallbackValue)(formatRef.current);
+      } else {
+        const { r, g, b, a: a2 } = Object.assign(
+          convertRgba(value, fallbackValue),
+          { [space]: n }
+        );
+        nextValue = rgbaTo([r, g, b, a2], fallbackValue)(formatRef.current);
+      }
+      if (!nextValue)
+        return;
+      onChange(nextValue);
+      onChangeEnd(nextValue);
+    },
+    [value, onChange, onChangeEnd, formatRef, fallbackValue]
+  );
+  const onEyeDropperClick = useCallback(async () => {
+    var _a2;
+    try {
+      const { sRGBHex } = (_a2 = await onOpen()) != null ? _a2 : {};
+      if (!sRGBHex)
+        return;
+      onChange(sRGBHex);
+      onChangeEnd(sRGBHex);
+    } catch {
+    }
+  }, [onOpen, onChange, onChangeEnd]);
+  useUpdateEffect(() => {
+    const value2 = hsvTo([h, s, v, a], fallbackValue)(formatRef.current);
+    if (value2)
+      setValue(value2);
+  }, [h, s, v, a, fallbackValue]);
+  useUpdateEffect(() => {
+    if (isDraggingRef.current)
+      return;
+    if (valueProp)
+      setParsedValue(convertHsva(valueProp, fallbackValue));
+  }, [valueProp]);
+  useUpdateEffect(() => {
+    if (!format)
+      return;
+    formatRef.current = format;
+    const nextValue = convertColor(value, fallbackValue)(format);
+    if (nextValue)
+      setValue(nextValue);
+  }, [format, fallbackValue]);
+  const getContainerProps = (props2 = {}, ref = null) => ({
+    ...props2,
+    ref,
+    ...omitObject(rest, ["aria-readonly"])
+  });
+  const getInputProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      id,
+      ref,
+      type: "hidden",
+      name,
+      value,
+      required,
+      disabled,
+      readOnly
+    }),
+    [disabled, id, name, readOnly, required, rest, value]
+  );
+  const getSaturationSliderProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      ...props2,
+      ref,
+      value: [h, s, v],
+      onChange: handlerAll(props2.onChange, ([, s2, v2]) => onChange({ s: s2, v: v2 })),
+      onChangeStart: handlerAll(
+        props2.onChangeStart,
+        ([, s2, v2]) => onChangeStart({ s: s2, v: v2 })
+      ),
+      onChangeEnd: handlerAll(
+        props2.onChangeEnd,
+        ([, s2, v2]) => onChangeEnd({ s: s2, v: v2 })
+      )
+    }),
+    [
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      h,
+      s,
+      v,
+      onChange,
+      onChangeStart,
+      onChangeEnd
+    ]
+  );
+  const getHueSliderProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      ...props2,
+      ref,
+      value: h,
+      onChange: handlerAll(props2.onChange, (h2) => onChange({ h: h2 })),
+      onChangeStart: handlerAll(
+        props2.onChangeStart,
+        (h2) => onChangeStart({ h: h2 })
+      ),
+      onChangeEnd: handlerAll(props2.onChangeEnd, (h2) => onChangeEnd({ h: h2 }))
+    }),
+    [
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      h,
+      onChange,
+      onChangeStart,
+      onChangeEnd
+    ]
+  );
+  const getAlphaSliderProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      ...props2,
+      ref,
+      value: a,
+      color: hsvTo([h, s, v, a], fallbackValue)(formatRef.current),
+      onChange: handlerAll(props2.onChange, (a2) => onChange({ a: a2 })),
+      onChangeStart: handlerAll(
+        props2.onChangeStart,
+        (a2) => onChangeStart({ a: a2 })
+      ),
+      onChangeEnd: handlerAll(props2.onChangeEnd, (a2) => onChangeEnd({ a: a2 }))
+    }),
+    [
+      fallbackValue,
+      required,
+      disabled,
+      readOnly,
+      isInvalid,
+      formatRef,
+      h,
+      s,
+      v,
+      a,
+      onChange,
+      onChangeStart,
+      onChangeEnd
+    ]
+  );
+  const getChannelProps = useCallback(
+    ({ space, ...props2 }, ref = null) => {
+      return {
+        required,
+        disabled,
+        readOnly,
+        isInvalid,
+        ...props2,
+        ref,
+        type: "number",
+        step: 1,
+        onChange: handlerAll(
+          props2.onChange,
+          (ev) => onChannelChange(ev, space)
+        )
+      };
+    },
+    [required, disabled, readOnly, isInvalid, onChannelChange]
+  );
+  const getEyeDropperProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      disabled,
+      "aria-label": "Pick a color",
+      ...props2,
+      ref,
+      onClick: handlerAll(props2.onClick, onEyeDropperClick)
+    }),
+    [disabled, onEyeDropperClick]
+  );
+  const getSwatchProps = useCallback(
+    ({ color, ...props2 } = {}, ref = null) => ({
+      "aria-label": `select ${color} as the color`,
+      disabled,
+      readOnly,
+      ...props2,
+      ref,
+      color,
+      onClick: 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
+  };
+};
+
+export {
+  ColorPickerProvider,
+  useColorPickerContext,
+  useColorPicker
+};

package/dist/chunk-PTTNJPGJ.mjs

@@ -0,0 +1,98 @@
+import {
+  useColorSlider
+} from "./chunk-DTB2Z3IJ.mjs";
+
+// src/hue-slider.tsx
+import {
+  ui,
+  forwardRef,
+  omitThemeProps,
+  useMultiComponentStyle
+} from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultOverlays = (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 = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("HueSlider", props);
+  const {
+    className,
+    inputProps,
+    trackProps,
+    thumbProps,
+    min = 0,
+    max = 360,
+    withShadow = true,
+    overlays = defaultOverlays(min, max, withShadow),
+    __css,
+    ...computedProps
+  } = omitThemeProps(mergedProps);
+  const { getContainerProps, getTrackProps, getInputProps, getThumbProps } = useColorSlider({ min, max, step: 1, ...computedProps });
+  const css = {
+    position: "relative",
+    ...styles.container,
+    ...__css
+  };
+  return /* @__PURE__ */ jsxs(
+    ui.div,
+    {
+      className: cx("ui-hue-slider", className),
+      __css: css,
+      ...getContainerProps(),
+      children: [
+        /* @__PURE__ */ jsx(ui.input, { ...getInputProps(inputProps, ref) }),
+        overlays.map((props2, index) => /* @__PURE__ */ jsx(
+          ui.div,
+          {
+            className: "ui-hue-slider__overlay",
+            __css: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              ...styles.overlay
+            },
+            ...props2
+          },
+          index
+        )),
+        /* @__PURE__ */ jsx(
+          ui.div,
+          {
+            className: "ui-hue-slider__track",
+            __css: { position: "relative", w: "full", h: "full", ...styles.track },
+            ...getTrackProps(trackProps),
+            children: /* @__PURE__ */ jsx(
+              ui.div,
+              {
+                className: "ui-hue-slider__thumb",
+                __css: { ...styles.thumb },
+                ...getThumbProps(thumbProps)
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  HueSlider
+};

package/dist/chunk-PVWIBTBL.mjs

@@ -0,0 +1,67 @@
+import {
+  useColorPickerContext
+} from "./chunk-NR2XCTSD.mjs";
+
+// src/color-picker-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 ColorPickerChannels = 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__ */ jsx(
+      ui.div,
+      {
+        ref,
+        className: cx("ui-color-picker__channels", className),
+        __css: css,
+        ...rest,
+        children: channels.map(({ label, space, value, min, max }) => /* @__PURE__ */ jsx(
+          ColorPickerChannel,
+          {
+            channelLabel: label,
+            ...getChannelProps({ ...channelProps, space, value, min, max })
+          },
+          label
+        ))
+      }
+    );
+  }
+);
+var ColorPickerChannel = forwardRef(
+  ({ className, channelLabel, ...rest }, ref) => {
+    const id = useId();
+    let { size, disabled, readOnly, styles } = useColorPickerContext();
+    if (size === "full")
+      size = "lg";
+    const css = { ...styles.channel };
+    return /* @__PURE__ */ jsxs(ui.div, { className: cx("ui-color-picker__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 {
+  ColorPickerChannels,
+  ColorPickerChannel
+};

package/dist/chunk-TFQ62YSQ.mjs

@@ -0,0 +1,68 @@
+import {
+  ColorSwatch
+} from "./chunk-3N443XSV.mjs";
+import {
+  useColorPickerContext
+} from "./chunk-NR2XCTSD.mjs";
+
+// src/color-picker-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(
+  ({
+    className,
+    swatchesLabel,
+    swatches,
+    swatchesContainerProps,
+    swatchProps,
+    swatchesColumns,
+    ...rest
+  }, ref) => {
+    const { getSwatchProps, readOnly, styles } = useColorPickerContext();
+    const css = {
+      display: "grid",
+      gridTemplateColumns: replaceObject(
+        swatchesColumns,
+        (value) => value != null ? `repeat(${value}, minmax(0, 1fr))` : void 0
+      ),
+      ...styles.swatches
+    };
+    return (swatches == null ? void 0 : swatches.length) ? /* @__PURE__ */ jsxs(ui.div, { ...swatchesContainerProps, children: [
+      swatchesLabel ? /* @__PURE__ */ jsx(
+        ui.p,
+        {
+          className: "ui-color-picker__swatches__label",
+          __css: { ...styles.swatchesLabel },
+          children: swatchesLabel
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        ui.div,
+        {
+          ref,
+          className: cx("ui-color-picker__swatches", className),
+          __css: css,
+          ...rest,
+          children: swatches.map((color) => /* @__PURE__ */ jsx(
+            ColorSwatch,
+            {
+              as: "button",
+              __css: {
+                boxSize: "full",
+                pointerEvents: readOnly ? "none" : void 0,
+                ...styles.swatch
+              },
+              ...getSwatchProps({ color, ...swatchProps })
+            },
+            color
+          ))
+        }
+      )
+    ] }) : null;
+  }
+);
+
+export {
+  ColorPickerSwatches
+};