admin-ui-starter-kit 0.1.4 → 0.4.2

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

@@ -0,0 +1,126 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,mr as a,r as o,t as s,yr as c}from"./example-BIrQab7K.js";import{t as l}from"./building-2-zgcwuzxP.js";import{i as u,k as d,n as f,s as p}from"./index-Cz4UGUT2.js";import{t as m}from"./props-table-BR-KjRNe.js";import{t as h}from"./enhanced-combobox-Cs_-wq9p.js";import{t as g}from"./input-BPDdWrB1.js";import{c as _,r as v,t as y,u as b}from"./item-CbiuwbAN.js";var x=t(n(),1),S=e=>new Promise(t=>{setTimeout(t,e)});function C(e){let{fetchData:t,minQueryLength:n=1,debounceMs:r=250,requestDelay:i=0,preload:a=!1,onError:o}=e,[s,c]=(0,x.useState)([]),[l,u]=(0,x.useState)(``),[d,f]=(0,x.useState)(null),[p,m]=(0,x.useState)(!1),[h,g]=(0,x.useState)(!1),_=(0,x.useRef)(t),v=(0,x.useRef)(o);return _.current=t,v.current=o,(0,x.useEffect)(()=>{let e=!1,t=null;return l.length>=n||a&&l.length===0?(t=setTimeout(()=>{(async()=>{g(!0);try{i>0&&await S(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 w={placeholder:`Search...`,emptyMessage:`No results found.`,loadingMessage:`Searching...`,startTypingMessage:`Type to search.`},T=p();function E(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:u=!0,clearInputOnClose:p=!1,disabled:m=!1,className:g,onError:_,strings:v}=e,y=d(w,v),{items:b,isLoading:S,searchValue:E,setSearchValue:D,selectedValue:O,setSelectedValue:k,open:A,setOpen:j}=C({fetchData:t,minQueryLength:o,debounceMs:s,requestDelay:c,preload:l,onError:_}),M=(0,x.useMemo)(()=>({placeholder:y.placeholder,noResults:y.emptyMessage,searching:y.loadingMessage,typeToSearch:y.startTypingMessage}),[y]);return(0,T.jsx)(h,{className:f(`suggestions--component`,g),items:b,searchValue:E,onSearchValueChange:D,selectedValue:O,onSelectedValueChange:e=>{k(e),i?.(e)},getItemLabel:r,getItemKey:e=>String(n(e)),renderItem:a,minSearchLength:o,isLoading:S,strings:M,clearable:u,open:A,onOpenChange:e=>{j(e),!e&&p&&D(``)},disabled:m})}E.displayName=`SuggestionsCombobox`;var D=e({AccountSuggestionsCombobox:()=>A,HeadlessSuggestionsState:()=>j}),O=[{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 k(e){let t=e.trim().toLowerCase();return t?O.filter(e=>`${e.name} ${e.plan} ${e.region}`.toLowerCase().includes(t)):O}function A(){let[e,t]=(0,x.useState)(null);return(0,T.jsxs)(`div`,{className:`max-w-md space-y-3`,children:[(0,T.jsx)(E,{fetchData:k,itemKey:e=>e.id,itemText:e=>e.name,onValueChange:t,preload:!0,minQueryLength:0,clearInputOnClose:!0,renderItem:e=>(0,T.jsxs)(y,{className:`border-0 p-0`,children:[(0,T.jsx)(_,{children:(0,T.jsx)(l,{className:`size-4`,"aria-hidden":!0})}),(0,T.jsxs)(v,{children:[(0,T.jsx)(b,{children:e.name}),(0,T.jsxs)(r,{size:`xs`,type:`secondary`,children:[e.plan,` - `,e.region]})]})]}),strings:{placeholder:`Search accounts`,emptyMessage:`No accounts match this query.`}}),e?(0,T.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:`Selected`}),(0,T.jsx)(c,{variant:`secondary`,children:e.name})]}):null]})}function j(){let e=C({fetchData:k,minQueryLength:1,debounceMs:0,preload:!1});return(0,T.jsxs)(`div`,{className:`max-w-md space-y-3`,children:[(0,T.jsxs)(`div`,{className:`flex gap-2`,children:[(0,T.jsx)(g,{value:e.searchValue,onChange:t=>e.setSearchValue(t.target.value),placeholder:`Type an account`}),(0,T.jsx)(o,{type:`button`,variant:`secondary`,icon:u,children:`Search`})]}),(0,T.jsx)(`div`,{className:`rounded-md border border-border/60`,children:e.items.length===0?(0,T.jsx)(`div`,{className:`px-3 py-2`,children:(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:`Enter a query to load consumer-owned results.`})}):e.items.map(t=>(0,T.jsxs)(o,{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,T.jsx)(r,{size:`sm`,weight:`medium`,children:t.name}),(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:t.plan})]},t.id))})]})}var M=`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, 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 className="border-0 p-0">
+						<ItemMedia>
+							<Building2 className="size-4" aria-hidden />
+						</ItemMedia>
+						<ItemContent>
+							<ItemTitle>{item.name}</ItemTitle>
+							<Text size="xs" type="secondary">
+								{item.plan} - {item.region}
+							</Text>
+						</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 N(e){let t={h4:`h4`,...e.components};return D||F(`Examples`,!1),A||F(`Examples.AccountSuggestionsCombobox`,!0),j||F(`Examples.HeadlessSuggestionsState`,!0),(0,T.jsxs)(i,{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,T.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,T.jsx)(s,{name:`AccountSuggestionsCombobox`,source:M,children:(0,T.jsx)(A,{})}),(0,T.jsx)(s,{name:`HeadlessSuggestionsState`,source:M,children:(0,T.jsx)(j,{})})]}),(0,T.jsxs)(a,{title:`API`,id:`api`,children:[(0,T.jsx)(t.h4,{children:`SuggestionsCombobox`}),(0,T.jsx)(m,{component:`SuggestionsCombobox`})]})]})}function P(e={}){let{wrapper:t}=e.components||{};return t?(0,T.jsx)(t,{...e,children:(0,T.jsx)(N,{...e})}):N(e)}function F(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{P as default};

package/dist/showcase/assets/switch-5f1vwEZ7.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Ft as n,Gn as r,Ht as ee,Jn as te,Pt as i,Qn as a,Zn as ne,cr as re,g as ie,nr as ae,rr as oe,sn as se,tr as o}from"./example-BIrQab7K.js";import{n as ce,s}from"./index-Cz4UGUT2.js";import{t as c}from"./useControlled-Cpg8gDqb.js";import{t as l}from"./useValueChanged-Bz3WRSDy.js";import{a as u,n as d,s as f,t as p}from"./LabelableContext-CDv6gSfU.js";import{t as m}from"./FormContext-lmjYAh4E.js";import{t as h}from"./useLabelableId-Czdg4nY8.js";import{t as le}from"./useAriaLabelledBy-etINba8U.js";var g=e(t()),_=g.createContext(void 0);function v(){let e=g.useContext(_);if(e===void 0)throw Error(o(63));return e}var y=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}({}),b={...f,checked(e){return e?{[y.checked]:``}:{[y.unchecked]:``}}},x=s(),S=g.forwardRef(function(e,t){let{checked:o,className:ce,defaultChecked:s,"aria-labelledby":f,form:v,id:y,inputRef:S,name:C,nativeButton:w=!1,onCheckedChange:T,readOnly:E=!1,required:D=!1,disabled:O=!1,render:ue,uncheckedValue:k,value:A,style:de,...j}=e,{clearErrors:M}=m(),{state:N,setTouched:P,setDirty:F,validityData:I,setFilled:L,setFocused:R,shouldValidateOnChange:fe,validationMode:z,disabled:B,name:V,validation:H}=u(),{labelId:U}=p(),W=B||O,G=V??C,K=g.useRef(null),pe=ne(K,S,H.inputRef),q=g.useRef(null),J=ie(),Y=h({id:y,implicit:!1,controlRef:q}),X=w?void 0:Y,[Z,me]=c({controlled:o,default:!!s,name:`Switch`,state:`checked`});d(q,J,Z),oe(()=>{K.current&&L(K.current.checked)},[K,L]),l(Z,()=>{M(G),F(Z!==I.initialValue),L(Z),fe()?H.commit(Z):H.commit(Z,!0)});let{getButtonProps:he,buttonRef:ge}=a({disabled:W,native:w}),_e=le(f,U,K,!w,X),Q={id:w?Y:J,role:`switch`,"aria-checked":Z,"aria-readonly":E||void 0,"aria-required":D||void 0,"aria-labelledby":_e,onFocus(){W||R(!0)},onBlur(){let e=K.current;!e||W||(P(!0),R(!1),z===`onBlur`&&H.commit(e.checked))},onClick(e){if(E||W)return;e.preventDefault();let t=K.current;t&&t.dispatchEvent(new(re(t)).PointerEvent(`click`,{bubbles:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,altKey:e.altKey,metaKey:e.metaKey}))}},ve=ae({checked:Z,disabled:W,form:v,id:X,name:G,required:D,style:G?n:i,tabIndex:-1,type:`checkbox`,"aria-hidden":!0,ref:pe,onChange(e){if(e.nativeEvent.defaultPrevented)return;if(E){e.preventDefault();return}let t=e.currentTarget.checked,n=ee(se,e.nativeEvent);T?.(t,n),!n.isCanceled&&me(t)},onFocus(){q.current?.focus()}},H.getInputValidationProps,A===void 0?te:{value:A}),$=g.useMemo(()=>({...N,checked:Z,disabled:W,readOnly:E,required:D}),[N,Z,W,E,D]),ye=r(`span`,e,{state:$,ref:[t,q,ge],props:[Q,H.getValidationProps,j,he],stateAttributesMapping:b});return(0,x.jsxs)(_.Provider,{value:$,children:[ye,!Z&&G&&k!==void 0&&(0,x.jsx)(`input`,{type:`hidden`,form:v,name:G,value:k}),(0,x.jsx)(`input`,{...ve,suppressHydrationWarning:!0})]})}),C=g.forwardRef(function(e,t){let{render:n,className:ee,style:te,...i}=e;return r(`span`,e,{state:v(),ref:t,stateAttributesMapping:b,props:i})});function w({className:e,size:t=`default`,...n}){return(0,x.jsx)(S,{"data-slot":`switch`,"data-size":t,className:ce(`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,x.jsx)(C,{"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{w as t};

package/dist/showcase/assets/switch-arjWj-n7.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{n,s as r}from"./index-Cz4UGUT2.js";import{t as i}from"./switch-5f1vwEZ7.js";var a=e(t(),1),o=r(),s=(0,a.forwardRef)(function({onCheckedChange:e,invalid:t,className:r,...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:n(`switch--component`,t&&`data-[state=unchecked]:border-destructive`,r)})});s.displayName=`Switch`;var c=(0,a.forwardRef)(function({onCheckedChange:e,invalid:t,className:r,...a},s){return(0,o.jsx)(i,{ref:s,...a,onCheckedChange:t=>e?.(t),"aria-invalid":t||void 0,className:n(t&&`data-[state=unchecked]:border-destructive`,r)})});c.displayName=`ToggleSwitch`;export{c as n,s as t};

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

@@ -0,0 +1,107 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,mr as a,r as o,t as s}from"./example-BIrQab7K.js";import{t as c}from"./clock-3-DDEsD4Tb.js";import{t as l}from"./database-BVwSMeGM.js";import{t as u}from"./receipt-text-CeBruM29.js";import{t as d}from"./refresh-cw-DnxNcOMm.js";import{k as f,n as p,s as m}from"./index-Cz4UGUT2.js";import{t as h}from"./props-table-BR-KjRNe.js";import{t as g}from"./label-BlCKlLE-.js";import{i as _,t as v}from"./index.esm-Ducg7a0P.js";import{n as y,t as b}from"./card-radio-group-Du6yaMZ-.js";import{t as x}from"./dialog-B85US9Ue.js";var S=e=>({getError:t=>{if(e)return e[t]},hasError:t=>e!==void 0&&e[t]!==void 0}),C={optionsLabel:`Options`},w=m(),T=e=>{let{formId:t,options:n,syncOptions:i,defaultHours:a=`24`,onSubmit:o,errors:s,strings:c}=e,l=f(C,c),{getError:u}=S(Object.fromEntries(Object.entries(s??{}).map(([e,t])=>[e,Array.isArray(t)?t[0]:t]))),{control:d,handleSubmit:m}=_({defaultValues:{hours:a,options:[]}});return(0,w.jsxs)(`form`,{id:t,onSubmit:m(e=>{o({hours:Number(e.hours),financials_only:e.options.includes(`financials_only`)})}),className:p(`sync-range-dialog-form--component`,`space-y-4`),children:[(0,w.jsx)(v,{name:`hours`,control:d,rules:{required:!0},render:({field:e})=>(0,w.jsx)(b,{options:n,value:e.value,onChange:e.onChange,name:e.name,columns:2})}),u(`hours`)&&(0,w.jsx)(r,{type:`error`,children:u(`hours`)}),!!i&&i.length>0&&(0,w.jsxs)(`div`,{className:`space-y-2 border-t pt-2`,children:[(0,w.jsx)(g,{children:l.optionsLabel}),(0,w.jsx)(v,{name:`options`,control:d,render:({field:e})=>(0,w.jsx)(y,{options:i,value:e.value,onChange:e.onChange,columns:2})})]})]})};T.displayName=`SyncRangeDialogForm`;var E=e({InlineSyncForm:()=>M,SyncDialogPattern:()=>j}),D=t(n(),1),O=[{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}],k=[{value:`financials_only`,label:`Financial records only`,description:`Skip profile and note updates.`,icon:u}];function A({value:e}){return e?(0,w.jsxs)(r,{size:`xs`,type:`secondary`,children:[`Submitted `,e.hours,` hours`,e.financials_only?` with financial records only.`:` with all records.`]}):null}function j(){let[e,t]=(0,D.useState)(!1),[n,r]=(0,D.useState)(null);return(0,w.jsxs)(`div`,{className:`space-y-3`,children:[(0,w.jsx)(o,{type:`button`,variant:`primary`,icon:d,onClick:()=>t(!0),children:`Open sync dialog`}),(0,w.jsx)(A,{value:n}),(0,w.jsx)(x,{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,w.jsx)(T,{formId:`sync-range-dialog-form`,options:O,syncOptions:k,defaultHours:`24`,onSubmit:e=>{r(e),t(!1)}})})]})}function M(){let[e,t]=(0,D.useState)(null);return(0,w.jsxs)(`div`,{className:`max-w-2xl space-y-3`,children:[(0,w.jsx)(T,{formId:`inline-sync-range-form`,options:O,syncOptions:k,defaultHours:`6`,onSubmit:t,strings:{optionsLabel:`Sync scope`}}),(0,w.jsxs)(`div`,{className:`flex items-center justify-between gap-3 border-t border-border/60 pt-3`,children:[(0,w.jsx)(A,{value:e}),(0,w.jsx)(o,{type:`submit`,form:`inline-sync-range-form`,variant:`primary`,children:`Run sync`})]})]})}var N=`import { useState } from 'react';
+import { Clock3, Database, ReceiptText, RefreshCw } from 'lucide-react';
+
+import { Button } from '@/components/base/buttons';
+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 (
+		<div className="space-y-3">
+			<Button type="button" variant="primary" icon={RefreshCw} onClick={() => setOpen(true)}>
+				Open sync dialog
+			</Button>
+			<SubmittedState value={submitted} />
+			<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"
+					onSubmit={(values) => {
+						setSubmitted(values);
+						setOpen(false);
+					}}
+				/>
+			</Dialog>
+		</div>
+	);
+}
+
+export function InlineSyncForm() {
+	const [submitted, setSubmitted] = useState<SyncRangeDialogFormSubmit | null>(null);
+
+	return (
+		<div className="max-w-2xl space-y-3">
+			<SyncRangeDialogForm
+				formId="inline-sync-range-form"
+				options={rangeOptions}
+				syncOptions={syncOptions}
+				defaultHours="6"
+				onSubmit={setSubmitted}
+				strings={{ optionsLabel: 'Sync scope' }}
+			/>
+			<div className="flex items-center justify-between gap-3 border-t border-border/60 pt-3">
+				<SubmittedState value={submitted} />
+				<Button type="submit" form="inline-sync-range-form" variant="primary">
+					Run sync
+				</Button>
+			</div>
+		</div>
+	);
+}
+`;function P(e){let t={h4:`h4`,...e.components};return E||I(`Examples`,!1),M||I(`Examples.InlineSyncForm`,!0),j||I(`Examples.SyncDialogPattern`,!0),(0,w.jsxs)(i,{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,w.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,w.jsx)(s,{name:`SyncDialogPattern`,source:N,children:(0,w.jsx)(j,{})}),(0,w.jsx)(s,{name:`InlineSyncForm`,source:N,children:(0,w.jsx)(M,{})})]}),(0,w.jsxs)(a,{title:`API`,id:`api`,children:[(0,w.jsx)(t.h4,{children:`SyncRangeDialogForm`}),(0,w.jsx)(h,{component:`SyncRangeDialogForm`})]})]})}function F(e={}){let{wrapper:t}=e.components||{};return t?(0,w.jsx)(t,{...e,children:(0,w.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/table-ClYkDRAk.js

@@ -0,0 +1 @@
+import"./chunk-QTnfLwEv.js";import{n as e}from"./react-dom-Bz4cALsF.js";import{n as t,s as n}from"./index-Cz4UGUT2.js";e();var r=n();function i({className:e,containerClassName:n,...i}){return(0,r.jsx)(`div`,{"data-slot":`table-container`,className:t(`relative w-full overflow-x-auto`,n),children:(0,r.jsx)(`table`,{"data-slot":`table`,className:t(`w-full caption-bottom text-sm`,e),...i})})}function a({className:e,...n}){return(0,r.jsx)(`thead`,{"data-slot":`table-header`,className:t(`[&_tr]:border-b`,e),...n})}function o({className:e,...n}){return(0,r.jsx)(`tbody`,{"data-slot":`table-body`,className:t(`[&_tr:last-child]:border-0`,e),...n})}function s({className:e,...n}){return(0,r.jsx)(`tr`,{"data-slot":`table-row`,className:t(`hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors`,e),...n})}function c({className:e,...n}){return(0,r.jsx)(`th`,{"data-slot":`table-head`,className:t(`text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0`,e),...n})}function l({className:e,...n}){return(0,r.jsx)(`td`,{"data-slot":`table-cell`,className:t(`p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0`,e),...n})}function u({className:e,...n}){return(0,r.jsx)(`caption`,{"data-slot":`table-caption`,className:t(`text-muted-foreground mt-4 text-sm`,e),...n})}export{c as a,l as i,o as n,a as o,u as r,s,i as t};