@dimaan/ui 0.0.12 → 0.0.14

package/dist/index.cjs

@@ -7,6 +7,8 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
+var RadixPopover = require('@radix-ui/react-popover');
+var reactDayPicker = require('react-day-picker');
 var RadixDropdown = require('@radix-ui/react-dropdown-menu');
 var reactHookForm = require('react-hook-form');
 var RadixSelect = require('@radix-ui/react-select');
@@ -33,6 +35,7 @@ function _interopNamespace(e) {
 
 var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
 var RadixDropdown__namespace = /*#__PURE__*/_interopNamespace(RadixDropdown);
 var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
 var RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
@@ -16122,6 +16125,255 @@ var Checkbox = React10.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 = React10.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 = React10.useId();
+  const triggerId = id ?? generatedId;
+  const dir = useDirection();
+  const [open, setOpen] = React10.useState(false);
+  const [internalValue, setInternalValue] = React10.useState(defaultValue ?? "");
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const selectedDate = React10.useMemo(() => parseIsoDate(value), [value]);
+  const minDate = React10.useMemo(() => parseIsoDate(min), [min]);
+  const maxDate = React10.useMemo(() => parseIsoDate(max), [max]);
+  const disabledMatcher = React10.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 = React10.useMemo(() => {
+    if (!selectedDate) return null;
+    try {
+      return new Intl.DateTimeFormat(localeForFormat, formatOptions).format(selectedDate);
+    } catch {
+      return formatIsoDate(selectedDate);
+    }
+  }, [selectedDate, localeForFormat, formatOptions]);
+  const emitChange = React10.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 = React10.useCallback(
+    (date) => {
+      if (!date) {
+        emitChange("");
+        return;
+      }
+      emitChange(formatIsoDate(date));
+      setOpen(false);
+    },
+    [emitChange]
+  );
+  const handleClear = React10.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      emitChange("");
+    },
+    [emitChange]
+  );
+  const showClear = clearable && !disabled && Boolean(value);
+  const PrevIcon = dir === "rtl" ? lucideReact.ChevronRight : lucideReact.ChevronLeft;
+  const NextIcon = dir === "rtl" ? lucideReact.ChevronLeft : lucideReact.ChevronRight;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixPopover__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: displayValue ? datePickerValueClass : datePickerPlaceholderClass, children: displayValue ?? placeholder ?? "" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-3.5" })
+        }
+      ) : null,
+      name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value, required, readOnly: true }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixPopover__namespace.Content,
+      {
+        side,
+        align,
+        sideOffset: 4,
+        "data-slot": "date-picker-content",
+        className: cn(datePickerContentClass, contentClassName),
+        onOpenAutoFocus: (autoFocusEvent) => {
+          autoFocusEvent.preventDefault();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactDayPicker.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__ */ jsxRuntime.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";
@@ -16410,6 +16662,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 = React10.forwardRef(function PageHeader2({
+  title,
+  description,
+  breadcrumbs,
+  back,
+  actions,
+  as = "h1",
+  bordered = false,
+  className,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      ref,
+      "data-slot": "page-header",
+      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
+      ...props,
+      children: [
+        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
+        back ? /* @__PURE__ */ jsxRuntime.jsx(PageHeaderBack, { ...back }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleBlockClass, children: [
+            React10.createElement(
+              as,
+              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
+              title
+            ),
+            description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
+        ] })
+      ]
+    }
+  );
+});
+function PageHeaderBack({ label = "Back", to, onClick, render }) {
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+  ] });
+  if (render) {
+    return render({
+      to,
+      onClick,
+      className: pageHeaderBackClass,
+      children: inner
+    });
+  }
+  if (to) {
+    return /* @__PURE__ */ jsxRuntime.jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { title, description, back, bordered }),
+    /* @__PURE__ */ jsxRuntime.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__ */ 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(
+            "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__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", "aria-hidden": "true", children: rows.map((key) => /* @__PURE__ */ jsxRuntime.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",
@@ -16525,75 +16897,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 = React10.forwardRef(function PageHeader2({
-  title,
-  description,
-  breadcrumbs,
-  back,
-  actions,
-  as = "h1",
-  bordered = false,
-  className,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "header",
-    {
-      ref,
-      "data-slot": "page-header",
-      className: cn(pageHeaderBaseClass, bordered && pageHeaderBorderedClass, className),
-      ...props,
-      children: [
-        breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-breadcrumbs", className: pageHeaderBreadcrumbsClass, children: breadcrumbs }) : null,
-        back ? /* @__PURE__ */ jsxRuntime.jsx(PageHeaderBack, { ...back }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "page-header-row", className: pageHeaderTitleRowClass, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTitleBlockClass, children: [
-            React10.createElement(
-              as,
-              { "data-slot": "page-header-title", className: pageHeaderTitleClass },
-              title
-            ),
-            description ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-slot": "page-header-description", className: pageHeaderDescriptionClass, children: description }) : null
-          ] }),
-          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "page-header-actions", className: pageHeaderActionsClass, children: actions }) : null
-        ] })
-      ]
-    }
-  );
-});
-function PageHeaderBack({ label = "Back", to, onClick, render }) {
-  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: pageHeaderBackIconClass, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-  ] });
-  if (render) {
-    return render({
-      to,
-      onClick,
-      className: pageHeaderBackClass,
-      children: inner
-    });
-  }
-  if (to) {
-    return /* @__PURE__ */ jsxRuntime.jsx(import_react_router_dom2.Link, { to, onClick, className: pageHeaderBackClass, children: inner });
-  }
-  return /* @__PURE__ */ jsxRuntime.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",
@@ -17211,7 +17514,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",
@@ -17226,11 +17531,14 @@ function ListPage({
   data: data2,
   columns,
   getRowId,
+  isLoading = false,
+  loadingRowCount,
   searchKeys,
   filters,
   enableRowSelection,
   bulkActions,
   emptyState,
+  noDataState,
   labels: labelsProp,
   className
 }) {
@@ -17281,6 +17589,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__ */ 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: [
@@ -17293,7 +17602,8 @@ function ListPage({
           value: search,
           onChange: (e) => setSearch(e.target.value),
           leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
-          wrapperClassName: "sm:max-w-xs"
+          wrapperClassName: "sm:max-w-xs",
+          disabled: isLoading
         }
       ) : null,
       filters?.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -17303,16 +17613,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__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: reset, children: [
+      hasActiveFilters && !isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: reset, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}),
         labels.reset
       ] }) : null
     ] }) : null,
