@yamada-ui/color-picker 2.0.0-next-20240614140233 → 2.0.0-next-20240615233332

package/dist/index.mjs

@@ -1,31 +1,31 @@
 "use client"
 import {
   ColorPicker
-} from "./chunk-OTNMOPLH.mjs";
-import "./chunk-SBN7FEOE.mjs";
+} from "./chunk-27BXTC5D.mjs";
+import "./chunk-PVPQQB6L.mjs";
 import {
   ColorSelector
-} from "./chunk-HEBLEXJG.mjs";
+} from "./chunk-MPWT2DSW.mjs";
 import {
   SaturationSlider
-} from "./chunk-X7R6FWCD.mjs";
-import "./chunk-KKQ3MOXJ.mjs";
-import "./chunk-YE3Z2X2L.mjs";
-import "./chunk-UBSVLXYF.mjs";
-import "./chunk-6CYIIW6Z.mjs";
-import "./chunk-NJEVZQVF.mjs";
+} from "./chunk-PCXNTEF4.mjs";
+import "./chunk-KKUDFHCJ.mjs";
+import "./chunk-RWVTJOMP.mjs";
+import "./chunk-ABDJB4WV.mjs";
+import "./chunk-MXH5UN5E.mjs";
+import "./chunk-YPW3ZJM7.mjs";
 import {
   HueSlider
-} from "./chunk-DDHDVGOQ.mjs";
+} from "./chunk-7L64OYDQ.mjs";
 import {
   AlphaSlider
-} from "./chunk-LHNR2F5V.mjs";
-import "./chunk-R4DLOKLT.mjs";
-import "./chunk-C7IY5KVP.mjs";
+} from "./chunk-ZHZRZ3XZ.mjs";
+import "./chunk-WRHKYN3W.mjs";
+import "./chunk-2K4SHOHA.mjs";
 import {
   ColorSwatch
 } from "./chunk-WHGFYZII.mjs";
