@chaibuilder/sdk 4.0.0-beta.49 → 4.0.0-beta.51

package/dist/manage-design-tokens-6YGIctip.js

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

package/dist/manage-design-tokens-modal-BSSCXH8Y.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-DCJDQs1a.cjs"),y=require("@radix-ui/react-icons"),c=require("react"),j=require("react-i18next"),g=require("./plugin-DHpuZZXz.cjs"),o=require("lodash-es"),b=require("@tailwindcss/aspect-ratio"),v=require("@tailwindcss/container-queries"),w=require("@tailwindcss/forms"),C=require("@tailwindcss/typography"),D=require("./fonts-D5fTqvSS.cjs"),F=require("./manage-design-tokens-udLBvkHA.cjs"),N=()=>{const[s]=t.useTheme(),r=t.useThemeOptions(),[l]=t.useDarkMode(),{document:n,window:d}=t.useFrame(),i=D.useRegisteredFonts();c.useEffect(()=>{l?n==null||n.documentElement.classList.add("dark"):n==null||n.documentElement.classList.remove("dark")},[l,n]),c.useEffect(()=>{!d||!d.tailwind||(d.tailwind.config={darkMode:"class",theme:{extend:{container:{center:!0,padding:"1rem",screens:{"2xl":"1400px"}},...g.getChaiThemeOptions(r)}},plugins:[C,w,b,v,g.plugin(function({addBase:a,theme:m}){a({"h1,h2,h3,h4,h5,h6":{fontFamily:m("fontFamily.heading")},body:{fontFamily:m("fontFamily.body"),color:m("colors.foreground"),backgroundColor:m("colors.background")}})})]})},[s,r,d]);const u=c.useMemo(()=>{const a=o.get(s,"fontFamily.heading"),m=o.get(s,"fontFamily.body");return i.filter(f=>f.family===a||f.family===m)},[s,i]),p=c.useMemo(()=>g.getThemeFontsUrls(o.filter(u,a=>o.has(a,"url"))),[u]),h=c.useMemo(()=>g.getThemeCustomFontFace(o.filter(u,a=>o.has(a,"src"))),[u]);return e.jsxs(e.Fragment,{children:[e.jsx(t.CssThemeVariables,{theme:s}),p.map((a,m)=>e.jsx("link",{rel:"stylesheet",href:a},`preview-font-${m}`)),e.jsx("style",{id:"chai-custom-fonts",dangerouslySetInnerHTML:{__html:h}})]})},T=({content:s,classes:r="",className:l="w-full rounded border-0",style:n={minHeight:80},title:d="Preview"})=>{const i=c.useMemo(()=>t.IframeInitialContent.replace('dir="__HTML_DIR__"','dir="ltr"'),[]);return e.jsxs(t.ChaiFrame,{className:l,style:n,title:d,initialContent:i,children:[e.jsx(N,{}),e.jsx("div",{className:"h-full p-4",children:e.jsx("div",{className:r||void 0,dangerouslySetInnerHTML:{__html:s}})})]})},x=["xs","sm","md","lg","xl","2xl"],k=s=>{if(s=s.trim().replace(/ +(?= )/g,""),o.isEmpty(s))return"";const r=o.map(s.split(" "),t.constructClassObject),l=[];for(const n of r){const d=n.mq;if(!l.includes(n.fullCls))for(let i=x.indexOf(d)+1;i<x.length;i++){const u=o.find(r,{property:n.property,mq:x[i]});if(u&&u.cls!==n.cls)break;o.find(r,{cls:n.cls,mq:x[i]})&&l.push(`${x[i]}:${n.cls}`)}}return o.filter(o.map(r,n=>l.includes(n.fullCls)?null:n.fullCls),n=>n!==null).join(" ")},q=({activeToken:s})=>{const{t:r}=j.useTranslation(),l=s!=null&&s.value?k(s.value):"",n=s&&s.name&&s.value;return e.jsx(t.ScrollArea,{className:"h-full",children:e.jsx("div",{className:"space-y-4 pr-4",children:e.jsxs("div",{className:"space-y-2 rounded-lg border bg-card p-4",children:[n&&e.jsx(e.Fragment,{children:e.jsxs("div",{className:"mb-3 flex items-center justify-between",children:[e.jsx("span",{className:"text-sm font-semibold",children:s.name}),s.id&&e.jsx("span",{className:"rounded bg-muted px-2 py-0.5 font-mono text-[9px] text-muted-foreground",children:s.id})]})}),e.jsxs("div",{children:[e.jsx("div",{className:"mb-2 text-[10px] font-medium text-muted-foreground",children:r("Preview:")}),e.jsx(T,{content:r("Sample text with token styles applied"),classes:l,style:{minHeight:80},title:r("Token Preview")})]})]})})})},A=({open:s,onOpenChange:r})=>{const{t:l}=j.useTranslation(),[n,d]=c.useState(null),[i,u]=c.useState(!1),[p,h]=c.useState(!1),a=c.useCallback(f=>{if(!f&&i){h(!0);return}r(f)},[i,r]),m=c.useCallback(()=>{h(!1),u(!1),r(!1)},[r]);return e.jsxs(e.Fragment,{children:[e.jsx(t.Dialog,{open:s,onOpenChange:a,children:e.jsxs(t.DialogContent,{className:"flex h-[540px] max-w-6xl flex-col gap-0 p-0",children:[e.jsx(t.DialogHeader,{className:"border-b border-border px-6 py-4",children:e.jsxs(t.DialogTitle,{className:"flex items-center gap-2",children:[e.jsx(y.TokensIcon,{className:"h-5 w-5 text-primary"}),l("Design Token Management")]})}),e.jsxs("div",{className:"flex flex-1 overflow-hidden",children:[e.jsx("div",{className:"flex w-1/2 flex-col border-r border-border p-4",children:e.jsx(F.default,{onActiveTokenChange:d,onDirtyStateChange:u})}),e.jsxs("div",{className:"flex w-1/2 flex-col p-4",children:[e.jsx("div",{className:"mb-3 flex items-center justify-between",children:e.jsx("h3",{className:"text-sm font-semibold",children:l("Live Preview")})}),e.jsx("div",{className:"flex-1 overflow-y-auto",children:e.jsx(q,{activeToken:n})})]})]})]})}),e.jsx(t.AlertDialog,{open:p,onOpenChange:h,children:e.jsxs(t.AlertDialogContent,{children:[e.jsxs(t.AlertDialogHeader,{children:[e.jsx(t.AlertDialogTitle,{children:l("Unsaved Changes")}),e.jsx(t.AlertDialogDescription,{children:l("You have unsaved changes. Are you sure you want to close? Your changes will be lost.")})]}),e.jsxs(t.AlertDialogFooter,{children:[e.jsx(t.AlertDialogCancel,{children:l("Continue Editing")}),e.jsx(t.AlertDialogAction,{onClick:m,children:l("Discard Changes")})]})]})})]})};exports.default=A;

