@yamada-ui/color-picker 1.0.0

package/dist/chunk-EMWFECJD.mjs

@@ -0,0 +1,123 @@
+import {
+  SaturationSlider
+} from "./chunk-3KASGDAY.mjs";
+import {
+  ColorPickerBody
+} from "./chunk-73BVTMII.mjs";
+import {
+  ColorPickerChannels
+} from "./chunk-PVWIBTBL.mjs";
+import {
+  ColorPickerSwatches
+} from "./chunk-TFQ62YSQ.mjs";
+import {
+  ColorPickerProvider,
+  useColorPicker
+} from "./chunk-NR2XCTSD.mjs";
+
+// src/color-picker.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPicker = forwardRef(
+  ({ size, ...props }, ref) => {
+    const [styles, mergedProps] = 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
+    } = omitThemeProps(mergedProps);
+    const {
+      getContainerProps,
+      getInputProps,
+      getSaturationSliderProps,
+      ...rest
+    } = useColorPicker(computedProps);
+    const css = {
+      display: "flex",
+      flexDirection: "column",
+      ...styles.container
+    };
+    return /* @__PURE__ */ jsx(ColorPickerProvider, { value: { styles, size, ...rest }, children: /* @__PURE__ */ jsxs(
+      ui.div,
+      {
+        ref,
+        className: cx("ui-color-picker", className),
+        __css: css,
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ jsx(ui.input, { ...getInputProps(inputProps, ref) }),
+          withPicker ? /* @__PURE__ */ jsx(
+            SaturationSlider,
+            {
+              size,
+              className: "ui-color-picker__saturation-slider",
+              __css: { ...styles.saturationSlider },
+              ...getSaturationSliderProps(
+                saturationSliderProps,
+                saturationSliderRef
+              )
+            }
+          ) : null,
+          withPicker ? /* @__PURE__ */ jsx(
+            ColorPickerBody,
+            {
+              ...{
+                withResult,
+                withEyeDropper,
+                eyeDropperRef,
+                eyeDropperProps,
+                hueSliderRef,
+                hueSliderProps,
+                alphaSliderRef,
+                alphaSliderProps
+              }
+            }
+          ) : null,
+          withPicker && withChannel ? /* @__PURE__ */ jsx(ColorPickerChannels, {}) : null,
+          /* @__PURE__ */ jsx(
+            ColorPickerSwatches,
+            {
+              ...{
+                swatchesLabel,
+                swatches,
+                swatchesColumns,
+                swatchProps,
+                ...swatchesProps
+              }
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+
+export {
+  ColorPicker
+};

package/dist/chunk-HNVFOSAM.mjs

@@ -0,0 +1,210 @@
+import {
+  ColorInputProvider,
+  useColorInput,
+  useColorInputContext
+} from "./chunk-KJS52X4M.mjs";
+import {
+  ColorPicker
+} from "./chunk-EMWFECJD.mjs";
+import {
+  EyeDropperIcon
+} from "./chunk-3EO2XBIZ.mjs";
+import {
+  ColorSwatch
+} from "./chunk-3N443XSV.mjs";
+
+// src/color-input.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { Popover, PopoverContent, PopoverTrigger } from "@yamada-ui/popover";
+import { Portal } from "@yamada-ui/portal";
+import {
+  cx,
+  getValidChildren,
+  isValidElement,
+  omitObject
+} from "@yamada-ui/utils";
+import { cloneElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorInput = forwardRef(
+  ({ withSwatch = true, ...props }, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle("ColorInput", {
+      withSwatch,
+      ...props
+    });
+    let {
+      className,
+      withEyeDropper = true,
+      color,
+      h,
+      height,
+      minH,
+      minHeight,
+      containerProps,
+      inputProps,
+      swatchProps,
+      eyeDropperProps,
+      portalProps = { isDisabled: true },
+      ...computedProps
+    } = omitThemeProps(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__ */ jsx(ColorInputProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ jsx(Popover, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs(
+      ui.div,
+      {
+        className: cx("ui-color-input", className),
+        __css: css,
+        ...getContainerProps(containerProps),
+        children: [
+          /* @__PURE__ */ jsxs(
+            ui.div,
+            {
+              className: "ui-color-input__inner",
+              __css: {
+                position: "relative",
+                cursor: !allowInput ? "pointer" : void 0,
+                ...styles.inner
+              },
+              children: [
+                withSwatch ? /* @__PURE__ */ jsx(ColorInputSwatch, { ...swatchProps }) : null,
+                /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
+                  ColorInputField,
+                  {
+                    h,
+                    minH,
+                    ...getFieldProps(inputProps, ref)
+                  }
+                ) }),
+                withEyeDropper ? /* @__PURE__ */ jsx(
+                  ColorInputEyeDropper,
+                  {
+                    ...getEyeDropperProps(eyeDropperProps)
+                  }
+                ) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              className: "ui-color-input__popover",
+              __css: { ...styles.list },
+              children: /* @__PURE__ */ jsx(
+                ColorPicker,
+                {
+                  className: "ui-color-input__picker",
+                  ...getPickerProps()
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ) }) });
+  }
+);
+var ColorInputField = 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__ */ jsx(
+      ui.input,
+      {
+        ref,
+        className: cx("ui-color-input__field", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var ColorInputSwatch = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { value, styles } = useColorInputContext();
+    const css = {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      ...styles.swatch
+    };
+    return /* @__PURE__ */ jsx(
+      ColorSwatch,
+      {
+        ref,
+        className: cx("ui-color-input__swatch", className),
+        __css: css,
+        color: value,
+        isRounded: true,
+        ...rest
+      }
+    );
+  }
+);
+var ColorInputEyeDropper = 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 = getValidChildren(children);
+    const cloneChildren = validChildren.map(
+      (child) => cloneElement(child, {
+        focusable: false,
+        "aria-hidden": true,
+        style: {
+          maxWidth: "1em",
+          maxHeight: "1em",
+          color: "currentColor"
+        }
+      })
+    );
+    return /* @__PURE__ */ jsx(
+      ui.button,
+      {
+        ref,
+        className: cx("ui-color-input__eye-dropper", className),
+        __css: css,
+        ...rest,
+        children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(EyeDropperIcon, { className: "ui-color-input__eye-dropper__icon" })
+      }
+    );
+  }
+);
+
+export {
+  ColorInput
+};

package/dist/chunk-KJS52X4M.mjs

@@ -0,0 +1,330 @@
+// src/use-color-input.ts
+import { layoutStyleProperties } from "@yamada-ui/core";
+import {
+  useFormControlProps,
+  getFormControlProperties
+} from "@yamada-ui/form-control";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import { useEyeDropper } from "@yamada-ui/use-eye-dropper";
+import { useOutsideClick } from "@yamada-ui/use-outside-click";
+import {
+  createContext,
+  dataAttr,
+  handlerAll,
+  mergeRefs,
+  pickObject,
+  splitObject,
+  omitObject,
+  getEventRelatedTarget,
+  isContains,
+  convertColor,
+  calcFormat,
+  useUpdateEffect
+} from "@yamada-ui/utils";
+import { useCallback, useRef, useState } from "react";
+var [ColorInputProvider, useColorInputContext] = 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 = useFormControlProps(rest);
+  const formControlProps = pickObject(
+    rest,
+    getFormControlProperties({ omit: ["aria-readonly"] })
+  );
+  const { disabled, readOnly } = formControlProps;
+  const computedProps = splitObject(rest, layoutStyleProperties);
+  const containerRef = useRef(null);
+  const fieldRef = useRef(null);
+  const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } = useEyeDropper();
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp
+  });
+  const formatRef = useRef(format != null ? format : calcFormat(value != null ? value : ""));
+  const isInputFocused = useRef(false);
+  const [inputValue, setInputValue] = useState(value != null ? value : "");
+  const [isOpen, setIsOpen] = useState(defaultIsOpen != null ? defaultIsOpen : false);
+  const isColorPickerFull = colorPickerSize === "full";
+  const onOpen = useCallback(() => {
+    if (disabled || readOnly)
+      return;
+    setIsOpen(true);
+    onOpenProp == null ? void 0 : onOpenProp();
+  }, [onOpenProp, disabled, readOnly]);
+  const onClose = useCallback(() => {
+    if (!isOpen)
+      return;
+    const next = 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 = useCallback(() => {
+    if (isOpen)
+      return;
+    onOpen();
+  }, [isOpen, onOpen]);
+  const onInputFocus = useCallback(() => {
+    isInputFocused.current = true;
+    if (isOpen)
+      return;
+    onOpen();
+  }, [isOpen, onOpen]);
+  const onInputBlur = useCallback(() => {
+    isInputFocused.current = false;
+  }, []);
+  const onContainerBlur = useCallback(
+    (ev) => {
+      const relatedTarget = getEventRelatedTarget(ev);
+      if (isContains(containerRef.current, relatedTarget))
+        return;
+      if (!closeOnBlur)
+        return;
+      if (isOpen)
+        onClose();
+    },
+    [closeOnBlur, isOpen, onClose]
+  );
+  const onInputKeyDown = 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 = useCallback(
+    (ev) => {
+      const value2 = ev.target.value;
+      setInputValue(formatInput(value2));
+      setValue(value2);
+    },
+    [setInputValue, formatInput, setValue]
+  );
+  const onColorPickerChange = useCallback(
+    (value2) => {
+      setValue(value2);
+      if (!isInputFocused.current)
+        setInputValue(formatInput(value2));
+    },
+    [setValue, formatInput]
+  );
+  const onEyeDropperClick = 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]
+  );
+  useOutsideClick({
+    ref: containerRef,
+    handler: onClose,
+    enabled: closeOnBlur
+  });
+  useUpdateEffect(() => {
+    if (!format)
+      return;
+    formatRef.current = format;
+    const nextValue = convertColor(value, fallbackValue)(format);
+    if (!nextValue)
+      return;
+    setInputValue(formatInput(nextValue));
+    setValue(nextValue);
+  }, [format, fallbackValue]);
+  const getPopoverProps = useCallback(
+    (props) => ({
+      matchWidth: isColorPickerFull,
+      ...rest,
+      ...props,
+      isOpen,
+      onOpen,
+      onClose,
+      placement,
+      duration,
+      trigger: "never",
+      closeOnButton: false
+    }),
+    [isColorPickerFull, duration, onClose, onOpen, placement, rest, isOpen]
+  );
+  const getContainerProps = useCallback(
+    (props = {}, ref = null) => ({
+      ref: mergeRefs(containerRef, ref),
+      ...computedProps[0],
+      ...props,
+      ...formControlProps,
+      onClick: handlerAll(props.onClick, rest.onClick, onContainerClick),
+      onBlur: handlerAll(props.onBlur, rest.onBlur, onContainerBlur)
+    }),
+    [computedProps, formControlProps, onContainerBlur, onContainerClick, rest]
+  );
+  const getFieldProps = useCallback(
+    (props = {}, ref = null) => ({
+      ref: mergeRefs(fieldRef, ref),
+      tabIndex: !allowInput ? -1 : 0,
+      ...omitObject(computedProps[1], ["aria-readonly"]),
+      ...props,
+      style: {
+        ...props.style,
+        ...!allowInput ? { pointerEvents: "none" } : {}
+      },
+      value: inputValue,
+      "data-active": dataAttr(isOpen),
+      "aria-expanded": dataAttr(isOpen),
+      onFocus: handlerAll(props.onFocus, rest.onFocus, onInputFocus),
+      onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onInputKeyDown),
+      onChange: handlerAll(props.onChange, onInputChange),
+      onBlur: handlerAll(props.onFocus, onInputBlur)
+    }),
+    [
+      allowInput,
+      computedProps,
+      inputValue,
+      isOpen,
+      rest,
+      onInputFocus,
+      onInputKeyDown,
+      onInputChange,
+      onInputBlur
+    ]
+  );
+  const getEyeDropperProps = useCallback(
+    (props = {}, ref = null) => ({
+      disabled,
+      "aria-label": "Pick a color",
+      ...props,
+      ref,
+      style: { ...props.style, pointerEvents: readOnly ? "none" : void 0 },
+      onClick: handlerAll(props.onClick, onEyeDropperClick)
+    }),
+    [disabled, onEyeDropperClick, readOnly]
+  );
+  const getPickerProps = useCallback(
+    (props) => ({
+      ...formControlProps,
+      ...props,
+      value,
+      defaultValue: defaultColor,
+      fallbackValue,
+      onChange: onColorPickerChange,
+      onChangeStart,
+      onChangeEnd,
+      onSwatchClick: 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
+  };
+};
+
+export {
+  ColorInputProvider,
+  useColorInputContext,
+  useColorInput
+};