@dimaan/ui 0.0.18 → 0.0.20

package/dist/index.cjs

@@ -1724,12 +1724,26 @@ var formPageBodyClass = "flex-1";
 var formPageActionsBarClass = "sticky bottom-0 -mx-6 -mb-6 mt-6 flex items-center justify-end gap-2 border-t border-border bg-background/95 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80";
 var formPageSkeletonRowClass = "h-10 w-full animate-pulse rounded-md bg-muted";
 var DEFAULT_SKELETON_ROW_COUNT2 = 6;
+var DEFAULT_LABELS_LTR = {
+  back: "Back",
+  cancel: "Cancel",
+  save: "Save",
+  saving: "Saving\u2026"
+};
+var DEFAULT_LABELS_RTL = {
+  back: "\u0631\u062C\u0648\u0639",
+  cancel: "\u0625\u0644\u063A\u0627\u0621",
+  save: "\u062D\u0641\u0638",
+  saving: "\u062C\u0627\u0631\u064D \u0627\u0644\u062D\u0641\u0638\u2026"
+};
 function FormPage({
   title,
   description,
-  back,
   bordered = true,
   onSubmit,
+  onCancel,
+  isSubmitting,
+  labels: labelsProp,
   isLoading = false,
   loadingRowCount = DEFAULT_SKELETON_ROW_COUNT2,
   actions,
@@ -1739,8 +1753,23 @@ function FormPage({
   bodyClassName,
   actionsClassName
 }) {
+  const navigate = reactRouterDom.useNavigate();
+  const dir = useDirection();
+  const formContext = reactHookForm.useFormContext();
+  const submitting = isSubmitting ?? formContext?.formState?.isSubmitting ?? false;
+  const defaults = dir === "rtl" ? DEFAULT_LABELS_RTL : DEFAULT_LABELS_LTR;
+  const labels = { ...defaults, ...labelsProp };
+  const goBack = () => navigate(-1);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { title, description, back, bordered }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PageHeader,
+      {
+        title,
+        description,
+        back: { label: labels.back, onClick: goBack },
+        bordered
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "form",
       {
@@ -1751,14 +1780,27 @@ function FormPage({
         className: cn("flex flex-1 flex-col gap-6", formClassName),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-page-body", className: cn(formPageBodyClass, bodyClassName), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(FormPageSkeleton, { rowCount: loadingRowCount }) : children }),
-          actions !== null && actions !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               "data-slot": "form-page-actions",
               className: cn(formPageActionsBarClass, actionsClassName),
-              children: actions
+              children: [
+                actions,
+                /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: onCancel ?? goBack, children: labels.cancel }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "submit",
+                    loading: submitting,
+                    loadingText: labels.saving,
+                    disabled: isLoading,
+                    children: labels.save
+                  }
+                )
+              ]
             }
-          ) : null
+          )
         ]
       }
     )
@@ -2009,15 +2051,35 @@ var SelectItem = react.forwardRef(function SelectItem2({ className, children, ..
     /* @__PURE__ */ jsxRuntime.jsx(RadixSelect__namespace.ItemText, { children })
   ] });
 });
