@yamada-ui/color-picker 1.4.8-dev-20241105102243 → 1.4.9-dev-20241109080944

package/dist/index.mjs

@@ -1,26 +1,26 @@
 "use client"
 import {
   ColorPicker
-} from "./chunk-APTJWP7T.mjs";
+} from "./chunk-OJVCLBAG.mjs";
 import "./chunk-MEG43CIO.mjs";
 import {
   ColorSelector
-} from "./chunk-CZCTI6T2.mjs";
+} from "./chunk-HJMXAALX.mjs";
 import {
   SaturationSlider
 } from "./chunk-YU3KOEL7.mjs";
 import "./chunk-XCHWCHHP.mjs";
-import "./chunk-CAVDEKGO.mjs";
+import "./chunk-LJHUX2RB.mjs";
 import "./chunk-YPPP72VM.mjs";
 import "./chunk-DJST5TK2.mjs";
-import "./chunk-62A7F566.mjs";
+import "./chunk-HPP26MVU.mjs";
 import {
   HueSlider
-} from "./chunk-7NWT5PKE.mjs";
+} from "./chunk-WZEWATJ3.mjs";
 import {
   AlphaSlider
-} from "./chunk-XL5VWGU4.mjs";
-import "./chunk-F5EYME2W.mjs";
+} from "./chunk-FP3X3PED.mjs";
+import "./chunk-SGAM4TJL.mjs";
 import "./chunk-JRSGQRFQ.mjs";
 import {
   ColorSwatch

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

@@ -1,6 +1,7 @@
 import { HTMLUIProps, PropGetter, CSSUIProps } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
 
+type ColorSliderChannel = "alpha" | "hue";
 interface UseColorSliderOptions {
     /**
      * The maximum allowed value of the slider. Cannot be less than min.
@@ -19,6 +20,10 @@ interface UseColorSliderOptions {
      * This is particularly useful in forms.
      */
     name?: string;
+    /**
+     * The channel of the slider.
+     */
+    channel?: ColorSliderChannel;
     /**
      * The initial value of the slider.
      */
@@ -66,5 +71,6 @@ declare const useColorSlider: ({ focusThumbOnChange, ...props }: UseColorSliderP
     getTrackProps: PropGetter<"div", undefined>;
 };
 type UseColorSliderReturn = ReturnType<typeof useColorSlider>;
+declare const getAriaValueText: (channel: ColorSliderChannel, value: number) => string;
 
-export { type UseColorSliderProps, type UseColorSliderReturn, useColorSlider };
+export { type UseColorSliderProps, type UseColorSliderReturn, getAriaValueText, useColorSlider };

package/dist/use-color-slider.d.ts

@@ -1,6 +1,7 @@
 import { HTMLUIProps, PropGetter, CSSUIProps } from '@yamada-ui/core';
 import { FormControlOptions } from '@yamada-ui/form-control';
 
+type ColorSliderChannel = "alpha" | "hue";
 interface UseColorSliderOptions {
     /**
      * The maximum allowed value of the slider. Cannot be less than min.
@@ -19,6 +20,10 @@ interface UseColorSliderOptions {
      * This is particularly useful in forms.
      */
     name?: string;
+    /**
+     * The channel of the slider.
+     */
+    channel?: ColorSliderChannel;
     /**
      * The initial value of the slider.
      */
@@ -66,5 +71,6 @@ declare const useColorSlider: ({ focusThumbOnChange, ...props }: UseColorSliderP
     getTrackProps: PropGetter<"div", undefined>;
 };
 type UseColorSliderReturn = ReturnType<typeof useColorSlider>;
+declare const getAriaValueText: (channel: ColorSliderChannel, value: number) => string;
 
-export { type UseColorSliderProps, type UseColorSliderReturn, useColorSlider };
+export { type UseColorSliderProps, type UseColorSliderReturn, getAriaValueText, useColorSlider };

package/dist/use-color-slider.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/use-color-slider.ts
 var use_color_slider_exports = {};
 __export(use_color_slider_exports, {
+  getAriaValueText: () => getAriaValueText,
   useColorSlider: () => useColorSlider
 });
 module.exports = __toCommonJS(use_color_slider_exports);
@@ -40,6 +41,7 @@ var useColorSlider = ({
     id,
     name,
     style: styleProp,
+    channel = "hue",
     defaultValue,
     max,
     min = 0,
@@ -256,6 +258,7 @@ var useColorSlider = ({
         "aria-valuemax": max,
         "aria-valuemin": min,
         "aria-valuenow": value,
+        "aria-valuetext": getAriaValueText(channel, value),
         "data-active": (0, import_utils.dataAttr)(isDragging && focusThumbOnChange),
         role: "slider",
         tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
@@ -271,14 +274,15 @@ var useColorSlider = ({
       value,
       formControlProps,
       ariaReadonly,
-      isInteractive,
-      focusThumbOnChange,
-      min,
       max,
+      min,
+      channel,
       isDragging,
-      onKeyDown,
+      focusThumbOnChange,
+      isInteractive,
+      onBlurProp,
       onFocusProp,
-      onBlurProp
+      onKeyDown
     ]
   );
   return {
@@ -289,8 +293,24 @@ var useColorSlider = ({
     getTrackProps
   };
 };
+var getAriaValueText = (channel, value) => {
+  if (channel === "hue") {
+    return `${value}\xB0, ${getColorName(value)}`;
+  } else {
+    return `${value * 100}%`;
+  }
+};
+var getColorName = (hue) => {
+  if (hue < 30 || hue >= 330) return "Red";
+  if (hue < 90) return "Yellow";
+  if (hue < 150) return "Green";
+  if (hue < 210) return "Cyan";
+  if (hue < 270) return "Blue";
+  return "Magenta";
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getAriaValueText,
   useColorSlider
 });
 //# sourceMappingURL=use-color-slider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-color-slider.ts"],"sourcesContent":["import type { CSSUIProps, HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { CSSProperties, KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport {\n  formControlProperties,\n  useFormControlProps,\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  clampNumber,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  percentToValue,\n  roundNumberToStep,\n  splitObject,\n  useCallbackRef,\n  useUpdateEffect,\n  valueToPercent,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useRef, useState } from \"react\"\n\ninterface UseColorSliderOptions {\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   */\n  max: number\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   */\n  min: number\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 initial value of the slider.\n   */\n  defaultValue?: number\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 step in which increments or decrements have to be made.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * The CSS `background` property. Used in `background` of thumb element.\n   */\n  thumbColor?: CSSUIProps[\"bg\"]\n  /**\n   * The value of the slider.\n   */\n  value?: number\n  /**\n   * Function called whenever the slider value changes.\n   */\n  onChange?: (value: number) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: number) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: number) => void\n}\n\nexport interface UseColorSliderProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\">,\n    UseColorSliderOptions,\n    FormControlOptions {}\n\nexport const useColorSlider = ({\n  focusThumbOnChange = true,\n  ...props\n}: UseColorSliderProps) => {\n  if (!focusThumbOnChange) props.isReadOnly = true\n\n  const {\n    id,\n    name,\n    style: styleProp,\n    defaultValue,\n    max,\n    min = 0,\n    step = 1,\n    thumbColor,\n    value: valueProp,\n    onChange: onChangeProp,\n    onChangeEnd: onChangeEndProp,\n    onChangeStart: onChangeStartProp,\n    ...rest\n  } = useFormControlProps(props)\n  const [\n    {\n      \"aria-readonly\": ariaReadonly,\n      disabled,\n      readOnly,\n      required,\n      onBlur: onBlurProp,\n      onFocus: onFocusProp,\n      ...formControlProps\n    },\n    containerProps,\n  ] = splitObject(rest, formControlProperties)\n\n  const onChangeStart = useCallbackRef(onChangeStartProp)\n  const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n  const [computedValue, setValue] = useControllableState({\n    defaultValue: defaultValue ?? min + (max - min) / 2,\n    value: valueProp,\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    eventSource: null as \"keyboard\" | \"pointer\" | null,\n    focusThumbOnChange,\n    isInteractive,\n    max,\n    min,\n    step,\n    value,\n  })\n\n  const thumbSize = useSize(thumbRef)\n\n  const getValueFromPointer = useCallback(\n    (ev: any) => {\n      if (!trackRef.current) return\n\n      const { max, min, 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 | PointerEvent | TouchEvent) => {\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, max, min } = 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 { max, min } = latestRef.current\n\n      const actions: { [key: string]: KeyboardEventHandler } = {\n        ArrowDown: () => stepDown(),\n        ArrowLeft: () => stepDown(),\n        ArrowRight: () => stepUp(),\n        ArrowUp: () => stepUp(),\n        End: () => constrain(max),\n        Home: () => constrain(min),\n        PageDown: () => stepDown(tenStep),\n        PageUp: () => stepUp(tenStep),\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    onMove: (ev) => {\n      const { isInteractive } = latestRef.current\n\n      if (!isInteractive) return\n\n      setValueFromPointer(ev)\n    },\n    onSessionEnd: () => {\n      const { isInteractive, value } = latestRef.current\n\n      if (!isInteractive) return\n\n      setDragging(false)\n      onChangeEnd(value)\n    },\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  })\n\n  useUpdateEffect(() => {\n    const { eventSource, value } = latestRef.current\n\n    if (eventSource === \"keyboard\") onChangeEnd(value)\n  }, [value, onChangeEnd])\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        ...styleProp,\n        paddingInline: `${w / 2}px`,\n      }\n\n      return {\n        ...props,\n        ...formControlProps,\n        ...containerProps,\n        ref: mergeRefs(ref, containerRef),\n        style,\n        tabIndex: -1,\n      }\n    },\n    [containerProps, formControlProps, styleProp, thumbSize],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      \"aria-readonly\": ariaReadonly,\n      ...props,\n      id,\n      ref,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value,\n    }),\n    [\n      ariaReadonly,\n      disabled,\n      formControlProps,\n      id,\n      name,\n      readOnly,\n      required,\n      value,\n    ],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, trackRef),\n    }),\n    [formControlProps],\n  )\n\n  const getThumbProps: PropGetter = 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        left: `calc(${n}% - ${w / 2}px)`,\n        position: \"absolute\",\n        touchAction: \"none\",\n        userSelect: \"none\",\n      }\n\n      return {\n        \"aria-label\": \"Slider thumb\",\n        bg: thumbColor ?? `hsl(${value}, 100%, 50%)`,\n        ...formControlProps,\n        \"aria-readonly\": ariaReadonly,\n        ...props,\n        ref: mergeRefs(ref, thumbRef),\n        style,\n        \"aria-valuemax\": max,\n        \"aria-valuemin\": min,\n        \"aria-valuenow\": value,\n        \"data-active\": dataAttr(isDragging && focusThumbOnChange),\n        role: \"slider\",\n        tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n        onBlur: handlerAll(props.onBlur, onBlurProp),\n        onFocus: handlerAll(props.onFocus, onFocusProp),\n        onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      }\n    },\n    [\n      thumbPercent,\n      thumbSize,\n      thumbColor,\n      value,\n      formControlProps,\n      ariaReadonly,\n      isInteractive,\n      focusThumbOnChange,\n      min,\n      max,\n      isDragging,\n      onKeyDown,\n      onFocusProp,\n      onBlurProp,\n    ],\n  )\n\n  return {\n    value,\n    getContainerProps,\n    getInputProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseColorSliderReturn = ReturnType<typeof useColorSlider>\n"],"mappings":"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","names":["max","min","step","value","focusThumbOnChange","isInteractive","props"]}
+{"version":3,"sources":["../src/use-color-slider.ts"],"sourcesContent":["import type { CSSUIProps, HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { CSSProperties, KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport {\n  formControlProperties,\n  useFormControlProps,\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  clampNumber,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  percentToValue,\n  roundNumberToStep,\n  splitObject,\n  useCallbackRef,\n  useUpdateEffect,\n  valueToPercent,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useRef, useState } from \"react\"\n\ntype ColorSliderChannel = \"alpha\" | \"hue\"\n\ninterface UseColorSliderOptions {\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   */\n  max: number\n  /**\n   * The minimum allowed value of the slider. Cannot be greater than max.\n   */\n  min: number\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 channel of the slider.\n   */\n  channel?: ColorSliderChannel\n  /**\n   * The initial value of the slider.\n   */\n  defaultValue?: number\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 step in which increments or decrements have to be made.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * The CSS `background` property. Used in `background` of thumb element.\n   */\n  thumbColor?: CSSUIProps[\"bg\"]\n  /**\n   * The value of the slider.\n   */\n  value?: number\n  /**\n   * Function called whenever the slider value changes.\n   */\n  onChange?: (value: number) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: number) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: number) => void\n}\n\nexport interface UseColorSliderProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\">,\n    UseColorSliderOptions,\n    FormControlOptions {}\n\nexport const useColorSlider = ({\n  focusThumbOnChange = true,\n  ...props\n}: UseColorSliderProps) => {\n  if (!focusThumbOnChange) props.isReadOnly = true\n\n  const {\n    id,\n    name,\n    style: styleProp,\n    channel = \"hue\",\n    defaultValue,\n    max,\n    min = 0,\n    step = 1,\n    thumbColor,\n    value: valueProp,\n    onChange: onChangeProp,\n    onChangeEnd: onChangeEndProp,\n    onChangeStart: onChangeStartProp,\n    ...rest\n  } = useFormControlProps(props)\n  const [\n    {\n      \"aria-readonly\": ariaReadonly,\n      disabled,\n      readOnly,\n      required,\n      onBlur: onBlurProp,\n      onFocus: onFocusProp,\n      ...formControlProps\n    },\n    containerProps,\n  ] = splitObject(rest, formControlProperties)\n\n  const onChangeStart = useCallbackRef(onChangeStartProp)\n  const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n  const [computedValue, setValue] = useControllableState({\n    defaultValue: defaultValue ?? min + (max - min) / 2,\n    value: valueProp,\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    eventSource: null as \"keyboard\" | \"pointer\" | null,\n    focusThumbOnChange,\n    isInteractive,\n    max,\n    min,\n    step,\n    value,\n  })\n\n  const thumbSize = useSize(thumbRef)\n\n  const getValueFromPointer = useCallback(\n    (ev: any) => {\n      if (!trackRef.current) return\n\n      const { max, min, 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 | PointerEvent | TouchEvent) => {\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, max, min } = 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 { max, min } = latestRef.current\n\n      const actions: { [key: string]: KeyboardEventHandler } = {\n        ArrowDown: () => stepDown(),\n        ArrowLeft: () => stepDown(),\n        ArrowRight: () => stepUp(),\n        ArrowUp: () => stepUp(),\n        End: () => constrain(max),\n        Home: () => constrain(min),\n        PageDown: () => stepDown(tenStep),\n        PageUp: () => stepUp(tenStep),\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    onMove: (ev) => {\n      const { isInteractive } = latestRef.current\n\n      if (!isInteractive) return\n\n      setValueFromPointer(ev)\n    },\n    onSessionEnd: () => {\n      const { isInteractive, value } = latestRef.current\n\n      if (!isInteractive) return\n\n      setDragging(false)\n      onChangeEnd(value)\n    },\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  })\n\n  useUpdateEffect(() => {\n    const { eventSource, value } = latestRef.current\n\n    if (eventSource === \"keyboard\") onChangeEnd(value)\n  }, [value, onChangeEnd])\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        ...styleProp,\n        paddingInline: `${w / 2}px`,\n      }\n\n      return {\n        ...props,\n        ...formControlProps,\n        ...containerProps,\n        ref: mergeRefs(ref, containerRef),\n        style,\n        tabIndex: -1,\n      }\n    },\n    [containerProps, formControlProps, styleProp, thumbSize],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      \"aria-readonly\": ariaReadonly,\n      ...props,\n      id,\n      ref,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value,\n    }),\n    [\n      ariaReadonly,\n      disabled,\n      formControlProps,\n      id,\n      name,\n      readOnly,\n      required,\n      value,\n    ],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, trackRef),\n    }),\n    [formControlProps],\n  )\n\n  const getThumbProps: PropGetter = 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        left: `calc(${n}% - ${w / 2}px)`,\n        position: \"absolute\",\n        touchAction: \"none\",\n        userSelect: \"none\",\n      }\n\n      return {\n        \"aria-label\": \"Slider thumb\",\n        bg: thumbColor ?? `hsl(${value}, 100%, 50%)`,\n        ...formControlProps,\n        \"aria-readonly\": ariaReadonly,\n        ...props,\n        ref: mergeRefs(ref, thumbRef),\n        style,\n        \"aria-valuemax\": max,\n        \"aria-valuemin\": min,\n        \"aria-valuenow\": value,\n        \"aria-valuetext\": getAriaValueText(channel, value),\n        \"data-active\": dataAttr(isDragging && focusThumbOnChange),\n        role: \"slider\",\n        tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n        onBlur: handlerAll(props.onBlur, onBlurProp),\n        onFocus: handlerAll(props.onFocus, onFocusProp),\n        onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      }\n    },\n    [\n      thumbPercent,\n      thumbSize,\n      thumbColor,\n      value,\n      formControlProps,\n      ariaReadonly,\n      max,\n      min,\n      channel,\n      isDragging,\n      focusThumbOnChange,\n      isInteractive,\n      onBlurProp,\n      onFocusProp,\n      onKeyDown,\n    ],\n  )\n\n  return {\n    value,\n    getContainerProps,\n    getInputProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseColorSliderReturn = ReturnType<typeof useColorSlider>\n\nexport const getAriaValueText = (\n  channel: ColorSliderChannel,\n  value: number,\n) => {\n  if (channel === \"hue\") {\n    return `${value}°, ${getColorName(value)}`\n  } else {\n    return `${value * 100}%`\n  }\n}\n\nconst getColorName = (hue: number): string => {\n  if (hue < 30 || hue >= 330) return \"Red\"\n  if (hue < 90) return \"Yellow\"\n  if (hue < 150) return \"Green\"\n  if (hue < 210) return \"Cyan\"\n  if (hue < 270) return \"Blue\"\n  return \"Magenta\"\n}\n"],"mappings":"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","names":["max","min","step","value","focusThumbOnChange","isInteractive","props"]}

package/dist/use-color-slider.mjs

@@ -1,8 +1,10 @@
 "use client"
 import {
+  getAriaValueText,
   useColorSlider
-} from "./chunk-F5EYME2W.mjs";
+} from "./chunk-SGAM4TJL.mjs";
 export {
+  getAriaValueText,
   useColorSlider
 };
 //# sourceMappingURL=use-color-slider.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/color-picker",
-  "version": "1.4.8-dev-20241105102243",
+  "version": "1.4.9-dev-20241109080944",
   "description": "Yamada UI color picker component",
   "keywords": [
     "yamada",
@@ -36,7 +36,7 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/button": "1.0.48-dev-20241105102243",
+    "@yamada-ui/button": "1.0.48",
     "@yamada-ui/core": "1.15.4",
     "@yamada-ui/form-control": "2.1.6",
     "@yamada-ui/icon": "1.1.11",

package/dist/chunk-7NWT5PKE.mjs

@@ -1,102 +0,0 @@
-"use client"
-import {
-  useColorSlider
-} from "./chunk-F5EYME2W.mjs";
-
-// src/hue-slider.tsx
-import {
-  forwardRef,
-  omitThemeProps,
-  ui,
-  useComponentMultiStyle
-} from "@yamada-ui/core";
-import { cx } from "@yamada-ui/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-var defaultOverlays = (min, max, withShadow) => {
-  let overlays = [
-    {
-      bgGradient: `linear(to-r, ${[...Array(7)].map(
-        (_, index) => `hsl(${Math.round(min + (max - min) / 6 * index)}, 100%, 50%)`
-      ).join(", ")})`
-    }
-  ];
-  if (withShadow)
-    overlays = [
-      ...overlays,
-      {
-        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`
-      }
-    ];
-  return overlays;
-};
-var HueSlider = forwardRef((props, ref) => {
-  const [styles, mergedProps] = useComponentMultiStyle("HueSlider", props);
-  const {
-    className,
-    max = 360,
-    min = 0,
-    withShadow = true,
-    overlays = defaultOverlays(min, max, withShadow),
-    inputProps,
-    thumbProps,
-    trackProps,
-    __css,
-    ...computedProps
-  } = omitThemeProps(mergedProps);
-  const { getContainerProps, getInputProps, getThumbProps, getTrackProps } = useColorSlider({ max, min, step: 1, ...computedProps });
-  const css = {
-    position: "relative",
-    ...styles.container,
-    ...__css
-  };
-  return /* @__PURE__ */ jsxs(
-    ui.div,
-    {
-      className: cx("ui-hue-slider", className),
-      __css: css,
-      ...getContainerProps(),
-      children: [
-        /* @__PURE__ */ jsx(ui.input, { ...getInputProps(inputProps, ref) }),
-        overlays.map((props2, index) => /* @__PURE__ */ jsx(
-          ui.div,
-          {
-            className: "ui-hue-slider__overlay",
-            __css: {
-              bottom: 0,
-              left: 0,
-              position: "absolute",
-              right: 0,
-              top: 0,
-              ...styles.overlay
-            },
-            ...props2
-          },
-          index
-        )),
-        /* @__PURE__ */ jsx(
-          ui.div,
-          {
-            className: "ui-hue-slider__track",
-            __css: { h: "100%", position: "relative", w: "100%", ...styles.track },
-            ...getTrackProps(trackProps),
-            children: /* @__PURE__ */ jsx(
-              ui.div,
-              {
-                className: "ui-hue-slider__thumb",
-                __css: { ...styles.thumb },
-                ...getThumbProps(thumbProps)
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-});
-HueSlider.displayName = "HueSlider";
-HueSlider.__ui__ = "HueSlider";
-
-export {
-  HueSlider
-};
-//# sourceMappingURL=chunk-7NWT5PKE.mjs.map

package/dist/chunk-7NWT5PKE.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hue-slider.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseColorSliderProps } from \"./use-color-slider\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useColorSlider } from \"./use-color-slider\"\n\nconst defaultOverlays = (\n  min: number,\n  max: number,\n  withShadow: boolean,\n): HTMLUIProps[] => {\n  let overlays: HTMLUIProps[] = [\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\ninterface HueSliderOptions {\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 minimum allowed value of the slider. Cannot be greater than max.\n   *\n   * @default 0\n   */\n  min?: number\n  /**\n   * The overlay used for the slider.\n   */\n  overlays?: HTMLUIProps[]\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 thumb element.\n   */\n  thumbProps?: HTMLUIProps\n  /**\n   * Props for slider track element.\n   */\n  trackProps?: HTMLUIProps\n}\n\nexport interface HueSliderProps\n  extends ThemeProps<\"HueSlider\">,\n    Partial<UseColorSliderProps>,\n    HueSliderOptions {}\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 const HueSlider = forwardRef<HueSliderProps, \"input\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"HueSlider\", props)\n  const {\n    className,\n    max = 360,\n    min = 0,\n    withShadow = true,\n    overlays = defaultOverlays(min, max, withShadow),\n    inputProps,\n    thumbProps,\n    trackProps,\n    __css,\n    ...computedProps\n  } = omitThemeProps(mergedProps)\n  const { getContainerProps, getInputProps, getThumbProps, getTrackProps } =\n    useColorSlider({ max, min, step: 1, ...computedProps })\n\n  const css: CSSUIObject = {\n    position: \"relative\",\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            bottom: 0,\n            left: 0,\n            position: \"absolute\",\n            right: 0,\n            top: 0,\n            ...styles.overlay,\n          }}\n          {...props}\n        />\n      ))}\n\n      <ui.div\n        className=\"ui-hue-slider__track\"\n        __css={{ h: \"100%\", position: \"relative\", w: \"100%\", ...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\nHueSlider.displayName = \"HueSlider\"\nHueSlider.__ui__ = \"HueSlider\"\n"],"mappings":";;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AA2Gf,SAKE,KALF;AAxGJ,IAAM,kBAAkB,CACtB,KACA,KACA,eACkB;AAClB,MAAI,WAA0B;AAAA,IAC5B;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;AAuDO,IAAM,YAAY,WAAoC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,aAAa,KAAK;AACvE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW,gBAAgB,KAAK,KAAK,UAAU;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,EAAE,mBAAmB,eAAe,eAAe,cAAc,IACrE,eAAe,EAAE,KAAK,KAAK,MAAM,GAAG,GAAG,cAAc,CAAC;AAExD,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,IACV,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACxC,OAAO;AAAA,MACN,GAAG,kBAAkB;AAAA,MAEtB;AAAA,4BAAC,GAAG,OAAH,EAAU,GAAG,cAAc,YAAY,GAAG,GAAG;AAAA,QAE7C,SAAS,IAAI,CAACA,QAAO,UACpB;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,MAAM;AAAA,cACN,UAAU;AAAA,cACV,OAAO;AAAA,cACP,KAAK;AAAA,cACL,GAAG,OAAO;AAAA,YACZ;AAAA,YACC,GAAGA;AAAA;AAAA,UAVC;AAAA,QAWP,CACD;AAAA,QAED;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,GAAG,QAAQ,UAAU,YAAY,GAAG,QAAQ,GAAG,OAAO,MAAM;AAAA,YACpE,GAAG,cAAc,UAAU;AAAA,YAE5B;AAAA,cAAC,GAAG;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;AAED,UAAU,cAAc;AACxB,UAAU,SAAS;","names":["props"]}

package/dist/chunk-F5EYME2W.mjs.map

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

package/dist/chunk-XL5VWGU4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/alpha-slider.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseColorSliderProps } from \"./use-color-slider\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { alphaToHex, convertColor, cx } from \"@yamada-ui/utils\"\nimport { useColorSlider } from \"./use-color-slider\"\n\nconst defaultOverlays = (\n  color: string,\n  min: number,\n  max: number,\n  withShadow: boolean,\n): HTMLUIProps[] => {\n  let overlays: HTMLUIProps[] = [\n    {\n      bgImage:\n        \"linear-gradient(45deg, $checkers 25%, transparent 25%), linear-gradient(-45deg, $checkers 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $checkers 75%), linear-gradient(-45deg, $body 75%, $checkers 75%)\",\n      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n      bgSize: `8px 8px`,\n      vars: [\n        {\n          name: \"checkers\",\n          token: \"colors\",\n          value: [\"blackAlpha.300\", \"whiteAlpha.300\"],\n        },\n        {\n          name: \"body\",\n          token: \"colors\",\n          value: [\"whiteAlpha.500\", \"blackAlpha.500\"],\n        },\n      ],\n    },\n    {\n      bgGradient: `linear(to-r, ${\n        convertColor(color)(\"hex\") + alphaToHex(min)\n      }, ${convertColor(color)(\"hex\") + alphaToHex(max)})`,\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\ninterface AlphaSliderOptions {\n  /**\n   * The color used for the slider.\n   *\n   * @default \"#ffffff\"\n   */\n  color?: string\n  /**\n   * The maximum allowed value of the slider. Cannot be less than min.\n   *\n   * @default 1\n   */\n  max?: number\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 overlay used for the slider.\n   */\n  overlays?: HTMLUIProps[]\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 0.01\n   */\n  step?: number\n  /**\n   * If `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 thumb element.\n   */\n  thumbProps?: HTMLUIProps\n  /**\n   * Props for slider track element.\n   */\n  trackProps?: HTMLUIProps\n}\n\nexport interface AlphaSliderProps\n  extends ThemeProps<\"AlphaSlider\">,\n    Partial<Omit<UseColorSliderProps, \"color\">>,\n    AlphaSliderOptions {}\n\n/**\n * `AlphaSlider` is a component used to allow the user to select color transparency.\n *\n * @see Docs https://yamada-ui.com/components/forms/alpha-slider\n */\nexport const AlphaSlider = forwardRef<AlphaSliderProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"AlphaSlider\", props)\n    const {\n      className,\n      color = \"#ffffff\",\n      max = 1,\n      min = 0,\n      withShadow = true,\n      overlays = defaultOverlays(color, min, max, withShadow),\n      inputProps,\n      thumbProps,\n      trackProps,\n      __css,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n    const { getContainerProps, getInputProps, getThumbProps, getTrackProps } =\n      useColorSlider({\n        max,\n        min,\n        step: 0.01,\n        thumbColor: \"transparent\",\n        ...computedProps,\n      })\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      ...styles.container,\n      ...__css,\n    }\n\n    return (\n      <ui.div\n        className={cx(\"ui-alpha-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-alpha-slider__overlay\"\n            __css={{\n              bottom: 0,\n              left: 0,\n              position: \"absolute\",\n              right: 0,\n              top: 0,\n              ...styles.overlay,\n            }}\n            {...props}\n          />\n        ))}\n\n        <ui.div\n          className=\"ui-alpha-slider__track\"\n          __css={{\n            h: \"100%\",\n            position: \"relative\",\n            w: \"100%\",\n            ...styles.track,\n          }}\n          {...getTrackProps(trackProps)}\n        >\n          <ui.div\n            className=\"ui-alpha-slider__thumb\"\n            __css={{ ...styles.thumb }}\n            {...getThumbProps(thumbProps)}\n          />\n        </ui.div>\n      </ui.div>\n    )\n  },\n)\n\nAlphaSlider.displayName = \"AlphaSlider\"\nAlphaSlider.__ui__ = \"AlphaSlider\"\n"],"mappings":";;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,cAAc,UAAU;AAyIvC,SAKE,KALF;AAtIN,IAAM,kBAAkB,CACtB,OACA,KACA,KACA,eACkB;AAClB,MAAI,WAA0B;AAAA,IAC5B;AAAA,MACE,SACE;AAAA,MACF,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,MAAM;AAAA,QACJ;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,OAAO,CAAC,kBAAkB,gBAAgB;AAAA,QAC5C;AAAA,QACA;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,OAAO,CAAC,kBAAkB,gBAAgB;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,YAAY,gBACV,aAAa,KAAK,EAAE,KAAK,IAAI,WAAW,GAAG,CAC7C,KAAK,aAAa,KAAK,EAAE,KAAK,IAAI,WAAW,GAAG,CAAC;AAAA,IACnD;AAAA,EACF;AAEA,MAAI;AACF,eAAW;AAAA,MACT,GAAG;AAAA,MACH;AAAA,QACE,WAAW;AAAA,MACb;AAAA,IACF;AAEF,SAAO;AACT;AA6DO,IAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,eAAe,KAAK;AACzE,UAAM;AAAA,MACJ;AAAA,MACA,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,WAAW,gBAAgB,OAAO,KAAK,KAAK,UAAU;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAC9B,UAAM,EAAE,mBAAmB,eAAe,eAAe,cAAc,IACrE,eAAe;AAAA,MACb;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,CAAC;AAEH,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG,kBAAkB;AAAA,QAEtB;AAAA,8BAAC,GAAG,OAAH,EAAU,GAAG,cAAc,YAAY,GAAG,GAAG;AAAA,UAE7C,SAAS,IAAI,CAACA,QAAO,UACpB;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,KAAK;AAAA,gBACL,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAGA;AAAA;AAAA,YAVC;AAAA,UAWP,CACD;AAAA,UAED;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,GAAG;AAAA,gBACH,UAAU;AAAA,gBACV,GAAG;AAAA,gBACH,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG,cAAc,UAAU;AAAA,cAE5B;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,kBACxB,GAAG,cAAc,UAAU;AAAA;AAAA,cAC9B;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":["props"]}