@hua-labs/ui 2.0.2 → 2.1.0

package/dist/sdui.mjs

@@ -1,4 +1,4 @@
 "use client";
-import {a as a$8,b as b$6,c as c$3,d as d$3,f as f$1,g,h,e as e$2}from'./chunk-XV3Y7QVU.mjs';import {b as b$2,a as a$6}from'./chunk-RPUS7G7Q.mjs';import {a,b}from'./chunk-GLZKT7JN.mjs';import {c as c$2,b as b$3,a as a$4}from'./chunk-IN7RWQCJ.mjs';import {a as a$3}from'./chunk-N7M6RIN4.mjs';import {f,e,d,c,b as b$1,a as a$2}from'./chunk-FSL373O6.mjs';import {a as a$5}from'./chunk-IFSEJVOR.mjs';import {b as b$4,a as a$7}from'./chunk-UWHCM3S6.mjs';import {c as c$1,d as d$2,b as b$5}from'./chunk-SGEP3CQE.mjs';import {d as d$1}from'./chunk-FFH4ZFKS.mjs';import {l}from'./chunk-HN5LSP6L.mjs';import {a as a$1}from'./chunk-C4OACMTB.mjs';import {e as e$1}from'./chunk-UUHAXGMO.mjs';import {createContext,useState,useContext,useMemo,useCallback}from'react';import {jsx,jsxs}from'react/jsx-runtime';var fe=({children:e,justify:t,align:r,className:n="",style:o,backgroundColor:s,padding:a,margin:c,borderRadius:i,border:u,...m})=>{let d={...o,...s&&{backgroundColor:s},...a!==void 0&&{padding:typeof a=="number"?`${a}px`:a},...c!==void 0&&{margin:typeof c=="number"?`${c}px`:c},...i!==void 0&&{borderRadius:typeof i=="number"?`${i}px`:i},...u&&{border:u}};return jsx("div",{className:e$1((t||r)&&"flex",t&&oe[t],r&&ae[r],n),style:Object.keys(d).length>0?d:void 0,...m,children:e})},ye=({size:e=16,className:t=""})=>jsx("div",{className:t,style:{width:e,height:e,flexShrink:0}}),oe={start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between"},ae={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch"},Se=({children:e,direction:t="row",gap:r=0,justify:n="start",align:o="stretch",className:s="",style:a,backgroundColor:c,padding:i,...u})=>{let m={gap:`${r*4}px`,...a,...c&&{backgroundColor:c},...i!==void 0&&{padding:typeof i=="number"?`${i}px`:i}};return jsx("div",{className:`flex ${t==="column"?"flex-col":"flex-row"} ${oe[n]} ${ae[o]} ${s}`,style:m,...u,children:e})},be=({children:e,cols:t=1,gap:r=4,className:n="",style:o,backgroundColor:s,padding:a,...c})=>{let i={gridTemplateColumns:`repeat(${t}, 1fr)`,gap:`${r*4}px`,...o,...s&&{backgroundColor:s},...a!==void 0&&{padding:typeof a=="number"?`${a}px`:a}};return jsx("div",{className:`grid ${n}`,style:i,...c,children:e})},y={left:"text-left",center:"text-center",right:"text-right"};function S(e){let t={};return e.fontSize&&(t.fontSize=e.fontSize),e.lineHeight&&(t.lineHeight=e.lineHeight),e.fontWeight&&(t.fontWeight=e.fontWeight),e.letterSpacing&&(t.letterSpacing=e.letterSpacing),t}var he=({children:e,variant:t="body",align:r="center",className:n="",style:o,fontSize:s,lineHeight:a,fontWeight:c,letterSpacing:i,...u})=>{let m={body:"text-foreground",muted:"text-muted-foreground text-sm",lead:"text-xl text-muted-foreground"},d=S({fontSize:s,lineHeight:a,fontWeight:c,letterSpacing:i}),g=Object.keys(d).length>0?{...o,...d}:o;return jsx("p",{className:`${m[t]} ${y[r]} ${n}`,style:g,...u,children:e})},xe=({children:e,align:t="center",className:r="",style:n,fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c,...i})=>{let u=S({fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c}),m=Object.keys(u).length>0?{...n,...u}:n;return jsx("h1",{className:`text-4xl md:text-5xl font-bold ${y[t]} ${r}`,style:m,...i,children:e})},Re=({children:e,align:t="center",className:r="",style:n,fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c,...i})=>{let u=S({fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c}),m=Object.keys(u).length>0?{...n,...u}:n;return jsx("h2",{className:`text-3xl md:text-4xl font-bold ${y[t]} ${r}`,style:m,...i,children:e})},ve=({children:e,align:t="center",className:r="",style:n,fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c,...i})=>{let u=S({fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c}),m=Object.keys(u).length>0?{...n,...u}:n;return jsx("h3",{className:`text-2xl md:text-3xl font-semibold ${y[t]} ${r}`,style:m,...i,children:e})},Ie=({children:e,align:t="center",className:r="",style:n,fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c,...i})=>{let u=S({fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c}),m=Object.keys(u).length>0?{...n,...u}:n;return jsx("h4",{className:`text-xl md:text-2xl font-semibold ${y[t]} ${r}`,style:m,...i,children:e})},ke=({children:e,href:t="#",className:r="",...n})=>{let o=t.startsWith("http://")||t.startsWith("https://");return jsx("a",{href:t,className:`text-primary hover:underline ${r}`,...o?{target:"_blank",rel:"noopener noreferrer"}:{},...n,children:e})},Ce=({className:e="",alt:t="",...r})=>jsx("img",{className:`max-w-full h-auto ${e}`,alt:t,...r}),De=({name:e="star",size:t=24,className:r=""})=>jsx(l,{name:e,size:t,className:r}),Ue=({children:e,className:t="",...r})=>jsx("section",{className:`py-10 ${t}`,...r,children:e}),we=({className:e="",...t})=>jsx("hr",{className:`border-border ${e}`,...t}),Te=({children:e,sticky:t=true,transparent:r=false,blur:n=true,overlay:o=false,className:s="",...a})=>jsx("header",{className:e$1("w-full px-4 py-3 z-50",o?"absolute top-0 left-0 right-0":t&&"sticky top-0",r?"bg-transparent":"bg-background/80",n&&!r&&"backdrop-blur-md",!r&&"border-b border-border",s),...a,children:jsx("div",{className:"max-w-7xl mx-auto",children:e})}),Pe=({defaultChecked:e=false,onChange:t,...r})=>{let[n,o]=useState(e);return jsx(b$4,{...r,checked:n,onChange:s=>{o(s.target.checked),t==null||t(s);}})},He=({defaultChecked:e=false,onChange:t,...r})=>{let[n,o]=useState(e);return jsx(d$2,{...r,checked:n,onChange:s=>{o(s.target.checked),t==null||t(s);}})},Ne=({defaultValue:e="",onChange:t,...r})=>{let[n,o]=useState(e);return jsx(b$5,{...r,value:n,onChange:s=>{o(s.target.value),t==null||t(s);}})},$e=({defaultValue:e="",onChange:t,resize:r="vertical",...n})=>{let[o,s]=useState(e);return jsx(a$7,{...n,resize:r,value:o,onChange:a=>{s(a.target.value),t==null||t(a);}})},Fe=({items:e=[],type:t="single",collapsible:r=true,defaultValue:n,className:o=""})=>jsx(a$8,{type:t,collapsible:r,defaultValue:n,className:o,children:e.map((s,a)=>{let c=s.value||`item-${a}`;return jsxs(b$6,{value:c,children:[jsx(c$3,{children:s.title}),jsx(d$3,{children:s.content})]},c)})}),Me=({tabs:e=[],defaultValue:t,variant:r="default",className:n=""})=>{var s;let o=((s=e[0])==null?void 0:s.value)||"tab-0";return jsxs(f$1,{defaultValue:t||o,variant:r,className:n,children:[jsx(g,{children:e.map((a,c)=>{let i=a.value||`tab-${c}`;return jsx(h,{value:i,children:a.label},i)})}),e.map((a,c)=>{let i=a.value||`tab-${c}`;return jsx(e$2,{value:i,children:a.content},i)})]})},R={Box:fe,Spacer:ye,Flex:Se,Grid:be,Section:Ue,Container:a$6,Divider:we,Text:he,H1:xe,H2:Re,H3:ve,H4:Ie,Link:ke,Image:Ce,Icon:De,Button:d$1,Badge:a$5,Avatar:a$4,AvatarImage:b$3,AvatarFallback:c$2,Input:Ne,Textarea:$e,Label:c$1,Checkbox:Pe,Switch:He,Skeleton:a$3,Progress:b$2,Card:a$2,CardHeader:b$1,CardTitle:c,CardDescription:d,CardContent:e,CardFooter:f,Alert:a$1,Header:Te,HeroSection:b,ScrollProgress:a,Accordion:Fe,Tabs:Me};function Le(e){return {...R,...e}}function Ae(e,t){return t in e}var le=createContext(null);function ue(){let e=useContext(le);if(!e)throw new Error("useSDUI must be used within SDUIRenderer");return e}function v(e,t){return t.split(".").reduce((r,n)=>{if(r&&typeof r=="object"&&n in r)return r[n]},e)}function Ve(e,t,r){let n=t.split("."),o={...e},s=o;for(let a=0;a<n.length-1;a++){let c=n[a];s[c]={...s[c]||{}},s=s[c];}return s[n[n.length-1]]=r,o}function ze(e,t){let r=v(t,e.path);switch(e.operator){case "eq":return r===e.value;case "neq":return r!==e.value;case "gt":return typeof r=="number"&&r>e.value;case "lt":return typeof r=="number"&&r<e.value;case "gte":return typeof r=="number"&&r>=e.value;case "lte":return typeof r=="number"&&r<=e.value;case "exists":return r!=null;case "notExists":return r==null;default:return  true}}function C(e,t){let r={};for(let[n,o]of Object.entries(e))if(typeof o=="string"){let s=o.match(/^\{\{\s*(.+?)\s*\}\}$/);s?r[n]=v(t,s[1]):r[n]=o.replace(/\{\{\s*(.+?)\s*\}\}/g,(a,c)=>{let i=v(t,c);return i!==void 0?String(i):""});}else Array.isArray(o)?r[n]=o.map(s=>typeof s=="object"&&s!==null?C(s,t):s):typeof o=="object"&&o!==null?r[n]=C(o,t):r[n]=o;return r}function me({node:e,registry:t}){let{data:r,handleAction:n}=ue();if(e.when&&!ze(e.when,r))return null;let o=t[e.type];if(!o)return console.warn(`[SDUI] Unknown component type: ${e.type}`),jsxs("div",{className:"p-4 border border-destructive/50 bg-destructive/10 rounded text-sm text-destructive",children:["Unknown component: ",e.type]});let s=e.props?C(e.props,r):{},a={};e.on&&(e.on.click&&(a.onClick=()=>n(e.on.click)),e.on.submit&&(a.onSubmit=m=>{m.preventDefault(),n(e.on.submit);}));let c=null;return e.children&&(typeof e.children=="string"?c=e.children.replace(/\{\{\s*(.+?)\s*\}\}/g,(m,d)=>{let g=v(r,d);return g!==void 0?String(g):""}):Array.isArray(e.children)&&(c=e.children.map((m,d)=>jsx(me,{node:m,registry:t},m.key||`child-${d}`)))),["Divider","Input","Textarea","Checkbox","Switch","Progress","Skeleton","Image","ScrollProgress"].includes(e.type)||c===null?jsx(o,{...s,...a}):jsx(o,{...s,...a,children:c})}function de({schema:e,components:t,data:r={},onAction:n,onNavigate:o}){let s="root"in e,a=s?e.root:e,c=s?e.data:{},[i,u]=useState({...c,...r}),m=useMemo(()=>({...R,...t}),[t]),d=useCallback((p,b)=>{u(h=>Ve(h,p,b));},[]),g=useCallback(p=>{o?o(p):typeof window!="undefined"&&(window.location.href=p);},[o]),D=useCallback(p=>{var b,h,U;switch(p.type){case "navigate":g((b=p.payload)==null?void 0:b.path);break;case "setState":(h=p.payload)!=null&&h.path&&((U=p.payload)==null?void 0:U.value)!==void 0&&d(p.payload.path,p.payload.value);break;case "api":n==null||n(p);break;case "custom":n==null||n(p);break;default:n==null||n(p);}},[g,d,n]),ge=useMemo(()=>({data:i,setData:d,handleAction:D,navigate:g}),[i,d,D,g]);return jsx(le.Provider,{value:ge,children:jsx(me,{node:a,registry:m})})}function We({json:e,...t}){try{let r=JSON.parse(e);return jsx(de,{schema:r,...t})}catch(r){return jsxs("div",{className:"p-4 border border-destructive bg-destructive/10 rounded",children:[jsx("p",{className:"font-semibold text-destructive",children:"SDUI Parse Error"}),jsx("pre",{className:"text-sm mt-2 text-destructive/80",children:r.message})]})}}
+import {a as a$8,b as b$6,c as c$3,d as d$3,f as f$1,g,h,e as e$2}from'./chunk-XV3Y7QVU.mjs';import {b as b$2,a as a$6}from'./chunk-RPUS7G7Q.mjs';import {a,b}from'./chunk-GLZKT7JN.mjs';import {c as c$2,b as b$3,a as a$4}from'./chunk-IN7RWQCJ.mjs';import {a as a$3}from'./chunk-N7M6RIN4.mjs';import {f,e,d,c,b as b$1,a as a$2}from'./chunk-BXX2TZUB.mjs';import {a as a$5}from'./chunk-IFSEJVOR.mjs';import {b as b$4,a as a$7}from'./chunk-UWHCM3S6.mjs';import {c as c$1,d as d$2,b as b$5}from'./chunk-SGEP3CQE.mjs';import {d as d$1}from'./chunk-FFH4ZFKS.mjs';import {l}from'./chunk-HN5LSP6L.mjs';import {a as a$1}from'./chunk-C4OACMTB.mjs';import {e as e$1}from'./chunk-UUHAXGMO.mjs';import {createContext,useState,useContext,useMemo,useCallback}from'react';import {jsx,jsxs}from'react/jsx-runtime';var fe=({children:e,justify:t,align:r,className:n="",style:o,backgroundColor:s,padding:a,margin:c,borderRadius:i,border:u,...m})=>{let d={...o,...s&&{backgroundColor:s},...a!==void 0&&{padding:typeof a=="number"?`${a}px`:a},...c!==void 0&&{margin:typeof c=="number"?`${c}px`:c},...i!==void 0&&{borderRadius:typeof i=="number"?`${i}px`:i},...u&&{border:u}};return jsx("div",{className:e$1((t||r)&&"flex",t&&oe[t],r&&ae[r],n),style:Object.keys(d).length>0?d:void 0,...m,children:e})},ye=({size:e=16,className:t=""})=>jsx("div",{className:t,style:{width:e,height:e,flexShrink:0}}),oe={start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between"},ae={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch"},Se=({children:e,direction:t="row",gap:r=0,justify:n="start",align:o="stretch",className:s="",style:a,backgroundColor:c,padding:i,...u})=>{let m={gap:`${r*4}px`,...a,...c&&{backgroundColor:c},...i!==void 0&&{padding:typeof i=="number"?`${i}px`:i}};return jsx("div",{className:`flex ${t==="column"?"flex-col":"flex-row"} ${oe[n]} ${ae[o]} ${s}`,style:m,...u,children:e})},be=({children:e,cols:t=1,gap:r=4,className:n="",style:o,backgroundColor:s,padding:a,...c})=>{let i={gridTemplateColumns:`repeat(${t}, 1fr)`,gap:`${r*4}px`,...o,...s&&{backgroundColor:s},...a!==void 0&&{padding:typeof a=="number"?`${a}px`:a}};return jsx("div",{className:`grid ${n}`,style:i,...c,children:e})},y={left:"text-left",center:"text-center",right:"text-right"};function S(e){let t={};return e.fontSize&&(t.fontSize=e.fontSize),e.lineHeight&&(t.lineHeight=e.lineHeight),e.fontWeight&&(t.fontWeight=e.fontWeight),e.letterSpacing&&(t.letterSpacing=e.letterSpacing),t}var he=({children:e,variant:t="body",align:r="center",className:n="",style:o,fontSize:s,lineHeight:a,fontWeight:c,letterSpacing:i,...u})=>{let m={body:"text-foreground",muted:"text-muted-foreground text-sm",lead:"text-xl text-muted-foreground"},d=S({fontSize:s,lineHeight:a,fontWeight:c,letterSpacing:i}),g=Object.keys(d).length>0?{...o,...d}:o;return jsx("p",{className:`${m[t]} ${y[r]} ${n}`,style:g,...u,children:e})},xe=({children:e,align:t="center",className:r="",style:n,fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c,...i})=>{let u=S({fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c}),m=Object.keys(u).length>0?{...n,...u}:n;return jsx("h1",{className:`text-4xl md:text-5xl font-bold ${y[t]} ${r}`,style:m,...i,children:e})},Re=({children:e,align:t="center",className:r="",style:n,fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c,...i})=>{let u=S({fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c}),m=Object.keys(u).length>0?{...n,...u}:n;return jsx("h2",{className:`text-3xl md:text-4xl font-bold ${y[t]} ${r}`,style:m,...i,children:e})},ve=({children:e,align:t="center",className:r="",style:n,fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c,...i})=>{let u=S({fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c}),m=Object.keys(u).length>0?{...n,...u}:n;return jsx("h3",{className:`text-2xl md:text-3xl font-semibold ${y[t]} ${r}`,style:m,...i,children:e})},Ie=({children:e,align:t="center",className:r="",style:n,fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c,...i})=>{let u=S({fontSize:o,lineHeight:s,fontWeight:a,letterSpacing:c}),m=Object.keys(u).length>0?{...n,...u}:n;return jsx("h4",{className:`text-xl md:text-2xl font-semibold ${y[t]} ${r}`,style:m,...i,children:e})},ke=({children:e,href:t="#",className:r="",...n})=>{let o=t.startsWith("http://")||t.startsWith("https://");return jsx("a",{href:t,className:`text-primary hover:underline ${r}`,...o?{target:"_blank",rel:"noopener noreferrer"}:{},...n,children:e})},Ce=({className:e="",alt:t="",...r})=>jsx("img",{className:`max-w-full h-auto ${e}`,alt:t,...r}),De=({name:e="star",size:t=24,className:r=""})=>jsx(l,{name:e,size:t,className:r}),Ue=({children:e,className:t="",...r})=>jsx("section",{className:`py-10 ${t}`,...r,children:e}),we=({className:e="",...t})=>jsx("hr",{className:`border-border ${e}`,...t}),Te=({children:e,sticky:t=true,transparent:r=false,blur:n=true,overlay:o=false,className:s="",...a})=>jsx("header",{className:e$1("w-full px-4 py-3 z-50",o?"absolute top-0 left-0 right-0":t&&"sticky top-0",r?"bg-transparent":"bg-background/80",n&&!r&&"backdrop-blur-md",!r&&"border-b border-border",s),...a,children:jsx("div",{className:"max-w-7xl mx-auto",children:e})}),Pe=({defaultChecked:e=false,onChange:t,...r})=>{let[n,o]=useState(e);return jsx(b$4,{...r,checked:n,onChange:s=>{o(s.target.checked),t==null||t(s);}})},He=({defaultChecked:e=false,onChange:t,...r})=>{let[n,o]=useState(e);return jsx(d$2,{...r,checked:n,onChange:s=>{o(s.target.checked),t==null||t(s);}})},Ne=({defaultValue:e="",onChange:t,...r})=>{let[n,o]=useState(e);return jsx(b$5,{...r,value:n,onChange:s=>{o(s.target.value),t==null||t(s);}})},$e=({defaultValue:e="",onChange:t,resize:r="vertical",...n})=>{let[o,s]=useState(e);return jsx(a$7,{...n,resize:r,value:o,onChange:a=>{s(a.target.value),t==null||t(a);}})},Fe=({items:e=[],type:t="single",collapsible:r=true,defaultValue:n,className:o=""})=>jsx(a$8,{type:t,collapsible:r,defaultValue:n,className:o,children:e.map((s,a)=>{let c=s.value||`item-${a}`;return jsxs(b$6,{value:c,children:[jsx(c$3,{children:s.title}),jsx(d$3,{children:s.content})]},c)})}),Me=({tabs:e=[],defaultValue:t,variant:r="default",className:n=""})=>{var s;let o=((s=e[0])==null?void 0:s.value)||"tab-0";return jsxs(f$1,{defaultValue:t||o,variant:r,className:n,children:[jsx(g,{children:e.map((a,c)=>{let i=a.value||`tab-${c}`;return jsx(h,{value:i,children:a.label},i)})}),e.map((a,c)=>{let i=a.value||`tab-${c}`;return jsx(e$2,{value:i,children:a.content},i)})]})},R={Box:fe,Spacer:ye,Flex:Se,Grid:be,Section:Ue,Container:a$6,Divider:we,Text:he,H1:xe,H2:Re,H3:ve,H4:Ie,Link:ke,Image:Ce,Icon:De,Button:d$1,Badge:a$5,Avatar:a$4,AvatarImage:b$3,AvatarFallback:c$2,Input:Ne,Textarea:$e,Label:c$1,Checkbox:Pe,Switch:He,Skeleton:a$3,Progress:b$2,Card:a$2,CardHeader:b$1,CardTitle:c,CardDescription:d,CardContent:e,CardFooter:f,Alert:a$1,Header:Te,HeroSection:b,ScrollProgress:a,Accordion:Fe,Tabs:Me};function Le(e){return {...R,...e}}function Ae(e,t){return t in e}var le=createContext(null);function ue(){let e=useContext(le);if(!e)throw new Error("useSDUI must be used within SDUIRenderer");return e}function v(e,t){return t.split(".").reduce((r,n)=>{if(r&&typeof r=="object"&&n in r)return r[n]},e)}function Ve(e,t,r){let n=t.split("."),o={...e},s=o;for(let a=0;a<n.length-1;a++){let c=n[a];s[c]={...s[c]||{}},s=s[c];}return s[n[n.length-1]]=r,o}function ze(e,t){let r=v(t,e.path);switch(e.operator){case "eq":return r===e.value;case "neq":return r!==e.value;case "gt":return typeof r=="number"&&r>e.value;case "lt":return typeof r=="number"&&r<e.value;case "gte":return typeof r=="number"&&r>=e.value;case "lte":return typeof r=="number"&&r<=e.value;case "exists":return r!=null;case "notExists":return r==null;default:return  true}}function C(e,t){let r={};for(let[n,o]of Object.entries(e))if(typeof o=="string"){let s=o.match(/^\{\{\s*(.+?)\s*\}\}$/);s?r[n]=v(t,s[1]):r[n]=o.replace(/\{\{\s*(.+?)\s*\}\}/g,(a,c)=>{let i=v(t,c);return i!==void 0?String(i):""});}else Array.isArray(o)?r[n]=o.map(s=>typeof s=="object"&&s!==null?C(s,t):s):typeof o=="object"&&o!==null?r[n]=C(o,t):r[n]=o;return r}function me({node:e,registry:t}){let{data:r,handleAction:n}=ue();if(e.when&&!ze(e.when,r))return null;let o=t[e.type];if(!o)return console.warn(`[SDUI] Unknown component type: ${e.type}`),jsxs("div",{className:"p-4 border border-destructive/50 bg-destructive/10 rounded text-sm text-destructive",children:["Unknown component: ",e.type]});let s=e.props?C(e.props,r):{},a={};e.on&&(e.on.click&&(a.onClick=()=>n(e.on.click)),e.on.submit&&(a.onSubmit=m=>{m.preventDefault(),n(e.on.submit);}));let c=null;return e.children&&(typeof e.children=="string"?c=e.children.replace(/\{\{\s*(.+?)\s*\}\}/g,(m,d)=>{let g=v(r,d);return g!==void 0?String(g):""}):Array.isArray(e.children)&&(c=e.children.map((m,d)=>jsx(me,{node:m,registry:t},m.key||`child-${d}`)))),["Divider","Input","Textarea","Checkbox","Switch","Progress","Skeleton","Image","ScrollProgress"].includes(e.type)||c===null?jsx(o,{...s,...a}):jsx(o,{...s,...a,children:c})}function de({schema:e,components:t,data:r={},onAction:n,onNavigate:o}){let s="root"in e,a=s?e.root:e,c=s?e.data:{},[i,u]=useState({...c,...r}),m=useMemo(()=>({...R,...t}),[t]),d=useCallback((p,b)=>{u(h=>Ve(h,p,b));},[]),g=useCallback(p=>{o?o(p):typeof window!="undefined"&&(window.location.href=p);},[o]),D=useCallback(p=>{var b,h,U;switch(p.type){case "navigate":g((b=p.payload)==null?void 0:b.path);break;case "setState":(h=p.payload)!=null&&h.path&&((U=p.payload)==null?void 0:U.value)!==void 0&&d(p.payload.path,p.payload.value);break;case "api":n==null||n(p);break;case "custom":n==null||n(p);break;default:n==null||n(p);}},[g,d,n]),ge=useMemo(()=>({data:i,setData:d,handleAction:D,navigate:g}),[i,d,D,g]);return jsx(le.Provider,{value:ge,children:jsx(me,{node:a,registry:m})})}function We({json:e,...t}){try{let r=JSON.parse(e);return jsx(de,{schema:r,...t})}catch(r){return jsxs("div",{className:"p-4 border border-destructive bg-destructive/10 rounded",children:[jsx("p",{className:"font-semibold text-destructive",children:"SDUI Parse Error"}),jsx("pre",{className:"text-sm mt-2 text-destructive/80",children:r.message})]})}}
 export{We as SDUIFromJSON,de as SDUIRenderer,R as defaultRegistry,Le as extendRegistry,Ae as hasComponent,ue as useSDUI};//# sourceMappingURL=sdui.mjs.map
 //# sourceMappingURL=sdui.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hua-labs/ui",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "HUA Labs - Modern React UI Component Library - Beautiful, accessible, and customizable components for React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -70,6 +70,7 @@
     "./styles/toast.css": "./src/styles/toast.css",
     "./styles/codeblock.css": "./src/styles/codeblock.css",
     "./styles/recommended-theme.css": "./src/styles/recommended-theme.css",
