@chaibuilder/sdk 4.0.0-beta.4 → 4.0.0-beta.40

package/dist/library-blocks/navbar/minimal-portfolio/minimal-portfolio.html

@@ -0,0 +1,164 @@
+<header chai-name="Minimal Portfolio Navbar" class="w-full bg-background">
+  <div chai-name="Navbar Container" class="mx-auto flex h-16 max-w-7xl items-center justify-between px-6 lg:px-8">
+    <a href="#" chai-name="Logo" class="flex items-center gap-2">
+      <div class="flex h-8 w-8 items-center justify-center rounded-full border border-border">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-foreground">
+          <polygon
+            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        </svg>
+      </div>
+      <span class="text-sm font-semibold text-foreground">Alex Morgan</span>
+    </a>
+
+    <nav chai-name="Desktop Navigation" class="hidden items-center gap-1 sm:flex">
+      <a
+        href="#"
+        class="rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >Projects</a
+      >
+      <a
+        href="#"
+        class="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >About</a
+      >
+      <a
+        href="#"
+        class="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >Resume</a
+      >
+    </nav>
+
+    <div chai-name="Desktop Actions" class="hidden items-center gap-4 sm:flex">
+      <div class="flex items-center gap-3 border-l border-border pl-4">
+        <a
+          href="#"
+          class="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+          aria-label="GitHub Profile">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+          </svg>
+        </a>
+        <a
+          href="#"
+          class="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+          aria-label="Twitter Profile">
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+          </svg>
+        </a>
+      </div>
+      <a
+        href="#"
+        class="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <rect width="20" height="16" x="2" y="4" rx="2" />
+          <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+        </svg>
+        Contact
+      </a>
+    </div>
+
+    <details chai-name="Mobile Menu" class="relative sm:hidden">
+      <summary
+        class="flex h-10 w-10 cursor-pointer list-none items-center justify-center rounded-md border border-input bg-background transition-colors hover:bg-accent">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-foreground">
+          <line x1="4" x2="20" y1="12" y2="12" />
+          <line x1="4" x2="20" y1="6" y2="6" />
+          <line x1="4" x2="20" y1="18" y2="18" />
+        </svg>
+      </summary>
+      <div
+        chai-name="Mobile Dropdown"
+        class="absolute right-0 top-12 w-56 rounded-md border border-border bg-card p-4 shadow-lg">
+        <nav class="flex flex-col gap-1">
+          <a
+            href="#"
+            class="rounded-md px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >Projects</a
+          >
+          <a
+            href="#"
+            class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >About</a
+          >
+          <a
+            href="#"
+            class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >Resume</a
+          >
+        </nav>
+        <div class="mt-3 flex flex-col gap-2 border-t border-border pt-3">
+          <div class="flex items-center gap-3 px-3 py-2">
+            <a
+              href="#"
+              class="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              aria-label="GitHub Profile">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+            </a>
+            <a
+              href="#"
+              class="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              aria-label="Twitter Profile">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+              </svg>
+            </a>
+          </div>
+          <a
+            href="#"
+            class="flex h-10 items-center justify-center gap-2 rounded-md bg-primary text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <rect width="20" height="16" x="2" y="4" rx="2" />
+              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+            </svg>
+            Contact
+          </a>
+        </div>
+      </div>
+    </details>
+  </div>
+</header>

package/dist/library-blocks/navbar/saas-startup/saas-startup.html

