@payglocal_ui/flux-ui 0.2.4 → 0.2.6

package/dist/index.cjs

@@ -3099,7 +3099,9 @@ var DropdownMenuSubTrigger = React27.forwardRef(({ className, inset, children, .
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center gap-2 rounded-lg px-3 py-2.5 text-[15px] outline-none",
+      // Matches DropdownMenuItem: a submenu row sits in the same list as the
+      // plain rows, so it cannot be a different size from them.
+      "flex cursor-default select-none items-center gap-2 rounded-lg px-2.5 py-1.5 text-[13px] outline-none",
       "focus:bg-muted data-[state=open]:bg-muted",
       inset && "pl-8",
       className
@@ -3144,7 +3146,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
@@ -3158,7 +3163,9 @@ var DropdownMenuCheckboxItem = React27.forwardRef(({ className, children, checke
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none transition-colors",
+      // Matches DropdownMenuItem. `pl-8` stays: that gutter is the check /
+      // dot indicator's, not padding.
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-[13px] outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -3176,7 +3183,9 @@ var DropdownMenuRadioItem = React27.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none transition-colors",
+      // Matches DropdownMenuItem. `pl-8` stays: that gutter is the check /
+      // dot indicator's, not padding.
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-[13px] outline-none transition-colors",
       "focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -3211,12 +3220,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
@@ -3863,7 +3877,9 @@ function DataTable({
   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);
@@ -3871,6 +3887,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);
@@ -3881,6 +3910,7 @@ function DataTable({
     seenKeys.set(base, seen + 1);
     return seen === 0 ? base : `${base}__${seen}`;
   });
+  const isEmpty = !isLoading && paginated.length === 0;
   const comfortable = density === "comfortable";
   const compact = density === "compact";
   const compactCellPad = compact ? snug ? "pl-1.5 pr-2.5 py-2.5" : "px-3 py-2.5" : "px-4 py-3.5";
@@ -3888,6 +3918,9 @@ 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) => {
@@ -3925,7 +3958,8 @@ function DataTable({
                   width: "100%"
                 },
                 children: [
-                  tableLayout === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("colgroup", { children: [
+                  tableLayout === "fixed" && !isEmpty && /* @__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",
                       {
@@ -3955,6 +3989,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",
                               {
@@ -3963,7 +3998,8 @@ function DataTable({
                                   headText,
                                   "whitespace-nowrap align-middle",
                                   col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left",
-                                  col.cellClassName
+                                  // Width hints live in `cellClassName`; see `isEmpty`.
+                                  !isEmpty && col.cellClassName
                                 ),
                                 children: col.header
                               },
@@ -3979,89 +4015,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",
-                        // 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"
-                      ),
-                      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: [
-                        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
+                  ]) })
                 ]
               }
             )
@@ -4073,27 +4164,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)(