@yamada-ui/color-picker 1.0.0

package/dist/index.mjs

@@ -0,0 +1,36 @@
+import {
+  ColorInput
+} from "./chunk-HNVFOSAM.mjs";
+import "./chunk-KJS52X4M.mjs";
+import {
+  ColorPicker
+} from "./chunk-EMWFECJD.mjs";
+import {
+  SaturationSlider
+} from "./chunk-3KASGDAY.mjs";
+import "./chunk-MAHWFXUG.mjs";
+import "./chunk-73BVTMII.mjs";
+import "./chunk-PVWIBTBL.mjs";
+import "./chunk-3EO2XBIZ.mjs";
+import "./chunk-7QGCTVDG.mjs";
+import {
+  HueSlider
+} from "./chunk-PTTNJPGJ.mjs";
+import {
+  AlphaSlider
+} from "./chunk-U6OJ4TDG.mjs";
+import "./chunk-DTB2Z3IJ.mjs";
+import "./chunk-TFQ62YSQ.mjs";
+import {
+  ColorSwatch
+} from "./chunk-3N443XSV.mjs";
+import "./chunk-NR2XCTSD.mjs";
+import "./chunk-N2GG5L7Q.mjs";
+export {
+  AlphaSlider,
+  ColorInput,
+  ColorPicker,
+  ColorSwatch,
+  HueSlider,
+  SaturationSlider
+};

package/dist/saturation-slider.d.mts

@@ -0,0 +1,33 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, Token, HTMLUIProps } from '@yamada-ui/core';
+import { UseSaturationSliderProps } from './use-saturation-slider.mjs';
+import '@yamada-ui/form-control';
+
+type SaturationSliderOptions = {
+    /**
+     * The aspect ratio of the saturation slider.
+     *
+     * @default '16 / 9'
+     */
+    ratio?: Token<number>;
+    /**
+     * Props for saturation slider inner element.
+     */
+    innerProps?: HTMLUIProps<"div">;
+    /**
+     * Props for saturation slider input element.
+     */
+    inputProps?: HTMLUIProps<"input">;
+    /**
+     * Props for saturation slider track element.
+     */
+    trackProps?: HTMLUIProps<"div">;
+    /**
+     * Props for saturation slider thumb element.
+     */
+    thumbProps?: HTMLUIProps<"div">;
+};
+type SaturationSliderProps = ThemeProps<"SaturationSlider"> & UseSaturationSliderProps & SaturationSliderOptions;
+declare const SaturationSlider: _yamada_ui_core.Component<"input", SaturationSliderProps>;
+
+export { SaturationSlider, type SaturationSliderProps };

package/dist/saturation-slider.d.ts

@@ -0,0 +1,33 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, Token, HTMLUIProps } from '@yamada-ui/core';
+import { UseSaturationSliderProps } from './use-saturation-slider.js';
+import '@yamada-ui/form-control';
+
+type SaturationSliderOptions = {
+    /**
+     * The aspect ratio of the saturation slider.
+     *
+     * @default '16 / 9'
+     */
+    ratio?: Token<number>;
+    /**
+     * Props for saturation slider inner element.
+     */
+    innerProps?: HTMLUIProps<"div">;
+    /**
+     * Props for saturation slider input element.
+     */
+    inputProps?: HTMLUIProps<"input">;
+    /**
+     * Props for saturation slider track element.
+     */
+    trackProps?: HTMLUIProps<"div">;
+    /**
+     * Props for saturation slider thumb element.
+     */
+    thumbProps?: HTMLUIProps<"div">;
+};
+type SaturationSliderProps = ThemeProps<"SaturationSlider"> & UseSaturationSliderProps & SaturationSliderOptions;
+declare const SaturationSlider: _yamada_ui_core.Component<"input", SaturationSliderProps>;
+
+export { SaturationSlider, type SaturationSliderProps };

package/dist/saturation-slider.js

