@yamada-ui/color-picker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/color-picker
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/color-picker
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/color-picker
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/color-picker
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](./CONTRIBUTING.md) to assist you.
+
+## License
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/alpha-slider.d.mts

@@ -0,0 +1,62 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
+import { UseColorSliderProps } from './use-color-slider.mjs';
+import '@yamada-ui/form-control';
+
+type AlphaSliderOptions = {
+    /**
+     * The color used for the slider.
+     *
+     * @default "#ffffff"
+     */
+    color?: string;
+    /**
+     * The minimum allowed value of the slider. Cannot be greater than max.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum allowed value of the slider. Cannot be less than min.
+     *
+     * @default 1
+     */
+    max?: number;
+    /**
+     * The step in which increments or decrements have to be made.
+     *
+     * @default 0.01
+     */
+    step?: number;
+    /**
+     * If `true`, the slider has an inner `box-shadow`.
+     *
+     * @default true
+     */
+    withShadow?: boolean;
+    /**
+     * Props for slider input element.
+     */
+    inputProps?: HTMLUIProps<"input">;
+    /**
+     * Props for slider track element.
+     */
+    trackProps?: HTMLUIProps<"div">;
+    /**
+     * Props for slider thumb element.
+     */
+    thumbProps?: HTMLUIProps<"div">;
+    /**
+     * The overlay used for the slider.
+     */
+    overlays?: HTMLUIProps<"div">[];
+};
+type AlphaSliderProps = ThemeProps<"AlphaSlider"> & Partial<Omit<UseColorSliderProps, "color">> & AlphaSliderOptions;
+/**
+ * `AlphaSlider` is a component used to allow the user to select color transparency.
+ *
+ * @see Docs https://yamada-ui.com/components/forms/alpha-slider
+ */
+declare const AlphaSlider: _yamada_ui_core.Component<"input", AlphaSliderProps>;
+
+export { AlphaSlider, type AlphaSliderProps };

package/dist/alpha-slider.d.ts

@@ -0,0 +1,62 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
+import { UseColorSliderProps } from './use-color-slider.js';
+import '@yamada-ui/form-control';
+
+type AlphaSliderOptions = {
+    /**
+     * The color used for the slider.
+     *
+     * @default "#ffffff"
+     */
+    color?: string;
+    /**
+     * The minimum allowed value of the slider. Cannot be greater than max.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum allowed value of the slider. Cannot be less than min.
+     *
+     * @default 1
+     */
+    max?: number;
+    /**
+     * The step in which increments or decrements have to be made.
+     *
+     * @default 0.01
+     */
+    step?: number;
+    /**
+     * If `true`, the slider has an inner `box-shadow`.
+     *
+     * @default true
+     */
+    withShadow?: boolean;
+    /**
+     * Props for slider input element.
+     */
+    inputProps?: HTMLUIProps<"input">;
+    /**
+     * Props for slider track element.
+     */
+    trackProps?: HTMLUIProps<"div">;
+    /**
+     * Props for slider thumb element.
+     */
+    thumbProps?: HTMLUIProps<"div">;
+    /**
+     * The overlay used for the slider.
+     */
+    overlays?: HTMLUIProps<"div">[];
+};
+type AlphaSliderProps = ThemeProps<"AlphaSlider"> & Partial<Omit<UseColorSliderProps, "color">> & AlphaSliderOptions;
+/**
+ * `AlphaSlider` is a component used to allow the user to select color transparency.
+ *
+ * @see Docs https://yamada-ui.com/components/forms/alpha-slider
+ */
+declare const AlphaSlider: _yamada_ui_core.Component<"input", AlphaSliderProps>;
+
+export { AlphaSlider, type AlphaSliderProps };

package/dist/alpha-slider.js

