admin-ui-starter-kit 0.5.0 → 0.6.1

package/dist/showcase/assets/date-picker-ByYEZGMg.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{n}from"./isSameDay-DVP1ae2V.js";import{i as r,r as i,t as a}from"./calendar-DcYyOrNY.js";import{m as o,t as s}from"./format-DUU7-42g.js";import{f as c,p as l,y as u}from"./section-D-N8Ze16.js";import{t as d}from"./calendar-BXG5CwbY.js";import{r as f}from"./example-PsbgbESI.js";import{t as p}from"./clock-Dd-urPd2.js";import{N as m,d as h,m as g,n as _,y as v}from"./index-QESvAJrb.js";import{t as y}from"./label-D1wLK5nY.js";import{t as b}from"./separator-Ha9YxI2x.js";import{t as x}from"./input-yYoqWQQ7.js";import{i as ee,t as te}from"./popover-Bu7aaPjE.js";import{t as ne}from"./popover-BsCx2XMI.js";import{n as S,t as re}from"./toggle-group-D_iuhL1G.js";var C=e(t(),1),w=h();function ie({config:e,output:t,hasSelection:n,autoSummary:r,className:i}){let{text:a,actions:o,showOnlyWhenSelected:s=!1,showSummary:c=!1}=e,u=C.useMemo(()=>{if(a)return typeof a==`function`?a(t):a},[a,t]),d=u||(c?r:void 0);if(s&&!n||!d&&(!o||o.length===0))return null;let p=e=>e===`destructive`?{variant:`error`,buttonStyle:`solid`}:e===`outline`?{variant:`secondary`,buttonStyle:`outline`}:e===`ghost`?{variant:`secondary`,buttonStyle:`ghost`}:e===`secondary`?{variant:`secondary`,buttonStyle:`solid`}:{variant:`primary`,buttonStyle:`solid`};return(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(b,{}),(0,w.jsxs)(`div`,{className:_(`flex flex-col gap-3 p-3`,i),children:[!!d&&(0,w.jsxs)(`div`,{className:`text-sm`,children:[!!c&&!!u&&!!r&&(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(l,{type:`secondary`,children:r}),(0,w.jsx)(l,{weight:`medium`,className:`mt-1`,children:u})]}),!c&&!!u&&(0,w.jsx)(l,{weight:`medium`,children:u}),!!c&&!u&&!!r&&(0,w.jsx)(l,{type:`secondary`,children:r})]}),!!o&&o.length>0&&(0,w.jsx)(`div`,{className:`flex items-center gap-2`,children:o.map(e=>{let n=typeof e.disabled==`function`?e.disabled(t):e.disabled,r=p(e.variant??null);return(0,w.jsx)(f,{variant:r.variant,buttonStyle:r.buttonStyle,disabled:n,onClick:()=>e.onClick(t),className:`flex-1`,children:e.label},e.label)})})]})]})}ie.displayName=`DatePickerFooter`;function ae({config:e,className:t}){let{title:n,description:r,icon:i,align:a=`left`}=e;return(0,w.jsx)(`div`,{className:_(`date-picker-header--component`,`border-b p-4`,a===`center`?`text-center`:`text-left`,t),children:(0,w.jsxs)(`div`,{className:`flex items-center justify-start gap-3`,children:[!!i&&(0,w.jsx)(`div`,{className:`flex-shrink-0`,children:(0,w.jsx)(i,{className:`h-5 w-5 text-primary`})}),(0,w.jsxs)(`div`,{className:_(`flex-1`,a===`center`&&!i&&`text-center`),children:[(0,w.jsx)(c,{tag:`h3`,containerClassName:`space-y-0`,className:`font-semibold text-base leading-none`,children:n}),!!r&&(0,w.jsx)(l,{type:`secondary`,className:`mt-2`,children:r})]})]})})}ae.displayName=`DatePickerHeader`;function T(e){return e.toString().padStart(2,`0`)}function E(e,t,n){return Math.min(Math.max(e,t),n)}function D(e,t){if(t<=0)return e;let n=Math.floor(e/t)*t;return Math.max(0,Math.min(n,1440*60-1))}function O(e){if(!e)return null;let t=e.split(`:`);if(t.length<2||t.length>3)return null;let[n,r,i]=t,a=E(Number.parseInt(n,10),0,23),o=E(Number.parseInt(r,10),0,59),s=E(Number.parseInt(i??`0`,10),0,59);return Number.isNaN(a)||Number.isNaN(o)||Number.isNaN(s)?null:{hours:a,minutes:o,seconds:s}}function k(e,t,n){let r=Number.isFinite(e?.getTime?.())?e:new Date,i=r.getHours(),a=r.getMinutes(),o=t?r.getSeconds():0,s=D(i*3600+a*60+o,n),c=Math.floor(s/3600),l=Math.floor(s%3600/60),u=s%60;return{hours:c,minutes:l,seconds:t?u:0}}function A(e,t,n){if(t===`12`){let t=e.hours>=12?`PM`:`AM`,r=e.hours%12;return r===0&&(r=12),{hours:T(r),minutes:T(e.minutes),seconds:n?T(e.seconds):void 0,period:t}}return{hours:T(e.hours),minutes:T(e.minutes),seconds:n?T(e.seconds):void 0}}function oe(e,t,n){let r=e=>{let t=Number.parseInt(e??`0`,10);return Number.isNaN(t)?0:t},i=r(e.hours),a=E(r(e.minutes),0,59),o=n?E(r(e.seconds),0,59):0;if(t===`12`){i=E(i,1,12);let t=(e.period??`AM`)===`PM`;i%=12,t&&(i+=12)}else i=E(i,0,23);return{hours:i,minutes:a,seconds:o}}function j(e,t,n){let r=D(e.hours*3600+e.minutes*60+e.seconds,t);return{hours:Math.floor(r/3600),minutes:Math.floor(r%3600/60),seconds:n?r%60:0}}function M(e,t,n,r){let i=T(e.minutes),a=t?`:${T(e.seconds)}`:``;if(n===`24`)return`${T(e.hours)}:${i}${a}`;let o=e.hours>=12?`PM`:`AM`,s=e.hours%12;s===0&&(s=12);let c=o===`AM`?r?.am??`AM`:r?.pm??`PM`;return`${T(s)}:${i}${a} ${c}`}var N=/'[^']*'/g,P=/[HKhk]|\bp\b|\bt\b|\ba\b/;function se(e){if(!e)return!1;let t=e.replace(N,``);return P.test(t)}function F(e){return{startMonth:typeof e?.fromYear==`number`?new Date(e.fromYear,0):void 0,endMonth:typeof e?.toYear==`number`?new Date(e.toYear,11):void 0}}function I(e,t,n,r){let i=r?{locale:r}:void 0;return{date:e,formatted:e?s(e,t,i):void 0,readable:e?s(e,n,i):void 0}}function ce(e,t,n,r){let i=r?{locale:r}:void 0;return{dates:e,formatted:e.map(e=>s(e,t,i)),readable:e.map(e=>s(e,n,i))}}function L(e,t,n,r){let i=r?{locale:r}:void 0;return{range:e,formatted:{from:e?.from?s(e.from,t,i):void 0,to:e?.to?s(e.to,t,i):void 0},readable:{from:e?.from?s(e.from,n,i):void 0,to:e?.to?s(e.to,n,i):void 0}}}function R(e,t){let n=typeof t==`string`?O(t):t,r=new Date(e);return!Number.isFinite(r.getTime())||!n?new Date(NaN):(r.setHours(n.hours,n.minutes,n.seconds,0),r)}function z(e,t,n){let r=e;return e.from&&(r={...r,from:R(e.from,t)}),e.to&&r&&(r={...r,to:R(e.to,n)}),r}function le(e,t){return Math.ceil((t.getTime()-e.getTime())/(1e3*60*60*24))+1}function ue(e,t,n){if(!e?.from||!e?.to)return{isValid:!0};let r=le(e.from,e.to);return t&&r<t||n&&r>n?{isValid:!1,daysDiff:r}:{isValid:!0,daysDiff:r}}function B(e,t,n,r){if(!e?.from||!e?.to)return null;let i=le(e.from,e.to);return t&&i<t?r.minimumDays(t):n&&i>n?r.maximumDays(n):null}function V(e,t,n,r,i){return r&&e.length===0?`At least one date must be selected`:t&&e.length<t?`Select at least ${t} dates`:n?i.maximumDates(n):null}function de(e,t,n,r,i,a){if(e){let n=s(e,t,a?{locale:a}:void 0);return i&&(n+=` ${i}`),n}return n??r}function H(e,t,n,r,i,a){if(e.length>0){if(e.length===1){let n=a?{locale:a}:void 0;return s(e[0],t,n)}return i.datesSelected(e.length)}return n??r}function fe(e,t,n,r,i){if(e?.from){let n=i?{locale:i}:void 0;return e.to?`${s(e.from,t,n)} - ${s(e.to,t,n)}`:s(e.from,t,n)}return n??r}var U={selectDate:`Select a date`,selectDates:`Select dates`,selectDateRange:`Select date range`,from:`From`,to:`To`,confirm:`Confirm`,clear:`Clear`,today:`Today`,startDate:`Start date`,endDate:`End date`,startTime:`Start time`,endTime:`End time`,hours:`Hours`,minutes:`Minutes`,seconds:`Seconds`,am:`AM`,pm:`PM`,minimumDays:e=>`A minimum of ${e} days is required`,maximumDays:e=>`A maximum of ${e} days is allowed`,maximumDates:e=>`Select up to ${e} dates`,datesSelected:e=>`${e} dates selected`,lastWeek:`Last week`,lastMonth:`Last month`,lastYear:`Last year`,nextWeek:`Next week`,nextMonth:`Next month`,nextYear:`Next year`,thisWeek:`This Week`,thisMonth:`This Month`,last30Days:`Last 30 Days`,selectMonthYear:`Select month and year`,month:`Month`,year:`Year`},W=[`hours`,`minutes`,`seconds`],G=`00`,K=`12`;function pe(e){return e.replace(/\D/g,``).slice(-2)}function q(e){return e.length===0?`00`:e.length===1?`0${e}`:e}function me(e,t){let n=t?W:W.slice(0,2),r=n.indexOf(e);return r>-1&&r<n.length-1?n[r+1]:null}function J(e,t){let n=t?W:W.slice(0,2),r=n.indexOf(e);return r>0?n[r-1]:null}function he(e,t){return t===`24`?e:e%12||12}function Y(e){return e>=12?`PM`:`AM`}function X(e,t){return t===`12`?{...e,period:e.period??`AM`}:{...e,period:void 0}}function ge({value:e,onChange:t,format:n,includeSeconds:r,step:i,disabled:a,className:o,labels:s,periodLabels:c}){let u=C.useMemo(()=>r?W:W.slice(0,2),[r]),[d,f]=C.useState(()=>X(A(e,n,r),n)),p=C.useRef(d),m=C.useRef(!1),h=C.useCallback(e=>{p.current=e,f(e)},[]),g=C.useRef({hours:null,minutes:null,seconds:null});C.useEffect(()=>{if(m.current){m.current=!1;return}h(X(A(e,n,r),n))},[e,n,r,h]);let v=C.useCallback(e=>{m.current=!0,t(oe(e,n,r))},[n,r,t]),y=C.useCallback(e=>{let a=j(oe(e,n,r),i,r);t(a),h(X(A(a,n,r),n))},[n,r,t,i,h]),b=C.useCallback(e=>{if(!e)return;let t=g.current[e];t&&(t.focus(),t.select())},[]),ee=C.useCallback((e,t)=>{let r=p.current,i=r[e]??(e===`hours`&&n===`12`?K:G),a=(Number.parseInt(i.slice(-1),10)||0)*10+t,o={...r},s=o.period??`AM`;e===`hours`?n===`24`?o.hours=q(Math.min(Math.max(a,0),23).toString()):a===0?(s=`AM`,o.hours=K):a>12?(s=Y(a),o.hours=q(he(a,`12`).toString())):(o.hours=q(Math.min(Math.max(a,1),12).toString()),s=r.period??Y(a)):e===`minutes`?o.minutes=q(Math.min(Math.max(a,0),59).toString()):e===`seconds`&&(o.seconds=q(Math.min(Math.max(a,0),59).toString()));let c={...o,period:s};h(c),v(c)},[n,h,v]),te=C.useCallback((e,t)=>{let r=pe(t),i={...p.current},a=i.period??`AM`;if(e===`hours`)if(n===`24`){let e=Number.parseInt(r||`0`,10);i.hours=q((Number.isNaN(e)?0:Math.min(Math.max(e,0),23)).toString())}else{let e=Number.parseInt(r||`0`,10);Number.isNaN(e)?(i.hours=`12`,a=p.current.period??`AM`):r.length===2&&e>12?(a=Y(e),i.hours=q(he(e,`12`).toString())):e===0?(a=`AM`,i.hours=`12`):(i.hours=q(Math.min(Math.max(e,1),12).toString()),r.length===2&&(a=p.current.period??Y(e)))}else if(e===`minutes`){let e=Number.parseInt(r||`0`,10);i.minutes=q((Number.isNaN(e)?0:Math.min(Math.max(e,0),59)).toString())}else if(e===`seconds`){let e=Number.parseInt(r||`0`,10);i.seconds=q((Number.isNaN(e)?0:Math.min(Math.max(e,0),59)).toString())}let o={...i,period:a};h(o),v(o)},[n,h,v]),ne=C.useCallback(e=>{n===`12`&&y({...p.current,period:e})},[y,n]),ie=C.useCallback(()=>{y(p.current)},[y]),ae=C.useCallback((e,t)=>{if(e.key.length===1&&/\d/.test(e.key)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){e.preventDefault(),ee(t,Number.parseInt(e.key,10));return}if(e.key===`ArrowRight`){b(me(t,r));return}if(e.key===`ArrowLeft`){b(J(t,r));return}if(e.key===`Backspace`){let n=e.currentTarget;n.selectionStart===0&&n.selectionEnd===0&&b(J(t,r))}},[ee,b,r]),T=C.useMemo(()=>{if(n===`12`)return d.period?[d.period]:void 0},[n,d.period]);return(0,w.jsxs)(`div`,{className:_(`segmented-time-input--component`,`flex items-center gap-2`,o),children:[u.map((e,t)=>{let r=e===`hours`&&n===`12`?K:G,i=d[e]??r,o=e===`hours`?s.hours:e===`minutes`?s.minutes:s.seconds??s.minutes;return(0,w.jsxs)(C.Fragment,{children:[(0,w.jsx)(x,{ref:t=>{g.current[e]=t},value:i,onChange:t=>te(e,t.target.value),onFocus:e=>e.target.select(),onBlur:ie,onKeyDown:t=>ae(t,e),inputMode:`numeric`,pattern:`\\d*`,maxLength:2,showCharacterCount:!1,disabled:a,"aria-label":o,size:`small`,className:`w-12 text-center`}),t<u.length-1&&(0,w.jsx)(l,{tag:`span`,type:`secondary`,children:`:`})]},e)}),n===`12`&&(0,w.jsxs)(re,{value:T,onValueChange:e=>{let t=e[0];t&&ne(t)},disabled:a,size:`sm`,className:`ml-1`,children:[(0,w.jsx)(S,{value:`AM`,"aria-label":c.am,children:c.am}),(0,w.jsx)(S,{value:`PM`,"aria-label":c.pm,children:c.pm})]})]})}ge.displayName=`SegmentedTimeInput`;function _e(e){return e===`ghost`?`ghost`:e===`secondary`?`secondary`:`outline`}function ve(e){let t=_e(e);return t===`ghost`?{variant:`secondary`,buttonStyle:`ghost`}:t===`secondary`?{variant:`secondary`,buttonStyle:`solid`}:{variant:`secondary`,buttonStyle:`outline`}}var ye=[`!h-control !px-control !py-space-xs !rounded-radius !border !border-input !bg-transparent !shadow-none`,`!text-sm !font-normal !text-foreground`,`hover:!bg-transparent`,`focus-visible:!border-ring focus-visible:!ring-ring/50 focus-visible:!ring-[3px]`,`aria-invalid:!ring-destructive/20 dark:aria-invalid:!ring-destructive/40 aria-invalid:!border-destructive`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`].join(` `);function be(e){return!e.mode||e.mode===`single`}function xe(e){return e.mode===`multiple`}function Z(e){return e.mode===`range`}function Se(e,t){return[{label:e.today,getValue:()=>({from:new Date,to:new Date})},{label:e.thisWeek,getValue:()=>({from:o(new Date,{weekStartsOn:t}),to:i(new Date,{weekStartsOn:t})})},{label:e.thisMonth,getValue:()=>({from:r(new Date),to:v(new Date)})},{label:e.last30Days,getValue:()=>({from:n(new Date,-30),to:new Date})}]}function Ce(e){let[t,n]=C.useState(!1),r=e.locale??g,i=m(U,e.strings??e.translations),a=C.useMemo(()=>e.enableYearDropdown||e.yearSelection?.enabled?`dropdown`:`label`,[e.enableYearDropdown,e.yearSelection]),o=C.useMemo(()=>F(e.yearSelection),[e.yearSelection]);return be(e)?(0,w.jsx)(we,{className:`date-picker--component`,...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a,yearBounds:o}):xe(e)?(0,w.jsx)(Te,{...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a,yearBounds:o}):Z(e)?(0,w.jsx)(Ee,{...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a,yearBounds:o}):null}function we({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:i=`PPP`,placeholder:o,closeOnSelect:c=!0,withTime:u,disabledDates:m,calendarProps:h,open:g,setOpen:v,t:x,dateFnsLocale:S,captionLayout:re,yearBounds:T,...E}){let D=C.useId(),O=`${D}-description`,A=E.error!==void 0&&E.error!==null&&E.error!==``,oe=A?O:void 0,N=E.hint!==void 0&&E.hint!==null&&E.hint!==``,P=typeof E.error==`string`?E.error:``,F=typeof E.hint==`string`?E.hint:``,ce=u?.format??`24`,L=u?.step??60,z=u?.showSeconds??!1,le=se(i),ue=u?.showTimeInButton??!le,[B,V]=C.useState(()=>e??t),[H,fe]=C.useState(()=>k(e??t,z,L)),U=C.useRef(e??t??void 0),W=C.useRef(!1),G=C.useRef(e!==void 0),K=C.useCallback((e,t)=>{let n=e;if(e&&u?.enabled){let r=R(e,t??H);n=Number.isFinite(r.getTime())?r:void 0}return I(n,r,i,S)},[r,i,S,u,H]);C.useEffect(()=>{let a=!!u?.enabled,o=G.current,s=e!==void 0,c=(e,t)=>{let o=j(k(e,z,L),L,z);if(V(t=>t?.getTime?.()===e.getTime()?t:e),fe(e=>e.hours===o.hours&&e.minutes===o.minutes&&e.seconds===o.seconds?e:o),U.current=e,W.current=!0,t&&a){let t=R(e,o);n?.(I(t,r,i,S))}};if(!a){W.current=!1,U.current=e??t??void 0,V(e??t),G.current=s;return}let l=U.current?.getTime?.(),d=e?.getTime?.();if(!s&&o&&t===void 0&&(W.current=!1,U.current=void 0),e!==void 0&&d!==l){c(e,!1),G.current=s;return}if(e===void 0&&t!==void 0){(l!==t.getTime()||!W.current)&&c(t,!1),G.current=s;return}if(e===void 0&&t===void 0&&!W.current){W.current=!0,G.current=s;return}G.current=s},[u?.enabled,e,t,z,L,n,r,i,S]),C.useEffect(()=>{u?.enabled&&fe(e=>{let t=j(e,L,z);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t})},[u?.enabled,L,z]);let pe=C.useCallback(e=>{if(V(e),u?.enabled&&e&&(W.current=!0,U.current=e),u?.enabled){n?.(K(e)),c&&e&&v(!1);return}n?.(K(e)),c&&e&&v(!1)},[n,K,c,v,u]),q=C.useCallback(e=>{fe(e),B&&n?.(K(B,e))},[B,n,K]),me=C.useMemo(()=>{if(u?.enabled)return M(H,z,ce,{am:x.am,pm:x.pm})},[u?.enabled,H,z,ce,x]),J=C.useMemo(()=>de(B,i,o,x.selectDate,ue?me:void 0,S),[B,i,o,x,me,ue,S]),he=C.useMemo(()=>B?s(B,i,{locale:S}):void 0,[B,i,S]);return(0,w.jsxs)(`div`,{className:_(`space-y-2`,E.className),children:[!!(E.label||N)&&(0,w.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!E.label&&(0,w.jsx)(y,{htmlFor:D,className:_(`leading-6`,A&&`text-destructive`),children:E.label}),!A&&!!N&&(0,w.jsx)(l,{tag:`span`,type:`secondary`,children:F})]}),(0,w.jsxs)(te,{open:g,onOpenChange:v,children:[(0,w.jsx)(ee,{render:e=>{let t=ve(E.buttonVariant);return(0,w.jsxs)(f,{...e,id:D,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":A,"aria-describedby":oe,className:_(`w-full justify-start text-left font-normal`,ye,!B&&`text-muted-foreground`,E.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:E.disabled,children:[(0,w.jsx)(d,{className:`mr-control-gap size-icon`}),J]})}}),(0,w.jsxs)(ne,{className:`w-auto p-0`,align:`start`,children:[!!E.header&&(0,w.jsx)(ae,{config:E.header}),(0,w.jsx)(a,{mode:`single`,selected:B,onSelect:pe,defaultMonth:B,numberOfMonths:E.numberOfMonths,showOutsideDays:E.showOutsideDays,disabled:m??E.disabled,locale:S,captionLayout:re,startMonth:T.startMonth,endMonth:T.endMonth,...h}),!!u?.enabled&&(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(b,{}),(0,w.jsxs)(`div`,{className:`p-3`,children:[(0,w.jsx)(y,{size:`default`,children:x.startTime}),(0,w.jsxs)(`div`,{className:`mt-2 flex items-center gap-2`,children:[(0,w.jsx)(p,{className:`h-4 w-4 text-muted-foreground`}),(0,w.jsx)(ge,{value:H,onChange:q,format:ce,includeSeconds:z,step:L,disabled:E.disabled,labels:{hours:x.hours,minutes:x.minutes,seconds:z?x.seconds:void 0},periodLabels:{am:x.am,pm:x.pm}})]})]})]}),!!E.footer&&(0,w.jsx)(ie,{config:E.footer,output:K(B),hasSelection:!!B,autoSummary:he})]})]}),!!A&&(0,w.jsx)(l,{id:O,size:`xs`,type:`error`,content:P})]})}function Te({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:i=`PPP`,placeholder:o,min:s,max:c,required:u,disabledDates:p,calendarProps:m,open:h,setOpen:g,t:v,dateFnsLocale:x,captionLayout:S,yearBounds:re,...T}){let E=C.useId(),D=`${E}-description`,O=T.error!==void 0&&T.error!==null&&T.error!==``,k=O?D:void 0,A=T.hint!==void 0&&T.hint!==null&&T.hint!==``,oe=typeof T.error==`string`?T.error:``,j=typeof T.hint==`string`?T.hint:``,[M,N]=C.useState(e??t??[]);C.useEffect(()=>{e!==void 0&&N(e)},[e]);let P=C.useCallback(e=>ce(e,r,i,x),[r,i,x]),se=C.useCallback(e=>{let t=Array.isArray(e)?e:e?[e]:[];c&&t.length>c||(N(t),n?.(P(t)))},[n,P,c]),F=C.useMemo(()=>H(M,i,o,v.selectDates,v,x),[M,i,o,v,x]),I=C.useMemo(()=>V(M,s,c,u,v),[M,s,c,u,v]),L=C.useMemo(()=>M.length>0?v.datesSelected(M.length):void 0,[M.length,v]);return(0,w.jsxs)(`div`,{className:_(`space-y-2`,T.className),children:[!!(T.label||A)&&(0,w.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!T.label&&(0,w.jsx)(y,{htmlFor:E,className:_(`leading-6`,O&&`text-destructive`),children:T.label}),!O&&!!A&&(0,w.jsx)(l,{tag:`span`,type:`secondary`,children:j})]}),(0,w.jsxs)(te,{open:h,onOpenChange:g,children:[(0,w.jsx)(ee,{render:e=>{let t=ve(T.buttonVariant);return(0,w.jsxs)(f,{...e,id:E,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":O,"aria-describedby":k,className:_(`w-full justify-start text-left font-normal`,ye,M.length===0&&`text-muted-foreground`,T.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:T.disabled,children:[(0,w.jsx)(d,{className:`mr-control-gap size-icon`}),(0,w.jsx)(`span`,{className:`truncate`,children:F})]})}}),(0,w.jsxs)(ne,{className:`w-auto p-0`,align:`start`,children:[!!T.header&&(0,w.jsx)(ae,{config:T.header}),(0,w.jsx)(a,{mode:`multiple`,selected:M,onSelect:se,defaultMonth:M[0],numberOfMonths:T.numberOfMonths,showOutsideDays:T.showOutsideDays,disabled:p??T.disabled,locale:x,captionLayout:S,startMonth:re.startMonth,endMonth:re.endMonth,required:u,max:c,...m}),!!I&&(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(b,{}),(0,w.jsx)(`div`,{className:`p-3`,children:(0,w.jsx)(l,{type:`secondary`,children:I})})]}),!!T.footer&&(0,w.jsx)(ie,{config:T.footer,output:P(M),hasSelection:M.length>0,autoSummary:L})]})]}),!!O&&(0,w.jsx)(l,{id:D,size:`xs`,type:`error`,content:oe})]})}function Ee({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:i=`PPP`,placeholder:o,withConfirm:c=!1,min:m,max:h,closeOnSelect:g=!0,withTime:v,presets:x,disabledDates:S,calendarProps:re,open:T,setOpen:E,t:D,dateFnsLocale:O,captionLayout:A,yearBounds:oe,...N}){let{weekStartsOn:P=1}=u(),F=x??Se(D,P),I=C.useId(),ce=`${I}-description`,R=N.error!==void 0&&N.error!==null&&N.error!==``,le=R?ce:void 0,V=N.hint!==void 0&&N.hint!==null&&N.hint!==``,de=typeof N.error==`string`?N.error:``,H=typeof N.hint==`string`?N.hint:``,U=v?.format??`24`,W=v?.step??60,G=v?.showSeconds??!1,K=se(i),pe=v?.showTimeInButton??!K,q=v?.showTimeInSummary??!K,me=e??t,[J,he]=C.useState(me),[Y,X]=C.useState(()=>k(me?.from,G,W)),[_e,be]=C.useState(()=>k(me?.to,G,W)),xe=C.useRef(e),Z=C.useMemo(()=>B(J,m,h,D),[J,m,h,D]),Ce=Z!=null&&Z!==``,we=typeof Z==`string`?Z:``;C.useEffect(()=>{e!==void 0&&he(e)},[e]),C.useEffect(()=>{if(!v?.enabled){xe.current=e;return}let t=xe.current,n=e?.from,r=e?.to;n?X(k(n,G,W)):t?.from&&X(k(void 0,G,W)),r?be(k(r,G,W)):t?.to&&be(k(void 0,G,W)),xe.current=e},[e,v?.enabled,G,W]),C.useEffect(()=>{v?.enabled&&(X(e=>{let t=j(e,W,G);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t}),be(e=>{let t=j(e,W,G);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t}))},[v?.enabled,W,G]);let Te=C.useCallback(e=>{let t=e;return e&&v?.enabled&&(t=z(e,Y,_e)),L(t,r,i,O)},[r,i,O,v,Y,_e]),Ee=C.useCallback(e=>{X(e)},[]),De=C.useCallback(e=>{be(e)},[]),Oe=C.useCallback(e=>{let t=ue(e,m,h);e&&!t.isValid||(he(e),!c&&!v?.enabled&&(n?.(Te(e)),g&&e?.from&&e?.to&&E(!1)))},[c,v,n,Te,m,h,g,E]),ke=C.useCallback(e=>{Oe(e.getValue())},[Oe]),Ae=C.useCallback(()=>{n?.(Te(J)),E(!1)},[J,n,Te,E]),Q=C.useMemo(()=>{if(v?.enabled)return M(Y,G,U,{am:D.am,pm:D.pm})},[v?.enabled,Y,G,U,D]),$=C.useMemo(()=>{if(v?.enabled)return M(_e,G,U,{am:D.am,pm:D.pm})},[v?.enabled,_e,G,U,D]),je=C.useMemo(()=>{if(v?.enabled&&J?.from){let e=s(J.from,i,{locale:O}),t=pe&&Q?`${e} ${Q}`:e;if(J.to){let e=s(J.to,i,{locale:O});return`${t} - ${pe&&$?`${e} ${$}`:e}`}return t}return fe(J,i,o,D.selectDateRange,O)},[v?.enabled,J,i,pe,Q,$,o,D,O]),Me=C.useMemo(()=>{if(!J?.from||!J?.to)return;let e=s(J.from,i,{locale:O}),t=s(J.to,i,{locale:O});return`${q&&Q?`${e} ${Q}`:e} - ${q&&$?`${t} ${$}`:t}`},[J,i,O,q,Q,$]);return(0,w.jsxs)(`div`,{className:_(`space-y-2`,N.className),children:[!!(N.label||V)&&(0,w.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!N.label&&(0,w.jsx)(y,{htmlFor:I,className:_(`leading-6`,R&&`text-destructive`),children:N.label}),!R&&!!V&&(0,w.jsx)(l,{tag:`span`,type:`secondary`,children:H})]}),(0,w.jsxs)(te,{open:T,onOpenChange:E,children:[(0,w.jsx)(ee,{render:e=>{let t=ve(N.buttonVariant);return(0,w.jsxs)(f,{...e,id:I,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":R,"aria-describedby":le,className:_(`w-full justify-start text-left font-normal`,ye,!J&&`text-muted-foreground`,N.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:N.disabled,children:[(0,w.jsx)(d,{className:`mr-control-gap size-icon shrink-0`}),(0,w.jsx)(`span`,{className:`truncate`,children:je})]})}}),(0,w.jsxs)(ne,{className:`w-auto p-0`,align:`start`,children:[!!N.header&&(0,w.jsx)(ae,{config:N.header}),(0,w.jsxs)(`div`,{className:`flex`,children:[F.length>0&&(0,w.jsx)(`div`,{className:`flex min-w-30 flex-col gap-0.5 border-r p-2`,children:F.map(e=>(0,w.jsx)(f,{variant:`secondary`,buttonStyle:`ghost`,onClick:()=>ke(e),className:`justify-start font-normal text-muted-foreground hover:text-foreground`,children:e.label},e.label))}),(0,w.jsxs)(`div`,{className:`flex flex-col`,children:[(0,w.jsx)(a,{mode:`range`,selected:J,onSelect:Oe,defaultMonth:J?.from,numberOfMonths:N.numberOfMonths??2,showOutsideDays:N.showOutsideDays,disabled:S??N.disabled,locale:O,captionLayout:A,startMonth:oe.startMonth,endMonth:oe.endMonth,...re}),!!(J?.from||Z||c||v?.enabled||N.footer)&&(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(b,{}),(0,w.jsxs)(`div`,{className:`flex flex-col gap-3 p-3`,children:[!!J?.from&&!N.footer&&(0,w.jsxs)(`div`,{className:`flex items-center justify-between gap-4 text-sm`,children:[(0,w.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,w.jsxs)(l,{tag:`span`,type:`secondary`,children:[D.from,`:`]}),(0,w.jsxs)(l,{tag:`span`,weight:`medium`,children:[s(J.from,i,{locale:O}),q&&Q?` ${Q}`:``]})]}),!!J.to&&(0,w.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,w.jsxs)(l,{tag:`span`,type:`secondary`,children:[D.to,`:`]}),(0,w.jsxs)(l,{tag:`span`,weight:`medium`,children:[s(J.to,i,{locale:O}),q&&$?` ${$}`:``]})]})]}),!!v?.enabled&&!!J?.from&&(0,w.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 sm:grid-cols-2`,children:[(0,w.jsxs)(`div`,{children:[(0,w.jsx)(y,{size:`small`,children:D.startTime}),(0,w.jsxs)(`div`,{className:`mt-1 flex items-center gap-2`,children:[(0,w.jsx)(p,{className:`h-3 w-3 text-muted-foreground`}),(0,w.jsx)(ge,{value:Y,onChange:Ee,format:U,includeSeconds:G,step:W,disabled:N.disabled,labels:{hours:D.hours,minutes:D.minutes,seconds:G?D.seconds:void 0},periodLabels:{am:D.am,pm:D.pm}})]})]}),!!J.to&&(0,w.jsxs)(`div`,{children:[(0,w.jsx)(y,{size:`small`,children:D.endTime}),(0,w.jsxs)(`div`,{className:`mt-1 flex items-center gap-2`,children:[(0,w.jsx)(p,{className:`h-3 w-3 text-muted-foreground`}),(0,w.jsx)(ge,{value:_e,onChange:De,format:U,includeSeconds:G,step:W,disabled:N.disabled,labels:{hours:D.hours,minutes:D.minutes,seconds:G?D.seconds:void 0},periodLabels:{am:D.am,pm:D.pm}})]})]})]}),(0,w.jsx)(l,{type:`error`,content:we,hidden:!Ce}),!!(c||v?.enabled)&&!N.footer&&(0,w.jsx)(f,{onClick:Ae,disabled:!J?.from||!J?.to||!!Z,className:`w-full`,children:D.confirm}),!!N.footer&&(0,w.jsx)(`div`,{className:`-mx-3 -mb-3`,children:(0,w.jsx)(ie,{config:N.footer,output:Te(J),hasSelection:!!(J?.from&&J?.to),autoSummary:Me})})]})]})]})]})]})]}),!!R&&(0,w.jsx)(l,{id:ce,size:`xs`,type:`error`,content:de})]})}Ce.displayName=`DatePicker`;export{ae as a,F as i,ye as n,ie as o,U as r,Ce as t};

