@chaibuilder/sdk 4.0.0-beta.3 → 4.0.0-beta.31

package/dist/manage-design-tokens-Co5677WS.js

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

package/dist/manage-design-tokens-modal-9qpcb-EC.js

@@ -0,0 +1,161 @@
+import { jsxs as l, jsx as e, Fragment as y } from "react/jsx-runtime";
+import { al as k, am as A, i as T, an as M, ao as H, ap as _, aq as j, ar as I, a6 as P, D as S, e as L, f as E, g as O, a0 as U, a1 as q, as as R, a2 as $, a3 as V, at as Y, a4 as z, a5 as B } from "./index-DsQXiNA_.js";
+import { TokensIcon as Q } from "@radix-ui/react-icons";
+import { useMemo as u, useEffect as b, useState as g, useCallback as v } 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 w, 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-Co5677WS.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 = w(s, "fontFamily.heading"), d = w(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 = v(
+    (h) => {
+      if (!h && t) {
+        m(!0);
+        return;
+      }
+      a(h);
+    },
+    [t, a]
+  ), d = v(() => {
+    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-[53vh] 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-modal-BcgdwEXE.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-mPCp0j2h.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-BknGNAKE.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-[53vh] 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;