-    filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    tableMode === "loading" || tableMode === "rows" ? /* @__PURE__ */ jsxRuntime.jsx(
       Table,
       {
         "aria-label": typeof title === "string" ? title : void 0,
@@ -17320,17 +17631,48 @@ function ListPage({
         columns,
         getRowId,
         enableRowSelection,
-        bulkActions
+        bulkActions,
+        loading: isLoading,
+        loadingRowCount
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "list-page-empty", className: "rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-      EmptyState,
+    ) : tableMode === "no-data" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        icon: emptyState?.icon,
-        title: emptyState?.title ?? labels.emptyTitle,
-        description: emptyState?.description ?? labels.emptyDescription,
-        action: emptyState?.action !== void 0 ? emptyState.action : hasActiveFilters ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          EmptyState,
+          {
+            size: "lg",
+            icon: noDataState?.icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Inbox, {}),
+            title: noDataState?.title ?? labels.noDataTitle,
+            description: noDataState?.description ?? labels.noDataDescription,
+            action: noDataState?.action !== void 0 ? noDataState.action : null
+          }
+        )
       }
-    ) })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "list-page-empty",
+        "data-state": "no-results",
+        className: "rounded-md border border-border bg-card",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          EmptyState,
+          {
+            size: "lg",
+            icon: emptyState?.icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchX, {}),
+            title: emptyState?.title ?? labels.emptyTitle,
+            description: emptyState?.description ?? labels.emptyDescription,
+            action: emptyState?.action !== void 0 ? emptyState.action : /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: reset, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}),
+              labels.reset
+            ] })
+          }
+        )
+      }
+    )
   ] });
 }
 
