admin-ui-starter-kit 0.4.5 → 0.6.1

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

@@ -1,696 +0,0 @@
-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};