najm-kit 0.0.30 → 0.0.32

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { RefObject, ComponentType, ReactNode, CSSProperties, MouseEvent, MouseEventHandler, InputHTMLAttributes, Ref } from 'react';
+import React__default, { RefObject, ComponentType, ReactNode, InputHTMLAttributes, Ref, CSSProperties, MouseEvent, MouseEventHandler } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -442,7 +442,14 @@ declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof Dialo
 declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
 declare function DialogClose({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
-declare function DialogContent({ className, children, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content>): react_jsx_runtime.JSX.Element;
+type DialogPadding = "none" | "sm" | "md" | "lg";
+interface DialogContentProps extends React$1.ComponentProps<typeof DialogPrimitive.Content> {
+    /** Controls the padding of the dialog surface. `none` also collapses the header/body/footer gap. Defaults to `md` (p-6). */
+    padding?: DialogPadding;
+    /** Hides the built-in top-right close (X). Use when the content provides its own close control (e.g. inside a page header). */
+    hideClose?: boolean;
+}
+declare function DialogContent({ className, children, padding, hideClose, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
 declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DialogFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
@@ -460,6 +467,44 @@ type DialogWidth = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl' | '
 type DialogHeight = 'auto' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full';
 type RenderSlot<T = any> = T | ((ctx: T) => ReactNode);
 
+interface PageHeaderSlotProps {
+    children: ReactNode;
+    className?: string;
+}
+interface NPageHeaderProps {
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    title: string;
+    subtitle?: string;
+    actions?: ReactNode;
+    filters?: ReactNode;
+    top?: ReactNode;
+    search?: InputHTMLAttributes<HTMLInputElement> & {
+        placeholder?: string;
+        ref?: Ref<HTMLInputElement>;
+    };
+    children?: ReactNode;
+    className?: string;
+    headerClassName?: string;
+    /** Renders the header as a card-like surface. `bordered` is kept as an alias. */
+    card?: boolean;
+    bordered?: boolean;
+}
+declare function NPageHeaderActions({ children, className }: PageHeaderSlotProps): react_jsx_runtime.JSX.Element;
+declare namespace NPageHeaderActions {
+    var displayName: string;
+}
+declare function NPageHeaderFilters({ children, className }: PageHeaderSlotProps): react_jsx_runtime.JSX.Element;
+declare namespace NPageHeaderFilters {
+    var displayName: string;
+}
+declare function NPageHeaderTop({ children, className }: PageHeaderSlotProps): react_jsx_runtime.JSX.Element;
+declare namespace NPageHeaderTop {
+    var displayName: string;
+}
+declare function NPageHeader({ icon: Icon, title, subtitle, actions, filters, top, search, children, className, headerClassName, card, bordered }: NPageHeaderProps): react_jsx_runtime.JSX.Element;
+
 type DialogActionMode = "auto" | "dialog" | "content";
 interface ButtonConfig {
     text: string;
@@ -486,6 +531,10 @@ interface DialogConfig {
     id: string;
     title?: string;
     description?: string;
+    /** Renders an NPageHeader as the dialog's header (icon, title, subtitle, actions). Replaces the plain title/description header; `title` is still used as the accessible label. */
+    pageHeader?: NPageHeaderProps;
+    /** Padding preset for the dialog surface. `none` is ideal for full-bleed content (custom headers, tables). Defaults to `md`. */
+    padding?: DialogPadding;
     children?: ReactNode;
     primaryButton?: ButtonConfig;
     secondaryButton?: ButtonConfig;
@@ -505,6 +554,10 @@ interface PromiseDialogConfig extends DialogConfig {
 interface PushDialogOptions {
     title?: string;
     description?: string;
+    /** Renders an NPageHeader as the dialog's header (icon, title, subtitle, actions). Replaces the plain title/description header; `title` is still used as the accessible label. */
+    pageHeader?: NPageHeaderProps;
+    /** Padding preset for the dialog surface. `none` is ideal for full-bleed content (custom headers, tables). Defaults to `md`. */
+    padding?: DialogPadding;
     children?: ReactNode;
     primaryButton?: Partial<ButtonConfig>;
     secondaryButton?: Partial<ButtonConfig>;
@@ -3302,44 +3355,6 @@ interface NPageLayoutProps extends React$1.HTMLAttributes<HTMLElement> {
 }
 declare function NPageLayout({ as: Comp, className, style, ...props }: NPageLayoutProps): react_jsx_runtime.JSX.Element;
 
-interface PageHeaderSlotProps {
-    children: ReactNode;
-    className?: string;
-}
-interface NPageHeaderProps {
-    icon: ComponentType<{
-        className?: string;
-    }>;
-    title: string;
-    subtitle?: string;
-    actions?: ReactNode;
-    filters?: ReactNode;
-    top?: ReactNode;
-    search?: InputHTMLAttributes<HTMLInputElement> & {
-        placeholder?: string;
-        ref?: Ref<HTMLInputElement>;
-    };
-    children?: ReactNode;
-    className?: string;
-    headerClassName?: string;
-    /** Renders the header as a card-like surface. `bordered` is kept as an alias. */
-    card?: boolean;
-    bordered?: boolean;
-}
-declare function NPageHeaderActions({ children, className }: PageHeaderSlotProps): react_jsx_runtime.JSX.Element;
-declare namespace NPageHeaderActions {
-    var displayName: string;
-}
-declare function NPageHeaderFilters({ children, className }: PageHeaderSlotProps): react_jsx_runtime.JSX.Element;
-declare namespace NPageHeaderFilters {
-    var displayName: string;
-}
-declare function NPageHeaderTop({ children, className }: PageHeaderSlotProps): react_jsx_runtime.JSX.Element;
-declare namespace NPageHeaderTop {
-    var displayName: string;
-}
-declare function NPageHeader({ icon: Icon, title, subtitle, actions, filters, top, search, children, className, headerClassName, card, bordered }: NPageHeaderProps): react_jsx_runtime.JSX.Element;
-
 interface InspectorSheetProps {
     open: boolean;
     onClose: () => void;
@@ -3348,4 +3363,4 @@ interface InspectorSheetProps {
 }
 declare function NInspectorSheet({ open, onClose, title, children }: InspectorSheetProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertLook, type AlertOrientation, type AlertProps, type AlertSize, type AlertTone, type AlertVariant, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarProps$1 as AvatarProps, type AvatarShape$1 as AvatarShape, type AvatarSize, AvatarStatus, type AvatarStatusType, Badge, type BadgeColor, type BadgeIcon, type BadgeLook, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BaseInput, type BuildDefaultFileColumnsOptions, Button, type ButtonConfig, type ButtonIcon, type ButtonLoaderPosition, type ButtonProps, type ButtonRounded, type ButtonSize, type ButtonVariant, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, type CheckboxGroupInputProps, CheckboxInput, type CheckboxInputProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorArrayInput, type ColorArrayInputProps, type ColorFormat, ColorPickerInput, type ColorPickerInputProps, Combobox, ComboboxInput, type ComboboxInputProps, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ContextMenuItem, DateInput, type DateInputProps, type DeleteDialogOptions, Dialog, type DialogActionMode, type DialogApi, DialogClose, type DialogConfig, DialogContent, DialogDescription, DialogFooter, DialogHeader, type DialogHeight, DialogOverlay, DialogPortal, type DialogRenderContext, type DialogRenderer, type DialogSize, type DialogStore, DialogTitle, DialogTrigger, type DialogWidth, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray, type DynamicArrayProps, EmojiInput, type EmojiInputProps, type FileBrowserMode, FileImportButton, FileInput, type FileInputProps, type FileNode, Form, FormControl, FormDescription, FormField, FormInput, type FormInputProps, FormItem, FormLabel, FormMessage, type FormProps, type FormSlotClassNames, type FormVariant, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, ImageInput, type ImageInputProps, Indicator, type IndicatorHorizontal, type IndicatorOverlay, type IndicatorPosition, type IndicatorProps, type IndicatorResponsivePosition, type IndicatorSize, type IndicatorVertical, Input, type InputIcon, Label, LangInput, type LangInputProps, type LinkComponentType, MultiSelectInput, type MultiSelectInputProps, NAJM_COMPONENT_NAMES, NAlert, type NAppCommandItem, NAppShell, type NAppShellAction, type NAppShellClassNames, type NAppShellProps, type NAppShellUser, NCard as NAsyncCard, type CardClassNames as NAsyncCardClassNames, type CardProps as NAsyncCardProps, NAvatar, type NAvatarClassNames, type NAvatarProps, type AvatarShape as NAvatarShape, NBadge, type NBadgeLook, type NBadgeProps, type NBulkAction, type NBulkActionButton, type NBulkActionSelect, NBulkActionsBar, type NBulkActionsBarProps, NButton, type NButtonProps, NCard, NCardAction, type CardClassNames as NCardClassNames, NCardFooter, type CardProps as NCardProps, NCommandPalette, type NCommandPaletteProps, NConfirmDialog, type NConfirmDialogProps, NContextMenu, type NContextMenuItem, type NContextMenuProps, NDataCardShell, type NDataCardShellActions, type NDataCardShellProps, NDeleteDialog, NDeleteDialogContent, type NDeleteDialogContentProps, type NDeleteDialogProps, NDetailCard, type NDetailCardClassNames, type NDetailCardProps, NDetailItem, type NDetailItemProps, NDetailList, type NDetailListItem, type NDetailListProps, NDialog, type NDialogDirectProps, type NDialogProps, NEmptyState, type NEmptyStateProps, NErrorBoundary, NErrorState, type NErrorStateProps, NFileBrowser, type NFileBrowserCardProps, type NFileBrowserProps, type NFileBrowserRenderThumbProps, NFileTypeIcon, type NFileTypeIconProps, NFilterBar, NFolderIcon, type NFolderIconProps, NForm, NFormSectionHeader, type NFormSectionHeaderProps, NIcon, type NIconProps, type NIconSource, NIndicator, NInspectorSheet, NLoadingState, type NLoadingStateProps, NMultiDialog, type NMultiDialogProps, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderFilters, type NPageHeaderProps, NPageHeaderTop, NPageLayout, type NPageLayoutProps, NPortalScopeProvider, NProgress, type NProgressProps, NRowActions, NSection, NSectionHeader, type NSectionHeaderActionsProps, type NSectionHeaderContentProps, type NSectionHeaderProps, type NSectionHeaderSubtitleProps, type NSectionHeaderTitleProps, NSectionInfo, type NSectionInfoProps, type NSectionProps, NSectionWithInfo, type NSectionWithInfoItem, type NSectionWithInfoProps, NSheet, type NSheetProps, NSidebar, NSidebarContent, type NSidebarContentProps, NSidebarFooter, type NSidebarFooterProps, NSidebarHeader, type NSidebarHeaderProps, NSidebarItem, NSidebarLogo, type NSidebarLogoProps, NSidebarMobile, type NSidebarMobileProps, NSidebarSection, type NSidebarSectionProps, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, type NSliderProps, NSmartPasteDialog, type NSmartPasteDialogProps, NSpinner, type NSpinnerProps, NStatCard, type NStatCardClassNames, type NStatCardProps, NStatCardSkeleton, type NStatCardVariant, Swap as NSwap, type NSwapProps, NTable, NTableCardRoot, type NTableCardRootProps, NTableCards, type NTableClassNames, NTableContent, NTableHeader, NTableLoadingSkeleton, type NTableMenu, type NTableMenuProp, NTablePagination, type NTableProps, NTableRowSkeleton, NTableSkeleton, type NTableState, NTabs, type NTabsClassNames, type NTabsColor, type NTabsItem, type NTabsProps, type NTabsStyles, NUploader, type NUploaderItem, type NUploaderItemStatus, type NUploaderProps, NViewBody, NViewToggle, type NajmAccent, type NajmAppearance, type NajmBorderSide, type NajmComponentName, type NajmComponentRadius, type NajmComponentStyleConfig, type NajmComponentThemeConfig, type NajmDensity, type NajmDesignConfig, NajmDesignProvider, type NajmDesignProviderProps, type NajmLayoutConfig, type NajmMode, type NajmPreset, type NajmRadiusScale, NajmScroll, type NajmScrollProps, type NajmSlotStyle, type NajmThemeConfig, NajmThemeProvider, type NajmThemeProviderProps, type NajmThemeTokens, type NajmTypographyConfig, type NajmVariantStyle, NativeSelect, type NativeSelectOption, type NativeSelectProps, type NavItem, type NavItemGroup, NumberInput, type NumberInputProps, PasswordInput, type PasswordInputProps, PhoneInput, type PhoneInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, type ProgressColor, type ProgressLabelPosition, type ProgressProps, type ProgressSize, type PushDialogOptions, RADIUS_VALUE_MAP, RadioGroup, RadioGroupInput, type RadioGroupInputProps, RadioGroupItem, type RenderSlot, RepeatingFields, type RepeatingFieldsProps, ScrollArea, type ScrollAreaProps, SearchField, SearchField as SearchInput, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectInput, type SelectInputProps, SelectItem, type SelectItemType$1 as SelectItemDataType, type SelectItemType, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, type SidebarItemProps, type SidebarProps, type SidebarWidths, SimpleTooltip, type SimpleTooltipProps, NSkeleton as Skeleton, Slider, SliderInput, type SliderInputProps, type SliderOrientation, type SliderProps, type SliderSize, type SliderVariant, type SmartPastePreview, type SpinnerVariant, StarRatingInput, type StarRatingInputProps, StatusPill, type StatusPillProps, type StatusPillTone, type StepConfig, StepIndicator, type StepMeta, StepsHeader, StepsProgress, type StorageMenuAction, type StorageSortOption, type StorageTarget, Swap, type SwapEffect, SwapIndeterminate, SwapOff, SwapOn, type SwapProps, type SwapSize, type SwapState, Switch, type SwitchColor, SwitchInput, type SwitchInputProps, type SwitchSize, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderColor, TableRow, type TableState, type TableStore, TableStoreContext, Tabs, TabsContent, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, TabsTrigger, type TabsTriggerProps, type TabsVariant, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, Textarea, TimeInput, type TimeInputProps, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseContextMenuResult, type UseNFormOptions, type UseStorageContextMenuOptions, type UseStorageContextMenuResult, type UserMenuAction, VariantProvider, type WizardClassNames, WizardForm, type WizardFormProps, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, indicatorVariants, inputBorderClasses, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };
+export { Alert, type AlertLook, type AlertOrientation, type AlertProps, type AlertSize, type AlertTone, type AlertVariant, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarProps$1 as AvatarProps, type AvatarShape$1 as AvatarShape, type AvatarSize, AvatarStatus, type AvatarStatusType, Badge, type BadgeColor, type BadgeIcon, type BadgeLook, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BaseInput, type BuildDefaultFileColumnsOptions, Button, type ButtonConfig, type ButtonIcon, type ButtonLoaderPosition, type ButtonProps, type ButtonRounded, type ButtonSize, type ButtonVariant, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, type CheckboxGroupInputProps, CheckboxInput, type CheckboxInputProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorArrayInput, type ColorArrayInputProps, type ColorFormat, ColorPickerInput, type ColorPickerInputProps, Combobox, ComboboxInput, type ComboboxInputProps, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ContextMenuItem, DateInput, type DateInputProps, type DeleteDialogOptions, Dialog, type DialogActionMode, type DialogApi, DialogClose, type DialogConfig, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, type DialogHeight, DialogOverlay, type DialogPadding, DialogPortal, type DialogRenderContext, type DialogRenderer, type DialogSize, type DialogStore, DialogTitle, DialogTrigger, type DialogWidth, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray, type DynamicArrayProps, EmojiInput, type EmojiInputProps, type FileBrowserMode, FileImportButton, FileInput, type FileInputProps, type FileNode, Form, FormControl, FormDescription, FormField, FormInput, type FormInputProps, FormItem, FormLabel, FormMessage, type FormProps, type FormSlotClassNames, type FormVariant, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, ImageInput, type ImageInputProps, Indicator, type IndicatorHorizontal, type IndicatorOverlay, type IndicatorPosition, type IndicatorProps, type IndicatorResponsivePosition, type IndicatorSize, type IndicatorVertical, Input, type InputIcon, Label, LangInput, type LangInputProps, type LinkComponentType, MultiSelectInput, type MultiSelectInputProps, NAJM_COMPONENT_NAMES, NAlert, type NAppCommandItem, NAppShell, type NAppShellAction, type NAppShellClassNames, type NAppShellProps, type NAppShellUser, NCard as NAsyncCard, type CardClassNames as NAsyncCardClassNames, type CardProps as NAsyncCardProps, NAvatar, type NAvatarClassNames, type NAvatarProps, type AvatarShape as NAvatarShape, NBadge, type NBadgeLook, type NBadgeProps, type NBulkAction, type NBulkActionButton, type NBulkActionSelect, NBulkActionsBar, type NBulkActionsBarProps, NButton, type NButtonProps, NCard, NCardAction, type CardClassNames as NCardClassNames, NCardFooter, type CardProps as NCardProps, NCommandPalette, type NCommandPaletteProps, NConfirmDialog, type NConfirmDialogProps, NContextMenu, type NContextMenuItem, type NContextMenuProps, NDataCardShell, type NDataCardShellActions, type NDataCardShellProps, NDeleteDialog, NDeleteDialogContent, type NDeleteDialogContentProps, type NDeleteDialogProps, NDetailCard, type NDetailCardClassNames, type NDetailCardProps, NDetailItem, type NDetailItemProps, NDetailList, type NDetailListItem, type NDetailListProps, NDialog, type NDialogDirectProps, type NDialogProps, NEmptyState, type NEmptyStateProps, NErrorBoundary, NErrorState, type NErrorStateProps, NFileBrowser, type NFileBrowserCardProps, type NFileBrowserProps, type NFileBrowserRenderThumbProps, NFileTypeIcon, type NFileTypeIconProps, NFilterBar, NFolderIcon, type NFolderIconProps, NForm, NFormSectionHeader, type NFormSectionHeaderProps, NIcon, type NIconProps, type NIconSource, NIndicator, NInspectorSheet, NLoadingState, type NLoadingStateProps, NMultiDialog, type NMultiDialogProps, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderFilters, type NPageHeaderProps, NPageHeaderTop, NPageLayout, type NPageLayoutProps, NPortalScopeProvider, NProgress, type NProgressProps, NRowActions, NSection, NSectionHeader, type NSectionHeaderActionsProps, type NSectionHeaderContentProps, type NSectionHeaderProps, type NSectionHeaderSubtitleProps, type NSectionHeaderTitleProps, NSectionInfo, type NSectionInfoProps, type NSectionProps, NSectionWithInfo, type NSectionWithInfoItem, type NSectionWithInfoProps, NSheet, type NSheetProps, NSidebar, NSidebarContent, type NSidebarContentProps, NSidebarFooter, type NSidebarFooterProps, NSidebarHeader, type NSidebarHeaderProps, NSidebarItem, NSidebarLogo, type NSidebarLogoProps, NSidebarMobile, type NSidebarMobileProps, NSidebarSection, type NSidebarSectionProps, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, type NSliderProps, NSmartPasteDialog, type NSmartPasteDialogProps, NSpinner, type NSpinnerProps, NStatCard, type NStatCardClassNames, type NStatCardProps, NStatCardSkeleton, type NStatCardVariant, Swap as NSwap, type NSwapProps, NTable, NTableCardRoot, type NTableCardRootProps, NTableCards, type NTableClassNames, NTableContent, NTableHeader, NTableLoadingSkeleton, type NTableMenu, type NTableMenuProp, NTablePagination, type NTableProps, NTableRowSkeleton, NTableSkeleton, type NTableState, NTabs, type NTabsClassNames, type NTabsColor, type NTabsItem, type NTabsProps, type NTabsStyles, NUploader, type NUploaderItem, type NUploaderItemStatus, type NUploaderProps, NViewBody, NViewToggle, type NajmAccent, type NajmAppearance, type NajmBorderSide, type NajmComponentName, type NajmComponentRadius, type NajmComponentStyleConfig, type NajmComponentThemeConfig, type NajmDensity, type NajmDesignConfig, NajmDesignProvider, type NajmDesignProviderProps, type NajmLayoutConfig, type NajmMode, type NajmPreset, type NajmRadiusScale, NajmScroll, type NajmScrollProps, type NajmSlotStyle, type NajmThemeConfig, NajmThemeProvider, type NajmThemeProviderProps, type NajmThemeTokens, type NajmTypographyConfig, type NajmVariantStyle, NativeSelect, type NativeSelectOption, type NativeSelectProps, type NavItem, type NavItemGroup, NumberInput, type NumberInputProps, PasswordInput, type PasswordInputProps, PhoneInput, type PhoneInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, type ProgressColor, type ProgressLabelPosition, type ProgressProps, type ProgressSize, type PushDialogOptions, RADIUS_VALUE_MAP, RadioGroup, RadioGroupInput, type RadioGroupInputProps, RadioGroupItem, type RenderSlot, RepeatingFields, type RepeatingFieldsProps, ScrollArea, type ScrollAreaProps, SearchField, SearchField as SearchInput, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectInput, type SelectInputProps, SelectItem, type SelectItemType$1 as SelectItemDataType, type SelectItemType, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, type SidebarItemProps, type SidebarProps, type SidebarWidths, SimpleTooltip, type SimpleTooltipProps, NSkeleton as Skeleton, Slider, SliderInput, type SliderInputProps, type SliderOrientation, type SliderProps, type SliderSize, type SliderVariant, type SmartPastePreview, type SpinnerVariant, StarRatingInput, type StarRatingInputProps, StatusPill, type StatusPillProps, type StatusPillTone, type StepConfig, StepIndicator, type StepMeta, StepsHeader, StepsProgress, type StorageMenuAction, type StorageSortOption, type StorageTarget, Swap, type SwapEffect, SwapIndeterminate, SwapOff, SwapOn, type SwapProps, type SwapSize, type SwapState, Switch, type SwitchColor, SwitchInput, type SwitchInputProps, type SwitchSize, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderColor, TableRow, type TableState, type TableStore, TableStoreContext, Tabs, TabsContent, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, TabsTrigger, type TabsTriggerProps, type TabsVariant, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, Textarea, TimeInput, type TimeInputProps, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseContextMenuResult, type UseNFormOptions, type UseStorageContextMenuOptions, type UseStorageContextMenuResult, type UserMenuAction, VariantProvider, type WizardClassNames, WizardForm, type WizardFormProps, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, indicatorVariants, inputBorderClasses, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };

package/dist/index.mjs

@@ -3,7 +3,7 @@ import React__default, { createContext, useContext, useCallback, useEffect, useS
 import { Slot } from '@radix-ui/react-slot';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
-import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, CheckSquare, FilePlus, FolderPlus, Trash2, Share2, Move, ClipboardPaste, Copy, Scissors, Pencil, Download, Eye, ArrowUpDown, Loader2, ChevronUp, Folder, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, Star, Globe, Clock, Search, Upload, Plus, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Merge, PanelLeftOpen, PanelLeftClose, Menu, LogOut, Image, ArrowUp, ArrowDown, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, Search, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, CheckSquare, FilePlus, FolderPlus, Trash2, Share2, Move, ClipboardPaste, Copy, Scissors, Pencil, Download, Eye, ArrowUpDown, Loader2, ChevronUp, Folder, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, Star, Globe, Clock, Upload, Plus, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Merge, PanelLeftOpen, PanelLeftClose, Menu, LogOut, Image, ArrowUp, ArrowDown, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -319,6 +319,12 @@ function NajmThemeProvider({
   );
   const Comp = asChild ? Slot : "div";
   const [container, setContainer] = React.useState(null);
+  const containerRef = React.useRef(null);
+  const handleContainerRef = React.useCallback((node) => {
+    if (containerRef.current === node) return;
+    containerRef.current = node;
+    setContainer(node);
+  }, []);
   const resolvedAppearance = React.useMemo(
     () => ({ ...parentAppearance, ...config?.appearance ?? {}, ...appearance ?? {} }),
     [parentAppearance, config?.appearance, appearance]
@@ -326,7 +332,8 @@ function NajmThemeProvider({
   return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(NajmAppearanceContext.Provider, { value: resolvedAppearance, children: /* @__PURE__ */ jsx(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(
     Comp,
     {
-      ref: setContainer,
+      ref: handleContainerRef,
+      suppressHydrationWarning: true,
       "data-najm-theme": effectivePreset ?? `${effectiveMode ?? "light"}-${effectiveAccent ?? "neutral"}`,
       className,
       style,
@@ -1090,7 +1097,7 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50",
+        outline: "border border-input bg-transparent text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
@@ -1622,7 +1629,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-card px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-card px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
@@ -1637,7 +1644,7 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       ),
       ...props
@@ -1649,7 +1656,7 @@ function Label({ className, ...props }) {
     LabelPrimitive.Root,
     {
       "data-slot": "label",
-      className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+      className: cn("flex items-center gap-2 text-sm leading-none font-medium text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
       ...props
     }
   );
@@ -1874,7 +1881,13 @@ function DialogOverlay({ className, ...props }) {
     }
   );
 }
-function DialogContent({ className, children, ...props }) {
+var dialogPaddingMap = {
+  none: "p-0 gap-0 overflow-hidden",
+  sm: "p-3",
+  md: "p-6",
+  lg: "p-8"
+};
+function DialogContent({ className, children, padding = "md", hideClose = false, ...props }) {
   const portalClassName = useNPortalScope();
   return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -1882,14 +1895,16 @@ function DialogContent({ className, children, ...props }) {
       SheetPrimitive.Content,
       {
         "data-slot": "dialog-content",
+        "data-padding": padding,
         className: cn(
-          "bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg najm-border border-border p-6 shadow-lg duration-200",
+          "bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg najm-border border-border shadow-lg duration-200",
+          dialogPaddingMap[padding],
           className
         ),
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background cursor-pointer focus:ring-ring absolute top-4 right-4 rounded-xs text-muted-foreground hover:text-foreground transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
+          !hideClose && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background cursor-pointer focus:ring-ring absolute top-4 right-4 rounded-xs text-muted-foreground hover:text-foreground transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
             /* @__PURE__ */ jsx(XIcon, {}),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -1910,6 +1925,135 @@ function DialogTitle({ className, ...props }) {
 function DialogDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className), ...props });
 }
+var variantClasses = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  ghost: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+  destructive: "bg-transparent text-destructive hover:bg-destructive/10"
+};
+var sizeClasses = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+  lg: "h-10 w-10"
+};
+var IconButton = React.forwardRef(
+  ({
+    className,
+    variant = "ghost",
+    size = "md",
+    active = false,
+    type = "button",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        "aria-pressed": active || void 0,
+        className: cn(
+          "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          variantClasses[variant],
+          sizeClasses[size],
+          active && "bg-accent text-accent-foreground",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+function NPageHeaderActions({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center gap-2 sm:gap-3", className), children });
+}
+NPageHeaderActions.displayName = "NPageHeaderActions";
+function NPageHeaderFilters({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3 sm:px-5", className), children });
+}
+NPageHeaderFilters.displayName = "NPageHeaderFilters";
+function NPageHeaderTop({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+NPageHeaderTop.displayName = "NPageHeaderTop";
+function isPageHeaderSlot(child, slot) {
+  return React__default.isValidElement(child) && child.type === slot;
+}
+function getSlotElements(children, slot) {
+  const matches = React__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
+  return matches.length > 0 ? matches : void 0;
+}
+function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, search, children, className, headerClassName, card, bordered }) {
+  const [internalSearch, setInternalSearch] = useState("");
+  const recipe = useNajmComponentStyle("pageHeader");
+  const searchValue = search?.value ?? internalSearch;
+  const handleSearchChange = useCallback((e) => {
+    setInternalSearch(e.currentTarget.value);
+    search?.onChange?.(e);
+  }, [search?.onChange]);
+  const slottedActions = getSlotElements(children, NPageHeaderActions);
+  const slottedFilters = getSlotElements(children, NPageHeaderFilters);
+  const slottedTop = getSlotElements(children, NPageHeaderTop);
+  const resolvedActions = slottedActions ?? actions;
+  const resolvedFilters = slottedFilters ?? filters;
+  const resolvedTop = slottedTop ?? top;
+  const isCard = card ?? recipe?.card ?? bordered === true;
+  const recipeRadius = resolveRadiusValue(recipe?.radius);
+  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
+    ...recipeRadius ? { borderRadius: recipeRadius } : {},
+    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "page-header",
+      "data-card": isCard ? "true" : void 0,
+      "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
+      style: recipeStyle,
+      className: cn(
+        isCard ? cn("rounded-xl bg-card text-card-foreground shadow-none", surfaceBorderClasses(true)) : cn("border-b bg-background text-foreground", surfaceBorderClasses(true, "bottom").replace("najm-border-b", "najm-border-b")),
+        className
+      ),
+      children: [
+        resolvedTop,
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-14 flex-row items-center justify-between gap-2 px-4 pl-16 sm:px-5 md:pl-5", headerClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 rounded-lg bg-primary/10 items-center justify-center", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 text-primary" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs leading-relaxed text-muted-foreground sm:text-sm sm:leading-normal", children: subtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+            search && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Search, { size: 14, className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: search.ref,
+                  type: "text",
+                  value: searchValue,
+                  placeholder: search.placeholder ?? "Search...",
+                  className: cn(
+                    "h-9 w-full max-w-[280px] rounded-lg bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground outline-none border border-border focus:border-primary focus:ring-1 focus:ring-primary/20 transition-colors",
+                    search.className
+                  ),
+                  onChange: handleSearchChange
+                }
+              )
+            ] }),
+            resolvedActions && (slottedActions ? resolvedActions : /* @__PURE__ */ jsx(NPageHeaderActions, { children: resolvedActions }))
+          ] })
+        ] }),
+        resolvedFilters && (slottedFilters ? resolvedFilters : /* @__PURE__ */ jsx(NPageHeaderFilters, { children: resolvedFilters }))
+      ]
+    }
+  );
+}
 var generateId = () => `dialog-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 var buildButtonConfig = (partial, defaults) => {
   return { ...defaults, ...partial };
@@ -1938,6 +2082,8 @@ function createDialogStore() {
           id,
           title: config.title,
           description: config.description,
+          pageHeader: config.pageHeader,
+          padding: config.padding,
           children: config.children,
           primaryButton: primaryButtonConfig,
           secondaryButton: secondaryButtonConfig,
@@ -2144,13 +2290,20 @@ var CONTENT_ACTIONS_SELECTOR = '[data-najm-dialog-actions="content"], [data-najm
 function useContentOwnsActions() {
   const [contentElement, setContentElement] = React__default.useState(null);
   const [contentOwnsActions, setContentOwnsActions] = React__default.useState(false);
+  const contentElementRef = React__default.useRef(null);
+  const handleContentElementRef = React__default.useCallback((node) => {
+    if (contentElementRef.current === node) return;
+    contentElementRef.current = node;
+    setContentElement(node);
+  }, []);
   React__default.useLayoutEffect(() => {
     if (!contentElement) {
-      setContentOwnsActions(false);
+      setContentOwnsActions((current) => current ? false : current);
       return;
     }
     const update = () => {
-      setContentOwnsActions(!!contentElement.querySelector(CONTENT_ACTIONS_SELECTOR));
+      const next = !!contentElement.querySelector(CONTENT_ACTIONS_SELECTOR);
+      setContentOwnsActions((current) => current === next ? current : next);
     };
     update();
     const observer = new MutationObserver(update);
@@ -2162,13 +2315,43 @@ function useContentOwnsActions() {
     });
     return () => observer.disconnect();
   }, [contentElement]);
-  return { contentOwnsActions, setContentElement };
+  return { contentOwnsActions, setContentElement: handleContentElementRef };
 }
 function shouldRenderDialogButtons(showButtons, actionMode = "auto", contentOwnsActions) {
   if (!showButtons || actionMode === "content") return false;
   if (actionMode === "auto" && contentOwnsActions) return false;
   return true;
 }
+function DialogChrome({ pageHeader, title, description, padding, contentRef, children }) {
+  const noTitle = !title || title.trim() === "";
+  const noDescription = !description || description.trim() === "";
+  const noHeader = noTitle && noDescription;
+  const flush = padding === "none";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    pageHeader ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: pageHeader.title || title || "Dialog" }),
+      (pageHeader.subtitle || description) && /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: pageHeader.subtitle || description }),
+      /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+        NPageHeader,
+        {
+          ...pageHeader,
+          card: false,
+          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+            pageHeader.actions,
+            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", variant: "ghost", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
+          ] })
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxs(DialogHeader, { className: cn(noHeader && "sr-only"), children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: cn(noTitle && "sr-only"), children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: cn(noDescription && "sr-only"), children: description })
+    ] }),
+    flush ? (
+      // Full-bleed content owns its own layout/scrolling; no outer scroll wrapper.
+      /* @__PURE__ */ jsx("div", { ref: contentRef, className: "flex min-h-0 flex-1 flex-col", children })
+    ) : /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "flex-1 px-1 -mx-1", children: /* @__PURE__ */ jsx("div", { ref: contentRef, style: { display: "contents" }, children }) })
+  ] });
+}
 function DialogItem({ dialog, index, store }) {
   if (dialog.render) {
     return /* @__PURE__ */ jsx(Fragment, { children: dialog.render({
@@ -2185,6 +2368,8 @@ function DialogItem({ dialog, index, store }) {
     id,
     title,
     description,
+    pageHeader,
+    padding,
     children,
     primaryButton,
     secondaryButton,
@@ -2197,9 +2382,6 @@ function DialogItem({ dialog, index, store }) {
   } = dialog;
   const { contentOwnsActions, setContentElement } = useContentOwnsActions();
   const renderDialogButtons = shouldRenderDialogButtons(showButtons, actionMode, contentOwnsActions);
-  const noTitle = !title || title.trim() === "";
-  const noDescription = !description || description.trim() === "";
-  const noHeader = noTitle && noDescription;
   const handlePrimary = async (e) => {
     const hasForm = !!primaryButton?.form;
     if (!hasForm && e) e.preventDefault();
@@ -2214,14 +2396,22 @@ function DialogItem({ dialog, index, store }) {
     DialogContent,
     {
       "data-dialog-id": id,
+      padding,
+      hideClose: !!pageHeader,
       className: cn(dialogVariants({ size, width, height }), className),
       style: { zIndex: 9990 + index },
       children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { className: cn(noHeader && "sr-only"), children: [
-          /* @__PURE__ */ jsx(DialogTitle, { className: cn(noTitle && "sr-only"), children: title }),
-          /* @__PURE__ */ jsx(DialogDescription, { className: cn(noDescription && "sr-only"), children: description })
-        ] }),
-        /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "flex-1 px-1 -mx-1", children: /* @__PURE__ */ jsx("div", { ref: setContentElement, style: { display: "contents" }, children }) }),
+        /* @__PURE__ */ jsx(
+          DialogChrome,
+          {
+            pageHeader,
+            title,
+            description,
+            padding,
+            contentRef: setContentElement,
+            children
+          }
+        ),
         /* @__PURE__ */ jsxs(DialogFooter, { className: cn(!renderDialogButtons && "sr-only"), children: [
           renderDialogButtons && secondaryButton && /* @__PURE__ */ jsx(
             Button,
@@ -2270,7 +2460,7 @@ var buildButtonConfig2 = (partial, defaults) => {
   return { ...defaults, ...partial };
 };
 var isDirectDialogProps = (props) => {
-  return "trigger" in props || "open" in props || "defaultOpen" in props || "onOpenChange" in props || "title" in props || "description" in props || "children" in props || "primaryButton" in props || "secondaryButton" in props || "showButtons" in props || "size" in props || "width" in props || "height" in props || "className" in props;
+  return "trigger" in props || "open" in props || "defaultOpen" in props || "onOpenChange" in props || "title" in props || "description" in props || "children" in props || "primaryButton" in props || "secondaryButton" in props || "showButtons" in props || "size" in props || "width" in props || "height" in props || "className" in props || "pageHeader" in props || "padding" in props;
 };
 function NDirectDialog({
   trigger,
@@ -2279,6 +2469,8 @@ function NDirectDialog({
   onOpenChange,
   title,
   description,
+  pageHeader,
+  padding,
   children,
   primaryButton,
   secondaryButton,
@@ -2315,9 +2507,6 @@ function NDirectDialog({
     disabled: false,
     loadingText: "Processing..."
   });
-  const noTitle = !title || title.trim() === "";
-  const noDescription = !description || description.trim() === "";
-  const noHeader = noTitle && noDescription;
   const isPrimaryLoading = primaryLoading || !!resolvedPrimaryButton.loading;
   const { contentOwnsActions, setContentElement } = useContentOwnsActions();
   const renderDialogButtons = shouldRenderDialogButtons(showButtons, actionMode, contentOwnsActions);
@@ -2348,12 +2537,18 @@ function NDirectDialog({
   };
   return /* @__PURE__ */ jsxs(Dialog, { open: currentOpen, onOpenChange: setOpen, children: [
     trigger ? /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }) : null,
-    /* @__PURE__ */ jsxs(DialogContent, { className: cn(dialogVariants({ size, width, height }), className), children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { className: cn(noHeader && "sr-only"), children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: cn(noTitle && "sr-only"), children: title }),
-        /* @__PURE__ */ jsx(DialogDescription, { className: cn(noDescription && "sr-only"), children: description })
-      ] }),
-      /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "flex-1 px-1 -mx-1", children: /* @__PURE__ */ jsx("div", { ref: setContentElement, style: { display: "contents" }, children }) }),
+    /* @__PURE__ */ jsxs(DialogContent, { padding, hideClose: !!pageHeader, className: cn(dialogVariants({ size, width, height }), className), children: [
+      /* @__PURE__ */ jsx(
+        DialogChrome,
+        {
+          pageHeader,
+          title,
+          description,
+          padding,
+          contentRef: setContentElement,
+          children
+        }
+      ),
       /* @__PURE__ */ jsx(DialogFooter, { className: cn(!renderDialogButtons && "sr-only"), children: renderDialogButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -2978,7 +3173,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer border-foreground/40 dark:border-foreground/50 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer cursor-pointer border-foreground/40 dark:border-foreground/50 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -3873,7 +4068,7 @@ function CommandItem({ className, ...props }) {
     Command$1.Item,
     {
       "data-slot": "command-item",
-      className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+      className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 [&>svg.opacity-0:first-child]:hidden [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
       ...props
     }
   );
@@ -3913,49 +4108,6 @@ var toggleVariants = cva(
 function Toggle({ className, variant, size, ...props }) {
   return /* @__PURE__ */ jsx(TogglePrimitive.Root, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props });
 }
-var variantClasses = {
-  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-  ghost: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",
-  destructive: "bg-transparent text-destructive hover:bg-destructive/10"
-};
-var sizeClasses = {
-  sm: "h-6 w-6",
-  md: "h-8 w-8",
-  lg: "h-10 w-10"
-};
-var IconButton = React.forwardRef(
-  ({
-    className,
-    variant = "ghost",
-    size = "md",
-    active = false,
-    type = "button",
-    children,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type,
-        "aria-pressed": active || void 0,
-        className: cn(
-          "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors",
-          "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          variantClasses[variant],
-          sizeClasses[size],
-          active && "bg-accent text-accent-foreground",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
 var sizeClasses2 = {
   sm: "p-0.5 [&_button]:h-6 [&_button]:px-1.5 [&_button]:text-xs",
   md: "p-0.5 [&_button]:h-7 [&_button]:px-2 [&_button]:text-sm"
@@ -4130,7 +4282,7 @@ function FormMessage({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-[0.8rem] font-medium", className), ...props, children: body });
 }
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full", children: /* @__PURE__ */ jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) });
+  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full", children: /* @__PURE__ */ jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm text-foreground", className), ...props }) });
 }
 function TableHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b [&_tr]:border-border/40", className), ...props });
@@ -4148,7 +4300,7 @@ function TableHead({ className, ...props }) {
   return /* @__PURE__ */ jsx("th", { "data-slot": "table-head", className: cn("text-foreground h-9 px-3 text-left align-middle text-xs font-medium uppercase tracking-wide whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("px-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
+  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("px-3 align-middle whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("text-muted-foreground mt-4 text-sm", className), ...props });
@@ -5081,7 +5233,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
                       onClose();
                     },
                     className: cn(
-                      "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:cursor-not-allowed",
+                      "flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-40",
                       item.danger && "text-destructive hover:text-destructive"
                     ),
                     children: [
@@ -5107,7 +5259,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
                         onClose();
                       },
                       className: cn(
-                        "flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:opacity-40",
+                        "flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-40",
                         sub.danger && "text-destructive hover:text-destructive"
                       ),
                       children: [
@@ -5691,7 +5843,7 @@ var PRESETS2 = {
   destructive: "border-red-600"
 };
 var inputVariants = cva(
-  "relative w-full flex items-center h-10 bg-card overflow-hidden transition-colors",
+  "relative w-full flex items-center h-10 bg-card text-foreground overflow-hidden transition-colors",
   {
     variants: {
       variant: {
@@ -5766,7 +5918,7 @@ var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, ico
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), disabled, children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground", disabled, ...props })
+    /* @__PURE__ */ jsx(Input, { placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground", disabled, ...props })
   ] });
 };
 var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor }) => {
@@ -5774,7 +5926,7 @@ var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, i
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { type: "number", placeholder, value: value ?? "", onChange: (ev) => onChange(Number(ev.target.value)), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground" })
+    /* @__PURE__ */ jsx(Input, { type: "number", placeholder, value: value ?? "", onChange: (ev) => onChange(Number(ev.target.value)), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground" })
   ] });
 };
 var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor }) => {
@@ -5783,7 +5935,7 @@ var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true,
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground" }),
     showPassword ? /* @__PURE__ */ jsx(Eye, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(false) }) : /* @__PURE__ */ jsx(EyeOff, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(true) })
   ] });
 };
@@ -5810,7 +5962,7 @@ var TextAreaInput = ({ value, onChange, placeholder = "", className = "", varian
           placeholder,
           value,
           onChange: (ev) => onChange(ev.target.value),
-          className: "h-full min-h-0 resize-y border-0 bg-transparent p-0 text-muted-foreground shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 dark:bg-transparent"
+          className: "h-full min-h-0 resize-y border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 dark:bg-transparent"
         }
       )
     }
@@ -6031,7 +6183,7 @@ var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "",
   const toDateString = (date) => date?.toISOString().split("T")[0];
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", !value && "text-foreground"), children: /* @__PURE__ */ jsx(Label, { className: "text-muted-foreground cursor-pointer", children: value ? format(typeof value === "string" ? new Date(value) : value, "PPP") : placeholder }) }) }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(typeof value === "string" ? new Date(value) : value, "PPP") : placeholder }) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: typeof value === "string" ? new Date(value) : value, onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
     ] }),
     !icon && showIcon && /* @__PURE__ */ jsx(Calendar$1, { className: iconProps.className, style: iconProps.style })
@@ -6052,13 +6204,13 @@ var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIc
     const filename = typeof value === "string" ? value.split(/[\\/]/).pop() || "" : value.name;
     return truncateFilename(filename);
   };
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex px-0 p-0 text-muted-foreground", className), onClick: () => fileInputRef.current?.click(), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex px-0 p-0", className), onClick: () => fileInputRef.current?.click(), children: [
     /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, onChange: (e) => onChange(e.target.files?.[0] || null), className: "hidden" }),
     /* @__PURE__ */ jsxs("div", { className: "bg-muted flex h-full items-center px-3", children: [
       showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(FileUp, { className: cn(iconProps.className) })),
       /* @__PURE__ */ jsx(Label, { className: "flex cursor-pointer h-full justify-center items-center px-2 text-muted-foreground", children: "Choose File" })
     ] }),
-    /* @__PURE__ */ jsx(Label, { className: "ml-2 flex-1", children: displayFilename() || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
+    /* @__PURE__ */ jsx(Label, { className: "ml-2 flex-1 text-foreground", children: displayFilename() || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
   ] });
 };
 function formatBytes2(bytes) {
@@ -6877,7 +7029,7 @@ var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true
     showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(Clock, { className: iconProps.className, style: iconProps.style })),
     /* @__PURE__ */ jsx(Input, { type: "text", placeholder: placeholder || (showSeconds ? "HH:MM:SS" : "HH:MM"), value: inputValue, onChange: (e) => handleInputChange(e.target.value), onKeyDown: (e) => {
       if (!/\d/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) e.preventDefault();
-    }, onBlur: handleBlur, disabled, className: cn("p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0", !isValid ? "text-red-500" : "text-muted-foreground") })
+    }, onBlur: handleBlur, disabled, className: cn("p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 placeholder:text-muted-foreground", !isValid ? "text-red-500" : "text-foreground") })
   ] });
 };
 var RANGE_COLOR = {
@@ -8784,7 +8936,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
       onContextMenu,
       style: recipeStyle,
       className: cn(
-        "relative group w-full rounded-lg bg-card",
+        "relative group w-full rounded-lg bg-card text-card-foreground overflow-hidden",
         surfaceBorderClasses(bordered),
         isActive && (bordered ? "border-primary" : "ring-2 ring-primary ring-offset-1 ring-offset-background"),
         onClick && "cursor-pointer",
@@ -8975,7 +9127,7 @@ function NTableCards({ effectiveMode }) {
           onContextMenu: handleCardContextMenu,
           "data-row": "true",
           "data-row-id": row.id,
-          className: cn("group relative", rowClassName),
+          className: cn("group relative text-card-foreground", rowClassName),
           children: [
             menuButton && openRowMenu && /* @__PURE__ */ jsx(
               "button",
@@ -8986,7 +9138,7 @@ function NTableCards({ effectiveMode }) {
                   e.stopPropagation();
                   openRowMenu(e, row.original);
                 },
-                className: "absolute top-2 right-2 z-10 flex h-7 w-7 items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-all duration-200 hover:bg-muted/50 hover:text-foreground group-hover:opacity-100 focus:opacity-100 focus-visible:opacity-100",
+                className: "absolute top-2 right-2 z-10 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-all duration-200 hover:bg-muted/50 hover:text-foreground group-hover:opacity-100 focus:opacity-100 focus-visible:opacity-100",
                 children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
               }
             ),
@@ -9082,36 +9234,36 @@ function NTablePagination() {
     const newSize = Number(value);
     setPagination({ pageIndex: 0, pageSize: newSize });
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-4", classNames?.pagination), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 lg:gap-6", children: [
-      (!isPaginationControlled || manualPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows/page" }),
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 py-1 text-foreground", classNames?.pagination), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-4 lg:gap-6", children: [
+      (!isPaginationControlled || manualPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-foreground", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Rows/page" }),
         /* @__PURE__ */ jsxs(Select, { value: `${pageSize}`, onValueChange: handlePageSizeChange, children: [
           /* @__PURE__ */ jsx(
             SelectTrigger,
             {
               "data-bordered": bordered ? "true" : void 0,
-              className: cn("h-8 w-[80px]", bordered && "najm-border border-border"),
+              className: cn("h-8 w-[80px] text-foreground", bordered && "najm-border border-border"),
               children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize })
             }
           ),
           /* @__PURE__ */ jsx(SelectContent, { side: "top", children: currentPageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-foreground", children: [
         "Page ",
         pageIndex + 1,
         " of ",
         effectivePageCount
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 hidden lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 hidden lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-none whitespace-nowrap text-sm text-muted-foreground max-sm:hidden", children: [
       selectedRows.length,
       " of ",
       manualPagination && rowCount !== void 0 ? rowCount : filteredRows.length,
@@ -9378,6 +9530,7 @@ function NTableJson() {
   return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: "h-full min-h-0 rounded-md border border-border bg-muted/40", children: /* @__PURE__ */ jsx("pre", { className: "p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) }) });
 }
 var DEFAULT_ROWS2 = 6;
+var DEFAULT_CARD_COUNT = 16;
 function NTableHeaderSkeleton() {
   const filters = useTableStore.use.filters();
   const showViewToggle = useTableStore.use.showViewToggle();
@@ -9457,7 +9610,7 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS2 }) {
     )
   ] });
 }
-function NTableCardsLoadingSkeleton({ rows = 8 }) {
+function NTableCardsLoadingSkeleton({ rows }) {
   const filters = useTableStore.use.filters();
   const showViewToggle = useTableStore.use.showViewToggle();
   const showColumnVisibility = useTableStore.use.showColumnVisibility();
@@ -9469,18 +9622,21 @@ function NTableCardsLoadingSkeleton({ rows = 8 }) {
   );
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
+  const calculatedPageSize = useTableStore.use.calculatedPageSize();
+  const pagination = useTableStore.use.pagination();
+  const cardCount = rows ?? Math.max(1, calculatedPageSize || pagination?.pageSize || DEFAULT_CARD_COUNT);
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
     hasHeaderSkeleton && /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
       "div",
       {
         "data-testid": "ntable-cards-loading-skeleton",
         "aria-busy": "true",
         className: cn("grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", classNames?.cards),
-        children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx(
+        children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsx(
           Card,
           {
-            className: cn("rounded-lg bg-card p-4 shadow-none", bordered ? "border" : "border border-border"),
+            className: cn("rounded-lg bg-card p-4 shadow-none", surfaceBorderClasses(bordered)),
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
               /* @__PURE__ */ jsx(NSkeleton, { className: "h-12 w-12 shrink-0 rounded-full" }),
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
@@ -9499,7 +9655,7 @@ function NTableCardsLoadingSkeleton({ rows = 8 }) {
           index
         ))
       }
-    )
+    ) })
   ] });
 }
 function TableStateSlot({ children }) {
@@ -9585,7 +9741,7 @@ function TableLayout(props) {
       /* @__PURE__ */ jsx(NTableCards, { effectiveMode }),
       /* @__PURE__ */ jsx(NTableJson, {})
     ] }) }),
-    /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "shrink-0", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
+    /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "min-w-0 shrink-0 bg-background text-foreground", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
   ] });
 }
 function NTable(props) {
@@ -9668,8 +9824,7 @@ function NTable(props) {
     [onRowContextMenu]
   );
   const autoOpenRowMenu = effectiveRowMenu ? handleOpenRowMenu : onRowContextMenu ? handleManualRowMenu : null;
-  const shouldCollapseActions = props.columns.length > 5;
-  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? shouldCollapseActions);
+  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? true);
   const store = useStoreSync({
     data: props.data ?? [],
     columns: props.columns ?? [],
@@ -10934,92 +11089,6 @@ function NPageLayout({
     }
   );
 }
-function NPageHeaderActions({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center gap-2 sm:gap-3", className), children });
-}
-NPageHeaderActions.displayName = "NPageHeaderActions";
-function NPageHeaderFilters({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3 sm:px-5", className), children });
-}
-NPageHeaderFilters.displayName = "NPageHeaderFilters";
-function NPageHeaderTop({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className, children });
-}
-NPageHeaderTop.displayName = "NPageHeaderTop";
-function isPageHeaderSlot(child, slot) {
-  return React__default.isValidElement(child) && child.type === slot;
-}
-function getSlotElements(children, slot) {
-  const matches = React__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
-  return matches.length > 0 ? matches : void 0;
-}
-function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, search, children, className, headerClassName, card, bordered }) {
-  const [internalSearch, setInternalSearch] = useState("");
-  const recipe = useNajmComponentStyle("pageHeader");
-  const searchValue = search?.value ?? internalSearch;
-  const handleSearchChange = useCallback((e) => {
-    setInternalSearch(e.currentTarget.value);
-    search?.onChange?.(e);
-  }, [search?.onChange]);
-  const slottedActions = getSlotElements(children, NPageHeaderActions);
-  const slottedFilters = getSlotElements(children, NPageHeaderFilters);
-  const slottedTop = getSlotElements(children, NPageHeaderTop);
-  const resolvedActions = slottedActions ?? actions;
-  const resolvedFilters = slottedFilters ?? filters;
-  const resolvedTop = slottedTop ?? top;
-  const isCard = card ?? recipe?.card ?? bordered === true;
-  const recipeRadius = resolveRadiusValue(recipe?.radius);
-  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
-    ...recipeRadius ? { borderRadius: recipeRadius } : {},
-    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
-  } : void 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "page-header",
-      "data-card": isCard ? "true" : void 0,
-      "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
-      style: recipeStyle,
-      className: cn(
-        isCard ? cn("rounded-xl bg-card shadow-none", surfaceBorderClasses(true)) : cn("border-b", surfaceBorderClasses(true, "bottom").replace("najm-border-b", "najm-border-b")),
-        className
-      ),
-      children: [
-        resolvedTop,
-        /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-14 flex-row items-center justify-between gap-2 px-4 pl-16 sm:px-5 md:pl-5", headerClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 rounded-lg bg-primary/10 items-center justify-center", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 text-primary" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: title }),
-              subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs leading-relaxed text-muted-foreground sm:text-sm sm:leading-normal", children: subtitle })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
-            search && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(Search, { size: 14, className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: search.ref,
-                  type: "text",
-                  value: searchValue,
-                  placeholder: search.placeholder ?? "Search...",
-                  className: cn(
-                    "h-9 w-full max-w-[280px] rounded-lg bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground outline-none border border-border focus:border-primary focus:ring-1 focus:ring-primary/20 transition-colors",
-                    search.className
-                  ),
-                  onChange: handleSearchChange
-                }
-              )
-            ] }),
-            resolvedActions && (slottedActions ? resolvedActions : /* @__PURE__ */ jsx(NPageHeaderActions, { children: resolvedActions }))
-          ] })
-        ] }),
-        resolvedFilters && (slottedFilters ? resolvedFilters : /* @__PURE__ */ jsx(NPageHeaderFilters, { children: resolvedFilters }))
-      ]
-    }
-  );
-}
 function NInspectorSheet({ open, onClose, title, children }) {
   useEffect(() => {
     const handleKey = (e) => {

package/dist/json.mjs

@@ -368,7 +368,7 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50",
+        outline: "border border-input bg-transparent text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",

package/dist/theme.css

@@ -287,26 +287,35 @@
 }
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
-   translucent slate bar that floats over content with no reserved space. */
-.os-theme-najm {
+   translucent slate bar that floats over content with no reserved space.
+   Keep this selector more specific than OverlayScrollbars' appended
+   `.os-scrollbar` variable reset in dist/theme.css. */
+.os-scrollbar.os-theme-najm {
+  z-index: 20;
   --os-size: 10px;
   --os-padding-perpendicular: 2px;
   --os-padding-axis: 2px;
+  --os-track-bg: transparent;
   --os-track-border-radius: 9999px;
   --os-handle-border-radius: 9999px;
-  --os-handle-bg: rgba(148, 163, 184, 0.3);
-  --os-handle-bg-hover: rgba(148, 163, 184, 0.45);
-  --os-handle-bg-active: rgba(148, 163, 184, 0.6);
+  --os-handle-bg: rgba(100, 116, 139, 0.22);
+  --os-handle-bg-hover: rgba(100, 116, 139, 0.5);
+  --os-handle-bg-active: rgba(71, 85, 105, 0.62);
   --os-handle-min-size: 33px;
-  --os-handle-perpendicular-size: 60%;
-  --os-handle-perpendicular-size-hover: 90%;
+  --os-handle-perpendicular-size: 4px;
+  --os-handle-perpendicular-size-hover: 6px;
+  --os-handle-perpendicular-size-active: 6px;
+}
+
+.os-scrollbar.os-theme-najm:hover .os-scrollbar-handle {
+  background: var(--os-handle-bg-hover);
 }
 
 /* Darker, more subtle handle in dark mode */
-.dark .os-theme-najm {
-  --os-handle-bg: rgba(82, 82, 91, 0.45);
-  --os-handle-bg-hover: rgba(113, 113, 122, 0.6);
-  --os-handle-bg-active: rgba(113, 113, 122, 0.75);
+.dark .os-scrollbar.os-theme-najm {
+  --os-handle-bg: rgba(113, 113, 122, 0.36);
+  --os-handle-bg-hover: rgba(161, 161, 170, 0.62);
+  --os-handle-bg-active: rgba(212, 212, 216, 0.72);
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",