@dimaan/ui 0.0.23 → 0.0.26

package/dist/index.js

@@ -3,7 +3,7 @@ import { forwardRef, Children, isValidElement, cloneElement, createContext, useR
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Loader2, Check, Minus, Calendar, X, ChevronLeft, ChevronRight, Upload, File as File$1, ChevronDown, Search, ChevronUp, ArrowLeft, Menu, FileQuestion, ChevronsUpDown, Inbox, RefreshCw, SearchX } from 'lucide-react';
+import { Loader2, Check, Minus, Calendar, X, ChevronLeft, ChevronRight, Upload, File as File$1, ChevronDown, Search, ChevronUp, ArrowLeft, Menu, FileQuestion, ChevronsUpDown, Inbox, RefreshCw, SearchX, Trash2, Pencil, Eye } from 'lucide-react';
 import { DirectionProvider } from '@radix-ui/react-direction';
 import { Link, useLocation, useResolvedPath, useNavigate } from 'react-router-dom';
 import * as RadixPopover from '@radix-ui/react-popover';
@@ -108,7 +108,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 = forwardRef(function Button2({
   variant = "primary",
   size = "md",
@@ -2920,37 +2920,130 @@ function hasActiveFilters(filters, values) {
   }
   return false;
 }
+function DebouncedFilterInput({
+  value,
+  onChange,
+  debounceMs,
+  ariaLabel,
+  placeholder,
+  wrapperClassName,
+  disabled
+}) {
+  const [local, setLocal] = useState(value);
+  const timerRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    setLocal(value);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, [value]);
+  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__ */ jsx(
+    Input,
+    {
+      type: "search",
+      "aria-label": ariaLabel,
+      placeholder,
+      value: local,
+      onChange: (e) => handleChange(e.target.value),
+      leadingIcon: /* @__PURE__ */ jsx(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] = useState(values ?? {});
+  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__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsx(
+    FilterControl,
+    {
+      filter,
+      value: effectiveValues[filter.key],
+      onChange: handleChange,
+      disabled,
+      mode
+    },
+    filter.key
+  )) });
+  const resetButton = active && !disabled ? /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
+    /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
+    labels.reset
+  ] }) : null;
+  if (manual) {
+    return /* @__PURE__ */ jsxs("form", { "data-slot": "list-page-filter-bar", className: "space-y-3", onSubmit: apply, children: [
+      controls,
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        resetButton,
+        /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: disabled || !dirty, children: labels.apply ?? "Apply" })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { "data-slot": "list-page-filter-bar", className: "space-y-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsx(
-      FilterControl,
-      {
-        filter,
-        value: values?.[filter.key],
-        onChange,
-        disabled
-      },
-      filter.key
-    )) }),
-    active && !disabled ? /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
-      /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
-      labels.reset
-    ] }) }) : null
+    controls,
+    resetButton ? /* @__PURE__ */ 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) {
@@ -2968,14 +3061,13 @@ function FilterControl({ filter, value, onChange, disabled }) {
       );
     case "text":
       return /* @__PURE__ */ jsx(
-        Input,
+        DebouncedFilterInput,
         {
-          type: "search",
-          "aria-label": ariaLabel,
-          placeholder: filter.placeholder,
           value: value ?? "",
-          onChange: (e) => onChange?.(filter.key, e.target.value),
-          leadingIcon: /* @__PURE__ */ jsx(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
         }
@@ -3007,13 +3099,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,
@@ -3027,6 +3128,7 @@ function ListPage({
   filters,
   filterValues,
   onFilterChange,
+  filterMode = "manual",
   enableRowSelection,
   bulkActions,
   pagination,
@@ -3038,7 +3140,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 = useMemo(
     () => hasActiveFilters(filters, filterValues),
@@ -3058,8 +3161,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__ */ jsx(
@@ -3245,6 +3348,57 @@ var RadioGroupItem = forwardRef(function RadioGroupItem2({ className, radioSize
   );
 });
 
+// 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__ */ jsx(Eye, {}), label: "View", destructive: false },
+  edit: { icon: /* @__PURE__ */ jsx(Pencil, {}), label: "Edit", destructive: false },
+  delete: { icon: /* @__PURE__ */ jsx(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__ */ jsx("div", { className: cn(rowActionsBaseClass, className), children: actions.map((action, index) => {
+    const resolved = resolveAction(action);
+    return /* @__PURE__ */ 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",
@@ -3481,6 +3635,6 @@ function Tooltip({
   );
 }
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppShell, Avatar, Badge, Button, Checkbox, ConfirmDialogProvider, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DetailPage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, FileUpload2 as FileUpload, FormPage, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, MultiSelect, PageHeader, RadioGroup, RadioGroupItem, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, Toaster, Tooltip, TooltipProvider, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, fileUploadBaseClass, fileUploadDropzoneClass, fileUploadFileNameClass, fileUploadFileRowClass, fileUploadFileSizeClass, fileUploadHintClass, fileUploadIconClass, fileUploadPromptClass, fileUploadRemoveClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppShell, Avatar, Badge, Button, Checkbox, ConfirmDialogProvider, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DetailPage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, FileUpload2 as FileUpload, FormPage, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, MultiSelect, PageHeader, RadioGroup, RadioGroupItem, RowActions, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, Toaster, Tooltip, TooltipProvider, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, datePickerCalendarClass, datePickerCaptionClass, datePickerContentClass, datePickerDayBaseClass, datePickerDayWrapperClass, datePickerDisabledClass, datePickerMonthClass, datePickerMonthGridClass, datePickerMonthsClass, datePickerNavButtonClass, datePickerNavClass, datePickerOutsideClass, datePickerPlaceholderClass, datePickerSelectedClass, datePickerTodayClass, datePickerTriggerBaseClass, datePickerTriggerSizeClass, datePickerTriggerVariantClass, datePickerValueClass, datePickerWeekClass, datePickerWeekdayClass, datePickerWeekdaysClass, detailPageBaseClass, detailPageBodyClass, detailPageEmptyClass, detailPageSkeletonRowClass, dialogCloseButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogOverlayClass, dialogTitleClass, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, fileUploadBaseClass, fileUploadDropzoneClass, fileUploadFileNameClass, fileUploadFileRowClass, fileUploadFileSizeClass, fileUploadHintClass, fileUploadIconClass, fileUploadPromptClass, fileUploadRemoveClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, multiSelectChipClass, multiSelectChipRemoveClass, multiSelectContentClass, multiSelectEmptyClass, multiSelectListClass, multiSelectOptionClass, multiSelectSearchRowClass, multiSelectTriggerSizeClass, multiSelectValueRowClass, pageHeaderActionsClass, pageHeaderBackClass, pageHeaderBackIconClass, pageHeaderBaseClass, pageHeaderBorderedClass, pageHeaderBreadcrumbsClass, pageHeaderDescriptionClass, pageHeaderTitleBlockClass, pageHeaderTitleClass, pageHeaderTitleRowClass, radioGroupBaseClass, radioGroupOrientationClass, radioIndicatorBaseClass, radioIndicatorDotClass, radioIndicatorSizeClass, radioItemBaseClass, radioItemSizeClass, radioLabelSizeClass, radioOptionRowClass, rowActionsBaseClass, rowActionsDestructiveClass, selectBaseClass, selectSizeClass, selectVariantClass, switchThumbBaseClass, switchThumbClass, switchTrackBaseClass, switchTrackClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, toastClassNames, tooltipArrowClass, tooltipContentClass, useConfirm, useDashboardLayout, useDirection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map