@dimaan/ui 0.0.28 → 0.0.30

package/dist/index.d.cts

@@ -368,7 +368,15 @@ declare function Avatar({ src, alt, fallback, size, className, ...props }: Avata
 
 type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'destructive' | 'outline';
 type BadgeSize = 'sm' | 'md';
+type BadgeTone = 'solid' | 'soft';
 declare const badgeVariantClass: Record<BadgeVariant, string>;
+/**
+ * Soft / tinted tone — a translucent fill of each status color with dark-on-light
+ * (light-on-dark in dark mode) text. Calmer than the solid fills; preferred for
+ * status columns in dense data tables. `default` and `outline` are already calm, so
+ * their soft tone matches the solid tone.
+ */
+declare const badgeSoftVariantClass: Record<BadgeVariant, string>;
 declare const badgeSizeClass: Record<BadgeSize, string>;
 /** The dot-indicator size for each badge size. */
 declare const badgeDotSizeClass: Record<BadgeSize, string>;
@@ -377,6 +385,11 @@ declare const badgeBaseClass = "inline-flex shrink-0 items-center rounded-full b
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
+    /**
+     * Visual tone. `'solid'` (default) is a full-color fill; `'soft'` is a calmer
+     * tinted fill — preferred for status columns in dense data tables.
+     */
+    tone?: BadgeTone;
     /** Render a small dot before the label (useful for online/status indicators). */
     dot?: boolean;
 }
@@ -391,6 +404,12 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * <Badge variant="default">Archived</Badge>
  * ```
  *
+ * @example Soft tone — calmer status pills for data tables
+ * ```tsx
+ * <Badge variant="success" tone="soft">Active</Badge>
+ * <Badge variant="warning" tone="soft">Pending</Badge>
+ * ```
+ *
  * @example With status dot
  * ```tsx
  * <Badge variant="success" dot>Online</Badge>
@@ -453,6 +472,48 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+type CardProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Elevated content container — a rounded surface with a soft shadow and hairline
+ * border, matching the data table and filter panel so everything reads as one
+ * system. Compose with `CardHeader` / `CardTitle` / `CardDescription` /
+ * `CardContent` / `CardFooter`, or drop any content straight in.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Team members</CardTitle>
+ *     <CardDescription>Manage who has access.</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>…</CardContent>
+ *   <CardFooter>
+ *     <Button>Save</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+/** Top section of a card — stack a `CardTitle` (+ optional `CardDescription`) here. */
+declare const CardHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+/** Main body of a card. */
+declare const CardContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/** Trailing actions row of a card (e.g. buttons). */
+declare const CardFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Elevated card surface — soft shadow, hairline border, rounded corners. Matches
+ * the data-table / filter-panel elevation so cards read as part of one system.
+ */
+declare const cardBaseClass = "rounded-xl border border-border bg-card text-card-foreground shadow-[var(--shadow-card)]";
+declare const cardHeaderClass = "flex flex-col gap-1.5 p-6";
+declare const cardTitleClass = "text-lg font-semibold leading-none tracking-tight text-foreground";
+declare const cardDescriptionClass = "text-sm text-muted-foreground";
+declare const cardContentClass = "p-6 pt-0";
+declare const cardFooterClass = "flex items-center gap-2 p-6 pt-0";
+
 type CheckboxSize = 'sm' | 'md';
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
     /** Tri-state visual: when true, renders a dash and sets `aria-checked="mixed"`. */
@@ -473,7 +534,7 @@ declare const datePickerTriggerVariantClass: Record<DatePickerVariant, string>;
  * Logical properties keep RTL working free.
  */
 declare const datePickerTriggerSizeClass: Record<DatePickerSize, string>;
-declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
+declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
 /** Empty-state trigger text (placeholder color). */
 declare const datePickerPlaceholderClass = "truncate text-muted-foreground";
 /** Filled-state trigger text. */
@@ -485,7 +546,7 @@ declare const datePickerCalendarClass = "text-sm";
 /** Month/year caption row. */
 declare const datePickerCaptionClass = "flex items-center justify-between gap-2 pb-2 text-sm font-semibold";
 /** Prev/Next nav buttons. */
-declare const datePickerNavButtonClass = "inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+declare const datePickerNavButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
 /** Day cell wrapper (`td`). */
 declare const datePickerDayWrapperClass = "p-0 text-center";
 /**
@@ -493,7 +554,7 @@ declare const datePickerDayWrapperClass = "p-0 text-center";
  * today, outside-month, disabled) are applied to the wrapping day **cell** by
  * react-day-picker and target the button via descendant selectors below.
  */
