color-swatch

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