najm-kit 2.1.7 → 2.1.9

package/dist/index.d.ts

@@ -471,6 +471,7 @@ interface PageHeaderSlotProps {
     children: ReactNode;
     className?: string;
 }
+type NPageHeaderBreakpoint = 'sm' | 'md' | 'lg';
 interface NPageHeaderProps {
     icon: ComponentType<{
         className?: string;
@@ -478,8 +479,20 @@ interface NPageHeaderProps {
     title: string;
     subtitle?: string;
     actions?: ReactNode;
+    /**
+     * Optional consumer-owned replacement for `actions` on smaller screens.
+     * Pass an icon button, dropdown, or any other compact control. When omitted,
+     * the regular actions keep rendering at every viewport size.
+     */
+    compactActions?: ReactNode;
     filters?: ReactNode;
     top?: ReactNode;
+    /** Must match the paired NSidebar breakpoint so its hamburger has reserved space. */
+    mobileBreakpoint?: NPageHeaderBreakpoint;
+    /** Renders the mobile sidebar trigger inside the header's leading column. */
+    onSidebarOpen?: () => void;
+    sidebarTriggerLabel?: string;
+    sidebarTriggerClassName?: string;
     search?: InputHTMLAttributes<HTMLInputElement> & {
         placeholder?: string;
         ref?: Ref<HTMLInputElement>;
@@ -495,6 +508,10 @@ declare function NPageHeaderActions({ children, className }: PageHeaderSlotProps
 declare namespace NPageHeaderActions {
     var displayName: string;
 }
+declare function NPageHeaderCompactActions({ children, className }: PageHeaderSlotProps): react_jsx_runtime.JSX.Element;
+declare namespace NPageHeaderCompactActions {
+    var displayName: string;
+}
 declare function NPageHeaderFilters({ children, className }: PageHeaderSlotProps): react_jsx_runtime.JSX.Element;
 declare namespace NPageHeaderFilters {
     var displayName: string;
@@ -503,7 +520,7 @@ declare function NPageHeaderTop({ children, className }: PageHeaderSlotProps): r
 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;
+declare function NPageHeader({ icon: Icon, title, subtitle, actions, compactActions, filters, top, mobileBreakpoint, onSidebarOpen, sidebarTriggerLabel, sidebarTriggerClassName, search, children, className, headerClassName, card, bordered, }: NPageHeaderProps): react_jsx_runtime.JSX.Element;
 
 type DialogActionMode = "auto" | "dialog" | "content";
 type DialogVariant = "default" | "window";
@@ -3223,6 +3240,11 @@ interface SidebarProps {
     className?: string;
     classNames?: NAppShellClassNames;
     mobileBreakpoint?: 'sm' | 'md' | 'lg';
+    /**
+     * Automatically use the collapsed desktop rail within one Tailwind
+     * breakpoint band. For example, `lg` collapses from 1024px through 1279px.
+     */
+    autoCollapseAt?: 'sm' | 'md' | 'lg' | 'xl';
     mobileOpen?: boolean;
     defaultMobileOpen?: boolean;
     onMobileOpenChange?: (open: boolean) => void;
@@ -3232,6 +3254,10 @@ interface SidebarProps {
     collapseLabel?: string;
     expandLabel?: string;
     hamburgerClassName?: string;
+    /**
+     * Opts into the legacy fixed standalone trigger. Prefer controlling
+     * `mobileOpen` from an NPageHeader via its `onSidebarOpen` prop.
+     */
     showHamburgerButton?: boolean;
     logoIcon?: ComponentType<{
         className?: string;
@@ -3336,7 +3362,7 @@ declare function NSidebarFooter({ children, onSettings, settingsLabel, onLogout,
 
 declare function NSidebarMobile({ open, onOpen, onClose, mobileBreakpoint, width, hamburgerLabel, closeLabel, hamburgerClassName, showHamburgerButton, children, bordered, }: NSidebarMobileProps): react_jsx_runtime.JSX.Element;
 
-declare function NSidebar({ logo, navItems, activePath, isActive, onNavigate, linkComponent, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, showCollapseButton, collapseButtonPosition, showSectionLabels, showSectionIcons, showSectionSeparators, bordered, footer, className, classNames, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, closeOnNavigate, hamburgerLabel, closeLabel, collapseLabel, expandLabel, hamburgerClassName, showHamburgerButton, logoIcon, logoTitle, logoSubtitle, onLogoClick, onSettings, settingsLabel, onLogout, logoutLabel, widths, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function NSidebar({ logo, navItems, activePath, isActive, onNavigate, linkComponent, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, showCollapseButton, collapseButtonPosition, showSectionLabels, showSectionIcons, showSectionSeparators, bordered, footer, className, classNames, mobileBreakpoint, autoCollapseAt, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, closeOnNavigate, hamburgerLabel, closeLabel, collapseLabel, expandLabel, hamburgerClassName, showHamburgerButton, logoIcon, logoTitle, logoSubtitle, onLogoClick, onSettings, settingsLabel, onLogout, logoutLabel, widths, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 declare function NSidebarItem({ item, activePath, isActive, onNavigate, linkComponent: LinkComponent, collapsed, depth, classNames, }: SidebarItemProps): react_jsx_runtime.JSX.Element;
 
@@ -3441,4 +3467,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, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, type DialogHeight, DialogOverlay, type DialogPadding, DialogPortal, type DialogRenderContext, type DialogRenderer, type DialogSize, type DialogStore, DialogTitle, DialogTrigger, type DialogVariant, 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 FormInputBackground, 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 NDialogActionProps, NDialogDescription, type NDialogDescriptionProps, type NDialogDirectProps, NDialogHeader, type NDialogHeaderProps, NDialogPrimaryButton, type NDialogProps, NDialogSecondaryButton, type NEditorTab, NEditorTabs, type NEditorTabsProps, 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, getNextEditorTabValue, 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 DialogVariant, 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 FormInputBackground, 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 NDialogActionProps, NDialogDescription, type NDialogDescriptionProps, type NDialogDirectProps, NDialogHeader, type NDialogHeaderProps, NDialogPrimaryButton, type NDialogProps, NDialogSecondaryButton, type NEditorTab, NEditorTabs, type NEditorTabsProps, 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, type NPageHeaderBreakpoint, NPageHeaderCompactActions, 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, getNextEditorTabValue, 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, 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 { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, Menu, 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, 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';
@@ -1977,6 +1977,10 @@ 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 NPageHeaderCompactActions({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center", className), children });
+}
+NPageHeaderCompactActions.displayName = "NPageHeaderCompactActions";
 function NPageHeaderFilters({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3 sm:px-5", className), children });
 }
@@ -1992,7 +1996,51 @@ 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 }) {
+var responsiveClasses = {
+  sm: {
+    main: "sm:flex sm:justify-between sm:px-5",
+    identity: "sm:col-start-auto sm:row-start-auto sm:justify-self-auto",
+    controls: "sm:col-start-auto sm:row-start-auto sm:justify-self-auto",
+    fullActions: "sm:flex",
+    compactActions: "sm:hidden",
+    sidebarTrigger: "sm:hidden"
+  },
+  md: {
+    main: "md:flex md:justify-between md:px-5",
+    identity: "md:col-start-auto md:row-start-auto md:justify-self-auto",
+    controls: "md:col-start-auto md:row-start-auto md:justify-self-auto",
+    fullActions: "md:flex",
+    compactActions: "md:hidden",
+    sidebarTrigger: "md:hidden"
+  },
+  lg: {
+    main: "lg:flex lg:justify-between lg:px-5",
+    identity: "lg:col-start-auto lg:row-start-auto lg:justify-self-auto",
+    controls: "lg:col-start-auto lg:row-start-auto lg:justify-self-auto",
+    fullActions: "lg:flex",
+    compactActions: "lg:hidden",
+    sidebarTrigger: "lg:hidden"
+  }
+};
+function NPageHeader({
+  icon: Icon2,
+  title,
+  subtitle,
+  actions,
+  compactActions,
+  filters,
+  top,
+  mobileBreakpoint = "md",
+  onSidebarOpen,
+  sidebarTriggerLabel = "Open sidebar",
+  sidebarTriggerClassName,
+  search,
+  children,
+  className,
+  headerClassName,
+  card,
+  bordered
+}) {
   const [internalSearch, setInternalSearch] = useState("");
   const recipe = useNajmComponentStyle("pageHeader");
   const searchValue = search?.value ?? internalSearch;
@@ -2001,11 +2049,15 @@ function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, sear
     search?.onChange?.(e);
   }, [search?.onChange]);
   const slottedActions = getSlotElements(children, NPageHeaderActions);
+  const slottedCompactActions = getSlotElements(children, NPageHeaderCompactActions);
   const slottedFilters = getSlotElements(children, NPageHeaderFilters);
   const slottedTop = getSlotElements(children, NPageHeaderTop);
   const resolvedActions = slottedActions ?? actions;
+  const resolvedCompactActions = slottedCompactActions ?? compactActions;
   const resolvedFilters = slottedFilters ?? filters;
   const resolvedTop = slottedTop ?? top;
+  const hasCompactActions = resolvedCompactActions !== void 0 && resolvedCompactActions !== null && resolvedCompactActions !== false;
+  const breakpointClasses = responsiveClasses[mobileBreakpoint];
   const isCard = card ?? recipe?.card ?? bordered === true;
   const recipeRadius = resolveRadiusValue(recipe?.radius);
   const recipeStyle = recipeRadius || recipe?.borderWidth ? {
@@ -2025,35 +2077,104 @@ function NPageHeader({ icon: Icon2, title, subtitle, actions, filters, top, sear
       ),
       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",
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "page-header-main",
+            className: cn(
+              "relative grid min-h-14 grid-cols-[minmax(2.75rem,1fr)_minmax(0,auto)_minmax(2.75rem,1fr)] items-center gap-2 px-4",
+              breakpointClasses.main,
+              headerClassName
+            ),
+            children: [
+              onSidebarOpen && /* @__PURE__ */ jsx(
+                Button,
                 {
-                  ref: search.ref,
-                  type: "text",
-                  value: searchValue,
-                  placeholder: search.placeholder ?? "Search...",
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onSidebarOpen,
+                  "aria-label": sidebarTriggerLabel,
+                  "data-slot": "page-header-sidebar-trigger",
                   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
+                    "col-start-1 row-start-1 justify-self-start",
+                    breakpointClasses.sidebarTrigger,
+                    sidebarTriggerClassName
                   ),
-                  onChange: handleSearchChange
+                  children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "page-header-identity",
+                  className: cn(
+                    "col-start-2 row-start-1 flex min-w-0 max-w-full items-center justify-self-center gap-3",
+                    breakpointClasses.identity
+                  ),
+                  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",
+                {
+                  "data-slot": "page-header-controls",
+                  className: cn(
+                    "col-start-3 row-start-1 flex min-w-0 shrink-0 items-center justify-self-end gap-3",
+                    breakpointClasses.controls
+                  ),
+                  children: [
+                    hasCompactActions && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-slot": "page-header-compact-actions",
+                        className: cn("flex items-center", breakpointClasses.compactActions),
+                        children: slottedCompactActions ? resolvedCompactActions : /* @__PURE__ */ jsx(NPageHeaderCompactActions, { children: resolvedCompactActions })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-slot": "page-header-full-actions",
+                        className: cn(
+                          "shrink-0 items-center gap-3",
+                          hasCompactActions ? "hidden" : "flex",
+                          hasCompactActions && breakpointClasses.fullActions
+                        ),
+                        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 }))
+                        ]
+                      }
+                    )
+                  ]
                 }
               )
-            ] }),
-            resolvedActions && (slottedActions ? resolvedActions : /* @__PURE__ */ jsx(NPageHeaderActions, { children: resolvedActions }))
-          ] })
-        ] }),
+            ]
+          }
+        ),
         resolvedFilters && (slottedFilters ? resolvedFilters : /* @__PURE__ */ jsx(NPageHeaderFilters, { children: resolvedFilters }))
       ]
     }