@@ -0,0 +1,438 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/alpha-slider.tsx
+var alpha_slider_exports = {};
+__export(alpha_slider_exports, {
+  AlphaSlider: () => AlphaSlider
+});
+module.exports = __toCommonJS(alpha_slider_exports);
+var import_core = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/use-color-slider.ts
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_latest_ref = require("@yamada-ui/use-latest-ref");
+var import_use_pan_event = require("@yamada-ui/use-pan-event");
+var import_use_size = require("@yamada-ui/use-size");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+
+// ../../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);
+
+// src/use-color-slider.ts
+var useColorSlider = ({
+  focusThumbOnChange = true,
+  ...props
+}) => {
+  if (!focusThumbOnChange)
+    props.isReadOnly = true;
+  let {
+    id,
+    name,
+    value: valueProp,
+    defaultValue,
+    min = 0,
+    max,
+    step = 1,
+    onChange: onChangeProp,
+    onChangeStart: onChangeStartProp,
+    onChangeEnd: onChangeEndProp,
+    thumbColor,
+    required,
+    disabled,
+    readOnly,
+    ...rest
+  } = (0, import_form_control.useFormControlProps)(props);
+  const onChangeStart = (0, import_utils.useCallbackRef)(onChangeStartProp);
+  const onChangeEnd = (0, import_utils.useCallbackRef)(onChangeEndProp);
+  const [computedValue, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: valueProp,
+    defaultValue: defaultValue != null ? defaultValue : min + (max - min) / 2,
+    onChange: onChangeProp
+  });
+  const value = (0, import_utils.clampNumber)(computedValue, min, max);
+  const thumbPercent = (0, import_utils.valueToPercent)(value, min, max);
+  const [isDragging, setDragging] = (0, import_react.useState)(false);
+  const isInteractive = !(disabled || readOnly);
+  const oneStep = step || (max - min) / 100;
+  const tenStep = (max - min) / 10;
+  const containerRef = (0, import_react.useRef)(null);
+  const trackRef = (0, import_react.useRef)(null);
+  const thumbRef = (0, import_react.useRef)(null);
+  const latestRef = (0, import_use_latest_ref.useLatestRef)({
+    value,
+    min,
+    max,
+    step,
+    isInteractive,
+    eventSource: null,
+    focusThumbOnChange
+  });
+  const thumbSize = (0, import_use_size.useSize)(thumbRef);
+  const getValueFromPointer = (0, import_react.useCallback)(
+    (ev) => {
+      var _a, _b;
+      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));
+      nextValue = (0, import_utils.clampNumber)(nextValue, min2, max2);
+      return nextValue;
+    },
+    [latestRef]
+  );
+  const setValueFromPointer = (ev) => {
+    const { value: value2 } = latestRef.current;
+    const nextValue = getValueFromPointer(ev);
+    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();
+      });
+  }, [latestRef]);
+  const constrain = (0, import_react.useCallback)(
+    (value2) => {
+      const { isInteractive: isInteractive2, min: min2, max: max2 } = latestRef.current;
+      if (!isInteractive2)
+        return;
+      value2 = parseFloat((0, import_utils.roundNumberToStep)(value2, min2, oneStep));
+      value2 = (0, import_utils.clampNumber)(value2, min2, max2);
+      setValue(value2);
+    },
+    [setValue, latestRef, oneStep]
+  );
+  const stepUp = (0, import_react.useCallback)(
+    (step2 = oneStep) => constrain(value + step2),
+    [constrain, value, oneStep]
+  );
+  const stepDown = (0, import_react.useCallback)(
+    (step2 = oneStep) => constrain(value - step2),
+    [constrain, value, oneStep]
+  );
+  const onKeyDown = (0, import_react.useCallback)(
+    (ev) => {
+      const { min: min2, max: max2 } = latestRef.current;
+      const actions = {
+        ArrowRight: () => stepUp(),
+        ArrowUp: () => stepUp(),
+        ArrowLeft: () => stepDown(),
+        ArrowDown: () => stepDown(),
+        PageUp: () => stepUp(tenStep),
+        PageDown: () => stepDown(tenStep),
+        Home: () => constrain(min2),
+        End: () => constrain(max2)
+      };
+      const action = actions[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      action(ev);
+      latestRef.current.eventSource = "keyboard";
+    },
+    [constrain, latestRef, stepDown, stepUp, tenStep]
+  );
+  (0, import_use_pan_event.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);
+    }
+  });
+  (0, import_utils.useUpdateEffect)(() => {
+    const { eventSource, value: value2 } = latestRef.current;
+    if (eventSource === "keyboard")
+      onChangeEnd(value2);
+  }, [value, onChangeEnd]);
+  const getContainerProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      const { width: w } = thumbSize != null ? thumbSize : { width: 0 };
+      const style = {
+        ...props2.style,
+        ...rest.style,
+        paddingInline: `${w / 2}px`
+      };
+      return {
+        ...props2,
+        ...(0, import_utils.omitObject)(rest, ["aria-readonly"]),
+        ref: (0, import_utils.mergeRefs)(ref, containerRef),
+        tabIndex: -1,
+        style
+      };
+    },
+    [rest, thumbSize]
+  );
+  const getInputProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, import_form_control.formControlProperties),
+      ...props2,
+      id,
+      ref,
+      type: "hidden",
+      name,
+      value,
+      required,
+      disabled,
+      readOnly
+    }),
+    [disabled, id, name, readOnly, required, rest, value]
+  );
+  const getTrackProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(
+        rest,
+        (0, import_form_control.getFormControlProperties)({ omit: ["aria-readonly"] })
+      ),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(ref, trackRef)
+    }),
+    [rest]
+  );
+  const getThumbProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      const n = thumbPercent;
+      const { width: w } = thumbSize != null ? thumbSize : { width: 0 };
+      const style = {
+        ...props2.style,
+        position: "absolute",
+        userSelect: "none",
+        touchAction: "none",
+        left: `calc(${n}% - ${w / 2}px)`
+      };
+      return {
+        "aria-label": "Slider thumb",
+        bg: thumbColor != null ? thumbColor : `hsl(${value}, 100%, 50%)`,
+        ...pickObject(rest, import_form_control.formControlProperties),
+        ...props2,
+        ref: (0, import_utils.mergeRefs)(ref, thumbRef),
+        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        role: "slider",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "data-active": (0, import_utils.dataAttr)(isDragging && focusThumbOnChange),
+        onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown),
+        onFocus: (0, import_utils.handlerAll)(props2.onFocus, rest.onFocus),
+        onBlur: (0, import_utils.handlerAll)(props2.onBlur, rest.onBlur),
+        style
+      };
+    },
+    [
+      thumbColor,
+      focusThumbOnChange,
+      isDragging,
+      isInteractive,
+      min,
+      max,
+      onKeyDown,
+      rest,
+      thumbPercent,
+      thumbSize,
+      value
+    ]
+  );
+  return {
+    value,
+    getContainerProps,
+    getTrackProps,
+    getInputProps,
+    getThumbProps
+  };
+};
+
+// src/alpha-slider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultOverlays = (color, min, max, withShadow) => {
+  let overlays = [
+    {
+      bgImage: "linear-gradient(45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ui-checkers) 75%), linear-gradient(-45deg, var(--ui-body) 75%, var(--ui-checkers) 75%)",
+      bgSize: `8px 8px`,
+      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
+      var: [
+        {
+          name: "checkers",
+          token: "colors",
+          value: ["blackAlpha.300", "whiteAlpha.300"]
+        },
+        {
+          name: "body",
+          token: "colors",
+          value: ["whiteAlpha.500", "blackAlpha.500"]
+        }
+      ]
+    },
+    {
+      bgGradient: `linear(to-r, ${(0, import_utils2.convertColor)(color)("hex") + (0, import_utils2.alphaToHex)(min)}, ${(0, import_utils2.convertColor)(color)("hex") + (0, import_utils2.alphaToHex)(max)})`
+    }
+  ];
+  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 AlphaSlider = (0, import_core.forwardRef)(
+  (props, ref) => {
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("AlphaSlider", props);
+    const {
+      className,
+      inputProps,
+      trackProps,
+      thumbProps,
+      color = "#ffffff",
+      min = 0,
+      max = 1,
+      withShadow = true,
+      overlays = defaultOverlays(color, min, max, withShadow),
+      __css,
+      ...computedProps
+    } = (0, import_core.omitThemeProps)(mergedProps);
+    const { getContainerProps, getTrackProps, getInputProps, getThumbProps } = useColorSlider({
+      min,
+      max,
+      step: 0.01,
+      thumbColor: "transparent",
+      ...computedProps
+    });
+    const css = {
+      position: "relative",
+      ...styles.container,
+      ...__css
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core.ui.div,
+      {
+        className: (0, import_utils2.cx)("ui-alpha-slider", className),
+        __css: css,
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ...getInputProps(inputProps, ref) }),
+          overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.div,
+            {
+              className: "ui-alpha-slider__overlay",
+              __css: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                ...styles.overlay
+              },
+              ...props2
+            },
+            index
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.div,
+            {
+              className: "ui-alpha-slider__track",
+              __css: {
+                position: "relative",
+                w: "full",
+                h: "full",
+                ...styles.track
+              },
+              ...getTrackProps(trackProps),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_core.ui.div,
+                {
+                  className: "ui-alpha-slider__thumb",
+                  __css: { ...styles.thumb },
+                  ...getThumbProps(thumbProps)
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlphaSlider
+});

package/dist/alpha-slider.mjs

@@ -0,0 +1,8 @@
+import {
+  AlphaSlider
+} from "./chunk-U6OJ4TDG.mjs";
+import "./chunk-DTB2Z3IJ.mjs";
+import "./chunk-N2GG5L7Q.mjs";
+export {
+  AlphaSlider
+};

package/dist/chunk-3EO2XBIZ.mjs

@@ -0,0 +1,54 @@
+import {
+  useColorPickerContext
+} from "./chunk-NR2XCTSD.mjs";
+
+// src/color-picker-eye-dropper.tsx
+import { IconButton } from "@yamada-ui/button";
+import { forwardRef } from "@yamada-ui/core";
+import { Icon } from "@yamada-ui/icon";
+import { cx } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPickerEyeDropper = forwardRef(({ className, ...rest }, ref) => {
+  const { getEyeDropperProps, readOnly, size, styles } = useColorPickerContext();
+  const css = {
+    h: "auto",
+    minW: "auto",
+    pointerEvents: readOnly ? "none" : void 0,
+    ...styles.eyeDropper
+  };
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      className: cx("ui-color-picker__eye-dropper", className),
+      variant: "outline",
+      size,
+      __css: css,
+      ...getEyeDropperProps(rest, ref),
+      children: /* @__PURE__ */ jsx(EyeDropperIcon, { className: "ui-color-picker__eye-dropper__icon" })
+    }
+  );
+});
+var EyeDropperIcon = ({ ...rest }) => {
+  return /* @__PURE__ */ jsxs(
+    Icon,
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m2 22 1-1h3l9-9" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 21v-3l9-9" }),
+        /* @__PURE__ */ jsx("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
+      ]
+    }
+  );
+};
+
+export {
+  ColorPickerEyeDropper,
+  EyeDropperIcon
+};