+var EN_LABELS = {
+  rowsPerPage: "Rows per page",
+  pageRangeOf: "of",
+  previousPage: "Previous page",
+  nextPage: "Next page"
+};
+var AR_LABELS = {
+  rowsPerPage: "\u0635\u0641\u0648\u0641 \u0644\u0643\u0644 \u0635\u0641\u062D\u0629",
+  pageRangeOf: "\u0645\u0646",
+  previousPage: "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
+  nextPage: "\u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u062A\u0627\u0644\u064A\u0629"
+};
 function Pagination({
   pageIndex,
   pageSize,
   pageCount,
   totalRowCount,
   pageSizeOptions,
-  onChange
+  onChange,
+  labels: labelsProp
 }) {
   const dir = useDirection();
+  const localeDefaults = dir === "rtl" ? AR_LABELS : EN_LABELS;
+  const labels = {
+    rowsPerPage: labelsProp?.rowsPerPage ?? localeDefaults.rowsPerPage,
+    pageRangeOf: labelsProp?.pageRangeOf ?? localeDefaults.pageRangeOf,
+    previousPage: labelsProp?.previousPage ?? localeDefaults.previousPage,
+    nextPage: labelsProp?.nextPage ?? localeDefaults.nextPage
+  };
   const isRtl = dir === "rtl";
   const isFirst = pageIndex <= 0;
   const isLast = pageIndex >= pageCount - 1;
@@ -2031,7 +2093,7 @@ function Pagination({
   const end = Math.min(totalRowCount, (pageIndex + 1) * pageSize);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.rowsPerPage }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "select",
         {
@@ -2050,7 +2112,9 @@ function Pagination({
         start,
         "\u2013",
         end,
-        " of ",
+        " ",
+        labels.pageRangeOf,
+        " ",
         totalRowCount
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
@@ -2062,7 +2126,7 @@ function Pagination({
             size: "sm",
             disabled: isFirst,
             onClick: goPrev,
-            "aria-label": "Previous page",
+            "aria-label": labels.previousPage,
             children: isRtl ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
           }
         ),
@@ -2079,7 +2143,7 @@ function Pagination({
             size: "sm",
             disabled: isLast,
             onClick: goNext,
-            "aria-label": "Next page",
+            "aria-label": labels.nextPage,
             children: isRtl ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
           }
         )
@@ -2132,71 +2196,37 @@ var alignClass = {
   end: "text-end"
 };
 var EMPTY_SELECTION = /* @__PURE__ */ new Set();
-var NO_SORT = { columnId: null, direction: "asc" };
 function useTableState(props) {
   const {
-    defaultSort,
-    sort: sortProp,
-    onSortChange,
-    defaultPagination,
-    pagination: paginationProp,
-    onPaginationChange,
-    pageSizeOptions,
     defaultSelectedRowIds,
     selectedRowIds: selectedRowIdsProp,
-    onSelectedRowIdsChange,
-    totalCount
+    onSelectedRowIdsChange
   } = props;
-  const [internalSort, setInternalSort] = react.useState(defaultSort ?? NO_SORT);
-  const isSortControlled = sortProp !== void 0;
-  const sort = isSortControlled ? sortProp : internalSort;
-  const setSort = react.useCallback(
-    (next) => {
-      if (!isSortControlled) setInternalSort(next);
-      onSortChange?.(next);
-    },
-    [isSortControlled, onSortChange]
-  );
-  const [internalPagination, setInternalPagination] = react.useState(
-    defaultPagination ?? { pageIndex: 0, pageSize: pageSizeOptions?.[0] ?? 10 }
-  );
-  const isPaginationControlled = paginationProp !== void 0;
-  const pagination = isPaginationControlled ? paginationProp : internalPagination;
-  const setPagination = react.useCallback(
-    (next) => {
-      if (!isPaginationControlled) setInternalPagination(next);
-      onPaginationChange?.(next);
-    },
-    [isPaginationControlled, onPaginationChange]
-  );
   const [internalSelected, setInternalSelected] = react.useState(
     defaultSelectedRowIds ?? EMPTY_SELECTION
   );
-  const isSelectionControlled = selectedRowIdsProp !== void 0;
-  const selected = isSelectionControlled ? selectedRowIdsProp : internalSelected;
+  const isControlled = selectedRowIdsProp !== void 0;
+  const selected = isControlled ? selectedRowIdsProp : internalSelected;
   const setSelected = react.useCallback(
     (next) => {
-      if (!isSelectionControlled) setInternalSelected(next);
+      if (!isControlled) setInternalSelected(next);
       onSelectedRowIdsChange?.(next);
     },
-    [isSelectionControlled, onSelectedRowIdsChange]
+    [isControlled, onSelectedRowIdsChange]
   );
-  return {
-    sort,
-    setSort,
-    pagination,
-    setPagination,
-    selected,
-    setSelected,
-    isServerSide: totalCount !== void 0
-  };
+  return { selected, setSelected };
 }
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50];
+var DEFAULT_PAGE_SIZE = 10;
+function defaultGetRowId(row, index) {
+  const rowId = row.id;
+  return rowId === void 0 || rowId === null ? String(index) : String(rowId);
+}
 function Table(props) {
   const {
     data,
     columns,
-    getRowId,
+    getRowId = defaultGetRowId,
     enableRowSelection = false,
     isRowSelectable,
     bulkActions,
@@ -2214,36 +2244,26 @@ function Table(props) {
     tableRef,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     showPagination,
-    caption
+    caption,
+    sort,
+    onSortChange,
+    pagination,
+    onPaginationChange,
+    totalCount,
+    labels
   } = props;
   const ariaLabel = props["aria-label"];
   const ariaLabelledBy = props["aria-labelledby"];
-  const { sort, setSort, pagination, setPagination, selected, setSelected, isServerSide } = useTableState(props);
-  const sortedRows = react.useMemo(() => {
-    if (isServerSide || sort.columnId === null) return data;
-    const col = columns.find((c) => c.id === sort.columnId);
-    if (!col) return data;
-    const get = resolveSortGetter(col);
-    if (!get) return data;
-    const tagged = data.map((row, index) => ({ row, index }));
-    tagged.sort((a, b) => {
-      const cmp = compareValues(get(a.row), get(b.row));
-      if (cmp !== 0) return sort.direction === "asc" ? cmp : -cmp;
-      return a.index - b.index;
-    });
-    return tagged.map((entry) => entry.row);
-  }, [data, columns, sort, isServerSide]);
-  const pagedRows = react.useMemo(() => {
-    if (isServerSide) return sortedRows;
-    const start = pagination.pageIndex * pagination.pageSize;
-    return sortedRows.slice(start, start + pagination.pageSize);
-  }, [sortedRows, pagination, isServerSide]);
-  const totalRowCount = isServerSide ? props.totalCount ?? 0 : data.length;
-  const pageCount = Math.max(1, Math.ceil(totalRowCount / pagination.pageSize));
+  const { selected, setSelected } = useTableState(props);
+  const effectiveSort = sort ?? { columnId: null, direction: "asc" };
+  const pageSize = pagination?.pageSize ?? pageSizeOptions[0] ?? DEFAULT_PAGE_SIZE;
+  const pageIndex = pagination?.pageIndex ?? 0;
+  const totalRowCount = totalCount ?? data.length;
+  const pageCount = Math.max(1, Math.ceil(totalRowCount / pageSize));
   const selectableRowIds = react.useMemo(() => {
     if (!enableRowSelection) return [];
-    return pagedRows.map((row, index) => ({ row, index })).filter(({ row }) => isRowSelectable ? isRowSelectable(row) : true).map(({ row, index }) => getRowId(row, index));
-  }, [pagedRows, enableRowSelection, isRowSelectable, getRowId]);
+    return data.map((row, index) => ({ row, index })).filter(({ row }) => isRowSelectable ? isRowSelectable(row) : true).map(({ row, index }) => getRowId(row, index));
+  }, [data, enableRowSelection, isRowSelectable, getRowId]);
   const selectedOnPageCount = selectableRowIds.reduce(
     (acc, id) => selected.has(id) ? acc + 1 : acc,
     0
@@ -2271,13 +2291,16 @@ function Table(props) {
   };
   const clearSelection = () => setSelected(/* @__PURE__ */ new Set());
   const handleSortClick = (columnId) => {
-    setSort(nextSort(sort, columnId));
+    if (!onSortChange) return;
+    onSortChange(nextSort(effectiveSort, columnId));
   };
+  const handlePaginationChange = onPaginationChange ?? (() => {
+  });
   const totalColumnCount = columns.length + (enableRowSelection ? 1 : 0);
-  const paginationVisible = showPagination ?? totalRowCount > pagination.pageSize;
+  const paginationVisible = Boolean(pagination) && (showPagination ?? totalRowCount > pageSize);
   const sizeClasses = tableSizeClass[size];
   const showToolbar = enableRowSelection && bulkActions !== void 0 && selected.size > 0;
-  const skeletonCount = loadingRowCount ?? pagination.pageSize;
+  const skeletonCount = loadingRowCount ?? pageSize;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
     showToolbar && /* @__PURE__ */ jsxRuntime.jsx(
       Toolbar,
@@ -2326,8 +2349,8 @@ function Table(props) {
                       }
                     ) }) : null,
                     columns.map((column) => {
-                      const isSorted = sort.columnId === column.id;
-                      const ariaSort = isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none";
+                      const isSorted = effectiveSort.columnId === column.id;
+                      const ariaSort = isSorted ? effectiveSort.direction === "asc" ? "ascending" : "descending" : "none";
                       return /* @__PURE__ */ jsxRuntime.jsx(
                         "th",
                         {
@@ -2344,14 +2367,14 @@ function Table(props) {
                               type: "button",
                               onClick: () => handleSortClick(column.id),
                               className: "inline-flex items-center gap-1.5 font-inherit uppercase tracking-inherit text-inherit hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-                              "aria-label": sortAriaLabel(column, sort),
+                              "aria-label": sortAriaLabel(column, effectiveSort),
                               children: [
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: renderHeader(column.header) }),
                                 /* @__PURE__ */ jsxRuntime.jsx(
                                   SortIndicator,
                                   {
                                     active: isSorted,
-                                    direction: isSorted ? sort.direction : null
+                                    direction: isSorted ? effectiveSort.direction : null
                                   }
                                 )
                               ]
@@ -2371,14 +2394,14 @@ function Table(props) {
                   columnCount: totalColumnCount,
                   cellClassName: sizeClasses.cell
                 }
-              ) : pagedRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              ) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
                 "td",
                 {
                   colSpan: totalColumnCount,
                   className: cn(sizeClasses.cell, "py-10 text-center text-muted-foreground"),
                   children: emptyState ?? "No data"
                 }
-              ) }) : pagedRows.map((row, rowIndex) => {
+              ) }) : data.map((row, rowIndex) => {
                 const id = getRowId(row, rowIndex);
                 const isSelected = selected.has(id);
                 const rowSelectable = isRowSelectable ? isRowSelectable(row) : true;
@@ -2431,12 +2454,13 @@ function Table(props) {
     paginationVisible ? /* @__PURE__ */ jsxRuntime.jsx(
       Pagination,
       {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize,
+        pageIndex,
+        pageSize,
         pageCount,
         totalRowCount,
         pageSizeOptions,
-        onChange: setPagination
+        onChange: handlePaginationChange,
+        labels
       }
     ) : null
   ] });
