najm-kit 2.1.20 → 2.1.21

package/dist/index.mjs

@@ -3,7 +3,7 @@ import React__default, { createContext, useContext, useCallback, useEffect, useS
 import { Slot } from '@radix-ui/react-slot';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
-import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, Menu, Search, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, CheckSquare, FilePlus, FolderPlus, Trash2, Share2, Move, ClipboardPaste, Copy, Scissors, Pencil, Download, Eye, ArrowUpDown, Loader2, ChevronUp, Folder, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, Star, Globe, Clock, Upload, Plus, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, X, XIcon, Menu, Search, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, CheckSquare, FilePlus, FolderPlus, Trash2, Share2, Move, ClipboardPaste, Copy, Scissors, Pencil, Download, Eye, ArrowUpDown, Loader2, ChevronUp, Folder, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, Star, Globe, Clock, Upload, Plus, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -9978,12 +9978,12 @@ function SearchFilter({ placeholder }) {
   const value = table.getState().globalFilter ?? "";
   return /* @__PURE__ */ jsx(TextInput, { icon: Search, value, onChange: (v) => table.setGlobalFilter(v), placeholder: placeholder ?? "Search\u2026", bordered });
 }
-function TextFilter({ name, placeholder }) {
+function TextFilter({ name, placeholder, icon }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
   const column = table?.getColumn?.(name);
   if (!column) return null;
-  return /* @__PURE__ */ jsx(TextInput, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered });
+  return /* @__PURE__ */ jsx(TextInput, { icon, value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered });
 }
 function SelectFilter({ name, options, placeholder, inputType }) {
   const table = useTableStore.use.table();
@@ -9997,7 +9997,7 @@ function SelectFilter({ name, options, placeholder, inputType }) {
 function defaultWrapperClass(filter) {
   return filter.type === "search" ? "flex-1 min-w-[160px] max-w-sm" : "w-full sm:w-40 xl:w-56 shrink-0";
 }
-function RenderFilter({ filter }) {
+function RenderFilter({ filter, mobilePrimary = false }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
   if (filter.type === "search") {
@@ -10020,6 +10020,7 @@ function RenderFilter({ filter }) {
       return /* @__PURE__ */ jsx(
         TextInput,
         {
+          icon: mobilePrimary ? Search : void 0,
           value: filter.value ?? "",
           onChange: filter.onChange,
           placeholder: filter.placeholder,
@@ -10062,7 +10063,7 @@ function RenderFilter({ filter }) {
     );
   }
   if (filter.type === "text") {
-    return /* @__PURE__ */ jsx(TextFilter, { name: filter.name, placeholder: filter.placeholder });
+    return /* @__PURE__ */ jsx(TextFilter, { name: filter.name, placeholder: filter.placeholder, icon: mobilePrimary ? Search : void 0 });
   }
   if (!table) return null;
   return /* @__PURE__ */ jsx(SelectFilter, { name: filter.name, options: filter.options || [], placeholder: filter.placeholder, inputType: filter.type });
@@ -10070,7 +10071,7 @@ function RenderFilter({ filter }) {
 function TableFilters() {
   const filters = useTableStore.use.filters();
   if (!filters?.length) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 flex-1 min-w-0", children: filters.map((filter) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { "data-ntable-desktop-filters": true, className: "hidden flex-1 min-w-0 flex-wrap items-center gap-2 md:flex", children: filters.map((filter) => /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(defaultWrapperClass(filter), filter.className),
@@ -10079,7 +10080,7 @@ function TableFilters() {
     filter.name
   )) });
 }
-function TableAddButton() {
+function TableAddButton({ mobile = false }) {
   const onAddClick = useTableStore.use.onAddClick();
   const showAddButton = useTableStore.use.showAddButton();
   const addButtonText = useTableStore.use.addButtonText();
@@ -10087,7 +10088,7 @@ function TableAddButton() {
   const headerTextColor = useTableStore.use.headerTextColor();
   const bordered = useTableStore.use.bordered();
   if (!showAddButton) return null;
-  const btnStyle = {
+  const btnStyle = mobile ? { color: resolveTableColor(headerColor, DEFAULT_TABLE_HEADER_COLOR) } : {
     backgroundColor: resolveTableColor(headerColor, DEFAULT_TABLE_HEADER_COLOR),
     color: resolveTableColor(headerTextColor, DEFAULT_TABLE_HEADER_TEXT_COLOR)
   };
@@ -10100,12 +10101,53 @@ function TableAddButton() {
       style: btnStyle,
       "aria-label": addButtonText || "Create",
       title: addButtonText || "Create",
-      "data-bordered": bordered ? "true" : void 0,
-      className: `h-10 w-10 shrink-0 cursor-pointer flex items-center justify-center rounded-lg transition-opacity hover:opacity-90 ${borderedCls}`,
+      "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",
+        mobile ? cn("flex bg-card md:hidden", bordered === false ? "shadow-sm" : "border border-input hover:border-primary/70") : `hidden md:flex ${borderedCls}`
+      ),
       children: /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5" })
     }
   );
 }
+function MobileFiltersMenu({ filters }) {
+  const bordered = useTableStore.use.bordered();
+  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",
+        "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",
+          bordered === false ? "shadow-sm" : "border border-input"
+        ),
+        children: /* @__PURE__ */ jsx(Filter, { className: "h-5 w-5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: "end",
+        "aria-label": "Table filters",
+        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))
+      }
+    )
+  ] });
+}
+function TableMobileToolbar() {
+  const filters = useTableStore.use.filters();
+  const firstFilter = filters?.[0];
+  return /* @__PURE__ */ jsxs("div", { "data-ntable-mobile-toolbar": true, className: "flex w-full min-w-0 items-center gap-2 md:hidden", children: [
+    firstFilter && /* @__PURE__ */ jsx("div", { "data-ntable-mobile-primary-filter": true, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(RenderFilter, { filter: firstFilter, mobilePrimary: true }) }),
+    /* @__PURE__ */ jsx(MobileFiltersMenu, { filters: filters?.slice(1) ?? [] }),
+    /* @__PURE__ */ jsx(TableAddButton, { mobile: true })
+  ] });
+}
 function TableSettingsMenu() {
   const showViewToggle = useTableStore.use.showViewToggle();
   const showColumnVisibility = useTableStore.use.showColumnVisibility();
@@ -10195,7 +10237,7 @@ function NTableHeader() {
       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("span", { className: "hidden md:contents", children: /* @__PURE__ */ jsx(TableSettingsMenu, {}) }),
-        /* @__PURE__ */ jsx("span", { className: "hidden md:contents", children: /* @__PURE__ */ jsx(TableAddButton, {}) })
+        /* @__PURE__ */ jsx(TableAddButton, {})
       ] })
     ] });
   }
