@dimaan/ui 0.0.22 → 0.0.23

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, FormEventHandler, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ForwardRefExoticComponent, RefAttributes, FormEventHandler, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { LinkProps } from 'react-router-dom';
 import { Locale } from 'react-day-picker';
@@ -1029,6 +1029,117 @@ type FieldProps<TValues extends FieldValues = FieldValues, TName extends FieldPa
  */
 declare function Field<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FieldProps<TValues, TName>): ReactElement;
 
+type FileUploadErrorCode = 'file-too-large' | 'file-type-rejected';
+interface FileUploadError {
+    code: FileUploadErrorCode;
+    /** Direction-aware human-readable message. */
+    message: string;
+    /** The rejected file. */
+    file: File;
+}
+interface FileUploadLabels {
+    /** Empty-dropzone prompt. Direction-aware default. */
+    prompt?: string;
+    /** Hint line under the prompt. Defaults to `Max {maxSize} MB` (direction-aware). */
+    hint?: string;
+    /** aria-label prefix for the remove (×) button. Direction-aware default. */
+    remove?: string;
+}
+interface FileUploadBaseProps {
+    /** Native `accept` filter (e.g. `"image/*,.pdf"`). Also enforced on drop. */
+    accept?: string;
+    /** Max size per file, in MB. Defaults to `5`. */
+    maxSize?: number;
+    disabled?: boolean;
+    /** Marks the underlying input required (for form validation). */
+    required?: boolean;
+    /** Native form name. */
+    name?: string;
+    /** Override id (otherwise auto-generated via useId). */
+    id?: string;
+    /** Fires when a file is rejected by `accept` / `maxSize`. */
+    onError?: (error: FileUploadError) => void;
+    /** Called when focus leaves the input. */
+    onBlur?: () => void;
+    /** Localized copy. */
+    labels?: FileUploadLabels;
+    /** Class on the outer wrapper. */
+    className?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+}
+/**
+ * Discriminated on `multiple`: the value is `File | null` for single mode and
+ * `File[]` for multiple mode.
+ */
+type FileUploadProps = FileUploadBaseProps & ({
+    multiple?: false;
+    value?: File | null;
+    defaultValue?: File | null;
+    onValueChange?: (file: File | null) => void;
+    onChange?: (file: File | null) => void;
+} | {
+    multiple: true;
+    value?: File[];
+    defaultValue?: File[];
+    onValueChange?: (files: File[]) => void;
+    onChange?: (files: File[]) => void;
+});
+/**
+ * Drag-and-drop file picker. **Bare control** (no inline label/error) — wrap in
+ * `<Field label="…">` for label + helper + error wiring (ADR-007). Discriminated
+ * on `multiple`: value is `File | null` (single) or `File[]` (multiple).
+ *
+ * Rejected files (by `accept` / `maxSize`) are not added and reported through
+ * `onError` — surface them via `toast(...)` or the wrapping `<Field>` error.
+ * Direction-aware copy (EN / AR) via `useDirection()`; override with `labels`.
+ *
+ * @example Single file inside a Field (RHF + Zod)
+ * ```tsx
+ * <Field name="cv" label="CV (PDF)" required>
+ *   <FileUpload accept=".pdf" maxSize={10} onError={(e) => toast.error(e.message)} />
+ * </Field>
+ * ```
+ *
+ * @example Multiple files, controlled
+ * ```tsx
+ * <FileUpload
+ *   multiple
+ *   accept="image/*"
+ *   value={images}
+ *   onValueChange={setImages}
+ *   aria-label="Gallery images"
+ * />
+ * ```
+ */
+declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * FileUpload styling. The dropzone is a `<label>` whose state is driven by
+ * `data-drag-active` / `data-invalid` / `data-disabled` and the focus ring of
+ * the visually-hidden `peer` input. Re-exported from `src/index.ts` so consumers
+ * can compose the same look onto custom elements.
+ */
+/** Outer wrapper — owns the drag handlers + stacks the dropzone and file rows. */
+declare const fileUploadBaseClass = "flex w-full min-w-0 flex-col gap-2";
+/** The clickable / drop target. */
+declare const fileUploadDropzoneClass: string;
+/** Upload glyph in the empty dropzone. */
+declare const fileUploadIconClass = "size-8 text-muted-foreground";
+/** Primary prompt line. */
+declare const fileUploadPromptClass = "text-sm text-foreground";
+/** Secondary hint line (size limit, etc.). */
+declare const fileUploadHintClass = "text-xs text-muted-foreground";
+/** A selected-file row (icon + name/size + remove). */
+declare const fileUploadFileRowClass = "flex items-center justify-between gap-2 rounded-md border border-border bg-card px-3 py-2";
+/** File name (truncates). */
+declare const fileUploadFileNameClass = "truncate text-sm font-medium text-foreground";
+/** File size sub-label. */
+declare const fileUploadFileSizeClass = "text-xs text-muted-foreground";
+/** The per-file "×" remove button. */
+declare const fileUploadRemoveClass = "inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+
 interface FormPageLabels {
     /** Back button label (top-left). Direction-aware default: `"Back"` / `"رجوع"`. */
     back?: string;
@@ -2261,4 +2372,4 @@ declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, type ConfirmDialogLabels, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, DetailPage, type DetailPageLabels, type DetailPageNotFoundState, type DetailPageProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, FormPage, type FormPageLabels, type FormPageProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, ListPage, type ListPageDateFilter, type ListPageEmptyState, type ListPageFilter, type ListPageFilterWidth, type ListPageLabels, type ListPageMultiSelectFilter, type ListPageProps, type ListPageSelectFilter, type ListPageTextFilter, MultiSelect, type MultiSelectLabels, type MultiSelectProps, PageHeader, type PageHeaderBackProps, type PageHeaderBackRenderProps, type PageHeaderHeadingLevel, type PageHeaderProps, type PaginationState, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, Switch, type SwitchProps, type SwitchSize, Table, type TableLabels, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, type ConfirmDialogLabels, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, DetailPage, type DetailPageLabels, type DetailPageNotFoundState, type DetailPageProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, 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, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, Switch, type SwitchProps, type SwitchSize, Table, type TableLabels, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, 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, 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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, FormEventHandler, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ForwardRefExoticComponent, RefAttributes, FormEventHandler, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { LinkProps } from 'react-router-dom';
 import { Locale } from 'react-day-picker';
@@ -1029,6 +1029,117 @@ type FieldProps<TValues extends FieldValues = FieldValues, TName extends FieldPa
  */
 declare function Field<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FieldProps<TValues, TName>): ReactElement;
 
