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

package/dist/hue-slider.js

@@ -39,8 +39,7 @@ var useColorSlider = ({
   focusThumbOnChange = true,
   ...props
 }) => {
-  if (!focusThumbOnChange)
-    props.isReadOnly = true;
+  if (!focusThumbOnChange) props.isReadOnly = true;
   let {
     id,
     name,
@@ -87,16 +86,14 @@ var useColorSlider = ({
   const getValueFromPointer = (0, import_react.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_utils.percentToValue)(percent, min2, max2);
-      if (step2)
-        nextValue = parseFloat((0, import_utils.roundNumberToStep)(nextValue, min2, step2));
+      if (step2) nextValue = parseFloat((0, import_utils.roundNumberToStep)(nextValue, min2, step2));
       nextValue = (0, import_utils.clampNumber)(nextValue, min2, max2);
       return nextValue;
     },
@@ -105,22 +102,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_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)(
     (value2) => {
       const { isInteractive: isInteractive2, min: min2, max: max2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       value2 = parseFloat((0, import_utils.roundNumberToStep)(value2, min2, oneStep));
       value2 = (0, import_utils.clampNumber)(value2, min2, max2);
       setValue(value2);
@@ -149,8 +143,7 @@ var useColorSlider = ({
         End: () => constrain(max2)
       };
       const action = actions[ev.key];
-      if (!action)
-        return;
+      if (!action) return;
       ev.preventDefault();
       ev.stopPropagation();
       action(ev);
@@ -161,8 +154,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);
@@ -170,22 +162,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_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/hue-slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hue-slider.tsx","../src/use-color-slider.ts"],"sourcesContent":["import {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseColorSliderProps } from \"./use-color-slider\"\nimport { useColorSlider } from \"./use-color-slider\"\n\nconst defaultOverlays = (\n  min: number,\n  max: number,\n  withShadow: boolean,\n): HTMLUIProps<\"div\">[] => {\n  let overlays: HTMLUIProps<\"div\">[] = [\n    {\n      bgGradient: `linear(to-r, ${[...Array(7)]\n        .map(\n          (_, index) =>\n            `hsl(${Math.round(min + ((max - min) / 6) * index)}, 100%, 50%)`,\n        )\n        .join(\", \")})`,\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 HueSliderOptions = {\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   *\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   *\n   * @default 360\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   * If `true`, the slider has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n  /**\n   * Props for slider input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for slider track element.\n   */\n  trackProps?: HTMLUIProps<\"div\">\n  /**\n   * Props for slider thumb element.\n   */\n  thumbProps?: HTMLUIProps<\"div\">\n  /**\n   * The overlay used for the slider.\n   */\n  overlays?: HTMLUIProps<\"div\">[]\n}\n\n/**\n * `HueSlider` is a component used to allow the user to select a color hue.\n *\n * @see Docs https://yamada-ui.com/components/forms/hue-slider\n */\nexport type HueSliderProps = ThemeProps<\"HueSlider\"> &\n  Partial<UseColorSliderProps> &\n  HueSliderOptions\n\nexport const HueSlider = forwardRef<HueSliderProps, \"input\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"HueSlider\", props)\n  const {\n    className,\n    inputProps,\n    trackProps,\n    thumbProps,\n    min = 0,\n    max = 360,\n    withShadow = true,\n    overlays = defaultOverlays(min, max, withShadow),\n    __css,\n    ...computedProps\n  } = omitThemeProps(mergedProps)\n  const { getContainerProps, getTrackProps, getInputProps, getThumbProps } =\n    useColorSlider({ min, max, step: 1, ...computedProps })\n\n  const css: CSSUIObject = {\n    ...styles.container,\n    ...__css,\n  }\n\n  return (\n    <ui.div\n      className={cx(\"ui-hue-slider\", className)}\n      __css={css}\n      {...getContainerProps()}\n    >\n      <ui.input {...getInputProps(inputProps, ref)} />\n\n      {overlays.map((props, index) => (\n        <ui.div\n          key={index}\n          className=\"ui-hue-slider__overlay\"\n          __css={{\n            ...styles.overlay,\n          }}\n          {...props}\n        />\n      ))}\n\n      <ui.div\n        className=\"ui-hue-slider__track\"\n        __css={{ ...styles.track }}\n        {...getTrackProps(trackProps)}\n      >\n        <ui.div\n          className=\"ui-hue-slider__thumb\"\n          __css={{ ...styles.thumb }}\n          {...getThumbProps(thumbProps)}\n        />\n      </ui.div>\n    </ui.div>\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  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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO;AAEP,IAAAA,gBAAmB;;;ACNnB,0BAKO;AACP,oCAAqC;AACrC,4BAA6B;AAC7B,2BAA4B;AAC5B,sBAAwB;AACxB,mBAYO;AAEP,mBAA8C;AAiEvC,IAAM,iBAAiB,CAAC;AAAA,EAC7B,qBAAqB;AAAA,EACrB,GAAG;AACL,MAA2B;AACzB,MAAI,CAAC;AAAoB,UAAM,aAAa;AAE5C,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,eAAe;AAAA,IACf,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,yCAAoB,KAAK;AAE7B,QAAM,oBAAgB,6BAAe,iBAAiB;AACtD,QAAM,kBAAc,6BAAe,eAAe;AAElD,QAAM,CAAC,eAAe,QAAQ,QAAI,oDAAqB;AAAA,IACrD,OAAO;AAAA,IACP,cAAc,sCAAgB,OAAO,MAAM,OAAO;AAAA,IAClD,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,YAAQ,0BAAY,eAAe,KAAK,GAAG;AACjD,QAAM,mBAAe,6BAAe,OAAO,KAAK,GAAG;AACnD,QAAM,CAAC,YAAY,WAAW,QAAI,uBAAS,KAAK;AAChD,QAAM,gBAAgB,EAAE,YAAY;AAEpC,QAAM,UAAU,SAAS,MAAM,OAAO;AACtC,QAAM,WAAW,MAAM,OAAO;AAE9B,QAAM,mBAAe,qBAAoB,IAAI;AAC7C,QAAM,eAAW,qBAAoB,IAAI;AACzC,QAAM,eAAW,qBAAoB,IAAI;AACzC,QAAM,gBAAY,oCAAa;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,EACF,CAAC;AAED,QAAM,gBAAY,yBAAQ,QAAQ;AAElC,QAAM,0BAAsB;AAAA,IAC1B,CAAC,OAAY;AAlJjB;AAmJM,UAAI,CAAC,SAAS;AAAS;AAEvB,YAAM,EAAE,KAAAC,MAAK,KAAAC,MAAK,MAAAC,MAAK,IAAI,UAAU;AAErC,gBAAU,QAAQ,cAAc;AAEhC,YAAM,EAAE,MAAM,MAAM,IAAI,SAAS,QAAQ,sBAAsB;AAC/D,YAAM,EAAE,QAAQ,KAAI,cAAG,YAAH,mBAAa,OAAb,YAAmB;AAEvC,UAAI,WAAW,UAAU,QAAQ;AAEjC,UAAI,gBAAY,6BAAe,SAASF,MAAKC,IAAG;AAEhD,UAAIC;AAAM,oBAAY,eAAW,gCAAkB,WAAWF,MAAKE,KAAI,CAAC;AAExE,sBAAY,0BAAY,WAAWF,MAAKC,IAAG;AAE3C,aAAO;AAAA,IACT;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,sBAAsB,CAAC,OAA+C;AAC1E,UAAM,EAAE,OAAAE,OAAM,IAAI,UAAU;AAC5B,UAAM,YAAY,oBAAoB,EAAE;AAExC,QAAI,aAAa,QAAQ,cAAcA;AAAO,eAAS,SAAS;AAAA,EAClE;AAEA,QAAM,iBAAa,0BAAY,MAAM;AACnC,UAAM,EAAE,oBAAAC,oBAAmB,IAAI,UAAU;AAEzC,QAAIA;AAAoB,iBAAW,MAAG;AAnL1C;AAmL6C,8BAAS,YAAT,mBAAkB;AAAA,OAAO;AAAA,EACpE,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,gBAAY;AAAA,IAChB,CAACD,WAAkB;AACjB,YAAM,EAAE,eAAAE,gBAAe,KAAAL,MAAK,KAAAC,KAAI,IAAI,UAAU;AAE9C,UAAI,CAACI;AAAe;AAEpB,MAAAF,SAAQ,eAAW,gCAAkBA,QAAOH,MAAK,OAAO,CAAC;AACzD,MAAAG,aAAQ,0BAAYA,QAAOH,MAAKC,IAAG;AAEnC,eAASE,MAAK;AAAA,IAChB;AAAA,IACA,CAAC,UAAU,WAAW,OAAO;AAAA,EAC/B;AAEA,QAAM,aAAS;AAAA,IACb,CAACD,QAAO,YAAY,UAAU,QAAQA,KAAI;AAAA,IAC1C,CAAC,WAAW,OAAO,OAAO;AAAA,EAC5B;AAEA,QAAM,eAAW;AAAA,IACf,CAACA,QAAO,YAAY,UAAU,QAAQA,KAAI;AAAA,IAC1C,CAAC,WAAW,OAAO,OAAO;AAAA,EAC5B;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,OAAmC;AAClC,YAAM,EAAE,KAAAF,MAAK,KAAAC,KAAI,IAAI,UAAU;AAE/B,YAAM,UAAgD;AAAA,QACpD,YAAY,MAAM,OAAO;AAAA,QACzB,SAAS,MAAM,OAAO;AAAA,QACtB,WAAW,MAAM,SAAS;AAAA,QAC1B,WAAW,MAAM,SAAS;AAAA,QAC1B,QAAQ,MAAM,OAAO,OAAO;AAAA,QAC5B,UAAU,MAAM,SAAS,OAAO;AAAA,QAChC,MAAM,MAAM,UAAUD,IAAG;AAAA,QACzB,KAAK,MAAM,UAAUC,IAAG;AAAA,MAC1B;AAEA,YAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,UAAI,CAAC;AAAQ;AAEb,SAAG,eAAe;AAClB,SAAG,gBAAgB;AAEnB,aAAO,EAAE;AAET,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,IACA,CAAC,WAAW,WAAW,UAAU,QAAQ,OAAO;AAAA,EAClD;AAEA,wCAAY,cAAc;AAAA,IACxB,gBAAgB,CAAC,OAAO;AACtB,YAAM,EAAE,eAAAI,gBAAe,OAAAF,OAAM,IAAI,UAAU;AAE3C,UAAI,CAACE;AAAe;AAEpB,kBAAY,IAAI;AAChB,iBAAW;AACX,0BAAoB,EAAE;AACtB,oBAAcF,MAAK;AAAA,IACrB;AAAA,IACA,cAAc,MAAM;AAClB,YAAM,EAAE,eAAAE,gBAAe,OAAAF,OAAM,IAAI,UAAU;AAE3C,UAAI,CAACE;AAAe;AAEpB,kBAAY,KAAK;AACjB,kBAAYF,MAAK;AAAA,IACnB;AAAA,IACA,QAAQ,CAAC,OAAO;AACd,YAAM,EAAE,eAAAE,eAAc,IAAI,UAAU;AAEpC,UAAI,CAACA;AAAe;AAEpB,0BAAoB,EAAE;AAAA,IACxB;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,UAAM,EAAE,aAAa,OAAAF,OAAM,IAAI,UAAU;AAEzC,QAAI,gBAAgB;AAAY,kBAAYA,MAAK;AAAA,EACnD,GAAG,CAAC,OAAO,WAAW,CAAC;AAEvB,QAAM,wBAAkC;AAAA,IACtC,CAACG,SAAQ,CAAC,GAAG,MAAM,SAAS;AAC1B,YAAM,EAAE,OAAO,EAAE,IAAI,gCAAa,EAAE,OAAO,EAAE;AAE7C,YAAM,QAAuB;AAAA,QAC3B,GAAGA,OAAM;AAAA,QACT,GAAG,KAAK;AAAA,QACR,eAAe,GAAG,IAAI,CAAC;AAAA,MACzB;AAEA,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,OAAG,yBAAW,MAAM,CAAC,eAAe,CAAC;AAAA,QACrC,SAAK,wBAAU,KAAK,YAAY;AAAA,QAChC,UAAU;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS;AAAA,EAClB;AAEA,QAAM,oBAAuC;AAAA,IAC3C,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,OAAG,yBAAW,MAAM,yCAAqB;AAAA,MACzC,GAAGA;AAAA,MACH;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,IAAI,MAAM,UAAU,UAAU,MAAM,KAAK;AAAA,EACtD;AAEA,QAAM,oBAA8B;AAAA,IAClC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,OAAG;AAAA,QACD;AAAA,YACA,8CAAyB,EAAE,MAAM,CAAC,eAAe,EAAE,CAAC;AAAA,MACtD;AAAA,MACA,GAAGA;AAAA,MACH,SAAK,wBAAU,KAAK,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAA8B;AAAA,IAClC,CAACA,SAAQ,CAAC,GAAG,MAAM,SAAS;AAC1B,YAAM,IAAI;AACV,YAAM,EAAE,OAAO,EAAE,IAAI,gCAAa,EAAE,OAAO,EAAE;AAE7C,YAAM,QAAuB;AAAA,QAC3B,GAAGA,OAAM;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,MAAM,QAAQ,CAAC,OAAO,IAAI,CAAC;AAAA,MAC7B;AAEA,aAAO;AAAA,QACL,cAAc;AAAA,QACd,IAAI,kCAAc,OAAO,KAAK;AAAA,QAC9B,OAAG,yBAAW,MAAM,yCAAqB;AAAA,QACzC,GAAGA;AAAA,QACH,SAAK,wBAAU,KAAK,QAAQ;AAAA,QAC5B,UAAU,iBAAiB,qBAAqB,IAAI;AAAA,QACpD,MAAM;AAAA,QACN,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,mBAAe,uBAAS,cAAc,kBAAkB;AAAA,QACxD,eAAW,yBAAWA,OAAM,WAAW,SAAS;AAAA,QAChD,aAAS,yBAAWA,OAAM,SAAS,KAAK,OAAO;AAAA,QAC/C,YAAQ,yBAAWA,OAAM,QAAQ,KAAK,MAAM;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ADlQI;AAtGJ,IAAM,kBAAkB,CACtB,KACA,KACA,eACyB;AACzB,MAAI,WAAiC;AAAA,IACnC;AAAA,MACE,YAAY,gBAAgB,CAAC,GAAG,MAAM,CAAC,CAAC,EACrC;AAAA,QACC,CAAC,GAAG,UACF,OAAO,KAAK,MAAM,OAAQ,MAAM,OAAO,IAAK,KAAK,CAAC;AAAA,MACtD,EACC,KAAK,IAAI,CAAC;AAAA,IACf;AAAA,EACF;AAEA,MAAI;AACF,eAAW;AAAA,MACT,GAAG;AAAA,MACH;AAAA,QACE,WAAW;AAAA,MACb;AAAA,IACF;AAEF,SAAO;AACT;AAsDO,IAAM,gBAAY,wBAAoC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,aAAa,KAAK;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW,gBAAgB,KAAK,KAAK,UAAU;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,QAAM,EAAE,mBAAmB,eAAe,eAAe,cAAc,IACrE,eAAe,EAAE,KAAK,KAAK,MAAM,GAAG,GAAG,cAAc,CAAC;AAExD,QAAM,MAAmB;AAAA,IACvB,GAAG,OAAO;AAAA,IACV,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC,eAAW,kBAAG,iBAAiB,SAAS;AAAA,MACxC,OAAO;AAAA,MACN,GAAG,kBAAkB;AAAA,MAEtB;AAAA,oDAAC,eAAG,OAAH,EAAU,GAAG,cAAc,YAAY,GAAG,GAAG;AAAA,QAE7C,SAAS,IAAI,CAACC,QAAO,UACpB;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,GAAG,OAAO;AAAA,YACZ;AAAA,YACC,GAAGA;AAAA;AAAA,UALC;AAAA,QAMP,CACD;AAAA,QAED;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,YACxB,GAAG,cAAc,UAAU;AAAA,YAE5B;AAAA,cAAC,eAAG;AAAA,cAAH;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,gBACxB,GAAG,cAAc,UAAU;AAAA;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["import_utils","min","max","step","value","focusThumbOnChange","isInteractive","props","props"]}
+{"version":3,"sources":["../src/hue-slider.tsx","../src/use-color-slider.ts"],"sourcesContent":["import {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseColorSliderProps } from \"./use-color-slider\"\nimport { useColorSlider } from \"./use-color-slider\"\n\nconst defaultOverlays = (\n  min: number,\n  max: number,\n  withShadow: boolean,\n): HTMLUIProps<\"div\">[] => {\n  let overlays: HTMLUIProps<\"div\">[] = [\n    {\n      bgGradient: `linear(to-r, ${[...Array(7)]\n        .map(\n          (_, index) =>\n            `hsl(${Math.round(min + ((max - min) / 6) * index)}, 100%, 50%)`,\n        )\n        .join(\", \")})`,\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 HueSliderOptions = {\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   *\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   *\n   * @default 360\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   * If `true`, the slider has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n  /**\n   * Props for slider input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for slider track element.\n   */\n  trackProps?: HTMLUIProps<\"div\">\n  /**\n   * Props for slider thumb element.\n   */\n  thumbProps?: HTMLUIProps<\"div\">\n  /**\n   * The overlay used for the slider.\n   */\n  overlays?: HTMLUIProps<\"div\">[]\n}\n\n/**\n * `HueSlider` is a component used to allow the user to select a color hue.\n *\n * @see Docs https://yamada-ui.com/components/forms/hue-slider\n */\nexport type HueSliderProps = ThemeProps<\"HueSlider\"> &\n  Partial<UseColorSliderProps> &\n  HueSliderOptions\n\nexport const HueSlider = forwardRef<HueSliderProps, \"input\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"HueSlider\", props)\n  const {\n    className,\n    inputProps,\n    trackProps,\n    thumbProps,\n    min = 0,\n    max = 360,\n    withShadow = true,\n    overlays = defaultOverlays(min, max, withShadow),\n    __css,\n    ...computedProps\n  } = omitThemeProps(mergedProps)\n  const { getContainerProps, getTrackProps, getInputProps, getThumbProps } =\n    useColorSlider({ min, max, step: 1, ...computedProps })\n\n  const css: CSSUIObject = {\n    ...styles.container,\n    ...__css,\n  }\n\n  return (\n    <ui.div\n      className={cx(\"ui-hue-slider\", className)}\n      __css={css}\n      {...getContainerProps()}\n    >\n      <ui.input {...getInputProps(inputProps, ref)} />\n\n      {overlays.map((props, index) => (\n        <ui.div\n          key={index}\n          className=\"ui-hue-slider__overlay\"\n          __css={{\n            ...styles.overlay,\n          }}\n          {...props}\n        />\n      ))}\n\n      <ui.div\n        className=\"ui-hue-slider__track\"\n        __css={{ ...styles.track }}\n        {...getTrackProps(trackProps)}\n      >\n        <ui.div\n          className=\"ui-hue-slider__thumb\"\n          __css={{ ...styles.thumb }}\n          {...getThumbProps(thumbProps)}\n        />\n      </ui.div>\n    </ui.div>\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  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":["import_utils","min","max","step","value","focusThumbOnChange","isInteractive","props","props"]}

package/dist/hue-slider.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   HueSlider
-} from "./chunk-DDHDVGOQ.mjs";
-import "./chunk-R4DLOKLT.mjs";
+} from "./chunk-7L64OYDQ.mjs";
+import "./chunk-WRHKYN3W.mjs";
 export {
   HueSlider
 };

package/dist/index.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) => ({
@@ -1790,13 +1749,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 : ""));
@@ -1812,14 +1769,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)(() => {
@@ -1828,29 +1783,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();
@@ -1869,8 +1818,7 @@ var useColorPicker = ({
     (value2) => {
       setValue(value2);
       setTimeout(() => {
-        if (!isInputFocused.current)
-          setInputValue(formatInput(value2));
+        if (!isInputFocused.current) setInputValue(formatInput(value2));
       });
     },
     [setValue, formatInput]
@@ -1882,8 +1830,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 {
@@ -1897,18 +1844,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)(