@dimaan/ui 0.0.12 → 0.0.13

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";
@@ -17211,7 +17463,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 +17480,14 @@ function ListPage({
   data: data2,
   columns,
   getRowId,
+  isLoading = false,
+  loadingRowCount,
   searchKeys,
   filters,
   enableRowSelection,
   bulkActions,
   emptyState,
+  noDataState,
   labels: labelsProp,
   className
 }) {
@@ -17281,6 +17538,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 +17551,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 +17562,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 +17580,48 @@ function ListPage({
         columns,
         getRowId,
         enableRowSelection,
-        bulkActions
+        bulkActions,
+        loading: isLoading,
+        loadingRowCount
+      }
+    ) : tableMode === "no-data" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "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", className: "rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-      EmptyState,
+    ) : /* @__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-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 +17929,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;
@@ -17679,6 +17971,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;