tokvista 1.0.0

package/dist/index.js

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