@gearbox-protocol/permissionless-ui 1.22.0-next.2 → 1.22.0-next.21

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,11 +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: 143 70% 35%;
+    --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%;
@@ -88,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%;
@@ -98,10 +102,12 @@ 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: 128 49% 49%;
+    --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%;
@@ -123,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;
   }
 }
 
@@ -176,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));
@@ -41,6 +42,8 @@
   --color-destructive: hsl(var(--destructive));
   --color-destructive-foreground: hsl(var(--destructive-foreground));
   --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-success-hover: hsl(var(--success-hover));
   --color-warning: hsl(var(--warning));
   --color-liquidation: hsl(var(--liquidation));
   --color-border: hsl(var(--border));
@@ -63,6 +66,11 @@
   --color-gray-100: hsl(var(--gray-100));
   --color-gray-110: hsl(var(--gray-110));
 
+  /* Additional semantic colors (aliases) */
+  --color-additional-success: hsl(var(--success));
+  --color-additional-warning: hsl(var(--warning));
+  --color-additional-alert: hsl(var(--destructive));
+
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
@@ -90,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/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/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 };