@yamada-ui/color-picker 1.0.0

package/dist/chunk-U6OJ4TDG.mjs

@@ -0,0 +1,127 @@
+import {
+  useColorSlider
+} from "./chunk-DTB2Z3IJ.mjs";
+
+// src/alpha-slider.tsx
+import {
+  ui,
+  forwardRef,
+  omitThemeProps,
+  useMultiComponentStyle
+} from "@yamada-ui/core";
+import { alphaToHex, convertColor, cx } from "@yamada-ui/utils";
+import { jsx, jsxs } from "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, ${convertColor(color)("hex") + alphaToHex(min)}, ${convertColor(color)("hex") + 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 = forwardRef(
+  (props, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle("AlphaSlider", props);
+    const {
+      className,
+      inputProps,
+      trackProps,
+      thumbProps,
+      color = "#ffffff",
+      min = 0,
+      max = 1,
+      withShadow = true,
+      overlays = defaultOverlays(color, min, max, withShadow),
+      __css,
+      ...computedProps
+    } = 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__ */ jsxs(
+      ui.div,
+      {
+        className: cx("ui-alpha-slider", className),
+        __css: css,
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ jsx(ui.input, { ...getInputProps(inputProps, ref) }),
+          overlays.map((props2, index) => /* @__PURE__ */ jsx(
+            ui.div,
+            {
+              className: "ui-alpha-slider__overlay",
+              __css: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                ...styles.overlay
+              },
+              ...props2
+            },
+            index
+          )),
+          /* @__PURE__ */ jsx(
+            ui.div,
+            {
+              className: "ui-alpha-slider__track",
+              __css: {
+                position: "relative",
+                w: "full",
+                h: "full",
+                ...styles.track
+              },
+              ...getTrackProps(trackProps),
+              children: /* @__PURE__ */ jsx(
+                ui.div,
+                {
+                  className: "ui-alpha-slider__thumb",
+                  __css: { ...styles.thumb },
+                  ...getThumbProps(thumbProps)
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  AlphaSlider
+};

package/dist/color-input.d.mts

@@ -0,0 +1,79 @@
+import './color-picker.mjs';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
+import { PortalProps } from '@yamada-ui/portal';
+import { ColorSwatchProps } from './color-swatch.mjs';
+import { UseColorInputProps } from './use-color-input.mjs';
+import './hue-slider.mjs';
+import './alpha-slider.mjs';
+import './saturation-slider.mjs';
+import './use-saturation-slider.mjs';
+import 'react';
+import './color-picker-body.mjs';
+import './color-picker-eye-dropper.mjs';
+import '@yamada-ui/button';
+import '@yamada-ui/icon';
+import './color-picker-sliders.mjs';
+import './use-color-slider.mjs';
+import '@yamada-ui/form-control';
+import './color-picker-swatches.mjs';
+import './use-color-picker.mjs';
+import '@yamada-ui/input';
+import '@yamada-ui/utils';
+import '@yamada-ui/popover';
+
+type ColorInputOptions = {
+    /**
+     * If `true`, display the color swatch component.
+     *
+     * @default true
+     */
+    withSwatch?: boolean;
+    /**
+     * If `true`, display the eye dropper component.
+     *
+     * @default true
+     */
+    withEyeDropper?: boolean;
+    /**
+     * The border color when the input is focused.
+     */
+    focusBorderColor?: string;
+    /**
+     * The border color when the input is invalid.
+     */
+    errorBorderColor?: string;
+    /**
+     * Props for color input container element.
+     */
+    containerProps?: Omit<HTMLUIProps<"div">, "children">;
+    /**
+     * Props for color input element.
+     */
+    inputProps?: HTMLUIProps<"input">;
+    /**
+     * Props for color swatch component.
+     */
+    swatchProps?: ColorInputSwatchProps;
+    /**
+     * Props for color eye dropper component.
+     */
+    eyeDropperProps?: ColorInputEyeDropperProps;
+    /**
+     * Props to be forwarded to the portal component.
+     *
+     * @default '{ isDisabled: true }'
+     */
+    portalProps?: Omit<PortalProps, "children">;
+};
+type ColorInputProps = ThemeProps<"ColorInput"> & UseColorInputProps & ColorInputOptions;
+/**
+ * `ColorInput` is a component used by the user to select a color or enter an arbitrary color value.
+ *
+ * @see Docs https://yamada-ui.com/components/forms/color-input
+ */
+declare const ColorInput: _yamada_ui_core.Component<"input", ColorInputProps>;
+type ColorInputSwatchProps = ColorSwatchProps;
+type ColorInputEyeDropperProps = HTMLUIProps<"button">;
+
+export { ColorInput, type ColorInputProps };

package/dist/color-input.d.ts

@@ -0,0 +1,79 @@
+import './color-picker.js';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
+import { PortalProps } from '@yamada-ui/portal';
+import { ColorSwatchProps } from './color-swatch.js';
+import { UseColorInputProps } from './use-color-input.js';
+import './hue-slider.js';
+import './alpha-slider.js';
+import './saturation-slider.js';
+import './use-saturation-slider.js';
+import 'react';
+import './color-picker-body.js';
+import './color-picker-eye-dropper.js';
+import '@yamada-ui/button';
+import '@yamada-ui/icon';
+import './color-picker-sliders.js';
+import './use-color-slider.js';
+import '@yamada-ui/form-control';
+import './color-picker-swatches.js';
+import './use-color-picker.js';
+import '@yamada-ui/input';
+import '@yamada-ui/utils';
+import '@yamada-ui/popover';
+
+type ColorInputOptions = {
+    /**
+     * If `true`, display the color swatch component.
+     *
+     * @default true
+     */
+    withSwatch?: boolean;
+    /**
+     * If `true`, display the eye dropper component.
+     *
+     * @default true
+     */
+    withEyeDropper?: boolean;
+    /**
+     * The border color when the input is focused.
+     */
+    focusBorderColor?: string;
+    /**
+     * The border color when the input is invalid.
+     */
+    errorBorderColor?: string;
+    /**
+     * Props for color input container element.
+     */
+    containerProps?: Omit<HTMLUIProps<"div">, "children">;
+    /**
+     * Props for color input element.
+     */
+    inputProps?: HTMLUIProps<"input">;
+    /**
+     * Props for color swatch component.
+     */
+    swatchProps?: ColorInputSwatchProps;
+    /**
+     * Props for color eye dropper component.
+     */
+    eyeDropperProps?: ColorInputEyeDropperProps;
+    /**
+     * Props to be forwarded to the portal component.
+     *
+     * @default '{ isDisabled: true }'
+     */
+    portalProps?: Omit<PortalProps, "children">;
+};
+type ColorInputProps = ThemeProps<"ColorInput"> & UseColorInputProps & ColorInputOptions;
+/**
+ * `ColorInput` is a component used by the user to select a color or enter an arbitrary color value.
+ *
+ * @see Docs https://yamada-ui.com/components/forms/color-input
+ */
+declare const ColorInput: _yamada_ui_core.Component<"input", ColorInputProps>;
+type ColorInputSwatchProps = ColorSwatchProps;
+type ColorInputEyeDropperProps = HTMLUIProps<"button">;
+
+export { ColorInput, type ColorInputProps };