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

package/dist/{chunk-R4DLOKLT.mjs.map → chunk-WRHKYN3W.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-color-slider.ts"],"sourcesContent":["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  valueToPercent,\n  clampNumber,\n  useCallbackRef,\n  roundNumberToStep,\n  useUpdateEffect,\n  percentToValue,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\ntype UseColorSliderOptions = {\n  /**\n   * The base `id` to use for the 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 slider.\n   */\n  value?: number\n  /**\n   * The initial value of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   */\n  min: number\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   */\n  max: number\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * Function called whenever the slider value changes.\n   */\n  onChange?: (value: number) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: number) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: number) => void\n  /**\n   * If `false`, the 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\nexport type UseColorSliderProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"defaultValue\" | \"onChange\"\n> &\n  UseColorSliderOptions &\n  FormControlOptions\n\nexport const useColorSlider = ({\n  focusThumbOnChange = true,\n  ...props\n}: UseColorSliderProps) => {\n  if (!focusThumbOnChange) props.isReadOnly = true\n\n  let {\n    id,\n    name,\n    value: valueProp,\n    defaultValue,\n    min = 0,\n    max,\n    step = 1,\n    onChange: onChangeProp,\n    onChangeStart: onChangeStartProp,\n    onChangeEnd: onChangeEndProp,\n    thumbColor,\n    required,\n    disabled,\n    readOnly,\n    ...rest\n  } = useFormControlProps(props)\n\n  const onChangeStart = useCallbackRef(onChangeStartProp)\n  const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n  const [computedValue, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue: defaultValue ?? min + (max - min) / 2,\n    onChange: onChangeProp,\n  })\n  const value = clampNumber(computedValue, min, max)\n  const thumbPercent = valueToPercent(value, min, max)\n  const [isDragging, setDragging] = useState(false)\n  const isInteractive = !(disabled || readOnly)\n\n  const oneStep = step || (max - min) / 100\n  const tenStep = (max - min) / 10\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    min,\n    max,\n    step,\n    isInteractive,\n    eventSource: null as \"pointer\" | \"keyboard\" | null,\n    focusThumbOnChange,\n  })\n\n  const thumbSize = useSize(thumbRef)\n\n  const getValueFromPointer = useCallback(\n    (ev: any) => {\n      if (!trackRef.current) return\n\n      const { min, max, step } = latestRef.current\n\n      latestRef.current.eventSource = \"pointer\"\n\n      const { left, width } = trackRef.current.getBoundingClientRect()\n      const { clientX } = ev.touches?.[0] ?? ev\n\n      let percent = (clientX - left) / width\n\n      let nextValue = percentToValue(percent, min, max)\n\n      if (step) nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n\n      nextValue = clampNumber(nextValue, min, max)\n\n      return nextValue\n    },\n    [latestRef],\n  )\n\n  const setValueFromPointer = (ev: MouseEvent | TouchEvent | PointerEvent) => {\n    const { value } = latestRef.current\n    const nextValue = getValueFromPointer(ev)\n\n    if (nextValue != null && nextValue !== value) setValue(nextValue)\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    (value: number) => {\n      const { isInteractive, min, max } = latestRef.current\n\n      if (!isInteractive) return\n\n      value = parseFloat(roundNumberToStep(value, min, oneStep))\n      value = clampNumber(value, min, max)\n\n      setValue(value)\n    },\n    [setValue, latestRef, oneStep],\n  )\n\n  const stepUp = useCallback(\n    (step = oneStep) => constrain(value + step),\n    [constrain, value, oneStep],\n  )\n\n  const stepDown = useCallback(\n    (step = oneStep) => constrain(value - step),\n    [constrain, value, oneStep],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLElement>) => {\n      const { min, max } = latestRef.current\n\n      const actions: Record<string, KeyboardEventHandler> = {\n        ArrowRight: () => stepUp(),\n        ArrowUp: () => stepUp(),\n        ArrowLeft: () => stepDown(),\n        ArrowDown: () => stepDown(),\n        PageUp: () => stepUp(tenStep),\n        PageDown: () => stepDown(tenStep),\n        Home: () => constrain(min),\n        End: () => constrain(max),\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    [constrain, latestRef, stepDown, stepUp, tenStep],\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      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        ...rest.style,\n        paddingInline: `${w / 2}px`,\n      }\n\n      return {\n        ...props,\n        ...omitObject(rest, [\"aria-readonly\"]),\n        ref: mergeRefs(ref, containerRef),\n        tabIndex: -1,\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,\n      required,\n      disabled,\n      readOnly,\n    }),\n    [disabled, id, name, readOnly, required, rest, value],\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 n = thumbPercent\n      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        position: \"absolute\",\n        userSelect: \"none\",\n        touchAction: \"none\",\n        left: `calc(${n}% - ${w / 2}px)`,\n      }\n\n      return {\n        \"aria-label\": \"Slider thumb\",\n        bg: thumbColor ?? `hsl(${value}, 100%, 50%)`,\n        ...pickObject(rest, formControlProperties),\n        ...props,\n        ref: mergeRefs(ref, thumbRef),\n        tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n        role: \"slider\",\n        \"aria-valuenow\": value,\n        \"aria-valuemin\": min,\n        \"aria-valuemax\": max,\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      thumbColor,\n      focusThumbOnChange,\n      isDragging,\n      isInteractive,\n      min,\n      max,\n      onKeyDown,\n      rest,\n      thumbPercent,\n      thumbSize,\n      value,\n    ],\n  )\n\n  return {\n    value,\n    getContainerProps,\n    getTrackProps,\n    getInputProps,\n    getThumbProps,\n  }\n}\n\nexport type UseColorSliderReturn = ReturnType<typeof useColorSlider>\n"],"mappings":"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","names":["min","max","step","value","focusThumbOnChange","isInteractive","props"]}
+{"version":3,"sources":["../src/use-color-slider.ts"],"sourcesContent":["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  valueToPercent,\n  clampNumber,\n  useCallbackRef,\n  roundNumberToStep,\n  useUpdateEffect,\n  percentToValue,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\ntype UseColorSliderOptions = {\n  /**\n   * The base `id` to use for the 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 slider.\n   */\n  value?: number\n  /**\n   * The initial value of the slider.\n   */\n  defaultValue?: number\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   */\n  min: number\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   */\n  max: number\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * Function called whenever the slider value changes.\n   */\n  onChange?: (value: number) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: number) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: number) => void\n  /**\n   * If `false`, the 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\nexport type UseColorSliderProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"defaultValue\" | \"onChange\"\n> &\n  UseColorSliderOptions &\n  FormControlOptions\n\nexport const useColorSlider = ({\n  focusThumbOnChange = true,\n  ...props\n}: UseColorSliderProps) => {\n  if (!focusThumbOnChange) props.isReadOnly = true\n\n  let {\n    id,\n    name,\n    value: valueProp,\n    defaultValue,\n    min = 0,\n    max,\n    step = 1,\n    onChange: onChangeProp,\n    onChangeStart: onChangeStartProp,\n    onChangeEnd: onChangeEndProp,\n    thumbColor,\n    required,\n    disabled,\n    readOnly,\n    ...rest\n  } = useFormControlProps(props)\n\n  const onChangeStart = useCallbackRef(onChangeStartProp)\n  const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n  const [computedValue, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue: defaultValue ?? min + (max - min) / 2,\n    onChange: onChangeProp,\n  })\n  const value = clampNumber(computedValue, min, max)\n  const thumbPercent = valueToPercent(value, min, max)\n  const [isDragging, setDragging] = useState(false)\n  const isInteractive = !(disabled || readOnly)\n\n  const oneStep = step || (max - min) / 100\n  const tenStep = (max - min) / 10\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    min,\n    max,\n    step,\n    isInteractive,\n    eventSource: null as \"pointer\" | \"keyboard\" | null,\n    focusThumbOnChange,\n  })\n\n  const thumbSize = useSize(thumbRef)\n\n  const getValueFromPointer = useCallback(\n    (ev: any) => {\n      if (!trackRef.current) return\n\n      const { min, max, step } = latestRef.current\n\n      latestRef.current.eventSource = \"pointer\"\n\n      const { left, width } = trackRef.current.getBoundingClientRect()\n      const { clientX } = ev.touches?.[0] ?? ev\n\n      let percent = (clientX - left) / width\n\n      let nextValue = percentToValue(percent, min, max)\n\n      if (step) nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n\n      nextValue = clampNumber(nextValue, min, max)\n\n      return nextValue\n    },\n    [latestRef],\n  )\n\n  const setValueFromPointer = (ev: MouseEvent | TouchEvent | PointerEvent) => {\n    const { value } = latestRef.current\n    const nextValue = getValueFromPointer(ev)\n\n    if (nextValue != null && nextValue !== value) setValue(nextValue)\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    (value: number) => {\n      const { isInteractive, min, max } = latestRef.current\n\n      if (!isInteractive) return\n\n      value = parseFloat(roundNumberToStep(value, min, oneStep))\n      value = clampNumber(value, min, max)\n\n      setValue(value)\n    },\n    [setValue, latestRef, oneStep],\n  )\n\n  const stepUp = useCallback(\n    (step = oneStep) => constrain(value + step),\n    [constrain, value, oneStep],\n  )\n\n  const stepDown = useCallback(\n    (step = oneStep) => constrain(value - step),\n    [constrain, value, oneStep],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLElement>) => {\n      const { min, max } = latestRef.current\n\n      const actions: Record<string, KeyboardEventHandler> = {\n        ArrowRight: () => stepUp(),\n        ArrowUp: () => stepUp(),\n        ArrowLeft: () => stepDown(),\n        ArrowDown: () => stepDown(),\n        PageUp: () => stepUp(tenStep),\n        PageDown: () => stepDown(tenStep),\n        Home: () => constrain(min),\n        End: () => constrain(max),\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    [constrain, latestRef, stepDown, stepUp, tenStep],\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      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        ...rest.style,\n        paddingInline: `${w / 2}px`,\n      }\n\n      return {\n        ...props,\n        ...omitObject(rest, [\"aria-readonly\"]),\n        ref: mergeRefs(ref, containerRef),\n        tabIndex: -1,\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,\n      required,\n      disabled,\n      readOnly,\n    }),\n    [disabled, id, name, readOnly, required, rest, value],\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 n = thumbPercent\n      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        position: \"absolute\",\n        userSelect: \"none\",\n        touchAction: \"none\",\n        left: `calc(${n}% - ${w / 2}px)`,\n      }\n\n      return {\n        \"aria-label\": \"Slider thumb\",\n        bg: thumbColor ?? `hsl(${value}, 100%, 50%)`,\n        ...pickObject(rest, formControlProperties),\n        ...props,\n        ref: mergeRefs(ref, thumbRef),\n        tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n        role: \"slider\",\n        \"aria-valuenow\": value,\n        \"aria-valuemin\": min,\n        \"aria-valuemax\": max,\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      thumbColor,\n      focusThumbOnChange,\n      isDragging,\n      isInteractive,\n      min,\n      max,\n      onKeyDown,\n      rest,\n      thumbPercent,\n      thumbSize,\n      value,\n    ],\n  )\n\n  return {\n    value,\n    getContainerProps,\n    getTrackProps,\n    getInputProps,\n    getThumbProps,\n  }\n}\n\nexport type UseColorSliderReturn = ReturnType<typeof useColorSlider>\n"],"mappings":"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","names":["min","max","step","value","focusThumbOnChange","isInteractive","props"]}

package/dist/{chunk-NJEVZQVF.mjs → chunk-YPW3ZJM7.mjs}

@@ -1,13 +1,13 @@
 "use client"
 import {
   HueSlider
-} from "./chunk-DDHDVGOQ.mjs";
+} from "./chunk-7L64OYDQ.mjs";
 import {
   AlphaSlider
-} from "./chunk-LHNR2F5V.mjs";
+} from "./chunk-ZHZRZ3XZ.mjs";
 import {
   useColorSelectorContext
-} from "./chunk-5QT7SRA4.mjs";
+} from "./chunk-UZQ2UORY.mjs";
 
 // src/color-selector-sliders.tsx
 import { forwardRef, ui } from "@yamada-ui/core";
@@ -23,8 +23,7 @@ var ColorSelectorSliders = forwardRef(
     ...rest
   }, ref) => {
     let { size, withAlpha, getHueSliderProps, getAlphaSliderProps, styles } = useColorSelectorContext();
-    if (size === "full")
-      size = "lg";
+    if (size === "full") size = "lg";
     const css = {
       ...styles.sliders
     };
@@ -63,4 +62,4 @@ var ColorSelectorSliders = forwardRef(
 export {
   ColorSelectorSliders
 };
-//# sourceMappingURL=chunk-NJEVZQVF.mjs.map
+//# sourceMappingURL=chunk-YPW3ZJM7.mjs.map

package/dist/{chunk-NJEVZQVF.mjs.map → chunk-YPW3ZJM7.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/color-selector-sliders.tsx"],"sourcesContent":["import { forwardRef, ui } from \"@yamada-ui/core\"\nimport type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport type { AlphaSliderProps } from \"./alpha-slider\"\nimport { AlphaSlider } from \"./alpha-slider\"\nimport type { HueSliderProps } from \"./hue-slider\"\nimport { HueSlider } from \"./hue-slider\"\nimport { useColorSelectorContext } from \"./use-color-selector\"\n\ntype ColorSelectorSlidersOptions = {\n  /**\n   * Ref for the hue slider component.\n   */\n  hueSliderRef?: ForwardedRef<HTMLInputElement>\n  /**\n   * Props for the hue slider component.\n   */\n  hueSliderProps?: Omit<HueSliderProps, \"value\" | \"defaultValue\">\n  /**\n   * Ref for the alpha slider component.\n   */\n  alphaSliderRef?: ForwardedRef<HTMLInputElement>\n  /**\n   * Props for the alpha slider component.\n   */\n  alphaSliderProps?: Omit<AlphaSliderProps, \"value\" | \"defaultValue\">\n}\n\nexport type ColorSelectorSlidersProps = Omit<HTMLUIProps<\"div\">, \"children\"> &\n  ColorSelectorSlidersOptions\n\nexport const ColorSelectorSliders = forwardRef<\n  ColorSelectorSlidersProps,\n  \"div\"\n>(\n  (\n    {\n      className,\n      hueSliderRef,\n      hueSliderProps,\n      alphaSliderRef,\n      alphaSliderProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    let { size, withAlpha, getHueSliderProps, getAlphaSliderProps, styles } =\n      useColorSelectorContext()\n\n    if (size === \"full\") size = \"lg\"\n\n    const css: CSSUIObject = {\n      ...styles.sliders,\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-color-selector__sliders\", className)}\n        __css={css}\n        {...rest}\n      >\n        <HueSlider\n          size={size}\n          className=\"ui-color-selector__hue-slider\"\n          __css={{ ...styles.hueSlider }}\n          {...getHueSliderProps(hueSliderProps, hueSliderRef)}\n        />\n\n        {withAlpha ? (\n          <AlphaSlider\n            size={size}\n            className=\"ui-color-selector__alpha-slider\"\n            __css={{ ...styles.alphaSlider }}\n            {...getAlphaSliderProps(alphaSliderProps, alphaSliderRef)}\n          />\n        ) : null}\n      </ui.div>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,UAAU;AAE/B,SAAS,UAAU;AAuDb,SAME,KANF;AAzBC,IAAM,uBAAuB;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,EAAE,MAAM,WAAW,mBAAmB,qBAAqB,OAAO,IACpE,wBAAwB;AAE1B,QAAI,SAAS;AAAQ,aAAO;AAE5B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,QACrD,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,cAC5B,GAAG,kBAAkB,gBAAgB,YAAY;AAAA;AAAA,UACpD;AAAA,UAEC,YACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,YAAY;AAAA,cAC9B,GAAG,oBAAoB,kBAAkB,cAAc;AAAA;AAAA,UAC1D,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
+{"version":3,"sources":["../src/color-selector-sliders.tsx"],"sourcesContent":["import { forwardRef, ui } from \"@yamada-ui/core\"\nimport type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport type { AlphaSliderProps } from \"./alpha-slider\"\nimport { AlphaSlider } from \"./alpha-slider\"\nimport type { HueSliderProps } from \"./hue-slider\"\nimport { HueSlider } from \"./hue-slider\"\nimport { useColorSelectorContext } from \"./use-color-selector\"\n\ntype ColorSelectorSlidersOptions = {\n  /**\n   * Ref for the hue slider component.\n   */\n  hueSliderRef?: ForwardedRef<HTMLInputElement>\n  /**\n   * Props for the hue slider component.\n   */\n  hueSliderProps?: Omit<HueSliderProps, \"value\" | \"defaultValue\">\n  /**\n   * Ref for the alpha slider component.\n   */\n  alphaSliderRef?: ForwardedRef<HTMLInputElement>\n  /**\n   * Props for the alpha slider component.\n   */\n  alphaSliderProps?: Omit<AlphaSliderProps, \"value\" | \"defaultValue\">\n}\n\nexport type ColorSelectorSlidersProps = Omit<HTMLUIProps<\"div\">, \"children\"> &\n  ColorSelectorSlidersOptions\n\nexport const ColorSelectorSliders = forwardRef<\n  ColorSelectorSlidersProps,\n  \"div\"\n>(\n  (\n    {\n      className,\n      hueSliderRef,\n      hueSliderProps,\n      alphaSliderRef,\n      alphaSliderProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    let { size, withAlpha, getHueSliderProps, getAlphaSliderProps, styles } =\n      useColorSelectorContext()\n\n    if (size === \"full\") size = \"lg\"\n\n    const css: CSSUIObject = {\n      ...styles.sliders,\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-color-selector__sliders\", className)}\n        __css={css}\n        {...rest}\n      >\n        <HueSlider\n          size={size}\n          className=\"ui-color-selector__hue-slider\"\n          __css={{ ...styles.hueSlider }}\n          {...getHueSliderProps(hueSliderProps, hueSliderRef)}\n        />\n\n        {withAlpha ? (\n          <AlphaSlider\n            size={size}\n            className=\"ui-color-selector__alpha-slider\"\n            __css={{ ...styles.alphaSlider }}\n            {...getAlphaSliderProps(alphaSliderProps, alphaSliderRef)}\n          />\n        ) : null}\n      </ui.div>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,UAAU;AAE/B,SAAS,UAAU;AAuDb,SAME,KANF;AAzBC,IAAM,uBAAuB;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,EAAE,MAAM,WAAW,mBAAmB,qBAAqB,OAAO,IACpE,wBAAwB;AAE1B,QAAI,SAAS,OAAQ,QAAO;AAE5B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,QACrD,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,cAC5B,GAAG,kBAAkB,gBAAgB,YAAY;AAAA;AAAA,UACpD;AAAA,UAEC,YACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,YAAY;AAAA,cAC9B,GAAG,oBAAoB,kBAAkB,cAAc;AAAA;AAAA,UAC1D,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}

package/dist/{chunk-LHNR2F5V.mjs → chunk-ZHZRZ3XZ.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useColorSlider
-} from "./chunk-R4DLOKLT.mjs";
+} from "./chunk-WRHKYN3W.mjs";
 
 // src/alpha-slider.tsx
 import {
@@ -119,4 +119,4 @@ var AlphaSlider = forwardRef(
 export {
   AlphaSlider
 };
-//# sourceMappingURL=chunk-LHNR2F5V.mjs.map
+//# sourceMappingURL=chunk-ZHZRZ3XZ.mjs.map

package/dist/color-picker.js

@@ -53,21 +53,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) => {
@@ -187,8 +182,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]
   );
@@ -205,18 +199,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(
@@ -231,8 +222,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);
     },
