@yamada-ui/color-picker 1.0.0

package/dist/color-picker-body.mjs

@@ -0,0 +1,14 @@
+import {
+  ColorPickerBody
+} from "./chunk-73BVTMII.mjs";
+import "./chunk-3EO2XBIZ.mjs";
+import "./chunk-7QGCTVDG.mjs";
+import "./chunk-PTTNJPGJ.mjs";
+import "./chunk-U6OJ4TDG.mjs";
+import "./chunk-DTB2Z3IJ.mjs";
+import "./chunk-3N443XSV.mjs";
+import "./chunk-NR2XCTSD.mjs";
+import "./chunk-N2GG5L7Q.mjs";
+export {
+  ColorPickerBody
+};

package/dist/color-picker-channels.d.mts

@@ -0,0 +1,20 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { InputProps } from '@yamada-ui/input';
+import { ReactNode } from 'react';
+
+type ColorPickerChannelsOptions = {
+    /**
+     * Props for the chancel component.
+     */
+    channelProps?: Omit<ColorPickerChannelProps, "channelLabel">;
+};
+type ColorPickerChannelsProps = Omit<HTMLUIProps<"div">, "children"> & ColorPickerChannelsOptions;
+declare const ColorPickerChannels: _yamada_ui_core.Component<"div", ColorPickerChannelsProps>;
+type ColorPickerChannelOptions = {
+    channelLabel?: ReactNode;
+};
+type ColorPickerChannelProps = Omit<InputProps, "type" | "pattern" | "min" | "max" | "value" | "defaultValue"> & ColorPickerChannelOptions;
+declare const ColorPickerChannel: _yamada_ui_core.Component<"input", ColorPickerChannelProps>;
+
+export { ColorPickerChannel, type ColorPickerChannelProps, ColorPickerChannels, type ColorPickerChannelsProps };

package/dist/color-picker-channels.d.ts

@@ -0,0 +1,20 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { InputProps } from '@yamada-ui/input';
+import { ReactNode } from 'react';
+
+type ColorPickerChannelsOptions = {
+    /**
+     * Props for the chancel component.
+     */
+    channelProps?: Omit<ColorPickerChannelProps, "channelLabel">;
+};
+type ColorPickerChannelsProps = Omit<HTMLUIProps<"div">, "children"> & ColorPickerChannelsOptions;
+declare const ColorPickerChannels: _yamada_ui_core.Component<"div", ColorPickerChannelsProps>;
+type ColorPickerChannelOptions = {
+    channelLabel?: ReactNode;
+};
+type ColorPickerChannelProps = Omit<InputProps, "type" | "pattern" | "min" | "max" | "value" | "defaultValue"> & ColorPickerChannelOptions;
+declare const ColorPickerChannel: _yamada_ui_core.Component<"input", ColorPickerChannelProps>;
+
+export { ColorPickerChannel, type ColorPickerChannelProps, ColorPickerChannels, type ColorPickerChannelsProps };

package/dist/color-picker-channels.js

@@ -0,0 +1,101 @@
+"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/color-picker-channels.tsx
+var color_picker_channels_exports = {};
+__export(color_picker_channels_exports, {
+  ColorPickerChannel: () => ColorPickerChannel,
+  ColorPickerChannels: () => ColorPickerChannels
+});
+module.exports = __toCommonJS(color_picker_channels_exports);
+var import_core = require("@yamada-ui/core");
+var import_input = require("@yamada-ui/input");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/use-color-picker.ts
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_eye_dropper = require("@yamada-ui/use-eye-dropper");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var [ColorPickerProvider, useColorPickerContext] = (0, import_utils.createContext)({
+  name: "ColorPickerContext",
+  errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorPicker />"`
+});
+
+// src/color-picker-channels.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ColorPickerChannels = (0, import_core.forwardRef)(
+  ({ className, channelProps, ...rest }, ref) => {
+    const { withAlpha, channels, getChannelProps, styles } = useColorPickerContext();
+    const css = {
+      display: "grid",
+      gridTemplateColumns: `repeat(${withAlpha ? "4" : "3"}, 1fr)`,
+      ...styles.channels
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-color-picker__channels", className),
+        __css: css,
+        ...rest,
+        children: channels.map(({ label, space, value, min, max }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ColorPickerChannel,
+          {
+            channelLabel: label,
+            ...getChannelProps({ ...channelProps, space, value, min, max })
+          },
+          label
+        ))
+      }
+    );
+  }
+);
+var ColorPickerChannel = (0, import_core.forwardRef)(
+  ({ className, channelLabel, ...rest }, ref) => {
+    const id = (0, import_react2.useId)();
+    let { size, disabled, readOnly, styles } = useColorPickerContext();
+    if (size === "full")
+      size = "lg";
+    const css = { ...styles.channel };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { className: (0, import_utils2.cx)("ui-color-picker__channel", className), children: [
+      channelLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.ui.label,
+        {
+          htmlFor: id,
+          style: { cursor: disabled ? "not-allowed" : void 0 },
+          __css: {
+            display: "block",
+            pointerEvents: readOnly ? "none" : void 0,
+            ...styles.channelLabel
+          },
+          children: channelLabel
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input.Input, { ref, id, size, __css: css, ...rest })
+    ] });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPickerChannel,
+  ColorPickerChannels
+});

package/dist/color-picker-channels.mjs

@@ -0,0 +1,10 @@
+import {
+  ColorPickerChannel,
+  ColorPickerChannels
+} from "./chunk-PVWIBTBL.mjs";
+import "./chunk-NR2XCTSD.mjs";
+import "./chunk-N2GG5L7Q.mjs";
+export {
+  ColorPickerChannel,
+  ColorPickerChannels
+};