package/dist/showcase/assets/date-pickers-DzSQrvWs.js

@@ -0,0 +1,73 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{t as r}from"./calendar-DcYyOrNY.js";import{t as i}from"./format-DUU7-42g.js";import{n as a,p as o,t as s}from"./section-D-N8Ze16.js";import{t as c}from"./calendar-BXG5CwbY.js";import{r as l,t as u}from"./example-PsbgbESI.js";import{N as d,d as f,m as p,n as m}from"./index-QESvAJrb.js";import{t as h}from"./props-table-CCcohuyT.js";import{t as g}from"./label-D1wLK5nY.js";import{t as _}from"./separator-Ha9YxI2x.js";import{i as v,t as y}from"./popover-Bu7aaPjE.js";import{t as b}from"./popover-BsCx2XMI.js";import{a as ee,i as x,n as S,o as C,r as w,t as T}from"./date-picker-ByYEZGMg.js";import{t as E}from"./month-year-picker-ChVcYm9f.js";var D=t(n(),1),O=f();function k({value:e,defaultValue:t,onChange:n,format:a=`yyyy-MM-dd`,readableFormat:s=`PPP`,placeholder:u,label:f,hint:h,error:T,disabled:E=!1,className:k,withConfirm:A=!1,numberOfMonths:j=2,min:M,max:N,closeOnSelect:P=!0,calendarProps:F,translations:I,strings:L,locale:R,header:z,footer:B,enableYearDropdown:V,yearSelection:H}){let[U,W]=D.useState(!1),[G,K]=D.useState(e??t),q=R??p,J=d(w,L??I),Y=D.useMemo(()=>V||H?.enabled?`dropdown`:`label`,[V,H]),X=D.useMemo(()=>x(H),[H]);D.useEffect(()=>{e!==void 0&&K(e)},[e]);let Z=D.useCallback(e=>{let t=q?{locale:q}:void 0;return{range:e,formatted:{from:e?.from?i(e.from,a,t):void 0,to:e?.to?i(e.to,a,t):void 0},readable:{from:e?.from?i(e.from,s,t):void 0,to:e?.to?i(e.to,s,t):void 0}}},[a,s,q]),Q=D.useCallback(e=>{if(e?.from&&e?.to){let t=Math.ceil((e.to.getTime()-e.from.getTime())/(1e3*60*60*24))+1;if(M&&t<M||N&&t>N)return}K(e),A||(n?.(Z(e)),P&&e?.from&&e?.to&&W(!1))},[A,n,Z,M,N,P]),te=D.useCallback(()=>{n?.(Z(G)),W(!1)},[G,n,Z]),ne=D.useMemo(()=>G?.from?G.to?`${i(G.from,s,{locale:q})} - ${i(G.to,s,{locale:q})}`:i(G.from,s,{locale:q}):u??J.selectDateRange,[G,s,q,u,J.selectDateRange]),$=D.useMemo(()=>{if(!G?.from||!G?.to)return null;let e=Math.ceil((G.to.getTime()-G.from.getTime())/(1e3*60*60*24))+1;return M&&e<M?J.minimumDays(M):N&&e>N?J.maximumDays(N):null},[G,M,N,J]),re=D.useMemo(()=>{if(!(!G?.from||!G?.to))return`${i(G.from,s,{locale:q})} - ${i(G.to,s,{locale:q})}`},[G,s,q]);return(0,O.jsxs)(`div`,{className:m(`date-range-picker--component`,`flex flex-col gap-2`,k),children:[!!f&&(0,O.jsx)(g,{htmlFor:`date-range-picker-trigger`,className:m(T&&`text-destructive`),children:f}),(0,O.jsxs)(y,{open:U,onOpenChange:W,children:[(0,O.jsx)(v,{render:e=>(0,O.jsxs)(l,{...e,id:`date-range-picker-trigger`,variant:`secondary`,buttonStyle:`outline`,"aria-invalid":!!T,className:m(`w-full justify-start text-left font-normal`,S,!G&&`text-muted-foreground`,e.className),disabled:E,children:[(0,O.jsx)(c,{className:`mr-control-gap size-icon shrink-0`}),(0,O.jsx)(`span`,{className:`truncate`,children:ne})]})}),(0,O.jsxs)(b,{className:`w-auto p-0`,align:`start`,children:[!!z&&(0,O.jsx)(ee,{config:z}),(0,O.jsxs)(`div`,{className:`flex flex-col`,children:[(0,O.jsx)(r,{mode:`range`,selected:G,onSelect:Q,defaultMonth:G?.from,numberOfMonths:j,disabled:E,locale:q,captionLayout:Y,startMonth:X.startMonth,endMonth:X.endMonth,...F}),!!(G?.from||$||A||B)&&(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(_,{}),(0,O.jsxs)(`div`,{className:`flex flex-col gap-3 p-3`,children:[!!G?.from&&!B&&(0,O.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,O.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,O.jsxs)(o,{tag:`span`,type:`secondary`,children:[J.from,`:`]}),(0,O.jsx)(o,{tag:`span`,weight:`medium`,children:i(G.from,s,{locale:q})})]}),!!G.to&&(0,O.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,O.jsxs)(o,{tag:`span`,type:`secondary`,children:[J.to,`:`]}),(0,O.jsx)(o,{tag:`span`,weight:`medium`,children:i(G.to,s,{locale:q})})]})]}),!!$&&(0,O.jsx)(o,{type:`error`,children:$}),!!A&&!B&&(0,O.jsx)(l,{onClick:te,disabled:!G?.from||!G?.to||!!$,className:`w-full`,children:J.confirm}),!!B&&(0,O.jsx)(`div`,{className:`-mx-3 -mb-3`,children:(0,O.jsx)(C,{config:B,output:Z(G),hasSelection:!!(G?.from&&G?.to),autoSummary:re})})]})]})]})]})]}),!!T&&(0,O.jsx)(o,{type:`error`,children:T}),!!h&&!T&&(0,O.jsx)(o,{type:`secondary`,children:h})]})}k.displayName=`DateRangePicker`;var A=e({ButtonStyles:()=>I,DateRangePickerLegacy:()=>R,Default:()=>j,ModeMultiple:()=>P,ModeRange:()=>N,ModeSingle:()=>M,MonthYearPickerExample:()=>L,RealisticDateFilter:()=>B,WithTimeInput:()=>z,WithYearDropdown:()=>F});function j(){let[e,t]=(0,D.useState)(void 0);return(0,O.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date)})}function M(){let[e,t]=(0,D.useState)(void 0);return(0,O.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date)})}function N(){let[e,t]=(0,D.useState)();return(0,O.jsx)(T,{mode:`range`,value:e,onChange:e=>t(e.range)})}function P(){let[e,t]=(0,D.useState)([]);return(0,O.jsx)(T,{mode:`multiple`,value:e,onChange:e=>t(e.dates??[])})}function F(){return(0,O.jsx)(T,{mode:`single`,enableYearDropdown:!0})}function I(){return(0,O.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,O.jsx)(T,{mode:`single`}),(0,O.jsx)(T,{mode:`single`,disabled:!0})]})}function L(){let[e,t]=(0,D.useState)();return(0,O.jsx)(E,{value:e,onChange:e=>t({month:e.month,year:e.year})})}function R(){let[e,t]=(0,D.useState)();return(0,O.jsx)(k,{value:e,onChange:e=>t(e.range)})}function z(){let[e,t]=(0,D.useState)(void 0);return(0,O.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date),withTime:{enabled:!0,format:`24`}})}function B(){let[e,t]=(0,D.useState)();return(0,O.jsxs)(`div`,{className:`flex w-full max-w-md items-center gap-2 rounded-md border bg-card p-3`,children:[(0,O.jsx)(`span`,{className:`text-sm font-medium`,children:`Date range`}),(0,O.jsx)(T,{mode:`range`,value:e,onChange:e=>t(e.range)})]})}var V=`import { useState } from 'react';
+import type { DateRange } from 'react-day-picker';
+import { DatePicker, MonthYearPicker, DateRangePicker } from '@/components/base/date-pickers';
+
+export function Default() {
+	const [single, setSingle] = useState<Date | undefined>(undefined);
+	return <DatePicker mode="single" value={single} onChange={(o) => setSingle(o.date)} />;
+}
+
+export function ModeSingle() {
+	const [single, setSingle] = useState<Date | undefined>(undefined);
+	return <DatePicker mode="single" value={single} onChange={(o) => setSingle(o.date)} />;
+}
+
+export function ModeRange() {
+	const [range, setRange] = useState<DateRange | undefined>();
+	return <DatePicker mode="range" value={range} onChange={(o) => setRange(o.range)} />;
+}
+
+export function ModeMultiple() {
+	const [multi, setMulti] = useState<Date[]>([]);
+	return <DatePicker mode="multiple" value={multi} onChange={(o) => setMulti(o.dates ?? [])} />;
+}
+
+export function WithYearDropdown() {
+	return <DatePicker mode="single" enableYearDropdown />;
+}
+
+export function ButtonStyles() {
+	return (
+		<div className="flex flex-wrap gap-2">
+			<DatePicker mode="single" />
+			<DatePicker mode="single" disabled />
+		</div>
+	);
+}
+
+export function MonthYearPickerExample() {
+	const [my, setMy] = useState<{ month: number; year: number } | undefined>();
+	return <MonthYearPicker value={my} onChange={(o) => setMy({ month: o.month, year: o.year })} />;
+}
+
+export function DateRangePickerLegacy() {
+	const [range, setRange] = useState<DateRange | undefined>();
+	return <DateRangePicker value={range} onChange={(o) => setRange(o.range)} />;
+}
+
+export function WithTimeInput() {
+	const [val, setVal] = useState<Date | undefined>(undefined);
+	return (
+		<DatePicker
+			mode="single"
+			value={val}
+			onChange={(o) => setVal(o.date)}
+			withTime={{ enabled: true, format: '24' }}
+		/>
+	);
+}
+
+export function RealisticDateFilter() {
+	const [range, setRange] = useState<DateRange | undefined>();
+	return (
+		<div className="flex w-full max-w-md items-center gap-2 rounded-md border bg-card p-3">
+			<span className="text-sm font-medium">Date range</span>
+			<DatePicker mode="range" value={range} onChange={(o) => setRange(o.range)} />
+		</div>
+	);
+}
+`;function H(e){let t={code:`code`,p:`p`,...e.components};return A||W(`Examples`,!1),I||W(`Examples.ButtonStyles`,!0),R||W(`Examples.DateRangePickerLegacy`,!0),j||W(`Examples.Default`,!0),P||W(`Examples.ModeMultiple`,!0),N||W(`Examples.ModeRange`,!0),M||W(`Examples.ModeSingle`,!0),L||W(`Examples.MonthYearPickerExample`,!0),B||W(`Examples.RealisticDateFilter`,!0),z||W(`Examples.WithTimeInput`,!0),F||W(`Examples.WithYearDropdown`,!0),(0,O.jsxs)(a,{title:`Date pickers`,description:`DatePicker (single / range / multiple) and MonthYearPicker — popover-based, locale-aware, with optional year dropdown and time input.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/date-pickers`,children:[(0,O.jsx)(s,{title:`Overview`,id:`overview`,children:(0,O.jsxs)(t.p,{children:[(0,O.jsx)(t.code,{children:`DatePicker`}),` covers all three calendar modes (`,(0,O.jsx)(t.code,{children:`single`}),`, `,(0,O.jsx)(t.code,{children:`range`}),`, `,(0,O.jsx)(t.code,{children:`multiple`}),`)
+behind one component — pass `,(0,O.jsx)(t.code,{children:`mode`}),` and a matching `,(0,O.jsx)(t.code,{children:`value`}),` / `,(0,O.jsx)(t.code,{children:`onChange`}),` shape.
+`,(0,O.jsx)(t.code,{children:`MonthYearPicker`}),` is the compact month + year combo for filters and reports.
+Both honour `,(0,O.jsx)(t.code,{children:`useDatesConfig()`}),` for locale and date format.`]})}),(0,O.jsx)(s,{title:`Default`,id:`default`,children:(0,O.jsx)(u,{name:`Default`,source:V,children:(0,O.jsx)(j,{})})}),(0,O.jsxs)(s,{title:`Modes`,id:`modes`,children:[(0,O.jsx)(u,{name:`ModeSingle`,source:V,children:(0,O.jsx)(M,{})}),(0,O.jsx)(u,{name:`ModeRange`,source:V,children:(0,O.jsx)(N,{})}),(0,O.jsx)(u,{name:`ModeMultiple`,source:V,children:(0,O.jsx)(P,{})})]}),(0,O.jsxs)(s,{title:`Composition`,id:`composition`,children:[(0,O.jsx)(u,{name:`WithYearDropdown`,source:V,children:(0,O.jsx)(F,{})}),(0,O.jsx)(u,{name:`ButtonStyles`,source:V,children:(0,O.jsx)(I,{})})]}),(0,O.jsx)(s,{title:`With time`,id:`with-time`,children:(0,O.jsx)(u,{name:`WithTimeInput`,source:V,children:(0,O.jsx)(z,{})})}),(0,O.jsxs)(s,{title:`DateRangePicker (legacy)`,id:`date-range-picker`,children:[(0,O.jsxs)(t.p,{children:[`The `,(0,O.jsx)(t.code,{children:`DateRangePicker`}),` component predates the unified `,(0,O.jsx)(t.code,{children:`DatePicker mode="range"`}),`
+API and is kept exported for back-compat. New code should prefer `,(0,O.jsx)(t.code,{children:`DatePicker`}),`.`]}),(0,O.jsx)(u,{name:`DateRangePickerLegacy`,source:V,children:(0,O.jsx)(R,{})})]}),(0,O.jsx)(s,{title:`MonthYearPicker`,id:`month-year`,children:(0,O.jsx)(u,{name:`MonthYearPickerExample`,source:V,children:(0,O.jsx)(L,{})})}),(0,O.jsx)(s,{title:`Realistic usage`,id:`realistic`,children:(0,O.jsx)(u,{name:`RealisticDateFilter`,source:V,children:(0,O.jsx)(B,{})})}),(0,O.jsxs)(s,{title:`API`,id:`api`,children:[(0,O.jsx)(h,{component:`DatePicker`}),(0,O.jsx)(h,{component:`MonthYearPicker`})]})]})}function U(e={}){let{wrapper:t}=e.components||{};return t?(0,O.jsx)(t,{...e,children:(0,O.jsx)(H,{...e})}):H(e)}function W(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{U as default};

package/dist/showcase/assets/dense-info-BhFkOQbt.js

@@ -0,0 +1,106 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{f as t,n,o as r,p as i,t as a}from"./section-D-N8Ze16.js";import{t as o}from"./calendar-BXG5CwbY.js";import{t as s}from"./chart-column-Dbekq8cy.js";import{t as c}from"./example-PsbgbESI.js";import{t as l}from"./folder-open-CZ5Bq4lK.js";import{d as u,n as d}from"./index-QESvAJrb.js";import{t as f}from"./props-table-CCcohuyT.js";import{t as p}from"./smart-card-C6-idFYI.js";import{t as m}from"./separator-Ha9YxI2x.js";import{c as h,l as g,n as _,o as v,r as y,t as b,u as x}from"./item-BMSdEK3V.js";import{t as S}from"./inline-stat-CO01t7SJ.js";var C=u();function w({value:e,max:t=5,label:n}){return(0,C.jsxs)(`div`,{className:d(`helpers--component`,`flex items-center gap-1`),children:[Array.from({length:t},(t,n)=>(0,C.jsx)(`div`,{className:d(`h-1.5 w-3 rounded-full`,n<e?`bg-foreground/60`:`bg-muted`)},n)),!!n&&(0,C.jsx)(i,{size:`xs`,type:`secondary`,className:`ml-1`,children:n})]})}function T({label:e,value:t,badge:n,badgeVariant:a}){return(0,C.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,C.jsx)(i,{size:`xs`,className:`shrink-0 text-muted-foreground`,children:e}),!!n&&(0,C.jsx)(r,{variant:a??`secondary`,children:n}),!!t&&!n&&(0,C.jsx)(i,{weight:`semibold`,className:`text-right tabular-nums`,children:t})]})}function E({title:e,description:t,statusBadges:n,rows:a,secondaryRows:o,scale:s,footerBadges:c,footerText:l,actions:u,className:d}){return(0,C.jsx)(p,{title:e,description:t,actions:u,className:d,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:n.map(e=>(0,C.jsx)(r,{variant:e.variant,children:e.label},e.label))}),(0,C.jsx)(`div`,{className:`space-y-2`,children:a.map(e=>(0,C.jsx)(T,{...e},e.label))}),!!s&&(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(i,{size:`xs`,className:`text-muted-foreground`,children:s.label}),(0,C.jsx)(w,{value:s.value,max:s.max,label:`${String(s.value)}/${String(s.max??5)}`})]}),!!o&&o.length>0&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(m,{}),(0,C.jsx)(`div`,{className:`space-y-2`,children:o.map(e=>(0,C.jsx)(T,{...e},e.label))})]}),(!!c||!!l)&&(0,C.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:[!!c&&c.map(e=>(0,C.jsx)(r,{variant:e.variant,className:`text-xxs`,children:e.label},e.label)),!!l&&(0,C.jsx)(i,{size:`xs`,className:`text-muted-foreground`,children:l})]})]})})}E.displayName=`DenseInfoDashboard`;function D({title:e,description:n,stats:a,items:o,totalLabel:s,totalValue:c,footerBadges:l,footerText:u,actions:f,className:g}){return(0,C.jsx)(p,{title:e,description:n,actions:f,className:g,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsx)(`div`,{className:`grid grid-cols-2 gap-2 sm:grid-cols-3`,children:a.map(e=>(0,C.jsxs)(`div`,{className:`rounded-lg border border-border/50 bg-muted/30 px-3 py-2.5 text-center`,children:[(0,C.jsx)(t,{tag:`h4`,className:`border-none pb-0 text-base font-semibold tabular-nums`,children:e.value}),(0,C.jsx)(i,{size:`xxs`,type:`secondary`,weight:`medium`,className:`mt-0.5`,children:e.label}),!!e.trendBadge&&(0,C.jsx)(`div`,{className:`mt-1 flex justify-center`,children:(0,C.jsx)(r,{variant:e.trendVariant??`secondary`,children:e.trendBadge})})]},e.label))}),(0,C.jsx)(m,{}),(0,C.jsx)(v,{children:o.map(e=>(0,C.jsxs)(b,{size:`small`,children:[(0,C.jsx)(h,{children:(0,C.jsx)(`span`,{className:d(`h-2 w-2 shrink-0 rounded-full`,e.dotColor)})}),(0,C.jsx)(y,{children:(0,C.jsxs)(x,{bold:!1,className:`gap-2`,children:[e.label,!!e.badge&&(0,C.jsx)(r,{variant:e.badgeVariant??`secondary`,children:e.badge})]})}),(0,C.jsx)(_,{children:(0,C.jsx)(i,{size:`xs`,weight:`semibold`,className:`tabular-nums`,children:e.value})})]},e.label))}),!!c&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(m,{}),(0,C.jsx)(S,{label:s??`Total`,value:c,mono:!0,labelClassName:`text-sm font-bold`,valueClassName:`text-sm font-bold`})]}),(!!l||!!u)&&(0,C.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:[!!l&&l.map(e=>(0,C.jsx)(r,{variant:e.variant,className:`text-xxs`,children:e.label},e.label)),!!u&&(0,C.jsx)(i,{size:`xs`,className:`text-muted-foreground`,children:u})]})]})})}D.displayName=`DenseInfoClassification`;function O({title:e,description:t,headerBadges:n,lineItems:a,totalLabel:o=`Total`,totalAmount:s,footerBadges:c,footerText:l,actions:u,className:d}){return(0,C.jsx)(p,{title:e,description:t,actions:u,className:d,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:n.map(e=>(0,C.jsx)(r,{variant:e.variant,children:e.label},e.label))}),(0,C.jsx)(v,{children:a.map((e,t)=>(0,C.jsxs)(`div`,{children:[t>0&&(0,C.jsx)(g,{className:`my-0`}),(0,C.jsxs)(b,{size:`small`,children:[(0,C.jsx)(y,{children:(0,C.jsxs)(x,{className:`gap-2`,children:[e.label,!!e.badge&&(0,C.jsx)(r,{variant:e.badgeVariant??`secondary`,children:e.badge})]})}),(0,C.jsx)(_,{children:(0,C.jsx)(i,{size:`xs`,weight:`semibold`,className:`tabular-nums`,children:e.amount})})]})]},e.label))}),!!s&&(0,C.jsx)(S,{className:`rounded-lg bg-muted/50 px-3 py-2.5`,label:o,value:s,mono:!0,labelClassName:`text-sm font-semibold`,valueClassName:`text-sm font-semibold`}),(!!c||!!l)&&(0,C.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:[!!c&&c.map(e=>(0,C.jsx)(r,{variant:e.variant,className:`text-xxs`,children:e.label},e.label)),!!l&&(0,C.jsx)(i,{size:`xs`,className:`text-muted-foreground`,children:l})]})]})})}O.displayName=`DenseInfoFinancial`;function k({title:e,description:n,statusLabel:a,statusVariant:c,metaPairs:u,date:d,priority:f,completedTasks:h,totalTasks:g,actions:_,className:v}){let y=g>0?Math.round(h/g*100):0,b=2*Math.PI*7,x=b-y/100*b;return(0,C.jsx)(p,{padding:`default`,actions:_,className:v,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(l,{className:`h-4 w-4 text-muted-foreground`}),(0,C.jsx)(r,{variant:c,dot:!0,children:a})]}),(0,C.jsx)(t,{tag:`h5`,className:`font-bold border-none pb-0`,children:e}),!!n&&(0,C.jsx)(i,{type:`secondary`,className:`line-clamp-2`,children:n}),!!u&&u.length>0&&(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:u.map((e,t)=>(0,C.jsxs)(`span`,{className:`flex items-center gap-1`,children:[t>0&&(0,C.jsx)(i,{tag:`span`,type:`discrete`,className:`mx-0.5`,children:`•`}),!!e.icon&&(0,C.jsx)(`span`,{className:`text-muted-foreground`,children:e.icon}),(0,C.jsx)(i,{size:`xs`,type:`secondary`,children:e.label})]},e.label))}),(!!d||!!f)&&(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[!!d&&(0,C.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,C.jsx)(o,{className:`h-3 w-3 text-muted-foreground`}),(0,C.jsx)(i,{size:`xs`,type:`secondary`,children:d})]}),!!f&&(0,C.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,C.jsx)(s,{className:`h-3 w-3 text-muted-foreground`}),(0,C.jsx)(i,{size:`xs`,type:`secondary`,children:f})]})]}),(0,C.jsx)(m,{}),(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,C.jsxs)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,className:`shrink-0`,children:[(0,C.jsx)(`circle`,{cx:`10`,cy:`10`,r:`7`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,className:`text-muted/50`}),(0,C.jsx)(`circle`,{cx:`10`,cy:`10`,r:`7`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeDasharray:b,strokeDashoffset:x,strokeLinecap:`round`,className:`text-primary`,transform:`rotate(-90 10 10)`})]}),(0,C.jsxs)(i,{size:`xs`,weight:`medium`,children:[h,`/`,g,` Tasks`]})]}),(0,C.jsx)(`div`,{className:`h-6 w-6 rounded-full bg-muted`})]})]})})}k.displayName=`DenseInfoProjectCard`;function A({title:e,description:n,statusBadges:i,score:a,scoreLevel:o,scoreFilled:s,scoreTotal:c=10,rows:l,footerBadges:u,actions:f,className:h}){let g=o===`good`?`bg-success`:o===`medium`?`bg-warning`:`bg-destructive`;return(0,C.jsx)(p,{title:e,description:n,actions:f,className:h,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:i.map(e=>(0,C.jsx)(r,{variant:e.variant,children:e.label},e.label))}),(0,C.jsx)(`div`,{className:`flex items-center justify-center py-2`,children:(0,C.jsx)(t,{tag:`h2`,className:`text-4xl font-bold tabular-nums border-none pb-0`,children:String(a)})}),(0,C.jsx)(`div`,{className:`flex items-center justify-center gap-1`,children:Array.from({length:c},(e,t)=>(0,C.jsx)(`div`,{className:d(`h-5 w-2 rounded-sm`,t<s?g:`bg-muted`)},t))}),(0,C.jsx)(m,{}),(0,C.jsx)(`div`,{className:`space-y-2`,children:l.map(e=>(0,C.jsx)(S,{label:e.label,value:e.value,mono:!0,labelClassName:`text-xs text-muted-foreground`,valueClassName:`text-sm font-semibold text-right`},e.label))}),!!u&&u.length>0&&(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:u.map(e=>(0,C.jsx)(r,{variant:e.variant,className:`text-xxs`,children:e.label},e.label))})]})})}A.displayName=`DenseInfoScoreCard`;var j=e({Classification:()=>P,Dashboard:()=>M,Financial:()=>F,ProjectCards:()=>I,ScoreCard:()=>N});function M(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsx)(E,{title:`Order Summary`,statusBadges:[{label:`Confirmed`,variant:`success`},{label:`Priority: High`,variant:`warning`}],rows:[{label:`Customer`,value:`Sarah Smitha`},{label:`Order Total`,value:`2,450 USD`},{label:`Items`,value:`3 vouchers`}],scale:{label:`Complexity`,value:3,max:5},footerText:`Order #ORD-2026-0412`})})}function N(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsx)(A,{title:`Business Score`,statusBadges:[{label:`Excellent`,variant:`success`}],score:714,scoreLevel:`good`,scoreFilled:7,scoreTotal:10,rows:[{label:`Payment History`,value:`Excellent`},{label:`Credit Utilization`,value:`32%`},{label:`Account Age`,value:`8 years`}],footerBadges:[{label:`Next review: Jun 2026`,variant:`info`}]})})}function P(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsx)(D,{title:`Product Categories`,description:`Distribution by type`,stats:[{label:`Total`,value:`354`,trendBadge:`+12%`,trendVariant:`success`},{label:`Active`,value:`298`},{label:`Avg. Price`,value:`142 USD`}],items:[{label:`Wellness & Spa`,value:`124`,dotColor:`bg-success`,badge:`Top`,badgeVariant:`success`},{label:`Food & Drink`,value:`89`,dotColor:`bg-warning`},{label:`Adventure`,value:`67`,dotColor:`bg-info`}],totalLabel:`All Categories`,totalValue:`354`})})}function F(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsx)(O,{title:`Q1 Financial Summary`,headerBadges:[{label:`On Track`,variant:`success`},{label:`Q1 2026`,variant:`secondary`}],lineItems:[{label:`Product Sales`,amount:`89,400 USD`,badge:`Primary`,badgeVariant:`success`},{label:`Gift Card Revenue`,amount:`22,100 USD`},{label:`Service Fees`,amount:`8,500 USD`}],totalLabel:`Total Revenue`,totalAmount:`124,500 USD`})})}function I(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-3`,children:[(0,C.jsx)(k,{title:`Website Redesign`,description:`Complete overhaul of the marketing site.`,statusLabel:`In Progress`,statusVariant:`warning`,date:`Mar 15 — Jun 15`,priority:`High`,completedTasks:12,totalTasks:20}),(0,C.jsx)(k,{title:`Mobile App v2.0`,description:`Native iOS and Android app.`,statusLabel:`On Track`,statusVariant:`success`,date:`Jan 10 — Jul 10`,priority:`Critical`,completedTasks:34,totalTasks:48}),(0,C.jsx)(k,{title:`API Documentation`,description:`OpenAPI spec and dev portal.`,statusLabel:`Planning`,statusVariant:`info`,date:`Apr 1 — Apr 14`,priority:`Medium`,completedTasks:0,totalTasks:8})]})})}var L=`import {
+	DenseInfoDashboard,
+	DenseInfoClassification,
+	DenseInfoFinancial,
+	DenseInfoProjectCard,
+	DenseInfoScoreCard,
+} from '@/components/composed/data-display/dense-info-card';
+
+export function Dashboard() {
+	return (
+		<>
+			<DenseInfoDashboard
+								title="Order Summary"
+								statusBadges={[
+									{ label: 'Confirmed', variant: 'success' },
+									{ label: 'Priority: High', variant: 'warning' },
+								]}
+								rows={[
+									{ label: 'Customer', value: 'Sarah Smitha' },
+									{ label: 'Order Total', value: '2,450 USD' },
+									{ label: 'Items', value: '3 vouchers' },
+								]}
+								scale={{ label: 'Complexity', value: 3, max: 5 }}
+								footerText="Order #ORD-2026-0412"
+							/>
+		</>
+	);
+}
+
+export function ScoreCard() {
+	return (
+		<>
+			<DenseInfoScoreCard
+								title="Business Score"
+								statusBadges={[{ label: 'Excellent', variant: 'success' }]}
+								score={714}
+								scoreLevel="good"
+								scoreFilled={7}
+								scoreTotal={10}
+								rows={[
+									{ label: 'Payment History', value: 'Excellent' },
+									{ label: 'Credit Utilization', value: '32%' },
+									{ label: 'Account Age', value: '8 years' },
+								]}
+								footerBadges={[{ label: 'Next review: Jun 2026', variant: 'info' }]}
+							/>
+		</>
+	);
+}
+
+export function Classification() {
+	return (
+		<>
+			<DenseInfoClassification
+								title="Product Categories"
+								description="Distribution by type"
+								stats={[
+									{ label: 'Total', value: '354', trendBadge: '+12%', trendVariant: 'success' },
+									{ label: 'Active', value: '298' },
+									{ label: 'Avg. Price', value: '142 USD' },
+								]}
+								items={[
+									{ label: 'Wellness & Spa', value: '124', dotColor: 'bg-success', badge: 'Top', badgeVariant: 'success' },
+									{ label: 'Food & Drink', value: '89', dotColor: 'bg-warning' },
+									{ label: 'Adventure', value: '67', dotColor: 'bg-info' },
+								]}
+								totalLabel="All Categories"
+								totalValue="354"
+							/>
+		</>
+	);
+}
+
+export function Financial() {
+	return (
+		<>
+			<DenseInfoFinancial
+								title="Q1 Financial Summary"
+								headerBadges={[
+									{ label: 'On Track', variant: 'success' },
+									{ label: 'Q1 2026', variant: 'secondary' },
+								]}
+								lineItems={[
+									{ label: 'Product Sales', amount: '89,400 USD', badge: 'Primary', badgeVariant: 'success' },
+									{ label: 'Gift Card Revenue', amount: '22,100 USD' },
+									{ label: 'Service Fees', amount: '8,500 USD' },
+								]}
+								totalLabel="Total Revenue"
+								totalAmount="124,500 USD"
+							/>
+		</>
+	);
+}
+
+export function ProjectCards() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-3">
+								<DenseInfoProjectCard title="Website Redesign" description="Complete overhaul of the marketing site." statusLabel="In Progress" statusVariant="warning" date="Mar 15 — Jun 15" priority="High" completedTasks={12} totalTasks={20} />
+								<DenseInfoProjectCard title="Mobile App v2.0" description="Native iOS and Android app." statusLabel="On Track" statusVariant="success" date="Jan 10 — Jul 10" priority="Critical" completedTasks={34} totalTasks={48} />
+								<DenseInfoProjectCard title="API Documentation" description="OpenAPI spec and dev portal." statusLabel="Planning" statusVariant="info" date="Apr 1 — Apr 14" priority="Medium" completedTasks={0} totalTasks={8} />
+							</div>
+		</>
+	);
+}
+`;function R(e){let t={h4:`h4`,...e.components};return j||B(`Examples`,!1),P||B(`Examples.Classification`,!0),M||B(`Examples.Dashboard`,!0),F||B(`Examples.Financial`,!0),I||B(`Examples.ProjectCards`,!0),N||B(`Examples.ScoreCard`,!0),(0,C.jsxs)(n,{title:`Composed · Dense info cards`,description:`Five layout variants — dashboard, classification, financial, project, score.`,layer:`composed`,status:`ready`,children:[(0,C.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,C.jsx)(c,{name:`Dashboard`,source:L,children:(0,C.jsx)(M,{})}),(0,C.jsx)(c,{name:`ScoreCard`,source:L,children:(0,C.jsx)(N,{})}),(0,C.jsx)(c,{name:`Classification`,source:L,children:(0,C.jsx)(P,{})}),(0,C.jsx)(c,{name:`Financial`,source:L,children:(0,C.jsx)(F,{})}),(0,C.jsx)(c,{name:`ProjectCards`,source:L,children:(0,C.jsx)(I,{})})]}),(0,C.jsxs)(a,{title:`API`,id:`api`,children:[(0,C.jsx)(t.h4,{children:`DenseInfoDashboard`}),(0,C.jsx)(f,{component:`DenseInfoDashboard`}),(0,C.jsx)(t.h4,{children:`DenseInfoClassification`}),(0,C.jsx)(f,{component:`DenseInfoClassification`}),(0,C.jsx)(t.h4,{children:`DenseInfoFinancial`}),(0,C.jsx)(f,{component:`DenseInfoFinancial`}),(0,C.jsx)(t.h4,{children:`DenseInfoProjectCard`}),(0,C.jsx)(f,{component:`DenseInfoProjectCard`}),(0,C.jsx)(t.h4,{children:`DenseInfoScoreCard`}),(0,C.jsx)(f,{component:`DenseInfoScoreCard`})]})]})}function z(e={}){let{wrapper:t}=e.components||{};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(R,{...e})}):R(e)}function B(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{z as default};

package/dist/showcase/assets/design-system-consistency-D6iCJLcr.js

@@ -0,0 +1,264 @@
+import{n as e,t}from"./section-D-N8Ze16.js";import{d as n}from"./index-QESvAJrb.js";var r=n();function i(n){let i={code:`code`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,ul:`ul`,...n.components};return(0,r.jsxs)(e,{title:`Design system consistency guide`,description:`The operating manual for keeping the package cohesive: goals, ownership, token rules, drift detection, and browser-quality review.`,layer:`docs`,status:`ready`,sourcePath:`src/components + src/css + src/preview`,children:[(0,r.jsxs)(t,{title:`Purpose`,id:`purpose`,children:[(0,r.jsx)(i.p,{children:`This package is a publishable React admin component library. The showcase is not
+marketing chrome. It is the working inspection surface for the package: every
+public component should have a route, realistic examples, exact import
+documentation, generated props, and a visual state that proves the component can
+ship.`}),(0,r.jsx)(i.p,{children:`The goal of a polish pass is not to make one screenshot acceptable. The goal is
+to make the underlying component system harder to drift. If an example looks
+wrong, first assume the package component, token, API, or docs source is wrong.
+Only patch the preview when the preview is genuinely misusing the public API.`})]}),(0,r.jsxs)(t,{title:`Product Goals`,id:`product-goals`,children:[(0,r.jsx)(i.p,{children:`The package has five non-negotiable goals:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsx)(i.li,{children:`Centralize shadcn primitives behind package-owned wrappers so consumers import
+stable public subpaths.`}),`
+`,(0,r.jsx)(i.li,{children:`Stay framework-neutral: no routing, i18n SDKs, query libraries, backend
+clients, or app ambient types inside library components.`}),`
+`,(0,r.jsx)(i.li,{children:`Make complex surfaces composable through callbacks, slots, render props,
+accessors, exported partials, and headless hooks.`}),`
+`,(0,r.jsxs)(i.li,{children:[`Let consumers tune the whole visual system through CSS variables and the
+single `,(0,r.jsx)(i.code,{children:`UIProvider`}),`, not repeated one-off class strings.`]}),`
+`,(0,r.jsx)(i.li,{children:`Keep the admin voice calm, dense, readable, and professional: rich enough to
+use all day, never decorative for its own sake.`}),`
+`]}),(0,r.jsx)(i.p,{children:`Success means a downstream app can upgrade the package and receive better
+spacing, state handling, docs, and behavior without rewriting its own UI glue.`})]}),(0,r.jsxs)(t,{title:`Layer Ownership`,id:`layer-ownership`,children:[(0,r.jsx)(i.p,{children:`Every visual or API change starts by identifying the owner:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.code,{children:`src/components/ui`}),`: shadcn primitives. Do not edit for package styling.`]}),`
+`,(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.code,{children:`src/components/typography`}),`: text primitives. They are peer to `,(0,r.jsx)(i.code,{children:`base`}),`, not
+children of it.`]}),`
+`,(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.code,{children:`src/components/base`}),`: package wrappers and focused primitives, such as
+buttons, cards, item rows, forms, combobox, table, badge, metadata, and
+display utilities.`]}),`
+`,(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.code,{children:`src/components/layout`}),`: app shell primitives built from base and typography.
+They do not import composed or feature components.`]}),`
+`,(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.code,{children:`src/components/composed`}),`: reusable domain surfaces built from base:
+commerce rows, AI cards, admin rows, timelines, dense information blocks.`]}),`
+`,(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.code,{children:`src/components/features`}),`: app-level workflows. They can compose base and
+composed surfaces, but behavior is callback-driven and strings are
+overrideable.`]}),`
+`,(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.code,{children:`src/preview`}),`: documentation and examples only. Examples demonstrate real
+components; they do not hide package defects behind private JSX.`]}),`
+`]}),(0,r.jsx)(i.p,{children:`The preferred fix order is: component API, component token, component
+composition, preview usage. Reversing that order creates visual demos that look
+fine while the package remains inconsistent.`})]}),(0,r.jsxs)(t,{title:`Design Voice`,id:`design-voice`,children:[(0,r.jsx)(i.p,{children:`The library is an admin/SaaS system. It should feel quiet, utilitarian, and
+precise:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsxs)(i.li,{children:[`Primary body, row, and card text defaults to `,(0,r.jsx)(i.code,{children:`sm`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Secondary labels, descriptions, metadata, and helper text use `,(0,r.jsx)(i.code,{children:`xs`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Eyebrows, counts, and dense metadata can use `,(0,r.jsx)(i.code,{children:`xxs`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[(0,r.jsx)(i.code,{children:`text-base`}),` is reserved for true page or hero values, not row/card titles.`]}),`
+`,(0,r.jsx)(i.li,{children:`Titles inside cards and rows are normally semibold, not oversized.`}),`
+`,(0,r.jsx)(i.li,{children:`Labels should be medium or semibold when they name a value, never accidental
+plain body text.`}),`
+`,(0,r.jsx)(i.li,{children:`Rows need enough internal padding to be readable. Dense does not mean
+vertically starved.`}),`
+`,(0,r.jsxs)(i.li,{children:[`Row primitives keep their own balanced padding. Do not strip `,(0,r.jsx)(i.code,{children:`Item`}),` rows with
+local `,(0,r.jsx)(i.code,{children:`px-0`}),` / `,(0,r.jsx)(i.code,{children:`py-*`}),` classes to make a card align; adjust the parent section
+or card spacing.`]}),`
+`,(0,r.jsx)(i.li,{children:`Similar surfaces should share heights, x padding, y padding, icon size,
+radius, border treatment, and focus state unless their API deliberately
+differentiates them.`}),`
+`,(0,r.jsx)(i.li,{children:`Active states should read as selected state, not as a raised card unless the
+component is actually a card.`}),`
+`]}),(0,r.jsx)(i.p,{children:`When reviewing visuals, compare siblings side by side. A combobox option, menu
+item, select trigger, table row, metadata row, and item row do not need identical
+markup, but their density should feel like one system.`})]}),(0,r.jsxs)(t,{title:`Token System`,id:`token-system`,children:[(0,r.jsx)(i.p,{children:`The design system is controlled from CSS variables, then consumed through
+Tailwind aliases and base components.`}),(0,r.jsx)(i.p,{children:`Core token families:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsxs)(i.li,{children:[`Theme palette and shadcn-compatible color tokens live in
+`,(0,r.jsx)(i.code,{children:`src/css/themes/shadcn.default.css`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Structural typography scale, spacing, density, control sizes, row rhythm,
+surface padding, media sizing, shell dimensions, state extensions, and the
+Tailwind utility aliases generated from them live in `,(0,r.jsx)(i.code,{children:`src/css/tokens/*`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Tailwind utility aliases are mapped through `,(0,r.jsx)(i.code,{children:`@theme inline`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Runtime defaults that are not pure CSS live in `,(0,r.jsx)(i.code,{children:`UIProvider`}),`, such as default
+badge size, button defaults, card padding, locale-ish display defaults, and
+table density.`]}),`
+`]}),(0,r.jsx)(i.p,{children:`Use a variable when a value needs to stay consistent across a family or be
+theme-tunable by consumers. Do not add variables to avoid making a design
+decision. A new variable should have a comment, a clear owner, and at least one
+real component usage.`}),(0,r.jsx)(i.p,{children:`Controls should converge around shared structural tokens:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsxs)(i.li,{children:[`Buttons, inputs, select triggers, combobox triggers, popover triggers, menu
+triggers, and tag inputs should share `,(0,r.jsx)(i.code,{children:`--control-height*`}),` and
+`,(0,r.jsx)(i.code,{children:`--control-x*`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Rich option rows, command rows, global-search rows, filter rows, table rows,
+and combobox options should use the shared `,(0,r.jsx)(i.code,{children:`--row-*`}),` rhythm.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Cards, empty states, form sections, and feature panels should use
+`,(0,r.jsx)(i.code,{children:`--surface-*`}),` plus the `,(0,r.jsx)(i.code,{children:`--space-*`}),` scale for internal regions.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Icons and avatars should use `,(0,r.jsx)(i.code,{children:`--icon*`}),` and `,(0,r.jsx)(i.code,{children:`--avatar*`}),`; raw fixed sizes are
+reserved for illustrations, maps, charts, and intentionally fixed artwork.`]}),`
+`,(0,r.jsx)(i.li,{children:`Do not reintroduce component-family aliases for action controls, cards,
+tables, headers, app shells, or component-specific text roles.`}),`
+`,(0,r.jsx)(i.li,{children:`Compact modes are explicit. The normal mode should be readable without
+looking inflated.`}),`
+`]})]}),(0,r.jsxs)(t,{title:`Component API Rules`,id:`component-api-rules`,children:[(0,r.jsx)(i.p,{children:`Public APIs must make good usage easy and bad usage obvious:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsxs)(i.li,{children:[`Prefer defaults from the component and `,(0,r.jsx)(i.code,{children:`UIProvider`}),`; avoid exposing many size
+choices just because the primitive can.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Keep size APIs narrow. For most action controls, default and small are enough.
+Repeated `,(0,r.jsx)(i.code,{children:`xs`}),`, `,(0,r.jsx)(i.code,{children:`sm`}),`, `,(0,r.jsx)(i.code,{children:`md`}),`, `,(0,r.jsx)(i.code,{children:`lg`}),`, `,(0,r.jsx)(i.code,{children:`compact`}),`, and `,(0,r.jsx)(i.code,{children:`dense`}),` variants are a drift
+smell unless they map to a real component contract.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Components with user-facing strings export `,(0,r.jsx)(i.code,{children:`*Strings`}),`,
+`,(0,r.jsx)(i.code,{children:`default*Strings`}),`, and accept `,(0,r.jsx)(i.code,{children:`strings`}),` merged by `,(0,r.jsx)(i.code,{children:`useStrings`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Async features expose `,(0,r.jsx)(i.code,{children:`fetcher`}),`, `,(0,r.jsx)(i.code,{children:`onError`}),`, and lifecycle callbacks rather
+than importing a query library.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Workflows expose `,(0,r.jsx)(i.code,{children:`onSubmit`}),`, `,(0,r.jsx)(i.code,{children:`onSelect`}),`, `,(0,r.jsx)(i.code,{children:`onAfterMutate`}),`, `,(0,r.jsx)(i.code,{children:`onOpenChange`}),`, and
+similar callback seams.`]}),`
+`,(0,r.jsx)(i.li,{children:`Consumer-owned data shapes are handled through accessors, render props, or
+generics.`}),`
+`,(0,r.jsx)(i.li,{children:`Complex features expose slots and partials when consumers need to replace a
+region without forking.`}),`
+`,(0,r.jsxs)(i.li,{children:[`Public roots include stable BEM hooks like `,(0,r.jsx)(i.code,{children:`combobox--component`}),`, plus
+meaningful subregion hooks when tests or consumers need them.`]}),`
+`]}),(0,r.jsx)(i.p,{children:`If a preview needs a 100-line local mock to demonstrate a component, the
+component probably needs a better public seam.`})]}),(0,r.jsxs)(t,{title:`Drift Detection`,id:`drift-detection`,children:[(0,r.jsx)(i.p,{children:`Run static checks before and after visual work. They catch classes of drift that
+screenshots miss.`}),(0,r.jsx)(i.p,{children:`Required broad checks:`}),(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:`language-bash`,children:`npm run lint:architecture
+npm run quality:smells
+npm run test:exports
+npm run docs:check-feature-parity
+npm run docs:check-props
+npm run docs:sync-skill -- --check
+npm run docs:check-scripts
+npm run typecheck
+npm run lint
+`})}),(0,r.jsx)(i.p,{children:`Release-grade checks:`}),(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:`language-bash`,children:`npm run verify
+npm run build:lib
+npm run test:dist-assets
+npm run build:showcase
+npm run test:package-smoke:check
+npm run test:browser:features
+npm run test:a11y:features
+npm run test:visual:features
+git diff --check
+`})}),(0,r.jsx)(i.p,{children:`Targeted code searches for touched areas:`}),(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:`language-bash`,children:`rg "text-\\\\[|text-foreground/|focus:|bg-primary/" src/components src/preview
+rg "text-(orange|red|green|blue|yellow|amber)-|bg-(orange|red|green|blue|yellow|amber)-" src/components src/preview
+rg "@/components/ui/" src/components src/preview
+rg "console\\\\.(warn|error|log)" src/components src/services src/lib
+rg "react-router|next/|@inertiajs|@tanstack/react-query|ziggy-js|navigator.language" src/components
+`})}),(0,r.jsx)(i.p,{children:`Treat script output as triage, not proof. A route can pass every static check
+and still look wrong because the rhythm, hierarchy, or state treatment drifted.`})]}),(0,r.jsxs)(t,{title:`Code Review Loop`,id:`code-review-loop`,children:[(0,r.jsx)(i.p,{children:`Use this loop for every component pass:`}),(0,r.jsxs)(i.ol,{children:[`
+`,(0,r.jsx)(i.li,{children:`Read the owning component, types, strings, hooks, partials, index export,
+tests, MDX page, examples file, and neighboring components in the same
+family.`}),`
+`,(0,r.jsx)(i.li,{children:`Identify whether the problem belongs to tokens, base wrappers, composed
+surfaces, features, layout, or preview docs.`}),`
+`,(0,r.jsx)(i.li,{children:`Patch the smallest responsible layer.`}),`
+`,(0,r.jsx)(i.li,{children:`Add or update tests when behavior, controlled state, callbacks, async
+flows, errors, slots, or provider resolution are involved.`}),`
+`,(0,r.jsx)(i.li,{children:`Regenerate docs only when API surfaces changed.`}),`
+`,(0,r.jsx)(i.li,{children:`Recheck the exact route and the sibling routes that share the same
+component family.`}),`
+`,(0,r.jsx)(i.li,{children:`Run focused checks first, then broad checks.`}),`
+`]}),(0,r.jsx)(i.p,{children:`Do not declare a component family clean after checking one example at the top of
+one route. Scroll top, middle, and bottom. Open interactive states. Compare
+equivalent examples.`})]}),(0,r.jsxs)(t,{title:`Playwright Visual QA`,id:`playwright-visual-qa`,children:[(0,r.jsx)(i.p,{children:`Playwright is the repeatable gate. It should run against registered routes, not
+hand-written memory lists.`}),(0,r.jsx)(i.p,{children:`Route discovery starts here:`}),(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:`language-bash`,children:`node .agents/skills/component-quality-pass/scripts/list-preview-routes.mjs
+node .agents/skills/component-quality-pass/scripts/list-preview-routes.mjs --section Base
+node .agents/skills/component-quality-pass/scripts/list-preview-routes.mjs --scope base/combobox
+`})}),(0,r.jsxs)(i.p,{children:[`The showcase browser spec uses `,(0,r.jsx)(i.code,{children:`readyRoutes()`}),` from `,(0,r.jsx)(i.code,{children:`tests/showcase/registry.ts`}),`
+so the runtime/layout gate covers every registered `,(0,r.jsx)(i.code,{children:`ready`}),` route. Scope route
+health assertions to `,(0,r.jsx)(i.code,{children:`main.preview-shell--content`}),`; layout examples can contain
+their own nested semantic `,(0,r.jsx)(i.code,{children:`<main>`}),` landmarks.`]}),(0,r.jsx)(i.p,{children:`For each selected route, Playwright checks should:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsxs)(i.li,{children:[`Open the route on desktop `,(0,r.jsx)(i.code,{children:`1440x900`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Open the route on mobile `,(0,r.jsx)(i.code,{children:`390x844`}),`.`]}),`
+`,(0,r.jsx)(i.li,{children:`Wait for fonts, lazy imports, and async demo data to settle.`}),`
+`,(0,r.jsx)(i.li,{children:`Fail on console errors and Vite/runtime overlays.`}),`
+`,(0,r.jsx)(i.li,{children:`Fail on blank renders.`}),`
+`,(0,r.jsx)(i.li,{children:`Fail on horizontal overflow.`}),`
+`,(0,r.jsx)(i.li,{children:`Check main content is visible.`}),`
+`,(0,r.jsx)(i.li,{children:`Scroll top, middle, and bottom.`}),`
+`,(0,r.jsx)(i.li,{children:`Exercise interactive examples: open comboboxes, popovers, menus, dialogs,
+drawers, tabs, selection states, submit paths, empty states, loading states,
+and error states where the route exposes them.`}),`
+`,(0,r.jsx)(i.li,{children:`Capture screenshots for changed or suspicious pages.`}),`
+`]}),(0,r.jsx)(i.p,{children:`Useful Playwright assertions include computed style checks for height, padding,
+font size, overflow, active state color, visible option count, row alignment,
+and whether a scroll viewport exists where long content needs one.`}),(0,r.jsx)(i.p,{children:`Visual baselines should be updated only when the change is intentional and the
+reviewer has inspected the before/after.`})]}),(0,r.jsxs)(t,{title:`Browser Plugin QA`,id:`browser-plugin-qa`,children:[(0,r.jsx)(i.p,{children:`The in-app Browser skill is the human-grade visual check. Use it when a change
+is visual, interactive, or documentation-facing.`}),(0,r.jsx)(i.p,{children:`Browser pass checklist:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsx)(i.li,{children:`Open the running showcase route in the in-app Browser.`}),`
+`,(0,r.jsx)(i.li,{children:`Inspect desktop first, then mobile or narrow viewport.`}),`
+`,(0,r.jsx)(i.li,{children:`Use the actual UI: click, type, open, select, close, submit, cancel, and
+trigger the visible states.`}),`
+`,(0,r.jsx)(i.li,{children:`Read the visible page state after every interaction. Use DOM snapshots for
+structure and screenshots for spacing, color, balance, and hierarchy.`}),`
+`,(0,r.jsx)(i.li,{children:`Check console errors and runtime overlays.`}),`
+`,(0,r.jsx)(i.li,{children:`Scroll through the full page. Problems often appear below the first demo.`}),`
+`,(0,r.jsx)(i.li,{children:`Capture screenshots for changed routes and defect reports.`}),`
+`]}),(0,r.jsx)(i.p,{children:`Use Browser for qualitative questions:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsx)(i.li,{children:`Does the page feel balanced?`}),`
+`,(0,r.jsx)(i.li,{children:`Are labels aligned with values?`}),`
+`,(0,r.jsx)(i.li,{children:`Does the icon column displace the title?`}),`
+`,(0,r.jsx)(i.li,{children:`Does the option padding feel equal vertically and horizontally?`}),`
+`,(0,r.jsx)(i.li,{children:`Are sidebars stable while scrolling?`}),`
+`,(0,r.jsx)(i.li,{children:`Does the component look like the rest of the library?`}),`
+`]}),(0,r.jsx)(i.p,{children:`If the Browser plugin is unavailable, say so explicitly and run the equivalent
+local Playwright pass. Do not call visual work complete without some browser
+surface proving the rendered result.`})]}),(0,r.jsxs)(t,{title:`Manual Visual Rubric`,id:`manual-visual-rubric`,children:[(0,r.jsx)(i.p,{children:`Before calling a visual pass done, answer these questions with the page open:`}),(0,r.jsxs)(i.ol,{children:[`
+`,(0,r.jsx)(i.li,{children:`Spacing breathes: nothing is cramped, smashed, or separated by ornamental
+gaps.`}),`
+`,(0,r.jsx)(i.li,{children:`Typography reads in a clear hierarchy: title, label, body, helper, metadata,
+and count each have the right weight and size.`}),`
+`,(0,r.jsx)(i.li,{children:`Equivalent controls match: button, input, select, combobox trigger, menu
+trigger, tag input, and form controls share predictable height and padding.`}),`
+`,(0,r.jsx)(i.li,{children:`Equivalent rows match: item rows, command rows, combobox options, table rows,
+metadata rows, and global-search rows feel related.`}),`
+`,(0,r.jsx)(i.li,{children:`States are intentional: hover, active, focus-visible, disabled, loading,
+error, selected, and destructive states are visible and calm.`}),`
+`,(0,r.jsx)(i.li,{children:`Colors are semantic, not random raw hues.`}),`
+`,(0,r.jsx)(i.li,{children:`Cards have enough padding, but not nested-card clutter.`}),`
+`,(0,r.jsx)(i.li,{children:`Tables have readable cell padding, stable row height, no accidental
+truncation, and compact mode is intentionally smaller.`}),`
+`,(0,r.jsx)(i.li,{children:`Sidebars and page shells own their scroll contract. Consumers should not
+patch layout with ad hoc height calculations and overflow classes.`}),`
+`,(0,r.jsx)(i.li,{children:`A designer cannot point to an obvious defect in three seconds.`}),`
+`]}),(0,r.jsx)(i.p,{children:`Any "no" means the pass is not done.`})]}),(0,r.jsxs)(t,{title:`Docs And Showcase Parity`,id:`docs-and-showcase-parity`,children:[(0,r.jsx)(i.p,{children:`Every public surface needs:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsx)(i.li,{children:`Exact package export.`}),`
+`,(0,r.jsx)(i.li,{children:`Registered preview route.`}),`
+`,(0,r.jsx)(i.li,{children:`MDX page with a clear purpose.`}),`
+`,(0,r.jsx)(i.li,{children:`Examples using real library components.`}),`
+`,(0,r.jsx)(i.li,{children:`Generated props table when the component has public props.`}),`
+`,(0,r.jsx)(i.li,{children:`Source path and public import guidance.`}),`
+`,(0,r.jsxs)(i.li,{children:[`Skill metadata synced by `,(0,r.jsx)(i.code,{children:`npm run docs:sync-skill`}),`.`]}),`
+`]}),(0,r.jsx)(i.p,{children:`Docs pages are part of the product. Their tables, examples, search controls,
+sidebars, and "on this page" rail need the same typography and spacing review as
+components. A bad docs page is usually one of two problems: docs chrome is
+under-designed, or the example is exposing a real component defect.`})]}),(0,r.jsxs)(t,{title:`Fix Ownership Examples`,id:`fix-ownership-examples`,children:[(0,r.jsx)(i.p,{children:`Use these ownership decisions during review:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsxs)(i.li,{children:[`Combobox option padding is a `,(0,r.jsx)(i.code,{children:`base/combobox`}),` and token problem, not a single
+example problem.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Card title weight is a `,(0,r.jsx)(i.code,{children:`SmartCard`}),` usage or composed-card title path problem,
+not a docs route problem.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Global search row density belongs in `,(0,r.jsx)(i.code,{children:`features/global-search`}),` partials and
+shared row tokens.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Sidebar scroll and active styling belong in `,(0,r.jsx)(i.code,{children:`layout/sidebar`}),` and its base
+sidebar primitives.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Table cell padding and compact mode belong in `,(0,r.jsx)(i.code,{children:`base/table`}),`.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`Preview route labels and sidebar grouping belong in `,(0,r.jsx)(i.code,{children:`src/preview/registry.tsx`}),`
+and preview navigation, not component code.`]}),`
+`,(0,r.jsxs)(i.li,{children:[`API tables and props formatting belong in `,(0,r.jsx)(i.code,{children:`src/preview/_docs`}),`.`]}),`
+`]}),(0,r.jsx)(i.p,{children:`If a defect appears in multiple routes, stop patching individual examples and
+move the fix down to the shared component or token.`})]}),(0,r.jsxs)(t,{title:`Reporting Template`,id:`reporting-template`,children:[(0,r.jsx)(i.p,{children:`Final reports should be concrete:`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsx)(i.li,{children:`Components and files changed.`}),`
+`,(0,r.jsx)(i.li,{children:`Routes visually inspected.`}),`
+`,(0,r.jsx)(i.li,{children:`Viewports checked.`}),`
+`,(0,r.jsx)(i.li,{children:`Interactive states exercised.`}),`
+`,(0,r.jsx)(i.li,{children:`Tests added or updated.`}),`
+`,(0,r.jsx)(i.li,{children:`Exact commands run and whether they passed.`}),`
+`,(0,r.jsx)(i.li,{children:`Browser plugin result or Playwright fallback.`}),`
+`,(0,r.jsx)(i.li,{children:`Remaining risks or routes not covered.`}),`
+`]}),(0,r.jsx)(i.p,{children:`Good report shape:`}),(0,r.jsx)(i.pre,{children:(0,r.jsx)(i.code,{className:`language-text`,children:`Changed:
+- Base combobox option rhythm now uses the shared menu row spacing tokens.
+- AI cards route titles through SmartCard title/icon and medium labels.
+- Item rows no longer use local zero-padding overrides in composed, feature, or
+  layout surfaces.
+
+Visual QA:
+- Routes: all registered ready preview routes.
+- Viewports: 1440x900 and 390x844.
+- Interactions: opened single/multiple/grouped comboboxes; checked option
+  padding, scroll viewport, active row, AI card hierarchy, and row padding
+  metrics.
+
+Validation:
+- npm run verify: passed.
+- npm run build:lib: passed.
+- npm run build:showcase: passed.
+- git diff --check: passed.
+
+Residual risk:
+- Full feature visual baseline was not updated because this was a focused
+  component patch.
+`})}),(0,r.jsx)(i.p,{children:`Do not say "perfect" unless the route list, visual states, static checks, and
+functional tests back it up.`})]})]})}function a(e={}){let{wrapper:t}=e.components||{};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}export{a as default};

package/dist/showcase/assets/dialog-C1heXuxu.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{h as n,p as r}from"./section-D-N8Ze16.js";import{r as i}from"./example-PsbgbESI.js";import{t as a}from"./circle-alert-9j29FrsT.js";import{t as o}from"./circle-check-big-vu3Znqdx.js";import{t as s}from"./circle-question-mark-BRiF5RV4.js";import{t as c}from"./info-C3G9KRCx.js";import{t as l}from"./x-idpnOHil.js";import{N as u,P as d,d as f,n as p}from"./index-QESvAJrb.js";var m=e(t(),1),h=350,g=0;function _(){if(g===0){let e=window.innerWidth-document.documentElement.clientWidth;document.body.style.setProperty(`--overlay-scrollbar-width`,`${e}px`),document.documentElement.setAttribute(`data-overlay-scroll-locked`,``)}g+=1;let e=!1;return()=>{e||(e=!0,g=Math.max(0,g-1),!(g>0)&&(document.documentElement.removeAttribute(`data-overlay-scroll-locked`),document.body.style.removeProperty(`--overlay-scrollbar-width`)))}}function v({open:e,onOpenChange:t,onClose:n,closeOnEscape:r=!0,closeOnBackdropClick:i=!0,initialFocusRef:a}={}){let o=(0,m.useRef)(null),[s,c]=(0,m.useState)(!1),[l,u]=(0,m.useState)(!1),d=(0,m.useRef)(null),f=(0,m.useRef)(null),p=(0,m.useRef)(null),g=(0,m.useRef)(null),v=(0,m.useRef)(null),y=(0,m.useRef)(!1),b=e!==void 0,x=b?e:s,S=(0,m.useRef)(x);S.current=x;let C=(0,m.useRef)(l);C.current=l;let w=(0,m.useCallback)(e=>{b||c(e),t?.(e),e||n?.()},[b,t,n]),T=(0,m.useCallback)(()=>{p.current&&=(clearTimeout(p.current),null),g.current&&=(g.current(),null)},[]),E=(0,m.useCallback)(()=>{T(),y.current=!0;let e=d.current;d.current=null;let t=f.current;f.current=null;try{e?.()}catch{}try{w(!1)}catch{}u(!1);let n=o.current;n&&n.classList.remove(`closing`);try{t?.focus()}catch{}},[T,w]),D=(0,m.useCallback)(()=>{S.current||C.current||(f.current=document.activeElement,d.current=_(),w(!0),v.current=requestAnimationFrame(()=>{v.current=null,a?.current?a.current.focus():o.current?.focus()}))},[w,a]),O=(0,m.useCallback)(()=>{let e=o.current;if(!(!e||!S.current||C.current))if(u(!0),e.classList.add(`closing`),e.offsetHeight,getComputedStyle(e).animationName!==`none`){let t=()=>{E()};e.addEventListener(`animationend`,t,{once:!0}),g.current=()=>{e.removeEventListener(`animationend`,t)},p.current=setTimeout(()=>{E()},h)}else E()},[E]),k=(0,m.useCallback)(()=>{x?O():D()},[x,D,O]),A=(0,m.useCallback)(e=>{e.key===`Escape`&&r&&(e.preventDefault(),e.stopPropagation(),O())},[r,O]),j=(0,m.useCallback)(()=>{i&&O()},[i,O]);return(0,m.useEffect)(()=>{if(x&&!l)f.current||=document.activeElement,d.current||=_(),v.current!==null&&cancelAnimationFrame(v.current),v.current=requestAnimationFrame(()=>{v.current=null,a?.current?a.current.focus():o.current?.focus()});else if(!x){if(y.current){y.current=!1;return}if(d.current&&=(d.current(),null),l){T(),u(!1);let e=o.current;e&&e.classList.remove(`closing`)}if(f.current){try{f.current.focus()}catch{}f.current=null}}return()=>{v.current!==null&&(cancelAnimationFrame(v.current),v.current=null)}},[x,l,a,T]),(0,m.useEffect)(()=>()=>{T(),v.current!==null&&(cancelAnimationFrame(v.current),v.current=null),d.current&&=(d.current(),null)},[T]),{dialogRef:o,isOpen:x,isClosing:l,openDialog:D,closeDialog:O,toggleDialog:k,dialogProps:{ref:o,open:x,onKeyDown:A},handleBackdropClick:j}}var y={confirm:`Confirm`,cancel:`Cancel`,close:`Close`,loading:`Loading...`},b={confirm:`Continue`,cancel:`Cancel`,close:`Close`,loading:`Loading...`};function x({closeDialog:e,onConfirm:t,onAsyncConfirm:n,closeOnAsyncComplete:r=!0,confirmVariant:i=`primary`,isLoading:a=!1,formId:o,onCancel:s,customStrings:c,emphasis:l=!1,tone:d=`default`,onError:f}){let p=u(y,c),[h,g]=(0,m.useState)(!1),_=(0,m.useCallback)(async()=>{if(t){t(),e();return}if(n){g(!0);try{await n(),r&&e()}catch(e){f?.(e)}finally{g(!1)}return}e()},[t,n,r,e,f]),v=(0,m.useCallback)(()=>{s?.(),e()},[s,e]),b=(0,m.useCallback)(async()=>{if(!o)return;let e=document.getElementById(o);e instanceof HTMLFormElement&&e.requestSubmit()},[o]);return{strings:p,isExecuting:h,handleConfirm:_,handleCancel:v,finalConfirmVariant:(0,m.useMemo)(()=>l?d===`error`?`error`:d===`warning`?`warning`:d===`success`?`success`:i??`primary`:i??`primary`,[l,d,i]),confirmButtonOnClick:o?b:_,effectiveLoading:h||a}}var S=e(d(),1),C=f(),w={xs:`max-w-xs`,sm:`max-w-sm`,md:`max-w-md`,lg:`max-w-lg`,xl:`max-w-xl`,"2xl":`max-w-2xl`,"3xl":`max-w-3xl`,"4xl":`max-w-4xl`,"5xl":`max-w-5xl`,full:`max-w-[calc(100vw-2rem)]`},T={default:{icon:(0,C.jsx)(s,{className:`text-muted-foreground h-5 w-5`}),classes:``},error:{icon:(0,C.jsx)(a,{className:`text-destructive h-5 w-5`}),classes:`border-destructive/50`},warning:{icon:(0,C.jsx)(n,{className:`text-warning h-5 w-5`}),classes:`border-warning/50`},info:{icon:(0,C.jsx)(c,{className:`text-info h-5 w-5`}),classes:`border-info/50`},success:{icon:(0,C.jsx)(o,{className:`text-success h-5 w-5`}),classes:`border-success/50`}};function E({open:e,onOpenChange:t,onClose:n,children:a,title:o,description:s,visuallyHideHeader:c=!1,className:u,contentClassName:d,initialFocusRef:f,closeOnEscape:h=!0,closeOnBackdropClick:g=!0,strings:_,showCancel:y=!0,showConfirm:b=!0,onCancel:E,onConfirm:D,onAsyncConfirm:O,closeOnAsyncComplete:k=!0,confirmVariant:A=`primary`,confirmStyle:j=`solid`,isLoading:M=!1,formId:N,footer:P,emphasis:F=!1,tone:I=`default`,showIcon:L=!1,alertMessage:R,size:z=`lg`,trigger:B}){let V=(0,m.useId)(),H=(0,m.useId)(),U=o?V:void 0,W=s?H:void 0,{isOpen:G,isClosing:K,openDialog:q,closeDialog:J,dialogProps:Y,handleBackdropClick:X}=v({open:e,onOpenChange:t,onClose:n,closeOnEscape:h,closeOnBackdropClick:g,initialFocusRef:f}),{strings:Z,finalConfirmVariant:Q,confirmButtonOnClick:ee,effectiveLoading:te,handleCancel:ne}=x({closeDialog:J,onConfirm:D,onAsyncConfirm:O,closeOnAsyncComplete:k,confirmVariant:A,isLoading:M,formId:N,onCancel:E,customStrings:_,emphasis:F,tone:I}),$=T[I],re=!!(a||R),ie=y||b||P,ae=B&&(0,m.isValidElement)(B)?(0,m.cloneElement)(B,{onClick:e=>{let t=B.props.onClick;t?.(e),q()}}):B?(0,C.jsx)(`span`,{role:`button`,tabIndex:0,onClick:q,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),q())},className:`cursor-pointer`,children:B}):null;return!G&&!K&&!B?null:(0,C.jsxs)(C.Fragment,{children:[ae,!!(G||K)&&(0,S.createPortal)((0,C.jsxs)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center p-4`,children:[(0,C.jsx)(`div`,{className:p(`absolute inset-0 bg-foreground/50 backdrop-blur-[1px]`,`transition-opacity duration-200`,K?`opacity-0`:`animate-in fade-in-0 duration-200`),onClick:X,"aria-hidden":`true`}),(0,C.jsxs)(`dialog`,{...Y,className:p(`dialog--component relative z-10 m-0 p-0`,`rounded-lg border shadow-lg`,`bg-background text-foreground`,`max-h-[90vh] w-full`,`flex flex-col`,w[z],`animate-in fade-in-0 zoom-in-95 duration-200`,`[&.closing]:animate-out [&.closing]:fade-out-0 [&.closing]:zoom-out-95 [&.closing]:duration-150`,`outline-none focus-visible:outline-none`,F&&$.classes,u),"aria-modal":`true`,role:`dialog`,"aria-labelledby":U,"aria-describedby":W,children:[(0,C.jsx)(i,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,onClick:J,className:p(`absolute right-3 top-3 z-10 size-7 rounded-md p-0`,`text-muted-foreground transition-colors`,`hover:bg-muted hover:text-foreground`,`disabled:pointer-events-none`),"aria-label":Z.close,children:(0,C.jsx)(l,{className:`h-4 w-4`})}),!!(o||s)&&(0,C.jsxs)(`div`,{className:p(`flex gap-3 px-6 pb-4 pt-6`,L&&`items-start`,c&&`sr-only`),children:[!!L&&(0,C.jsx)(`div`,{className:`shrink-0 pt-0.5`,children:$.icon}),(0,C.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[!!o&&(0,C.jsx)(r,{id:V,tag:`div`,size:`lg`,weight:`semibold`,className:`pr-6`,children:o}),!!s&&(0,C.jsx)(r,{id:H,tag:`p`,type:`secondary`,className:`mt-1`,children:s})]})]}),!!re&&(0,C.jsxs)(`div`,{className:p(`flex-1 overflow-auto px-6`,o||s?c?`py-6`:`pb-6`:`py-6`,d),children:[!!R&&(0,C.jsx)(`div`,{className:p(`mb-4 rounded-md border p-3`,I===`error`&&`border-destructive/30 bg-destructive/5`,I===`warning`&&`border-warning/40 bg-warning/10`,I===`info`&&`border-info/40 bg-info/10`,I===`success`&&`border-success/40 bg-success/10`,I==="default"&&`border-border bg-muted/40`),children:(0,C.jsx)(r,{tag:`p`,children:R})}),a]}),!!ie&&(0,C.jsx)(`div`,{className:`border-t px-6 py-4`,children:P??(0,C.jsxs)(`div`,{className:`flex flex-col-reverse gap-3 sm:flex-row sm:justify-end`,children:[!!y&&(0,C.jsx)(i,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:ne,children:Z.cancel}),!!b&&(0,C.jsx)(i,{type:`button`,variant:Q,buttonStyle:j,onClick:ee,loading:te,loadingLabels:{loading:Z.loading},children:Z.confirm})]})})]})]}),document.body)]})}var D=(0,m.memo)(E);D.displayName=`Dialog`;export{v as i,x as n,b as r,D as t};