+type FileUploadErrorCode = 'file-too-large' | 'file-type-rejected';
+interface FileUploadError {
+    code: FileUploadErrorCode;
+    /** Direction-aware human-readable message. */
+    message: string;
+    /** The rejected file. */
+    file: File;
+}
+interface FileUploadLabels {
+    /** Empty-dropzone prompt. Direction-aware default. */
+    prompt?: string;
+    /** Hint line under the prompt. Defaults to `Max {maxSize} MB` (direction-aware). */
+    hint?: string;
+    /** aria-label prefix for the remove (×) button. Direction-aware default. */
+    remove?: string;
+}
+interface FileUploadBaseProps {
+    /** Native `accept` filter (e.g. `"image/*,.pdf"`). Also enforced on drop. */
+    accept?: string;
+    /** Max size per file, in MB. Defaults to `5`. */
+    maxSize?: number;
+    disabled?: boolean;
+    /** Marks the underlying input required (for form validation). */
+    required?: boolean;
+    /** Native form name. */
+    name?: string;
+    /** Override id (otherwise auto-generated via useId). */
+    id?: string;
+    /** Fires when a file is rejected by `accept` / `maxSize`. */
+    onError?: (error: FileUploadError) => void;
+    /** Called when focus leaves the input. */
+    onBlur?: () => void;
+    /** Localized copy. */
+    labels?: FileUploadLabels;
+    /** Class on the outer wrapper. */
+    className?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+}
+/**
+ * Discriminated on `multiple`: the value is `File | null` for single mode and
+ * `File[]` for multiple mode.
+ */
+type FileUploadProps = FileUploadBaseProps & ({
+    multiple?: false;
+    value?: File | null;
+    defaultValue?: File | null;
+    onValueChange?: (file: File | null) => void;
+    onChange?: (file: File | null) => void;
+} | {
+    multiple: true;
+    value?: File[];
+    defaultValue?: File[];
+    onValueChange?: (files: File[]) => void;
+    onChange?: (files: File[]) => void;
+});
+/**
+ * Drag-and-drop file picker. **Bare control** (no inline label/error) — wrap in
+ * `<Field label="…">` for label + helper + error wiring (ADR-007). Discriminated
+ * on `multiple`: value is `File | null` (single) or `File[]` (multiple).
+ *
+ * Rejected files (by `accept` / `maxSize`) are not added and reported through
+ * `onError` — surface them via `toast(...)` or the wrapping `<Field>` error.
+ * Direction-aware copy (EN / AR) via `useDirection()`; override with `labels`.
+ *
+ * @example Single file inside a Field (RHF + Zod)
+ * ```tsx
+ * <Field name="cv" label="CV (PDF)" required>
+ *   <FileUpload accept=".pdf" maxSize={10} onError={(e) => toast.error(e.message)} />
+ * </Field>
+ * ```
+ *
+ * @example Multiple files, controlled
+ * ```tsx
+ * <FileUpload
+ *   multiple
+ *   accept="image/*"
+ *   value={images}
+ *   onValueChange={setImages}
+ *   aria-label="Gallery images"
+ * />
+ * ```
+ */
+declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * FileUpload styling. The dropzone is a `<label>` whose state is driven by
+ * `data-drag-active` / `data-invalid` / `data-disabled` and the focus ring of
+ * the visually-hidden `peer` input. Re-exported from `src/index.ts` so consumers
+ * can compose the same look onto custom elements.
+ */
+/** Outer wrapper — owns the drag handlers + stacks the dropzone and file rows. */
+declare const fileUploadBaseClass = "flex w-full min-w-0 flex-col gap-2";
+/** The clickable / drop target. */
+declare const fileUploadDropzoneClass: string;
+/** Upload glyph in the empty dropzone. */
+declare const fileUploadIconClass = "size-8 text-muted-foreground";
+/** Primary prompt line. */
+declare const fileUploadPromptClass = "text-sm text-foreground";
+/** Secondary hint line (size limit, etc.). */
+declare const fileUploadHintClass = "text-xs text-muted-foreground";
+/** A selected-file row (icon + name/size + remove). */
+declare const fileUploadFileRowClass = "flex items-center justify-between gap-2 rounded-md border border-border bg-card px-3 py-2";
+/** File name (truncates). */
+declare const fileUploadFileNameClass = "truncate text-sm font-medium text-foreground";
+/** File size sub-label. */
+declare const fileUploadFileSizeClass = "text-xs text-muted-foreground";
+/** The per-file "×" remove button. */
+declare const fileUploadRemoveClass = "inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+
 interface FormPageLabels {
     /** Back button label (top-left). Direction-aware default: `"Back"` / `"رجوع"`. */
     back?: string;
@@ -2261,4 +2372,4 @@ declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, type ConfirmDialogLabels, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, DetailPage, type DetailPageLabels, type DetailPageNotFoundState, type DetailPageProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, FormPage, type FormPageLabels, type FormPageProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, ListPage, type ListPageDateFilter, type ListPageEmptyState, type ListPageFilter, type ListPageFilterWidth, type ListPageLabels, type ListPageMultiSelectFilter, type ListPageProps, type ListPageSelectFilter, type ListPageTextFilter, MultiSelect, type MultiSelectLabels, type MultiSelectProps, PageHeader, type PageHeaderBackProps, type PageHeaderBackRenderProps, type PageHeaderHeadingLevel, type PageHeaderProps, type PaginationState, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, Switch, type SwitchProps, type SwitchSize, Table, type TableLabels, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, type ConfirmDialogLabels, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, DetailPage, type DetailPageLabels, type DetailPageNotFoundState, type DetailPageProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, type Direction, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, Field, type FieldOrientation, type FieldProps, type FieldRHFProps, 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, RadioGroup, RadioGroupItem, type RadioGroupOption, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RowSelectionState, Select, type SelectOption, type SelectProps, type SelectSize, type SelectVariant, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, Switch, type SwitchProps, type SwitchSize, Table, type TableLabels, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, 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, 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.js

@@ -3,7 +3,7 @@ import { forwardRef, Children, isValidElement, cloneElement, createContext, useR
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Loader2, Check, Minus, Calendar, X, ChevronLeft, ChevronRight, ChevronDown, Search, ChevronUp, ArrowLeft, Menu, FileQuestion, ChevronsUpDown, Inbox, RefreshCw, SearchX } from 'lucide-react';
+import { Loader2, Check, Minus, Calendar, X, ChevronLeft, ChevronRight, Upload, File as File$1, ChevronDown, Search, ChevronUp, ArrowLeft, Menu, FileQuestion, ChevronsUpDown, Inbox, RefreshCw, SearchX } from 'lucide-react';
 import { DirectionProvider } from '@radix-ui/react-direction';
 import { Link, useLocation, useResolvedPath, useNavigate } from 'react-router-dom';
 import * as RadixPopover from '@radix-ui/react-popover';
@@ -271,7 +271,9 @@ function DashboardContent({ className, children, ...props }) {
     "main",
     {
       className: cn(
-        "flex min-h-[calc(100vh-var(--header-height))] flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8",
+        // `min-w-0` keeps wide children (Table, code blocks) scrolling within
+        // this column instead of widening the page past 100%.
+        "flex min-h-[calc(100vh-var(--header-height))] min-w-0 flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8",
         className
       ),
       ...props,
@@ -337,7 +339,10 @@ function DashboardMain({ className, children, ...props }) {
     "div",
     {
       className: cn(
-        "flex min-h-screen flex-1 flex-col transition-[margin] duration-200 ease-out",
+        // `min-w-0` lets this flex column shrink below its content's intrinsic
+        // width so wide children (e.g. a Table) scroll internally instead of
+        // stretching the whole layout past 100%.
+        "flex min-h-screen min-w-0 flex-1 flex-col transition-[margin] duration-200 ease-out",
         // On desktop, push the main column past the fixed sidebar using logical margin.
         collapsed ? "lg:ms-[var(--sidebar-width-collapsed)]" : "lg:ms-[var(--sidebar-width)]",
         className
@@ -1697,19 +1702,231 @@ function mergeRefs(...refs) {
   };
 }
 
+// src/components/file-upload/fileUploadVariants.ts
+var fileUploadBaseClass = "flex w-full min-w-0 flex-col gap-2";
+var fileUploadDropzoneClass = "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-input bg-muted/40 px-6 py-8 text-center transition-colors hover:border-ring peer-focus-visible:border-ring peer-focus-visible:ring-2 peer-focus-visible:ring-ring/40 data-[drag-active=true]:border-ring data-[drag-active=true]:bg-accent data-[invalid=true]:border-destructive data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[disabled=true]:hover:border-input";
+var fileUploadIconClass = "size-8 text-muted-foreground";
+var fileUploadPromptClass = "text-sm text-foreground";
+var fileUploadHintClass = "text-xs text-muted-foreground";
+var fileUploadFileRowClass = "flex items-center justify-between gap-2 rounded-md border border-border bg-card px-3 py-2";
+var fileUploadFileNameClass = "truncate text-sm font-medium text-foreground";
+var fileUploadFileSizeClass = "text-xs text-muted-foreground";
+var fileUploadRemoveClass = "inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+var DEFAULT_MAX_SIZE_MB = 5;
+var DEFAULT_LABELS_LTR2 = {
+  prompt: "Drag & drop a file or click to browse",
+  remove: "Remove"
+};
+var DEFAULT_LABELS_RTL2 = {
+  prompt: "\u0627\u0633\u062D\u0628 \u0648\u0623\u0641\u0644\u062A \u0645\u0644\u0641\u064B\u0627 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0644\u0644\u0627\u062E\u062A\u064A\u0627\u0631",
+  remove: "\u0625\u0632\u0627\u0644\u0629"
+};
+function normalizeFiles(value) {
+  if (Array.isArray(value)) return value.filter((f) => f instanceof File);
+  return value instanceof File ? [value] : [];
+}
+function fileKey(file) {
+  return `${file.name}:${file.size}:${file.lastModified}`;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
+}
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0 || tokens.includes("*") || tokens.includes("*/*")) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return tokens.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+var FileUploadImpl = forwardRef(
+  function FileUpload(props, ref) {
+    const {
+      multiple = false,
+      accept,
+      maxSize = DEFAULT_MAX_SIZE_MB,
+      disabled = false,
+      required,
+      name,
+      id,
+      onError,
+      onBlur,
+      labels: labelsProp,
+      className,
+      value,
+      defaultValue,
+      onValueChange,
+      onChange,
+      "aria-invalid": ariaInvalid,
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel
+    } = props;
+    const dir = useDirection();
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const [dragActive, setDragActive] = useState(false);
+    const baseLabels = dir === "rtl" ? DEFAULT_LABELS_RTL2 : DEFAULT_LABELS_LTR2;
+    const prompt = labelsProp?.prompt ?? baseLabels.prompt;
+    const removeLabel = labelsProp?.remove ?? baseLabels.remove;
+    const hint = labelsProp?.hint ?? (dir === "rtl" ? `\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649 ${maxSize} \u0645\u064A\u062C\u0627\u0628\u0627\u064A\u062A` : `Max ${maxSize} MB`);
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = useState(() => normalizeFiles(defaultValue));
+    const files = isControlled ? normalizeFiles(value) : internal;
+    const invalid = ariaInvalid === true || ariaInvalid === "true";
+    const emit = (next) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(multiple ? next : next[0] ?? null);
+      onChange?.(multiple ? next : next[0] ?? null);
+    };
+    const tooLargeMessage = (file) => dir === "rtl" ? `${file.name} \u0623\u0643\u0628\u0631 \u0645\u0646 ${maxSize} \u0645\u064A\u062C\u0627\u0628\u0627\u064A\u062A` : `${file.name} is larger than ${maxSize} MB`;
+    const wrongTypeMessage = (file) => dir === "rtl" ? `${file.name} \u0644\u064A\u0633 \u0646\u0648\u0639 \u0645\u0644\u0641 \u0645\u0642\u0628\u0648\u0644` : `${file.name} is not an accepted file type`;
+    const addFiles = (incoming) => {
+      if (disabled) return;
+      const accepted = [];
+      for (const file of Array.from(incoming)) {
+        if (!matchesAccept(file, accept)) {
+          onError?.({ code: "file-type-rejected", message: wrongTypeMessage(file), file });
+          continue;
+        }
+        if (maxSize && file.size > maxSize * 1024 * 1024) {
+          onError?.({ code: "file-too-large", message: tooLargeMessage(file), file });
+          continue;
+        }
+        accepted.push(file);
+      }
+      if (accepted.length === 0) return;
+      if (!multiple) {
+        const [first] = accepted;
+        if (first) emit([first]);
+        return;
+      }
+      const byKey = new Map(files.map((f) => [fileKey(f), f]));
+      for (const f of accepted) byKey.set(fileKey(f), f);
+      emit([...byKey.values()]);
+    };
+    const handleInputChange = (event) => {
+      if (event.target.files) addFiles(event.target.files);
+      event.target.value = "";
+    };
+    const handleDrag = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (disabled) return;
+      if (event.type === "dragenter" || event.type === "dragover") setDragActive(true);
+      else if (event.type === "dragleave") setDragActive(false);
+    };
+    const handleDrop = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setDragActive(false);
+      if (!disabled && event.dataTransfer.files) addFiles(event.dataTransfer.files);
+    };
+    const remove = (file) => emit(files.filter((f) => fileKey(f) !== fileKey(file)));
+    const showDropzone = multiple || files.length === 0;
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop is a wrapper affordance; keyboard/click access is the inner <label> + focusable <input>.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "data-slot": "file-upload",
+          className: cn(fileUploadBaseClass, className),
+          onDragEnter: handleDrag,
+          onDragOver: handleDrag,
+          onDragLeave: handleDrag,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: inputId,
+                type: "file",
+                accept,
+                multiple,
+                name,
+                required,
+                disabled,
+                onChange: handleInputChange,
+                onBlur,
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-label": ariaLabel,
+                className: "peer sr-only"
+              }
+            ),
+            showDropzone ? /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: inputId,
+                "data-slot": "file-upload-dropzone",
+                "data-drag-active": dragActive ? "true" : void 0,
+                "data-invalid": invalid ? "true" : void 0,
+                "data-disabled": disabled ? "true" : void 0,
+                className: fileUploadDropzoneClass,
+                children: [
+                  /* @__PURE__ */ jsx(Upload, { "aria-hidden": "true", className: fileUploadIconClass }),
+                  /* @__PURE__ */ jsx("span", { className: fileUploadPromptClass, children: prompt }),
+                  /* @__PURE__ */ jsx("span", { className: fileUploadHintClass, children: hint })
+                ]
+              }
+            ) : null,
+            files.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: files.map((file) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                "data-slot": "file-upload-file",
+                className: fileUploadFileRowClass,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(File$1, { "aria-hidden": "true", className: "size-5 shrink-0 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsx("p", { className: fileUploadFileNameClass, children: file.name }),
+                      /* @__PURE__ */ jsx("p", { className: fileUploadFileSizeClass, children: formatBytes(file.size) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      "aria-label": `${removeLabel}: ${file.name}`,
+                      "data-slot": "file-upload-remove",
+                      className: fileUploadRemoveClass,
+                      onClick: () => remove(file),
+                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+                    }
+                  )
+                ]
+              },
+              fileKey(file)
+            )) }) : null
+          ]
+        }
+      )
+    );
+  }
+);
+var FileUpload2 = FileUploadImpl;
+
 // src/components/form-page/formPageVariants.ts
 var formPageBaseClass = "flex w-full flex-col gap-6";
 var formPageBodyClass = "flex-1";
 var formPageActionsBarClass = "sticky bottom-0 -mx-6 -mb-6 mt-6 flex items-center justify-end gap-2 border-t border-border bg-background/95 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80";
 var formPageSkeletonRowClass = "h-10 w-full animate-pulse rounded-md bg-muted";
 var DEFAULT_SKELETON_ROW_COUNT2 = 6;
