@gearbox-protocol/permissionless-ui 1.10.6 → 1.10.8

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

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const marginClasses = {
+  none: "mb-0",
+  sm: "mb-4",
+  md: "mb-6",
+  lg: "mb-8"
+};
+const justifyClasses = {
+  "flex-start": "justify-start",
+  center: "justify-center",
+  "flex-end": "justify-end",
+  between: "justify-between"
+};
+const alignClasses = {
+  "flex-start": "items-start",
+  center: "items-center",
+  "flex-end": "items-end",
+  stretch: "items-stretch"
+};
+function Block({
+  children,
+  margin = "md",
+  justify = "flex-start",
+  align = "flex-start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-row flex-nowrap",
+        marginClasses[margin],
+        justifyClasses[justify],
+        alignClasses[align],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+export { Block };

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

@@ -0,0 +1 @@
+export { Block } from './block.js';

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

@@ -1,4 +1,5 @@
 export { AppLogo } from './app-logo/app-logo.js';
+export { Block } from './block/block.js';
 export { Col } from './col/col.js';
 export { Container } from './container/container.js';
 export { Footer, FooterLink, FooterLinkSection, GearboxFooter } from './footer/footer.js';

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

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { BackButton } from '../../buttons/back-button/back-button.js';
+import { PageTitle } from '../../page-title/page-title.js';
 import { Container } from '../container/container.js';
 
 function PageLayout({
@@ -13,24 +14,24 @@ function PageLayout({
   containerClassName
 }) {
   return /* @__PURE__ */ jsxs(Container, { maxWidth: maxContainerWidth, className: containerClassName, children: [
-    backButton && /* @__PURE__ */ jsx(
-      BackButton,
+    /* @__PURE__ */ jsx(
+      PageTitle,
       {
-        href: backButton.href,
-        text: backButton.text,
-        onClick: backButton.onClick
+        backButton: backButton ? /* @__PURE__ */ jsx(
+          BackButton,
+          {
+            href: backButton.href,
+            text: backButton.text,
+            onClick: backButton.onClick
+          }
+        ) : void 0,
+        icon,
+        actions: actionButton,
+        subtitle: description,
+        className: "mb-6",
+        children: title
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4 mb-6 w-full", children: [
-      icon,
-      /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
-          /* @__PURE__ */ jsx("h1", { className: " text-xl md:text-3xl font-bold max-w-64 md:max-w-128 truncate", children: title }),
-          actionButton && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actionButton })
-        ] }),
-        description
-      ] })
-    ] }),
     children
   ] });
 }

package/dist/esm/components/loader-guard/loader-guard.js

@@ -2,6 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Guard } from '../guard/guard.js';
 import 'clsx';
 import 'tailwind-merge';
+import 'react';
+import 'sonner';
+import '@gearbox-protocol/sdk';
 import '../layout/col/col.js';
 import { Container } from '../layout/container/container.js';
 import '../layout/footer/footer.js';
@@ -10,6 +13,7 @@ import '../layout/header/header.js';
 import '../layout/layout/layout.js';
 import '../base-link/base-link.js';
 import '../buttons/back-button/back-button.js';
+import '../page-title/page-title.js';
 import { Skeleton } from '../skeleton/skeleton.js';
 
 function LoaderGuard({

package/dist/esm/components/next/markdown-viewer.js

@@ -5,6 +5,8 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import 'clsx';
 import 'tailwind-merge';
+import 'sonner';
+import '@gearbox-protocol/sdk';
 import '../layout/col/col.js';
 import '../layout/container/container.js';
 import '../layout/footer/footer.js';

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

@@ -28,18 +28,21 @@ const pageTitleVariants = cva(
     }
   }
 );
-const pageTitleRootVariants = cva("flex items-center", {
-  variants: {
-    spacing: {
-      sm: "gap-2",
-      default: "gap-4",
-      lg: "gap-6"
+const pageTitleRootVariants = cva(
+  "flex flex-col md:flex-row items-start md:items-center",
+  {
+    variants: {
+      spacing: {
+        sm: "gap-2",
+        default: "gap-4",
+        lg: "gap-6"
+      }
+    },
+    defaultVariants: {
+      spacing: "default"
     }
-  },
-  defaultVariants: {
-    spacing: "default"
   }
-});
+);
 const PageTitle = React.forwardRef(
   ({
     className,
@@ -55,10 +58,10 @@ const PageTitle = React.forwardRef(
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: cn(pageTitleRootVariants({ spacing })), children: [
-      backButton && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: backButton }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col md:flex-row md:items-center gap-4", children: [
+      backButton && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center md:order-first", children: backButton }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col md:flex-row md:items-center gap-4 w-full md:w-auto", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-          icon && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: icon }),
+          icon && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: icon }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx(
               Component,
@@ -70,7 +73,7 @@ const PageTitle = React.forwardRef(
             subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] })
         ] }),
-        actions && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 flex items-center gap-2 md:ml-auto", children: actions })
+        actions && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center gap-2 ml-auto md:ml-auto", children: actions })
       ] })
     ] }) });
   }

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

@@ -7,7 +7,11 @@ import { cn } from '../../utils/cn.js';
 import 'sonner';
 import '@gearbox-protocol/sdk';
 
