@dimaan/ui 0.0.23 → 0.0.26

package/README.md

@@ -4,6 +4,7 @@ Shared React UI component library for Diman company projects.
 
 Built with **React 19**, **TypeScript**, **Tailwind CSS v4**, and a CSS-first design token system. Distributed as dual ESM/CJS with full type definitions, intended for Vite-based dashboard apps.
 
+
 ## Documentation
 
 - **[USAGE.md](USAGE.md)** — full consumer guide: install, Tailwind setup, framework-specific examples (Next.js / Vite / Remix), theming, and pitfalls.

package/dist/index.cjs

@@ -136,7 +136,7 @@ var buttonSizeClass = {
   icon: "h-9 w-9 shrink-0 rounded-md p-0",
   "icon-sm": "h-8 w-8 shrink-0 rounded-md p-0"
 };
-var buttonBaseClass = "group/button relative inline-flex items-center justify-center font-medium select-none whitespace-nowrap outline-none transition-[background-color,color,box-shadow,opacity] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+var buttonBaseClass = "group/button relative inline-flex items-center justify-center font-medium select-none whitespace-nowrap outline-none transition-[background-color,color,box-shadow,opacity,transform] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 var Button = react.forwardRef(function Button2({
   variant = "primary",
   size = "md",
@@ -2948,37 +2948,130 @@ function hasActiveFilters(filters, values) {
   }
   return false;
 }
+function DebouncedFilterInput({
+  value,
+  onChange,
+  debounceMs,
+  ariaLabel,
+  placeholder,
+  wrapperClassName,
+  disabled
+}) {
+  const [local, setLocal] = react.useState(value);
+  const timerRef = react.useRef(null);
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  react.useEffect(() => {
+    setLocal(value);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, [value]);
+  react.useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const handleChange = (next) => {
+    setLocal(next);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (debounceMs <= 0) {
+      onChangeRef.current(next);
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      onChangeRef.current(next);
+    }, debounceMs);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      type: "search",
+      "aria-label": ariaLabel,
+      placeholder,
+      value: local,
+      onChange: (e) => handleChange(e.target.value),
+      leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4" }),
+      wrapperClassName,
+      disabled
+    }
+  );
+}
+var DEFAULT_TEXT_DEBOUNCE_MS = 400;
 function ListPageFilterBar({
   filters,
   values,
   onChange,
   disabled = false,
+  mode = "live",
   labels
 }) {
+  const manual = mode === "manual";
   const active = hasActiveFilters(filters, values);
+  const appliedKey = JSON.stringify(values ?? {});
+  const [draft, setDraft] = react.useState(values ?? {});
+  react.useEffect(() => {
+    if (manual) setDraft(values ?? {});
+  }, [appliedKey, manual]);
+  const effectiveValues = manual ? draft : values ?? {};
+  const handleChange = (key, value) => {
+    if (manual) {
+      setDraft((prev) => ({ ...prev, [key]: value }));
+    } else {
+      onChange?.(key, value);
+    }
+  };
+  const dirty = manual && (filters ?? []).some((filter) => {
+    const next = draft[filter.key] ?? filterDefaultValue(filter);
+    const current = values?.[filter.key] ?? filterDefaultValue(filter);
+    return next !== current;
+  });
+  const apply = (event) => {
+    event.preventDefault();
+    for (const filter of filters ?? []) {
+      const next = draft[filter.key] ?? filterDefaultValue(filter);
+      const current = values?.[filter.key] ?? filterDefaultValue(filter);
+      if (next !== current) onChange?.(filter.key, next);
+    }
+  };
   const reset = () => {
     for (const filter of filters ?? []) {
       onChange?.(filter.key, filterDefaultValue(filter));
     }
   };
+  const controls = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
+    FilterControl,
+    {
+      filter,
+      value: effectiveValues[filter.key],
+      onChange: handleChange,
+      disabled,
+      mode
+    },
+    filter.key
+  )) });
+  const resetButton = active && !disabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-4" }),
+    labels.reset
+  ] }) : null;
+  if (manual) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { "data-slot": "list-page-filter-bar", className: "space-y-3", onSubmit: apply, children: [
+      controls,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+        resetButton,
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", disabled: disabled || !dirty, children: labels.apply ?? "Apply" })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page-filter-bar", className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
-      FilterControl,
-      {
-        filter,
-        value: values?.[filter.key],
-        onChange,
-        disabled
-      },
-      filter.key
-    )) }),
-    active && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-4" }),
-      labels.reset
-    ] }) }) : null
+    controls,
+    resetButton ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: resetButton }) : null
   ] });
 }
