@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

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

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ArrowRight, Loader2, Search } from "lucide-react";
+import * as React from "react";
+import cn from "../utils/index.js";
+import { Input } from "./input.js";
+const searchLineVariants = cva("relative w-full transition-all duration-200", {
+  variants: {
+    size: {
+      sm: "max-w-xs",
+      default: "max-w-md",
+      lg: "max-w-lg",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const searchLineInputVariants = cva("transition-all duration-200 pr-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"
+  }
+});
+const SearchLine = React.forwardRef(
+  ({
+    className,
+    size,
+    searchState,
+    placeholder = "Search...",
+    theme = "light",
+    showSearchIcon = false,
+    customIcon,
+    onSubmit,
+    ...props
+  }, ref) => {
+    const { value, handleSubmit, handleInput, loading } = searchState;
+    const [focused, setFocused] = React.useState(false);
+    const active = value !== "" || focused;
+    const handleFormSubmit = React.useCallback(
+      (e) => {
+        e.preventDefault();
+        handleSubmit({ preventDefault: () => {
+        } });
+        if (onSubmit) {
+          onSubmit(value);
+        }
+      },
+      [handleSubmit, onSubmit, value]
+    );
+    const handleIconClick = React.useCallback(() => {
+      handleSubmit({ preventDefault: () => {
+      } });
+      if (onSubmit) {
+        onSubmit(value);
+      }
+    }, [handleSubmit, onSubmit, value]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(searchLineVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: handleFormSubmit,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            className: "relative",
+            children: [
+              showSearchIcon && /* @__PURE__ */ jsx(
+                Search,
+                {
+                  className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
+                  size: 18
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "search",
+                  placeholder,
+                  value,
+                  onChange: handleInput,
+                  className: cn(
+                    searchLineInputVariants({ active, theme }),
+                    showSearchIcon && "pl-10"
+                  )
+                }
+              ),
+              active && !loading && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleIconClick,
+                  className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-full transition-colors cursor-pointer",
+                  "aria-label": "Submit search",
+                  children: customIcon || /* @__PURE__ */ jsx(ArrowRight, { className: "text-primary", size: 18 })
+                }
+              ),
+              loading && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                Loader2,
+                {
+                  className: "text-muted-foreground animate-spin",
+                  size: 18
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SearchLine.displayName = "SearchLine";
+const WithSearchLine = React.forwardRef(
+  ({
+    searchState,
+    children,
+    placeholder = "Search...",
+    theme = "light",
+    className
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full flex gap-4 flex-col sm:flex-row sm:items-center md:justify-between",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "sm:flex-shrink-0 sm:flex-grow-1", children }),
+          /* @__PURE__ */ jsx("div", { className: "w-full sm:flex-1 md:flex-initial md:max-w-md", children: /* @__PURE__ */ jsx(
+            SearchLine,
+            {
+              searchState,
+              placeholder,
+              theme,
+              size: "full"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+WithSearchLine.displayName = "WithSearchLine";
+export {
+  SearchLine,
+  WithSearchLine,
+  searchLineInputVariants,
+  searchLineVariants
+};

package/dist/esm/components/select.js

@@ -1,19 +1,38 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva } from "class-variance-authority";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import cn from "../utils/index.js";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+const selectTriggerVariants = cva(
+  "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-white",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs px-2",
+        default: "h-9",
+        lg: "h-11 text-base px-4"
+      },
+      variant: {
+        default: "",
+        error: "border-red-500",
+        success: "border-green-500"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+const SelectTrigger = React.forwardRef(({ className, children, size, variant, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)]",
-      className
-    ),
+    className: cn(selectTriggerVariants({ size, variant, className })),
     ...props,
     children: [
       children,
@@ -53,7 +72,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
   {
     ref,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -90,7 +109,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)]",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-secondary focus:bg-secondary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-transparent text-white border-[rgb(100,100,100)]",
       className
     ),
     ...props,
@@ -120,5 +139,6 @@ export {
   SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
-  SelectValue
+  SelectValue,
+  selectTriggerVariants
 };

package/dist/esm/components/short-string.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./tooltip.js";
+function ShortString({
+  children,
+  maxLength,
+  className,
+  showTooltip = true
+}) {
+  if (maxLength === void 0) {
+    const content = /* @__PURE__ */ jsx("span", { className: cn("inline-block max-w-full truncate", className), children });
+    if (!showTooltip) {
+      return content;
+    }
+    return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: content }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children }) })
+    ] }) });
+  }
+  if (!children || children.length <= maxLength) {
+    return /* @__PURE__ */ jsx("span", { className, children });
+  }
+  const truncated = `${children.slice(0, maxLength)}...`;
+  if (!showTooltip) {
+    return /* @__PURE__ */ jsx("span", { className, children: truncated });
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className, children: truncated }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children }) })
+  ] }) });
+}
+export {
+  ShortString
+};

