lucent-ui 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),Q={primary:{background:"var(--lucent-accent-default)",color:"var(--lucent-text-on-accent)",border:"1px solid var(--lucent-accent-default)"},secondary:{background:"var(--lucent-surface-default)",color:"var(--lucent-text-primary)",border:"1px solid var(--lucent-border-default)"},ghost:{background:"transparent",color:"var(--lucent-text-primary)",border:"1px solid transparent"},danger:{background:"var(--lucent-danger-default)",color:"#ffffff",border:"1px solid var(--lucent-danger-default)"}},Z={sm:{height:"32px",padding:"0 var(--lucent-space-3)",fontSize:"var(--lucent-font-size-sm)"},md:{height:"38px",padding:"0 var(--lucent-space-4)",fontSize:"var(--lucent-font-size-md)"},lg:{height:"46px",padding:"0 var(--lucent-space-5)",fontSize:"var(--lucent-font-size-lg)"}},B=g.forwardRef(({variant:n="primary",size:t="md",loading:a=!1,fullWidth:r=!1,spread:o=!1,leftIcon:i,rightIcon:s,chevron:l=!1,disableHoverStyles:d=!1,children:p,disabled:f,style:m,...c},u)=>{const b=f??a;return e.jsxs("button",{ref:u,disabled:b,"aria-busy":a,style:{display:"inline-flex",alignItems:"center",justifyContent:o?"space-between":"center",gap:"var(--lucent-space-2)",fontFamily:"var(--lucent-font-family-base)",fontWeight:"var(--lucent-font-weight-medium)",lineHeight:1,letterSpacing:"0.01em",borderRadius:"var(--lucent-radius-lg)",cursor:b?"not-allowed":"pointer",width:r?"100%":void 0,transition:"background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), transform 80ms var(--lucent-easing-default)",whiteSpace:"nowrap",boxSizing:"border-box",outline:"none",margin:0,...Z[t],...Q[n],...m,...b&&{background:"var(--lucent-bg-muted)",color:"var(--lucent-text-disabled)",borderColor:"transparent"}},onMouseEnter:h=>{var x;!b&&!d&&ee(h.currentTarget,n),(x=c.onMouseEnter)==null||x.call(c,h)},onMouseLeave:h=>{var x;!b&&!d&&te(h.currentTarget,n),(x=c.onMouseLeave)==null||x.call(c,h)},onMouseDown:h=>{var x;b||(h.currentTarget.style.transform="scale(0.95)"),(x=c.onMouseDown)==null||x.call(c,h)},onMouseUp:h=>{var x;h.currentTarget.style.transform="",(x=c.onMouseUp)==null||x.call(c,h)},onFocus:h=>{var x;h.currentTarget.style.boxShadow="0 0 0 3px var(--lucent-accent-subtle)",(x=c.onFocus)==null||x.call(c,h)},onBlur:h=>{var x;h.currentTarget.style.boxShadow="",(x=c.onBlur)==null||x.call(c,h)},...c,children:[i,a?e.jsx(re,{}):p,!a&&s,!a&&l&&e.jsx(ae,{size:t})]})});B.displayName="Button";function ee(n,t){t==="primary"?(n.style.background="var(--lucent-accent-hover)",n.style.borderColor="var(--lucent-accent-hover)"):t==="secondary"?n.style.background="var(--lucent-bg-subtle)":t==="ghost"?n.style.background="var(--lucent-bg-muted)":t==="danger"&&(n.style.background="var(--lucent-danger-hover)",n.style.borderColor="var(--lucent-danger-hover)")}function te(n,t){t==="primary"?(n.style.background="var(--lucent-accent-default)",n.style.borderColor="var(--lucent-accent-default)"):t==="secondary"?n.style.background="var(--lucent-surface-default)":t==="ghost"?n.style.background="transparent":t==="danger"&&(n.style.background="var(--lucent-danger-default)",n.style.borderColor="var(--lucent-danger-default)")}const ne={sm:12,md:14,lg:16};function ae({size:n}){const t=ne[n];return e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,style:{flexShrink:0,marginLeft:-2},children:e.jsx("polyline",{points:"6 9 12 15 18 9"})})}function re(){return e.jsxs("svg",{width:14,height:14,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2.5,strokeLinecap:"round","aria-hidden":!0,style:{animation:"lucent-spin 0.7s linear infinite",flexShrink:0},children:[e.jsx("style",{children:"@keyframes lucent-spin { to { transform: rotate(360deg); } }"}),e.jsx("path",{d:"M12 2a10 10 0 0 1 10 10"})]})}const oe={id:"button",name:"Button",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A clickable control that triggers an action. The primary interactive primitive in Lucent UI.",designIntent:'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the single most important action in a view, "secondary" for supporting actions, "ghost" for low-emphasis actions in dense UIs, and "danger" exclusively for destructive or irreversible operations. Size should match surrounding content density — prefer "md" as the default and reserve "sm" for toolbars or tables.',props:[{name:"variant",type:"enum",required:!1,default:"primary",description:"Visual style conveying action hierarchy.",enumValues:["primary","secondary","ghost","danger"]},{name:"size",type:"enum",required:!1,default:"md",description:"Controls height and padding.",enumValues:["sm","md","lg"]},{name:"children",type:"ReactNode",required:!0,description:"Button label or content."},{name:"disabled",type:"boolean",required:!1,default:"false",description:"Prevents interaction and applies disabled styling."},{name:"loading",type:"boolean",required:!1,default:"false",description:"Shows a spinner and prevents interaction while an async action is in progress."},{name:"fullWidth",type:"boolean",required:!1,default:"false",description:"Stretches the button to fill its container width."},{name:"leftIcon",type:"ReactNode",required:!1,description:"Icon element rendered before the label."},{name:"rightIcon",type:"ReactNode",required:!1,description:"Icon element rendered after the label."},{name:"onClick",type:"function",required:!1,description:"Called when the button is clicked and not disabled or loading."},{name:"type",type:"enum",required:!1,default:"button",description:"Native button type attribute.",enumValues:["button","submit","reset"]}],usageExamples:[{title:"Primary action",code:'<Button variant="primary" onClick={handleSave}>Save changes</Button>'},{title:"Destructive action",code:'<Button variant="danger" onClick={handleDelete}>Delete account</Button>'},{title:"Loading state",code:'<Button variant="primary" loading={isSaving}>Save changes</Button>'},{title:"With icon",code:'<Button variant="secondary" leftIcon={<PlusIcon />}>Add member</Button>'},{title:"Ghost in toolbar",code:'<Button variant="ghost" size="sm">Edit</Button>'},{title:"Full-width submit",code:'<Button variant="primary" type="submit" fullWidth>Sign in</Button>'}],compositionGraph:[],accessibility:{role:"button",ariaAttributes:["aria-disabled","aria-busy"],keyboardInteractions:["Enter — activates the button","Space — activates the button"]}},E=g.forwardRef(({label:n,helperText:t,errorText:a,leftElement:r,rightElement:o,id:i,style:s,...l},d)=>{const p=i??`lucent-input-${Math.random().toString(36).slice(2,7)}`,f=!!a,m=!!l.disabled;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--lucent-space-1)",width:"100%"},children:[n&&e.jsx("label",{htmlFor:p,style:{fontSize:"var(--lucent-font-size-sm)",fontWeight:"var(--lucent-font-weight-medium)",color:"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)"},children:n}),e.jsxs("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[r&&e.jsx("span",{style:{position:"absolute",left:"var(--lucent-space-3)",color:m?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",display:"flex",alignItems:"center",pointerEvents:"none"},children:r}),e.jsx("input",{ref:d,id:p,"aria-invalid":f,"aria-describedby":f?`${p}-error`:t?`${p}-helper`:void 0,style:{width:"100%",height:"40px",padding:`0 ${o?"var(--lucent-space-10)":"var(--lucent-space-3)"} 0 ${r?"var(--lucent-space-10)":"var(--lucent-space-3)"}`,fontSize:"var(--lucent-font-size-md)",fontFamily:"var(--lucent-font-family-base)",color:m?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",background:m?"var(--lucent-bg-muted)":"var(--lucent-surface-default)",border:`1px solid ${m?"transparent":f?"var(--lucent-danger-default)":"var(--lucent-border-default)"}`,cursor:m?"not-allowed":void 0,borderRadius:"var(--lucent-radius-lg)",outline:"none",boxSizing:"border-box",transition:"border-color var(--lucent-duration-fast) var(--lucent-easing-default)",...s},onMouseEnter:c=>{var u;!l.disabled&&c.currentTarget!==document.activeElement&&(c.currentTarget.style.borderColor=f?"var(--lucent-danger-default)":"var(--lucent-border-strong)"),(u=l.onMouseEnter)==null||u.call(l,c)},onMouseLeave:c=>{var u;!l.disabled&&c.currentTarget!==document.activeElement&&(c.currentTarget.style.borderColor=f?"var(--lucent-danger-default)":"var(--lucent-border-default)"),(u=l.onMouseLeave)==null||u.call(l,c)},onFocus:c=>{var u;c.currentTarget.style.borderColor=f?"var(--lucent-danger-default)":"var(--lucent-focus-ring)",c.currentTarget.style.boxShadow=`0 0 0 3px ${f?"var(--lucent-danger-subtle)":"var(--lucent-accent-subtle)"}`,(u=l.onFocus)==null||u.call(l,c)},onBlur:c=>{var u;c.currentTarget.style.borderColor=f?"var(--lucent-danger-default)":"var(--lucent-border-default)",c.currentTarget.style.boxShadow="none",(u=l.onBlur)==null||u.call(l,c)},...l}),o&&e.jsx("span",{style:{position:"absolute",right:"var(--lucent-space-3)",color:m?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",display:"flex",alignItems:"center"},children:o})]}),f&&e.jsx("span",{id:`${p}-error`,role:"alert",style:{fontSize:"var(--lucent-font-size-sm)",color:"var(--lucent-danger-text)",fontFamily:"var(--lucent-font-family-base)"},children:a}),!f&&t&&e.jsx("span",{id:`${p}-helper`,style:{fontSize:"var(--lucent-font-size-sm)",color:"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-base)"},children:t})]})});E.displayName="Input";const ie={id:"input",name:"Input",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A single-line text field with optional label, helper text, and error state.",designIntent:"Always pair with a visible label — never rely on placeholder text alone as it disappears on input and is inaccessible. Use errorText (not helperText) to surface validation failures; the component applies danger styling automatically. leftElement and rightElement accept icons or small controls (e.g. currency symbol, clear button).",props:[{name:"type",type:"enum",required:!1,default:"text",description:"HTML input type.",enumValues:["text","number","password","email","tel","url","search"]},{name:"label",type:"string",required:!1,description:"Visible label rendered above the input."},{name:"helperText",type:"string",required:!1,description:"Supplementary hint shown below the input."},{name:"errorText",type:"string",required:!1,description:"Validation error message. When set, input renders in error state."},{name:"leftElement",type:"ReactNode",required:!1,description:"Icon or adornment rendered inside the left edge."},{name:"rightElement",type:"ReactNode",required:!1,description:"Icon or adornment rendered inside the right edge."},{name:"placeholder",type:"string",required:!1,description:"Placeholder text. Use as a hint, not a label."},{name:"disabled",type:"boolean",required:!1,default:"false",description:"Disables the input."},{name:"value",type:"string",required:!1,description:"Controlled value."},{name:"onChange",type:"function",required:!1,description:"Change handler."}],usageExamples:[{title:"Basic",code:'<Input label="Email" type="email" placeholder="you@example.com" />'},{title:"With helper text",code:'<Input label="Username" helperText="3–20 characters, letters and numbers only" />'},{title:"Error state",code:'<Input label="Password" type="password" value={value} errorText="Must be at least 8 characters" />'},{title:"With icon",code:'<Input label="Search" leftElement={<SearchIcon />} placeholder="Search…" />'}],compositionGraph:[],accessibility:{role:"textbox",ariaAttributes:["aria-invalid","aria-describedby","aria-label"],keyboardInteractions:["Tab — focuses the input"]}},$=g.forwardRef(({label:n,helperText:t,errorText:a,autoResize:r=!1,maxLength:o,showCount:i=!1,id:s,value:l,onChange:d,style:p,...f},m)=>{const c=g.useRef(null),u=m??c,b=s??`lucent-textarea-${Math.random().toString(36).slice(2,7)}`,h=!!a,x=typeof l=="string"?l.length:0;return g.useEffect(()=>{if(!r)return;const w=u.current;w&&(w.style.height="auto",w.style.height=`${w.scrollHeight}px`)},[l,r,u]),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--lucent-space-1)",width:"100%"},children:[n&&e.jsx("label",{htmlFor:b,style:{fontSize:"var(--lucent-font-size-sm)",fontWeight:"var(--lucent-font-weight-medium)",color:"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)"},children:n}),e.jsx("textarea",{ref:u,id:b,maxLength:o,value:l,onChange:d,"aria-invalid":h,"aria-describedby":h?`${b}-error`:t?`${b}-helper`:void 0,style:{width:"100%",minHeight:"100px",padding:"var(--lucent-space-3)",fontSize:"var(--lucent-font-size-md)",fontFamily:"var(--lucent-font-family-base)",color:"var(--lucent-text-primary)",background:"var(--lucent-surface-default)",border:`1px solid ${h?"var(--lucent-danger-default)":"var(--lucent-border-default)"}`,borderRadius:"var(--lucent-radius-md)",outline:"none",resize:r?"none":"vertical",boxSizing:"border-box",lineHeight:"var(--lucent-line-height-base)",transition:"border-color var(--lucent-duration-fast) var(--lucent-easing-default)",...p},onFocus:w=>{var v;w.currentTarget.style.borderColor=h?"var(--lucent-danger-default)":"var(--lucent-focus-ring)",w.currentTarget.style.boxShadow=`0 0 0 3px ${h?"var(--lucent-danger-subtle)":"var(--lucent-accent-subtle)"}`,(v=f.onFocus)==null||v.call(f,w)},onBlur:w=>{var v;w.currentTarget.style.borderColor=h?"var(--lucent-danger-default)":"var(--lucent-border-default)",w.currentTarget.style.boxShadow="none",(v=f.onBlur)==null||v.call(f,w)},...f}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[e.jsxs("div",{children:[h&&e.jsx("span",{id:`${b}-error`,role:"alert",style:{fontSize:"var(--lucent-font-size-sm)",color:"var(--lucent-danger-text)",fontFamily:"var(--lucent-font-family-base)"},children:a}),!h&&t&&e.jsx("span",{id:`${b}-helper`,style:{fontSize:"var(--lucent-font-size-sm)",color:"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-base)"},children:t})]}),(i||o)&&e.jsxs("span",{style:{fontSize:"var(--lucent-font-size-xs)",color:o&&x>=o?"var(--lucent-danger-text)":"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-mono)",flexShrink:0,marginLeft:"var(--lucent-space-2)"},children:[x,o?`/${o}`:""]})]})]})});$.displayName="Textarea";const se={id:"textarea",name:"Textarea",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A multi-line text input with optional auto-resize and character count.",designIntent:"Use autoResize for open-ended fields (bio, description) where content length is unpredictable. Use maxLength + showCount for fields with hard limits (tweet-style). Behaves identically to Input for label/helper/error patterns.",props:[{name:"label",type:"string",required:!1,description:"Visible label above the textarea."},{name:"helperText",type:"string",required:!1,description:"Hint text shown below."},{name:"errorText",type:"string",required:!1,description:"Validation error. Triggers error styling."},{name:"autoResize",type:"boolean",required:!1,default:"false",description:"Grows with content, disables manual resize handle."},{name:"maxLength",type:"number",required:!1,description:"Character limit. Displays counter when set."},{name:"showCount",type:"boolean",required:!1,default:"false",description:"Always show character counter even without maxLength."},{name:"value",type:"string",required:!1,description:"Controlled value."},{name:"onChange",type:"function",required:!1,description:"Change handler."},{name:"placeholder",type:"string",required:!1,description:"Placeholder text."},{name:"disabled",type:"boolean",required:!1,default:"false",description:"Disables the textarea."}],usageExamples:[{title:"Basic",code:'<Textarea label="Bio" placeholder="Tell us about yourself…" />'},{title:"Auto-resize",code:'<Textarea label="Description" autoResize value={value} onChange={e => setValue(e.target.value)} />'},{title:"With character count",code:'<Textarea label="Tweet" maxLength={280} showCount value={value} onChange={e => setValue(e.target.value)} />'},{title:"Error state",code:'<Textarea label="Notes" errorText="Required" value="" />'}],compositionGraph:[],accessibility:{role:"textbox",ariaAttributes:["aria-multiline","aria-invalid","aria-describedby"],keyboardInteractions:["Tab — focuses the textarea"]}},le={neutral:{bg:"var(--lucent-bg-muted)",color:"var(--lucent-text-secondary)",border:"var(--lucent-border-default)"},accent:{bg:"var(--lucent-accent-default)",color:"var(--lucent-text-on-accent)",border:"var(--lucent-accent-default)"},success:{bg:"var(--lucent-success-subtle)",color:"var(--lucent-success-text)",border:"var(--lucent-success-subtle)"},warning:{bg:"var(--lucent-warning-subtle)",color:"var(--lucent-warning-text)",border:"var(--lucent-warning-subtle)"},danger:{bg:"var(--lucent-danger-subtle)",color:"var(--lucent-danger-text)",border:"var(--lucent-danger-subtle)"},info:{bg:"var(--lucent-info-subtle)",color:"var(--lucent-info-text)",border:"var(--lucent-info-subtle)"}},ce={sm:{fontSize:"var(--lucent-font-size-xs)",padding:"0 var(--lucent-space-2)",height:"18px"},md:{fontSize:"var(--lucent-font-size-sm)",padding:"0 var(--lucent-space-2)",height:"22px"}};function de({variant:n="neutral",size:t="md",dot:a=!1,children:r,style:o}){const i=le[n],s=ce[t];return e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:"var(--lucent-space-1)",height:s.height,padding:s.padding,fontSize:s.fontSize,fontFamily:"var(--lucent-font-family-base)",fontWeight:"var(--lucent-font-weight-medium)",lineHeight:1,borderRadius:"var(--lucent-radius-full)",background:i.bg,color:i.color,border:`1px solid ${i.border}`,whiteSpace:"nowrap",boxSizing:"border-box",...o},children:[a&&e.jsx("span",{style:{width:6,height:6,borderRadius:"var(--lucent-radius-full)",background:"currentColor",flexShrink:0}}),r]})}const ue={id:"badge",name:"Badge",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A small inline label for status, count, or category.",designIntent:'Badges communicate status or category at a glance. Match variant to semantic meaning — never use "danger" for non-critical states or "success" for neutral counts. Use dot=true when a single colour indicator is enough context (e.g. online status). Keep badge text short: 1–3 words maximum.',props:[{name:"variant",type:"enum",required:!1,default:"neutral",description:"Colour scheme conveying semantic meaning.",enumValues:["neutral","success","warning","danger","info","accent"]},{name:"size",type:"enum",required:!1,default:"md",description:"Controls height and font size.",enumValues:["sm","md"]},{name:"dot",type:"boolean",required:!1,default:"false",description:"Prepends a coloured dot indicator."},{name:"children",type:"ReactNode",required:!0,description:"Badge label."}],usageExamples:[{title:"Status",code:'<Badge variant="success" dot>Active</Badge>'},{title:"Count",code:'<Badge variant="danger">12</Badge>'},{title:"Category",code:'<Badge variant="info">Beta</Badge>'},{title:"Neutral tag",code:"<Badge>Draft</Badge>"}],compositionGraph:[],accessibility:{role:"status",notes:"Use aria-label on the parent element when badge meaning depends on context."}},pe={xs:24,sm:32,md:40,lg:56,xl:80},fe={xs:"var(--lucent-font-size-xs)",sm:"var(--lucent-font-size-xs)",md:"var(--lucent-font-size-sm)",lg:"var(--lucent-font-size-lg)",xl:"var(--lucent-font-size-xl)"};function me(n,t){var r,o,i;if(t)return t.slice(0,2).toUpperCase();const a=n.trim().split(/\s+/);return a.length===1?(((r=a[0])==null?void 0:r[0])??"").toUpperCase():((((o=a[0])==null?void 0:o[0])??"")+(((i=a[a.length-1])==null?void 0:i[0])??"")).toUpperCase()}function he({src:n,alt:t,size:a="md",initials:r,style:o,...i}){const s=pe[a],l=me(t,r),d={width:s,height:s,borderRadius:"var(--lucent-radius-full)",flexShrink:0,display:"inline-flex",alignItems:"center",justifyContent:"center",overflow:"hidden",boxSizing:"border-box",userSelect:"none",...o};return n?e.jsx("img",{src:n,alt:t,width:s,height:s,style:{...d,objectFit:"cover"},...i}):e.jsx("span",{role:"img","aria-label":t,style:{...d,background:"var(--lucent-accent-default)",color:"var(--lucent-text-on-accent)",fontSize:fe[a],fontWeight:"var(--lucent-font-weight-semibold)",fontFamily:"var(--lucent-font-family-base)"},children:l})}const ge={id:"avatar",name:"Avatar",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A circular user image with initials fallback.",designIntent:"Always provide alt for accessibility — it is used to derive initials automatically when src is absent or fails. Use initials prop to override auto-derived initials (e.g. for non-Latin names). Size xs/sm suit table rows and compact lists; md is the default for comment threads; lg/xl for profile headers.",props:[{name:"src",type:"string",required:!1,description:"Image URL. Falls back to initials if omitted or fails to load."},{name:"alt",type:"string",required:!0,description:"Alt text and source for auto-derived initials."},{name:"size",type:"enum",required:!1,default:"md",description:"Diameter of the avatar.",enumValues:["xs","sm","md","lg","xl"]},{name:"initials",type:"string",required:!1,description:"Override auto-derived initials (max 2 characters)."}],usageExamples:[{title:"With image",code:'<Avatar src="/avatars/jane.jpg" alt="Jane Doe" />'},{title:"Initials fallback",code:'<Avatar alt="Jane Doe" />'},{title:"Large profile",code:'<Avatar src={user.avatar} alt={user.name} size="lg" />'},{title:"Custom initials",code:'<Avatar alt="张伟" initials="张" size="md" />'}],compositionGraph:[],accessibility:{role:"img",ariaAttributes:["aria-label"],notes:'When src is present, renders as <img> with alt. When showing initials, renders as <span role="img" aria-label>.'}},be={xs:12,sm:16,md:24,lg:36},ve={xs:2.5,sm:2.5,md:2,lg:2};function L({size:n="md",label:t="Loading…",color:a}){const r=be[n],o=ve[n];return e.jsxs("span",{role:"status","aria-label":t,style:{display:"inline-flex",alignItems:"center",justifyContent:"center"},children:[e.jsxs("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none","aria-hidden":!0,style:{animation:"lucent-spin 0.7s linear infinite",color:a??"currentColor"},children:[e.jsx("style",{children:"@keyframes lucent-spin { to { transform: rotate(360deg); } }"}),e.jsx("circle",{cx:12,cy:12,r:10,stroke:"currentColor",strokeWidth:o,strokeOpacity:.2}),e.jsx("path",{d:"M12 2a10 10 0 0 1 10 10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"})]}),e.jsx("span",{style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap"},children:t})]})}const ye={id:"spinner",name:"Spinner",tier:"atom",domain:"neutral",specVersion:"0.1",description:"An animated loading indicator for async operations.",designIntent:"Use Spinner for indeterminate loading states of short duration (< 3s). For full-page or skeleton-level loading, prefer Skeleton instead. The label prop is visually hidden but read by screen readers — always set it to a meaningful description of what is loading.",props:[{name:"size",type:"enum",required:!1,default:"md",description:"Spinner diameter.",enumValues:["xs","sm","md","lg"]},{name:"label",type:"string",required:!1,default:"Loading…",description:"Visually hidden accessible label."},{name:"color",type:"string",required:!1,description:"Override colour (CSS value). Defaults to currentColor."}],usageExamples:[{title:"Default",code:"<Spinner />"},{title:"Inside button",code:'<Button loading><Spinner size="sm" label="Saving…" /></Button>'},{title:"Full-page overlay",code:`<div style={{ display: 'grid', placeItems: 'center', minHeight: '100vh' }}><Spinner size="lg" label="Loading dashboard…" /></div>`}],compositionGraph:[],accessibility:{role:"status",ariaAttributes:["aria-label"],notes:'The visible SVG is aria-hidden. The label is conveyed via a visually-hidden span inside role="status".'}};function xe({orientation:n="horizontal",label:t,spacing:a="var(--lucent-space-4)",style:r}){return n==="vertical"?e.jsx("span",{role:"separator","aria-orientation":"vertical",style:{display:"inline-block",width:"1px",alignSelf:"stretch",background:"var(--lucent-border-default)",margin:`0 ${a}`,flexShrink:0,...r}}):t?e.jsxs("div",{role:"separator","aria-label":t,style:{display:"flex",alignItems:"center",gap:"var(--lucent-space-3)",margin:`${a} 0`,...r},children:[e.jsx("span",{style:{flex:1,height:"1px",background:"var(--lucent-border-default)"}}),e.jsx("span",{style:{fontSize:"var(--lucent-font-size-xs)",fontFamily:"var(--lucent-font-family-base)",color:"var(--lucent-text-secondary)",whiteSpace:"nowrap",letterSpacing:"var(--lucent-letter-spacing-wide)",textTransform:"uppercase"},children:t}),e.jsx("span",{style:{flex:1,height:"1px",background:"var(--lucent-border-default)"}})]}):e.jsx("hr",{role:"separator",style:{border:"none",borderTop:"1px solid var(--lucent-border-default)",margin:`${a} 0`,width:"100%",...r}})}const we={id:"divider",name:"Divider",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A visual separator between content sections, horizontal or vertical.",designIntent:'Use horizontal Divider to separate sections in a layout. Use vertical Divider inline between sibling elements (e.g. nav links, toolbar buttons). Use the label prop for "OR" separators in auth flows or form sections — never use a plain text node next to a divider for this.',props:[{name:"orientation",type:"enum",required:!1,default:"horizontal",description:"Direction of the divider line.",enumValues:["horizontal","vertical"]},{name:"label",type:"string",required:!1,description:'Optional centered label (horizontal only). Common use: "OR", "AND", section titles.'},{name:"spacing",type:"string",required:!1,default:"var(--lucent-space-4)",description:"Margin on the axis perpendicular to the line."}],usageExamples:[{title:"Section separator",code:"<Divider />"},{title:"With label",code:'<Divider label="OR" />'},{title:"Vertical in nav",code:`<nav style={{ display: 'flex', alignItems: 'center' }}><a>Home</a><Divider orientation="vertical" /><a>About</a></nav>`}],compositionGraph:[],accessibility:{role:"separator",ariaAttributes:["aria-orientation","aria-label"]}},Se={sm:14,md:16},ke=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),Q={primary:{background:"var(--lucent-accent-default)",color:"var(--lucent-text-on-accent)",border:"1px solid var(--lucent-accent-default)"},secondary:{background:"var(--lucent-surface-default)",color:"var(--lucent-text-primary)",border:"1px solid var(--lucent-border-default)"},ghost:{background:"transparent",color:"var(--lucent-text-primary)",border:"1px solid transparent"},danger:{background:"var(--lucent-danger-default)",color:"#ffffff",border:"1px solid var(--lucent-danger-default)"}},Z={sm:{height:"32px",padding:"0 var(--lucent-space-3)",fontSize:"var(--lucent-font-size-sm)"},md:{height:"38px",padding:"0 var(--lucent-space-4)",fontSize:"var(--lucent-font-size-md)"},lg:{height:"46px",padding:"0 var(--lucent-space-5)",fontSize:"var(--lucent-font-size-lg)"}},B=g.forwardRef(({variant:n="primary",size:t="md",loading:a=!1,fullWidth:r=!1,spread:o=!1,leftIcon:i,rightIcon:s,chevron:l=!1,disableHoverStyles:d=!1,children:p,disabled:f,style:m,...c},u)=>{const b=f??a;return e.jsxs("button",{ref:u,disabled:b,"aria-busy":a,style:{display:"inline-flex",alignItems:"center",justifyContent:o?"space-between":"center",gap:"var(--lucent-space-2)",fontFamily:"var(--lucent-font-family-base)",fontWeight:"var(--lucent-font-weight-medium)",lineHeight:1,letterSpacing:"0.01em",borderRadius:"var(--lucent-radius-lg)",cursor:b?"not-allowed":"pointer",width:r?"100%":void 0,transition:"background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), transform 80ms var(--lucent-easing-default)",whiteSpace:"nowrap",boxSizing:"border-box",outline:"none",margin:0,...Z[t],...Q[n],...m,...b&&{background:"var(--lucent-bg-muted)",color:"var(--lucent-text-disabled)",borderColor:"transparent"}},onMouseEnter:h=>{var x;!b&&!d&&ee(h.currentTarget,n),(x=c.onMouseEnter)==null||x.call(c,h)},onMouseLeave:h=>{var x;!b&&!d&&te(h.currentTarget,n),(x=c.onMouseLeave)==null||x.call(c,h)},onMouseDown:h=>{var x;b||(h.currentTarget.style.transform="scale(0.95)"),(x=c.onMouseDown)==null||x.call(c,h)},onMouseUp:h=>{var x;h.currentTarget.style.transform="",(x=c.onMouseUp)==null||x.call(c,h)},onFocus:h=>{var x;h.currentTarget.style.boxShadow="0 0 0 3px var(--lucent-accent-subtle)",(x=c.onFocus)==null||x.call(c,h)},onBlur:h=>{var x;h.currentTarget.style.boxShadow="",(x=c.onBlur)==null||x.call(c,h)},...c,children:[i,a?e.jsx(re,{}):p,!a&&s,!a&&l&&e.jsx(ae,{size:t})]})});B.displayName="Button";function ee(n,t){t==="primary"?(n.style.background="var(--lucent-accent-hover)",n.style.borderColor="var(--lucent-accent-hover)"):t==="secondary"?n.style.background="var(--lucent-bg-subtle)":t==="ghost"?n.style.background="var(--lucent-bg-muted)":t==="danger"&&(n.style.background="var(--lucent-danger-hover)",n.style.borderColor="var(--lucent-danger-hover)")}function te(n,t){t==="primary"?(n.style.background="var(--lucent-accent-default)",n.style.borderColor="var(--lucent-accent-default)"):t==="secondary"?n.style.background="var(--lucent-surface-default)":t==="ghost"?n.style.background="transparent":t==="danger"&&(n.style.background="var(--lucent-danger-default)",n.style.borderColor="var(--lucent-danger-default)")}const ne={sm:12,md:14,lg:16};function ae({size:n}){const t=ne[n];return e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,style:{flexShrink:0,marginLeft:-2},children:e.jsx("polyline",{points:"6 9 12 15 18 9"})})}function re(){return e.jsxs("svg",{width:14,height:14,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2.5,strokeLinecap:"round","aria-hidden":!0,style:{animation:"lucent-spin 0.7s linear infinite",flexShrink:0},children:[e.jsx("style",{children:"@keyframes lucent-spin { to { transform: rotate(360deg); } }"}),e.jsx("path",{d:"M12 2a10 10 0 0 1 10 10"})]})}const oe={id:"button",name:"Button",tier:"atom",domain:"neutral",specVersion:"1.0",description:"A clickable control that triggers an action. The primary interactive primitive in Lucent UI.",designIntent:'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the single most important action in a view, "secondary" for supporting actions, "ghost" for low-emphasis actions in dense UIs, and "danger" exclusively for destructive or irreversible operations. Size should match surrounding content density — prefer "md" as the default and reserve "sm" for toolbars or tables.',props:[{name:"variant",type:"enum",required:!1,default:"primary",description:"Visual style conveying action hierarchy.",enumValues:["primary","secondary","ghost","danger"]},{name:"size",type:"enum",required:!1,default:"md",description:"Controls height and padding.",enumValues:["sm","md","lg"]},{name:"children",type:"ReactNode",required:!0,description:"Button label or content."},{name:"disabled",type:"boolean",required:!1,default:"false",description:"Prevents interaction and applies disabled styling."},{name:"loading",type:"boolean",required:!1,default:"false",description:"Shows a spinner and prevents interaction while an async action is in progress."},{name:"fullWidth",type:"boolean",required:!1,default:"false",description:"Stretches the button to fill its container width."},{name:"leftIcon",type:"ReactNode",required:!1,description:"Icon element rendered before the label."},{name:"rightIcon",type:"ReactNode",required:!1,description:"Icon element rendered after the label."},{name:"onClick",type:"function",required:!1,description:"Called when the button is clicked and not disabled or loading."},{name:"type",type:"enum",required:!1,default:"button",description:"Native button type attribute.",enumValues:["button","submit","reset"]}],usageExamples:[{title:"Primary action",code:'<Button variant="primary" onClick={handleSave}>Save changes</Button>'},{title:"Destructive action",code:'<Button variant="danger" onClick={handleDelete}>Delete account</Button>'},{title:"Loading state",code:'<Button variant="primary" loading={isSaving}>Save changes</Button>'},{title:"With icon",code:'<Button variant="secondary" leftIcon={<PlusIcon />}>Add member</Button>'},{title:"Ghost in toolbar",code:'<Button variant="ghost" size="sm">Edit</Button>'},{title:"Full-width submit",code:'<Button variant="primary" type="submit" fullWidth>Sign in</Button>'}],compositionGraph:[],accessibility:{role:"button",ariaAttributes:["aria-disabled","aria-busy"],keyboardInteractions:["Enter — activates the button","Space — activates the button"]}},E=g.forwardRef(({label:n,helperText:t,errorText:a,leftElement:r,rightElement:o,id:i,style:s,...l},d)=>{const p=i??`lucent-input-${Math.random().toString(36).slice(2,7)}`,f=!!a,m=!!l.disabled;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--lucent-space-1)",width:"100%"},children:[n&&e.jsx("label",{htmlFor:p,style:{fontSize:"var(--lucent-font-size-sm)",fontWeight:"var(--lucent-font-weight-medium)",color:"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)"},children:n}),e.jsxs("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[r&&e.jsx("span",{style:{position:"absolute",left:"var(--lucent-space-3)",color:m?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",display:"flex",alignItems:"center",pointerEvents:"none"},children:r}),e.jsx("input",{ref:d,id:p,"aria-invalid":f,"aria-describedby":f?`${p}-error`:t?`${p}-helper`:void 0,style:{width:"100%",height:"40px",padding:`0 ${o?"var(--lucent-space-10)":"var(--lucent-space-3)"} 0 ${r?"var(--lucent-space-10)":"var(--lucent-space-3)"}`,fontSize:"var(--lucent-font-size-md)",fontFamily:"var(--lucent-font-family-base)",color:m?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",background:m?"var(--lucent-bg-muted)":"var(--lucent-surface-default)",border:`1px solid ${m?"transparent":f?"var(--lucent-danger-default)":"var(--lucent-border-default)"}`,cursor:m?"not-allowed":void 0,borderRadius:"var(--lucent-radius-lg)",outline:"none",boxSizing:"border-box",transition:"border-color var(--lucent-duration-fast) var(--lucent-easing-default)",...s},onMouseEnter:c=>{var u;!l.disabled&&c.currentTarget!==document.activeElement&&(c.currentTarget.style.borderColor=f?"var(--lucent-danger-default)":"var(--lucent-border-strong)"),(u=l.onMouseEnter)==null||u.call(l,c)},onMouseLeave:c=>{var u;!l.disabled&&c.currentTarget!==document.activeElement&&(c.currentTarget.style.borderColor=f?"var(--lucent-danger-default)":"var(--lucent-border-default)"),(u=l.onMouseLeave)==null||u.call(l,c)},onFocus:c=>{var u;c.currentTarget.style.borderColor=f?"var(--lucent-danger-default)":"var(--lucent-focus-ring)",c.currentTarget.style.boxShadow=`0 0 0 3px ${f?"var(--lucent-danger-subtle)":"var(--lucent-accent-subtle)"}`,(u=l.onFocus)==null||u.call(l,c)},onBlur:c=>{var u;c.currentTarget.style.borderColor=f?"var(--lucent-danger-default)":"var(--lucent-border-default)",c.currentTarget.style.boxShadow="none",(u=l.onBlur)==null||u.call(l,c)},...l}),o&&e.jsx("span",{style:{position:"absolute",right:"var(--lucent-space-3)",color:m?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",display:"flex",alignItems:"center"},children:o})]}),f&&e.jsx("span",{id:`${p}-error`,role:"alert",style:{fontSize:"var(--lucent-font-size-sm)",color:"var(--lucent-danger-text)",fontFamily:"var(--lucent-font-family-base)"},children:a}),!f&&t&&e.jsx("span",{id:`${p}-helper`,style:{fontSize:"var(--lucent-font-size-sm)",color:"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-base)"},children:t})]})});E.displayName="Input";const ie={id:"input",name:"Input",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A single-line text field with optional label, helper text, and error state.",designIntent:"Always pair with a visible label — never rely on placeholder text alone as it disappears on input and is inaccessible. Use errorText (not helperText) to surface validation failures; the component applies danger styling automatically. leftElement and rightElement accept icons or small controls (e.g. currency symbol, clear button).",props:[{name:"type",type:"enum",required:!1,default:"text",description:"HTML input type.",enumValues:["text","number","password","email","tel","url","search"]},{name:"label",type:"string",required:!1,description:"Visible label rendered above the input."},{name:"helperText",type:"string",required:!1,description:"Supplementary hint shown below the input."},{name:"errorText",type:"string",required:!1,description:"Validation error message. When set, input renders in error state."},{name:"leftElement",type:"ReactNode",required:!1,description:"Icon or adornment rendered inside the left edge."},{name:"rightElement",type:"ReactNode",required:!1,description:"Icon or adornment rendered inside the right edge."},{name:"placeholder",type:"string",required:!1,description:"Placeholder text. Use as a hint, not a label."},{name:"disabled",type:"boolean",required:!1,default:"false",description:"Disables the input."},{name:"value",type:"string",required:!1,description:"Controlled value."},{name:"onChange",type:"function",required:!1,description:"Change handler."}],usageExamples:[{title:"Basic",code:'<Input label="Email" type="email" placeholder="you@example.com" />'},{title:"With helper text",code:'<Input label="Username" helperText="3–20 characters, letters and numbers only" />'},{title:"Error state",code:'<Input label="Password" type="password" value={value} errorText="Must be at least 8 characters" />'},{title:"With icon",code:'<Input label="Search" leftElement={<SearchIcon />} placeholder="Search…" />'}],compositionGraph:[],accessibility:{role:"textbox",ariaAttributes:["aria-invalid","aria-describedby","aria-label"],keyboardInteractions:["Tab — focuses the input"]}},$=g.forwardRef(({label:n,helperText:t,errorText:a,autoResize:r=!1,maxLength:o,showCount:i=!1,id:s,value:l,onChange:d,style:p,...f},m)=>{const c=g.useRef(null),u=m??c,b=s??`lucent-textarea-${Math.random().toString(36).slice(2,7)}`,h=!!a,x=typeof l=="string"?l.length:0;return g.useEffect(()=>{if(!r)return;const w=u.current;w&&(w.style.height="auto",w.style.height=`${w.scrollHeight}px`)},[l,r,u]),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--lucent-space-1)",width:"100%"},children:[n&&e.jsx("label",{htmlFor:b,style:{fontSize:"var(--lucent-font-size-sm)",fontWeight:"var(--lucent-font-weight-medium)",color:"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)"},children:n}),e.jsx("textarea",{ref:u,id:b,maxLength:o,value:l,onChange:d,"aria-invalid":h,"aria-describedby":h?`${b}-error`:t?`${b}-helper`:void 0,style:{width:"100%",minHeight:"100px",padding:"var(--lucent-space-3)",fontSize:"var(--lucent-font-size-md)",fontFamily:"var(--lucent-font-family-base)",color:"var(--lucent-text-primary)",background:"var(--lucent-surface-default)",border:`1px solid ${h?"var(--lucent-danger-default)":"var(--lucent-border-default)"}`,borderRadius:"var(--lucent-radius-md)",outline:"none",resize:r?"none":"vertical",boxSizing:"border-box",lineHeight:"var(--lucent-line-height-base)",transition:"border-color var(--lucent-duration-fast) var(--lucent-easing-default)",...p},onFocus:w=>{var v;w.currentTarget.style.borderColor=h?"var(--lucent-danger-default)":"var(--lucent-focus-ring)",w.currentTarget.style.boxShadow=`0 0 0 3px ${h?"var(--lucent-danger-subtle)":"var(--lucent-accent-subtle)"}`,(v=f.onFocus)==null||v.call(f,w)},onBlur:w=>{var v;w.currentTarget.style.borderColor=h?"var(--lucent-danger-default)":"var(--lucent-border-default)",w.currentTarget.style.boxShadow="none",(v=f.onBlur)==null||v.call(f,w)},...f}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[e.jsxs("div",{children:[h&&e.jsx("span",{id:`${b}-error`,role:"alert",style:{fontSize:"var(--lucent-font-size-sm)",color:"var(--lucent-danger-text)",fontFamily:"var(--lucent-font-family-base)"},children:a}),!h&&t&&e.jsx("span",{id:`${b}-helper`,style:{fontSize:"var(--lucent-font-size-sm)",color:"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-base)"},children:t})]}),(i||o)&&e.jsxs("span",{style:{fontSize:"var(--lucent-font-size-xs)",color:o&&x>=o?"var(--lucent-danger-text)":"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-mono)",flexShrink:0,marginLeft:"var(--lucent-space-2)"},children:[x,o?`/${o}`:""]})]})]})});$.displayName="Textarea";const se={id:"textarea",name:"Textarea",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A multi-line text input with optional auto-resize and character count.",designIntent:"Use autoResize for open-ended fields (bio, description) where content length is unpredictable. Use maxLength + showCount for fields with hard limits (tweet-style). Behaves identically to Input for label/helper/error patterns.",props:[{name:"label",type:"string",required:!1,description:"Visible label above the textarea."},{name:"helperText",type:"string",required:!1,description:"Hint text shown below."},{name:"errorText",type:"string",required:!1,description:"Validation error. Triggers error styling."},{name:"autoResize",type:"boolean",required:!1,default:"false",description:"Grows with content, disables manual resize handle."},{name:"maxLength",type:"number",required:!1,description:"Character limit. Displays counter when set."},{name:"showCount",type:"boolean",required:!1,default:"false",description:"Always show character counter even without maxLength."},{name:"value",type:"string",required:!1,description:"Controlled value."},{name:"onChange",type:"function",required:!1,description:"Change handler."},{name:"placeholder",type:"string",required:!1,description:"Placeholder text."},{name:"disabled",type:"boolean",required:!1,default:"false",description:"Disables the textarea."}],usageExamples:[{title:"Basic",code:'<Textarea label="Bio" placeholder="Tell us about yourself…" />'},{title:"Auto-resize",code:'<Textarea label="Description" autoResize value={value} onChange={e => setValue(e.target.value)} />'},{title:"With character count",code:'<Textarea label="Tweet" maxLength={280} showCount value={value} onChange={e => setValue(e.target.value)} />'},{title:"Error state",code:'<Textarea label="Notes" errorText="Required" value="" />'}],compositionGraph:[],accessibility:{role:"textbox",ariaAttributes:["aria-multiline","aria-invalid","aria-describedby"],keyboardInteractions:["Tab — focuses the textarea"]}},le={neutral:{bg:"var(--lucent-bg-muted)",color:"var(--lucent-text-secondary)",border:"var(--lucent-border-default)"},accent:{bg:"var(--lucent-accent-default)",color:"var(--lucent-text-on-accent)",border:"var(--lucent-accent-default)"},success:{bg:"var(--lucent-success-subtle)",color:"var(--lucent-success-text)",border:"var(--lucent-success-subtle)"},warning:{bg:"var(--lucent-warning-subtle)",color:"var(--lucent-warning-text)",border:"var(--lucent-warning-subtle)"},danger:{bg:"var(--lucent-danger-subtle)",color:"var(--lucent-danger-text)",border:"var(--lucent-danger-subtle)"},info:{bg:"var(--lucent-info-subtle)",color:"var(--lucent-info-text)",border:"var(--lucent-info-subtle)"}},ce={sm:{fontSize:"var(--lucent-font-size-xs)",padding:"0 var(--lucent-space-2)",height:"18px"},md:{fontSize:"var(--lucent-font-size-sm)",padding:"0 var(--lucent-space-2)",height:"22px"}};function de({variant:n="neutral",size:t="md",dot:a=!1,children:r,style:o}){const i=le[n],s=ce[t];return e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:"var(--lucent-space-1)",height:s.height,padding:s.padding,fontSize:s.fontSize,fontFamily:"var(--lucent-font-family-base)",fontWeight:"var(--lucent-font-weight-medium)",lineHeight:1,borderRadius:"var(--lucent-radius-full)",background:i.bg,color:i.color,border:`1px solid ${i.border}`,whiteSpace:"nowrap",boxSizing:"border-box",...o},children:[a&&e.jsx("span",{style:{width:6,height:6,borderRadius:"var(--lucent-radius-full)",background:"currentColor",flexShrink:0}}),r]})}const ue={id:"badge",name:"Badge",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A small inline label for status, count, or category.",designIntent:'Badges communicate status or category at a glance. Match variant to semantic meaning — never use "danger" for non-critical states or "success" for neutral counts. Use dot=true when a single colour indicator is enough context (e.g. online status). Keep badge text short: 1–3 words maximum.',props:[{name:"variant",type:"enum",required:!1,default:"neutral",description:"Colour scheme conveying semantic meaning.",enumValues:["neutral","success","warning","danger","info","accent"]},{name:"size",type:"enum",required:!1,default:"md",description:"Controls height and font size.",enumValues:["sm","md"]},{name:"dot",type:"boolean",required:!1,default:"false",description:"Prepends a coloured dot indicator."},{name:"children",type:"ReactNode",required:!0,description:"Badge label."}],usageExamples:[{title:"Status",code:'<Badge variant="success" dot>Active</Badge>'},{title:"Count",code:'<Badge variant="danger">12</Badge>'},{title:"Category",code:'<Badge variant="info">Beta</Badge>'},{title:"Neutral tag",code:"<Badge>Draft</Badge>"}],compositionGraph:[],accessibility:{role:"status",notes:"Use aria-label on the parent element when badge meaning depends on context."}},pe={xs:24,sm:32,md:40,lg:56,xl:80},fe={xs:"var(--lucent-font-size-xs)",sm:"var(--lucent-font-size-xs)",md:"var(--lucent-font-size-sm)",lg:"var(--lucent-font-size-lg)",xl:"var(--lucent-font-size-xl)"};function me(n,t){var r,o,i;if(t)return t.slice(0,2).toUpperCase();const a=n.trim().split(/\s+/);return a.length===1?(((r=a[0])==null?void 0:r[0])??"").toUpperCase():((((o=a[0])==null?void 0:o[0])??"")+(((i=a[a.length-1])==null?void 0:i[0])??"")).toUpperCase()}function he({src:n,alt:t,size:a="md",initials:r,style:o,...i}){const s=pe[a],l=me(t,r),d={width:s,height:s,borderRadius:"var(--lucent-radius-full)",flexShrink:0,display:"inline-flex",alignItems:"center",justifyContent:"center",overflow:"hidden",boxSizing:"border-box",userSelect:"none",...o};return n?e.jsx("img",{src:n,alt:t,width:s,height:s,style:{...d,objectFit:"cover"},...i}):e.jsx("span",{role:"img","aria-label":t,style:{...d,background:"var(--lucent-accent-default)",color:"var(--lucent-text-on-accent)",fontSize:fe[a],fontWeight:"var(--lucent-font-weight-semibold)",fontFamily:"var(--lucent-font-family-base)"},children:l})}const ge={id:"avatar",name:"Avatar",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A circular user image with initials fallback.",designIntent:"Always provide alt for accessibility — it is used to derive initials automatically when src is absent or fails. Use initials prop to override auto-derived initials (e.g. for non-Latin names). Size xs/sm suit table rows and compact lists; md is the default for comment threads; lg/xl for profile headers.",props:[{name:"src",type:"string",required:!1,description:"Image URL. Falls back to initials if omitted or fails to load."},{name:"alt",type:"string",required:!0,description:"Alt text and source for auto-derived initials."},{name:"size",type:"enum",required:!1,default:"md",description:"Diameter of the avatar.",enumValues:["xs","sm","md","lg","xl"]},{name:"initials",type:"string",required:!1,description:"Override auto-derived initials (max 2 characters)."}],usageExamples:[{title:"With image",code:'<Avatar src="/avatars/jane.jpg" alt="Jane Doe" />'},{title:"Initials fallback",code:'<Avatar alt="Jane Doe" />'},{title:"Large profile",code:'<Avatar src={user.avatar} alt={user.name} size="lg" />'},{title:"Custom initials",code:'<Avatar alt="张伟" initials="张" size="md" />'}],compositionGraph:[],accessibility:{role:"img",ariaAttributes:["aria-label"],notes:'When src is present, renders as <img> with alt. When showing initials, renders as <span role="img" aria-label>.'}},be={xs:12,sm:16,md:24,lg:36},ve={xs:2.5,sm:2.5,md:2,lg:2};function L({size:n="md",label:t="Loading…",color:a}){const r=be[n],o=ve[n];return e.jsxs("span",{role:"status","aria-label":t,style:{display:"inline-flex",alignItems:"center",justifyContent:"center"},children:[e.jsxs("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none","aria-hidden":!0,style:{animation:"lucent-spin 0.7s linear infinite",color:a??"currentColor"},children:[e.jsx("style",{children:"@keyframes lucent-spin { to { transform: rotate(360deg); } }"}),e.jsx("circle",{cx:12,cy:12,r:10,stroke:"currentColor",strokeWidth:o,strokeOpacity:.2}),e.jsx("path",{d:"M12 2a10 10 0 0 1 10 10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"})]}),e.jsx("span",{style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap"},children:t})]})}const ye={id:"spinner",name:"Spinner",tier:"atom",domain:"neutral",specVersion:"0.1",description:"An animated loading indicator for async operations.",designIntent:"Use Spinner for indeterminate loading states of short duration (< 3s). For full-page or skeleton-level loading, prefer Skeleton instead. The label prop is visually hidden but read by screen readers — always set it to a meaningful description of what is loading.",props:[{name:"size",type:"enum",required:!1,default:"md",description:"Spinner diameter.",enumValues:["xs","sm","md","lg"]},{name:"label",type:"string",required:!1,default:"Loading…",description:"Visually hidden accessible label."},{name:"color",type:"string",required:!1,description:"Override colour (CSS value). Defaults to currentColor."}],usageExamples:[{title:"Default",code:"<Spinner />"},{title:"Inside button",code:'<Button loading><Spinner size="sm" label="Saving…" /></Button>'},{title:"Full-page overlay",code:`<div style={{ display: 'grid', placeItems: 'center', minHeight: '100vh' }}><Spinner size="lg" label="Loading dashboard…" /></div>`}],compositionGraph:[],accessibility:{role:"status",ariaAttributes:["aria-label"],notes:'The visible SVG is aria-hidden. The label is conveyed via a visually-hidden span inside role="status".'}};function xe({orientation:n="horizontal",label:t,spacing:a="var(--lucent-space-4)",style:r}){return n==="vertical"?e.jsx("span",{role:"separator","aria-orientation":"vertical",style:{display:"inline-block",width:"1px",alignSelf:"stretch",background:"var(--lucent-border-default)",margin:`0 ${a}`,flexShrink:0,...r}}):t?e.jsxs("div",{role:"separator","aria-label":t,style:{display:"flex",alignItems:"center",gap:"var(--lucent-space-3)",margin:`${a} 0`,...r},children:[e.jsx("span",{style:{flex:1,height:"1px",background:"var(--lucent-border-default)"}}),e.jsx("span",{style:{fontSize:"var(--lucent-font-size-xs)",fontFamily:"var(--lucent-font-family-base)",color:"var(--lucent-text-secondary)",whiteSpace:"nowrap",letterSpacing:"var(--lucent-letter-spacing-wide)",textTransform:"uppercase"},children:t}),e.jsx("span",{style:{flex:1,height:"1px",background:"var(--lucent-border-default)"}})]}):e.jsx("hr",{role:"separator",style:{border:"none",borderTop:"1px solid var(--lucent-border-default)",margin:`${a} 0`,width:"100%",...r}})}const we={id:"divider",name:"Divider",tier:"atom",domain:"neutral",specVersion:"0.1",description:"A visual separator between content sections, horizontal or vertical.",designIntent:'Use horizontal Divider to separate sections in a layout. Use vertical Divider inline between sibling elements (e.g. nav links, toolbar buttons). Use the label prop for "OR" separators in auth flows or form sections — never use a plain text node next to a divider for this.',props:[{name:"orientation",type:"enum",required:!1,default:"horizontal",description:"Direction of the divider line.",enumValues:["horizontal","vertical"]},{name:"label",type:"string",required:!1,description:'Optional centered label (horizontal only). Common use: "OR", "AND", section titles.'},{name:"spacing",type:"string",required:!1,default:"var(--lucent-space-4)",description:"Margin on the axis perpendicular to the line."}],usageExamples:[{title:"Section separator",code:"<Divider />"},{title:"With label",code:'<Divider label="OR" />'},{title:"Vertical in nav",code:`<nav style={{ display: 'flex', alignItems: 'center' }}><a>Home</a><Divider orientation="vertical" /><a>About</a></nav>`}],compositionGraph:[],accessibility:{role:"separator",ariaAttributes:["aria-orientation","aria-label"]}},Se={sm:14,md:16},ke=`
 @keyframes lucent-cb-pop {
   0%   { transform: scale(1); }
   35%  { transform: scale(0.82); }
@@ -114,4 +114,4 @@ ${a}
 }`}function Bt(n){const t=parseInt(n.slice(1,3),16)/255,a=parseInt(n.slice(3,5),16)/255,r=parseInt(n.slice(5,7),16)/255,o=i=>i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4);return .2126*o(t)+.7152*o(a)+.0722*o(r)}function Y(n){return Bt(n)<.179?"#ffffff":"#000000"}const X=g.createContext({theme:"light",tokens:R});function $t({theme:n="light",tokens:t,children:a}){const r=g.useId().replace(/:/g,""),o=n==="dark"?_:R,i=t?{...o,...t}:o,s={...i,textOnAccent:(t==null?void 0:t.textOnAccent)??Y(i.accentDefault)},l=`html { font-size: 13px; }
 `+K(s,":root");return g.useLayoutEffect(()=>{let d=document.getElementById(`lucent-tokens-${r}`);return d||(d=document.createElement("style"),d.id=`lucent-tokens-${r}`,document.head.appendChild(d)),d.textContent=l,()=>{var p;(p=document.getElementById(`lucent-tokens-${r}`))==null||p.remove()}},[r,l]),e.jsx(X.Provider,{value:{theme:n,tokens:s},children:a})}function Lt(){return g.useContext(X)}const Dt={accentDefault:"#e9c96b",accentHover:"#ddb84e",accentActive:"#c9a33b",accentSubtle:"#fef9ec",focusRing:"#e9c96b"};function C(n,t){return{field:n,message:t}}function J(n){const t=[];if(typeof n!="object"||n===null)return{valid:!1,errors:[C("manifest","Must be a non-null object")]};const a=n,r=["id","name","description","designIntent","specVersion"];for(const i of r)(typeof a[i]!="string"||a[i].trim()==="")&&t.push(C(i,"Must be a non-empty string"));typeof a.id=="string"&&!/^[a-z][a-z0-9-]*$/.test(a.id)&&t.push(C("id",'Must be kebab-case (e.g. "button", "form-field")'));const o=["atom","molecule","block","flow","overlay"];return o.includes(a.tier)||t.push(C("tier",`Must be one of: ${o.join(", ")}`)),(typeof a.domain!="string"||a.domain.trim()==="")&&t.push(C("domain","Must be a non-empty string")),Array.isArray(a.props)?a.props.forEach((i,s)=>{const l=i,d=`props[${s}]`;(typeof l.name!="string"||l.name==="")&&t.push(C(`${d}.name`,"Must be a non-empty string")),(typeof l.type!="string"||l.type==="")&&t.push(C(`${d}.type`,"Must be a non-empty string")),typeof l.required!="boolean"&&t.push(C(`${d}.required`,"Must be a boolean")),(typeof l.description!="string"||l.description==="")&&t.push(C(`${d}.description`,"Must be a non-empty string"))}):t.push(C("props","Must be an array")),Array.isArray(a.usageExamples)?a.usageExamples.length===0?t.push(C("usageExamples","Must have at least one example")):a.usageExamples.forEach((i,s)=>{const l=i,d=`usageExamples[${s}]`;(typeof l.title!="string"||l.title==="")&&t.push(C(`${d}.title`,"Must be a non-empty string")),(typeof l.code!="string"||l.code==="")&&t.push(C(`${d}.code`,"Must be a non-empty string"))}):t.push(C("usageExamples","Must be an array")),Array.isArray(a.compositionGraph)||t.push(C("compositionGraph","Must be an array (empty array is fine for atoms)")),typeof a.specVersion=="string"&&!/^\d+\.\d+$/.test(a.specVersion)&&t.push(C("specVersion",'Must be "MAJOR.MINOR" format, e.g. "0.1"')),{valid:t.length===0,errors:t}}function Vt(n){const t=J(n);if(!t.valid){const a=t.errors.map(r=>`  ${r.field}: ${r.message}`).join(`
 `);throw new Error(`Invalid ComponentManifest:
-${a}`)}}function Wt(n){if(typeof n!="object"||n===null)return!1;const t=n;return typeof t.name=="string"&&typeof t.type=="string"&&typeof t.required=="boolean"&&typeof t.description=="string"}const Pt="0.1",Ot="0.1.0";exports.Alert=yt;exports.AlertManifest=xt;exports.Avatar=he;exports.AvatarManifest=ge;exports.Badge=de;exports.BadgeManifest=ue;exports.Breadcrumb=jt;exports.Button=B;exports.ButtonManifest=oe;exports.Card=dt;exports.CardManifest=ut;exports.Checkbox=D;exports.CheckboxManifest=Te;exports.Collapsible=qt;exports.Divider=xe;exports.DividerManifest=we;exports.EmptyState=wt;exports.EmptyStateManifest=St;exports.FormField=tt;exports.FormFieldManifest=nt;exports.Icon=Ue;exports.IconManifest=_e;exports.Input=E;exports.InputManifest=ie;exports.LUCENT_UI_VERSION=Ot;exports.LucentProvider=$t;exports.MANIFEST_SPEC_VERSION=Pt;exports.NavLink=et;exports.PageLayout=Rt;exports.Radio=je;exports.RadioGroup=W;exports.RadioGroupUncontrolled=ze;exports.RadioManifest=Me;exports.SearchInput=ot;exports.SearchInputManifest=it;exports.Select=P;exports.SelectManifest=Be;exports.Skeleton=Ct;exports.SkeletonManifest=It;exports.Spinner=L;exports.SpinnerManifest=ye;exports.Tabs=zt;exports.Tag=De;exports.TagManifest=Ve;exports.Text=z;exports.TextManifest=Ze;exports.Textarea=$;exports.TextareaManifest=se;exports.Toggle=Re;exports.ToggleManifest=Fe;exports.Tooltip=Oe;exports.TooltipManifest=He;exports.assertManifest=Vt;exports.brandTokens=Dt;exports.darkTokens=_;exports.getContrastText=Y;exports.isValidPropDescriptor=Wt;exports.lightTokens=R;exports.makeLibraryCSS=K;exports.useLucent=Lt;exports.validateManifest=J;
+${a}`)}}function Wt(n){if(typeof n!="object"||n===null)return!1;const t=n;return typeof t.name=="string"&&typeof t.type=="string"&&typeof t.required=="boolean"&&typeof t.description=="string"}const Pt="1.0",Ot="0.1.0";exports.Alert=yt;exports.AlertManifest=xt;exports.Avatar=he;exports.AvatarManifest=ge;exports.Badge=de;exports.BadgeManifest=ue;exports.Breadcrumb=jt;exports.Button=B;exports.ButtonManifest=oe;exports.Card=dt;exports.CardManifest=ut;exports.Checkbox=D;exports.CheckboxManifest=Te;exports.Collapsible=qt;exports.Divider=xe;exports.DividerManifest=we;exports.EmptyState=wt;exports.EmptyStateManifest=St;exports.FormField=tt;exports.FormFieldManifest=nt;exports.Icon=Ue;exports.IconManifest=_e;exports.Input=E;exports.InputManifest=ie;exports.LUCENT_UI_VERSION=Ot;exports.LucentProvider=$t;exports.MANIFEST_SPEC_VERSION=Pt;exports.NavLink=et;exports.PageLayout=Rt;exports.Radio=je;exports.RadioGroup=W;exports.RadioGroupUncontrolled=ze;exports.RadioManifest=Me;exports.SearchInput=ot;exports.SearchInputManifest=it;exports.Select=P;exports.SelectManifest=Be;exports.Skeleton=Ct;exports.SkeletonManifest=It;exports.Spinner=L;exports.SpinnerManifest=ye;exports.Tabs=zt;exports.Tag=De;exports.TagManifest=Ve;exports.Text=z;exports.TextManifest=Ze;exports.Textarea=$;exports.TextareaManifest=se;exports.Toggle=Re;exports.ToggleManifest=Fe;exports.Tooltip=Oe;exports.TooltipManifest=He;exports.assertManifest=Vt;exports.brandTokens=Dt;exports.darkTokens=_;exports.getContrastText=Y;exports.isValidPropDescriptor=Wt;exports.lightTokens=R;exports.makeLibraryCSS=K;exports.useLucent=Lt;exports.validateManifest=J;

