@jinaan/uikit 0.1.45 → 0.1.47

package/dist/table-surface.d.ts

@@ -27,6 +27,10 @@ interface TableSurfaceProps {
     headerClassName?: string;
     /** Inner panel overrides (background, border color, …). */
     panelClassName?: string;
+    /** Optional footer strip in the outer shell, below the panel (hairline top border). */
+    footer?: ReactNode;
+    /** Footer strip overrides (padding, colors, …). */
+    footerClassName?: string;
     /** Minimum panel height; keeps empty states from collapsing. */
     minHeight?: string;
     /**
@@ -46,6 +50,6 @@ interface TableSurfaceProps {
  * Colors come from the `--table-*` tokens and can be adjusted per surface with
  * `tone` plus `headerClassName` / `panelClassName`.
  */
-export declare function TableSurface({ title, description, header, children, action, tone, className, headerClassName, panelClassName, minHeight, scrollMode, headerContentRef, }: TableSurfaceProps): import("react").JSX.Element;
+export declare function TableSurface({ title, description, header, children, action, tone, className, headerClassName, panelClassName, footer, footerClassName, minHeight, scrollMode, headerContentRef, }: TableSurfaceProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=table-surface.d.ts.map

package/dist/table-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-surface.d.ts","sourceRoot":"","sources":["../src/table-surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBAAiB;IACzB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yDAAyD;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACxC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACjC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CACxC;AAyBD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,cAAc,EACd,SAAS,EACT,UAAsB,EACtB,gBAAgB,GACjB,EAAE,iBAAiB,+BAuFnB"}
+{"version":3,"file":"table-surface.d.ts","sourceRoot":"","sources":["../src/table-surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBAAiB;IACzB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yDAAyD;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACxC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACjC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CACxC;AAyBD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,cAAc,EACd,MAAM,EACN,eAAe,EACf,SAAS,EACT,UAAsB,EACtB,gBAAgB,GACjB,EAAE,iBAAiB,+BAiGnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -13,6 +13,7 @@ import {
   X,
 } from "@phosphor-icons/react";
 import {
+  Fragment,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -138,6 +139,11 @@ interface DataTableProps<T> {
   bulkActions?: BulkAction<T>[];
 
   rowActions?: (row: T) => ReactNode;
+  /**
+   * Expanding rows: renders a chevron toggle cell at the row start and the
+   * returned content in a full-width muted band beneath the row.
+   */
+  renderExpanded?: (row: T) => ReactNode;
   onRowClick?: (row: T) => void;
 
   defaultSort?: { id: string; dir: "asc" | "desc" };
@@ -233,6 +239,7 @@ export function DataTable<T>({
   selectable = false,
   bulkActions,
   rowActions,
+  renderExpanded,
   onRowClick,
   defaultSort,
   sort: sortProp,
@@ -268,6 +275,15 @@ export function DataTable<T>({
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(initialPageSize);
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const toggleExpanded = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
   const [activeFilterIds, setActiveFilterIds] = useState<string[]>([]);
 
   const propOrder = columns.map((c) => c.id);
@@ -398,7 +414,7 @@ export function DataTable<T>({
   // order). The pinned colgroup maps positionally onto the columns, so any
   // structural change invalidates the measured widths — otherwise the new
   // column steals its neighbor's width and every column shifts by one.
-  const structureKey = `${selectable ? "s" : "-"}|${rowActions ? "a" : "-"}|${columnKey}`;
+  const structureKey = `${selectable ? "s" : "-"}|${rowActions ? "a" : "-"}|${renderExpanded ? "e" : "-"}|${columnKey}`;
   const structureRef = useRef(structureKey);
   const pinned = columnWidths.length > 0;
 
@@ -772,6 +788,7 @@ export function DataTable<T>({
                     />
                   </th>
                 )}
+                {renderExpanded && <th className="h-(--table-header-h) w-11 px-(--table-pad-x)" />}
                 {visibleColumns.map((c) => (
                   <th
                     key={c.id}
@@ -886,6 +903,7 @@ export function DataTable<T>({
                 <thead className="sr-only">
                   <tr>
                     {selectable && <th scope="col">Select</th>}
+                    {renderExpanded && <th scope="col">Details</th>}
                     {visibleColumns.map((c) => (
                       <th key={c.id} scope="col" aria-sort={ariaSort(c)}>
                         {c.header}
@@ -898,22 +916,49 @@ export function DataTable<T>({
                   {pageRows.map((row) => {
                     const id = getRowId(row);
                     const isSelected = selected.has(id);
+                    const isExpanded = expanded.has(id);
+                    const columnCount =
+                      visibleColumns.length +
+                      (selectable ? 1 : 0) +
+                      (renderExpanded ? 1 : 0) +
+                      (rowActions ? 1 : 0);
                     return (
-                      <TableRow
-                        key={id}
-                        data-state={isSelected ? "selected" : undefined}
-                        onClick={onRowClick ? () => onRowClick(row) : undefined}
-                        className={onRowClick ? "cursor-pointer" : undefined}
-                      >
-                        {selectable && (
-                          <TableCell className="w-11" onClick={(e) => e.stopPropagation()}>
-                            <Checkbox
-                              aria-label="Select row"
-                              checked={isSelected}
-                              onCheckedChange={() => toggleOne(id)}
-                            />
-                          </TableCell>
-                        )}
+                      <Fragment key={id}>
+                        <TableRow
+                          data-state={isSelected ? "selected" : undefined}
+                          onClick={onRowClick ? () => onRowClick(row) : undefined}
+                          className={onRowClick ? "cursor-pointer" : undefined}
+                        >
+                          {selectable && (
+                            <TableCell className="w-11" onClick={(e) => e.stopPropagation()}>
+                              <Checkbox
+                                aria-label="Select row"
+                                checked={isSelected}
+                                onCheckedChange={() => toggleOne(id)}
+                              />
+                            </TableCell>
+                          )}
+                          {renderExpanded && (
+                            <TableCell className="w-11" onClick={(e) => e.stopPropagation()}>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="size-7"
+                                aria-label={isExpanded ? "Collapse row" : "Expand row"}
+                                aria-expanded={isExpanded}
+                                onClick={() => toggleExpanded(id)}
+                              >
+                                <CaretDown
+                                  className={cn(
+                                    "size-3.5 text-muted transition-transform motion-safe:duration-200",
+                                    isExpanded ? "" : "-rotate-90",
+                                  )}
+                                  weight="bold"
+                                />
+                              </Button>
+                            </TableCell>
+                          )}
                         {visibleColumns.map((c) => (
                           <TableCell
                             key={c.id}
@@ -923,23 +968,34 @@ export function DataTable<T>({
                             {c.cell(row)}
                           </TableCell>
                         ))}
-                        {rowActions && (
-                          <TableCell
-                            className="w-44 px-4 text-right"
-                            onClick={(e) => {
-                              // Dead-zone fix: only swallow clicks on the
-                              // action controls themselves (menus, buttons);
-                              // the cell's padding stays part of the clickable
-                              // row.
-                              if ((e.target as HTMLElement).closest("button, a, input, [role='menuitem']")) {
-                                e.stopPropagation();
-                              }
-                            }}
-                          >
-                            {rowActions(row)}
-                          </TableCell>
-                        )}
-                      </TableRow>
+                          {rowActions && (
+                            <TableCell
+                              className="w-44 px-4 text-right"
+                              onClick={(e) => {
+                                // Dead-zone fix: only swallow clicks on the
+                                // action controls themselves (menus, buttons);
+                                // the cell's padding stays part of the clickable
+                                // row.
+                                if ((e.target as HTMLElement).closest("button, a, input, [role='menuitem']")) {
+                                  e.stopPropagation();
+                                }
+                              }}
+                            >
+                              {rowActions(row)}
+                            </TableCell>
+                          )}
+                        </TableRow>
+                        {renderExpanded && isExpanded ? (
+                          <TableRow className="hover:bg-inherit" data-expanded="">
+                            <TableCell
+                              colSpan={columnCount}
+                              className="border-t border-line bg-elevated/60 px-(--table-pad-x) py-3 align-top text-[13px] text-muted"
+                            >
+                              {renderExpanded(row)}
+                            </TableCell>
+                          </TableRow>
+                        ) : null}
+                      </Fragment>
                     );
                   })}
                 </TableBody>

package/src/table-surface.tsx

@@ -34,6 +34,10 @@ interface TableSurfaceProps {
   headerClassName?: string;
   /** Inner panel overrides (background, border color, …). */
   panelClassName?: string;
+  /** Optional footer strip in the outer shell, below the panel (hairline top border). */
+  footer?: ReactNode;
+  /** Footer strip overrides (padding, colors, …). */
+  footerClassName?: string;
   /** Minimum panel height; keeps empty states from collapsing. */
   minHeight?: string;
   /**
@@ -87,6 +91,8 @@ export function TableSurface({
   className,
   headerClassName,
   panelClassName,
+  footer,
+  footerClassName,
   minHeight,
   scrollMode = "surface",
   headerContentRef,
@@ -170,6 +176,16 @@ export function TableSurface({
           {panel}
         </div>
       )}
+      {footer ? (
+        <div
+          className={cn(
+            "border-t border-line px-(--table-pad-x) py-3 text-table-header",
+            footerClassName,
+          )}
+        >
+          {footer}
+        </div>
+      ) : null}
       {actionNode ? (
         <div className="pointer-events-none absolute right-4 top-(--table-inset) flex h-(--table-header-h) items-center">
           <div className="pointer-events-auto">{actionNode}</div>