najm-kit 2.1.19 → 2.1.20

package/dist/index.d.ts

@@ -146,6 +146,13 @@ declare function composePreset(mode: NajmMode, accent: NajmAccent): NajmThemeTok
 declare function resolvePreset(preset: NajmPreset): NajmThemeTokens;
 
 type NajmDensity = "compact" | "default" | "comfortable";
+/** Tailwind's mobile-first viewport breakpoints, plus the default value. */
+type NajmResponsiveBreakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
+/**
+ * A scalar value for every viewport, or mobile-first breakpoint overrides.
+ * For example: `{ base: 164, lg: 200, xl: 240 }`.
+ */
+type NajmResponsiveValue<T> = T | Partial<Record<NajmResponsiveBreakpoint, T>>;
 type NajmComponentRadius = "inherit" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | string;
 interface NajmSlotStyle {
     className?: string;
@@ -167,10 +174,12 @@ interface NajmComponentStyleConfig {
     showSectionLabels?: boolean;
     /** Sidebar-only: render separator lines between nav item sections. */
     showSectionSeparators?: boolean;
-    /** Sidebar-only: expanded width in px (default 240). */
-    expandedWidth?: number;
-    /** Sidebar-only: collapsed width in px (default 64). */
-    collapsedWidth?: number;
+    /** Sidebar-only: expanded width in px (default 240). Supports responsive overrides. */
+    expandedWidth?: NajmResponsiveValue<number>;
+    /** Sidebar-only: collapsed width in px (default 64). Supports responsive overrides. */
+    collapsedWidth?: NajmResponsiveValue<number>;
+    /** Sidebar-only: mobile drawer width in px. Defaults to the expanded width. */
+    mobileWidth?: NajmResponsiveValue<number>;
     defaultVariant?: string;
     defaultSize?: string;
     density?: NajmDensity;
@@ -335,8 +344,8 @@ declare const NIcon: React__default.FC<NIconProps>;
 
 declare const buttonVariants: (props?: {
     variant?: "secondary" | "tertiary" | "destructive" | "default" | "link" | "outline" | "ghost" | "success" | "warning" | "info" | "soft" | "subtle" | "plain";
-    size?: "default" | "icon" | "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | "2xl" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl";
-    rounded?: "none" | "default" | "sm" | "md" | "lg" | "xl" | "full" | "2xl";
+    size?: "default" | "icon" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "2xs" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl";
+    rounded?: "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     fullWidth?: boolean;
 } & class_variance_authority_types.ClassProp) => string;
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
@@ -1044,7 +1053,7 @@ type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 type AvatarShape$1 = "circle" | "rounded" | "square";
 type AvatarStatusType = "online" | "offline" | "busy" | "away";
 declare const avatarVariants: (props?: {
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs";
     shape?: "square" | "circle" | "rounded";
     ring?: boolean;
 } & class_variance_authority_types.ClassProp) => string;
@@ -1317,15 +1326,33 @@ declare function NCardAction({ children }: {
 declare namespace NCardAction {
     var displayName: string;
 }
-declare function NCardFooter({ children, className }: {
+declare function NCardFooter({ children }: {
     children: React__default.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 declare namespace NCardFooter {
     var displayName: string;
 }
+type NCardMediaVariant = "image" | "avatar" | "hero";
+type NCardMediaPlacement = "auto" | "side" | "header" | "top";
+type NCardMediaSize = "sm" | "md" | "lg" | "xl" | number;
+type NCardMediaAspect = "square" | "4/3" | "3/2" | "16/9";
+interface NCardMediaProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    variant?: NCardMediaVariant;
+    /** `auto` uses side-to-top for images, side-to-header for avatars, and top for heroes. */
+    placement?: NCardMediaPlacement;
+    /** Side-media size. Presets are 72, 96, 112, and 128 pixels. */
+    size?: NCardMediaSize;
+    /** Hero aspect ratio. */
+    aspect?: NCardMediaAspect;
+}
+declare function NCardMedia({ children }: NCardMediaProps): react_jsx_runtime.JSX.Element;
+declare namespace NCardMedia {
+    var displayName: string;
+}
 interface CardClassNames {
     root?: string;
+    media?: string;
     header?: string;
     icon?: string;
     title?: string;
@@ -1336,8 +1363,8 @@ interface CardClassNames {
 interface CardProps {
     children?: React__default.ReactNode;
     onClick?: () => void;
-    title?: string;
-    description?: string;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
     icon?: NIconSource;
     iconColor?: string;
     loading?: boolean;
@@ -1353,12 +1380,36 @@ interface CardProps {
     noPadding?: boolean;
     separator?: boolean;
     bordered?: boolean;
+    /** Remove the visual surface when NDataCardShell or another parent already owns it. */
+    embedded?: boolean;
     className?: string;
     classNames?: CardClassNames;
 }
-declare function NCard({ children, title, description, icon, iconColor, loading, error, empty, noData, loadingText, errorText, emptyText, noDataText, skeleton, onRetry, noPadding, separator, bordered, className, classNames, onClick, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function NCard({ children, title, description, icon, iconColor, loading, error, empty, noData, loadingText, errorText, emptyText, noDataText, skeleton, onRetry, noPadding, separator, bordered, embedded, className, classNames, onClick, }: CardProps): react_jsx_runtime.JSX.Element;
 
 declare function truncateByCharacters(text: string, maxCharacters: number, suffix?: string): string;
+type NCardDensity = "default" | "compact" | "responsive";
+type NCardSectionSurface = "soft" | "plain" | "responsive";
+interface NCardInfoProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "children"> {
+    icon?: LucideIcon;
+    label?: React__default.ReactNode;
+    value: React__default.ReactNode;
+    density?: NCardDensity;
+    maxChars?: number;
+    iconClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+}
+declare function NCardInfo({ icon: Icon, label, value, density, maxChars, iconClassName, labelClassName, valueClassName, className, ...props }: NCardInfoProps): react_jsx_runtime.JSX.Element;
+interface NCardSectionProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: LucideIcon;
+    title?: React__default.ReactNode;
+    density?: NCardDensity;
+    surface?: NCardSectionSurface;
+    iconClassName?: string;
+    titleClassName?: string;
+}
+declare function NCardSection({ icon: Icon, title, density, surface, iconClassName, titleClassName, children, className, ...props }: NCardSectionProps): react_jsx_runtime.JSX.Element;
 interface NSectionInfoProps {
     icon?: LucideIcon;
     label: string;
@@ -3210,10 +3261,11 @@ interface NAppShellClassNames {
     content?: string;
     overlay?: string;
 }
+type SidebarWidth = NajmResponsiveValue<number | string>;
 interface SidebarWidths {
-    expanded?: number | string;
-    collapsed?: number | string;
-    mobile?: number | string;
+    expanded?: SidebarWidth;
+    collapsed?: SidebarWidth;
+    mobile?: SidebarWidth;
 }
 interface SidebarProps {
     logo?: ReactNode;
@@ -3508,4 +3560,4 @@ interface NGridItemProps extends Omit<React$1.AllHTMLAttributes<HTMLDivElement>,
 declare function NGrid({ as: Comp, children, cols, smCols, mdCols, lgCols, xlCols, gap, className, style, ...props }: NGridProps): react_jsx_runtime.JSX.Element;
 declare function NGridItem({ children, span, smSpan, mdSpan, lgSpan, xlSpan, className, ...props }: NGridItemProps): 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, NGrid, type NGridCols, NGridItem, type NGridItemProps, type NGridProps, type NGridSpan, 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 };
+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, type NCardDensity, NCardFooter, NCardInfo, type NCardInfoProps, NCardMedia, type NCardMediaAspect, type NCardMediaPlacement, type NCardMediaProps, type NCardMediaSize, type NCardMediaVariant, type CardProps as NCardProps, NCardSection, type NCardSectionProps, type NCardSectionSurface, 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, NGrid, type NGridCols, NGridItem, type NGridItemProps, type NGridProps, type NGridSpan, 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, type NajmResponsiveBreakpoint, type NajmResponsiveValue, 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 SidebarWidth, 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

@@ -610,6 +610,7 @@ var COMPONENT_KEYS = /* @__PURE__ */ new Set([
   "showSectionSeparators",
   "expandedWidth",
   "collapsedWidth",
+  "mobileWidth",
   "defaultVariant",
   "defaultSize",
   "density",
@@ -626,6 +627,7 @@ var VARIANT_KEYS = /* @__PURE__ */ new Set(["use", "className", "tokens"]);
 var COMPONENT_NAME_SET = new Set(NAJM_COMPONENT_NAMES);
 var DENSITIES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
 var SCALES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
+var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["base", "sm", "md", "lg", "xl", "2xl"]);
 function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -647,12 +649,20 @@ function optionalBoolean(value, path) {
   }
   return value;
 }
-function optionalNumber(value, path) {
+function optionalResponsiveNumber(value, path) {
   if (value === void 0) return void 0;
-  if (typeof value !== "number") {
-    throw new TypeError(`${path} must be a number`);
+  if (typeof value === "number") return value;
+  if (!isRecord2(value)) throw new TypeError(`${path} must be a number or breakpoint object`);
+  const unknown = Object.keys(value).find((key) => !RESPONSIVE_BREAKPOINTS.has(key));
+  if (unknown) throw new TypeError(`Unknown ${path} breakpoint: ${unknown}`);
+  const parsed = {};
+  for (const [breakpoint, width] of Object.entries(value)) {
+    if (typeof width !== "number") {
+      throw new TypeError(`${path}.${breakpoint} must be a number`);
+    }
+    parsed[breakpoint] = width;
   }
-  return value;
+  return parsed;
 }
 function optionalEnum2(value, values, path) {
   if (value === void 0) return void 0;
@@ -714,8 +724,9 @@ function parseComponentStyle(value, path) {
   const card = optionalBoolean(value.card, `${path}.card`);
   const showSectionLabels = optionalBoolean(value.showSectionLabels, `${path}.showSectionLabels`);
   const showSectionSeparators = optionalBoolean(value.showSectionSeparators, `${path}.showSectionSeparators`);
-  const expandedWidth = optionalNumber(value.expandedWidth, `${path}.expandedWidth`);
-  const collapsedWidth = optionalNumber(value.collapsedWidth, `${path}.collapsedWidth`);
+  const expandedWidth = optionalResponsiveNumber(value.expandedWidth, `${path}.expandedWidth`);
+  const collapsedWidth = optionalResponsiveNumber(value.collapsedWidth, `${path}.collapsedWidth`);
+  const mobileWidth = optionalResponsiveNumber(value.mobileWidth, `${path}.mobileWidth`);
   const defaultVariant = optionalString2(value.defaultVariant, `${path}.defaultVariant`);
   const defaultSize = optionalString2(value.defaultSize, `${path}.defaultSize`);
   const density = optionalEnum2(value.density, DENSITIES, `${path}.density`);
@@ -729,6 +740,7 @@ function parseComponentStyle(value, path) {
   if (showSectionSeparators !== void 0) cfg.showSectionSeparators = showSectionSeparators;
   if (expandedWidth !== void 0) cfg.expandedWidth = expandedWidth;
   if (collapsedWidth !== void 0) cfg.collapsedWidth = collapsedWidth;
+  if (mobileWidth !== void 0) cfg.mobileWidth = mobileWidth;
   if (defaultVariant !== void 0) cfg.defaultVariant = defaultVariant;
   if (defaultSize !== void 0) cfg.defaultSize = defaultSize;
   if (density !== void 0) cfg.density = density;
@@ -1987,7 +1999,7 @@ var IconButton = React.forwardRef(
 );
 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 });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center gap-0 lg:gap-1 xl:gap-2 2xl:gap-2", className), children });
 }
 NPageHeaderActions.displayName = "NPageHeaderActions";
 function NPageHeaderCompactActions({ children, className }) {
@@ -5037,10 +5049,49 @@ function NCardAction({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 NCardAction.displayName = "NCardAction";
-function NCardFooter({ children, className }) {
+function NCardFooter({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 NCardFooter.displayName = "NCardFooter";
+function NCardMedia({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+NCardMedia.displayName = "NCardMedia";
+var CARD_MEDIA_SIZE = {
+  sm: 72,
+  md: 96,
+  lg: 112,
+  xl: 128
+};
+var CARD_MEDIA_ASPECT = {
+  square: "aspect-square",
+  "4/3": "aspect-[4/3]",
+  "3/2": "aspect-[3/2]",
+  "16/9": "aspect-video"
+};
+function resolveMediaLayout(variant, placement) {
+  if (placement !== "auto") return placement;
+  if (variant === "hero") return "top";
+  return variant === "avatar" ? "responsive-avatar" : "responsive-image";
+}
+function getMediaHtmlProps(props) {
+  const htmlProps = { ...props };
+  delete htmlProps.children;
+  delete htmlProps.variant;
+  delete htmlProps.placement;
+  delete htmlProps.size;
+  delete htmlProps.aspect;
+  return htmlProps;
+}
+function mediaRootClasses(layout) {
+  if (layout === "top") return "flex flex-col gap-0 overflow-hidden p-0";
+  if (layout === "side") return "grid grid-cols-[auto_minmax(0,1fr)] gap-3 p-3";
+  if (layout === "header") return "grid grid-cols-[auto_minmax(0,1fr)] gap-3 p-3";
+  if (layout === "responsive-avatar") {
+    return "grid grid-cols-[auto_minmax(0,1fr)] gap-3 p-3 sm:p-4";
+  }
+  return "grid grid-cols-[auto_minmax(0,1fr)] gap-3 p-3 sm:flex sm:flex-col sm:p-4";
+}
 function NCard({
   children,
   title,
@@ -5060,6 +5111,7 @@ function NCard({
   noPadding = false,
   separator = false,
   bordered,
+  embedded = false,
   className,
   classNames,
   onClick
@@ -5068,61 +5120,183 @@ function NCard({
   const resolvedEmptyText = emptyText ?? noDataText ?? "No data available";
   const recipe = useNajmComponentStyle("card");
   const recipeRadius = resolveRadiusValue(recipe?.radius);
-  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
+  const recipeStyle = !embedded && (recipeRadius || recipe?.borderWidth) ? {
     ...recipeRadius ? { borderRadius: recipeRadius } : {},
     ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
   } : void 0;
   let actionSlot = null;
   let footerSlot = null;
+  let footerClassName;
+  let mediaSlot = null;
   const mainChildren = [];
   React__default.Children.forEach(children, (child) => {
-    if (React__default.isValidElement(child)) {
-      if (child.type === NCardAction) {
-        actionSlot = child;
-      } else if (child.type === NCardFooter) {
-        footerSlot = child;
-      } else {
-        mainChildren.push(child);
-      }
+    if (!React__default.isValidElement(child)) {
+      mainChildren.push(child);
+      return;
+    }
+    if (child.type === NCardAction) {
+      actionSlot = child.props.children;
+    } else if (child.type === NCardFooter) {
+      const footer = child.props;
+      footerSlot = footer.children;
+      footerClassName = footer.className;
+    } else if (child.type === NCardMedia) {
+      mediaSlot = child;
     } else {
       mainChildren.push(child);
     }
   });
-  const hasHeader = !!(title || description || actionSlot);
+  const mediaVariant = mediaSlot?.props.variant ?? "image";
+  const mediaPlacement = mediaSlot?.props.placement ?? "auto";
+  const mediaLayout = mediaSlot ? resolveMediaLayout(mediaVariant, mediaPlacement) : null;
+  const mediaSize = mediaSlot?.props.size ?? "md";
+  const resolvedMediaSize = typeof mediaSize === "number" ? mediaSize : CARD_MEDIA_SIZE[mediaSize];
+  const mediaAspect = mediaSlot?.props.aspect ?? "4/3";
+  const mediaHtmlProps = mediaSlot ? getMediaHtmlProps(mediaSlot.props) : {};
+  const hasHeader = Boolean(title || description || actionSlot);
   const iconSize = description ? "h-6 w-6 lg:h-8 lg:w-8" : "h-4 w-4 lg:h-5 lg:w-5";
+  const mediaStyle = mediaSlot ? {
+    ...mediaSlot.props.style,
+    "--n-card-media-size": `${resolvedMediaSize}px`
+  } : void 0;
+  const sideBody = mediaLayout === "side";
+  const headerBody = mediaLayout === "header";
+  const responsiveAvatarBody = mediaLayout === "responsive-avatar";
+  const responsiveImageBody = mediaLayout === "responsive-image";
+  const topBody = mediaLayout === "top";
+  const compactSideBody = sideBody || responsiveAvatarBody || responsiveImageBody;
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
+      "data-bordered": embedded || bordered === false ? "false" : bordered ? "true" : void 0,
+      "data-embedded": embedded ? "true" : void 0,
+      "data-media-layout": mediaLayout ?? void 0,
+      "data-media-variant": mediaSlot ? mediaVariant : void 0,
       onClick,
       style: recipeStyle,
       className: cn(
-        "flex flex-col",
-        !noPadding && "p-2 lg:p-3 xl:p-4 2xl:p-5 gap-3",
-        surfaceBorderClasses(bordered),
+        mediaLayout ? mediaRootClasses(mediaLayout) : "flex flex-col",
+        !mediaLayout && !noPadding && "p-2 lg:p-3 xl:p-4 2xl:p-5 gap-3",
+        mediaLayout && noPadding && "p-0",
+        embedded && "rounded-none bg-transparent shadow-none",
+        surfaceBorderClasses(embedded ? false : bordered),
         classNames?.root,
         className
       ),
       children: [
-        hasHeader && /* @__PURE__ */ jsxs(CardHeader, { className: cn("flex flex-row items-center justify-between space-y-0 p-0", classNames?.header), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-            icon && /* @__PURE__ */ jsx(NIcon, { icon, className: cn(iconSize, "shrink-0 text-muted-foreground", iconColor, classNames?.icon) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              title && /* @__PURE__ */ jsx(CardTitle, { className: cn("text-sm lg:text-base leading-snug", classNames?.title), children: title }),
-              description && /* @__PURE__ */ jsx(CardDescription, { className: cn("text-xs mt-0.5", classNames?.description), children: description })
-            ] })
-          ] }),
-          actionSlot && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0 ml-2", children: actionSlot })
-        ] }),
-        hasHeader && separator && /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
-        /* @__PURE__ */ jsx(CardContent, { className: cn("flex flex-col flex-1 m-0 p-0", classNames?.content), children: loading && skeleton ? skeleton : loading ? /* @__PURE__ */ jsx(NLoadingState, { label: loadingText }) : error ? /* @__PURE__ */ jsx(
-          NErrorState,
+        mediaSlot ? /* @__PURE__ */ jsx(
+          "div",
           {
-            message: typeof error === "string" ? error : errorText ?? "Something went wrong",
-            onRetry
+            ...mediaHtmlProps,
+            "data-slot": "card-media",
+            "data-placement": mediaPlacement,
+            "data-variant": mediaVariant,
+            "data-size": mediaSize,
+            style: mediaStyle,
+            className: cn(
+              mediaVariant !== "avatar" && "relative overflow-hidden bg-muted",
+              mediaVariant === "image" && "col-start-1 row-start-1 size-[var(--n-card-media-size)] self-start rounded-lg",
+              mediaVariant === "image" && responsiveImageBody && "sm:h-40 sm:w-full sm:shrink-0",
+              mediaVariant === "avatar" && "col-start-1 row-start-1 flex w-[var(--n-card-media-size)] items-start justify-center",
+              mediaVariant === "avatar" && (headerBody || responsiveAvatarBody || topBody) && "sm:justify-start",
+              mediaVariant === "hero" && cn("w-full", CARD_MEDIA_ASPECT[mediaAspect]),
+              mediaLayout === "top" && mediaVariant === "image" && "h-40 w-full rounded-none",
+              classNames?.media,
+              mediaSlot.props.className
+            ),
+            children: mediaSlot.props.children
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "card-body",
+            className: cn(
+              compactSideBody ? "col-start-2 row-start-1 flex min-w-0 flex-col gap-2 self-start" : "contents",
+              (responsiveAvatarBody || responsiveImageBody) && "sm:contents"
+            ),
+            children: [
+              hasHeader ? /* @__PURE__ */ jsxs(
+                CardHeader,
+                {
+                  className: cn(
+                    "flex min-w-0 flex-row items-center justify-between space-y-0 p-0",
+                    mediaLayout && "col-start-2 row-start-1",
+                    responsiveImageBody && "sm:col-auto sm:row-auto",
+                    topBody && "p-4 pb-0",
+                    classNames?.header
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                      icon ? /* @__PURE__ */ jsx(
+                        NIcon,
+                        {
+                          icon,
+                          className: cn(iconSize, "shrink-0 text-muted-foreground", iconColor, classNames?.icon)
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                        title ? /* @__PURE__ */ jsx(CardTitle, { className: cn("truncate text-sm leading-snug lg:text-base", classNames?.title), children: title }) : null,
+                        description ? /* @__PURE__ */ jsx(CardDescription, { className: cn("mt-0.5 text-xs", classNames?.description), children: description }) : null
+                      ] })
+                    ] }),
+                    actionSlot ? /* @__PURE__ */ jsx("div", { className: "ml-2 flex shrink-0 items-center gap-2", children: actionSlot }) : null
+                  ]
+                }
+              ) : null,
+              hasHeader && separator ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "border-t border-border",
+                    sideBody && "col-start-2",
+                    headerBody && "col-span-full",
+                    responsiveAvatarBody && "col-start-2 sm:col-span-full",
+                    responsiveImageBody && "col-start-2 sm:col-auto",
+                    topBody && "mx-4"
+                  )
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                CardContent,
+                {
+                  className: cn(
+                    "m-0 flex min-w-0 flex-1 flex-col gap-2 p-0",
+                    sideBody && "col-start-2",
+                    headerBody && "col-span-full",
+                    responsiveAvatarBody && "col-start-2 sm:col-span-full",
+                    responsiveImageBody && "col-start-2 sm:col-auto",
+                    topBody && "p-4",
+                    classNames?.content
+                  ),
+                  children: loading && skeleton ? skeleton : loading ? /* @__PURE__ */ jsx(NLoadingState, { label: loadingText }) : error ? /* @__PURE__ */ jsx(
+                    NErrorState,
+                    {
+                      message: typeof error === "string" ? error : errorText ?? "Something went wrong",
+                      onRetry
+                    }
+                  ) : isEmpty ? /* @__PURE__ */ jsx(NEmptyState, { title: resolvedEmptyText }) : mainChildren
+                }
+              ),
+              footerSlot ? /* @__PURE__ */ jsx(
+                CardFooter,
+                {
+                  className: cn(
+                    "mt-auto p-0 pt-3",
+                    sideBody && "col-start-2",
+                    headerBody && "col-span-full",
+                    responsiveAvatarBody && "col-start-2 sm:col-span-full",
+                    responsiveImageBody && "col-start-2 sm:col-auto",
+                    topBody && "border-t border-border p-4",
+                    classNames?.footer,
+                    footerClassName
+                  ),
+                  children: footerSlot
+                }
+              ) : null
+            ]
           }
-        ) : isEmpty ? /* @__PURE__ */ jsx(NEmptyState, { title: resolvedEmptyText }) : mainChildren }),
-        footerSlot && /* @__PURE__ */ jsx(CardFooter, { className: cn("p-0 pt-3 border-t border-border mt-auto", classNames?.footer), children: footerSlot })
+        )
       ]
     }
   );
@@ -5132,6 +5306,115 @@ function truncateByCharacters(text, maxCharacters, suffix = "...") {
   const str = String(text);
   return str.length <= maxCharacters ? str : str.slice(0, maxCharacters) + suffix;
 }
+var CardDensityContext = React__default.createContext("default");
+function NCardInfo({
+  icon: Icon2,
+  label,
+  value,
+  density,
+  maxChars = 30,
+  iconClassName,
+  labelClassName,
+  valueClassName,
+  className,
+  ...props
+}) {
+  const inheritedDensity = React__default.useContext(CardDensityContext);
+  const resolvedDensity = density ?? inheritedDensity;
+  const isTruncated = typeof value === "string" && value.length > maxChars;
+  const displayValue = isTruncated ? truncateByCharacters(value, maxChars) : value;
+  const valueNode = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "card-info-value",
+      className: cn("min-w-0 truncate text-foreground", isTruncated && "cursor-help", valueClassName),
+      children: displayValue
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "card-info",
+      "data-density": resolvedDensity,
+      className: cn(
+        "flex min-w-0 items-center",
+        resolvedDensity === "default" && "gap-2 text-sm",
+        resolvedDensity === "compact" && "gap-1.5 text-xs",
+        resolvedDensity === "responsive" && "gap-1.5 text-xs sm:gap-2 sm:text-sm",
+        className
+      ),
+      ...props,
+      children: [
+        Icon2 ? /* @__PURE__ */ jsx(
+          Icon2,
+          {
+            "aria-hidden": "true",
+            "data-slot": "card-info-icon",
+            className: cn(
+              "shrink-0 text-muted-foreground",
+              resolvedDensity === "default" && "size-4",
+              resolvedDensity === "compact" && "size-3.5",
+              resolvedDensity === "responsive" && "size-3.5 sm:size-4",
+              iconClassName
+            )
+          }
+        ) : null,
+        label ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-slot": "card-info-label",
+            className: cn("shrink-0 text-muted-foreground", labelClassName),
+            children: [
+              label,
+              ":"
+            ]
+          }
+        ) : null,
+        isTruncated ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: valueNode }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: value }) })
+        ] }) : valueNode
+      ]
+    }
+  );
+}
+function NCardSection({
+  icon: Icon2,
+  title,
+  density = "responsive",
+  surface = "responsive",
+  iconClassName,
+  titleClassName,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CardDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "card-section",
+      "data-density": density,
+      "data-surface": surface,
+      className: cn(
+        density === "default" && "space-y-2",
+        density === "compact" && "space-y-1",
+        density === "responsive" && "space-y-1 sm:space-y-2",
+        surface === "soft" && "rounded-lg bg-muted/50 p-3",
+        surface === "plain" && "bg-transparent p-0",
+        surface === "responsive" && "bg-transparent p-0 sm:rounded-lg sm:bg-muted/50 sm:p-3",
+        className
+      ),
+      ...props,
+      children: [
+        Icon2 || title ? /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+          Icon2 ? /* @__PURE__ */ jsx(Icon2, { "aria-hidden": "true", className: cn("size-4 text-muted-foreground", iconClassName) }) : null,
+          title ? /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium text-foreground", titleClassName), children: title }) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+}
 function NSectionInfo({
   icon: Icon2,
   label = "",
@@ -5311,13 +5594,13 @@ function DefaultCard({
           "div",
           {
             className: cn(
-              "flex h-8 w-8 lg:h-9 lg:w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary/20",
+              "flex h-8 w-8 lg:h-9 lg:w-9 2xl:h-10 2xl:w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary/20",
               classNames?.icon
             ),
             children: /* @__PURE__ */ jsx(NIcon, { icon, className: "w-4 h-4 lg:w-5 lg:h-5 2xl:w-6 2xl:h-6" })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0 2xl:gap-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
             label && /* @__PURE__ */ jsx("p", { className: cn("truncate text-xs text-muted-foreground", classNames?.label), children: label }),
             change && /* @__PURE__ */ jsxs(
@@ -11071,6 +11354,42 @@ var autoCollapseQueries = {
   lg: "(min-width: 1024px) and (max-width: 1279.98px)",
   xl: "(min-width: 1280px) and (max-width: 1535.98px)"
 };
+var responsiveBreakpointQueries = {
+  sm: "(min-width: 640px)",
+  md: "(min-width: 768px)",
+  lg: "(min-width: 1024px)",
+  xl: "(min-width: 1280px)",
+  "2xl": "(min-width: 1536px)"
+};
+function useSidebarResponsiveBreakpoint() {
+  const [breakpoint, setBreakpoint] = useState("base");
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mediaQueries = Object.entries(responsiveBreakpointQueries).map(([name, query]) => ({
+      name,
+      mediaQuery: window.matchMedia(query)
+    }));
+    const update = () => {
+      const active = [...mediaQueries].reverse().find(({ mediaQuery }) => mediaQuery.matches);
+      setBreakpoint(active?.name ?? "base");
+    };
+    update();
+    mediaQueries.forEach(({ mediaQuery }) => mediaQuery.addEventListener?.("change", update));
+    return () => mediaQueries.forEach(({ mediaQuery }) => mediaQuery.removeEventListener?.("change", update));
+  }, []);
+  return breakpoint;
+}
+function resolveSidebarWidth(value, breakpoint, fallback) {
+  if (value === void 0) return fallback;
+  if (typeof value === "number" || typeof value === "string") return value;
+  const breakpoints = ["base", "sm", "md", "lg", "xl", "2xl"];
+  const activeIndex = breakpoints.indexOf(breakpoint);
+  for (let index = activeIndex; index >= 0; index -= 1) {
+    const width = value[breakpoints[index]];
+    if (width !== void 0) return width;
+  }
+  return fallback;
+}
 function useAutoCollapsed(breakpoint) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {
@@ -11190,9 +11509,22 @@ function NSidebar({
   }, [onNavigate, closeOnNavigate]);
   const groups = useMemo(() => buildGroups(navItems), [navItems]);
   const desktopClass = mobileBreakpoint === "sm" ? "hidden sm:flex" : mobileBreakpoint === "lg" ? "hidden lg:flex" : "hidden md:flex";
-  const expandedWidth = widths?.expanded ?? recipe?.expandedWidth ?? 240;
-  const collapsedWidth = widths?.collapsed ?? recipe?.collapsedWidth ?? 64;
-  const mobileWidth = widths?.mobile ?? expandedWidth;
+  const responsiveBreakpoint = useSidebarResponsiveBreakpoint();
+  const expandedWidth = resolveSidebarWidth(
+    widths?.expanded ?? recipe?.expandedWidth,
+    responsiveBreakpoint,
+    240
+  );
+  const collapsedWidth = resolveSidebarWidth(
+    widths?.collapsed ?? recipe?.collapsedWidth,
+    responsiveBreakpoint,
+    64
+  );
+  const mobileWidth = resolveSidebarWidth(
+    widths?.mobile ?? recipe?.mobileWidth,
+    responsiveBreakpoint,
+    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" && !autoCollapsed;
@@ -11639,4 +11971,4 @@ function NGridItem({
   return /* @__PURE__ */ jsx("div", { className: itemClassName, ...props, 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, NGrid, NGridItem, 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 };
+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, NCardInfo, NCardMedia, NCardSection, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, 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.19",
+  "version": "2.1.20",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",