-function FilterControl({ filter, value, onChange, disabled }) {
+function FilterControl({ filter, value, onChange, disabled, mode }) {
   const spanClass = FILTER_SPAN_CLASS[filter.width ?? "default"];
   const ariaLabel = typeof filter.label === "string" ? filter.label : filter.key;
   switch (filter.type) {
@@ -2996,14 +3089,13 @@ function FilterControl({ filter, value, onChange, disabled }) {
       );
     case "text":
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
+        DebouncedFilterInput,
         {
-          type: "search",
-          "aria-label": ariaLabel,
-          placeholder: filter.placeholder,
           value: value ?? "",
-          onChange: (e) => onChange?.(filter.key, e.target.value),
-          leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4" }),
+          onChange: (v) => onChange?.(filter.key, v),
+          debounceMs: mode === "live" ? filter.debounceMs ?? DEFAULT_TEXT_DEBOUNCE_MS : 0,
+          ariaLabel,
+          placeholder: filter.placeholder,
           wrapperClassName: spanClass,
           disabled
         }
@@ -3035,13 +3127,22 @@ function FilterControl({ filter, value, onChange, disabled }) {
       );
   }
 }
-var DEFAULT_LABELS = {
+var EN_LABELS2 = {
   reset: "Reset filters",
+  apply: "Apply",
   emptyTitle: "No results",
   emptyDescription: "Try clearing the search or adjusting the filters.",
   noDataTitle: "No data yet",
   noDataDescription: "Nothing has been added here so far."
 };
+var AR_LABELS2 = {
+  reset: "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0641\u0644\u0627\u062A\u0631",
+  apply: "\u062A\u0637\u0628\u064A\u0642",
+  emptyTitle: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C",
+  emptyDescription: "\u062C\u0631\u0651\u0628 \u0645\u0633\u062D \u0627\u0644\u0628\u062D\u062B \u0623\u0648 \u062A\u0639\u062F\u064A\u0644 \u0627\u0644\u0641\u0644\u0627\u062A\u0631.",
+  noDataTitle: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0628\u064A\u0627\u0646\u0627\u062A \u0628\u0639\u062F",
+  noDataDescription: "\u0644\u0645 \u062A\u062A\u0645 \u0625\u0636\u0627\u0641\u0629 \u0623\u064A \u0634\u064A\u0621 \u0647\u0646\u0627 \u062D\u062A\u0649 \u0627\u0644\u0622\u0646."
+};
 function ListPage({
   title,
   description,
@@ -3055,6 +3156,7 @@ function ListPage({
   filters,
   filterValues,
   onFilterChange,
+  filterMode = "manual",
   enableRowSelection,
   bulkActions,
   pagination,
@@ -3066,7 +3168,8 @@ function ListPage({
   labels: labelsProp,
   className
 }) {
-  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const dir = useDirection();
+  const labels = { ...dir === "rtl" ? AR_LABELS2 : EN_LABELS2, ...labelsProp };
   const showFilterBar = Boolean(filters?.length);
   const hasActiveQuery = react.useMemo(
     () => hasActiveFilters(filters, filterValues),
@@ -3086,8 +3189,8 @@ function ListPage({
         filters,
         values: filterValues,
         onChange: onFilterChange,
-        disabled: isLoading,
-        labels: { reset: labels.reset }
+        mode: filterMode,
+        labels: { reset: labels.reset, apply: labels.apply }
       }
     ) : null,
     tableMode === "loading" || tableMode === "rows" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3273,6 +3376,57 @@ var RadioGroupItem = react.forwardRef(function RadioGroupItem2({ className, radi
   );
 });
 
+// src/components/row-actions/rowActionsVariants.ts
+var rowActionsBaseClass = "inline-flex items-center gap-1";
+var rowActionsDestructiveClass = "text-destructive hover:bg-destructive/10 hover:text-destructive focus-visible:ring-destructive/40";
+var PRESETS = {
+  view: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, {}), label: "View", destructive: false },
+  edit: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {}), label: "Edit", destructive: false },
+  delete: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, {}), label: "Delete", destructive: true }
+};
+function isPreset(action) {
+  return "kind" in action;
+}
+function resolveAction(action) {
+  if (isPreset(action)) {
+    const preset = PRESETS[action.kind];
+    return {
+      icon: preset.icon,
+      label: action.label ?? preset.label,
+      destructive: preset.destructive,
+      onClick: action.onClick,
+      disabled: action.disabled ?? false
+    };
+  }
+  return {
+    icon: action.icon,
+    label: action.label,
+    destructive: action.variant === "destructive",
+    onClick: action.onClick,
+    disabled: action.disabled ?? false
+  };
+}
+function RowActions({ actions, size = "icon-sm", className }) {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(rowActionsBaseClass, className), children: actions.map((action, index) => {
+    const resolved = resolveAction(action);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size,
+        "aria-label": resolved.label,
+        disabled: resolved.disabled,
+        onClick: resolved.onClick,
+        className: resolved.destructive ? rowActionsDestructiveClass : void 0,
+        children: resolved.icon
+      },
+      index
+    );
+  }) });
+}
+
 // src/components/switch/switchVariants.ts
 var switchTrackClass = {
   sm: "h-4 w-7",
@@ -3571,6 +3725,7 @@ exports.MultiSelect = MultiSelect;
 exports.PageHeader = PageHeader;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
+exports.RowActions = RowActions;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.SidebarFooter = SidebarFooter;
@@ -3684,6 +3839,8 @@ exports.radioItemBaseClass = radioItemBaseClass;
 exports.radioItemSizeClass = radioItemSizeClass;
 exports.radioLabelSizeClass = radioLabelSizeClass;
 exports.radioOptionRowClass = radioOptionRowClass;
+exports.rowActionsBaseClass = rowActionsBaseClass;
+exports.rowActionsDestructiveClass = rowActionsDestructiveClass;
 exports.selectBaseClass = selectBaseClass;
 exports.selectSizeClass = selectSizeClass;
 exports.selectVariantClass = selectVariantClass;