@hoardodile/ui 0.1.6 → 0.1.8

package/dist/components/tag-chip.js

@@ -1,622 +1,11 @@
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-import { forwardRef, cloneElement, useId } from 'react';
+import { resolveTagChipSurface } from '../chunk-2DTR6CD5.js';
+import '../chunk-AEHTAUAQ.js';
+import { SpecialTagSurface } from '../chunk-GKSX5ULZ.js';
+import { cn } from '../chunk-M5OJN54O.js';
+import '../chunk-2HWSCY4T.js';
+import { forwardRef, cloneElement } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-// src/lib/utils.ts
-var mergeTheme = {
-  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
-  spacing: ["chip", "control", "nav", "sidebar", "panel"],
-  tracking: ["label"],
-  shadow: ["card", "dialog"],
-  container: ["reading", "medium", "content"],
-  font: ["doc", "heading"],
-  ease: ["standard"],
-  animate: ["skel", "pop"]
-};
-var twMerge = extendTailwindMerge({
-  extend: { theme: mergeTheme }
-});
-
-// src/lib/utils.ts
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function GoldSurface({
-  id,
-  active
-}) {
-  const gradientId = `${id}-gold-gradient`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: cn(
-        "size-full",
-        !active && "[filter:brightness(1.1)] group-hover:[filter:brightness(1.16)]"
-      ),
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 100 100",
-      preserveAspectRatio: "none",
-      children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-          "linearGradient",
-          {
-            id: gradientId,
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "0%",
-            gradientTransform: "rotate(30, 0.5, 0.5)",
-            children: [
-              /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: "#daa520" }),
-              /* @__PURE__ */ jsx("stop", { offset: "30%", stopColor: "#ffd700" }),
-              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#f0e68c" }),
-              /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "#ffd700" }),
-              /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: "#daa520" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "100",
-            height: "100",
-            fill: active ? "#8a6d1f" : `url(#${gradientId})`
-          }
-        ),
-        !active && /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0",
-            y: "0",
-            width: "100",
-            height: "8",
-            fill: "#ffffff",
-            opacity: "0.12"
-          }
-        )
-      ]
-    }
-  );
-}
-var goldConfig = {
-  render: GoldSurface,
-  default: {
-    style: {
-      color: "#725603",
-      boxShadow: "inset 0 0 0 1px rgba(114, 86, 3, 0.2)"
-    }
-  },
-  active: {
-    style: {
-      color: "#ffffff"
-    }
-  }
-};
-function KintsugiSurface({
-  id,
-  active
-}) {
-  if (active) {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        className: cn(
-          "size-full",
-          !active && "[filter:brightness(1.02)] group-hover:[filter:brightness(1.06)]"
-        ),
-        width: "100%",
-        height: "100%",
-        viewBox: "0 0 100 100",
-        preserveAspectRatio: "none",
-        children: /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#9a9a8a" })
-      }
-    );
-  }
-  const goldGradientId = `${id}-kintsugi-gold`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: cn(
-        "size-full",
-        !active && "[filter:brightness(1.02)] group-hover:[filter:brightness(1.06)]"
-      ),
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 100 100",
-      preserveAspectRatio: "none",
-      children: [
-        /* @__PURE__ */ jsx("style", { children: `
-				@keyframes ${id}-gold-shimmer {
-					0% { stroke-dashoffset: 60; }
-					100% { stroke-dashoffset: 0; }
-				}
-				.${id}-gold-vein {
-					stroke-dasharray: 30 30;
-					animation: ${id}-gold-shimmer 5s linear infinite;
-				}
-				@media (prefers-reduced-motion: reduce) {
-					.${id}-gold-vein {
-						animation: none;
-					}
-				}
-			` }),
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: goldGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#b8860b" }),
-          /* @__PURE__ */ jsx("stop", { offset: "35%", stopColor: "#ffd700" }),
-          /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#fffacd" }),
-          /* @__PURE__ */ jsx("stop", { offset: "65%", stopColor: "#ffd700" }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#b8860b" })
-        ] }) }),
-        /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#d8d4c5" }),
-        /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#b8c4b8", opacity: "0.35" }),
-        /* @__PURE__ */ jsx("ellipse", { cx: "30", cy: "25", rx: "40", ry: "25", fill: "#ffffff", opacity: "0.08" }),
-        /* @__PURE__ */ jsx("ellipse", { cx: "75", cy: "70", rx: "35", ry: "28", fill: "#000000", opacity: "0.04" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M 5 20 Q 25 22 35 45 T 60 80",
-            fill: "none",
-            stroke: "#5a5650",
-            strokeWidth: "0.7",
-            opacity: "0.45"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M 80 10 Q 70 35 85 55 T 55 95",
-            fill: "none",
-            stroke: "#5a5650",
-            strokeWidth: "0.6",
-            opacity: "0.40"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M 10 70 Q 30 68 45 55 T 75 45",
-            fill: "none",
-            stroke: "#5a5650",
-            strokeWidth: "0.5",
-            opacity: "0.38"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: `${id}-gold-vein`,
-            d: "M 4 18 Q 24 20 34 43 T 58 78",
-            fill: "none",
-            stroke: `url(#${goldGradientId})`,
-            strokeWidth: "1.4",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: `${id}-gold-vein`,
-            d: "M 82 8 Q 72 33 87 53 T 53 93",
-            fill: "none",
-            stroke: `url(#${goldGradientId})`,
-            strokeWidth: "1.2",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: `${id}-gold-vein`,
-            d: "M 8 68 Q 28 66 43 53 T 73 43",
-            fill: "none",
-            stroke: `url(#${goldGradientId})`,
-            strokeWidth: "1.0",
-            strokeLinecap: "round"
-          }
-        )
-      ]
-    }
-  );
-}
-var kintsugiConfig = {
-  render: KintsugiSurface,
-  default: {
-    style: {
-      color: "#4a4030",
-      boxShadow: "inset 0 0 0 1px rgba(74, 64, 48, 0.12)"
-    }
-  },
-  active: {
-    style: {
-      color: "#ffffff"
-    }
-  }
-};
-function OilslickSurface({
-  id,
-  active
-}) {
-  if (active) {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        className: cn(
-          "size-full",
-          !active && "[filter:saturate(1.15)] group-hover:[filter:saturate(1.3)_brightness(1.08)]"
-        ),
-        width: "100%",
-        height: "100%",
-        viewBox: "0 0 100 100",
-        preserveAspectRatio: "none",
-        children: /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#1a1a2e" })
-      }
-    );
-  }
-  const gradientA = `${id}-oilslick-a`;
-  const gradientB = `${id}-oilslick-b`;
-  const gradientC = `${id}-oilslick-c`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: cn(
-        "size-full",
-        !active && "[filter:saturate(1.15)] group-hover:[filter:saturate(1.3)_brightness(1.08)]"
-      ),
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 100 100",
-      preserveAspectRatio: "none",
-      children: [
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs("radialGradient", { id: gradientA, cx: "30%", cy: "30%", r: "70%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#8b5cf6", children: /* @__PURE__ */ jsx(
-              "animate",
-              {
-                attributeName: "stop-color",
-                values: "#8b5cf6;#06b6d4;#8b5cf6",
-                dur: "8s",
-                repeatCount: "indefinite"
-              }
-            ) }),
-            /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#1e1b4b", stopOpacity: "0.9" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#0f0f1a", stopOpacity: "0" })
-          ] }),
-          /* @__PURE__ */ jsxs("radialGradient", { id: gradientB, cx: "70%", cy: "60%", r: "60%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#10b981", children: /* @__PURE__ */ jsx(
-              "animate",
-              {
-                attributeName: "stop-color",
-                values: "#10b981;#f59e0b;#ec4899;#10b981",
-                dur: "10s",
-                repeatCount: "indefinite"
-              }
-            ) }),
-            /* @__PURE__ */ jsx("stop", { offset: "55%", stopColor: "#1e1b4b", stopOpacity: "0.8" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#0f0f1a", stopOpacity: "0" })
-          ] }),
-          /* @__PURE__ */ jsxs("radialGradient", { id: gradientC, cx: "50%", cy: "80%", r: "55%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ec4899", children: /* @__PURE__ */ jsx(
-              "animate",
-              {
-                attributeName: "stop-color",
-                values: "#ec4899;#8b5cf6;#06b6d4;#ec4899",
-                dur: "7s",
-                repeatCount: "indefinite"
-              }
-            ) }),
-            /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#1e1b4b", stopOpacity: "0.7" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#0f0f1a", stopOpacity: "0" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "#0a0a12" }),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "100",
-            height: "100",
-            fill: `url(#${gradientA})`,
-            opacity: "0.85"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "100",
-            height: "100",
-            fill: `url(#${gradientB})`,
-            opacity: "0.75"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "100",
-            height: "100",
-            fill: `url(#${gradientC})`,
-            opacity: "0.70"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M -10 60 Q 25 45 50 60 T 110 55",
-            fill: "none",
-            stroke: "#ffffff",
-            strokeWidth: "0.8",
-            opacity: "0.12",
-            children: /* @__PURE__ */ jsx(
-              "animate",
-              {
-                attributeName: "d",
-                values: "M -10 60 Q 25 45 50 60 T 110 55;M -10 55 Q 30 70 55 50 T 110 65;M -10 60 Q 25 45 50 60 T 110 55",
-                dur: "12s",
-                repeatCount: "indefinite"
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-var oilslickConfig = {
-  render: OilslickSurface,
-  default: {
-    style: {
-      color: "#ffffff",
-      boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 10px rgba(139, 92, 246, 0.20)"
-    }
-  },
-  active: {
-    style: {
-      color: "#ffffff"
-    }
-  }
-};
-function RainbowSurface({
-  id,
-  active
-}) {
-  const gradientId = `${id}-rainbow-gradient`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: cn(
-        "size-full",
-        !active && "group-hover:[filter:brightness(1.08)]"
-      ),
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 100 100",
-      preserveAspectRatio: "none",
-      children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-          "linearGradient",
-          {
-            id: gradientId,
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "0%",
-            gradientTransform: "rotate(30, 0.5, 0.5)",
-            children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#fbffca" }),
-              /* @__PURE__ */ jsx("stop", { offset: "33%", stopColor: "#baffbf" }),
-              /* @__PURE__ */ jsx("stop", { offset: "66%", stopColor: "#a7efff" }),
-              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#ffabff" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "100",
-            height: "100",
-            fill: active ? "#005458" : `url(#${gradientId})`
-          }
-        )
-      ]
-    }
-  );
-}
-var rainbowConfig = {
-  render: RainbowSurface,
-  default: {
-    className: "font-bold dark:[text-shadow:0_0_5px_rgba(0,0,0,0.5)]",
-    style: {
-      color: "#ffffff",
-      textShadow: "0 0 5px rgba(0, 0, 0, 0.2)",
-      boxShadow: "inset 0 0 0 1px rgba(0, 247, 255, 0.1)"
-    }
-  },
-  active: {
-    style: {
-      color: "#ffffff"
-    }
-  }
-};
-function SilverSurface({
-  id,
-  active
-}) {
-  const gradientId = `${id}-silver-gradient`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: cn(
-        "size-full",
-        !active && "[filter:brightness(1.1)] group-hover:[filter:brightness(1.16)]"
-      ),
-      width: "100%",
-      height: "100%",
-      viewBox: "0 0 100 100",
-      preserveAspectRatio: "none",
-      children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-          "linearGradient",
-          {
-            id: gradientId,
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "0%",
-            gradientTransform: "rotate(30, 0.5, 0.5)",
-            children: [
-              /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: "#afaeae" }),
-              /* @__PURE__ */ jsx("stop", { offset: "30%", stopColor: "#d6d6d6" }),
-              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#eeeeee" }),
-              /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "#d6d6d6" }),
-              /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: "#afaeae" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "100",
-            height: "100",
-            fill: active ? "#5a5a5a" : `url(#${gradientId})`
-          }
-        ),
-        !active && /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0",
-            y: "0",
-            width: "100",
-            height: "8",
-            fill: "#ffffff",
-            opacity: "0.16"
-          }
-        )
-      ]
-    }
-  );
-}
-var silverConfig = {
-  render: SilverSurface,
-  default: {
-    style: {
-      color: "#2a2a2a",
-      boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.08)"
-    }
-  },
-  active: {
-    style: {
-      color: "#ffffff"
-    }
-  }
-};
-var SPECIAL_TAG_CONFIG = {
-  silver: silverConfig,
-  gold: goldConfig,
-  rainbow: rainbowConfig,
-  oilslick: oilslickConfig,
-  kintsugi: kintsugiConfig
-};
-function getSpecialTagStyleConfig(style) {
-  return SPECIAL_TAG_CONFIG[style];
-}
-function SpecialTagSurface(props) {
-  const { style, active, className } = props;
-  const config = SPECIAL_TAG_CONFIG[style];
-  const Renderer = config.render;
-  const reactId = useId();
-  const safeId = reactId.replace(/:/g, "-");
-  return /* @__PURE__ */ jsx("span", { className: cn(className), "aria-hidden": "true", children: /* @__PURE__ */ jsx(Renderer, { id: safeId, active }) });
-}
-
-// src/lib/colors.ts
-var TAG_SPECIAL_STYLES = [
-  "silver",
-  "gold",
-  "rainbow",
-  "oilslick",
-  "kintsugi"
-];
-function isSpecialTagStyle(color) {
-  return TAG_SPECIAL_STYLES.includes(color);
-}
-var WHITE_COLOR_PATTERN = /^(?:#fff(?:fff)?|white|rgba?\(\s*255\s*,\s*255\s*,\s*255\b)/i;
-var BLACK_COLOR_PATTERN = /^(?:#000(?:000)?|black|rgba?\(\s*0\s*,\s*0\s*,\s*0\b)/i;
-function isWhiteHex(color) {
-  if (color === "") return false;
-  return WHITE_COLOR_PATTERN.test(color.trim());
-}
-function isBlackHex(color) {
-  if (color === "") return false;
-  return BLACK_COLOR_PATTERN.test(color.trim());
-}
-function computeTagChipColors(color) {
-  if (color === "") {
-    return {
-      baseBg: "var(--color-muted)",
-      hoverBg: "var(--color-accent)",
-      fg: "var(--color-foreground)"
-    };
-  }
-  if (isWhiteHex(color)) {
-    return {
-      baseBg: "#ffffff",
-      hoverBg: "#f1f5f9",
-      fg: "#0a0a0a"
-    };
-  }
-  if (isBlackHex(color)) {
-    return {
-      baseBg: "#0a0a0a",
-      hoverBg: "#262626",
-      fg: "#ffffff"
-    };
-  }
-  return {
-    baseBg: `color-mix(in srgb, ${color} 6%, var(--color-card))`,
-    hoverBg: `color-mix(in srgb, ${color} 20%, var(--color-card))`,
-    fg: color
-  };
-}
-
-// src/lib/tag-surface.ts
-function resolveTagChipSurface(color, active) {
-  if (isSpecialTagStyle(color)) {
-    const config = getSpecialTagStyleConfig(color);
-    return {
-      className: cn(
-        "relative isolate group",
-        config.default.className,
-        active ? config.active?.className : void 0
-      ),
-      style: {
-        ...config.default.style,
-        ...active ? config.active?.style : {}
-      },
-      texture: color
-    };
-  }
-  if (color === "") {
-    return active ? {
-      className: "bg-primary text-primary-foreground hover:bg-primary/90",
-      style: void 0,
-      texture: null
-    } : {
-      className: "bg-muted text-foreground hover:bg-accent",
-      style: void 0,
-      texture: null
-    };
-  }
-  const chipColors = computeTagChipColors(color);
-  return {
-    className: "bg-(--chip-bg) hover:bg-(--chip-hover-bg)",
-    style: {
-      ["--chip-bg"]: active ? chipColors.hoverBg : chipColors.baseBg,
-      ["--chip-hover-bg"]: chipColors.hoverBg,
-      color: chipColors.fg
-    },
-    texture: null
-  };
-}
 var tagChipLabelClassName = "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap";
 var TagChip = forwardRef(
   function TagChip2(props, ref) {