@szum-tech/design-system/dist/chunk-X55H6LRX.cjs

Szum-Tech design system with tailwindcss support

'use strict';

var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
var React = require('react');
var radixUi = require('radix-ui');
var classVarianceAuthority = require('class-variance-authority');
var jsxRuntime = require('react/jsx-runtime');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);

var colorSwatchVariants = classVarianceAuthority.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__namespace.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 ? radixUi.Slot.Slot : "div";
  return /* @__PURE__ */ jsxRuntime.jsx(
    Primitive,
    {
      role: "img",
      "aria-label": ariaLabel,
      "aria-disabled": disabled || void 0,
      "data-disabled": disabled ? "" : void 0,
      "data-slot": "color-swatch",
      ...props,
      className: chunkH2BWO3SI_cjs.cn(colorSwatchVariants({ size }), className),
      style: {
        ...backgroundStyle,
        forcedColorAdjust: "none",
        ...style
      }
    }
  );
}

exports.ColorSwatch = ColorSwatch;