@yamada-ui/color-picker 1.0.0

package/dist/color-picker-swatches.js

@@ -0,0 +1,195 @@
+"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-swatches.tsx
+var color_picker_swatches_exports = {};
+__export(color_picker_swatches_exports, {
+  ColorPickerSwatches: () => ColorPickerSwatches
+});
+module.exports = __toCommonJS(color_picker_swatches_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils3 = require("@yamada-ui/utils");
+
+// src/color-swatch.tsx
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultOverlays = (background, 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"]
+        }
+      ]
+    },
+    { background }
+  ];
+  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 ColorSwatch = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("ColorSwatch", props);
+  const {
+    className,
+    color = "#ffffff00",
+    withShadow = true,
+    overlays = defaultOverlays(color, withShadow),
+    isRounded,
+    __css,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const css = {
+    position: "relative",
+    _before: {
+      content: `""`,
+      display: "block",
+      h: 0,
+      pb: "100%"
+    },
+    "& > *": {
+      overflow: "hidden",
+      position: "absolute",
+      top: "0",
+      right: "0",
+      bottom: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      w: "100%",
+      h: "100%"
+    },
+    ...styles.container,
+    ...__css
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.div,
+    {
+      ref,
+      className: (0, import_utils.cx)("ui-color-swatch", className),
+      ...isRounded ? { rounded: "full" } : {},
+      __css: css,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ...isRounded ? { rounded: "full" } : {}, children: overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.ui.div,
+        {
+          __css: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ...styles.overlay
+          },
+          ...isRounded ? { rounded: "full" } : {},
+          ...props2
+        },
+        index
+      )) })
+    }
+  );
+});
+
+// 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_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
+var [ColorPickerProvider, useColorPickerContext] = (0, import_utils2.createContext)({
+  name: "ColorPickerContext",
+  errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorPicker />"`
+});
+
+// src/color-picker-swatches.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ColorPickerSwatches = (0, import_core2.forwardRef)(
+  ({
+    className,
+    swatchesLabel,
+    swatches,
+    swatchesContainerProps,
+    swatchProps,
+    swatchesColumns,
+    ...rest
+  }, ref) => {
+    const { getSwatchProps, readOnly, styles } = useColorPickerContext();
+    const css = {
+      display: "grid",
+      gridTemplateColumns: (0, import_utils3.replaceObject)(
+        swatchesColumns,
+        (value) => value != null ? `repeat(${value}, minmax(0, 1fr))` : void 0
+      ),
+      ...styles.swatches
+    };
+    return (swatches == null ? void 0 : swatches.length) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.ui.div, { ...swatchesContainerProps, children: [
+      swatchesLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_core2.ui.p,
+        {
+          className: "ui-color-picker__swatches__label",
+          __css: { ...styles.swatchesLabel },
+          children: swatchesLabel
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_core2.ui.div,
+        {
+          ref,
+          className: (0, import_utils3.cx)("ui-color-picker__swatches", className),
+          __css: css,
+          ...rest,
+          children: swatches.map((color) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ColorSwatch,
+            {
+              as: "button",
+              __css: {
+                boxSize: "full",
+                pointerEvents: readOnly ? "none" : void 0,
+                ...styles.swatch
+              },
+              ...getSwatchProps({ color, ...swatchProps })
+            },
+            color
+          ))
+        }
+      )
+    ] }) : null;
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPickerSwatches
+});

package/dist/color-picker-swatches.mjs

@@ -0,0 +1,9 @@
+import {
+  ColorPickerSwatches
+} from "./chunk-TFQ62YSQ.mjs";
+import "./chunk-3N443XSV.mjs";
+import "./chunk-NR2XCTSD.mjs";
+import "./chunk-N2GG5L7Q.mjs";
+export {
+  ColorPickerSwatches
+};

package/dist/color-picker.d.mts

