@yamada-ui/color-picker 1.0.0

package/dist/color-picker.mjs

@@ -0,0 +1,19 @@
+import {
+  ColorPicker
+} from "./chunk-EMWFECJD.mjs";
+import "./chunk-3KASGDAY.mjs";
+import "./chunk-MAHWFXUG.mjs";
+import "./chunk-73BVTMII.mjs";
+import "./chunk-PVWIBTBL.mjs";
+import "./chunk-3EO2XBIZ.mjs";
+import "./chunk-7QGCTVDG.mjs";
+import "./chunk-PTTNJPGJ.mjs";
+import "./chunk-U6OJ4TDG.mjs";
+import "./chunk-DTB2Z3IJ.mjs";
+import "./chunk-TFQ62YSQ.mjs";
+import "./chunk-3N443XSV.mjs";
+import "./chunk-NR2XCTSD.mjs";
+import "./chunk-N2GG5L7Q.mjs";
+export {
+  ColorPicker
+};

package/dist/color-swatch.d.mts

@@ -0,0 +1,36 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+
+type ColorSwatchOptions = {
+    /**
+     * The color used for the swatch element.
+     *
+     * @default "#ffffff00"
+     */
+    color?: string;
+    /**
+     * The overlay used for the swatch element.
+     */
+    overlays?: HTMLUIProps<"div">[];
+    /**
+     * If `true`, the swatch element has an inner `box-shadow`.
+     *
+     * @default true
+     */
+    withShadow?: boolean;
+    /**
+     * If `true`, the color swatch will be perfectly round. Else, it'll be slightly round.
+     *
+     * @default false
+     */
+    isRounded?: boolean;
+};
+type ColorSwatchProps = Omit<HTMLUIProps<"div">, "color"> & ThemeProps<"ColorSwatch"> & ColorSwatchOptions;
+/**
+ * `ColorSwatch` is a component that displays color samples.
+ *
+ * @see Docs https://yamada-ui.com/components/data-display/color-swatch
+ */
+declare const ColorSwatch: _yamada_ui_core.Component<"div", ColorSwatchProps>;
+
+export { ColorSwatch, type ColorSwatchProps };

package/dist/color-swatch.d.ts

@@ -0,0 +1,36 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+
+type ColorSwatchOptions = {
+    /**
+     * The color used for the swatch element.
+     *
+     * @default "#ffffff00"
+     */
+    color?: string;
+    /**
+     * The overlay used for the swatch element.
+     */
+    overlays?: HTMLUIProps<"div">[];
+    /**
+     * If `true`, the swatch element has an inner `box-shadow`.
+     *
+     * @default true
+     */
+    withShadow?: boolean;
+    /**
+     * If `true`, the color swatch will be perfectly round. Else, it'll be slightly round.
+     *
+     * @default false
+     */
+    isRounded?: boolean;
+};
+type ColorSwatchProps = Omit<HTMLUIProps<"div">, "color"> & ThemeProps<"ColorSwatch"> & ColorSwatchOptions;
+/**
+ * `ColorSwatch` is a component that displays color samples.
+ *
+ * @see Docs https://yamada-ui.com/components/data-display/color-swatch
+ */
+declare const ColorSwatch: _yamada_ui_core.Component<"div", ColorSwatchProps>;
+
+export { ColorSwatch, type ColorSwatchProps };

package/dist/color-swatch.js

@@ -0,0 +1,124 @@
+"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-swatch.tsx
+var color_swatch_exports = {};
+__export(color_swatch_exports, {
+  ColorSwatch: () => ColorSwatch
+});
+module.exports = __toCommonJS(color_swatch_exports);
+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
+      )) })
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorSwatch
+});

package/dist/color-swatch.mjs

@@ -0,0 +1,6 @@
+import {
+  ColorSwatch
+} from "./chunk-3N443XSV.mjs";
+export {
+  ColorSwatch
+};

package/dist/hue-slider.d.mts

@@ -0,0 +1,56 @@
+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 HueSliderOptions = {
+    /**
+     * 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 360
+     */
+    max?: number;
+    /**
+     * The step in which increments or decrements have to be made.
+     *
+     * @default 1
+     */
+    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">[];
+};
+/**
+ * `HueSlider` is a component used to allow the user to select a color hue.
+ *
+ * @see Docs https://yamada-ui.com/components/forms/hue-slider
+ */
+type HueSliderProps = ThemeProps<"HueSlider"> & Partial<UseColorSliderProps> & HueSliderOptions;
+declare const HueSlider: _yamada_ui_core.Component<"input", HueSliderProps>;
+
+export { HueSlider, type HueSliderProps };

package/dist/hue-slider.d.ts

@@ -0,0 +1,56 @@
+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 HueSliderOptions = {
+    /**
+     * 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 360
+     */
+    max?: number;
+    /**
+     * The step in which increments or decrements have to be made.
+     *
+     * @default 1
+     */
+    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">[];
+};
+/**
+ * `HueSlider` is a component used to allow the user to select a color hue.
+ *
+ * @see Docs https://yamada-ui.com/components/forms/hue-slider
+ */
+type HueSliderProps = ThemeProps<"HueSlider"> & Partial<UseColorSliderProps> & HueSliderOptions;
+declare const HueSlider: _yamada_ui_core.Component<"input", HueSliderProps>;
+
+export { HueSlider, type HueSliderProps };