-import "./chunk-5QT7SRA4.mjs";
+import "./chunk-UZQ2UORY.mjs";
 export {
   AlphaSlider,
   ColorPicker,

package/dist/saturation-slider.js

@@ -55,8 +55,7 @@ var useSaturationSlider = ({
   focusThumbOnChange = true,
   ...props
 }) => {
-  if (!focusThumbOnChange)
-    props.isReadOnly = true;
+  if (!focusThumbOnChange) props.isReadOnly = true;
   let {
     id,
     name,
@@ -104,8 +103,7 @@ var useSaturationSlider = ({
   const getValueFromPointer = (0, import_react.useCallback)(
     (ev) => {
       var _a, _b;
-      if (!trackRef.current)
-        return [];
+      if (!trackRef.current) return [];
       const { step: step2 } = latestRef.current;
       latestRef.current.eventSource = "pointer";
       const { bottom, left, height, width } = trackRef.current.getBoundingClientRect();
@@ -123,25 +121,21 @@ var useSaturationSlider = ({
   const setValueFromPointer = (ev) => {
     const { value: value2 } = latestRef.current;
     const [nextS, nextV] = getValueFromPointer(ev);
-    if (nextS == null || nextV == null)
-      return;
+    if (nextS == null || nextV == null) return;
     const [, s2, v2] = value2;
-    if (nextS !== s2 || nextV !== v2)
-      setValue(([h2]) => [h2, nextS, nextV]);
+    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();
-      });
+    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;
+      if (!isInteractive2) return;
       s2 = (0, import_utils.clampNumber)(s2, 0, 1);
       v2 = (0, import_utils.clampNumber)(v2, 0, 1);
       setValue(([h2]) => [h2, s2, v2]);
@@ -157,8 +151,7 @@ var useSaturationSlider = ({
         ArrowDown: () => constrain([s, v - step])
       };
       const action = actions[ev.key];
-      if (!action)
-        return;
+      if (!action) return;
       ev.preventDefault();
       ev.stopPropagation();
       action(ev);
@@ -169,8 +162,7 @@ var useSaturationSlider = ({
   (0, import_use_pan_event.usePanEvent)(containerRef, {
     onSessionStart: (ev) => {
       const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setDragging(true);
       focusThumb();
       setValueFromPointer(ev);
@@ -178,22 +170,19 @@ var useSaturationSlider = ({
     },
     onSessionEnd: () => {
       const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setDragging(false);
       onChangeEnd(value2);
     },
     onMove: (ev) => {
       const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setValueFromPointer(ev);
     }
   });
   (0, import_utils.useUpdateEffect)(() => {
     const { eventSource, value: value2 } = latestRef.current;
-    if (eventSource === "keyboard")
-      onChangeEnd(value2);
+    if (eventSource === "keyboard") onChangeEnd(value2);
   }, [value, onChangeEnd]);
   const getContainerProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({

package/dist/saturation-slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/saturation-slider.tsx","../src/use-saturation-slider.ts"],"sourcesContent":["import {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport { cx, replaceObject } from \"@yamada-ui/utils\"\nimport type { UseSaturationSliderProps } from \"./use-saturation-slider\"\nimport { useSaturationSlider } from \"./use-saturation-slider\"\n\ntype SaturationSliderOptions = {\n  /**\n   * The aspect ratio of the saturation slider.\n   *\n   * @default '16 / 9'\n   */\n  ratio?: Token<number>\n  /**\n   * Props for saturation slider inner element.\n   */\n  innerProps?: HTMLUIProps<\"div\">\n  /**\n   * Props for saturation slider input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for saturation slider track element.\n   */\n  trackProps?: HTMLUIProps<\"div\">\n  /**\n   * Props for saturation slider thumb element.\n   */\n  thumbProps?: HTMLUIProps<\"div\">\n}\n\n/**\n * `SaturationSlider` is a component used to allow the user to select a color saturation.\n *\n * @see Docs https://yamada-ui.com/components/forms/saturation-slider\n */\nexport type SaturationSliderProps = ThemeProps<\"SaturationSlider\"> &\n  UseSaturationSliderProps &\n  SaturationSliderOptions\n\nexport const SaturationSlider = forwardRef<SaturationSliderProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\n      \"SaturationSlider\",\n      props,\n    )\n    const {\n      className,\n      ratio = 16 / 9,\n      innerProps,\n      inputProps,\n      trackProps,\n      thumbProps,\n      __css,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n    const {\n      overlays,\n      getContainerProps,\n      getInnerProps,\n      getTrackProps,\n      getInputProps,\n      getThumbProps,\n    } = useSaturationSlider(computedProps)\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      _before: {\n        content: `\"\"`,\n        display: \"block\",\n        h: 0,\n        pb: replaceObject(ratio, (r) => `${(1 / r) * 100}%`),\n      },\n      \"& > *\": {\n        position: \"absolute\",\n        top: \"0\",\n        right: \"0\",\n        bottom: \"0\",\n        left: \"0\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        w: \"100%\",\n        h: \"100%\",\n      },\n      ...styles.container,\n      ...__css,\n    }\n\n    return (\n      <ui.div\n        className={cx(\"ui-saturation-slider\", className)}\n        __css={css}\n        {...getContainerProps()}\n      >\n        <ui.div\n          className={cx(\"ui-saturation-slider__inner\", className)}\n          __css={{ ...styles.inner }}\n          {...getInnerProps(innerProps)}\n        >\n          <ui.input {...getInputProps(inputProps, ref)} />\n\n          {overlays.map((props, index) => (\n            <ui.div\n              key={index}\n              className=\"ui-saturation-slider__overlay\"\n              __css={{\n                ...styles.overlay,\n              }}\n              {...props}\n            />\n          ))}\n\n          <ui.div\n            className=\"ui-saturation-slider__track\"\n            __css={{\n              ...styles.track,\n            }}\n            {...getTrackProps(trackProps)}\n          >\n            <ui.div\n              className=\"ui-saturation-slider__thumb\"\n              __css={{ ...styles.thumb }}\n              {...getThumbProps(thumbProps)}\n            />\n          </ui.div>\n        </ui.div>\n      </ui.div>\n    )\n  },\n)\n","import type { CSSUIProps, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport {\n  useFormControlProps,\n  type FormControlOptions,\n  formControlProperties,\n  getFormControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useLatestRef } from \"@yamada-ui/use-latest-ref\"\nimport { usePanEvent } from \"@yamada-ui/use-pan-event\"\nimport { useSize } from \"@yamada-ui/use-size\"\nimport {\n  omitObject,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  runIfFunc,\n  clampNumber,\n  hsvTo,\n  roundNumberToStep,\n  pickObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { useCallback, useMemo, useRef, useState } from \"react\"\n\nexport type Hsv = [number, number, number]\ntype Overlay = HTMLUIProps<\"div\"> | ((value: Hsv) => HTMLUIProps<\"div\">)\n\nconst defaultOverlays = (withShadow: boolean): Overlay[] => {\n  let overlays: Overlay[] = [\n    ([h]) => ({\n      bg: `hsl(${h}, 100%, 50%)`,\n      bgImage:\n        \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n    }),\n  ]\n\n  if (withShadow)\n    overlays = [\n      ...overlays,\n      {\n        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`,\n      },\n    ]\n\n  return overlays\n}\n\ntype UseSaturationSliderOptions = {\n  /**\n   * The base `id` to use for the saturation slider.\n   */\n  id?: string\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The value of the saturation slider.\n   */\n  value?: Hsv\n  /**\n   * The initial value of the saturation slider.\n   *\n   * @default \"[0, 0, 1]\"\n   */\n  defaultValue?: Hsv\n  /**\n   * Function called whenever the saturation slider value changes.\n   */\n  onChange?: (value: Hsv) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: Hsv) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: Hsv) => void\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 0.01\n   */\n  step?: number\n  /**\n   * If `false`, the saturation slider handle will not capture focus when value changes.\n   *\n   * @default true\n   */\n  focusThumbOnChange?: boolean\n  /**\n   * The CSS `background` property. Used in `background` of thumb element.\n   */\n  thumbColor?: CSSUIProps[\"bg\"]\n  /**\n   * If `true`, the slider has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n  /**\n   * The overlay used for the saturation slider.\n   */\n  overlays?: Overlay[]\n}\n\nexport type UseSaturationSliderProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"defaultValue\" | \"onChange\"\n> &\n  UseSaturationSliderOptions &\n  FormControlOptions\n\nexport const useSaturationSlider = ({\n  focusThumbOnChange = true,\n  ...props\n}: UseSaturationSliderProps) => {\n  if (!focusThumbOnChange) props.isReadOnly = true\n\n  let {\n    id,\n    name,\n    value: valueProp,\n    defaultValue = [0, 0, 1],\n    onChange: onChangeProp,\n    onChangeStart: onChangeStartProp,\n    onChangeEnd: onChangeEndProp,\n    step = 0.01,\n    thumbColor,\n    required,\n    disabled,\n    readOnly,\n    withShadow = true,\n    overlays: overlaysProp = defaultOverlays(withShadow),\n    ...rest\n  } = useFormControlProps(props)\n\n  const onChangeStart = useCallbackRef(onChangeStartProp)\n  const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange: onChangeProp,\n  })\n  const [isDragging, setDragging] = useState(false)\n  const isInteractive = !(disabled || readOnly)\n  let [h, s, v] = value\n\n  s = clampNumber(s, 0, 1)\n  v = clampNumber(v, 0, 1)\n\n  const containerRef = useRef<HTMLElement>(null)\n  const trackRef = useRef<HTMLElement>(null)\n  const thumbRef = useRef<HTMLElement>(null)\n  const latestRef = useLatestRef({\n    value,\n    step,\n    isInteractive,\n    eventSource: null as \"pointer\" | \"keyboard\" | null,\n    focusThumbOnChange,\n  })\n\n  const thumbSize = useSize(thumbRef)\n\n  const overlays = useMemo(\n    () => overlaysProp.map((propsOrFunc) => runIfFunc(propsOrFunc, [h, s, v])),\n    [overlaysProp, h, s, v],\n  )\n\n  const getValueFromPointer = useCallback(\n    (ev: any) => {\n      if (!trackRef.current) return []\n\n      const { step } = latestRef.current\n\n      latestRef.current.eventSource = \"pointer\"\n\n      const { bottom, left, height, width } =\n        trackRef.current.getBoundingClientRect()\n      const { clientX, clientY } = ev.touches?.[0] ?? ev\n\n      let s = clampNumber((clientX - left) / width, 0, 1)\n      let v = clampNumber((bottom - clientY) / height, 0, 1)\n\n      if (step) {\n        s = parseFloat(roundNumberToStep(s, 0, step))\n        v = parseFloat(roundNumberToStep(v, 0, step))\n      }\n\n      return [s, v]\n    },\n    [latestRef],\n  )\n\n  const setValueFromPointer = (ev: MouseEvent | TouchEvent | PointerEvent) => {\n    const { value } = latestRef.current\n    const [nextS, nextV] = getValueFromPointer(ev)\n\n    if (nextS == null || nextV == null) return\n\n    const [, s, v] = value\n\n    if (nextS !== s || nextV !== v) setValue(([h]) => [h, nextS, nextV])\n  }\n\n  const focusThumb = useCallback(() => {\n    const { focusThumbOnChange } = latestRef.current\n\n    if (focusThumbOnChange) setTimeout(() => thumbRef.current?.focus())\n  }, [latestRef])\n\n  const constrain = useCallback(\n    ([s, v]: [number, number]) => {\n      const { isInteractive } = latestRef.current\n\n      if (!isInteractive) return\n\n      s = clampNumber(s, 0, 1)\n      v = clampNumber(v, 0, 1)\n\n      setValue(([h]) => [h, s, v])\n    },\n    [latestRef, setValue],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLElement>) => {\n      const actions: Record<string, KeyboardEventHandler> = {\n        ArrowRight: () => constrain([s + step, v]),\n        ArrowUp: () => constrain([s, v + step]),\n        ArrowLeft: () => constrain([s - step, v]),\n        ArrowDown: () => constrain([s, v - step]),\n      }\n\n      const action = actions[ev.key]\n\n      if (!action) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      action(ev)\n\n      latestRef.current.eventSource = \"keyboard\"\n    },\n    [latestRef, constrain, s, v, step],\n  )\n\n  usePanEvent(containerRef, {\n    onSessionStart: (ev) => {\n      const { isInteractive, value } = latestRef.current\n\n      if (!isInteractive) return\n\n      setDragging(true)\n      focusThumb()\n      setValueFromPointer(ev)\n      onChangeStart(value)\n    },\n    onSessionEnd: () => {\n      const { isInteractive, value } = latestRef.current\n\n      if (!isInteractive) return\n\n      setDragging(false)\n      onChangeEnd(value)\n    },\n    onMove: (ev) => {\n      const { isInteractive } = latestRef.current\n\n      if (!isInteractive) return\n\n      setValueFromPointer(ev)\n    },\n  })\n\n  useUpdateEffect(() => {\n    const { eventSource, value } = latestRef.current\n\n    if (eventSource === \"keyboard\") onChangeEnd(value)\n  }, [value, onChangeEnd])\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\"aria-readonly\"]),\n      ref: mergeRefs(ref, containerRef),\n      tabIndex: -1,\n    }),\n    [rest],\n  )\n\n  const getInnerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        ...rest.style,\n        padding: `${w / 2}px`,\n      }\n\n      return {\n        ...props,\n        ref,\n        style,\n      }\n    },\n    [rest, thumbSize],\n  )\n\n  const getInputProps: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(rest, formControlProperties),\n      ...props,\n      id,\n      ref,\n      type: \"hidden\",\n      name,\n      value: [h, s, v].toString(),\n      required,\n      disabled,\n      readOnly,\n    }),\n    [disabled, id, name, readOnly, required, rest, h, s, v],\n  )\n\n  const getTrackProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(\n        rest,\n        getFormControlProperties({ omit: [\"aria-readonly\"] }),\n      ),\n      ...props,\n      ref: mergeRefs(ref, trackRef),\n    }),\n    [rest],\n  )\n\n  const getThumbProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const { width, height } = thumbSize ?? { width: 0, height: 0 }\n      const x = s * 100\n      const y = v * 100\n\n      const style: CSSProperties = {\n        ...props.style,\n        position: \"absolute\",\n        userSelect: \"none\",\n        touchAction: \"none\",\n        left: `calc(${x}% - ${width / 2}px)`,\n        bottom: `calc(${y}% - ${height / 2}px)`,\n      }\n\n      return {\n        \"aria-label\": \"Saturation and brightness thumb\",\n        bg: thumbColor ?? hsvTo([h, s, v])(),\n        ...pickObject(rest, formControlProperties),\n        ...props,\n        ref: mergeRefs(ref, thumbRef),\n        tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n        role: \"slider\",\n        \"aria-valuenow\": s,\n        \"aria-valuemin\": 0,\n        \"aria-valuemax\": 100,\n        \"aria-valuetext\": `saturation ${s}, brightness ${v}`,\n        \"data-active\": dataAttr(isDragging && focusThumbOnChange),\n        onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n        onFocus: handlerAll(props.onFocus, rest.onFocus),\n        onBlur: handlerAll(props.onBlur, rest.onBlur),\n        style,\n      }\n    },\n    [\n      h,\n      s,\n      v,\n      thumbColor,\n      focusThumbOnChange,\n      isDragging,\n      isInteractive,\n      onKeyDown,\n      rest,\n      thumbSize,\n    ],\n  )\n\n  return {\n    value,\n    overlays,\n    getContainerProps,\n    getInnerProps,\n    getTrackProps,\n    getInputProps,\n    getThumbProps,\n  }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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","names":["import_utils","step","s","v","value","h","focusThumbOnChange","isInteractive","props","props"]}
+{"version":3,"sources":["../src/saturation-slider.tsx","../src/use-saturation-slider.ts"],"sourcesContent":["import {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport { cx, replaceObject } from \"@yamada-ui/utils\"\nimport type { UseSaturationSliderProps } from \"./use-saturation-slider\"\nimport { useSaturationSlider } from \"./use-saturation-slider\"\n\ntype SaturationSliderOptions = {\n  /**\n   * The aspect ratio of the saturation slider.\n   *\n   * @default '16 / 9'\n   */\n  ratio?: Token<number>\n  /**\n   * Props for saturation slider inner element.\n   */\n  innerProps?: HTMLUIProps<\"div\">\n  /**\n   * Props for saturation slider input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for saturation slider track element.\n   */\n  trackProps?: HTMLUIProps<\"div\">\n  /**\n   * Props for saturation slider thumb element.\n   */\n  thumbProps?: HTMLUIProps<\"div\">\n}\n\n/**\n * `SaturationSlider` is a component used to allow the user to select a color saturation.\n *\n * @see Docs https://yamada-ui.com/components/forms/saturation-slider\n */\nexport type SaturationSliderProps = ThemeProps<\"SaturationSlider\"> &\n  UseSaturationSliderProps &\n  SaturationSliderOptions\n\nexport const SaturationSlider = forwardRef<SaturationSliderProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\n      \"SaturationSlider\",\n      props,\n    )\n    const {\n      className,\n      ratio = 16 / 9,\n      innerProps,\n      inputProps,\n      trackProps,\n      thumbProps,\n      __css,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n    const {\n      overlays,\n      getContainerProps,\n      getInnerProps,\n      getTrackProps,\n      getInputProps,\n      getThumbProps,\n    } = useSaturationSlider(computedProps)\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      _before: {\n        content: `\"\"`,\n        display: \"block\",\n        h: 0,\n        pb: replaceObject(ratio, (r) => `${(1 / r) * 100}%`),\n      },\n      \"& > *\": {\n        position: \"absolute\",\n        top: \"0\",\n        right: \"0\",\n        bottom: \"0\",\n        left: \"0\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        w: \"100%\",\n        h: \"100%\",\n      },\n      ...styles.container,\n      ...__css,\n    }\n\n    return (\n      <ui.div\n        className={cx(\"ui-saturation-slider\", className)}\n        __css={css}\n        {...getContainerProps()}\n      >\n        <ui.div\n          className={cx(\"ui-saturation-slider__inner\", className)}\n          __css={{ ...styles.inner }}\n          {...getInnerProps(innerProps)}\n        >\n          <ui.input {...getInputProps(inputProps, ref)} />\n\n          {overlays.map((props, index) => (\n            <ui.div\n              key={index}\n              className=\"ui-saturation-slider__overlay\"\n              __css={{\n                ...styles.overlay,\n              }}\n              {...props}\n            />\n          ))}\n\n          <ui.div\n            className=\"ui-saturation-slider__track\"\n            __css={{\n              ...styles.track,\n            }}\n            {...getTrackProps(trackProps)}\n          >\n            <ui.div\n              className=\"ui-saturation-slider__thumb\"\n              __css={{ ...styles.thumb }}\n              {...getThumbProps(thumbProps)}\n            />\n          </ui.div>\n        </ui.div>\n      </ui.div>\n    )\n  },\n)\n","import type { CSSUIProps, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport {\n  useFormControlProps,\n  type FormControlOptions,\n  formControlProperties,\n  getFormControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useLatestRef } from \"@yamada-ui/use-latest-ref\"\nimport { usePanEvent } from \"@yamada-ui/use-pan-event\"\nimport { useSize } from \"@yamada-ui/use-size\"\nimport {\n  omitObject,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  runIfFunc,\n  clampNumber,\n  hsvTo,\n  roundNumberToStep,\n  pickObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { useCallback, useMemo, useRef, useState } from \"react\"\n\nexport type Hsv = [number, number, number]\ntype Overlay = HTMLUIProps<\"div\"> | ((value: Hsv) => HTMLUIProps<\"div\">)\n\nconst defaultOverlays = (withShadow: boolean): Overlay[] => {\n  let overlays: Overlay[] = [\n    ([h]) => ({\n      bg: `hsl(${h}, 100%, 50%)`,\n      bgImage:\n        \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n    }),\n  ]\n\n  if (withShadow)\n    overlays = [\n      ...overlays,\n      {\n        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`,\n      },\n    ]\n\n  return overlays\n}\n\ntype UseSaturationSliderOptions = {\n  /**\n   * The base `id` to use for the saturation slider.\n   */\n  id?: string\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The value of the saturation slider.\n   */\n  value?: Hsv\n  /**\n   * The initial value of the saturation slider.\n   *\n   * @default \"[0, 0, 1]\"\n   */\n  defaultValue?: Hsv\n  /**\n   * Function called whenever the saturation slider value changes.\n   */\n  onChange?: (value: Hsv) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: Hsv) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: Hsv) => void\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 0.01\n   */\n  step?: number\n  /**\n   * If `false`, the saturation slider handle will not capture focus when value changes.\n   *\n   * @default true\n   */\n  focusThumbOnChange?: boolean\n  /**\n   * The CSS `background` property. Used in `background` of thumb element.\n   */\n  thumbColor?: CSSUIProps[\"bg\"]\n  /**\n   * If `true`, the slider has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n  /**\n   * The overlay used for the saturation slider.\n   */\n  overlays?: Overlay[]\n}\n\nexport type UseSaturationSliderProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"defaultValue\" | \"onChange\"\n> &\n  UseSaturationSliderOptions &\n  FormControlOptions\n\nexport const useSaturationSlider = ({\n  focusThumbOnChange = true,\n  ...props\n}: UseSaturationSliderProps) => {\n  if (!focusThumbOnChange) props.isReadOnly = true\n\n  let {\n    id,\n    name,\n    value: valueProp,\n    defaultValue = [0, 0, 1],\n    onChange: onChangeProp,\n    onChangeStart: onChangeStartProp,\n    onChangeEnd: onChangeEndProp,\n    step = 0.01,\n    thumbColor,\n    required,\n    disabled,\n    readOnly,\n    withShadow = true,\n    overlays: overlaysProp = defaultOverlays(withShadow),\n    ...rest\n  } = useFormControlProps(props)\n\n  const onChangeStart = useCallbackRef(onChangeStartProp)\n  const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange: onChangeProp,\n  })\n  const [isDragging, setDragging] = useState(false)\n  const isInteractive = !(disabled || readOnly)\n  let [h, s, v] = value\n\n  s = clampNumber(s, 0, 1)\n  v = clampNumber(v, 0, 1)\n\n  const containerRef = useRef<HTMLElement>(null)\n  const trackRef = useRef<HTMLElement>(null)\n  const thumbRef = useRef<HTMLElement>(null)\n  const latestRef = useLatestRef({\n    value,\n    step,\n    isInteractive,\n    eventSource: null as \"pointer\" | \"keyboard\" | null,\n    focusThumbOnChange,\n  })\n\n  const thumbSize = useSize(thumbRef)\n\n  const overlays = useMemo(\n    () => overlaysProp.map((propsOrFunc) => runIfFunc(propsOrFunc, [h, s, v])),\n    [overlaysProp, h, s, v],\n  )\n\n  const getValueFromPointer = useCallback(\n    (ev: any) => {\n      if (!trackRef.current) return []\n\n      const { step } = latestRef.current\n\n      latestRef.current.eventSource = \"pointer\"\n\n      const { bottom, left, height, width } =\n        trackRef.current.getBoundingClientRect()\n      const { clientX, clientY } = ev.touches?.[0] ?? ev\n\n      let s = clampNumber((clientX - left) / width, 0, 1)\n      let v = clampNumber((bottom - clientY) / height, 0, 1)\n\n      if (step) {\n        s = parseFloat(roundNumberToStep(s, 0, step))\n        v = parseFloat(roundNumberToStep(v, 0, step))\n      }\n\n      return [s, v]\n    },\n    [latestRef],\n  )\n\n  const setValueFromPointer = (ev: MouseEvent | TouchEvent | PointerEvent) => {\n    const { value } = latestRef.current\n    const [nextS, nextV] = getValueFromPointer(ev)\n\n    if (nextS == null || nextV == null) return\n\n    const [, s, v] = value\n\n    if (nextS !== s || nextV !== v) setValue(([h]) => [h, nextS, nextV])\n  }\n\n  const focusThumb = useCallback(() => {\n    const { focusThumbOnChange } = latestRef.current\n\n    if (focusThumbOnChange) setTimeout(() => thumbRef.current?.focus())\n  }, [latestRef])\n\n  const constrain = useCallback(\n    ([s, v]: [number, number]) => {\n      const { isInteractive } = latestRef.current\n\n      if (!isInteractive) return\n\n      s = clampNumber(s, 0, 1)\n      v = clampNumber(v, 0, 1)\n\n      setValue(([h]) => [h, s, v])\n    },\n    [latestRef, setValue],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLElement>) => {\n      const actions: Record<string, KeyboardEventHandler> = {\n        ArrowRight: () => constrain([s + step, v]),\n        ArrowUp: () => constrain([s, v + step]),\n        ArrowLeft: () => constrain([s - step, v]),\n        ArrowDown: () => constrain([s, v - step]),\n      }\n\n      const action = actions[ev.key]\n\n      if (!action) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      action(ev)\n\n      latestRef.current.eventSource = \"keyboard\"\n    },\n    [latestRef, constrain, s, v, step],\n  )\n\n  usePanEvent(containerRef, {\n    onSessionStart: (ev) => {\n      const { isInteractive, value } = latestRef.current\n\n      if (!isInteractive) return\n\n      setDragging(true)\n      focusThumb()\n      setValueFromPointer(ev)\n      onChangeStart(value)\n    },\n    onSessionEnd: () => {\n      const { isInteractive, value } = latestRef.current\n\n      if (!isInteractive) return\n\n      setDragging(false)\n      onChangeEnd(value)\n    },\n    onMove: (ev) => {\n      const { isInteractive } = latestRef.current\n\n      if (!isInteractive) return\n\n      setValueFromPointer(ev)\n    },\n  })\n\n  useUpdateEffect(() => {\n    const { eventSource, value } = latestRef.current\n\n    if (eventSource === \"keyboard\") onChangeEnd(value)\n  }, [value, onChangeEnd])\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\"aria-readonly\"]),\n      ref: mergeRefs(ref, containerRef),\n      tabIndex: -1,\n    }),\n    [rest],\n  )\n\n  const getInnerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        ...rest.style,\n        padding: `${w / 2}px`,\n      }\n\n      return {\n        ...props,\n        ref,\n        style,\n      }\n    },\n    [rest, thumbSize],\n  )\n\n  const getInputProps: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(rest, formControlProperties),\n      ...props,\n      id,\n      ref,\n      type: \"hidden\",\n      name,\n      value: [h, s, v].toString(),\n      required,\n      disabled,\n      readOnly,\n    }),\n    [disabled, id, name, readOnly, required, rest, h, s, v],\n  )\n\n  const getTrackProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(\n        rest,\n        getFormControlProperties({ omit: [\"aria-readonly\"] }),\n      ),\n      ...props,\n      ref: mergeRefs(ref, trackRef),\n    }),\n    [rest],\n  )\n\n  const getThumbProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const { width, height } = thumbSize ?? { width: 0, height: 0 }\n      const x = s * 100\n      const y = v * 100\n\n      const style: CSSProperties = {\n        ...props.style,\n        position: \"absolute\",\n        userSelect: \"none\",\n        touchAction: \"none\",\n        left: `calc(${x}% - ${width / 2}px)`,\n        bottom: `calc(${y}% - ${height / 2}px)`,\n      }\n\n      return {\n        \"aria-label\": \"Saturation and brightness thumb\",\n        bg: thumbColor ?? hsvTo([h, s, v])(),\n        ...pickObject(rest, formControlProperties),\n        ...props,\n        ref: mergeRefs(ref, thumbRef),\n        tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n        role: \"slider\",\n        \"aria-valuenow\": s,\n        \"aria-valuemin\": 0,\n        \"aria-valuemax\": 100,\n        \"aria-valuetext\": `saturation ${s}, brightness ${v}`,\n        \"data-active\": dataAttr(isDragging && focusThumbOnChange),\n        onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n        onFocus: handlerAll(props.onFocus, rest.onFocus),\n        onBlur: handlerAll(props.onBlur, rest.onBlur),\n        style,\n      }\n    },\n    [\n      h,\n      s,\n      v,\n      thumbColor,\n      focusThumbOnChange,\n      isDragging,\n      isInteractive,\n      onKeyDown,\n      rest,\n      thumbSize,\n    ],\n  )\n\n  return {\n    value,\n    overlays,\n    getContainerProps,\n    getInnerProps,\n    getTrackProps,\n    getInputProps,\n    getThumbProps,\n  }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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","names":["import_utils","step","s","v","value","h","focusThumbOnChange","isInteractive","props","props"]}

package/dist/saturation-slider.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   SaturationSlider
-} from "./chunk-X7R6FWCD.mjs";
-import "./chunk-KKQ3MOXJ.mjs";
+} from "./chunk-PCXNTEF4.mjs";
+import "./chunk-KKUDFHCJ.mjs";
 export {
   SaturationSlider
 };

package/dist/use-color-picker.js

@@ -108,13 +108,11 @@ var useColorPicker = ({
   });
   const isColorSelectorFull = colorSelectorSize === "full";
   const onOpen = (0, import_react.useCallback)(() => {
-    if (disabled || readOnly)
-      return;
+    if (disabled || readOnly) return;
     onInternalOpen();
   }, [onInternalOpen, disabled, readOnly]);
   const onClose = (0, import_react.useCallback)(() => {
-    if (!isOpen)
-      return;
+    if (!isOpen) return;
     const next = (0, import_utils.convertColor)(value, fallbackValue)(formatRef.current);
     setValue((prev) => !next || prev === next ? prev : next);
     setInputValue(formatInput(next != null ? next : ""));
@@ -130,14 +128,12 @@ var useColorPicker = ({
     fallbackValue
   ]);
   const onContainerClick = (0, import_react.useCallback)(() => {
-    if (isOpen)
-      return;
+    if (isOpen) return;
     onOpen();
   }, [isOpen, onOpen]);
   const onInputFocus = (0, import_react.useCallback)(() => {
     isInputFocused.current = true;
-    if (isOpen)
-      return;
+    if (isOpen) return;
     onOpen();
   }, [isOpen, onOpen]);
   const onInputBlur = (0, import_react.useCallback)(() => {
@@ -146,29 +142,23 @@ var useColorPicker = ({
   const onContainerBlur = (0, import_react.useCallback)(
     (ev) => {
       const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
-      if ((0, import_utils.isContains)(containerRef.current, relatedTarget))
-        return;
-      if (!closeOnBlur)
-        return;
-      if (isOpen)
-        onClose();
+      if ((0, import_utils.isContains)(containerRef.current, relatedTarget)) return;
+      if (!closeOnBlur) return;
+      if (isOpen) onClose();
     },
     [closeOnBlur, isOpen, onClose]
   );
   const onInputKeyDown = (0, import_react.useCallback)(
     (ev) => {
-      if (ev.key === " ")
-        ev.key = ev.code;
-      if (disabled || readOnly)
-        return;
+      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;
+      if (!action) return;
       ev.preventDefault();
       ev.stopPropagation();
       action();
@@ -187,8 +177,7 @@ var useColorPicker = ({
     (value2) => {
       setValue(value2);
       setTimeout(() => {
-        if (!isInputFocused.current)
-          setInputValue(formatInput(value2));
+        if (!isInputFocused.current) setInputValue(formatInput(value2));
       });
     },
     [setValue, formatInput]
@@ -200,8 +189,7 @@ var useColorPicker = ({
       ev.stopPropagation();
       try {
         const { sRGBHex } = (_a2 = await onEyeDropperOpen()) != null ? _a2 : {};
-        if (!sRGBHex)
-          return;
+        if (!sRGBHex) return;
         onColorSelectorChange(sRGBHex);
         onChangeEnd == null ? void 0 : onChangeEnd(sRGBHex);
       } catch {
@@ -215,18 +203,15 @@ var useColorPicker = ({
     enabled: isOpen && closeOnBlur
   });
   (0, import_utils.useUpdateEffect)(() => {
-    if (!format || !value)
-      return;
+    if (!format || !value) return;
     formatRef.current = format;
     const nextValue = (0, import_utils.convertColor)(value, fallbackValue)(format);
-    if (!nextValue)
-      return;
+    if (!nextValue) return;
     setInputValue(formatInput(nextValue));
     setValue(nextValue);
   }, [format]);
   (0, import_utils.useUpdateEffect)(() => {
-    if (isInputFocused.current || !valueProp)
-      return;
+    if (isInputFocused.current || !valueProp) return;
     setInputValue(formatInput(valueProp));
   }, [valueProp]);
   const getPopoverProps = (0, import_react.useCallback)(

package/dist/use-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-color-picker.ts"],"sourcesContent":["import { layoutStyleProperties } from \"@yamada-ui/core\"\nimport type {\n  UIPropGetter,\n  CSSUIObject,\n  ThemeProps,\n  HTMLUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  formControlProperties,\n  useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { popoverProperties, type PopoverProps } from \"@yamada-ui/popover\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { useEyeDropper } from \"@yamada-ui/use-eye-dropper\"\nimport { useOutsideClick } from \"@yamada-ui/use-outside-click\"\nimport type { ColorFormat, Dict } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n  splitObject,\n  omitObject,\n  getEventRelatedTarget,\n  isContains,\n  convertColor,\n  calcFormat,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport type { ColorSelectorProps } from \"./color-selector\"\nimport type { UseColorSelectorBaseProps } from \"./use-color-selector\"\n\ntype ColorSelectorThemeProps = ThemeProps<\"ColorSelector\">\n\ntype ColorPickerContext = { value: string; styles: Record<string, CSSUIObject> }\n\nexport const [ColorPickerProvider, useColorPickerContext] =\n  createContext<ColorPickerContext>({\n    name: \"ColorPickerContext\",\n    errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ColorPicker />\"`,\n  })\n\ntype UseColorPickerOptions = {\n  /**\n   * The initial value of the color selector.\n   */\n  defaultColor?: string\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * A callback function to format the input entered.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * If `true`, display the result component.\n   *\n   * @default false\n   */\n  withResult?: boolean\n  /**\n   * If `true` display the eye dropper component.\n   *\n   * @default false\n   */\n  withColorSelectorEyeDropper?: boolean\n  /**\n   * If `true`, the color swatch will be closed when value is selected.\n   */\n  closeOnSelectSwatch?: boolean\n  /**\n   * Variant for the color selector component.\n   */\n  colorSelectorVariant?: ColorSelectorThemeProps[\"variant\"]\n  /**\n   * Size for the color selector component.\n   */\n  colorSelectorSize?: ColorSelectorThemeProps[\"size\"]\n  /**\n   * ColorScheme for the color selector component.\n   */\n  colorSelectorColorScheme?: ColorSelectorThemeProps[\"colorScheme\"]\n  /**\n   * Props for color selector component.\n   */\n  colorSelectorProps?: ColorSelectorProps\n}\n\nexport type UseColorPickerProps = Omit<\n  HTMLUIProps<\"input\">,\n  \"size\" | \"offset\" | \"value\" | \"defaultValue\" | \"onChange\" | \"children\"\n> &\n  Omit<UseColorSelectorBaseProps, \"id\" | \"name\"> &\n  Omit<\n    PopoverProps,\n    | \"initialFocusRef\"\n    | \"closeOnButton\"\n    | \"trigger\"\n    | \"autoFocus\"\n    | \"restoreFocus\"\n    | \"openDelay\"\n    | \"closeDelay\"\n    | \"children\"\n  > &\n  Pick<\n    ColorSelectorProps,\n    | \"withPicker\"\n    | \"withChannel\"\n    | \"swatchesLabel\"\n    | \"swatches\"\n    | \"swatchesColumns\"\n  > &\n  UseColorPickerOptions\n\nexport const useColorPicker = ({\n  value: valueProp,\n  defaultValue,\n  fallbackValue,\n  defaultColor,\n  onChange: onChangeProp,\n  onChangeStart,\n  onChangeEnd,\n  onSwatchClick,\n  formatInput = (value) => value,\n  closeOnBlur = true,\n  closeOnEsc = true,\n  placement = \"bottom-start\",\n  duration = 0.2,\n  isOpen: isOpenProp,\n  defaultIsOpen,\n  onOpen: onOpenProp,\n  onClose: onCloseProp,\n  allowInput = true,\n  closeOnSelectSwatch,\n  format,\n  swatchesLabel,\n  swatches,\n  swatchesColumns,\n  withPicker,\n  withChannel,\n  withResult = false,\n  withColorSelectorEyeDropper = false,\n  colorSelectorVariant,\n  colorSelectorSize,\n  colorSelectorColorScheme,\n  ...rest\n}: UseColorPickerProps) => {\n  rest = useFormControlProps(rest)\n\n  const { \"aria-readonly\": _ariaReadonly, ...formControlProps } = pickObject(\n    rest,\n    formControlProperties,\n  )\n  const { disabled, readOnly } = formControlProps\n  const [containerProps, inputProps] = splitObject<Dict, string>(\n    omitObject(rest, [...popoverProperties]),\n    layoutStyleProperties,\n  )\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const fieldRef = useRef<HTMLInputElement>(null)\n\n  const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } =\n    useEyeDropper()\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange: onChangeProp,\n  })\n  const formatRef = useRef<ColorFormat>(\n    format ?? calcFormat(value ?? defaultColor ?? \"\"),\n  )\n  const isInputFocused = useRef<boolean>(false)\n  const [inputValue, setInputValue] = useState<string>(value ?? \"\")\n  const {\n    isOpen,\n    onOpen: onInternalOpen,\n    onClose: onInternalClose,\n  } = useDisclosure({\n    isOpen: isOpenProp,\n    defaultIsOpen,\n    onOpen: onOpenProp,\n    onClose: onCloseProp,\n  })\n  const isColorSelectorFull = colorSelectorSize === \"full\"\n\n  const onOpen = useCallback(() => {\n    if (disabled || readOnly) return\n\n    onInternalOpen()\n  }, [onInternalOpen, disabled, readOnly])\n\n  const onClose = useCallback(() => {\n    if (!isOpen) return\n\n    const next = convertColor(value, fallbackValue)(formatRef.current)\n\n    setValue((prev) => (!next || prev === next ? prev : next))\n    setInputValue(formatInput(next ?? \"\"))\n\n    onInternalClose()\n  }, [\n    formatRef,\n    isOpen,\n    setValue,\n    onInternalClose,\n    value,\n    formatInput,\n    setInputValue,\n    fallbackValue,\n  ])\n\n  const onContainerClick = useCallback(() => {\n    if (isOpen) return\n\n    onOpen()\n  }, [isOpen, onOpen])\n\n  const onInputFocus = useCallback(() => {\n    isInputFocused.current = true\n\n    if (isOpen) return\n\n    onOpen()\n  }, [isOpen, onOpen])\n\n  const onInputBlur = useCallback(() => {\n    isInputFocused.current = false\n  }, [])\n\n  const onContainerBlur = useCallback(\n    (ev: FocusEvent<HTMLDivElement>) => {\n      const relatedTarget = getEventRelatedTarget(ev)\n\n      if (isContains(containerRef.current, relatedTarget)) return\n\n      if (!closeOnBlur) return\n\n      if (isOpen) onClose()\n    },\n    [closeOnBlur, isOpen, onClose],\n  )\n\n  const onInputKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (ev.key === \" \") ev.key = ev.code\n\n      if (disabled || readOnly) return\n\n      const actions: Record<string, Function | undefined> = {\n        Space: !isOpen ? onOpen : undefined,\n        Enter: !isOpen ? onOpen : undefined,\n        Escape: closeOnEsc ? onClose : undefined,\n      }\n\n      const action = actions[ev.key]\n\n      if (!action) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n      action()\n    },\n    [disabled, readOnly, isOpen, onOpen, closeOnEsc, onClose],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const value = ev.target.value\n\n      setInputValue(formatInput(value))\n      setValue(value)\n    },\n    [setInputValue, formatInput, setValue],\n  )\n\n  const onColorSelectorChange = useCallback(\n    (value: string) => {\n      setValue(value)\n\n      setTimeout(() => {\n        if (!isInputFocused.current) setInputValue(formatInput(value))\n      })\n    },\n    [setValue, formatInput],\n  )\n\n  const onEyeDropperClick = useCallback(\n    async (ev: MouseEvent<HTMLButtonElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      try {\n        const { sRGBHex } = (await onEyeDropperOpen()) ?? {}\n\n        if (!sRGBHex) return\n\n        onColorSelectorChange(sRGBHex)\n        onChangeEnd?.(sRGBHex)\n      } catch {}\n    },\n    [onEyeDropperOpen, onColorSelectorChange, onChangeEnd],\n  )\n\n  useOutsideClick({\n    ref: containerRef,\n    handler: onClose,\n    enabled: isOpen && closeOnBlur,\n  })\n\n  useUpdateEffect(() => {\n    if (!format || !value) return\n\n    formatRef.current = format\n\n    const nextValue = convertColor(value, fallbackValue)(format)\n\n    if (!nextValue) return\n\n    setInputValue(formatInput(nextValue))\n    setValue(nextValue)\n  }, [format])\n\n  useUpdateEffect(() => {\n    if (isInputFocused.current || !valueProp) return\n\n    setInputValue(formatInput(valueProp))\n  }, [valueProp])\n\n  const getPopoverProps = useCallback(\n    (props?: PopoverProps): PopoverProps => ({\n      matchWidth: isColorSelectorFull,\n      ...rest,\n      ...props,\n      isOpen,\n      onOpen,\n      onClose,\n      placement,\n      duration,\n      trigger: \"never\",\n      closeOnButton: false,\n    }),\n    [isColorSelectorFull, duration, onClose, onOpen, placement, rest, isOpen],\n  )\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ref: mergeRefs(containerRef, ref),\n      ...containerProps,\n      ...props,\n      ...formControlProps,\n      onClick: handlerAll(props.onClick, rest.onClick, onContainerClick),\n      onBlur: handlerAll(props.onBlur, rest.onBlur, onContainerBlur),\n    }),\n    [containerProps, formControlProps, onContainerBlur, onContainerClick, rest],\n  )\n\n  const getFieldProps: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ref: mergeRefs(fieldRef, ref),\n      tabIndex: !allowInput ? -1 : 0,\n      ...inputProps,\n      ...props,\n      style: {\n        ...props.style,\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n      },\n      value: inputValue,\n      \"data-active\": dataAttr(isOpen),\n      \"aria-expanded\": dataAttr(isOpen),\n      onFocus: handlerAll(props.onFocus, rest.onFocus, onInputFocus),\n      onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onInputKeyDown),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onBlur: handlerAll(props.onFocus, onInputBlur),\n    }),\n    [\n      allowInput,\n      inputProps,\n      inputValue,\n      isOpen,\n      rest,\n      onInputFocus,\n      onInputKeyDown,\n      onInputChange,\n      onInputBlur,\n    ],\n  )\n\n  const getEyeDropperProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      disabled,\n      \"aria-label\": \"Pick a color\",\n      ...props,\n      ref,\n      style: { ...props.style, pointerEvents: readOnly ? \"none\" : undefined },\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n    }),\n    [disabled, onEyeDropperClick, readOnly],\n  )\n\n  const getSelectorProps = useCallback(\n    (props?: ColorSelectorProps): ColorSelectorProps => ({\n      ...formControlProps,\n      ...props,\n      value,\n      defaultValue: defaultColor,\n      fallbackValue,\n      onChange: onColorSelectorChange,\n      onChangeStart,\n      onChangeEnd,\n      onSwatchClick: handlerAll(\n        onSwatchClick,\n        closeOnSelectSwatch ? onClose : undefined,\n      ),\n      format: formatRef.current,\n      withPicker,\n      withChannel,\n      withResult,\n      withEyeDropper: withColorSelectorEyeDropper,\n      swatchesLabel,\n      swatches,\n      swatchesColumns,\n      variant: colorSelectorVariant,\n      size: colorSelectorSize,\n      colorScheme: colorSelectorColorScheme,\n    }),\n    [\n      formControlProps,\n      value,\n      fallbackValue,\n      defaultColor,\n      onColorSelectorChange,\n      onChangeStart,\n      onChangeEnd,\n      onSwatchClick,\n      onClose,\n      closeOnSelectSwatch,\n      formatRef,\n      withPicker,\n      withChannel,\n      withResult,\n      withColorSelectorEyeDropper,\n      swatchesLabel,\n      swatches,\n      swatchesColumns,\n      colorSelectorColorScheme,\n      colorSelectorSize,\n      colorSelectorVariant,\n    ],\n  )\n\n  return {\n    value,\n    eyeDropperSupported,\n    allowInput,\n    getPopoverProps,\n    getContainerProps,\n    getFieldProps,\n    getSelectorProps,\n    getEyeDropperProps,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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","names":["value","_a"]}
+{"version":3,"sources":["../src/use-color-picker.ts"],"sourcesContent":["import { layoutStyleProperties } from \"@yamada-ui/core\"\nimport type {\n  UIPropGetter,\n  CSSUIObject,\n  ThemeProps,\n  HTMLUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  formControlProperties,\n  useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { popoverProperties, type PopoverProps } from \"@yamada-ui/popover\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { useEyeDropper } from \"@yamada-ui/use-eye-dropper\"\nimport { useOutsideClick } from \"@yamada-ui/use-outside-click\"\nimport type { ColorFormat, Dict } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n  splitObject,\n  omitObject,\n  getEventRelatedTarget,\n  isContains,\n  convertColor,\n  calcFormat,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport type { ColorSelectorProps } from \"./color-selector\"\nimport type { UseColorSelectorBaseProps } from \"./use-color-selector\"\n\ntype ColorSelectorThemeProps = ThemeProps<\"ColorSelector\">\n\ntype ColorPickerContext = { value: string; styles: Record<string, CSSUIObject> }\n\nexport const [ColorPickerProvider, useColorPickerContext] =\n  createContext<ColorPickerContext>({\n    name: \"ColorPickerContext\",\n    errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ColorPicker />\"`,\n  })\n\ntype UseColorPickerOptions = {\n  /**\n   * The initial value of the color selector.\n   */\n  defaultColor?: string\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * A callback function to format the input entered.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * If `true`, display the result component.\n   *\n   * @default false\n   */\n  withResult?: boolean\n  /**\n   * If `true` display the eye dropper component.\n   *\n   * @default false\n   */\n  withColorSelectorEyeDropper?: boolean\n  /**\n   * If `true`, the color swatch will be closed when value is selected.\n   */\n  closeOnSelectSwatch?: boolean\n  /**\n   * Variant for the color selector component.\n   */\n  colorSelectorVariant?: ColorSelectorThemeProps[\"variant\"]\n  /**\n   * Size for the color selector component.\n   */\n  colorSelectorSize?: ColorSelectorThemeProps[\"size\"]\n  /**\n   * ColorScheme for the color selector component.\n   */\n  colorSelectorColorScheme?: ColorSelectorThemeProps[\"colorScheme\"]\n  /**\n   * Props for color selector component.\n   */\n  colorSelectorProps?: ColorSelectorProps\n}\n\nexport type UseColorPickerProps = Omit<\n  HTMLUIProps<\"input\">,\n  \"size\" | \"offset\" | \"value\" | \"defaultValue\" | \"onChange\" | \"children\"\n> &\n  Omit<UseColorSelectorBaseProps, \"id\" | \"name\"> &\n  Omit<\n    PopoverProps,\n    | \"initialFocusRef\"\n    | \"closeOnButton\"\n    | \"trigger\"\n    | \"autoFocus\"\n    | \"restoreFocus\"\n    | \"openDelay\"\n    | \"closeDelay\"\n    | \"children\"\n  > &\n  Pick<\n    ColorSelectorProps,\n    | \"withPicker\"\n    | \"withChannel\"\n    | \"swatchesLabel\"\n    | \"swatches\"\n    | \"swatchesColumns\"\n  > &\n  UseColorPickerOptions\n\nexport const useColorPicker = ({\n  value: valueProp,\n  defaultValue,\n  fallbackValue,\n  defaultColor,\n  onChange: onChangeProp,\n  onChangeStart,\n  onChangeEnd,\n  onSwatchClick,\n  formatInput = (value) => value,\n  closeOnBlur = true,\n  closeOnEsc = true,\n  placement = \"bottom-start\",\n  duration = 0.2,\n  isOpen: isOpenProp,\n  defaultIsOpen,\n  onOpen: onOpenProp,\n  onClose: onCloseProp,\n  allowInput = true,\n  closeOnSelectSwatch,\n  format,\n  swatchesLabel,\n  swatches,\n  swatchesColumns,\n  withPicker,\n  withChannel,\n  withResult = false,\n  withColorSelectorEyeDropper = false,\n  colorSelectorVariant,\n  colorSelectorSize,\n  colorSelectorColorScheme,\n  ...rest\n}: UseColorPickerProps) => {\n  rest = useFormControlProps(rest)\n\n  const { \"aria-readonly\": _ariaReadonly, ...formControlProps } = pickObject(\n    rest,\n    formControlProperties,\n  )\n  const { disabled, readOnly } = formControlProps\n  const [containerProps, inputProps] = splitObject<Dict, string>(\n    omitObject(rest, [...popoverProperties]),\n    layoutStyleProperties,\n  )\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const fieldRef = useRef<HTMLInputElement>(null)\n\n  const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } =\n    useEyeDropper()\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange: onChangeProp,\n  })\n  const formatRef = useRef<ColorFormat>(\n    format ?? calcFormat(value ?? defaultColor ?? \"\"),\n  )\n  const isInputFocused = useRef<boolean>(false)\n  const [inputValue, setInputValue] = useState<string>(value ?? \"\")\n  const {\n    isOpen,\n    onOpen: onInternalOpen,\n    onClose: onInternalClose,\n  } = useDisclosure({\n    isOpen: isOpenProp,\n    defaultIsOpen,\n    onOpen: onOpenProp,\n    onClose: onCloseProp,\n  })\n  const isColorSelectorFull = colorSelectorSize === \"full\"\n\n  const onOpen = useCallback(() => {\n    if (disabled || readOnly) return\n\n    onInternalOpen()\n  }, [onInternalOpen, disabled, readOnly])\n\n  const onClose = useCallback(() => {\n    if (!isOpen) return\n\n    const next = convertColor(value, fallbackValue)(formatRef.current)\n\n    setValue((prev) => (!next || prev === next ? prev : next))\n    setInputValue(formatInput(next ?? \"\"))\n\n    onInternalClose()\n  }, [\n    formatRef,\n    isOpen,\n    setValue,\n    onInternalClose,\n    value,\n    formatInput,\n    setInputValue,\n    fallbackValue,\n  ])\n\n  const onContainerClick = useCallback(() => {\n    if (isOpen) return\n\n    onOpen()\n  }, [isOpen, onOpen])\n\n  const onInputFocus = useCallback(() => {\n    isInputFocused.current = true\n\n    if (isOpen) return\n\n    onOpen()\n  }, [isOpen, onOpen])\n\n  const onInputBlur = useCallback(() => {\n    isInputFocused.current = false\n  }, [])\n\n  const onContainerBlur = useCallback(\n    (ev: FocusEvent<HTMLDivElement>) => {\n      const relatedTarget = getEventRelatedTarget(ev)\n\n      if (isContains(containerRef.current, relatedTarget)) return\n\n      if (!closeOnBlur) return\n\n      if (isOpen) onClose()\n    },\n    [closeOnBlur, isOpen, onClose],\n  )\n\n  const onInputKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (ev.key === \" \") ev.key = ev.code\n\n      if (disabled || readOnly) return\n\n      const actions: Record<string, Function | undefined> = {\n        Space: !isOpen ? onOpen : undefined,\n        Enter: !isOpen ? onOpen : undefined,\n        Escape: closeOnEsc ? onClose : undefined,\n      }\n\n      const action = actions[ev.key]\n\n      if (!action) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n      action()\n    },\n    [disabled, readOnly, isOpen, onOpen, closeOnEsc, onClose],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const value = ev.target.value\n\n      setInputValue(formatInput(value))\n      setValue(value)\n    },\n    [setInputValue, formatInput, setValue],\n  )\n\n  const onColorSelectorChange = useCallback(\n    (value: string) => {\n      setValue(value)\n\n      setTimeout(() => {\n        if (!isInputFocused.current) setInputValue(formatInput(value))\n      })\n    },\n    [setValue, formatInput],\n  )\n\n  const onEyeDropperClick = useCallback(\n    async (ev: MouseEvent<HTMLButtonElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      try {\n        const { sRGBHex } = (await onEyeDropperOpen()) ?? {}\n\n        if (!sRGBHex) return\n\n        onColorSelectorChange(sRGBHex)\n        onChangeEnd?.(sRGBHex)\n      } catch {}\n    },\n    [onEyeDropperOpen, onColorSelectorChange, onChangeEnd],\n  )\n\n  useOutsideClick({\n    ref: containerRef,\n    handler: onClose,\n    enabled: isOpen && closeOnBlur,\n  })\n\n  useUpdateEffect(() => {\n    if (!format || !value) return\n\n    formatRef.current = format\n\n    const nextValue = convertColor(value, fallbackValue)(format)\n\n    if (!nextValue) return\n\n    setInputValue(formatInput(nextValue))\n    setValue(nextValue)\n  }, [format])\n\n  useUpdateEffect(() => {\n    if (isInputFocused.current || !valueProp) return\n\n    setInputValue(formatInput(valueProp))\n  }, [valueProp])\n\n  const getPopoverProps = useCallback(\n    (props?: PopoverProps): PopoverProps => ({\n      matchWidth: isColorSelectorFull,\n      ...rest,\n      ...props,\n      isOpen,\n      onOpen,\n      onClose,\n      placement,\n      duration,\n      trigger: \"never\",\n      closeOnButton: false,\n    }),\n    [isColorSelectorFull, duration, onClose, onOpen, placement, rest, isOpen],\n  )\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ref: mergeRefs(containerRef, ref),\n      ...containerProps,\n      ...props,\n      ...formControlProps,\n      onClick: handlerAll(props.onClick, rest.onClick, onContainerClick),\n      onBlur: handlerAll(props.onBlur, rest.onBlur, onContainerBlur),\n    }),\n    [containerProps, formControlProps, onContainerBlur, onContainerClick, rest],\n  )\n\n  const getFieldProps: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ref: mergeRefs(fieldRef, ref),\n      tabIndex: !allowInput ? -1 : 0,\n      ...inputProps,\n      ...props,\n      style: {\n        ...props.style,\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n      },\n      value: inputValue,\n      \"data-active\": dataAttr(isOpen),\n      \"aria-expanded\": dataAttr(isOpen),\n      onFocus: handlerAll(props.onFocus, rest.onFocus, onInputFocus),\n      onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onInputKeyDown),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onBlur: handlerAll(props.onFocus, onInputBlur),\n    }),\n    [\n      allowInput,\n      inputProps,\n      inputValue,\n      isOpen,\n      rest,\n      onInputFocus,\n      onInputKeyDown,\n      onInputChange,\n      onInputBlur,\n    ],\n  )\n\n  const getEyeDropperProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      disabled,\n      \"aria-label\": \"Pick a color\",\n      ...props,\n      ref,\n      style: { ...props.style, pointerEvents: readOnly ? \"none\" : undefined },\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n    }),\n    [disabled, onEyeDropperClick, readOnly],\n  )\n\n  const getSelectorProps = useCallback(\n    (props?: ColorSelectorProps): ColorSelectorProps => ({\n      ...formControlProps,\n      ...props,\n      value,\n      defaultValue: defaultColor,\n      fallbackValue,\n      onChange: onColorSelectorChange,\n      onChangeStart,\n      onChangeEnd,\n      onSwatchClick: handlerAll(\n        onSwatchClick,\n        closeOnSelectSwatch ? onClose : undefined,\n      ),\n      format: formatRef.current,\n      withPicker,\n      withChannel,\n      withResult,\n      withEyeDropper: withColorSelectorEyeDropper,\n      swatchesLabel,\n      swatches,\n      swatchesColumns,\n      variant: colorSelectorVariant,\n      size: colorSelectorSize,\n      colorScheme: colorSelectorColorScheme,\n    }),\n    [\n      formControlProps,\n      value,\n      fallbackValue,\n      defaultColor,\n      onColorSelectorChange,\n      onChangeStart,\n      onChangeEnd,\n      onSwatchClick,\n      onClose,\n      closeOnSelectSwatch,\n      formatRef,\n      withPicker,\n      withChannel,\n      withResult,\n      withColorSelectorEyeDropper,\n      swatchesLabel,\n      swatches,\n      swatchesColumns,\n      colorSelectorColorScheme,\n      colorSelectorSize,\n      colorSelectorVariant,\n    ],\n  )\n\n  return {\n    value,\n    eyeDropperSupported,\n    allowInput,\n    getPopoverProps,\n    getContainerProps,\n    getFieldProps,\n    getSelectorProps,\n    getEyeDropperProps,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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","names":["value","_a"]}

package/dist/use-color-picker.mjs

@@ -3,7 +3,7 @@ import {
   ColorPickerProvider,
   useColorPicker,
   useColorPickerContext
-} from "./chunk-SBN7FEOE.mjs";
+} from "./chunk-PVPQQB6L.mjs";
 export {
   ColorPickerProvider,
   useColorPicker,

package/dist/use-color-selector.js

@@ -34,21 +34,16 @@ var import_react = require("react");
 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;
+  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;
+  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) => {
@@ -168,8 +163,7 @@ var useColorSelector = ({
       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);
+      if (nextValue) onChangeStartRef(nextValue);
     },
     [formatRef, onChangeStartRef, fallbackValue, parsedValue]
   );
@@ -186,18 +180,15 @@ var useColorSelector = ({
         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);
+      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;
+      if (isNaN(n)) n = 0;
+      if (["s", "l", "a"].includes(space)) n = n / 100;
       let nextValue;
       if (resolvedValue.startsWith("hsl")) {
         const { h: h2, s: s2, l, a: a2 } = Object.assign(
@@ -212,8 +203,7 @@ var useColorSelector = ({
         );
         nextValue = (0, import_utils.rgbaTo)([r, g, b, a2], fallbackValue)(formatRef.current);
       }
-      if (!nextValue)
-        return;
+      if (!nextValue) return;
       onChange(nextValue);
       onChangeEnd(nextValue);
     },
@@ -223,8 +213,7 @@ var useColorSelector = ({
     var _a;
     try {
       const { sRGBHex } = (_a = await onOpen()) != null ? _a : {};
-      if (!sRGBHex)
-        return;
+      if (!sRGBHex) return;
       onChange(sRGBHex);
       onChangeEnd(sRGBHex);
     } catch {
@@ -232,22 +221,17 @@ var useColorSelector = ({
   }, [onOpen, onChange, onChangeEnd]);
   (0, import_utils.useUpdateEffect)(() => {
     const nextValue = (0, import_utils.hsvTo)([h, s, v, a], fallbackValue)(formatRef.current);
-    if (nextValue)
-      setValue(nextValue);
+    if (nextValue) setValue(nextValue);
   }, [h, s, v, a]);
   (0, import_utils.useUpdateEffect)(() => {
-    if (isDraggingRef.current)
-      return;
-    if (valueProp)
-      setParsedValue(convertHsva(valueProp, fallbackValue));
+    if (isDraggingRef.current) return;
+    if (valueProp) setParsedValue(convertHsva(valueProp, fallbackValue));
   }, [valueProp]);
   (0, import_utils.useUpdateEffect)(() => {
-    if (!format || !value)
-      return;
+    if (!format || !value) return;
     formatRef.current = format;
     const nextValue = (0, import_utils.convertColor)(value, fallbackValue)(format);
-    if (nextValue)
-      setValue(nextValue);
+    if (nextValue) setValue(nextValue);
   }, [format]);
   const getContainerProps = (props2 = {}, ref = null) => ({
     ...props2,
@@ -399,8 +383,7 @@ var useColorSelector = ({
       ref,
       color,
       onClick: (0, import_utils.handlerAll)(props2.onClick, () => {
-        if (!color)
-          return;
+        if (!color) return;
         onSwatchClick == null ? void 0 : onSwatchClick(color);
         onChange(color);
         onChangeEnd(color);