admin-ui-starter-kit 0.6.5 → 0.6.7

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

@@ -1,685 +0,0 @@
-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-C2ovQgbv.js";import{t as s}from"./example-CDvNeHNP.js";import{N as c,d as l,n as u}from"./index-B37z19z3.js";import{t as d}from"./props-table-udnF7Z46.js";import{r as f,t as p}from"./avatar-CLBQvnYG.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-D0AsPZ-b.js";import{t as C}from"./form-field-D8sL8tat.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};