color-swatch

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva, type VariantProps } from "class-variance-authority";
6import * as React from "react";
7import { cn } from "@/lib/utils";
8 
9const colorSwatchVariants = cva(
10  "box-border rounded-sm border bg-clip-padding shadow-sm data-disabled:pointer-events-none data-disabled:opacity-50",
11  {
12    variants: {
13      size: {
14        default: "size-8",
15        sm: "size-6",
16        lg: "size-12",
17      },
18    },
19    defaultVariants: {
20      size: "default",
21    },
22  },
23);
24 
25function getIsCssColor(v: string): boolean {
26  try {
27    return typeof CSS !== "undefined" && typeof CSS.supports === "function"
28      ? CSS.supports("color", v)
29      : true;
30  } catch {
31    return false;
32  }
33}
34 
35function getHasAlpha(v: string): boolean {
36  const s = v.trim().toLowerCase();
37 
38  if (s === "transparent") return true;
39 
40  if (/^#(?:[0-9a-f]{4}|[0-9a-f]{8})$/i.test(s)) return true;
41 
42  if (/\b(?:rgba|hsla)\s*\(/i.test(s)) return true;
43 
44  if (
45    /\b(?:rgb|hsl|lab|lch|oklab|oklch|color)\s*\([^)]*\/\s*[\d.]+%?\s*\)/i.test(
46      s,
47    )
48  ) {
49    return true;
50  }
51 
52  return false;
53}
54 
55interface ColorSwatchProps
56  extends Omit<React.ComponentProps<"div">, "children">,
57    VariantProps<typeof colorSwatchVariants>,
58    useRender.ComponentProps<"div"> {
59  color?: string;
60  disabled?: boolean;
61  withoutTransparency?: boolean;
62}
63 
64function ColorSwatch({
65  color,
66  size = "default",
67  disabled = false,
68  withoutTransparency = false,
69  className,
70  style,
71  render,
72  ...props
73}: ColorSwatchProps) {
74  const colorValue = color?.trim();
75 
76  const backgroundStyle = React.useMemo<React.CSSProperties>(() => {
77    if (!colorValue) {
78      return {
79        background:
80          "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat",
81      };
82    }
83 
84    if (!getIsCssColor(colorValue)) {
85      return { backgroundColor: "transparent" };
86    }
87 
88    if (!withoutTransparency && getHasAlpha(colorValue)) {
89      return {
90        background: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 10px 10px`,
91      };
92    }
93 
94    return { backgroundColor: colorValue };
95  }, [colorValue, withoutTransparency]);
96 
97  const ariaLabel = !colorValue
98    ? "No color selected"
99    : `Color swatch: ${colorValue}`;
100 
101  return useRender({
102// … truncated