package/dist/manage-design-tokens-modal-CzsnN49F.js

@@ -1,161 +0,0 @@
-import { jsxs as l, jsx as e, Fragment as y } from "react/jsx-runtime";
-import { al as k, am as A, an as T, ao as M, ap as H, aq as _, ar as j, as as I, a7 as P, D as S, e as L, f as E, g as O, a1 as U, a2 as q, at as R, a3 as $, a4 as V, au as Y, a5 as z, a6 as B } from "./index-OuHV9Ann.js";
-import { TokensIcon as Q } from "@radix-ui/react-icons";
-import { useMemo as u, useEffect as b, useState as g, useCallback as w } from "react";
-import { useTranslation as F } from "react-i18next";
-import { p as W, g as G, a as J, b as K } from "./plugin-BSjgGgwo.js";
-import { get as v, filter as x, has as C, isEmpty as X, map as D, find as N } from "lodash-es";
-import Z from "@tailwindcss/aspect-ratio";
-import ee from "@tailwindcss/container-queries";
-import se from "@tailwindcss/forms";
-import ne from "@tailwindcss/typography";
-import { u as ae } from "./fonts-B3UYxuJI.js";
-import re from "./manage-design-tokens-6YGIctip.js";
-const te = () => {
-  const [s] = T(), a = M(), [r] = H(), { document: n, window: i } = _(), t = ae();
-  b(() => {
-    r ? n == null || n.documentElement.classList.add("dark") : n == null || n.documentElement.classList.remove("dark");
-  }, [r, n]), b(() => {
-    !i || !i.tailwind || (i.tailwind.config = {
-      darkMode: "class",
-      theme: {
-        extend: {
-          container: {
-            center: !0,
-            padding: "1rem",
-            screens: {
-              "2xl": "1400px"
-            }
-          },
-          ...G(a)
-        }
-      },
-      plugins: [
-        ne,
-        se,
-        Z,
-        ee,
-        W(function({ addBase: o, theme: d }) {
-          o({
-            "h1,h2,h3,h4,h5,h6": {
-              fontFamily: d("fontFamily.heading")
-            },
-            body: {
-              fontFamily: d("fontFamily.body"),
-              color: d("colors.foreground"),
-              backgroundColor: d("colors.background")
-            }
-          });
-        })
-      ]
-    });
-  }, [s, a, i]);
-  const c = u(() => {
-    const o = v(s, "fontFamily.heading"), d = v(s, "fontFamily.body");
-    return t.filter((h) => h.family === o || h.family === d);
-  }, [s, t]), p = u(
-    () => J(x(c, (o) => C(o, "url"))),
-    [c]
-  ), m = u(
-    () => K(x(c, (o) => C(o, "src"))),
-    [c]
-  );
-  return /* @__PURE__ */ l(y, { children: [
-    /* @__PURE__ */ e(j, { theme: s }),
-    p.map((o, d) => /* @__PURE__ */ e("link", { rel: "stylesheet", href: o }, `preview-font-${d}`)),
-    /* @__PURE__ */ e("style", { id: "chai-custom-fonts", dangerouslySetInnerHTML: { __html: m } })
-  ] });
-}, le = ({
-  content: s,
-  classes: a = "",
-  className: r = "w-full rounded border-0",
-  style: n = { minHeight: 80 },
-  title: i = "Preview"
-}) => {
-  const t = u(() => k.replace('dir="__HTML_DIR__"', 'dir="ltr"'), []);
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ l(A, { className: r, style: n, title: i, initialContent: t, children: [
-      /* @__PURE__ */ e(te, {}),
-      /* @__PURE__ */ e("div", { className: "h-full p-4", children: /* @__PURE__ */ e("div", { className: a || void 0, dangerouslySetInnerHTML: { __html: s } }) })
-    ] })
-  );
-}, f = ["xs", "sm", "md", "lg", "xl", "2xl"], oe = (s) => {
-  if (s = s.trim().replace(/ +(?= )/g, ""), X(s)) return "";
-  const a = D(s.split(" "), I), r = [];
-  for (const n of a) {
-    const i = n.mq;
-    if (!r.includes(n.fullCls))
-      for (let t = f.indexOf(i) + 1; t < f.length; t++) {
-        const c = N(a, { property: n.property, mq: f[t] });
-        if (c && c.cls !== n.cls)
-          break;
-        N(a, { cls: n.cls, mq: f[t] }) && r.push(`${f[t]}:${n.cls}`);
-      }
-  }
-  return x(
-    D(a, (n) => r.includes(n.fullCls) ? null : n.fullCls),
-    (n) => n !== null
-  ).join(" ");
-}, ie = ({ activeToken: s }) => {
-  const { t: a } = F(), r = s != null && s.value ? oe(s.value) : "", n = s && s.name && s.value;
-  return /* @__PURE__ */ e(P, { className: "h-full", children: /* @__PURE__ */ e("div", { className: "space-y-4 pr-4", children: /* @__PURE__ */ l("div", { className: "space-y-2 rounded-lg border bg-card p-4", children: [
-    n && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ l("div", { className: "mb-3 flex items-center justify-between", children: [
-      /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: s.name }),
-      s.id && /* @__PURE__ */ e("span", { className: "rounded bg-muted px-2 py-0.5 font-mono text-[9px] text-muted-foreground", children: s.id })
-    ] }) }),
-    /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ e("div", { className: "mb-2 text-[10px] font-medium text-muted-foreground", children: a("Preview:") }),
-      /* @__PURE__ */ e(
-        le,
-        {
-          content: a("Sample text with token styles applied"),
-          classes: r,
-          style: { minHeight: 80 },
-          title: a("Token Preview")
-        }
-      )
-    ] })
-  ] }) }) });
-}, Ce = ({ open: s, onOpenChange: a }) => {
-  const { t: r } = F(), [n, i] = g(null), [t, c] = g(!1), [p, m] = g(!1), o = w(
-    (h) => {
-      if (!h && t) {
-        m(!0);
-        return;
-      }
-      a(h);
-    },
-    [t, a]
-  ), d = w(() => {
-    m(!1), c(!1), a(!1);
-  }, [a]);
-  return /* @__PURE__ */ l(y, { children: [
-    /* @__PURE__ */ e(S, { open: s, onOpenChange: o, children: /* @__PURE__ */ l(L, { className: "flex h-[540px] max-w-6xl flex-col gap-0 p-0", children: [
-      /* @__PURE__ */ e(E, { className: "border-b border-border px-6 py-4", children: /* @__PURE__ */ l(O, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(Q, { className: "h-5 w-5 text-primary" }),
-        r("Design Token Management")
-      ] }) }),
-      /* @__PURE__ */ l("div", { className: "flex flex-1 overflow-hidden", children: [
-        /* @__PURE__ */ e("div", { className: "flex w-1/2 flex-col border-r border-border p-4", children: /* @__PURE__ */ e(re, { onActiveTokenChange: i, onDirtyStateChange: c }) }),
-        /* @__PURE__ */ l("div", { className: "flex w-1/2 flex-col p-4", children: [
-          /* @__PURE__ */ e("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ e("h3", { className: "text-sm font-semibold", children: r("Live Preview") }) }),
-          /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ e(ie, { activeToken: n }) })
-        ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ e(U, { open: p, onOpenChange: m, children: /* @__PURE__ */ l(q, { children: [
-      /* @__PURE__ */ l(R, { children: [
-        /* @__PURE__ */ e($, { children: r("Unsaved Changes") }),
-        /* @__PURE__ */ e(V, { children: r("You have unsaved changes. Are you sure you want to close? Your changes will be lost.") })
-      ] }),
-      /* @__PURE__ */ l(Y, { children: [
-        /* @__PURE__ */ e(z, { children: r("Continue Editing") }),
-        /* @__PURE__ */ e(B, { onClick: d, children: r("Discard Changes") })
-      ] })
-    ] }) })
-  ] });
-};
-export {
-  Ce as default
-};

package/dist/manage-design-tokens-udLBvkHA.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("./index-DCJDQs1a.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-eY2wQ0l3.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;