@@ -0,0 +1,129 @@
+<header
+  chai-name="SaaS Startup Navbar"
+  class="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur-md">
+  <div chai-name="Navbar Container" class="mx-auto flex h-16 max-w-7xl items-center justify-between px-6 lg:px-8">
+    <div chai-name="Logo" class="flex items-center gap-2">
+      <div class="flex h-8 w-8 items-center justify-center rounded-md bg-primary">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-primary-foreground">
+          <path d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
+        </svg>
+      </div>
+      <span class="text-lg font-bold tracking-tight text-foreground">Launchpad</span>
+    </div>
+
+    <nav chai-name="Desktop Navigation" class="hidden items-center gap-1 md:flex">
+      <a
+        href="#"
+        class="rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >Product</a
+      >
+      <a
+        href="#"
+        class="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >Features</a
+      >
+      <a
+        href="#"
+        class="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >Pricing</a
+      >
+      <a
+        href="#"
+        class="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >Docs</a
+      >
+      <a
+        href="#"
+        class="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        >Blog</a
+      >
+    </nav>
+
+    <div chai-name="Desktop Actions" class="hidden items-center gap-3 md:flex">
+      <a
+        href="#"
+        class="inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+        Sign In
+      </a>
+      <a
+        href="#"
+        class="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
+        Get Started
+      </a>
+    </div>
+
+    <details chai-name="Mobile Menu" class="relative md:hidden">
+      <summary
+        class="flex h-10 w-10 cursor-pointer list-none items-center justify-center rounded-md border border-input bg-background transition-colors hover:bg-accent hover:text-accent-foreground">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-foreground">
+          <line x1="4" x2="20" y1="12" y2="12" />
+          <line x1="4" x2="20" y1="6" y2="6" />
+          <line x1="4" x2="20" y1="18" y2="18" />
+        </svg>
+      </summary>
+      <div
+        chai-name="Mobile Dropdown"
+        class="absolute right-0 top-12 w-64 rounded-md border border-border bg-card p-4 shadow-lg">
+        <nav class="flex flex-col gap-1">
+          <a
+            href="#"
+            class="rounded-md px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >Product</a
+          >
+          <a
+            href="#"
+            class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >Features</a
+          >
+          <a
+            href="#"
+            class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >Pricing</a
+          >
+          <a
+            href="#"
+            class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >Docs</a
+          >
+          <a
+            href="#"
+            class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >Blog</a
+          >
+        </nav>
+        <div class="mt-4 flex flex-col gap-2 border-t border-border pt-4">
+          <a
+            href="#"
+            class="inline-flex h-10 items-center justify-center rounded-md border border-input bg-background text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+            Sign In
+          </a>
+          <a
+            href="#"
+            class="inline-flex h-10 items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
+            Get Started
+          </a>
+        </div>
+      </div>
+    </details>
+  </div>
+</header>