package/dist/showcase/assets/dialog-DzrcsKvl.js

@@ -0,0 +1 @@
+import"./chunk-QTnfLwEv.js";import{t as e}from"./react-sKtkuLrH.js";import{er as t,l as n}from"./example-PsbgbESI.js";import{t as r}from"./x-idpnOHil.js";import{d as i,n as a}from"./index-QESvAJrb.js";import{a as o,c as s,l as c,n as l,o as u,r as d,s as f,t as p}from"./DialogTrigger-1P-jwcoH.js";e();var m=i();function h({...e}){return(0,m.jsx)(d,{"data-slot":`dialog`,modal:`trap-focus`,...e})}function g({asChild:e=!1,...t}){let r=e?(0,m.jsx)(n,{}):void 0;return(0,m.jsx)(p,{"data-slot":`dialog-trigger`,render:r,...t})}function _({...e}){return(0,m.jsx)(o,{"data-slot":`dialog-portal`,...e})}function v({className:e,...t}){return(0,m.jsx)(c,{"data-slot":`dialog-overlay`,className:a(`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50`,e),...t})}function y({className:e,children:n,showCloseButton:i=!0,...o}){return(0,m.jsxs)(_,{children:[(0,m.jsx)(v,{}),(0,m.jsxs)(u,{"data-slot":`dialog-content`,className:a(`bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none`,e),...o,children:[n,!!i&&(0,m.jsxs)(s,{"data-slot":`dialog-close`,render:(0,m.jsx)(t,{variant:`ghost`,className:`absolute top-4 right-4`,size:`icon-sm`}),children:[(0,m.jsx)(r,{}),(0,m.jsx)(`span`,{className:`sr-only`,children:`Close`})]})]})]})}function b({className:e,...t}){return(0,m.jsx)(`div`,{"data-slot":`dialog-header`,className:a(`gap-2 flex flex-col`,e),...t})}function x({className:e,showCloseButton:n=!1,children:r,...i}){return(0,m.jsxs)(`div`,{"data-slot":`dialog-footer`,className:a(`gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...i,children:[r,!!n&&(0,m.jsx)(s,{render:(0,m.jsx)(t,{variant:`outline`}),children:`Close`})]})}function S({className:e,asChild:t=!1,...r}){let i=t?(0,m.jsx)(n,{}):void 0;return(0,m.jsx)(l,{"data-slot":`dialog-title`,render:i,className:a(`leading-none font-medium`,e),...r})}function C({className:e,asChild:t=!1,...r}){let i=t?(0,m.jsx)(n,{}):void 0;return(0,m.jsx)(f,{"data-slot":`dialog-description`,render:i,className:a(`text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3`,e),...r})}export{b as a,x as i,y as n,S as o,C as r,g as s,h as t};