+    "./styles/component-vars.css": "./src/styles/component-vars.css",
     "./icons": {
       "types": "./src/components/icons/index.ts",
       "import": "./src/components/icons/index.ts",
@@ -131,6 +132,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "lucide-react": ">=0.400.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -143,6 +145,9 @@
     },
     "@dnd-kit/utilities": {
       "optional": true
+    },
+    "lucide-react": {
+      "optional": true
     }
   },
   "keywords": [

package/dist/chunk-FSL373O6.mjs

@@ -1,3 +0,0 @@
-"use client";
-import {a}from'./chunk-UUHAXGMO.mjs';import d from'react';import {cva}from'class-variance-authority';import {jsx}from'react/jsx-runtime';var m=cva("rounded-lg",{variants:{variant:{default:"bg-card text-card-foreground border border-border",outline:"bg-transparent border-2 border-border",elevated:"bg-card text-card-foreground shadow-lg border border-border"},shadow:{none:"shadow-none",sm:"shadow-sm",md:"shadow-md",lg:"shadow-lg"},padding:{none:"",sm:"p-3",md:"p-4",lg:"p-6"}},defaultVariants:{variant:"default",padding:"none"}}),c=d.forwardRef(({className:e,variant:r="default",shadow:t,padding:n="none",hoverable:s,...i},l)=>jsx("div",{ref:l,className:a(m({variant:r,shadow:t,padding:n}),s&&"transition-shadow hover:shadow-lg cursor-pointer",e),...i}));c.displayName="Card";var f=d.forwardRef(({className:e,...r},t)=>jsx("div",{ref:t,className:a("flex flex-col space-y-1 p-3",e),...r}));f.displayName="CardHeader";var C=d.forwardRef(({className:e,...r},t)=>jsx("h3",{ref:t,className:a("text-base md:text-lg font-semibold leading-tight tracking-tight",e),...r}));C.displayName="CardTitle";var g=d.forwardRef(({className:e,...r},t)=>jsx("p",{ref:t,className:a("text-sm text-muted-foreground",e),...r}));g.displayName="CardDescription";var b=d.forwardRef(({className:e,...r},t)=>jsx("div",{ref:t,className:a("px-3 pb-3",e),...r}));b.displayName="CardContent";var x=d.forwardRef(({className:e,...r},t)=>jsx("div",{ref:t,className:a("flex items-center px-3 pb-3",e),...r}));x.displayName="CardFooter";export{c as a,f as b,C as c,g as d,b as e,x as f};//# sourceMappingURL=chunk-FSL373O6.mjs.map
-//# sourceMappingURL=chunk-FSL373O6.mjs.map

package/dist/chunk-FSL373O6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Card.tsx"],"names":["cardVariants","cva","Card","React","className","variant","shadow","padding","hoverable","props","ref","jsx","merge","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":"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","file":"chunk-FSL373O6.mjs","sourcesContent":["\"use client\"\n\nimport React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { merge } from \"../lib/utils\"\n\nexport const cardVariants = cva(\n  \"rounded-lg\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground border border-border\",\n        outline: \"bg-transparent border-2 border-border\",\n        elevated: \"bg-card text-card-foreground shadow-lg border border-border\",\n      },\n      shadow: {\n        none: \"shadow-none\",\n        sm: \"shadow-sm\",\n        md: \"shadow-md\",\n        lg: \"shadow-lg\",\n      },\n      padding: {\n        none: \"\",\n        sm: \"p-3\",\n        md: \"p-4\",\n        lg: \"p-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      padding: \"none\",\n    },\n  }\n)\n\n/**\n * Card 컴포넌트의 props / Card component props\n */\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"default\" | \"outline\" | \"elevated\"\n  shadow?: \"none\" | \"sm\" | \"md\" | \"lg\"\n  padding?: \"none\" | \"sm\" | \"md\" | \"lg\"\n  hoverable?: boolean\n}\n\n/**\n * Card 컴포넌트 / Card component\n *\n * 콘텐츠를 카드 형태로 표시하는 컴포넌트입니다.\n *\n * @example\n * <Card>\n *   <CardHeader><CardTitle>제목</CardTitle></CardHeader>\n *   <CardContent><p>내용</p></CardContent>\n * </Card>\n */\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant = \"default\", shadow, padding = \"none\", hoverable, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={merge(\n          cardVariants({ variant, shadow, padding }),\n          hoverable && \"transition-shadow hover:shadow-lg cursor-pointer\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\n\nCard.displayName = \"Card\"\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={merge(\"flex flex-col space-y-1 p-3\", className)}\n      {...props}\n    />\n  )\n)\n\nCardHeader.displayName = \"CardHeader\"\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nconst CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(\n  ({ className, ...props }, ref) => (\n    <h3\n      ref={ref}\n      className={merge(\n        \"text-base md:text-lg font-semibold leading-tight tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\n\nCardTitle.displayName = \"CardTitle\"\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p\n      ref={ref}\n      className={merge(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n)\n\nCardDescription.displayName = \"CardDescription\"\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={merge(\"px-3 pb-3\", className)} {...props} />\n  )\n)\n\nCardContent.displayName = \"CardContent\"\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={merge(\"flex items-center px-3 pb-3\", className)}\n      {...props}\n    />\n  )\n)\n\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"]}