@choice-ui/react 1.7.6 → 1.7.8

package/dist/components/colors/src/check-color-contrast/check-color-contrast-toolbar.js

@@ -0,0 +1,285 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "../../../button/dist/index.js";
+import { Dropdown as Dropdown2 } from "../../../dropdown/dist/index.js";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { Popover } from "../../../popover/dist/index.js";
+import { Tooltip } from "../../../tooltip/dist/index.js";
+import { Check, InteractionNone, SystemPreferences } from "@choiceform/icons-react";
+import { round } from "es-toolkit";
+import { useState, useMemo } from "react";
+import tinycolor from "tinycolor2";
+import { getEffectiveElementType, calculateContrastRatio } from "../utils/contrast-utils.js";
+import { getContrastThreshold } from "../utils/colors-convert.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { translation } from "../contents/translation.js";
+import { ColorSwatch } from "../color-swatch/color-swatch.js";
+const CheckColorContrastToolbar = (props) => {
+  const { className, checkColorContrast, onStandardHovered, applyRecommendedPoint, labels } = props;
+  const [showInfo, setShowInfo] = useState(false);
+  const colorInfo = useMemo(() => {
+    return {
+      bgColor: tinycolor(checkColorContrast == null ? void 0 : checkColorContrast.backgroundColor).toHex(),
+      fgColor: tinycolor(checkColorContrast == null ? void 0 : checkColorContrast.foregroundColor).toHex()
+    };
+  }, [checkColorContrast]);
+  const effectiveElementType = useMemo(
+    () => getEffectiveElementType(
+      checkColorContrast == null ? void 0 : checkColorContrast.category,
+      checkColorContrast == null ? void 0 : checkColorContrast.selectedElementType
+    ),
+    [checkColorContrast == null ? void 0 : checkColorContrast.category, checkColorContrast == null ? void 0 : checkColorContrast.selectedElementType]
+  );
+  const { contrastRatio, meetsStandard } = useMemo(() => {
+    const ratio = calculateContrastRatio(
+      (checkColorContrast == null ? void 0 : checkColorContrast.backgroundColor) ?? { r: 255, g: 255, b: 255 },
+      (checkColorContrast == null ? void 0 : checkColorContrast.foregroundColor) ?? { r: 0, g: 0, b: 0 },
+      (checkColorContrast == null ? void 0 : checkColorContrast.foregroundAlpha) ?? 1
+    );
+    const threshold = getContrastThreshold(
+      checkColorContrast == null ? void 0 : checkColorContrast.level,
+      checkColorContrast == null ? void 0 : checkColorContrast.category,
+      effectiveElementType
+    );
+    const roundedRatio = round(ratio, 2);
+    return { contrastRatio: roundedRatio, meetsStandard: ratio >= threshold };
+  }, [
+    checkColorContrast == null ? void 0 : checkColorContrast.backgroundColor,
+    checkColorContrast == null ? void 0 : checkColorContrast.foregroundColor,
+    checkColorContrast == null ? void 0 : checkColorContrast.foregroundAlpha,
+    checkColorContrast == null ? void 0 : checkColorContrast.level,
+    checkColorContrast == null ? void 0 : checkColorContrast.category,
+    effectiveElementType
+  ]);
+  const contrastInfo = (checkColorContrast == null ? void 0 : checkColorContrast.contrastInfo) !== void 0 ? checkColorContrast.contrastInfo : contrastRatio;
+  const getAADisplayText = () => {
+    if (effectiveElementType === "text") {
+      if ((checkColorContrast == null ? void 0 : checkColorContrast.category) === "large-text") {
+        return translation.colorContrast.level.AA.GRAPHICS;
+      } else {
+        return translation.colorContrast.level.AA.TEXT;
+      }
+    } else {
+      return translation.colorContrast.level.AA.GRAPHICS;
+    }
+  };
+  const getAAADisplayText = () => {
+    if (effectiveElementType === "text") {
+      if ((checkColorContrast == null ? void 0 : checkColorContrast.category) === "large-text") {
+        return translation.colorContrast.level.AAA.LARGE_TEXT;
+      } else {
+        return translation.colorContrast.level.AAA.TEXT;
+      }
+    } else {
+      return translation.colorContrast.level.AAA.GRAPHICS;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: tcx("flex h-10 items-center gap-1 border-b px-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: showInfo,
+        onOpenChange: setShowInfo,
+        placement: "left-start",
+        children: [
+          /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: (labels == null ? void 0 : labels.viewColorValues) ?? translation.colorContrast.VIEW_COLOR_VALUES,
+              placement: "top",
+              children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  className: "px-1",
+                  variant: "ghost",
+                  active: showInfo,
+                  onClick: () => setShowInfo(!showInfo),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "border-default-boundary flex items-center justify-center rounded-full border", children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 12 12",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /* @__PURE__ */ jsxs("g", { children: [
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z",
+                              fill: `#${colorInfo.bgColor}`
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2L6 6L6 10Z",
+                              fill: `#${colorInfo.fgColor}`
+                            }
+                          )
+                        ] })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("span", { children: contrastInfo }),
+                    /* @__PURE__ */ jsx("span", { className: "text-secondary-foreground", children: ": 1" })
+                  ]
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Popover.Content, { className: "flex flex-col gap-2 p-3", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-secondary-foreground", children: translation.colorContrast.BACKGROUND_COLOR }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                ColorSwatch,
+                {
+                  color: checkColorContrast == null ? void 0 : checkColorContrast.backgroundColor,
+                  className: "rounded-md",
+                  size: 16
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "uppercase", children: colorInfo.bgColor })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-secondary-foreground", children: translation.colorContrast.FOREGROUND_COLOR }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                ColorSwatch,
+                {
+                  color: checkColorContrast == null ? void 0 : checkColorContrast.foregroundColor,
+                  alpha: (checkColorContrast == null ? void 0 : checkColorContrast.foregroundAlpha) ?? 1,
+                  className: "rounded-md",
+                  size: 16
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "uppercase", children: colorInfo.fgColor })
+            ] })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-end gap-1", children: [
+      meetsStandard ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 border border-transparent px-1", children: [
+        /* @__PURE__ */ jsx(Check, {}),
+        /* @__PURE__ */ jsx("span", { className: "cursor-default", children: checkColorContrast == null ? void 0 : checkColorContrast.level })
+      ] }) : /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: (labels == null ? void 0 : labels.notMeetStandard) ?? translation.colorContrast.NOT_MEET_STANDARD,
+          placement: "top",
+          children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "px-1",
+              onMouseEnter: () => onStandardHovered == null ? void 0 : onStandardHovered(true),
+              onMouseLeave: () => onStandardHovered == null ? void 0 : onStandardHovered(false),
+              onClick: applyRecommendedPoint,
+              children: [
+                /* @__PURE__ */ jsx(InteractionNone, {}),
+                /* @__PURE__ */ jsx("span", { children: checkColorContrast == null ? void 0 : checkColorContrast.level })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dropdown2,
+        {
+          disabledNested: true,
+          selection: true,
+          children: [
+            /* @__PURE__ */ jsx(Dropdown2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                tooltip: {
+                  content: (labels == null ? void 0 : labels.contrastSettings) ?? translation.colorContrast.CONTRAST_SETTINGS,
+                  placement: "top"
+                },
+                children: /* @__PURE__ */ jsx(SystemPreferences, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Dropdown2.Content, { children: [
+              /* @__PURE__ */ jsx(Dropdown2.Label, { children: translation.colorContrast.category.LABEL }),
+              /* @__PURE__ */ jsx(
+                Dropdown2.Item,
+                {
+                  selected: (checkColorContrast == null ? void 0 : checkColorContrast.category) === "auto",
+                  onMouseUp: () => {
+                    var _a, _b;
+                    (_a = checkColorContrast == null ? void 0 : checkColorContrast.handleCategoryChange) == null ? void 0 : _a.call(checkColorContrast, "auto");
+                    if (((checkColorContrast == null ? void 0 : checkColorContrast.selectedElementType) ?? "graphics") === "graphics" && (checkColorContrast == null ? void 0 : checkColorContrast.level) === "AAA") {
+                      (_b = checkColorContrast == null ? void 0 : checkColorContrast.handleLevelChange) == null ? void 0 : _b.call(checkColorContrast, "AA");
+                    }
+                  },
+                  children: effectiveElementType === "text" ? translation.colorContrast.category.auto.TEXT : translation.colorContrast.category.auto.GRAPHICS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Dropdown2.Item,
+                {
+                  selected: (checkColorContrast == null ? void 0 : checkColorContrast.category) === "large-text",
+                  onMouseUp: () => {
+                    var _a;
+                    return (_a = checkColorContrast == null ? void 0 : checkColorContrast.handleCategoryChange) == null ? void 0 : _a.call(checkColorContrast, "large-text");
+                  },
+                  children: translation.colorContrast.category.LARGE_TEXT
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Dropdown2.Item,
+                {
+                  selected: (checkColorContrast == null ? void 0 : checkColorContrast.category) === "normal-text",
+                  onMouseUp: () => {
+                    var _a;
+                    return (_a = checkColorContrast == null ? void 0 : checkColorContrast.handleCategoryChange) == null ? void 0 : _a.call(checkColorContrast, "normal-text");
+                  },
+                  children: translation.colorContrast.category.NORMAL_TEXT
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Dropdown2.Item,
+                {
+                  selected: (checkColorContrast == null ? void 0 : checkColorContrast.category) === "graphics",
+                  onMouseUp: () => {
+                    var _a, _b;
+                    (_a = checkColorContrast == null ? void 0 : checkColorContrast.handleCategoryChange) == null ? void 0 : _a.call(checkColorContrast, "graphics");
+                    if ((checkColorContrast == null ? void 0 : checkColorContrast.level) === "AAA") {
+                      (_b = checkColorContrast == null ? void 0 : checkColorContrast.handleLevelChange) == null ? void 0 : _b.call(checkColorContrast, "AA");
+                    }
+                  },
+                  children: translation.colorContrast.category.GRAPHICS
+                }
+              ),
+              /* @__PURE__ */ jsx(Dropdown2.Label, { children: translation.colorContrast.level.LABEL }),
+              /* @__PURE__ */ jsx(
+                Dropdown2.Item,
+                {
+                  selected: (checkColorContrast == null ? void 0 : checkColorContrast.level) === "AA",
+                  onMouseUp: () => {
+                    var _a;
+                    return (_a = checkColorContrast == null ? void 0 : checkColorContrast.handleLevelChange) == null ? void 0 : _a.call(checkColorContrast, "AA");
+                  },
+                  children: getAADisplayText()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Dropdown2.Item,
+                {
+                  disabled: effectiveElementType === "graphics",
+                  selected: (checkColorContrast == null ? void 0 : checkColorContrast.level) === "AAA",
+                  onMouseUp: () => {
+                    var _a;
+                    return (_a = checkColorContrast == null ? void 0 : checkColorContrast.handleLevelChange) == null ? void 0 : _a.call(checkColorContrast, "AAA");
+                  },
+                  children: getAAADisplayText()
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  CheckColorContrastToolbar
+};

package/dist/components/colors/src/check-color-contrast/index.d.ts

@@ -0,0 +1,2 @@
+export * from './check-color-contrast-boundary';
+export * from './check-color-contrast-toolbar';

package/dist/components/colors/src/color-area/color-area.d.ts

@@ -0,0 +1,24 @@
+import { PickerAreaType, RGB } from '../types';
+interface Position {
+    x: number;
+    y: number;
+}
+export interface ColorAreaProps {
+    areaSize?: {
+        height?: number;
+        width?: number;
+    };
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    hue?: number;
+    onChange?: (position: Position) => void;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    position: Position;
+    thumbColor?: RGB;
+    thumbSize?: number;
+    type: PickerAreaType;
+}
+export declare const ColorArea: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<ColorAreaProps & import('react').RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/components/colors/src/color-area/color-area.js

@@ -0,0 +1,228 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clamp } from "es-toolkit";
+import { memo, forwardRef, useRef, useMemo, useCallback, useEffect } from "react";
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { useColors } from "../context/colots-context.js";
+import { ColorAreaTv } from "./tv.js";
+import { getColorAreaBackground } from "../utils/background.js";
+import { translation } from "../contents/translation.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
+const KEYBOARD_STEPS = {
+  NORMAL: 0.01,
+  SHIFT: 0.1
+};
+const ColorArea = memo(
+  forwardRef(function ColorArea2(props, ref) {
+    const {
+      position,
+      onChange,
+      onChangeStart,
+      onChangeEnd,
+      type,
+      hue = 0,
+      thumbColor = { r: 0, g: 0, b: 0 },
+      disabled = false,
+      className,
+      areaSize = { width: 256, height: 192 },
+      thumbSize = 28,
+      children
+    } = props;
+    const { colorProfile } = useColors();
+    const areaRef = useRef(null);
+    const thumbRef = useRef(null);
+    const inputRef = useRef(null);
+    const isDragging = useRef(false);
+    const backgroundStyle = useMemo(
+      () => getColorAreaBackground(type, hue, colorProfile),
+      [type, hue, colorProfile]
+    );
+    const updatePosition = useEventCallback((clientX, clientY, isEnd) => {
+      var _a;
+      const rect = (_a = areaRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      const newPosition = {
+        x: clamp((clientX - rect.left) / rect.width, 0, 1),
+        y: clamp(1 - (clientY - rect.top) / rect.height, 0, 1)
+      };
+      if (isEnd) {
+        isDragging.current = false;
+      } else {
+        onChange == null ? void 0 : onChange(newPosition);
+      }
+    });
+    const setupPointerListeners = useCallback(
+      (thumb) => {
+        const handleMove = (e) => {
+          requestAnimationFrame(() => {
+            if (!isDragging.current) return;
+            e.preventDefault();
+            updatePosition(e.clientX, e.clientY);
+          });
+        };
+        const handleUp = (e) => {
+          e.preventDefault();
+          if (thumb.hasPointerCapture(e.pointerId)) {
+            thumb.releasePointerCapture(e.pointerId);
+          }
+          updatePosition(e.clientX, e.clientY, true);
+          isDragging.current = false;
+          onChangeEnd == null ? void 0 : onChangeEnd();
+          window.removeEventListener("pointermove", handleMove);
+          window.removeEventListener("pointerup", handleUp);
+          window.removeEventListener("pointercancel", handleUp);
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+        window.addEventListener("pointercancel", handleUp);
+        return () => {
+          window.removeEventListener("pointermove", handleMove);
+          window.removeEventListener("pointerup", handleUp);
+          window.removeEventListener("pointercancel", handleUp);
+        };
+      },
+      [onChangeEnd, updatePosition]
+    );
+    const handlePointerDown = useCallback(
+      (e) => {
+        var _a;
+        if (disabled) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const thumb = thumbRef.current;
+        if (!thumb) return;
+        isDragging.current = true;
+        thumb.setPointerCapture(e.pointerId);
+        updatePosition(e.clientX, e.clientY);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        setupPointerListeners(thumb);
+      },
+      [disabled, updatePosition, setupPointerListeners]
+    );
+    const handleAreaPointerDown = useCallback(
+      (e) => {
+        var _a;
+        if (disabled || e.target === thumbRef.current) return;
+        e.preventDefault();
+        const thumb = thumbRef.current;
+        if (!thumb) return;
+        onChangeStart == null ? void 0 : onChangeStart();
+        isDragging.current = true;
+        thumb.setPointerCapture(e.pointerId);
+        updatePosition(e.clientX, e.clientY);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        setupPointerListeners(thumb);
+      },
+      [disabled, onChangeStart, updatePosition, setupPointerListeners]
+    );
+    const handleKeyDown = useEventCallback((e) => {
+      if (disabled) return;
+      const step = e.shiftKey ? KEYBOARD_STEPS.SHIFT : KEYBOARD_STEPS.NORMAL;
+      const { x, y } = position;
+      const keyboardActions = {
+        ArrowLeft: () => ({ x: x - step, y }),
+        ArrowRight: () => ({ x: x + step, y }),
+        ArrowUp: () => ({ x, y: y + step }),
+        ArrowDown: () => ({ x, y: y - step })
+      };
+      const action = keyboardActions[e.key];
+      if (!action) return;
+      e.preventDefault();
+      const newPosition = action();
+      const clampedPosition = {
+        x: clamp(newPosition.x, 0, 1),
+        y: clamp(newPosition.y, 0, 1)
+      };
+      if (clampedPosition.x !== x || clampedPosition.y !== y) {
+        onChange == null ? void 0 : onChange(clampedPosition);
+      }
+    });
+    useEffect(() => {
+      var _a;
+      if (disabled && document.activeElement === inputRef.current) {
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      }
+    }, [disabled]);
+    const thumbStyle = useMemo(() => {
+      return {
+        width: thumbSize,
+        height: thumbSize,
+        transform: `
+        translate(
+          ${position.x * ((areaSize == null ? void 0 : areaSize.width) ?? 0) - thumbSize / 2}px,
+          ${(1 - position.y) * ((areaSize == null ? void 0 : areaSize.height) ?? 0) - thumbSize / 2}px)
+      `,
+        willChange: isDragging.current ? "transform" : "auto"
+      };
+    }, [position.x, position.y, areaSize, thumbSize]);
+    const gradientStyle = useMemo(
+      () => ({
+        forcedColorAdjust: "none",
+        width: areaSize.width,
+        height: areaSize.height,
+        ...backgroundStyle
+      }),
+      [areaSize.width, areaSize.height, backgroundStyle]
+    );
+    const styles = ColorAreaTv({ disabled });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: mergeRefs(ref, areaRef),
+        onPointerDown: handleAreaPointerDown,
+        role: "presentation",
+        style: gradientStyle,
+        className: tcx(styles.root(), className),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: thumbRef,
+              onPointerDown: handlePointerDown,
+              className: styles.thumbWrapper(),
+              style: thumbStyle,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles.thumb(),
+                  style: {
+                    width: thumbSize / 2,
+                    height: thumbSize / 2,
+                    backgroundColor: tinycolor({
+                      r: thumbColor.r,
+                      g: thumbColor.g,
+                      b: thumbColor.b
+                    }).toRgbString(),
+                    boxShadow: `
+              inset 0 0 0 3px white,
+              inset 0 0 0 4px rgba(0,0,0,0.2),
+              0 0 0 1px rgba(0,0,0,0.2)
+            `
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: inputRef,
+                      type: "text",
+                      onKeyDown: handleKeyDown,
+                      className: styles.thumbInput(),
+                      "aria-label": translation.area.ARIA_LABEL,
+                      tabIndex: disabled ? -1 : 0,
+                      readOnly: true
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  })
+);
+ColorArea.displayName = "ColorArea";
+export {
+  ColorArea
+};

package/dist/components/colors/src/color-area/index.d.ts

@@ -0,0 +1 @@
+export * from './color-area';

package/dist/components/colors/src/color-area/tv.d.ts

@@ -0,0 +1,34 @@
+export declare const ColorAreaTv: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    thumbWrapper: string;
+    thumb: string;
+    thumbInput: string;
+}, undefined, {
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    thumbWrapper: string;
+    thumb: string;
+    thumbInput: string;
+}, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    thumbWrapper: string;
+    thumb: string;
+    thumbInput: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/color-area/tv.js

@@ -0,0 +1,22 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const ColorAreaTv = tcv({
+  slots: {
+    root: "relative touch-none select-none",
+    thumbWrapper: "pointer-events-none relative z-2 box-border flex items-center justify-center",
+    thumb: "absolute origin-center rounded-full",
+    thumbInput: "absolute inset-0 cursor-default opacity-0"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "saturate-0"
+      }
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+export {
+  ColorAreaTv
+};

package/dist/components/colors/src/color-channel-field/color-channel-field.d.ts

@@ -0,0 +1,22 @@
+import { ChannelFieldFeature, ChannelFieldSpace, HSB, HSL, RGB } from '../types/colors';
+import { ColorChannelLabels } from '../types/paint';
+export interface ColorChannelFieldProps {
+    alpha?: number;
+    className?: string;
+    colorSpace?: ChannelFieldSpace;
+    defaultColorSpace?: ChannelFieldSpace;
+    disabled?: boolean;
+    features?: ChannelFieldFeature;
+    hsb?: HSB;
+    hsl?: HSL;
+    labels?: ColorChannelLabels;
+    onAlphaChange?: (alpha: number) => void;
+    onAlphaChangeEnd?: () => void;
+    onAlphaChangeStart?: () => void;
+    onChangeColorSpace?: (colorSpace: ChannelFieldSpace) => void;
+    onHsbChange?: (hsb: HSB) => void;
+    onHslChange?: (hsl: HSL) => void;
+    onRgbChange?: (rgb: RGB) => void;
+    rgb?: RGB;
+}
+export declare const ColorChannelField: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<ColorChannelFieldProps & import('react').RefAttributes<HTMLDivElement>>>;