@dimaan/ui 0.0.12 → 0.0.14

package/dist/index.js

@@ -1,11 +1,13 @@
 import * as React10 from 'react';
-import React10__default, { createContext, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useLayoutEffect, useId, createElement, useCallback, useState, useEffect, useContext, useMemo } from 'react';
+import React10__default, { createContext, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useLayoutEffect, useId, useState, useMemo, useCallback, createElement, useEffect, useContext } from 'react';
 import * as ReactDOM from 'react-dom';
 import { DirectionProvider } from '@radix-ui/react-direction';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Loader2, Check, Minus, ChevronDown, ChevronUp, ArrowLeft, ChevronLeft, Menu, ChevronsUpDown, Search, RefreshCw, ChevronRight } from 'lucide-react';
+import { Loader2, Check, Minus, Calendar, X, ChevronLeft, ChevronRight, ChevronDown, ChevronUp, ArrowLeft, Menu, ChevronsUpDown, Search, RefreshCw, Inbox, SearchX } from 'lucide-react';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { DayPicker } from 'react-day-picker';
 import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
 import { useFormContext, Controller } from 'react-hook-form';
 import * as RadixSelect from '@radix-ui/react-select';
@@ -16096,6 +16098,255 @@ var Checkbox = forwardRef(function Checkbox2({
   ] });
 });
 
