tokvista 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 nibin-org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,200 @@
+# Tokvista
+
+<div align="center">
+
+![npm version](https://img.shields.io/npm/v/tokvista?style=for-the-badge&colorA=000000&colorB=5b47fb)
+![npm downloads](https://img.shields.io/npm/dm/tokvista.svg?style=for-the-badge&colorA=000000&colorB=5b47fb)
+![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge&colorA=000000&colorB=5b47fb)
+
+**The visual layer for your design system.**
+
+Visualize colors, spacing, typography, and component tokens with zero configuration.
+
+[Live Demo](https://nibin-org.github.io/tokvista/) · [Figma Setup Guide](./GUIDE.md) · [Report Issue](https://github.com/nibin-org/tokvista/issues)
+
+</div>
+
+---
+
+## Why This Package
+
+Design token documentation is often static and hard to scan. **Tokvista** gives you:
+
+- Beautiful visuals for colors, spacing, sizes, radius, and typography
+- Instant search with `Cmd+K` / `Ctrl+K`
+- Copy-ready CSS variables and resolved values
+- Semantic + component token views with aliases resolved
+- Built-in dark mode
+- Interactive playground for previews
+- No runtime dependencies (React only)
+
+---
+
+## Quick Start
+
+### Install
+
+```bash
+npm install tokvista
+```
+
+### Use
+
+```tsx
+import { TokenDocumentation } from 'tokvista';
+import 'tokvista/styles.css';
+import tokens from './tokens.json';
+
+export default function DesignSystem() {
+  return <TokenDocumentation tokens={tokens} />;
+}
+```
+
+---
+
+## Migration from @nibin-org/tokens
+
+```bash
+npm uninstall @nibin-org/tokens
+npm install tokvista
+```
+
+---
+
+## What You Get
+
+### Foundation Tokens
+Visualize base tokens like colors, spacing, sizes, radius, and typography.
+
+### Semantic Tokens
+Show intent-based tokens with resolved values and quick copy.
+
+### Component Tokens
+Document component overrides with clean visual grouping.
+
+### Code Export
+Export CSS, SCSS, JavaScript, or Tailwind config with high‑contrast syntax highlighting.
+
+### Playground
+Preview components using your tokens and custom class names.
+
+---
+
+## Token Structure (Recommended)
+
+### Foundation
+```json
+{
+  "Foundation/Value": {
+    "base": {
+      "blue": { "500": { "value": "#3B82F6", "type": "color" } }
+    }
+  }
+}
+```
+
+### Semantic
+```json
+{
+  "Semantic/Value": {
+    "fill": {
+      "primary": { "value": "{base.blue.500}", "type": "color" }
+    }
+  }
+}
+```
+
+### Components
+```json
+{
+  "Components/Mode 1": {
+    "button": {
+      "bg": { "value": "{Semantic.fill.primary}", "type": "color" }
+    }
+  }
+}
+```
+
+Need a full setup guide? See **[GUIDE.md](./GUIDE.md)**.
+
+---
+
+## API Reference
+
+### `TokenDocumentation`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tokens` | `FigmaTokens` | Required | Tokens object (W3C format or Token Studio) |
+| `title` | `string` | `"Design Tokens"` | Main header title |
+| `subtitle` | `string` | `"View and copy design tokens"` | Subtitle text |
+| `darkMode` | `boolean` | `false` | Initial theme state |
+| `onTokenClick` | `(token) => void` | `undefined` | Callback when a token is clicked |
+
+### Standalone Components
+
+Use these to build custom layouts:
+
+- `Colors`
+- `Spacing`
+- `Sizes`
+- `Radius`
+- `Typography`
+
+Each accepts `tokens` and optional `title`.
+
+---
+
+## Search and Copy
+
+- Search across token names and values
+- Keyboard navigation with Enter to focus
+- Copy action returns `var(--token)` when available
+
+---
+
+## Production Ready
+
+- ESM and CJS builds
+- Typed exports
+- CSS delivered as a single file
+- No runtime dependencies besides React
+- Compatible with modern React and Next.js
+
+---
+
+## Local Development
+
+```bash
+# root package
+npm install
+npm run build
+
+# demo app
+cd demo
+npm install
+npm run dev
+```
+
+Demo will run at `http://localhost:3000`.
+
+---
+
+## Resources
+
+- [Live Demo](https://nibin-org.github.io/tokvista/)
+- [Figma Setup Guide](./GUIDE.md)
+- [GitHub Repository](https://github.com/nibin-org/tokvista)
+- [Issue Tracker](https://github.com/nibin-org/tokvista/issues)
+
+---
+
+## Contributing
+
+Contributions are welcome. Please read [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+---
+
+## License
+
+MIT © [nibin-org](https://github.com/nibin-org)

package/dist/index.cjs

@@ -0,0 +1,82 @@
+"use client";
+"use strict";var Ht=Object.create;var Ke=Object.defineProperty;var _t=Object.getOwnPropertyDescriptor;var Xt=Object.getOwnPropertyNames;var Gt=Object.getPrototypeOf,Yt=Object.prototype.hasOwnProperty;var qt=(t,s)=>{for(var e in s)Ke(t,e,{get:s[e],enumerable:!0})},Ct=(t,s,e,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of Xt(s))!Yt.call(t,a)&&a!==e&&Ke(t,a,{get:()=>s[a],enumerable:!(o=_t(s,a))||o.enumerable});return t};var xt=(t,s,e)=>(e=t!=null?Ht(Gt(t)):{},Ct(s||!t||!t.__esModule?Ke(e,"default",{value:t,enumerable:!0}):e,t)),Zt=t=>Ct(Ke({},"__esModule",{value:!0}),t);var ds={};qt(ds,{ColorDisplay:()=>qe,ColorGrid:()=>qe,Colors:()=>Ft,ComponentsTab:()=>ot,ExportModal:()=>pt,FoundationTab:()=>tt,Radius:()=>At,RadiusDisplay:()=>Le,RadiusShowcase:()=>Le,SearchModal:()=>at,SemanticTab:()=>st,SizeDisplay:()=>Ee,SizeScale:()=>Ee,Sizes:()=>Ot,Spacing:()=>jt,SpacingDisplay:()=>Be,SpacingScale:()=>Be,TokenDocumentation:()=>bt,TokenDocumentationDefault:()=>Dt,copyToClipboard:()=>J,createTokenMap:()=>ge,detectTokenType:()=>wt,extractTokenGroups:()=>Tt,generateCSS:()=>rt,generateJS:()=>lt,generateSCSS:()=>it,generateTailwind:()=>ct,getContrastColor:()=>Ce,getFlattenedTokens:()=>Ve,parseBaseColors:()=>et,parseRadiusTokens:()=>Je,parseSemanticColors:()=>ye,parseSizeTokens:()=>Qe,parseSpacingTokens:()=>Ue,resolveTokenValue:()=>oe});module.exports=Zt(ds);var Y=require("react");var de=xt(require("react"),1);var Xe=require("react");function Kt(t){return typeof t=="object"&&t!==null&&"value"in t&&"type"in t}function Nt(t){if(typeof t!="string")return typeof t=="number"?t:0;let s=t.match(/^(-?[\d.]+)/);return s?parseFloat(s[1]):0}function ke(t,s=""){let e=t.replace(/\//g,"-").replace(/\./g,"-").replace(/\s+/g,"-").toLowerCase();return s==="base"?`--base-${e}`:s?`--${s}-${e}`:`--${e}`}function Me(t,s=[]){let e=[];if(!t||typeof t!="object")return e;if(Kt(t))return e.push({path:s.join("."),token:t}),e;for(let[o,a]of Object.entries(t))e.push(...Me(a,[...s,o]));return e}function ge(t){let s={};return Object.entries(t).forEach(([e,o])=>{if(["global","$themes","$metadata"].includes(e))return;Me(o).forEach(({path:l,token:r})=>{s[l]=typeof r.value=="string"?r.value:String(r.value),s[`${e}.${l}`]=typeof r.value=="string"?r.value:String(r.value)})}),s}function oe(t,s,e=10){if(!t||typeof t!="string")return t;let o=t,a=0;for(;o.startsWith("{")&&o.endsWith("}")&&a<e;){let l=o.slice(1,-1),r=s[l];if(r!==void 0)o=r;else{let n=Object.entries(s).find(([i])=>i.endsWith(l));if(n)o=n[1];else break}a++}return o}function Tt(t){let s={};return!t||typeof t!="object"||Object.entries(t).forEach(([e,o])=>{typeof o=="object"&&o!==null&&(s[e]=o)}),s}function wt(t){let s=Me(t);if(s.length===0)return"other";let e=new Set(s.map(a=>a.token.type));if(e.has("color"))return"color";if(e.has("spacing"))return"spacing";if(e.has("sizing"))return"sizing";if(e.has("borderRadius"))return"radius";let o=s[0]?.path.toLowerCase()||"";return o.includes("font")||o.includes("line-height")||o.includes("letter-spacing")?"typography":"other"}function ht(t,s,e,o){return Me(t).filter(l=>l.token.type===s||l.token.type==="dimension").map(({path:l,token:r})=>{let n=l.replace(new RegExp(`^${e}-`,"i"),""),i=typeof r.value=="string"?r.value:String(r.value);return o(n,i,ke(l,e),Nt(i))})}function Ue(t){return ht(t,"spacing","space",(e,o,a,l)=>({name:e,value:o,cssVariable:a,numericValue:l})).sort((e,o)=>e.numericValue-o.numericValue)}function Je(t){return ht(t,"borderRadius","radius",(e,o,a,l)=>({name:e,value:o,cssVariable:a,numericValue:l})).sort((e,o)=>e.numericValue-o.numericValue)}function Qe(t){return ht(t,"sizing","size",(e,o,a,l)=>({name:e,value:o,cssVariable:a,numericValue:l})).sort((e,o)=>e.numericValue-o.numericValue)}async function J(t){try{return await navigator.clipboard.writeText(t),!0}catch{let s=document.createElement("textarea");s.value=t,document.body.appendChild(s),s.select();let e=document.execCommand("copy");return document.body.removeChild(s),e}}var p=require("react/jsx-runtime"),j={viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:1.75,strokeLinecap:"round",strokeLinejoin:"round"},St={foundation:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("path",{d:"M12 3l9 5-9 5-9-5 9-5z"}),(0,p.jsx)("path",{d:"M3 12l9 5 9-5"}),(0,p.jsx)("path",{d:"M3 17l9 5 9-5"})]}),semantic:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("path",{d:"M12 3a9 9 0 1 0 0 18c1.6 0 2.6-1.1 2.6-2.4 0-.8-.4-1.5-1.1-1.9a2.6 2.6 0 0 1 2.2-4.6h1.1A4.6 4.6 0 0 0 12 3z"}),(0,p.jsx)("circle",{cx:"7.5",cy:"9",r:"1"}),(0,p.jsx)("circle",{cx:"12",cy:"7.2",r:"1"}),(0,p.jsx)("circle",{cx:"16.5",cy:"9",r:"1"})]}),components:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"4",width:"7",height:"7",rx:"1.5"}),(0,p.jsx)("rect",{x:"13",y:"4",width:"7",height:"7",rx:"1.5"}),(0,p.jsx)("rect",{x:"4",y:"13",width:"7",height:"7",rx:"1.5"}),(0,p.jsx)("rect",{x:"13",y:"13",width:"7",height:"7",rx:"1.5"})]}),playground:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4.5",y:"9",width:"15",height:"8",rx:"4"}),(0,p.jsx)("path",{d:"M9 13h4"}),(0,p.jsx)("path",{d:"M11 11v4"}),(0,p.jsx)("circle",{cx:"15.5",cy:"12.5",r:"0.8"}),(0,p.jsx)("circle",{cx:"17.5",cy:"14.5",r:"0.8"})]}),colors:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"4",width:"16",height:"16",rx:"4"}),(0,p.jsx)("circle",{cx:"9",cy:"9",r:"1.2"}),(0,p.jsx)("circle",{cx:"15",cy:"9",r:"1.2"}),(0,p.jsx)("circle",{cx:"12",cy:"14",r:"1.2"})]}),fill:t=>(0,p.jsx)("svg",{...j,...t,children:(0,p.jsx)("path",{d:"M12 3c3 4 6 7 6 10a6 6 0 1 1-12 0c0-3 3-6 6-10z"})}),stroke:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("path",{d:"M16.5 3.5l4 4-9.5 9.5-4.5 1 1-4.5 9.5-9.5z"}),(0,p.jsx)("path",{d:"M12 20h8"})]}),text:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("path",{d:"M5 5h14"}),(0,p.jsx)("path",{d:"M12 5v14"})]}),spacing:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"6",width:"16",height:"12",rx:"2"}),(0,p.jsx)("path",{d:"M8 10v4"}),(0,p.jsx)("path",{d:"M12 10v2"}),(0,p.jsx)("path",{d:"M16 10v4"})]}),sizes:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"6",y:"6",width:"12",height:"12",rx:"2"}),(0,p.jsx)("path",{d:"M4 12h4"}),(0,p.jsx)("path",{d:"M16 12h4"}),(0,p.jsx)("path",{d:"M12 4v4"}),(0,p.jsx)("path",{d:"M12 16v4"})]}),radius:t=>(0,p.jsx)("svg",{...j,...t,children:(0,p.jsx)("rect",{x:"4",y:"4",width:"16",height:"16",rx:"6"})}),typography:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("path",{d:"M5 5h14"}),(0,p.jsx)("path",{d:"M12 5v14"}),(0,p.jsx)("path",{d:"M8 19h8"})]}),button:t=>(0,p.jsx)("svg",{...j,...t,children:(0,p.jsx)("rect",{x:"4",y:"8",width:"16",height:"8",rx:"4"})}),input:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"6",width:"16",height:"12",rx:"2"}),(0,p.jsx)("path",{d:"M8 10v4"})]}),card:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"5",width:"16",height:"14",rx:"2"}),(0,p.jsx)("path",{d:"M4 9h16"})]}),modal:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"3",y:"4",width:"18",height:"16",rx:"3"}),(0,p.jsx)("path",{d:"M3 8h18"})]}),dropdown:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"5",width:"16",height:"14",rx:"2"}),(0,p.jsx)("path",{d:"M8 10h8"}),(0,p.jsx)("path",{d:"M8 14h6"}),(0,p.jsx)("path",{d:"M16 10l2 2-2 2"})]}),checkbox:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"4",width:"16",height:"16",rx:"3"}),(0,p.jsx)("path",{d:"M8 12l3 3 5-6"})]}),radio:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("circle",{cx:"12",cy:"12",r:"8"}),(0,p.jsx)("circle",{cx:"12",cy:"12",r:"3"})]}),toggle:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"9",width:"16",height:"6",rx:"3"}),(0,p.jsx)("circle",{cx:"9",cy:"12",r:"2.2"})]}),slider:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("path",{d:"M4 8h16"}),(0,p.jsx)("circle",{cx:"9",cy:"8",r:"2"}),(0,p.jsx)("path",{d:"M4 16h16"}),(0,p.jsx)("circle",{cx:"15",cy:"16",r:"2"})]}),badge:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("path",{d:"M7 5h7l5 5-7 7-5-5z"}),(0,p.jsx)("circle",{cx:"15",cy:"9",r:"1"})]}),alert:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("path",{d:"M12 4l9 16H3l9-16z"}),(0,p.jsx)("path",{d:"M12 9v4"}),(0,p.jsx)("path",{d:"M12 17h.01"})]}),tooltip:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("rect",{x:"4",y:"5",width:"16",height:"12",rx:"3"}),(0,p.jsx)("path",{d:"M8 17l-2 3 4-3"})]}),avatar:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("circle",{cx:"12",cy:"9",r:"3"}),(0,p.jsx)("path",{d:"M5 20c1.6-3.5 12.4-3.5 14 0"})]}),sun:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("circle",{cx:"12",cy:"12",r:"4"}),(0,p.jsx)("path",{d:"M12 2v2"}),(0,p.jsx)("path",{d:"M12 20v2"}),(0,p.jsx)("path",{d:"M4 12H2"}),(0,p.jsx)("path",{d:"M22 12h-2"}),(0,p.jsx)("path",{d:"M5 5l-1.5-1.5"}),(0,p.jsx)("path",{d:"M20.5 20.5L19 19"}),(0,p.jsx)("path",{d:"M5 19l-1.5 1.5"}),(0,p.jsx)("path",{d:"M20.5 3.5L19 5"})]}),moon:t=>(0,p.jsx)("svg",{...j,...t,children:(0,p.jsx)("path",{d:"M20 14.5A7.5 7.5 0 1 1 9.5 4a6 6 0 0 0 10.5 10.5z"})}),default:t=>(0,p.jsxs)("svg",{...j,...t,children:[(0,p.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,p.jsx)("path",{d:"M8 12h8"})]})};function D({name:t,size:s=18,className:e,...o}){let a=St[t]||St.default;return(0,p.jsx)(a,{width:s,height:s,className:["ftd-icon",e].filter(Boolean).join(" "),"aria-hidden":"true",focusable:"false",...o})}var F=require("react/jsx-runtime");function Be({tokens:t,onTokenClick:s}){let[e,o]=(0,Xe.useState)(null),a=Ue(t),l=Math.max(...a.map(i=>i.numericValue),1),r=(0,Xe.useCallback)(i=>{o(i),setTimeout(()=>o(null),2e3)},[]),n=(0,Xe.useCallback)(async i=>{await J(i.value)&&r(i.value),s?.(i)},[s,r]);return a.length===0?(0,F.jsxs)("div",{className:"ftd-empty",children:[(0,F.jsx)("div",{className:"ftd-empty-icon",children:(0,F.jsx)(D,{name:"spacing"})}),(0,F.jsx)("h4",{className:"ftd-empty-title",children:"No spacing tokens found"}),(0,F.jsx)("p",{className:"ftd-empty-text",children:"Add spacing tokens to your tokens.json file"})]}):(0,F.jsxs)("div",{className:"ftd-section",children:[(0,F.jsxs)("div",{className:"ftd-section-header",children:[(0,F.jsx)("div",{className:"ftd-section-icon",children:(0,F.jsx)(D,{name:"spacing"})}),(0,F.jsx)("h2",{className:"ftd-section-title",children:"Spacing Scale"}),(0,F.jsxs)("span",{className:"ftd-section-count",children:[a.length," tokens"]})]}),(0,F.jsx)("div",{className:"ftd-token-grid",children:a.map(i=>{let c=`var(${i.cssVariable})`;return(0,F.jsxs)("div",{className:"ftd-display-card ftd-clickable-card","data-token-name":i.name,onClick:()=>J(c).then(()=>r(c)),title:`Click to copy: ${c}`,children:[(0,F.jsx)("div",{className:"ftd-token-preview-container",children:(0,F.jsx)("div",{className:"ftd-token-preview",style:{width:i.value,height:"8px",borderRadius:"2px"}})}),(0,F.jsx)("p",{className:"ftd-token-card-label",children:i.name}),(0,F.jsxs)("div",{className:"ftd-token-values-row",children:[(0,F.jsx)("span",{className:"ftd-token-css-var",children:i.cssVariable}),(0,F.jsx)("span",{className:"ftd-token-hex",children:i.value})]})]},i.name)})}),e&&(0,F.jsxs)("div",{className:"ftd-copied-toast",children:[(0,F.jsx)("div",{className:"ftd-toast-icon",children:(0,F.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:(0,F.jsx)("polyline",{points:"20 6 9 17 4 12"})})}),(0,F.jsxs)("div",{className:"ftd-toast-content",children:[(0,F.jsx)("span",{className:"ftd-toast-label",children:"Copied"}),(0,F.jsx)("span",{className:"ftd-toast-value",children:e})]})]})]})}var Ge=require("react");var O=require("react/jsx-runtime");function Ee({tokens:t,onTokenClick:s}){let[e,o]=(0,Ge.useState)(null),a=Qe(t),l=Math.max(...a.map(i=>i.numericValue),1),r=(0,Ge.useCallback)(i=>{o(i),setTimeout(()=>o(null),2e3)},[]),n=(0,Ge.useCallback)(async i=>{await J(i.value)&&r(i.value),s?.(i)},[s,r]);return a.length===0?(0,O.jsxs)("div",{className:"ftd-empty",children:[(0,O.jsx)("div",{className:"ftd-empty-icon",children:(0,O.jsx)(D,{name:"sizes"})}),(0,O.jsx)("h4",{className:"ftd-empty-title",children:"No size tokens found"}),(0,O.jsx)("p",{className:"ftd-empty-text",children:"Add size tokens to your tokens.json file"})]}):(0,O.jsxs)("div",{className:"ftd-section",children:[(0,O.jsxs)("div",{className:"ftd-section-header",children:[(0,O.jsx)("div",{className:"ftd-section-icon",children:(0,O.jsx)(D,{name:"sizes"})}),(0,O.jsx)("h2",{className:"ftd-section-title",children:"Size Scale"}),(0,O.jsxs)("span",{className:"ftd-section-count",children:[a.length," tokens"]})]}),(0,O.jsx)("div",{className:"ftd-token-grid",children:a.map(i=>{let c=`var(${i.cssVariable})`;return(0,O.jsxs)("div",{className:"ftd-display-card ftd-clickable-card","data-token-name":i.name,onClick:()=>J(c).then(()=>r(c)),title:`Click to copy: ${c}`,children:[(0,O.jsx)("div",{className:"ftd-token-preview-container",children:(0,O.jsx)("div",{className:"ftd-token-preview",style:{width:i.value,height:i.value,borderRadius:"2px",backgroundColor:"var(--ftd-primary)"}})}),(0,O.jsx)("p",{className:"ftd-token-card-label",children:i.name}),(0,O.jsxs)("div",{className:"ftd-token-values-row",children:[(0,O.jsx)("span",{className:"ftd-token-css-var",children:i.cssVariable}),(0,O.jsx)("span",{className:"ftd-token-hex",children:i.value})]})]},i.name)})}),e&&(0,O.jsxs)("div",{className:"ftd-copied-toast",children:[(0,O.jsx)("div",{className:"ftd-toast-icon",children:(0,O.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:(0,O.jsx)("polyline",{points:"20 6 9 17 4 12"})})}),(0,O.jsxs)("div",{className:"ftd-toast-content",children:[(0,O.jsx)("span",{className:"ftd-toast-label",children:"Copied"}),(0,O.jsx)("span",{className:"ftd-toast-value",children:e})]})]})]})}var Ye=require("react");var _=require("react/jsx-runtime");function Le({tokens:t,onTokenClick:s}){let[e,o]=(0,Ye.useState)(null),a=Je(t),l=(0,Ye.useCallback)(n=>{o(n),setTimeout(()=>o(null),2e3)},[]),r=(0,Ye.useCallback)(async n=>{await J(n.value)&&l(n.value),s?.(n)},[s,l]);return a.length===0?(0,_.jsxs)("div",{className:"ftd-empty",children:[(0,_.jsx)("div",{className:"ftd-empty-icon",children:"\u2B1C"}),(0,_.jsx)("h4",{className:"ftd-empty-title",children:"No radius tokens found"}),(0,_.jsx)("p",{className:"ftd-empty-text",children:"Add radius tokens to your tokens.json file"})]}):(0,_.jsxs)("div",{className:"ftd-section",children:[(0,_.jsxs)("div",{className:"ftd-section-header",children:[(0,_.jsx)("div",{className:"ftd-section-icon",children:"\u2B1C"}),(0,_.jsx)("h2",{className:"ftd-section-title",children:"Border Radius"}),(0,_.jsxs)("span",{className:"ftd-section-count",children:[a.length," tokens"]})]}),(0,_.jsx)("div",{className:"ftd-token-grid",children:a.map(n=>{let i=`var(${n.cssVariable})`;return(0,_.jsxs)("div",{className:"ftd-display-card ftd-clickable-card","data-token-name":n.name,onClick:()=>J(i).then(()=>l(i)),title:`Click to copy: ${i}`,children:[(0,_.jsx)("div",{className:"ftd-token-preview-container",children:(0,_.jsx)("div",{className:"ftd-token-preview",style:{borderRadius:n.value}})}),(0,_.jsx)("p",{className:"ftd-token-card-label",children:n.name}),(0,_.jsxs)("div",{className:"ftd-token-values-row",children:[(0,_.jsx)("span",{className:"ftd-token-css-var",children:n.cssVariable}),(0,_.jsx)("span",{className:"ftd-token-hex",children:n.value})]})]},n.name)})}),e&&(0,_.jsxs)("div",{className:"ftd-copied-toast",children:[(0,_.jsx)("div",{className:"ftd-toast-icon",children:(0,_.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:(0,_.jsx)("polyline",{points:"20 6 9 17 4 12"})})}),(0,_.jsxs)("div",{className:"ftd-toast-content",children:[(0,_.jsx)("span",{className:"ftd-toast-label",children:"Copied"}),(0,_.jsx)("span",{className:"ftd-toast-value",children:e})]})]})]})}function Ce(t){if(!t||typeof t!="string"||!t.startsWith("#"))return"black";let s=t.replace("#",""),e=s;s.length===3&&(e=s.split("").map(n=>n+n).join(""));let o=parseInt(e.substring(0,2),16),a=parseInt(e.substring(2,4),16),l=parseInt(e.substring(4,6),16);return(.299*o+.587*a+.114*l)/255>.5?"black":"white"}function et(t,s={}){let e={};Me(t).filter(r=>r.token.type==="color").forEach(({path:r,token:n})=>{let i=r.split("."),c=i.length>1?i.slice(0,-1).join("-"):"Other",f=i[i.length-1];e[c]||(e[c]={name:c,primaryColor:"",shades:[]});let b=typeof n.value=="string"?n.value:String(n.value),m=oe(b,s),C={name:r,value:b,resolvedValue:m,cssVariable:ke(r,"base"),shade:f,family:c};e[c].shades.push(C)});let l=Object.values(e);return l.forEach(r=>{r.shades.sort((i,c)=>{let f=parseInt(i.shade||"0"),b=parseInt(c.shade||"0");return isNaN(f)||isNaN(b)?(i.shade||"").localeCompare(c.shade||""):f-b});let n=r.shades.find(i=>i.shade==="500"||i.shade==="50")||r.shades[Math.floor(r.shades.length/2)];r.primaryColor=n?.resolvedValue||n?.value||""}),l}function ye(t,s,e={}){return Me(t).filter(a=>a.token.type==="color").map(({path:a,token:l})=>{let r=typeof l.value=="string"?l.value:String(l.value);return{name:a,value:r,resolvedValue:oe(r,e),cssVariable:ke(a,s)}})}var v=require("react/jsx-runtime");function tt({tokens:t,tokenMap:s,onTokenClick:e}){let o=(0,de.useRef)(null),a=(0,de.useRef)(null),[l,r]=(0,de.useState)(""),n=(0,de.useMemo)(()=>{let c=[],f={};return Object.entries(t).forEach(([b,m])=>{if(!m||typeof m!="object")return;let C=b.toLowerCase(),q=Object.values(m)[0]?.type||"other",N=Object.keys(m).filter(V=>{let A=m[V];return A&&typeof A=="object"}).length;q==="color"?f[b]=m:C==="space"||C==="spacing"?c.push({id:"spacing-section",name:"Spacing",icon:"spacing",type:"spacing",tokens:m,count:N}):C==="size"||C==="sizing"?c.push({id:"sizes-section",name:"Sizes",icon:"sizes",type:"sizing",tokens:m,count:N}):C==="radius"?c.push({id:"radius-section",name:"Radius",icon:"radius",type:"radius",tokens:m,count:N}):(C.includes("font")||C.includes("line"))&&c.push({id:`typo-${C}`,name:b.split("-").map(V=>V.charAt(0).toUpperCase()+V.slice(1)).join(" "),icon:"typography",type:"typography",tokens:m,count:N})}),Object.keys(f).length>0&&c.unshift({id:"colors-section",name:"Colors",icon:"colors",type:"colors",tokens:f,count:Object.keys(f).length}),c},[t]);(0,de.useEffect)(()=>{n.length>0&&!l&&r(n[0].id)},[n,l]),(0,de.useEffect)(()=>{let c=()=>{let m=document.querySelector(".ftd-navbar-sticky"),C=m?m.getBoundingClientRect().height:160,z=Math.round(C+16);return document.documentElement.style.setProperty("--ftd-sticky-offset",`${z}px`),z},f=()=>{let m=Array.from(document.querySelectorAll(".ftd-scroll-target"));if(m.length===0)return;let C=c();if(a.current){let T=document.getElementById(a.current);if(!T)a.current=null;else{if(T.getBoundingClientRect().top-C>0){r(a.current);return}a.current=null}}let z=C,q=window.innerHeight,N=m[0].id,V=-1,A=1/0;for(let T of m){let S=T.getBoundingClientRect(),h=Math.max(S.top,z),k=Math.min(S.bottom,q),W=Math.max(0,k-h);(W>V||W===V&&S.top<A)&&(V=W,N=T.id,A=S.top)}r(N)},b=()=>{o.current===null&&(o.current=window.requestAnimationFrame(()=>{o.current=null,f()}))};return f(),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",b),()=>{window.removeEventListener("scroll",b),window.removeEventListener("resize",b),o.current!==null&&(window.cancelAnimationFrame(o.current),o.current=null)}},[n]);let i=c=>{let f=document.getElementById(c);if(f){let b=document.querySelector(".ftd-navbar-sticky"),m=(b?b.getBoundingClientRect().height:160)+16,C=window.scrollY+f.getBoundingClientRect().top-m;r(c),a.current=c,window.scrollTo({top:C,behavior:"smooth"})}};return n.length===0?(0,v.jsx)("div",{className:"ftd-empty",children:"No foundation tokens found"}):(0,v.jsxs)("div",{className:"ftd-color-layout",children:[(0,v.jsx)("aside",{className:"ftd-color-sidebar",children:(0,v.jsx)("nav",{className:"ftd-color-nav",children:n.map(c=>(0,v.jsxs)("button",{className:`ftd-color-nav-link ${l===c.id?"active":""}`,onClick:()=>i(c.id),children:[(0,v.jsx)("span",{className:"ftd-nav-icon",children:(0,v.jsx)(D,{name:c.icon})}),(0,v.jsx)("span",{className:"ftd-nav-label",children:c.name}),(0,v.jsx)("span",{className:"ftd-nav-count",children:c.count})]},c.id))})}),(0,v.jsx)("div",{className:"ftd-color-content",children:n.map(c=>(0,v.jsxs)(de.default.Fragment,{children:[c.type==="colors"&&(0,v.jsxs)("div",{id:c.id,className:"ftd-section ftd-scroll-target",children:[(0,v.jsxs)("div",{className:"ftd-section-header",children:[(0,v.jsx)("div",{className:"ftd-section-icon",children:(0,v.jsx)(D,{name:"colors"})}),(0,v.jsx)("h2",{className:"ftd-section-title",children:"Base Colors"}),(0,v.jsxs)("span",{className:"ftd-section-count",children:[Object.keys(c.tokens).length," families"]})]}),(0,v.jsx)(Jt,{colorFamilies:c.tokens,tokenMap:s,onTokenClick:e})]}),c.type==="spacing"&&(0,v.jsx)("div",{id:c.id,className:"ftd-scroll-target",children:(0,v.jsx)(Be,{tokens:c.tokens,onTokenClick:e})}),c.type==="sizing"&&(0,v.jsx)("div",{id:c.id,className:"ftd-scroll-target",children:(0,v.jsx)(Ee,{tokens:c.tokens,onTokenClick:e})}),c.type==="radius"&&(0,v.jsx)("div",{id:c.id,className:"ftd-scroll-target",children:(0,v.jsx)(Le,{tokens:c.tokens,onTokenClick:e})}),c.type==="typography"&&(0,v.jsxs)("div",{id:c.id,className:"ftd-section ftd-scroll-target",children:[(0,v.jsxs)("div",{className:"ftd-section-header",children:[(0,v.jsx)("div",{className:"ftd-section-icon",children:(0,v.jsx)(D,{name:"typography"})}),(0,v.jsx)("h2",{className:"ftd-section-title",children:c.name}),(0,v.jsxs)("span",{className:"ftd-section-count",children:[c.count," tokens"]})]}),(0,v.jsx)(Ut,{tokens:c.tokens,familyName:c.id.replace("typo-","")})]})]},c.id))})]})}function Ut({tokens:t,familyName:s}){let[e,o]=(0,de.useState)(null),a=Object.entries(t).filter(([r,n])=>n&&typeof n=="object"&&"value"in n&&"type"in n),l=r=>{o(r),setTimeout(()=>o(null),2e3)};return a.length===0?null:(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)("div",{className:"ftd-token-grid",children:a.map(([r,n])=>{let i=`--${s}-${r}`,c=`var(${i})`,f=s.toLowerCase().includes("line"),b=s.toLowerCase().includes("size")||s.toLowerCase().includes("font");return(0,v.jsxs)("div",{className:"ftd-display-card ftd-clickable-card","data-token-name":r,onClick:()=>J(c).then(()=>l(c)),title:`Click to copy: ${c}`,children:[(0,v.jsx)("div",{className:"ftd-token-preview-container",children:b?(0,v.jsx)("div",{style:{fontSize:n.value,fontWeight:600,color:"var(--ftd-primary)",lineHeight:1},children:"Aa"}):f?(0,v.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:n.value,width:"32px"},children:[(0,v.jsx)("div",{style:{height:"2px",background:"var(--ftd-primary)",width:"100%",opacity:.8}}),(0,v.jsx)("div",{style:{height:"2px",background:"var(--ftd-primary)",width:"100%",opacity:.8}})]}):(0,v.jsx)("div",{className:"ftd-token-preview",style:{width:"16px",height:n.value,borderRadius:"2px"}})}),(0,v.jsx)("p",{className:"ftd-token-card-label",children:r}),(0,v.jsxs)("div",{className:"ftd-token-values-row",children:[(0,v.jsx)("span",{className:"ftd-token-css-var",children:i}),(0,v.jsx)("span",{className:"ftd-token-hex",children:n.value})]})]},r)})}),e&&(0,v.jsxs)("div",{className:"ftd-copied-toast",children:[(0,v.jsx)("div",{className:"ftd-toast-icon",children:(0,v.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:(0,v.jsx)("polyline",{points:"20 6 9 17 4 12"})})}),(0,v.jsxs)("div",{className:"ftd-toast-content",children:[(0,v.jsx)("span",{className:"ftd-toast-label",children:"Copied"}),(0,v.jsx)("span",{className:"ftd-toast-value",children:e})]})]})]})}function Jt({colorFamilies:t,tokenMap:s,onTokenClick:e}){let[o,a]=(0,de.useState)(null),l=n=>{a(n),setTimeout(()=>a(null),2e3)},r=async(n,i)=>{let c=`var(${i})`;await J(c)&&l(c),e?.({value:n,cssVariable:i})};return(0,v.jsxs)("div",{className:"ftd-color-family-container",children:[Object.entries(t).map(([n,i])=>{let c=Object.keys(i),b=i[c[Math.floor(c.length/2)]]?.value||"#000";return(0,v.jsxs)("div",{className:"ftd-color-family",children:[(0,v.jsxs)("div",{className:"ftd-color-family-header",children:[(0,v.jsx)("div",{className:"ftd-color-family-swatch",style:{backgroundColor:b}}),(0,v.jsx)("h3",{className:"ftd-color-family-name",children:n})]}),(0,v.jsx)("div",{className:"ftd-color-scale",children:Object.entries(i).map(([m,C])=>{let z=C.value,q=Ce(z),N=`--base-${n}-${m}`,V=`${n}-${m}`;return(0,v.jsxs)("div",{className:"ftd-color-shade","data-token-name":V,style:{backgroundColor:z,color:q},onClick:()=>r(z,N),children:[(0,v.jsx)("span",{className:"ftd-color-shade-label",children:m}),(0,v.jsxs)("div",{className:"ftd-shade-values",children:[(0,v.jsx)("code",{className:"ftd-shade-css-var",children:N}),(0,v.jsx)("code",{className:"ftd-shade-hex",children:z})]})]},m)})})]},n)}),o&&(0,v.jsxs)("div",{className:"ftd-copied-toast",children:[(0,v.jsx)("div",{className:"ftd-toast-icon",children:(0,v.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:(0,v.jsx)("polyline",{points:"20 6 9 17 4 12"})})}),(0,v.jsxs)("div",{className:"ftd-toast-content",children:[(0,v.jsx)("span",{className:"ftd-toast-label",children:"Copied"}),(0,v.jsx)("span",{className:"ftd-toast-value",children:o})]})]})]})}var re=require("react");var R=require("react/jsx-runtime");function st({tokens:t,tokenMap:s,onTokenClick:e}){let o=(0,re.useRef)(null),a=(0,re.useRef)(null),[l,r]=(0,re.useState)(null),[n,i]=(0,re.useState)(""),c=(0,re.useMemo)(()=>t.fill?ye(t.fill,"fill",s):[],[t.fill,s]),f=(0,re.useMemo)(()=>t.stroke?ye(t.stroke,"stroke",s):[],[t.stroke,s]),b=(0,re.useMemo)(()=>t.text?ye(t.text,"text",s):[],[t.text,s]),m=(0,re.useMemo)(()=>[{id:"fill-section",name:"Fill",icon:"fill",colors:c},{id:"stroke-section",name:"Stroke",icon:"stroke",colors:f},{id:"text-section",name:"Text",icon:"text",colors:b}].filter(V=>V.colors.length>0),[c,f,b]);(0,re.useEffect)(()=>{m.length>0&&!n&&i(m[0].id)},[m,n]),(0,re.useEffect)(()=>{let N=()=>{let T=document.querySelector(".ftd-navbar-sticky"),S=T?T.getBoundingClientRect().height:160,h=Math.round(S+16);return document.documentElement.style.setProperty("--ftd-sticky-offset",`${h}px`),h},V=()=>{let T=Array.from(document.querySelectorAll(".ftd-semantic-section"));if(T.length===0)return;let S=N();if(a.current){let X=document.getElementById(a.current);if(!X)a.current=null;else{if(X.getBoundingClientRect().top-S>0){i(a.current);return}a.current=null}}let h=S,k=window.innerHeight,W=T[0].id,B=-1,Z=1/0;for(let X of T){let ne=X.getBoundingClientRect(),Ne=Math.max(ne.top,h),Te=Math.min(ne.bottom,k),fe=Math.max(0,Te-Ne);(fe>B||fe===B&&ne.top<Z)&&(B=fe,W=X.id,Z=ne.top)}i(W)},A=()=>{o.current===null&&(o.current=window.requestAnimationFrame(()=>{o.current=null,V()}))};return V(),window.addEventListener("scroll",A,{passive:!0}),window.addEventListener("resize",A),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A),o.current!==null&&(window.cancelAnimationFrame(o.current),o.current=null)}},[m]);let C=N=>{let V=document.getElementById(N);if(V){let A=document.querySelector(".ftd-navbar-sticky"),T=(A?A.getBoundingClientRect().height:160)+16,S=window.scrollY+V.getBoundingClientRect().top-T;i(N),a.current=N,window.scrollTo({top:S,behavior:"smooth"})}},z=N=>{r(N),setTimeout(()=>r(null),2e3)},q=async N=>{let V=`var(${N.cssVariable})`;await J(V)&&z(V),e?.(N)};return m.length===0?(0,R.jsx)("div",{className:"ftd-empty",children:"No semantic tokens found"}):(0,R.jsxs)("div",{className:"ftd-color-layout",children:[(0,R.jsx)("aside",{className:"ftd-color-sidebar",children:(0,R.jsx)("nav",{className:"ftd-color-nav",children:m.map(N=>(0,R.jsxs)("button",{className:`ftd-color-nav-link ${n===N.id?"active":""}`,onClick:()=>C(N.id),children:[(0,R.jsx)("span",{className:"ftd-nav-icon",children:(0,R.jsx)(D,{name:N.icon})}),(0,R.jsx)("span",{className:"ftd-nav-label",children:N.name}),(0,R.jsx)("span",{className:"ftd-nav-count",children:N.colors.length})]},N.id))})}),(0,R.jsxs)("div",{className:"ftd-color-content",children:[m.map(N=>(0,R.jsxs)("div",{id:N.id,className:"ftd-semantic-section ftd-section ftd-scroll-target",children:[(0,R.jsxs)("div",{className:"ftd-section-header",children:[(0,R.jsx)("div",{className:"ftd-section-icon",children:(0,R.jsx)(D,{name:N.icon})}),(0,R.jsxs)("h2",{className:"ftd-section-title",children:[N.name," Colors"]}),(0,R.jsxs)("span",{className:"ftd-section-count",children:[N.colors.length," tokens"]})]}),(0,R.jsx)(Qt,{colors:N.colors,onCopy:q})]},N.id)),l&&(0,R.jsxs)("div",{className:"ftd-copied-toast",role:"status","aria-live":"polite",children:[(0,R.jsx)("div",{className:"ftd-toast-icon",children:(0,R.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,R.jsx)("polyline",{points:"20 6 9 17 4 12"})})}),(0,R.jsxs)("div",{className:"ftd-toast-content",children:[(0,R.jsx)("span",{className:"ftd-toast-label",children:"Copied"}),(0,R.jsx)("span",{className:"ftd-toast-value",children:l})]})]})]})]})}function Qt({colors:t,onCopy:s}){let e=(0,re.useMemo)(()=>{let o={};return t.forEach(a=>{let l=a.name.split(/[-_\.]/),r=l[0],n=["red","blue","green","yellow","orange","purple","pink","gray","grey","black","white","cyan","teal"],i=l.find(c=>n.includes(c.toLowerCase()));i&&(r=i),o[r]||(o[r]=[]),o[r].push(a)}),o},[t]);return(0,R.jsx)("div",{className:"ftd-semantic-groups",children:Object.entries(e).map(([o,a])=>{let l=a[0]?.resolvedValue||a[0]?.value||"#000";return(0,R.jsxs)("div",{className:"ftd-semantic-group",children:[(0,R.jsxs)("div",{className:"ftd-semantic-group-header",children:[(0,R.jsx)("div",{className:"ftd-color-family-swatch",style:{backgroundColor:l}}),(0,R.jsx)("h3",{className:"ftd-semantic-group-name",children:o.charAt(0).toUpperCase()+o.slice(1)}),(0,R.jsxs)("span",{className:"ftd-semantic-group-count",children:[a.length," variants"]})]}),(0,R.jsx)("div",{className:"ftd-token-grid",children:a.map(r=>{let n=r.value.startsWith("{"),i=r.resolvedValue||r.value,c=Ce(i);return(0,R.jsxs)("div",{className:"ftd-token-card","data-token-name":r.name,"data-token-css-var":r.cssVariable,onClick:()=>s(r),children:[(0,R.jsx)("div",{className:"ftd-token-swatch",style:{backgroundColor:i,color:c},children:n&&(0,R.jsx)("span",{style:{fontSize:"10px",fontWeight:600,opacity:.8},children:"Alias"})}),(0,R.jsxs)("div",{className:"ftd-token-info",children:[(0,R.jsx)("p",{className:"ftd-token-name",children:r.name}),(0,R.jsxs)("div",{className:"ftd-token-values-row",children:[(0,R.jsx)("span",{className:"ftd-token-css-var",children:r.cssVariable}),(0,R.jsx)("span",{className:"ftd-token-hex",children:n?r.resolvedValue?.substring(0,9):r.value.substring(0,9)})]})]})]},r.name)})})]},o)})})}var Rt=require("react");var w=require("react/jsx-runtime");function ot({components:t,tokenMap:s,onCopy:e}){let o=Object.entries(t).filter(([n,i])=>{let c=Object.keys(i.variants).length>0,f=Object.keys(i.dimensions).length>0;return c||f}).map(([n,i])=>({id:n.toLowerCase(),name:n.charAt(0).toUpperCase()+n.slice(1),icon:as(n),data:i})),[a,l]=(0,Rt.useState)(o[0]?.id||""),r=o.find(n=>n.id===a);return o.length===0?(0,w.jsxs)("div",{className:"ftd-empty",children:[(0,w.jsx)("div",{className:"ftd-empty-icon",children:(0,w.jsx)(D,{name:"components"})}),(0,w.jsx)("h3",{className:"ftd-empty-title",children:"No component tokens found"}),(0,w.jsx)("p",{className:"ftd-empty-text",children:"Add component tokens to your tokens.json file"})]}):(0,w.jsxs)("div",{className:"ftd-color-layout",children:[(0,w.jsx)("div",{className:"ftd-color-sidebar",children:(0,w.jsx)("nav",{className:"ftd-color-nav",children:o.map(n=>{let i=Object.keys(n.data.variants).length,c=Object.keys(n.data.dimensions).length,f=i>0?i:c;return(0,w.jsxs)("button",{className:`ftd-color-nav-link ${a===n.id?"active":""}`,onClick:()=>l(n.id),children:[(0,w.jsx)("span",{className:"ftd-nav-icon",children:(0,w.jsx)(D,{name:n.icon})}),(0,w.jsx)("span",{className:"ftd-nav-label",children:n.name}),(0,w.jsx)("span",{className:"ftd-nav-count",children:f})]},n.id)})})}),(0,w.jsx)("div",{className:"ftd-color-content",children:r&&(0,w.jsx)("div",{id:r.id,className:"ftd-color-section",children:(0,w.jsx)(ns,{name:r.name,componentId:r.id,data:r.data,tokenMap:s,onCopy:e})})})]})}function es(t){if(!t||typeof t!="string")return null;if(t.startsWith("{")&&t.endsWith("}")){let s=t.slice(1,-1);return ke(s)}return null}function ts(t,s){return!t||typeof t!="string"?t:oe(t,s)||t}var ss=["2xs","xs","sm","md","lg","xl","2xl","3xl","4xl","5xl","6xl","7xl","8xl"],$t=new Map(ss.map((t,s)=>[t,s]));function os(t){return[...t].sort(([s],[e])=>{let o=s.toLowerCase(),a=e.toLowerCase(),l=$t.get(o),r=$t.get(a);if(l!==void 0&&r!==void 0)return l-r;if(l!==void 0)return-1;if(r!==void 0)return 1;let n=Number.parseFloat(o.replace(/[^0-9.]/g,"")),i=Number.parseFloat(a.replace(/[^0-9.]/g,""));return!Number.isNaN(n)&&!Number.isNaN(i)?n-i:o.localeCompare(a)})}function ns({name:t,componentId:s,data:e,tokenMap:o,onCopy:a}){let l=Object.keys(e.variants),r=Object.keys(e.dimensions),n=(i,c)=>{let f=i.toLowerCase();return f.includes("font")||f.includes("size")?(0,w.jsx)("div",{style:{fontSize:c,fontWeight:600,color:"var(--ftd-primary)",lineHeight:1},children:"Aa"}):f.includes("line")?(0,w.jsxs)("div",{style:{fontSize:"12px",fontWeight:600,lineHeight:c,color:"var(--ftd-primary)",display:"flex",flexDirection:"column",gap:"0px",maxHeight:"48px",overflow:"hidden"},children:[(0,w.jsx)("div",{children:"Aa"}),(0,w.jsx)("div",{children:"Aa"})]}):f.includes("radius")?(0,w.jsx)("div",{className:"ftd-token-preview",style:{width:"36px",height:"36px",borderRadius:c}}):f.includes("height")?(0,w.jsx)("div",{style:{width:"14px",height:c,borderRadius:"6px",background:"var(--ftd-primary)",boxShadow:"0 4px 12px rgba(var(--ftd-primary-rgb), 0.25)"}}):f.includes("padding")?(0,w.jsx)("div",{style:{padding:c,borderRadius:"8px",background:"rgba(var(--ftd-primary-rgb), 0.08)",border:"1px solid rgba(var(--ftd-primary-rgb), 0.18)"},children:(0,w.jsx)("div",{style:{width:"14px",height:"14px",background:"var(--ftd-primary)",borderRadius:"4px"}})}):(0,w.jsx)("div",{className:"ftd-token-preview",style:{width:"20px",height:"20px",borderRadius:"6px"}})};return(0,w.jsxs)("div",{className:"ftd-section",children:[(0,w.jsxs)("div",{className:"ftd-section-header",children:[(0,w.jsx)("div",{className:"ftd-section-icon",children:(0,w.jsx)(D,{name:"components"})}),(0,w.jsx)("h2",{className:"ftd-section-title",children:t}),l.length>0&&(0,w.jsxs)("span",{className:"ftd-section-badge",children:[l.length," Variants"]}),r.length>0&&(0,w.jsxs)("span",{className:"ftd-section-badge",children:[r.length," Dimensions"]})]}),r.length>0&&(0,w.jsx)("div",{className:"ftd-dimensions-display",children:Object.entries(e.dimensions).map(([i,c])=>(0,w.jsxs)("div",{className:"ftd-dimension-group",children:[(0,w.jsx)("h3",{className:"ftd-dimension-title",children:i}),(0,w.jsx)("div",{className:"ftd-token-grid",children:os(Object.entries(c)).map(([f,b])=>{let m=b.value,C=es(m),z=ts(m,o),q=C?`var(${C})`:m,N=C||"--",V=`${s} ${i} ${f}`,A=`--${s}-${i}-${f}`;return(0,w.jsxs)("div",{className:"ftd-display-card ftd-clickable-card","data-token-name":V,"data-token-css-var":A,onClick:()=>a(q,C||f),title:`Click to copy: ${q}`,children:[(0,w.jsx)("div",{className:"ftd-token-preview-container",children:n(i,z)}),(0,w.jsx)("p",{className:"ftd-token-card-label",children:f}),(0,w.jsxs)("div",{className:"ftd-token-values-row",children:[(0,w.jsx)("span",{className:"ftd-token-css-var",children:N}),(0,w.jsx)("span",{className:"ftd-token-hex",children:z})]})]},f)})})]},i))}),l.length>0&&(0,w.jsxs)("div",{className:"ftd-variants-section",children:[(0,w.jsx)("h4",{className:"ftd-variants-title",children:"Variants"}),(0,w.jsx)("div",{className:"ftd-variants-grid",children:l.map(i=>(0,w.jsx)("div",{className:"ftd-variant-card",children:(0,w.jsx)("h5",{className:"ftd-variant-name",children:i})},i))})]})]})}function as(t){let s={button:"button",input:"input",card:"card",modal:"modal",dropdown:"dropdown",checkbox:"checkbox",radio:"radio",toggle:"toggle",slider:"slider",badge:"badge",alert:"alert",tooltip:"tooltip",avatar:"avatar",default:"components"},e=t.toLowerCase();return s[e]||s.default}var pe=require("react");function gt(t,s){let e=t.toLowerCase(),o=s.toLowerCase();if(o===e)return{score:1,matches:!0};if(o.includes(e)){let c=o.indexOf(e);return{score:.8+(c===0?.2:0)-c/o.length*.1,matches:!0}}let a=0,l=[];for(let c=0;c<o.length&&a<e.length;c++)o[c]===e[a]&&(l.push(c),a++);if(a<e.length)return{score:0,matches:!1};let r=0;for(let c=1;c<l.length;c++)r+=l[c]-l[c-1]-1;let n=l.length>1?r/(l.length-1):0;if(n>1.5)return{score:0,matches:!1};let i=.2-n*.08;return{score:Math.max(i,.05),matches:!0}}function rs(t,s){let e=[];return Object.entries(t).forEach(([o,a])=>{typeof a=="object"&&a!==null&&!("value"in a)&&Object.entries(a).forEach(([l,r])=>{if(r&&typeof r=="object"&&"value"in r&&r.value!==null){let n=String(r.value),c=["space","size","radius","line-height","border-width"].some(m=>o.toLowerCase().includes(m))?`--${o}-${l}`:`--base-${o}-${l}`,f=Mt(o),b=f==="color"?oe(n,s):n;e.push({id:`foundation-${o}-${l}`,name:`${o}-${l}`,value:n,cssVariable:c,type:f,category:"foundation",preview:b})}})}),e}function is(t,s){let e=[];return["fill","stroke","text"].forEach(o=>{let a=t[o];a&&Object.entries(a).forEach(([l,r])=>{if(r&&typeof r=="object"&&"value"in r&&r.value!==null){let n=String(r.value),i=`--${o}-${l}`;e.push({id:`semantic-${o}-${l}`,name:`${o}-${l}`,value:n,cssVariable:i,type:"color",category:"semantic",preview:oe(n,s)})}})}),e}function ls(t,s){let e=[];return Object.entries(t).forEach(([o,a])=>{typeof a=="object"&&a!==null&&Object.entries(a).forEach(([l,r])=>{typeof r=="object"&&r!==null&&Object.entries(r).forEach(([n,i])=>{if(i&&typeof i=="object"&&"value"in i&&i.value!==null){let c=String(i.value),f=`--${o}-${l}-${n}`,b=Mt(l),m=b==="color"?oe(c,s):c;e.push({id:`component-${o}-${l}-${n}`,name:`${o} ${l} ${n}`,value:c,cssVariable:f,type:b,category:"component",preview:m})}})})}),e}function Mt(t){let s=t.toLowerCase();return s.includes("color")||s.includes("fill")||s.includes("stroke")||["blue","red","green","yellow","orange","purple","cyan","gray","slate","teal","pink","white","black","coolgray"].some(e=>s.includes(e))?"color":s.includes("space")||s.includes("spacing")?"spacing":s.includes("size")?"size":s.includes("radius")?"radius":s.includes("font")||s.includes("line-height")||s.includes("typography")?"typography":"component"}function Vt(t){let s=[],e=ge(t);return t["Foundation/Value"]?.base&&s.push(...rs(t["Foundation/Value"].base,e)),t["Semantic/Value"]&&s.push(...is(t["Semantic/Value"],e)),t["Components/Mode 1"]&&s.push(...ls(t["Components/Mode 1"],e)),s}function Pt(t,s,e=50){if(!t.trim())return[];let o=[];return s.forEach(a=>{let l=gt(t,a.name),r=gt(t,a.value),n=gt(t,a.cssVariable),i=Math.max(l.score,r.score,n.score);if(i>0){let c=[];l.matches&&c.push("name"),r.matches&&c.push("value"),n.matches&&c.push("cssVariable"),o.push({token:a,score:i,matches:c})}}),o.sort((a,l)=>l.score-a.score).slice(0,e)}function nt(t,s){let e=r=>r.replace(/[&<>"']/g,n=>{switch(n){case"&":return"&amp;";case"<":return"&lt;";case">":return"&gt;";case'"':return"&quot;";case"'":return"&#39;";default:return n}});if(!s.trim())return e(t);let o=s.toLowerCase(),l=t.toLowerCase().indexOf(o);if(l!==-1){let r=e(t.slice(0,l)),n=e(t.slice(l,l+s.length)),i=e(t.slice(l+s.length));return`${r}<mark>${n}</mark>${i}`}return e(t)}var P=require("react/jsx-runtime");function at({isOpen:t,onClose:s,tokens:e,onTokenClick:o,onNavigateToTab:a,onScrollToToken:l}){let[r,n]=(0,pe.useState)(""),[i,c]=(0,pe.useState)([]),[f,b]=(0,pe.useState)(0),m=(0,pe.useRef)(null),C=(0,pe.useRef)(null),z=(0,pe.useMemo)(()=>Vt(e),[e]);(0,pe.useEffect)(()=>{let T=setTimeout(()=>{if(r.trim()){let S=Pt(r,z);c(S),b(0)}else c([])},150);return()=>clearTimeout(T)},[r,z]),(0,pe.useEffect)(()=>{t&&m.current&&(m.current.focus(),n(""),c([]),b(0))},[t]),(0,pe.useEffect)(()=>{if(!t)return;let T=S=>{S.key==="Escape"?s():S.key==="ArrowDown"?(S.preventDefault(),b(h=>Math.min(h+1,i.length-1))):S.key==="ArrowUp"?(S.preventDefault(),b(h=>Math.max(h-1,0))):S.key==="Enter"&&i[f]&&(S.preventDefault(),q(i[f].token))};return window.addEventListener("keydown",T),()=>window.removeEventListener("keydown",T)},[t,i,f,s]),(0,pe.useEffect)(()=>{if(C.current&&i.length>0){let T=C.current.querySelector(".ftd-search-result-selected");T&&T.scrollIntoView({block:"nearest",behavior:"auto",inline:"nearest"})}},[f,i]);let q=async T=>{let S=`var(${T.cssVariable})`;try{if(navigator?.clipboard?.writeText)await navigator.clipboard.writeText(S);else{let h=document.createElement("textarea");h.value=S,document.body.appendChild(h),h.select(),document.execCommand("copy"),document.body.removeChild(h)}}catch(h){console.error("Failed to copy:",h)}if(a){let h=T.category==="component"?"components":T.category;a(h)}l&&setTimeout(()=>{l(T.name,T.category,T.cssVariable)},100),o?.({value:T.value,cssVariable:T.cssVariable}),s()},N=T=>{T.target===T.currentTarget&&s()};if(!t)return null;let V=i.reduce((T,S)=>{let h=`${S.token.category}-${S.token.type}`;return T[h]||(T[h]={category:S.token.category,type:S.token.type,results:[]}),T[h].results.push(S),T},{}),A=i[f]?`ftd-search-option-${i[f].token.id}`:void 0;return(0,P.jsx)("div",{className:"ftd-search-modal",onClick:N,children:(0,P.jsxs)("div",{className:"ftd-search-container",children:[(0,P.jsxs)("div",{className:"ftd-search-header",children:[(0,P.jsxs)("svg",{className:"ftd-search-icon",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[(0,P.jsx)("circle",{cx:"11",cy:"11",r:"8"}),(0,P.jsx)("path",{d:"m21 21-4.35-4.35"})]}),(0,P.jsx)("input",{ref:m,type:"text",className:"ftd-search-input",placeholder:"Search tokens... (name, value, or CSS variable)",value:r,onChange:T=>n(T.target.value),"aria-controls":"ftd-search-results","aria-autocomplete":"list","aria-activedescendant":A}),(0,P.jsx)("kbd",{className:"ftd-search-kbd",children:"ESC"})]}),(0,P.jsxs)("div",{id:"ftd-search-results",className:"ftd-search-results",ref:C,role:"listbox","aria-label":"Search results",children:[r.trim()===""&&(0,P.jsxs)("div",{className:"ftd-search-empty",role:"status",children:[(0,P.jsx)("p",{children:"Start typing to search across all tokens"}),(0,P.jsx)("div",{className:"ftd-search-tips",children:(0,P.jsx)("span",{children:'Try: "blue", "16px", "var(--", or "radius"'})})]}),r.trim()!==""&&i.length===0&&(0,P.jsxs)("div",{className:"ftd-search-empty",role:"status",children:[(0,P.jsxs)("p",{children:['No tokens found for "',r,'"']}),(0,P.jsx)("div",{className:"ftd-search-tips",children:(0,P.jsx)("span",{children:"Try searching by name, value, or CSS variable"})})]}),Object.entries(V).map(([T,S])=>(0,P.jsxs)("div",{className:"ftd-search-group",role:"group","aria-labelledby":`ftd-search-group-${T}`,children:[(0,P.jsxs)("div",{className:"ftd-search-category-header",id:`ftd-search-group-${T}`,children:[S.category.charAt(0).toUpperCase()+S.category.slice(1)," \xB7 ",S.type.charAt(0).toUpperCase()+S.type.slice(1),(0,P.jsx)("span",{className:"ftd-search-count",children:S.results.length})]}),S.results.map((h,k)=>{let B=i.indexOf(h)===f;return(0,P.jsxs)("div",{className:`ftd-search-result-item ${B?"ftd-search-result-selected":""}`,onClick:()=>q(h.token),id:`ftd-search-option-${h.token.id}`,role:"option","aria-selected":B,children:[h.token.type==="color"&&(0,P.jsx)("div",{className:"ftd-search-result-preview",style:{backgroundColor:h.token.preview}}),(0,P.jsxs)("div",{className:"ftd-search-result-content",children:[(0,P.jsx)("div",{className:"ftd-search-result-name",dangerouslySetInnerHTML:{__html:nt(h.token.name,r)}}),(0,P.jsxs)("div",{className:"ftd-search-result-meta",children:[(0,P.jsx)("span",{className:"ftd-search-result-value",dangerouslySetInnerHTML:{__html:nt(h.token.value,r)}}),(0,P.jsx)("span",{className:"ftd-search-result-separator",children:"\xB7"}),(0,P.jsx)("span",{className:"ftd-search-result-css",dangerouslySetInnerHTML:{__html:nt(h.token.cssVariable,r)}})]})]}),B&&(0,P.jsx)("kbd",{className:"ftd-search-enter-kbd",children:"\u21B5"})]},h.token.id)})]},T))]}),i.length>0&&(0,P.jsx)("div",{className:"ftd-search-footer",children:(0,P.jsxs)("div",{className:"ftd-search-footer-hint",children:[(0,P.jsx)("kbd",{children:"\u2191"}),(0,P.jsx)("kbd",{children:"\u2193"})," Navigate",(0,P.jsx)("kbd",{children:"\u21B5"})," Copy",(0,P.jsx)("kbd",{children:"ESC"})," Close"]})})]})})}var xe=xt(require("react"),1);function yt(t,s){if(typeof t!="string")return String(t);let e=t.match(/^\{(.+)\}$/);if(e){let o=e[1],a=o.replace(/\./g,"-");if(a.startsWith("base-")){let l=a.slice(5).toLowerCase();["space","size","radius","line-height","border-width"].some(n=>l.includes(n))&&(a=o.replace(/\./g,"-").slice(5))}if(s==="css")return`var(--${a})`;if(s==="scss")return`$${a}`}return t}function Ve(t){let s=[],e=(o,a)=>{let l=o.toLowerCase(),r=["space","size","radius","line-height","border-width"].some(n=>l.includes(n));return a==="color"||!r&&(l.includes("color")||l.includes("fill")||l.includes("stroke")||!r)?"color":l.includes("space")||l.includes("spacing")?"spacing":l.includes("size")?"size":l.includes("radius")?"radius":l.includes("font")||l.includes("line-height")||l.includes("typography")?"typography":"dimension"};if(t["Foundation/Value"]?.base){let o=t["Foundation/Value"].base;Object.entries(o).forEach(([a,l])=>{typeof l=="object"&&l!==null&&Object.entries(l).forEach(([r,n])=>{if(n&&typeof n=="object"&&"value"in n){let i=e(a,n.type),c=["space","size","radius","line-height","border-width"].some(b=>a.toLowerCase().includes(b)),f=i==="color"||!c;s.push({name:f?`base-${a}-${r}`:`${a}-${r}`,value:String(n.value),cssVariable:f?`--base-${a}-${r}`:`--${a}-${r}`,type:i,category:"Foundation"})}})})}if(t["Semantic/Value"]){let o=t["Semantic/Value"];["fill","stroke","text"].forEach(a=>{let l=o[a];l&&typeof l=="object"&&Object.entries(l).forEach(([r,n])=>{n&&typeof n=="object"&&"value"in n&&s.push({name:`${a}-${r}`,value:String(n.value),cssVariable:`--${a}-${r}`,type:"color",category:"Semantic"})})})}if(t["Components/Mode 1"]){let o=t["Components/Mode 1"];Object.entries(o).forEach(([a,l])=>{typeof l=="object"&&l!==null&&Object.entries(l).forEach(([r,n])=>{typeof n=="object"&&n!==null&&Object.entries(n).forEach(([i,c])=>{c&&typeof c=="object"&&"value"in c&&s.push({name:`${a}-${r}-${i}`,value:String(c.value),cssVariable:`--${a}-${r}-${i}`,type:e(r),category:`Component (${a})`})})})})}return s}function rt(t){let s=Ve(t),e=`:root {
+`,o=["Foundation","Semantic"],a=Array.from(new Set(s.map(l=>l.category))).filter(l=>l.startsWith("Component"));return[...o,...a].forEach(l=>{let r=s.filter(n=>n.category===l);r.length>0&&(e+=`  /* ${l} */
+`,r.forEach(n=>{let i=yt(n.value,"css");e+=`  ${n.cssVariable}: ${i};
+`}),e+=`
+`)}),e=e.trim()+`
+}`,e}function it(t){let s=Ve(t),e="",o=["Foundation","Semantic"],a=Array.from(new Set(s.map(r=>r.category))).filter(r=>r.startsWith("Component"));return[...o,...a].forEach(r=>{let n=s.filter(i=>i.category===r);n.length>0&&(e+=`// ${r}
+`,n.forEach(i=>{let c=i.cssVariable.replace("--","$"),f=yt(i.value,"scss");e+=`${c}: ${f};
+`}),e+=`
+`)}),e+=`// Token Map
+$tokens: (
+`,s.forEach(r=>{let n=yt(r.value,"scss");e+=`  "${r.name}": ${n},
+`}),e+=");",e}function lt(t){let s=Ve(t),e={};return s.forEach(o=>{e[o.name]=o.value}),`export const tokens = ${JSON.stringify(e,null,2)};`}function ct(t){let s=Ve(t),e={theme:{extend:{colors:{},spacing:{},borderRadius:{},fontSize:{}}}};return s.forEach(o=>{let a=o.name;o.type==="color"?e.theme.extend.colors[a]=`var(${o.cssVariable})`:o.type==="spacing"?e.theme.extend.spacing[a]=`var(${o.cssVariable})`:o.type==="radius"?e.theme.extend.borderRadius[a]=`var(${o.cssVariable})`:o.type==="typography"&&o.name.includes("font-size")&&(e.theme.extend.fontSize[a]=`var(${o.cssVariable})`)}),Object.keys(e.theme.extend.colors).length===0&&delete e.theme.extend.colors,Object.keys(e.theme.extend.spacing).length===0&&delete e.theme.extend.spacing,Object.keys(e.theme.extend.borderRadius).length===0&&delete e.theme.extend.borderRadius,Object.keys(e.theme.extend.fontSize).length===0&&delete e.theme.extend.fontSize,`/** @type {import('tailwindcss').Config} */
+module.exports = ${JSON.stringify(e,null,2)};`}var dt=(t,s)=>{if(!t)return"";let e=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");return s==="css"||s==="scss"?e.replace(/(\/\*[\s\S]*?\*\/)|(^[ \t]*(?::root|&amp;|\.|@)[a-zA-Z0-9:_-]*)|((?:--|\$|[a-zA-Z-])[a-zA-Z0-9-]*|"[^"]*"|'[^']*')(?=[ \t]*:)|(var\(--[a-zA-Z0-9-]+\)|\$[a-zA-Z0-9-]+|#[a-fA-F0-9]+|[0-9]+(?:\.[0-9]+)?(?:px|rem|em|%)?|'[^']*'|"[^"]*")|([\{\};:])/gm,(o,a,l,r,n,i)=>a?`<span class="ftd-sh-comment">${a}</span>`:l?`<span class="ftd-sh-selector">${l}</span>`:r?`<span class="ftd-sh-property">${r}</span>`:n?`<span class="ftd-sh-value">${o}</span>`:i?`<span class="ftd-sh-punctuation">${i}</span>`:o):s==="js"?e.replace(/(\/\*[\s\S]*?\*\/|\/\/.+)|(\b(?:export|const|let|var|function|return|if|else|for|while|import|from|type|interface|module|exports|require)\b)|(".*?"|'.*?'|`[\s\S]*?`)(?=[ \t]*:)|(".*?"|'.*?'|`[\s\S]*?`)|(\b\d+(\.\d+)?\b)|([\{\}\(\)\[\],;:])|(\b[a-zA-Z_$][a-zA-Z0-9_$]*\b)(?=[ \t]*:)/g,(o,a,l,r,n,i,c,f)=>a?`<span class="ftd-sh-comment">${o}</span>`:l?`<span class="ftd-sh-keyword">${o}</span>`:r||f?`<span class="ftd-sh-property">${o}</span>`:n?`<span class="ftd-sh-value">${o}</span>`:i?`<span class="ftd-sh-value">${o}</span>`:c?`<span class="ftd-sh-punctuation">${o}</span>`:o):e.replace(/(&lt;\/?[a-zA-Z0-9]+|&gt;)|([a-zA-Z-]+)(?==)|(")([^"]*)(")|([\{\}\(\)\[\],;])|(=)/g,(o,a,l,r,n,i,c,f)=>{if(a)return`<span class="ftd-sh-tag">${a}</span>`;if(l)return`<span class="ftd-sh-attr">${l}</span>`;if(r&&i){let b=n.replace(/([a-zA-Z0-9:\[\]\/-]+)/g,m=>`<span class="ftd-sh-value">${m}</span>`);return`<span class="ftd-sh-punctuation">${r}</span>${b}<span class="ftd-sh-punctuation">${i}</span>`}return c||f?`<span class="ftd-sh-punctuation">${o}</span>`:o})};var M=require("react/jsx-runtime");function pt({isOpen:t,onClose:s,tokens:e}){let[o,a]=(0,xe.useState)("css"),[l,r]=(0,xe.useState)(!1),n=(0,xe.useRef)(null),i=xe.default.useMemo(()=>{switch(o){case"css":return rt(e);case"scss":return it(e);case"js":return lt(e);case"tailwind":return ct(e)}},[o,e]);(0,xe.useEffect)(()=>{t&&r(!1)},[t,o]);let c=async()=>{try{if(navigator?.clipboard?.writeText)await navigator.clipboard.writeText(i);else{let C=document.createElement("textarea");C.value=i,document.body.appendChild(C),C.select(),document.execCommand("copy"),document.body.removeChild(C)}r(!0),setTimeout(()=>r(!1),2e3)}catch(C){console.error("Failed to copy code:",C)}},f=()=>{let z=o==="tailwind"?"tailwind.config.js":`tokens.${{css:"css",scss:"scss",js:"js",tailwind:"js"}[o]}`,q=new Blob([i],{type:"text/plain"}),N=URL.createObjectURL(q),V=document.createElement("a");V.href=N,V.download=z,document.body.appendChild(V),V.click(),document.body.removeChild(V),URL.revokeObjectURL(N)},b=C=>{C.target===C.currentTarget&&s()};return t?(0,M.jsx)("div",{className:"ftd-export-modal",onClick:b,children:(0,M.jsxs)("div",{className:"ftd-export-container",children:[(0,M.jsxs)("div",{className:"ftd-export-header",children:[(0,M.jsxs)("div",{className:"ftd-export-title-group",children:[(0,M.jsx)("h2",{className:"ftd-export-title",children:"Export Tokens"}),(0,M.jsx)("p",{className:"ftd-export-subtitle",children:"Generate and download code snippets for your project"})]}),(0,M.jsx)("button",{className:"ftd-export-close",onClick:s,children:(0,M.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,M.jsx)("path",{d:"M18 6 6 18M6 6l12 12"})})})]}),(0,M.jsx)("div",{className:"ftd-export-tabs",children:[{id:"css",label:"CSS Variables"},{id:"scss",label:"SCSS"},{id:"js",label:"JavaScript"},{id:"tailwind",label:"Tailwind"}].map(C=>(0,M.jsx)("button",{className:`ftd-export-tab ${o===C.id?"active":""}`,onClick:()=>a(C.id),children:C.label},C.id))}),(0,M.jsx)("div",{className:"ftd-export-body",children:(0,M.jsxs)("div",{className:"ftd-export-code-wrapper",children:[(0,M.jsxs)("div",{className:"ftd-export-actions",children:[(0,M.jsx)("button",{className:"ftd-export-action-btn",onClick:c,children:l?"Copied!":(0,M.jsxs)(M.Fragment,{children:[(0,M.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",style:{marginRight:"6px"},children:[(0,M.jsx)("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",ry:"2"}),(0,M.jsx)("path",{d:"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"})]}),"Copy"]})}),(0,M.jsxs)("button",{className:"ftd-export-action-btn",onClick:f,children:[(0,M.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",style:{marginRight:"6px"},children:[(0,M.jsx)("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4"}),(0,M.jsx)("polyline",{points:"7 10 12 15 17 10"}),(0,M.jsx)("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]}),"Download"]})]}),(0,M.jsx)("pre",{ref:n,className:`ftd-export-code ftd-lang-${o}`,children:(0,M.jsx)("code",{dangerouslySetInnerHTML:{__html:dt(i||"",o==="tailwind"?"js":o)}})})]})}),(0,M.jsxs)("div",{className:"ftd-export-footer",children:[(0,M.jsxs)("div",{className:"ftd-export-ai-note",children:[(0,M.jsxs)("svg",{className:"ftd-ai-sparkle",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,M.jsx)("path",{d:"m12 3 1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3Z"}),(0,M.jsx)("path",{d:"M5 3v4"}),(0,M.jsx)("path",{d:"M3 5h4"}),(0,M.jsx)("path",{d:"M21 17v4"}),(0,M.jsx)("path",{d:"M19 19h4"})]}),(0,M.jsxs)("span",{children:["Tokens intelligently generated by ",(0,M.jsx)("strong",{children:"Tokvista"})]})]}),(0,M.jsx)("button",{className:"ftd-btn-primary",onClick:s,children:"Done"})]})]})}):null}var ut=require("react"),ie=require("react/jsx-runtime");function Bt({isOpen:t,onClose:s,onConfirm:e}){let o=(0,ut.useRef)(null),a=l=>{l.target===l.currentTarget&&s()};return(0,ut.useEffect)(()=>{let l=r=>{r.key==="Escape"&&s()};return t&&document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[t,s]),t?(0,ie.jsx)("div",{className:"ftd-export-modal",onClick:a,children:(0,ie.jsxs)("div",{className:"ftd-export-container mw-600",children:[(0,ie.jsxs)("div",{className:"ftd-export-header",children:[(0,ie.jsx)("div",{className:"ftd-export-title-group",children:(0,ie.jsx)("h2",{className:"ftd-export-title",children:"Reset Playground?"})}),(0,ie.jsx)("button",{className:"ftd-export-close",onClick:s,children:(0,ie.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:(0,ie.jsx)("path",{d:"M18 6 6 18M6 6l12 12"})})})]}),(0,ie.jsx)("div",{className:"ftd-export-body",children:(0,ie.jsx)("p",{style:{margin:0,color:"var(--ftd-text-secondary)",lineHeight:1.5,fontSize:"15px"},children:"This will reset all your current customization to the default values. This action cannot be undone."})}),(0,ie.jsxs)("div",{className:"ftd-export-footer",children:[(0,ie.jsx)("button",{className:"ftd-btn-secondary",onClick:s,children:"Cancel"}),(0,ie.jsx)("button",{className:"ftd-btn-primary",onClick:()=>{e(),s()},children:"Reset to Defaults"})]})]})}):null}var zt=require("react");var se=require("react");var De=require("react");var Q=require("react/jsx-runtime"),le=({label:t,value:s,tokens:e,tokenMap:o={},onChange:a,type:l})=>{let[r,n]=(0,De.useState)(!1),i=(0,De.useRef)(null);(0,De.useEffect)(()=>{let m=C=>{i.current&&!i.current.contains(C.target)&&n(!1)};return document.addEventListener("mousedown",m),()=>document.removeEventListener("mousedown",m)},[]);let c=e.find(m=>m.name===s),f=m=>oe(m,o),b=l==="color"||c?.type==="color";return(0,Q.jsxs)("div",{className:"ftd-playground-control",ref:i,children:[(0,Q.jsx)("label",{className:"ftd-playground-label",children:t}),(0,Q.jsxs)("div",{className:"ftd-custom-select-container",children:[(0,Q.jsxs)("div",{className:`ftd-custom-select-trigger ${r?"is-open":""}`,onClick:()=>n(!r),children:[(0,Q.jsx)("div",{className:"ftd-custom-select-value",children:c?(0,Q.jsxs)(Q.Fragment,{children:[b&&(0,Q.jsx)("div",{className:"ftd-color-swatch-sm",style:{backgroundColor:f(c.value)}}),(0,Q.jsx)("span",{children:c.name})]}):(0,Q.jsx)("span",{className:"ftd-text-muted",children:"Select Token"})}),(0,Q.jsx)("svg",{className:"ftd-custom-select-arrow",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,Q.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),r&&(0,Q.jsx)("div",{className:"ftd-custom-select-dropdown",children:e.map(m=>{let C=f(m.value),z=l==="color"||m.type==="color";return(0,Q.jsxs)("div",{className:`ftd-custom-option ${m.name===s?"is-selected":""}`,onClick:()=>{a(m.name),n(!1)},children:[z&&(0,Q.jsx)("div",{className:"ftd-color-swatch-sm",style:{backgroundColor:C}}),(0,Q.jsx)("span",{children:m.name}),(0,Q.jsx)("span",{className:"ftd-token-value-preview",children:C})]},m.name)})})]})]})};var y=require("react/jsx-runtime");function Et({tokens:t,tokenMap:s,config:e,setConfig:o,activeTab:a,setActiveTab:l,onReset:r}){let n=(0,se.useMemo)(()=>Ve(t),[t]),[i,c]=(0,se.useState)(!1),[f,b]=(0,se.useState)(!1),[m,C]=(0,se.useState)(!1),z=(d,$)=>n.filter(K=>{let we=K.type===d,Ie=$?K.name.startsWith($)||K.name.includes($):!0;return we&&Ie}),q=(0,se.useMemo)(()=>n.filter(d=>d.type==="color"&&(d.name.includes("fill")||d.name.includes("bg"))),[n]),N=(0,se.useMemo)(()=>n.filter(d=>d.type==="color"&&d.name.includes("text")&&!d.name.includes("stroke")),[n]),V=(0,se.useMemo)(()=>n.filter(d=>d.type==="color"&&(d.name.includes("stroke")||d.name.includes("border"))),[n]),A=(0,se.useMemo)(()=>n.filter(d=>d.type==="radius"),[n]),T=(0,se.useMemo)(()=>n.filter(d=>d.type==="spacing"),[n]),S=(0,se.useMemo)(()=>n.filter(d=>d.name.includes("font-size")),[n]),h=(0,se.useMemo)(()=>n.filter(d=>d.name.includes("line-height")),[n]),k=(d,$)=>{o(K=>({...K,[d]:$}))},W=d=>n.find($=>$.name===d),B=(d,$="initial")=>{if(!d||d==="transparent"||d==="none")return d||$;let K=W(d);return K?`var(${K.cssVariable})`:$},Z=(d,$="initial")=>!d||d==="transparent"||d==="none"?d||$:d.startsWith("#")||d.startsWith("rgb")?d:`$${d}`,X=(d,$)=>{if(!$||$==="none"||$==="transparent")return"";switch(d){case"backgroundColor":return`bg-${$}`;case"textColor":return`text-${$}`;case"borderColor":return`border-${$}`;case"borderRadius":return`rounded-${$}`;case"paddingX":return`px-${$}`;case"paddingY":return`py-${$}`;case"fontSize":return`text-${$}`;case"lineHeight":return`leading-${$}`;case"hoverBackgroundColor":return`hover:bg-${$}`;case"hoverTextColor":return`hover:text-${$}`;case"hoverBorderColor":return`hover:border-${$}`;case"activeBackgroundColor":return`active:bg-${$}`;case"activeTextColor":return`active:text-${$}`;case"activeBorderColor":return`active:border-${$}`;default:return""}},ne=(d,$="initial")=>{if(d==="transparent"||d==="none")return d;let K=W(d);return K?oe(K.value,s):$},Ne=(0,se.useMemo)(()=>{let d=B(e.backgroundColor,"transparent"),$=B(e.textColor,"#000"),K=B(e.borderColor,"transparent"),we=B(e.borderRadius,"0"),Ie=B(e.paddingX,"0"),Ae=B(e.paddingY,"0"),Ze=B(e.fontSize,"16px"),We=e.lineHeight?B(e.lineHeight,"normal"):"normal",u=B(e.hoverBackgroundColor,d),E=B(e.hoverTextColor,$),L=B(e.hoverBorderColor,K),I=B(e.activeBackgroundColor,u),H=B(e.activeTextColor,E),ee=B(e.activeBorderColor,L),G=e.className?e.className.startsWith(".")?e.className:`.${e.className}`:".button",ve=e.showIcon?`
+${G}-icon {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+}`:"";return`${G} {
+  background-color: ${d};
+  color: ${$};
+  border: 1px solid ${K};
+  border-radius: ${we};
+  padding: ${Ae} ${Ie};
+  font-size: ${Ze};
+  line-height: ${We};
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;${e.isFullWidth?`
+  width: 100%;`:""}
+}
+
+${G}:hover {
+  background-color: ${u};
+  color: ${E};
+  border-color: ${L};
+}
+
+${G}:active {
+  background-color: ${I};
+  color: ${H};
+  border-color: ${ee};
+}${ve}`},[e]),Te=(0,se.useMemo)(()=>{let d=Z(e.backgroundColor,"$fill-default"),$=Z(e.textColor,"$text-default"),K=Z(e.borderColor,"transparent"),we=Z(e.borderRadius,"0"),Ie=Z(e.paddingX,"0"),Ae=Z(e.paddingY,"0"),Ze=Z(e.fontSize,"16px"),We=e.lineHeight?Z(e.lineHeight,"normal"):"normal",u=Z(e.hoverBackgroundColor,d),E=Z(e.hoverTextColor,$),L=Z(e.hoverBorderColor,K),I=Z(e.activeBackgroundColor,u),H=Z(e.activeTextColor,E),ee=Z(e.activeBorderColor,L),G=e.className?e.className.startsWith(".")?e.className:`.${e.className}`:".button",ve=e.showIcon?`
+  ${G.replace(".","&-")}icon {
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+  }`:"";return`${G} {
+  background-color: ${d};
+  color: ${$};
+  border: 1px solid ${K};
+  border-radius: ${we};
+  padding: ${Ae} ${Ie};
+  font-size: ${Ze};
+  line-height: ${We};
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;${e.isFullWidth?`
+  width: 100%;`:""}
+
+  &:hover {
+    background-color: ${u};
+    color: ${E};
+    border-color: ${L};
+  }
+
+  &:active {
+    background-color: ${I};
+    color: ${H};
+    border-color: ${ee};
+  }
+${ve}
+}`},[e]),fe=(0,se.useMemo)(()=>{let d=[X("backgroundColor",e.backgroundColor),X("textColor",e.textColor),"border",X("borderColor",e.borderColor),X("borderRadius",e.borderRadius),X("paddingX",e.paddingX),X("paddingY",e.paddingY),X("fontSize",e.fontSize),e.lineHeight?X("lineHeight",e.lineHeight):"",X("hoverBackgroundColor",e.hoverBackgroundColor),X("hoverTextColor",e.hoverTextColor),X("hoverBorderColor",e.hoverBorderColor),X("activeBackgroundColor",e.activeBackgroundColor),X("activeTextColor",e.activeTextColor),X("activeBorderColor",e.activeBorderColor),"border transition-colors duration-200 flex items-center justify-center",e.isFullWidth?"w-full":""].filter(Boolean).join(" "),$=e.className?e.className.replace(".",""):"button",K=e.showIcon?`
+  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+  </svg>
+  ${e.buttonText||"Button"}
+`:` ${e.buttonText||"Button"} `;return`<button className="${$} ${d}">${K}</button>`},[e]),Oe=(0,se.useMemo)(()=>dt(a==="css"?Ne:a==="scss"?Te:fe,a),[Ne,Te,fe,a]),ze=(0,se.useMemo)(()=>a==="css"?Ne:a==="scss"?Te:fe,[a,Ne,Te,fe]),Pe=()=>{navigator.clipboard.writeText(ze),C(!0),setTimeout(()=>C(!1),2e3)};return(0,y.jsxs)("div",{className:"ftd-playground-layout",children:[(0,y.jsxs)("div",{className:"ftd-playground-sidebar",children:[(0,y.jsx)("h3",{className:"ftd-playground-title",children:"Properties"}),(0,y.jsxs)("div",{className:"ftd-playground-control-group",children:[(0,y.jsx)("label",{className:"ftd-playground-label",children:"Button Text"}),(0,y.jsx)("input",{type:"text",value:e.buttonText,onChange:d=>k("buttonText",d.target.value),className:"ftd-playground-input"})]}),(0,y.jsxs)("div",{className:"ftd-playground-control-group",children:[(0,y.jsx)("label",{className:"ftd-playground-label",children:"Custom Class Name"}),(0,y.jsx)("input",{type:"text",value:e.className,onChange:d=>k("className",d.target.value),placeholder:"e.g. button-custom",className:"ftd-playground-input"})]}),(0,y.jsxs)("div",{className:"ftd-playground-control-row",children:[(0,y.jsxs)("label",{className:"ftd-playground-checkbox-label",children:[(0,y.jsx)("input",{type:"checkbox",checked:e.isFullWidth,onChange:d=>k("isFullWidth",d.target.checked),className:"ftd-playground-checkbox"}),"Full Width"]}),(0,y.jsxs)("label",{className:"ftd-playground-checkbox-label",children:[(0,y.jsx)("input",{type:"checkbox",checked:e.showIcon,onChange:d=>k("showIcon",d.target.checked),className:"ftd-playground-checkbox"}),"Show Icon"]})]}),(0,y.jsxs)("div",{className:"ftd-playground-section-header",children:[(0,y.jsx)("span",{children:"Colors"}),(0,y.jsx)("div",{className:"ftd-playground-header-line"})]}),(0,y.jsx)(le,{label:"Background Color",value:e.backgroundColor,tokens:n.filter(d=>d.name.startsWith("fill-")),tokenMap:s,type:"color",onChange:d=>k("backgroundColor",d)}),(0,y.jsx)(le,{label:"Text Color",value:e.textColor,tokens:n.filter(d=>d.name.startsWith("text-")),tokenMap:s,type:"color",onChange:d=>k("textColor",d)}),(0,y.jsx)(le,{label:"Border Color",value:e.borderColor,tokens:n.filter(d=>d.name.startsWith("stroke-")),tokenMap:s,type:"color",onChange:d=>k("borderColor",d)}),(0,y.jsxs)("div",{className:"ftd-playground-section-header",children:[(0,y.jsx)("span",{children:"Shape & Spacing"}),(0,y.jsx)("div",{className:"ftd-playground-header-line"})]}),(0,y.jsx)(le,{label:"Border Radius",value:e.borderRadius,tokens:A,tokenMap:s,onChange:d=>k("borderRadius",d)}),(0,y.jsxs)("div",{className:"ftd-playground-control-row",children:[(0,y.jsx)(le,{label:"Padding X",value:e.paddingX,tokens:n.filter(d=>d.name.includes("space")),tokenMap:s,onChange:d=>k("paddingX",d)}),(0,y.jsx)(le,{label:"Padding Y",value:e.paddingY,tokens:n.filter(d=>d.name.includes("space")),tokenMap:s,onChange:d=>k("paddingY",d)})]}),(0,y.jsxs)("div",{className:"ftd-playground-section-header",children:[(0,y.jsx)("span",{children:"Typography"}),(0,y.jsx)("div",{className:"ftd-playground-header-line"})]}),(0,y.jsx)(le,{label:"Font Size",value:e.fontSize,tokens:n.filter(d=>d.name.startsWith("font-size-")),tokenMap:s,onChange:d=>k("fontSize",d)}),(0,y.jsx)(le,{label:"Line Height",value:e.lineHeight,tokens:n.filter(d=>d.name.startsWith("line-height-")),tokenMap:s,onChange:d=>k("lineHeight",d)}),(0,y.jsxs)("div",{className:"ftd-playground-section-header",style:{marginTop:"24px"},children:[(0,y.jsx)("span",{children:"Hover State"}),(0,y.jsx)("div",{className:"ftd-playground-header-line"})]}),(0,y.jsx)(le,{label:"Hover Background",value:e.hoverBackgroundColor,tokens:n.filter(d=>d.name.startsWith("fill-")),tokenMap:s,type:"color",onChange:d=>k("hoverBackgroundColor",d)}),(0,y.jsx)(le,{label:"Hover Text Color",value:e.hoverTextColor,tokens:n.filter(d=>d.name.startsWith("text-")),tokenMap:s,type:"color",onChange:d=>k("hoverTextColor",d)}),(0,y.jsx)(le,{label:"Hover Border Color",value:e.hoverBorderColor,tokens:n.filter(d=>d.name.startsWith("stroke-")),tokenMap:s,type:"color",onChange:d=>k("hoverBorderColor",d)}),(0,y.jsxs)("div",{className:"ftd-playground-section-header",style:{marginTop:"24px"},children:[(0,y.jsx)("span",{children:"Active State"}),(0,y.jsx)("div",{className:"ftd-playground-header-line"})]}),(0,y.jsx)(le,{label:"Active Background",value:e.activeBackgroundColor,tokens:n.filter(d=>d.name.startsWith("fill-")),tokenMap:s,type:"color",onChange:d=>k("activeBackgroundColor",d)}),(0,y.jsx)(le,{label:"Active Text Color",value:e.activeTextColor,tokens:n.filter(d=>d.name.startsWith("text-")),tokenMap:s,type:"color",onChange:d=>k("activeTextColor",d)}),(0,y.jsx)(le,{label:"Active Border Color",value:e.activeBorderColor,tokens:n.filter(d=>d.name.startsWith("stroke-")),tokenMap:s,type:"color",onChange:d=>k("activeBorderColor",d)}),(0,y.jsx)("div",{children:(0,y.jsxs)("button",{type:"button",onClick:r,className:"ftd-playground-reset-btn",children:[(0,y.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,y.jsx)("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),(0,y.jsx)("path",{d:"M3 3v5h5"})]}),"Reset to Defaults"]})})]}),(0,y.jsxs)("div",{className:"ftd-playground-preview-area",children:[(0,y.jsx)("div",{className:"ftd-playground-canvas",children:(0,y.jsxs)("button",{style:{backgroundColor:ne(f&&e.activeBackgroundColor?e.activeBackgroundColor:i&&e.hoverBackgroundColor?e.hoverBackgroundColor:e.backgroundColor,"#3b82f6"),color:ne(f&&e.activeTextColor?e.activeTextColor:i&&e.hoverTextColor?e.hoverTextColor:e.textColor,"#ffffff"),borderColor:ne(f&&e.activeBorderColor?e.activeBorderColor:i&&e.hoverBorderColor?e.hoverBorderColor:e.borderColor,"transparent"),borderWidth:"1px",borderStyle:e.borderColor==="transparent"?"none":"solid",borderRadius:ne(e.borderRadius,"8px"),padding:`${ne(e.paddingY,"12px")} ${ne(e.paddingX,"24px")}`,fontSize:ne(e.fontSize,"16px"),lineHeight:ne(e.lineHeight,"normal"),cursor:"pointer",fontWeight:500,fontFamily:"inherit",transition:"all 0.2s ease",width:e.isFullWidth?"100%":"auto",display:"inline-flex",alignItems:"center",justifyContent:"center"},onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),onMouseDown:()=>b(!0),onMouseUp:()=>b(!1),children:[e.showIcon&&(0,y.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"ftd-playground-preview-button-icon",children:(0,y.jsx)("path",{d:"M13 10V3L4 14h7v7l9-11h-7z"})}),e.buttonText||"Button Preview"]})}),(0,y.jsxs)("div",{className:"ftd-playground-code",children:[(0,y.jsxs)("div",{className:"ftd-code-header",children:[(0,y.jsxs)("div",{className:"ftd-playground-tabs",children:[(0,y.jsx)("button",{type:"button",className:`ftd-playground-tab-btn ${a==="css"?"active":""}`,onClick:()=>l("css"),children:"CSS"}),(0,y.jsx)("button",{type:"button",className:`ftd-playground-tab-btn ${a==="scss"?"active":""}`,onClick:()=>l("scss"),children:"SCSS"}),(0,y.jsx)("button",{type:"button",className:`ftd-playground-tab-btn ${a==="tailwind"?"active":""}`,onClick:()=>l("tailwind"),children:"Tailwind"})]}),(0,y.jsx)("button",{type:"button",onClick:Pe,className:"ftd-playground-copy-btn",children:m?"Copied!":"Copy"})]}),(0,y.jsx)("pre",{className:`ftd-lang-${a}`,children:(0,y.jsx)("code",{dangerouslySetInnerHTML:{__html:Oe}})})]})]})]})}var me=require("react/jsx-runtime");function Lt({activeComponent:t,onComponentChange:s}){return(0,me.jsxs)("div",{className:"ftd-playground-toolbar-v2",children:[(0,me.jsxs)("div",{className:"ftd-playground-toolbar-header",children:[(0,me.jsx)("h3",{className:"ftd-playground-toolbar-title",children:"Playground"}),(0,me.jsx)("p",{className:"ftd-playground-toolbar-subtitle",children:"Test and customize components with your design tokens"})]}),(0,me.jsx)("div",{className:"ftd-playground-tabs-v2",children:[{id:"button",label:"Button",icon:"button"},{id:"input",label:"Input",icon:"input",disabled:!0},{id:"card",label:"Card",icon:"card",disabled:!0},{id:"badge",label:"Badge",icon:"badge",disabled:!0}].map(o=>(0,me.jsxs)("button",{type:"button",disabled:o.disabled,className:`ftd-playground-tab-btn-v2 ${t===o.id?"active":""} ${o.disabled?"disabled":""}`,onClick:()=>!o.disabled&&s(o.id),title:o.disabled?"Coming soon":o.label,children:[(0,me.jsx)("span",{className:"ftd-playground-tab-icon",children:(0,me.jsx)(D,{name:o.icon})}),(0,me.jsx)("span",{className:"ftd-playground-tab-label",children:o.label}),o.disabled&&(0,me.jsx)("span",{className:"ftd-playground-tab-badge",children:"Soon"})]},o.id))})]})}var je=require("react/jsx-runtime");function It({tokens:t,tokenMap:s,config:e,setConfig:o,activeTab:a,setActiveTab:l,onReset:r}){let[n,i]=(0,zt.useState)("button"),c=[{id:"button",label:"Button"}];return(0,je.jsxs)("div",{className:"ftd-playground-container",children:[(0,je.jsx)(Lt,{activeComponent:n,onComponentChange:i}),(0,je.jsx)("div",{className:"ftd-playground-content",children:n==="button"&&(0,je.jsx)(Et,{tokens:t,tokenMap:s,config:e,setConfig:o,activeTab:a,setActiveTab:l,onReset:r})})]})}var g=require("react/jsx-runtime");function bt({tokens:t,title:s="Design Tokens",subtitle:e="Interactive documentation for your design system",defaultTab:o,showSearch:a=!0,darkMode:l=!1,onTokenClick:r}){let[n,i]=(0,Y.useState)(o||"foundation"),[c,f]=(0,Y.useState)(!1),[b,m]=(0,Y.useState)(l),[C,z]=(0,Y.useState)(null),[q,N]=(0,Y.useState)(!1),[V,A]=(0,Y.useState)(!1),[T,S]=(0,Y.useState)(!1),h={backgroundColor:"fill-blue",textColor:"text-white",borderColor:"stroke-blue",borderRadius:"radius-sm",paddingX:"space-md",paddingY:"space-sm",fontSize:"font-size-md",lineHeight:"line-height-md",hoverBackgroundColor:"fill-blue-dark",hoverTextColor:"text-white",hoverBorderColor:"stroke-blue-dark",buttonText:"Button Preview",isFullWidth:!1,showIcon:!1,activeBackgroundColor:"fill-blue-darker",activeTextColor:"text-white",activeBorderColor:"stroke-blue-dark",className:"button"},[k,W]=(0,Y.useState)(()=>{if(typeof window<"u")try{let u=localStorage.getItem("ftd-playground-config");if(u){let E=JSON.parse(u),L={...E};return E.padding&&!E.paddingX&&(L.paddingX=E.padding,L.paddingY=E.padding,delete L.padding),L.activeBorderColor==="stroke-blue-darker"&&(L.activeBorderColor="stroke-blue-dark"),{...h,...L}}}catch{}return h});(0,Y.useLayoutEffect)(()=>{if(f(!0),typeof window<"u")try{let u=localStorage.getItem("ftd-active-tab");u&&["foundation","semantic","components","playground"].includes(u)&&i(u)}catch{}},[]);let B=()=>{S(!0)},Z=()=>{if(W(h),typeof window<"u")try{localStorage.removeItem("ftd-playground-config")}catch{}},[X,ne]=(0,Y.useState)(()=>{if(typeof window<"u")try{let u=localStorage.getItem("ftd-playground-active-tab");if(u&&(u==="css"||u==="scss"||u==="tailwind"))return u}catch{}return"css"});(0,Y.useEffect)(()=>{try{let u=localStorage.getItem("ftd-theme-preference");u==="dark"?m(!0):u==="light"&&m(!1)}catch{}},[]);let Ne=()=>{m(u=>{let E=!u;try{localStorage.setItem("ftd-theme-preference",E?"dark":"light")}catch{}return E})};(0,Y.useEffect)(()=>{try{localStorage.setItem("ftd-playground-config",JSON.stringify(k))}catch{}},[k]),(0,Y.useEffect)(()=>{try{localStorage.setItem("ftd-playground-active-tab",X)}catch{}},[X]),(0,Y.useEffect)(()=>{if(typeof window<"u"&&c)try{localStorage.setItem("ftd-active-tab",n)}catch{}},[n,c]),(0,Y.useEffect)(()=>{let u=E=>{(E.metaKey||E.ctrlKey)&&E.key==="k"&&(E.preventDefault(),N(!0))};return window.addEventListener("keydown",u),()=>window.removeEventListener("keydown",u)},[]);let Te=(u,E,L)=>{let I=G=>{if(!G)return"";let ve=G.trim();return ve.startsWith("var(")&&ve.endsWith(")")&&(ve=ve.slice(4,-1).trim()),ve},H=I(L),ee=G=>{let ve=[`[data-token-name="${u}"]`,`[data-token="${u}"]`],U=null;for(let be of ve)if(U=document.querySelector(be),U)break;if(!U&&H&&(U=document.querySelector(`[data-token-css-var="${H}"]`)),!U&&H){let be=document.querySelectorAll(".ftd-token-css-var, .ftd-shade-css-var");for(let Se of Array.from(be)){let He=I(Se.textContent||"");if(He&&He===H){let ft=Se.closest(".ftd-color-shade, .ftd-token-card, .ftd-spacing-item, .ftd-size-item, .ftd-radius-item, .ftd-dimension-item, .ftd-display-card");if(ft){U=ft;break}}}}if(!U){let be=document.querySelectorAll(".ftd-color-shade, .ftd-spacing-item, .ftd-size-item, .ftd-radius-item, .ftd-token-card, .ftd-search-result-item");for(let Se of Array.from(be))if(Se.textContent?.includes(u)){U=Se;break}}if(!U&&G<15){setTimeout(()=>ee(G+1),160);return}if(U){let be=ce=>{let $e=ce.trim();if($e.startsWith("rgb")){let te=$e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?/i);return te?{r:parseInt(te[1],10),g:parseInt(te[2],10),b:parseInt(te[3],10),a:te[4]?parseFloat(te[4]):1}:null}if($e.startsWith("#")){let te=$e.slice(1);if(te.length===3&&(te=te.split("").map(_e=>_e+_e).join("")),te.length!==6)return null;let vt=parseInt(te.slice(0,2),16),kt=parseInt(te.slice(2,4),16),Re=parseInt(te.slice(4,6),16);return{r:vt,g:kt,b:Re,a:1}}return null},Se=ce=>ce==="transparent"||ce==="rgba(0, 0, 0, 0)"||ce==="rgba(0,0,0,0)",He=ce=>!ce||ce.a<.1?!1:(.2126*ce.r+.7152*ce.g+.0722*ce.b)/255<.92,he=(ce=>{let $e=ce.querySelector(".ftd-token-swatch, .ftd-token-preview, .ftd-color-family-swatch, .ftd-color-shade, .ftd-search-result-preview");if($e){let Re=getComputedStyle($e).backgroundColor;if(Re&&!Se(Re)){let _e=be(Re);if(He(_e))return _e}}let te=getComputedStyle(ce).backgroundColor;if(te&&!Se(te)){let Re=be(te);if(He(Re))return Re}let vt=getComputedStyle(document.documentElement).getPropertyValue("--ftd-primary").trim();return be(vt)||{r:59,g:130,b:246,a:1}})(U);he&&(U.style.setProperty("--ftd-highlight",`rgba(${he.r}, ${he.g}, ${he.b}, 0.22)`),U.style.setProperty("--ftd-highlight-strong",`rgba(${he.r}, ${he.g}, ${he.b}, 0.48)`),U.style.setProperty("--ftd-highlight-bg",`rgba(${he.r}, ${he.g}, ${he.b}, 0.12)`)),U.scrollIntoView({behavior:"smooth",block:"center"}),U.classList.add("ftd-token-highlight");let mt=()=>{U?.classList.remove("ftd-token-highlight"),U?.style.removeProperty("--ftd-highlight"),U?.style.removeProperty("--ftd-highlight-strong"),U?.style.removeProperty("--ftd-highlight-bg"),document.removeEventListener("mousedown",mt)},Wt=setTimeout(mt,8e3);document.addEventListener("mousedown",()=>{clearTimeout(Wt),mt()},{once:!0})}};setTimeout(()=>ee(0),200)},{foundationTokens:fe,semanticTokens:Oe,componentTokens:ze}=(0,Y.useMemo)(()=>{let u=t["Foundation/Value"]||{},E=u.base||u,L=t["Semantic/Value"]||{},I=Object.entries(t).filter(([H])=>H.startsWith("Components/")).reduce((H,[ee,G])=>G&&typeof G=="object"?{...H,...G}:H,{});return{foundationTokens:E,semanticTokens:L,componentTokens:I}},[t]),Pe=(0,Y.useMemo)(()=>ge(t),[t]),d=(0,Y.useMemo)(()=>{let u=[];return Object.keys(fe).length>0&&u.push({id:"foundation",label:"Foundation",icon:(0,g.jsx)(D,{name:"foundation"})}),Object.keys(Oe).length>0&&u.push({id:"semantic",label:"Semantic",icon:(0,g.jsx)(D,{name:"semantic"})}),Object.keys(ze).length>0&&u.push({id:"components",label:"Components",icon:(0,g.jsx)(D,{name:"components"})}),u.push({id:"playground",label:"Playground",icon:(0,g.jsx)(D,{name:"playground"})}),u},[fe,Oe,ze]),$=(0,Y.useMemo)(()=>{let u={},E=I=>I&&typeof I=="object"&&I.hasOwnProperty("value")&&I.hasOwnProperty("type"),L=I=>{if(!I||typeof I!="object")return!1;let H=Object.values(I);return H.length>0&&H.every(ee=>E(ee)&&(ee.type==="dimension"||ee.type==="spacing"||ee.type==="sizing"||ee.type==="borderRadius"))};return Object.entries(ze).forEach(([I,H])=>{!H||typeof H!="object"||E(H)||(u[I]||(u[I]={variants:{},dimensions:{}}),Object.entries(H).forEach(([ee,G])=>{L(G)?u[I].dimensions[ee]=G:typeof G=="object"&&!E(G)&&(u[I].variants[ee]=G)}))}),u},[ze]),K=(u,E)=>{let L=u||E;if(!L)return E;if(L.startsWith("var("))return L;if(L.startsWith("--"))return`var(${L})`;if(L.startsWith("{")&&L.endsWith("}")){let I=L.slice(1,-1);return`var(${ke(I)})`}return L},we=(u,E)=>{navigator.clipboard.writeText(u),z(K(E,u)),setTimeout(()=>z(null),2e3)},Ie=(u,E)=>{for(let L of E){let I=Object.entries(u).find(([H])=>{let ee=H.toLowerCase();return ee===L||ee.includes(L)});if(I&&Ae(I[1])){let H=I[1].value;return{name:I[0],reference:H,resolved:oe(H,Pe)}}}return null},Ae=u=>u&&typeof u=="object"&&u.hasOwnProperty("value")&&u.hasOwnProperty("type"),Ze=({data:u})=>u?(0,g.jsxs)("div",{className:"ftd-table-swatch-container",onClick:()=>we(u.resolved,u.reference),children:[(0,g.jsx)("div",{className:"ftd-table-swatch",style:{backgroundColor:u.resolved}}),(0,g.jsxs)("div",{className:"ftd-table-value-group",children:[(0,g.jsx)("code",{className:"ftd-table-hex",children:u.resolved}),(0,g.jsx)("span",{className:"ftd-table-ref",title:u.reference,children:u.reference.startsWith("{")?u.reference.slice(1,-1).split(".").pop():"Raw"})]})]}):(0,g.jsx)("span",{className:"ftd-cell-empty",children:"-"}),We=()=>(0,g.jsxs)("div",{className:"ftd-container","data-theme":b?"dark":"light",children:[(0,g.jsxs)("div",{className:"ftd-navbar-sticky",children:[(0,g.jsxs)("header",{className:"ftd-header",children:[(0,g.jsxs)("div",{className:"ftd-title-wrapper",children:[(0,g.jsx)("div",{className:"ftd-skeleton-pulse ftd-skeleton-title"}),(0,g.jsx)("div",{className:"ftd-skeleton-pulse ftd-skeleton-subtitle"})]}),(0,g.jsxs)("div",{className:"ftd-header-actions",children:[(0,g.jsx)("div",{className:"ftd-skeleton-pulse ftd-skeleton-action-pulse ftd-skeleton-export"}),(0,g.jsx)("div",{className:"ftd-skeleton-pulse ftd-skeleton-action-pulse ftd-skeleton-search"}),(0,g.jsx)("div",{className:"ftd-skeleton-pulse ftd-skeleton-action-pulse ftd-skeleton-theme"})]})]}),(0,g.jsx)("div",{className:"ftd-skeleton-tabs",children:[1,2,3,4].map(u=>(0,g.jsx)("div",{className:"ftd-skeleton-pulse ftd-skeleton-tab"},u))})]}),(0,g.jsx)("div",{className:"ftd-content",children:(0,g.jsx)("div",{className:"ftd-skeleton-content",children:[1,2,3,4,5,6].map(u=>(0,g.jsx)("div",{className:"ftd-skeleton-pulse ftd-skeleton-card"},u))})})]});return c?(0,g.jsxs)("div",{className:"ftd-container ftd-container-animated","data-theme":b?"dark":"light",style:{opacity:c?1:0},children:[C&&(0,g.jsxs)("div",{className:"ftd-copied-toast",role:"status","aria-live":"polite",children:[(0,g.jsx)("div",{className:"ftd-toast-icon",children:(0,g.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,g.jsx)("polyline",{points:"20 6 9 17 4 12"})})}),(0,g.jsxs)("div",{className:"ftd-toast-content",children:[(0,g.jsx)("span",{className:"ftd-toast-label",children:"Copied"}),(0,g.jsx)("span",{className:"ftd-toast-value",children:C})]})]}),(0,g.jsxs)("div",{className:"ftd-navbar-sticky",children:[(0,g.jsxs)("header",{className:"ftd-header",children:[(0,g.jsxs)("div",{className:"ftd-title-wrapper",children:[(0,g.jsx)("h1",{className:"ftd-title",children:s}),(0,g.jsx)("p",{className:"ftd-subtitle",children:e})]}),(0,g.jsxs)("div",{className:"ftd-header-actions",children:[(0,g.jsxs)("button",{className:"ftd-export-button-nav",onClick:()=>A(!0),type:"button",children:[(0,g.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[(0,g.jsx)("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2 2v4"}),(0,g.jsx)("polyline",{points:"7 10 12 15 17 10"}),(0,g.jsx)("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]}),(0,g.jsx)("span",{children:"Export"})]}),(0,g.jsxs)("button",{className:"ftd-search-button",onClick:()=>N(!0),title:"Search tokens (Cmd+K)","aria-label":"Search tokens",type:"button",children:[(0,g.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[(0,g.jsx)("circle",{cx:"11",cy:"11",r:"8"}),(0,g.jsx)("path",{d:"m21 21-4.35-4.35"})]}),(0,g.jsx)("span",{children:"Search"}),(0,g.jsx)("kbd",{className:"ftd-search-shortcut",children:"\u2318K"})]}),(0,g.jsxs)("button",{className:"ftd-theme-toggle",onClick:Ne,"aria-label":b?"Switch to light mode":"Switch to dark mode",title:b?"Switch to light mode":"Switch to dark mode",type:"button",children:[(0,g.jsx)(D,{name:b?"sun":"moon"}),b?"Light":"Dark"]})]})]}),d.length>1&&(0,g.jsx)("nav",{className:"ftd-tabs","aria-label":"Documentation types",children:d.map(u=>(0,g.jsxs)("button",{type:"button",className:`ftd-tab ${n===u.id?"active":""}`,onClick:()=>i(u.id),children:[(0,g.jsx)("span",{style:{marginRight:"8px"},children:u.icon}),u.label]},u.id))})]}),(0,g.jsxs)("div",{className:"ftd-content",children:[n==="foundation"&&(0,g.jsx)(tt,{tokens:fe,tokenMap:Pe,onTokenClick:r}),n==="semantic"&&(0,g.jsx)(st,{tokens:Oe,tokenMap:Pe,onTokenClick:r}),n==="components"&&(0,g.jsx)(ot,{components:$,tokenMap:Pe,onCopy:we}),n==="playground"&&(0,g.jsx)(It,{tokens:t,tokenMap:Pe,config:k,setConfig:W,activeTab:X,setActiveTab:ne,onReset:B})]}),(0,g.jsx)(at,{isOpen:q,onClose:()=>N(!1),tokens:t,onTokenClick:r,onNavigateToTab:u=>i(u),onScrollToToken:Te}),(0,g.jsx)(pt,{isOpen:V,onClose:()=>A(!1),tokens:t}),(0,g.jsx)(Bt,{isOpen:T,onClose:()=>S(!1),onConfirm:Z})]}):(0,g.jsx)(We,{})}var Dt=bt;var ae=require("react");var x=require("react/jsx-runtime");function qe({baseColors:t,fillColors:s,strokeColors:e,textColors:o,tokenMap:a,onColorClick:l}){let[r,n]=(0,ae.useState)(null),[i,c]=(0,ae.useState)("base-colors"),f=(0,ae.useRef)(null),b=(0,ae.useMemo)(()=>a||ge({base:t,fill:s,stroke:e,text:o}),[a,t,s,e,o]),m=(0,ae.useCallback)(h=>{n(h),setTimeout(()=>n(null),2e3)},[]);(0,ae.useEffect)(()=>{let h={rootMargin:"-180px 0px -50% 0px",threshold:0};return f.current=new IntersectionObserver(W=>{let B=W.find(Z=>Z.isIntersecting);B&&c(B.target.id)},h),document.querySelectorAll(".ftd-color-section").forEach(W=>f.current?.observe(W)),()=>f.current?.disconnect()},[]);let C=h=>{let k=document.getElementById(h);k&&(c(h),k.scrollIntoView({behavior:"smooth",block:"start"}))},z=(0,ae.useCallback)(async h=>{let k=h.resolvedValue||h.value;await J(k)&&m(k),l?.(h)},[l,m]),q=(0,ae.useMemo)(()=>t?et(t,b):[],[t,b]),N=(0,ae.useMemo)(()=>s?ye(s,"fill",b):[],[s,b]),V=(0,ae.useMemo)(()=>e?ye(e,"stroke",b):[],[e,b]),A=(0,ae.useMemo)(()=>o?ye(o,"text",b):[],[o,b]),T=h=>{let k={};return h.forEach(W=>{let B=W.name.split(".")[0]||"Other";k[B]||(k[B]=[]),k[B].push(W)}),Object.entries(k).map(([W,B])=>({family:W,colors:B,primaryColor:B[0].resolvedValue||B[0].value}))},S=[{id:"base-colors",label:"Base",icon:"colors",count:q.length},{id:"fill-colors",label:"Fill",icon:"fill",count:N.length},{id:"stroke-colors",label:"Stroke",icon:"stroke",count:V.length},{id:"text-colors",label:"Text",icon:"text",count:A.length}].filter(h=>h.count>0);return(0,x.jsxs)("div",{className:"ftd-color-layout",children:[(0,x.jsx)("aside",{className:"ftd-color-sidebar",children:(0,x.jsx)("nav",{className:"ftd-color-nav",children:S.map(h=>(0,x.jsxs)("button",{className:`ftd-color-nav-link ${i===h.id?"active":""}`,onClick:()=>C(h.id),children:[(0,x.jsx)("span",{className:"ftd-nav-icon",children:(0,x.jsx)(D,{name:h.icon})}),(0,x.jsx)("span",{className:"ftd-nav-label",children:h.label}),(0,x.jsx)("span",{className:"ftd-nav-count",children:h.count})]},h.id))})}),(0,x.jsxs)("div",{className:"ftd-color-content",children:[q.length>0&&(0,x.jsxs)("div",{id:"base-colors",className:"ftd-section ftd-color-section",children:[(0,x.jsxs)("div",{className:"ftd-section-header",children:[(0,x.jsx)("div",{className:"ftd-section-icon",children:(0,x.jsx)(D,{name:"colors"})}),(0,x.jsx)("h2",{className:"ftd-section-title",children:"Base Colors"})]}),(0,x.jsx)("div",{className:"ftd-color-family-container",children:q.map(h=>(0,x.jsxs)("div",{className:"ftd-color-family",children:[(0,x.jsxs)("div",{className:"ftd-color-family-header",children:[(0,x.jsx)("div",{className:"ftd-color-family-swatch",style:{backgroundColor:h.primaryColor}}),(0,x.jsx)("h3",{className:"ftd-color-family-name",children:h.name})]}),(0,x.jsx)("div",{className:"ftd-color-scale",children:h.shades.map(k=>(0,x.jsxs)("div",{className:"ftd-color-shade","data-token-name":k.name,"data-token-css-var":k.cssVariable,style:{backgroundColor:k.resolvedValue||k.value,color:Ce(k.resolvedValue||k.value)},children:[(0,x.jsx)("span",{className:"ftd-color-shade-label",children:k.shade}),(0,x.jsxs)("div",{className:"ftd-shade-values",children:[(0,x.jsx)("span",{className:"ftd-shade-css-var",onClick:()=>J(k.cssVariable).then(()=>m(k.cssVariable)),children:k.cssVariable}),(0,x.jsx)("span",{className:"ftd-shade-hex",onClick:()=>z(k),children:k.value.startsWith("{")?k.resolvedValue?.substring(0,7):k.value.substring(0,7)})]})]},k.name))})]},h.name))})]}),[{id:"fill-colors",title:"Fill Colors",icon:"fill",data:N},{id:"stroke-colors",title:"Stroke Colors",icon:"stroke",data:V},{id:"text-colors",title:"Text Colors",icon:"text",data:A}].map(h=>h.data.length>0&&(0,x.jsxs)("div",{id:h.id,className:"ftd-section ftd-color-section",children:[(0,x.jsxs)("div",{className:"ftd-section-header",children:[(0,x.jsx)("div",{className:"ftd-section-icon",children:(0,x.jsx)(D,{name:h.icon})}),(0,x.jsx)("h2",{className:"ftd-section-title",children:h.title})]}),(0,x.jsx)("div",{className:"ftd-semantic-families",children:T(h.data).map(k=>(0,x.jsxs)("div",{className:"ftd-semantic-family",children:[(0,x.jsxs)("div",{className:"ftd-semantic-family-header",children:[(0,x.jsx)("div",{className:"ftd-color-family-swatch",style:{backgroundColor:k.primaryColor}}),(0,x.jsx)("h3",{className:"ftd-color-family-name",children:k.family})]}),(0,x.jsx)("div",{className:"ftd-semantic-family-colors",children:k.colors.map(W=>(0,x.jsx)(cs,{color:W,onCopy:z,onCopyText:m},W.name))})]},k.family))})]},h.id)),r&&(0,x.jsxs)("div",{className:"ftd-copied-toast",children:[(0,x.jsx)("div",{className:"ftd-toast-icon",children:(0,x.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:(0,x.jsx)("polyline",{points:"20 6 9 17 4 12"})})}),(0,x.jsxs)("div",{className:"ftd-toast-content",children:[(0,x.jsx)("span",{className:"ftd-toast-label",children:"Copied"}),(0,x.jsx)("span",{className:"ftd-toast-value",children:r})]})]})]})]})}function cs({color:t,onCopy:s,onCopyText:e}){let o=t.value.startsWith("{"),a=t.resolvedValue||t.value,l=Ce(a);return(0,x.jsxs)("div",{className:"ftd-token-card","data-token-name":t.name,"data-token-css-var":t.cssVariable,children:[(0,x.jsx)("div",{className:"ftd-token-swatch",style:{backgroundColor:a,color:l},children:o&&(0,x.jsx)("span",{style:{fontSize:"10px",fontWeight:600,opacity:.8},children:"Alias"})}),(0,x.jsxs)("div",{className:"ftd-token-info",children:[(0,x.jsx)("p",{className:"ftd-token-name",children:t.name}),(0,x.jsxs)("div",{className:"ftd-token-values-row",children:[(0,x.jsx)("span",{className:"ftd-token-css-var",onClick:()=>J(t.cssVariable).then(()=>e(t.cssVariable)),children:t.cssVariable}),(0,x.jsx)("span",{className:"ftd-token-hex",onClick:()=>s(t),children:o?t.resolvedValue?.substring(0,9):t.value.substring(0,9)})]})]})]})}var Fe=require("react");var ue=require("react/jsx-runtime");function jt({tokens:t,onTokenClick:s,title:e}){let o=(0,Fe.useMemo)(()=>{let a=t["Foundation/Value"]?.base||t["Foundation/Value"]||t.global||t;return a.spacing||a.space||{}},[t]);return(0,ue.jsxs)("div",{className:"ftd-standalone",children:[e&&(0,ue.jsx)("h2",{className:"ftd-standalone-title",children:e}),(0,ue.jsx)(Be,{tokens:o,onTokenClick:s})]})}function Ft({tokens:t,onTokenClick:s,title:e}){let{base:o,fill:a,stroke:l,text:r}=(0,Fe.useMemo)(()=>{let i=t["Foundation/Value"]?.base||t["Foundation/Value"]||t.global||t,c=t["Semantic/Value"]||{};return{base:i.color||i.colors||{},fill:c.fill||{},stroke:c.stroke||{},text:c.text||{}}},[t]),n=(0,Fe.useMemo)(()=>ge(t),[t]);return(0,ue.jsxs)("div",{className:"ftd-standalone",children:[e&&(0,ue.jsx)("h2",{className:"ftd-standalone-title",children:e}),(0,ue.jsx)(qe,{baseColors:o,fillColors:a,strokeColors:l,textColors:r,tokenMap:n,onColorClick:s})]})}function Ot({tokens:t,onTokenClick:s,title:e}){let o=(0,Fe.useMemo)(()=>{let a=t["Foundation/Value"]?.base||t["Foundation/Value"]||t.global||t;return a.sizing||a.size||{}},[t]);return(0,ue.jsxs)("div",{className:"ftd-standalone",children:[e&&(0,ue.jsx)("h2",{className:"ftd-standalone-title",children:e}),(0,ue.jsx)(Ee,{tokens:o,onTokenClick:s})]})}function At({tokens:t,onTokenClick:s,title:e}){let o=(0,Fe.useMemo)(()=>{let a=t["Foundation/Value"]?.base||t["Foundation/Value"]||t.global||t;return a.borderRadius||a.radius||{}},[t]);return(0,ue.jsxs)("div",{className:"ftd-standalone",children:[e&&(0,ue.jsx)("h2",{className:"ftd-standalone-title",children:e}),(0,ue.jsx)(Le,{tokens:o,onTokenClick:s})]})}0&&(module.exports={ColorDisplay,ColorGrid,Colors,ComponentsTab,ExportModal,FoundationTab,Radius,RadiusDisplay,RadiusShowcase,SearchModal,SemanticTab,SizeDisplay,SizeScale,Sizes,Spacing,SpacingDisplay,SpacingScale,TokenDocumentation,TokenDocumentationDefault,copyToClipboard,createTokenMap,detectTokenType,extractTokenGroups,generateCSS,generateJS,generateSCSS,generateTailwind,getContrastColor,getFlattenedTokens,parseBaseColors,parseRadiusTokens,parseSemanticColors,parseSizeTokens,parseSpacingTokens,resolveTokenValue});