najm-kit 2.1.46 → 2.1.48

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
+import React__default, { createContext, useRef, useMemo, useContext, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
@@ -2168,7 +2168,7 @@ function NSheet({
       side,
       portalClassName: portal,
       className: cn(
-        "flex h-dvh max-h-dvh flex-col gap-0 overflow-hidden bg-sidebar p-0 text-foreground",
+        "flex h-dvh max-h-dvh flex-col gap-0 overflow-hidden bg-background p-0 text-foreground",
         contentClassName,
         classNames?.content
       ),
@@ -7274,7 +7274,7 @@ function NSkeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("animate-pulse rounded-md bg-accent", className),
+      className: cn("animate-pulse rounded-md bg-accent motion-reduce:animate-none", className),
       "aria-hidden": "true",
       ...props
     }
@@ -9296,6 +9296,149 @@ var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true,
     showPassword ? /* @__PURE__ */ jsx(Eye, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(false) }) : /* @__PURE__ */ jsx(EyeOff, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(true) })
   ] });
 };
+function normalizeCode(value, numeric, length) {
+  const normalized = numeric ? value.replace(/\D/g, "") : value.replace(/\s/g, "");
+  return normalized.slice(0, length);
+}
+var OtpInput = React__default.forwardRef(
+  ({
+    value,
+    onChange,
+    length = 6,
+    numeric = true,
+    ariaLabel = "One-time code",
+    digitAriaLabel,
+    autoFocus = false,
+    autoComplete = "one-time-code",
+    disabled = false,
+    readOnly = false,
+    status = "default",
+    bordered = true,
+    className,
+    inputClassName,
+    onComplete
+  }, forwardedRef) => {
+    const refs = useRef([]);
+    const code = normalizeCode(value ?? "", numeric, length);
+    const cells = useMemo(
+      () => Array.from({ length }, (_, index) => code[index] ?? ""),
+      [code, length]
+    );
+    const setRef = (index, node) => {
+      refs.current[index] = node;
+      if (index !== 0 || !forwardedRef) return;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else forwardedRef.current = node;
+    };
+    const commit = (next) => {
+      const normalized = normalizeCode(next, numeric, length);
+      onChange(normalized);
+      if (normalized.length === length) onComplete?.(normalized);
+      return normalized;
+    };
+    const focusCell = (index) => {
+      const target = refs.current[Math.max(0, Math.min(index, length - 1))];
+      target?.focus();
+      target?.select();
+    };
+    const replaceAt = (index, rawValue) => {
+      const incoming = normalizeCode(rawValue, numeric, length);
+      if (!incoming) {
+        const next2 = `${code.slice(0, index)}${code.slice(index + 1)}`;
+        commit(next2);
+        return;
+      }
+      const next = `${code.slice(0, index)}${incoming}${code.slice(index + incoming.length)}`;
+      const normalized = commit(next);
+      focusCell(Math.min(index + incoming.length, Math.max(normalized.length, 1), length - 1));
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": ariaLabel,
+        "aria-invalid": status === "error" || void 0,
+        "data-slot": "otp-input",
+        "data-status": status,
+        dir: "ltr",
+        className: cn("flex w-full items-center justify-center gap-1.5 sm:gap-2", className),
+        onPaste: (event) => {
+          if (disabled || readOnly) return;
+          const pasted = normalizeCode(event.clipboardData.getData("text"), numeric, length);
+          if (!pasted) return;
+          event.preventDefault();
+          const normalized = commit(pasted);
+          focusCell(Math.max(0, normalized.length - 1));
+        },
+        children: cells.map((character, index) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: (node) => setRef(index, node),
+            "data-slot": "otp-cell",
+            type: "text",
+            inputMode: numeric ? "numeric" : "text",
+            pattern: numeric ? "[0-9]*" : void 0,
+            autoComplete: index === 0 ? autoComplete : "off",
+            autoFocus: autoFocus && index === 0,
+            maxLength: length,
+            value: character,
+            disabled,
+            readOnly,
+            "aria-label": digitAriaLabel?.(index + 1, length) ?? `${ariaLabel} ${index + 1} of ${length}`,
+            className: cn(
+              "h-11 min-w-0 flex-1 rounded-md bg-card text-center text-lg font-semibold tabular-nums text-foreground outline-none transition-colors sm:h-12 sm:max-w-12",
+              bordered !== false && "border border-input focus:border-ring focus:ring-2 focus:ring-ring/20",
+              status === "error" && "border-destructive focus:border-destructive focus:ring-destructive/20",
+              disabled && "cursor-not-allowed opacity-50",
+              inputClassName
+            ),
+            onFocus: (event) => event.currentTarget.select(),
+            onChange: (event) => {
+              if (disabled || readOnly) return;
+              const rawValue = event.currentTarget.value;
+              if (numeric && rawValue && !/\d/.test(rawValue)) {
+                event.currentTarget.value = character;
+                return;
+              }
+              replaceAt(index, rawValue);
+            },
+            onKeyDown: (event) => {
+              if (disabled || readOnly) return;
+              if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                focusCell(index - 1);
+              } else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                focusCell(index + 1);
+              } else if (event.key === "Home") {
+                event.preventDefault();
+                focusCell(0);
+              } else if (event.key === "End") {
+                event.preventDefault();
+                focusCell(length - 1);
+              } else if (event.key === "Backspace") {
+                event.preventDefault();
+                if (character) {
+                  commit(`${code.slice(0, index)}${code.slice(index + 1)}`);
+                  focusCell(index);
+                } else if (index > 0) {
+                  commit(`${code.slice(0, index - 1)}${code.slice(index)}`);
+                  focusCell(index - 1);
+                }
+              } else if (event.key === "Delete" && character) {
+                event.preventDefault();
+                commit(`${code.slice(0, index)}${code.slice(index + 1)}`);
+                focusCell(index);
+              }
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+OtpInput.displayName = "OtpInput";
 var DEFAULT_ROWS = 3;
 var MIN_ROWS = 2;
 var REM_PER_ROW = 1.5;
@@ -10778,6 +10921,7 @@ var Inputs = {
   text: TextInput,
   number: NumberInput,
   password: PasswordInput,
+  otp: OtpInput,
   textarea: TextAreaInput,
   date: DateInput,
   file: FileInput,
@@ -11485,7 +11629,14 @@ var createTableStore = () => {
     addButtonText: "",
     pageSizeOptions: [10, 20, 30, 40, 50],
     calculatedPageSize: 10,
+    skeletonRowCount: 6,
     maxHeight: null,
+    bodyWidth: 0,
+    bodyHeight: 0,
+    tableHeaderHeight: 48,
+    cardColumnCount: 1,
+    cardRowHeight: 0,
+    cardGap: 12,
     // JSON mode
     jsonValue: void 0,
     jsonColors: null,
@@ -11555,6 +11706,8 @@ var createTableStore = () => {
     // Responsive cards
     responsiveCards: true,
     isMobile: false,
+    effectiveViewMode: "table",
+    cardPagination: { mode: "paged" },
     // Empty states
     isEmpty: void 0,
     isFilteredEmpty: false,
@@ -11630,6 +11783,8 @@ function filterResponsiveColumns(columns) {
 // src/components/table/hooks.ts
 var ROW_HEIGHT = 56;
 var DEFAULT_TABLE_HEADER_HEIGHT = 48;
+var DEFAULT_CARD_HEIGHT = 176;
+var DEFAULT_CARD_GAP = 12;
 var ROOT_SECTION_GAP_COUNT = 2;
 function useStoreSync(props) {
   const storeRef = useRef(null);
@@ -11710,23 +11865,43 @@ function calculateDynamicPageSize(input) {
   if (availableRowsHeight <= 0) return 1;
   return Math.max(1, Math.floor(availableRowsHeight / rowHeight));
 }
-function useDynamicPageSize(containerRef) {
+function calculateCardSkeletonCount(input) {
+  const columns = Math.max(1, Math.floor(input.columnCount));
+  const cardHeight = Math.max(1, input.cardHeight ?? DEFAULT_CARD_HEIGHT);
+  const gap = Math.max(0, input.gap ?? DEFAULT_CARD_GAP);
+  if (input.bodyHeight <= 0) return columns;
+  const rows = Math.max(1, Math.ceil((input.bodyHeight + gap) / (cardHeight + gap)));
+  return rows * columns;
+}
+function fallbackCardColumns(width) {
+  if (width >= 1280) return 4;
+  if (width >= 1024) return 3;
+  if (width >= 640) return 2;
+  return 1;
+}
+function useDynamicPageSize(containerRef, effectiveViewMode) {
   const dynamicHeight = useTableStore.use.dynamicHeight();
-  const viewMode = useTableStore.use.viewMode();
+  const viewMode = useTableStore.use.effectiveViewMode();
   const manualPagination = useTableStore.use.manualPagination();
   const isLoading = useTableStore.use.isLoading();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
   const isFilteredEmpty = useTableStore.use.isFilteredEmpty();
   const syncWithProps = useTableStore.use.syncWithProps();
+  const lastMeasurementRef = useRef("");
   useLayoutEffect(() => {
-    if (!dynamicHeight || !containerRef.current || viewMode !== "table" || manualPagination) return;
+    if (!dynamicHeight || !containerRef.current) return;
     const calculatePageSize = () => {
       const container2 = containerRef.current;
       if (!container2) return;
       const bodyEl = container2.querySelector("[data-ntable-body]");
       const tableHeaderEl = container2.querySelector("[data-ntable-table-header]");
+      const loadingHeaderEl = container2.querySelector("[data-ntable-loading-header]");
+      const cardsGridEl = container2.querySelector(
+        "[data-ntable-loading-cards-grid], [data-ntable-cards-grid]"
+      );
       let bodyHeight = bodyEl?.clientHeight ?? 0;
+      const bodyWidth = bodyEl?.clientWidth ?? container2.clientWidth ?? 0;
       if (!bodyHeight) {
         const rootHeight = container2.clientHeight;
         const headerHeight = container2.querySelector("[data-ntable-header]")?.offsetHeight ?? 0;
@@ -11735,10 +11910,36 @@ function useDynamicPageSize(containerRef) {
         const gap = Number.parseFloat(rootStyles.rowGap || rootStyles.gap || "0") || 0;
         bodyHeight = rootHeight - headerHeight - paginationHeight - gap * ROOT_SECTION_GAP_COUNT;
       }
+      if (loadingHeaderEl && bodyEl) {
+        const bodyStyles = window.getComputedStyle(bodyEl);
+        const bodyGap = Number.parseFloat(bodyStyles.rowGap || bodyStyles.gap || "0") || 0;
+        bodyHeight = Math.max(0, bodyHeight - loadingHeaderEl.offsetHeight - bodyGap);
+      }
       const tableHeaderHeight = tableHeaderEl?.offsetHeight ?? DEFAULT_TABLE_HEADER_HEIGHT;
       const newPageSize = calculateDynamicPageSize({ bodyHeight, tableHeaderHeight });
       const calculatedMaxHeight = tableHeaderHeight + newPageSize * ROW_HEIGHT;
-      syncWithProps({ calculatedPageSize: newPageSize, maxHeight: calculatedMaxHeight });
+      const gridStyles = cardsGridEl ? window.getComputedStyle(cardsGridEl) : null;
+      const gridTemplateColumns = gridStyles?.gridTemplateColumns;
+      const gridColumns = gridTemplateColumns && gridTemplateColumns !== "none" ? gridTemplateColumns.split(" ").filter(Boolean).length : 0;
+      const cardColumnCount = gridColumns || fallbackCardColumns(bodyWidth);
+      const cardGap = Number.parseFloat(gridStyles?.rowGap || gridStyles?.gap || "") || DEFAULT_CARD_GAP;
+      const firstCard = cardsGridEl?.querySelector("[data-ntable-loading-card], [data-row]");
+      const cardRowHeight = firstCard?.offsetHeight || firstCard?.getBoundingClientRect().height || DEFAULT_CARD_HEIGHT;
+      const updates = {
+        ...!manualPagination ? { calculatedPageSize: newPageSize, maxHeight: calculatedMaxHeight } : {},
+        skeletonRowCount: newPageSize,
+        bodyWidth,
+        bodyHeight,
+        tableHeaderHeight,
+        cardColumnCount,
+        cardRowHeight,
+        cardGap
+      };
+      const fingerprint = JSON.stringify(updates);
+      if (fingerprint !== lastMeasurementRef.current) {
+        lastMeasurementRef.current = fingerprint;
+        syncWithProps(updates);
+      }
     };
     calculatePageSize();
     const resizeObserver = new ResizeObserver(calculatePageSize);
@@ -11747,11 +11948,14 @@ function useDynamicPageSize(containerRef) {
     container.querySelectorAll(
       "[data-ntable-header], [data-ntable-body], [data-ntable-pagination], [data-ntable-table-header]"
     ).forEach((el) => resizeObserver.observe(el));
+    container.querySelectorAll(
+      "[data-ntable-loading-header], [data-ntable-loading-cards-grid], [data-ntable-loading-card], [data-ntable-cards-grid]"
+    ).forEach((el) => resizeObserver.observe(el));
     if (container.parentElement) resizeObserver.observe(container.parentElement);
     return () => resizeObserver.disconnect();
-  }, [dynamicHeight, viewMode, containerRef, syncWithProps, manualPagination, isLoading, error, hasNoData, isFilteredEmpty]);
+  }, [dynamicHeight, effectiveViewMode, viewMode, containerRef, syncWithProps, manualPagination, isLoading, error, hasNoData, isFilteredEmpty]);
 }
-function useTable() {
+function useTable(effectiveViewModeOverride) {
   const [sorting, setSorting] = useState([]);
   const [columnFilters, setColumnFilters] = useState([]);
   const [columnVisibility, setColumnVisibility] = useState({});
@@ -11768,6 +11972,8 @@ function useTable() {
   const CardComponent = useTableStore.use.CardComponent();
   const dynamicHeight = useTableStore.use.dynamicHeight();
   const viewMode = useTableStore.use.viewMode();
+  const effectiveViewMode = useTableStore.use.effectiveViewMode();
+  const cardPagination = useTableStore.use.cardPagination();
   const calculatedPageSize = useTableStore.use.calculatedPageSize();
   const syncWithProps = useTableStore.use.syncWithProps();
   const onStateChange = useTableStore.use.onStateChange();
@@ -11858,6 +12064,8 @@ function useTable() {
     notifyStateChange({ sorting, columnFilters, columnVisibility, rowSelection: storeRowSelection, globalFilter });
   }, [storePagination, storeRowSelection, setPagination, sorting, columnFilters, columnVisibility, globalFilter, notifyStateChange]);
   const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
+  const renderedMode = effectiveViewModeOverride ?? effectiveViewMode ?? viewMode;
+  const renderAllSuppliedRows = renderedMode === "cards" && cardPagination.mode !== "paged";
   const tableConfig = {
     data,
     columns: finalColumns,
@@ -11874,7 +12082,7 @@ function useTable() {
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    manualPagination,
+    manualPagination: manualPagination || renderAllSuppliedRows,
     pageCount,
     rowCount
   };
@@ -11888,9 +12096,11 @@ function useTable() {
   }, [table]);
   useLayoutEffect(() => {
     if (manualPagination) return;
-    if (dynamicHeight && viewMode === "table") table.setPageSize(calculatedPageSize);
-    if (viewMode === "cards") table.setPageSize(data.length || 9999);
-  }, [calculatedPageSize, dynamicHeight, viewMode, table, data.length, manualPagination]);
+    if (dynamicHeight && renderedMode === "table") table.setPageSize(calculatedPageSize);
+    if (viewMode === "cards" && cardPagination.mode === "paged") {
+      table.setPageSize(data.length || 9999);
+    }
+  }, [calculatedPageSize, dynamicHeight, renderedMode, viewMode, cardPagination.mode, table, data.length, manualPagination]);
   return { table, finalColumns, sorting, setSorting, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, globalFilter, setGlobalFilter };
 }
 function useTableKeyboard(options = {}) {
@@ -11984,6 +12194,26 @@ function resolveTableColor(value, fallback) {
   }
   return color;
 }
+
+// src/components/table/tableSurface.ts
+function useTableSurfaceAppearance(bordered, borderColor) {
+  const recipe = useNajmComponentStyle("table");
+  const recipeRadius = resolveRadiusValue(recipe?.radius);
+  const resolvedBorderColor = resolveTableColor(borderColor, DEFAULT_TABLE_BORDER_COLOR);
+  const style = recipeRadius || bordered !== false && (recipe?.borderWidth || borderColor) ? {
+    ...recipeRadius ? { borderRadius: recipeRadius } : {},
+    ...bordered !== false && recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {},
+    ...bordered !== false && borderColor ? { borderColor: resolvedBorderColor } : {}
+  } : void 0;
+  return {
+    bordered,
+    style,
+    className: cn(
+      "bg-card",
+      bordered === true ? surfaceBorderClasses(true) : "border-0 shadow-sm"
+    )
+  };
+}
 var ROW_CONTEXT_HANDLED = "__ntableRowContextHandled";
 function EditableCell({ cell, onCellEdit }) {
   const columnDef = cell.column.columnDef;
@@ -12038,12 +12268,6 @@ function EditableCell({ cell, onCellEdit }) {
   ] });
 }
 function NTableContent({ effectiveMode }) {
-  const recipe = useNajmComponentStyle("table");
-  const recipeRadius = resolveRadiusValue(recipe?.radius);
-  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
-    ...recipeRadius ? { borderRadius: recipeRadius } : {},
-    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
-  } : void 0;
   const table = useTableStore.use.table();
   const storeIsTableView = useTableStore.use.isTableView();
   const columns = useTableStore.use.columns();
@@ -12060,10 +12284,6 @@ function NTableContent({ effectiveMode }) {
     backgroundColor: resolvedHeaderColor,
     color: resolvedHeaderTextColor
   };
-  const contentStyle = recipeStyle || tableBorderColor ? {
-    ...recipeStyle ?? {},
-    ...tableBorderColor ? { borderColor: resolvedBorderColor } : {}
-  } : void 0;
   const rowBorderStyle = tableBorderColor ? { borderColor: resolvedBorderColor } : void 0;
   const onRowClick = useTableStore.use.onRowClick();
   const onRowContextMenu = useTableStore.use.onRowContextMenu();
@@ -12076,6 +12296,7 @@ function NTableContent({ effectiveMode }) {
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
+  const surface = useTableSurfaceAppearance(bordered, tableBorderColor);
   const showCheckbox = useTableStore.use.showCheckbox();
   const selectedRowId = useTableStore.use.selectedRowId();
   const renderSubRow = useTableStore.use.renderSubRow();
@@ -12104,11 +12325,11 @@ function NTableContent({ effectiveMode }) {
       axis: "both",
       "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       className: cn(
-        "min-h-0 flex-1 overflow-hidden rounded-md bg-card",
-        bordered === true ? surfaceBorderClasses(true) : "shadow-sm",
+        "min-h-0 flex-1 overflow-hidden rounded-md",
+        surface.className,
         classNames?.content
       ),
-      style: contentStyle,
+      style: surface.style,
       onContextMenu: handleBackgroundContextMenu,
       children: /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", headerClassName, bordered === true && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { style: rowBorderStyle, className: cn("hover:bg-transparent", bordered === true && "border-border"), children: [
@@ -12217,13 +12438,8 @@ function NTableContent({ effectiveMode }) {
     }
   );
 }
-function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered }) {
-  const recipe = useNajmComponentStyle("table");
-  const recipeRadius = resolveRadiusValue(recipe?.radius);
-  const recipeStyle = recipeRadius || recipe?.borderWidth ? {
-    ...recipeRadius ? { borderRadius: recipeRadius } : {},
-    ...recipe?.borderWidth ? { borderWidth: recipe.borderWidth } : {}
-  } : void 0;
+function NDataCardShell({ row, onClick, onContextMenu, actions, children, className, showCheckbox = true, selectedRowId, openRowMenu, menuButton, bordered, borderColor }) {
+  const surface = useTableSurfaceAppearance(bordered, borderColor);
   const canExpand = row.getCanExpand();
   const isExpanded = canExpand && row.getIsExpanded();
   const isSelected = row.getIsSelected();
@@ -12238,10 +12454,10 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
       "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       onClick,
       onContextMenu,
-      style: recipeStyle,
+      style: surface.style,
       className: cn(
         "relative group w-full rounded-lg bg-card text-card-foreground overflow-hidden",
-        surfaceBorderClasses(bordered),
+        surface.className,
         isActive && (bordered ? "border-primary" : "ring-2 ring-primary ring-offset-1 ring-offset-background"),
         onClick && "cursor-pointer",
         className
@@ -12258,7 +12474,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
             className: "h-4 w-4"
           }
         ) }),
-        useMenuButton ? /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 h-auto z-10 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsx(
+        useMenuButton ? /* @__PURE__ */ jsx("div", { "data-ntable-card-action": true, className: "ntable-card-action absolute end-2 top-2 z-10 h-auto transition-opacity duration-200", children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -12267,10 +12483,10 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
               e.stopPropagation();
               openRowMenu(e, row.original);
             },
-            className: "flex h-7 w-7 p-0 rounded-md cursor-pointer justify-center items-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+            className: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
           }
-        ) }) : actions && (actions.onView || actions.onEdit || actions.onDelete) ? /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 h-auto z-10 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        ) }) : actions && (actions.onView || actions.onEdit || actions.onDelete) ? /* @__PURE__ */ jsx("div", { "data-ntable-card-action": true, className: "ntable-card-action absolute end-2 top-2 z-10 h-auto transition-opacity duration-200", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
           /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -12375,6 +12591,7 @@ function NTableCards({ effectiveMode }) {
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
+  const borderColor = useTableStore.use.borderColor();
   const renderSubRow = useTableStore.use.renderSubRow();
   const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
   const handleContainerContextMenu = useCallback((e) => {
@@ -12412,7 +12629,7 @@ function NTableCards({ effectiveMode }) {
   const defaultContainerClass = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3";
   const containerClass = classNames?.cards ?? defaultContainerClass;
   const actions = !menuButton && (onView || onEdit || onDelete) ? { onView, onEdit, onDelete } : void 0;
-  return /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: cn(containerClass), onContextMenu: handleContainerContextMenu, children: rows.map((row) => {
+  return /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { "data-ntable-cards-grid": true, className: cn(containerClass), onContextMenu: handleContainerContextMenu, children: rows.map((row) => {
     const noShell = Boolean(row.original?.__smsNoShell);
     const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
     const canExpand = hasExpansion && row.getCanExpand();
@@ -12442,7 +12659,8 @@ function NTableCards({ effectiveMode }) {
                   e.stopPropagation();
                   openRowMenu(e, row.original);
                 },
-                className: "absolute top-2 right-2 z-10 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-all duration-200 hover:bg-muted/50 hover:text-foreground group-hover:opacity-100 focus:opacity-100 focus-visible:opacity-100",
+                "data-ntable-card-action": true,
+                className: "ntable-card-action absolute end-2 top-2 z-10 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground transition-all duration-200 hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                 children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
               }
             ),
@@ -12478,6 +12696,7 @@ function NTableCards({ effectiveMode }) {
         openRowMenu,
         menuButton,
         bordered,
+        borderColor,
         className: rowClassName || void 0,
         children: /* @__PURE__ */ jsx(
           CardComponent,
@@ -12495,13 +12714,108 @@ function NTableCards({ effectiveMode }) {
     );
   }) }) });
 }
+function CardLoadMorePagination({
+  config,
+  rowCount,
+  bordered,
+  className
+}) {
+  const [internalPending, setInternalPending] = React__default.useState(false);
+  const [internalError, setInternalError] = React__default.useState(null);
+  const [announcement, setAnnouncement] = React__default.useState("");
+  const buttonRef = React__default.useRef(null);
+  const pendingRef = React__default.useRef(false);
+  const restoreFocusRef = React__default.useRef(false);
+  const previousRowCountRef = React__default.useRef(rowCount);
+  const errorId = React__default.useId();
+  const pending = Boolean(config.loadingMore || internalPending);
+  const error = config.loadMoreError ?? internalError;
+  React__default.useEffect(() => {
+    const previous = previousRowCountRef.current;
+    if (rowCount > previous) {
+      const appended = rowCount - previous;
+      setAnnouncement(
+        config.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
+      );
+    }
+    previousRowCountRef.current = rowCount;
+  }, [config.itemsLoadedLabel, rowCount]);
+  React__default.useEffect(() => {
+    if (pending || !restoreFocusRef.current) return;
+    restoreFocusRef.current = false;
+    const frame = requestAnimationFrame(() => buttonRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [pending]);
+  const loadMore = async () => {
+    if (pendingRef.current || pending || !config.hasNextPage && !error) return;
+    pendingRef.current = true;
+    restoreFocusRef.current = document.activeElement === buttonRef.current;
+    setInternalPending(true);
+    setInternalError(null);
+    const loadingAnnouncement = config.loadingMoreLabel ?? "Loading more items...";
+    setAnnouncement(loadingAnnouncement);
+    try {
+      await config.onLoadMore();
+    } catch {
+      setInternalError(config.loadMoreErrorLabel ?? "Couldn't load more items.");
+      setAnnouncement("");
+    } finally {
+      pendingRef.current = false;
+      setInternalPending(false);
+      setAnnouncement((current) => current === loadingAnnouncement ? "" : current);
+    }
+  };
+  if (!config.hasNextPage && !pending && !error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-ntable-load-more-end": true,
+        role: "status",
+        "aria-live": "polite",
+        className: cn("py-2 text-center text-sm text-muted-foreground", className),
+        children: config.endLabel ?? "No more items."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-ntable-load-more": true,
+      className: cn("flex min-w-0 flex-col items-center gap-2 py-2", className),
+      children: [
+        error ? /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: "text-center text-sm text-destructive", children: error === true ? config.loadMoreErrorLabel ?? "Couldn't load more items." : error }) : null,
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            ref: buttonRef,
+            type: "button",
+            bordered,
+            variant: "outline",
+            autoLoading: false,
+            disabled: pending,
+            "aria-describedby": error ? errorId : void 0,
+            "aria-busy": pending ? "true" : void 0,
+            onClick: loadMore,
+            children: [
+              pending ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "h-4 w-4 animate-spin motion-reduce:animate-none" }) : null,
+              pending ? config.loadingMoreLabel ?? "Loading more..." : error ? config.retryLabel ?? "Retry" : config.loadMoreLabel ?? "Load more"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+      ]
+    }
+  );
+}
 function NTablePagination() {
   const table = useTableStore.use.table();
   const showPagination = useTableStore.use.showPagination();
   const showContent = useTableStore.use.showContent();
   const pageSizeOptions = useTableStore.use.pageSizeOptions();
   const classNames = useTableStore.use.classNames();
-  const viewMode = useTableStore.use.viewMode();
+  const effectiveViewMode = useTableStore.use.effectiveViewMode();
+  const cardPagination = useTableStore.use.cardPagination();
+  const data = useTableStore.use.data();
   const pagination = useTableStore.use.pagination();
   const manualPagination = useTableStore.use.manualPagination();
   const pageCount = useTableStore.use.pageCount();
@@ -12509,7 +12823,19 @@ function NTablePagination() {
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
-  if (!table || !showContent || !showPagination || viewMode === "json" || viewMode === "files") return null;
+  if (!table || !showContent || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
+  if (effectiveViewMode === "cards" && cardPagination.mode === "all") return null;
+  if (effectiveViewMode === "cards" && cardPagination.mode === "load-more") {
+    return /* @__PURE__ */ jsx(
+      CardLoadMorePagination,
+      {
+        config: cardPagination,
+        rowCount: data.length,
+        bordered,
+        className: classNames?.pagination
+      }
+    );
+  }
   const filteredRows = table.getFilteredRowModel().rows;
   const selectedRows = table.getFilteredSelectedRowModel().rows;
   const { pageIndex, pageSize } = table.getState().pagination;
@@ -12947,7 +13273,7 @@ function NTableHeaderSkeleton() {
     }
   );
 }
-function NTableLoadingSkeleton({ rows = DEFAULT_ROWS2 }) {
+function NTableLoadingSkeleton({ rows }) {
   const rawColumns = useTableStore.use.columns();
   const responsiveColumns = React__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
   const columns = responsiveColumns;
@@ -12955,24 +13281,34 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS2 }) {
   const headerClassName = useTableStore.use.headerClassName();
   const classNames = useTableStore.use.classNames();
   const dynamicHeight = useTableStore.use.dynamicHeight();
+  const bordered = useTableStore.use.bordered();
+  const borderColor = useTableStore.use.borderColor();
+  const surface = useTableSurfaceAppearance(bordered, borderColor);
+  const bodyHeight = useTableStore.use.bodyHeight();
+  const skeletonRowCount = useTableStore.use.skeletonRowCount();
   const renderSubRow = useTableStore.use.renderSubRow();
   const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
   const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
   const loadingText = useTableStore.use.loadingText();
+  const rowCount = rows ?? (dynamicHeight && bodyHeight > 0 ? skeletonRowCount : DEFAULT_ROWS2);
   const renderHeaderLabel = (header) => typeof header === "string" ? header : null;
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
     /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
     /* @__PURE__ */ jsxs(
-      Card,
+      "div",
       {
         "data-testid": "ntable-loading-skeleton",
+        "data-ntable-loading-row-count": rowCount,
+        "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
         "aria-busy": "true",
         "aria-label": loadingText,
-        className: cn("rounded-md p-0 border", dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
+        role: "status",
+        style: surface.style,
+        className: cn("min-h-0 flex-1 rounded-md p-0", surface.className, dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
         children: [
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-          /* @__PURE__ */ jsx("div", { className: dynamicHeight ? "najm-overlay-scroll" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
-            /* @__PURE__ */ jsx(TableHeader, { className: cn(headerClassName, dynamicHeight && "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: dynamicHeight ? "najm-overlay-scroll h-full" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
+            /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn(headerClassName, "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
               showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
               hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
               columns.map((col, i) => /* @__PURE__ */ jsx(
@@ -12985,7 +13321,7 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS2 }) {
                 col?.id ?? col?.accessorKey ?? i
               ))
             ] }) }),
-            /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
               showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
               hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
               columns.map((col, c) => /* @__PURE__ */ jsx(
@@ -13016,74 +13352,105 @@ function NTableCardsLoadingSkeleton({ rows }) {
   );
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
-  const calculatedPageSize = useTableStore.use.calculatedPageSize();
-  const pagination = useTableStore.use.pagination();
-  const cardCount = rows ?? Math.max(1, calculatedPageSize || pagination?.pageSize || DEFAULT_CARD_COUNT);
+  const borderColor = useTableStore.use.borderColor();
+  const surface = useTableSurfaceAppearance(bordered, borderColor);
+  const dynamicHeight = useTableStore.use.dynamicHeight();
+  const bodyHeight = useTableStore.use.bodyHeight();
+  const cardColumnCount = useTableStore.use.cardColumnCount();
+  const cardRowHeight = useTableStore.use.cardRowHeight();
+  const cardGap = useTableStore.use.cardGap();
+  const loadingText = useTableStore.use.loadingText();
+  const cardCount = rows ?? (dynamicHeight && bodyHeight > 0 ? calculateCardSkeletonCount({
+    bodyHeight,
+    columnCount: cardColumnCount,
+    cardHeight: cardRowHeight,
+    gap: cardGap
+  }) : DEFAULT_CARD_COUNT);
+  const defaultContainerClass = "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
+  const containerClass = classNames?.cards ?? defaultContainerClass;
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
     hasHeaderSkeleton && /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
-    /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsxs(
+      NajmScroll,
       {
-        "data-testid": "ntable-cards-loading-skeleton",
+        axis: "y",
         "aria-busy": "true",
-        className: cn("grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", classNames?.cards),
-        children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsx(
-          Card,
-          {
-            className: cn("rounded-lg bg-card p-3 shadow-none sm:p-4", surfaceBorderClasses(bordered)),
-            children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-ntable-loading-card-layout": "responsive-avatar",
-                className: "grid grid-cols-[80px_minmax(0,1fr)] gap-3 sm:grid-cols-[72px_minmax(0,1fr)]",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "col-start-1 row-start-1 flex items-start justify-center sm:justify-start", children: /* @__PURE__ */ jsx(
-                    NSkeleton,
-                    {
-                      "data-ntable-loading-card-avatar": true,
-                      className: "size-20 shrink-0 rounded-full sm:size-16"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxs("div", { className: "col-start-2 row-start-1 flex min-w-0 items-start justify-between gap-3", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
-                      /* @__PURE__ */ jsx(NSkeleton, { className: "h-5 w-36 max-w-full" }),
-                      /* @__PURE__ */ jsx(NSkeleton, { className: "hidden h-3 w-16 sm:block" })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      NSkeleton,
-                      {
-                        "data-ntable-loading-card-status": true,
-                        className: "hidden h-6 w-14 shrink-0 rounded-full sm:block"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
+        "aria-label": loadingText,
+        role: "status",
+        className: "min-h-0 flex-1 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "ntable-cards-loading-skeleton",
+              "data-ntable-loading-cards-grid": true,
+              "data-ntable-loading-card-count": cardCount,
+              "aria-hidden": "true",
+              className: cn(containerClass),
+              children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-ntable-loading-card": true,
+                  "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
+                  style: surface.style,
+                  className: cn("rounded-lg p-3 sm:p-4", surface.className),
+                  children: /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      "data-ntable-loading-card-details": true,
-                      className: "col-start-2 row-start-2 space-y-1 sm:col-span-full sm:col-start-1 sm:space-y-2 sm:rounded-lg sm:bg-muted/50 sm:p-3",
-                      children: Array.from({ length: 3 }).map((_2, detailIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
-                        /* @__PURE__ */ jsx(NSkeleton, { className: "size-3.5 shrink-0 rounded-sm sm:size-4" }),
-                        /* @__PURE__ */ jsx(
+                      "data-ntable-loading-card-layout": "responsive-avatar",
+                      className: "grid grid-cols-[80px_minmax(0,1fr)] gap-3 sm:grid-cols-[72px_minmax(0,1fr)]",
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "col-start-1 row-start-1 flex items-start justify-center sm:justify-start", children: /* @__PURE__ */ jsx(
                           NSkeleton,
                           {
-                            className: cn(
-                              "h-3 max-w-full sm:h-4",
-                              detailIndex === 0 ? "w-full" : detailIndex === 1 ? "w-4/5" : "w-3/4"
-                            )
+                            "data-ntable-loading-card-avatar": true,
+                            className: "size-20 shrink-0 rounded-full sm:size-16"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs("div", { className: "col-start-2 row-start-1 flex min-w-0 items-start justify-between gap-3", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+                            /* @__PURE__ */ jsx(NSkeleton, { className: "h-5 w-36 max-w-full" }),
+                            /* @__PURE__ */ jsx(NSkeleton, { className: "hidden h-3 w-16 sm:block" })
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            NSkeleton,
+                            {
+                              "data-ntable-loading-card-status": true,
+                              className: "hidden h-6 w-14 shrink-0 rounded-full sm:block"
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "data-ntable-loading-card-details": true,
+                            className: "col-start-2 row-start-2 space-y-1 sm:col-span-full sm:col-start-1 sm:space-y-2 sm:rounded-lg sm:bg-muted/50 sm:p-3",
+                            children: Array.from({ length: 3 }).map((_2, detailIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+                              /* @__PURE__ */ jsx(NSkeleton, { className: "size-3.5 shrink-0 rounded-sm sm:size-4" }),
+                              /* @__PURE__ */ jsx(
+                                NSkeleton,
+                                {
+                                  className: cn(
+                                    "h-3 max-w-full sm:h-4",
+                                    detailIndex === 0 ? "w-full" : detailIndex === 1 ? "w-4/5" : "w-3/4"
+                                  )
+                                }
+                              )
+                            ] }, detailIndex))
                           }
                         )
-                      ] }, detailIndex))
+                      ]
                     }
                   )
-                ]
-              }
-            )
-          },
-          index
-        ))
+                },
+                index
+              ))
+            }
+          )
+        ]
       }
-    ) })
+    )
   ] });
 }
 function TableStateSlot({ children }) {
@@ -13134,7 +13501,7 @@ function TableLayout(props) {
   const responsiveCards = useTableStore.use.responsiveCards();
   const isCustomMode = useTableStore.use.isCustomMode();
   const renderCustomMode = useTableStore.use.renderCustomMode();
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 639px)").matches : false);
   useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia("(max-width: 639px)");
@@ -13143,18 +13510,22 @@ function TableLayout(props) {
     mql.addEventListener("change", handler2);
     return () => mql.removeEventListener("change", handler2);
   }, []);