-const Select = SelectPrimitive.Root;
+const Select = ({
+  modal = false,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectPrimitive.Root, { modal, ...props });
+Select.displayName = "Select";
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const selectTriggerVariants = cva(

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

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

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

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import { Skeleton } from './skeleton.js';
+
+const gapClasses = {
+  sm: "space-y-2",
+  md: "space-y-3",
+  lg: "space-y-4"
+};
+function SkeletonStack({
+  lines = 5,
+  className,
+  gap = "md"
+}) {
+  const skeletonKeys = useMemo(
+    () => Array.from({ length: lines }, () => crypto.randomUUID()),
+    [lines]
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn(gapClasses[gap], className), children: skeletonKeys.map((key, index) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: cn("h-4 w-full", index === lines - 1 && "w-3/4")
+    },
+    key
+  )) });
+}
+
+export { SkeletonStack };

package/dist/esm/components/with-copy/index.js

@@ -0,0 +1 @@
+export { WithCopy } from './with-copy.js';

package/dist/esm/components/with-copy/with-copy.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Copy } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { cn } from '../../utils/cn.js';
+import '@gearbox-protocol/sdk';
+
+function WithCopy({
+  toCopy,
+  children,
+  onCopySuccess,
+  successMessage = "Copied to clipboard",
+  iconSize = 14,
+  icon,
+  className,
+  buttonClassName
+}) {
+  const [isPressed, setIsPressed] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(toCopy);
+      setIsPressed(true);
+      setTimeout(() => setIsPressed(false), 150);
+      if (onCopySuccess) {
+        onCopySuccess();
+      } else {
+        toast.success(successMessage);
+      }
+    } catch (error) {
+      console.error("Failed to copy:", error);
+      toast.error("Failed to copy");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", className), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        className: cn(
+          "ml-1 text-gray-400 cursor-pointer hover:text-white transition-all",
+          isPressed ? "scale-75" : "scale-100",
+          buttonClassName
+        ),
+        title: "Copy to clipboard",
+        children: icon ?? /* @__PURE__ */ jsx(Copy, { size: iconSize })
+      }
+    )
+  ] });
+}
+
+export { WithCopy };

package/dist/esm/index.js

@@ -32,9 +32,11 @@ export { DialogContainer } from './components/dialog/dialog-container.js';
 export { DialogContent } from './components/dialog/dialog-content.js';
 export { DialogDescription } from './components/dialog/dialog-description.js';
 export { DialogFooter } from './components/dialog/dialog-footer.js';
+export { DialogForm } from './components/dialog/dialog-form.js';
 export { DialogHeader } from './components/dialog/dialog-header.js';
 export { DialogOverlay } from './components/dialog/dialog-overlay.js';
 export { DialogTitle } from './components/dialog/dialog-title.js';
+export { OneFieldDialog } from './components/dialog/one-field-dialog.js';
 export { DropdownMenu, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSub, DropdownMenuTrigger } from './components/dropdown-menu/dropdown-menu.js';
 export { DropdownMenuCheckboxItem } from './components/dropdown-menu/dropdown-menu-checkbox-item.js';
 export { DropdownMenuContent } from './components/dropdown-menu/dropdown-menu-content.js';
@@ -45,7 +47,9 @@ export { DropdownMenuSeparator } from './components/dropdown-menu/dropdown-menu-
 export { DropdownMenuShortcut } from './components/dropdown-menu/dropdown-menu-shortcut.js';
 export { DropdownMenuSubContent } from './components/dropdown-menu/dropdown-menu-sub-content.js';
 export { DropdownMenuSubTrigger } from './components/dropdown-menu/dropdown-menu-sub-trigger.js';
+export { ErrorLineMessage } from './components/error-message/error-line-message.js';
 export { ErrorMessage } from './components/error-message/error-message.js';
+export { ErrorView } from './components/error-view/error-view.js';
 export { FilterBlock } from './components/filter/filter-block.js';
 export { FilterCheckboxItem } from './components/filter/filter-checkbox-item.js';
 export { FilterChip } from './components/filter/filter-chip.js';
@@ -74,6 +78,7 @@ export { HorizontalIndicator } from './components/horizontal-indicator/horizonta
 export { Input, inputVariants } from './components/input/input.js';
 export { Label, labelVariants } from './components/label/label.js';
 export { AppLogo } from './components/layout/app-logo/app-logo.js';
+export { Block } from './components/layout/block/block.js';
 export { Col } from './components/layout/col/col.js';
 export { Container } from './components/layout/container/container.js';
 export { Footer, FooterLink, FooterLinkSection, GearboxFooter } from './components/layout/footer/footer.js';
@@ -103,6 +108,7 @@ export { ConfirmationItem } from './components/signatures/confirmation-item.js';
 export { Identicon } from './components/signatures/identicon.js';
 export { VerticalTimeline } from './components/signatures/vertical-timeline.js';
 export { Skeleton, skeletonVariants } from './components/skeleton/skeleton.js';
+export { SkeletonStack } from './components/skeleton/skeleton-stack.js';
 export { StatBadge, StatBadgeGrid, statBadgeContentVariants, statBadgeGridVariants, statBadgeTitleVariants, statBadgeVariants } from './components/stat-badge/stat-badge.js';
 export { TabControl, TabItem, useHashTabs, useSectionTab, useTabControl } from './components/tab-control/tab-control.js';
 export { EditButton } from './components/table/edit-button.js';
@@ -129,6 +135,7 @@ export { GraphDropdown } from './components/trading-view/graph-dropdown.js';
 export { TradingView } from './components/trading-view/trading-view.js';
 export { FormattedMessageTyped, useIntlTyped } from './components/typed-intl/index.js';
 export { VSpace } from './components/vspace/vspace.js';
+export { WithCopy } from './components/with-copy/with-copy.js';
 export { WithFilterButton } from './components/with-filter-button/with-filter-button.js';
 export { designTokens } from './configs/design-tokens.js';
 export { interactiveVariants, paddingVariants, sizeVariants, stateVariants } from './configs/variants.js';