najm-kit 2.1.51 → 2.1.53

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 2.1.53 - 2026-08-05
+
+- Add typed `NBarChart`, `NLineChart`, `NPieChart`, and `NStatusBreakdown`
+  components with caller-formatted generic data, accessible summaries, empty
+  states, responsive RTL-safe layouts, and shape-matched loading skeletons.
+- Default chart colors to the live `--chart-1` through `--chart-5` theme
+  variables, cycle deterministically after five items, and retain explicit
+  per-series/item color overrides.
+- Add preset and numeric chart diameter contracts to `NPieChart` and
+  `NDonutCard`, including narrow-container shrinking without clipped legends.
+- Make `NDonutCard` item colors optional and add accessible loading states to
+  `NDonutCard` and `NStatCard`.
+- Add public API tests, component tests, README guidance, and playground
+  examples for the chart and loading contracts.
+
 ## 2.1.49 - 2026-08-04
 
 ### ImageInput and AvatarInput

package/README.md

@@ -350,3 +350,41 @@ accumulated pages in card mode, keep those two query shapes in the application
 and pass the appropriate `data`. Crossing the `<640px` responsive-card
 breakpoint does not overwrite the user's chosen view, pagination position,
 sorting, filters, expansion, or row selection.
+
+## Theme-backed charts
+
+`NBarChart`, `NLineChart`, `NPieChart`, and `NStatusBreakdown` accept generic
+caller-formatted data and use `--chart-1` through `--chart-5` by default.
+Colors repeat deterministically after the fifth series or item; set `color` on
+an exceptional series/item to override that one value. Each chart accepts
+`loading`/`loadingLabel` and renders an accessible shape-matched skeleton.
+`NPieChart` and `NDonutCard` accept `size="sm" | "md" | "lg"` or a numeric
+pixel diameter and shrink within narrow containers.
+
+```tsx
+import { NBarChart, NPieChart } from "najm-kit";
+
+const data = [
+  { id: "jan", label: "Jan", values: { received: 12, refunded: 2 } },
+  { id: "feb", label: "Feb", values: { received: 18, refunded: 1 } },
+];
+
+<NBarChart
+  title="Monthly activity"
+  data={data}
+  series={[
+    { id: "received", label: "Received" },
+    { id: "refunded", label: "Refunded" },
+  ]}
+  valueFormatter={(value) => `${value} MAD`}
+/>
+
+<NPieChart
+  title="Status"
+  size={132}
+  items={[
+    { id: "active", label: "Active", value: 8 },
+    { id: "pending", label: "Pending", value: 3 },
+  ]}
+/>
+```

package/dist/index.d.ts