-declare const datePickerDayBaseClass = "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-foreground font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+declare const datePickerDayBaseClass = "inline-flex size-8 items-center justify-center rounded-md text-sm text-foreground font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
 /** Day cell modifier — applied to the currently selected day. Targets the inner button. */
 declare const datePickerSelectedClass = "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary [&_button]:hover:text-primary-foreground";
 /** Day cell modifier — applied to today. */
@@ -503,7 +564,7 @@ declare const datePickerOutsideClass = "[&_button]:text-muted-foreground [&_butt
 /** Day cell modifier — applied to days outside min/max bounds (or custom matcher). */
 declare const datePickerDisabledClass = "[&_button]:pointer-events-none [&_button]:opacity-40";
 /** Weekday header cells. */
-declare const datePickerWeekdayClass = "h-8 w-8 text-center text-xs font-medium text-muted-foreground";
+declare const datePickerWeekdayClass = "size-8 text-center text-xs font-medium text-muted-foreground";
 /** Week row. */
 declare const datePickerWeekClass = "flex w-full";
 /** Weekdays row. */
@@ -724,7 +785,7 @@ declare const detailPageBodyClass = "flex flex-col gap-6";
  */
 declare const detailPageSkeletonRowClass = "h-5 w-full animate-pulse rounded-md bg-muted";
 /** Container around the not-found `<EmptyState>` — matches the ListPage empty surface. */
-declare const detailPageEmptyClass = "rounded-md border border-border bg-card";
+declare const detailPageEmptyClass = "rounded-xl border border-border bg-card";
 
 /**
  * Modal dialog built on `@radix-ui/react-dialog`. Compound API — same shape as
@@ -1312,7 +1373,7 @@ type InputVariant = 'default' | 'filled' | 'ghost';
 type InputSize = 'sm' | 'md' | 'lg';
 declare const inputVariantClass: Record<InputVariant, string>;
 declare const inputSizeClass: Record<InputSize, string>;
-declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     variant?: InputVariant;
@@ -1384,8 +1445,8 @@ interface TableSizeClasses {
 }
 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 selectedRowClass = "bg-primary/10";
+declare const sortIconClass = "inline-flex size-3 shrink-0 items-center justify-center";
 declare const alignClass: Record<ColumnAlign, string>;
 
 type SortDirection = 'asc' | 'desc';
@@ -1531,7 +1592,7 @@ declare const selectVariantClass: Record<SelectVariant, string>;
  * 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";
+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-[3px] focus:ring-primary-glow 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;
@@ -1721,6 +1782,10 @@ interface ListPageLabels extends TableLabels {
     reset?: string;
     /** "Apply" button label — shown in `manual` filter mode (the default). */
     apply?: string;
+    /** Filter-panel header title. Defaults to "Filters". */
+    filtersTitle?: string;
+    /** Word after the active-filter count, e.g. "active" → "2 active". */
+    filtersActive?: string;
     /** "No results matching filters" title. */
     emptyTitle?: string;
     /** "No results matching filters" description. */
