admin-ui-starter-kit 0.4.4 → 0.5.0

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

@@ -0,0 +1,726 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,jr as o,t as s}from"./example-CbMg22fx.js";import{k as ee,n as c,s as l}from"./index-DNH0y0r-.js";import{t as u}from"./props-table-DSdjPLVr.js";import{r as d,t as f}from"./avatar-Dk78XyHT.js";import{i as p}from"./index.esm-Ducg7a0P.js";import{n as m,r as h,t as g}from"./enhanced-combobox-BT-d7sfw.js";import{t as _}from"./form-field-Dtn_NArM.js";import{t as v}from"./customers-DvBxRjHv.js";import{t as y}from"./orders-BFwWtubb.js";import{i as b,n as x,t as S}from"./fetchers-DHuMQ6PN.js";var C=t(n(),1),w=l(),te={...h,error:`Unable to load options.`};function T({fetcher:e,value:t,defaultValue:n=null,onValueChange:r,onAfterFetch:i,onError:o,getKey:s,getLabel:l,getDescription:u,getMeta:d,renderOption:f,limit:p=10,debounceMs:m=300,preload:h=!0,minSearchLength:_=0,errorMessage:v,strings:y,disabled:b,...x}){let S=ee(te,y),T=t!==void 0,[E,D]=(0,C.useState)(n),O=T?t:E,[k,A]=(0,C.useState)(``),[j,M]=(0,C.useState)([]),[N,P]=(0,C.useState)(!1),[F,I]=(0,C.useState)(null),L=(0,C.useRef)(0),R=k.trim(),z=(0,C.useCallback)(e=>{T||D(e),r?.(e)},[T,r]);(0,C.useEffect)(()=>{if(b)return;if(!(R.length>0?R.length>=_:h)){M([]),P(!1),I(null);return}let t=L.current+1;L.current=t;let n=new AbortController,r={query:R,limit:p,signal:n.signal},a=window.setTimeout(()=>{P(!0),I(null),e(r).then(e=>{n.signal.aborted||L.current!==t||(M(e),i?.(e,r))}).catch(e=>{n.signal.aborted||L.current!==t||(M([]),I(e),o?.(e,r))}).finally(()=>{!n.signal.aborted&&L.current===t&&P(!1)})},m);return()=>{window.clearTimeout(a),n.abort()}},[m,b,e,p,_,i,o,h,R]);let B=(0,C.useCallback)(e=>{if(f)return f(e,{query:R,isSelected:O?s(O)===s(e):!1});let t=u?.(e),n=d?.(e);return(0,w.jsxs)(`span`,{className:`async-resource-combobox--option grid min-w-0 gap-0.5`,children:[(0,w.jsx)(a,{tag:`span`,weight:`medium`,className:`truncate`,children:l(e)}),(!!t||!!n)&&(0,w.jsxs)(`span`,{className:`flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5`,children:[!!t&&(0,w.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,className:`truncate`,children:t}),!!n&&(0,w.jsx)(a,{tag:`span`,size:`xxs`,type:`secondary`,className:`truncate opacity-75`,children:n})]})]})},[u,s,l,d,f,O,R]),V=(0,C.useMemo)(()=>{if(F)return v??S.error},[F,v,S.error]);return(0,w.jsxs)(`div`,{"data-component":`async-resource-combobox`,"data-slot":`async-resource-combobox`,className:c(`async-resource-combobox--component`,x.className),children:[(0,w.jsx)(g,{...x,className:void 0,disabled:b,items:j,selectedValue:O??null,onSelectedValueChange:z,searchValue:k,onSearchValueChange:A,getItemLabel:l,getItemKey:s,isLoading:N,minSearchLength:_,strings:S,renderItem:B,error:typeof V==`string`?V:void 0}),V&&typeof V!=`string`&&(0,w.jsx)(`div`,{className:`async-resource-combobox--error mt-1.5`,children:V})]})}T.displayName=`AsyncResourceCombobox`;var E=e({AsyncCustomers:()=>R,AsyncDebouncedSearch:()=>B,AsyncResourceCustomerPicker:()=>z,AsyncWithLoadMore:()=>V,CustomGroupLabels:()=>U,CustomItemRendering:()=>H,Default:()=>k,Disabled:()=>q,FormFieldIntegration:()=>Z,GroupedTeamByRole:()=>L,Invalid:()=>J,MinSearchLength:()=>Y,MultipleApplyButton:()=>P,MultipleCloseOnSelect:()=>F,MultipleGrouped:()=>I,MultipleSelect:()=>N,RealisticCustomerPicker:()=>X,SingleCreatable:()=>M,SingleHighlightMatch:()=>j,SingleSelect:()=>A,SizeLg:()=>K,SizeMd:()=>G,SizeSm:()=>W}),D=[{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 O(e){return(0,C.useMemo)(()=>{let t=e.toLowerCase().trim();return t?D.filter(e=>e.name.toLowerCase().includes(t)):D},[e])}function k(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,w.jsx)(g,{items:O(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0}),(0,w.jsxs)(a,{size:`xs`,type:`secondary`,children:[`value: `,n?.name??`—`]})]})}function A(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(g,{items:O(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function j(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(g,{items:O(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 M(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(D),[i,o]=(0,C.useState)(null);return(0,w.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,w.jsx)(g,{items:(0,C.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,w.jsxs)(a,{size:`xs`,type:`secondary`,children:[`items: `,n.length]})]})}function N(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)([]);return(0,w.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,w.jsx)(m,{items:O(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,w.jsxs)(a,{size:`xs`,type:`secondary`,children:[`selected: `,n.map(e=>e.name).join(`, `)||`—`]})]})}function P(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)([]);return(0,w.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,w.jsx)(m,{items:O(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,w.jsxs)(a,{size:`xs`,type:`secondary`,children:[`committed: `,n.map(e=>e.name).join(`, `)||`—`]})]})}function F(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)([]);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(m,{items:O(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 I(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)([]);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(m,{items:O(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 L(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,w.jsx)(g,{items:(0,C.useMemo)(()=>{let t=e.toLowerCase().trim();return t?b.filter(e=>e.name.toLowerCase().includes(t)||e.role.toLowerCase().includes(t)):b},[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 R(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)([]),[i,a]=(0,C.useState)(!0),[o,s]=(0,C.useState)(null);return(0,C.useEffect)(()=>{let e=!0;return a(!0),S().then(t=>{e&&(r(t),a(!1))}),()=>{e=!1}},[]),(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,w.jsx)(g,{items:(0,C.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 z(){let[e,t]=(0,C.useState)(null);return(0,w.jsxs)(`div`,{className:`flex flex-col gap-2 w-80`,children:[(0,w.jsx)(T,{fetcher:async({query:e})=>{let t=await S(),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,w.jsxs)(a,{size:`xs`,type:`secondary`,children:[`selected: `,e?.name??`—`]})]})}function B(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)([]),[i,a]=(0,C.useState)(!1),[o,s]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,w.jsx)(g,{items:n,searchValue:e,onSearchValueChange:t,onSearch:e=>{a(!0),x().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 V(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(1),[i,o]=(0,C.useState)(!1),[s,ee]=(0,C.useState)(null),c=v.slice(0,n*4),l=c.length<v.length;return(0,w.jsxs)(`div`,{className:`flex flex-col gap-2 w-80`,children:[(0,w.jsx)(g,{items:c,searchValue:e,onSearchValueChange:t,selectedValue:s,onSelectedValueChange:ee,getItemLabel:e=>e.name,getItemKey:e=>e.id,hasMore:l,onLoadMore:()=>{o(!0),setTimeout(()=>{r(e=>e+1),o(!1)},350)},isLoadingMore:i,minSearchLength:0,strings:{placeholder:`Scroll for more…`,loadingMore:`Loading more…`}}),(0,w.jsxs)(a,{size:`xs`,type:`secondary`,children:[`page `,n,` • `,c.length,`/`,v.length]})]})}function H(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex w-full max-w-sm flex-col gap-2`,children:(0,w.jsx)(g,{items:(0,C.useMemo)(()=>{let t=e.toLowerCase().trim();return t?v.filter(e=>e.name.toLowerCase().includes(t)):v},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,renderItem:e=>(0,w.jsxs)(`div`,{className:`flex items-center gap-2.5 w-full`,children:[(0,w.jsx)(f,{className:`h-7 w-7`,children:(0,w.jsx)(d,{children:e.name.split(` `).map(e=>e[0]).join(``)})}),(0,w.jsxs)(`div`,{className:`flex flex-col min-w-0 flex-1`,children:[(0,w.jsx)(a,{weight:`semibold`,children:e.name}),(0,w.jsx)(a,{size:`xs`,type:`secondary`,children:e.email})]}),(0,w.jsx)(o,{variant:`secondary`,children:e.country})]}),strings:{placeholder:`Pick a customer…`}})})}function U(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,w.jsx)(g,{items:(0,C.useMemo)(()=>{let t=e.toLowerCase().trim();return t?y.filter(e=>e.number.toLowerCase().includes(t)):y},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.number,getItemKey:e=>e.id,getItemGroup:e=>e.status,renderGroupLabel:e=>(0,w.jsx)(`div`,{className:`flex items-center gap-2`,children:(0,w.jsx)(a,{size:`xxs`,type:`secondary`,weight:`semibold`,className:`uppercase tracking-wide`,children:e})}),minSearchLength:0,strings:{placeholder:`Find an order…`}})})}function W(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(g,{size:`sm`,items:O(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function G(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(g,{size:`md`,items:O(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,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(g,{size:`lg`,items:O(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function q(){let[e,t]=(0,C.useState)(``);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(g,{items:D,searchValue:e,onSearchValueChange:t,selectedValue:D[0]??null,onSelectedValueChange:()=>{},getItemLabel:e=>e.name,getItemKey:e=>e.id,disabled:!0,minSearchLength:0})})}function J(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,w.jsx)(g,{items:O(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 Y(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,w.jsx)(g,{items:(0,C.useMemo)(()=>{let t=e.toLowerCase().trim();return t.length<2?[]:v.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 X(){let[e,t]=(0,C.useState)(``),[n,r]=(0,C.useState)(null);return(0,w.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,w.jsx)(g,{items:(0,C.useMemo)(()=>{let t=e.toLowerCase().trim();return t?v.filter(e=>e.name.toLowerCase().includes(t)||e.email.toLowerCase().includes(t)):v},[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 Z(){let{control:e,watch:t}=p({defaultValues:{assignee:null},mode:`onBlur`}),[n,r]=(0,C.useState)(``),i=t(`assignee`),s=(0,C.useMemo)(()=>{let e=n.toLowerCase().trim();return e?b.filter(t=>t.name.toLowerCase().includes(e)||t.role.toLowerCase().includes(e)):b},[n]);return(0,w.jsxs)(`div`,{className:`grid w-full max-w-sm gap-2`,children:[(0,w.jsx)(_,{name:`assignee`,control:e,label:`Assignee`,required:!0,hint:`Search by teammate or role.`,rules:{required:`Choose an assignee`},children:(e,t,i)=>(0,w.jsx)(g,{name:e.name,items:s,searchValue:n,onSearchValueChange:r,selectedValue:e.value,onSelectedValueChange:e.onChange,onBlur:e.onBlur,invalid:i,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,strings:{placeholder:`Assign owner…`},renderItem:e=>(0,w.jsxs)(`div`,{className:`flex w-full items-center gap-2.5`,children:[(0,w.jsx)(f,{className:`h-7 w-7`,children:(0,w.jsx)(d,{children:e.name.split(` `).map(e=>e[0]).join(``)})}),(0,w.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,w.jsx)(a,{weight:`semibold`,children:e.name}),(0,w.jsx)(a,{size:`xs`,type:`secondary`,children:e.role})]}),(0,w.jsx)(o,{variant:`secondary`,children:e.role})]})})}),(0,w.jsxs)(a,{size:`xs`,type:`secondary`,children:[`Selected owner: `,i?.name??`none`]})]})}var Q=`import { useEffect, useMemo, useState } 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 items-center gap-2.5 w-full">
+						<Avatar className="h-7 w-7">
+							<AvatarFallback>{c.name.split(' ').map((p) => p[0]).join('')}</AvatarFallback>
+						</Avatar>
+						<div className="flex flex-col min-w-0 flex-1">
+							<Text weight="semibold">{c.name}</Text>
+							<Text size="xs" type="secondary">{c.email}</Text>
+						</div>
+						<Badge variant="secondary">{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-2">
+						<Text size="xxs" type="secondary" weight="semibold" className="uppercase tracking-wide">
+							{group}
+						</Text>
+					</div>
+				)}
+				minSearchLength={0}
+				strings={{ placeholder: 'Find an order…' }}
+			/>
+		</div>
+	);
+}
+
+// =====================================================================
+// Sizes
+// =====================================================================
+
+export function SizeSm() {
+	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
+				size="sm"
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+			/>
+		</div>
+	);
+}
+
+export function SizeMd() {
+	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
+				size="md"
+				items={filtered}
+				searchValue={search}
+				onSearchValueChange={setSearch}
+				selectedValue={selected}
+				onSelectedValueChange={setSelected}
+				getItemLabel={(f) => f.name}
+				getItemKey={(f) => f.id}
+				minSearchLength={0}
+			/>
+		</div>
+	);
+}
+
+export function SizeLg() {
+	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
+				size="lg"
+				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-2.5">
+								<Avatar className="h-7 w-7">
+									<AvatarFallback>{member.name.split(' ').map((part) => part[0]).join('')}</AvatarFallback>
+								</Avatar>
+								<div className="min-w-0 flex-1">
+									<Text weight="semibold">{member.name}</Text>
+									<Text size="xs" type="secondary">{member.role}</Text>
+								</div>
+								<Badge variant="secondary">{member.role}</Badge>
+							</div>
+						)}
+					/>
+				)}
+			</ControlledFormField>
+			<Text size="xs" type="secondary">
+				Selected owner: {assignee?.name ?? 'none'}
+			</Text>
+		</div>
+	);
+}
+`;function ne(e){let t={code:`code`,h4:`h4`,p:`p`,pre:`pre`,...e.components};return E||$(`Examples`,!1),R||$(`Examples.AsyncCustomers`,!0),B||$(`Examples.AsyncDebouncedSearch`,!0),z||$(`Examples.AsyncResourceCustomerPicker`,!0),V||$(`Examples.AsyncWithLoadMore`,!0),U||$(`Examples.CustomGroupLabels`,!0),H||$(`Examples.CustomItemRendering`,!0),k||$(`Examples.Default`,!0),q||$(`Examples.Disabled`,!0),Z||$(`Examples.FormFieldIntegration`,!0),L||$(`Examples.GroupedTeamByRole`,!0),J||$(`Examples.Invalid`,!0),Y||$(`Examples.MinSearchLength`,!0),P||$(`Examples.MultipleApplyButton`,!0),F||$(`Examples.MultipleCloseOnSelect`,!0),I||$(`Examples.MultipleGrouped`,!0),N||$(`Examples.MultipleSelect`,!0),X||$(`Examples.RealisticCustomerPicker`,!0),M||$(`Examples.SingleCreatable`,!0),j||$(`Examples.SingleHighlightMatch`,!0),A||$(`Examples.SingleSelect`,!0),K||$(`Examples.SizeLg`,!0),G||$(`Examples.SizeMd`,!0),W||$(`Examples.SizeSm`,!0),(0,w.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,w.jsx)(i,{title:`Overview`,id:`overview`,children:(0,w.jsxs)(t.p,{children:[`The combobox primitives are intentionally generic — pass an `,(0,w.jsx)(t.code,{children:`items`}),` array
+(any shape), a `,(0,w.jsx)(t.code,{children:`getItemLabel`}),` and `,(0,w.jsx)(t.code,{children:`getItemKey`}),`, and own the `,(0,w.jsx)(t.code,{children:`searchValue`}),` and
+`,(0,w.jsx)(t.code,{children:`selectedValue(s)`}),` state. Optional `,(0,w.jsx)(t.code,{children:`getItemGroup`}),` collapses items into
+sections; `,(0,w.jsx)(t.code,{children:`applyButton`}),` defers commit until the user clicks Apply;
+`,(0,w.jsx)(t.code,{children:`closeOnSelect`}),` closes the popover after each pick. `,(0,w.jsx)(t.code,{children:`creatable`}),` + `,(0,w.jsx)(t.code,{children:`onCreate`}),`
+turn it into a free-form input. Every callback (`,(0,w.jsx)(t.code,{children:`onSearch`}),`, `,(0,w.jsx)(t.code,{children:`onLoadMore`}),`,
+`,(0,w.jsx)(t.code,{children:`onCreate`}),`) is an opt-in seam — no hardcoded fetcher, no opinionated wiring.`]})}),(0,w.jsxs)(i,{title:`Consumer usage`,id:`usage`,children:[(0,w.jsx)(t.p,{children:`Consumers import the searchable select primitives from the exact package
+entrypoint:`}),(0,w.jsx)(t.pre,{children:(0,w.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,w.jsxs)(t.p,{children:[`Use `,(0,w.jsx)(t.code,{children:`EnhancedCombobox`}),` for one value and `,(0,w.jsx)(t.code,{children:`EnhancedComboboxMultiple`}),` for arrays.
+The consuming app owns both the search text and selected value state. Always
+provide `,(0,w.jsx)(t.code,{children:`getItemLabel`}),` and `,(0,w.jsx)(t.code,{children:`getItemKey`}),` so the component can render labels,
+restore selected values, and keep list keys stable across async refreshes.`]}),(0,w.jsxs)(t.p,{children:[`Inside forms, wrap the combobox in `,(0,w.jsx)(t.code,{children:`ControlledFormField`}),`, pass `,(0,w.jsx)(t.code,{children:`field.name`}),`,
+`,(0,w.jsx)(t.code,{children:`field.onBlur`}),`, `,(0,w.jsx)(t.code,{children:`field.value`}),`, and `,(0,w.jsx)(t.code,{children:`field.onChange`}),`, then forward the third
+render-prop argument as `,(0,w.jsx)(t.code,{children:`invalid={invalid}`}),`. Use the combobox `,(0,w.jsx)(t.code,{children:`error`}),` prop only
+when the combobox renders outside `,(0,w.jsx)(t.code,{children:`FormField`}),` and needs to display its own error
+message.`]})]}),(0,w.jsxs)(i,{title:`Single`,id:`single`,children:[(0,w.jsx)(s,{name:`Default`,source:Q,children:(0,w.jsx)(k,{})}),(0,w.jsx)(s,{name:`SingleSelect`,source:Q,children:(0,w.jsx)(A,{})}),(0,w.jsx)(s,{name:`SingleHighlightMatch`,source:Q,children:(0,w.jsx)(j,{})}),(0,w.jsx)(s,{name:`SingleCreatable`,source:Q,children:(0,w.jsx)(M,{})})]}),(0,w.jsxs)(i,{title:`Multiple`,id:`multiple`,children:[(0,w.jsx)(s,{name:`MultipleSelect`,source:Q,children:(0,w.jsx)(N,{})}),(0,w.jsx)(s,{name:`MultipleApplyButton`,source:Q,children:(0,w.jsx)(P,{})}),(0,w.jsx)(s,{name:`MultipleCloseOnSelect`,source:Q,children:(0,w.jsx)(F,{})})]}),(0,w.jsxs)(i,{title:`Grouped options`,id:`grouped`,children:[(0,w.jsx)(s,{name:`MultipleGrouped`,source:Q,children:(0,w.jsx)(I,{})}),(0,w.jsx)(s,{name:`GroupedTeamByRole`,source:Q,children:(0,w.jsx)(L,{})})]}),(0,w.jsxs)(i,{title:`Async / fetcher`,id:`async`,children:[(0,w.jsx)(s,{name:`AsyncCustomers`,source:Q,children:(0,w.jsx)(R,{})}),(0,w.jsx)(s,{name:`AsyncResourceCustomerPicker`,source:Q,children:(0,w.jsx)(z,{})}),(0,w.jsx)(s,{name:`AsyncDebouncedSearch`,source:Q,children:(0,w.jsx)(B,{})}),(0,w.jsx)(s,{name:`AsyncWithLoadMore`,source:Q,children:(0,w.jsx)(V,{})})]}),(0,w.jsxs)(i,{title:`Custom rendering`,id:`custom-rendering`,children:[(0,w.jsx)(s,{name:`CustomItemRendering`,source:Q,children:(0,w.jsx)(H,{})}),(0,w.jsx)(s,{name:`CustomGroupLabels`,source:Q,children:(0,w.jsx)(U,{})})]}),(0,w.jsxs)(i,{title:`Sizes`,id:`sizes`,children:[(0,w.jsx)(s,{name:`SizeSm`,source:Q,children:(0,w.jsx)(W,{})}),(0,w.jsx)(s,{name:`SizeMd`,source:Q,children:(0,w.jsx)(G,{})}),(0,w.jsx)(s,{name:`SizeLg`,source:Q,children:(0,w.jsx)(K,{})})]}),(0,w.jsxs)(i,{title:`States`,id:`states`,children:[(0,w.jsx)(s,{name:`Disabled`,source:Q,children:(0,w.jsx)(q,{})}),(0,w.jsx)(s,{name:`Invalid`,source:Q,children:(0,w.jsx)(J,{})}),(0,w.jsx)(s,{name:`MinSearchLength`,source:Q,children:(0,w.jsx)(Y,{})})]}),(0,w.jsxs)(i,{title:`Realistic usage`,id:`realistic`,children:[(0,w.jsx)(s,{name:`RealisticCustomerPicker`,source:Q,children:(0,w.jsx)(X,{})}),(0,w.jsx)(s,{name:`FormFieldIntegration`,source:Q,children:(0,w.jsx)(Z,{})})]}),(0,w.jsxs)(i,{title:`API`,id:`api`,children:[(0,w.jsx)(t.h4,{children:`EnhancedCombobox`}),(0,w.jsx)(u,{component:`EnhancedCombobox`}),(0,w.jsx)(t.h4,{children:`EnhancedComboboxMultiple`}),(0,w.jsx)(u,{component:`EnhancedComboboxMultiple`}),(0,w.jsx)(t.h4,{children:`AsyncResourceCombobox`}),(0,w.jsx)(u,{component:`AsyncResourceCombobox`})]})]})}function re(e={}){let{wrapper:t}=e.components||{};return t?(0,w.jsx)(t,{...e,children:(0,w.jsx)(ne,{...e})}):ne(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{re as default};