@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/cjs/components/table/table-loader.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_table_gridLoadingLine = require('./grid-loading-line.cjs');
+const components_table_gridTable = require('./grid-table.cjs');
+
+function TableLoader({
+  height = "70px",
+  columns = 6,
+  rows = 5,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(components_table_gridTable.GridTableBody, { className, ...props, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    components_table_gridLoadingLine.GridLoadingLine,
+    {
+      height,
+      columns
+    },
+    `${index}-${rows}`
+  )) });
+}
+
+exports.TableLoader = TableLoader;

package/dist/cjs/components/table/table-sm.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function TableCellSm({
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex flex-col gap-1", className), ...props, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground font-medium", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children })
+  ] });
+}
+function TableLineSm({
+  title,
+  columnsXs = 1,
+  columnsSm,
+  columnsMd,
+  columns,
+  className,
+  children,
+  ...props
+}) {
+  const colsXs = columnsXs;
+  const colsSm = columnsSm ?? colsXs;
+  const colsMd = columnsMd ?? colsSm;
+  const colsLg = columns ?? colsMd;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border",
+        className
+      ),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium mb-2", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid gap-2 md:gap-4 table-sm-grid",
+            style: {
+              "--grid-cols-xs": colsXs,
+              "--grid-cols-sm": colsSm,
+              "--grid-cols-md": colsMd,
+              "--grid-cols-lg": colsLg
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.TableCellSm = TableCellSm;
+exports.TableLineSm = TableLineSm;

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

@@ -0,0 +1,221 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const classVarianceAuthority = require('class-variance-authority');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const components_buttons_button_button = require('../buttons/button/button.cjs');
+const components_tooltip_tooltip = require('../tooltip/tooltip.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const tableVariants = classVarianceAuthority.cva("w-full caption-bottom", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const Table = React__namespace.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      ref,
+      className: utils_cn.cn(tableVariants({ size, className })),
+      ...props
+    }
+  ) })
+);
+Table.displayName = "Table";
+const TableHeader = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "thead",
+  {
+    ref,
+    className: utils_cn.cn(
+      "[&_tr]:border-b border-input [&_tr]:hover:bg-transparent",
+      className
+    ),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+const TableBody = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tbody",
+  {
+    ref,
+    className: utils_cn.cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tfoot",
+  {
+    ref,
+    className: utils_cn.cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tr",
+  {
+    ref,
+    className: utils_cn.cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted border-border",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const tableHeadVariants = classVarianceAuthority.cva(
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-1 text-xs",
+        default: "h-10 px-2",
+        lg: "h-12 px-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const TableHead = React__namespace.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: utils_cn.cn(tableHeadVariants({ size, className })),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+const tableCellVariants = classVarianceAuthority.cva("align-middle", {
+  variants: {
+    size: {
+      sm: "p-1",
+      default: "p-2",
+      lg: "p-4"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const TableCell = React__namespace.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: utils_cn.cn(tableCellVariants({ size, className })),
+      ...props
+    }
+  )
+);
+TableCell.displayName = "TableCell";
+const TableCaption = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "caption",
+  {
+    ref,
+    className: utils_cn.cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+const SortingTableHead = React__namespace.forwardRef(
+  ({
+    title,
+    isSorted,
+    direction,
+    setSort,
+    placement = "right",
+    children,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { ref, className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_tooltip.Tooltip, { delayDuration: 200, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: utils_cn.cn(
+          "group flex items-center gap-1 w-fit cursor-pointer hover:text-foreground",
+          placement === "left" ? "flex-row-reverse" : "flex-row"
+        ),
+        onClick: () => setSort(direction === "asc" ? "desc" : "asc"),
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components_buttons_button_button.Button,
+            {
+              variant: "text",
+              size: "auto",
+              className: isSorted ? void 0 : "opacity-0 group-hover:opacity-100",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ArrowDown,
+                {
+                  className: utils_cn.cn(
+                    "h-4 w-4",
+                    direction === "desc" ? "rotate-180" : "",
+                    "transition-transform duration-200 ease-in-out"
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_tooltip.TooltipContent, { side: "top", children: [
+      "Sort by ",
+      title
+    ] })
+  ] }) }) })
+);
+SortingTableHead.displayName = "SortingTableHead";
+
+exports.SortingTableHead = SortingTableHead;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.tableCellVariants = tableCellVariants;
+exports.tableHeadVariants = tableHeadVariants;
+exports.tableVariants = tableVariants;

package/dist/cjs/components/table/updated-value.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_table_editButton = require('./edit-button.cjs');
+
+function UpdatedValue({
+  oldValue,
+  newValue,
+  onEdit,
+  isEditable = true,
+  customButton,
+  postfix,
+  disabled = false,
+  nowrap = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-2", children: oldValue !== void 0 && oldValue !== newValue ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `line-through text-muted-foreground ${nowrap ? "whitespace-nowrap" : ""}`,
+          children: oldValue
+        }
+      ),
+      " → ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: nowrap ? "whitespace-nowrap" : "", children: [
+        newValue,
+        postfix && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+          " ",
+          postfix
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: nowrap ? "whitespace-nowrap" : "", children: [
+      newValue,
+      postfix && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+        " ",
+        postfix
+      ] })
+    ] }) }),
+    isEditable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      components_table_editButton.EditButton,
+      {
+        onClick: onEdit,
+        customButton,
+        disabled
+      }
+    ) })
+  ] });
+}
+
+exports.UpdatedValue = UpdatedValue;

