@payglocal_ui/flux-ui 0.2.3 → 0.2.5

package/dist/index.cjs

@@ -3144,7 +3144,10 @@ var DropdownMenuItem = React27.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-lg px-3 py-2.5 text-[15px] outline-none transition-colors",
+      // 13px / tighter padding: a menu drops out of a toolbar button or a
+      // compact table control, and at 15px with 10px vertical padding it read
+      // as a larger, separate UI than the control that opened it.
+      "relative flex cursor-default select-none items-center gap-2 rounded-lg px-2.5 py-1.5 text-[13px] outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -3211,12 +3214,17 @@ var import_jsx_runtime38 = require("react/jsx-runtime");
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+var selectTriggerSizes = {
+  md: "h-11 min-h-11 gap-2.5 px-4 py-2 text-[15px]",
+  sm: "h-7 min-h-7 w-auto gap-1 px-2 py-0 text-[12px]"
+};
+var SelectTrigger = React28.forwardRef(({ className, children, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   SelectPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "flex h-11 min-h-11 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-card px-4 py-2 text-[15px] text-foreground shadow-sm outline-none",
+      "flex w-full items-center justify-between rounded-lg border border-border bg-card text-foreground shadow-sm outline-none",
+      selectTriggerSizes[size],
       "ring-ring/50 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
       "[&>span]:line-clamp-1",
       className
@@ -3856,13 +3864,16 @@ function DataTable({
   rowKey,
   rowCta,
   rowAction,
+  onRowClick,
   density = "default",
   tableLayout = "fixed",
   theadClassName,
   headerStyle = "surface",
   footerSummary = "range",
   footerCountLabels = { singular: "item", plural: "items" },
-  snug = false
+  snug = false,
+  expandable,
+  footerLeading
 }) {
   const isControlled = controlledPage !== void 0;
   const [internalPage, setInternalPage] = (0, import_react8.useState)(1);
@@ -3870,6 +3881,19 @@ function DataTable({
   const setPage = isControlled ? (p) => onPageChange?.(p) : (p) => setInternalPage(p);
   const hasAction = rowAction != null || rowCta != null;
   const hasSpacer = tableLayout === "content";
+  const [internalExpanded, setInternalExpanded] = (0, import_react8.useState)([]);
+  const isExpandControlled = expandable?.expandedKeys !== void 0;
+  const expandedKeys = isExpandControlled ? expandable.expandedKeys : internalExpanded;
+  const hasExpand = expandable != null;
+  const totalColSpan = columns.length + (hasExpand ? 1 : 0) + (hasSpacer ? 1 : 0) + (hasAction ? 1 : 0);
+  const rowExpanded = (row, index) => hasExpand && (expandable.isExpandable?.(row, index) ?? true) && expandedKeys.includes(rowKeys[index]);
+  const toggleExpanded = (key, row, index) => {
+    const isOpen = expandedKeys.includes(key);
+    const next = isOpen ? expandedKeys.filter((k) => k !== key) : [...expandedKeys, key];
+    if (isExpandControlled) expandable.onExpandedChange?.(next);
+    else setInternalExpanded(next);
+    if (!isOpen) expandable.onExpand?.(row, index);
+  };
   const total = totalRows ?? data.length;
   const totalPages = Math.ceil(total / pageSize);
   const paginated = isControlled ? data : data.slice((page - 1) * pageSize, page * pageSize);
@@ -3887,7 +3911,16 @@ function DataTable({
   const headPad = comfortable ? "px-5 py-4" : compactCellPad;
   const footerPad = comfortable ? "px-5 py-4" : compact ? "px-4 py-2.5" : "px-4 py-3.5";
   const headText = comfortable ? "text-[12px] font-medium text-muted-foreground tracking-normal" : compact ? "text-[11px] font-semibold text-muted-foreground" : "text-[11px] font-semibold text-foreground/75 dark:text-foreground/85";
+  const cellPadLeft = comfortable ? 20 : compact ? snug ? 6 : 12 : 16;
+  const expandIndent = 40 + cellPadLeft;
+  const expandGuideLeft = cellPadLeft + 10;
   const actionGutter = comfortable ? 20 : compact ? 12 : 16;
+  const ROW_CLICK_IGNORE = 'button, a, input, select, textarea, label, [role="button"], [role="link"], [role="checkbox"], [role="menuitem"], [role="menu"], [role="dialog"], [data-row-click-ignore]';
+  const isRowClickTarget = (target, rowEl) => {
+    if (!(target instanceof Element)) return false;
+    const interactive = target.closest(ROW_CLICK_IGNORE);
+    return !(interactive && rowEl.contains(interactive));
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
@@ -3919,6 +3952,7 @@ function DataTable({
                 },
                 children: [
                   tableLayout === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("colgroup", { children: [
+                    hasExpand ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("col", { style: { width: 40 } }) : null,
                     columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       "col",
                       {
@@ -3948,6 +3982,7 @@ function DataTable({
                             headerStyle === "surface" ? "border-border" : "border-border/70"
                           ),
                           children: [
+                            hasExpand ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("th", { className: cn(headPad, "w-10 p-0"), "aria-hidden": true }) : null,
                             columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                               "th",
                               {
@@ -3972,74 +4007,144 @@ function DataTable({
                   /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tbody", { children: isLoading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                     TableRowSkeleton,
                     {
-                      cols: columns.length,
+                      cols: columns.length + (hasExpand ? 1 : 0),
                       density,
                       snug
                     },
                     i
-                  )) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { colSpan: columns.length + (hasSpacer ? 1 : 0) + (hasAction ? 1 : 0), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription }) }) }) : paginated.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                    "tr",
-                    {
-                      className: cn(
-                        "group transition-colors duration-150 border-b border-border/60 last:border-b-0",
-                        comfortable && "min-h-[56px]",
-                        compact && "min-h-[44px]",
-                        "hover:bg-muted/40 dark:hover:bg-muted/25",
-                        hasAction && "hover:shadow-[0_1px_0_rgba(0,0,0,0.04)] dark:hover:shadow-none"
-                      ),
-                      children: [
-                        columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                          "td",
-                          {
-                            className: cn(
-                              cellPad,
-                              "align-middle",
-                              comfortable ? cn(
-                                "text-[13px] leading-snug",
-                                !col.wrap && "whitespace-nowrap"
-                              ) : compact ? cn(
-                                "text-[13px] leading-tight",
-                                !col.wrap && "whitespace-nowrap",
-                                "overflow-hidden"
-                              ) : "whitespace-nowrap overflow-hidden",
-                              col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left",
-                              col.cellClassName
-                            ),
-                            children: col.render(row, i)
-                          },
-                          col.key
-                        )),
-                        hasSpacer ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { className: "p-0", "aria-hidden": true }) : null,
-                        hasAction ? (
-                          // Zero-width sticky cell pinned to the right edge of the
-                          // viewport. Its children are positioned absolutely so they
-                          // float over the row (out of the 0-width cell) — the action
-                          // stays in view while scrolling and nothing trails the last
-                          // data column. Everything is revealed on hover only.
-                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { className: "sticky right-0 z-[1] w-0 p-0 align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                            "span",
+                  )) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { colSpan: totalColSpan, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription }) }) }) : paginated.flatMap((row, i) => [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                      "tr",
+                      {
+                        className: cn(
+                          "group transition-colors duration-150 border-b border-border/60 last:border-b-0",
+                          comfortable && "min-h-[56px]",
+                          compact && "min-h-[44px]",
+                          "hover:bg-muted/40 dark:hover:bg-muted/25",
+                          hasAction && "hover:shadow-[0_1px_0_rgba(0,0,0,0.04)] dark:hover:shadow-none",
+                          // Clickable rows read as clickable, and show a focus ring
+                          // when reached by keyboard. `focus-visible` only, so a
+                          // mouse click does not leave a ring behind on the row.
+                          onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:bg-muted/40 dark:focus-visible:bg-muted/25",
+                          // An open row takes its panel's background and drops the
+                          // divider beneath it, so the row and its detail read as one
+                          // block. Hover is pinned to the same value, or moving the
+                          // mouse over an open row would make it flicker away from
+                          // the panel it belongs to.
+                          rowExpanded(row, i) && "border-b-0 bg-muted/40 hover:bg-muted/40 dark:bg-muted/25 dark:hover:bg-muted/25"
+                        ),
+                        tabIndex: onRowClick ? 0 : void 0,
+                        onClick: onRowClick ? (e) => {
+                          if (!isRowClickTarget(e.target, e.currentTarget)) return;
+                          onRowClick(row, i);
+                        } : void 0,
+                        onKeyDown: onRowClick ? (e) => {
+                          if (e.key !== "Enter" && e.key !== " ") return;
+                          if (e.target !== e.currentTarget) return;
+                          e.preventDefault();
+                          onRowClick(row, i);
+                        } : void 0,
+                        children: [
+                          hasExpand ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { className: cn(cellPad, "w-10 align-middle"), children: expandable.isExpandable?.(row, i) ?? true ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                            "button",
                             {
-                              className: "absolute top-1/2 -translate-y-1/2 z-[1] inline-flex items-center opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
-                              style: { right: actionGutter },
-                              children: rowAction != null ? typeof rowAction === "function" ? rowAction(row, i) : rowAction : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                                "button",
+                              type: "button",
+                              "aria-expanded": rowExpanded(row, i),
+                              "aria-label": expandable.toggleLabel ?? "Toggle row details",
+                              onClick: () => toggleExpanded(rowKeys[i], row, i),
+                              className: "inline-flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                                import_lucide_react25.ChevronDown,
                                 {
-                                  type: "button",
-                                  onClick: () => rowCta?.onClick?.(row),
                                   className: cn(
-                                    "inline-flex items-center font-medium text-foreground bg-card rounded-lg border border-border hover:border-muted-foreground/50 whitespace-nowrap shadow-sm",
-                                    compact ? "px-2.5 py-1 text-[11px]" : "px-3 py-1.5 text-[12px]"
-                                  ),
-                                  children: rowCta?.label
+                                    "h-3.5 w-3.5 transition-transform duration-150",
+                                    rowExpanded(row, i) && "rotate-180"
+                                  )
                                 }
                               )
                             }
-                          ) })
-                        ) : null
-                      ]
-                    },
-                    rowKeys[i]
-                  )) })
+                          ) : null }) : null,
+                          columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                            "td",
+                            {
+                              className: cn(
+                                cellPad,
+                                "align-middle",
+                                comfortable ? cn(
+                                  "text-[13px] leading-snug",
+                                  !col.wrap && "whitespace-nowrap"
+                                ) : compact ? cn(
+                                  "text-[13px] leading-tight",
+                                  !col.wrap && "whitespace-nowrap",
+                                  "overflow-hidden"
+                                ) : "whitespace-nowrap overflow-hidden",
+                                col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left",
+                                col.cellClassName
+                              ),
+                              children: col.render(row, i)
+                            },
+                            col.key
+                          )),
+                          hasSpacer ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { className: "p-0", "aria-hidden": true }) : null,
+                          hasAction ? (
+                            // Zero-width sticky cell pinned to the right edge of the
+                            // viewport. Its children are positioned absolutely so they
+                            // float over the row (out of the 0-width cell) — the action
+                            // stays in view while scrolling and nothing trails the last
+                            // data column. Everything is revealed on hover only.
+                            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { className: "sticky right-0 z-[1] w-0 p-0 align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                              "span",
+                              {
+                                className: "absolute top-1/2 -translate-y-1/2 z-[1] inline-flex items-center opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
+                                style: { right: actionGutter },
+                                children: rowAction != null ? typeof rowAction === "function" ? rowAction(row, i) : rowAction : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: () => rowCta?.onClick?.(row),
+                                    className: cn(
+                                      "inline-flex items-center font-medium text-foreground bg-card rounded-lg border border-border hover:border-muted-foreground/50 whitespace-nowrap shadow-sm",
+                                      compact ? "px-2.5 py-1 text-[11px]" : "px-3 py-1.5 text-[12px]"
+                                    ),
+                                    children: rowCta?.label
+                                  }
+                                )
+                              }
+                            ) })
+                          ) : null
+                        ]
+                      },
+                      rowKeys[i]
+                    ),
+                    // The panel spans every column, including the toggle, spacer and
+                    // action cells, so it reads as one band under its row rather
+                    // than as a cell inside the grid.
+                    rowExpanded(row, i) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "tr",
+                      {
+                        className: "border-b border-border/60 bg-muted/40 last:border-b-0 dark:bg-muted/25",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { colSpan: totalColSpan, className: "p-0 align-top", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                          "div",
+                          {
+                            className: "relative",
+                            style: { paddingLeft: expandIndent, paddingRight: cellPadLeft },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                                "span",
+                                {
+                                  "aria-hidden": true,
+                                  className: "absolute top-0 bottom-4 w-px bg-border",
+                                  style: { left: expandGuideLeft }
+                                }
+                              ),
+                              expandable.render(row, i)
+                            ]
+                          }
+                        ) })
+                      },
+                      `${rowKeys[i]}__panel`
+                    ) : null
+                  ]) })
                 ]
               }
             )