@@ -2452,24 +2476,6 @@ function renderCell(column, row, rowIndex) {
   }
   return null;
 }
-function resolveSortGetter(column) {
-  if (column.sortAccessor) return column.sortAccessor;
-  if (column.accessor !== void 0) {
-    const key = column.accessor;
-    return (row) => row[key];
-  }
-  return null;
-}
-function compareValues(a, b) {
-  if (a === b) return 0;
-  if (a === null || a === void 0) return 1;
-  if (b === null || b === void 0) return -1;
-  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
-  if (typeof a === "number" && typeof b === "number") return a - b;
-  if (typeof a === "bigint" && typeof b === "bigint") return a < b ? -1 : 1;
-  if (typeof a === "boolean" && typeof b === "boolean") return a === b ? 0 : a ? 1 : -1;
-  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
-}
 function nextSort(current, columnId) {
   if (current.columnId !== columnId) return { columnId, direction: "asc" };
   if (current.direction === "asc") return { columnId, direction: "desc" };
@@ -2520,12 +2526,14 @@ function ListPage({
   getRowId,
   isLoading = false,
   loadingRowCount,
-  searchKeys,
+  searchValue,
+  onSearchChange,
   filters,
+  filterValues,
+  onFilterChange,
   enableRowSelection,
   bulkActions,
   pagination,
-  defaultPagination,
   onPaginationChange,
   totalCount,
   pageSizeOptions,
@@ -2535,64 +2543,36 @@ function ListPage({
   className
 }) {
   const labels = { ...DEFAULT_LABELS2, ...labelsProp };
-  const initialFilterValues = react.useMemo(() => {
-    const init = {};
+  const showSearch = onSearchChange !== void 0;
+  const showFilterBar = showSearch || Boolean(filters?.length);
+  const hasActiveQuery = react.useMemo(() => {
+    if ((searchValue ?? "").trim() !== "") return true;
     for (const f of filters ?? []) {
-      init[f.key] = f.defaultValue ?? f.options[0]?.value ?? "";
+      const current = filterValues?.[f.key];
+      const def = f.options[0]?.value ?? "";
+      if (current !== void 0 && current !== def) return true;
     }
-    return init;
-  }, [filters]);
-  const [search, setSearch] = react.useState("");
-  const [filterValues, setFilterValues] = react.useState(initialFilterValues);
-  const setFilter = (key, value) => {
-    setFilterValues((prev) => ({ ...prev, [key]: value }));
-  };
+    return false;
+  }, [searchValue, filters, filterValues]);
   const reset = () => {
-    setSearch("");
-    setFilterValues(initialFilterValues);
-  };
-  const hasActiveFilters = react.useMemo(() => {
-    if (search.trim() !== "") return true;
+    onSearchChange?.("");
     for (const f of filters ?? []) {
-      const current = filterValues[f.key];
-      const def = f.defaultValue ?? f.options[0]?.value ?? "";
-      if (current !== def) return true;
+      const def = f.options[0]?.value ?? "";
+      onFilterChange?.(f.key, def);
     }
-    return false;
-  }, [search, filters, filterValues]);
-  const filtered = react.useMemo(() => {
-    return data.filter((row) => {
-      if (search.trim() && searchKeys && searchKeys.length > 0) {
-        const q = search.trim().toLowerCase();
-        const matches = searchKeys.some((key) => {
-          const val = row[key];
-          return val != null && String(val).toLowerCase().includes(q);
-        });
-        if (!matches) return false;
-      }
-      for (const f of filters ?? []) {
-        const value = filterValues[f.key];
-        const def = f.defaultValue ?? f.options[0]?.value ?? "";
-        if (value !== void 0 && value !== def) {
-          if (f.accessor(row) !== value) return false;
-        }
-      }
-      return true;
-    });
-  }, [data, search, searchKeys, filters, filterValues]);
-  const showFilterBar = Boolean(searchKeys?.length) || Boolean(filters?.length);
-  const tableMode = isLoading ? "loading" : data.length === 0 && !hasActiveFilters ? "no-data" : filtered.length === 0 ? "no-results" : "rows";
+  };
+  const tableMode = isLoading ? "loading" : data.length === 0 && !hasActiveQuery ? "no-data" : data.length === 0 && hasActiveQuery ? "no-results" : "rows";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page", className: cn("space-y-6", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { title, description, bordered, actions }),
     showFilterBar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page-filter-bar", className: "flex flex-wrap items-center gap-3", children: [
-      searchKeys?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+      showSearch ? /* @__PURE__ */ jsxRuntime.jsx(
         Input,
         {
           type: "search",
           placeholder: labels.searchPlaceholder,
           "aria-label": labels.searchAriaLabel || labels.searchPlaceholder,
-          value: search,
-          onChange: (e) => setSearch(e.target.value),
+          value: searchValue ?? "",
+          onChange: (e) => onSearchChange?.(e.target.value),
           leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
           wrapperClassName: "sm:max-w-xs",
           disabled: isLoading
@@ -2601,16 +2581,16 @@ function ListPage({
       filters?.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
         Select,
         {
-          "aria-label": f.ariaLabel,
-          value: filterValues[f.key],
-          onValueChange: (v) => setFilter(f.key, v),
+          "aria-label": typeof f.label === "string" ? f.label : f.key,
+          value: filterValues?.[f.key] ?? f.options[0]?.value ?? "",
+          onValueChange: (v) => onFilterChange?.(f.key, v),
           options: f.options,
           className: FILTER_WIDTH_CLASS[f.width ?? "default"],
           disabled: isLoading
         },
         f.key
       )),
-      hasActiveFilters && !isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: reset, children: [
+      hasActiveQuery && !isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: reset, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}),
         labels.reset
       ] }) : null
@@ -2619,7 +2599,7 @@ function ListPage({
       Table,
       {
         "aria-label": typeof title === "string" ? title : void 0,
-        data: filtered,
+        data,
         columns,
         getRowId,
         enableRowSelection,
@@ -2627,10 +2607,10 @@ function ListPage({
         loading: isLoading,
         loadingRowCount,
         pagination,
-        defaultPagination,
         onPaginationChange,
         totalCount,
-        pageSizeOptions
+        pageSizeOptions,
+        labels
       }
     ) : tableMode === "no-data" ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",