@szum-tech/design-system/dist/chunk-3BLXG7ET.js

Szum-Tech design system with tailwindcss support

import { cn } from './chunk-ZD2QRAOX.js';
import * as React from 'react';
import { Slot } from 'radix-ui';
import { cva } from 'class-variance-authority';
import { jsx } from 'react/jsx-runtime';

var colorSwatchVariants = cva(
  "border-border box-border rounded border shadow-sm [background-clip:padding-box] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
  {
    variants: {
      size: {
        default: "size-8",
        sm: "size-6",
        lg: "size-12"
      }
    },
    defaultVariants: {
      size: "default"
    }
  }
);

// src/components/color-swatch/color-swatch.utils.ts
function getIsCssColor(v) {
  try {
    return typeof CSS !== "undefined" && typeof CSS.supports === "function" ? CSS.supports("color", v) : true;
  } catch {
    return false;
  }
}
function getHasAlpha(v) {
  const s = v.trim().toLowerCase();
  if (s === "transparent") return true;
  if (/^#(?:[0-9a-f]{4}|[0-9a-f]{8})$/i.test(s)) return true;
  if (/\b(?:rgba|hsla)\s*\(/i.test(s)) return true;
  return /\b(?:rgb|hsl|lab|lch|oklab|oklch|color)\s*\([^)]*\/\s*[\d.]+%?\s*\)/i.test(s);
}
function ColorSwatch({
  color,
  size = "default",
  asChild = false,
  disabled = false,
  withoutTransparency = false,
  className,
  style,
  ...props
}) {
  const colorValue = color?.trim();
  const backgroundStyle = React.useMemo(() => {
    if (!colorValue) {
      return {
        background: "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat"
      };
    }
    if (!getIsCssColor(colorValue)) {
      return { backgroundColor: "transparent" };
    }
    if (!withoutTransparency && getHasAlpha(colorValue)) {
      return {
        background: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 10px 10px`
      };
    }
    return { backgroundColor: colorValue };
  }, [colorValue, withoutTransparency]);
  const ariaLabel = !colorValue ? "No color selected" : `Color swatch: ${colorValue}`;
  const Primitive = asChild ? Slot.Slot : "div";
  return /* @__PURE__ */ jsx(
    Primitive,
    {
      role: "img",
      "aria-label": ariaLabel,
      "aria-disabled": disabled || void 0,
      "data-disabled": disabled ? "" : void 0,
      "data-slot": "color-swatch",
      ...props,
      className: cn(colorSwatchVariants({ size }), className),
      style: {
        ...backgroundStyle,
        forcedColorAdjust: "none",
        ...style
      }
    }
  );
}

export { ColorSwatch };