@@ -4051,27 +4156,30 @@ function DataTable({
             className: cn(
               "flex items-center gap-4 flex-wrap border-t border-border",
               footerPad,
-              footerSummary === "count" && totalPages <= 1 ? "justify-start" : "justify-between"
+              footerSummary === "count" && totalPages <= 1 && !footerLeading ? "justify-start" : "justify-between"
             ),
             children: [
-              footerSummary === "count" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-[12px] text-muted-foreground tabular-nums", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "font-medium text-foreground", children: total }),
-                " ",
-                total === 1 ? footerCountLabels.singular : footerCountLabels.plural
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-[12px] text-muted-foreground tabular-nums", children: [
-                "Showing",
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-foreground font-medium", children: [
-                  Math.min((page - 1) * pageSize + 1, total),
-                  "\u2013",
-                  Math.min(page * pageSize, total)
-                ] }),
-                " ",
-                "of",
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-foreground font-medium", children: total.toLocaleString() }),
-                " ",
-                total !== 1 ? "results" : "result"
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-3", children: [
+                footerLeading,
+                footerSummary === "count" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-[12px] text-muted-foreground tabular-nums", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "font-medium text-foreground", children: total }),
+                  " ",
+                  total === 1 ? footerCountLabels.singular : footerCountLabels.plural
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-[12px] text-muted-foreground tabular-nums", children: [
+                  "Showing",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-foreground font-medium", children: [
+                    Math.min((page - 1) * pageSize + 1, total),
+                    "\u2013",
+                    Math.min(page * pageSize, total)
+                  ] }),
+                  " ",
+                  "of",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-foreground font-medium", children: total.toLocaleString() }),
+                  " ",
+                  total !== 1 ? "results" : "result"
+                ] })
               ] }),
               (footerSummary === "range" || footerSummary === "count") && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(