admin-ui-starter-kit 0.4.2 → 0.4.4

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

@@ -0,0 +1,696 @@
+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-CTJ8AdNR.js";import{s as c}from"./index-DaYVSqKu.js";import{t as l}from"./props-table-C8la6vcG.js";import{r as u,t as d}from"./avatar-n1nywTlx.js";import{i as f}from"./index.esm-Ducg7a0P.js";import{n as p,t as m}from"./enhanced-combobox-CqLZmU3K.js";import{t as h}from"./form-field-CHY7jh1q.js";import{t as g}from"./customers-DvBxRjHv.js";import{t as _}from"./orders-BFwWtubb.js";import{i as v,n as y,t as b}from"./fetchers-DHuMQ6PN.js";var x=e({AsyncCustomers:()=>F,AsyncDebouncedSearch:()=>I,AsyncWithLoadMore:()=>L,CustomGroupLabels:()=>z,CustomItemRendering:()=>R,Default:()=>E,Disabled:()=>U,FormFieldIntegration:()=>q,GroupedTeamByRole:()=>P,Invalid:()=>W,MinSearchLength:()=>G,MultipleApplyButton:()=>j,MultipleCloseOnSelect:()=>M,MultipleGrouped:()=>N,MultipleSelect:()=>A,RealisticCustomerPicker:()=>K,SingleCreatable:()=>k,SingleHighlightMatch:()=>O,SingleSelect:()=>D,SizeLg:()=>H,SizeMd:()=>V,SizeSm:()=>B}),S=t(n(),1),C=c(),w=[{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 T(e){return(0,S.useMemo)(()=>{let t=e.toLowerCase().trim();return t?w.filter(e=>e.name.toLowerCase().includes(t)):w},[e])}function E(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,C.jsx)(m,{items:T(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0}),(0,C.jsxs)(a,{size:`xs`,type:`secondary`,children:[`value: `,n?.name??`—`]})]})}function D(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(m,{items:T(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function O(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(m,{items:T(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 k(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(w),[i,o]=(0,S.useState)(null);return(0,C.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,C.jsx)(m,{items:(0,S.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,C.jsxs)(a,{size:`xs`,type:`secondary`,children:[`items: `,n.length]})]})}function A(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)([]);return(0,C.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,C.jsx)(p,{items:T(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,C.jsxs)(a,{size:`xs`,type:`secondary`,children:[`selected: `,n.map(e=>e.name).join(`, `)||`—`]})]})}function j(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)([]);return(0,C.jsxs)(`div`,{className:`flex flex-col gap-2 w-72`,children:[(0,C.jsx)(p,{items:T(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,C.jsxs)(a,{size:`xs`,type:`secondary`,children:[`committed: `,n.map(e=>e.name).join(`, `)||`—`]})]})}function M(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)([]);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(p,{items:T(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 N(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)([]);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(p,{items:T(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 P(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,C.jsx)(m,{items:(0,S.useMemo)(()=>{let t=e.toLowerCase().trim();return t?v.filter(e=>e.name.toLowerCase().includes(t)||e.role.toLowerCase().includes(t)):v},[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 F(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)([]),[i,a]=(0,S.useState)(!0),[o,s]=(0,S.useState)(null);return(0,S.useEffect)(()=>{let e=!0;return a(!0),b().then(t=>{e&&(r(t),a(!1))}),()=>{e=!1}},[]),(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,C.jsx)(m,{items:(0,S.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 I(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)([]),[i,a]=(0,S.useState)(!1),[o,s]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,C.jsx)(m,{items:n,searchValue:e,onSearchValueChange:t,onSearch:e=>{a(!0),y().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 L(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(1),[i,o]=(0,S.useState)(!1),[s,c]=(0,S.useState)(null),l=g.slice(0,n*4),u=l.length<g.length;return(0,C.jsxs)(`div`,{className:`flex flex-col gap-2 w-80`,children:[(0,C.jsx)(m,{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,C.jsxs)(a,{size:`xs`,type:`secondary`,children:[`page `,n,` • `,l.length,`/`,g.length]})]})}function R(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex w-full max-w-sm flex-col gap-2`,children:(0,C.jsx)(m,{items:(0,S.useMemo)(()=>{let t=e.toLowerCase().trim();return t?g.filter(e=>e.name.toLowerCase().includes(t)):g},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0,renderItem:e=>(0,C.jsxs)(`div`,{className:`flex items-center gap-2.5 w-full`,children:[(0,C.jsx)(d,{className:`h-7 w-7`,children:(0,C.jsx)(u,{children:e.name.split(` `).map(e=>e[0]).join(``)})}),(0,C.jsxs)(`div`,{className:`flex flex-col min-w-0 flex-1`,children:[(0,C.jsx)(a,{weight:`semibold`,children:e.name}),(0,C.jsx)(a,{size:`xs`,type:`secondary`,children:e.email})]}),(0,C.jsx)(o,{variant:`secondary`,children:e.country})]}),strings:{placeholder:`Pick a customer…`}})})}function z(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,C.jsx)(m,{items:(0,S.useMemo)(()=>{let t=e.toLowerCase().trim();return t?_.filter(e=>e.number.toLowerCase().includes(t)):_},[e]),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.number,getItemKey:e=>e.id,getItemGroup:e=>e.status,renderGroupLabel:e=>(0,C.jsx)(`div`,{className:`flex items-center gap-2`,children:(0,C.jsx)(a,{size:`xxs`,type:`secondary`,weight:`semibold`,className:`uppercase tracking-wide`,children:e})}),minSearchLength:0,strings:{placeholder:`Find an order…`}})})}function B(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(m,{size:`sm`,items:T(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function V(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(m,{size:`md`,items:T(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function H(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(m,{size:`lg`,items:T(e),searchValue:e,onSearchValueChange:t,selectedValue:n,onSelectedValueChange:r,getItemLabel:e=>e.name,getItemKey:e=>e.id,minSearchLength:0})})}function U(){let[e,t]=(0,S.useState)(``);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(m,{items:w,searchValue:e,onSearchValueChange:t,selectedValue:w[0]??null,onSelectedValueChange:()=>{},getItemLabel:e=>e.name,getItemKey:e=>e.id,disabled:!0,minSearchLength:0})})}function W(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-72`,children:(0,C.jsx)(m,{items:T(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 G(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,C.jsx)(m,{items:(0,S.useMemo)(()=>{let t=e.toLowerCase().trim();return t.length<2?[]:g.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 K(){let[e,t]=(0,S.useState)(``),[n,r]=(0,S.useState)(null);return(0,C.jsx)(`div`,{className:`flex flex-col gap-2 w-80`,children:(0,C.jsx)(m,{items:(0,S.useMemo)(()=>{let t=e.toLowerCase().trim();return t?g.filter(e=>e.name.toLowerCase().includes(t)||e.email.toLowerCase().includes(t)):g},[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 q(){let{control:e,watch:t}=f({defaultValues:{assignee:null},mode:`onBlur`}),[n,r]=(0,S.useState)(``),i=t(`assignee`),s=(0,S.useMemo)(()=>{let e=n.toLowerCase().trim();return e?v.filter(t=>t.name.toLowerCase().includes(e)||t.role.toLowerCase().includes(e)):v},[n]);return(0,C.jsxs)(`div`,{className:`grid w-full max-w-sm gap-2`,children:[(0,C.jsx)(h,{name:`assignee`,control:e,label:`Assignee`,required:!0,hint:`Search by teammate or role.`,rules:{required:`Choose an assignee`},children:(e,t,i)=>(0,C.jsx)(m,{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,C.jsxs)(`div`,{className:`flex w-full items-center gap-2.5`,children:[(0,C.jsx)(d,{className:`h-7 w-7`,children:(0,C.jsx)(u,{children:e.name.split(` `).map(e=>e[0]).join(``)})}),(0,C.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,C.jsx)(a,{weight:`semibold`,children:e.name}),(0,C.jsx)(a,{size:`xs`,type:`secondary`,children:e.role})]}),(0,C.jsx)(o,{variant:`secondary`,children:e.role})]})})}),(0,C.jsxs)(a,{size:`xs`,type:`secondary`,children:[`Selected owner: `,i?.name??`none`]})]})}var J=`import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { 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 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 Y(e){let t={code:`code`,h4:`h4`,p:`p`,pre:`pre`,...e.components};return x||Z(`Examples`,!1),F||Z(`Examples.AsyncCustomers`,!0),I||Z(`Examples.AsyncDebouncedSearch`,!0),L||Z(`Examples.AsyncWithLoadMore`,!0),z||Z(`Examples.CustomGroupLabels`,!0),R||Z(`Examples.CustomItemRendering`,!0),E||Z(`Examples.Default`,!0),U||Z(`Examples.Disabled`,!0),q||Z(`Examples.FormFieldIntegration`,!0),P||Z(`Examples.GroupedTeamByRole`,!0),W||Z(`Examples.Invalid`,!0),G||Z(`Examples.MinSearchLength`,!0),j||Z(`Examples.MultipleApplyButton`,!0),M||Z(`Examples.MultipleCloseOnSelect`,!0),N||Z(`Examples.MultipleGrouped`,!0),A||Z(`Examples.MultipleSelect`,!0),K||Z(`Examples.RealisticCustomerPicker`,!0),k||Z(`Examples.SingleCreatable`,!0),O||Z(`Examples.SingleHighlightMatch`,!0),D||Z(`Examples.SingleSelect`,!0),H||Z(`Examples.SizeLg`,!0),V||Z(`Examples.SizeMd`,!0),B||Z(`Examples.SizeSm`,!0),(0,C.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,C.jsx)(i,{title:`Overview`,id:`overview`,children:(0,C.jsxs)(t.p,{children:[`The combobox primitives are intentionally generic — pass an `,(0,C.jsx)(t.code,{children:`items`}),` array
+(any shape), a `,(0,C.jsx)(t.code,{children:`getItemLabel`}),` and `,(0,C.jsx)(t.code,{children:`getItemKey`}),`, and own the `,(0,C.jsx)(t.code,{children:`searchValue`}),` and
+`,(0,C.jsx)(t.code,{children:`selectedValue(s)`}),` state. Optional `,(0,C.jsx)(t.code,{children:`getItemGroup`}),` collapses items into
+sections; `,(0,C.jsx)(t.code,{children:`applyButton`}),` defers commit until the user clicks Apply;
+`,(0,C.jsx)(t.code,{children:`closeOnSelect`}),` closes the popover after each pick. `,(0,C.jsx)(t.code,{children:`creatable`}),` + `,(0,C.jsx)(t.code,{children:`onCreate`}),`
+turn it into a free-form input. Every callback (`,(0,C.jsx)(t.code,{children:`onSearch`}),`, `,(0,C.jsx)(t.code,{children:`onLoadMore`}),`,
+`,(0,C.jsx)(t.code,{children:`onCreate`}),`) is an opt-in seam — no hardcoded fetcher, no opinionated wiring.`]})}),(0,C.jsxs)(i,{title:`Consumer usage`,id:`usage`,children:[(0,C.jsx)(t.p,{children:`Consumers import the searchable select primitives from the exact package
+entrypoint:`}),(0,C.jsx)(t.pre,{children:(0,C.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,C.jsxs)(t.p,{children:[`Use `,(0,C.jsx)(t.code,{children:`EnhancedCombobox`}),` for one value and `,(0,C.jsx)(t.code,{children:`EnhancedComboboxMultiple`}),` for arrays.
+The consuming app owns both the search text and selected value state. Always
+provide `,(0,C.jsx)(t.code,{children:`getItemLabel`}),` and `,(0,C.jsx)(t.code,{children:`getItemKey`}),` so the component can render labels,
+restore selected values, and keep list keys stable across async refreshes.`]}),(0,C.jsxs)(t.p,{children:[`Inside forms, wrap the combobox in `,(0,C.jsx)(t.code,{children:`ControlledFormField`}),`, pass `,(0,C.jsx)(t.code,{children:`field.name`}),`,
+`,(0,C.jsx)(t.code,{children:`field.onBlur`}),`, `,(0,C.jsx)(t.code,{children:`field.value`}),`, and `,(0,C.jsx)(t.code,{children:`field.onChange`}),`, then forward the third
+render-prop argument as `,(0,C.jsx)(t.code,{children:`invalid={invalid}`}),`. Use the combobox `,(0,C.jsx)(t.code,{children:`error`}),` prop only
+when the combobox renders outside `,(0,C.jsx)(t.code,{children:`FormField`}),` and needs to display its own error
+message.`]})]}),(0,C.jsxs)(i,{title:`Single`,id:`single`,children:[(0,C.jsx)(s,{name:`Default`,source:J,children:(0,C.jsx)(E,{})}),(0,C.jsx)(s,{name:`SingleSelect`,source:J,children:(0,C.jsx)(D,{})}),(0,C.jsx)(s,{name:`SingleHighlightMatch`,source:J,children:(0,C.jsx)(O,{})}),(0,C.jsx)(s,{name:`SingleCreatable`,source:J,children:(0,C.jsx)(k,{})})]}),(0,C.jsxs)(i,{title:`Multiple`,id:`multiple`,children:[(0,C.jsx)(s,{name:`MultipleSelect`,source:J,children:(0,C.jsx)(A,{})}),(0,C.jsx)(s,{name:`MultipleApplyButton`,source:J,children:(0,C.jsx)(j,{})}),(0,C.jsx)(s,{name:`MultipleCloseOnSelect`,source:J,children:(0,C.jsx)(M,{})})]}),(0,C.jsxs)(i,{title:`Grouped options`,id:`grouped`,children:[(0,C.jsx)(s,{name:`MultipleGrouped`,source:J,children:(0,C.jsx)(N,{})}),(0,C.jsx)(s,{name:`GroupedTeamByRole`,source:J,children:(0,C.jsx)(P,{})})]}),(0,C.jsxs)(i,{title:`Async / fetcher`,id:`async`,children:[(0,C.jsx)(s,{name:`AsyncCustomers`,source:J,children:(0,C.jsx)(F,{})}),(0,C.jsx)(s,{name:`AsyncDebouncedSearch`,source:J,children:(0,C.jsx)(I,{})}),(0,C.jsx)(s,{name:`AsyncWithLoadMore`,source:J,children:(0,C.jsx)(L,{})})]}),(0,C.jsxs)(i,{title:`Custom rendering`,id:`custom-rendering`,children:[(0,C.jsx)(s,{name:`CustomItemRendering`,source:J,children:(0,C.jsx)(R,{})}),(0,C.jsx)(s,{name:`CustomGroupLabels`,source:J,children:(0,C.jsx)(z,{})})]}),(0,C.jsxs)(i,{title:`Sizes`,id:`sizes`,children:[(0,C.jsx)(s,{name:`SizeSm`,source:J,children:(0,C.jsx)(B,{})}),(0,C.jsx)(s,{name:`SizeMd`,source:J,children:(0,C.jsx)(V,{})}),(0,C.jsx)(s,{name:`SizeLg`,source:J,children:(0,C.jsx)(H,{})})]}),(0,C.jsxs)(i,{title:`States`,id:`states`,children:[(0,C.jsx)(s,{name:`Disabled`,source:J,children:(0,C.jsx)(U,{})}),(0,C.jsx)(s,{name:`Invalid`,source:J,children:(0,C.jsx)(W,{})}),(0,C.jsx)(s,{name:`MinSearchLength`,source:J,children:(0,C.jsx)(G,{})})]}),(0,C.jsxs)(i,{title:`Realistic usage`,id:`realistic`,children:[(0,C.jsx)(s,{name:`RealisticCustomerPicker`,source:J,children:(0,C.jsx)(K,{})}),(0,C.jsx)(s,{name:`FormFieldIntegration`,source:J,children:(0,C.jsx)(q,{})})]}),(0,C.jsxs)(i,{title:`API`,id:`api`,children:[(0,C.jsx)(t.h4,{children:`EnhancedCombobox`}),(0,C.jsx)(l,{component:`EnhancedCombobox`}),(0,C.jsx)(t.h4,{children:`EnhancedComboboxMultiple`}),(0,C.jsx)(l,{component:`EnhancedComboboxMultiple`})]})]})}function X(e={}){let{wrapper:t}=e.components||{};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(Y,{...e})}):Y(e)}function Z(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{X as default};