package/dist/index.d.ts

@@ -362,7 +362,7 @@ export declare interface LucentTokens extends SemanticColorTokens, TypographyTok
  */
 export declare function makeLibraryCSS(tokens: LucentTokens, selector?: string): string;
 
-export declare const MANIFEST_SPEC_VERSION = "0.1";
+export declare const MANIFEST_SPEC_VERSION = "1.0";
 
 declare interface MotionTokens {
     durationFast: string;

package/dist/index.js

@@ -118,7 +118,7 @@ const st = {
   name: "Button",
   tier: "atom",
   domain: "neutral",
-  specVersion: "0.1",
+  specVersion: "1.0",
   description: "A clickable control that triggers an action. The primary interactive primitive in Lucent UI.",
   designIntent: 'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the single most important action in a view, "secondary" for supporting actions, "ghost" for low-emphasis actions in dense UIs, and "danger" exclusively for destructive or irreversible operations. Size should match surrounding content density — prefer "md" as the default and reserve "sm" for toolbars or tables.',
   props: [
@@ -3567,7 +3567,7 @@ function Zt(t) {
   const e = t;
   return typeof e.name == "string" && typeof e.type == "string" && typeof e.required == "boolean" && typeof e.description == "string";
 }
-const en = "0.1", tn = "0.1.0";
+const en = "1.0", tn = "0.1.0";
 export {
   Vt as Alert,
   Wt as AlertManifest,

package/dist-cli/cli/figma.js

@@ -0,0 +1,41 @@
+// ─── Figma Variables API types ────────────────────────────────────────────────
+// ─── API client ───────────────────────────────────────────────────────────────
+export async function fetchFigmaVariables(figmaToken, fileKey) {
+    const url = `https://api.figma.com/v1/files/${fileKey}/variables/local`;
+    const res = await fetch(url, {
+        headers: {
+            'X-Figma-Token': figmaToken,
+        },
+    });
+    if (!res.ok) {
+        const body = await res.text().catch(() => '');
+        throw new Error(`Figma API error ${res.status}: ${res.statusText}${body ? `\n${body}` : ''}`);
+    }
+    return res.json();
+}
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+/** Convert Figma RGBA (0–1 channels) to a CSS hex string. */
+export function figmaColorToHex(color) {
+    const toHex = (n) => Math.round(Math.min(1, Math.max(0, n)) * 255)
+        .toString(16)
+        .padStart(2, '0');
+    const rgb = `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+    // Include alpha channel only when not fully opaque
+    if (color.a < 0.9999) {
+        return `${rgb}${toHex(color.a)}`;
+    }
+    return rgb;
+}
+/** True if value is a FigmaColor object (has r/g/b/a number fields). */
+export function isFigmaColor(v) {
+    return (typeof v === 'object' &&
+        v !== null &&
+        'r' in v &&
+        typeof v.r === 'number');
+}
+/** True if value is a VARIABLE_ALIAS reference. */
+export function isAlias(v) {
+    return (typeof v === 'object' &&
+        v !== null &&
+        v.type === 'VARIABLE_ALIAS');
+}

package/dist-cli/cli/index.js

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+/**
+ * lucent-manifest init
+ *
+ * Usage:
+ *   npx lucent-manifest init --figma-token <token> --file-key <key> [options]
+ *   npx lucent-manifest init --template                              (manual fallback)
+ *
+ * Options:
+ *   --figma-token  <token>   Figma personal access token
+ *   --file-key     <key>     Figma file key (from the file URL)
+ *   --light-mode   <name>    Mode name to treat as light theme (default: "light")
+ *   --dark-mode    <name>    Mode name to treat as dark theme  (default: "dark")
+ *   --name         <name>    Design system name written into the manifest
+ *   --out          <path>    Output file path (default: lucent.manifest.json)
+ *   --template               Write an empty JSON template instead of fetching Figma
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { fetchFigmaVariables } from './figma.js';
+import { mapFigmaToTokens } from './mapper.js';
+// ─── Arg parsing ──────────────────────────────────────────────────────────────
+function parseArgs(argv) {
+    const args = {};
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
+        if (arg.startsWith('--')) {
+            const key = arg.slice(2);
+            const next = argv[i + 1];
+            if (next !== undefined && !next.startsWith('--')) {
+                args[key] = next;
+                i++;
+            }
+            else {
+                args[key] = true;
+            }
+        }
+    }
+    return args;
+}
+function required(args, key) {
+    const v = args[key];
+    if (!v || v === true) {
+        console.error(`Error: --${key} is required.`);
+        process.exit(1);
+    }
+    return v;
+}
+function optional(args, key, fallback) {
+    const v = args[key];
+    return typeof v === 'string' ? v : fallback;
+}
+// ─── Template fallback ────────────────────────────────────────────────────────
+function writeTemplate(outPath) {
+    const templateSrc = new URL('./template.manifest.json', import.meta.url);
+    fs.copyFileSync(templateSrc, outPath);
+    console.log(`Template written to ${outPath}`);
+    console.log('Fill in the token values and load it with LucentProvider.');
+}
+// ─── Main ─────────────────────────────────────────────────────────────────────
+async function main() {
+    const args = parseArgs(process.argv.slice(2));
+    const outPath = path.resolve(optional(args, 'out', 'lucent.manifest.json'));
+    if (args['template']) {
+        writeTemplate(outPath);
+        return;
+    }
+    const figmaToken = required(args, 'figma-token');
+    const fileKey = required(args, 'file-key');
+    const lightModeName = optional(args, 'light-mode', 'light');
+    const darkModeName = optional(args, 'dark-mode', 'dark');
+    const systemName = optional(args, 'name', 'My Design System');
+    console.log(`Fetching Figma variables for file ${fileKey}…`);
+    const response = await fetchFigmaVariables(figmaToken, fileKey);
+    const manifest = {
+        version: '1.0',
+        name: systemName,
+        tokens: {},
+    };
+    // Light theme
+    try {
+        const { tokens: lightTokens, unmapped: lightUnmapped } = mapFigmaToTokens(response, lightModeName);
+        manifest.tokens.light = lightTokens;
+        console.log(`Light theme: mapped ${Object.keys(lightTokens).length} token(s).`);
+        if (lightUnmapped.length > 0) {
+            console.warn(`  ${lightUnmapped.length} variable(s) didn't match a Lucent token key and were skipped:`);
+            for (const u of lightUnmapped) {
+                console.warn(`    "${u.figmaName}" → candidate "${u.candidateKey}" (value: ${u.value})`);
+            }
+        }
+    }
+    catch (err) {
+        console.warn(`Skipping light theme: ${err.message}`);
+    }
+    // Dark theme
+    try {
+        const { tokens: darkTokens, unmapped: darkUnmapped } = mapFigmaToTokens(response, darkModeName);
+        manifest.tokens.dark = darkTokens;
+        console.log(`Dark theme: mapped ${Object.keys(darkTokens).length} token(s).`);
+        if (darkUnmapped.length > 0) {
+            console.warn(`  ${darkUnmapped.length} variable(s) didn't match a Lucent token key and were skipped:`);
+            for (const u of darkUnmapped) {
+                console.warn(`    "${u.figmaName}" → candidate "${u.candidateKey}" (value: ${u.value})`);
+            }
+        }
+    }
+    catch (err) {
+        console.warn(`Skipping dark theme: ${err.message}`);
+    }
+    if (!manifest.tokens.light && !manifest.tokens.dark) {
+        console.error('No tokens were mapped. Check your --light-mode and --dark-mode names match the Figma file.');
+        process.exit(1);
+    }
+    fs.writeFileSync(outPath, JSON.stringify(manifest, null, 2) + '\n', 'utf8');
+    console.log(`\nManifest written to ${outPath}`);
+}
+main().catch(err => {
+    console.error(err instanceof Error ? err.message : String(err));
+    process.exit(1);
+});

package/dist-cli/cli/mapper.js

@@ -0,0 +1,162 @@
+import { figmaColorToHex, isFigmaColor, isAlias, } from './figma.js';
+// ─── Token key registry ───────────────────────────────────────────────────────
+/**
+ * Every valid key in LucentTokens — used to validate candidate names produced
+ * by the name normaliser before writing them into the output manifest.
+ */
+const LUCENT_TOKEN_KEYS = new Set([
+    // SemanticColorTokens
+    'bgBase', 'bgSubtle', 'bgMuted', 'bgOverlay',
+    'surfaceDefault', 'surfaceRaised', 'surfaceOverlay',
+    'borderDefault', 'borderSubtle', 'borderStrong',
+    'textPrimary', 'textSecondary', 'textDisabled', 'textInverse', 'textOnAccent',
+    'accentDefault', 'accentHover', 'accentActive', 'accentSubtle',
+    'successDefault', 'successSubtle', 'successText',
+    'warningDefault', 'warningSubtle', 'warningText',
+    'dangerDefault', 'dangerHover', 'dangerSubtle', 'dangerText',
+    'infoDefault', 'infoSubtle', 'infoText',
+    'focusRing',
+    // TypographyTokens
+    'fontFamilyBase', 'fontFamilyMono', 'fontFamilyDisplay',
+    'fontSizeXs', 'fontSizeSm', 'fontSizeMd', 'fontSizeLg',
+    'fontSizeXl', 'fontSize2xl', 'fontSize3xl',
+    'fontWeightRegular', 'fontWeightMedium', 'fontWeightSemibold', 'fontWeightBold',
+    'lineHeightTight', 'lineHeightBase', 'lineHeightRelaxed',
+    'letterSpacingTight', 'letterSpacingBase', 'letterSpacingWide',
+    // SpacingTokens
+    'space0', 'space1', 'space2', 'space3', 'space4', 'space5',
+    'space6', 'space8', 'space10', 'space12', 'space16', 'space20', 'space24',
+    // RadiusTokens
+    'radiusNone', 'radiusSm', 'radiusMd', 'radiusLg', 'radiusXl', 'radiusFull',
+    // ShadowTokens
+    'shadowNone', 'shadowSm', 'shadowMd', 'shadowLg', 'shadowXl',
+    // MotionTokens
+    'durationFast', 'durationBase', 'durationSlow',
+    'easingDefault', 'easingEmphasized', 'easingDecelerate',
+]);
+// ─── Name normalisation ───────────────────────────────────────────────────────
+/**
+ * Top-level Figma collection category prefixes that carry no semantic meaning
+ * in the Lucent token schema and should be dropped before camelCasing.
+ */
+const CATEGORY_PREFIXES = new Set([
+    'color', 'colour', 'typography', 'type', 'spacing', 'space',
+    'radius', 'shadow', 'motion', 'animation',
+]);
+/**
+ * Convert a Figma variable name (slash-separated path, may include hyphens)
+ * into a camelCase candidate token key.
+ *
+ * Examples:
+ *   "color/bg/base"            → "bgBase"
+ *   "color/text/primary"       → "textPrimary"
+ *   "typography/font-size/xl"  → "fontSizeXl"
+ *   "spacing/space-4"          → "space4"
+ *   "radius/radius-md"         → "radiusMd"
+ *   "accentDefault"            → "accentDefault"   (no change needed)
+ */
+export function normalizeName(figmaName) {
+    // Split path segments on /
+    const segments = figmaName.split('/').map(s => s.trim()).filter(Boolean);
+    // Drop a leading category prefix if present
+    if (segments.length > 1 && CATEGORY_PREFIXES.has(segments[0].toLowerCase())) {
+        segments.shift();
+    }
+    // Further split each segment on hyphens
+    const parts = segments.flatMap(s => s.split('-').filter(Boolean));
+    if (parts.length === 0)
+        return figmaName;
+    // camelCase: lowercase first part, title-case the rest
+    return parts
+        .map((p, i) => i === 0 ? p.toLowerCase() : p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())
+        .join('');
+}
+// ─── Alias resolution ─────────────────────────────────────────────────────────
+/**
+ * Resolve a variable value for a given mode, following VARIABLE_ALIAS chains.
+ * Returns `undefined` if the chain cannot be resolved (dangling alias, missing
+ * mode, non-string/non-color resolved type).
+ */
+function resolveValue(variable, modeId, allVariables, visited = new Set()) {
+    if (visited.has(variable.id))
+        return undefined; // circular alias guard
+    visited.add(variable.id);
+    const value = variable.valuesByMode[modeId];
+    if (value === undefined)
+        return undefined;
+    if (isAlias(value)) {
+        const target = allVariables[value.id];
+        if (!target)
+            return undefined;
+        // Aliases preserve their own modeId in the target collection — use the
+        // same modeId; if absent the target may use its defaultModeId but we
+        // can't determine that here without the collections map, so fall back to
+        // returning undefined rather than guessing.
+        return resolveValue(target, modeId, allVariables, visited);
+    }
+    return value;
+}
+// ─── Value → CSS string ───────────────────────────────────────────────────────
+function toCssValue(value, resolvedType) {
+    if (resolvedType === 'COLOR' && isFigmaColor(value)) {
+        return figmaColorToHex(value);
+    }
+    if (resolvedType === 'FLOAT' && typeof value === 'number') {
+        // Figma stores spacing/radius in px without units; emit as "Npx"
+        return `${value}px`;
+    }
+    if (resolvedType === 'STRING' && typeof value === 'string') {
+        return value;
+    }
+    return undefined;
+}
+/**
+ * Map a Figma Variables API response for a single named mode (e.g. "light" or
+ * "dark") into a `Partial<LucentTokens>` token override object.
+ *
+ * @param response  Full response from `fetchFigmaVariables`
+ * @param modeName  Case-insensitive mode name to extract (e.g. "Light", "dark")
+ */
+export function mapFigmaToTokens(response, modeName) {
+    const { variables, variableCollections } = response.meta;
+    // Find the modeId matching the requested name across all collections
+    const targetModeName = modeName.toLowerCase();
+    const modeIdByCollection = new Map();
+    for (const collection of Object.values(variableCollections)) {
+        const match = collection.modes.find(m => m.name.toLowerCase() === targetModeName);
+        if (match) {
+            modeIdByCollection.set(collection.id, match.modeId);
+        }
+    }
+    if (modeIdByCollection.size === 0) {
+        const available = Object.values(variableCollections)
+            .flatMap(c => c.modes.map(m => m.name))
+            .filter((v, i, a) => a.indexOf(v) === i)
+            .join(', ');
+        throw new Error(`No mode named "${modeName}" found in Figma file.\nAvailable modes: ${available || '(none)'}`);
+    }
+    const tokens = {};
+    const unmapped = [];
+    for (const variable of Object.values(variables)) {
+        // Skip booleans — no LucentTokens field uses boolean values
+        if (variable.resolvedType === 'BOOLEAN')
+            continue;
+        const modeId = modeIdByCollection.get(variable.variableCollectionId);
+        if (modeId === undefined)
+            continue;
+        const raw = resolveValue(variable, modeId, variables);
+        if (raw === undefined)
+            continue;
+        const cssValue = toCssValue(raw, variable.resolvedType);
+        if (cssValue === undefined)
+            continue;
+        const candidate = normalizeName(variable.name);
+        if (LUCENT_TOKEN_KEYS.has(candidate)) {
+            tokens[candidate] = cssValue;
+        }
+        else {
+            unmapped.push({ figmaName: variable.name, candidateKey: candidate, value: cssValue });
+        }
+    }
+    return { tokens, unmapped };
+}

package/dist-cli/cli/template.manifest.json

@@ -0,0 +1,83 @@
+{
+  "version": "1.0",
+  "name": "My Design System",
+  "description": "Optional description of your design system",
+  "tokens": {
+    "light": {
+      "bgBase": "#ffffff",
+      "bgSubtle": "#f9fafb",
+      "bgMuted": "#f3f4f6",
+      "bgOverlay": "rgb(0 0 0 / 0.4)",
+      "surfaceDefault": "#ffffff",
+      "surfaceRaised": "#ffffff",
+      "surfaceOverlay": "#ffffff",
+      "borderDefault": "#e5e7eb",
+      "borderSubtle": "#f3f4f6",
+      "borderStrong": "#9ca3af",
+      "textPrimary": "#111827",
+      "textSecondary": "#6b7280",
+      "textDisabled": "#9ca3af",
+      "textInverse": "#ffffff",
+      "textOnAccent": "#ffffff",
+      "accentDefault": "#111827",
+      "accentHover": "#1f2937",
+      "accentActive": "#374151",
+      "accentSubtle": "#f3f4f6",
+      "successDefault": "#16a34a",
+      "successSubtle": "#f0fdf4",
+      "successText": "#15803d",
+      "warningDefault": "#d97706",
+      "warningSubtle": "#fffbeb",
+      "warningText": "#b45309",
+      "dangerDefault": "#dc2626",
+      "dangerHover": "#b91c1c",
+      "dangerSubtle": "#fef2f2",
+      "dangerText": "#b91c1c",
+      "infoDefault": "#2563eb",
+      "infoSubtle": "#eff6ff",
+      "infoText": "#1d4ed8",
+      "focusRing": "#111827",
+      "fontFamilyBase": "\"Inter\", sans-serif",
+      "fontFamilyMono": "\"Fira Code\", monospace",
+      "fontFamilyDisplay": "\"Inter\", sans-serif"
+    },
+    "dark": {
+      "bgBase": "#0f172a",
+      "bgSubtle": "#1e293b",
+      "bgMuted": "#334155",
+      "bgOverlay": "rgb(0 0 0 / 0.6)",
+      "surfaceDefault": "#1e293b",
+      "surfaceRaised": "#334155",
+      "surfaceOverlay": "#1e293b",
+      "borderDefault": "#334155",
+      "borderSubtle": "#1e293b",
+      "borderStrong": "#64748b",
+      "textPrimary": "#f8fafc",
+      "textSecondary": "#94a3b8",
+      "textDisabled": "#475569",
+      "textInverse": "#0f172a",
+      "textOnAccent": "#0f172a",
+      "accentDefault": "#f8fafc",
+      "accentHover": "#e2e8f0",
+      "accentActive": "#cbd5e1",
+      "accentSubtle": "#1e293b",
+      "successDefault": "#22c55e",
+      "successSubtle": "#052e16",
+      "successText": "#4ade80",
+      "warningDefault": "#f59e0b",
+      "warningSubtle": "#431407",
+      "warningText": "#fbbf24",
+      "dangerDefault": "#ef4444",
+      "dangerHover": "#f87171",
+      "dangerSubtle": "#450a0a",
+      "dangerText": "#f87171",
+      "infoDefault": "#3b82f6",
+      "infoSubtle": "#0f1f47",
+      "infoText": "#60a5fa",
+      "focusRing": "#f8fafc",
+      "fontFamilyBase": "\"Inter\", sans-serif",
+      "fontFamilyMono": "\"Fira Code\", monospace",
+      "fontFamilyDisplay": "\"Inter\", sans-serif"
+    }
+  }
+}

package/dist-cli/cli/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cli/src/tokens/types.js

@@ -0,0 +1 @@
+export {};

package/dist-server/src/manifest/examples/button.manifest.js

@@ -3,7 +3,7 @@ export const ButtonManifest = {
     name: 'Button',
     tier: 'atom',
     domain: 'neutral',
-    specVersion: '0.1',
+    specVersion: '1.0',
     description: 'A clickable control that triggers an action. The primary interactive primitive in Lucent UI.',
     designIntent: 'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the ' +
         'single most important action in a view, "secondary" for supporting actions, "ghost" for ' +

package/dist-server/src/manifest/index.js

@@ -1,3 +1,3 @@
 export { validateManifest, assertManifest, isValidPropDescriptor, } from './validate.js';
 export { ButtonManifest } from './examples/button.manifest.js';
-export const MANIFEST_SPEC_VERSION = '0.1';
+export const MANIFEST_SPEC_VERSION = '1.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -15,12 +15,14 @@
     "./styles": "./dist/index.css"
   },
   "bin": {
-    "lucent-mcp": "./dist-server/server/index.js"
+    "lucent-mcp": "./dist-server/server/index.js",
+    "lucent-manifest": "./dist-cli/cli/index.js"
   },
   "sideEffects": false,
   "files": [
     "dist",
-    "dist-server"
+    "dist-server",
+    "dist-cli"
   ],
   "keywords": [
     "react",
@@ -55,6 +57,7 @@
     "dev": "vite --config vite.dev.config.ts",
     "build": "vite build",
     "build:server": "tsc -p server/tsconfig.json",
+    "build:cli": "tsc -p cli/tsconfig.json && cp cli/template.manifest.json dist-cli/cli/template.manifest.json",
     "test": "echo \"No tests yet\" && exit 0",
     "changeset": "changeset",
     "version-packages": "changeset version",