najm-kit 0.0.13 → 0.0.15

package/dist/index.d.ts

@@ -2310,7 +2310,7 @@ declare const createTableStore: () => {
 declare const HEADER_COLORS: {
     readonly primary: {
         readonly bg: "bg-primary/15";
-        readonly text: "[&_th]:text-primary";
+        readonly text: "[&_th]:text-foreground";
         readonly row: "hover:bg-primary/5";
     };
     readonly violet: {

package/dist/index.mjs

@@ -2406,7 +2406,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-foreground/40 dark:border-foreground/50 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -3576,7 +3576,7 @@ function TableHead({ className, ...props }) {
   return /* @__PURE__ */ jsx("th", { "data-slot": "table-head", className: cn("text-foreground h-9 px-3 text-left align-middle text-xs font-medium uppercase tracking-wide whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
+  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("px-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("text-muted-foreground mt-4 text-sm", className), ...props });
@@ -7678,7 +7678,7 @@ function useTableKeyboard(options = {}) {
 
 // src/components/table/tableColors.ts
 var HEADER_COLORS = {
-  primary: { bg: "bg-primary/15", text: "[&_th]:text-primary", row: "hover:bg-primary/5" },
+  primary: { bg: "bg-primary/15", text: "[&_th]:text-foreground", row: "hover:bg-primary/5" },
   violet: { bg: "bg-violet-600/30", text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-300", row: "hover:bg-violet-500/5" },
   blue: { bg: "bg-blue-600/30", text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-300", row: "hover:bg-blue-500/5" },
   emerald: { bg: "bg-emerald-600/30", text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-400", row: "hover:bg-emerald-500/5" },
@@ -7812,7 +7812,7 @@ function NTableContent({ effectiveMode }) {
       onContextMenu: handleBackgroundContextMenu,
       children: /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", colorStyle?.text, headerClassName, bordered && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { className: cn("hover:bg-transparent", bordered && "border-border"), children: [
-          showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10 text-foreground h-12", colorStyle?.bg), children: /* @__PURE__ */ jsx(
+          showCheckbox && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10 text-foreground h-12 text-center", colorStyle?.bg), children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               "aria-label": "Select all rows",
@@ -7846,7 +7846,7 @@ function NTableContent({ effectiveMode }) {
                 } : void 0,
                 className: cn(colorStyle?.row, classNames?.row, onRowClick && "cursor-pointer", isSelectedByRowId && "bg-brand/5 hover:bg-brand/5", bordered && "border-border"),
                 children: [
-                  showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(
+                  showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10 text-center", children: /* @__PURE__ */ jsx(
                     Checkbox,
                     {
                       "aria-label": `Select row ${row.id}`,
@@ -8188,6 +8188,7 @@ function NTablePagination() {
     fallback: "default"
   });
   const triggerBorderClass = borderColorClassForDegree(resolvedBorderDegree);
+  const useDegreeBorder = bordered || borderDegree || resolvedBorderDegree !== "default";
   if (!table || !showContent || !showPagination || viewMode === "json" || viewMode === "files") return null;
   const filteredRows = table.getFilteredRowModel().rows;
   const selectedRows = table.getFilteredSelectedRowModel().rows;
@@ -8222,7 +8223,14 @@ function NTablePagination() {
       (!isPaginationControlled || manualPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows/page" }),
         /* @__PURE__ */ jsxs(Select, { value: `${pageSize}`, onValueChange: handlePageSizeChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: cn("h-8 w-[80px]", bordered && triggerBorderClass), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }) }),
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              "data-border-degree": useDegreeBorder ? resolvedBorderDegree : void 0,
+              className: cn("h-8 w-[80px]", useDegreeBorder && triggerBorderClass),
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize })
+            }
+          ),
           /* @__PURE__ */ jsx(SelectContent, { side: "top", children: currentPageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
         ] })
       ] }),
@@ -8412,26 +8420,26 @@ function TableSettingsMenu() {
   const modeItems = [];
   if (showViewToggle) {
     if (filteredModes.includes("table"))
-      modeItems.push({ value: "table", label: "Table", icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }) });
+      modeItems.push({ value: "table", label: "Table", ariaLabel: "Table view", icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }) });
     if (filteredModes.includes("cards") && cardComponent)
-      modeItems.push({ value: "cards", label: "Cards", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" }) });
+      modeItems.push({ value: "cards", label: "Cards", ariaLabel: "Cards view", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" }) });
     if (filteredModes.includes("json") && (jsonValue !== void 0 || renderJson))
-      modeItems.push({ value: "json", label: "JSON", icon: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }) });
+      modeItems.push({ value: "json", label: "JSON", ariaLabel: "JSON view", icon: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }) });
     if (filteredModes.includes("files"))
-      modeItems.push({ value: "files", label: "Files", icon: /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4" }) });
+      modeItems.push({ value: "files", label: "Files", ariaLabel: "Files view", 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, { className: "w-auto cursor-pointer px-3", onClick: (e) => e.preventDefault(), bordered, borderDegree, 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": "Table settings", className: "w-auto cursor-pointer px-3", bordered, borderDegree, 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"
         ] }),
-        /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: viewMode, onValueChange: (v) => setViewMode(v), children: modeItems.map((item) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: item.value, children: [
+        /* @__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,
           /* @__PURE__ */ jsx("span", { children: item.label })
         ] }, item.value)) })
@@ -8478,10 +8486,10 @@ function NTableHeader() {
   const hideDataChrome = isLoading || error || hasNoData && !isFilteredEmpty;
   if (isCustomMode) {
     if (!showViewToggle && !showColumnVisibility && !headerSlot && !hasControls) return null;
-    if (hideDataChrome && !hasControls) return null;
-    const justify2 = headerSlot && !hideDataChrome ? "justify-between" : "justify-end";
+    if (hideDataChrome) return null;
+    const justify2 = headerSlot ? "justify-between" : "justify-end";
     return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, className: cn("flex shrink-0 items-center gap-3 flex-wrap lg:flex-nowrap", justify2, classNames?.header), children: [
-      headerSlot && !hideDataChrome && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: headerSlot }),
+      headerSlot && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: headerSlot }),
       hasControls && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
         /* @__PURE__ */ jsx(TableSettingsMenu, {}),
         /* @__PURE__ */ jsx(TableAddButton, {})
@@ -8491,13 +8499,12 @@ function NTableHeader() {
   const hasFilters = Array.isArray(filters) && filters.length > 0;
   const hasToolbar = Boolean(renderToolbar);
   if (!hasFilters && !hasControls && !headerSlot && !hasToolbar) return null;
-  if (hideDataChrome && !hasControls) return null;
-  const onlyControls = hideDataChrome && hasControls && !headerSlot && !hasToolbar;
-  const justify = onlyControls ? "justify-end" : hasControls || headerSlot || hasToolbar ? "justify-between" : "justify-start";
+  if (hideDataChrome) return null;
+  const justify = hasControls || headerSlot || hasToolbar ? "justify-between" : "justify-start";
   return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, className: cn("flex shrink-0 items-center gap-3 flex-wrap lg:flex-nowrap", justify, classNames?.header), children: [
-    !hideDataChrome && /* @__PURE__ */ jsx(TableFilters, {}),
-    headerSlot && !hideDataChrome && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: headerSlot }),
-    !hideDataChrome && /* @__PURE__ */ jsx(TableToolbarSlot, {}),
+    /* @__PURE__ */ jsx(TableFilters, {}),
+    headerSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: headerSlot }),
+    /* @__PURE__ */ jsx(TableToolbarSlot, {}),
     hasControls && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
       /* @__PURE__ */ jsx(TableSettingsMenu, {}),
       /* @__PURE__ */ jsx(TableAddButton, {})

package/dist/styles.css

@@ -2420,6 +2420,9 @@ video {
 .border-emerald-500\/60 {
   border-color: rgb(16 185 129 / 0.6);
 }
+.border-foreground\/40 {
+  border-color: hsl(var(--najm-foreground) / 0.4);
+}
 .border-green-500\/30 {
   border-color: rgb(34 197 94 / 0.3);
 }
@@ -4202,6 +4205,9 @@ video {
 .dark\:border-0:is(.dark *) {
   border-width: 0px;
 }
+.dark\:border-foreground\/50:is(.dark *) {
+  border-color: hsl(var(--najm-foreground) / 0.5);
+}
 .dark\:bg-\[\#222b38\]:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(34 43 56 / var(--tw-bg-opacity, 1));
@@ -5001,8 +5007,8 @@ video {
   --tw-text-opacity: 1;
   color: rgb(6 95 70 / var(--tw-text-opacity, 1));
 }
-.\[\&_th\]\:text-primary th {
-  color: hsl(var(--najm-primary));
+.\[\&_th\]\:text-foreground th {
+  color: hsl(var(--najm-foreground));
 }
 .\[\&_th\]\:text-rose-800 th {
   --tw-text-opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",