package/dist/color-picker-eye-dropper.d.mts

@@ -0,0 +1,10 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { IconButtonProps } from '@yamada-ui/button';
+import { IconProps } from '@yamada-ui/icon';
+import { FC } from 'react';
+
+type ColorPickerEyeDropperProps = IconButtonProps;
+declare const ColorPickerEyeDropper: _yamada_ui_core.Component<"button", IconButtonProps>;
+declare const EyeDropperIcon: FC<IconProps>;
+
+export { ColorPickerEyeDropper, type ColorPickerEyeDropperProps, EyeDropperIcon };

package/dist/color-picker-eye-dropper.d.ts

@@ -0,0 +1,10 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { IconButtonProps } from '@yamada-ui/button';
+import { IconProps } from '@yamada-ui/icon';
+import { FC } from 'react';
+
+type ColorPickerEyeDropperProps = IconButtonProps;
+declare const ColorPickerEyeDropper: _yamada_ui_core.Component<"button", IconButtonProps>;
+declare const EyeDropperIcon: FC<IconProps>;
+
+export { ColorPickerEyeDropper, type ColorPickerEyeDropperProps, EyeDropperIcon };

package/dist/color-picker-eye-dropper.js

@@ -0,0 +1,88 @@
+"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/color-picker-eye-dropper.tsx
+var color_picker_eye_dropper_exports = {};
+__export(color_picker_eye_dropper_exports, {
+  ColorPickerEyeDropper: () => ColorPickerEyeDropper,
+  EyeDropperIcon: () => EyeDropperIcon
+});
+module.exports = __toCommonJS(color_picker_eye_dropper_exports);
+var import_button = require("@yamada-ui/button");
+var import_core = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/use-color-picker.ts
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_eye_dropper = require("@yamada-ui/use-eye-dropper");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var [ColorPickerProvider, useColorPickerContext] = (0, import_utils.createContext)({
+  name: "ColorPickerContext",
+  errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorPicker />"`
+});
+
+// src/color-picker-eye-dropper.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ColorPickerEyeDropper = (0, import_core.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__ */ (0, import_jsx_runtime.jsx)(
+    import_button.IconButton,
+    {
+      className: (0, import_utils2.cx)("ui-color-picker__eye-dropper", className),
+      variant: "outline",
+      size,
+      __css: css,
+      ...getEyeDropperProps(rest, ref),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeDropperIcon, { className: "ui-color-picker__eye-dropper__icon" })
+    }
+  );
+});
+var EyeDropperIcon = ({ ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_icon.Icon,
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m2 22 1-1h3l9-9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 21v-3l9-9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.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" })
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPickerEyeDropper,
+  EyeDropperIcon
+});

package/dist/color-picker-eye-dropper.mjs

@@ -0,0 +1,10 @@
+import {
+  ColorPickerEyeDropper,
+  EyeDropperIcon
+} from "./chunk-3EO2XBIZ.mjs";
+import "./chunk-NR2XCTSD.mjs";
+import "./chunk-N2GG5L7Q.mjs";
+export {
+  ColorPickerEyeDropper,
+  EyeDropperIcon
+};

package/dist/color-picker-sliders.d.mts

@@ -0,0 +1,30 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { ForwardedRef } from 'react';
+import { AlphaSliderProps } from './alpha-slider.mjs';
+import { HueSliderProps } from './hue-slider.mjs';
+import './use-color-slider.mjs';
+import '@yamada-ui/form-control';
+
+type ColorPickerSlidersOptions = {
+    /**
+     * Ref for the hue slider component.
+     */
+    hueSliderRef?: ForwardedRef<HTMLInputElement>;
+    /**
+     * Props for the hue slider component.
+     */
+    hueSliderProps?: Omit<HueSliderProps, "value" | "defaultValue">;
+    /**
+     * Ref for the alpha slider component.
+     */
+    alphaSliderRef?: ForwardedRef<HTMLInputElement>;
+    /**
+     * Props for the alpha slider component.
+     */
+    alphaSliderProps?: Omit<AlphaSliderProps, "value" | "defaultValue">;
+};
+type ColorPickerSlidersProps = Omit<HTMLUIProps<"div">, "children"> & ColorPickerSlidersOptions;
+declare const ColorPickerSliders: _yamada_ui_core.Component<"div", ColorPickerSlidersProps>;
+
+export { ColorPickerSliders, type ColorPickerSlidersProps };

package/dist/color-picker-sliders.d.ts

@@ -0,0 +1,30 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { ForwardedRef } from 'react';
+import { AlphaSliderProps } from './alpha-slider.js';
+import { HueSliderProps } from './hue-slider.js';
+import './use-color-slider.js';
+import '@yamada-ui/form-control';
+
+type ColorPickerSlidersOptions = {
+    /**
+     * Ref for the hue slider component.
+     */
+    hueSliderRef?: ForwardedRef<HTMLInputElement>;
+    /**
+     * Props for the hue slider component.
+     */
+    hueSliderProps?: Omit<HueSliderProps, "value" | "defaultValue">;
+    /**
+     * Ref for the alpha slider component.
+     */
+    alphaSliderRef?: ForwardedRef<HTMLInputElement>;
+    /**
+     * Props for the alpha slider component.
+     */
+    alphaSliderProps?: Omit<AlphaSliderProps, "value" | "defaultValue">;
+};
+type ColorPickerSlidersProps = Omit<HTMLUIProps<"div">, "children"> & ColorPickerSlidersOptions;
+declare const ColorPickerSliders: _yamada_ui_core.Component<"div", ColorPickerSlidersProps>;
+
+export { ColorPickerSliders, type ColorPickerSlidersProps };