@gearbox-protocol/permissionless-ui 1.24.1 → 1.24.2

package/dist/cjs/components/tab-control/tab-control.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),a=require("react"),m=require("../navigation-context/navigation-context.cjs");require("@gearbox-protocol/sdk");const x=require("../../utils/cn.cjs");require("sonner");require("luxon");require("../../utils/z-index.cjs");function w(t){if(!t)return null;const{width:n=0,height:i=0}=t?.getBoundingClientRect()||{},s=t?.offsetTop||0,o=t?.offsetLeft||0;return{width:n,height:i,left:o,top:s}}function C(t,n,i){const s=a.useRef(null),[o,f]=a.useState(null),l=a.useRef(null),c=a.useCallback(r=>{f(r),l.current=r},[]);return a.useEffect(()=>{const r=i.current[t],e=()=>{const d=w(r),b=d?.height!==l.current?.height,g=d?.width!==l.current?.width,p=d?.left!==l.current?.left,v=d?.top!==l.current?.top;(b||g||p||v)&&c(d)};s.current=e,e();const u=r?new ResizeObserver(e):null;return r&&u?.observe(r),()=>{r&&u?.unobserve(r)}},[t,i,c]),a.useEffect(()=>{const r=n?new ResizeObserver(()=>{s.current?.()}):null;return n&&r?.observe(n),()=>{n&&r?.unobserve(n)}},[n]),o}function T({tabs:t,state:n,showBorder:i=!0,tabItemWrapPadding:s,variant:o="auto"}){const f=a.useRef(null),l=a.useRef({}),c=C(n.id,f.current,l),r=(e,u)=>()=>n.handleTabChange(e,u);return h.jsx("div",{className:"relative w-full flex flex-col flex-wrap overflow-y-hidden",children:h.jsxs("div",{ref:f,className:x.cn("relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden","scrollbar-hidden",i&&"after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"),children:[c&&h.jsx("div",{className:"absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",style:{width:`${c.width}px`,transform:`translate(${c.left}px)`}}),t.map((e,u,d)=>{const b=u===d.length-1;return h.jsx("button",{ref:g=>{l.current[e.id]=g},type:"button",onClick:e.disabled?void 0:r(e.id,u),disabled:e.disabled,className:x.cn("flex items-center bg-transparent border-none shrink-0 text-foreground",s?"":"p-0 pb-3.5",o==="equal"?"grow shrink-0 basis-[0%] justify-center min-w-0":!b&&"mr-10 max-[500px]:mr-8",e.disabled&&"cursor-not-allowed",!e.disabled&&"cursor-pointer",!e.disabled&&"hover:text-foreground hover:[&>*]:text-foreground"),style:s?{padding:s}:void 0,children:e.item},`tab-item-${e.id}`)})]})})}function j({icon:t,label:n,selected:i,textSize:s="default",amount:o}){return h.jsxs(h.Fragment,{children:[t&&h.jsx("div",{className:x.cn("mr-3",i?"text-foreground":"text-secondary-foreground"),children:t}),h.jsx("div",{className:x.cn("m-0 p-0 whitespace-nowrap",s==="default"&&"text-sm leading-[17px] font-normal",s==="unset"&&"text-[unset] leading-[unset] font-[unset]",i?"text-foreground":"text-secondary-foreground"),children:n}),!!o&&h.jsx("div",{className:"ml-1.5",children:h.jsx("div",{className:"py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]",children:o})})]})}function y(t,n=0){const[i,s]=a.useState(t),[o,f]=a.useState(n),l=a.useCallback((c,r)=>{s(c),f(r)},[]);return{id:i,index:o,handleTabChange:l}}function N(t){const{useLocation:n,useNavigate:i}=m.useNavigationAdapter(),{hash:s}=n(),o=i(),f=a.useMemo(()=>t.reduce((u,d,b)=>(u[d.id]={id:d.id,index:b},u),{}),[t]),l=a.useMemo(()=>s.slice(1).toLowerCase(),[s]),{id:c,index:r}=f[l]||{},e=a.useCallback(u=>{o(`#${u}`)},[o]);return{id:c,index:r,handleTabChange:e}}function S({defaultTabs:t,pathRoot:n,selectedSection:i}){const{useNavigate:s}=m.useNavigationAdapter(),o=s(),f=a.useMemo(()=>t.reduce((e,u,d)=>(e[u.id]={id:u.id,index:d},e),{}),[t]),l=a.useCallback(e=>{o(`${n}/${e}`)},[o,n]),{id:c,index:r}=f[i]||{};return{id:c,index:r,handleTabChange:l}}exports.TabControl=T;exports.TabItem=j;exports.useHashTabs=N;exports.useSectionTab=S;exports.useTabControl=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),i=require("react"),p=require("../navigation-context/navigation-context.cjs");require("@gearbox-protocol/sdk");const x=require("../../utils/cn.cjs");require("sonner");require("luxon");require("../../utils/z-index.cjs");function w(n){if(!n)return null;const{width:r=0,height:o=0}=n?.getBoundingClientRect()||{},a=n?.offsetTop||0,s=n?.offsetLeft||0;return{width:r,height:o,left:s,top:a}}function C(n,r,o){const a=i.useRef(null),[s,h]=i.useState(null),l=i.useRef(null),d=i.useCallback(e=>{h(e),l.current=e},[]);return i.useEffect(()=>{const e=o.current[n],c=()=>{const u=w(e),b=u?.height!==l.current?.height,g=u?.width!==l.current?.width,m=u?.left!==l.current?.left,v=u?.top!==l.current?.top;(b||g||m||v)&&d(u)};a.current=c,c();const t=e?new ResizeObserver(c):null;return e&&t?.observe(e),()=>{e&&t?.unobserve(e)}},[n,o,d]),i.useEffect(()=>{const e=r?new ResizeObserver(()=>{a.current?.()}):null;return r&&e?.observe(r),()=>{r&&e?.unobserve(r)}},[r]),s}function T({className:n,tabs:r,state:o,showBorder:a=!0,tabItemWrapPadding:s,variant:h="auto"}){const l=i.useRef(null),d=i.useRef({}),e=C(o.id,l.current,d),c=(t,u)=>()=>o.handleTabChange(t,u);return f.jsx("div",{className:x.cn("relative w-full flex flex-col flex-wrap overflow-y-hidden",n),children:f.jsxs("div",{ref:l,className:x.cn("relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden","scrollbar-hidden",a&&"after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"),children:[e&&f.jsx("div",{className:"absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",style:{width:`${e.width}px`,transform:`translate(${e.left}px)`}}),r.map((t,u,b)=>{const g=u===b.length-1;return f.jsx("button",{ref:m=>{d.current[t.id]=m},type:"button",onClick:t.disabled?void 0:c(t.id,u),disabled:t.disabled,className:x.cn("flex items-center bg-transparent border-none shrink-0 text-foreground",s?"":"p-0 pb-3.5",h==="equal"?"grow shrink-0 basis-[0%] justify-center min-w-0":!g&&"mr-10 max-[500px]:mr-8",t.disabled&&"cursor-not-allowed",!t.disabled&&"cursor-pointer",!t.disabled&&"hover:text-foreground hover:[&>*]:text-foreground"),style:s?{padding:s}:void 0,children:t.item},`tab-item-${t.id}`)})]})})}function j({icon:n,label:r,selected:o,textSize:a="default",amount:s}){return f.jsxs(f.Fragment,{children:[n&&f.jsx("div",{className:x.cn("mr-3",o?"text-foreground":"text-secondary-foreground"),children:n}),f.jsx("div",{className:x.cn("m-0 p-0 whitespace-nowrap",a==="default"&&"text-sm leading-[17px] font-normal",a==="unset"&&"text-[unset] leading-[unset] font-[unset]",o?"text-foreground":"text-secondary-foreground"),children:r}),!!s&&f.jsx("div",{className:"ml-1.5",children:f.jsx("div",{className:"py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]",children:s})})]})}function y(n,r=0){const[o,a]=i.useState(n),[s,h]=i.useState(r),l=i.useCallback((d,e)=>{a(d),h(e)},[]);return{id:o,index:s,handleTabChange:l}}function N(n){const{useLocation:r,useNavigate:o}=p.useNavigationAdapter(),{hash:a}=r(),s=o(),h=i.useMemo(()=>n.reduce((t,u,b)=>(t[u.id]={id:u.id,index:b},t),{}),[n]),l=i.useMemo(()=>a.slice(1).toLowerCase(),[a]),{id:d,index:e}=h[l]||{},c=i.useCallback(t=>{s(`#${t}`)},[s]);return{id:d,index:e,handleTabChange:c}}function S({defaultTabs:n,pathRoot:r,selectedSection:o}){const{useNavigate:a}=p.useNavigationAdapter(),s=a(),h=i.useMemo(()=>n.reduce((c,t,u)=>(c[t.id]={id:t.id,index:u},c),{}),[n]),l=i.useCallback(c=>{s(`${r}/${c}`)},[s,r]),{id:d,index:e}=h[o]||{};return{id:d,index:e,handleTabChange:l}}exports.TabControl=T;exports.TabItem=j;exports.useHashTabs=N;exports.useSectionTab=S;exports.useTabControl=y;