@@ -17638,6 +17980,7 @@ exports.DashboardContent = DashboardContent;
 exports.DashboardHeader = DashboardHeader;
 exports.DashboardLayout = DashboardLayout;
 exports.DashboardMain = DashboardMain;
+exports.DatePicker = DatePicker;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuContent = DropdownMenuContent;
 exports.DropdownMenuGroup = DropdownMenuGroup;
@@ -17649,6 +17992,7 @@ exports.DropdownMenuShortcut = DropdownMenuShortcut;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
 exports.Field = Field;
+exports.FormPage = FormPage;
 exports.HeaderActions = HeaderActions;
 exports.HeaderCollapseTrigger = HeaderCollapseTrigger;
 exports.HeaderMobileTrigger = HeaderMobileTrigger;
@@ -17679,6 +18023,28 @@ exports.buttonBaseClass = buttonBaseClass;
 exports.buttonSizeClass = buttonSizeClass;
 exports.buttonVariantClass = buttonVariantClass;
 exports.cn = cn;
+exports.datePickerCalendarClass = datePickerCalendarClass;
+exports.datePickerCaptionClass = datePickerCaptionClass;
+exports.datePickerContentClass = datePickerContentClass;
+exports.datePickerDayBaseClass = datePickerDayBaseClass;
+exports.datePickerDayWrapperClass = datePickerDayWrapperClass;
+exports.datePickerDisabledClass = datePickerDisabledClass;
+exports.datePickerMonthClass = datePickerMonthClass;
+exports.datePickerMonthGridClass = datePickerMonthGridClass;
+exports.datePickerMonthsClass = datePickerMonthsClass;
+exports.datePickerNavButtonClass = datePickerNavButtonClass;
+exports.datePickerNavClass = datePickerNavClass;
+exports.datePickerOutsideClass = datePickerOutsideClass;
+exports.datePickerPlaceholderClass = datePickerPlaceholderClass;
+exports.datePickerSelectedClass = datePickerSelectedClass;
+exports.datePickerTodayClass = datePickerTodayClass;
+exports.datePickerTriggerBaseClass = datePickerTriggerBaseClass;
+exports.datePickerTriggerSizeClass = datePickerTriggerSizeClass;
+exports.datePickerTriggerVariantClass = datePickerTriggerVariantClass;
+exports.datePickerValueClass = datePickerValueClass;
+exports.datePickerWeekClass = datePickerWeekClass;
+exports.datePickerWeekdayClass = datePickerWeekdayClass;
+exports.datePickerWeekdaysClass = datePickerWeekdaysClass;
 exports.dropdownMenuContentClass = dropdownMenuContentClass;
 exports.dropdownMenuItemBaseClass = dropdownMenuItemBaseClass;
 exports.dropdownMenuItemInsetClass = dropdownMenuItemInsetClass;
@@ -17693,6 +18059,10 @@ exports.emptyStateDescriptionSizeClass = emptyStateDescriptionSizeClass;
 exports.emptyStateIconWrapperBaseClass = emptyStateIconWrapperBaseClass;
 exports.emptyStateIconWrapperSizeClass = emptyStateIconWrapperSizeClass;
 exports.emptyStateTitleSizeClass = emptyStateTitleSizeClass;
+exports.formPageActionsBarClass = formPageActionsBarClass;
+exports.formPageBaseClass = formPageBaseClass;
+exports.formPageBodyClass = formPageBodyClass;
+exports.formPageSkeletonRowClass = formPageSkeletonRowClass;
 exports.inputBaseClass = inputBaseClass;
 exports.inputSizeClass = inputSizeClass;
 exports.inputVariantClass = inputVariantClass;