-  useDynamicPageSize(containerRef);
-  useTable();
-  useTableKeyboard({
-    scopeRef: containerRef,
-    contextMenuClose: props.contextMenuClose,
-    contextMenuOpen: props.contextMenuOpen
-  });
   const effectiveMode = (() => {
     if (viewMode === "json") return "json";
     if (isMobile && responsiveCards && CardComponent) return "cards";
     return viewMode;
   })();
+  const syncWithProps = useTableStore.use.syncWithProps();
+  useLayoutEffect(() => {
+    syncWithProps({ isMobile, effectiveViewMode: effectiveMode });
+  }, [effectiveMode, isMobile, syncWithProps]);
+  useDynamicPageSize(containerRef, effectiveMode);
+  useTable(effectiveMode);
+  useTableKeyboard({
+    scopeRef: containerRef,
+    contextMenuClose: props.contextMenuClose,
+    contextMenuOpen: props.contextMenuOpen
+  });
   const showFilteredEmpty = isFilteredEmpty && !isLoading && !error;
   const showEmpty = hasNoData && !isLoading && !error && !showFilteredEmpty;
   const customRenderer = isCustomMode ? renderCustomMode?.[viewMode] : void 0;
@@ -13314,6 +13685,7 @@ function NTable(props) {
     pagination: props.pagination,
     defaultPagination: props.defaultPagination,
     onPaginationChange: props.onPaginationChange ?? null,
+    cardPagination: props.cardPagination ?? { mode: "paged" },
     // Row selection
     rowSelection: props.rowSelection,
     defaultRowSelection: props.defaultRowSelection,
@@ -14681,4 +15053,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, 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, 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 };