@gearbox-protocol/permissionless-ui 1.22.0-next.4 → 1.22.0-next.40

package/src/styles/base.css

@@ -45,6 +45,7 @@ html.dark {
     --background: 225 15% 98%;
     --foreground: 240 5% 12%;
     --card: 0 0% 100%;
+    --modal: 0 0% 95%;
     --card-foreground: 240 5% 12%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 5% 12%;
@@ -54,13 +55,13 @@ html.dark {
     --secondary-foreground: 240 8.94% 75.88%;
     --muted: 225 10% 90%;
     --muted-foreground: 225 6% 40%;
-    --accent: 323.83, 100%, 58.04%;
+    --accent: 323.83 100% 58.04%;
     --accent-foreground: 0 0% 100%;
     --destructive: 0 85% 50%;
     --destructive-foreground: 0 0% 100%;
-    --success: 136.51, 100%, 78.63%;
-    --success-foreground: 0, 0%, 0%;
-    --success-hover: 136.58, 100%, 85.1%;
+    --success: 136.51 100% 78.63%;
+    --success-foreground: 0 0% 0%;
+    --success-hover: 136.58 100% 85.1%;
     --warning: 38 95% 45%;
     --liquidation: 274 67% 48%;
     --input: 225 10% 88%;
@@ -90,7 +91,8 @@ html.dark {
 
     --background: 240 3% 8%;
     --foreground: 0 0% 100%;
-    --card: 240 4% 10%;
+    --card: 240 3.85% 10.2%;
+    --modal: 240 4.92% 11.96%;
     --card-foreground: 0 0% 100%;
     --popover: 240 6% 12%;
     --popover-foreground: 0 0% 100%;
@@ -100,15 +102,15 @@ html.dark {
     --secondary-foreground: 240 8.94% 75.88%;
     --muted: 225 6% 19%;
     --muted-foreground: 240 2% 75%;
-    --accent: 323.83, 100%, 58.04%;
+    --accent: 323.83 100% 58.04%;
     --accent-foreground: 0 0% 100%;
-    --destructive: 3 93% 63%;
-    --success: 136.51, 100%, 78.63%;
-    --success-foreground: 0, 0%, 0%;
-    --success-hover: 136.58, 100%, 85.1%;
+    --destructive: 0 100% 65.69%;
+    --success: 136.51 100% 78.63%;
+    --success-foreground: 0 0% 0%;
+    --success-hover: 136.58 100% 85.1%;
     --destructive-foreground: 0 0% 100%;
-    --warning: 44 100% 69%;
-    --liquidation: 274 67% 58%;
+    --warning: 43.12 100% 68.63%;
+    --liquidation: 277.22 74.53% 58.43%;
     --input: 225 6% 19%;
     --ring: 330 100% 59%;
     --gray-10: 225 5.26% 14.9%;
@@ -127,7 +129,7 @@ html.dark {
     --white: 0 0% 100%;
     --white-foreground: 240 2.56% 7.65%;
     --black: 0 0% 0%;
-    --border: 0 0% 100% / 0.05;
+    --border: 0 0% 100% / 0.07;
   }
 }
 
@@ -180,6 +182,11 @@ html.dark {
     padding-right: 0 !important;
   }
 
+  /* Lock page scroll when our Modal is open */
+  body.gb-modal-open {
+    overflow: hidden !important;
+  }
+
   html.dark {
     color-scheme: dark;
   }

package/src/styles/theme.css

@@ -27,6 +27,7 @@
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
   --color-card: hsl(var(--card));
+  --color-modal: hsl(var(--modal));
   --color-card-foreground: hsl(var(--card-foreground));
   --color-popover: hsl(var(--popover));
   --color-popover-foreground: hsl(var(--popover-foreground));
@@ -97,4 +98,22 @@
       height: 0;
     }
   }
+
+  @keyframes modalOverlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes modalContentShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 }

