najm-kit 0.0.12 → 0.0.14

package/dist/index.d.ts

@@ -2315,32 +2315,32 @@ declare const HEADER_COLORS: {
     };
     readonly violet: {
         readonly bg: "bg-violet-600/30";
-        readonly text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-200";
+        readonly text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-300";
         readonly row: "hover:bg-violet-500/5";
     };
     readonly blue: {
         readonly bg: "bg-blue-600/30";
-        readonly text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-200";
+        readonly text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-300";
         readonly row: "hover:bg-blue-500/5";
     };
     readonly emerald: {
         readonly bg: "bg-emerald-600/30";
-        readonly text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-200";
+        readonly text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-400";
         readonly row: "hover:bg-emerald-500/5";
     };
     readonly amber: {
         readonly bg: "bg-amber-500/30";
-        readonly text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-200";
+        readonly text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-300";
         readonly row: "hover:bg-amber-500/5";
     };
     readonly rose: {
         readonly bg: "bg-rose-600/30";
-        readonly text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-200";
+        readonly text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-300";
         readonly row: "hover:bg-rose-500/5";
     };
     readonly slate: {
         readonly bg: "bg-slate-700/60";
-        readonly text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-300";
+        readonly text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-400";
         readonly row: "hover:bg-slate-500/5";
     };
 };

package/dist/index.mjs

@@ -7679,12 +7679,12 @@ 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" },
-  violet: { bg: "bg-violet-600/30", text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-200", row: "hover:bg-violet-500/5" },
-  blue: { bg: "bg-blue-600/30", text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-200", row: "hover:bg-blue-500/5" },
-  emerald: { bg: "bg-emerald-600/30", text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-200", row: "hover:bg-emerald-500/5" },
-  amber: { bg: "bg-amber-500/30", text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-200", row: "hover:bg-amber-500/5" },
-  rose: { bg: "bg-rose-600/30", text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-200", row: "hover:bg-rose-500/5" },
-  slate: { bg: "bg-slate-700/60", text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-300", row: "hover:bg-slate-500/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" },
+  amber: { bg: "bg-amber-500/30", text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-300", row: "hover:bg-amber-500/5" },
+  rose: { bg: "bg-rose-600/30", text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-300", row: "hover:bg-rose-500/5" },
+  slate: { bg: "bg-slate-700/60", text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-400", row: "hover:bg-slate-500/5" }
 };
 var HEADER_HEX = {
   primary: "",
@@ -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

@@ -5016,29 +5016,29 @@ video {
   --tw-text-opacity: 1;
   color: rgb(91 33 182 / var(--tw-text-opacity, 1));
 }
-.dark\:\[\&_th\]\:text-amber-200 th:is(.dark *) {
+.dark\:\[\&_th\]\:text-amber-300 th:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
+  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
 }
-.dark\:\[\&_th\]\:text-blue-200 th:is(.dark *) {
+.dark\:\[\&_th\]\:text-blue-300 th:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
+  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
 }
-.dark\:\[\&_th\]\:text-emerald-200 th:is(.dark *) {
+.dark\:\[\&_th\]\:text-emerald-400 th:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
+  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
 }
-.dark\:\[\&_th\]\:text-rose-200 th:is(.dark *) {
+.dark\:\[\&_th\]\:text-rose-300 th:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(254 205 211 / var(--tw-text-opacity, 1));
+  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
 }
-.dark\:\[\&_th\]\:text-slate-300 th:is(.dark *) {
+.dark\:\[\&_th\]\:text-slate-400 th:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
 }
-.dark\:\[\&_th\]\:text-violet-200 th:is(.dark *) {
+.dark\:\[\&_th\]\:text-violet-300 th:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
+  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
 }
 .\[\&_tr\:last-child\]\:border-0 tr:last-child {
   border-width: 0px;

package/package.json

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