admin-ui-starter-kit 0.5.0 → 0.6.1

package/dist/showcase/assets/combobox-DpJTW_Rq.js

@@ -0,0 +1,685 @@
+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-D-N8Ze16.js";import{t as s}from"./example-PsbgbESI.js";import{N as c,d as l,n as u}from"./index-QESvAJrb.js";import{t as d}from"./props-table-CCcohuyT.js";import{r as f,t as p}from"./avatar-D3kvVy00.js";import{t as m}from"./customers-DvBxRjHv.js";import{t as h}from"./orders-BFwWtubb.js";import{i as g,n as _,t as v}from"./fetchers-DHuMQ6PN.js";import{i as y}from"./index.esm-BXmcbSs7.js";import{n as b,r as x,t as S}from"./enhanced-combobox-DAKQyFUg.js";import{t as C}from"./form-field-AWNJL9FM.js";var w=t(n(),1),T=l(),ee={...x,error:`Unable to load options.`};function E({fetcher:e,value:t,defaultValue:n=null,onValueChange:r,onAfterFetch:i,onError:o,getKey:s,getLabel:l,getDescription:d,getMeta:f,renderOption:p,limit:m=10,debounceMs:h=300,preload:g=!0,minSearchLength:_=0,errorMessage:v,strings:y,disabled:b,...x}){let C=c(ee,y),E=t!==void 0,[D,O]=(0,w.useState)(n),k=E?t:D,[A,j]=(0,w.useState)(``),[M,N]=(0,w.useState)([]),[P,F]=(0,w.useState)(!1),[I,L]=(0,w.useState)(null),R=(0,w.useRef)(0),z=A.trim(),B=(0,w.useCallback)(e=>{E||O(e),r?.(e)},[E,r]);(0,w.useEffect)(()=>{if(b)return;if(!(z.length>0?z.length>=_:g)){N([]),F(!1),L(null);return}let t=R.current+1;R.current=t;let n=new AbortController,r={query:z,limit:m,signal:n.signal},a=window.setTimeout(()=>{F(!0),L(null),e(r).then(e=>{n.signal.aborted||R.current!==t||(N(e),i?.(e,r))}).catch(e=>{n.signal.aborted||R.current!==t||(N([]),L(e),o?.(e,r))}).finally(()=>{!n.signal.aborted&&R.current===t&&F(!1)})},h);return()=>{window.clearTimeout(a),n.abort()}},[h,b,e,m,_,i,o,g,z]);let V=(0,w.useCallback)(e=>{if(p)return p(e,{query:z,isSelected:k?s(k)===s(e):!1});let t=d?.(e),n=f?.(e);return(0,T.jsxs)(`span`,{className:`async-resource-combobox--option flex min-w-0 items-center gap-space-md text-xs leading-tight`,children:[(0,T.jsx)(a,{tag:`span`,size:`inherit`,weight:`medium`,className:`min-w-0 shrink truncate`,children:l(e)}),(!!t||!!n)&&(0,T.jsxs)(`span`,{className:`inline-flex min-w-0 flex-1 items-center gap-space-sm overflow-hidden text-xs text-muted-foreground`,children:[!!t&&(0,T.jsx)(a,{tag:`span`,size:`inherit`,type:`secondary`,className:`min-w-0 truncate`,children:t}),!!n&&(0,T.jsx)(a,{tag:`span`,size:`inherit`,type:`secondary`,className:`min-w-0 truncate opacity-75`,children:n})]})]})},[d,s,l,f,p,k,z]),H=(0,w.useMemo)(()=>{if(I)return v??C.error},[I,v,C.error]);return(0,T.jsxs)(`div`,{"data-component":`async-resource-combobox`,"data-slot":`async-resource-combobox`,className:u(`async-resource-combobox--component`,x.className),children:[(0,T.jsx)(S,{...x,className:void 0,disabled:b,items:M,selectedValue:k??null,onSelectedValueChange:B,searchValue:A,onSearchValueChange:j,getItemLabel:l,getItemKey:s,isLoading:P,minSearchLength:_,strings:C,renderItem:V,error:typeof H==`string`?H:void 0}),H&&typeof H!=`string`&&(0,T.jsx)(`div`,{className:`async-resource-combobox--error mt-1.5`,children:H})]})}E.displayName=`AsyncResourceCombobox`;var D=e({AsyncCustomers:()=>z,AsyncDebouncedSearch:()=>V,AsyncResourceCustomerPicker:()=>B,AsyncWithLoadMore:()=>H,CssVariableScale:()=>G,CustomGroupLabels:()=>W,CustomItemRendering:()=>U,Default:()=>A,Disabled:()=>K,FormFieldIntegration:()=>X,GroupedTeamByRole:()=>R,Invalid:()=>q,MinSearchLength:()=>J,MultipleApplyButton:()=>F,MultipleCloseOnSelect:()=>I,MultipleGrouped:()=>L,MultipleSelect:()=>P,RealisticCustomerPicker:()=>Y,SingleCreatable:()=>N,SingleHighlightMatch:()=>M,SingleSelect:()=>j}),O=[{id:`apple`,name:`Apple`,group:`Pomes`},{id:`pear`,name:`Pear`,group:`Pomes`},{id:`banana`,name:`Banana`,group:`Tropical`},{id:`mango`,name:`Mango`,group:`Tropical`},{id:`kiwi`,name:`Kiwi`,group:`Tropical`},{id:`cherry`,name:`Cherry`,group:`Stone`},{id:`peach`,name:`Peach`,group:`Stone`},{id:`plum`,name:`Plum`,group:`Stone`}];function k(e){return(0,w.useMemo)(()=>{let t=e.toLowerCase().trim();return t?O.filter(e=>e.name.toLowerCase().includes(t)):O},[e])}function A(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,T.jsx)(S,{items:k(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0}),(0,T.jsxs)(a,{size:`xs`,type:`secondary`,children:[`value: `,n?.name??`—`]})]})}function j(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,T.jsx)(S,{items:k(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function M(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,T.jsx)(S,{items:k(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,highlightMatch:!0,strings:{placeholder:`Type "an" or "ea"…`}})})}function N(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(O),[i,o]=(0,w.useState)(null);return(0,T.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,T.jsx)(S,{items:(0,w.useMemo)(()=>{let t=e.toLowerCase().trim();return t?n.filter(e=>e.name.toLowerCase().includes(t)):n},[n,e]),searchValue:e,onSearchValueChange:t,selectedValue:i,onSelectedValueChange:o,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,creatable:!0,onCreate:e=>{let n={id:e.toLowerCase(),name:e};r(e=>[...e,n]),o(n),t(``)},strings:{placeholder:`Pick or create…`,createNew:`Create`}}),(0,T.jsxs)(a,{size:`xs`,type:`secondary`,children:[`items: `,n.length]})]})}function P(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)([]);return(0,T.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,T.jsx)(b,{items:k(e),searchValue:e,onSearchValueChange:t,selectedValues:n,onSelectedValuesChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,strings:{placeholder:`Find a fruit…`,noResults:`Nothing matches`}}),(0,T.jsxs)(a,{size:`xs`,type:`secondary`,children:[`selected: `,n.map(e=>e.name).join(`, `)||`—`]})]})}function F(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)([]);return(0,T.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,T.jsx)(b,{items:k(e),searchValue:e,onSearchValueChange:t,selectedValues:n,onSelectedValuesChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,applyButton:!0,strings:{placeholder:`Pick fruits…`}}),(0,T.jsxs)(a,{size:`xs`,type:`secondary`,children:[`committed: `,n.map(e=>e.name).join(`, `)||`—`]})]})}function I(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)([]);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,T.jsx)(b,{items:k(e),searchValue:e,onSearchValueChange:t,selectedValues:n,onSelectedValuesChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,closeOnSelect:!0,strings:{placeholder:`Add a fruit…`}})})}function L(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)([]);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,T.jsx)(b,{items:k(e),searchValue:e,onSearchValueChange:t,selectedValues:n,onSelectedValuesChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,getItemGroup:e=>e.group??`Other`,minSearchLength:0})})}function R(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,T.jsx)(S,{items:(0,w.useMemo)(()=>{let t=e.toLowerCase().trim();return t?g.filter(e=>e.name.toLowerCase().includes(t)||e.role.toLowerCase().includes(t)):g},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,getItemGroup:e=>e.role,minSearchLength:0,strings:{placeholder:`Pick a teammate…`}})})}function z(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)([]),[i,a]=(0,w.useState)(!0),[o,s]=(0,w.useState)(null);return(0,w.useEffect)(()=>{let e=!0;return a(!0),v().then(t=>{e&&(r(t),a(!1))}),()=>{e=!1}},[]),(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,T.jsx)(S,{items:(0,w.useMemo)(()=>{let t=e.toLowerCase().trim();return t?n.filter(e=>e.name.toLowerCase().includes(t)||e.email.toLowerCase().includes(t)):n},[n,e]),searchValue:e,onSearchValueChange:t,selectedValue:o,onSelectedValueChange:s,getItemLabel:e=>`${e.name} — ${e.email}`,getItemKey:e=>e.id,isLoading:i,minSearchLength:0,strings:{placeholder:`Search customers…`,searching:`Loading customers…`}})})}function B(){let[e,t]=(0,w.useState)(null);return(0,T.jsxs)(`div`,{className:`flex flex-col gap-2 w-80`,children:[(0,T.jsx)(E,{fetcher:async({query:e})=>{let t=await v(),n=e.toLowerCase().trim();return n?t.filter(e=>e.name.toLowerCase().includes(n)||e.email.toLowerCase().includes(n)):t},value:e,onValueChange:t,getKey:e=>e.id,getLabel:e=>e.name,getDescription:e=>e.email,getMeta:e=>`${e.city}, ${e.country}`,strings:{placeholder:`Search customer resources…`}}),(0,T.jsxs)(a,{size:`xs`,type:`secondary`,children:[`selected: `,e?.name??`—`]})]})}function V(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)([]),[i,a]=(0,w.useState)(!1),[o,s]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,T.jsx)(S,{items:n,searchValue:e,onSearchValueChange:t,onSearch:e=>{a(!0),_().then(t=>{let n=e.toLowerCase().trim();r(n?t.filter(e=>e.name.toLowerCase().includes(n)):t),a(!1)})},debounceMs:250,selectedValue:o,onSelectedValueChange:s,getItemLabel:e=>e.name,getItemKey:e=>e.id,isLoading:i,minSearchLength:2,strings:{placeholder:`Type a name…`,typeMore:`Type at least 2 characters`,searching:`Searching…`}})})}function H(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(1),[i,o]=(0,w.useState)(!1),[s,c]=(0,w.useState)(null),l=m.slice(0,n*4),u=l.length<m.length;return(0,T.jsxs)(`div`,{className:`flex flex-col gap-2 w-80`,children:[(0,T.jsx)(S,{items:l,searchValue:e,onSearchValueChange:t,selectedValue:s,onSelectedValueChange:c,getItemLabel:e=>e.name,getItemKey:e=>e.id,hasMore:u,onLoadMore:()=>{o(!0),setTimeout(()=>{r(e=>e+1),o(!1)},350)},isLoadingMore:i,minSearchLength:0,strings:{placeholder:`Scroll for more…`,loadingMore:`Loading more…`}}),(0,T.jsxs)(a,{size:`xs`,type:`secondary`,children:[`page `,n,` • `,l.length,`/`,m.length]})]})}function U(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex w-full max-w-sm flex-col gap-2`,children:(0,T.jsx)(S,{items:(0,w.useMemo)(()=>{let t=e.toLowerCase().trim();return t?m.filter(e=>e.name.toLowerCase().includes(t)):m},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,renderItem:e=>(0,T.jsxs)(`div`,{className:`flex w-full items-center gap-space-md text-xs`,children:[(0,T.jsx)(p,{className:`size-avatar-sm`,children:(0,T.jsx)(f,{children:e.name.split(` `).map(e=>e[0]).join(``)})}),(0,T.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-space-2xs`,children:[(0,T.jsx)(a,{size:`inherit`,weight:`semibold`,className:`leading-tight`,children:e.name}),(0,T.jsx)(a,{size:`inherit`,type:`secondary`,className:`text-xs leading-tight`,children:e.email})]}),(0,T.jsx)(i,{variant:`secondary`,size:`small`,children:e.country})]}),strings:{placeholder:`Pick a customer…`}})})}function W(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,T.jsx)(S,{items:(0,w.useMemo)(()=>{let t=e.toLowerCase().trim();return t?h.filter(e=>e.number.toLowerCase().includes(t)):h},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.number,getItemKey:e=>e.id,getItemGroup:e=>e.status,renderGroupLabel:e=>(0,T.jsx)(`div`,{className:`flex items-center gap-space-sm`,children:(0,T.jsx)(a,{size:`xxs`,type:`secondary`,weight:`semibold`,className:`uppercase tracking-wide`,children:e})}),minSearchLength:0,strings:{placeholder:`Find an order…`}})})}function G(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,style:{"--space-scale":`1.08`,"--density-scale":`1.04`},children:(0,T.jsx)(S,{size:`default`,items:k(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function K(){let[e,t]=(0,w.useState)(``);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,T.jsx)(S,{items:O,searchValue:e,onSearchValueChange:t,selectedValue:O[0]??null,onSelectedValueChange:()=>{},getItemLabel:e=>e.name,getItemKey:e=>e.id,disabled:!0,minSearchLength:0})})}function q(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,T.jsx)(S,{items:k(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,required:!0,error:`A selection is required`})})}function J(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,T.jsx)(S,{items:(0,w.useMemo)(()=>{let t=e.toLowerCase().trim();return t.length<2?[]:m.filter(e=>e.name.toLowerCase().includes(t))},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:2,strings:{placeholder:`Type to search…`,typeMore:`Type at least 2 characters`}})})}function Y(){let[e,t]=(0,w.useState)(``),[n,r]=(0,w.useState)(null);return(0,T.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,T.jsx)(S,{items:(0,w.useMemo)(()=>{let t=e.toLowerCase().trim();return t?m.filter(e=>e.name.toLowerCase().includes(t)||e.email.toLowerCase().includes(t)):m},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>`${e.name} — ${e.email}`,getItemKey:e=>e.id,minSearchLength:0,strings:{placeholder:`Search customers…`}})})}function X(){let{control:e,watch:t}=y({defaultValues:{assignee:null},mode:`onBlur`}),[n,r]=(0,w.useState)(``),o=t(`assignee`),s=(0,w.useMemo)(()=>{let e=n.toLowerCase().trim();return e?g.filter(t=>t.name.toLowerCase().includes(e)||t.role.toLowerCase().includes(e)):g},[n]);return(0,T.jsxs)(`div`,{className:`grid w-full max-w-sm gap-2`,children:[(0,T.jsx)(C,{name:`assignee`,control:e,label:`Assignee`,required:!0,hint:`Search by teammate or role.`,rules:{required:`Choose an assignee`},children:(e,t,o)=>(0,T.jsx)(S,{name:e.name,items:s,searchValue:n,onSearchValueChange:r,selectedValue:e.value,onSelectedValueChange:e.onChange,onBlur:e.onBlur,invalid:o,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,strings:{placeholder:`Assign owner…`},renderItem:e=>(0,T.jsxs)(`div`,{className:`flex w-full items-center gap-space-md text-xs`,children:[(0,T.jsx)(p,{className:`size-avatar-sm`,children:(0,T.jsx)(f,{children:e.name.split(` `).map(e=>e[0]).join(``)})}),(0,T.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,T.jsx)(a,{size:`inherit`,weight:`semibold`,className:`leading-tight`,children:e.name}),(0,T.jsx)(a,{size:`inherit`,type:`secondary`,className:`text-xs leading-tight`,children:e.role})]}),(0,T.jsx)(i,{variant:`secondary`,size:`small`,children:e.role})]})})}),(0,T.jsxs)(a,{size:`xs`,type:`secondary`,children:[`Selected owner: `,o?.name??`none`]})]})}var Z=`import { useEffect, useMemo, useState, type CSSProperties } from 'react';
+import { useForm } from 'react-hook-form';
+import { AsyncResourceCombobox, EnhancedCombobox, EnhancedComboboxMultiple } from '@/components/base/combobox';
+import { ControlledFormField } from '@/components/base/forms';
+import { Avatar, AvatarFallback } from '@/components/base/display/avatar';
+import { Badge } from '@/components/base/badge';
+import { Text } from '@/components/typography';
+import {
+	MOCK_CUSTOMERS,
+	MOCK_ORDERS,
+	MOCK_TEAM,
+	mockListCustomers,
+	mockListTeam,
+} from '@/preview/_mocks';
+
+type Fruit = { id: string; name: string; group?: string };
+type AssigneeFormValues = { assignee: typeof MOCK_TEAM[number] | null };
+
+const ALL: Fruit[] = [
+	{ id: 'apple', name: 'Apple', group: 'Pomes' },
+	{ id: 'pear', name: 'Pear', group: 'Pomes' },
+	{ id: 'banana', name: 'Banana', group: 'Tropical' },
+	{ id: 'mango', name: 'Mango', group: 'Tropical' },
+	{ id: 'kiwi', name: 'Kiwi', group: 'Tropical' },
+	{ id: 'cherry', name: 'Cherry', group: 'Stone' },
+	{ id: 'peach', name: 'Peach', group: 'Stone' },
+	{ id: 'plum', name: 'Plum', group: 'Stone' },
+];
+
+function useFiltered(search: string) {
+	return useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (!q) return ALL;
+		return ALL.filter((f) => f.name.toLowerCase().includes(q));
+	}, [search]);
+}
+
+// =====================================================================
+// Single
+// =====================================================================
+
+export function Default() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<Fruit | null>(null);
+	const filtered = useFiltered(search);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+			/>
+			<Text size="xs" type="secondary">value: {selected?.name ?? '—'}</Text>
+		</div>
+	);
+}
+
+export function SingleSelect() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<Fruit | null>(null);
+	const filtered = useFiltered(search);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+			/>
+		</div>
+	);
+}
+
+export function SingleHighlightMatch() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<Fruit | null>(null);
+	const filtered = useFiltered(search);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+				highlightMatch
+				strings={{ placeholder: 'Type "an" or "ea"…' }}
+			/>
+		</div>
+	);
+}
+
+export function SingleCreatable() {
+	const [search, setSearch] = useState('');
+	const [items, setItems] = useState<Fruit[]>(ALL);
+	const [selected, setSelected] = useState<Fruit | null>(null);
+	const filtered = useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (!q) return items;
+		return items.filter((f) => f.name.toLowerCase().includes(q));
+	}, [items, search]);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+				creatable
+				onCreate={(value) => {
+					const next: Fruit = { id: value.toLowerCase(), name: value };
+					setItems((prev) => [...prev, next]);
+					setSelected(next);
+					setSearch('');
+				}}
+				strings={{ placeholder: 'Pick or create…', createNew: 'Create' }}
+			/>
+			<Text size="xs" type="secondary">items: {items.length}</Text>
+		</div>
+	);
+}
+
+// =====================================================================
+// Multiple
+// =====================================================================
+
+export function MultipleSelect() {
+	const [search, setSearch] = useState('');
+	const [selectedMany, setSelectedMany] = useState<Fruit[]>([]);
+	const filtered = useFiltered(search);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedComboboxMultiple
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValues={selectedMany}
+				onSelectedValuesChange={setSelectedMany}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+				strings={{ placeholder: 'Find a fruit…', noResults: 'Nothing matches' }}
+			/>
+			<Text size="xs" type="secondary">
+				selected: {selectedMany.map((s) => s.name).join(', ') || '—'}
+			</Text>
+		</div>
+	);
+}
+
+export function MultipleApplyButton() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<Fruit[]>([]);
+	const filtered = useFiltered(search);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedComboboxMultiple
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValues={selected}
+				onSelectedValuesChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+				applyButton
+				strings={{ placeholder: 'Pick fruits…' }}
+			/>
+			<Text size="xs" type="secondary">
+				committed: {selected.map((s) => s.name).join(', ') || '—'}
+			</Text>
+		</div>
+	);
+}
+
+export function MultipleCloseOnSelect() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<Fruit[]>([]);
+	const filtered = useFiltered(search);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedComboboxMultiple
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValues={selected}
+				onSelectedValuesChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+				closeOnSelect
+				strings={{ placeholder: 'Add a fruit…' }}
+			/>
+		</div>
+	);
+}
+
+// =====================================================================
+// Grouped
+// =====================================================================
+
+export function MultipleGrouped() {
+	const [search, setSearch] = useState('');
+	const [selectedMany, setSelectedMany] = useState<Fruit[]>([]);
+	const filtered = useFiltered(search);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedComboboxMultiple
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValues={selectedMany}
+				onSelectedValuesChange={setSelectedMany}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				getItemGroup={(f) => f.group ?? 'Other'}
+				minSearchLength={0}
+			/>
+		</div>
+	);
+}
+
+export function GroupedTeamByRole() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<typeof MOCK_TEAM[number] | null>(null);
+	const filtered = useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (!q) return MOCK_TEAM;
+		return MOCK_TEAM.filter((t) => t.name.toLowerCase().includes(q) || t.role.toLowerCase().includes(q));
+	}, [search]);
+	return (
+		<div className="flex flex-col gap-2 w-80">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(t) => t.name}
+				getItemKey={(t) => t.id}
+				getItemGroup={(t) => t.role}
+				minSearchLength={0}
+				strings={{ placeholder: 'Pick a teammate…' }}
+			/>
+		</div>
+	);
+}
+
+// =====================================================================
+// Async / fetcher
+// =====================================================================
+
+export function AsyncCustomers() {
+	const [search, setSearch] = useState('');
+	const [items, setItems] = useState<typeof MOCK_CUSTOMERS>([]);
+	const [loading, setLoading] = useState(true);
+	const [selected, setSelected] = useState<typeof MOCK_CUSTOMERS[number] | null>(null);
+	useEffect(() => {
+		let active = true;
+		setLoading(true);
+		mockListCustomers().then((data) => {
+			if (!active) return;
+			setItems(data);
+			setLoading(false);
+		});
+		return () => { active = false; };
+	}, []);
+	const filtered = useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (!q) return items;
+		return items.filter((c) => c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q));
+	}, [items, search]);
+	return (
+		<div className="flex flex-col gap-2 w-80">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(c) => \`\${c.name} — \${c.email}\`}
+				getItemKey={(c) => c.id}
+				isLoading={loading}
+				minSearchLength={0}
+				strings={{ placeholder: 'Search customers…', searching: 'Loading customers…' }}
+			/>
+		</div>
+	);
+}
+
+export function AsyncResourceCustomerPicker() {
+	const [selected, setSelected] = useState<typeof MOCK_CUSTOMERS[number] | null>(null);
+
+	return (
+		<div className="flex flex-col gap-2 w-80">
+			<AsyncResourceCombobox
+				fetcher={async ({ query }) => {
+					const data = await mockListCustomers();
+					const q = query.toLowerCase().trim();
+					return q
+						? data.filter((customer) =>
+							customer.name.toLowerCase().includes(q) ||
+							customer.email.toLowerCase().includes(q))
+						: data;
+				}}
+				value={selected}
+				onValueChange={setSelected}
+				getKey={(customer) => customer.id}
+				getLabel={(customer) => customer.name}
+				getDescription={(customer) => customer.email}
+				getMeta={(customer) => \`\${customer.city}, \${customer.country}\`}
+				strings={{ placeholder: 'Search customer resources…' }}
+			/>
+			<Text size="xs" type="secondary">
+				selected: {selected?.name ?? '—'}
+			</Text>
+		</div>
+	);
+}
+
+export function AsyncDebouncedSearch() {
+	const [search, setSearch] = useState('');
+	const [results, setResults] = useState<typeof MOCK_TEAM>([]);
+	const [loading, setLoading] = useState(false);
+	const [selected, setSelected] = useState<typeof MOCK_TEAM[number] | null>(null);
+	const handleSearch = (value: string) => {
+		setLoading(true);
+		mockListTeam().then((data) => {
+			const q = value.toLowerCase().trim();
+			setResults(q ? data.filter((t) => t.name.toLowerCase().includes(q)) : data);
+			setLoading(false);
+		});
+	};
+	return (
+		<div className="flex flex-col gap-2 w-80">
+			<EnhancedCombobox
+				items={results}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				onSearch={handleSearch}
+				debounceMs={250}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(t) => t.name}
+				getItemKey={(t) => t.id}
+				isLoading={loading}
+				minSearchLength={2}
+				strings={{
+					placeholder: 'Type a name…',
+					typeMore: 'Type at least 2 characters',
+					searching: 'Searching…',
+				}}
+			/>
+		</div>
+	);
+}
+
+export function AsyncWithLoadMore() {
+	const PAGE = 4;
+	const [search, setSearch] = useState('');
+	const [page, setPage] = useState(1);
+	const [loadingMore, setLoadingMore] = useState(false);
+	const [selected, setSelected] = useState<typeof MOCK_CUSTOMERS[number] | null>(null);
+	const slice = MOCK_CUSTOMERS.slice(0, page * PAGE);
+	const hasMore = slice.length < MOCK_CUSTOMERS.length;
+	const handleLoadMore = () => {
+		setLoadingMore(true);
+		setTimeout(() => {
+			setPage((p) => p + 1);
+			setLoadingMore(false);
+		}, 350);
+	};
+	return (
+		<div className="flex flex-col gap-2 w-80">
+			<EnhancedCombobox
+				items={slice}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(c) => c.name}
+				getItemKey={(c) => c.id}
+				hasMore={hasMore}
+				onLoadMore={handleLoadMore}
+				isLoadingMore={loadingMore}
+				minSearchLength={0}
+				strings={{ placeholder: 'Scroll for more…', loadingMore: 'Loading more…' }}
+			/>
+			<Text size="xs" type="secondary">page {page} • {slice.length}/{MOCK_CUSTOMERS.length}</Text>
+		</div>
+	);
+}
+
+// =====================================================================
+// Custom rendering
+// =====================================================================
+
+export function CustomItemRendering() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<typeof MOCK_CUSTOMERS[number] | null>(null);
+	const filtered = useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (!q) return MOCK_CUSTOMERS;
+		return MOCK_CUSTOMERS.filter((c) => c.name.toLowerCase().includes(q));
+	}, [search]);
+	return (
+		<div className="flex w-full max-w-sm flex-col gap-2">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(c) => c.name}
+				getItemKey={(c) => c.id}
+				minSearchLength={0}
+				renderItem={(c) => (
+					<div className="flex w-full items-center gap-space-md text-xs">
+						<Avatar className="size-avatar-sm">
+							<AvatarFallback>{c.name.split(' ').map((p) => p[0]).join('')}</AvatarFallback>
+						</Avatar>
+						<div className="flex min-w-0 flex-1 flex-col gap-space-2xs">
+							<Text size="inherit" weight="semibold" className="leading-tight">{c.name}</Text>
+							<Text size="inherit" type="secondary" className="text-xs leading-tight">{c.email}</Text>
+						</div>
+						<Badge variant="secondary" size="small">{c.country}</Badge>
+					</div>
+				)}
+				strings={{ placeholder: 'Pick a customer…' }}
+			/>
+		</div>
+	);
+}
+
+export function CustomGroupLabels() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<typeof MOCK_ORDERS[number] | null>(null);
+	const filtered = useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (!q) return MOCK_ORDERS;
+		return MOCK_ORDERS.filter((o) => o.number.toLowerCase().includes(q));
+	}, [search]);
+	return (
+		<div className="flex flex-col gap-2 w-80">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(o) => o.number}
+				getItemKey={(o) => o.id}
+				getItemGroup={(o) => o.status}
+				renderGroupLabel={(group) => (
+					<div className="flex items-center gap-space-sm">
+						<Text size="xxs" type="secondary" weight="semibold" className="uppercase tracking-wide">
+							{group}
+						</Text>
+					</div>
+				)}
+				minSearchLength={0}
+				strings={{ placeholder: 'Find an order…' }}
+			/>
+		</div>
+	);
+}
+
+export function CssVariableScale() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<Fruit | null>(null);
+	const filtered = useFiltered(search);
+	const style = {
+		'--space-scale': '1.08',
+		'--density-scale': '1.04',
+	} as CSSProperties;
+
+	return (
+		<div className="flex flex-col gap-2 w-72" style={style}>
+			<EnhancedCombobox
+				size="default"
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+			/>
+		</div>
+	);
+}
+
+// =====================================================================
+// States
+// =====================================================================
+
+export function Disabled() {
+	const [search, setSearch] = useState('');
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedCombobox
+				items={ALL}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={ALL[0] ?? null}
+				onSelectedValueChange={() => {}}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				disabled
+				minSearchLength={0}
+			/>
+		</div>
+	);
+}
+
+export function Invalid() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<Fruit | null>(null);
+	const filtered = useFiltered(search);
+	return (
+		<div className="flex flex-col gap-2 w-72">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+				required
+				error="A selection is required"
+			/>
+		</div>
+	);
+}
+
+export function MinSearchLength() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<typeof MOCK_CUSTOMERS[number] | null>(null);
+	const filtered = useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (q.length < 2) return [];
+		return MOCK_CUSTOMERS.filter((c) => c.name.toLowerCase().includes(q));
+	}, [search]);
+	return (
+		<div className="flex flex-col gap-2 w-80">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(c) => c.name}
+				getItemKey={(c) => c.id}
+				minSearchLength={2}
+				strings={{ placeholder: 'Type to search…', typeMore: 'Type at least 2 characters' }}
+			/>
+		</div>
+	);
+}
+
+// =====================================================================
+// Realistic
+// =====================================================================
+
+export function RealisticCustomerPicker() {
+	const [search, setSearch] = useState('');
+	const [selected, setSelected] = useState<typeof MOCK_CUSTOMERS[number] | null>(null);
+	const filtered = useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (!q) return MOCK_CUSTOMERS;
+		return MOCK_CUSTOMERS.filter((c) => c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q));
+	}, [search]);
+	return (
+		<div className="flex flex-col gap-2 w-80">
+			<EnhancedCombobox
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(c) => \`\${c.name} — \${c.email}\`}
+				getItemKey={(c) => c.id}
+				minSearchLength={0}
+				strings={{ placeholder: 'Search customers…' }}
+			/>
+		</div>
+	);
+}
+
+export function FormFieldIntegration() {
+	const { control, watch } = useForm<AssigneeFormValues>({
+		defaultValues: { assignee: null },
+		mode: 'onBlur',
+	});
+	const [search, setSearch] = useState('');
+	const assignee = watch('assignee');
+	const filtered = useMemo(() => {
+		const q = search.toLowerCase().trim();
+		if (!q) return MOCK_TEAM;
+		return MOCK_TEAM.filter((member) =>
+			member.name.toLowerCase().includes(q) || member.role.toLowerCase().includes(q)
+		);
+	}, [search]);
+
+	return (
+		<div className="grid w-full max-w-sm gap-2">
+			<ControlledFormField
+				name="assignee"
+				control={control}
+				label="Assignee"
+				required
+				hint="Search by teammate or role."
+				rules={{ required: 'Choose an assignee' }}
+			>
+				{(field, _error, invalid) => (
+					<EnhancedCombobox
+						name={field.name}
+						items={filtered}
+						searchValue={search}
+						onSearchValueChange={setSearch}
+						selectedValue={field.value}
+						onSelectedValueChange={field.onChange}
+						onBlur={field.onBlur}
+						invalid={invalid}
+						getItemLabel={(member) => member.name}
+						getItemKey={(member) => member.id}
+						minSearchLength={0}
+						strings={{ placeholder: 'Assign owner…' }}
+						renderItem={(member) => (
+							<div className="flex w-full items-center gap-space-md text-xs">
+								<Avatar className="size-avatar-sm">
+									<AvatarFallback>{member.name.split(' ').map((part) => part[0]).join('')}</AvatarFallback>
+								</Avatar>
+								<div className="min-w-0 flex-1">
+									<Text size="inherit" weight="semibold" className="leading-tight">{member.name}</Text>
+									<Text size="inherit" type="secondary" className="text-xs leading-tight">{member.role}</Text>
+								</div>
+								<Badge variant="secondary" size="small">{member.role}</Badge>
+							</div>
+						)}
+					/>
+				)}
+			</ControlledFormField>
+			<Text size="xs" type="secondary">
+				Selected owner: {assignee?.name ?? 'none'}
+			</Text>
+		</div>
+	);
+}
+`;function Q(e){let t={code:`code`,h4:`h4`,p:`p`,pre:`pre`,...e.components};return D||$(`Examples`,!1),z||$(`Examples.AsyncCustomers`,!0),V||$(`Examples.AsyncDebouncedSearch`,!0),B||$(`Examples.AsyncResourceCustomerPicker`,!0),H||$(`Examples.AsyncWithLoadMore`,!0),G||$(`Examples.CssVariableScale`,!0),W||$(`Examples.CustomGroupLabels`,!0),U||$(`Examples.CustomItemRendering`,!0),A||$(`Examples.Default`,!0),K||$(`Examples.Disabled`,!0),X||$(`Examples.FormFieldIntegration`,!0),R||$(`Examples.GroupedTeamByRole`,!0),q||$(`Examples.Invalid`,!0),J||$(`Examples.MinSearchLength`,!0),F||$(`Examples.MultipleApplyButton`,!0),I||$(`Examples.MultipleCloseOnSelect`,!0),L||$(`Examples.MultipleGrouped`,!0),P||$(`Examples.MultipleSelect`,!0),Y||$(`Examples.RealisticCustomerPicker`,!0),N||$(`Examples.SingleCreatable`,!0),M||$(`Examples.SingleHighlightMatch`,!0),j||$(`Examples.SingleSelect`,!0),(0,T.jsxs)(r,{title:`Combobox`,description:`EnhancedCombobox and EnhancedComboboxMultiple — searchable, optionally grouped, with apply / close-on-select behaviours, async fetchers, custom rendering, and form integration.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/combobox`,children:[(0,T.jsx)(o,{title:`Overview`,id:`overview`,children:(0,T.jsxs)(t.p,{children:[`The combobox primitives are intentionally generic — pass an `,(0,T.jsx)(t.code,{children:`items`}),` array
+(any shape), a `,(0,T.jsx)(t.code,{children:`getItemLabel`}),` and `,(0,T.jsx)(t.code,{children:`getItemKey`}),`, and own the `,(0,T.jsx)(t.code,{children:`searchValue`}),` and
+`,(0,T.jsx)(t.code,{children:`selectedValue(s)`}),` state. Optional `,(0,T.jsx)(t.code,{children:`getItemGroup`}),` collapses items into
+sections; `,(0,T.jsx)(t.code,{children:`applyButton`}),` defers commit until the user clicks Apply;
+`,(0,T.jsx)(t.code,{children:`closeOnSelect`}),` closes the popover after each pick. `,(0,T.jsx)(t.code,{children:`creatable`}),` + `,(0,T.jsx)(t.code,{children:`onCreate`}),`
+turn it into a free-form input. Every callback (`,(0,T.jsx)(t.code,{children:`onSearch`}),`, `,(0,T.jsx)(t.code,{children:`onLoadMore`}),`,
+`,(0,T.jsx)(t.code,{children:`onCreate`}),`) is an opt-in seam — no hardcoded fetcher, no opinionated wiring.`]})}),(0,T.jsxs)(o,{title:`Consumer usage`,id:`usage`,children:[(0,T.jsx)(t.p,{children:`Consumers import the searchable select primitives from the exact package
+entrypoint:`}),(0,T.jsx)(t.pre,{children:(0,T.jsx)(t.code,{className:`language-tsx`,children:`import { EnhancedCombobox, EnhancedComboboxMultiple } from 'admin-ui-starter-kit/base/combobox';
+import { ControlledFormField } from 'admin-ui-starter-kit/base/forms';
+`})}),(0,T.jsxs)(t.p,{children:[`Use `,(0,T.jsx)(t.code,{children:`EnhancedCombobox`}),` for one value and `,(0,T.jsx)(t.code,{children:`EnhancedComboboxMultiple`}),` for arrays.
+The consuming app owns both the search text and selected value state. Always
+provide `,(0,T.jsx)(t.code,{children:`getItemLabel`}),` and `,(0,T.jsx)(t.code,{children:`getItemKey`}),` so the component can render labels,
+restore selected values, and keep list keys stable across async refreshes.`]}),(0,T.jsxs)(t.p,{children:[`Inside forms, wrap the combobox in `,(0,T.jsx)(t.code,{children:`ControlledFormField`}),`, pass `,(0,T.jsx)(t.code,{children:`field.name`}),`,
+`,(0,T.jsx)(t.code,{children:`field.onBlur`}),`, `,(0,T.jsx)(t.code,{children:`field.value`}),`, and `,(0,T.jsx)(t.code,{children:`field.onChange`}),`, then forward the third
+render-prop argument as `,(0,T.jsx)(t.code,{children:`invalid={invalid}`}),`. Use the combobox `,(0,T.jsx)(t.code,{children:`error`}),` prop only
+when the combobox renders outside `,(0,T.jsx)(t.code,{children:`FormField`}),` and needs to display its own error
+message.`]})]}),(0,T.jsxs)(o,{title:`Single`,id:`single`,children:[(0,T.jsx)(s,{name:`Default`,source:Z,children:(0,T.jsx)(A,{})}),(0,T.jsx)(s,{name:`SingleSelect`,source:Z,children:(0,T.jsx)(j,{})}),(0,T.jsx)(s,{name:`SingleHighlightMatch`,source:Z,children:(0,T.jsx)(M,{})}),(0,T.jsx)(s,{name:`SingleCreatable`,source:Z,children:(0,T.jsx)(N,{})})]}),(0,T.jsxs)(o,{title:`Multiple`,id:`multiple`,children:[(0,T.jsx)(s,{name:`MultipleSelect`,source:Z,children:(0,T.jsx)(P,{})}),(0,T.jsx)(s,{name:`MultipleApplyButton`,source:Z,children:(0,T.jsx)(F,{})}),(0,T.jsx)(s,{name:`MultipleCloseOnSelect`,source:Z,children:(0,T.jsx)(I,{})})]}),(0,T.jsxs)(o,{title:`Grouped options`,id:`grouped`,children:[(0,T.jsx)(s,{name:`MultipleGrouped`,source:Z,children:(0,T.jsx)(L,{})}),(0,T.jsx)(s,{name:`GroupedTeamByRole`,source:Z,children:(0,T.jsx)(R,{})})]}),(0,T.jsxs)(o,{title:`Async / fetcher`,id:`async`,children:[(0,T.jsx)(s,{name:`AsyncCustomers`,source:Z,children:(0,T.jsx)(z,{})}),(0,T.jsx)(s,{name:`AsyncResourceCustomerPicker`,source:Z,children:(0,T.jsx)(B,{})}),(0,T.jsx)(s,{name:`AsyncDebouncedSearch`,source:Z,children:(0,T.jsx)(V,{})}),(0,T.jsx)(s,{name:`AsyncWithLoadMore`,source:Z,children:(0,T.jsx)(H,{})})]}),(0,T.jsxs)(o,{title:`Custom rendering`,id:`custom-rendering`,children:[(0,T.jsx)(s,{name:`CustomItemRendering`,source:Z,children:(0,T.jsx)(U,{})}),(0,T.jsx)(s,{name:`CustomGroupLabels`,source:Z,children:(0,T.jsx)(W,{})})]}),(0,T.jsx)(o,{title:`CSS variable scale`,id:`scale`,children:(0,T.jsx)(s,{name:`CssVariableScale`,source:Z,children:(0,T.jsx)(G,{})})}),(0,T.jsxs)(o,{title:`States`,id:`states`,children:[(0,T.jsx)(s,{name:`Disabled`,source:Z,children:(0,T.jsx)(K,{})}),(0,T.jsx)(s,{name:`Invalid`,source:Z,children:(0,T.jsx)(q,{})}),(0,T.jsx)(s,{name:`MinSearchLength`,source:Z,children:(0,T.jsx)(J,{})})]}),(0,T.jsxs)(o,{title:`Realistic usage`,id:`realistic`,children:[(0,T.jsx)(s,{name:`RealisticCustomerPicker`,source:Z,children:(0,T.jsx)(Y,{})}),(0,T.jsx)(s,{name:`FormFieldIntegration`,source:Z,children:(0,T.jsx)(X,{})})]}),(0,T.jsxs)(o,{title:`API`,id:`api`,children:[(0,T.jsx)(t.h4,{children:`EnhancedCombobox`}),(0,T.jsx)(d,{component:`EnhancedCombobox`}),(0,T.jsx)(t.h4,{children:`EnhancedComboboxMultiple`}),(0,T.jsx)(d,{component:`EnhancedComboboxMultiple`}),(0,T.jsx)(t.h4,{children:`AsyncResourceCombobox`}),(0,T.jsx)(d,{component:`AsyncResourceCombobox`})]})]})}function te(e={}){let{wrapper:t}=e.components||{};return t?(0,T.jsx)(t,{...e,children:(0,T.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{te as default};