@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.5

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

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Search } from 'lucide-react';
+import { useState } from 'react';
+import { Input } from '../input/input.js';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+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-foreground"
+    },
+    {
+      active: false,
+      theme: "light",
+      className: "text-foreground placeholder:text-foreground"
+    },
+    {
+      active: false,
+      theme: "dark",
+      className: "text-foreground placeholder:text-foreground"
+    }
+  ],
+  defaultVariants: {
+    active: false,
+    theme: "light"
+  }
+});
+function SearchBar({
+  onChange,
+  placeholder = "Search...",
+  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__ */ jsx("div", { className: cn(searchBarVariants({ size }), className), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__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: searchQuery,
+        onChange: handleSearch,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        className: cn(searchBarInputVariants({ active, theme }))
+      }
+    )
+  ] }) });
+}
+
+export { SearchBar };

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

@@ -0,0 +1 @@
+export { SearchLine, WithSearchLine, searchLineInputVariants, searchLineVariants } from './search-line.js';

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

@@ -0,0 +1,187 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Search, ArrowRight, Loader2 } from 'lucide-react';
+import * as React from 'react';
+import { Input } from '../input/input.js';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+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-foreground"
+    },
+    {
+      active: false,
+      theme: "light",
+      className: "text-foreground placeholder:text-foreground"
+    },
+    {
+      active: false,
+      theme: "dark",
+      className: "text-foreground placeholder:text-foreground"
+    }
+  ],
+  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/index.js

@@ -0,0 +1 @@
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants } from './select.js';

package/dist/esm/components/select/select.js

@@ -0,0 +1,136 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cva } from 'class-variance-authority';
+import { ChevronDown, ChevronUp, Check } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+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-foreground cursor-pointer",
+  {
+    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(selectTriggerVariants({ size, variant, className })),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "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
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    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 hover:bg-secondary focus:bg-secondary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-transparent text-foreground border-[rgb(100,100,100)] cursor-pointer",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };

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

@@ -0,0 +1 @@
+export { ShortString } from './short-string.js';

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/tooltip.js';
+import { cn } from '../../utils/cn.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/confirmation-item.js

@@ -1,8 +1,19 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { shortenHash } from "../../utils/index.js";
-import { ExternalButton } from "../buttons/index.js";
-import { CopyButton } from "../buttons/copy-button.js";
-import { Identicon } from "./identicon.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../buttons/back-button/back-button.js';
+import '../buttons/button/button.js';
+import { CopyButton } from '../buttons/copy-button/copy-button.js';
+import { ExternalButton } from '../buttons/external-button/external-button.js';
+import '../buttons/filter-button/filter-button.js';
+import '../buttons/navigation-button/navigation-button.js';
+import 'react';
+import 'clsx';
+import 'tailwind-merge';
+import 'sonner';
+import { shortenHash } from '../../utils/format.js';
+import '@gearbox-protocol/sdk';
+import '../buttons/tab-button/tab-button.js';
+import { Identicon } from './identicon.js';
+
 function ConfirmationItem({
   confirmation,
   note,
@@ -12,7 +23,7 @@ function ConfirmationItem({
     /* @__PURE__ */ jsx("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
     /* @__PURE__ */ jsxs("div", { className: "ml-10 flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Identicon, { address: confirmation, size: 32 }),
-      /* @__PURE__ */ jsx("span", { className: "text-white whitespace-nowrap", children: shortenHash(confirmation) }),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground whitespace-nowrap", children: shortenHash(confirmation) }),
       note && /* @__PURE__ */ jsx("span", { className: "text-gray-500 text-xs whitespace-nowrap", children: note }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2 opacity-0 transition-opacity group-hover:opacity-100", children: [
         /* @__PURE__ */ jsx(CopyButton, { text: confirmation }),
@@ -21,6 +32,5 @@ function ConfirmationItem({
     ] })
   ] });
 }
-export {
-  ConfirmationItem
-};
+
+export { ConfirmationItem };

package/dist/esm/components/signatures/identicon.js

@@ -1,4 +1,5 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
+
 function Identicon({
   address,
   size = 32
@@ -6,12 +7,11 @@ function Identicon({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "rounded-full bg-gray-700 flex items-center justify-center text-white text-xs",
+      className: "rounded-full bg-gray-700 flex items-center justify-center text-foreground text-xs",
       style: { width: size, height: size },
       children: address.slice(2, 4)
     }
   );
 }
-export {
-  Identicon
-};
+
+export { Identicon };

package/dist/esm/components/signatures/index.js

@@ -1,3 +1,3 @@
-export * from "./confirmation-item.js";
-export * from "./identicon.js";
-export * from "./vertical-timeline.js";
+export { ConfirmationItem } from './confirmation-item.js';
+export { Identicon } from './identicon.js';
+export { VerticalTimeline } from './vertical-timeline.js';

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

@@ -1,7 +1,7 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, X } from "lucide-react";
-import { useState } from "react";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check, X } from 'lucide-react';
+import { useState } from 'react';
+
 function VerticalTimeline({
   steps,
   minWidth = 300
@@ -24,7 +24,7 @@ function VerticalTimeline({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "ml-10 text-white", children: step.title })
+            /* @__PURE__ */ jsx("span", { className: "ml-10 text-foreground", children: step.title })
           ] }),
           step.type === "extention" && step.status !== "not-started" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
@@ -51,6 +51,5 @@ function VerticalTimeline({
     )) })
   ] });
 }
-export {
-  VerticalTimeline
-};
+
+export { VerticalTimeline };

package/dist/esm/components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton, skeletonVariants } from './skeleton.js';

package/dist/esm/components/skeleton/skeleton.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+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(
+        skeletonVariants({ variant, speed, width, height, className })
+      ),
+      ...props
+    }
+  );
+}
+
+export { Skeleton, skeletonVariants };

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

@@ -0,0 +1 @@
+export { StatBadge, StatBadgeGrid, statBadgeContentVariants, statBadgeGridVariants, statBadgeTitleVariants, statBadgeVariants } from './stat-badge.js';