+// src/components/date-picker/datePickerVariants.ts
+var datePickerTriggerVariantClass = {
+  default: "border border-input bg-background hover:border-ring",
+  filled: "border border-transparent bg-muted hover:bg-muted/80",
+  ghost: "border border-transparent bg-transparent hover:bg-accent"
+};
+var datePickerTriggerSizeClass = {
+  sm: "h-8 rounded-md ps-2.5 pe-8 text-sm gap-1.5",
+  md: "h-9 rounded-md ps-3 pe-9 text-sm gap-2",
+  lg: "h-11 rounded-md ps-4 pe-10 text-base gap-2"
+};
+var datePickerTriggerBaseClass = "group/datepicker relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
+var datePickerPlaceholderClass = "truncate text-muted-foreground";
+var datePickerValueClass = "truncate text-foreground";
+var datePickerContentClass = "z-50 overflow-hidden rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+var datePickerCalendarClass = "text-sm";
+var datePickerCaptionClass = "flex items-center justify-between gap-2 pb-2 text-sm font-semibold";
+var datePickerNavButtonClass = "inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+var datePickerDayWrapperClass = "p-0 text-center";
+var datePickerDayBaseClass = "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-foreground font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+var datePickerSelectedClass = "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary [&_button]:hover:text-primary-foreground";
+var datePickerTodayClass = "[&_button]:font-semibold [&_button]:ring-1 [&_button]:ring-inset [&_button]:ring-ring/40";
+var datePickerOutsideClass = "[&_button]:text-muted-foreground [&_button]:opacity-60";
+var datePickerDisabledClass = "[&_button]:pointer-events-none [&_button]:opacity-40";
+var datePickerWeekdayClass = "h-8 w-8 text-center text-xs font-medium text-muted-foreground";
+var datePickerWeekClass = "flex w-full";
+var datePickerWeekdaysClass = "flex w-full";
+var datePickerMonthGridClass = "w-full border-collapse";
+var datePickerMonthsClass = "flex flex-col gap-3";
+var datePickerMonthClass = "flex flex-col gap-2";
+var datePickerNavClass = "flex items-center gap-1";
+var DEFAULT_FORMAT_OPTIONS = { dateStyle: "medium" };
+var ISO_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+var DatePicker = forwardRef(function DatePicker2({
+  variant = "default",
+  inputSize = "md",
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  onChange,
+  onBlur,
+  name,
+  id,
+  disabled,
+  required,
+  min,
+  max,
+  placeholder,
+  clearable = true,
+  clearLabel = "Clear date",
+  locale,
+  formatOptions = DEFAULT_FORMAT_OPTIONS,
+  side = "bottom",
+  align = "start",
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  className,
+  contentClassName
+}, ref) {
+  const generatedId = useId();
+  const triggerId = id ?? generatedId;
+  const dir = useDirection();
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const selectedDate = useMemo(() => parseIsoDate(value), [value]);
+  const minDate = useMemo(() => parseIsoDate(min), [min]);
+  const maxDate = useMemo(() => parseIsoDate(max), [max]);
+  const disabledMatcher = useMemo(() => {
+    const matchers = [];
+    if (minDate) matchers.push({ before: minDate });
+    if (maxDate) matchers.push({ after: maxDate });
+    return matchers.length > 0 ? matchers : void 0;
+  }, [minDate, maxDate]);
+  const localeForFormat = readDocumentLocale();
+  const displayValue = useMemo(() => {
+    if (!selectedDate) return null;
+    try {
+      return new Intl.DateTimeFormat(localeForFormat, formatOptions).format(selectedDate);
+    } catch {
+      return formatIsoDate(selectedDate);
+    }
+  }, [selectedDate, localeForFormat, formatOptions]);
+  const emitChange = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      onValueChange?.(next);
+      if (onChange) {
+        const synthetic = {
+          target: { value: next, name },
+          currentTarget: { value: next, name },
+          type: "change"
+        };
+        onChange(synthetic);
+      }
+    },
+    [isControlled, onValueChange, onChange, name]
+  );
+  const handleSelect = useCallback(
+    (date) => {
+      if (!date) {
+        emitChange("");
+        return;
+      }
+      emitChange(formatIsoDate(date));
+      setOpen(false);
+    },
+    [emitChange]
+  );
+  const handleClear = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      emitChange("");
+    },
+    [emitChange]
+  );
+  const showClear = clearable && !disabled && Boolean(value);
+  const PrevIcon = dir === "rtl" ? ChevronRight : ChevronLeft;
+  const NextIcon = dir === "rtl" ? ChevronLeft : ChevronRight;
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative inline-flex w-full", children: [
+      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          id: triggerId,
+          type: "button",
+          disabled,
+          "aria-label": ariaLabel,
+          "aria-invalid": ariaInvalid,
+          "aria-describedby": ariaDescribedBy,
+          onBlur,
+          "data-slot": "date-picker-trigger",
+          "data-state": open ? "open" : "closed",
+          "data-placeholder": value ? void 0 : "",
+          className: cn(
+            datePickerTriggerBaseClass,
+            datePickerTriggerVariantClass[variant],
+            datePickerTriggerSizeClass[inputSize],
+            showClear && (inputSize === "lg" ? "pe-16" : "pe-14"),
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: displayValue ? datePickerValueClass : datePickerPlaceholderClass, children: displayValue ?? placeholder ?? "" }),
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2 text-muted-foreground"
+              }
+            )
+          ]
+        }
+      ) }),
+      showClear ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": clearLabel,
+          onClick: handleClear,
+          "data-slot": "date-picker-clear",
+          className: "absolute end-9 top-1/2 z-10 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
+        }
+      ) : null,
+      name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value, required, readOnly: true }) : null
+    ] }),
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        side,
+        align,
+        sideOffset: 4,
+        "data-slot": "date-picker-content",
+        className: cn(datePickerContentClass, contentClassName),
+        onOpenAutoFocus: (autoFocusEvent) => {
+          autoFocusEvent.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx(
+          DayPicker,
+          {
+            mode: "single",
+            dir,
+            selected: selectedDate ?? void 0,
+            defaultMonth: selectedDate ?? void 0,
+            onSelect: handleSelect,
+            disabled: disabledMatcher,
+            locale,
+            showOutsideDays: true,
+            className: datePickerCalendarClass,
+            classNames: {
+              months: datePickerMonthsClass,
+              month: datePickerMonthClass,
+              month_caption: datePickerCaptionClass,
+              nav: datePickerNavClass,
+              button_previous: datePickerNavButtonClass,
+              button_next: datePickerNavButtonClass,
+              month_grid: datePickerMonthGridClass,
+              weekdays: datePickerWeekdaysClass,
+              weekday: datePickerWeekdayClass,
+              week: datePickerWeekClass,
+              day: datePickerDayWrapperClass,
+              day_button: datePickerDayBaseClass,
+              selected: datePickerSelectedClass,
+              today: datePickerTodayClass,
+              outside: datePickerOutsideClass,
+              disabled: datePickerDisabledClass
+            },
+            components: {
+              Chevron: ({ orientation }) => {
+                const Icon2 = orientation === "right" ? NextIcon : PrevIcon;
+                return /* @__PURE__ */ jsx(Icon2, { "aria-hidden": "true", className: "size-4" });
+              }
+            }
+          }
+        )
+      }
+    ) })
+  ] });
+});
+function parseIsoDate(value) {
+  if (!value) return void 0;
+  const match = value.match(ISO_DATE_PATTERN);
+  if (!match) return void 0;
+  const year = Number(match[1]);
+  const month = Number(match[2]) - 1;
+  const day = Number(match[3]);
+  const date = new Date(year, month, day);
+  if (Number.isNaN(date.getTime())) return void 0;
+  return date;
+}
+function formatIsoDate(date) {
+  const year = String(date.getFullYear()).padStart(4, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function readDocumentLocale() {
+  if (typeof document === "undefined") return void 0;
+  const lang = document.documentElement.getAttribute("lang");
+  return lang || void 0;
+}
+
 // src/components/dropdown-menu/dropdownMenuVariants.ts
 var dropdownMenuContentClass = "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
 var dropdownMenuItemBaseClass = "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
@@ -16384,6 +16635,126 @@ function mergeRefs2(...refs) {
   };
 }
 
+// src/components/page-header/PageHeader.tsx
+var import_react_router_dom2 = __toESM(require_dist2());
+
+// src/components/page-header/pageHeaderVariants.ts
+var pageHeaderBaseClass = "flex w-full flex-col gap-3";
+var pageHeaderBorderedClass = "border-b border-border pb-4";
+var pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
+var pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
+var pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
+var pageHeaderDescriptionClass = "text-sm text-muted-foreground";
+var pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
+var pageHeaderBackClass = "inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md";
+var pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
+var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
+var PageHeader = forwardRef(function PageHeader2({
+  title,
+  description,
+  breadcrumbs,
+  back,
+  actions,
+  as = "h1",
+  bordered = false,
+  className,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      "data-slot": "page-header",
+      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
+      ...props,
+      children: [
+        breadcrumbs ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
+        back ? /* @__PURE__ */ jsx(PageHeaderBack, { ...back }) : null,
+        /* @__PURE__ */ jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
+          /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleBlockClass, children: [
+            createElement(
+              as,
+              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
+              title
+            ),
+            description ? /* @__PURE__ */ jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
+        ] })
+      ]
+    }
+  );
+});
+function PageHeaderBack({ label = "Back", to, onClick, render }) {
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+  if (render) {
+    return render({
+      to,
+      onClick,
+      className: pageHeaderBackClass,
+      children: inner
+    });
+  }
+  if (to) {
+    return /* @__PURE__ */ jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: pageHeaderBackClass, children: inner });
+}
+
+// src/components/form-page/formPageVariants.ts
+var formPageBaseClass = "flex w-full flex-col gap-6";
+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_COUNT = 6;
+function FormPage({
+  title,
+  description,
+  back,
+  bordered = true,
+  onSubmit,
+  isLoading = false,
+  loadingRowCount = DEFAULT_SKELETON_ROW_COUNT,
+  actions,
+  children,
+  className,
+  formClassName,
+  bodyClassName,
+  actionsClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
+    /* @__PURE__ */ jsx(PageHeader, { title, description, back, bordered }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit,
+        "aria-busy": isLoading || void 0,
+        noValidate: true,
+        "data-slot": "form-page-form",
+        className: cn("flex flex-1 flex-col gap-6", formClassName),
+        children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "form-page-body", className: cn(formPageBodyClass, bodyClassName), children: isLoading ? /* @__PURE__ */ jsx(FormPageSkeleton, { rowCount: loadingRowCount }) : children }),
+          actions !== null && actions !== void 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "form-page-actions",
+              className: cn(formPageActionsBarClass, actionsClassName),
+              children: actions
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function FormPageSkeleton({ rowCount }) {
+  const rows = Array.from({ length: Math.max(1, rowCount) }, (_, i) => `form-page-skeleton-${i}`);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", "aria-hidden": "true", children: rows.map((key) => /* @__PURE__ */ jsx("div", { "data-testid": "form-page-skeleton-row", className: formPageSkeletonRowClass }, key)) });
+}
+
 // src/components/input/inputVariants.ts
 var inputVariantClass = {
   default: "border border-input bg-background hover:border-ring",
@@ -16499,75 +16870,6 @@ function LanguageSwitcher({
   );
 }
 
-// src/components/page-header/PageHeader.tsx
-var import_react_router_dom2 = __toESM(require_dist2());
-
-// src/components/page-header/pageHeaderVariants.ts
-var pageHeaderBaseClass = "flex w-full flex-col gap-3";
-var pageHeaderBorderedClass = "border-b border-border pb-4";
-var pageHeaderTitleRowClass = "flex flex-wrap items-start justify-between gap-3 sm:gap-4";
-var pageHeaderTitleBlockClass = "min-w-0 flex-1 space-y-1";
-var pageHeaderTitleClass = "text-2xl font-semibold tracking-tight text-foreground";
-var pageHeaderDescriptionClass = "text-sm text-muted-foreground";
-var pageHeaderActionsClass = "flex shrink-0 flex-wrap items-center gap-2";
-var pageHeaderBackClass = "inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-md";
-var pageHeaderBackIconClass = "size-4 shrink-0 rtl:rotate-180";
-var pageHeaderBreadcrumbsClass = "text-xs text-muted-foreground";
-var PageHeader = forwardRef(function PageHeader2({
-  title,
-  description,
-  breadcrumbs,
-  back,
-  actions,
-  as = "h1",
-  bordered = false,
-  className,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs(
-    "header",
-    {
-      ref,
-      "data-slot": "page-header",
-      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
-      ...props,
-      children: [
-        breadcrumbs ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
-        back ? /* @__PURE__ */ jsx(PageHeaderBack, { ...back }) : null,
-        /* @__PURE__ */ jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
-          /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleBlockClass, children: [
-            createElement(
-              as,
-              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
-              title
-            ),
-            description ? /* @__PURE__ */ jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
-          ] }),
-          actions ? /* @__PURE__ */ jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
-        ] })
-      ]
-    }
-  );
-});
-function PageHeaderBack({ label = "Back", to, onClick, render }) {
-  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx("span", { children: label })
-  ] });
-  if (render) {
-    return render({
-      to,
-      onClick,
-      className: pageHeaderBackClass,
-      children: inner
-    });
-  }
-  if (to) {
-    return /* @__PURE__ */ jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: pageHeaderBackClass, children: inner });
-}
-
 // src/components/select/selectVariants.ts
 var selectVariantClass = {
   default: "border border-input bg-background hover:border-ring",
@@ -17185,7 +17487,9 @@ var DEFAULT_LABELS = {
   searchAriaLabel: "Search",
   reset: "Reset filters",
   emptyTitle: "No results",
-  emptyDescription: "Try clearing the search or adjusting the filters."
+  emptyDescription: "Try clearing the search or adjusting the filters.",
+  noDataTitle: "No data yet",
+  noDataDescription: "Nothing has been added here so far."
 };
 var FILTER_WIDTH_CLASS = {
   narrow: "w-32",
@@ -17200,11 +17504,14 @@ function ListPage({
   data: data2,
   columns,
   getRowId,
+  isLoading = false,
+  loadingRowCount,
   searchKeys,
   filters,
   enableRowSelection,
   bulkActions,
   emptyState,
+  noDataState,
   labels: labelsProp,
   className
 }) {
@@ -17255,6 +17562,7 @@ function ListPage({
     });
   }, [data2, search, searchKeys, filters, filterValues]);
   const showFilterBar = Boolean(searchKeys?.length) || Boolean(filters?.length);
+  const tableMode = isLoading ? "loading" : data2.length === 0 && !hasActiveFilters ? "no-data" : filtered.length === 0 ? "no-results" : "rows";
   return /* @__PURE__ */ jsxs("div", { "data-slot": "list-page", className: cn("space-y-6", className), children: [
     /* @__PURE__ */ jsx(PageHeader, { title, description, bordered, actions }),
     showFilterBar ? /* @__PURE__ */ jsxs("div", { "data-slot": "list-page-filter-bar", className: "flex flex-wrap items-center gap-3", children: [
@@ -17267,7 +17575,8 @@ function ListPage({
           value: search,
           onChange: (e) => setSearch(e.target.value),
           leadingIcon: /* @__PURE__ */ jsx(Search, {}),
-          wrapperClassName: "sm:max-w-xs"
+          wrapperClassName: "sm:max-w-xs",
+          disabled: isLoading
         }
       ) : null,
       filters?.map((f) => /* @__PURE__ */ jsx(
@@ -17277,16 +17586,17 @@ function ListPage({
           value: filterValues[f.key],
           onValueChange: (v) => setFilter(f.key, v),
           options: f.options,
-          className: FILTER_WIDTH_CLASS[f.width ?? "default"]
+          className: FILTER_WIDTH_CLASS[f.width ?? "default"],
+          disabled: isLoading
         },
         f.key
       )),
-      hasActiveFilters ? /* @__PURE__ */ jsxs(Button, { variant: "ghost", onClick: reset, children: [
+      hasActiveFilters && !isLoading ? /* @__PURE__ */ jsxs(Button, { variant: "ghost", onClick: reset, children: [
         /* @__PURE__ */ jsx(RefreshCw, {}),
         labels.reset
       ] }) : null
     ] }) : null,
-    filtered.length > 0 ? /* @__PURE__ */ jsx(
+    tableMode === "loading" || tableMode === "rows" ? /* @__PURE__ */ jsx(
       Table,
       {
         "aria-label": typeof title === "string" ? title : void 0,
@@ -17294,17 +17604,48 @@ function ListPage({
         columns,
         getRowId,
         enableRowSelection,
-        bulkActions
+        bulkActions,
+        loading: isLoading,
+        loadingRowCount
       }
-    ) : /* @__PURE__ */ jsx("div", { "data-slot": "list-page-empty", className: "rounded-md border border-border", children: /* @__PURE__ */ jsx(
-      EmptyState,
+    ) : tableMode === "no-data" ? /* @__PURE__ */ jsx(
+      "div",
       {
-        icon: emptyState?.icon,
-        title: emptyState?.title ?? labels.emptyTitle,
-        description: emptyState?.description ?? labels.emptyDescription,
-        action: emptyState?.action !== void 0 ? emptyState.action : hasActiveFilters ? /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: reset, children: labels.reset }) : null
+        "data-slot": "list-page-empty",
+        "data-state": "no-data",
+        className: "rounded-md border border-border bg-card",
+        children: /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            size: "lg",
+            icon: noDataState?.icon ?? /* @__PURE__ */ jsx(Inbox, {}),
+            title: noDataState?.title ?? labels.noDataTitle,
+            description: noDataState?.description ?? labels.noDataDescription,
+            action: noDataState?.action !== void 0 ? noDataState.action : null
+          }
+        )
       }
-    ) })
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "list-page-empty",
+        "data-state": "no-results",
+        className: "rounded-md border border-border bg-card",
+        children: /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            size: "lg",
+            icon: emptyState?.icon ?? /* @__PURE__ */ jsx(SearchX, {}),
+            title: emptyState?.title ?? labels.emptyTitle,
+            description: emptyState?.description ?? labels.emptyDescription,
+            action: emptyState?.action !== void 0 ? emptyState.action : /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: reset, children: [
+              /* @__PURE__ */ jsx(RefreshCw, {}),
+              labels.reset
+            ] })
+          }
+        )
+      }
+    )
   ] });
 }
 
