@hoardodile/ui 0.1.3 → 0.1.5

package/dist/lib/tag-surface.js

@@ -0,0 +1,615 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import 'react';
+import { jsx, jsxs } 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];
+}
+
+// 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
+  };
+}
+
+export { resolveTagChipSurface };
+//# sourceMappingURL=tag-surface.js.map
+//# sourceMappingURL=tag-surface.js.map