@yamada-ui/color-picker 1.0.0

package/dist/chunk-MAHWFXUG.mjs

@@ -0,0 +1,294 @@
+// src/use-saturation-slider.ts
+import {
+  useFormControlProps,
+  formControlProperties,
+  getFormControlProperties
+} from "@yamada-ui/form-control";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import { useLatestRef } from "@yamada-ui/use-latest-ref";
+import { usePanEvent } from "@yamada-ui/use-pan-event";
+import { useSize } from "@yamada-ui/use-size";
+import {
+  omitObject,
+  dataAttr,
+  handlerAll,
+  mergeRefs,
+  useCallbackRef,
+  runIfFunc,
+  clampNumber,
+  hsvTo,
+  roundNumberToStep,
+  pickObject,
+  useUpdateEffect
+} from "@yamada-ui/utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+var defaultOverlays = (withShadow) => {
+  let overlays = [
+    ([h]) => ({
+      bg: `hsl(${h}, 100%, 50%)`,
+      bgImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)"
+    })
+  ];
+  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 useSaturationSlider = ({
+  focusThumbOnChange = true,
+  ...props
+}) => {
+  if (!focusThumbOnChange)
+    props.isReadOnly = true;
+  let {
+    id,
+    name,
+    value: valueProp,
+    defaultValue = [0, 0, 1],
+    onChange: onChangeProp,
+    onChangeStart: onChangeStartProp,
+    onChangeEnd: onChangeEndProp,
+    step = 0.01,
+    thumbColor,
+    required,
+    disabled,
+    readOnly,
+    withShadow = true,
+    overlays: overlaysProp = defaultOverlays(withShadow),
+    ...rest
+  } = useFormControlProps(props);
+  const onChangeStart = useCallbackRef(onChangeStartProp);
+  const onChangeEnd = useCallbackRef(onChangeEndProp);
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp
+  });
+  const [isDragging, setDragging] = useState(false);
+  const isInteractive = !(disabled || readOnly);
+  let [h, s, v] = value;
+  s = clampNumber(s, 0, 1);
+  v = clampNumber(v, 0, 1);
+  const containerRef = useRef(null);
+  const trackRef = useRef(null);
+  const thumbRef = useRef(null);
+  const latestRef = useLatestRef({
+    value,
+    step,
+    isInteractive,
+    eventSource: null,
+    focusThumbOnChange
+  });
+  const thumbSize = useSize(thumbRef);
+  const overlays = useMemo(
+    () => overlaysProp.map((propsOrFunc) => runIfFunc(propsOrFunc, [h, s, v])),
+    [overlaysProp, h, s, v]
+  );
+  const getValueFromPointer = useCallback(
+    (ev) => {
+      var _a, _b;
+      if (!trackRef.current)
+        return [];
+      const { step: step2 } = latestRef.current;
+      latestRef.current.eventSource = "pointer";
+      const { bottom, left, height, width } = trackRef.current.getBoundingClientRect();
+      const { clientX, clientY } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
+      let s2 = clampNumber((clientX - left) / width, 0, 1);
+      let v2 = clampNumber((bottom - clientY) / height, 0, 1);
+      if (step2) {
+        s2 = parseFloat(roundNumberToStep(s2, 0, step2));
+        v2 = parseFloat(roundNumberToStep(v2, 0, step2));
+      }
+      return [s2, v2];
+    },
+    [latestRef]
+  );
+  const setValueFromPointer = (ev) => {
+    const { value: value2 } = latestRef.current;
+    const [nextS, nextV] = getValueFromPointer(ev);
+    if (nextS == null || nextV == null)
+      return;
+    const [, s2, v2] = value2;
+    if (nextS !== s2 || nextV !== v2)
+      setValue(([h2]) => [h2, nextS, nextV]);
+  };
+  const focusThumb = useCallback(() => {
+    const { focusThumbOnChange: focusThumbOnChange2 } = latestRef.current;
+    if (focusThumbOnChange2)
+      setTimeout(() => {
+        var _a;
+        return (_a = thumbRef.current) == null ? void 0 : _a.focus();
+      });
+  }, [latestRef]);
+  const constrain = useCallback(
+    ([s2, v2]) => {
+      const { isInteractive: isInteractive2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      s2 = clampNumber(s2, 0, 1);
+      v2 = clampNumber(v2, 0, 1);
+      setValue(([h2]) => [h2, s2, v2]);
+    },
+    [latestRef, setValue]
+  );
+  const onKeyDown = useCallback(
+    (ev) => {
+      const actions = {
+        ArrowRight: () => constrain([s + step, v]),
+        ArrowUp: () => constrain([s, v + step]),
+        ArrowLeft: () => constrain([s - step, v]),
+        ArrowDown: () => constrain([s, v - step])
+      };
+      const action = actions[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      action(ev);
+      latestRef.current.eventSource = "keyboard";
+    },
+    [latestRef, constrain, s, v, step]
+  );
+  usePanEvent(containerRef, {
+    onSessionStart: (ev) => {
+      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setDragging(true);
+      focusThumb();
+      setValueFromPointer(ev);
+      onChangeStart(value2);
+    },
+    onSessionEnd: () => {
+      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setDragging(false);
+      onChangeEnd(value2);
+    },
+    onMove: (ev) => {
+      const { isInteractive: isInteractive2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      setValueFromPointer(ev);
+    }
+  });
+  useUpdateEffect(() => {
+    const { eventSource, value: value2 } = latestRef.current;
+    if (eventSource === "keyboard")
+      onChangeEnd(value2);
+  }, [value, onChangeEnd]);
+  const getContainerProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...omitObject(rest, ["aria-readonly"]),
+      ref: mergeRefs(ref, containerRef),
+      tabIndex: -1
+    }),
+    [rest]
+  );
+  const getInnerProps = useCallback(
+    (props2 = {}, ref = null) => {
+      const { width: w } = thumbSize != null ? thumbSize : { width: 0 };
+      const style = {
+        ...props2.style,
+        ...rest.style,
+        padding: `${w / 2}px`
+      };
+      return {
+        ...props2,
+        ref,
+        style
+      };
+    },
+    [rest, thumbSize]
+  );
+  const getInputProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      id,
+      ref,
+      type: "hidden",
+      name,
+      value: [h, s, v].toString(),
+      required,
+      disabled,
+      readOnly
+    }),
+    [disabled, id, name, readOnly, required, rest, h, s, v]
+  );
+  const getTrackProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(
+        rest,
+        getFormControlProperties({ omit: ["aria-readonly"] })
+      ),
+      ...props2,
+      ref: mergeRefs(ref, trackRef)
+    }),
+    [rest]
+  );
+  const getThumbProps = useCallback(
+    (props2 = {}, ref = null) => {
+      const { width, height } = thumbSize != null ? thumbSize : { width: 0, height: 0 };
+      const x = s * 100;
+      const y = v * 100;
+      const style = {
+        ...props2.style,
+        position: "absolute",
+        userSelect: "none",
+        touchAction: "none",
+        left: `calc(${x}% - ${width / 2}px)`,
+        bottom: `calc(${y}% - ${height / 2}px)`
+      };
+      return {
+        "aria-label": "Saturation and brightness thumb",
+        bg: thumbColor != null ? thumbColor : hsvTo([h, s, v])(),
+        ...pickObject(rest, formControlProperties),
+        ...props2,
+        ref: mergeRefs(ref, thumbRef),
+        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        role: "slider",
+        "aria-valuenow": s,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuetext": `saturation ${s}, brightness ${v}`,
+        "data-active": dataAttr(isDragging && focusThumbOnChange),
+        onKeyDown: handlerAll(props2.onKeyDown, onKeyDown),
+        onFocus: handlerAll(props2.onFocus, rest.onFocus),
+        onBlur: handlerAll(props2.onBlur, rest.onBlur),
+        style
+      };
+    },
+    [
+      h,
+      s,
+      v,
+      thumbColor,
+      focusThumbOnChange,
+      isDragging,
+      isInteractive,
+      onKeyDown,
+      rest,
+      thumbSize
+    ]
+  );
+  return {
+    value,
+    overlays,
+    getContainerProps,
+    getInnerProps,
+    getTrackProps,
+    getInputProps,
+    getThumbProps
+  };
+};
+
+export {
+  useSaturationSlider
+};

