@gearbox-protocol/permissionless-ui 1.22.0-next.57 → 1.22.0-next.58

package/dist/cjs/components/simple-dropdown/simple-dropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("@radix-ui/react-dropdown-menu");require("react");require("@gearbox-protocol/sdk");const a=require("../../utils/cn.cjs");require("sonner");require("luxon");function j(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const i=j(h);function s({children:e,title:o,placement:t="bottom",align:n="start",sideOffset:d=4,maxWidth:l,minWidth:c,open:u,onOpenChange:p,modal:m=!1,className:f,triggerClassName:b}){const g=a.cn("z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-gray-40 p-1 text-popover-foreground shadow-lg","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",f);return r.jsxs(i.Root,{open:u,onOpenChange:p,modal:m,children:[r.jsx(i.Trigger,{asChild:!0,children:r.jsx("button",{type:"button",className:a.cn("inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",b),children:o})}),r.jsx(i.Portal,{children:r.jsx(i.Content,{side:t,align:n,sideOffset:d,className:g,style:{maxWidth:l,minWidth:c},children:e})})]})}s.displayName="SimpleDropdown";exports.SimpleDropdown=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),w=require("@radix-ui/react-dropdown-menu");require("react");require("@gearbox-protocol/sdk");const a=require("../../utils/cn.cjs");require("sonner");require("luxon");function h(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const i=h(w);function s({children:e,title:o,asChild:t=!1,placement:r="bottom",align:d="start",sideOffset:l=4,maxWidth:c,minWidth:u,open:p,onOpenChange:m,modal:f=!1,className:b,triggerClassName:g}){const j=a.cn("z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-gray-40 p-1 text-popover-foreground shadow-lg","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",b);return n.jsxs(i.Root,{open:p,onOpenChange:m,modal:f,children:[n.jsx(i.Trigger,{asChild:t,className:t?void 0:a.cn("inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",g),children:o}),n.jsx(i.Portal,{children:n.jsx(i.Content,{side:r,align:d,sideOffset:l,className:j,style:{maxWidth:c,minWidth:u},children:e})})]})}s.displayName="SimpleDropdown";exports.SimpleDropdown=s;

package/dist/esm/components/simple-dropdown/simple-dropdown.js

@@ -1,63 +1,64 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-dropdown-menu";
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-dropdown-menu";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as o } from "../../utils/cn.js";
+import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function g({
-  children: r,
-  title: a,
-  placement: i = "bottom",
-  align: n = "start",
-  sideOffset: d = 4,
-  maxWidth: s,
-  minWidth: l,
-  open: m,
-  onOpenChange: p,
-  modal: f = !1,
-  className: c,
-  triggerClassName: u
+function w({
+  children: a,
+  title: i,
+  asChild: o = !1,
+  placement: n = "bottom",
+  align: d = "start",
+  sideOffset: s = 4,
+  maxWidth: m,
+  minWidth: p,
+  open: l,
+  onOpenChange: f,
+  modal: c = !1,
+  className: g,
+  triggerClassName: b
 }) {
-  const b = o(
+  const u = r(
     "z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-gray-40 p-1 text-popover-foreground shadow-lg",
     "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",
-    c
+    g
   );
   return /* @__PURE__ */ h(
-    e.Root,
+    t.Root,
     {
-      open: m,
-      onOpenChange: p,
-      modal: f,
+      open: l,
+      onOpenChange: f,
+      modal: c,
       children: [
-        /* @__PURE__ */ t(e.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
-          "button",
+        /* @__PURE__ */ e(
+          t.Trigger,
           {
-            type: "button",
-            className: o(
+            asChild: o,
+            className: o ? void 0 : r(
               "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
-              u
+              b
             ),
-            children: a
+            children: i
           }
-        ) }),
-        /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(
-          e.Content,
+        ),
+        /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
+          t.Content,
           {
-            side: i,
-            align: n,
-            sideOffset: d,
-            className: b,
-            style: { maxWidth: s, minWidth: l },
-            children: r
+            side: n,
+            align: d,
+            sideOffset: s,
+            className: u,
+            style: { maxWidth: m, minWidth: p },
+            children: a
           }
         ) })
       ]
     }
   );
 }
-g.displayName = "SimpleDropdown";
+w.displayName = "SimpleDropdown";
 export {
-  g as SimpleDropdown
+  w as SimpleDropdown
 };

package/dist/types/components/simple-dropdown/simple-dropdown.d.ts

@@ -1,17 +1,25 @@
-import type * as React from "react";
+import { ReactNode } from 'react';
 export type SimpleDropdownPlacement = "top" | "bottom" | "right" | "left";
 export type SimpleDropdownAlign = "start" | "center" | "end";
 export interface SimpleDropdownProps {
     /**
      * Dropdown popup content — what appears inside the floating panel.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Trigger element — what the user clicks to reveal the dropdown.
      *
      * Named `title` for consistency with the `SimpleTooltip` API.
      */
-    title: React.ReactNode;
+    title: ReactNode;
+    /**
+     * When `true`, `title` is used directly as the trigger element (Radix `asChild`).
+     * Use this when `title` is already a `<button>`, `<a>`, or another interactive
+     * component to avoid invalid nesting (`<button>` inside `<button>`).
+     *
+     * @default false
+     */
+    asChild?: boolean;
     /** Placement relative to the trigger element. @default "bottom" */
     placement?: SimpleDropdownPlacement;
     /** Alignment along the placement axis. @default "start" */
@@ -46,8 +54,8 @@ export interface SimpleDropdownProps {
  *
  * @example
  * ```tsx
- * // Basic dropdown
- * <SimpleDropdown title={<button>Open menu</button>} placement="bottom">
+ * // Basic dropdown — title is plain content, wrapped in a <button> automatically
+ * <SimpleDropdown title={<span>Open menu</span>} placement="bottom">
  *   <DropdownMenuItem>Item 1</DropdownMenuItem>
  *   <DropdownMenuItem>Item 2</DropdownMenuItem>
  * </SimpleDropdown>
@@ -55,8 +63,8 @@ export interface SimpleDropdownProps {
  *
  * @example
  * ```tsx
- * // With custom content (no DropdownMenuItem required)
- * <SimpleDropdown title={<span>Click me</span>} placement="bottom" align="center">
+ * // Title is already a button — use asChild to avoid <button> nesting
+ * <SimpleDropdown title={<button className="btn">Toggle</button>} asChild>
  *   <div className="p-4">Any custom content here</div>
  * </SimpleDropdown>
  * ```
@@ -66,7 +74,7 @@ export interface SimpleDropdownProps {
  * // Controlled
  * const [open, setOpen] = useState(false);
  * <SimpleDropdown
- *   title={<button>Toggle</button>}
+ *   title={<span>Toggle</span>}
  *   open={open}
  *   onOpenChange={setOpen}
  * >
@@ -74,7 +82,7 @@ export interface SimpleDropdownProps {
  * </SimpleDropdown>
  * ```
  */
-export declare function SimpleDropdown({ children, title, placement, align, sideOffset, maxWidth, minWidth, open, onOpenChange, modal, className, triggerClassName, }: SimpleDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function SimpleDropdown({ children, title, asChild, placement, align, sideOffset, maxWidth, minWidth, open, onOpenChange, modal, className, triggerClassName, }: SimpleDropdownProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SimpleDropdown {
     var displayName: string;
 }

package/package.json

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