@gearbox-protocol/permissionless-ui 1.5.0 → 1.6.0

package/dist/cjs/components/auth/siwe-provider.js

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/components/cards/card.js

@@ -40,18 +40,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_class_variance_authority = require("class-variance-authority");
 var React = __toESM(require("react"));
 var import_utils = __toESM(require('../../utils/index.js'));
-const cardVariants = (0, import_class_variance_authority.cva)("rounded-xl border bg-card text-card-foreground", {
-  variants: {
-    variant: {
-      default: "",
-      interactive: "hover:bg-accent/50 transition-colors cursor-pointer",
-      transparent: "bg-card/0"
+const cardVariants = (0, import_class_variance_authority.cva)(
+  "rounded-xl border border-border bg-card text-card-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        interactive: "hover:bg-secondary transition-colors cursor-pointer",
+        transparent: "bg-card/0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  },
-  defaultVariants: {
-    variant: "default"
   }
-});
+);
 const Card = React.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",

package/dist/cjs/components/layout/footer.js

@@ -58,7 +58,7 @@ const Footer = import_react.default.forwardRef(
       {
         ref,
         className: (0, import_cn.cn)(
-          "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+          "relative w-full border-t bg-card border-border flex items-center justify-center",
           className
         ),
         ...props,
@@ -138,7 +138,7 @@ function GearboxFooter({
     "footer",
     {
       className: (0, import_cn.cn)(
-        "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+        "relative w-full border-t bg-card border-border flex items-center justify-center",
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 items-top py-6 w-full px-4 max-w-[1440px]", children: [

package/dist/cjs/components/layout/header.js

@@ -65,7 +65,7 @@ const Header = import_react.default.forwardRef(
       {
         ref,
         className: (0, import_cn.cn)(
-          "relative w-full bg-background h-18 mb-6 border-b flex flex-nowrap items-center border-border",
+          "relative w-full bg-background h-18 border-b flex flex-nowrap items-center border-border",
           fixed && "fixed top-0 left-0 right-0 z-50",
           sticky && "sticky top-0 z-50",
           className

package/dist/cjs/components/layout/layout.js

@@ -51,7 +51,18 @@ const Layout = import_react.default.forwardRef(
         ...props,
         children: [
           header && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "header" }, children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "overflow-x-hidden", style: { gridArea: "main" }, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "main",
+            {
+              className: "overflow-x-hidden py-6",
+              style: {
+                gridArea: "main",
+                backgroundColor: "hsl(var(--main-background))",
+                color: "hsl(var(--main-foreground))"
+              },
+              children
+            }
+          ),
           footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridArea: "footer" }, children: footer })
         ]
       }

package/dist/cjs/components/layout/page-layout.js

@@ -23,15 +23,18 @@ __export(page_layout_exports, {
 module.exports = __toCommonJS(page_layout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_back_button = require('../buttons/back-button.js');
+var import_container = require('./container.js');
 function PageLayout({
   children,
   title,
   description,
   icon,
   backButton,
-  actionButton
+  actionButton,
+  maxContainerWidth = "xl",
+  containerClassName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-screen bg-black text-white p-6 overflow-y-auto", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_container.Container, { maxWidth: maxContainerWidth, className: containerClassName, children: [
     backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_back_button.BackButton,
       {

package/dist/cjs/components/tabs.js

@@ -56,7 +56,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: (0, import_utils.default)(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none cursor-pointer",
       className
     ),
     ...props

package/dist/esm/components/auth/siwe-provider.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { SIWEProvider } from "connectkit";
 import { createSiweMessage } from "viem/siwe";

package/dist/esm/components/cards/card.js

@@ -2,18 +2,21 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import cn from "../../utils/index.js";
-const cardVariants = cva("rounded-xl border bg-card text-card-foreground", {
-  variants: {
-    variant: {
-      default: "",
-      interactive: "hover:bg-accent/50 transition-colors cursor-pointer",
-      transparent: "bg-card/0"
+const cardVariants = cva(
+  "rounded-xl border border-border bg-card text-card-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        interactive: "hover:bg-secondary transition-colors cursor-pointer",
+        transparent: "bg-card/0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  },
-  defaultVariants: {
-    variant: "default"
   }
-});
+);
 const Card = React.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",

package/dist/esm/components/layout/footer.js

@@ -22,7 +22,7 @@ const Footer = React.forwardRef(
       {
         ref,
         className: cn(
-          "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+          "relative w-full border-t bg-card border-border flex items-center justify-center",
           className
         ),
         ...props,
@@ -102,7 +102,7 @@ function GearboxFooter({
     "footer",
     {
       className: cn(
-        "relative w-full border-t bg-card border-border mt-6 flex items-center justify-center",
+        "relative w-full border-t bg-card border-border flex items-center justify-center",
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 items-top py-6 w-full px-4 max-w-[1440px]", children: [

package/dist/esm/components/layout/header.js

@@ -31,7 +31,7 @@ const Header = React.forwardRef(
       {
         ref,
         className: cn(
-          "relative w-full bg-background h-18 mb-6 border-b flex flex-nowrap items-center border-border",
+          "relative w-full bg-background h-18 border-b flex flex-nowrap items-center border-border",
           fixed && "fixed top-0 left-0 right-0 z-50",
           sticky && "sticky top-0 z-50",
           className

package/dist/esm/components/layout/layout.js

@@ -18,7 +18,18 @@ const Layout = React.forwardRef(
         ...props,
         children: [
           header && /* @__PURE__ */ jsx("div", { style: { gridArea: "header" }, children: header }),
-          /* @__PURE__ */ jsx("main", { className: "overflow-x-hidden", style: { gridArea: "main" }, children }),
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              className: "overflow-x-hidden py-6",
+              style: {
+                gridArea: "main",
+                backgroundColor: "hsl(var(--main-background))",
+                color: "hsl(var(--main-foreground))"
+              },
+              children
+            }
+          ),
           footer && /* @__PURE__ */ jsx("div", { style: { gridArea: "footer" }, children: footer })
         ]
       }

package/dist/esm/components/layout/page-layout.js

@@ -1,14 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BackButton } from "../buttons/back-button.js";
+import { Container } from "./container.js";
 function PageLayout({
   children,
   title,
   description,
   icon,
   backButton,
-  actionButton
+  actionButton,
+  maxContainerWidth = "xl",
+  containerClassName
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-black text-white p-6 overflow-y-auto", children: [
+  return /* @__PURE__ */ jsxs(Container, { maxWidth: maxContainerWidth, className: containerClassName, children: [
     backButton && /* @__PURE__ */ jsx(
       BackButton,
       {

package/dist/esm/components/tabs.js

@@ -20,7 +20,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none cursor-pointer",
       className
     ),
     ...props

package/dist/globals.css

@@ -1,5 +1,5 @@
-@import "tailwindcss";
 @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
+@import "tailwindcss";
 @import "./grid-safelist.css";
 
 @layer base {
@@ -32,6 +32,8 @@
     --white: 0 0% 100%;
     --black: 0 0% 0%;
     --border: 0 0% 89.8%;
+    --main-background: 240 10% 3.9%;
+    --main-foreground: 0 0% 98%;
   }
 
   .dark {
@@ -74,6 +76,8 @@
     --white: 0 0% 100%;
     --black: 0 0% 0%;
     --border: 225 7% 22%;
+    --main-background: 240 10% 3.9%;
+    --main-foreground: 0 0% 98%;
   }
 }
 

package/dist/types/components/layout/page-layout.d.ts

@@ -9,6 +9,8 @@ interface PageLayoutProps {
         onClick?: () => void;
     };
     actionButton?: JSX.Element;
+    maxContainerWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    containerClassName?: string;
 }
 /**
  * PageLayout — main layout component for application pages.
@@ -35,5 +37,5 @@ interface PageLayoutProps {
  * - for modal dialogs or overlays (use Dialog component instead).
  * - for nested page sections (use Card or other container components).
  */
-export declare function PageLayout({ children, title, description, icon, backButton, actionButton, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLayout({ children, title, description, icon, backButton, actionButton, maxContainerWidth, containerClassName, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -72,7 +72,7 @@
   },
   "peerDependencies": {
     "@gearbox-protocol/sdk": "*",
-    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query": "^5.64.1",
     "@types/react": "^18 || ^19",
     "@types/react-dom": "^18 || ^19",
     "connectkit": "^1.8.0",