@yamada-ui/color-picker 1.4.10-dev-20241115173924 → 1.4.10-dev-20241117113320

package/dist/{chunk-YU3KOEL7.mjs → chunk-AJTCPCFF.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useSaturationSlider
-} from "./chunk-XCHWCHHP.mjs";
+} from "./chunk-LEN56PPD.mjs";
 
 // src/saturation-slider.tsx
 import {
@@ -123,4 +123,4 @@ SaturationSlider.__ui__ = "SaturationSlider";
 export {
   SaturationSlider
 };
-//# sourceMappingURL=chunk-YU3KOEL7.mjs.map
+//# sourceMappingURL=chunk-AJTCPCFF.mjs.map

package/dist/{chunk-RW7HCRPR.mjs → chunk-ASZZSRFB.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-Z2KAER2U.mjs";
 import {
   ColorSelector
-} from "./chunk-TED6IK5W.mjs";
+} from "./chunk-QWG3QE6A.mjs";
 import {
   EyeDropperIcon
 } from "./chunk-6XIZXZXV.mjs";
@@ -256,4 +256,4 @@ ColorPickerEyeDropper.__ui__ = "ColorPickerEyeDropper";
 export {
   ColorPicker
 };
-//# sourceMappingURL=chunk-RW7HCRPR.mjs.map
+//# sourceMappingURL=chunk-ASZZSRFB.mjs.map

package/dist/{chunk-XCHWCHHP.mjs → chunk-LEN56PPD.mjs}

@@ -43,7 +43,7 @@ var useSaturationSlider = ({
   ...props
 }) => {
   if (!focusThumbOnChange) props.isReadOnly = true;
-  let {
+  const {
     id,
     name,
     defaultValue = [0, 0, 1],
@@ -250,8 +250,8 @@ var useSaturationSlider = ({
         style,
         "aria-valuemax": 100,
         "aria-valuemin": 0,
-        "aria-valuenow": s,
-        "aria-valuetext": `saturation ${s}, brightness ${v}`,
+        "aria-valuenow": s * 100,
+        "aria-valuetext": `Saturation ${s * 100}%, Brightness ${v * 100}%`,
         "data-active": dataAttr(isDragging && focusThumbOnChange),
         role: "slider",
         tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
@@ -288,4 +288,4 @@ var useSaturationSlider = ({
 export {
   useSaturationSlider
 };
-//# sourceMappingURL=chunk-XCHWCHHP.mjs.map
+//# sourceMappingURL=chunk-LEN56PPD.mjs.map

package/dist/chunk-LEN56PPD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-saturation-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  hsvTo,\n  mergeRefs,\n  roundNumberToStep,\n  runIfFunc,\n  splitObject,\n  useCallbackRef,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef, useState } from \"react\"\n\nexport type Hsv = [number, number, number]\ntype Overlay = ((value: Hsv) => HTMLUIProps) | HTMLUIProps\n\nconst defaultOverlays = (withShadow: boolean): Overlay[] => {\n  let overlays: Overlay[] = [\n    ([h]) => ({\n      bg: `hsl(${h}, 100%, 50%)`,\n      bgImage:\n        \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n    }),\n  ]\n\n  if (withShadow)\n    overlays = [\n      ...overlays,\n      {\n        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`,\n      },\n    ]\n\n  return overlays\n}\n\ninterface UseSaturationSliderOptions {\n  /**\n   * The base `id` to use for the saturation slider.\n   */\n  id?: string\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The initial value of the saturation slider.\n   *\n   * @default \"[0, 0, 1]\"\n   */\n  defaultValue?: Hsv\n  /**\n   * If `false`, the saturation slider handle will not capture focus when value changes.\n   *\n   * @default true\n   */\n  focusThumbOnChange?: boolean\n  /**\n   * The overlay used for the saturation slider.\n   */\n  overlays?: Overlay[]\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 0.01\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 saturation slider.\n   */\n  value?: Hsv\n  /**\n   * If `true`, the slider has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n  /**\n   * Function called whenever the saturation slider value changes.\n   */\n  onChange?: (value: Hsv) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: Hsv) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: Hsv) => void\n}\n\nexport interface UseSaturationSliderProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\">,\n    UseSaturationSliderOptions,\n    FormControlOptions {}\n\nexport const useSaturationSlider = ({\n  focusThumbOnChange = true,\n  ...props\n}: UseSaturationSliderProps) => {\n  if (!focusThumbOnChange) props.isReadOnly = true\n\n  const {\n    id,\n    name,\n    defaultValue = [0, 0, 1],\n    withShadow = true,\n    overlays: overlaysProp = defaultOverlays(withShadow),\n    step = 0.01,\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      ...formControlProps\n    },\n    containerProps,\n  ] = splitObject(rest, formControlProperties)\n\n  const onChangeStart = useCallbackRef(onChangeStartProp)\n  const onChangeEnd = useCallbackRef(onChangeEndProp)\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [isDragging, setDragging] = useState(false)\n  const isInteractive = !(disabled || readOnly)\n  let [h, s, v] = value\n\n  s = clampNumber(s, 0, 1)\n  v = clampNumber(v, 0, 1)\n\n  const containerRef = useRef<HTMLElement>(null)\n  const trackRef = useRef<HTMLElement>(null)\n  const thumbRef = useRef<HTMLElement>(null)\n  const latestRef = useLatestRef({\n    eventSource: null as \"keyboard\" | \"pointer\" | null,\n    focusThumbOnChange,\n    isInteractive,\n    step,\n    value,\n  })\n\n  const thumbSize = useSize(thumbRef)\n\n  const overlays = useMemo(\n    () => overlaysProp.map((propsOrFunc) => runIfFunc(propsOrFunc, [h, s, v])),\n    [overlaysProp, h, s, v],\n  )\n\n  const getValueFromPointer = useCallback(\n    (ev: any) => {\n      if (!trackRef.current) return []\n\n      const { step } = latestRef.current\n\n      latestRef.current.eventSource = \"pointer\"\n\n      const { bottom, height, left, width } =\n        trackRef.current.getBoundingClientRect()\n      const { clientX, clientY } = ev.touches?.[0] ?? ev\n\n      let s = clampNumber((clientX - left) / width, 0, 1)\n      let v = clampNumber((bottom - clientY) / height, 0, 1)\n\n      if (step) {\n        s = parseFloat(roundNumberToStep(s, 0, step))\n        v = parseFloat(roundNumberToStep(v, 0, step))\n      }\n\n      return [s, v]\n    },\n    [latestRef],\n  )\n\n  const setValueFromPointer = (ev: MouseEvent | PointerEvent | TouchEvent) => {\n    const { value } = latestRef.current\n    const [nextS, nextV] = getValueFromPointer(ev)\n\n    if (nextS == null || nextV == null) return\n\n    const [, s, v] = value\n\n    if (nextS !== s || nextV !== v) setValue(([h]) => [h, nextS, nextV])\n  }\n\n  const focusThumb = useCallback(() => {\n    const { focusThumbOnChange } = latestRef.current\n\n    if (focusThumbOnChange) setTimeout(() => thumbRef.current?.focus())\n  }, [latestRef])\n\n  const constrain = useCallback(\n    ([s, v]: [number, number]) => {\n      const { isInteractive } = latestRef.current\n\n      if (!isInteractive) return\n\n      s = clampNumber(s, 0, 1)\n      v = clampNumber(v, 0, 1)\n\n      setValue(([h]) => [h, s, v])\n    },\n    [latestRef, setValue],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLElement>) => {\n      const actions: { [key: string]: KeyboardEventHandler } = {\n        ArrowDown: () => constrain([s, v - step]),\n        ArrowLeft: () => constrain([s - step, v]),\n        ArrowRight: () => constrain([s + step, v]),\n        ArrowUp: () => constrain([s, v + step]),\n      }\n\n      const action = actions[ev.key]\n\n      if (!action) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      action(ev)\n\n      latestRef.current.eventSource = \"keyboard\"\n    },\n    [latestRef, constrain, s, v, step],\n  )\n\n  usePanEvent(containerRef, {\n    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      ...props,\n      ...containerProps,\n      ...formControlProps,\n      ref: mergeRefs(ref, containerRef),\n      tabIndex: -1,\n    }),\n    [containerProps, formControlProps],\n  )\n\n  const getInnerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => {\n      const { width: w } = thumbSize ?? { width: 0 }\n\n      const style: CSSProperties = {\n        ...props.style,\n        ...rest.style,\n        padding: `${w / 2}px`,\n      }\n\n      return {\n        ...props,\n        ref,\n        style,\n      }\n    },\n    [rest, thumbSize],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      id,\n      ref,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value: [h, s, v].toString(),\n    }),\n    [formControlProps, id, name, h, s, v, required, disabled, readOnly],\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 { height, width } = thumbSize ?? { height: 0, width: 0 }\n      const x = s * 100\n      const y = v * 100\n\n      const style: CSSProperties = {\n        ...props.style,\n        bottom: `calc(${y}% - ${height / 2}px)`,\n        left: `calc(${x}% - ${width / 2}px)`,\n        position: \"absolute\",\n        touchAction: \"none\",\n        userSelect: \"none\",\n      }\n\n      return {\n        \"aria-label\": \"Saturation and brightness thumb\",\n        \"aria-roledescription\": \"2D slider\",\n        bg: thumbColor ?? hsvTo([h, s, v])(),\n        ...formControlProps,\n        ...props,\n        ref: mergeRefs(ref, thumbRef),\n        style,\n        \"aria-valuemax\": 100,\n        \"aria-valuemin\": 0,\n        \"aria-valuenow\": s * 100,\n        \"aria-valuetext\": `Saturation ${s * 100}%, Brightness ${v * 100}%`,\n        \"data-active\": dataAttr(isDragging && focusThumbOnChange),\n        role: \"slider\",\n        tabIndex: isInteractive && focusThumbOnChange ? 0 : undefined,\n        onBlur: handlerAll(props.onBlur, rest.onBlur),\n        onFocus: handlerAll(props.onFocus, rest.onFocus),\n        onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      }\n    },\n    [\n      thumbSize,\n      s,\n      v,\n      thumbColor,\n      h,\n      formControlProps,\n      isInteractive,\n      focusThumbOnChange,\n      isDragging,\n      onKeyDown,\n      rest,\n    ],\n  )\n\n  return {\n    overlays,\n    value,\n    getContainerProps,\n    getInnerProps,\n    getInputProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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","names":["step","s","v","value","h","focusThumbOnChange","isInteractive","props"]}

package/dist/{chunk-TED6IK5W.mjs → chunk-QWG3QE6A.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   SaturationSlider
-} from "./chunk-YU3KOEL7.mjs";
+} from "./chunk-AJTCPCFF.mjs";
 import {
   ColorSelectorBody
 } from "./chunk-XSZZBWND.mjs";
@@ -129,4 +129,4 @@ ColorSelector.__ui__ = "ColorSelector";
 export {
   ColorSelector
 };
-//# sourceMappingURL=chunk-TED6IK5W.mjs.map
+//# sourceMappingURL=chunk-QWG3QE6A.mjs.map

package/dist/color-picker.js

@@ -1429,7 +1429,7 @@ var useSaturationSlider = ({
   ...props
 }) => {
   if (!focusThumbOnChange) props.isReadOnly = true;
-  let {
+  const {
     id,
     name,
     defaultValue = [0, 0, 1],
@@ -1636,8 +1636,8 @@ var useSaturationSlider = ({
         style,
         "aria-valuemax": 100,
         "aria-valuemin": 0,
-        "aria-valuenow": s,
-        "aria-valuetext": `saturation ${s}, brightness ${v}`,
+        "aria-valuenow": s * 100,
+        "aria-valuetext": `Saturation ${s * 100}%, Brightness ${v * 100}%`,
         "data-active": (0, import_utils11.dataAttr)(isDragging && focusThumbOnChange),
         role: "slider",
         tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,