globalThis.process??={},globalThis.process.env??={};import{t as e}from"./jsx-runtime.Cwe9agoV.js";import{n as t}from"./cva.v6DJ-q0A.js";import{C as n,F as r,S as i,a,b as o,c as s,d as c,i as l,l as u,n as d,r as f,t as p,u as m,v as h,x as g,y as _}from"./Select.BN9NPqkC.js";var v=e(),y=[`fg`,`fg-muted`,`accent`,`surface`,`danger`],b=[`md`,`lg`],x=[`sm`,`base`,`lg`];function S(e,t,n){return`${e} · ${t} · ${n}`}function C(){return(0,v.jsxs)(`div`,{className:`uikit-root flex flex-col gap-10 py-4`,children:[(0,v.jsxs)(`section`,{children:[(0,v.jsx)(`h2`,{className:`text-2xl font-bold text-fg mb-2`,children:`Buttons`}),(0,v.jsxs)(`p`,{className:`text-fg-muted text-sm mb-4 max-w-prose`,children:[`Every `,(0,v.jsx)(`code`,{className:`text-fg-subtle`,children:`surface()`}),` tone with two radii and all sizes.`]}),(0,v.jsx)(`div`,{className:`flex flex-col gap-6`,children:y.map(e=>(0,v.jsxs)(`div`,{children:[(0,v.jsx)(`h3`,{className:`text-lg font-semibold text-fg mb-3 capitalize`,children:e}),(0,v.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:b.flatMap(t=>x.map(n=>(0,v.jsx)(r,{tone:e,radius:t,size:n,type:`button`,title:S(e,t,n),children:S(e,t,n)},`${e}-${t}-${n}`)))})]},e))})]}),(0,v.jsxs)(`section`,{children:[(0,v.jsx)(`h2`,{className:`text-2xl font-bold text-fg mb-2`,children:`Dialog`}),(0,v.jsxs)(`p`,{className:`text-fg-muted text-sm mb-4 max-w-prose`,children:[`Radix dialog with token-styled content via `,(0,v.jsx)(`code`,{className:`text-fg-subtle`,children:`surface()`}),`.`]}),(0,v.jsxs)(h,{children:[(0,v.jsx)(n,{asChild:!0,children:(0,v.jsx)(r,{tone:`accent`,radius:`md`,size:`base`,type:`button`,children:`Open dialog`})}),(0,v.jsxs)(o,{children:[(0,v.jsx)(i,{className:t({tone:`fg`,size:`lg`}),children:`Confirm action`}),(0,v.jsx)(g,{className:`${t({tone:`fg-muted`,size:`sm`})} mt-2 mb-4`,children:`This dialog uses the shared primitives with token-driven styling.`}),(0,v.jsx)(`p`,{className:t({tone:`fg`,size:`base`}),children:`Dialog body content appears here. Close via the button or Escape.`}),(0,v.jsxs)(`div`,{className:`mt-4 flex justify-end gap-2`,children:[(0,v.jsx)(_,{asChild:!0,children:(0,v.jsx)(r,{tone:`surface`,radius:`md`,size:`sm`,type:`button`,children:`Cancel`})}),(0,v.jsx)(_,{asChild:!0,children:(0,v.jsx)(r,{tone:`accent`,radius:`md`,size:`sm`,type:`button`,children:`Confirm`})})]})]})]})]}),(0,v.jsxs)(`section`,{children:[(0,v.jsx)(`h2`,{className:`text-2xl font-bold text-fg mb-2`,children:`Tabs`}),(0,v.jsx)(`p`,{className:`text-fg-muted text-sm mb-4 max-w-prose`,children:`Radix tabs with token classes on list, triggers, and panels.`}),(0,v.jsxs)(s,{defaultValue:`overview`,className:`max-w-lg`,children:[(0,v.jsxs)(m,{className:`${t({tone:`surface`,radius:`md`})} inline-flex gap-1 p-1`,"aria-label":`Example tabs`,children:[(0,v.jsx)(c,{className:`${t({tone:`fg-muted`,radius:`sm`,size:`sm`})} px-3 py-1.5`,value:`overview`,children:`Overview`}),(0,v.jsx)(c,{className:`${t({tone:`fg-muted`,radius:`sm`,size:`sm`})} px-3 py-1.5`,value:`details`,children:`Details`}),(0,v.jsx)(c,{className:`${t({tone:`fg-muted`,radius:`sm`,size:`sm`})} px-3 py-1.5`,value:`settings`,children:`Settings`})]}),(0,v.jsx)(u,{value:`overview`,className:`${t({tone:`surface`,radius:`md`})} mt-2 p-4`,children:(0,v.jsx)(`p`,{className:t({tone:`fg`,size:`base`}),children:`Overview panel — summary content for the active section.`})}),(0,v.jsx)(u,{value:`details`,className:`${t({tone:`surface`,radius:`md`})} mt-2 p-4`,children:(0,v.jsx)(`p`,{className:t({tone:`fg`,size:`base`}),children:`Details panel — extended information and metadata.`})}),(0,v.jsx)(u,{value:`settings`,className:`${t({tone:`surface`,radius:`md`})} mt-2 p-4`,children:(0,v.jsx)(`p`,{className:t({tone:`fg`,size:`base`}),children:`Settings panel — configuration options for this example.`})})]})]}),(0,v.jsxs)(`section`,{children:[(0,v.jsx)(`h2`,{className:`text-2xl font-bold text-fg mb-2`,children:`Select`}),(0,v.jsx)(`p`,{className:`text-fg-muted text-sm mb-4 max-w-prose`,children:`Radix select with token-styled trigger and items.`}),(0,v.jsxs)(p,{defaultValue:`md`,children:[(0,v.jsx)(l,{className:t({tone:`surface`,radius:`md`,size:`base`}),"aria-label":`Size`,children:(0,v.jsx)(a,{placeholder:`Pick a size`})}),(0,v.jsxs)(d,{className:t({tone:`surface`,radius:`md`}),children:[(0,v.jsx)(f,{className:t({tone:`fg`,size:`sm`}),value:`sm`,children:`Small`}),(0,v.jsx)(f,{className:t({tone:`fg`,size:`sm`}),value:`md`,children:`Medium`}),(0,v.jsx)(f,{className:t({tone:`fg`,size:`sm`}),value:`lg`,children:`Large`})]})]})]})]})}export{C as default};