@dimaan/ui 0.0.10 → 0.0.12

package/dist/index.d.cts

@@ -1,6 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { LinkProps } from 'react-router-dom';
+import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
 import { FieldValues, FieldPath, Control } from 'react-hook-form';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import { ClassValue } from 'clsx';
@@ -29,22 +31,85 @@ declare function DashboardLayout({ defaultCollapsed, collapsed: collapsedProp, o
 type DashboardMainProps = HTMLAttributes<HTMLDivElement>;
 declare function DashboardMain({ className, children, ...props }: DashboardMainProps): react_jsx_runtime.JSX.Element;
 
-type RenderLink = (props: {
-    href?: string;
-    className?: string;
+type SidebarProps = HTMLAttributes<HTMLElement>;
+declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
+declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+}
+declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
+
+type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+
+type SidebarNavProps = HTMLAttributes<HTMLElement>;
+declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon?: ReactNode;
+    label?: ReactNode;
+    endSlot?: ReactNode;
+    /** Highlight the parent (e.g. when one of its children is active). */
+    active?: boolean;
+    /** Uncontrolled initial state. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
+
+type SidebarNavItemRenderProps = {
+    className: string;
     children: ReactNode;
+    to: LinkProps['to'];
+    isActive: boolean;
+    title?: string;
     'aria-current'?: 'page';
-}) => ReactElement;
+    'data-active'?: 'true';
+};
+interface SidebarNavItemProps extends LinkProps {
+    icon?: ReactNode;
+    active?: boolean;
+    label?: ReactNode;
+    endSlot?: ReactNode;
+    /** Whether the link should match exactly. */
+    end?: boolean;
+    /**
+     * Override the rendered element. Use this to plug in routing-library link
+     * components (e.g. react-router `<Link>`) while keeping the styling.
+     */
+    render?: (props: SidebarNavItemRenderProps) => ReactElement;
+}
+/**
+ * Individual navigation item inside a `<SidebarNav>` or `<SidebarGroup>`.
+ * Automatically detects active state based on the current route.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SidebarNavItem to="/dashboard" icon={<Home />}>
+ *   Dashboard
+ * </SidebarNavItem>
+ * ```
+ */
+declare function SidebarNavItem({ icon, active: forcedActive, label, endSlot, className, children, render, to, end, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
+
 interface AppShellNavItem {
     /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
     key?: string;
     label: ReactNode;
-    href?: string;
+    to?: string;
     icon?: ReactNode;
     active?: boolean;
+    /** Whether the link should match exactly. */
+    end?: boolean;
     endSlot?: ReactNode;
     /** Optional render prop for routing libraries (e.g. react-router <Link>). */
-    render?: RenderLink;
+    render?: (props: SidebarNavItemRenderProps) => ReactElement;
 }
 interface AppShellNavGroup {
     /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
@@ -90,14 +155,14 @@ interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' |
  * <AppShell
  *   brand={{ logo: <Logo />, name: 'Acme' }}
  *   nav={[
- *     { key: 'home', label: 'Home', href: '/', icon: <Home /> },
+ *     { key: 'home', label: 'Home', to: '/', icon: <Home /> },
  *     {
  *       key: 'settings',
  *       label: 'Settings',
  *       icon: <Settings />,
  *       items: [
- *         { key: 'profile', label: 'Profile', href: '/settings/profile' },
- *         { key: 'team', label: 'Team', href: '/settings/team' },
+ *         { key: 'profile', label: 'Profile', to: '/settings/profile' },
+ *         { key: 'team', label: 'Team', to: '/settings/team' },
  *       ],
  *     },
  *   ]}
@@ -110,14 +175,14 @@ interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' |
  * </AppShell>
  * ```
  *
- * @example With React Router Link integration via render prop
+ * @example With custom rendering
  * ```tsx
  * const nav = [{
  *   key: 'home',
  *   label: 'Home',
  *   icon: <Home />,
  *   render: ({ children, className, ...rest }) => (
- *     <Link to="/" className={className} {...rest}>{children}</Link>
+ *     <MyCustomLink {...rest} className={className}>{children}</MyCustomLink>
  *   ),
  * }];
  * ```
@@ -132,6 +197,43 @@ interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare function Avatar({ src, alt, fallback, size, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'destructive' | 'outline';
+type BadgeSize = 'sm' | 'md';
+declare const badgeVariantClass: Record<BadgeVariant, string>;
+declare const badgeSizeClass: Record<BadgeSize, string>;
+/** The dot-indicator size for each badge size. */
+declare const badgeDotSizeClass: Record<BadgeSize, string>;
+declare const badgeBaseClass = "inline-flex shrink-0 items-center rounded-full border font-medium leading-none whitespace-nowrap select-none transition-colors";
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Render a small dot before the label (useful for online/status indicators). */
+    dot?: boolean;
+}
+/**
+ * Inline status pill. Most common use: status column in a table (Active /
+ * Pending / Archived), category labels, or counts in nav items.
+ *
+ * @example Status pill in a table cell
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="warning">Pending</Badge>
+ * <Badge variant="default">Archived</Badge>
+ * ```
+ *
+ * @example With status dot
+ * ```tsx
+ * <Badge variant="success" dot>Online</Badge>
+ * ```
+ *
+ * @example Outline (border-only, no fill)
+ * ```tsx
+ * <Badge variant="outline">Beta</Badge>
+ * ```
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
 type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'success' | 'warning' | 'link';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
 declare const buttonVariantClass: Record<ButtonVariant, string>;
@@ -194,6 +296,153 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'typ
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
+type DropdownMenuItemVariant = 'default' | 'destructive';
+declare const dropdownMenuContentClass = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 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";
+declare const dropdownMenuItemBaseClass = "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
+declare const dropdownMenuItemVariantClass: Record<DropdownMenuItemVariant, string>;
+/** Indent items without an icon so they align with items that have one. */
+declare const dropdownMenuItemInsetClass = "ps-8";
+declare const dropdownMenuSeparatorClass = "-mx-1 my-1 h-px bg-border";
+declare const dropdownMenuLabelClass = "px-2 py-1.5 text-xs font-semibold text-muted-foreground select-none";
+declare const dropdownMenuShortcutClass = "ms-auto text-xs tracking-widest text-muted-foreground";
+
+/**
+ * Compound dropdown menu built on `@radix-ui/react-dropdown-menu`. Use for
+ * row actions (⋯ menu in tables), header overflow menus, user avatar menus.
+ *
+ * @example Row actions in a table
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button variant="ghost" size="icon" aria-label="More actions">
+ *       <MoreHorizontal />
+ *     </Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent align="end">
+ *     <DropdownMenuItem onSelect={() => edit(row)}>
+ *       <Pencil />
+ *       Edit
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem onSelect={() => archive(row)}>
+ *       <Archive />
+ *       Archive
+ *     </DropdownMenuItem>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem variant="destructive" onSelect={() => del(row)}>
+ *       <Trash2 />
+ *       Delete
+ *     </DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * @example With label, group, and keyboard shortcut
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button variant="outline">Options</Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuLabel>My account</DropdownMenuLabel>
+ *     <DropdownMenuItem>
+ *       Profile
+ *       <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem>
+ *       Settings
+ *       <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
+ *     </DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+declare const DropdownMenu: react.FC<RadixDropdown.DropdownMenuProps>;
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<RadixDropdown.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: react.ForwardRefExoticComponent<RadixDropdown.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: react.FC<RadixDropdown.DropdownMenuPortalProps>;
+interface DropdownMenuContentProps extends ComponentPropsWithoutRef<typeof RadixDropdown.Content> {
+}
+declare const DropdownMenuContent: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuItemProps extends ComponentPropsWithoutRef<typeof RadixDropdown.Item> {
+    variant?: DropdownMenuItemVariant;
+    /** Indent items without a leading icon so they align with iconed siblings. */
+    inset?: boolean;
+}
+declare const DropdownMenuItem: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuSeparatorProps extends ComponentPropsWithoutRef<typeof RadixDropdown.Separator> {
+}
+declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuLabelProps extends ComponentPropsWithoutRef<typeof RadixDropdown.Label> {
+    /** Indent to align with iconed items. */
+    inset?: boolean;
+}
+declare const DropdownMenuLabel: react.ForwardRefExoticComponent<DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Visual hint for a keyboard shortcut, rendered at the trailing edge of an
+ * item. Pure presentation — does **not** register a keyboard handler.
+ */
+interface DropdownMenuShortcutProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+declare const DropdownMenuShortcut: react.ForwardRefExoticComponent<DropdownMenuShortcutProps & react.RefAttributes<HTMLSpanElement>>;
+
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+declare const emptyStateContainerSizeClass: Record<EmptyStateSize, string>;
+declare const emptyStateIconWrapperSizeClass: Record<EmptyStateSize, string>;
+declare const emptyStateTitleSizeClass: Record<EmptyStateSize, string>;
+declare const emptyStateDescriptionSizeClass: Record<EmptyStateSize, string>;
+declare const emptyStateActionsSpacingClass: Record<EmptyStateSize, string>;
+declare const emptyStateBaseClass = "flex flex-col items-center justify-center text-center px-4";
+declare const emptyStateIconWrapperBaseClass = "inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground";
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional icon rendered in a circular muted background. Sized via `size` prop. */
+    icon?: ReactNode;
+    /** Required title — what's missing or what state we're in. */
+    title: ReactNode;
+    /** Secondary text — explain why the state is empty, suggest next action. */
+    description?: ReactNode;
+    /** Slot for primary (and optional secondary) action buttons. Rendered below description. */
+    action?: ReactNode;
+    /** Visual size — `sm` for inline empties (e.g. inside a popover), `md` (default) for table cells, `lg` for full-page empties. */
+    size?: EmptyStateSize;
+}
+/**
+ * Inline empty-state placeholder. Use when a list, table, or section has no
+ * data to show — either because the user hasn't created anything yet, or
+ * because filters/search returned zero results.
+ *
+ * The most common dashboard pattern: render inside a table's `tbody` colspan
+ * cell, or as a sibling to a list when the list is empty.
+ *
+ * @example No-results in a filtered table
+ * ```tsx
+ * <EmptyState
+ *   icon={<SearchX />}
+ *   title="No users match your filters"
+ *   description="Try clearing the search or changing the status filter."
+ *   action={<Button variant="outline" onClick={resetFilters}>Reset filters</Button>}
+ * />
+ * ```
+ *
+ * @example First-run empty (encourage creation)
+ * ```tsx
+ * <EmptyState
+ *   size="lg"
+ *   icon={<Users />}
+ *   title="No users yet"
+ *   description="Add your first team member to get started."
+ *   action={<Button onClick={openCreate}>Add user</Button>}
+ * />
+ * ```
+ *
+ * @example Compact (inline)
+ * ```tsx
+ * <EmptyState size="sm" title="No notifications" />
+ * ```
+ */
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
 interface FieldRHFProps<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>> {
     /**
      * RHF `Control` returned from `useForm()`. Optional when `Field` is rendered
@@ -371,126 +620,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 RadioGroupSize = 'sm' | 'md' | 'lg';
-/** Outer circle (radio button itself) — sized + bordered. */
-declare const radioItemSizeClass: Record<RadioGroupSize, string>;
-/** Inner indicator (the filled dot when selected). Centred via flex on the parent. */
-declare const radioIndicatorSizeClass: Record<RadioGroupSize, string>;
-/** Label text size that pairs naturally with each radio size. */
-declare const radioLabelSizeClass: Record<RadioGroupSize, string>;
-declare const radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 data-[state=checked]:border-primary";
-declare const radioIndicatorBaseClass = "flex h-full w-full items-center justify-center";
-declare const radioIndicatorDotClass = "rounded-full bg-primary";
-/** Each option row: radio + label + optional description. */
-declare const radioOptionRowClass = "flex cursor-pointer items-start gap-2 has-[button:disabled]:cursor-not-allowed";
-/** The group container — vertical stack by default, horizontal row when orientation="horizontal". */
-declare const radioGroupBaseClass = "flex gap-3";
-declare const radioGroupOrientationClass: {
-    readonly vertical: "flex-col";
-    readonly horizontal: "flex-row flex-wrap";
-};
-
-interface RadioGroupOption {
-    value: string;
-    /** Visible label rendered next to the radio button. */
-    label: ReactNode;
-    /** Optional secondary text rendered below the label (e.g. plan description). */
-    description?: ReactNode;
-    disabled?: boolean;
-}
-type RadioGroupOrientation = 'vertical' | 'horizontal';
-interface RadioGroupProps {
-    /** Visual size of each radio + label. */
-    radioSize?: RadioGroupSize;
-    /** Layout direction within the group. `'vertical'` (default) stacks options; `'horizontal'` lays them out in a row. */
-    orientation?: RadioGroupOrientation;
-    /** Controlled selected value (Radix-style). */
-    value?: string;
-    /** Initial selected value for uncontrolled usage. */
-    defaultValue?: string;
-    /** Radix-style change handler — receives the new value directly. */
-    onValueChange?: (value: string) => void;
-    /** Synthetic-event handler for `react-hook-form`'s `field.onChange` and other consumers. */
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    /** Called when focus leaves the group. */
-    onBlur?: () => void;
-    /** Form name (for native form submission). */
-    name?: string;
-    /** Disables the entire group. */
-    disabled?: boolean;
-    /** Marks the group as required. */
-    required?: boolean;
-    /** Override id (otherwise auto-generated via useId). */
-    id?: string;
-    /** Declarative options. When `children` is provided it wins (escape hatch for custom content). */
-    options?: RadioGroupOption[];
-    /** Class on the outer group container. */
-    className?: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
-    'aria-invalid'?: boolean | 'true' | 'false';
-    /** Radix children — used for advanced composition (custom RadioGroupItem layouts). */
-    children?: ReactNode;
-}
-/**
- * Group of mutually-exclusive radio buttons built on `@radix-ui/react-radio-group`.
- * Use for **3–5 options** where Select would be overkill (pricing tier, privacy
- * level, single-choice settings). Bare component — wrap in `<Field label="…">`
- * for the GROUP label, helper, and error rendering.
- *
- * Each option carries its own per-radio `label` (and optional `description`).
- * The Field's outer label names the group; the option labels name each choice.
- *
- * @example Inside a Field (RHF + Zod)
- * ```tsx
- * <Field name="plan" label="Subscription plan" description="You can change anytime.">
- *   <RadioGroup
- *     options={[
- *       { value: 'free', label: 'Free', description: 'Up to 3 projects' },
- *       { value: 'pro', label: 'Pro', description: 'Unlimited projects' },
- *       { value: 'enterprise', label: 'Enterprise', description: 'Custom limits' },
- *     ]}
- *   />
- * </Field>
- * ```
- *
- * @example Horizontal row in a settings card
- * ```tsx
- * <Field label="Visibility" orientation="horizontal">
- *   <RadioGroup
- *     orientation="horizontal"
- *     value={visibility}
- *     onValueChange={setVisibility}
- *     options={[
- *       { value: 'public', label: 'Public' },
- *       { value: 'private', label: 'Private' },
- *     ]}
- *   />
- * </Field>
- * ```
- */
-declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
-/**
- * `<RadioGroupItem>` — re-exported for consumers building custom option layouts
- * (icons, badges, etc.) via the `children` escape hatch.
- *
- * @example
- * ```tsx
- * <RadioGroup value={plan} onValueChange={setPlan}>
- *   {plans.map((p) => (
- *     <label key={p.value} htmlFor={p.value} className="flex items-center gap-2">
- *       <RadioGroupItem id={p.value} value={p.value} />
- *       <PlanCard {...p} />
- *     </label>
- *   ))}
- * </RadioGroup>
- * ```
- */
-declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadixRadioGroup.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
-    radioSize?: RadioGroupSize;
-} & react.RefAttributes<HTMLButtonElement>>;
-
 type SelectVariant = 'default' | 'filled' | 'ghost';
 type SelectSize = 'sm' | 'md' | 'lg';
 declare const selectVariantClass: Record<SelectVariant, string>;
@@ -586,148 +715,20 @@ interface SelectProps {
  */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
-type SidebarProps = HTMLAttributes<HTMLElement>;
-declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
-
-type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
-declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
-
-interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
-    label?: ReactNode;
+type TableSize = 'sm' | 'md' | 'lg';
+interface TableSizeClasses {
+    /** Applied to <tr> when needed (currently empty — present for symmetry). */
+    row: string;
+    /** Applied to <td>. */
+    cell: string;
+    /** Applied to <th>. */
+    head: string;
 }
-declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
-
-type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
-declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
-
-type SidebarNavProps = HTMLAttributes<HTMLElement>;
-declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
-
-interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-    icon?: ReactNode;
-    label?: ReactNode;
-    endSlot?: ReactNode;
-    /** Highlight the parent (e.g. when one of its children is active). */
-    active?: boolean;
-    /** Uncontrolled initial state. */
-    defaultOpen?: boolean;
-    /** Controlled open state. */
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    children: ReactNode;
-}
-declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
-
-type SidebarNavItemRenderProps = {
-    className: string;
-    children: ReactNode;
-    title?: string;
-    'aria-current'?: 'page';
-    'data-active'?: 'true';
-};
-interface SidebarNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    icon?: ReactNode;
-    active?: boolean;
-    label?: ReactNode;
-    endSlot?: ReactNode;
-    /**
-     * Override the rendered element. Use this to plug in routing-library link
-     * components (e.g. react-router `<Link>`) while keeping the styling.
-     */
-    render?: (props: SidebarNavItemRenderProps) => ReactElement;
-}
-declare function SidebarNavItem({ icon, active, label, endSlot, className, children, render, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
-
-type SwitchSize = 'sm' | 'md' | 'lg';
-/**
- * Each size is a tuple: track dimensions + thumb size + thumb travel distance.
- * Track is `w` x `h`; thumb is `w/h size-X`; travel is the translation distance
- * when checked (= track width − thumb size − padding).
- */
-declare const switchTrackClass: Record<SwitchSize, string>;
-declare const switchThumbClass: Record<SwitchSize, string>;
-declare const switchTrackBaseClass = "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive/40";
-declare const switchThumbBaseClass = "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform";
-
-interface SwitchProps {
-    /** Visual size. */
-    switchSize?: SwitchSize;
-    /** Controlled checked state (Radix-style). */
-    checked?: boolean;
-    /** Initial checked state for uncontrolled usage. */
-    defaultChecked?: boolean;
-    /** Radix-style change handler — receives the new boolean directly. */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * Form-library compatibility props. `value` mirrors what `<Field>` injects
-     * (RHF passes `field.value` as a boolean). `onChange` fires alongside
-     * `onCheckedChange` with a synthetic event so `field.onChange` works too.
-     */
-    value?: boolean | string | number;
-    onChange?: (event: ChangeEvent<HTMLButtonElement>) => void;
-    onBlur?: () => void;
-    /** Form name for native form submission. */
-    name?: string;
-    /** Disable interaction. */
-    disabled?: boolean;
-    /** Mark required for form validation. */
-    required?: boolean;
-    /** Override id (otherwise auto-generated via useId). */
-    id?: string;
-    /** Class on the track (the switch itself). */
-    className?: string;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
-    'aria-invalid'?: boolean | 'true' | 'false';
-}
-/**
- * Boolean toggle built on `@radix-ui/react-switch`. Renders only the track +
- * thumb — wrap it in `<Field orientation="horizontal" label="…">` to add a
- * label, helper text, error, and aria wiring without duplicating that logic
- * inside every form control.
- *
- * @example Inside a Field (RHF + Zod)
- * ```tsx
- * <Field name="darkMode" label="Dark mode" orientation="horizontal">
- *   <Switch />
- * </Field>
- * ```
- *
- * @example Bare in a settings list (custom layout)
- * ```tsx
- * <ul className="divide-y divide-border">
- *   <li className="flex items-center justify-between py-3">
- *     <span>Email digest</span>
- *     <Switch checked={digest} onCheckedChange={setDigest} aria-label="Email digest" />
- *   </li>
- * </ul>
- * ```
- *
- * @example Standalone controlled
- * ```tsx
- * <Switch
- *   checked={enabled}
- *   onCheckedChange={setEnabled}
- *   aria-label="Enable notifications"
- * />
- * ```
- */
-declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
-
-type TableSize = 'sm' | 'md' | 'lg';
-interface TableSizeClasses {
-    /** Applied to <tr> when needed (currently empty — present for symmetry). */
-    row: string;
-    /** Applied to <td>. */
-    cell: string;
-    /** Applied to <th>. */
-    head: string;
-}
-declare const tableSizeClass: Record<TableSize, TableSizeClasses>;
-declare const tableBaseClass = "w-full caption-bottom border-collapse";
-declare const selectedRowClass = "bg-muted/40";
-declare const sortIconClass = "inline-flex h-3 w-3 shrink-0 items-center justify-center";
-declare const alignClass: Record<ColumnAlign, string>;
+declare const tableSizeClass: Record<TableSize, TableSizeClasses>;
+declare const tableBaseClass = "w-full caption-bottom border-collapse";
+declare const selectedRowClass = "bg-muted/40";
+declare const sortIconClass = "inline-flex h-3 w-3 shrink-0 items-center justify-center";
+declare const alignClass: Record<ColumnAlign, string>;
 
 type SortDirection = 'asc' | 'desc';
 interface SortState {
@@ -825,6 +826,410 @@ interface TableProps<T> {
 
 declare function Table<T>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
 
+/**
+ * One filter dropdown definition for `<ListPage>`. ListPage manages each
+ * filter's state internally — you provide options + accessor.
+ */
+interface ListPageFilter<T> {
+    /** Unique key for state tracking. */
+    key: string;
+    /** Aria-label on the Select trigger. */
+    ariaLabel?: string;
+    /** Returns the row value to match against the filter selection. */
+    accessor: (row: T) => string;
+    /** Options to choose from. The first option's value is treated as "no filter / show all". */
+    options: SelectOption[];
+    /** Override the "no filter" default. Defaults to the first option's `value`. */
+    defaultValue?: string;
+    /** Width of the Select. Defaults to `'default'` (~11rem). */
+    width?: 'narrow' | 'default' | 'wide';
+}
+interface ListPageEmptyState {
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Override the default "Reset filters" action button. Pass `null` to hide entirely. */
+    action?: ReactNode | null;
+}
+interface ListPageLabels {
+    /** Default search input placeholder. */
+    searchPlaceholder?: string;
+    /** Default search aria-label (falls back to placeholder). */
+    searchAriaLabel?: string;
+    /** Default "Reset filters" button label. */
+    reset?: string;
+    /** Default empty-state title (when filters return zero). */
+    emptyTitle?: string;
+    /** Default empty-state description. */
+    emptyDescription?: string;
+}
+interface ListPageProps<T> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Page-header bordered separator. Defaults to `true` for list pages. */
+    bordered?: boolean;
+    /** Header action slot — primary "Add" button, etc. */
+    actions?: ReactNode;
+    data: T[];
+    columns: Column<T>[];
+    getRowId: (row: T) => string;
+    /** Keys on `T` to search. Search input only renders when this is provided. */
+    searchKeys?: Array<keyof T>;
+    filters?: ListPageFilter<T>[];
+    enableRowSelection?: boolean;
+    bulkActions?: (selected: T[]) => ReactNode;
+    emptyState?: ListPageEmptyState;
+    labels?: ListPageLabels;
+    className?: string;
+}
+/**
+ * Declarative list-page template — composes `PageHeader + search input +
+ * filter selects + Table + EmptyState` into a single configurable component.
+ *
+ * **Owns state internally** for search and filter selections — you pass raw
+ * `data` and ListPage filters it for you. For server-side data fetching or URL
+ * sync, drop down to the underlying primitives directly (see the
+ * `RecipeListPage` playground page for the manual composition pattern).
+ *
+ * @example Basic — Users list
+ * ```tsx
+ * <ListPage
+ *   title="Users"
+ *   description="Manage your team members."
+ *   actions={<Button onClick={openCreate}>Add user</Button>}
+ *   data={users}
+ *   columns={USER_COLUMNS}
+ *   getRowId={(u) => u.id}
+ *   searchKeys={['name', 'email']}
+ *   filters={[
+ *     {
+ *       key: 'status',
+ *       ariaLabel: 'Status',
+ *       accessor: (u) => u.status,
+ *       options: [
+ *         { value: 'all', label: 'All statuses' },
+ *         { value: 'active', label: 'Active' },
+ *         { value: 'invited', label: 'Invited' },
+ *       ],
+ *     },
+ *   ]}
+ *   enableRowSelection
+ *   bulkActions={(rows) => <Button variant="destructive">Delete ({rows.length})</Button>}
+ * />
+ * ```
+ *
+ * @example With localized labels
+ * ```tsx
+ * <ListPage
+ *   {...props}
+ *   labels={{
+ *     searchPlaceholder: 'ابحث…',
+ *     reset: 'إعادة الفلاتر',
+ *     emptyTitle: 'لا توجد نتائج',
+ *     emptyDescription: 'حاول مسح البحث أو تغيير الفلاتر.',
+ *   }}
+ * />
+ * ```
+ */
+declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, searchKeys, filters, enableRowSelection, bulkActions, emptyState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
+
+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. */
+declare const radioItemSizeClass: Record<RadioGroupSize, string>;
+/** Inner indicator (the filled dot when selected). Centred via flex on the parent. */
+declare const radioIndicatorSizeClass: Record<RadioGroupSize, string>;
+/** Label text size that pairs naturally with each radio size. */
+declare const radioLabelSizeClass: Record<RadioGroupSize, string>;
+declare const radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 data-[state=checked]:border-primary";
+declare const radioIndicatorBaseClass = "flex h-full w-full items-center justify-center";
+declare const radioIndicatorDotClass = "rounded-full bg-primary";
+/** Each option row: radio + label + optional description. */
+declare const radioOptionRowClass = "flex cursor-pointer items-start gap-2 has-[button:disabled]:cursor-not-allowed";
+/** The group container — vertical stack by default, horizontal row when orientation="horizontal". */
+declare const radioGroupBaseClass = "flex gap-3";
+declare const radioGroupOrientationClass: {
+    readonly vertical: "flex-col";
+    readonly horizontal: "flex-row flex-wrap";
+};
+
+interface RadioGroupOption {
+    value: string;
+    /** Visible label rendered next to the radio button. */
+    label: ReactNode;
+    /** Optional secondary text rendered below the label (e.g. plan description). */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+type RadioGroupOrientation = 'vertical' | 'horizontal';
+interface RadioGroupProps {
+    /** Visual size of each radio + label. */
+    radioSize?: RadioGroupSize;
+    /** Layout direction within the group. `'vertical'` (default) stacks options; `'horizontal'` lays them out in a row. */
+    orientation?: RadioGroupOrientation;
+    /** Controlled selected value (Radix-style). */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Radix-style change handler — receives the new value directly. */
+    onValueChange?: (value: string) => void;
+    /** Synthetic-event handler for `react-hook-form`'s `field.onChange` and other consumers. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Called when focus leaves the group. */
+    onBlur?: () => void;
+    /** Form name (for native form submission). */
+    name?: string;
+    /** Disables the entire group. */
+    disabled?: boolean;
+    /** Marks the group as required. */
+    required?: boolean;
+    /** Override id (otherwise auto-generated via useId). */
+    id?: string;
+    /** Declarative options. When `children` is provided it wins (escape hatch for custom content). */
+    options?: RadioGroupOption[];
+    /** Class on the outer group container. */
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** Radix children — used for advanced composition (custom RadioGroupItem layouts). */
+    children?: ReactNode;
+}
+/**
+ * Group of mutually-exclusive radio buttons built on `@radix-ui/react-radio-group`.
+ * Use for **3–5 options** where Select would be overkill (pricing tier, privacy
+ * level, single-choice settings). Bare component — wrap in `<Field label="…">`
+ * for the GROUP label, helper, and error rendering.
+ *
+ * Each option carries its own per-radio `label` (and optional `description`).
+ * The Field's outer label names the group; the option labels name each choice.
+ *
+ * @example Inside a Field (RHF + Zod)
+ * ```tsx
+ * <Field name="plan" label="Subscription plan" description="You can change anytime.">
+ *   <RadioGroup
+ *     options={[
+ *       { value: 'free', label: 'Free', description: 'Up to 3 projects' },
+ *       { value: 'pro', label: 'Pro', description: 'Unlimited projects' },
+ *       { value: 'enterprise', label: 'Enterprise', description: 'Custom limits' },
+ *     ]}
+ *   />
+ * </Field>
+ * ```
+ *
+ * @example Horizontal row in a settings card
+ * ```tsx
+ * <Field label="Visibility" orientation="horizontal">
+ *   <RadioGroup
+ *     orientation="horizontal"
+ *     value={visibility}
+ *     onValueChange={setVisibility}
+ *     options={[
+ *       { value: 'public', label: 'Public' },
+ *       { value: 'private', label: 'Private' },
+ *     ]}
+ *   />
+ * </Field>
+ * ```
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * `<RadioGroupItem>` — re-exported for consumers building custom option layouts
+ * (icons, badges, etc.) via the `children` escape hatch.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={plan} onValueChange={setPlan}>
+ *   {plans.map((p) => (
+ *     <label key={p.value} htmlFor={p.value} className="flex items-center gap-2">
+ *       <RadioGroupItem id={p.value} value={p.value} />
+ *       <PlanCard {...p} />
+ *     </label>
+ *   ))}
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadixRadioGroup.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    radioSize?: RadioGroupSize;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type SwitchSize = 'sm' | 'md' | 'lg';
+/**
+ * Each size is a tuple: track dimensions + thumb size + thumb travel distance.
+ * Track is `w` x `h`; thumb is `w/h size-X`; travel is the translation distance
+ * when checked (= track width − thumb size − padding).
+ */
+declare const switchTrackClass: Record<SwitchSize, string>;
+declare const switchThumbClass: Record<SwitchSize, string>;
+declare const switchTrackBaseClass = "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-destructive/40";
+declare const switchThumbBaseClass = "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform";
+
+interface SwitchProps {
+    /** Visual size. */
+    switchSize?: SwitchSize;
+    /** Controlled checked state (Radix-style). */
+    checked?: boolean;
+    /** Initial checked state for uncontrolled usage. */
+    defaultChecked?: boolean;
+    /** Radix-style change handler — receives the new boolean directly. */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Form-library compatibility props. `value` mirrors what `<Field>` injects
+     * (RHF passes `field.value` as a boolean). `onChange` fires alongside
+     * `onCheckedChange` with a synthetic event so `field.onChange` works too.
+     */
+    value?: boolean | string | number;
+    onChange?: (event: ChangeEvent<HTMLButtonElement>) => void;
+    onBlur?: () => void;
+    /** Form name for native form submission. */
+    name?: string;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Mark required for form validation. */
+    required?: boolean;
+    /** Override id (otherwise auto-generated via useId). */
+    id?: string;
+    /** Class on the track (the switch itself). */
+    className?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+}
+/**
+ * Boolean toggle built on `@radix-ui/react-switch`. Renders only the track +
+ * thumb — wrap it in `<Field orientation="horizontal" label="…">` to add a
+ * label, helper text, error, and aria wiring without duplicating that logic
+ * inside every form control.
+ *
+ * @example Inside a Field (RHF + Zod)
+ * ```tsx
+ * <Field name="darkMode" label="Dark mode" orientation="horizontal">
+ *   <Switch />
+ * </Field>
+ * ```
+ *
+ * @example Bare in a settings list (custom layout)
+ * ```tsx
+ * <ul className="divide-y divide-border">
+ *   <li className="flex items-center justify-between py-3">
+ *     <span>Email digest</span>
+ *     <Switch checked={digest} onCheckedChange={setDigest} aria-label="Email digest" />
+ *   </li>
+ * </ul>
+ * ```
+ *
+ * @example Standalone controlled
+ * ```tsx
+ * <Switch
+ *   checked={enabled}
+ *   onCheckedChange={setEnabled}
+ *   aria-label="Enable notifications"
+ * />
+ * ```
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
 type TextareaVariant = 'default' | 'filled' | 'ghost';
 type TextareaSize = 'sm' | 'md' | 'lg';
 type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
@@ -868,4 +1273,4 @@ declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, 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, 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, type SortableValue, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, 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, useDashboardLayout, useDirection };
+export { 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, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, 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, 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, type SortableValue, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, 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, useDashboardLayout, useDirection };