@@ -0,0 +1,414 @@
+"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/saturation-slider.tsx
+var saturation_slider_exports = {};
+__export(saturation_slider_exports, {
+  SaturationSlider: () => SaturationSlider
+});
+module.exports = __toCommonJS(saturation_slider_exports);
+var import_core = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/use-saturation-slider.ts
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = 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_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var defaultOverlays = (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 = defaultOverlays(withShadow),
+    ...rest
+  } = (0, import_form_control.useFormControlProps)(props);
+  const onChangeStart = (0, import_utils.useCallbackRef)(onChangeStartProp);
+  const onChangeEnd = (0, import_utils.useCallbackRef)(onChangeEndProp);
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp
+  });
+  const [isDragging, setDragging] = (0, import_react.useState)(false);
+  const isInteractive = !(disabled || readOnly);
+  let [h, s, v] = value;
+  s = (0, import_utils.clampNumber)(s, 0, 1);
+  v = (0, import_utils.clampNumber)(v, 0, 1);
+  const containerRef = (0, import_react.useRef)(null);
+  const trackRef = (0, import_react.useRef)(null);
+  const thumbRef = (0, import_react.useRef)(null);
+  const latestRef = (0, import_use_latest_ref.useLatestRef)({
+    value,
+    step,
+    isInteractive,
+    eventSource: null,
+    focusThumbOnChange
+  });
+  const thumbSize = (0, import_use_size.useSize)(thumbRef);
+  const overlays = (0, import_react.useMemo)(
+    () => overlaysProp.map((propsOrFunc) => (0, import_utils.runIfFunc)(propsOrFunc, [h, s, v])),
+    [overlaysProp, h, s, v]
+  );
+  const getValueFromPointer = (0, import_react.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_utils.clampNumber)((clientX - left) / width, 0, 1);
+      let v2 = (0, import_utils.clampNumber)((bottom - clientY) / height, 0, 1);
+      if (step2) {
+        s2 = parseFloat((0, import_utils.roundNumberToStep)(s2, 0, step2));
+        v2 = parseFloat((0, import_utils.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_react.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_react.useCallback)(
+    ([s2, v2]) => {
+      const { isInteractive: isInteractive2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      s2 = (0, import_utils.clampNumber)(s2, 0, 1);
+      v2 = (0, import_utils.clampNumber)(v2, 0, 1);
+      setValue(([h2]) => [h2, s2, v2]);
+    },
+    [latestRef, setValue]
+  );
+  const onKeyDown = (0, import_react.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_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_utils.useUpdateEffect)(() => {
+    const { eventSource, value: value2 } = latestRef.current;
+    if (eventSource === "keyboard")
+      onChangeEnd(value2);
+  }, [value, onChangeEnd]);
+  const getContainerProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...(0, import_utils.omitObject)(rest, ["aria-readonly"]),
+      ref: (0, import_utils.mergeRefs)(ref, containerRef),
+      tabIndex: -1
+    }),
+    [rest]
+  );
+  const getInnerProps = (0, import_react.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_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.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_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(
+        rest,
+        (0, import_form_control.getFormControlProperties)({ omit: ["aria-readonly"] })
+      ),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(ref, trackRef)
+    }),
+    [rest]
+  );
+  const getThumbProps = (0, import_react.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_utils.hsvTo)([h, s, v])(),
+        ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+        ...props2,
+        ref: (0, import_utils.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_utils.dataAttr)(isDragging && focusThumbOnChange),
+        onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown),
+        onFocus: (0, import_utils.handlerAll)(props2.onFocus, rest.onFocus),
+        onBlur: (0, import_utils.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_runtime = require("react/jsx-runtime");
+var SaturationSlider = (0, import_core.forwardRef)(
+  (props, ref) => {
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)(
+      "SaturationSlider",
+      props
+    );
+    const {
+      className,
+      ratio = 16 / 9,
+      innerProps,
+      inputProps,
+      trackProps,
+      thumbProps,
+      __css,
+      ...computedProps
+    } = (0, import_core.omitThemeProps)(mergedProps);
+    const {
+      overlays,
+      getContainerProps,
+      getInnerProps,
+      getTrackProps,
+      getInputProps,
+      getThumbProps
+    } = useSaturationSlider(computedProps);
+    const css = {
+      position: "relative",
+      _before: {
+        content: `""`,
+        display: "block",
+        h: 0,
+        pb: (0, import_utils2.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_runtime.jsx)(
+      import_core.ui.div,
+      {
+        className: (0, import_utils2.cx)("ui-saturation-slider", className),
+        __css: css,
+        ...getContainerProps(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_core.ui.div,
+          {
+            className: (0, import_utils2.cx)("ui-saturation-slider__inner", className),
+            __css: { ...styles.inner },
+            ...getInnerProps(innerProps),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ...getInputProps(inputProps, ref) }),
+              overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_core.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_runtime.jsx)(
+                import_core.ui.div,
+                {
+                  className: "ui-saturation-slider__track",
+                  __css: {
+                    position: "relative",
+                    w: "full",
+                    h: "full",
+                    ...styles.track
+                  },
+                  ...getTrackProps(trackProps),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_core.ui.div,
+                    {
+                      className: "ui-saturation-slider__thumb",
+                      __css: { ...styles.thumb },
+                      ...getThumbProps(thumbProps)
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SaturationSlider
+});

package/dist/saturation-slider.mjs

@@ -0,0 +1,7 @@
+import {
+  SaturationSlider
+} from "./chunk-3KASGDAY.mjs";
+import "./chunk-MAHWFXUG.mjs";
+export {
+  SaturationSlider
+};

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

@@ -0,0 +1,90 @@
+import * as react from 'react';
+import { HTMLUIProps, UIPropGetter, CSSUIObject, ThemeProps } from '@yamada-ui/core';
+import { PopoverProps } from '@yamada-ui/popover';
+import { ColorPickerProps } from './color-picker.mjs';
+import { UseColorPickerBaseProps } from './use-color-picker.mjs';
+import './color-picker-body.mjs';
+import './color-picker-eye-dropper.mjs';
+import '@yamada-ui/button';
+import '@yamada-ui/icon';
+import './color-picker-sliders.mjs';
+import './alpha-slider.mjs';
+import './use-color-slider.mjs';
+import '@yamada-ui/form-control';
+import './hue-slider.mjs';
+import './color-picker-swatches.mjs';
+import './color-swatch.mjs';
+import './saturation-slider.mjs';
+import './use-saturation-slider.mjs';
+import '@yamada-ui/input';
+import '@yamada-ui/utils';
+
+type ColorPickerThemeProps = ThemeProps<"ColorPicker">;
+type ColorInputContext = {
+    value: string;
+    styles: Record<string, CSSUIObject>;
+};
+declare const ColorInputProvider: react.Provider<ColorInputContext>;
+declare const useColorInputContext: () => ColorInputContext;
+type UseColorInputOptions = {
+    /**
+     * The initial value of the color picker.
+     */
+    defaultColor?: string;
+    /**
+     * If `true`, allows input.
+     *
+     * @default true
+     */
+    allowInput?: boolean;
+    /**
+     * A callback function to format the input entered.
+     */
+    formatInput?: (value: string) => string;
+    /**
+     * If `true`, display the result component.
+     *
+     * @default false
+     */
+    withResult?: boolean;
+    /**
+     * If `true` display the eye dropper component.
+     *
+     * @default false
+     */
+    withColorPickerEyeDropper?: boolean;
+    /**
+     * If `true`, the color swatch will be closed when value is selected.
+     */
+    closeOnSelectSwatch?: boolean;
+    /**
+     * Variant for the color picker component.
+     */
+    colorPickerVariant?: ColorPickerThemeProps["variant"];
+    /**
+     * Size for the color picker component.
+     */
+    colorPickerSize?: ColorPickerThemeProps["size"];
+    /**
+     * ColorScheme for the color picker component.
+     */
+    colorPickerColorScheme?: ColorPickerThemeProps["colorScheme"];
+    /**
+     * Props for color picker component.
+     */
+    colorPickerProps?: ColorPickerProps;
+};
+type UseColorInputProps = Omit<HTMLUIProps<"input">, "size" | "offset" | "value" | "defaultValue" | "onChange"> & Omit<UseColorPickerBaseProps, "id" | "name"> & Omit<PopoverProps, "initialFocusRef" | "closeOnButton" | "isOpen" | "trigger" | "autoFocus" | "restoreFocus" | "openDelay" | "closeDelay"> & Pick<ColorPickerProps, "withPicker" | "withChannel" | "swatchesLabel" | "swatches" | "swatchesColumns"> & UseColorInputOptions;
+declare const useColorInput: ({ value: valueProp, defaultValue, fallbackValue, defaultColor, onChange: onChangeProp, onChangeStart, onChangeEnd, onSwatchClick, formatInput, closeOnBlur, closeOnEsc, placement, duration, defaultIsOpen, onOpen: onOpenProp, onClose: onCloseProp, allowInput, closeOnSelectSwatch, format, swatchesLabel, swatches, swatchesColumns, withPicker, withChannel, withResult, withColorPickerEyeDropper, colorPickerVariant, colorPickerSize, colorPickerColorScheme, ...rest }: UseColorInputProps) => {
+    value: string;
+    eyeDropperSupported: boolean;
+    allowInput: boolean;
+    getPopoverProps: (props?: PopoverProps) => PopoverProps;
+    getContainerProps: UIPropGetter;
+    getFieldProps: UIPropGetter<"input">;
+    getPickerProps: (props?: ColorPickerProps) => ColorPickerProps;
+    getEyeDropperProps: UIPropGetter<"button">;
+};
+type UseColorInputReturn = ReturnType<typeof useColorInput>;
+
+export { ColorInputProvider, type UseColorInputProps, type UseColorInputReturn, useColorInput, useColorInputContext };