@@ -10902,6 +11023,27 @@ function buildGroups(items) {
   }
   return groups;
 }
+var autoCollapseQueries = {
+  sm: "(min-width: 640px) and (max-width: 767.98px)",
+  md: "(min-width: 768px) and (max-width: 1023.98px)",
+  lg: "(min-width: 1024px) and (max-width: 1279.98px)",
+  xl: "(min-width: 1280px) and (max-width: 1535.98px)"
+};
+function useAutoCollapsed(breakpoint) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (!breakpoint || typeof window === "undefined") {
+      setMatches(false);
+      return;
+    }
+    const mediaQuery = window.matchMedia(autoCollapseQueries[breakpoint]);
+    const update = () => setMatches(mediaQuery.matches);
+    update();
+    mediaQuery.addEventListener?.("change", update);
+    return () => mediaQuery.removeEventListener?.("change", update);
+  }, [breakpoint]);
+  return matches;
+}
 function NSidebar({
   logo,
   navItems = [],
@@ -10922,6 +11064,7 @@ function NSidebar({
   className,
   classNames,
   mobileBreakpoint = "md",
+  autoCollapseAt,
   mobileOpen: mobileOpenProp,
   defaultMobileOpen = false,
   onMobileOpenChange,
@@ -10931,7 +11074,7 @@ function NSidebar({
   collapseLabel = "Collapse",
   expandLabel = "Expand",
   hamburgerClassName,
-  showHamburgerButton = true,
+  showHamburgerButton = false,
   logoIcon,
   logoTitle,
   logoSubtitle,
@@ -10948,6 +11091,8 @@ function NSidebar({
   const isControlled = mobileOpenProp !== void 0;
   const mobileOpen = isControlled ? mobileOpenProp : _mobileOpen;
   const collapsed = collapsedProp ?? _collapsed;
+  const autoCollapsed = useAutoCollapsed(autoCollapseAt);
+  const desktopCollapsed = collapsed || autoCollapsed;
   const setMobileOpen = (open) => {
     if (!isControlled) _setMobileOpen(open);
     onMobileOpenChange?.(open);
@@ -11008,21 +11153,23 @@ function NSidebar({
   const mobileWidth = widths?.mobile ?? expandedWidth;
   const railVar = typeof collapsedWidth === "number" ? `${collapsedWidth}px` : collapsedWidth;
   const sidebarEdgeWidth = bordered === false ? "0px" : recipe?.borderWidth ?? "var(--border-width, 1px)";
-  const showEdgeCollapse = showCollapseButton && collapseButtonPosition === "edge";
-  const showRailCollapse = showCollapseButton && collapseButtonPosition === "rail";
+  const showEdgeCollapse = showCollapseButton && collapseButtonPosition === "edge" && !autoCollapsed;
+  const showRailCollapse = showCollapseButton && collapseButtonPosition === "rail" && !autoCollapsed;
   const effectiveShowSectionLabels = showSectionLabels ?? recipe?.showSectionLabels ?? true;
   const effectiveShowSectionSeparators = showSectionSeparators ?? recipe?.showSectionSeparators ?? false;
   const contentSlot = recipe?.slots?.content;
   const contentStyle = contentSlot?.paddingTop ? { paddingTop: contentSlot.paddingTop } : void 0;
-  const defaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed }) : null;
-  const headerContent = logo ?? defaultLogoContent;
+  const desktopDefaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed: desktopCollapsed }) : null;
+  const mobileDefaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed: false }) : null;
+  const desktopHeaderContent = logo ?? desktopDefaultLogoContent;
+  const mobileHeaderContent = logo ?? mobileDefaultLogoContent;
   const contentProps = {
     groups,
     activePath,
     isActive,
     onNavigate: handleNavigate,
     linkComponent,
-    collapsed,
+    collapsed: desktopCollapsed,
     showSectionLabels: effectiveShowSectionLabels,
     showSectionIcons,
     showSectionSeparators: effectiveShowSectionSeparators,
@@ -11035,22 +11182,22 @@ function NSidebar({
     settingsLabel,
     onLogout,
     logoutLabel,
-    showCollapseButton: showCollapseButton && collapseButtonPosition === "footer",
-    collapsed,
+    showCollapseButton: showCollapseButton && collapseButtonPosition === "footer" && !autoCollapsed,
+    collapsed: desktopCollapsed,
     onToggleCollapsed: handleToggleCollapsed,
     collapseLabel,
     expandLabel,
     classNames
   };
   const sidebarInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    headerContent && /* @__PURE__ */ jsx(NSidebarHeader, { collapsed, classNames, children: headerContent }),
+    desktopHeaderContent && /* @__PURE__ */ jsx(NSidebarHeader, { collapsed: desktopCollapsed, classNames, children: desktopHeaderContent }),
     /* @__PURE__ */ jsx(NSidebarContent, { ...contentProps }),
     /* @__PURE__ */ jsx(NSidebarFooter, { ...footerProps })
   ] });
   const mobileInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    headerContent && /* @__PURE__ */ jsx(NSidebarHeader, { collapsed, classNames, children: headerContent }),
-    /* @__PURE__ */ jsx(NSidebarContent, { ...contentProps }),
-    /* @__PURE__ */ jsx(NSidebarFooter, { ...footerProps, isMobile: true })
+    mobileHeaderContent && /* @__PURE__ */ jsx(NSidebarHeader, { collapsed: false, classNames, children: mobileHeaderContent }),
+    /* @__PURE__ */ jsx(NSidebarContent, { ...contentProps, collapsed: false }),
+    /* @__PURE__ */ jsx(NSidebarFooter, { ...footerProps, collapsed: false, isMobile: true })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -11073,15 +11220,17 @@ function NSidebar({
       "aside",
       {
         "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
+        "data-collapsed": desktopCollapsed ? "true" : "false",
+        "data-auto-collapsed": autoCollapsed ? "true" : void 0,
         className: cn(
-          desktopClass,
           "relative z-10 flex flex-col h-full bg-sidebar text-sidebar-foreground transition-all duration-200",
+          desktopClass,
           sidebarBorderClasses(bordered, "right"),
           classNames?.sidebar,
           className
         ),
         style: {
-          width: collapsed ? collapsedWidth : expandedWidth,
+          width: desktopCollapsed ? collapsedWidth : expandedWidth,
           ["--rail"]: railVar,
           ["--sidebar-edge-width"]: sidebarEdgeWidth,
           ...bordered !== false && recipe?.borderWidth ? { borderRightWidth: recipe.borderWidth } : {}
@@ -11092,8 +11241,8 @@ function NSidebar({
             "button",
             {
               type: "button",
-              "aria-label": collapsed ? expandLabel : collapseLabel,
-              title: collapsed ? expandLabel : collapseLabel,
+              "aria-label": desktopCollapsed ? expandLabel : collapseLabel,
+              title: desktopCollapsed ? expandLabel : collapseLabel,
               "data-dragging": railDragging ? "true" : void 0,
               onPointerDown: handleRailPointerDown,
               onClick: handleRailClick,
@@ -11112,7 +11261,7 @@ function NSidebar({
               "aria-label": collapsed ? expandLabel : collapseLabel,
               title: collapsed ? expandLabel : collapseLabel,
               className: "absolute right-0 top-7 z-20 flex size-6 -translate-y-1/2 translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-              children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
+              children: desktopCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
             }
           )
         ]
@@ -11386,4 +11535,4 @@ function NInspectorSheet({ open, onClose, title, children }) {
   ] }) });
 }
 
-export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarStatus, Badge, BaseInput, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator, Input, Label, LangInput, MultiSelectInput, NAJM_COMPONENT_NAMES, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NIcon, NIndicator, NInspectorSheet, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NUploader, NViewBody, NViewToggle, NajmDesignProvider, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RADIUS_VALUE_MAP, RadioGroup2 as RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNextEditorTabValue, 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, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarStatus, Badge, BaseInput, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator, Input, Label, LangInput, MultiSelectInput, NAJM_COMPONENT_NAMES, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NIcon, NIndicator, NInspectorSheet, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NUploader, NViewBody, NViewToggle, NajmDesignProvider, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RADIUS_VALUE_MAP, RadioGroup2 as RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNextEditorTabValue, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",