package/dist/esm/components/tab-control/tab-control.js

@@ -1,176 +1,186 @@
-import { jsx as f, jsxs as N, Fragment as S } from "react/jsx-runtime";
-import { useRef as m, useState as g, useCallback as p, useMemo as v, useEffect as w } from "react";
-import { useNavigationAdapter as T } from "../navigation-context/navigation-context.js";
+import { jsx as f, jsxs as T, Fragment as S } from "react/jsx-runtime";
+import { useRef as b, useState as v, useCallback as p, useMemo as w, useEffect as N } from "react";
+import { useNavigationAdapter as y } from "../navigation-context/navigation-context.js";
 import "@gearbox-protocol/sdk";
-import { cn as b } from "../../utils/cn.js";
+import { cn as m } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
 import "../../utils/z-index.js";
-function U(t) {
-  if (!t) return null;
-  const { width: n = 0, height: i = 0 } = t?.getBoundingClientRect() || {}, o = t?.offsetTop || 0, s = t?.offsetLeft || 0;
-  return { width: n, height: i, left: s, top: o };
+function U(n) {
+  if (!n) return null;
+  const { width: r = 0, height: s = 0 } = n?.getBoundingClientRect() || {}, i = n?.offsetTop || 0, o = n?.offsetLeft || 0;
+  return { width: r, height: s, left: o, top: i };
 }
-function $(t, n, i) {
-  const o = m(null), [s, u] = g(null), l = m(null), d = p((r) => {
-    u(r), l.current = r;
+function $(n, r, s) {
+  const i = b(null), [o, u] = v(null), l = b(null), c = p((e) => {
+    u(e), l.current = e;
   }, []);
-  return w(() => {
-    const r = i.current[t], e = () => {
-      const c = U(r), h = c?.height !== l.current?.height, x = c?.width !== l.current?.width, y = c?.left !== l.current?.left, C = c?.top !== l.current?.top;
-      (h || x || y || C) && d(c);
+  return N(() => {
+    const e = s.current[n], d = () => {
+      const a = U(e), h = a?.height !== l.current?.height, x = a?.width !== l.current?.width, g = a?.left !== l.current?.left, C = a?.top !== l.current?.top;
+      (h || x || g || C) && c(a);
     };
-    o.current = e, e();
-    const a = r ? new ResizeObserver(e) : null;
-    return r && a?.observe(r), () => {
-      r && a?.unobserve(r);
+    i.current = d, d();
+    const t = e ? new ResizeObserver(d) : null;
+    return e && t?.observe(e), () => {
+      e && t?.unobserve(e);
     };
-  }, [t, i, d]), w(() => {
-    const r = n ? new ResizeObserver(() => {
-      o.current?.();
+  }, [n, s, c]), N(() => {
+    const e = r ? new ResizeObserver(() => {
+      i.current?.();
     }) : null;
-    return n && r?.observe(n), () => {
-      n && r?.unobserve(n);
+    return r && e?.observe(r), () => {
+      r && e?.unobserve(r);
     };
-  }, [n]), s;
+  }, [r]), o;
 }
 function A({
-  tabs: t,
-  state: n,
+  className: n,
+  tabs: r,
+  state: s,
   showBorder: i = !0,
   tabItemWrapPadding: o,
-  variant: s = "auto"
+  variant: u = "auto"
 }) {
-  const u = m(null), l = m({}), d = $(
-    n.id,
-    u.current,
-    l
-  ), r = (e, a) => () => n.handleTabChange(e, a);
-  return /* @__PURE__ */ f("div", { className: "relative w-full flex flex-col flex-wrap overflow-y-hidden", children: /* @__PURE__ */ N(
+  const l = b(null), c = b({}), e = $(
+    s.id,
+    l.current,
+    c
+  ), d = (t, a) => () => s.handleTabChange(t, a);
+  return /* @__PURE__ */ f(
     "div",
     {
-      ref: u,
-      className: b(
-        "relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
-        "scrollbar-hidden",
-        i && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
+      className: m(
+        "relative w-full flex flex-col flex-wrap overflow-y-hidden",
+        n
       ),
-      children: [
-        d && /* @__PURE__ */ f(
-          "div",
-          {
-            className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
-            style: {
-              width: `${d.width}px`,
-              transform: `translate(${d.left}px)`
-            }
-          }
-        ),
-        t.map((e, a, c) => {
-          const h = a === c.length - 1;
-          return /* @__PURE__ */ f(
-            "button",
-            {
-              ref: (x) => {
-                l.current[e.id] = x;
-              },
-              type: "button",
-              onClick: e.disabled ? void 0 : r(e.id, a),
-              disabled: e.disabled,
-              className: b(
-                "flex items-center bg-transparent border-none shrink-0 text-foreground",
-                o ? "" : "p-0 pb-3.5",
-                s === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !h && "mr-10 max-[500px]:mr-8",
-                e.disabled && "cursor-not-allowed",
-                !e.disabled && "cursor-pointer",
-                !e.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
-              ),
-              style: o ? { padding: o } : void 0,
-              children: e.item
-            },
-            `tab-item-${e.id}`
-          );
-        })
-      ]
+      children: /* @__PURE__ */ T(
+        "div",
+        {
+          ref: l,
+          className: m(
+            "relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
+            "scrollbar-hidden",
+            i && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
+          ),
+          children: [
+            e && /* @__PURE__ */ f(
+              "div",
+              {
+                className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
+                style: {
+                  width: `${e.width}px`,
+                  transform: `translate(${e.left}px)`
+                }
+              }
+            ),
+            r.map((t, a, h) => {
+              const x = a === h.length - 1;
+              return /* @__PURE__ */ f(
+                "button",
+                {
+                  ref: (g) => {
+                    c.current[t.id] = g;
+                  },
+                  type: "button",
+                  onClick: t.disabled ? void 0 : d(t.id, a),
+                  disabled: t.disabled,
+                  className: m(
+                    "flex items-center bg-transparent border-none shrink-0 text-foreground",
+                    o ? "" : "p-0 pb-3.5",
+                    u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !x && "mr-10 max-[500px]:mr-8",
+                    t.disabled && "cursor-not-allowed",
+                    !t.disabled && "cursor-pointer",
+                    !t.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
+                  ),
+                  style: o ? { padding: o } : void 0,
+                  children: t.item
+                },
+                `tab-item-${t.id}`
+              );
+            })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 function B({
-  icon: t,
-  label: n,
-  selected: i,
-  textSize: o = "default",
-  amount: s
+  icon: n,
+  label: r,
+  selected: s,
+  textSize: i = "default",
+  amount: o
 }) {
-  return /* @__PURE__ */ N(S, { children: [
-    t && /* @__PURE__ */ f(
+  return /* @__PURE__ */ T(S, { children: [
+    n && /* @__PURE__ */ f(
       "div",
       {
-        className: b(
+        className: m(
           "mr-3",
-          i ? "text-foreground" : "text-secondary-foreground"
+          s ? "text-foreground" : "text-secondary-foreground"
         ),
-        children: t
+        children: n
       }
     ),
     /* @__PURE__ */ f(
       "div",
       {
-        className: b(
+        className: m(
           "m-0 p-0 whitespace-nowrap",
-          o === "default" && "text-sm leading-[17px] font-normal",
-          o === "unset" && "text-[unset] leading-[unset] font-[unset]",
-          i ? "text-foreground" : "text-secondary-foreground"
+          i === "default" && "text-sm leading-[17px] font-normal",
+          i === "unset" && "text-[unset] leading-[unset] font-[unset]",
+          s ? "text-foreground" : "text-secondary-foreground"
         ),
-        children: n
+        children: r
       }
     ),
-    !!s && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: s }) })
+    !!o && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: o }) })
   ] });
 }
-function F(t, n = 0) {
-  const [i, o] = g(t), [s, u] = g(n), l = p((d, r) => {
-    o(d), u(r);
+function F(n, r = 0) {
+  const [s, i] = v(n), [o, u] = v(r), l = p((c, e) => {
+    i(c), u(e);
   }, []);
-  return { id: i, index: s, handleTabChange: l };
+  return { id: s, index: o, handleTabChange: l };
 }
-function I(t) {
-  const { useLocation: n, useNavigate: i } = T(), { hash: o } = n(), s = i(), u = v(
-    () => t.reduce(
-      (a, c, h) => (a[c.id] = { id: c.id, index: h }, a),
+function I(n) {
+  const { useLocation: r, useNavigate: s } = y(), { hash: i } = r(), o = s(), u = w(
+    () => n.reduce(
+      (t, a, h) => (t[a.id] = { id: a.id, index: h }, t),
       {}
     ),
-    [t]
-  ), l = v(() => o.slice(1).toLowerCase(), [o]), { id: d, index: r } = u[l] || {}, e = p(
-    (a) => {
-      s(`#${a}`);
+    [n]
+  ), l = w(() => i.slice(1).toLowerCase(), [i]), { id: c, index: e } = u[l] || {}, d = p(
+    (t) => {
+      o(`#${t}`);
     },
-    [s]
+    [o]
   );
   return {
-    id: d,
-    index: r,
-    handleTabChange: e
+    id: c,
+    index: e,
+    handleTabChange: d
   };
 }
 function M({
-  defaultTabs: t,
-  pathRoot: n,
-  selectedSection: i
+  defaultTabs: n,
+  pathRoot: r,
+  selectedSection: s
 }) {
-  const { useNavigate: o } = T(), s = o(), u = v(
-    () => t.reduce(
-      (e, a, c) => (e[a.id] = { id: a.id, index: c }, e),
+  const { useNavigate: i } = y(), o = i(), u = w(
+    () => n.reduce(
+      (d, t, a) => (d[t.id] = { id: t.id, index: a }, d),
       {}
     ),
-    [t]
+    [n]
   ), l = p(
-    (e) => {
-      s(`${n}/${e}`);
+    (d) => {
+      o(`${r}/${d}`);
     },
-    [s, n]
-  ), { id: d, index: r } = u[i] || {};
-  return { id: d, index: r, handleTabChange: l };
+    [o, r]
+  ), { id: c, index: e } = u[s] || {};
+  return { id: c, index: e, handleTabChange: l };
 }
 export {
   A as TabControl,

package/dist/types/components/tab-control/tab-control.d.ts

@@ -4,13 +4,14 @@ export interface TabControl<T extends string> {
     disabled?: boolean;
 }
 export interface TabControlProps<T extends string> {
+    className?: string;
     tabs: Array<TabControl<T>>;
     state: UseTabControlReturnType<T>;
     showBorder?: boolean;
     variant?: "equal" | "auto";
     tabItemWrapPadding?: string;
 }
-export declare function TabControl<T extends string>({ tabs, state: controlState, showBorder, tabItemWrapPadding, variant, }: TabControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TabControl<T extends string>({ className, tabs, state: controlState, showBorder, tabItemWrapPadding, variant, }: TabControlProps<T>): import("react/jsx-runtime").JSX.Element;
 interface TabItemProps {
     icon?: React.ReactNode;
     label: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.24.1",
+  "version": "1.24.2",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",