package/dist/manage-design-tokens-B_-TrQgu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("./index-P-2SvZA9.cjs"),g=require("./register-chai-top-bar-DyW9GPzV.cjs"),oe=require("./STRINGS-FNnfjF5H.cjs"),j=require("@radix-ui/react-icons"),le=require("jotai"),ce=require("nanoid"),i=require("react"),de=require("react-i18next"),p=require("sonner"),ue=require("tailwind-merge"),L=o=>{const m=o.trim();return m.length===0||m.length>25?!1:/^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(m)},me=(o,m,t,a=!1,x)=>{const h=o.trim();return h.length===0?"":h.length>25?t("Token name must be 25 characters or less"):/^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(h)?Object.entries(m).find(([k,C])=>C.name===h&&(!a||k!==x))?t("Token name already exists"):"":t("Only alphanumeric characters and hyphens allowed")},xe=o=>o.replace(/\s+/g,"-"),he=i.lazy(()=>Promise.resolve().then(()=>require("./design-token-usage-BBLfxzzo.cjs"))),_=({tokenId:o,token:m,isDisabled:t,isSelected:a,isArchived:x=!1,onSelect:h,onEdit:y,onUnarchive:N})=>e.jsxs("div",{onClick:()=>h(o),className:`group relative flex cursor-pointer items-center justify-between overflow-hidden rounded border p-2 transition-all duration-150 ${x?"border-muted bg-muted/30 opacity-60":a?"border-primary bg-primary/10":"hover:bg-muted/90"}`,children:[e.jsxs("div",{className:"min-w-0 flex-1 overflow-hidden",children:[e.jsx("div",{className:`text-xs font-semibold ${x?"text-muted-foreground":""}`,children:m.name}),e.jsx("div",{className:`w-full max-w-52 truncate text-[10px] font-light ${x?"text-muted-foreground":""}`,children:m.value})]}),e.jsxs("div",{className:"absolute right-1 top-1 flex flex-shrink-0 items-center opacity-0 transition-opacity duration-150 group-hover:opacity-100",children:[!x&&e.jsxs(e.Fragment,{children:[e.jsx(i.Suspense,{fallback:null,children:e.jsx(he,{tokenId:o,tokenName:m.name,children:e.jsx(g.Button,{variant:"ghost",size:"sm",className:"h-6 w-6 rounded-full p-0 hover:bg-primary/10 hover:text-primary",children:e.jsx(j.EyeOpenIcon,{className:"h-3 w-3"})})})}),e.jsx(g.Button,{variant:"ghost",size:"sm",onClick:k=>{k.stopPropagation(),y(o)},disabled:t,className:"h-6 w-6 rounded-full p-0 hover:bg-primary/10 hover:text-primary",children:e.jsx(j.Pencil1Icon,{className:"h-3 w-3"})})]}),x&&e.jsx(g.Button,{variant:"ghost",size:"sm",onClick:k=>{k.stopPropagation(),N==null||N(o)},disabled:t,className:"h-6 w-6 rounded-full p-0 hover:bg-primary/10 hover:text-primary",children:e.jsx(j.EyeOpenIcon,{className:"h-3 w-3"})})]})]}),fe=({onActiveTokenChange:o,onDirtyStateChange:m})=>{const{t}=de.useTranslation(),[a,x]=le.useAtom(c.chaiDesignTokensAtom),h=c.useIncrementActionsCount(),{saveDesignTokens:y,debouncedSaveDesignTokens:N}=c.useSaveWebsiteData(),k=c.useBuilderProp("pageId",""),C=c.useBuilderProp("siteWideUsage",{}),[f,B]=i.useState("view"),[v,R]=i.useState(null),[b,W]=i.useState(null),[l,A]=i.useState(""),[d,S]=i.useState(""),[D,I]=i.useState(""),[O,H]=i.useState(""),[K,q]=i.useState(!1),z=i.useRef(null),[E,M]=i.useState({isOpen:!1,tokenId:null,tokenName:"",pageCount:0,partialCount:0}),P=i.useRef(null),X=i.useCallback(s=>{if(!C)return{pageCount:0,partialCount:0};let n=0,r=0;return Object.entries(C).forEach(([u,T])=>{if(u===k||!(T!=null&&T.designTokens))return;Object.keys(T.designTokens).some(ie=>ie===s)&&(T.isPartial?r++:n++)}),{pageCount:n,partialCount:r}},[C,k]),F=i.useMemo(()=>Object.entries(a).filter(([,s])=>s.name.toLowerCase().includes(O.toLowerCase())||s.value.toLowerCase().includes(O.toLowerCase())),[a,O]);i.useEffect(()=>{if(!m)return;const s=f==="add"&&(l&&l.trim().length>0||d&&d.trim().length>0);m(s)},[f,l,d,m]),i.useEffect(()=>{if(o)if(f==="edit"||f==="add")o(l&&d?{name:l,value:d,id:v||void 0}:null);else if(f==="view"&&b&&a[b]){const s=a[b];o({name:s.name,value:s.value,id:b})}else o(null)},[f,l,d,v,b,a,o]);const J=()=>{if(!l.trim()||!d.trim()){p.toast.error(t("Please fill in both token name and classes"));return}if(!L(l)){p.toast.error(t("Invalid design token name format"));return}if(Object.entries(a).find(([n,r])=>r.name===l.trim()&&n!==v)){p.toast.error(t("Token already exists"));return}v&&Y(l,d)},w=i.useCallback(()=>{R(null),A(""),S(""),I(""),q(!1),B("view")},[]),Y=i.useCallback((s,n)=>{!v||f!=="edit"||!s.trim()||!n.trim()||!L(s)||Object.entries(a).find(([u,T])=>T.name===s.trim()&&u!==v)||(q(!0),z.current&&clearTimeout(z.current),z.current=setTimeout(()=>{const u={...a,[v]:{name:s.trim(),value:n.trim()}};x(u),h(),N(),q(!1),p.toast.success(t("Token updated successfully")),w()},10))},[v,f,a,x,h,N,t,w]),U=()=>{if(!l.trim()||!d.trim()){p.toast.error(t("Please fill in both token name and classes"));return}if(!L(l)){p.toast.error(t("Invalid design token name format"));return}if(Object.values(a).find(u=>u.name===l.trim())){p.toast.error(t("Token already exists"));return}const n=`${oe.DESIGN_TOKEN_PREFIX}${ce.nanoid(12)}`,r={...a,[n]:{name:l.trim(),value:d.trim()}};x(r),h(),y(),p.toast.success(t("Token added successfully")),w()},$=s=>{const n=a[s];if(!n)return;const{pageCount:r,partialCount:u}=X(s);M({isOpen:!0,tokenId:s,tokenName:n.name,pageCount:r,partialCount:u}),P.current=s},ee=()=>{const s=P.current;if(!s)return;const n={...a,[s]:{...a[s],archived:!0}};x(n),h(),y(),p.toast.success(t("Token archived successfully")),M({isOpen:!1,tokenId:null,tokenName:"",pageCount:0,partialCount:0}),P.current=null},G=s=>{const n={...a,[s]:{name:a[s].name,value:a[s].value}};x(n),h(),p.toast.success(t("Token unarchived successfully"))},Z=s=>{const n=a[s];n&&(R(s),A(n.name),S(n.value),I(""),B("edit"))},V=()=>{R(null),A(""),S(""),I(""),B("add")},se=s=>{const n=xe(s);A(n);const r=me(n,a,t,f==="edit",v||void 0);I(r)},Q=s=>{S(s)},te=s=>{const n=c.orderClassesByBreakpoint(c.removeDuplicateClasses(ue.twMerge(d,s)));Q(n)},ne=s=>{const n=d.split(" ").filter(r=>r!==s).join(" ");Q(n)},re=()=>{const s=f==="edit",n=t(s?"Edit Design Token":"Add Design Token"),r=t(s?"Update design token":"Create a reusable design token");return e.jsxs("div",{className:"flex h-full flex-col",children:[e.jsxs("div",{className:"mb-3 flex items-center gap-2 rounded-md border border-border/50 bg-muted p-1.5",children:[e.jsx(g.Button,{variant:"ghost",size:"sm",onClick:w,className:"h-6 w-6 rounded-full p-0 hover:bg-muted",children:e.jsx(j.ArrowLeftIcon,{className:"h-3 w-3"})}),e.jsxs("div",{className:"flex-1",children:[e.jsx("h3",{className:"text-xs font-semibold text-foreground",children:n}),e.jsx("p",{className:"text-[10px] text-muted-foreground",children:r})]}),s&&K&&e.jsx("div",{className:"flex items-center gap-1 text-[10px] text-muted-foreground",children:e.jsx("div",{className:"h-1.5 w-1.5 animate-pulse rounded-full bg-primary"})})]}),e.jsxs("div",{className:"flex-1 space-y-3 overflow-y-auto",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(c.Label,{htmlFor:"token-name",className:"text-xs font-medium",children:t("Token Name")}),e.jsx(g.Input,{id:"token-name",placeholder:"Button-Primary",value:l,onChange:u=>se(u.target.value),className:"h-7 text-xs"}),D?e.jsx("span",{className:"text-[10px] text-destructive",children:D}):e.jsx("span",{className:"text-[10px] font-light text-muted-foreground",children:t("Button-Primary, Card-Header, Text-Large etc.")})]}),e.jsx(c.ManualClasses,{from:"designToken",classFromProps:d,onAddNew:te,onRemove:ne,showDesignTokenSuggestions:!1}),e.jsxs("div",{className:"mt-3 flex items-center justify-end gap-2 pt-3",children:[e.jsx(g.Button,{variant:"outline",onClick:w,className:"h-7 text-xs",children:t("Cancel")}),s?e.jsx(g.Button,{onClick:J,disabled:!l.trim()||!d.trim()||!!D,className:"h-7 text-xs",children:t("Save Token")}):e.jsx(g.Button,{onClick:U,disabled:!l.trim()||!d.trim()||!!D,className:"h-7 text-xs",children:t("Add Token")})]})]})]})},ae=()=>{const s=F.filter(([,r])=>!r.archived),n=F.filter(([,r])=>r.archived);return e.jsxs(e.Fragment,{children:[Object.entries(a).length>0&&e.jsxs("div",{className:"flex items-center justify-between gap-x-2",children:[e.jsxs("div",{className:"relative flex-1",children:[e.jsx(j.MagnifyingGlassIcon,{className:"absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground"}),e.jsx(g.Input,{placeholder:t("Search tokens"),value:O,onChange:r=>H(r.target.value),className:"h-6 pl-7 text-xs"})]}),e.jsxs(g.Button,{variant:"outline",onClick:V,size:"sm",className:"h-6 border-primary text-xs text-primary hover:bg-primary/10 hover:text-primary",children:[e.jsx(j.PlusIcon,{className:"h-3 w-3"}),t("Add")]})]}),e.jsx("div",{className:"no-scrollbar flex flex-1 flex-col overflow-hidden pt-2",children:e.jsx(c.ScrollArea,{className:"flex h-full flex-1 items-center justify-center",children:e.jsxs("div",{className:"space-y-1",children:[Object.entries(a).length===0?e.jsxs("div",{className:"flex flex-col items-center justify-center rounded-lg border border-dashed border-muted bg-muted/20 py-8",children:[e.jsx("div",{className:"mb-2 text-3xl",children:e.jsx(j.TokensIcon,{className:"h-12 w-12 text-muted-foreground"})}),e.jsx("p",{className:"mb-1 text-sm font-medium text-foreground",children:t("No design tokens yet")}),e.jsx("p",{className:"text-center text-xs text-muted-foreground",children:t("Create reusable design tokens to streamline your styling")}),e.jsxs(g.Button,{variant:"default",onClick:V,size:"sm",className:"mt-4 h-7 text-xs leading-tight",children:[e.jsx(j.PlusIcon,{className:"mr-1 h-3 w-3"}),t("Add first design token")]})]}):F.length===0?e.jsxs("div",{className:"flex flex-col items-center justify-center rounded-lg border border-dashed border-muted bg-muted/20 py-8",children:[e.jsx("div",{className:"mb-2",children:e.jsx(j.MagnifyingGlassIcon,{className:"h-10 w-10 text-muted-foreground"})}),e.jsx("p",{className:"mb-1 text-sm font-medium text-foreground",children:t("No tokens found")}),e.jsx("p",{className:"text-center text-xs text-muted-foreground",children:t("No design tokens match your search")})]}):e.jsxs(e.Fragment,{children:[s.length>0&&e.jsx("div",{className:"space-y-1",children:s.map(([r,u])=>e.jsx(_,{token:u,tokenId:r,isSelected:b===r,isArchived:!1,onSelect:W,onEdit:Z,onArchive:$,onUnarchive:G,isDisabled:!1},r))}),n.length>0&&e.jsxs("div",{className:"mt-4 space-y-1",children:[e.jsx("div",{className:"px-2 py-1 text-[10px] font-semibold text-muted-foreground",children:t("Archived")}),n.map(([r,u])=>e.jsx(_,{token:u,tokenId:r,isSelected:b===r,isArchived:!0,onSelect:W,onEdit:Z,onArchive:$,onUnarchive:G,isDisabled:!1},r))]})]}),e.jsx("div",{className:"h-44"})]})})})]})};return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"flex h-full w-full flex-col",children:f==="view"?ae():re()}),e.jsx(c.AlertDialog,{open:E.isOpen,onOpenChange:s=>{s||(M({isOpen:!1,tokenId:null,tokenName:"",pageCount:0,partialCount:0}),P.current=null)},children:e.jsxs(c.AlertDialogContent,{children:[e.jsx(c.AlertDialogTitle,{children:t("Archive Design Token")}),e.jsxs(c.AlertDialogDescription,{className:"space-y-3",children:[e.jsxs("p",{children:[t("This token is used on")," ",e.jsx("span",{className:"font-semibold",children:E.pageCount})," ",t("pages"),E.partialCount>0&&e.jsxs(e.Fragment,{children:[" ",t("and")," ",e.jsx("span",{className:"font-semibold",children:E.partialCount})," ",t("partials")]}),"."]}),e.jsx("p",{className:"text-sm text-destructive",children:t("Archiving this token will remove the styling for those blocks.")}),e.jsx("p",{children:t("Do you wish to continue?")})]}),e.jsxs("div",{className:"flex justify-end gap-2",children:[e.jsx(c.AlertDialogCancel,{children:t("Cancel")}),e.jsx(c.AlertDialogAction,{onClick:ee,className:"bg-destructive text-destructive-foreground hover:bg-destructive/90",children:t("Archive")})]})]})})]})};exports.default=fe;