@yamada-ui/color-picker 1.0.0

package/dist/chunk-3KASGDAY.mjs

@@ -0,0 +1,122 @@
+import {
+  useSaturationSlider
+} from "./chunk-MAHWFXUG.mjs";
+
+// src/saturation-slider.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { cx, replaceObject } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SaturationSlider = forwardRef(
+  (props, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle(
+      "SaturationSlider",
+      props
+    );
+    const {
+      className,
+      ratio = 16 / 9,
+      innerProps,
+      inputProps,
+      trackProps,
+      thumbProps,
+      __css,
+      ...computedProps
+    } = omitThemeProps(mergedProps);
+    const {
+      overlays,
+      getContainerProps,
+      getInnerProps,
+      getTrackProps,
+      getInputProps,
+      getThumbProps
+    } = useSaturationSlider(computedProps);
+    const css = {
+      position: "relative",
+      _before: {
+        content: `""`,
+        display: "block",
+        h: 0,
+        pb: 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__ */ jsx(
+      ui.div,
+      {
+        className: cx("ui-saturation-slider", className),
+        __css: css,
+        ...getContainerProps(),
+        children: /* @__PURE__ */ jsxs(
+          ui.div,
+          {
+            className: cx("ui-saturation-slider__inner", className),
+            __css: { ...styles.inner },
+            ...getInnerProps(innerProps),
+            children: [
+              /* @__PURE__ */ jsx(ui.input, { ...getInputProps(inputProps, ref) }),
+              overlays.map((props2, index) => /* @__PURE__ */ jsx(
+                ui.div,
+                {
+                  className: "ui-saturation-slider__overlay",
+                  __css: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    ...styles.overlay
+                  },
+                  ...props2
+                },
+                index
+              )),
+              /* @__PURE__ */ jsx(
+                ui.div,
+                {
+                  className: "ui-saturation-slider__track",
+                  __css: {
+                    position: "relative",
+                    w: "full",
+                    h: "full",
+                    ...styles.track
+                  },
+                  ...getTrackProps(trackProps),
+                  children: /* @__PURE__ */ jsx(
+                    ui.div,
+                    {
+                      className: "ui-saturation-slider__thumb",
+                      __css: { ...styles.thumb },
+                      ...getThumbProps(thumbProps)
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  SaturationSlider
+};

package/dist/chunk-3N443XSV.mjs

@@ -0,0 +1,105 @@
+// src/color-swatch.tsx
+import {
+  ui,
+  forwardRef,
+  omitThemeProps,
+  useMultiComponentStyle
+} from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { jsx } from "react/jsx-runtime";
+var defaultOverlays = (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 = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("ColorSwatch", props);
+  const {
+    className,
+    color = "#ffffff00",
+    withShadow = true,
+    overlays = defaultOverlays(color, withShadow),
+    isRounded,
+    __css,
+    ...rest
+  } = 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__ */ jsx(
+    ui.div,
+    {
+      ref,
+      className: cx("ui-color-swatch", className),
+      ...isRounded ? { rounded: "full" } : {},
+      __css: css,
+      ...rest,
+      children: /* @__PURE__ */ jsx(ui.div, { ...isRounded ? { rounded: "full" } : {}, children: overlays.map((props2, index) => /* @__PURE__ */ jsx(
+        ui.div,
+        {
+          __css: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ...styles.overlay
+          },
+          ...isRounded ? { rounded: "full" } : {},
+          ...props2
+        },
+        index
+      )) })
+    }
+  );
+});
+
+export {
+  ColorSwatch
+};

package/dist/chunk-73BVTMII.mjs

@@ -0,0 +1,73 @@
+import {
+  ColorPickerEyeDropper
+} from "./chunk-3EO2XBIZ.mjs";
+import {
+  ColorPickerSliders
+} from "./chunk-7QGCTVDG.mjs";
+import {
+  ColorSwatch
+} from "./chunk-3N443XSV.mjs";
+import {
+  useColorPickerContext
+} from "./chunk-NR2XCTSD.mjs";
+
+// src/color-picker-body.tsx
+import { forwardRef, ui } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPickerBody = forwardRef(
+  ({
+    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__ */ jsxs(
+      ui.div,
+      {
+        ref,
+        className: cx("ui-color-picker__body", className),
+        __css: css,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ColorPickerSliders,
+            {
+              ...{
+                hueSliderRef,
+                hueSliderProps,
+                alphaSliderRef,
+                alphaSliderProps
+              }
+            }
+          ),
+          withEyeDropper && eyeDropperSupported ? /* @__PURE__ */ jsx(ColorPickerEyeDropper, { ref: eyeDropperRef, ...eyeDropperProps }) : null,
+          withResult ? /* @__PURE__ */ jsx(
+            ColorSwatch,
+            {
+              className: "ui-color-picker__result",
+              color: value,
+              __css: { ...styles.result }
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ColorPickerBody
+};

package/dist/chunk-7QGCTVDG.mjs

@@ -0,0 +1,66 @@
+import {
+  HueSlider
+} from "./chunk-PTTNJPGJ.mjs";
+import {
+  AlphaSlider
+} from "./chunk-U6OJ4TDG.mjs";
+import {
+  useColorPickerContext
+} from "./chunk-NR2XCTSD.mjs";
+
+// src/color-picker-sliders.tsx
+import { forwardRef, ui } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPickerSliders = forwardRef(
+  ({
+    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__ */ jsxs(
+      ui.div,
+      {
+        ref,
+        className: cx("ui-color-picker__sliders", className),
+        __css: css,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            HueSlider,
+            {
+              size,
+              className: "ui-color-picker__hue-slider",
+              __css: { ...styles.hueSlider },
+              ...getHueSliderProps(hueSliderProps, hueSliderRef)
+            }
+          ),
+          withAlpha ? /* @__PURE__ */ jsx(
+            AlphaSlider,
+            {
+              size,
+              className: "ui-color-picker__alpha-slider",
+              __css: { ...styles.alphaSlider },
+              ...getAlphaSliderProps(alphaSliderProps, alphaSliderRef)
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ColorPickerSliders
+};

package/dist/chunk-DTB2Z3IJ.mjs

@@ -0,0 +1,278 @@
+import {
+  pickObject
+} from "./chunk-N2GG5L7Q.mjs";
+
+// src/use-color-slider.ts
+import {
+  useFormControlProps,
+  formControlProperties,
+  getFormControlProperties
+} from "@yamada-ui/form-control";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import { useLatestRef } from "@yamada-ui/use-latest-ref";
+import { usePanEvent } from "@yamada-ui/use-pan-event";
+import { useSize } from "@yamada-ui/use-size";
+import {
+  omitObject,
+  dataAttr,
+  handlerAll,
+  mergeRefs,
+  valueToPercent,
+  clampNumber,
+  useCallbackRef,
+  roundNumberToStep,
+  useUpdateEffect,
+  percentToValue
+} from "@yamada-ui/utils";
+import { useCallback, useRef, useState } from "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
+  } = useFormControlProps(props);
+  const onChangeStart = useCallbackRef(onChangeStartProp);
+  const onChangeEnd = useCallbackRef(onChangeEndProp);
+  const [computedValue, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue != null ? defaultValue : min + (max - min) / 2,
+    onChange: onChangeProp
+  });
+  const value = clampNumber(computedValue, min, max);
+  const thumbPercent = valueToPercent(value, min, max);
+  const [isDragging, setDragging] = useState(false);
+  const isInteractive = !(disabled || readOnly);
+  const oneStep = step || (max - min) / 100;
+  const tenStep = (max - min) / 10;
+  const containerRef = useRef(null);
+  const trackRef = useRef(null);
+  const thumbRef = useRef(null);
+  const latestRef = useLatestRef({
+    value,
+    min,
+    max,
+    step,
+    isInteractive,
+    eventSource: null,
+    focusThumbOnChange
+  });
+  const thumbSize = useSize(thumbRef);
+  const getValueFromPointer = 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 = percentToValue(percent, min2, max2);
+      if (step2)
+        nextValue = parseFloat(roundNumberToStep(nextValue, min2, step2));
+      nextValue = 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 = useCallback(() => {
+    const { focusThumbOnChange: focusThumbOnChange2 } = latestRef.current;
+    if (focusThumbOnChange2)
+      setTimeout(() => {
+        var _a;
+        return (_a = thumbRef.current) == null ? void 0 : _a.focus();
+      });
+  }, [latestRef]);
+  const constrain = useCallback(
+    (value2) => {
+      const { isInteractive: isInteractive2, min: min2, max: max2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      value2 = parseFloat(roundNumberToStep(value2, min2, oneStep));
+      value2 = clampNumber(value2, min2, max2);
+      setValue(value2);
+    },
+    [setValue, latestRef, oneStep]
+  );
+  const stepUp = useCallback(
+    (step2 = oneStep) => constrain(value + step2),
+    [constrain, value, oneStep]
+  );
+  const stepDown = useCallback(
+    (step2 = oneStep) => constrain(value - step2),
+    [constrain, value, oneStep]
+  );
+  const onKeyDown = 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]
+  );
+  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);
+    }
+  });
+  useUpdateEffect(() => {
+    const { eventSource, value: value2 } = latestRef.current;
+    if (eventSource === "keyboard")
+      onChangeEnd(value2);
+  }, [value, onChangeEnd]);
+  const getContainerProps = useCallback(
+    (props2 = {}, ref = null) => {
+      const { width: w } = thumbSize != null ? thumbSize : { width: 0 };
+      const style = {
+        ...props2.style,
+        ...rest.style,
+        paddingInline: `${w / 2}px`
+      };
+      return {
+        ...props2,
+        ...omitObject(rest, ["aria-readonly"]),
+        ref: mergeRefs(ref, containerRef),
+        tabIndex: -1,
+        style
+      };
+    },
+    [rest, thumbSize]
+  );
+  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 getTrackProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(
+        rest,
+        getFormControlProperties({ omit: ["aria-readonly"] })
+      ),
+      ...props2,
+      ref: mergeRefs(ref, trackRef)
+    }),
+    [rest]
+  );
+  const getThumbProps = 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, formControlProperties),
+        ...props2,
+        ref: mergeRefs(ref, thumbRef),
+        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        role: "slider",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "data-active": dataAttr(isDragging && focusThumbOnChange),
+        onKeyDown: handlerAll(props2.onKeyDown, onKeyDown),
+        onFocus: handlerAll(props2.onFocus, rest.onFocus),
+        onBlur: handlerAll(props2.onBlur, rest.onBlur),
+        style
+      };
+    },
+    [
+      thumbColor,
+      focusThumbOnChange,
+      isDragging,
+      isInteractive,
+      min,
+      max,
+      onKeyDown,
+      rest,
+      thumbPercent,
+      thumbSize,
+      value
+    ]
+  );
+  return {
+    value,
+    getContainerProps,
+    getTrackProps,
+    getInputProps,
+    getThumbProps
+  };
+};
+
+export {
+  useColorSlider
+};