fufa-comlib 0.0.0 → 0.0.2

package/dist/fufa-comlib.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FufaComlib={},e.jsxRuntime,e.React)}(this,function(e,t,l){"use strict";const s={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},a={circle:"rounded-full",rounded:"rounded-lg"};const n={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function r({text:e,tone:l="neutral",className:s,...a}){return t.jsx("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",n[l],s].filter(Boolean).join(" "),...a,children:e})}const i={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},o={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function c({label:e,variant:l="secondary",size:s="medium",className:a,type:n="button",...r}){return t.jsx("button",{type:n,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",i[l],o[s],a].filter(Boolean).join(" "),...r,children:e})}const d={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};const m={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};const u={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};const x={small:"text-lg",medium:"text-2xl",large:"text-3xl"};const f={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};const h={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};const b={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};const p={small:"h-5 w-9",medium:"h-6 w-11"},g={small:"h-4 w-4",medium:"h-5 w-5"},j={small:"translate-x-4",medium:"translate-x-5"};const N={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},v={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function w({label:e,id:l,className:s,...a}){return t.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[e?t.jsx("label",{htmlFor:l,className:"text-sm font-medium text-slate-700",children:e}):null,t.jsx("input",{id:l,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",s].filter(Boolean).join(" "),...a})]})}const y={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function B({value:e,onValueChange:l,onSearch:s,placeholder:a="Search components…"}){return t.jsxs("div",{className:"flex w-full max-w-xl items-end gap-3",children:[t.jsx(w,{id:"search",label:"Search",placeholder:a,value:e,onChange:e=>l(e.target.value)}),t.jsx(c,{label:"Search",variant:"primary",onClick:s})]})}function k({productName:e,userName:l,onLogin:s,onLogout:a}){return t.jsx("header",{className:"w-full border-b border-slate-200 bg-white",children:t.jsxs("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[t.jsx("h1",{className:"text-lg font-semibold text-slate-900",children:e}),l?t.jsxs("div",{className:"flex items-center gap-3",children:[t.jsxs("span",{className:"text-sm text-slate-600",children:["Welcome, ",l]}),t.jsx(c,{size:"small",label:"Log out",onClick:a})]}):t.jsx(c,{size:"small",variant:"primary",label:"Log in",onClick:s})]})})}function C({productName:e,userName:l,onLogin:s,onLogout:a,children:n}){return t.jsxs("div",{className:"min-h-screen bg-slate-50",children:[t.jsx(k,{productName:e,userName:l,onLogin:s,onLogout:a}),t.jsx("main",{className:"mx-auto max-w-6xl px-4 py-8",children:n})]})}const L=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];e.AppHeader=k,e.Avatar=function({name:e,src:l,alt:n,size:r="medium",shape:i="circle",className:o,...c}){const d=function(e){const[t,l]=e.trim().split(/\s+/,2);return`${t?.[0]??""}${l?.[0]??""}`.toUpperCase()}(e);return l?t.jsx("img",{src:l,alt:n??e,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",s[r],a[i],o].filter(Boolean).join(" "),...c}):t.jsx("span",{"aria-label":e,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",s[r],a[i],o].filter(Boolean).join(" "),children:d})},e.Badge=r,e.Button=c,e.Card=function({title:e,description:l,footer:s,children:a,variant:n="outlined",className:r,...i}){return t.jsxs("article",{className:["w-full rounded-xl p-5",d[n],r].filter(Boolean).join(" "),...i,children:[t.jsxs("header",{className:"mb-3 space-y-1",children:[t.jsx("h3",{className:"text-base font-semibold text-slate-900",children:e}),l?t.jsx("p",{className:"text-sm text-slate-600",children:l}):null]}),a?t.jsx("div",{className:"text-sm text-slate-700",children:a}):null,s?t.jsx("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:s}):null]})},e.Checkbox=function({label:e,description:l,size:s="medium",className:a,id:n,...r}){return t.jsxs("label",{htmlFor:n,className:"inline-flex cursor-pointer items-start gap-3",children:[t.jsx("input",{id:n,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",m[s],a].filter(Boolean).join(" "),...r}),t.jsxs("span",{className:"space-y-0.5",children:[t.jsx("span",{className:"block text-sm font-medium text-slate-800",children:e}),l?t.jsx("span",{className:"block text-xs text-slate-500",children:l}):null]})]})},e.Chip=function({label:e,variant:l="soft",tone:s="neutral",onRemove:a,className:n,...r}){return t.jsxs("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",u[s][l],n].filter(Boolean).join(" "),...r,children:[t.jsx("span",{children:e}),a?t.jsx("button",{type:"button",onClick:a,"aria-label":`Remove ${e}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})},e.DashboardTemplate=C,e.Divider=function({label:e,orientation:l="horizontal",className:s,...a}){return"vertical"===l?t.jsx("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",s].filter(Boolean).join(" "),...a}):e?t.jsxs("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",s].filter(Boolean).join(" "),...a,children:[t.jsx("span",{className:"h-px flex-1 bg-slate-200"}),t.jsx("span",{children:e}),t.jsx("span",{className:"h-px flex-1 bg-slate-200"})]}):t.jsx("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",s].filter(Boolean).join(" "),...a})},e.HomePage=function(){const[e,s]=l.useState(""),[a,n]=l.useState("Jane Doe"),i=l.useMemo(()=>L.filter(t=>`${t.name} ${t.level}`.toLowerCase().includes(e.trim().toLowerCase())),[e]);return t.jsxs(C,{productName:"FutureFace Design System",userName:a,onLogin:()=>n("Jane Doe"),onLogout:()=>n(void 0),children:[t.jsxs("section",{className:"space-y-5",children:[t.jsx("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),t.jsx("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),t.jsx(B,{value:e,onValueChange:s})]}),t.jsx("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:i.map(e=>t.jsxs("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[t.jsxs("div",{className:"mb-2 flex items-center justify-between gap-3",children:[t.jsx("h3",{className:"font-medium text-slate-800",children:e.name}),t.jsx(r,{text:e.ready?"Ready":"Planned",tone:e.ready?"success":"warning"})]}),t.jsxs("p",{className:"text-sm text-slate-600",children:["Level: ",e.level]})]},e.name))})]})},e.List=function({items:e,variant:l="unordered",dense:s=!1,className:a,...n}){const r=s?"space-y-1":"space-y-2";return"ordered"===l?t.jsx("ol",{className:["list-decimal pl-5 text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:e.map(e=>t.jsx("li",{children:e},e))}):"check"===l?t.jsx("ul",{className:["text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:e.map(e=>t.jsxs("li",{className:"flex items-start gap-2",children:[t.jsx("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),t.jsx("span",{children:e})]},e))}):t.jsx("ul",{className:["list-disc pl-5 text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:e.map(e=>t.jsx("li",{children:e},e))})},e.Rating=function({value:e,max:l=5,size:s="medium",readOnly:a=!1,onValueChange:n}){return t.jsx("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:l},(l,r)=>{const i=r+1,o=i<=e;return t.jsx("button",{type:"button",role:"radio","aria-checked":o,"aria-label":`Rate ${i}`,disabled:a,onClick:()=>n?.(i),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",x[s],o?"text-amber-400":"text-slate-300"].join(" "),children:"★"},i)})})},e.SearchBar=B,e.Select=function({id:e,label:l,options:s,placeholder:a,variant:n="default",className:r,...i}){return t.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[l?t.jsx("label",{htmlFor:e,className:"text-sm font-medium text-slate-700",children:l}):null,t.jsxs("select",{id:e,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",f[n],r].filter(Boolean).join(" "),...i,children:[a?t.jsx("option",{value:"",children:a}):null,s.map(e=>t.jsx("option",{value:e.value,children:e.label},e.value))]})]})},e.Skeleton=function({variant:e="text",width:l,height:s,animated:a=!0,className:n,style:r,...i}){return t.jsx("div",{"aria-hidden":!0,className:["bg-slate-200",a?"animate-pulse":"",h[e],n].filter(Boolean).join(" "),style:{...r,width:l,height:s},...i})},e.Slider=function({id:e,label:l,variant:s="neutral",className:a,...n}){return t.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[l?t.jsx("label",{htmlFor:e,className:"text-sm font-medium text-slate-700",children:l}):null,t.jsx("input",{id:e,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",b[s],a].filter(Boolean).join(" "),...n})]})},e.Switch=function({checked:e,label:l,onCheckedChange:s,size:a="medium",className:n,...r}){return t.jsxs("div",{className:"inline-flex items-center gap-3",children:[t.jsx("button",{type:"button",role:"switch","aria-checked":e,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",p[a],e?"bg-slate-900":"bg-slate-300",n].filter(Boolean).join(" "),onClick:()=>s?.(!e),...r,children:t.jsx("span",{className:["inline-block rounded-full bg-white transition-transform",g[a],e?j[a]:"translate-x-0.5"].filter(Boolean).join(" ")})}),l?t.jsx("span",{className:"text-sm text-slate-700",children:l}):null]})},e.Table=function({columns:e,rows:l,variant:s="default",className:a,...n}){return t.jsx("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",a].filter(Boolean).join(" "),...n,children:t.jsxs("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[t.jsx("thead",{className:"bg-slate-50 text-slate-600",children:t.jsx("tr",{children:e.map(e=>t.jsx("th",{className:`${v[s]} font-semibold`,children:e.title},e.key))})}),t.jsx("tbody",{className:"text-slate-700",children:l.map(l=>t.jsx("tr",{className:N[s],children:e.map(e=>t.jsx("td",{className:v[s],children:l[e.key]},`${l.id}-${e.key}`))},l.id))})]})})},e.TextInput=w,e.Tooltip=function({content:e,children:l,placement:s="top",className:a,...n}){return t.jsxs("div",{className:["group relative inline-flex",a].filter(Boolean).join(" "),...n,children:[l,t.jsx("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",y[s]].join(" "),children:e})]})}});

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react");const l={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},s={circle:"rounded-full",rounded:"rounded-lg"};const a={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function n({text:t,tone:l="neutral",className:s,...n}){return e.jsx("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",a[l],s].filter(Boolean).join(" "),...n,children:t})}const r={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},i={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function o({label:t,variant:l="secondary",size:s="medium",className:a,type:n="button",...o}){return e.jsx("button",{type:n,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",r[l],i[s],a].filter(Boolean).join(" "),...o,children:t})}const c={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};const d={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};const m={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};const x={small:"text-lg",medium:"text-2xl",large:"text-3xl"};const u={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};const h={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};const p={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};const b={small:"h-5 w-9",medium:"h-6 w-11"},f={small:"h-4 w-4",medium:"h-5 w-5"},g={small:"translate-x-4",medium:"translate-x-5"};const j={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},N={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function v({label:t,id:l,className:s,...a}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[t?e.jsx("label",{htmlFor:l,className:"text-sm font-medium text-slate-700",children:t}):null,e.jsx("input",{id:l,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",s].filter(Boolean).join(" "),...a})]})}const w={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function y({value:t,onValueChange:l,onSearch:s,placeholder:a="Search components…"}){return e.jsxs("div",{className:"flex w-full max-w-xl items-end gap-3",children:[e.jsx(v,{id:"search",label:"Search",placeholder:a,value:t,onChange:e=>l(e.target.value)}),e.jsx(o,{label:"Search",variant:"primary",onClick:s})]})}function B({productName:t,userName:l,onLogin:s,onLogout:a}){return e.jsx("header",{className:"w-full border-b border-slate-200 bg-white",children:e.jsxs("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[e.jsx("h1",{className:"text-lg font-semibold text-slate-900",children:t}),l?e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm text-slate-600",children:["Welcome, ",l]}),e.jsx(o,{size:"small",label:"Log out",onClick:a})]}):e.jsx(o,{size:"small",variant:"primary",label:"Log in",onClick:s})]})})}function k({productName:t,userName:l,onLogin:s,onLogout:a,children:n}){return e.jsxs("div",{className:"min-h-screen bg-slate-50",children:[e.jsx(B,{productName:t,userName:l,onLogin:s,onLogout:a}),e.jsx("main",{className:"mx-auto max-w-6xl px-4 py-8",children:n})]})}const C=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];exports.AppHeader=B,exports.Avatar=function({name:t,src:a,alt:n,size:r="medium",shape:i="circle",className:o,...c}){const d=function(e){const[t,l]=e.trim().split(/\s+/,2);return`${t?.[0]??""}${l?.[0]??""}`.toUpperCase()}(t);return a?e.jsx("img",{src:a,alt:n??t,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",l[r],s[i],o].filter(Boolean).join(" "),...c}):e.jsx("span",{"aria-label":t,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",l[r],s[i],o].filter(Boolean).join(" "),children:d})},exports.Badge=n,exports.Button=o,exports.Card=function({title:t,description:l,footer:s,children:a,variant:n="outlined",className:r,...i}){return e.jsxs("article",{className:["w-full rounded-xl p-5",c[n],r].filter(Boolean).join(" "),...i,children:[e.jsxs("header",{className:"mb-3 space-y-1",children:[e.jsx("h3",{className:"text-base font-semibold text-slate-900",children:t}),l?e.jsx("p",{className:"text-sm text-slate-600",children:l}):null]}),a?e.jsx("div",{className:"text-sm text-slate-700",children:a}):null,s?e.jsx("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:s}):null]})},exports.Checkbox=function({label:t,description:l,size:s="medium",className:a,id:n,...r}){return e.jsxs("label",{htmlFor:n,className:"inline-flex cursor-pointer items-start gap-3",children:[e.jsx("input",{id:n,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",d[s],a].filter(Boolean).join(" "),...r}),e.jsxs("span",{className:"space-y-0.5",children:[e.jsx("span",{className:"block text-sm font-medium text-slate-800",children:t}),l?e.jsx("span",{className:"block text-xs text-slate-500",children:l}):null]})]})},exports.Chip=function({label:t,variant:l="soft",tone:s="neutral",onRemove:a,className:n,...r}){return e.jsxs("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",m[s][l],n].filter(Boolean).join(" "),...r,children:[e.jsx("span",{children:t}),a?e.jsx("button",{type:"button",onClick:a,"aria-label":`Remove ${t}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})},exports.DashboardTemplate=k,exports.Divider=function({label:t,orientation:l="horizontal",className:s,...a}){return"vertical"===l?e.jsx("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",s].filter(Boolean).join(" "),...a}):t?e.jsxs("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",s].filter(Boolean).join(" "),...a,children:[e.jsx("span",{className:"h-px flex-1 bg-slate-200"}),e.jsx("span",{children:t}),e.jsx("span",{className:"h-px flex-1 bg-slate-200"})]}):e.jsx("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",s].filter(Boolean).join(" "),...a})},exports.HomePage=function(){const[l,s]=t.useState(""),[a,r]=t.useState("Jane Doe"),i=t.useMemo(()=>C.filter(e=>`${e.name} ${e.level}`.toLowerCase().includes(l.trim().toLowerCase())),[l]);return e.jsxs(k,{productName:"FutureFace Design System",userName:a,onLogin:()=>r("Jane Doe"),onLogout:()=>r(void 0),children:[e.jsxs("section",{className:"space-y-5",children:[e.jsx("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),e.jsx("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),e.jsx(y,{value:l,onValueChange:s})]}),e.jsx("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:i.map(t=>e.jsxs("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between gap-3",children:[e.jsx("h3",{className:"font-medium text-slate-800",children:t.name}),e.jsx(n,{text:t.ready?"Ready":"Planned",tone:t.ready?"success":"warning"})]}),e.jsxs("p",{className:"text-sm text-slate-600",children:["Level: ",t.level]})]},t.name))})]})},exports.List=function({items:t,variant:l="unordered",dense:s=!1,className:a,...n}){const r=s?"space-y-1":"space-y-2";return"ordered"===l?e.jsx("ol",{className:["list-decimal pl-5 text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:t.map(t=>e.jsx("li",{children:t},t))}):"check"===l?e.jsx("ul",{className:["text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:t.map(t=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),e.jsx("span",{children:t})]},t))}):e.jsx("ul",{className:["list-disc pl-5 text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:t.map(t=>e.jsx("li",{children:t},t))})},exports.Rating=function({value:t,max:l=5,size:s="medium",readOnly:a=!1,onValueChange:n}){return e.jsx("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:l},(l,r)=>{const i=r+1,o=i<=t;return e.jsx("button",{type:"button",role:"radio","aria-checked":o,"aria-label":`Rate ${i}`,disabled:a,onClick:()=>n?.(i),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",x[s],o?"text-amber-400":"text-slate-300"].join(" "),children:"★"},i)})})},exports.SearchBar=y,exports.Select=function({id:t,label:l,options:s,placeholder:a,variant:n="default",className:r,...i}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[l?e.jsx("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:l}):null,e.jsxs("select",{id:t,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",u[n],r].filter(Boolean).join(" "),...i,children:[a?e.jsx("option",{value:"",children:a}):null,s.map(t=>e.jsx("option",{value:t.value,children:t.label},t.value))]})]})},exports.Skeleton=function({variant:t="text",width:l,height:s,animated:a=!0,className:n,style:r,...i}){return e.jsx("div",{"aria-hidden":!0,className:["bg-slate-200",a?"animate-pulse":"",h[t],n].filter(Boolean).join(" "),style:{...r,width:l,height:s},...i})},exports.Slider=function({id:t,label:l,variant:s="neutral",className:a,...n}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[l?e.jsx("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:l}):null,e.jsx("input",{id:t,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",p[s],a].filter(Boolean).join(" "),...n})]})},exports.Switch=function({checked:t,label:l,onCheckedChange:s,size:a="medium",className:n,...r}){return e.jsxs("div",{className:"inline-flex items-center gap-3",children:[e.jsx("button",{type:"button",role:"switch","aria-checked":t,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",b[a],t?"bg-slate-900":"bg-slate-300",n].filter(Boolean).join(" "),onClick:()=>s?.(!t),...r,children:e.jsx("span",{className:["inline-block rounded-full bg-white transition-transform",f[a],t?g[a]:"translate-x-0.5"].filter(Boolean).join(" ")})}),l?e.jsx("span",{className:"text-sm text-slate-700",children:l}):null]})},exports.Table=function({columns:t,rows:l,variant:s="default",className:a,...n}){return e.jsx("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",a].filter(Boolean).join(" "),...n,children:e.jsxs("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[e.jsx("thead",{className:"bg-slate-50 text-slate-600",children:e.jsx("tr",{children:t.map(t=>e.jsx("th",{className:`${N[s]} font-semibold`,children:t.title},t.key))})}),e.jsx("tbody",{className:"text-slate-700",children:l.map(l=>e.jsx("tr",{className:j[s],children:t.map(t=>e.jsx("td",{className:N[s],children:l[t.key]},`${l.id}-${t.key}`))},l.id))})]})})},exports.TextInput=v,exports.Tooltip=function({content:t,children:l,placement:s="top",className:a,...n}){return e.jsxs("div",{className:["group relative inline-flex",a].filter(Boolean).join(" "),...n,children:[l,e.jsx("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",w[s]].join(" "),children:t})]})};

package/dist/index.mjs

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as t,useMemo as a}from"react";const n={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},s={circle:"rounded-full",rounded:"rounded-lg"};function r({name:l,src:t,alt:a,size:r="medium",shape:i="circle",className:o,...c}){const d=function(e){const[l,t]=e.trim().split(/\s+/,2);return`${l?.[0]??""}${t?.[0]??""}`.toUpperCase()}(l);return t?e("img",{src:t,alt:a??l,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",n[r],s[i],o].filter(Boolean).join(" "),...c}):e("span",{"aria-label":l,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",n[r],s[i],o].filter(Boolean).join(" "),children:d})}const i={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function o({text:l,tone:t="neutral",className:a,...n}){return e("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",i[t],a].filter(Boolean).join(" "),...n,children:l})}const c={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},d={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function m({label:l,variant:t="secondary",size:a="medium",className:n,type:s="button",...r}){return e("button",{type:s,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",c[t],d[a],n].filter(Boolean).join(" "),...r,children:l})}const u={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};function h({title:t,description:a,footer:n,children:s,variant:r="outlined",className:i,...o}){return l("article",{className:["w-full rounded-xl p-5",u[r],i].filter(Boolean).join(" "),...o,children:[l("header",{className:"mb-3 space-y-1",children:[e("h3",{className:"text-base font-semibold text-slate-900",children:t}),a?e("p",{className:"text-sm text-slate-600",children:a}):null]}),s?e("div",{className:"text-sm text-slate-700",children:s}):null,n?e("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:n}):null]})}const f={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};function b({label:t,description:a,size:n="medium",className:s,id:r,...i}){return l("label",{htmlFor:r,className:"inline-flex cursor-pointer items-start gap-3",children:[e("input",{id:r,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",f[n],s].filter(Boolean).join(" "),...i}),l("span",{className:"space-y-0.5",children:[e("span",{className:"block text-sm font-medium text-slate-800",children:t}),a?e("span",{className:"block text-xs text-slate-500",children:a}):null]})]})}const x={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};function p({label:t,variant:a="soft",tone:n="neutral",onRemove:s,className:r,...i}){return l("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",x[n][a],r].filter(Boolean).join(" "),...i,children:[e("span",{children:t}),s?e("button",{type:"button",onClick:s,"aria-label":`Remove ${t}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})}function g({label:t,orientation:a="horizontal",className:n,...s}){return"vertical"===a?e("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",n].filter(Boolean).join(" "),...s}):t?l("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",n].filter(Boolean).join(" "),...s,children:[e("span",{className:"h-px flex-1 bg-slate-200"}),e("span",{children:t}),e("span",{className:"h-px flex-1 bg-slate-200"})]}):e("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",n].filter(Boolean).join(" "),...s})}function N({items:t,variant:a="unordered",dense:n=!1,className:s,...r}){const i=n?"space-y-1":"space-y-2";return"ordered"===a?e("ol",{className:["list-decimal pl-5 text-sm text-slate-700",i,s].filter(Boolean).join(" "),...r,children:t.map(l=>e("li",{children:l},l))}):e("ul","check"===a?{className:["text-sm text-slate-700",i,s].filter(Boolean).join(" "),...r,children:t.map(t=>l("li",{className:"flex items-start gap-2",children:[e("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),e("span",{children:t})]},t))}:{className:["list-disc pl-5 text-sm text-slate-700",i,s].filter(Boolean).join(" "),...r,children:t.map(l=>e("li",{children:l},l))})}const v={small:"text-lg",medium:"text-2xl",large:"text-3xl"};function w({value:l,max:t=5,size:a="medium",readOnly:n=!1,onValueChange:s}){return e("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:t},(t,r)=>{const i=r+1,o=i<=l;return e("button",{type:"button",role:"radio","aria-checked":o,"aria-label":`Rate ${i}`,disabled:n,onClick:()=>s?.(i),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",v[a],o?"text-amber-400":"text-slate-300"].join(" "),children:"★"},i)})})}const y={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};function j({id:t,label:a,options:n,placeholder:s,variant:r="default",className:i,...o}){return l("div",{className:"flex w-full flex-col gap-1.5",children:[a?e("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:a}):null,l("select",{id:t,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",y[r],i].filter(Boolean).join(" "),...o,children:[s?e("option",{value:"",children:s}):null,n.map(l=>e("option",{value:l.value,children:l.label},l.value))]})]})}const B={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};function k({variant:l="text",width:t,height:a,animated:n=!0,className:s,style:r,...i}){return e("div",{"aria-hidden":!0,className:["bg-slate-200",n?"animate-pulse":"",B[l],s].filter(Boolean).join(" "),style:{...r,width:t,height:a},...i})}const C={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};function L({id:t,label:a,variant:n="neutral",className:s,...r}){return l("div",{className:"flex w-full flex-col gap-1.5",children:[a?e("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:a}):null,e("input",{id:t,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",C[n],s].filter(Boolean).join(" "),...r})]})}const z={small:"h-5 w-9",medium:"h-6 w-11"},$={small:"h-4 w-4",medium:"h-5 w-5"},F={small:"translate-x-4",medium:"translate-x-5"};function S({checked:t,label:a,onCheckedChange:n,size:s="medium",className:r,...i}){return l("div",{className:"inline-flex items-center gap-3",children:[e("button",{type:"button",role:"switch","aria-checked":t,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",z[s],t?"bg-slate-900":"bg-slate-300",r].filter(Boolean).join(" "),onClick:()=>n?.(!t),...i,children:e("span",{className:["inline-block rounded-full bg-white transition-transform",$[s],t?F[s]:"translate-x-0.5"].filter(Boolean).join(" ")})}),a?e("span",{className:"text-sm text-slate-700",children:a}):null]})}const D={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},R={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function A({columns:t,rows:a,variant:n="default",className:s,...r}){return e("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",s].filter(Boolean).join(" "),...r,children:l("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[e("thead",{className:"bg-slate-50 text-slate-600",children:e("tr",{children:t.map(l=>e("th",{className:`${R[n]} font-semibold`,children:l.title},l.key))})}),e("tbody",{className:"text-slate-700",children:a.map(l=>e("tr",{className:D[n],children:t.map(t=>e("td",{className:R[n],children:l[t.key]},`${l.id}-${t.key}`))},l.id))})]})})}function P({label:t,id:a,className:n,...s}){return l("div",{className:"flex w-full flex-col gap-1.5",children:[t?e("label",{htmlFor:a,className:"text-sm font-medium text-slate-700",children:t}):null,e("input",{id:a,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",n].filter(Boolean).join(" "),...s})]})}const V={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function J({content:t,children:a,placement:n="top",className:s,...r}){return l("div",{className:["group relative inline-flex",s].filter(Boolean).join(" "),...r,children:[a,e("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",V[n]].join(" "),children:t})]})}function O({value:t,onValueChange:a,onSearch:n,placeholder:s="Search components…"}){return l("div",{className:"flex w-full max-w-xl items-end gap-3",children:[e(P,{id:"search",label:"Search",placeholder:s,value:t,onChange:e=>a(e.target.value)}),e(m,{label:"Search",variant:"primary",onClick:n})]})}function T({productName:t,userName:a,onLogin:n,onLogout:s}){return e("header",{className:"w-full border-b border-slate-200 bg-white",children:l("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[e("h1",{className:"text-lg font-semibold text-slate-900",children:t}),a?l("div",{className:"flex items-center gap-3",children:[l("span",{className:"text-sm text-slate-600",children:["Welcome, ",a]}),e(m,{size:"small",label:"Log out",onClick:s})]}):e(m,{size:"small",variant:"primary",label:"Log in",onClick:n})]})})}function H({productName:t,userName:a,onLogin:n,onLogout:s,children:r}){return l("div",{className:"min-h-screen bg-slate-50",children:[e(T,{productName:t,userName:a,onLogin:n,onLogout:s}),e("main",{className:"mx-auto max-w-6xl px-4 py-8",children:r})]})}const I=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];function M(){const[n,s]=t(""),[r,i]=t("Jane Doe"),c=a(()=>I.filter(e=>`${e.name} ${e.level}`.toLowerCase().includes(n.trim().toLowerCase())),[n]);return l(H,{productName:"FutureFace Design System",userName:r,onLogin:()=>i("Jane Doe"),onLogout:()=>i(void 0),children:[l("section",{className:"space-y-5",children:[e("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),e("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),e(O,{value:n,onValueChange:s})]}),e("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:c.map(t=>l("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[l("div",{className:"mb-2 flex items-center justify-between gap-3",children:[e("h3",{className:"font-medium text-slate-800",children:t.name}),e(o,{text:t.ready?"Ready":"Planned",tone:t.ready?"success":"warning"})]}),l("p",{className:"text-sm text-slate-600",children:["Level: ",t.level]})]},t.name))})]})}export{T as AppHeader,r as Avatar,o as Badge,m as Button,h as Card,b as Checkbox,p as Chip,H as DashboardTemplate,g as Divider,M as HomePage,N as List,w as Rating,O as SearchBar,j as Select,k as Skeleton,L as Slider,S as Switch,A as Table,P as TextInput,J as Tooltip};

package/package.json

@@ -1,8 +1,18 @@
 {
   "name": "fufa-comlib",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "type": "module",
-  "main": "dist/fufa-comlib.bundle.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "README.md"