admin-ui-starter-kit 0.6.5 → 0.6.7

package/dist/showcase/assets/spinner-BVGPoAEv.js

@@ -0,0 +1,49 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,t as n}from"./section-DYfGx1Q5.js";import{t as r}from"./example-CzbL5xoH.js";import{d as i}from"./index-DN09-Vts.js";import{t as a}from"./props-table-izArO1Pv.js";import{t as o}from"./spinner-FURXSp1Q.js";var s=e({CustomColour:()=>f,Default:()=>l,SectionPlaceholder:()=>p,Variants:()=>u,WithLabel:()=>d}),c=i();function l(){return(0,c.jsx)(o,{})}function u(){return(0,c.jsxs)(`div`,{className:`grid grid-cols-3 gap-2 w-full`,children:[(0,c.jsx)(`div`,{className:`rounded border border-border`,children:(0,c.jsx)(o,{variant:`default`,label:`default`})}),(0,c.jsx)(`div`,{className:`rounded border border-border`,children:(0,c.jsx)(o,{variant:`shimmer`,label:`shimmer`})}),(0,c.jsx)(`div`,{className:`rounded border border-border`,children:(0,c.jsx)(o,{variant:`progress`,label:`progress`})})]})}function d(){return(0,c.jsx)(o,{label:`Loading bookings…`})}function f(){return(0,c.jsxs)(`div`,{className:`flex flex-wrap gap-4`,children:[(0,c.jsx)(o,{label:`Syncing inventory`,className:`text-success`}),(0,c.jsx)(o,{label:`Saving`,className:`text-warning`}),(0,c.jsx)(o,{label:`Deleting`,className:`text-destructive`})]})}function p(){return(0,c.jsxs)(`div`,{className:`w-full max-w-md rounded-lg border border-border bg-card`,children:[(0,c.jsx)(`div`,{className:`border-b border-border px-4 py-2 text-sm font-medium`,children:`Recent activity`}),(0,c.jsx)(o,{label:`Loading activity feed…`})]})}var m=`import { Spinner } from '@/components/base/spinner';
+
+export function Default() {
+	return <Spinner />;
+}
+
+export function Variants() {
+	return (
+		<div className="grid grid-cols-3 gap-2 w-full">
+			<div className="rounded border border-border">
+				<Spinner variant="default" label="default" />
+			</div>
+			<div className="rounded border border-border">
+				<Spinner variant="shimmer" label="shimmer" />
+			</div>
+			<div className="rounded border border-border">
+				<Spinner variant="progress" label="progress" />
+			</div>
+		</div>
+	);
+}
+
+export function WithLabel() {
+	return <Spinner label="Loading bookings…" />;
+}
+
+export function CustomColour() {
+	return (
+		<div className="flex flex-wrap gap-4">
+			<Spinner label="Syncing inventory" className="text-success" />
+			<Spinner label="Saving" className="text-warning" />
+			<Spinner label="Deleting" className="text-destructive" />
+		</div>
+	);
+}
+
+export function SectionPlaceholder() {
+	return (
+		<div className="w-full max-w-md rounded-lg border border-border bg-card">
+			<div className="border-b border-border px-4 py-2 text-sm font-medium">Recent activity</div>
+			<Spinner label="Loading activity feed…" />
+		</div>
+	);
+}
+`;function h(e){let i={code:`code`,p:`p`,...e.components};return s||_(`Examples`,!1),f||_(`Examples.CustomColour`,!0),l||_(`Examples.Default`,!0),p||_(`Examples.SectionPlaceholder`,!0),u||_(`Examples.Variants`,!0),d||_(`Examples.WithLabel`,!0),(0,c.jsxs)(t,{title:`Spinner`,description:`Loading indicator with three visual variants. Pairs with content placeholders, route transitions, and Suspense fallbacks.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/spinner`,children:[(0,c.jsx)(n,{title:`Overview`,id:`overview`,children:(0,c.jsxs)(i.p,{children:[(0,c.jsx)(i.code,{children:`Spinner`}),` ships three variants — `,(0,c.jsx)(i.code,{children:`default`}),` (rotating SVG), `,(0,c.jsx)(i.code,{children:`shimmer`}),` (round
+shimmer dot), `,(0,c.jsx)(i.code,{children:`progress`}),` (slim animated bar). The variant resolves through
+`,(0,c.jsx)(i.code,{children:`useSpinnerConfig().defaultVariant`}),`, so a consumer can pin the look at the
+`,(0,c.jsx)(i.code,{children:`UIProvider`}),` root and override per call. Pass an optional `,(0,c.jsx)(i.code,{children:`label`}),` for screen
+readers and a visible status message.`]})}),(0,c.jsx)(n,{title:`Default`,id:`default`,children:(0,c.jsx)(r,{name:`Default`,source:m,children:(0,c.jsx)(l,{})})}),(0,c.jsx)(n,{title:`Variants`,id:`variants`,children:(0,c.jsx)(r,{name:`Variants`,source:m,children:(0,c.jsx)(u,{})})}),(0,c.jsxs)(n,{title:`Composition`,id:`composition`,children:[(0,c.jsx)(r,{name:`WithLabel`,source:m,children:(0,c.jsx)(d,{})}),(0,c.jsx)(r,{name:`CustomColour`,source:m,children:(0,c.jsx)(f,{})})]}),(0,c.jsx)(n,{title:`Realistic usage`,id:`realistic`,children:(0,c.jsx)(r,{name:`SectionPlaceholder`,source:m,children:(0,c.jsx)(p,{})})}),(0,c.jsx)(n,{title:`API`,id:`api`,children:(0,c.jsx)(a,{component:`Spinner`})})]})}function g(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(h,{...e})}):h(e)}function _(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{g as default};

package/dist/showcase/assets/spinner-FURXSp1Q.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{T as n,p as r}from"./section-DYfGx1Q5.js";import{d as i,n as a}from"./index-DN09-Vts.js";var o=e(t(),1),s=i(),c=(0,o.forwardRef)(function({label:e,className:t=``,variant:i,style:o},c){let{defaultVariant:f}=n(),p=i??f??`default`;return(0,s.jsx)(`div`,{ref:c,className:a(`spinner--component`,`flex items-center justify-center p-8`),style:o,children:(0,s.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-2 text-center`,children:[p==="default"&&(0,s.jsx)(l,{className:t}),p===`shimmer`&&(0,s.jsx)(u,{className:t}),p===`progress`&&(0,s.jsx)(d,{className:t}),!!e&&(0,s.jsx)(r,{type:`secondary`,children:e})]})})});c.displayName=`Spinner`;function l({className:e=``}){return(0,s.jsxs)(`svg`,{className:a(`h-10 w-10 text-primary`,e),fill:`currentColor`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,"aria-hidden":`true`,children:[(0,s.jsx)(`path`,{d:`M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z`,opacity:`.25`}),(0,s.jsx)(`path`,{d:`M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z`,children:(0,s.jsx)(`animateTransform`,{attributeName:`transform`,type:`rotate`,dur:`0.75s`,values:`0 12 12;360 12 12`,repeatCount:`indefinite`})})]})}function u({className:e=``}){return(0,s.jsx)(`div`,{className:a(`h-10 w-10 rounded-full bg-gradient-to-r from-muted via-muted-foreground/30 to-muted bg-[length:200%_100%]`,`animate-[shimmer_1.5s_ease-in-out_infinite]`,e),"aria-hidden":`true`})}function d({className:e=``}){return(0,s.jsx)(`div`,{className:a(`h-1 w-32 overflow-hidden rounded bg-muted`,e),role:`progressbar`,"aria-busy":`true`,children:(0,s.jsx)(`div`,{className:`h-full w-1/3 animate-[progress-slide_1.4s_ease-in-out_infinite] rounded bg-primary`})})}export{c as t};

package/dist/showcase/assets/spinner-u6TwJ3Ii.js

@@ -0,0 +1,30 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,t as n}from"./section-DYfGx1Q5.js";import{Er as r,t as i}from"./example-CzbL5xoH.js";import{d as a,n as o}from"./index-DN09-Vts.js";import{n as s}from"./PreviewLayout-CHW8F5uE.js";var c=a();function l({className:e,...t}){return(0,c.jsx)(r,{role:`status`,"aria-label":`Loading`,className:o(`size-4 animate-spin`,e),...t})}var u=e({ColorViaClassName:()=>f,Sizes:()=>d});function d(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsxs)(s,{children:[(0,c.jsx)(l,{className:`size-3`}),(0,c.jsx)(l,{className:`size-4`}),(0,c.jsx)(l,{className:`size-5`}),(0,c.jsx)(l,{className:`size-6`}),(0,c.jsx)(l,{className:`size-8`})]})})}function f(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsxs)(s,{children:[(0,c.jsx)(l,{className:`size-5 text-primary`}),(0,c.jsx)(l,{className:`size-5 text-destructive`}),(0,c.jsx)(l,{className:`size-5 text-info`}),(0,c.jsx)(l,{className:`size-5 text-muted-foreground`})]})})}var p=`import { Spinner } from '@/components/ui/spinner';
+import { Row } from '../../PreviewLayout';
+
+export function Sizes() {
+	return (
+		<>
+			<Row>
+								<Spinner className="size-3" />
+								<Spinner className="size-4" />
+								<Spinner className="size-5" />
+								<Spinner className="size-6" />
+								<Spinner className="size-8" />
+							</Row>
+		</>
+	);
+}
+
+export function ColorViaClassName() {
+	return (
+		<>
+			<Row>
+								<Spinner className="size-5 text-primary" />
+								<Spinner className="size-5 text-destructive" />
+								<Spinner className="size-5 text-info" />
+								<Spinner className="size-5 text-muted-foreground" />
+							</Row>
+		</>
+	);
+}
+`;function m(e){return u||g(`Examples`,!1),f||g(`Examples.ColorViaClassName`,!0),d||g(`Examples.Sizes`,!0),(0,c.jsx)(t,{title:`UI · Spinner`,description:`Loading spinner — sized via className.`,layer:`ui`,status:`ready`,children:(0,c.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,c.jsx)(i,{name:`Sizes`,source:p,children:(0,c.jsx)(d,{})}),(0,c.jsx)(i,{name:`ColorViaClassName`,source:p,children:(0,c.jsx)(f,{})})]})})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(m,{...e})}):m(e)}function g(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{h as default};

package/dist/showcase/assets/square-pen-DVXVT0cQ.js

@@ -0,0 +1 @@
+import{l as e}from"./index-DN09-Vts.js";var t=e(`square-pen`,[[`path`,{d:`M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7`,key:`1m0v6g`}],[`path`,{d:`M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z`,key:`ohrbg2`}]]);export{t};

package/dist/showcase/assets/stacked-avatars-CKOQhAx4.js

@@ -0,0 +1 @@
+import"./chunk-QTnfLwEv.js";import{t as e}from"./react-sKtkuLrH.js";import{p as t}from"./section-DYfGx1Q5.js";import{d as n,n as r}from"./index-DN09-Vts.js";import{a as i,i as a,o,r as s,t as c}from"./avatar-DsnH-Xmz.js";e();var l=n(),u=[`muted`,`primary`,`secondary`,`info`,`success`],d={muted:`bg-muted text-muted-foreground`,primary:`bg-primary/10 text-primary`,secondary:`bg-secondary text-secondary-foreground`,info:`bg-info/10 text-info`,success:`bg-success/10 text-success`,warning:`bg-warning/15 text-warning`,destructive:`bg-destructive/10 text-destructive`};function f(e,t=!1){let n=e.trim().split(/\s+/);return n.length===0?`?`:t?n[0].slice(0,1).toUpperCase():n.length===1?n[0].slice(0,2).toUpperCase():(n[0][0]+n[n.length-1][0]).toUpperCase()}function p(e,t){return typeof t==`string`?t:typeof t==`number`?u[Math.abs(t)%u.length]:u[(typeof e==`number`?e:Array.from(e).reduce((e,t)=>e+t.charCodeAt(0),0))%u.length]}function m(e){return e===`small`||e==="default"?e:e===`xs`||e===`sm`?`small`:`default`}function h({users:e,max:n=4,size:u=`default`,className:h,showOverflow:g=!0,overflowFormatter:_,avatarClassName:v}){let y=e.slice(0,n),b=Math.max(0,e.length-n),x=m(u);return(0,l.jsxs)(a,{className:r(`stacked-avatars--component`,h),children:[y.map((e,t)=>{let n=f(e.name,x===`small`),i=p(e.id??e.name??t,e.tone);return(0,l.jsxs)(c,{size:x,className:r(`ring-background`,v),title:e.name,children:[e.imageUrl?(0,l.jsx)(o,{src:e.imageUrl,alt:e.name}):null,(0,l.jsx)(s,{className:r(`font-semibold`,d[i]),children:n})]},e.id??`${e.name}-${t}`)}),!!g&&b>0&&(0,l.jsx)(i,{children:(0,l.jsx)(t,{size:`xs`,weight:`semibold`,children:_?_(b):`+${b}`})})]})}h.displayName=`StackedAvatars`;export{h as t};

package/dist/showcase/assets/star-B3ZPfxuz.js

@@ -0,0 +1 @@
+import{l as e}from"./index-DN09-Vts.js";var t=e(`star`,[[`path`,{d:`M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z`,key:`r04s7s`}]]);export{t};

package/dist/showcase/assets/startOfDay-LwMBRUSU.js

@@ -0,0 +1 @@
+import{T as e}from"./index-DN09-Vts.js";function t(t,n){let r=e(t,n?.in);return r.setHours(0,0,0,0),r}export{t};

package/dist/showcase/assets/styles-UIKkojWJ.js

@@ -0,0 +1 @@
+import{d as e}from"./index-DN09-Vts.js";import{n as t}from"./CSPContext-Bfs88_eg.js";function n(e,t){return Math.max(0,e-t)}function r(e,n){if(n<=0)return 0;let r=t(e,0,n),i=r,a=n-r,o=i<=1,s=a<=1;return o&&s?i<=a?0:n:o?0:s?n:r}var i=e(),a=`base-ui-disable-scrollbar`,o={className:a,getElement(e){return(0,i.jsx)(`style`,{nonce:e,href:a,precedence:`base-ui:low`,children:`.${a}{scrollbar-width:none}.${a}::-webkit-scrollbar{display:none}`})}};export{n,r,o as t};

package/dist/showcase/assets/suggestions-DbrzKjbi.js

@@ -0,0 +1,126 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-DYfGx1Q5.js";import{t as s}from"./building-2-BkQcv8WR.js";import{r as c,t as l}from"./example-CzbL5xoH.js";import{N as u,a as d,d as f,n as p}from"./index-DN09-Vts.js";import{t as m}from"./props-table-izArO1Pv.js";import{c as h,i as g,r as _,t as v,u as y}from"./item-DTsZnSJG.js";import{t as b}from"./enhanced-combobox-D71BOuiX.js";import{t as x}from"./input-D_T9s_tn.js";var S=t(n(),1),C=e=>new Promise(t=>{setTimeout(t,e)});function w(e){let{fetchData:t,minQueryLength:n=1,debounceMs:r=250,requestDelay:i=0,preload:a=!1,onError:o}=e,[s,c]=(0,S.useState)([]),[l,u]=(0,S.useState)(``),[d,f]=(0,S.useState)(null),[p,m]=(0,S.useState)(!1),[h,g]=(0,S.useState)(!1),_=(0,S.useRef)(t),v=(0,S.useRef)(o);return _.current=t,v.current=o,(0,S.useEffect)(()=>{let e=!1,t=null;return l.length>=n||a&&l.length===0?(t=setTimeout(()=>{(async()=>{g(!0);try{i>0&&await C(i);let t=await _.current(l);e||c(Array.isArray(t)?t:[])}catch(t){e||(c(e=>e.length===0?e:[]),v.current?.(t,l))}finally{e||g(!1)}})()},r),()=>{e=!0,t&&clearTimeout(t)}):(c(e=>e.length===0?e:[]),()=>{t&&clearTimeout(t)})},[r,n,a,i,l]),{items:s,isLoading:h,searchValue:l,setSearchValue:u,selectedValue:d,setSelectedValue:f,open:p,setOpen:m}}var T={placeholder:`Search...`,emptyMessage:`No results found.`,loadingMessage:`Searching...`,startTypingMessage:`Type to search.`},E=f();function D(e){let{fetchData:t,itemKey:n,itemText:r,onValueChange:i,renderItem:a,minQueryLength:o=1,debounceMs:s=250,requestDelay:c=0,preload:l=!1,allowClear:d=!0,clearInputOnClose:f=!1,disabled:m=!1,className:h,onError:g,strings:_}=e,v=u(T,_),{items:y,isLoading:x,searchValue:C,setSearchValue:D,selectedValue:O,setSelectedValue:k,open:A,setOpen:j}=w({fetchData:t,minQueryLength:o,debounceMs:s,requestDelay:c,preload:l,onError:g}),M=(0,S.useMemo)(()=>({placeholder:v.placeholder,noResults:v.emptyMessage,searching:v.loadingMessage,typeToSearch:v.startTypingMessage}),[v]);return(0,E.jsx)(b,{className:p(`suggestions--component`,h),items:y,searchValue:C,onSearchValueChange:D,selectedValue:O,onSelectedValueChange:e=>{k(e),i?.(e)},getItemLabel:r,getItemKey:e=>String(n(e)),renderItem:a,minSearchLength:o,isLoading:x,strings:M,clearable:d,open:A,onOpenChange:e=>{j(e),!e&&f&&D(``)},disabled:m})}D.displayName=`SuggestionsCombobox`;var O=e({AccountSuggestionsCombobox:()=>j,HeadlessSuggestionsState:()=>M}),k=[{id:`northwind`,name:`Northwind Retail`,plan:`Pro`,region:`EU`},{id:`summit`,name:`Summit Tours`,plan:`Scale`,region:`US`},{id:`atlas`,name:`Atlas Supply`,plan:`Enterprise`,region:`APAC`}];async function A(e){let t=e.trim().toLowerCase();return t?k.filter(e=>`${e.name} ${e.plan} ${e.region}`.toLowerCase().includes(t)):k}function j(){let[e,t]=(0,S.useState)(null);return(0,E.jsxs)(`div`,{className:`max-w-md space-y-3`,children:[(0,E.jsx)(D,{fetchData:A,itemKey:e=>e.id,itemText:e=>e.name,onValueChange:t,preload:!0,minQueryLength:0,clearInputOnClose:!0,renderItem:e=>(0,E.jsxs)(v,{size:`small`,className:`border-0 bg-transparent p-0 shadow-none`,children:[(0,E.jsx)(h,{variant:`icon`,children:(0,E.jsx)(s,{className:`size-icon`,"aria-hidden":!0})}),(0,E.jsxs)(_,{children:[(0,E.jsx)(y,{children:e.name}),(0,E.jsxs)(g,{clamp:1,children:[e.plan,` - `,e.region]})]})]}),strings:{placeholder:`Search accounts`,emptyMessage:`No accounts match this query.`}}),e?(0,E.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,E.jsx)(a,{size:`xs`,type:`secondary`,children:`Selected`}),(0,E.jsx)(i,{variant:`secondary`,children:e.name})]}):null]})}function M(){let e=w({fetchData:A,minQueryLength:1,debounceMs:0,preload:!1});return(0,E.jsxs)(`div`,{className:`max-w-md space-y-3`,children:[(0,E.jsxs)(`div`,{className:`flex gap-2`,children:[(0,E.jsx)(x,{value:e.searchValue,onChange:t=>e.setSearchValue(t.target.value),placeholder:`Type an account`}),(0,E.jsx)(c,{type:`button`,variant:`secondary`,icon:d,children:`Search`})]}),(0,E.jsx)(`div`,{className:`rounded-md border border-border/60`,children:e.items.length===0?(0,E.jsx)(`div`,{className:`px-3 py-2`,children:(0,E.jsx)(a,{size:`xs`,type:`secondary`,children:`Enter a query to load consumer-owned results.`})}):e.items.map(t=>(0,E.jsxs)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,fullWidth:!0,className:`h-auto justify-between rounded-none border-b border-border/50 px-3 py-2 text-left last:border-b-0`,onClick:()=>e.setSelectedValue(t),children:[(0,E.jsx)(a,{size:`sm`,weight:`medium`,children:t.name}),(0,E.jsx)(a,{size:`xs`,type:`secondary`,children:t.plan})]},t.id))})]})}var N=`import { useState } from 'react';
+import { Building2, Search } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Input } from '@/components/base/forms/fields';
+import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/base/item';
+import { SuggestionsCombobox, useSuggestions } from '@/components/features/suggestions';
+import { Text } from '@/components/typography';
+
+type Account = {
+	id: string;
+	name: string;
+	plan: string;
+	region: string;
+};
+
+const accounts: Account[] = [
+	{ id: 'northwind', name: 'Northwind Retail', plan: 'Pro', region: 'EU' },
+	{ id: 'summit', name: 'Summit Tours', plan: 'Scale', region: 'US' },
+	{ id: 'atlas', name: 'Atlas Supply', plan: 'Enterprise', region: 'APAC' },
+];
+
+async function searchAccounts(query: string): Promise<Account[]> {
+	const needle = query.trim().toLowerCase();
+	if (!needle) return accounts;
+	return accounts.filter((account) =>
+		\`\${account.name} \${account.plan} \${account.region}\`.toLowerCase().includes(needle),
+	);
+}
+
+export function AccountSuggestionsCombobox() {
+	const [selected, setSelected] = useState<Account | null>(null);
+
+	return (
+		<div className="max-w-md space-y-3">
+			<SuggestionsCombobox<Account>
+				fetchData={searchAccounts}
+				itemKey={(item) => item.id}
+				itemText={(item) => item.name}
+				onValueChange={setSelected}
+				preload
+				minQueryLength={0}
+				clearInputOnClose
+				renderItem={(item) => (
+					<Item size="small" className="border-0 bg-transparent p-0 shadow-none">
+						<ItemMedia variant="icon">
+							<Building2 className="size-icon" aria-hidden />
+						</ItemMedia>
+						<ItemContent>
+							<ItemTitle>{item.name}</ItemTitle>
+							<ItemDescription clamp={1}>
+								{item.plan} - {item.region}
+							</ItemDescription>
+						</ItemContent>
+					</Item>
+				)}
+				strings={{
+					placeholder: 'Search accounts',
+					emptyMessage: 'No accounts match this query.',
+				}}
+			/>
+			{selected ? (
+				<div className="flex items-center gap-2">
+					<Text size="xs" type="secondary">
+						Selected
+					</Text>
+					<Badge variant="secondary">{selected.name}</Badge>
+				</div>
+			) : null}
+		</div>
+	);
+}
+
+export function HeadlessSuggestionsState() {
+	const suggestions = useSuggestions<Account>({
+		fetchData: searchAccounts,
+		minQueryLength: 1,
+		debounceMs: 0,
+		preload: false,
+	});
+
+	return (
+		<div className="max-w-md space-y-3">
+			<div className="flex gap-2">
+				<Input
+					value={suggestions.searchValue}
+					onChange={(event) => suggestions.setSearchValue(event.target.value)}
+					placeholder="Type an account"
+				/>
+				<Button type="button" variant="secondary" icon={Search}>
+					Search
+				</Button>
+			</div>
+			<div className="rounded-md border border-border/60">
+				{suggestions.items.length === 0 ? (
+					<div className="px-3 py-2">
+						<Text size="xs" type="secondary">
+							Enter a query to load consumer-owned results.
+						</Text>
+					</div>
+				) : (
+					suggestions.items.map((item) => (
+						<Button
+							key={item.id}
+							type="button"
+							variant="secondary"
+							buttonStyle="ghost"
+							fullWidth
+							className="h-auto justify-between rounded-none border-b border-border/50 px-3 py-2 text-left last:border-b-0"
+							onClick={() => suggestions.setSelectedValue(item)}
+						>
+							<Text size="sm" weight="medium">
+								{item.name}
+							</Text>
+							<Text size="xs" type="secondary">
+								{item.plan}
+							</Text>
+						</Button>
+					))
+				)}
+			</div>
+		</div>
+	);
+}
+`;function P(e){let t={h4:`h4`,...e.components};return O||I(`Examples`,!1),j||I(`Examples.AccountSuggestionsCombobox`,!0),M||I(`Examples.HeadlessSuggestionsState`,!0),(0,E.jsxs)(r,{title:`Features · Suggestions`,description:`Framework-agnostic typeahead suggestions with a drop-in combobox and a headless hook. Consumers own fetching, selected-value persistence, telemetry, and result rendering.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/suggestions`,children:[(0,E.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(l,{name:`AccountSuggestionsCombobox`,source:N,children:(0,E.jsx)(j,{})}),(0,E.jsx)(l,{name:`HeadlessSuggestionsState`,source:N,children:(0,E.jsx)(M,{})})]}),(0,E.jsxs)(o,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`SuggestionsCombobox`}),(0,E.jsx)(m,{component:`SuggestionsCombobox`})]})]})}function F(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(P,{...e})}):P(e)}function I(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{F as default};

package/dist/showcase/assets/switch-CAw84QpS.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{Gt as n,Qt as ee,Wt as te,ar as r,br as ne,cr as i,fr as a,g as re,lr as ie,mr as ae,nr as o,pr as oe,vn as se}from"./example-CzbL5xoH.js";import{d as ce,n as s}from"./index-DN09-Vts.js";import{t as c}from"./useControlled-BHUji6Sp.js";import{t as l}from"./useValueChanged-CXpsR4fl.js";import{c as u,n as d,o as f,r as p,t as m}from"./LabelableContext-D6DcOg5I.js";import{t as h}from"./useLabelableId-IRM1zB5m.js";import{t as g}from"./useAriaLabelledBy-DSpPzrxG.js";var _=e(t(),1),v=_.createContext(void 0);function y(){let e=_.useContext(v);if(e===void 0)throw Error(a(63));return e}var b=function(e){return e.checked=`data-checked`,e.unchecked=`data-unchecked`,e.disabled=`data-disabled`,e.readonly=`data-readonly`,e.required=`data-required`,e.valid=`data-valid`,e.invalid=`data-invalid`,e.touched=`data-touched`,e.dirty=`data-dirty`,e.filled=`data-filled`,e.focused=`data-focused`,e}({}),x={...u,checked(e){return e?{[b.checked]:``}:{[b.unchecked]:``}}},S=ce(),C=_.forwardRef(function(e,t){let{checked:a,className:ce,defaultChecked:s,"aria-labelledby":u,form:y,id:b,inputRef:C,name:w,nativeButton:T=!1,onCheckedChange:E,readOnly:D=!1,required:O=!1,disabled:k=!1,render:le,uncheckedValue:A,value:j,style:ue,...M}=e,{clearErrors:N}=d(),{state:P,setTouched:F,setDirty:I,validityData:L,setFilled:R,setFocused:z,validationMode:de,disabled:B,name:V,validation:H}=f(),{labelId:U}=m(),W=B||k,G=V??w,K=_.useRef(null),fe=i(K,C,H.inputRef),q=_.useRef(null),J=re(),Y=h({id:b,implicit:!1,controlRef:q}),X=T?void 0:Y,[Z,pe]=c({controlled:a,default:!!s,name:`Switch`,state:`checked`});p(q,J,Z,void 0,!W,w),ae(()=>{K.current&&R(K.current.checked)},[K,R]),l(Z,()=>{N(G),I(Z!==L.initialValue),R(Z),H.change(Z)});let{getButtonProps:me,buttonRef:he}=ie({disabled:W,native:T}),ge=g(u,U,K,!T,X),_e={id:T?Y:J,role:`switch`,"aria-checked":Z,"aria-readonly":D||void 0,"aria-required":O||void 0,"aria-labelledby":ge,onFocus(){W||z(!0)},onBlur(){let e=K.current;!e||W||(F(!0),z(!1),de===`onBlur`&&H.commit(e.checked))},onClick(e){if(D||W)return;e.preventDefault();let t=K.current;t&&t.dispatchEvent(new(ne(t)).PointerEvent(`click`,{bubbles:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,altKey:e.altKey,metaKey:e.metaKey}))}},Q=oe({checked:Z,disabled:W,form:y,id:X,name:G,required:O,style:G?n:te,tabIndex:-1,type:`checkbox`,"aria-hidden":!0,ref:fe,onChange(e){if(e.nativeEvent.defaultPrevented)return;if(D){e.preventDefault();return}let t=e.currentTarget.checked,n=ee(se,e.nativeEvent);E?.(t,n),!n.isCanceled&&pe(t)},onFocus(){q.current?.focus()}},e=>H.getValidationProps(W,e),j===void 0?r:{value:j}),$=_.useMemo(()=>({...P,checked:Z,disabled:W,readOnly:D,required:O}),[P,Z,W,D,O]),ve=o(`span`,e,{state:$,ref:[t,q,he],props:[_e,M,me,e=>H.getValidationProps(W,e)],stateAttributesMapping:x});return(0,S.jsxs)(v.Provider,{value:$,children:[ve,!Z&&G&&A!==void 0&&(0,S.jsx)(`input`,{type:`hidden`,form:y,name:G,value:A,disabled:W}),(0,S.jsx)(`input`,{...Q,suppressHydrationWarning:!0})]})}),w=_.forwardRef(function(e,t){let{render:n,className:ee,style:te,...r}=e;return o(`span`,e,{state:y(),ref:t,stateAttributesMapping:x,props:r})});function T({className:e,size:t=`default`,...n}){return(0,S.jsx)(C,{"data-slot":`switch`,"data-size":t,className:s(`data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive shrink-0 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-4 data-[size=sm]:w-7 peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50`,e),...n,children:(0,S.jsx)(w,{"data-slot":`switch-thumb`,className:`bg-background rounded-full shadow-sm group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[16px] group-data-[size=sm]/switch:data-checked:translate-x-[12px] group-data-[size=default]/switch:data-unchecked:translate-x-0.5 group-data-[size=sm]/switch:data-unchecked:translate-x-0.5 pointer-events-none block ring-0 transition-transform`})})}export{T as t};

package/dist/showcase/assets/switch-Cjt2MCgr.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{d as n,n as r}from"./index-DN09-Vts.js";import{t as i}from"./switch-CAw84QpS.js";var a=e(t(),1),o=n(),s=(0,a.forwardRef)(function({onCheckedChange:e,invalid:t,className:n,...s},c){let l=(0,a.useId)(),u=(0,a.useMemo)(()=>s.name?String(s.name):s.id?String(s.id):`switch-${l}`,[l,s.id,s.name]),d=s.id??u,f=(0,a.useCallback)(t=>{e?.({target:{name:u,value:t}})},[u,e]);return(0,o.jsx)(i,{ref:c,...s,onCheckedChange:f,id:d,name:u,"aria-invalid":t||void 0,className:r(`switch--component`,t&&`data-[state=unchecked]:border-destructive`,n)})});s.displayName=`Switch`;var c=(0,a.forwardRef)(function({onCheckedChange:e,invalid:t,className:n,...a},s){return(0,o.jsx)(i,{ref:s,...a,onCheckedChange:t=>e?.(t),"aria-invalid":t||void 0,className:r(t&&`data-[state=unchecked]:border-destructive`,n)})});c.displayName=`ToggleSwitch`;export{c as n,s as t};

package/dist/showcase/assets/sync-DWbqfpBH.js

@@ -0,0 +1,124 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,p as i,t as a}from"./section-DYfGx1Q5.js";import{r as o,t as s}from"./example-CzbL5xoH.js";import{t as c}from"./clock-3-CVwHXCmo.js";import{t as l}from"./database-C489WIbr.js";import{t as u}from"./receipt-text-stSsUTV5.js";import{t as d}from"./refresh-cw-tZzNDEGO.js";import{N as f,d as p,n as m}from"./index-DN09-Vts.js";import{t as h}from"./props-table-izArO1Pv.js";import{t as g}from"./label-dkUEHYaz.js";import{t as _}from"./smart-card-CVwEPwfI.js";import{i as v,t as y}from"./index.esm-BXmcbSs7.js";import{n as b,t as x}from"./card-radio-group-D_QNJ2Hm.js";import{t as S}from"./dialog-DIrJcAzq.js";var C=e=>({getError:t=>{if(e)return e[t]},hasError:t=>e!==void 0&&e[t]!==void 0}),w={hoursLabel:`Sync window`,hoursDescription:`Choose how far back the integration should reconcile records.`,optionsLabel:`Options`,optionsDescription:`Limit the run when the repair only needs a specific record family.`},T=p(),E=e=>{let{formId:t,options:n,syncOptions:r,defaultHours:a=`24`,onSubmit:o,errors:s,strings:c}=e,l=f(w,c),{getError:u}=C(Object.fromEntries(Object.entries(s??{}).map(([e,t])=>[e,Array.isArray(t)?t[0]:t]))),{control:d,handleSubmit:p}=v({defaultValues:{hours:a,options:[]}});return(0,T.jsxs)(`form`,{id:t,onSubmit:p(e=>{o({hours:Number(e.hours),financials_only:e.options.includes(`financials_only`)})}),className:m(`sync-range-dialog-form--component`,`grid gap-4`),children:[(0,T.jsxs)(`section`,{className:`sync-range-dialog-form--section grid gap-2.5`,children:[(0,T.jsxs)(`div`,{className:`sync-range-dialog-form--section-header grid gap-1`,children:[(0,T.jsx)(g,{children:l.hoursLabel}),(0,T.jsx)(i,{size:`xs`,type:`secondary`,children:l.hoursDescription})]}),(0,T.jsx)(y,{name:`hours`,control:d,rules:{required:!0},render:({field:e})=>(0,T.jsx)(x,{options:n,value:e.value,onChange:e.onChange,name:e.name,columns:2,invalid:!!u(`hours`)})}),u(`hours`)&&(0,T.jsx)(i,{type:`error`,children:u(`hours`)})]}),!!r&&r.length>0&&(0,T.jsxs)(`section`,{className:`sync-range-dialog-form--section grid gap-2.5 rounded-md border border-border/70 bg-muted/20 p-3`,children:[(0,T.jsxs)(`div`,{className:`sync-range-dialog-form--section-header grid gap-1`,children:[(0,T.jsx)(g,{children:l.optionsLabel}),(0,T.jsx)(i,{size:`xs`,type:`secondary`,children:l.optionsDescription})]}),(0,T.jsx)(y,{name:`options`,control:d,render:({field:e})=>(0,T.jsx)(b,{options:r,value:e.value,onChange:e.onChange,columns:2})})]})]})};E.displayName=`SyncRangeDialogForm`;var D=e({InlineSyncForm:()=>N,SyncDialogPattern:()=>M}),O=t(n(),1),k=[{value:`6`,label:`6 hours`,description:`Recent corrections only.`,icon:c},{value:`24`,label:`24 hours`,description:`Recommended for daily operations.`,icon:l},{value:`48`,label:`48 hours`,description:`Use after a long import pause.`,icon:d}],A=[{value:`financials_only`,label:`Financial records only`,description:`Skip profile and note updates.`,icon:u}];function j({value:e}){return e?(0,T.jsxs)(i,{size:`xs`,type:`secondary`,children:[`Submitted `,e.hours,` hours`,e.financials_only?` with financial records only.`:` with all records.`]}):null}function M(){let[e,t]=(0,O.useState)(!1),[n,r]=(0,O.useState)(null);return(0,T.jsxs)(_,{title:`Integration repair`,description:`Launch a callback-owned sync flow from any page, card, or action menu.`,headerEnd:(0,T.jsx)(j,{value:n}),children:[(0,T.jsx)(o,{type:`button`,variant:`primary`,icon:d,onClick:()=>t(!0),children:`Open sync dialog`}),(0,T.jsx)(S,{open:e,onOpenChange:t,title:`Sync records`,description:`Choose how far back the integration should reconcile records.`,formId:`sync-range-dialog-form`,size:`lg`,children:(0,T.jsx)(E,{formId:`sync-range-dialog-form`,options:k,syncOptions:A,defaultHours:`24`,strings:{hoursLabel:`Reconciliation window`,optionsLabel:`Record scope`},onSubmit:e=>{r(e),t(!1)}})})]})}function N(){let[e,t]=(0,O.useState)(null);return(0,T.jsx)(_,{title:`Inline repair form`,description:`Use the same form in a page section when the host app owns the submit button placement.`,footerSlot:(0,T.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,T.jsx)(j,{value:e}),(0,T.jsx)(o,{type:`submit`,form:`inline-sync-range-form`,variant:`primary`,children:`Run sync`})]}),className:`max-w-2xl`,children:(0,T.jsx)(E,{formId:`inline-sync-range-form`,options:k,syncOptions:A,defaultHours:`6`,onSubmit:t,strings:{hoursLabel:`Repair window`,optionsLabel:`Sync scope`}})})}var P=`import { useState } from 'react';
+import { Clock3, Database, ReceiptText, RefreshCw } from 'lucide-react';
+
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { Dialog } from '@/components/features/overlays';
+import {
+	SyncRangeDialogForm,
+	type SyncRangeDialogFormSubmit,
+} from '@/components/features/sync';
+import { Text } from '@/components/typography';
+
+const rangeOptions = [
+	{
+		value: '6',
+		label: '6 hours',
+		description: 'Recent corrections only.',
+		icon: Clock3,
+	},
+	{
+		value: '24',
+		label: '24 hours',
+		description: 'Recommended for daily operations.',
+		icon: Database,
+	},
+	{
+		value: '48',
+		label: '48 hours',
+		description: 'Use after a long import pause.',
+		icon: RefreshCw,
+	},
+];
+
+const syncOptions = [
+	{
+		value: 'financials_only',
+		label: 'Financial records only',
+		description: 'Skip profile and note updates.',
+		icon: ReceiptText,
+	},
+];
+
+function SubmittedState({ value }: { value: SyncRangeDialogFormSubmit | null }) {
+	if (!value) return null;
+	return (
+		<Text size="xs" type="secondary">
+			Submitted {value.hours} hours
+			{value.financials_only ? ' with financial records only.' : ' with all records.'}
+		</Text>
+	);
+}
+
+export function SyncDialogPattern() {
+	const [open, setOpen] = useState(false);
+	const [submitted, setSubmitted] = useState<SyncRangeDialogFormSubmit | null>(null);
+
+	return (
+		<SmartCard
+			title="Integration repair"
+			description="Launch a callback-owned sync flow from any page, card, or action menu."
+			headerEnd={<SubmittedState value={submitted} />}
+		>
+			<Button type="button" variant="primary" icon={RefreshCw} onClick={() => setOpen(true)}>
+				Open sync dialog
+			</Button>
+			<Dialog
+				open={open}
+				onOpenChange={setOpen}
+				title="Sync records"
+				description="Choose how far back the integration should reconcile records."
+				formId="sync-range-dialog-form"
+				size="lg"
+			>
+				<SyncRangeDialogForm
+					formId="sync-range-dialog-form"
+					options={rangeOptions}
+					syncOptions={syncOptions}
+					defaultHours="24"
+					strings={{
+						hoursLabel: 'Reconciliation window',
+						optionsLabel: 'Record scope',
+					}}
+					onSubmit={(values) => {
+						setSubmitted(values);
+						setOpen(false);
+					}}
+				/>
+			</Dialog>
+		</SmartCard>
+	);
+}
+
+export function InlineSyncForm() {
+	const [submitted, setSubmitted] = useState<SyncRangeDialogFormSubmit | null>(null);
+
+	return (
+		<SmartCard
+			title="Inline repair form"
+			description="Use the same form in a page section when the host app owns the submit button placement."
+			footerSlot={
+				<div className="flex items-center justify-between gap-3">
+					<SubmittedState value={submitted} />
+					<Button type="submit" form="inline-sync-range-form" variant="primary">
+						Run sync
+					</Button>
+				</div>
+			}
+			className="max-w-2xl"
+		>
+			<SyncRangeDialogForm
+				formId="inline-sync-range-form"
+				options={rangeOptions}
+				syncOptions={syncOptions}
+				defaultHours="6"
+				onSubmit={setSubmitted}
+				strings={{
+					hoursLabel: 'Repair window',
+					optionsLabel: 'Sync scope',
+				}}
+			/>
+		</SmartCard>
+	);
+}
+`;function F(e){let t={h4:`h4`,...e.components};return D||L(`Examples`,!1),N||L(`Examples.InlineSyncForm`,!0),M||L(`Examples.SyncDialogPattern`,!0),(0,T.jsxs)(r,{title:`Features · Sync`,description:`Reusable sync-range form for integration repair flows. The feature owns form state and validation wiring; consumers own dialog placement, submission, errors, and telemetry.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/sync`,children:[(0,T.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,T.jsx)(s,{name:`SyncDialogPattern`,source:P,children:(0,T.jsx)(M,{})}),(0,T.jsx)(s,{name:`InlineSyncForm`,source:P,children:(0,T.jsx)(N,{})})]}),(0,T.jsxs)(a,{title:`API`,id:`api`,children:[(0,T.jsx)(t.h4,{children:`SyncRangeDialogForm`}),(0,T.jsx)(h,{component:`SyncRangeDialogForm`})]})]})}function I(e={}){let{wrapper:t}=e.components||{};return t?(0,T.jsx)(t,{...e,children:(0,T.jsx)(F,{...e})}):F(e)}function L(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{I as default};