package/dist/cjs/components/tabs/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_tabs_tabs = require('./tabs.cjs');
+
+
+
+exports.Tabs = components_tabs_tabs.Tabs;
+exports.TabsContent = components_tabs_tabs.TabsContent;
+exports.TabsList = components_tabs_tabs.TabsList;
+exports.TabsTrigger = components_tabs_tabs.TabsTrigger;

package/dist/cjs/components/tabs/tabs.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const TabsPrimitive = require('@radix-ui/react-tabs');
+const React = require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabsPrimitive);
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Tabs = TabsPrimitive__namespace.Root;
+const TabsList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: utils_cn.cn(
+      "inline-flex h-fit items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: utils_cn.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-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    className: utils_cn.cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;

package/dist/cjs/components/textarea/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_textarea_textarea = require('./textarea.cjs');
+
+
+
+exports.Textarea = components_textarea_textarea.Textarea;
+exports.textareaVariants = components_textarea_textarea.textareaVariants;

package/dist/cjs/components/textarea/textarea.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const classVarianceAuthority = require('class-variance-authority');
+const React = require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const textareaVariants = classVarianceAuthority.cva(
+  "flex w-full rounded-md border border-[rgb(100,100,100)] px-3 py-2 shadow-sm transition-colors 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-foreground 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:currentColor] outline-none",
+  {
+    variants: {
+      size: {
+        sm: "min-h-[60px] text-xs px-2 py-1.5",
+        default: "min-h-[80px]",
+        lg: "min-h-[120px] text-base px-4 py-3"
+      },
+      variant: {
+        default: "",
+        error: "border-destructive"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+const Textarea = React__namespace.forwardRef(
+  ({ className, size, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        className: utils_cn.cn(textareaVariants({ size, variant, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+exports.Textarea = Textarea;
+exports.textareaVariants = textareaVariants;

package/dist/cjs/components/theme-provider.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+const ThemeContext = React.createContext(void 0);
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  attribute = "class",
+  enableColorScheme = true
+}) {
+  const [theme, setThemeState] = React.useState(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem(storageKey);
+      const initialTheme = saved || defaultTheme;
+      const resolved = initialTheme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : initialTheme;
+      const root = document.documentElement;
+      root.classList.remove("light", "dark");
+      root.removeAttribute("data-theme");
+      if (attribute === "class") {
+        root.classList.add(resolved);
+      } else {
+        root.setAttribute("data-theme", resolved);
+      }
+      if (enableColorScheme) {
+        root.style.colorScheme = resolved;
+      }
+      return initialTheme;
+    }
+    return defaultTheme;
+  });
+  const [actualTheme, setActualTheme] = React.useState(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem(storageKey);
+      const themeToResolve = saved || defaultTheme;
+      if (themeToResolve === "system") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      return themeToResolve;
+    }
+    return "light";
+  });
+  const getSystemTheme = React.useCallback(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return "light";
+  }, []);
+  const resolveTheme = React.useCallback(
+    (theme2) => {
+      return theme2 === "system" ? getSystemTheme() : theme2;
+    },
+    [getSystemTheme]
+  );
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const savedTheme = localStorage.getItem(storageKey);
+    if (savedTheme) {
+      setThemeState(savedTheme);
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (theme === "system") {
+        setActualTheme(getSystemTheme());
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [storageKey, theme, getSystemTheme]);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const root = document.documentElement;
+    const resolved = resolveTheme(theme);
+    setActualTheme(resolved);
+    root.classList.remove("light", "dark");
+    root.removeAttribute("data-theme");
+    if (attribute === "class") {
+      root.classList.add(resolved);
+    } else {
+      root.setAttribute("data-theme", resolved);
+    }
+    if (enableColorScheme) {
+      root.style.colorScheme = resolved;
+    }
+    localStorage.setItem(storageKey, theme);
+  }, [theme, attribute, enableColorScheme, storageKey, resolveTheme]);
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, actualTheme }, children });
+}
+
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;

package/dist/cjs/components/theme-toggle/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_themeToggle_themeToggle = require('./theme-toggle.cjs');
+
+
+
+exports.ThemeToggle = components_themeToggle_themeToggle.ThemeToggle;