@@ -17603,6 +17944,6 @@ react-router-dom/dist/index.js:
    *)
 */
 
-export { AppShell, Avatar, Badge, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, PageHeader, RadioGroup, RadioGroupItem, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, badgeBaseClass, badgeDotSizeClass, badgeSizeClass, badgeVariantClass, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, inputBaseClass, inputSizeClass, inputVariantClass, 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, useDashboardLayout, useDirection };
+export { AppShell, Avatar, Badge, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DatePicker, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, Field, FormPage, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, ListPage, PageHeader, RadioGroup, RadioGroupItem, Select, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Switch, Table, Textarea, 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, dropdownMenuContentClass, dropdownMenuItemBaseClass, dropdownMenuItemInsetClass, dropdownMenuItemVariantClass, dropdownMenuLabelClass, dropdownMenuSeparatorClass, dropdownMenuShortcutClass, emptyStateActionsSpacingClass, emptyStateBaseClass, emptyStateContainerSizeClass, emptyStateDescriptionSizeClass, emptyStateIconWrapperBaseClass, emptyStateIconWrapperSizeClass, emptyStateTitleSizeClass, formPageActionsBarClass, formPageBaseClass, formPageBodyClass, formPageSkeletonRowClass, inputBaseClass, inputSizeClass, inputVariantClass, 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, useDashboardLayout, useDirection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map