package/dist/esm/components/signatures/vertical-timeline.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
 import { useState } from "react";

package/dist/esm/components/skeleton.js

@@ -1,17 +1,69 @@
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import cn from "../utils/index.js";
+const skeletonVariants = cva("animate-pulse rounded-md bg-muted", {
+  variants: {
+    variant: {
+      default: "",
+      lighter: "opacity-50",
+      darker: "opacity-80"
+    },
+    speed: {
+      slow: "[animation-duration:2s]",
+      default: "",
+      fast: "[animation-duration:0.5s]"
+    },
+    width: {
+      full: "w-full",
+      "3/4": "w-3/4",
+      "1/2": "w-1/2",
+      "1/3": "w-1/3",
+      "1/4": "w-1/4",
+      xs: "w-20",
+      sm: "w-32",
+      md: "w-48",
+      lg: "w-64",
+      xl: "w-80",
+      "2xl": "w-96"
+    },
+    height: {
+      xs: "h-3",
+      sm: "h-4",
+      md: "h-6",
+      lg: "h-8",
+      xl: "h-10",
+      "2xl": "h-12",
+      "3xl": "h-16",
+      "4xl": "h-20",
+      "5xl": "h-24"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    speed: "default",
+    width: "full",
+    height: "md"
+  }
+});
 function Skeleton({
   className,
+  variant,
+  speed,
+  width,
+  height,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("animate-pulse rounded-md bg-muted", className),
+      className: cn(
+        skeletonVariants({ variant, speed, width, height, className })
+      ),
       ...props
     }
   );
 }
 export {
-  Skeleton
+  Skeleton,
+  skeletonVariants
 };

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

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { TrendingDown, TrendingUp } from "lucide-react";
+import * as React from "react";
+import cn from "../utils/index.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./tooltip.js";
+const statBadgeVariants = cva(
+  "w-full h-full rounded-lg border transition-colors",
+  {
+    variants: {
+      variant: {
+        filled: "bg-card border-border",
+        outlined: "bg-transparent border-border",
+        elevated: "bg-card border-border shadow-md",
+        primary: "bg-primary/10 border-primary/20"
+      },
+      size: {
+        sm: "p-4",
+        default: "p-6"
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "default"
+    }
+  }
+);
+const statBadgeTitleVariants = cva("font-medium text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs leading-[0.8125rem]",
+      default: "text-sm leading-[1.0625rem]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const statBadgeContentVariants = cva("font-medium text-foreground flex", {
+  variants: {
+    size: {
+      sm: "text-sm leading-[1.0625rem]",
+      default: "text-xl leading-[1.5625rem]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const StatBadge = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    title,
+    value,
+    valueDescription,
+    delta,
+    ...props
+  }, ref) => {
+    const isNegative = delta && delta.value < 0;
+    const isPositive = delta && delta.value > 0;
+    const showDelta = delta && delta.value !== 0;
+    const deltaContent = showDelta && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 text-xs font-medium",
+          isNegative && "text-destructive",
+          isPositive && "text-green-600 dark:text-green-400"
+        ),
+        children: [
+          isPositive && (delta.positiveIcon || /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3" })),
+          isNegative && (delta.negativeIcon || /* @__PURE__ */ jsx(TrendingDown, { className: "h-3 w-3" })),
+          delta.label && /* @__PURE__ */ jsx("span", { children: delta.label })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(statBadgeVariants({ variant, size }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("flex items-center", size === "sm" ? "mb-2.5" : "mb-3"),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: cn(statBadgeTitleVariants({ size }), "flex-1"), children: title }),
+                showDelta && (delta.tooltip ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "cursor-help", children: deltaContent }) }),
+                  /* @__PURE__ */ jsx(TooltipContent, { children: delta.tooltip })
+                ] }) }) : deltaContent)
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn(statBadgeContentVariants({ size })), children: [
+            value,
+            valueDescription && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm ml-1", children: valueDescription })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StatBadge.displayName = "StatBadge";
+const statBadgeGridVariants = cva("grid w-full", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-1 md:grid-cols-2",
+      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+      5: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+      6: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    },
+    gap: {
+      sm: "gap-2",
+      default: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    }
+  },
+  defaultVariants: {
+    cols: 4,
+    gap: "default"
+  }
+});
+const StatBadgeGrid = React.forwardRef(({ className, cols, gap, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(statBadgeGridVariants({ cols, gap }), className),
+      ...props,
+      children
+    }
+  );
+});
+StatBadgeGrid.displayName = "StatBadgeGrid";
+export {
+  StatBadge,
+  StatBadgeGrid,
+  statBadgeContentVariants,
+  statBadgeGridVariants,
+  statBadgeTitleVariants,
+  statBadgeVariants
+};