@gearbox-protocol/permissionless-ui 1.6.1 → 1.7.0

package/dist/cjs/components/block-sync.js

@@ -57,7 +57,7 @@ function BlockSync({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "span",
       {
-        className: (0, import_cn.cn)("text-xs", isError ? "text-red-500" : "text-green-500"),
+        className: (0, import_cn.cn)("text-xs", isError ? "text-destructive" : "text-success"),
         children: "Status"
       }
     ),
@@ -66,7 +66,7 @@ function BlockSync({
       {
         className: (0, import_cn.cn)(
           "w-2 h-2 rounded-full",
-          isError ? "bg-red-500" : "bg-green-500"
+          isError ? "bg-destructive" : "bg-success"
         )
       }
     )

package/dist/cjs/components/buttons/button.js

@@ -44,11 +44,11 @@ const buttonVariants = (0, import_class_variance_authority.cva)(
       variant: {
         default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border-border bg-background shadow-sm hover:bg-secondary hover:text-white text-white",
+        outline: "border-input bg-background shadow-sm hover:bg-secondary hover:text-white text-white",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-secondary hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        text: "text-muted-foreground hover:text-white",
+        text: "text-muted-foreground hover:text-white hover:bg-transparent",
         pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-white",
         "pink-outline": "border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-white",
         blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-white",

package/dist/cjs/components/buttons/tab-button.js

@@ -35,7 +35,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_button = require('./button.js');
 const TabButton = React.forwardRef(
-  ({ className, children, size = "sm", ...props }, ref) => {
+  ({ className, children, size, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_button.Button,
       {

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

@@ -46,8 +46,9 @@ const cardVariants = (0, import_class_variance_authority.cva)(
     variants: {
       variant: {
         default: "",
-        interactive: "hover:bg-secondary transition-colors cursor-pointer",
-        transparent: "bg-card/0"
+        interactive: "hover:bg-card transition-colors cursor-pointer",
+        transparent: "bg-card/0",
+        nohover: "hover:bg-card hover:border-border"
       }
     },
     defaultVariants: {

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

@@ -43,13 +43,13 @@ function ExpandableCard({
   alwaysExpanded = false
 }) {
   const [isExpanded, setIsExpanded] = React.useState(alwaysExpanded);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { variant: "nohover", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         className: (0, import_utils.default)(
           "flex items-center justify-between gap-4 p-4 rounded-t-xl",
-          alwaysExpanded ? "" : "cursor-pointer hover:bg-secondary",
+          alwaysExpanded ? "" : "cursor-pointer",
           isExpanded ? "" : "rounded-b-xl"
         ),
         onClick: () => {
@@ -71,7 +71,7 @@ function ExpandableCard({
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { className: "border-t bg-gray-900/30", children })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { className: "border-t border-input bg-gray-900/30", children })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/components/checkbox.js

@@ -41,7 +41,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: (0, import_utils.default)(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     ),
     ...props,

package/dist/cjs/components/input.js

@@ -36,7 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = __toESM(require('../utils/index.js'));
 const inputVariants = (0, import_class_variance_authority.cva)(
-  "flex w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:rgb(255,255,255)]",
+  "flex w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:rgb(255,255,255)] outline-none",
   {
     variants: {
       size: {
@@ -46,8 +46,8 @@ const inputVariants = (0, import_class_variance_authority.cva)(
       },
       variant: {
         default: "",
-        error: "border-red-500 focus-visible:ring-red-500",
-        success: "border-green-500 focus-visible:ring-green-500"
+        error: "border-red-500",
+        success: "border-green-500"
       }
     },
     defaultVariants: {
@@ -81,7 +81,7 @@ function Input({
         onWheel: props.type === "number" ? (e) => e.currentTarget.blur() : void 0
       }
     ),
-    hasError && value !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-red-500 text-sm", children: errorMessage })
+    hasError && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-destructive text-sm", children: errorMessage })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/components/label.js

@@ -38,16 +38,16 @@ var import_class_variance_authority = require("class-variance-authority");
 var React = __toESM(require("react"));
 var import_utils = __toESM(require('../utils//index.js'));
 const labelVariants = (0, import_class_variance_authority.cva)(
-  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "flex font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 ",
   {
     variants: {
       size: {
         sm: "text-sm",
-        default: "text-lg",
+        default: "text-md",
         lg: "text-xl"
       },
       variant: {
-        default: "text-white",
+        default: "text-foreground",
         muted: "text-muted-foreground",
         error: "text-destructive",
         success: "text-green-500"

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

@@ -57,8 +57,8 @@ const Layout = import_react.default.forwardRef(
               className: "overflow-x-hidden py-6",
               style: {
                 gridArea: "main",
-                backgroundColor: "hsl(var(--main-background))",
-                color: "hsl(var(--main-foreground))"
+                backgroundColor: "hsl(var(--background))",
+                color: "hsl(var(--foreground))"
               },
               children
             }

package/dist/cjs/components/search-bar.js

@@ -1,8 +1,10 @@
 "use strict";
 "use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var search_bar_exports = {};
 __export(search_bar_exports, {
@@ -23,39 +33,98 @@ __export(search_bar_exports, {
 });
 module.exports = __toCommonJS(search_bar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_class_variance_authority = require("class-variance-authority");
 var import_lucide_react = require("lucide-react");
 var import_react = require("react");
+var import_utils = __toESM(require('../utils/index.js'));
 var import_input = require('./input.js');
+const searchBarVariants = (0, import_class_variance_authority.cva)("relative w-full transition-all duration-200", {
+  variants: {
+    size: {
+      sm: "max-w-xs",
+      default: "max-w-96",
+      lg: "max-w-lg",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const searchBarInputVariants = (0, import_class_variance_authority.cva)("transition-all duration-200 pl-10", {
+  variants: {
+    active: {
+      true: "",
+      false: "bg-transparent border-input"
+    },
+    theme: {
+      light: "",
+      dark: ""
+    }
+  },
+  compoundVariants: [
+    {
+      active: true,
+      theme: "light",
+      className: "bg-card text-foreground"
+    },
+    {
+      active: true,
+      theme: "dark",
+      className: "bg-[rgb(40,40,40)] text-white"
+    },
+    {
+      active: false,
+      theme: "light",
+      className: "text-foreground placeholder:text-foreground"
+    },
+    {
+      active: false,
+      theme: "dark",
+      className: "text-white placeholder:text-white"
+    }
+  ],
+  defaultVariants: {
+    active: false,
+    theme: "light"
+  }
+});
 function SearchBar({
   onChange,
   placeholder = "Search...",
-  className = "w-64"
+  className,
+  size,
+  theme = "light"
 }) {
   const [searchQuery, setSearchQuery] = (0, import_react.useState)("");
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const active = searchQuery !== "" || focused;
   const handleSearch = (e) => {
     const query = e.target.value;
     setSearchQuery(query);
     onChange(query);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `relative ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.default)(searchBarVariants({ size }), className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_input.Input,
+      import_lucide_react.Search,
       {
-        type: "text",
-        placeholder,
-        value: searchQuery,
-        onChange: handleSearch,
-        className: "pl-10"
+        className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
+        size: 18
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_lucide_react.Search,
+      import_input.Input,
       {
-        className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground",
-        size: 18
+        type: "search",
+        placeholder,
+        value: searchQuery,
+        onChange: handleSearch,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        className: (0, import_utils.default)(searchBarInputVariants({ active, theme }))
       }
     )
-  ] });
+  ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/stat-badge.js

@@ -105,7 +105,7 @@ const StatBadge = React.forwardRef(
         className: (0, import_utils.default)(
           "inline-flex items-center gap-1 text-xs font-medium",
           isNegative && "text-destructive",
-          isPositive && "text-green-600 dark:text-green-400"
+          isPositive && "text-success"
         ),
         children: [
           isPositive && (delta.positiveIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TrendingUp, { className: "h-3 w-3" })),

package/dist/cjs/components/table/table.js

@@ -62,7 +62,7 @@ const tableVariants = (0, import_class_variance_authority.cva)("w-full caption-b
   }
 });
 const Table = React.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "table",
     {
       ref,
@@ -72,7 +72,17 @@ const Table = React.forwardRef(
   ) })
 );
 Table.displayName = "Table";
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { ref, className: (0, import_utils.default)("[&_tr]:border-b ", className), ...props }));
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "thead",
+  {
+    ref,
+    className: (0, import_utils.default)(
+      "[&_tr]:border-b border-input [&_tr]:hover:bg-transparent",
+      className
+    ),
+    ...props
+  }
+));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "tbody",
@@ -100,7 +110,7 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: (0, import_utils.default)(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted border-border",
       className
     ),
     ...props
@@ -108,7 +118,7 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 TableRow.displayName = "TableRow";
 const tableHeadVariants = (0, import_class_variance_authority.cva)(
-  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground",
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
   {
     variants: {
       size: {

package/dist/esm/components/block-sync.js

@@ -39,7 +39,7 @@ function BlockSync({
     /* @__PURE__ */ jsx(
       "span",
       {
-        className: cn("text-xs", isError ? "text-red-500" : "text-green-500"),
+        className: cn("text-xs", isError ? "text-destructive" : "text-success"),
         children: "Status"
       }
     ),
@@ -48,7 +48,7 @@ function BlockSync({
       {
         className: cn(
           "w-2 h-2 rounded-full",
-          isError ? "bg-red-500" : "bg-green-500"
+          isError ? "bg-destructive" : "bg-success"
         )
       }
     )

package/dist/esm/components/buttons/button.js

@@ -10,11 +10,11 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border-border bg-background shadow-sm hover:bg-secondary hover:text-white text-white",
+        outline: "border-input bg-background shadow-sm hover:bg-secondary hover:text-white text-white",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-secondary hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        text: "text-muted-foreground hover:text-white",
+        text: "text-muted-foreground hover:text-white hover:bg-transparent",
         pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-white",
         "pink-outline": "border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-white",
         blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-white",

package/dist/esm/components/buttons/tab-button.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "./button.js";
 const TabButton = React.forwardRef(
-  ({ className, children, size = "sm", ...props }, ref) => {
+  ({ className, children, size, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Button,
       {

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

@@ -8,8 +8,9 @@ const cardVariants = cva(
     variants: {
       variant: {
         default: "",
-        interactive: "hover:bg-secondary transition-colors cursor-pointer",
-        transparent: "bg-card/0"
+        interactive: "hover:bg-card transition-colors cursor-pointer",
+        transparent: "bg-card/0",
+        nohover: "hover:bg-card hover:border-border"
       }
     },
     defaultVariants: {

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

@@ -10,13 +10,13 @@ function ExpandableCard({
   alwaysExpanded = false
 }) {
   const [isExpanded, setIsExpanded] = React.useState(alwaysExpanded);
-  return /* @__PURE__ */ jsxs(Card, { children: [
+  return /* @__PURE__ */ jsxs(Card, { variant: "nohover", children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "flex items-center justify-between gap-4 p-4 rounded-t-xl",
-          alwaysExpanded ? "" : "cursor-pointer hover:bg-secondary",
+          alwaysExpanded ? "" : "cursor-pointer",
           isExpanded ? "" : "rounded-b-xl"
         ),
         onClick: () => {
@@ -38,7 +38,7 @@ function ExpandableCard({
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx(CardContent, { className: "border-t bg-gray-900/30", children })
+    isExpanded && /* @__PURE__ */ jsx(CardContent, { className: "border-t border-input bg-gray-900/30", children })
   ] });
 }
 export {

package/dist/esm/components/checkbox.js

@@ -8,7 +8,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     ),
     ...props,

package/dist/esm/components/input.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import cn from "../utils/index.js";
 const inputVariants = cva(
-  "flex w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:rgb(255,255,255)]",
+  "flex w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:rgb(255,255,255)] outline-none",
   {
     variants: {
       size: {
@@ -12,8 +12,8 @@ const inputVariants = cva(
       },
       variant: {
         default: "",
-        error: "border-red-500 focus-visible:ring-red-500",
-        success: "border-green-500 focus-visible:ring-green-500"
+        error: "border-red-500",
+        success: "border-green-500"
       }
     },
     defaultVariants: {
@@ -47,7 +47,7 @@ function Input({
         onWheel: props.type === "number" ? (e) => e.currentTarget.blur() : void 0
       }
     ),
-    hasError && value !== "" && /* @__PURE__ */ jsx("p", { className: "text-red-500 text-sm", children: errorMessage })
+    hasError && errorMessage && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: errorMessage })
   ] });
 }
 export {

package/dist/esm/components/label.js

@@ -4,16 +4,16 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import cn from "../utils//index.js";
 const labelVariants = cva(
-  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "flex font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 ",
   {
     variants: {
       size: {
         sm: "text-sm",
-        default: "text-lg",
+        default: "text-md",
         lg: "text-xl"
       },
       variant: {
-        default: "text-white",
+        default: "text-foreground",
         muted: "text-muted-foreground",
         error: "text-destructive",
         success: "text-green-500"

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

@@ -24,8 +24,8 @@ const Layout = React.forwardRef(
               className: "overflow-x-hidden py-6",
               style: {
                 gridArea: "main",
-                backgroundColor: "hsl(var(--main-background))",
-                color: "hsl(var(--main-foreground))"
+                backgroundColor: "hsl(var(--background))",
+                color: "hsl(var(--foreground))"
               },
               children
             }

package/dist/esm/components/search-bar.js

@@ -1,38 +1,97 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { Search } from "lucide-react";
 import { useState } from "react";
+import cn from "../utils/index.js";
 import { Input } from "./input.js";
+const searchBarVariants = cva("relative w-full transition-all duration-200", {
+  variants: {
+    size: {
+      sm: "max-w-xs",
+      default: "max-w-96",
+      lg: "max-w-lg",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const searchBarInputVariants = cva("transition-all duration-200 pl-10", {
+  variants: {
+    active: {
+      true: "",
+      false: "bg-transparent border-input"
+    },
+    theme: {
+      light: "",
+      dark: ""
+    }
+  },
+  compoundVariants: [
+    {
+      active: true,
+      theme: "light",
+      className: "bg-card text-foreground"
+    },
+    {
+      active: true,
+      theme: "dark",
+      className: "bg-[rgb(40,40,40)] text-white"
+    },
+    {
+      active: false,
+      theme: "light",
+      className: "text-foreground placeholder:text-foreground"
+    },
+    {
+      active: false,
+      theme: "dark",
+      className: "text-white placeholder:text-white"
+    }
+  ],
+  defaultVariants: {
+    active: false,
+    theme: "light"
+  }
+});
 function SearchBar({
   onChange,
   placeholder = "Search...",
-  className = "w-64"
+  className,
+  size,
+  theme = "light"
 }) {
   const [searchQuery, setSearchQuery] = useState("");
+  const [focused, setFocused] = useState(false);
+  const active = searchQuery !== "" || focused;
   const handleSearch = (e) => {
     const query = e.target.value;
     setSearchQuery(query);
     onChange(query);
   };
-  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, children: [
+  return /* @__PURE__ */ jsx("div", { className: cn(searchBarVariants({ size }), className), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
-      Input,
+      Search,
       {
-        type: "text",
-        placeholder,
-        value: searchQuery,
-        onChange: handleSearch,
-        className: "pl-10"
+        className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
+        size: 18
       }
     ),
     /* @__PURE__ */ jsx(
-      Search,
+      Input,
       {
-        className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground",
-        size: 18
+        type: "search",
+        placeholder,
+        value: searchQuery,
+        onChange: handleSearch,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        className: cn(searchBarInputVariants({ active, theme }))
       }
     )
-  ] });
+  ] }) });
 }
 export {
   SearchBar

package/dist/esm/components/stat-badge.js

@@ -72,7 +72,7 @@ const StatBadge = React.forwardRef(
         className: cn(
           "inline-flex items-center gap-1 text-xs font-medium",
           isNegative && "text-destructive",
-          isPositive && "text-green-600 dark:text-green-400"
+          isPositive && "text-success"
         ),
         children: [
           isPositive && (delta.positiveIcon || /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3" })),

package/dist/esm/components/table/table.js

@@ -23,7 +23,7 @@ const tableVariants = cva("w-full caption-bottom", {
   }
 });
 const Table = React.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ jsx(
     "table",
     {
       ref,
@@ -33,7 +33,17 @@ const Table = React.forwardRef(
   ) })
 );
 Table.displayName = "Table";
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b ", className), ...props }));
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn(
+      "[&_tr]:border-b border-input [&_tr]:hover:bg-transparent",
+      className
+    ),
+    ...props
+  }
+));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
@@ -61,7 +71,7 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted border-border",
       className
     ),
     ...props
@@ -69,7 +79,7 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 TableRow.displayName = "TableRow";
 const tableHeadVariants = cva(
-  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground",
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
   {
     variants: {
       size: {

package/dist/globals.css

@@ -32,20 +32,18 @@
     --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 {
     color-scheme: dark;
 
-    --background: 240 7% 7.5%;
+    --background: 240, 3%, 8%;
     --foreground: 0 0% 100%;
-    --card: 240 7% 10%;
+    --card: 240, 4%, 10%;
     --card-foreground: 0 0% 100%;
     --popover: 240 6% 12%;
     --popover-foreground: 0 0% 100%;
-    --primary: 330 98% 48%;
+    --primary: 328, 65%, 47%;
     --primary-foreground: 0 0% 100%;
     --secondary: 240 7% 17%;
     --secondary-foreground: 0 0% 100%;
@@ -55,7 +53,7 @@
     --accent-foreground: 0 0% 100%;
     --destructive: 0 100% 65%;
     --destructive-foreground: 0 0% 100%;
-    --success: 143 100% 78%;
+    --success: 137, 100%, 79%;
     --warning: 44 100% 69%;
     --liquidation: 274 67% 58%;
     --input: 225 6% 19%;
@@ -75,17 +73,11 @@
     --dropdown-dark-button: 225 6% 19%;
     --white: 0 0% 100%;
     --black: 0 0% 0%;
-    --border: 225 7% 22%;
-    --main-background: 240 10% 3.9%;
-    --main-foreground: 0 0% 98%;
+    --border: 0 0% 100% / 0.05;
   }
 }
 
 @layer base {
-  * {
-    border-color: hsl(var(--border));
-  }
-
   body {
     margin: 0;
     padding: 0;
@@ -98,6 +90,7 @@
     line-height: 1.1875rem;
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
+    border-color: hsl(var(--border));
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: transparent;

package/dist/types/components/cards/card.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const cardVariants: (props?: ({
-    variant?: "default" | "transparent" | "interactive" | null | undefined;
+    variant?: "default" | "transparent" | "interactive" | "nohover" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     asChild?: boolean;

package/dist/types/components/search-bar.d.ts

@@ -1,7 +1,12 @@
-interface SearchBarProps {
+import { type VariantProps } from "class-variance-authority";
+declare const searchBarVariants: (props?: ({
+    size?: "full" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SearchBarProps extends VariantProps<typeof searchBarVariants> {
     onChange: (query: string) => void;
     placeholder?: string;
     className?: string;
+    theme?: "light" | "dark";
 }
 /**
  * SearchBar — search input component with icon.
@@ -13,14 +18,16 @@ interface SearchBarProps {
  * Props:
  * - `onChange` — callback function called when search query changes (required).
  * - `placeholder` — placeholder text (defaults to "Search...").
- * - `className` — additional CSS classes for styling (defaults to "w-64").
+ * - `className` — additional CSS classes for styling.
+ * - `size` — size variant: "sm", "default", "lg", "full" (defaults to "default").
+ * - `theme` — theme variant: "light" or "dark" (defaults to "light").
  *
  * Note: Includes search icon on the left side. Manages internal state for search query.
- * Calls onChange callback on every input change.
+ * Calls onChange callback on every input change. Includes animated states for active/focused.
  *
  * Do NOT use SearchBar:
  * - for simple text inputs (use Input component).
  * - when you don't need search icon (use Input component).
  */
-export declare function SearchBar({ onChange, placeholder, className, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchBar({ onChange, placeholder, className, size, theme, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

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