-var DEFAULT_LABELS_LTR2 = {
+var DEFAULT_LABELS_LTR3 = {
   back: "Back",
   cancel: "Cancel",
   save: "Save",
   saving: "Saving\u2026"
 };
-var DEFAULT_LABELS_RTL2 = {
+var DEFAULT_LABELS_RTL3 = {
   back: "\u0631\u062C\u0648\u0639",
   cancel: "\u0625\u0644\u063A\u0627\u0621",
   save: "\u062D\u0641\u0638",
@@ -1736,7 +1953,7 @@ function FormPage({
   const dir = useDirection();
   const formContext = useFormContext();
   const submitting = isSubmitting ?? formContext?.formState?.isSubmitting ?? false;
-  const defaults = dir === "rtl" ? DEFAULT_LABELS_RTL2 : DEFAULT_LABELS_LTR2;
+  const defaults = dir === "rtl" ? DEFAULT_LABELS_RTL3 : DEFAULT_LABELS_LTR3;
   const labels = { ...defaults, ...labelsProp };
   const goBack = () => navigate(-1);
   return /* @__PURE__ */ jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
@@ -2154,7 +2371,7 @@ function Table(props) {
   const sizeClasses = tableSizeClass[size];
   const showToolbar = enableRowSelection && bulkActions !== void 0 && selected.size > 0;
   const skeletonCount = loadingRowCount ?? pageSize;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-3", className), children: [
     showToolbar && /* @__PURE__ */ jsx(
       Toolbar,
       {
@@ -2187,7 +2404,9 @@ function Table(props) {
                 "thead",
                 {
                   className: cn(
-                    "bg-muted/40 text-muted-foreground",
+                    // Opaque (not bg-muted/40) so a sticky header fully hides the rows
+                    // scrolling underneath it.
+                    "bg-muted text-muted-foreground",
                     maxHeight !== void 0 && "sticky top-0 z-10"
                   ),
                   children: /* @__PURE__ */ jsxs("tr", { children: [
@@ -2389,11 +2608,11 @@ var multiSelectSearchRowClass = "border-b border-border p-1";
 var multiSelectListClass = "max-h-60 overflow-y-auto overflow-x-hidden p-1";
 var multiSelectOptionClass = "flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground has-[:focus-visible]:bg-accent has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50";
 var multiSelectEmptyClass = "px-2 py-6 text-center text-sm text-muted-foreground";
-var DEFAULT_LABELS_LTR3 = {
+var DEFAULT_LABELS_LTR4 = {
   search: "Search\u2026",
   empty: "No results"
 };
-var DEFAULT_LABELS_RTL3 = {
+var DEFAULT_LABELS_RTL4 = {
   search: "\u0628\u062D\u062B\u2026",
   empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C"
 };
@@ -2424,7 +2643,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
   "aria-label": ariaLabel
 }, ref) {
   const dir = useDirection();
-  const labels = { ...dir === "rtl" ? DEFAULT_LABELS_RTL3 : DEFAULT_LABELS_LTR3, ...labelsProp };
+  const labels = { ...dir === "rtl" ? DEFAULT_LABELS_RTL4 : DEFAULT_LABELS_LTR4, ...labelsProp };
   const generatedId = useId();
   const triggerId = id ?? generatedId;
   const isControlled = value !== void 0;
@@ -3262,6 +3481,6 @@ function Tooltip({
   );
 }
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppShell, Avatar, Badge, Button, Checkbox, ConfirmDialogProvider, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DetailPage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, FormPage, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, MultiSelect, PageHeader, RadioGroup, RadioGroupItem, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, Toaster, Tooltip, TooltipProvider, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppShell, Avatar, Badge, Button, Checkbox, ConfirmDialogProvider, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DetailPage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, FileUpload2 as FileUpload, FormPage, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, MultiSelect, PageHeader, RadioGroup, RadioGroupItem, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, Toaster, Tooltip, TooltipProvider, 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, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map