@@ -242,8 +232,7 @@ var useColorSelector = ({
     var _a;
     try {
       const { sRGBHex } = (_a = await onOpen()) != null ? _a : {};
-      if (!sRGBHex)
-        return;
+      if (!sRGBHex) return;
       onChange(sRGBHex);
       onChangeEnd(sRGBHex);
     } catch {
@@ -251,22 +240,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,
@@ -418,8 +402,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);
@@ -507,8 +490,7 @@ var useColorSlider = ({
   focusThumbOnChange = true,
   ...props
 }) => {
-  if (!focusThumbOnChange)
-    props.isReadOnly = true;
+  if (!focusThumbOnChange) props.isReadOnly = true;
   let {
     id,
     name,
@@ -555,16 +537,14 @@ var useColorSlider = ({
   const getValueFromPointer = (0, import_react2.useCallback)(
     (ev) => {
       var _a, _b;
-      if (!trackRef.current)
-        return;
+      if (!trackRef.current) return;
       const { min: min2, max: max2, step: step2 } = latestRef.current;
       latestRef.current.eventSource = "pointer";
       const { left, width } = trackRef.current.getBoundingClientRect();
       const { clientX } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
       let percent = (clientX - left) / width;
       let nextValue = (0, import_utils3.percentToValue)(percent, min2, max2);
-      if (step2)
-        nextValue = parseFloat((0, import_utils3.roundNumberToStep)(nextValue, min2, step2));
+      if (step2) nextValue = parseFloat((0, import_utils3.roundNumberToStep)(nextValue, min2, step2));
       nextValue = (0, import_utils3.clampNumber)(nextValue, min2, max2);
       return nextValue;
     },
@@ -573,22 +553,19 @@ var useColorSlider = ({
   const setValueFromPointer = (ev) => {
     const { value: value2 } = latestRef.current;
     const nextValue = getValueFromPointer(ev);
-    if (nextValue != null && nextValue !== value2)
-      setValue(nextValue);
+    if (nextValue != null && nextValue !== value2) setValue(nextValue);
   };
   const focusThumb = (0, import_react2.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_react2.useCallback)(
     (value2) => {
       const { isInteractive: isInteractive2, min: min2, max: max2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       value2 = parseFloat((0, import_utils3.roundNumberToStep)(value2, min2, oneStep));
       value2 = (0, import_utils3.clampNumber)(value2, min2, max2);
       setValue(value2);
@@ -617,8 +594,7 @@ var useColorSlider = ({
         End: () => constrain(max2)
       };
       const action = actions[ev.key];
-      if (!action)
-        return;
+      if (!action) return;
       ev.preventDefault();
       ev.stopPropagation();
       action(ev);
@@ -629,8 +605,7 @@ var useColorSlider = ({
   (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);
@@ -638,22 +613,19 @@ var useColorSlider = ({
     },
     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_utils3.useUpdateEffect)(() => {
     const { eventSource, value: value2 } = latestRef.current;
-    if (eventSource === "keyboard")
-      onChangeEnd(value2);
+    if (eventSource === "keyboard") onChangeEnd(value2);
   }, [value, onChangeEnd]);
   const getContainerProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => {
@@ -949,8 +921,7 @@ var ColorSelectorSliders = (0, import_core4.forwardRef)(
     ...rest
   }, ref) => {
     let { size, withAlpha, getHueSliderProps, getAlphaSliderProps, styles } = useColorSelectorContext();
-    if (size === "full")
-      size = "lg";
+    if (size === "full") size = "lg";
     const css = {
       ...styles.sliders
     };
@@ -1146,8 +1117,7 @@ var ColorSelectorChannels = (0, import_core7.forwardRef)(({ className, channelPr
 var ColorSelectorChannel = (0, import_core7.forwardRef)(({ className, channelLabel, ...rest }, ref) => {
   const id = (0, import_react3.useId)();
   let { size, disabled, readOnly, styles } = useColorSelectorContext();
-  if (size === "full")
-    size = "lg";
+  if (size === "full") size = "lg";
   const css = { ...styles.channel };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.ui.div, { className: (0, import_utils9.cx)("ui-color-selector__channel", className), children: [
     channelLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1254,8 +1224,7 @@ var useSaturationSlider = ({
   focusThumbOnChange = true,
   ...props
 }) => {
-  if (!focusThumbOnChange)
-    props.isReadOnly = true;
+  if (!focusThumbOnChange) props.isReadOnly = true;
   let {
     id,
     name,
@@ -1303,8 +1272,7 @@ var useSaturationSlider = ({
   const getValueFromPointer = (0, import_react4.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();
@@ -1322,25 +1290,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_react4.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_react4.useCallback)(
     ([s2, v2]) => {
       const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       s2 = (0, import_utils11.clampNumber)(s2, 0, 1);
       v2 = (0, import_utils11.clampNumber)(v2, 0, 1);
       setValue(([h2]) => [h2, s2, v2]);
@@ -1356,8 +1320,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);
@@ -1368,8 +1331,7 @@ var useSaturationSlider = ({
   (0, import_use_pan_event2.usePanEvent)(containerRef, {
     onSessionStart: (ev) => {
       const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setDragging(true);
       focusThumb();
       setValueFromPointer(ev);
@@ -1377,22 +1339,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_utils11.useUpdateEffect)(() => {
     const { eventSource, value: value2 } = latestRef.current;
-    if (eventSource === "keyboard")
-      onChangeEnd(value2);
+    if (eventSource === "keyboard") onChangeEnd(value2);
   }, [value, onChangeEnd]);
   const getContainerProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => ({
@@ -1783,13 +1742,11 @@ var useColorPicker = ({
   });
   const isColorSelectorFull = colorSelectorSize === "full";
   const onOpen = (0, import_react5.useCallback)(() => {
-    if (disabled || readOnly)
-      return;
+    if (disabled || readOnly) return;
     onInternalOpen();
   }, [onInternalOpen, disabled, readOnly]);
   const onClose = (0, import_react5.useCallback)(() => {
-    if (!isOpen)
-      return;
+    if (!isOpen) return;
     const next = (0, import_utils14.convertColor)(value, fallbackValue)(formatRef.current);
     setValue((prev) => !next || prev === next ? prev : next);
     setInputValue(formatInput(next != null ? next : ""));
@@ -1805,14 +1762,12 @@ var useColorPicker = ({
     fallbackValue
   ]);
   const onContainerClick = (0, import_react5.useCallback)(() => {
-    if (isOpen)
-      return;
+    if (isOpen) return;
     onOpen();
   }, [isOpen, onOpen]);
   const onInputFocus = (0, import_react5.useCallback)(() => {
     isInputFocused.current = true;
-    if (isOpen)
-      return;
+    if (isOpen) return;
     onOpen();
   }, [isOpen, onOpen]);
   const onInputBlur = (0, import_react5.useCallback)(() => {
@@ -1821,29 +1776,23 @@ var useColorPicker = ({
   const onContainerBlur = (0, import_react5.useCallback)(
     (ev) => {
       const relatedTarget = (0, import_utils14.getEventRelatedTarget)(ev);
-      if ((0, import_utils14.isContains)(containerRef.current, relatedTarget))
-        return;
-      if (!closeOnBlur)
-        return;
-      if (isOpen)
-        onClose();
+      if ((0, import_utils14.isContains)(containerRef.current, relatedTarget)) return;
+      if (!closeOnBlur) return;
+      if (isOpen) onClose();
     },
     [closeOnBlur, isOpen, onClose]
   );
   const onInputKeyDown = (0, import_react5.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();
@@ -1862,8 +1811,7 @@ var useColorPicker = ({
     (value2) => {
       setValue(value2);
       setTimeout(() => {
-        if (!isInputFocused.current)
-          setInputValue(formatInput(value2));
+        if (!isInputFocused.current) setInputValue(formatInput(value2));
       });
     },
     [setValue, formatInput]
@@ -1875,8 +1823,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 {
@@ -1890,18 +1837,15 @@ var useColorPicker = ({
     enabled: isOpen && closeOnBlur
   });
   (0, import_utils14.useUpdateEffect)(() => {
-    if (!format || !value)
-      return;
+    if (!format || !value) return;
     formatRef.current = format;
     const nextValue = (0, import_utils14.convertColor)(value, fallbackValue)(format);
-    if (!nextValue)
-      return;
+    if (!nextValue) return;
     setInputValue(formatInput(nextValue));
     setValue(nextValue);
   }, [format]);
   (0, import_utils14.useUpdateEffect)(() => {
-    if (isInputFocused.current || !valueProp)
-      return;
+    if (isInputFocused.current || !valueProp) return;
     setInputValue(formatInput(valueProp));
   }, [valueProp]);
   const getPopoverProps = (0, import_react5.useCallback)(