@dimaan/ui 0.0.21 → 0.0.22

package/dist/index.d.ts

@@ -594,107 +594,6 @@ interface DatePickerProps {
  */
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
 
-type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
-/** Props passed to the routing-library `render` slot of the back button. */
-interface PageHeaderBackRenderProps {
-    to?: LinkProps['to'];
-    className?: string;
-    children: ReactNode;
-    onClick?: () => void;
-}
-interface PageHeaderBackProps {
-    /** Visible label next to the arrow. Defaults to `"Back"`. */
-    label?: ReactNode;
-    /** Target to — renders a React Router `<Link>`. */
-    to?: LinkProps['to'];
-    /** Click handler — renders a `<button>` (or wraps the `render` element). */
-    onClick?: () => void;
-    /** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
-    render?: (props: PageHeaderBackRenderProps) => ReactElement;
-}
-interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
-    /** Page title (required). */
-    title: ReactNode;
-    /** Optional secondary text under the title. */
-    description?: ReactNode;
-    /** Slot above the title for breadcrumbs (e.g. `<Breadcrumbs items={…} />` or your own JSX). */
-    breadcrumbs?: ReactNode;
-    /** Optional back button rendered above the title row. */
-    back?: PageHeaderBackProps;
-    /** Slot on the trailing side of the title row — buttons, dropdowns, etc. */
-    actions?: ReactNode;
-    /** Heading level for the title element. Defaults to `'h1'`. */
-    as?: PageHeaderHeadingLevel;
-    /** Add a bottom border separator. Default: `false`. */
-    bordered?: boolean;
-}
-/**
- * Top-of-page header — title, optional description, breadcrumbs, back button,
- * and actions slot. The first thing a user sees on any list / detail / form
- * page in a dashboard.
- *
- * Designed to drop directly into `<DashboardContent>` (or any padded page
- * container). Has no outer padding of its own — the surrounding layout owns
- * spacing.
- *
- * @example List page header with primary action
- * ```tsx
- * <PageHeader
- *   title="Users"
- *   description="Manage your team members and their roles."
- *   actions={<Button onClick={openCreate}>Add user</Button>}
- *   bordered
- * />
- * ```
- *
- * @example Detail page header with back button
- * ```tsx
- * <PageHeader
- *   title={user.name}
- *   description={user.email}
- *   back={{
- *     label: 'Users',
- *     to: '/users',
- *   }}
- *   actions={
- *     <>
- *       <Button variant="outline">Edit</Button>
- *       <Button variant="destructive">Delete</Button>
- *     </>
- *   }
- * />
- * ```
- *
- * @example With breadcrumbs slot
- * ```tsx
- * <PageHeader
- *   breadcrumbs={
- *     <nav aria-label="Breadcrumb">
- *       <ol className="flex items-center gap-1">
- *         <li><Link to="/">Home</Link></li>
- *         <li>/</li>
- *         <li>Users</li>
- *       </ol>
- *     </nav>
- *   }
- *   title="Users"
- * />
- * ```
- */
-declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
-
-declare const pageHeaderBaseClass = "flex w-full flex-col gap-3";
-/** Adds a bottom border separator below the header. */
-declare const pageHeaderBorderedClass = "border-b border-border pb-4";
-declare const pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
-declare const pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
-declare const pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
-declare const pageHeaderDescriptionClass = "text-sm text-muted-foreground";
-declare const pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
-declare const pageHeaderBackClass = "inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md";
-declare const pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
-declare const pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
-
 interface DetailPageNotFoundState {
     icon?: ReactNode;
     title?: ReactNode;
@@ -703,6 +602,8 @@ interface DetailPageNotFoundState {
     action?: ReactNode | null;
 }
 interface DetailPageLabels {
+    /** Back button label. Direction-aware default: `"Back"` / `"رجوع"`. */
+    back?: string;
     notFoundTitle?: string;
     notFoundDescription?: string;
 }
@@ -711,8 +612,6 @@ interface DetailPageProps {
     title: ReactNode;
     /** Optional secondary text under the title (e.g. status pill, joined date). */
     description?: ReactNode;
-    /** Optional back-button config — forwarded straight to `PageHeader.back`. */
-    back?: PageHeaderBackProps;
     /** Header action slot — Edit / Archive / Delete buttons. */
     actions?: ReactNode;
     /** Page-header bottom border separator. Defaults to `true` for detail pages. */
@@ -753,6 +652,10 @@ interface DetailPageProps {
  * Pairs with `<ListPage>` (read flow) and `<FormPage>` (write flow) as the
  * third Phase-4 template. RHF-agnostic — no form integration.
  *
+ * A back button is always rendered in the top-left of the header; clicking it
+ * calls `navigate(-1)`. The label is direction-aware (EN / AR) via
+ * `useDirection()` and can be overridden through `labels.back`.
+ *
  * @example View user
  * ```tsx
  * const { data: user, isLoading } = useUser(id);
@@ -761,7 +664,6 @@ interface DetailPageProps {
  *   <DetailPage
  *     title={user ? `${user.name}` : 'Loading…'}
  *     description={user?.role}
- *     back={{ to: '/users' }}
  *     actions={
  *       <>
  *         <Button variant="outline" onClick={onArchive}>Archive</Button>
@@ -793,7 +695,7 @@ interface DetailPageProps {
  * </DetailPage>
  * ```
  */
-declare function DetailPage({ title, description, back, actions, bordered, isLoading, loadingRowCount, notFound, notFoundState, labels: labelsProp, children, className, bodyClassName, }: DetailPageProps): react_jsx_runtime.JSX.Element;
+declare function DetailPage({ title, description, actions, bordered, isLoading, loadingRowCount, notFound, notFoundState, labels: labelsProp, children, className, bodyClassName, }: DetailPageProps): react_jsx_runtime.JSX.Element;
 
 /** Outermost wrapper of `DetailPage` — vertical flex column with consistent spacing. */
 declare const detailPageBaseClass = "flex w-full flex-col gap-6";
@@ -1343,101 +1245,6 @@ interface LanguageSwitcherProps<TCode extends string = string> extends Omit<Fiel
 }
 declare function LanguageSwitcher<TCode extends string = string>({ languages, value, onChange, ariaLabel, className, ...props }: LanguageSwitcherProps<TCode>): react_jsx_runtime.JSX.Element;
 
-type SelectVariant = 'default' | 'filled' | 'ghost';
-type SelectSize = 'sm' | 'md' | 'lg';
-declare const selectVariantClass: Record<SelectVariant, string>;
-/**
- * `pe-*` is wider than `ps-*` to leave room for the chevron icon. Logical
- * properties keep RTL working free.
- */
-declare const selectSizeClass: Record<SelectSize, string>;
-declare const selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-2 focus:ring-ring/40 focus:ring-offset-1 focus:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
-
-interface SelectOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-interface SelectGroup {
-    label: string;
-    options: SelectOption[];
-}
-/**
- * `options` accepts either a flat list of options OR a list of groups.
- * Use `children` for full Radix composition (Select.Item, Select.Separator…).
- */
-type SelectOptions = SelectOption[] | SelectGroup[];
-interface SelectProps {
-    variant?: SelectVariant;
-    /** Visual size. Named `selectSize` to mirror Input's `inputSize`. */
-    selectSize?: SelectSize;
-    /** Declarative options (flat or grouped). When `children` is provided it wins. */
-    options?: SelectOptions;
-    /** Placeholder shown when no value is selected. */
-    placeholder?: string;
-    /** Controlled value. */
-    value?: string;
-    /** Initial value for uncontrolled usage. */
-    defaultValue?: string;
-    /** Radix-style change handler — receives the new value directly. */
-    onValueChange?: (value: string) => void;
-    /**
-     * Synthetic-event handler for compatibility with `react-hook-form`'s
-     * `field.onChange` and other consumers that expect a `ChangeEvent`-shaped
-     * object. Both this and `onValueChange` fire on selection.
-     */
-    onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
-    /** Called when focus leaves the trigger. */
-    onBlur?: () => void;
-    /** Form name (for native form submission). */
-    name?: string;
-    /** Disables the trigger. */
-    disabled?: boolean;
-    /** Marks the underlying form input as required. */
-    required?: boolean;
-    /** Override id (otherwise auto-generated via useId). */
-    id?: string;
-    /** Class applied to the trigger button. */
-    className?: string;
-    'aria-invalid'?: boolean | 'true' | 'false';
-    'aria-describedby'?: string;
-    'aria-label'?: string;
-    /** Radix children — used for advanced composition (Select.Group, etc.). */
-    children?: ReactNode;
-}
-/**
- * Dropdown select built on `@radix-ui/react-select`. Renders only the trigger
- * button + Radix popup — wrap it in `<Field label="…">` to add a label, helper
- * text, error, and aria wiring.
- *
- * @example Inside a Field (RHF + Zod)
- * ```tsx
- * <Field name="country" label="Country" required>
- *   <Select options={COUNTRIES} placeholder="Pick one" />
- * </Field>
- * ```
- *
- * @example Bare in a filter bar (no label)
- * ```tsx
- * <Select
- *   value={status}
- *   onValueChange={setStatus}
- *   options={STATUS_OPTIONS}
- *   placeholder="Status"
- *   aria-label="Status filter"
- * />
- * ```
- *
- * @example Grouped options
- * ```tsx
- * <Select options={[
- *   { label: 'GCC', options: [{ value: 'sa', label: 'Saudi Arabia' }] },
- *   { label: 'Levant', options: [{ value: 'jo', label: 'Jordan' }] },
- * ]} />
- * ```
- */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
-
 type TableSize = 'sm' | 'md' | 'lg';
 interface TableSizeClasses {
     /** Applied to <tr> when needed (currently empty — present for symmetry). */
@@ -1588,21 +1395,152 @@ interface TableProps<T> {
  */
 declare function Table<T>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
 
+type SelectVariant = 'default' | 'filled' | 'ghost';
+type SelectSize = 'sm' | 'md' | 'lg';
+declare const selectVariantClass: Record<SelectVariant, string>;
+/**
+ * `pe-*` is wider than `ps-*` to leave room for the chevron icon. Logical
+ * properties keep RTL working free.
+ */
+declare const selectSizeClass: Record<SelectSize, string>;
+declare const selectBaseClass = "group/select relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus:ring-2 focus:ring-ring/40 focus:ring-offset-1 focus:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer data-[placeholder]:text-muted-foreground";
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
 /**
- * One filter dropdown definition for `<ListPage>`. Server owns the actual
- * filtering — the consumer keeps `filterValues` in state and ListPage just
- * renders the Select + reports changes.
+ * `options` accepts either a flat list of options OR a list of groups.
+ * Use `children` for full Radix composition (Select.Item, Select.Separator…).
  */
-interface ListPageFilter {
-    /** Unique key — used in the `filterValues` record and as aria-label fallback. */
+type SelectOptions = SelectOption[] | SelectGroup[];
+interface SelectProps {
+    variant?: SelectVariant;
+    /** Visual size. Named `selectSize` to mirror Input's `inputSize`. */
+    selectSize?: SelectSize;
+    /** Declarative options (flat or grouped). When `children` is provided it wins. */
+    options?: SelectOptions;
+    /** Placeholder shown when no value is selected. */
+    placeholder?: string;
+    /** Controlled value. */
+    value?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Radix-style change handler — receives the new value directly. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Synthetic-event handler for compatibility with `react-hook-form`'s
+     * `field.onChange` and other consumers that expect a `ChangeEvent`-shaped
+     * object. Both this and `onValueChange` fire on selection.
+     */
+    onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
+    /** Called when focus leaves the trigger. */
+    onBlur?: () => void;
+    /** Form name (for native form submission). */
+    name?: string;
+    /** Disables the trigger. */
+    disabled?: boolean;
+    /** Marks the underlying form input as required. */
+    required?: boolean;
+    /** Override id (otherwise auto-generated via useId). */
+    id?: string;
+    /** Class applied to the trigger button. */
+    className?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    /** Radix children — used for advanced composition (Select.Group, etc.). */
+    children?: ReactNode;
+}
+/**
+ * Dropdown select built on `@radix-ui/react-select`. Renders only the trigger
+ * button + Radix popup — wrap it in `<Field label="…">` to add a label, helper
+ * text, error, and aria wiring.
+ *
+ * @example Inside a Field (RHF + Zod)
+ * ```tsx
+ * <Field name="country" label="Country" required>
+ *   <Select options={COUNTRIES} placeholder="Pick one" />
+ * </Field>
+ * ```
+ *
+ * @example Bare in a filter bar (no label)
+ * ```tsx
+ * <Select
+ *   value={status}
+ *   onValueChange={setStatus}
+ *   options={STATUS_OPTIONS}
+ *   placeholder="Status"
+ *   aria-label="Status filter"
+ * />
+ * ```
+ *
+ * @example Grouped options
+ * ```tsx
+ * <Select options={[
+ *   { label: 'GCC', options: [{ value: 'sa', label: 'Saudi Arabia' }] },
+ *   { label: 'Levant', options: [{ value: 'jo', label: 'Jordan' }] },
+ * ]} />
+ * ```
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+/** How many columns a filter spans in the responsive filter grid. */
+type ListPageFilterWidth = 'narrow' | 'default' | 'wide';
+interface ListPageFilterBase {
+    /** Unique key — used in the `filterValues` record and as the aria-label fallback. */
     key: string;
-    /** Display label. Falls back to `key` for the Select's aria-label. */
+    /** Display label. Drives the control's accessible name; falls back to `key`. */
     label?: ReactNode;
-    /** Options to choose from. The first option's value is treated as "no filter / show all". */
+    /**
+     * Column span in the responsive filter grid. `'wide'` spans two columns on
+     * `sm+` (good for a search box); `'narrow'` / `'default'` span one. Controls
+     * always fill their cell, so this only affects how many columns they take.
+     */
+    width?: ListPageFilterWidth;
+}
+/** Dropdown filter — the first option's value is treated as "show all / no filter". */
+interface ListPageSelectFilter extends ListPageFilterBase {
+    type: 'select';
+    options: SelectOption[];
+}
+/**
+ * Free-text filter — rendered as a search input (with a leading search icon).
+ * Use it for the page's global text query as well as per-field text filters.
+ * Empty / whitespace-only string means "no filter".
+ */
+interface ListPageTextFilter extends ListPageFilterBase {
+    type: 'text';
+    placeholder?: string;
+}
+/** Date filter — rendered as a `DatePicker`. ISO `YYYY-MM-DD`; empty means "no filter". */
+interface ListPageDateFilter extends ListPageFilterBase {
+    type: 'date';
+    placeholder?: string;
+}
+/**
+ * Multi-select filter — rendered as a `MultiSelect`. The value is the selected
+ * option values joined by commas (e.g. `"admin,editor"`); empty = no filter.
+ * Consumers `.split(',')` to build the server query.
+ */
+interface ListPageMultiSelectFilter extends ListPageFilterBase {
+    type: 'multiselect';
     options: SelectOption[];
-    /** Width of the Select. Defaults to `'default'` (~11rem). */
-    width?: 'narrow' | 'default' | 'wide';
+    placeholder?: string;
 }
+/**
+ * One filter definition for `<ListPage>`, discriminated by `type`. The consumer
+ * declares the control kind explicitly (`select` / `text` / `date`); the server
+ * still owns the actual filtering — every filter reads and writes a single
+ * string in the `filterValues` record.
+ */
+type ListPageFilter = ListPageSelectFilter | ListPageTextFilter | ListPageDateFilter | ListPageMultiSelectFilter;
+
 interface ListPageEmptyState {
     icon?: ReactNode;
     title?: ReactNode;
@@ -1616,10 +1554,6 @@ interface ListPageEmptyState {
  * `nextPage`) flow through to the inner Table without re-declaration.
  */
 interface ListPageLabels extends TableLabels {
-    /** Search input placeholder. */
-    searchPlaceholder?: string;
-    /** Search input aria-label. Falls back to the placeholder. */
-    searchAriaLabel?: string;
     /** "Reset filters" button label. */
     reset?: string;
     /** "No results matching filters" title. */
@@ -1650,21 +1584,15 @@ interface ListPageProps<T> {
     isLoading?: boolean;
     /** Number of skeleton rows rendered while loading. Defaults to the table page size. */
     loadingRowCount?: number;
-    /** Current search query — the consumer's state. */
-    searchValue?: string;
-    /**
-     * Fires on every keystroke. Providing this **renders the search input**.
-     * Wire it to your data layer (and reset pagination to page 0 on change).
-     */
-    onSearchChange?: (value: string) => void;
     /**
-     * Filter definitions. Renders one `<Select>` per entry. Pair with
-     * `filterValues` + `onFilterChange` to drive them.
+     * Typed filter definitions (`select` / `text` / `date`). Renders the matching
+     * control per entry via `ListPageFilterBar`. A `text` filter doubles as the
+     * page's search box. Pair with `filterValues` + `onFilterChange` to drive them.
      */
     filters?: ListPageFilter[];
-    /** Current filter selections, keyed by `filter.key`. */
+    /** Current filter selections, keyed by `filter.key` (date values are ISO `YYYY-MM-DD`). */
     filterValues?: Record<string, string>;
-    /** Fires when any filter Select changes. */
+    /** Fires when any filter control changes. */
     onFilterChange?: (key: string, value: string) => void;
     enableRowSelection?: boolean;
     bulkActions?: (selected: T[]) => ReactNode;
@@ -1690,29 +1618,29 @@ interface ListPageProps<T> {
     className?: string;
 }
 /**
- * Declarative server-driven list-page template — composes `PageHeader + search
- * input + filter selects + Table + EmptyState` into a single component.
+ * Declarative server-driven list-page template — composes `PageHeader + filter
+ * bar + Table + EmptyState` into a single component.
  *
  * **All data-shaping is server-side.** ListPage does not filter / search /
  * paginate `data` locally; it renders whatever the consumer's data layer
- * returned for the current `searchValue` + `filterValues` + `pagination`
- * query. ListPage's job is the UI: render the controls, report user input
- * back through callbacks, and pick the right empty state.
+ * returned for the current `filterValues` + `pagination` query. ListPage's job
+ * is the UI: render the controls, report user input back through callbacks, and
+ * pick the right empty state. Search is just a `text` filter — there is no
+ * separate search prop.
  *
  * **Three rendering branches in the table area:**
  * - `isLoading` → Table with skeleton rows.
- * - `data` empty AND nothing being searched / filtered → `noDataState` (first-run).
- * - search / filters active but `data` empty → `emptyState` (no results) with a Reset button.
+ * - `data` empty AND no filter active → `noDataState` (first-run).
+ * - a filter active but `data` empty → `emptyState` (no results) with a Reset button.
  *
  * @example Server-driven list with TanStack Query
  * ```tsx
- * const [search, setSearch] = useState('');
- * const [filters, setFilters] = useState({ status: 'all' });
+ * const [filters, setFilters] = useState({ q: '', status: 'all', createdFrom: '' });
  * const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
  *
  * const { data, isLoading } = useQuery({
- *   queryKey: ['users', search, filters, pagination],
- *   queryFn: () => fetchUsers({ search, ...filters, ...pagination }),
+ *   queryKey: ['users', filters, pagination],
+ *   queryFn: () => fetchUsers({ ...filters, ...pagination }),
  * });
  *
  * return (
@@ -1724,14 +1652,10 @@ interface ListPageProps<T> {
  *     isLoading={isLoading}
  *     columns={USER_COLUMNS}
  *
- *     searchValue={search}
- *     onSearchChange={(v) => {
- *       setSearch(v);
- *       setPagination((p) => ({ ...p, pageIndex: 0 }));
- *     }}
- *
  *     filters={[
- *       { key: 'status', label: 'Status', options: STATUS_OPTIONS },
+ *       { type: 'text', key: 'q', placeholder: 'Search…', width: 'wide' },
+ *       { type: 'select', key: 'status', label: 'Status', options: STATUS_OPTIONS },
+ *       { type: 'date', key: 'createdFrom', label: 'Created after' },
  *     ]}
  *     filterValues={filters}
  *     onFilterChange={(key, value) => {
@@ -1745,7 +1669,206 @@ interface ListPageProps<T> {
  * );
  * ```
  */
-declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, searchValue, onSearchChange, filters, filterValues, onFilterChange, enableRowSelection, bulkActions, pagination, onPaginationChange, totalCount, pageSizeOptions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
+declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, filters, filterValues, onFilterChange, enableRowSelection, bulkActions, pagination, onPaginationChange, totalCount, pageSizeOptions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
+
+interface MultiSelectLabels {
+    /** Search input placeholder. Direction-aware default: `"Search…"` / `"بحث…"`. */
+    search?: string;
+    /** Empty-state text when the search matches nothing. Default: `"No results"` / `"لا نتائج"`. */
+    empty?: string;
+}
+interface MultiSelectProps {
+    variant?: SelectVariant;
+    /** Visual size. Named `selectSize` to mirror `Select`. */
+    selectSize?: SelectSize;
+    /** Options to choose from. */
+    options: SelectOption[];
+    /** Placeholder shown when nothing is selected. */
+    placeholder?: string;
+    /** Controlled value (array of selected option values). */
+    value?: string[];
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string[];
+    /** Radix-style change handler — receives the new array directly. */
+    onValueChange?: (value: string[]) => void;
+    /** Compatibility handler (e.g. react-hook-form's `field.onChange`). Receives the array. */
+    onChange?: (value: string[]) => void;
+    /** Called when focus leaves the trigger. */
+    onBlur?: () => void;
+    /** Show the in-dropdown search input. Defaults to `true`. */
+    searchable?: boolean;
+    /** Collapse chips beyond this count into a `+N` badge. Default: show all (wrap). */
+    maxTagCount?: number;
+    /** Localized copy for search / empty-state. */
+    labels?: MultiSelectLabels;
+    /** Form name — renders a hidden input with the comma-joined value. */
+    name?: string;
+    /** Disables the trigger. */
+    disabled?: boolean;
+    /** Marks the field as required (for form validation). */
+    required?: boolean;
+    /** Override id (otherwise auto-generated via useId). */
+    id?: string;
+    /** Class applied to the trigger. */
+    className?: string;
+    /** Class applied to the popover content. */
+    contentClassName?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+}
+/**
+ * Multi-select control built on `@radix-ui/react-popover` (Radix Select is
+ * single-select only). Selected values render as removable chips in the
+ * trigger; the popup lists checkbox options with an optional search filter.
+ * **RHF-friendly**: works inside `<Field>` — it coerces a non-array `value`
+ * (e.g. `''`) to `[]` and emits the new array through `onChange`.
+ *
+ * @example Inside a Field (RHF + Zod)
+ * ```tsx
+ * <Field name="roles" label="Roles" required>
+ *   <MultiSelect options={ROLE_OPTIONS} placeholder="Pick roles" />
+ * </Field>
+ * ```
+ *
+ * @example Bare / controlled
+ * ```tsx
+ * <MultiSelect
+ *   options={ROLE_OPTIONS}
+ *   value={roles}
+ *   onValueChange={setRoles}
+ *   placeholder="Roles"
+ *   aria-label="Roles filter"
+ * />
+ * ```
+ */
+declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * MultiSelect reuses the Select trigger look (`selectBaseClass` + variant) and
+ * a Select-like popup. These constants cover only what's MultiSelect-specific:
+ * the (auto-height) trigger, the chip row, the search row, and the option list.
+ * Re-exported from `src/index.ts` so consumers can compose the same styling.
+ */
+/** Trigger height is `auto` (chips may wrap to multiple rows) unlike Select's fixed height. */
+declare const multiSelectTriggerSizeClass: Record<'sm' | 'md' | 'lg', string>;
+/** Wraps the chips / placeholder inside the trigger. */
+declare const multiSelectValueRowClass = "flex min-w-0 flex-1 flex-wrap items-center gap-1";
+/** A single selected-value chip (Badge-styled) with its remove button. */
+declare const multiSelectChipClass = "max-w-full gap-1 pe-1";
+/** The chip's "×" remove control. */
+declare const multiSelectChipRemoveClass = "inline-flex size-3.5 shrink-0 items-center justify-center rounded-sm hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+/** Popup content (the open dropdown panel) — width tracks the trigger. */
+declare const multiSelectContentClass = "z-50 w-(--radix-popover-trigger-width) overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+/** Search row pinned to the top of the popup. */
+declare const multiSelectSearchRowClass = "border-b border-border p-1";
+/** Scrollable option list. */
+declare const multiSelectListClass = "max-h-60 overflow-y-auto overflow-x-hidden p-1";
+/** A single option row (Checkbox + label). */
+declare const multiSelectOptionClass = "flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground has-[:focus-visible]:bg-accent has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50";
+/** Empty-state row shown when the search matches nothing. */
+declare const multiSelectEmptyClass = "px-2 py-6 text-center text-sm text-muted-foreground";
+
+type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
+/** Props passed to the routing-library `render` slot of the back button. */
+interface PageHeaderBackRenderProps {
+    to?: LinkProps['to'];
+    className?: string;
+    children: ReactNode;
+    onClick?: () => void;
+}
+interface PageHeaderBackProps {
+    /** Visible label next to the arrow. Defaults to `"Back"`. */
+    label?: ReactNode;
+    /** Target to — renders a React Router `<Link>`. */
+    to?: LinkProps['to'];
+    /** Click handler — renders a `<button>` (or wraps the `render` element). */
+    onClick?: () => void;
+    /** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
+    render?: (props: PageHeaderBackRenderProps) => ReactElement;
+}
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Page title (required). */
+    title: ReactNode;
+    /** Optional secondary text under the title. */
+    description?: ReactNode;
+    /** Slot above the title for breadcrumbs (e.g. `<Breadcrumbs items={…} />` or your own JSX). */
+    breadcrumbs?: ReactNode;
+    /** Optional back button rendered above the title row. */
+    back?: PageHeaderBackProps;
+    /** Slot on the trailing side of the title row — buttons, dropdowns, etc. */
+    actions?: ReactNode;
+    /** Heading level for the title element. Defaults to `'h1'`. */
+    as?: PageHeaderHeadingLevel;
+    /** Add a bottom border separator. Default: `false`. */
+    bordered?: boolean;
+}
+/**
+ * Top-of-page header — title, optional description, breadcrumbs, back button,
+ * and actions slot. The first thing a user sees on any list / detail / form
+ * page in a dashboard.
+ *
+ * Designed to drop directly into `<DashboardContent>` (or any padded page
+ * container). Has no outer padding of its own — the surrounding layout owns
+ * spacing.
+ *
+ * @example List page header with primary action
+ * ```tsx
+ * <PageHeader
+ *   title="Users"
+ *   description="Manage your team members and their roles."
+ *   actions={<Button onClick={openCreate}>Add user</Button>}
+ *   bordered
+ * />
+ * ```
+ *
+ * @example Detail page header with back button
+ * ```tsx
+ * <PageHeader
+ *   title={user.name}
+ *   description={user.email}
+ *   back={{
+ *     label: 'Users',
+ *     to: '/users',
+ *   }}
+ *   actions={
+ *     <>
+ *       <Button variant="outline">Edit</Button>
+ *       <Button variant="destructive">Delete</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example With breadcrumbs slot
+ * ```tsx
+ * <PageHeader
+ *   breadcrumbs={
+ *     <nav aria-label="Breadcrumb">
+ *       <ol className="flex items-center gap-1">
+ *         <li><Link to="/">Home</Link></li>
+ *         <li>/</li>
+ *         <li>Users</li>
+ *       </ol>
+ *     </nav>
+ *   }
+ *   title="Users"
+ * />
+ * ```
+ */
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
+
+declare const pageHeaderBaseClass = "flex w-full flex-col gap-3";
+/** Adds a bottom border separator below the header. */
+declare const pageHeaderBorderedClass = "border-b border-border pb-4";
+declare const pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
+declare const pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
+declare const pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
+declare const pageHeaderDescriptionClass = "text-sm text-muted-foreground";
+declare const pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
+declare const pageHeaderBackClass = "inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md";
+declare const pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
+declare const pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
 
 type RadioGroupSize = 'sm' | 'md' | 'lg';
 /** Outer circle (radio button itself) — sized + bordered. */
@@ -2138,4 +2261,4 @@ declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, type ConfirmDialogLabels, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, DetailPage, type DetailPageLabels, type DetailPageNotFoundState, type DetailPageProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, FormPage, type FormPageLabels, type FormPageProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, ListPage, type ListPageEmptyState, type ListPageFilter, type ListPageLabels, type ListPageProps, PageHeader, type PageHeaderBackProps, type PageHeaderBackRenderProps, type PageHeaderHeadingLevel, type PageHeaderProps, type PaginationState, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, Switch, type SwitchProps, type SwitchSize, Table, type TableLabels, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, type ConfirmDialogLabels, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, DetailPage, type DetailPageLabels, type DetailPageNotFoundState, type DetailPageProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, FormPage, type FormPageLabels, type FormPageProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, ListPage, type ListPageDateFilter, type ListPageEmptyState, type ListPageFilter, type ListPageFilterWidth, type ListPageLabels, type ListPageMultiSelectFilter, type ListPageProps, type ListPageSelectFilter, type ListPageTextFilter, MultiSelect, type MultiSelectLabels, type MultiSelectProps, PageHeader, type PageHeaderBackProps, type PageHeaderBackRenderProps, type PageHeaderHeadingLevel, type PageHeaderProps, type PaginationState, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, Switch, type SwitchProps, type SwitchSize, Table, type TableLabels, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };