najm-kit 2.11.11 → 2.11.13

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { resolveAvatarSrc } from './chunk-BEGOH366.mjs';
 export { isPlaceholderAvatar, resolveAvatarSrc } from './chunk-BEGOH366.mjs';
-import { NLoadingState, NErrorState, NEmptyState, useResolvedFormDevTools, useNBranding } from './chunk-W2HMBUZ4.mjs';
-export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState, NPageLayout, NSpinner, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-W2HMBUZ4.mjs';
-import { normalizeImageSources, useImageChain, useNBadgeDefaults, mergeBadgeMaps, resolveStatusColor, resolveBadgeStatusLabel, colorTextClass, useResolvedPaginationLabels } from './chunk-6UDJNTJ6.mjs';
-export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NAJM_COLOR_TEXT_CLASSES, NAJM_STATUS_COLORS, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, colorTextClass, findStatusColor, normalizeStatusToken, resolveStatusColor, statusTextClass, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-6UDJNTJ6.mjs';
+import { NLoadingState, NErrorState, NEmptyState, useResolvedFormDevTools, useNBranding } from './chunk-26EASWUY.mjs';
+export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState, NPageLayout, NSpinner, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-26EASWUY.mjs';
+import { normalizeImageSources, useImageChain, useNBadgeDefaults, mergeBadgeMaps, resolveStatusColor, resolveBadgeStatusLabel, colorTextClass, useResolvedPaginationLabels, useResolvedToolbarLabels } from './chunk-BDQK6ECA.mjs';
+export { DEFAULT_FEEDBACK_KEY_PREFIX, DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, DEFAULT_TOOLBAR_KEY_PREFIX, EMPTY_DESIGN, NAJM_COLOR_TEXT_CLASSES, NAJM_STATUS_COLORS, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, buildToolbarLabels, colorTextClass, findStatusColor, normalizeStatusToken, resolveStatusColor, statusTextClass, useDocumentDirection, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone, useResolvedToolbarLabels } from './chunk-BDQK6ECA.mjs';
 import { NajmScroll, useNajmScrollViewport, useTableStore, TableStoreContext, NTableJson } from './chunk-5JVFMOLI.mjs';
 export { NTableJson, NajmScroll, TableStoreContext, useTableStore } from './chunk-5JVFMOLI.mjs';
 import { inputBorderClasses, Button, NIcon, surfaceBorderClasses, buttonVariants, NButton, sidebarBorderClasses } from './chunk-M5VGBZ7R.mjs';
@@ -21,7 +21,7 @@ import * as React66 from 'react';
 import React66__default, { createContext, useState, useRef, useMemo, useEffect, useContext, useCallback, useLayoutEffect, isValidElement } from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Eye, EyeOff, Clock, ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, Copy, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Scissors, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { Eye, EyeOff, Clock, ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, Copy, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Scissors, ArrowUpRight, ArrowDownRight, List, LayoutGrid, Code, FolderOpen, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox } from 'lucide-react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { HexColorPicker } from 'react-colorful';
@@ -2811,10 +2811,10 @@ function SelectItem({ className, children, ...props }) {
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
-      className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+      className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute end-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
       ]
     }
@@ -5985,11 +5985,11 @@ function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
-      className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+      className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute start-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     }
@@ -6000,10 +6000,10 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
     DropdownMenuPrimitive.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
-      className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+      className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute start-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
       ]
     }
@@ -6596,7 +6596,7 @@ function NThemePresets({
                   SelectItem,
                   {
                     value: row.value,
-                    className: "pr-2 pl-8 [&>span:first-child]:right-auto [&>span:first-child]:left-2 [&>span:first-child]:text-success [&>span:last-child]:min-w-0 [&>span:last-child]:flex-1",
+                    className: "pe-2 ps-8 [&>span:first-child]:end-auto [&>span:first-child]:start-2 [&>span:first-child]:text-success [&>span:last-child]:min-w-0 [&>span:last-child]:flex-1",
                     children: /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center gap-2", children: [
                       /* @__PURE__ */ jsx(ThemeSwatch, { design: row.design }),
                       /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: row.label }),
@@ -11621,7 +11621,7 @@ var createTableStore = (seed) => {
       showColumnVisibility: false,
       showAddButton: true,
       showViewToggle: true,
-      toolbarLabels: true,
+      toolbarLabels: {},
       dynamicHeight: true,
       showContent: false,
       isTableView: true,
@@ -12637,7 +12637,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
         className
       ),
       children: [
-        showCheckbox && /* @__PURE__ */ jsx("div", { className: cn("absolute top-2 left-2 z-10 transition-opacity duration-200", isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: /* @__PURE__ */ jsx(
+        showCheckbox && /* @__PURE__ */ jsx("div", { className: cn("absolute top-2 start-2 z-10 transition-opacity duration-200", isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: /* @__PURE__ */ jsx(
           Checkbox,
           {
             checked: isSelected,
@@ -12680,7 +12680,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
                 },
                 className: "cursor-pointer",
                 children: [
-                  /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-2" }),
+                  /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 me-2" }),
                   "View"
                 ]
               }
@@ -12694,7 +12694,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
                 },
                 className: "cursor-pointer",
                 children: [
-                  /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4 mr-2" }),
+                  /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4 me-2" }),
                   "Edit"
                 ]
               }
@@ -12708,7 +12708,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
                 },
                 className: "cursor-pointer text-red-500",
                 children: [
-                  /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2 text-red-500" }),
+                  /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 me-2 text-red-500" }),
                   "Delete"
                 ]
               }
@@ -12726,10 +12726,10 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
               row.toggleExpanded();
             },
             className: cn(
-              "absolute bottom-2 right-2 z-10 flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
+              "absolute bottom-2 end-2 z-10 flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
               bordered && "border border-border"
             ),
-            children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+            children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 rtl:rotate-180" })
           }
         ),
         children
@@ -13531,6 +13531,27 @@ function NTablePagination() {
     /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-none whitespace-nowrap text-sm text-muted-foreground max-sm:hidden", children: labels.rowsSelected?.(selectedRows.length, selectedTotal) ?? `${selectedRows.length} of ${selectedTotal} row(s) selected.` })
   ] });
 }
+function useToolbarCopy() {
+  const own = useTableStore.use.toolbarLabels();
+  const labels = useResolvedToolbarLabels(own);
+  return React66__default.useMemo(
+    () => ({
+      settings: labels.settings ?? "Table settings",
+      view: labels.view ?? "View",
+      columns: labels.columns ?? "Columns",
+      modeTable: labels.modeTable ?? "Table",
+      modeCards: labels.modeCards ?? "Cards",
+      modeJson: labels.modeJson ?? "JSON",
+      modeFiles: labels.modeFiles ?? "Files",
+      modeOption: labels.modeOption ?? ((mode) => `${mode} view`),
+      filters: labels.filters ?? "Filters",
+      filterRegion: labels.filterRegion ?? "Table filters",
+      allOption: labels.allOption ?? "All",
+      create: labels.create ?? "Create"
+    }),
+    [labels]
+  );
+}
 function PendingFilter({ placeholder, icon, bordered }) {
   return /* @__PURE__ */ jsx(TextInput, { icon, value: "", onChange: () => {
   }, placeholder, bordered, disabled: true });
@@ -13552,9 +13573,10 @@ function TextFilter({ name, placeholder, icon }) {
 function SelectFilter({ name, options, placeholder, inputType }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
+  const copy = useToolbarCopy();
   const column = table?.getColumn?.(name);
   if (!column) return /* @__PURE__ */ jsx(PendingFilter, { placeholder: placeholder || "Filter...", bordered });
-  const allOptions = [{ value: "__clear__", label: "All" }, ...options.map((o) => typeof o === "string" ? { value: o, label: o } : o)];
+  const allOptions = [{ value: "__clear__", label: copy.allOption }, ...options.map((o) => typeof o === "string" ? { value: o, label: o } : o)];
   const InputComponent = inputType === "combobox" ? ComboboxInput : SelectInput;
   return /* @__PURE__ */ jsx(InputComponent, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value === "" || value === "__clear__" ? void 0 : value), items: allOptions, placeholder: placeholder || "Filter...", bordered });
 }
@@ -13652,6 +13674,7 @@ function TableAddButton({ mobile = false }) {
   const onAddClick = useTableStore.use.onAddClick();
   const showAddButton = useTableStore.use.showAddButton();
   const addButtonText = useTableStore.use.addButtonText();
+  const copy = useToolbarCopy();
   const headerColor = useTableStore.use.headerColor();
   const headerTextColor = useTableStore.use.headerTextColor();
   const bordered = useTableStore.use.bordered();
@@ -13667,8 +13690,8 @@ function TableAddButton({ mobile = false }) {
       type: "button",
       onClick: onAddClick ?? void 0,
       style: btnStyle,
-      "aria-label": addButtonText || "Create",
-      title: addButtonText || "Create",
+      "aria-label": addButtonText || copy.create,
+      title: addButtonText || copy.create,
       "data-bordered": bordered === false ? "false" : "true",
       className: cn(
         "h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg transition-colors hover:opacity-90",
@@ -13680,14 +13703,15 @@ function TableAddButton({ mobile = false }) {
 }
 function MobileFiltersMenu({ filters }) {
   const bordered = useTableStore.use.bordered();
+  const copy = useToolbarCopy();
   if (!filters.length) return null;
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        "aria-label": "Filters",
-        title: "Filters",
+        "aria-label": copy.filters,
+        title: copy.filters,
         "data-bordered": bordered === false ? "false" : "true",
         className: cn(
           "flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-card text-primary transition-colors hover:border-primary/70",
@@ -13700,7 +13724,7 @@ function MobileFiltersMenu({ filters }) {
       PopoverContent,
       {
         align: "end",
-        "aria-label": "Table filters",
+        "aria-label": copy.filterRegion,
         className: "w-[min(20rem,calc(100vw-2rem))] space-y-3 bg-card p-3",
         children: filters.map((filter) => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(RenderFilter, { filter }) }, filter.name))
       }
@@ -13727,30 +13751,31 @@ function TableSettingsMenu() {
   const cardComponent = useTableStore.use.CardComponent();
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
+  const copy = useToolbarCopy();
   if (!showViewToggle && !showColumnVisibility) return null;
   const allModes = ["table", "cards", "json", "files"];
   const filteredModes = availableModes ?? allModes;
   const modeItems = [];
   if (showViewToggle) {
     if (filteredModes.includes("table"))
-      modeItems.push({ value: "table", label: "Table", ariaLabel: "Table view", icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }) });
+      modeItems.push({ value: "table", label: copy.modeTable, ariaLabel: copy.modeOption(copy.modeTable), icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }) });
     if (filteredModes.includes("cards") && cardComponent)
-      modeItems.push({ value: "cards", label: "Cards", ariaLabel: "Cards view", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" }) });
+      modeItems.push({ value: "cards", label: copy.modeCards, ariaLabel: copy.modeOption(copy.modeCards), icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" }) });
     if (filteredModes.includes("json") && (jsonValue !== void 0 || renderJson))
-      modeItems.push({ value: "json", label: "JSON", ariaLabel: "JSON view", icon: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }) });
+      modeItems.push({ value: "json", label: copy.modeJson, ariaLabel: copy.modeOption(copy.modeJson), icon: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }) });
     if (filteredModes.includes("files"))
-      modeItems.push({ value: "files", label: "Files", ariaLabel: "Files view", icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4" }) });
+      modeItems.push({ value: "files", label: copy.modeFiles, ariaLabel: copy.modeOption(copy.modeFiles), icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4" }) });
   }
   const columns = table?.getAllColumns?.().filter((c) => c.getCanHide()) ?? [];
   const hasModes = modeItems.length > 0;
   const hasColumns = columns.length > 0;
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(BaseInput, { "aria-label": "Table settings", className: "w-auto cursor-pointer px-3", bordered, children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) }) }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(BaseInput, { "aria-label": copy.settings, className: "w-auto cursor-pointer px-3", bordered, children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56 bg-card", children: [
       showViewToggle && hasModes && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
-          "View"
+          copy.view
         ] }),
         /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: viewMode, onValueChange: (v) => setViewMode(v), children: modeItems.map((item) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: item.value, "aria-label": item.ariaLabel, children: [
           item.icon,
@@ -13761,7 +13786,7 @@ function TableSettingsMenu() {
       showColumnVisibility && hasColumns && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(Columns3, { className: "h-3.5 w-3.5" }),
-          "Columns"
+          copy.columns
         ] }),
         columns.map((col) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
@@ -14079,7 +14104,7 @@ function NTable(props) {
     showColumnVisibility: props.showColumnVisibility ?? false,
     showAddButton: props.showAddButton ?? Boolean(props.onCreate),
     showViewToggle: props.showViewToggle ?? true,
-    toolbarLabels: props.toolbarLabels ?? true,
+    toolbarLabels: props.toolbarLabels ?? {},
     dynamicHeight: props.dynamicHeight ?? true,
     noResultsText: props.noResultsText ?? "No results.",
     noDataText: props.noDataText ?? "No data available",

package/dist/json.d.ts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
-export { N as NTableJson } from './NTableJson-tXqgfZI1.js';
+export { N as NTableJson } from './NTableJson-BHXwRVvL.js';
 
 interface JsonViewColors {
     toolName: string;
@@ -19,7 +18,7 @@ interface JsonViewerProps {
     className?: string;
     maxHeight?: string;
 }
-declare function JsonViewer({ value, colors, className, maxHeight }: JsonViewerProps): react_jsx_runtime.JSX.Element;
+declare function JsonViewer({ value, colors, className, maxHeight }: JsonViewerProps): React__default.JSX.Element;
 
 interface JsonEditorProps {
     value: string;
@@ -49,6 +48,6 @@ interface JsonEditorProps {
     highlightDuplicateStrings?: boolean;
     highlightStatusStrings?: boolean;
 }
-declare function JsonEditor({ value, onChange, onSave, onReset, onCancel, dirty, parseError, saveError, saveSuccess, loading, saving, colors, lineCount, itemCount, itemLabel, loadingLabel, readOnly, smartPasteLabel, onSmartPaste, onCopy, copyLabel, headerMiddle, statusAddon, showActions, highlightDuplicateStrings, highlightStatusStrings, }: JsonEditorProps): react_jsx_runtime.JSX.Element;
+declare function JsonEditor({ value, onChange, onSave, onReset, onCancel, dirty, parseError, saveError, saveSuccess, loading, saving, colors, lineCount, itemCount, itemLabel, loadingLabel, readOnly, smartPasteLabel, onSmartPaste, onCopy, copyLabel, headerMiddle, statusAddon, showActions, highlightDuplicateStrings, highlightStatusStrings, }: JsonEditorProps): React__default.JSX.Element;
 
 export { JsonEditor, type JsonEditorProps, type JsonViewColors, JsonViewer, type JsonViewerProps };

package/dist/theme.css

@@ -317,10 +317,10 @@ input:autofill {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.najm-overlay-scroll-x::-webkit-scrollbar {
-  display: none;
-}
-
+.najm-overlay-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
 /* Responsive table actions stay discoverable on touch and tablet layouts.
    Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
 .ntable-card-action {
@@ -377,7 +377,7 @@ input:autofill {
   .nimage-input-compact-overlay:focus-visible {
     opacity: 1;
   }
-}
+}
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.11.11",
+  "version": "2.11.13",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
@@ -146,6 +146,7 @@
     "@radix-ui/react-checkbox": "^1",
     "@radix-ui/react-collapsible": "^1",
     "@radix-ui/react-dialog": "^1",
+    "@radix-ui/react-direction": "^1",
     "@radix-ui/react-dropdown-menu": "^2",
     "@radix-ui/react-label": "^2",
     "@radix-ui/react-popover": "^1",
@@ -197,7 +198,7 @@
     "@uiw/react-codemirror": "^4.25.0",
     "@vitejs/plugin-react": "^5.2.0",
     "happy-dom": "^20.11.1",
-    "najm-i18n": "^2.0.3",
+    "najm-i18n": "^2.1.0",
     "postcss": "^8.5.22",
     "react-hook-form": "^7",
     "rimraf": "^6",

package/dist/NTableJson-tXqgfZI1.d.ts

@@ -1,5 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare function NTableJson(): react_jsx_runtime.JSX.Element;
-
-export { NTableJson as N };