@chaibuilder/sdk 4.0.0-beta.8 → 4.0.0-beta.9

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("./index-Bm8iS2OH.cjs"),c=require("./register-chai-top-bar-DWTuRU53.cjs"),Z=require("./apply-binding-IsUf6UWJ.cjs"),u=require("@radix-ui/react-icons"),$=require("jotai"),U=require("nanoid"),a=require("react"),Q=require("react-i18next"),p=require("sonner"),_=require("tailwind-merge"),q=t=>{const n=t.trim();return n.length===0||n.length>25?!1:/^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(n)},H=(t,n,o,m=!1,i)=>{const x=t.trim();return x.length===0?"":x.length>25?o("Token name must be 25 characters or less"):/^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(x)?Object.entries(n).find(([l,N])=>N.name===x&&(!m||l!==i))?o("Token name already exists"):"":o("Only alphanumeric characters and hyphens allowed")},K=t=>t.replace(/\s+/g,"-"),X=a.lazy(()=>Promise.resolve().then(()=>require("./delete-design-token-3-WwqXMO.cjs"))),J=a.lazy(()=>Promise.resolve().then(()=>require("./design-token-usage-Dy08kcIc.cjs"))),Y=({tokenId:t,token:n,isDisabled:o,onEdit:m,onDelete:i})=>e.jsxs("div",{className:"group relative flex items-center justify-between overflow-hidden rounded border p-2 transition-all duration-150 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",children:n.name}),e.jsx("div",{className:"w-full max-w-52 truncate text-[10px] font-light",children:n.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:[e.jsx(a.Suspense,{fallback:null,children:e.jsx(J,{tokenId:t,tokenName:n.name,children:e.jsx(c.Button,{variant:"ghost",size:"sm",className:"h-6 w-6 rounded-full p-0 hover:bg-primary/10 hover:text-primary",children:e.jsx(u.EyeOpenIcon,{className:"h-3 w-3"})})})}),e.jsx(c.Button,{variant:"ghost",size:"sm",onClick:()=>m(t),disabled:o,className:"h-6 w-6 rounded-full p-0 hover:bg-primary/10 hover:text-primary",children:e.jsx(u.Pencil1Icon,{className:"h-3 w-3"})}),e.jsx(a.Suspense,{fallback:null,children:e.jsx(X,{tokenName:n.name,tokenValue:n.value,onDelete:()=>i(t),children:e.jsx(c.Button,{variant:"ghost",size:"sm",disabled:o,className:"h-6 w-6 rounded-full p-0 hover:bg-destructive/10",children:e.jsx(u.TrashIcon,{className:"h-3 w-3 text-destructive"})})})})]})]}),ee=({})=>{const{t}=Q.useTranslation(),[n,o]=$.useAtom(v.chaiDesignTokensAtom),m=v.useIncrementActionsCount(),[i,x]=a.useState("view"),[j,k]=a.useState(null),[l,N]=a.useState(""),[h,b]=a.useState(""),[T,y]=a.useState(""),[w,E]=a.useState(""),[z,C]=a.useState(!1),f=a.useRef(null),I=a.useMemo(()=>Object.entries(n).filter(([,s])=>s.name.toLowerCase().includes(w.toLowerCase())||s.value.toLowerCase().includes(w.toLowerCase())),[n,w]);a.useEffect(()=>()=>{f.current&&clearTimeout(f.current)},[]);const S=a.useCallback((s,r)=>{!j||i!=="edit"||!s.trim()||!r.trim()||!q(s)||Object.entries(n).find(([g,W])=>W.name===s.trim()&&g!==j)||(C(!0),f.current&&clearTimeout(f.current),f.current=setTimeout(()=>{const g={...n,[j]:{name:s.trim(),value:r.trim()}};o(g),m(),C(!1)},250))},[j,i,n,o,m]),M=()=>{if(!l.trim()||!h.trim()){p.toast.error(t("Please fill in both token name and classes"));return}if(!q(l)){p.toast.error(t("Invalid design token name format"));return}if(Object.values(n).find(g=>g.name===l.trim())){p.toast.error(t("Token already exists"));return}const r=`${Z.DESIGN_TOKEN_PREFIX}${U.nanoid(12)}`,d={...n,[r]:{name:l.trim(),value:h.trim()}};o(d),m(),p.toast.success(t("Token added successfully")),A()},P=s=>{const r={...n};delete r[s],o(r),m(),p.toast.success(t("Token deleted successfully"))},R=s=>{const r=n[s];r&&(k(s),N(r.name),b(r.value),y(""),x("edit"))},B=()=>{k(null),N(""),b(""),y(""),x("add")},A=()=>{f.current&&clearTimeout(f.current),k(null),N(""),b(""),y(""),C(!1),x("view")},O=s=>{const r=K(s);N(r);const d=H(r,n,t,i==="edit",j||void 0);y(d),i==="edit"&&!d&&S(r,h)},D=s=>{b(s),i==="edit"&&!T&&l.trim()&&S(l,s)},L=s=>{const r=v.orderClassesByBreakpoint(v.removeDuplicateClasses(_.twMerge(h,s)));D(r)},F=s=>{const r=h.split(" ").filter(d=>d!==s).join(" ");D(r)},G=()=>{const s=i==="edit",r=t(s?"Edit Design Token":"Add Design Token"),d=t(s?"Update design token. Auto-saved.":"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(c.Button,{variant:"ghost",size:"sm",onClick:A,className:"h-6 w-6 rounded-full p-0 hover:bg-muted",children:e.jsx(u.ArrowLeftIcon,{className:"h-3 w-3"})}),e.jsxs("div",{className:"flex-1",children:[e.jsx("h3",{className:"text-xs font-semibold text-foreground",children:r}),e.jsx("p",{className:"text-[10px] text-muted-foreground",children:d})]}),s&&z&&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(v.Label,{htmlFor:"token-name",className:"text-xs font-medium",children:t("Token Name")}),e.jsx(c.Input,{id:"token-name",placeholder:"Button-Primary",value:l,onChange:g=>O(g.target.value),className:"h-7 text-xs"}),T?e.jsx("span",{className:"text-[10px] text-destructive",children:T}):e.jsx("span",{className:"text-[10px] font-light text-muted-foreground",children:t("Button-Primary, Card-Header, Text-Large etc.")})]}),e.jsx(v.ManualClasses,{from:"designToken",classFromProps:h,onAddNew:L,onRemove:F}),!s&&e.jsxs("div",{className:"mt-3 flex items-center justify-end gap-2 pt-3",children:[e.jsx(c.Button,{variant:"outline",onClick:A,className:"h-7 text-xs",children:t("Cancel")}),e.jsx(c.Button,{onClick:M,disabled:!l.trim()||!h.trim()||!!T,className:"h-7 text-xs",children:t("Add Token")})]})]})]})},V=()=>e.jsxs(e.Fragment,{children:[Object.entries(n).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(u.MagnifyingGlassIcon,{className:"absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground"}),e.jsx(c.Input,{placeholder:t("Search tokens"),value:w,onChange:s=>E(s.target.value),className:"h-6 pl-7 text-xs"})]}),e.jsxs(c.Button,{variant:"outline",onClick:B,size:"sm",className:"h-6 border-primary text-xs text-primary hover:bg-primary/10 hover:text-primary",children:[e.jsx(u.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(v.ScrollArea,{className:"h-full flex-1",children:e.jsxs("div",{className:"space-y-1",children:[Object.entries(n).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(u.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(c.Button,{variant:"default",onClick:B,size:"sm",className:"mt-4 h-7 text-xs leading-tight",children:[e.jsx(u.PlusIcon,{className:"mr-1 h-3 w-3"}),t("Add first design token")]})]}):I.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(u.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")})]}):I.map(([s,r])=>e.jsx(Y,{token:r,tokenId:s,onEdit:R,onDelete:P,isDisabled:!1},s)),e.jsx("div",{className:"h-44"})]})})})]});return e.jsx("div",{className:"flex h-full w-full flex-col",children:i==="view"?V():G()})};exports.default=ee;