@hoardodile/ui 0.1.2 → 0.1.4

package/dist/components/tag-chip.js

@@ -0,0 +1,713 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { forwardRef, cloneElement, useId } 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) {
+    const {
+      color,
+      size = "sm",
+      border,
+      active,
+      icon,
+      roundedRight,
+      display,
+      render,
+      suffix,
+      children,
+      className,
+      style,
+      onMouseDown,
+      ...rest
+    } = props;
+    const surface = border !== void 0 ? void 0 : resolveTagChipSurface(color ?? "", active === true);
+    const interactiveRoot = display === "button" || render !== void 0;
+    const stateClass = border === "dashed" ? active === true ? "border border-transparent bg-accent text-foreground" : "border border-dashed border-border-strong text-muted-foreground hover:text-secondary-foreground" : void 0;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      surface !== void 0 && surface.texture !== null && /* @__PURE__ */ jsx(
+        SpecialTagSurface,
+        {
+          style: surface.texture,
+          active,
+          className: "absolute inset-0 -z-10 overflow-hidden rounded-[inherit]"
+        }
+      ),
+      icon !== void 0 && // Flex row: the slot accepts several icons as a fragment
+      // (e.g. a kind glyph + the pin), and flex keeps the
+      // blockified preflight svgs on one line.
+      /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: icon }),
+      /* @__PURE__ */ jsxs("span", { className: tagChipLabelClassName, children: [
+        children,
+        suffix !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-bold mx-0.5", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 opacity-70", children: suffix })
+        ] }) : null
+      ] })
+    ] });
+    const chipClassName = cn(
+      "inline-flex min-w-0 max-w-full items-center justify-center gap-1.5 rounded-sm text-xs font-normal leading-none disabled:pointer-events-none disabled:opacity-50",
+      size === "md" ? "px-2 py-1.5" : "px-2 py-1",
+      roundedRight === false && "rounded-r-none",
+      interactiveRoot && "cursor-pointer",
+      surface?.className,
+      stateClass,
+      className
+    );
+    const chipStyle = { ...surface?.style, ...style };
+    if (render !== void 0) {
+      return cloneElement(render, {
+        ...rest,
+        ref,
+        className: chipClassName,
+        style: chipStyle,
+        onMouseDown,
+        children: content
+      });
+    }
+    if (display === "button") {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          ref,
+          className: chipClassName,
+          style: chipStyle,
+          onMouseDown,
+          ...rest,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: chipClassName,
+        style: chipStyle,
+        onMouseDown,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+
+export { TagChip };
+//# sourceMappingURL=tag-chip.js.map
+//# sourceMappingURL=tag-chip.js.map