@jinaan/uikit 0.1.44 → 0.1.46

package/dist/table-empty-state.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 interface TableEmptyStateProps {
     icon?: ReactNode;
     title: string;
-    description?: string;
+    description?: ReactNode;
     action?: ReactNode;
     className?: string;
 }

package/dist/table-empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../src/table-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,oBAAoB,+BA4BtB"}
+{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../src/table-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,oBAAoB,+BA4BtB"}

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.44",
+  "version": "0.1.46",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -160,6 +160,10 @@ interface DataTableProps<T> {
 
   /** Surface preset for the table card. */
   tone?: TableSurfaceTone;
+  /** Title shown in the card's top band, above the column header. */
+  title?: ReactNode;
+  /** Supporting text under the title band. */
+  description?: ReactNode;
   /** Optional action pinned to the top-right of the header band. */
   headerAction?: ReactNode | TableSurfaceAction;
   /** Header band color/style overrides. */
@@ -237,6 +241,8 @@ export function DataTable<T>({
   pageSizeOptions = [10, 25, 50, 100],
   pagination = "auto",
   tone,
+  title,
+  description,
   headerAction,
   headerClassName,
   panelClassName,
@@ -728,6 +734,8 @@ export function DataTable<T>({
         headerContentRef={bandContentRef}
         action={headerAction}
         tone={tone}
+        title={title}
+        description={description}
         headerClassName={headerClassName}
         panelClassName={panelClassName}
         header={
@@ -850,7 +858,7 @@ export function DataTable<T>({
               <TableEmptyState
                 icon={empty?.icon}
                 title={empty?.title ?? "No results"}
-                description={typeof empty?.description === "string" ? empty.description : undefined}
+                description={empty?.description}
                 action={empty?.action}
               />
             ) : (

package/src/table-empty-state.tsx

@@ -5,7 +5,7 @@ import { cn } from "./utils";
 interface TableEmptyStateProps {
   icon?: ReactNode;
   title: string;
-  description?: string;
+  description?: ReactNode;
   action?: ReactNode;
   className?: string;
 }

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>