@gearbox-protocol/ui-kit 4.0.0-next.62 → 4.0.0-next.63

package/dist/cjs/components/table/grid-table.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("class-variance-authority"),S=require("react"),C=require("../base-link/base-link.cjs"),N=require("../layout/col/col.cjs"),A=require("../layout/grid/grid.cjs"),s=require("../../utils/cn.cjs");function K(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const d=K(S),L=p.cva("w-full",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),_=d.forwardRef(({className:e,size:a,cols:t=12,gap:r=0,wrapperClassName:l,...c},f)=>i.jsx("div",{className:s.cn("relative w-full overflow-auto",l),children:i.jsx(A.Grid,{ref:f,cols:t,gap:r,className:s.cn(L({size:a,className:e})),...c})}));_.displayName="GridTable";const z=d.forwardRef(({className:e,...a},t)=>i.jsx("div",{ref:t,className:s.cn("contents","[&>*>*]:after:absolute [&>*>*]:after:bottom-0 [&>*>*]:after:inset-x-0 [&>*>*]:after:h-px [&>*>*]:after:bg-border","hover:[&>*>*]:before:opacity-0!",e),...a}));z.displayName="GridTableHeader";const w=d.forwardRef(({className:e,...a},t)=>i.jsx("div",{ref:t,className:s.cn("contents [&>*:last-child>*]:after:hidden",e),...a}));w.displayName="GridTableBody";const B=d.forwardRef(({className:e,cols:a,gap:t=0,last:r,height:l,hideValue:c,noHover:f,noRound:y,onRowClick:n,href:x,target:H,rel:V,style:D,children:u,...b},g)=>{const T=typeof l=="number"?`${l}px`:l,j=d.useCallback(o=>{!n||o.target.closest("a, button, input, select, textarea, [role='button']")||n(o)},[n]),v=d.useCallback(o=>{if(n&&(o.key==="Enter"||o.key===" ")){if(o.preventDefault(),o.target.closest("a, button, input, select, textarea, [role='button']"))return;n(o)}},[n]),G=s.cn("[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted","[&>*]:after:absolute [&>*]:after:bottom-0 [&>*]:after:inset-x-0 [&>*]:after:h-px [&>*]:after:bg-border",!y&&["[&>*:first-child]:after:left-3","[&>*:last-child]:after:right-3"],!f&&["[&>*]:z-0","[&>*]:before:absolute [&>*]:before:inset-x-0 [&>*]:before:top-0 [&>*]:before:bottom-px [&>*]:before:-z-10 [&>*]:before:bg-muted/50 [&>*]:before:opacity-0 [&>*]:before:transition-opacity","hover:[&>*]:before:opacity-100",!y&&"[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"],r&&"[&>*]:after:hidden",c&&"[&>*]:opacity-0"),h=s.cn("grid grid-cols-subgrid col-span-full",G,"cursor-pointer",e),m={...D,...T?{height:T}:{}};return x?i.jsx(C.BaseLink,{ref:g,href:x,target:H,rel:V,size:"unset",variant:"unset",className:s.cn("no-underline text-foreground!",h),style:m,onClick:n?j:void 0,onKeyDown:n?v:void 0,...b,children:u}):n?i.jsx("div",{ref:g,role:"row",tabIndex:0,className:h,style:m,onClick:j,onKeyDown:v,...b,children:u}):i.jsx("div",{ref:g,className:s.cn("grid grid-cols-subgrid col-span-full",G,e),style:m,...b,children:u})});B.displayName="GridTableRow";const P=p.cva("flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",{variants:{size:{sm:"min-h-8 px-1 py-2 text-sm",default:"min-h-10 px-2 py-2.5",lg:"min-h-12 px-4 py-3"},justify:{start:"justify-start",center:"justify-center",end:"justify-end"},gapBefore:{sm:"pl-5",md:"pl-10",none:""}},defaultVariants:{size:"default",justify:"start",gapBefore:"none"}}),k=d.forwardRef(({className:e,size:a,span:t=1,justify:r="start",gapBefore:l,...c},f)=>i.jsx(N.Col,{ref:f,span:t,className:s.cn(P({size:a,justify:r,gapBefore:l,className:e})),...c}));k.displayName="GridTableHead";const R=p.cva("flex items-center align-middle",{variants:{size:{sm:"px-1 py-2",default:"p-4",lg:"p-6"},textAlign:{left:"text-left justify-start",center:"text-center justify-center",right:"text-right justify-end"},gapBefore:{sm:"pl-5",md:"pl-10",none:""}},defaultVariants:{size:"default",textAlign:"left",gapBefore:"none"}}),q=d.forwardRef(({className:e,size:a,span:t=1,textAlign:r,gapBefore:l,...c},f)=>i.jsx(N.Col,{ref:f,span:t,className:s.cn(R({size:a,textAlign:r,gapBefore:l,className:e})),...c}));q.displayName="GridTableCell";exports.GridTable=_;exports.GridTableBody=w;exports.GridTableCell=q;exports.GridTableHead=k;exports.GridTableHeader=z;exports.GridTableRow=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("class-variance-authority"),S=require("react"),k=require("../base-link/base-link.cjs"),_=require("../layout/col/col.cjs"),A=require("../layout/grid/grid.cjs"),s=require("../../utils/cn.cjs");function K(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const d=K(S),L=g.cva("w-full",{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),w=d.forwardRef(({className:e,size:t,cols:r=12,gap:a=0,wrapperClassName:n,...c},f)=>o.jsx("div",{className:s.cn("relative w-full overflow-auto",n),children:o.jsx(A.Grid,{ref:f,cols:r,gap:a,className:s.cn(L({size:t,className:e})),...c})}));w.displayName="GridTable";const z=d.forwardRef(({className:e,...t},r)=>o.jsx("div",{ref:r,className:s.cn("contents","[&>*>*]:after:absolute [&>*>*]:after:bottom-0 [&>*>*]:after:inset-x-0 [&>*>*]:after:h-px [&>*>*]:after:bg-border","hover:[&>*>*]:before:opacity-0!",e),...t}));z.displayName="GridTableHeader";const B=d.forwardRef(({className:e,...t},r)=>o.jsx("div",{ref:r,className:s.cn("contents [&>*:last-child>*]:after:hidden",e),...t}));B.displayName="GridTableBody";function N(e){const t=e.target.closest("a, button, input, select, textarea, [role='button']");return t!==null&&t!==e.currentTarget}const q=d.forwardRef(({className:e,cols:t,gap:r=0,last:a,height:n,hideValue:c,noHover:f,noRound:x,onRowClick:l,href:u,target:V,rel:C,style:D,children:b,...p},m)=>{const j=typeof n=="number"?`${n}px`:n,T=d.useCallback(i=>{l&&(N(i)||l(i))},[l]),v=d.useCallback(i=>{if(l&&!(i.key!=="Enter"&&i.key!==" ")&&!N(i)){if(u){if(i.key!=="Enter")return}else i.preventDefault();l(i)}},[l,u]),G=s.cn("[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted","[&>*]:after:absolute [&>*]:after:bottom-0 [&>*]:after:inset-x-0 [&>*]:after:h-px [&>*]:after:bg-border",!x&&["[&>*:first-child]:after:left-3","[&>*:last-child]:after:right-3"],!f&&["[&>*]:z-0","[&>*]:before:absolute [&>*]:before:inset-x-0 [&>*]:before:top-0 [&>*]:before:bottom-px [&>*]:before:-z-10 [&>*]:before:bg-muted/50 [&>*]:before:opacity-0 [&>*]:before:transition-opacity","hover:[&>*]:before:opacity-100",!x&&"[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"],a&&"[&>*]:after:hidden",c&&"[&>*]:opacity-0"),h=s.cn("grid grid-cols-subgrid col-span-full",G,"cursor-pointer",e),y={...D,...j?{height:j}:{}};return u?o.jsx(k.BaseLink,{ref:m,href:u,target:V,rel:C,size:"unset",variant:"unset",className:s.cn("no-underline text-foreground!",h),style:y,onClick:l?T:void 0,onKeyDown:l?v:void 0,...p,children:b}):l?o.jsx("div",{ref:m,role:"row",tabIndex:0,className:h,style:y,onClick:T,onKeyDown:v,...p,children:b}):o.jsx("div",{ref:m,className:s.cn("grid grid-cols-subgrid col-span-full",G,e),style:y,...p,children:b})});q.displayName="GridTableRow";const P=g.cva("flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",{variants:{size:{sm:"min-h-8 px-1 py-2 text-sm",default:"min-h-10 px-2 py-2.5",lg:"min-h-12 px-4 py-3"},justify:{start:"justify-start",center:"justify-center",end:"justify-end"},gapBefore:{sm:"pl-5",md:"pl-10",none:""}},defaultVariants:{size:"default",justify:"start",gapBefore:"none"}}),H=d.forwardRef(({className:e,size:t,span:r=1,justify:a="start",gapBefore:n,...c},f)=>o.jsx(_.Col,{ref:f,span:r,className:s.cn(P({size:t,justify:a,gapBefore:n,className:e})),...c}));H.displayName="GridTableHead";const R=g.cva("flex items-center align-middle",{variants:{size:{sm:"px-1 py-2",default:"p-4",lg:"p-6"},textAlign:{left:"text-left justify-start",center:"text-center justify-center",right:"text-right justify-end"},gapBefore:{sm:"pl-5",md:"pl-10",none:""}},defaultVariants:{size:"default",textAlign:"left",gapBefore:"none"}}),O=d.forwardRef(({className:e,size:t,span:r=1,textAlign:a,gapBefore:n,...c},f)=>o.jsx(_.Col,{ref:f,span:r,className:s.cn(R({size:t,textAlign:a,gapBefore:n,className:e})),...c}));O.displayName="GridTableCell";exports.GridTable=w;exports.GridTableBody=B;exports.GridTableCell=O;exports.GridTableHead=H;exports.GridTableHeader=z;exports.GridTableRow=q;

package/dist/esm/components/table/grid-table.js

@@ -1,10 +1,10 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { cva as g } from "class-variance-authority";
 import * as n from "react";
 import { BaseLink as H } from "../base-link/base-link.js";
-import { Col as j } from "../layout/col/col.js";
-import { Grid as k } from "../layout/grid/grid.js";
-import { cn as r } from "../../utils/cn.js";
+import { Col as z } from "../layout/col/col.js";
+import { Grid as C } from "../layout/grid/grid.js";
+import { cn as a } from "../../utils/cn.js";
 const D = g("w-full", {
   variants: {
     size: {
@@ -16,24 +16,24 @@ const D = g("w-full", {
   defaultVariants: {
     size: "default"
   }
-}), C = n.forwardRef(
-  ({ className: e, size: t, cols: a = 12, gap: d = 0, wrapperClassName: s, ...f }, c) => /* @__PURE__ */ i("div", { className: r("relative w-full overflow-auto", s), children: /* @__PURE__ */ i(
-    k,
+}), K = n.forwardRef(
+  ({ className: e, size: t, cols: r = 12, gap: d = 0, wrapperClassName: s, ...f }, u) => /* @__PURE__ */ o("div", { className: a("relative w-full overflow-auto", s), children: /* @__PURE__ */ o(
+    C,
     {
-      ref: c,
-      cols: a,
+      ref: u,
+      cols: r,
       gap: d,
-      className: r(D({ size: t, className: e })),
+      className: a(D({ size: t, className: e })),
       ...f
     }
   ) })
 );
-C.displayName = "GridTable";
-const K = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ i(
+K.displayName = "GridTable";
+const A = n.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
   "div",
   {
-    ref: a,
-    className: r(
+    ref: r,
+    className: a(
       "contents",
       // Full-width border for header (no insets)
       "[&>*>*]:after:absolute [&>*>*]:after:bottom-0 [&>*>*]:after:inset-x-0 [&>*>*]:after:h-px [&>*>*]:after:bg-border",
@@ -44,126 +44,130 @@ const K = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ i(
     ...t
   }
 ));
-K.displayName = "GridTableHeader";
-const A = n.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ i(
+A.displayName = "GridTableHeader";
+const E = n.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ o(
   "div",
   {
-    ref: a,
-    className: r("contents [&>*:last-child>*]:after:hidden", e),
+    ref: r,
+    className: a("contents [&>*:last-child>*]:after:hidden", e),
     ...t
   }
 ));
-A.displayName = "GridTableBody";
+E.displayName = "GridTableBody";
+function j(e) {
+  const t = e.target.closest(
+    "a, button, input, select, textarea, [role='button']"
+  );
+  return t !== null && t !== e.currentTarget;
+}
 const S = n.forwardRef(
   ({
     className: e,
     cols: t,
-    gap: a = 0,
+    gap: r = 0,
     last: d,
     height: s,
     hideValue: f,
-    noHover: c,
-    noRound: y,
+    noHover: u,
+    noRound: x,
     onRowClick: l,
-    href: x,
-    target: z,
-    rel: w,
-    style: B,
-    children: u,
-    ...m
-  }, b) => {
-    const T = typeof s == "number" ? `${s}px` : s, v = n.useCallback(
-      (o) => {
-        !l || o.target.closest(
-          "a, button, input, select, textarea, [role='button']"
-        ) || l(o);
+    href: c,
+    target: w,
+    rel: B,
+    style: V,
+    children: m,
+    ...b
+  }, p) => {
+    const v = typeof s == "number" ? `${s}px` : s, T = n.useCallback(
+      (i) => {
+        l && (j(i) || l(i));
       },
       [l]
     ), h = n.useCallback(
-      (o) => {
-        if (l && (o.key === "Enter" || o.key === " ")) {
-          if (o.preventDefault(), o.target.closest(
-            "a, button, input, select, textarea, [role='button']"
-          ))
-            return;
-          l(o);
+      (i) => {
+        if (l && !(i.key !== "Enter" && i.key !== " ") && !j(i)) {
+          if (c) {
+            if (i.key !== "Enter") return;
+          } else
+            i.preventDefault();
+          l(i);
         }
       },
-      [l]
-    ), N = r(
+      [l, c]
+    ), N = a(
       "[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted",
       "[&>*]:after:absolute [&>*]:after:bottom-0 [&>*]:after:inset-x-0 [&>*]:after:h-px [&>*]:after:bg-border",
-      !y && [
+      !x && [
         "[&>*:first-child]:after:left-3",
         "[&>*:last-child]:after:right-3"
       ],
-      !c && [
+      !u && [
         "[&>*]:z-0",
         "[&>*]:before:absolute [&>*]:before:inset-x-0 [&>*]:before:top-0 [&>*]:before:bottom-px [&>*]:before:-z-10 [&>*]:before:bg-muted/50 [&>*]:before:opacity-0 [&>*]:before:transition-opacity",
         "hover:[&>*]:before:opacity-100",
-        !y && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
+        !x && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
       ],
       d && "[&>*]:after:hidden",
       f && "[&>*]:opacity-0"
-    ), G = r(
+    ), G = a(
       "grid grid-cols-subgrid col-span-full",
       N,
       "cursor-pointer",
       e
-    ), p = {
-      ...B,
-      ...T ? { height: T } : {}
+    ), y = {
+      ...V,
+      ...v ? { height: v } : {}
     };
-    return x ? /* @__PURE__ */ i(
+    return c ? /* @__PURE__ */ o(
       H,
       {
-        ref: b,
-        href: x,
-        target: z,
-        rel: w,
+        ref: p,
+        href: c,
+        target: w,
+        rel: B,
         size: "unset",
         variant: "unset",
-        className: r("no-underline text-foreground!", G),
-        style: p,
-        onClick: l ? v : void 0,
+        className: a("no-underline text-foreground!", G),
+        style: y,
+        onClick: l ? T : void 0,
         onKeyDown: l ? h : void 0,
-        ...m,
-        children: u
+        ...b,
+        children: m
       }
     ) : l ? (
       // biome-ignore lint/a11y/useSemanticElements: Using div with subgrid layout, not a semantic table
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ o(
         "div",
         {
-          ref: b,
+          ref: p,
           role: "row",
           tabIndex: 0,
           className: G,
-          style: p,
-          onClick: v,
+          style: y,
+          onClick: T,
           onKeyDown: h,
-          ...m,
-          children: u
+          ...b,
+          children: m
         }
       )
-    ) : /* @__PURE__ */ i(
+    ) : /* @__PURE__ */ o(
       "div",
       {
-        ref: b,
-        className: r(
+        ref: p,
+        className: a(
           "grid grid-cols-subgrid col-span-full",
           N,
           e
         ),
-        style: p,
-        ...m,
-        children: u
+        style: y,
+        ...b,
+        children: m
       }
     );
   }
 );
 S.displayName = "GridTableRow";
-const E = g(
+const k = g(
   "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
@@ -190,13 +194,13 @@ const E = g(
     }
   }
 ), I = n.forwardRef(
-  ({ className: e, size: t, span: a = 1, justify: d = "start", gapBefore: s, ...f }, c) => /* @__PURE__ */ i(
-    j,
+  ({ className: e, size: t, span: r = 1, justify: d = "start", gapBefore: s, ...f }, u) => /* @__PURE__ */ o(
+    z,
     {
-      ref: c,
-      span: a,
-      className: r(
-        E({ size: t, justify: d, gapBefore: s, className: e })
+      ref: u,
+      span: r,
+      className: a(
+        k({ size: t, justify: d, gapBefore: s, className: e })
       ),
       ...f
     }
@@ -226,25 +230,25 @@ const L = g("flex items-center align-middle", {
     textAlign: "left",
     gapBefore: "none"
   }
-}), $ = n.forwardRef(
-  ({ className: e, size: t, span: a = 1, textAlign: d, gapBefore: s, ...f }, c) => /* @__PURE__ */ i(
-    j,
+}), O = n.forwardRef(
+  ({ className: e, size: t, span: r = 1, textAlign: d, gapBefore: s, ...f }, u) => /* @__PURE__ */ o(
+    z,
     {
-      ref: c,
-      span: a,
-      className: r(
+      ref: u,
+      span: r,
+      className: a(
         L({ size: t, textAlign: d, gapBefore: s, className: e })
       ),
       ...f
     }
   )
 );
-$.displayName = "GridTableCell";
+O.displayName = "GridTableCell";
 export {
-  C as GridTable,
-  A as GridTableBody,
-  $ as GridTableCell,
+  K as GridTable,
+  E as GridTableBody,
+  O as GridTableCell,
   I as GridTableHead,
-  K as GridTableHeader,
+  A as GridTableHeader,
   S as GridTableRow
 };

package/dist/types/components/table/grid-table.d.ts

@@ -128,58 +128,6 @@ interface GridTableRowProps extends GridProps {
      */
     rel?: string;
 }
-/**
- * GridTableRow — row component of a GridTable.
- *
- * @usage
- * Use GridTableRow to create table rows in grid tables:
- * data rows, table entries with hover effects and borders.
- *
- * Props:
- * - `cols` — number of columns or custom grid template.
- * - `gap` — gap between cells (defaults to 0).
- * - `last` — whether this is the last row (removes bottom border).
- * - `height` — custom height for the row (string or number in pixels).
- * - `hideValue` — whether to hide value cells (for loading states).
- * - `onRowClick` — click handler for the row (makes entire row clickable).
- * - `href` — URL for the row link (renders as `<a>`, supports native link behavior).
- * - `target` — link target (e.g., "_blank"). Only used with `href`.
- * - `rel` — link rel attribute. Only used with `href`.
- *
- * Note: Automatically applies bottom border, hover effects, and selected state styling to all child elements.
- *
- * @example
- * ```tsx
- * <GridTableRow>
- *   <GridTableCell>Data</GridTableCell>
- * </GridTableRow>
- *
- * // Last row (no bottom border)
- * <GridTableRow last>
- *   <GridTableCell>Last row</GridTableCell>
- * </GridTableRow>
- *
- * // Custom height
- * <GridTableRow height="50px">
- *   <GridTableCell>Tall row</GridTableCell>
- * </GridTableRow>
- *
- * // Clickable row
- * <GridTableRow onRowClick={() => navigate('/details/123')}>
- *   <GridTableCell>Clickable row</GridTableCell>
- * </GridTableRow>
- *
- * // Link row (native <a> element)
- * <GridTableRow href="/pools/0x1234">
- *   <GridTableCell>Linked row</GridTableCell>
- * </GridTableRow>
- *
- * // External link row
- * <GridTableRow href="https://etherscan.io" target="_blank">
- *   <GridTableCell>External link row</GridTableCell>
- * </GridTableRow>
- * ```
- */
 declare const GridTableRow: React.ForwardRefExoticComponent<GridTableRowProps & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
 declare const gridTableHeadVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.62",
+  "version": "4.0.0-next.63",
   "description": "Internal UI components",
   "repository": {
     "type": "git",