@@ -1599,6 +1599,8 @@ interface BaseProps$1 {
     bordered?: boolean;
     className?: string;
     classNames?: NStatCardClassNames;
+    loading?: boolean;
+    loadingLabel?: string;
 }
 interface DefaultProps extends BaseProps$1 {
     variant?: "default";
@@ -1646,15 +1648,70 @@ interface UsageProps extends BaseProps$1 {
 type NStatCardProps = DefaultProps | UsageProps | CompactProps;
 declare function NStatCard(props: NStatCardProps): react_jsx_runtime.JSX.Element;
 
+type NChartSize = "sm" | "md" | "lg" | number;
+interface NChartSeries {
+    id: string;
+    label: React__default.ReactNode;
+    color?: string;
+}
+interface NChartDatum {
+    id: string;
+    label: React__default.ReactNode;
+    values: Readonly<Record<string, number>>;
+}
+interface NChartItem {
+    id: string;
+    label: React__default.ReactNode;
+    value: number;
+    color?: string;
+    className?: string;
+}
+interface NChartCardProps {
+    title: React__default.ReactNode;
+    ariaLabel?: string;
+    icon?: NIconSource;
+    iconColor?: string;
+    className?: string;
+    emptyLabel?: React__default.ReactNode;
+    loading?: boolean;
+    loadingLabel?: string;
+    valueFormatter?: (value: number) => React__default.ReactNode;
+}
+interface NCartesianChartProps extends NChartCardProps {
+    data: readonly NChartDatum[];
+    series: readonly NChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+}
+type NBarChartProps = NCartesianChartProps;
+type NLineChartProps = NCartesianChartProps;
+interface NPieChartProps extends NChartCardProps {
+    items: readonly NChartItem[];
+    size?: NChartSize;
+    showLegend?: boolean;
+    percentageFormatter?: (ratio: number) => React__default.ReactNode;
+}
+interface NStatusBreakdownProps extends NChartCardProps {
+    items: readonly NChartItem[];
+    minimumVisiblePercent?: number;
+}
+type NChartSkeletonVariant = "bar" | "line" | "pie" | "status";
+interface NChartSkeletonProps {
+    variant?: NChartSkeletonVariant;
+    points?: number;
+    rows?: number;
+    className?: string;
+}
+
 type NDonutCardVariant = "compact" | "default";
-type NDonutCardLayout = "vertical" | "horizontal";
+type NDonutCardLayout = "auto" | "vertical" | "horizontal";
 type NDonutCardLegendMarker = "dot" | "icon" | "none";
 type NDonutCardCenterOrientation = "column" | "row";
 interface NDonutCardItem {
     id: string;
     label: React__default.ReactNode;
     value: number;
-    color: string;
+    color?: string;
     icon?: NIconSource;
 }
 interface NDonutCardClassNames {
@@ -1684,14 +1741,26 @@ interface NDonutCardProps {
     emptyLabel?: React__default.ReactNode;
     footer?: React__default.ReactNode;
     variant?: NDonutCardVariant;
+    /** Ring diameter preset or an exact pixel diameter. Custom values are clamped to 64-480px. */
+    size?: NChartSize;
+    /** `"auto"` is horizontal on mobile and switches to vertical from the `md` breakpoint. */
     layout?: NDonutCardLayout;
     legendMarker?: NDonutCardLegendMarker;
     centerOrientation?: NDonutCardCenterOrientation;
     percentageFormatter?: (ratio: number) => React__default.ReactNode;
     className?: string;
     classNames?: NDonutCardClassNames;
+    loading?: boolean;
+    loadingLabel?: string;
 }
-declare function NDonutCard({ title, ariaLabel, icon, iconColor, items, valueFormatter, centerValueFormatter, centerUnit, totalLabel, centerIcon, emptyLabel, footer, variant, layout, legendMarker, centerOrientation, percentageFormatter, className, classNames, }: NDonutCardProps): react_jsx_runtime.JSX.Element;
+declare function NDonutCard({ title, ariaLabel, icon, iconColor, items, valueFormatter, centerValueFormatter, centerUnit, totalLabel, centerIcon, emptyLabel, footer, variant, size, layout, legendMarker, centerOrientation, percentageFormatter, className, classNames, loading, loadingLabel, }: NDonutCardProps): react_jsx_runtime.JSX.Element;
+
+declare function getNChartColor(index: number, override?: string): string;
+declare function NChartSkeleton({ className, points, rows, variant, }: NChartSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function NBarChart({ ariaLabel, className, data, emptyLabel, height, icon, iconColor, loading, loadingLabel, series, showLegend, title, valueFormatter, }: NBarChartProps): react_jsx_runtime.JSX.Element;
+declare function NLineChart(props: NLineChartProps): react_jsx_runtime.JSX.Element;
+declare function NPieChart({ ariaLabel, className, emptyLabel, icon, iconColor, items, loading, loadingLabel, percentageFormatter, showLegend, size, title, valueFormatter, }: NPieChartProps): react_jsx_runtime.JSX.Element;
+declare function NStatusBreakdown({ ariaLabel, className, emptyLabel, icon, iconColor, items, loading, loadingLabel, minimumVisiblePercent, title, valueFormatter, }: NStatusBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface NDetailCardClassNames {
     root?: string;
@@ -3932,4 +4001,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, AvatarFormInput, type AvatarFormInputProps, AvatarGroup, type AvatarGroupProps, AvatarImage, AvatarInput, type AvatarInputProps, type AvatarInputRadius, 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, DEFAULT_THEME_FILE_NAME, 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 ImageInputPreviewError, type ImageInputPreviewSource, 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, NDonutCard, type NDonutCardClassNames, type NDonutCardItem, type NDonutCardLayout, type NDonutCardLegendMarker, type NDonutCardProps, type NDonutCardVariant, 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 NSheetClassNames, 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, type NTableCardPagination, NTableCardRoot, type NTableCardRootProps, NTableCards, type NTableClassNames, type NTableColumnBreakpoint, type NTableColumnDef, type NTableColumnMeta, NTableContent, NTableHeader, type NTableLoadMorePagination, NTableLoadingSkeleton, type NTableMenu, type NTableMenuProp, NTablePagination, type NTableProps, NTableRowSkeleton, NTableSkeleton, type NTableState, NTabs, type NTabsClassNames, type NTabsColor, type NTabsItem, type NTabsProps, type NTabsStyles, NThemeCustomizer, type NThemeCustomizerFontOption, type NThemeCustomizerLabels, type NThemeCustomizerProps, type NThemeCustomizerTab, 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 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, OtpInput, type OtpInputProps, 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, TimeZoneInput, type TimeZoneInputProps, 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, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, normalizeThemeFileName, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, parseThemeFile, resolveHiddenBelowClass, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, stringifyThemeFile, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode, 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, AvatarFormInput, type AvatarFormInputProps, AvatarGroup, type AvatarGroupProps, AvatarImage, AvatarInput, type AvatarInputProps, type AvatarInputRadius, 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, DEFAULT_THEME_FILE_NAME, 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 ImageInputPreviewError, type ImageInputPreviewSource, 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, NBarChart, type NBarChartProps, 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, type NCartesianChartProps, type NChartCardProps, type NChartDatum, type NChartItem, type NChartSeries, type NChartSize, NChartSkeleton, type NChartSkeletonProps, type NChartSkeletonVariant, 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, NDonutCard, type NDonutCardClassNames, type NDonutCardItem, type NDonutCardLayout, type NDonutCardLegendMarker, type NDonutCardProps, type NDonutCardVariant, 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, NLineChart, type NLineChartProps, NLoadingState, type NLoadingStateProps, NMultiDialog, type NMultiDialogProps, NNavbar, NPageHeader, NPageHeaderActions, type NPageHeaderBreakpoint, NPageHeaderCompactActions, NPageHeaderFilters, type NPageHeaderProps, NPageHeaderTop, NPageLayout, type NPageLayoutProps, NPieChart, type NPieChartProps, 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 NSheetClassNames, 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, NStatusBreakdown, type NStatusBreakdownProps, Swap as NSwap, type NSwapProps, NTable, type NTableCardPagination, NTableCardRoot, type NTableCardRootProps, NTableCards, type NTableClassNames, type NTableColumnBreakpoint, type NTableColumnDef, type NTableColumnMeta, NTableContent, NTableHeader, type NTableLoadMorePagination, NTableLoadingSkeleton, type NTableMenu, type NTableMenuProp, NTablePagination, type NTableProps, NTableRowSkeleton, NTableSkeleton, type NTableState, NTabs, type NTabsClassNames, type NTabsColor, type NTabsItem, type NTabsProps, type NTabsStyles, NThemeCustomizer, type NThemeCustomizerFontOption, type NThemeCustomizerLabels, type NThemeCustomizerProps, type NThemeCustomizerTab, 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 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, OtpInput, type OtpInputProps, 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, TimeZoneInput, type TimeZoneInputProps, 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, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, normalizeThemeFileName, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, parseThemeFile, resolveHiddenBelowClass, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, stringifyThemeFile, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };

package/dist/index.mjs

@@ -8154,6 +8154,9 @@ function CompactCard({ icon, label, value, unit, iconColor, onClick, bordered, c
   );
 }
 function NStatCard(props) {
+  if (props.loading) {
+    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": props.loadingLabel ?? "Loading", className: props.className, role: "status", children: /* @__PURE__ */ jsx(NStatCardSkeleton, {}) });
+  }
   if (props.variant === "usage") return /* @__PURE__ */ jsx(UsageCard, { ...props });
   if (props.variant === "compact") return /* @__PURE__ */ jsx(CompactCard, { ...props });
   return /* @__PURE__ */ jsx(DefaultCard, { ...props });
@@ -8162,6 +8165,14 @@ var SIZE = {
   compact: { ring: 96, center: 72 },
   default: { ring: 144, center: 112 }
 };
+var SIZE_PRESETS = { sm: 112, md: 160, lg: 208 };
+function resolveRingSize(size, fallback) {
+  if (typeof size === "number") return Math.min(480, Math.max(64, size));
+  return size ? SIZE_PRESETS[size] : fallback;
+}
+function chartColor(index, override) {
+  return override ?? `var(--chart-${index % 5 + 1})`;
+}
 function normalizeValue(v) {
   if (!Number.isFinite(v) || v <= 0) return 0;
   return v;
@@ -8170,11 +8181,11 @@ function buildConicGradient(items, total) {
   if (total <= 0) return void 0;
   let running = 0;
   const stops = [];
-  for (const item of items) {
+  for (const [index, item] of items.entries()) {
     const v = normalizeValue(item.value);
     if (v <= 0) continue;
     const pct = v / total;
-    stops.push(`${item.color} ${running}turn ${running + pct}turn`);
+    stops.push(`${chartColor(index, item.color)} ${running}turn ${running + pct}turn`);
     running += pct;
   }
   if (stops.length === 0) return void 0;
@@ -8233,12 +8244,15 @@ function NDonutCard({
   emptyLabel,
   footer,
   variant = "default",
-  layout = "vertical",
+  size,
+  layout = "auto",
   legendMarker = "dot",
   centerOrientation = "column",
   percentageFormatter,
   className,
-  classNames
+  classNames,
+  loading = false,
+  loadingLabel = "Loading"
 }) {
   const computedTotal = useMemo(
     () => items.reduce((sum, item) => sum + normalizeValue(item.value), 0),
@@ -8250,28 +8264,45 @@ function NDonutCard({
     [items, computedTotal]
   );
   const normalized = useMemo(
-    () => items.map((item) => ({
+    () => items.map((item, index) => ({
       ...item,
+      color: chartColor(index, item.color),
       value: normalizeValue(item.value),
       ratio: computedTotal > 0 ? normalizeValue(item.value) / computedTotal : 0
     })),
     [items, computedTotal]
   );
   const sz = SIZE[variant];
+  const ringSize = resolveRingSize(size, sz.ring);
   const isTitleString = typeof title === "string";
-  const accessibleLabel = isTitleString ? title : ariaLabel;
+  const accessibleLabel2 = isTitleString ? title : ariaLabel;
   const isCompact = variant === "compact";
+  const isAuto = layout === "auto";
   const isHorizontal = layout === "horizontal";
   const isCenterRow = centerOrientation === "row";
   const ringStyle = {
-    width: sz.ring,
-    height: sz.ring
+    width: ringSize,
+    maxWidth: "100%",
+    aspectRatio: "1 / 1"
   };
   if (gradient) ringStyle.background = gradient;
   const centerStyle = {
-    width: sz.center,
-    height: sz.center
+    width: `${sz.center / sz.ring * 100}%`,
+    aspectRatio: "1 / 1"
   };
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      NCard,
+      {
+        title,
+        icon,
+        iconColor,
+        bordered: true,
+        className: cn(className, classNames?.root),
+        children: /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": loadingLabel, role: "status", children: /* @__PURE__ */ jsx(NSkeletonDonut, {}) })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     NCard,
     {
@@ -8289,9 +8320,9 @@ function NDonutCard({
             "data-variant": variant,
             "data-layout": layout,
             role: "group",
-            "aria-label": accessibleLabel,
+            "aria-label": accessibleLabel2,
             className: cn(
-              isHorizontal ? "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-5 p-2 lg:p-3 2xl:p-4" : cn(
+              isAuto ? "flex w-full items-center gap-4 p-2 sm:p-3 md:flex-col lg:p-4" : isHorizontal ? "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-5 p-2 lg:p-3 2xl:p-4" : cn(
                 "flex flex-col items-center p-2 lg:p-3 2xl:p-4",
                 isCompact ? "gap-2" : "gap-4"
               ),
@@ -8301,7 +8332,10 @@ function NDonutCard({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cn("flex flex-col items-center gap-2", isHorizontal && "shrink-0"),
+                  className: cn(
+                    "flex flex-col items-center gap-2",
+                    (isHorizontal || isAuto) && "shrink-0"
+                  ),
                   children: [
                     /* @__PURE__ */ jsxs(
                       "div",
@@ -8391,17 +8425,59 @@ function NDonutCard({
                 {
                   "data-slot": "donut-legend",
                   className: cn(
-                    "flex flex-col gap-1.5 w-full",
-                    isCompact && "gap-1",
-                    isHorizontal && "min-w-0 flex-1 gap-2 pt-0.5",
+                    isAuto ? "ms-auto shrink-0 space-y-3 md:ms-0 md:flex md:w-full md:shrink md:flex-col md:gap-1.5 md:space-y-0" : cn(
+                      "flex flex-col gap-1.5 w-full",
+                      isCompact && "gap-1",
+                      isHorizontal && "min-w-0 flex-1 gap-2 pt-0.5"
+                    ),
                     classNames?.legend
                   ),
                   children: normalized.map((item) => /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-slot": "donut-legend-item",
-                      className: cn(classNames?.legendItem),
-                      children: isHorizontal ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                      className: cn(
+                        isAuto && "md:flex md:items-center md:justify-between md:gap-2",
+                        classNames?.legendItem
+                      ),
+                      children: isAuto ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 md:min-w-0", children: [
+                          /* @__PURE__ */ jsx(
+                            LegendMarker,
+                            {
+                              className: cn(classNames?.legendMarker),
+                              color: item.color,
+                              icon: item.icon,
+                              mode: legendMarker
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "min-w-0 flex-1 truncate text-muted-foreground",
+                                isCompact ? "text-[11px]" : "text-xs sm:text-sm",
+                                classNames?.legendLabel
+                              ),
+                              children: item.label
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "ms-4 block whitespace-nowrap tabular-nums text-foreground font-semibold md:ms-0",
+                              isCompact ? "text-[11px]" : "text-xs sm:text-sm",
+                              classNames?.legendValue
+                            ),
+                            children: [
+                              valueFormatter(item.value),
+                              percentageFormatter ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-[11px] font-normal text-muted-foreground sm:ml-0.5", children: percentageFormatter(item.ratio) }) : null
+                            ]
+                          }
+                        )
+                      ] }) : isHorizontal ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
                         /* @__PURE__ */ jsx(
                           LegendMarker,
                           {
@@ -8489,6 +8565,265 @@ function NDonutCard({
     }
   );
 }
+var CHART_PALETTE_SIZE = 5;
+var SIZE_PRESETS2 = { sm: 112, md: 160, lg: 208 };
+function getNChartColor(index, override) {
+  return override ?? `var(--chart-${Math.max(0, index) % CHART_PALETTE_SIZE + 1})`;
+}
+function chartSize(size, fallback = SIZE_PRESETS2.md) {
+  if (typeof size === "number") return Math.min(480, Math.max(64, size));
+  return size ? SIZE_PRESETS2[size] : fallback;
+}
+function numberValue(value) {
+  return Number.isFinite(value) && (value ?? 0) > 0 ? Number(value) : 0;
+}
+function accessibleLabel(title, ariaLabel) {
+  return typeof title === "string" ? title : ariaLabel;
+}
+function ChartLegend({ series }) {
+  return /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-x-4 gap-y-1", "data-slot": "chart-legend", children: series.map((item, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "size-2.5 shrink-0 rounded-full",
+        style: { backgroundColor: getNChartColor(index, item.color) }
+      }
+    ),
+    item.label
+  ] }, item.id)) });
+}
+function EmptyChart({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-40 items-center justify-center text-sm text-muted-foreground", children });
+}
+function LoadingCard({
+  className,
+  icon,
+  iconColor,
+  label,
+  title,
+  variant
+}) {
+  return /* @__PURE__ */ jsx(NCard, { className: cn("h-full", className), icon, iconColor, title, children: /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": label ?? "Loading", className: "min-h-40", role: "status", children: /* @__PURE__ */ jsx(NChartSkeleton, { variant }) }) });
+}
+function NChartSkeleton({
+  className,
+  points = 12,
+  rows = 4,
+  variant = "bar"
+}) {
+  if (variant === "pie") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-5 py-3 sm:flex-col", className), "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx(NSkeleton, { className: "size-32 shrink-0 rounded-full" }),
+      /* @__PURE__ */ jsx("div", { className: "w-full flex-1 space-y-3", children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsx(NSkeleton, { className: "h-3 w-24" }),
+        /* @__PURE__ */ jsx(NSkeleton, { className: "h-3 w-12" })
+      ] }, index)) })
+    ] });
+  }
+  if (variant === "status") {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4 py-2", className), "aria-hidden": "true", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx(NSkeleton, { className: "h-3 w-24" }),
+        /* @__PURE__ */ jsx(NSkeleton, { className: "h-3 w-8" })
+      ] }),
+      /* @__PURE__ */ jsx(NSkeleton, { className: "h-2 w-full rounded-full" })
+    ] }, index)) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-44 flex-col gap-3", className), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-end gap-1.5", children: Array.from({ length: Math.max(1, points) }, (_, index) => /* @__PURE__ */ jsx(
+      NSkeleton,
+      {
+        className: cn("min-h-2 flex-1", variant === "bar" ? "rounded-t-sm" : "rounded-full"),
+        style: { height: `${32 + index * 17 % 58}%` }
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-between gap-2", children: Array.from({ length: Math.min(6, Math.max(1, points)) }, (_, index) => /* @__PURE__ */ jsx(NSkeleton, { className: "h-3 w-6" }, index)) })
+  ] });
+}
+function chartMaximum(data, series) {
+  return Math.max(1, ...data.flatMap((point) => series.map((item) => numberValue(point.values[item.id]))));
+}
+function NBarChart({
+  ariaLabel,
+  className,
+  data,
+  emptyLabel,
+  height = 176,
+  icon,
+  iconColor,
+  loading,
+  loadingLabel,
+  series,
+  showLegend = true,
+  title,
+  valueFormatter = String
+}) {
+  if (loading) return /* @__PURE__ */ jsx(LoadingCard, { className, icon, iconColor, label: loadingLabel, title, variant: "bar" });
+  const maximum = chartMaximum(data, series);
+  return /* @__PURE__ */ jsxs(NCard, { className: cn("h-full min-w-0 overflow-hidden", className), icon, iconColor, title, children: [
+    showLegend ? /* @__PURE__ */ jsx(ChartLegend, { series }) : null,
+    !data.length || !series.length ? /* @__PURE__ */ jsx(EmptyChart, { children: emptyLabel }) : /* @__PURE__ */ jsxs("div", { "aria-label": accessibleLabel(title, ariaLabel), role: "img", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid min-w-0 items-end gap-0.5 border-b border-border/80 px-0.5 pt-3 sm:gap-2 sm:px-1",
+          style: { gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))`, height },
+          children: data.map((point) => /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-0 flex-col justify-end gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-end justify-center gap-px sm:gap-1", children: series.map((item, index) => {
+              const value = numberValue(point.values[item.id]);
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-label": `${String(item.label)}: ${String(valueFormatter(value))}`,
+                  className: "min-w-px w-full max-w-4 rounded-t-sm transition-opacity hover:opacity-80 focus-visible:opacity-80 sm:rounded-t-md",
+                  style: { backgroundColor: getNChartColor(index, item.color), height: value === 0 ? 3 : Math.max(8, Math.round(value / maximum * (height - 26))) },
+                  tabIndex: 0
+                },
+                item.id
+              );
+            }) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-center text-[8px] leading-none text-muted-foreground sm:text-[10px]", children: point.label })
+          ] }, point.id))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: chartSummary(data, series, valueFormatter) })
+    ] })
+  ] });
+}
+function lineCoordinate(index, count, value, maximum) {
+  return { x: count <= 1 ? 50 : 2 + index / (count - 1) * 96, y: 96 - value / maximum * 88 };
+}
+function smoothLinePath(points) {
+  if (!points.length) return "";
+  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
+  return points.slice(1).reduce((path, point, index) => {
+    const previous = points[index];
+    const midpointX = (previous.x + point.x) / 2;
+    return `${path} C ${midpointX} ${previous.y}, ${midpointX} ${point.y}, ${point.x} ${point.y}`;
+  }, `M ${points[0].x} ${points[0].y}`);
+}
+function NLineChart(props) {
+  const {
+    ariaLabel,
+    className,
+    data,
+    emptyLabel,
+    height = 176,
+    icon,
+    iconColor,
+    loading,
+    loadingLabel,
+    series,
+    showLegend = true,
+    title,
+    valueFormatter = String
+  } = props;
+  if (loading) return /* @__PURE__ */ jsx(LoadingCard, { className, icon, iconColor, label: loadingLabel, title, variant: "line" });
+  const maximum = chartMaximum(data, series);
+  return /* @__PURE__ */ jsxs(NCard, { className: cn("h-full min-w-0 overflow-hidden", className), icon, iconColor, title, children: [
+    showLegend ? /* @__PURE__ */ jsx(ChartLegend, { series }) : null,
+    !data.length || !series.length ? /* @__PURE__ */ jsx(EmptyChart, { children: emptyLabel }) : /* @__PURE__ */ jsxs("div", { "aria-label": accessibleLabel(title, ariaLabel), className: "min-w-0 overflow-hidden pb-1", role: "img", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative w-full min-w-0", style: { height }, children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "absolute inset-0 size-full", preserveAspectRatio: "none", viewBox: "0 0 100 100", children: series.map((item, index) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: smoothLinePath(data.map((point, pointIndex) => lineCoordinate(pointIndex, data.length, numberValue(point.values[item.id]), maximum))),
+          fill: "none",
+          stroke: getNChartColor(index, item.color),
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "3",
+          vectorEffect: "non-scaling-stroke"
+        },
+        item.id
+      )) }) }),
+      /* @__PURE__ */ jsx("div", { className: "grid px-1 pt-2", style: { gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))` }, children: data.map((point) => /* @__PURE__ */ jsx("span", { className: "truncate text-center text-[10px] text-muted-foreground", children: point.label }, point.id)) }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: chartSummary(data, series, valueFormatter) })
+    ] })
+  ] });
+}
+function chartSummary(data, series, formatter) {
+  return data.flatMap((point) => series.map((item) => `${String(point.label)} \xB7 ${String(item.label)}: ${String(formatter(numberValue(point.values[item.id])))}`)).join("; ");
+}
+function piePoint(angle, radius) {
+  const radians = angle * Math.PI / 180;
+  return { x: 50 + Math.cos(radians) * radius, y: 50 + Math.sin(radians) * radius };
+}
+function piePath(startAngle, endAngle) {
+  const radius = 47;
+  if (endAngle - startAngle >= 359.999) return `M 50 3 a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
+  const start = piePoint(startAngle, radius);
+  const end = piePoint(endAngle, radius);
+  return `M 50 50 L ${start.x} ${start.y} A ${radius} ${radius} 0 ${endAngle - startAngle > 180 ? 1 : 0} 1 ${end.x} ${end.y} Z`;
+}
+function NPieChart({
+  ariaLabel,
+  className,
+  emptyLabel,
+  icon,
+  iconColor,
+  items,
+  loading,
+  loadingLabel,
+  percentageFormatter,
+  showLegend = true,
+  size,
+  title,
+  valueFormatter = String
+}) {
+  if (loading) return /* @__PURE__ */ jsx(LoadingCard, { className, icon, iconColor, label: loadingLabel, title, variant: "pie" });
+  const normalized = items.map((item, index) => ({ ...item, value: numberValue(item.value), color: getNChartColor(index, item.color) }));
+  const total = normalized.reduce((sum, item) => sum + item.value, 0);
+  let angle = -90;
+  const slices = normalized.flatMap((item) => {
+    if (!item.value || !total) return [];
+    const start = angle;
+    angle += item.value / total * 360;
+    return [{ ...item, path: piePath(start, angle), ratio: item.value / total }];
+  });
+  const diameter = chartSize(size);
+  return /* @__PURE__ */ jsx(NCard, { className: cn("h-full min-w-0", className), icon, iconColor, title, children: !total ? /* @__PURE__ */ jsx(EmptyChart, { children: emptyLabel }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-4 sm:flex-col sm:gap-5", role: "img", "aria-label": accessibleLabel(title, ariaLabel), children: [
+    /* @__PURE__ */ jsx("svg", { className: "h-auto max-w-full shrink", style: { width: diameter, maxWidth: "100%" }, viewBox: "0 0 100 100", "aria-hidden": "true", children: slices.map((slice) => /* @__PURE__ */ jsx("path", { d: slice.path, fill: slice.color, stroke: "var(--card)", strokeWidth: "1" }, slice.id)) }),
+    showLegend ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 space-y-3 sm:w-full sm:flex-none", "data-slot": "chart-legend", children: normalized.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-2.5 shrink-0 rounded-full", style: { backgroundColor: item.color }, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+      ] }),
+      /* @__PURE__ */ jsxs("strong", { className: "shrink-0 tabular-nums", children: [
+        valueFormatter(item.value),
+        percentageFormatter ? /* @__PURE__ */ jsx("span", { className: "ms-1 font-normal text-muted-foreground", children: percentageFormatter(total ? item.value / total : 0) }) : null
+      ] })
+    ] }, item.id)) }) : null,
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: normalized.map((item) => `${String(item.label)}: ${String(valueFormatter(item.value))}`).join("; ") })
+  ] }) });
+}
+function NStatusBreakdown({
+  ariaLabel,
+  className,
+  emptyLabel,
+  icon,
+  iconColor,
+  items,
+  loading,
+  loadingLabel,
+  minimumVisiblePercent = 4,
+  title,
+  valueFormatter = String
+}) {
+  if (loading) return /* @__PURE__ */ jsx(LoadingCard, { className, icon, iconColor, label: loadingLabel, title, variant: "status" });
+  const maximum = Math.max(1, ...items.map((item) => numberValue(item.value)));
+  return /* @__PURE__ */ jsx(NCard, { className: cn("h-full", className), icon, iconColor, title, children: !items.length ? /* @__PURE__ */ jsx(EmptyChart, { children: emptyLabel }) : /* @__PURE__ */ jsx("div", { "aria-label": accessibleLabel(title, ariaLabel), className: "space-y-3", role: "img", children: items.map((item, index) => {
+    const value = numberValue(item.value);
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", item.className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.label }),
+        /* @__PURE__ */ jsx("strong", { className: "tabular-nums", children: valueFormatter(value) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-full", style: { backgroundColor: getNChartColor(index, item.color), width: `${Math.max(minimumVisiblePercent, value / maximum * 100)}%` } }) })
+    ] }, item.id);
+  }) }) });
+}
 function NDetailCard({
   title,
   description,
@@ -15278,4 +15613,4 @@ function NGridItem({
   return /* @__PURE__ */ jsx("div", { className: itemClassName, ...props, children });
 }
 
-export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, 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, DEFAULT_THEME_FILE_NAME, 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, Indicator2 as Indicator, Input, Label2 as 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, NDonutCard, 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, NThemeCustomizer, NUploader, NViewBody, NViewToggle, NajmDesignProvider, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, OtpInput, 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, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, normalizeThemeFileName, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, parseThemeFile, resolveHiddenBelowClass, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, stringifyThemeFile, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };
+export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, 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, DEFAULT_THEME_FILE_NAME, 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, Indicator2 as Indicator, Input, Label2 as Label, LangInput, MultiSelectInput, NAJM_COMPONENT_NAMES, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBarChart, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCardInfo, NCardMedia, NCardSection, NChartSkeleton, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NDonutCard, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, NIcon, NIndicator, NInspectorSheet, NLineChart, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPieChart, 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, NStatusBreakdown, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NUploader, NViewBody, NViewToggle, NajmDesignProvider, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, OtpInput, 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, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, normalizeThemeFileName, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, parseThemeFile, resolveHiddenBelowClass, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, stringifyThemeFile, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };

package/package.json

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