@@ -10206,11 +10248,12 @@ function NTableHeader() {
   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: [
     /* @__PURE__ */ jsx(TableFilters, {}),
+    /* @__PURE__ */ jsx(TableMobileToolbar, {}),
     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("span", { className: "hidden md:contents", children: /* @__PURE__ */ jsx(TableSettingsMenu, {}) }),
-      /* @__PURE__ */ jsx("span", { className: "hidden md:contents", children: /* @__PURE__ */ jsx(TableAddButton, {}) })
+      /* @__PURE__ */ jsx(TableAddButton, {})
     ] })
   ] });
 }
@@ -10390,24 +10433,6 @@ function DefaultTableFilteredEmptyState() {
     }
   );
 }
-function TableMobileAddButton() {
-  const onAddClick = useTableStore.use.onAddClick();
-  const showAddButton = useTableStore.use.showAddButton();
-  const addButtonText = useTableStore.use.addButtonText();
-  if (!showAddButton || !onAddClick) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex shrink-0 px-2 md:hidden", children: /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: onAddClick,
-      className: "flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
-      children: [
-        /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-        addButtonText || "Add"
-      ]
-    }
-  ) });
-}
 function TableLayout(props) {
   const containerRef = useRef(null);
   const classNames = useTableStore.use.classNames?.();
@@ -10457,8 +10482,7 @@ function TableLayout(props) {
       showEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableEmptyState, { title: noDataText }) }),
       /* @__PURE__ */ jsx(NTableContent, { effectiveMode }),
       /* @__PURE__ */ jsx(NTableCards, { effectiveMode }),
-      /* @__PURE__ */ jsx(NTableJson, {}),
-      /* @__PURE__ */ jsx(TableMobileAddButton, {})
+      /* @__PURE__ */ jsx(NTableJson, {})
     ] }) }),
     /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "min-w-0 shrink-0 bg-background text-foreground", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
   ] });

package/package.json

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