@@ -0,0 +1,59 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
+import { ForwardedRef } from 'react';
+import { ColorPickerBodyProps } from './color-picker-body.mjs';
+import { ColorPickerSwatchesProps } from './color-picker-swatches.mjs';
+import { SaturationSliderProps } from './saturation-slider.mjs';
+import { UseColorPickerProps } from './use-color-picker.mjs';
+import './color-picker-eye-dropper.mjs';
+import '@yamada-ui/button';
+import '@yamada-ui/icon';
+import './color-picker-sliders.mjs';
+import './alpha-slider.mjs';
+import './use-color-slider.mjs';
+import '@yamada-ui/form-control';
+import './hue-slider.mjs';
+import './color-swatch.mjs';
+import './use-saturation-slider.mjs';
+import '@yamada-ui/input';
+import '@yamada-ui/utils';
+
+type ColorPickerOptions = {
+    /**
+     * If `true`, display the saturation, hue, alpha, channels and eye dropper component.
+     *
+     * @default true
+     */
+    withPicker?: boolean;
+    /**
+     * If `true`, display the channels component.
+     *
+     * @default true
+     */
+    withChannel?: boolean;
+    /**
+     * Props for the color picker input element.
+     */
+    inputProps?: HTMLUIProps<"input">;
+    /**
+     * Ref for the saturation slider component.
+     */
+    saturationSliderRef?: ForwardedRef<HTMLInputElement>;
+    /**
+     * Props for the saturation slider component.
+     */
+    saturationSliderProps?: Omit<SaturationSliderProps, "value" | "defaultValue">;
+    /**
+     * Props for the swatches component.
+     */
+    swatchesProps?: ColorPickerSwatchesProps;
+};
+type ColorPickerProps = ThemeProps<"ColorPicker"> & UseColorPickerProps & ColorPickerOptions & Pick<ColorPickerBodyProps, "withResult" | "withEyeDropper" | "eyeDropperRef" | "eyeDropperProps" | "hueSliderRef" | "hueSliderProps" | "alphaSliderRef" | "alphaSliderProps"> & Pick<ColorPickerSwatchesProps, "swatchesLabel" | "swatches" | "swatchesColumns" | "swatchProps">;
+/**
+ * `ColorPicker` is a component used by the user to select a color.
+ *
+ * @see Docs https://yamada-ui.com/components/forms/color-picker
+ */
+declare const ColorPicker: _yamada_ui_core.Component<"input", ColorPickerProps>;
+
+export { ColorPicker, type ColorPickerProps };

package/dist/color-picker.d.ts

@@ -0,0 +1,59 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
+import { ForwardedRef } from 'react';
+import { ColorPickerBodyProps } from './color-picker-body.js';
+import { ColorPickerSwatchesProps } from './color-picker-swatches.js';
+import { SaturationSliderProps } from './saturation-slider.js';
+import { UseColorPickerProps } from './use-color-picker.js';
+import './color-picker-eye-dropper.js';
+import '@yamada-ui/button';
+import '@yamada-ui/icon';
+import './color-picker-sliders.js';
+import './alpha-slider.js';
+import './use-color-slider.js';
+import '@yamada-ui/form-control';
+import './hue-slider.js';
+import './color-swatch.js';
+import './use-saturation-slider.js';
+import '@yamada-ui/input';
+import '@yamada-ui/utils';
+
+type ColorPickerOptions = {
+    /**
+     * If `true`, display the saturation, hue, alpha, channels and eye dropper component.
+     *
+     * @default true
+     */
+    withPicker?: boolean;
+    /**
+     * If `true`, display the channels component.
+     *
+     * @default true
+     */
+    withChannel?: boolean;
+    /**
+     * Props for the color picker input element.
+     */
+    inputProps?: HTMLUIProps<"input">;
+    /**
+     * Ref for the saturation slider component.
+     */
+    saturationSliderRef?: ForwardedRef<HTMLInputElement>;
+    /**
+     * Props for the saturation slider component.
+     */
+    saturationSliderProps?: Omit<SaturationSliderProps, "value" | "defaultValue">;
+    /**
+     * Props for the swatches component.
+     */
+    swatchesProps?: ColorPickerSwatchesProps;
+};
+type ColorPickerProps = ThemeProps<"ColorPicker"> & UseColorPickerProps & ColorPickerOptions & Pick<ColorPickerBodyProps, "withResult" | "withEyeDropper" | "eyeDropperRef" | "eyeDropperProps" | "hueSliderRef" | "hueSliderProps" | "alphaSliderRef" | "alphaSliderProps"> & Pick<ColorPickerSwatchesProps, "swatchesLabel" | "swatches" | "swatchesColumns" | "swatchProps">;
+/**
+ * `ColorPicker` is a component used by the user to select a color.
+ *
+ * @see Docs https://yamada-ui.com/components/forms/color-picker
+ */
+declare const ColorPicker: _yamada_ui_core.Component<"input", ColorPickerProps>;
+
+export { ColorPicker, type ColorPickerProps };