@@ -1733,6 +1798,8 @@ interface ListPageLabels extends TableLabels {
 interface ListPageProps<T> {
     title: ReactNode;
     description?: ReactNode;
+    /** Small uppercase label above the title (forwarded to `PageHeader`). */
+    eyebrow?: ReactNode;
     /** Page-header bordered separator. Defaults to `true`. */
     bordered?: boolean;
     /** Header action slot — primary "Add" button, etc. */
@@ -1845,7 +1912,7 @@ interface ListPageProps<T> {
  * );
  * ```
  */
-declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, filters, filterValues, onFilterChange, filterMode, 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, filterMode, enableRowSelection, bulkActions, pagination, onPaginationChange, totalCount, eyebrow, pageSizeOptions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiSelectLabels {
     /** Search input placeholder. Direction-aware default: `"Search…"` / `"بحث…"`. */
@@ -1987,6 +2054,10 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     title: ReactNode;
     /** Optional secondary text under the title. */
     description?: ReactNode;
+    /** Small uppercase label above the title (a category / section eyebrow). */
+    eyebrow?: ReactNode;
+    /** Inline slot right after the title — e.g. a count badge. */
+    titleMeta?: 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. */
@@ -2059,6 +2130,10 @@ 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 pageHeaderEyebrowClass = "text-xs font-semibold uppercase tracking-wide text-primary";
+/** Wraps the title and its inline meta slot (e.g. a count badge) on one line. */
+declare const pageHeaderTitleLineClass = "flex flex-wrap items-center gap-x-2.5 gap-y-1";
+declare const pageHeaderTitleMetaClass = "shrink-0";
 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";
@@ -2072,7 +2147,7 @@ declare const radioItemSizeClass: Record<RadioGroupSize, string>;
 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 radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-primary-glow 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. */
@@ -2272,7 +2347,7 @@ type SwitchSize = 'sm' | 'md' | 'lg';
  */
 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 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-[3px] focus-visible:ring-primary-glow disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary aria-[invalid=true]:ring-[3px] 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 {
@@ -2346,7 +2421,7 @@ type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare const textareaVariantClass: Record<TextareaVariant, string>;
 declare const textareaSizeClass: Record<TextareaSize, string>;
 declare const textareaResizeClass: Record<TextareaResize, string>;
-declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
 
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     variant?: TextareaVariant;
@@ -2535,4 +2610,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, type CustomRowAction, 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, FileUpload, type FileUploadError, type FileUploadErrorCode, type FileUploadLabels, type FileUploadProps, 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, type PresetRowAction, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowAction, RowActions, type RowActionsProps, 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, fileUploadBaseClass, fileUploadDropzoneClass, fileUploadFileNameClass, fileUploadFileRowClass, fileUploadFileSizeClass, fileUploadHintClass, fileUploadIconClass, fileUploadPromptClass, fileUploadRemoveClass, 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, rowActionsBaseClass, rowActionsDestructiveClass, 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 BadgeTone, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, type ConfirmDialogLabels, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, type CustomRowAction, 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, FileUpload, type FileUploadError, type FileUploadErrorCode, type FileUploadLabels, type FileUploadProps, 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, type PresetRowAction, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowAction, RowActions, type RowActionsProps, 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, badgeSoftVariantClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cardBaseClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass, 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, fileUploadBaseClass, fileUploadDropzoneClass, fileUploadFileNameClass, fileUploadFileRowClass, fileUploadFileSizeClass, fileUploadHintClass, fileUploadIconClass, fileUploadPromptClass, fileUploadRemoveClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderEyebrowClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleLineClass, pageHeaderTitleMetaClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, rowActionsBaseClass, rowActionsDestructiveClass, 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 };

package/dist/index.d.ts

@@ -368,7 +368,15 @@ declare function Avatar({ src, alt, fallback, size, className, ...props }: Avata
 
 type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'destructive' | 'outline';
 type BadgeSize = 'sm' | 'md';
+type BadgeTone = 'solid' | 'soft';
 declare const badgeVariantClass: Record<BadgeVariant, string>;
+/**
+ * Soft / tinted tone — a translucent fill of each status color with dark-on-light
+ * (light-on-dark in dark mode) text. Calmer than the solid fills; preferred for
+ * status columns in dense data tables. `default` and `outline` are already calm, so
+ * their soft tone matches the solid tone.
+ */
+declare const badgeSoftVariantClass: Record<BadgeVariant, string>;
 declare const badgeSizeClass: Record<BadgeSize, string>;
 /** The dot-indicator size for each badge size. */
 declare const badgeDotSizeClass: Record<BadgeSize, string>;
@@ -377,6 +385,11 @@ declare const badgeBaseClass = "inline-flex shrink-0 items-center rounded-full b
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
+    /**
+     * Visual tone. `'solid'` (default) is a full-color fill; `'soft'` is a calmer
+     * tinted fill — preferred for status columns in dense data tables.
+     */
+    tone?: BadgeTone;
     /** Render a small dot before the label (useful for online/status indicators). */
     dot?: boolean;
 }
@@ -391,6 +404,12 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * <Badge variant="default">Archived</Badge>
  * ```
  *
+ * @example Soft tone — calmer status pills for data tables
+ * ```tsx
+ * <Badge variant="success" tone="soft">Active</Badge>
+ * <Badge variant="warning" tone="soft">Pending</Badge>
+ * ```
+ *
  * @example With status dot
  * ```tsx
  * <Badge variant="success" dot>Online</Badge>
@@ -453,6 +472,48 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+type CardProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Elevated content container — a rounded surface with a soft shadow and hairline
+ * border, matching the data table and filter panel so everything reads as one
+ * system. Compose with `CardHeader` / `CardTitle` / `CardDescription` /
+ * `CardContent` / `CardFooter`, or drop any content straight in.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Team members</CardTitle>
+ *     <CardDescription>Manage who has access.</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>…</CardContent>
+ *   <CardFooter>
+ *     <Button>Save</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+/** Top section of a card — stack a `CardTitle` (+ optional `CardDescription`) here. */
+declare const CardHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+/** Main body of a card. */
+declare const CardContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/** Trailing actions row of a card (e.g. buttons). */
+declare const CardFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Elevated card surface — soft shadow, hairline border, rounded corners. Matches
+ * the data-table / filter-panel elevation so cards read as part of one system.
+ */
+declare const cardBaseClass = "rounded-xl border border-border bg-card text-card-foreground shadow-[var(--shadow-card)]";
+declare const cardHeaderClass = "flex flex-col gap-1.5 p-6";
+declare const cardTitleClass = "text-lg font-semibold leading-none tracking-tight text-foreground";
+declare const cardDescriptionClass = "text-sm text-muted-foreground";
+declare const cardContentClass = "p-6 pt-0";
+declare const cardFooterClass = "flex items-center gap-2 p-6 pt-0";
+
 type CheckboxSize = 'sm' | 'md';
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
     /** Tri-state visual: when true, renders a dash and sets `aria-checked="mixed"`. */
@@ -473,7 +534,7 @@ declare const datePickerTriggerVariantClass: Record<DatePickerVariant, string>;
  * Logical properties keep RTL working free.
  */
 declare const datePickerTriggerSizeClass: Record<DatePickerSize, string>;
-declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
+declare const datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
 /** Empty-state trigger text (placeholder color). */
 declare const datePickerPlaceholderClass = "truncate text-muted-foreground";
 /** Filled-state trigger text. */
@@ -485,7 +546,7 @@ declare const datePickerCalendarClass = "text-sm";
 /** Month/year caption row. */
 declare const datePickerCaptionClass = "flex items-center justify-between gap-2 pb-2 text-sm font-semibold";
 /** Prev/Next nav buttons. */
-declare const datePickerNavButtonClass = "inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+declare const datePickerNavButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
 /** Day cell wrapper (`td`). */
 declare const datePickerDayWrapperClass = "p-0 text-center";
 /**
@@ -493,7 +554,7 @@ declare const datePickerDayWrapperClass = "p-0 text-center";
  * today, outside-month, disabled) are applied to the wrapping day **cell** by
  * react-day-picker and target the button via descendant selectors below.
  */
-declare const datePickerDayBaseClass = "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-foreground font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+declare const datePickerDayBaseClass = "inline-flex size-8 items-center justify-center rounded-md text-sm text-foreground font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
 /** Day cell modifier — applied to the currently selected day. Targets the inner button. */
 declare const datePickerSelectedClass = "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary [&_button]:hover:text-primary-foreground";
 /** Day cell modifier — applied to today. */
@@ -503,7 +564,7 @@ declare const datePickerOutsideClass = "[&_button]:text-muted-foreground [&_butt
 /** Day cell modifier — applied to days outside min/max bounds (or custom matcher). */
 declare const datePickerDisabledClass = "[&_button]:pointer-events-none [&_button]:opacity-40";
 /** Weekday header cells. */
-declare const datePickerWeekdayClass = "h-8 w-8 text-center text-xs font-medium text-muted-foreground";
+declare const datePickerWeekdayClass = "size-8 text-center text-xs font-medium text-muted-foreground";
 /** Week row. */
 declare const datePickerWeekClass = "flex w-full";
 /** Weekdays row. */
@@ -724,7 +785,7 @@ declare const detailPageBodyClass = "flex flex-col gap-6";
  */
 declare const detailPageSkeletonRowClass = "h-5 w-full animate-pulse rounded-md bg-muted";
 /** Container around the not-found `<EmptyState>` — matches the ListPage empty surface. */
-declare const detailPageEmptyClass = "rounded-md border border-border bg-card";
+declare const detailPageEmptyClass = "rounded-xl border border-border bg-card";
 
 /**
  * Modal dialog built on `@radix-ui/react-dialog`. Compound API — same shape as
@@ -1312,7 +1373,7 @@ type InputVariant = 'default' | 'filled' | 'ghost';
 type InputSize = 'sm' | 'md' | 'lg';
 declare const inputVariantClass: Record<InputVariant, string>;
 declare const inputSizeClass: Record<InputSize, string>;
-declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     variant?: InputVariant;
@@ -1384,8 +1445,8 @@ interface TableSizeClasses {
 }
 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 selectedRowClass = "bg-primary/10";
+declare const sortIconClass = "inline-flex size-3 shrink-0 items-center justify-center";
 declare const alignClass: Record<ColumnAlign, string>;
 
 type SortDirection = 'asc' | 'desc';
@@ -1531,7 +1592,7 @@ declare const selectVariantClass: Record<SelectVariant, string>;
  * 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";
+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-[3px] focus:ring-primary-glow 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;
@@ -1721,6 +1782,10 @@ interface ListPageLabels extends TableLabels {
     reset?: string;
     /** "Apply" button label — shown in `manual` filter mode (the default). */
     apply?: string;
+    /** Filter-panel header title. Defaults to "Filters". */
+    filtersTitle?: string;
+    /** Word after the active-filter count, e.g. "active" → "2 active". */
+    filtersActive?: string;
     /** "No results matching filters" title. */
     emptyTitle?: string;
     /** "No results matching filters" description. */
@@ -1733,6 +1798,8 @@ interface ListPageLabels extends TableLabels {
 interface ListPageProps<T> {
     title: ReactNode;
     description?: ReactNode;
+    /** Small uppercase label above the title (forwarded to `PageHeader`). */
+    eyebrow?: ReactNode;
     /** Page-header bordered separator. Defaults to `true`. */
     bordered?: boolean;
     /** Header action slot — primary "Add" button, etc. */
@@ -1845,7 +1912,7 @@ interface ListPageProps<T> {
  * );
  * ```
  */
-declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, filters, filterValues, onFilterChange, filterMode, 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, filterMode, enableRowSelection, bulkActions, pagination, onPaginationChange, totalCount, eyebrow, pageSizeOptions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiSelectLabels {
     /** Search input placeholder. Direction-aware default: `"Search…"` / `"بحث…"`. */
@@ -1987,6 +2054,10 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     title: ReactNode;
     /** Optional secondary text under the title. */
     description?: ReactNode;
+    /** Small uppercase label above the title (a category / section eyebrow). */
+    eyebrow?: ReactNode;
+    /** Inline slot right after the title — e.g. a count badge. */
+    titleMeta?: 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. */
@@ -2059,6 +2130,10 @@ 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 pageHeaderEyebrowClass = "text-xs font-semibold uppercase tracking-wide text-primary";
+/** Wraps the title and its inline meta slot (e.g. a count badge) on one line. */
+declare const pageHeaderTitleLineClass = "flex flex-wrap items-center gap-x-2.5 gap-y-1";
+declare const pageHeaderTitleMetaClass = "shrink-0";
 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";
@@ -2072,7 +2147,7 @@ declare const radioItemSizeClass: Record<RadioGroupSize, string>;
 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 radioItemBaseClass = "aspect-square shrink-0 rounded-full border border-input bg-background text-primary outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-primary-glow 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. */
@@ -2272,7 +2347,7 @@ type SwitchSize = 'sm' | 'md' | 'lg';
  */
 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 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-[3px] focus-visible:ring-primary-glow disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary aria-[invalid=true]:ring-[3px] 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 {
@@ -2346,7 +2421,7 @@ type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare const textareaVariantClass: Record<TextareaVariant, string>;
 declare const textareaSizeClass: Record<TextareaSize, string>;
 declare const textareaResizeClass: Record<TextareaResize, string>;
-declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] focus-within:ring-primary-glow aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
 
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     variant?: TextareaVariant;
@@ -2535,4 +2610,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, type CustomRowAction, 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, FileUpload, type FileUploadError, type FileUploadErrorCode, type FileUploadLabels, type FileUploadProps, 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, type PresetRowAction, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowAction, RowActions, type RowActionsProps, 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, fileUploadBaseClass, fileUploadDropzoneClass, fileUploadFileNameClass, fileUploadFileRowClass, fileUploadFileSizeClass, fileUploadHintClass, fileUploadIconClass, fileUploadPromptClass, fileUploadRemoveClass, 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, rowActionsBaseClass, rowActionsDestructiveClass, 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 BadgeTone, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, type ConfirmDialogLabels, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, type CustomRowAction, 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, FileUpload, type FileUploadError, type FileUploadErrorCode, type FileUploadLabels, type FileUploadProps, 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, type PresetRowAction, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowAction, RowActions, type RowActionsProps, 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, badgeSoftVariantClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cardBaseClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass, 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, fileUploadBaseClass, fileUploadDropzoneClass, fileUploadFileNameClass, fileUploadFileRowClass, fileUploadFileSizeClass, fileUploadHintClass, fileUploadIconClass, fileUploadPromptClass, fileUploadRemoveClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderEyebrowClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleLineClass, pageHeaderTitleMetaClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, rowActionsBaseClass, rowActionsDestructiveClass, 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 };