@quan-erp/shared-ui 1.0.0

package/dist/es/components/custom/data-table/data-table-bulk-action-menu.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../../ui/accordion.js";
+import "../../ui/alert.js";
+import "../../ui/avatar.js";
+import "../../ui/badge.js";
+import "../../ui/breadcrumb.js";
+import "../../ui/button-group.js";
+import { Button } from "../../ui/button.js";
+import "react";
+import { Layers, X, Zap } from "lucide-react";
+import "react-day-picker";
+import { cn } from "../../../lib/utils.js";
+import "../../ui/popover.js";
+import "../../ui/drawer.js";
+import "../../ui/select.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import "@icon-park/react";
+import "../../ui/carousel.js";
+import "../../ui/chart.js";
+import "../../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../../ui/command.js";
+import "../../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../../ui/dropdown-menu.js";
+import "../../ui/field.js";
+import "../../ui/form.js";
+import "../../ui/hover-card.js";
+import "../../ui/input-group.js";
+import "../../ui/input-otp.js";
+import "../../ui/input.js";
+import "../../ui/item.js";
+import "@radix-ui/react-label";
+import "../../ui/menubar.js";
+import "../../ui/navigation-menu.js";
+import "../../ui/pagination.js";
+import "../../ui/progress.js";
+import "../../ui/radio-group.js";
+import "react-resizable-panels";
+import "../../ui/scroll-area.js";
+import { Separator } from "../../ui/separator.js";
+import "../../ui/sidebar.js";
+import "../../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../../ui/spinner.js";
+import "../../ui/switch.js";
+import "../../ui/table.js";
+import "../../ui/tabs.js";
+import "../../ui/textarea.js";
+import "../../ui/toggle-group.js";
+import "../../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+function DataTableBulkActionMenu({
+  selectedCount,
+  bulkActionMenu,
+  onClear
+}) {
+  if (selectedCount === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // Ultra-compact height (h-12 = 48px)
+        "shared:border-primary/20 shared:bg-primary/3 shared:relative shared:flex shared:min-h-12 shared:w-full shared:items-center shared:justify-between shared:gap-2 shared:rounded-xl shared:border shared:px-3 shared:py-1.5",
+        "shared:from-primary/4 shared:bg-linear-to-r shared:to-transparent",
+        "shared:animate-in shared:slide-in-from-top-1 shared:fade-in shared:duration-200"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "shared:bg-primary shared:flex shared:items-center shared:gap-2 shared:rounded-lg shared:px-2.5 shared:py-1 shared:shadow-sm", children: [
+            /* @__PURE__ */ jsx(Layers, { className: "shared:text-primary-foreground shared:size-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "shared:text-primary-foreground shared:text-xs shared:font-black shared:tabular-nums", children: selectedCount })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-col max-sm:shared:hidden", children: [
+            /* @__PURE__ */ jsx("span", { className: "shared:text-foreground/80 shared:text-[10px] shared:leading-none shared:font-bold shared:tracking-wider shared:uppercase", children: "Selected" }),
+            /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "shared:bg-primary shared:size-1 shared:animate-pulse shared:rounded-full" }),
+              /* @__PURE__ */ jsx("span", { className: "shared:text-primary/70 shared:text-[9px] shared:font-medium", children: "Action Mode" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "shared:bg-primary/20 shared:mx-1 shared:h-5" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: onClear,
+              className: "shared:text-muted-foreground hover:shared:bg-destructive/10 hover:shared:text-destructive shared:h-8 shared:gap-1.5 shared:rounded-lg shared:px-2 shared:text-[11px] shared:font-bold shared:transition-all",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "shared:size-3" }),
+                /* @__PURE__ */ jsx("span", { children: "Clear" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "shared:mr-1 shared:flex shared:items-center shared:gap-1.5 max-lg:shared:hidden", children: [
+            /* @__PURE__ */ jsx(Zap, { className: "shared:text-primary/40 shared:size-3" }),
+            /* @__PURE__ */ jsx("span", { className: "shared:text-muted-foreground/50 shared:text-[9px] shared:font-black shared:tracking-widest shared:uppercase", children: "Quick Actions" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "shared:flex shared:items-center shared:gap-1.5 [&_button]:shared:h-8 [&_button]:shared:rounded-lg [&_button]:shared:px-3 [&_button]:shared:text-[10px] [&_button]:shared:font-black [&_button]:shared:tracking-tight [&_button]:shared:uppercase [&_button]:shared:transition-all active:[&_button]:shared:scale-95", children: bulkActionMenu })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DataTableBulkActionMenu
+};

package/dist/es/components/custom/data-table/data-table-bulk-export.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import "../../ui/accordion.js";
+import "../../ui/alert.js";
+import "../../ui/avatar.js";
+import "../../ui/badge.js";
+import "../../ui/breadcrumb.js";
+import "../../ui/button-group.js";
+import { Button } from "../../ui/button.js";
+import "react";
+import "lucide-react";
+import "react-day-picker";
+import "clsx";
+import "tailwind-merge";
+import "../../ui/popover.js";
+import "../../ui/drawer.js";
+import "../../ui/select.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import "@icon-park/react";
+import "../../ui/carousel.js";
+import "../../ui/chart.js";
+import "../../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../../ui/command.js";
+import "../../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../../ui/dropdown-menu.js";
+import "../../ui/field.js";
+import "../../ui/form.js";
+import "../../ui/hover-card.js";
+import "../../ui/input-group.js";
+import "../../ui/input-otp.js";
+import "../../ui/input.js";
+import "../../ui/item.js";
+import "@radix-ui/react-label";
+import "../../ui/menubar.js";
+import "../../ui/navigation-menu.js";
+import "../../ui/pagination.js";
+import "../../ui/progress.js";
+import "../../ui/radio-group.js";
+import "react-resizable-panels";
+import "../../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import "../../ui/sidebar.js";
+import "../../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../../ui/spinner.js";
+import "../../ui/switch.js";
+import "../../ui/table.js";
+import "../../ui/tabs.js";
+import "../../ui/textarea.js";
+import "../../ui/toggle-group.js";
+import "../../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+import { exportToCSV } from "./data-table-util.js";
+function DataTableBulkExportButton({
+  selectedData,
+  tableName,
+  label
+}) {
+  const filename = `${tableName}_export_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.csv`;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      className: "shared:h-8 shared:text-xs",
+      onClick: () => exportToCSV(selectedData, filename),
+      children: label
+    }
+  );
+}
+export {
+  DataTableBulkExportButton
+};

package/dist/es/components/custom/data-table/data-table-column-header.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDown, EyeOff } from "lucide-react";
+import "react";
+import { cn } from "../../../lib/utils.js";
+import "../../ui/accordion.js";
+import "../../ui/alert.js";
+import "../../ui/avatar.js";
+import "../../ui/badge.js";
+import "../../ui/breadcrumb.js";
+import "../../ui/button-group.js";
+import { Button } from "../../ui/button.js";
+import "react-day-picker";
+import "../../ui/popover.js";
+import "../../ui/drawer.js";
+import "../../ui/select.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import "@icon-park/react";
+import "../../ui/carousel.js";
+import "../../ui/chart.js";
+import "../../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../../ui/command.js";
+import "../../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "../../ui/dropdown-menu.js";
+import "../../ui/field.js";
+import "../../ui/form.js";
+import "../../ui/hover-card.js";
+import "../../ui/input-group.js";
+import "../../ui/input-otp.js";
+import "../../ui/input.js";
+import "../../ui/item.js";
+import "@radix-ui/react-label";
+import "../../ui/menubar.js";
+import "../../ui/navigation-menu.js";
+import "../../ui/pagination.js";
+import "../../ui/progress.js";
+import "../../ui/radio-group.js";
+import "react-resizable-panels";
+import "../../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import "../../ui/sidebar.js";
+import "../../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../../ui/spinner.js";
+import "../../ui/switch.js";
+import "../../ui/table.js";
+import "../../ui/tabs.js";
+import "../../ui/textarea.js";
+import "../../ui/toggle-group.js";
+import "../../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+function DataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsx("div", { className: cn("shared:whitespace-nowrap", className), children: title });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("shared:flex shared:items-center shared:space-x-2 shared:whitespace-nowrap", className),
+      children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "data-[state=open]:shared:bg-accent shared:-ml-3 shared:h-8",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: title }),
+              column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { className: "shared:ml-2 shared:size-4" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { className: "shared:ml-2 shared:size-4" }) : column.getCanSort() === true ? /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shared:ml-2 shared:size-4" }) : /* @__PURE__ */ jsx(Fragment, {})
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(false), children: [
+            /* @__PURE__ */ jsx(ArrowUpIcon, { className: "shared:text-muted-foreground/70 shared:mr-2 shared:size-3.5" }),
+            "Asc"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(true), children: [
+            /* @__PURE__ */ jsx(ArrowDownIcon, { className: "shared:text-muted-foreground/70 shared:mr-2 shared:size-3.5" }),
+            "Desc"
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleVisibility(false), children: [
+            /* @__PURE__ */ jsx(EyeOff, { className: "shared:text-muted-foreground/70 shared:mr-2 shared:size-3.5" }),
+            "Hide"
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  DataTableColumnHeader
+};

package/dist/es/components/custom/data-table/data-table-grid.js

@@ -0,0 +1,234 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import * as React from "react";
+import { groupTableRowsBy } from "./group-table-rows.js";
+import "../../ui/accordion.js";
+import "../../ui/alert.js";
+import "../../ui/avatar.js";
+import "../../ui/badge.js";
+import "../../ui/breadcrumb.js";
+import "../../ui/button-group.js";
+import "../../ui/button.js";
+import "lucide-react";
+import "react-day-picker";
+import { cn } from "../../../lib/utils.js";
+import "../../ui/popover.js";
+import "../../ui/drawer.js";
+import "../../ui/select.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import "@icon-park/react";
+import "../../ui/carousel.js";
+import "../../ui/chart.js";
+import "../../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../../ui/command.js";
+import "../../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../../ui/dropdown-menu.js";
+import "../../ui/field.js";
+import "../../ui/form.js";
+import "../../ui/hover-card.js";
+import "../../ui/input-group.js";
+import "../../ui/input-otp.js";
+import "../../ui/input.js";
+import "../../ui/item.js";
+import "@radix-ui/react-label";
+import "../../ui/menubar.js";
+import "../../ui/navigation-menu.js";
+import "../../ui/pagination.js";
+import "../../ui/progress.js";
+import "../../ui/radio-group.js";
+import "react-resizable-panels";
+import "../../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import "../../ui/sidebar.js";
+import "../../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../../ui/spinner.js";
+import "../../ui/switch.js";
+import { TableRow, TableCell, Table, TableHeader, TableHead, TableBody, TableFooter } from "../../ui/table.js";
+import "../../ui/tabs.js";
+import "../../ui/textarea.js";
+import "../../ui/toggle-group.js";
+import "../../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+function dataTableRowMemoPropsAreEqual(prev, next) {
+  return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.onRowClickFn === next.onRowClickFn && prev.layoutKey === next.layoutKey;
+}
+function DataTableBodyRow({
+  row,
+  isSelected,
+  onRowClickFn
+}) {
+  const handleClick = React.useCallback(() => {
+    onRowClickFn?.(row.original);
+  }, [onRowClickFn, row.original]);
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      className: cn(
+        "shared:group shared:transition-colors",
+        onRowClickFn && "shared:cursor-pointer",
+        isSelected ? "shared:bg-primary/5 hover:shared:bg-primary/10" : "hover:shared:bg-muted/30"
+      ),
+      onClick: onRowClickFn ? handleClick : void 0,
+      children: row.getVisibleCells().map((cell) => {
+        const isPinned = cell.column.getIsPinned();
+        const meta = cell.column.columnDef.meta;
+        const size = cell.column.getSize();
+        return /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            className: cn(
+              "shared:border-border/50 shared:border-b",
+              isPinned && "shared:bg-background shared:sticky shared:left-0 shared:z-20 shared:shadow-[1px_0_0_0_rgba(0,0,0,0.1)]",
+              isSelected && isPinned && "shared:bg-muted",
+              meta?.className
+            ),
+            style: {
+              left: isPinned ? `${cell.column.getStart("left")}px` : void 0,
+              width: `${size}px`,
+              minWidth: `${size}px`,
+              maxWidth: `${size}px`
+            },
+            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+          },
+          cell.id
+        );
+      })
+    }
+  );
+}
+const MemoDataTableBodyRow = React.memo(
+  DataTableBodyRow,
+  dataTableRowMemoPropsAreEqual
+);
+function DataTableGroupHeaderRow({
+  colSpan,
+  label,
+  summary
+}) {
+  return /* @__PURE__ */ jsx(TableRow, { className: "hover:shared:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "shared:px-0 shared:py-0", children: /* @__PURE__ */ jsx("div", { className: "shared:border-b-primary shared:bg-primary/10 shared:text-primary shared:sticky shared:top-0 shared:z-30 shared:border-b-2 shared:px-3 shared:pb-2 shared:backdrop-blur", children: /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-row shared:flex-wrap shared:items-center shared:gap-x-5 shared:gap-y-1 shared:pt-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "shared:text-base shared:font-semibold", children: label }),
+    summary
+  ] }) }) }) });
+}
+function DataTableGrid({
+  table,
+  rows,
+  rowSelection,
+  columnCount,
+  onRowClickFn,
+  footerData,
+  noResultsLabel = "No results found.",
+  groupBy,
+  layoutKey,
+  firstRowData
+}) {
+  const visibleColumns = table.getHeaderGroups()[0]?.headers.filter((h) => h.column.getIsVisible()) ?? [];
+  const resolvedFooter = React.useMemo(() => {
+    if (!footerData?.length) return [];
+    return footerData.map((footer) => ({
+      ...footer,
+      colIndex: visibleColumns.findIndex(
+        (col) => col.id === footer.valueColumnKey
+      )
+    }));
+  }, [footerData, visibleColumns]);
+  const resolvedFirstRow = React.useMemo(() => {
+    if (!firstRowData?.length) return [];
+    return firstRowData.map((firstRow) => ({
+      ...firstRow,
+      colIndex: visibleColumns.findIndex(
+        (col) => col.id === firstRow.valueColumnKey
+      )
+    }));
+  }, [firstRowData, visibleColumns]);
+  const emptyColSpan = visibleColumns.length || columnCount;
+  const showFooter = resolvedFooter.length > 0 && visibleColumns.length > 0;
+  const groupedRows = React.useMemo(() => {
+    if (!groupBy || rows.length === 0) return null;
+    return groupTableRowsBy(rows, groupBy.getGroupKey);
+  }, [groupBy, rows]);
+  const renderBodyRow = (row) => /* @__PURE__ */ jsx(
+    MemoDataTableBodyRow,
+    {
+      row,
+      isSelected: row.getIsSelected(),
+      onRowClickFn,
+      layoutKey
+    },
+    row.id
+  );
+  return /* @__PURE__ */ jsxs(Table, { className: "shared:w-full shared:table-fixed shared:border-separate shared:border-spacing-0", children: [
+    /* @__PURE__ */ jsx(TableHeader, { className: "shared:bg-muted/60 shared:backdrop-blur-md", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "hover:shared:bg-transparent", children: headerGroup.headers.filter((header) => header.column.getIsVisible()).map((header) => {
+      const isPinned = header.column.getIsPinned();
+      const meta = header.column.columnDef.meta;
+      const size = header.getSize();
+      return /* @__PURE__ */ jsx(
+        TableHead,
+        {
+          className: cn(
+            "shared:text-muted-foreground shared:text-[11px] shared:font-bold shared:tracking-wider shared:uppercase",
+            isPinned && "shared:bg-muted/90 shared:sticky shared:left-0 shared:z-50 shared:shadow-[1px_0_0_0_rgba(0,0,0,0.1)]",
+            meta?.className
+          ),
+          style: {
+            left: isPinned ? `${header.getStart("left")}px` : void 0,
+            width: `${size}px`,
+            minWidth: `${size}px`,
+            maxWidth: `${size}px`,
+            position: isPinned ? "sticky" : "relative"
+          },
+          children: flexRender(
+            header.column.columnDef.header,
+            header.getContext()
+          )
+        },
+        header.id
+      );
+    }) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsxs(TableBody, { children: [
+      showFooter ? /* @__PURE__ */ jsx(TableRow, { children: visibleColumns.map((col, idx) => {
+        const firstRowItem = resolvedFirstRow.find(
+          (f) => f.colIndex === idx
+        );
+        if (firstRowItem) {
+          return /* @__PURE__ */ jsx(TableCell, { className: "shared:font-bold", children: firstRowItem.render }, col.id);
+        }
+        return /* @__PURE__ */ jsx(TableCell, {}, col.id);
+      }) }) : null,
+      rows.length ? groupedRows ? groupedRows.map(([groupKey, groupRows]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DataTableGroupHeaderRow,
+          {
+            colSpan: emptyColSpan,
+            label: groupBy?.formatGroupLabel?.(groupKey, groupRows) ?? groupKey,
+            summary: groupBy?.renderGroupSummary?.(groupKey, groupRows)
+          }
+        ),
+        groupRows.map(renderBodyRow)
+      ] }, groupKey)) : rows.map(renderBodyRow) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: emptyColSpan,
+          className: "shared:text-muted-foreground shared:h-32 shared:text-center",
+          children: noResultsLabel
+        }
+      ) })
+    ] }),
+    showFooter ? /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsx(TableRow, { children: visibleColumns.map((col, idx) => {
+      const footerItem = resolvedFooter.find((f) => f.colIndex === idx);
+      if (footerItem) {
+        return /* @__PURE__ */ jsx(TableCell, { className: "shared:font-bold", children: footerItem.render }, col.id);
+      }
+      return /* @__PURE__ */ jsx(TableCell, {}, col.id);
+    }) }) }) : null
+  ] });
+}
+export {
+  DataTableGrid
+};

