@gearbox-protocol/permissionless-ui 1.22.0-next.16 → 1.22.0-next.18

package/dist/types/components/dialog/index.d.ts

@@ -1,3 +1,4 @@
+export * from '../modal/modal';
 export * from './dialog';
 export * from './dialog-container';
 export * from './dialog-content';
@@ -5,7 +6,6 @@ export * from './dialog-description';
 export * from './dialog-footer';
 export * from './dialog-form';
 export * from './dialog-header';
-export * from './dialog-modal';
 export * from './dialog-modal-container';
 export * from './dialog-overlay';
 export * from './dialog-title';

package/dist/types/components/index.d.ts

@@ -64,6 +64,7 @@ export * from './legal-agreement';
 export * from './liquidation';
 export * from './loader-guard';
 export * from './markdown-viewer';
+export * from './modal';
 export * from './navbar';
 export * from './navbar-logo';
 export * from './navitem';

package/dist/types/components/modal/index.d.ts

@@ -0,0 +1 @@
+export * from './modal';

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

@@ -0,0 +1,33 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const dialogModalVariants: (props?: ({
+    colorTheme?: "default" | "dark" | "dark-transparent" | null | undefined;
+    backdrop?: "default" | "success" | "failure" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dialogModalVariants> {
+    /**
+     * 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;
+}
+/**
+ * Modal component for responsive content width within dialogs
+ * Follows the same pattern as Container from layout/container
+ *
+ * @example
+ * ```tsx
+ * // With show/hide control
+ * <Modal show={isOpen} onClickOutside={handleClose}>
+ *   <Content />
+ * </Modal>
+ * ```
+ */
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export { Modal };

package/dist/types/components/skeleton/skeleton.d.ts

@@ -3,7 +3,7 @@ import type * as React from "react";
 declare const skeletonVariants: (props?: ({
     variant?: "default" | "lighter" | "darker" | null | undefined;
     speed?: "default" | "slow" | "fast" | null | undefined;
-    width?: "full" | "sm" | "lg" | "xs" | "md" | "xl" | "3/4" | "1/2" | "1/3" | "1/4" | "2xl" | null | undefined;
+    width?: "full" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3/4" | "1/2" | "1/3" | "1/4" | null | undefined;
     height?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type WidthPreset = NonNullable<VariantProps<typeof skeletonVariants>["width"]>;

package/dist/types/index.d.ts

@@ -60,6 +60,7 @@ export * from './components/legal-agreement';
 export * from './components/liquidation';
 export * from './components/loader-guard';
 export * from './components/markdown-viewer';
+export * from './components/modal';
 export * from './components/navbar';
 export * from './components/navbar-logo';
 export * from './components/navitem';

package/dist/types/utils/z-index.d.ts

@@ -3,6 +3,6 @@
  * Temporary added to avoid conflicts with other libraries
  */
 export declare const Z_INDEX: {
-    readonly MODAL: "z-[1300]";
+    readonly MODAL: "z-[50]";
     readonly TOOLTIP: "z-[9999]";
 };

package/package.json

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

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%;
@@ -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%;
@@ -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/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 };