package/dist/chunk-N2GG5L7Q.mjs

@@ -0,0 +1,39 @@
+// ../../utils/src/object.ts
+var pickObject = (obj, keys) => {
+  const result = {};
+  keys.forEach((key) => {
+    if (key in obj)
+      result[key] = obj[key];
+  });
+  return result;
+};
+var getObject = (obj, path, fallback, i) => {
+  const k = typeof path === "string" ? path.split(".") : [path];
+  for (i = 0; i < k.length; i += 1) {
+    if (!obj)
+      break;
+    obj = obj[k[i]];
+  }
+  return obj === void 0 ? fallback : obj;
+};
+var memoizeObject = (func) => {
+  const cache = /* @__PURE__ */ new WeakMap();
+  const memoizedFunc = (obj, path, fallback, i) => {
+    if (typeof obj === "undefined")
+      return func(obj, path, fallback);
+    if (!cache.has(obj))
+      cache.set(obj, /* @__PURE__ */ new Map());
+    const map = cache.get(obj);
+    if (map.has(path))
+      return map.get(path);
+    const value = func(obj, path, fallback, i);
+    map.set(path, value);
+    return value;
+  };
+  return memoizedFunc;
+};
+var getMemoizedObject = memoizeObject(getObject);
+
+export {
+  pickObject
+};