package/dist/es/components/custom/data-table/data-table-helper.js

@@ -0,0 +1,8 @@
+function formatCamelCaseString(inputString) {
+  const words = inputString.split(/(?=[A-Z])/);
+  const formattedString = words.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  return formattedString;
+}
+export {
+  formatCamelCaseString
+};

package/dist/es/components/custom/data-table/data-table-list-view.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { flexRender } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import * as React from "react";
+import { groupTableRowsBy } from "./group-table-rows.js";
+import { cn } from "../../../lib/utils.js";
+function dataTableRowMemoPropsAreEqual(prev, next) {
+  return prev.row.id === next.row.id && prev.row.original === next.row.original && prev.isSelected === next.isSelected && prev.onRowClickFn === next.onRowClickFn && prev.layoutKey === next.layoutKey;
+}
+function DataCard({
+  row,
+  isSelected,
+  onRowClickFn,
+  layoutKey
+}) {
+  const handleClick = React.useCallback(() => {
+    onRowClickFn?.(row.original);
+  }, [onRowClickFn, row.original]);
+  const { selectionCell, otherCells } = React.useMemo(() => {
+    const visibleCells = row.getVisibleCells();
+    const selection = visibleCells.find((c) => c.column.id === "select");
+    const others = visibleCells.filter((c) => {
+      const meta = c.column.columnDef.meta;
+      return !meta?.isCardHeader && !meta?.isCardSubheader && c.column.id !== "select";
+    }).sort((a, b) => {
+      const aSort = a.column.columnDef.meta?.sortNumber ?? 999;
+      const bSort = b.column.columnDef.meta?.sortNumber ?? 999;
+      return aSort - bSort;
+    });
+    return { selectionCell: selection, otherCells: others };
+  }, [row, layoutKey]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: onRowClickFn ? handleClick : void 0,
+      className: cn(
+        "shared:group shared:border-border/40 shared:bg-card hover:shared:border-primary/40 shared:relative shared:flex shared:flex-col shared:rounded-xl shared:border shared:p-3 shared:shadow-sm shared:transition-all shared:duration-200 active:shared:scale-[0.98]",
+        onRowClickFn && "shared:cursor-pointer",
+        isSelected && "shared:bg-primary/3 shared:border-primary/30 shared:ring-primary/20 shared:ring-1"
+      ),
+      children: [
+        selectionCell ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "shared:absolute shared:top-3 shared:right-3 shared:z-10",
+            onClick: (e) => e.stopPropagation(),
+            children: flexRender(
+              selectionCell.column.columnDef.cell,
+              selectionCell.getContext()
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: "shared:grid shared:grid-cols-12 shared:gap-1.5", children: otherCells.map((cell) => /* @__PURE__ */ jsx(React.Fragment, { children: flexRender(
+          cell.column.columnDef.mobileCell ?? cell.column.columnDef.cell,
+          cell.getContext()
+        ) }, cell.id)) })
+      ]
+    }
+  );
+}
+const MemoDataCard = React.memo(
+  DataCard,
+  dataTableRowMemoPropsAreEqual
+);
+function DataTableListGroupHeader({
+  label,
+  summary
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "shared:border-b-primary shared:bg-primary/10 shared:sticky shared:top-0 shared:z-20 shared:rounded-md shared:border-b-2 shared:px-3 shared:py-2 shared:backdrop-blur", children: /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-row shared:flex-wrap shared:items-center shared:gap-x-4 shared:gap-y-1", children: [
+    /* @__PURE__ */ jsx("p", { className: "shared:text-sm shared:font-semibold", children: label }),
+    summary
+  ] }) });
+}
+function DataTableListView({
+  rows,
+  rowSelection,
+  onRowClickFn,
+  layoutKey,
+  groupBy,
+  firstRowData,
+  footerData
+}) {
+  const groupedRows = React.useMemo(() => {
+    if (!groupBy || rows.length === 0) return null;
+    return groupTableRowsBy(rows, groupBy.getGroupKey);
+  }, [groupBy, rows]);
+  return /* @__PURE__ */ jsxs("div", { className: "shared:space-y-4 shared:p-2", children: [
+    firstRowData,
+    groupedRows ? groupedRows.map(([groupKey, groupItems]) => /* @__PURE__ */ jsxs("div", { className: "shared:space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        DataTableListGroupHeader,
+        {
+          label: groupBy?.formatGroupLabel?.(groupKey, groupItems) ?? groupKey,
+          summary: groupBy?.renderGroupSummary?.(groupKey, groupItems)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "shared:grid shared:grid-cols-1 shared:gap-4 sm:shared:grid-cols-2 lg:shared:grid-cols-3 xl:shared:grid-cols-4 2xl:shared:grid-cols-6", children: groupItems.map((row) => /* @__PURE__ */ jsx(
+        MemoDataCard,
+        {
+          row,
+          isSelected: row.getIsSelected(),
+          onRowClickFn,
+          layoutKey
+        },
+        row.id
+      )) })
+    ] }, groupKey)) : /* @__PURE__ */ jsx("div", { className: "shared:grid shared:grid-cols-1 shared:gap-4 sm:shared:grid-cols-2 lg:shared:grid-cols-3 xl:shared:grid-cols-4 2xl:shared:grid-cols-6", children: rows.map((row) => /* @__PURE__ */ jsx(
+      MemoDataCard,
+      {
+        row,
+        isSelected: row.getIsSelected(),
+        onRowClickFn,
+        layoutKey
+      },
+      row.id
+    )) }),
+    footerData
+  ] });
+}
+export {
+  DataTableListView
+};