@nibin-org/tokens 1.0.0

package/dist/index.js

@@ -0,0 +1,662 @@
+"use client";
+
+// src/components/TokenDocumentation.tsx
+import { useState as useState5, useMemo } from "react";
+
+// src/components/ColorGrid.tsx
+import { useState, useCallback } from "react";
+
+// src/utils.ts
+function isTokenValue(obj) {
+  return typeof obj === "object" && obj !== null && "value" in obj && "type" in obj;
+}
+function parseNumericValue(value) {
+  const match = value.match(/^([\d.]+)/);
+  return match ? parseFloat(match[1]) : 0;
+}
+function getContrastColor(hexColor) {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "black" : "white";
+}
+function parseBaseColors(tokens) {
+  const families = [];
+  for (const [familyName, shades] of Object.entries(tokens)) {
+    if (typeof shades !== "object" || shades === null) continue;
+    const family = {
+      name: familyName,
+      primaryColor: "",
+      shades: []
+    };
+    for (const [shadeName, token] of Object.entries(shades)) {
+      if (isTokenValue(token)) {
+        const colorToken = {
+          name: `${familyName}-${shadeName}`,
+          value: token.value,
+          cssVariable: `--base-${familyName}-${shadeName}`,
+          shade: shadeName,
+          family: familyName
+        };
+        family.shades.push(colorToken);
+        if (shadeName === "50") {
+          family.primaryColor = token.value;
+        }
+      }
+    }
+    family.shades.sort((a, b) => {
+      const aNum = parseInt(a.shade || "0");
+      const bNum = parseInt(b.shade || "0");
+      return aNum - bNum;
+    });
+    if (!family.primaryColor && family.shades.length > 0) {
+      family.primaryColor = family.shades[Math.floor(family.shades.length / 2)]?.value || "";
+    }
+    if (family.shades.length > 0) {
+      families.push(family);
+    }
+  }
+  return families;
+}
+function parseSemanticColors(tokens, prefix) {
+  const colors = [];
+  for (const [name, token] of Object.entries(tokens)) {
+    if (isTokenValue(token)) {
+      let value = token.value;
+      if (value.startsWith("{") && value.endsWith("}")) {
+        value = token.value;
+      }
+      colors.push({
+        name,
+        value,
+        cssVariable: `--${prefix}-${name}`
+      });
+    }
+  }
+  return colors;
+}
+function parseSpacingTokens(tokens) {
+  const spacings = [];
+  for (const [name, token] of Object.entries(tokens)) {
+    if (isTokenValue(token)) {
+      const cleanName = name.replace(/^space-/, "");
+      spacings.push({
+        name: cleanName,
+        value: token.value,
+        cssVariable: `--space-${cleanName}`,
+        numericValue: parseNumericValue(token.value)
+      });
+    }
+  }
+  return spacings.sort((a, b) => a.numericValue - b.numericValue);
+}
+function parseRadiusTokens(tokens) {
+  const radiuses = [];
+  for (const [name, token] of Object.entries(tokens)) {
+    if (isTokenValue(token)) {
+      const cleanName = name.replace(/^radius-/, "");
+      radiuses.push({
+        name: cleanName,
+        value: token.value,
+        cssVariable: `--radius-${cleanName}`,
+        numericValue: parseNumericValue(token.value)
+      });
+    }
+  }
+  return radiuses.sort((a, b) => a.numericValue - b.numericValue);
+}
+function parseSizeTokens(tokens) {
+  const sizes = [];
+  for (const [name, token] of Object.entries(tokens)) {
+    if (isTokenValue(token)) {
+      const cleanName = name.replace(/^size-/, "");
+      sizes.push({
+        name: cleanName,
+        value: token.value,
+        cssVariable: `--size-${cleanName}`,
+        numericValue: parseNumericValue(token.value)
+      });
+    }
+  }
+  return sizes.sort((a, b) => a.numericValue - b.numericValue);
+}
+async function copyToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    textarea.select();
+    const success = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return success;
+  }
+}
+
+// src/components/ColorGrid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ColorGrid({
+  baseColors,
+  fillColors,
+  strokeColors,
+  textColors,
+  onColorClick
+}) {
+  const [copiedValue, setCopiedValue] = useState(null);
+  const handleCopy = useCallback(async (color) => {
+    const success = await copyToClipboard(color.value);
+    if (success) {
+      setCopiedValue(color.value);
+      setTimeout(() => setCopiedValue(null), 2e3);
+    }
+    onColorClick?.(color);
+  }, [onColorClick]);
+  const colorFamilies = baseColors ? parseBaseColors(baseColors) : [];
+  const semanticFill = fillColors ? parseSemanticColors(fillColors, "fill") : [];
+  const semanticStroke = strokeColors ? parseSemanticColors(strokeColors, "stroke") : [];
+  const semanticText = textColors ? parseSemanticColors(textColors, "text") : [];
+  return /* @__PURE__ */ jsxs("div", { className: "ftd-color-container", children: [
+    colorFamilies.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ftd-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ftd-section-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "ftd-section-icon", children: "\u{1F3A8}" }),
+        /* @__PURE__ */ jsx("h3", { className: "ftd-section-title", children: "Base Colors" }),
+        /* @__PURE__ */ jsxs("span", { className: "ftd-section-count", children: [
+          colorFamilies.length,
+          " families"
+        ] })
+      ] }),
+      colorFamilies.map((family) => /* @__PURE__ */ jsxs("div", { className: "ftd-color-family", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ftd-color-family-header", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ftd-color-family-swatch",
+              style: { backgroundColor: family.primaryColor }
+            }
+          ),
+          /* @__PURE__ */ jsx("h4", { className: "ftd-color-family-name", children: family.name })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ftd-color-scale", children: family.shades.map((shade) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "ftd-color-shade",
+            style: {
+              backgroundColor: shade.value,
+              color: getContrastColor(shade.value)
+            },
+            onClick: () => handleCopy(shade),
+            title: `Click to copy: ${shade.value}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ftd-color-shade-label", children: shade.shade }),
+              /* @__PURE__ */ jsx("span", { className: "ftd-color-shade-value", children: shade.value.substring(0, 7) })
+            ]
+          },
+          shade.name
+        )) })
+      ] }, family.name))
+    ] }),
+    semanticFill.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ftd-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ftd-section-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "ftd-section-icon", children: "\u{1F5BC}\uFE0F" }),
+        /* @__PURE__ */ jsx("h3", { className: "ftd-section-title", children: "Fill Colors" }),
+        /* @__PURE__ */ jsxs("span", { className: "ftd-section-count", children: [
+          semanticFill.length,
+          " tokens"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ftd-token-grid", children: semanticFill.map((color) => /* @__PURE__ */ jsx(
+        ColorCard,
+        {
+          color,
+          onClick: () => handleCopy(color)
+        },
+        color.name
+      )) })
+    ] }),
+    semanticStroke.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ftd-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ftd-section-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "ftd-section-icon", children: "\u270F\uFE0F" }),
+        /* @__PURE__ */ jsx("h3", { className: "ftd-section-title", children: "Stroke Colors" }),
+        /* @__PURE__ */ jsxs("span", { className: "ftd-section-count", children: [
+          semanticStroke.length,
+          " tokens"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ftd-token-grid", children: semanticStroke.map((color) => /* @__PURE__ */ jsx(
+        ColorCard,
+        {
+          color,
+          onClick: () => handleCopy(color)
+        },
+        color.name
+      )) })
+    ] }),
+    semanticText.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ftd-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ftd-section-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "ftd-section-icon", children: "\u{1F4DD}" }),
+        /* @__PURE__ */ jsx("h3", { className: "ftd-section-title", children: "Text Colors" }),
+        /* @__PURE__ */ jsxs("span", { className: "ftd-section-count", children: [
+          semanticText.length,
+          " tokens"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ftd-token-grid", children: semanticText.map((color) => /* @__PURE__ */ jsx(
+        ColorCard,
+        {
+          color,
+          onClick: () => handleCopy(color)
+        },
+        color.name
+      )) })
+    ] }),
+    copiedValue && /* @__PURE__ */ jsxs("div", { className: "ftd-copied-toast", children: [
+      "\u2713 Copied: ",
+      copiedValue
+    ] })
+  ] });
+}
+function ColorCard({ color, onClick }) {
+  const isAlias = color.value.startsWith("{");
+  const displayValue = isAlias ? color.value : color.value.substring(0, 9);
+  return /* @__PURE__ */ jsxs("div", { className: "ftd-token-card", onClick, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ftd-token-swatch",
+        style: {
+          backgroundColor: isAlias ? "var(--ftd-bg-tertiary)" : color.value
+        },
+        children: isAlias && /* @__PURE__ */ jsx("span", { style: {
+          fontSize: "0.625rem",
+          color: "var(--ftd-text-secondary)",
+          padding: "4px"
+        }, children: "Alias \u2192" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "ftd-token-info", children: [
+      /* @__PURE__ */ jsx("p", { className: "ftd-token-name", children: color.name }),
+      /* @__PURE__ */ jsxs("p", { className: "ftd-token-value", children: [
+        displayValue,
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "ftd-copy-icon",
+            width: "12",
+            height: "12",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            children: [
+              /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/SpacingScale.tsx
+import { useState as useState2, useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SpacingScale({ tokens, onTokenClick }) {
+  const [copiedValue, setCopiedValue] = useState2(null);
+  const spacingTokens = parseSpacingTokens(tokens);
+  const maxValue = Math.max(...spacingTokens.map((t) => t.numericValue), 1);
+  const handleCopy = useCallback2(async (token) => {
+    const success = await copyToClipboard(token.value);
+    if (success) {
+      setCopiedValue(token.value);
+      setTimeout(() => setCopiedValue(null), 2e3);
+    }
+    onTokenClick?.(token);
+  }, [onTokenClick]);
+  if (spacingTokens.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { className: "ftd-empty", children: [
+      /* @__PURE__ */ jsx2("div", { className: "ftd-empty-icon", children: "\u{1F4CF}" }),
+      /* @__PURE__ */ jsx2("h4", { className: "ftd-empty-title", children: "No spacing tokens found" }),
+      /* @__PURE__ */ jsx2("p", { className: "ftd-empty-text", children: "Add spacing tokens to your tokens.json file" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "ftd-section", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "ftd-section-header", children: [
+      /* @__PURE__ */ jsx2("div", { className: "ftd-section-icon", children: "\u{1F4CF}" }),
+      /* @__PURE__ */ jsx2("h3", { className: "ftd-section-title", children: "Spacing Scale" }),
+      /* @__PURE__ */ jsxs2("span", { className: "ftd-section-count", children: [
+        spacingTokens.length,
+        " tokens"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "ftd-spacing-list", children: spacingTokens.map((token) => {
+      const widthPercent = token.numericValue / maxValue * 100;
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "ftd-spacing-item",
+          onClick: () => handleCopy(token),
+          style: { cursor: "pointer" },
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: "ftd-spacing-label", children: token.name }),
+            /* @__PURE__ */ jsx2("div", { className: "ftd-spacing-bar-container", children: /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "ftd-spacing-bar",
+                style: { width: `${Math.max(widthPercent, 5)}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx2("span", { className: "ftd-spacing-value", children: token.value })
+          ]
+        },
+        token.name
+      );
+    }) }),
+    copiedValue && /* @__PURE__ */ jsxs2("div", { className: "ftd-copied-toast", children: [
+      "\u2713 Copied: ",
+      copiedValue
+    ] })
+  ] });
+}
+
+// src/components/RadiusShowcase.tsx
+import { useState as useState3, useCallback as useCallback3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function RadiusShowcase({ tokens, onTokenClick }) {
+  const [copiedValue, setCopiedValue] = useState3(null);
+  const radiusTokens = parseRadiusTokens(tokens);
+  const handleCopy = useCallback3(async (token) => {
+    const success = await copyToClipboard(token.value);
+    if (success) {
+      setCopiedValue(token.value);
+      setTimeout(() => setCopiedValue(null), 2e3);
+    }
+    onTokenClick?.(token);
+  }, [onTokenClick]);
+  if (radiusTokens.length === 0) {
+    return /* @__PURE__ */ jsxs3("div", { className: "ftd-empty", children: [
+      /* @__PURE__ */ jsx3("div", { className: "ftd-empty-icon", children: "\u2B1C" }),
+      /* @__PURE__ */ jsx3("h4", { className: "ftd-empty-title", children: "No radius tokens found" }),
+      /* @__PURE__ */ jsx3("p", { className: "ftd-empty-text", children: "Add radius tokens to your tokens.json file" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "ftd-section", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "ftd-section-header", children: [
+      /* @__PURE__ */ jsx3("div", { className: "ftd-section-icon", children: "\u2B1C" }),
+      /* @__PURE__ */ jsx3("h3", { className: "ftd-section-title", children: "Border Radius" }),
+      /* @__PURE__ */ jsxs3("span", { className: "ftd-section-count", children: [
+        radiusTokens.length,
+        " tokens"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "ftd-radius-grid", children: radiusTokens.map((token) => /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "ftd-radius-item",
+        onClick: () => handleCopy(token),
+        style: { cursor: "pointer" },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "ftd-radius-preview",
+              style: { borderRadius: token.value }
+            }
+          ),
+          /* @__PURE__ */ jsx3("p", { className: "ftd-radius-label", children: token.name }),
+          /* @__PURE__ */ jsx3("p", { className: "ftd-radius-value", children: token.value })
+        ]
+      },
+      token.name
+    )) }),
+    copiedValue && /* @__PURE__ */ jsxs3("div", { className: "ftd-copied-toast", children: [
+      "\u2713 Copied: ",
+      copiedValue
+    ] })
+  ] });
+}
+
+// src/components/SizeScale.tsx
+import { useState as useState4, useCallback as useCallback4 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SizeScale({ tokens, onTokenClick }) {
+  const [copiedValue, setCopiedValue] = useState4(null);
+  const sizeTokens = parseSizeTokens(tokens);
+  const maxValue = Math.max(...sizeTokens.map((t) => t.numericValue), 1);
+  const handleCopy = useCallback4(async (token) => {
+    const success = await copyToClipboard(token.value);
+    if (success) {
+      setCopiedValue(token.value);
+      setTimeout(() => setCopiedValue(null), 2e3);
+    }
+    onTokenClick?.(token);
+  }, [onTokenClick]);
+  if (sizeTokens.length === 0) {
+    return /* @__PURE__ */ jsxs4("div", { className: "ftd-empty", children: [
+      /* @__PURE__ */ jsx4("div", { className: "ftd-empty-icon", children: "\u{1F4D0}" }),
+      /* @__PURE__ */ jsx4("h4", { className: "ftd-empty-title", children: "No size tokens found" }),
+      /* @__PURE__ */ jsx4("p", { className: "ftd-empty-text", children: "Add size tokens to your tokens.json file" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "ftd-section", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "ftd-section-header", children: [
+      /* @__PURE__ */ jsx4("div", { className: "ftd-section-icon", children: "\u{1F4D0}" }),
+      /* @__PURE__ */ jsx4("h3", { className: "ftd-section-title", children: "Size Scale" }),
+      /* @__PURE__ */ jsxs4("span", { className: "ftd-section-count", children: [
+        sizeTokens.length,
+        " tokens"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "ftd-size-grid", children: sizeTokens.map((token) => {
+      const heightPercent = token.numericValue / maxValue * 200;
+      return /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "ftd-size-item",
+          onClick: () => handleCopy(token),
+          style: { cursor: "pointer" },
+          title: `${token.name}: ${token.value}`,
+          children: [
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "ftd-size-bar",
+                style: {
+                  height: `${Math.max(heightPercent, 8)}px`,
+                  width: "32px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx4("span", { className: "ftd-size-label", children: token.name })
+          ]
+        },
+        token.name
+      );
+    }) }),
+    /* @__PURE__ */ jsx4("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ jsx4("div", { className: "ftd-spacing-list", children: sizeTokens.map((token) => /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "ftd-spacing-item",
+        onClick: () => handleCopy(token),
+        style: { cursor: "pointer" },
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "ftd-spacing-label", children: token.name }),
+          /* @__PURE__ */ jsx4("div", { className: "ftd-spacing-bar-container", children: /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "ftd-spacing-bar",
+              style: { width: `${token.numericValue / maxValue * 100}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsx4("span", { className: "ftd-spacing-value", children: token.value })
+        ]
+      },
+      token.name
+    )) }) }),
+    copiedValue && /* @__PURE__ */ jsxs4("div", { className: "ftd-copied-toast", children: [
+      "\u2713 Copied: ",
+      copiedValue
+    ] })
+  ] });
+}
+
+// src/components/TokenDocumentation.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function TokenDocumentation({
+  tokens,
+  title = "Design Tokens",
+  subtitle = "Interactive documentation for your design system",
+  defaultTab = "colors",
+  showSearch = true,
+  darkMode: initialDarkMode = false,
+  onTokenClick
+}) {
+  const [activeTab, setActiveTab] = useState5(defaultTab);
+  const [searchQuery, setSearchQuery] = useState5("");
+  const [isDarkMode, setIsDarkMode] = useState5(initialDarkMode);
+  const colorsValue = tokens["Colors/Value"];
+  const spacingTokens = tokens["Spacing/Mode 1"] || {};
+  const sizeTokens = tokens["Size/Mode 1"] || {};
+  const radiusTokens = tokens["Radius/Mode 1"] || {};
+  const availableTabs = useMemo(() => {
+    const tabs = [];
+    if (colorsValue) {
+      tabs.push({ id: "colors", label: "Colors", icon: "\u{1F3A8}" });
+    }
+    if (Object.keys(spacingTokens).length > 0) {
+      tabs.push({ id: "spacing", label: "Spacing", icon: "\u{1F4CF}" });
+    }
+    if (Object.keys(sizeTokens).length > 0) {
+      tabs.push({ id: "sizes", label: "Sizes", icon: "\u{1F4D0}" });
+    }
+    if (Object.keys(radiusTokens).length > 0) {
+      tabs.push({ id: "radius", label: "Radius", icon: "\u2B1C" });
+    }
+    return tabs;
+  }, [colorsValue, spacingTokens, sizeTokens, radiusTokens]);
+  const validActiveTab = availableTabs.some((t) => t.id === activeTab) ? activeTab : availableTabs[0]?.id || "colors";
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "ftd-container", "data-theme": isDarkMode ? "dark" : "light", children: [
+    /* @__PURE__ */ jsxs5("header", { className: "ftd-header", children: [
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx5("h1", { className: "ftd-title", children: title }),
+        /* @__PURE__ */ jsx5("p", { className: "ftd-subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          className: "ftd-theme-toggle",
+          onClick: toggleDarkMode,
+          "aria-label": isDarkMode ? "Switch to light mode" : "Switch to dark mode",
+          children: [
+            isDarkMode ? "\u2600\uFE0F" : "\u{1F319}",
+            /* @__PURE__ */ jsx5("span", { children: isDarkMode ? "Light" : "Dark" })
+          ]
+        }
+      )
+    ] }),
+    showSearch && /* @__PURE__ */ jsx5("div", { className: "ftd-search-container", children: /* @__PURE__ */ jsxs5("div", { className: "ftd-search-wrapper", children: [
+      /* @__PURE__ */ jsxs5(
+        "svg",
+        {
+          className: "ftd-search-icon",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: [
+            /* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ jsx5("path", { d: "M21 21l-4.35-4.35" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "text",
+          className: "ftd-search-input",
+          placeholder: "Search tokens...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value)
+        }
+      )
+    ] }) }),
+    availableTabs.length > 1 && /* @__PURE__ */ jsx5("nav", { className: "ftd-tabs", role: "tablist", children: availableTabs.map((tab) => /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        className: `ftd-tab ${validActiveTab === tab.id ? "active" : ""}`,
+        onClick: () => setActiveTab(tab.id),
+        role: "tab",
+        "aria-selected": validActiveTab === tab.id,
+        children: [
+          /* @__PURE__ */ jsx5("span", { style: { marginRight: "8px" }, children: tab.icon }),
+          tab.label
+        ]
+      },
+      tab.id
+    )) }),
+    /* @__PURE__ */ jsxs5("div", { role: "tabpanel", children: [
+      validActiveTab === "colors" && colorsValue && /* @__PURE__ */ jsx5(
+        ColorGrid,
+        {
+          baseColors: colorsValue.base,
+          fillColors: colorsValue.fill,
+          strokeColors: colorsValue.stroke,
+          textColors: colorsValue.text,
+          onColorClick: onTokenClick
+        }
+      ),
+      validActiveTab === "spacing" && /* @__PURE__ */ jsx5(
+        SpacingScale,
+        {
+          tokens: spacingTokens,
+          onTokenClick
+        }
+      ),
+      validActiveTab === "sizes" && /* @__PURE__ */ jsx5(
+        SizeScale,
+        {
+          tokens: sizeTokens,
+          onTokenClick
+        }
+      ),
+      validActiveTab === "radius" && /* @__PURE__ */ jsx5(
+        RadiusShowcase,
+        {
+          tokens: radiusTokens,
+          onTokenClick
+        }
+      )
+    ] }),
+    availableTabs.length === 0 && /* @__PURE__ */ jsxs5("div", { className: "ftd-empty", children: [
+      /* @__PURE__ */ jsx5("div", { className: "ftd-empty-icon", children: "\u{1F4E6}" }),
+      /* @__PURE__ */ jsx5("h4", { className: "ftd-empty-title", children: "No tokens found" }),
+      /* @__PURE__ */ jsx5("p", { className: "ftd-empty-text", children: "Pass a valid tokens.json file from Figma Token Studio" })
+    ] })
+  ] });
+}
+var TokenDocumentation_default = TokenDocumentation;
+export {
+  ColorGrid,
+  RadiusShowcase,
+  SizeScale,
+  SpacingScale,
+  TokenDocumentation,
+  TokenDocumentation_default as TokenDocumentationDefault,
+  copyToClipboard,
+  getContrastColor,
+  parseBaseColors,
+  parseRadiusTokens,
+  parseSemanticColors,
+  parseSizeTokens,
+  parseSpacingTokens
+};
+//# sourceMappingURL=index.js.map