package/dist/cjs/components/dialog/dialog-modal.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),v=require("react"),u=require("../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk");function j(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const n=j(v);let l=0,c=null;const x={default:"bg-black/30",dark:"bg-black/0","dark-transparent":"bg-black/85"},d=n.forwardRef(({show:e=!0,theme:r="default",onClickOutside:t,className:o,children:f,...m},b)=>{const[y,s]=n.useState(!1),p=n.useCallback(a=>{a.target===a.currentTarget&&t&&t()},[t]),g=n.useCallback(a=>{a.key==="Escape"&&t&&t()},[t]);return n.useEffect(()=>{if(!e||typeof document>"u")return;const a=document.body;return l===0&&(c=a.classList.contains("overflow-hidden")),l+=1,a.classList.add("overflow-hidden"),()=>{l=Math.max(0,l-1),l===0&&(c||a.classList.remove("overflow-hidden"),c=null)}},[e]),n.useEffect(()=>{if(!e)return;s(!1);const a=requestAnimationFrame(()=>s(!0));return()=>cancelAnimationFrame(a)},[e]),e?i.jsx("div",{className:u.cn("fixed inset-0 z-50",x[r]),children:i.jsx("div",{role:"dialog","aria-modal":"true",className:"overflow-y-auto h-full outline-none flex justify-center items-center",onClick:p,onKeyDown:g,children:i.jsx("div",{ref:b,className:u.cn("relative m-auto py-0 px-0 sm:py-5 transition-opacity duration-[225ms] ease-[cubic-bezier(0.4,0,0.2,1)]",y?"opacity-100":"opacity-0",o),...m,children:f})})}):null});d.displayName="DialogModal";exports.DialogModal=d;

package/dist/cjs/hooks/use-pool-points-tips.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");function c(u){const{points:t,tokensList:n}=u||{};return a.useMemo(()=>!t||!Array.isArray(t)?[]:t.map(e=>{const s=e.token&&n?n[e.token]:null,o=s?.symbol||e.token||"Unknown",i=s?.title||o,r=e.amount?typeof e.amount=="bigint"?(Number(e.amount)/1e18).toFixed(4):String(e.amount):"0";return{reward:e,amount:r,name:e.name||o,tokenTitle:i,fullTip:`${r} ${o}${e.description?` - ${e.description}`:""}`}}),[t,n])}exports.usePoolPointsTips=c;

package/dist/esm/components/dialog/dialog-modal.js

@@ -1,70 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as t from "react";
-import { cn as c } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk";
-let n = 0, l = null;
-const v = {
-  default: "bg-black/30",
-  dark: "bg-black/0",
-  "dark-transparent": "bg-black/85"
-}, g = t.forwardRef(
-  ({
-    show: r = !0,
-    theme: s = "default",
-    onClickOutside: a,
-    className: d,
-    children: f,
-    ...u
-  }, m) => {
-    const [y, i] = t.useState(!1), p = t.useCallback(
-      (e) => {
-        e.target === e.currentTarget && a && a();
-      },
-      [a]
-    ), b = t.useCallback(
-      (e) => {
-        e.key === "Escape" && a && a();
-      },
-      [a]
-    );
-    return t.useEffect(() => {
-      if (!r || typeof document > "u") return;
-      const e = document.body;
-      return n === 0 && (l = e.classList.contains("overflow-hidden")), n += 1, e.classList.add("overflow-hidden"), () => {
-        n = Math.max(0, n - 1), n === 0 && (l || e.classList.remove("overflow-hidden"), l = null);
-      };
-    }, [r]), t.useEffect(() => {
-      if (!r) return;
-      i(!1);
-      const e = requestAnimationFrame(() => i(!0));
-      return () => cancelAnimationFrame(e);
-    }, [r]), r ? /* @__PURE__ */ o("div", { className: c("fixed inset-0 z-50", v[s]), children: /* @__PURE__ */ o(
-      "div",
-      {
-        role: "dialog",
-        "aria-modal": "true",
-        className: "overflow-y-auto h-full outline-none flex justify-center items-center",
-        onClick: p,
-        onKeyDown: b,
-        children: /* @__PURE__ */ o(
-          "div",
-          {
-            ref: m,
-            className: c(
-              "relative m-auto py-0 px-0 sm:py-5 transition-opacity duration-[225ms] ease-[cubic-bezier(0.4,0,0.2,1)]",
-              y ? "opacity-100" : "opacity-0",
-              d
-            ),
-            ...u,
-            children: f
-          }
-        )
-      }
-    ) }) : null;
-  }
-);
-g.displayName = "DialogModal";
-export {
-  g as DialogModal
-};

package/dist/esm/hooks/use-pool-points-tips.js

@@ -1,17 +0,0 @@
-import { useMemo as a } from "react";
-function l(u) {
-  const { points: e, tokensList: n } = u || {};
-  return a(() => !e || !Array.isArray(e) ? [] : e.map((t) => {
-    const r = t.token && n ? n[t.token] : null, o = r?.symbol || t.token || "Unknown", m = r?.title || o, s = t.amount ? typeof t.amount == "bigint" ? (Number(t.amount) / 1e18).toFixed(4) : String(t.amount) : "0";
-    return {
-      reward: t,
-      amount: s,
-      name: t.name || o,
-      tokenTitle: m,
-      fullTip: `${s} ${o}${t.description ? ` - ${t.description}` : ""}`
-    };
-  }), [e, n]);
-}
-export {
-  l as usePoolPointsTips
-};

package/dist/types/components/dialog/dialog-modal.d.ts

@@ -1,30 +0,0 @@
-import * as React from "react";
-type Themes = "default" | "dark" | "dark-transparent";
-export interface DialogModalProps extends React.HTMLAttributes<HTMLDivElement> {
-    theme?: Themes;
-    /**
-     * Whether to show the dialog container
-     * When false, renders null
-     * @default true
-     */
-    show?: boolean;
-    /**
-     * Callback when clicking outside the container (on the overlay)
-     * Only works when used as a modal overlay
-     */
-    onClickOutside: () => void;
-}
-/**
- * DialogModal component for responsive content width within dialogs
- * Follows the same pattern as Container from layout/container
- *
- * @example
- * ```tsx
- * // With show/hide control
- * <DialogModal show={isOpen} onClickOutside={handleClose}>
- *   <Content />
- * </DialogModal>
- * ```
- */
-declare const DialogModal: React.ForwardRefExoticComponent<DialogModalProps & React.RefAttributes<HTMLDivElement>>;
-export { DialogModal };

package/dist/types/hooks/use-pool-points-tips.d.ts

@@ -1,40 +0,0 @@
-export interface PoolPointsTip {
-    reward?: {
-        token?: string;
-        amount?: bigint | string | number;
-        name?: string;
-        description?: string;
-    };
-    amount: string;
-    name: string;
-    tokenTitle?: string;
-    fullTip: string;
-}
-export interface UsePoolPointsTipsProps {
-    points?: Array<{
-        token?: string;
-        amount?: bigint | string | number;
-        name?: string;
-        description?: string;
-    }>;
-    tokensList?: Record<string, {
-        symbol: string;
-        title?: string;
-    }>;
-}
-/**
- * Hook to generate pool points tips
- *
- * @param props - Pool points configuration
- * @returns Array of tip objects
- *
- * @example
- * ```tsx
- * const tips = usePoolPointsTips({
- *   poolToken,
- *   points,
- *   tokensList,
- * });
- * ```
- */
-export declare function usePoolPointsTips(props?: UsePoolPointsTipsProps): PoolPointsTip[];