@yamada-ui/color-picker 1.0.0

package/dist/use-color-picker.js

@@ -0,0 +1,472 @@
+"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/use-color-picker.ts
+var use_color_picker_exports = {};
+__export(use_color_picker_exports, {
+  ColorPickerProvider: () => ColorPickerProvider,
+  useColorPicker: () => useColorPicker,
+  useColorPickerContext: () => useColorPickerContext
+});
+module.exports = __toCommonJS(use_color_picker_exports);
+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
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPickerProvider,
+  useColorPicker,
+  useColorPickerContext
+});

package/dist/use-color-picker.mjs

@@ -0,0 +1,11 @@
+import {
+  ColorPickerProvider,
+  useColorPicker,
+  useColorPickerContext
+} from "./chunk-NR2XCTSD.mjs";
+import "./chunk-N2GG5L7Q.mjs";
+export {
+  ColorPickerProvider,
+  useColorPicker,
+  useColorPickerContext
+};

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

@@ -0,0 +1,69 @@
+import { HTMLUIProps, UIPropGetter, CSSUIProps } from '@yamada-ui/core';
+import { FormControlOptions } from '@yamada-ui/form-control';
+
+type UseColorSliderOptions = {
+    /**
+     * The base `id` to use for the slider.
+     */
+    id?: string;
+    /**
+     * The name attribute of the hidden `input` field.
+     * This is particularly useful in forms.
+     */
+    name?: string;
+    /**
+     * The value of the slider.
+     */
+    value?: number;
+    /**
+     * The initial value of the slider.
+     */
+    defaultValue?: number;
+    /**
+     * The minimum allowed value of the slider. Cannot be greater than max.
+     */
+    min: number;
+    /**
+     * The maximum allowed value of the slider. Cannot be less than min.
+     */
+    max: number;
+    /**
+     * The step in which increments or decrements have to be made.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Function called whenever the slider value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Function called when the user starts selecting a new value.
+     */
+    onChangeStart?: (value: number) => void;
+    /**
+     * Function called when the user is done selecting a new value.
+     */
+    onChangeEnd?: (value: number) => void;
+    /**
+     * If `false`, the slider handle will not capture focus when value changes.
+     *
+     * @default true
+     */
+    focusThumbOnChange?: boolean;
+    /**
+     * The CSS `background` property. Used in `background` of thumb element.
+     */
+    thumbColor?: CSSUIProps["bg"];
+};
+type UseColorSliderProps = Omit<HTMLUIProps<"div">, "defaultValue" | "onChange"> & UseColorSliderOptions & FormControlOptions;
+declare const useColorSlider: ({ focusThumbOnChange, ...props }: UseColorSliderProps) => {
+    value: number;
+    getContainerProps: UIPropGetter;
+    getTrackProps: UIPropGetter;
+    getInputProps: UIPropGetter<"input">;
+    getThumbProps: UIPropGetter;
+};
+type UseColorSliderReturn = ReturnType<typeof useColorSlider>;
+
+export { type UseColorSliderProps, type UseColorSliderReturn, useColorSlider };

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

@@ -0,0 +1,69 @@
+import { HTMLUIProps, UIPropGetter, CSSUIProps } from '@yamada-ui/core';
+import { FormControlOptions } from '@yamada-ui/form-control';
+
+type UseColorSliderOptions = {
+    /**
+     * The base `id` to use for the slider.
+     */
+    id?: string;
+    /**
+     * The name attribute of the hidden `input` field.
+     * This is particularly useful in forms.
+     */
+    name?: string;
+    /**
+     * The value of the slider.
+     */
+    value?: number;
+    /**
+     * The initial value of the slider.
+     */
+    defaultValue?: number;
+    /**
+     * The minimum allowed value of the slider. Cannot be greater than max.
+     */
+    min: number;
+    /**
+     * The maximum allowed value of the slider. Cannot be less than min.
+     */
+    max: number;
+    /**
+     * The step in which increments or decrements have to be made.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Function called whenever the slider value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Function called when the user starts selecting a new value.
+     */
+    onChangeStart?: (value: number) => void;
+    /**
+     * Function called when the user is done selecting a new value.
+     */
+    onChangeEnd?: (value: number) => void;
+    /**
+     * If `false`, the slider handle will not capture focus when value changes.
+     *
+     * @default true
+     */
+    focusThumbOnChange?: boolean;
+    /**
+     * The CSS `background` property. Used in `background` of thumb element.
+     */
+    thumbColor?: CSSUIProps["bg"];
+};
+type UseColorSliderProps = Omit<HTMLUIProps<"div">, "defaultValue" | "onChange"> & UseColorSliderOptions & FormControlOptions;
+declare const useColorSlider: ({ focusThumbOnChange, ...props }: UseColorSliderProps) => {
+    value: number;
+    getContainerProps: UIPropGetter;
+    getTrackProps: UIPropGetter;
+    getInputProps: UIPropGetter<"input">;
+    getThumbProps: UIPropGetter;
+};
+type UseColorSliderReturn = ReturnType<typeof useColorSlider>;
+
+export { type UseColorSliderProps, type UseColorSliderReturn, useColorSlider };