@bioturing/components 0.20.0 → 0.20.1

package/dist/components/dropdown-menu/component.js

@@ -1,94 +1,107 @@
 "use client";
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { Menu as l } from "@base-ui-components/react/menu";
-import { useCallback as M, useRef as F } from "react";
-import { useControlled as H } from "@base-ui-components/react/utils";
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import { useCallback as m, useRef as j, createElement as q } from "react";
+import { Menu as f } from "@base-ui-components/react/menu";
+import { useControlled as F } from "@base-ui-components/react/utils";
+import { Popover as H } from "@base-ui-components/react/popover";
 import { Command as i } from "../cmdk/index.js";
+import { PopupPanelSize as S } from "../popup-panel/constants.js";
 import './style.css';/* empty css          */
-import { Popover as J } from "@base-ui-components/react";
-import { PopupPanelSize as A } from "../popup-panel/constants.js";
-import { useCls as K, useAntdCssVarClassname as Q, parseAntdPlacement as W } from "../utils/antdUtils.js";
+import { useCls as J, useAntdCssVarClassname as K, parseAntdPlacement as Q } from "../utils/antdUtils.js";
 import { Input as X } from "../input/component.js";
+import { DROPDOWN_COLLISION_AVOIDANCE as Y } from "../utils/constants.js";
 import { clsx as p } from "../utils/cn.js";
-const no = ({
-  children: j,
-  items: x,
-  placement: z,
-  openOnHover: B,
-  open: D,
-  onOpenChange: m,
-  className: R,
-  itemRender: w,
+const uo = ({
+  children: V,
+  items: _,
+  placement: x,
+  openOnHover: z,
+  open: B,
+  onOpenChange: g,
+  className: O,
+  itemRender: I,
   classNames: r,
-  size: y = "auto",
-  showSearch: f,
-  searchProps: C = {
+  size: w = "auto",
+  showSearch: u,
+  searchProps: L = {
     placeholder: "Search..."
   }
 }) => {
-  const [T, I] = H({
-    controlled: D,
+  const [T, P] = F({
+    controlled: B,
     default: !1,
     name: "open"
-  }), U = M(
+  }), b = m(
     (o) => {
-      I(o), m == null || m(o);
+      P(o), g == null || g(o);
     },
-    [I, m]
-  ), n = K(), G = Q(), L = W(z), V = F(null), v = x.reduce((o, e) => (o.length === 0 && e.type !== "header" && o.push({
+    [P, g]
+  ), n = J(), k = K(), G = Q(x), U = j(null), y = _.reduce((o, e) => (o.length === 0 && e.type !== "header" && o.push({
     label: null,
     items: []
   }), e.type === "header" ? o.push({
     label: e.title,
     items: []
-  }) : (e.type === "item" || e.type === "divider") && o.length > 0 && o[o.length - 1].items.push(e), o), []), P = f ? i.Item : l.Item, k = f ? i.Separator : l.Separator, h = M(
-    (o, e, d) => o.type === "item" ? /* @__PURE__ */ g(
-      P,
-      {
-        className: p(n("dropdown-menu-item"), r == null ? void 0 : r.item),
-        disabled: o.disabled,
-        "data-danger": o.danger,
-        ref: o.ref,
-        onClick: o.onClick,
-        onMouseEnter: o.onMouseEnter,
-        onMouseLeave: o.onMouseLeave,
-        onMouseOver: o.onMouseOver,
-        onMouseOut: o.onMouseOut,
-        render: w ? (u) => w(o, u) : void 0,
-        children: [
-          o.icon && /* @__PURE__ */ t(
-            "span",
-            {
-              className: p(
-                n("dropdown-menu-item-icon"),
-                r == null ? void 0 : r.itemIcon
-              ),
-              children: o.icon
-            }
-          ),
-          /* @__PURE__ */ t("span", { children: o.label })
-        ]
-      },
-      e + "-" + d
-    ) : o.type === "divider" ? /* @__PURE__ */ t(
-      k,
-      {
-        className: p(
-          n("dropdown-menu-divider"),
-          r == null ? void 0 : r.separator
-        )
-      },
-      e + "-" + d
-    ) : null,
-    [n, r, w, P, k]
-  ), E = M(
-    (o, e) => /* @__PURE__ */ g(
-      l.Group,
+  }) : (e.type === "item" || e.type === "divider") && o.length > 0 && o[o.length - 1].items.push(e), o), []), E = u ? i.Separator : f.Separator, h = m(
+    (o, e, d) => {
+      const l = u ? i.Item : f.Item;
+      if (o.type === "item") {
+        const R = {
+          className: p(n("dropdown-menu-item"), r == null ? void 0 : r.item),
+          disabled: o.disabled,
+          "data-danger": o.danger,
+          ref: o.ref,
+          onClick: o.onClick,
+          onMouseEnter: o.onMouseEnter,
+          onMouseLeave: o.onMouseLeave,
+          onMouseOver: o.onMouseOver,
+          onMouseOut: o.onMouseOut,
+          onSelect: u ? () => {
+            const C = new MouseEvent("click", {
+              bubbles: !0,
+              cancelable: !0
+            });
+            o.onClick(C), b == null || b(!1);
+          } : void 0,
+          render: I ? (C) => I(o, C) : void 0,
+          children: [
+            o.icon && /* @__PURE__ */ t(
+              "span",
+              {
+                className: p(
+                  n("dropdown-menu-item-icon"),
+                  r == null ? void 0 : r.itemIcon
+                ),
+                children: o.icon
+              },
+              "icon"
+            ),
+            /* @__PURE__ */ t("span", { children: o.label }, "label")
+          ]
+        };
+        return u ? /* @__PURE__ */ t(i.Item, { ...R }, e + "-" + d) : /* @__PURE__ */ t(l, { ...R }, e + "-" + d);
+      } else if (o.type === "divider")
+        return /* @__PURE__ */ t(
+          E,
+          {
+            className: p(
+              n("dropdown-menu-divider"),
+              r == null ? void 0 : r.separator
+            )
+          },
+          e + "-" + d
+        );
+      return null;
+    },
+    [n, r, I, b, u, E]
+  ), A = m(
+    (o, e) => /* @__PURE__ */ v(
+      f.Group,
       {
         className: p(n("dropdown-menu-group"), r == null ? void 0 : r.group),
         children: [
           o.label && /* @__PURE__ */ t(
-            l.GroupLabel,
+            f.GroupLabel,
             {
               className: p(
                 n("dropdown-menu-header"),
@@ -97,19 +110,19 @@ const no = ({
               children: /* @__PURE__ */ t("span", { children: o.label })
             }
           ),
-          o.items.map((d, u) => h(d, e, u))
+          o.items.map((d, l) => h(d, e, l))
         ]
       },
       "group" + e
     ),
     [n, r, h]
-  ), S = M(
+  ), D = m(
     (o, e) => o.label ? /* @__PURE__ */ t(
       i.Group,
       {
         className: p(n("dropdown-menu-group"), r == null ? void 0 : r.group),
         heading: /* @__PURE__ */ t(
-          l.GroupLabel,
+          f.GroupLabel,
           {
             className: p(
               n("dropdown-menu-header"),
@@ -118,73 +131,75 @@ const no = ({
             children: /* @__PURE__ */ t("span", { children: o.label })
           }
         ),
-        children: o.items.map((d, u) => h(d, e, u))
+        children: o.items.map((d, l) => h(d, e, l))
       },
       "group" + e
-    ) : o.items.map((d, u) => h(d, e, u)),
+    ) : o.items.map((d, l) => h(d, e, l)),
     [n, r, h]
-  ), q = M(
-    () => f ? /* @__PURE__ */ g(i, { children: [
-      /* @__PURE__ */ t(
+  ), W = m(
+    () => u ? /* @__PURE__ */ v(i, { children: [
+      /* @__PURE__ */ q(
         i.Input,
         {
-          ...C,
+          ...L,
+          key: "search",
           render: /* @__PURE__ */ t(X, { allowClear: !0, className: n("dropdown-menu-search") })
         }
       ),
-      /* @__PURE__ */ g(i.List, { children: [
+      /* @__PURE__ */ v(i.List, { children: [
         /* @__PURE__ */ t(i.Empty, { className: n("dropdown-menu-empty"), children: "No results found." }),
-        v.map(S)
+        y.map(D)
       ] })
-    ] }) : v.map(E),
+    ] }) : y.map(A),
     [
-      f,
-      v,
-      S,
-      E,
-      C,
+      u,
+      y,
+      D,
+      A,
+      L,
       n
     ]
-  ), b = f ? J : l;
-  return /* @__PURE__ */ g(
-    b.Root,
+  ), M = u ? H : f;
+  return /* @__PURE__ */ v(
+    M.Root,
     {
-      openOnHover: B,
+      openOnHover: z,
       open: T,
-      onOpenChange: U,
+      onOpenChange: b,
       children: [
         /* @__PURE__ */ t(
-          b.Trigger,
+          M.Trigger,
           {
-            render: j,
-            ref: V,
+            render: V,
+            ref: U,
             className: p(
               n("dropdown-menu-trigger"),
               r == null ? void 0 : r.trigger,
-              G
+              k
             )
           }
         ),
-        /* @__PURE__ */ t(b.Portal, { children: /* @__PURE__ */ t(
-          b.Positioner,
+        /* @__PURE__ */ t(M.Portal, { children: /* @__PURE__ */ t(
+          M.Positioner,
           {
-            side: L.placement,
-            align: L.align,
+            side: G.placement,
+            align: G.align,
             sideOffset: 4,
             className: p(n("dropdown-menu-root"), r == null ? void 0 : r.root),
+            collisionAvoidance: Y,
             children: /* @__PURE__ */ t(
-              b.Popup,
+              M.Popup,
               {
                 className: p(
                   n("dropdown-menu"),
-                  R,
+                  O,
                   r == null ? void 0 : r.popup,
-                  G
+                  k
                 ),
                 style: {
-                  "--size-width": y in A ? A[y] : void 0
+                  "--size-width": w in S ? S[w] : void 0
                 },
-                children: q()
+                children: W()
               }
             )
           }
@@ -194,6 +209,6 @@ const no = ({
   );
 };
 export {
-  no as DropdownMenu
+  uo as DropdownMenu
 };
 //# sourceMappingURL=component.js.map

package/dist/components/dropdown-menu/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n  WithRenderPropProps,\n} from \"../utils\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { Ref, useCallback, useRef } from \"react\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\nimport { Command } from \"../cmdk\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { Popover } from \"@base-ui-components/react\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\nimport { Input } from \"../input\";\n\nexport type DropdownMenuItemType =\n  | {\n      type: \"item\";\n      label?: React.ReactNode;\n      disabled?: boolean;\n      icon?: React.ReactNode;\n      key: React.Key;\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      danger?: boolean;\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      type: \"divider\";\n    }\n  | {\n      type: \"header\";\n      title?: React.ReactNode;\n    };\n\nexport interface DropdownMenuProps {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    group?: string;\n    groupLabel?: string;\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    separator?: string;\n    positioner?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /**\n   * Whether to show search input\n   * @default false\n   */\n  showSearch?: boolean;\n  /**\n   * Size of the dropdown menu\n   * @default \"auto\"\n   */\n  size?: \"auto\" | keyof typeof PopupPanelSize;\n  /**\n   * Search placeholder\n   */\n  searchProps?: Omit<\n    React.ComponentProps<typeof Command.Input>,\n    \"size\" | \"ref\"\n  >;\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  className,\n  itemRender,\n  classNames,\n  size = \"auto\",\n  showSearch,\n  searchProps = {\n    placeholder: \"Search...\",\n  },\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  const MenuItem = showSearch ? Command.Item : Menu.Item;\n  const MenuSeparator = showSearch ? Command.Separator : Menu.Separator;\n\n  const renderMenuItem = useCallback(\n    (item: DropdownMenuItemType, i: number, j: number) => {\n      if (item.type === \"item\") {\n        return (\n          <MenuItem\n            key={i + \"-\" + j}\n            className={clsx(cls(\"dropdown-menu-item\"), classNames?.item)}\n            disabled={item.disabled}\n            data-danger={item.danger}\n            ref={item.ref as Ref<HTMLDivElement>}\n            onClick={item.onClick}\n            onMouseEnter={item.onMouseEnter}\n            onMouseLeave={item.onMouseLeave}\n            onMouseOver={item.onMouseOver}\n            onMouseOut={item.onMouseOut}\n            render={\n              itemRender\n                ? (itemProps) => itemRender(item, itemProps)\n                : undefined\n            }\n          >\n            {item.icon && (\n              <span\n                className={clsx(\n                  cls(\"dropdown-menu-item-icon\"),\n                  classNames?.itemIcon\n                )}\n              >\n                {item.icon}\n              </span>\n            )}\n            <span>{item.label}</span>\n          </MenuItem>\n        );\n      } else if (item.type === \"divider\") {\n        return (\n          <MenuSeparator\n            key={i + \"-\" + j}\n            className={clsx(\n              cls(\"dropdown-menu-divider\"),\n              classNames?.separator\n            )}\n          />\n        );\n      }\n\n      // else if (item.type === \"header\") {\n      //   return (\n      //     <Menu.GroupLabel\n      //       key={i + \"-\" + j}\n      //       className={clsx(\n      //         cls(\"dropdown-menu-header\"),\n      //         classNames?.groupLabel\n      //       )}\n      //     >\n      //       <span>{item.title}</span>\n      //     </Menu.GroupLabel>\n      //   );\n      // }\n      return null;\n    },\n    [cls, classNames, itemRender, MenuItem, MenuSeparator]\n  );\n\n  const renderGroup = useCallback(\n    (group: DropdownMenuGroup, index: number) => (\n      <Menu.Group\n        key={\"group\" + index}\n        className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n      >\n        {group.label && (\n          <Menu.GroupLabel\n            className={clsx(\n              cls(\"dropdown-menu-header\"),\n              classNames?.groupLabel\n            )}\n          >\n            <span>{group.label}</span>\n          </Menu.GroupLabel>\n        )}\n        {group.items.map((item, j) => renderMenuItem(item, index, j))}\n      </Menu.Group>\n    ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderGroupShowSearch = useCallback(\n    (group: DropdownMenuGroup, index: number) =>\n      group.label ? (\n        <Command.Group\n          key={\"group\" + index}\n          className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n          heading={\n            <Menu.GroupLabel\n              className={clsx(\n                cls(\"dropdown-menu-header\"),\n                classNames?.groupLabel\n              )}\n            >\n              <span>{group.label}</span>\n            </Menu.GroupLabel>\n          }\n        >\n          {group.items.map((item, j) => renderMenuItem(item, index, j))}\n        </Command.Group>\n      ) : (\n        group.items.map((item, j) => renderMenuItem(item, index, j))\n      ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderMenuInner = useCallback(\n    () =>\n      showSearch ? (\n        <Command>\n          <Command.Input\n            {...searchProps}\n            render={\n              <Input allowClear className={cls(\"dropdown-menu-search\")} />\n            }\n          />\n          <Command.List>\n            <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n              No results found.\n            </Command.Empty>\n            {itemGroups.map(renderGroupShowSearch)}\n          </Command.List>\n        </Command>\n      ) : (\n        itemGroups.map(renderGroup)\n      ),\n    [\n      showSearch,\n      itemGroups,\n      renderGroupShowSearch,\n      renderGroup,\n      searchProps,\n      cls,\n    ]\n  );\n\n  const BaseComponent = showSearch ? Popover : Menu;\n\n  return (\n    <BaseComponent.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <BaseComponent.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname\n        )}\n      />\n      <BaseComponent.Portal>\n        <BaseComponent.Positioner\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n        >\n          <BaseComponent.Popup\n            className={clsx(\n              cls(\"dropdown-menu\"),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n            style={\n              {\n                \"--size-width\":\n                  size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n              } as React.CSSProperties\n            }\n          >\n            {renderMenuInner()}\n          </BaseComponent.Popup>\n        </BaseComponent.Positioner>\n      </BaseComponent.Portal>\n    </BaseComponent.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","size","showSearch","searchProps","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","MenuItem","Command","Menu","MenuSeparator","renderMenuItem","item","i","j","jsxs","clsx","itemProps","jsx","renderGroup","group","index","renderGroupShowSearch","renderMenuInner","Input","BaseComponent","Popover","PopupPanelSize"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { Ref, useCallback, useRef } from \"react\";\nimport {\n  clsx,\n  DROPDOWN_COLLISION_AVOIDANCE,\n  parseAntdPlacement,\n  useAntdCssVarClassname,\n  useCls,\n} from \"../utils\";\nimport { Command } from \"../cmdk\";\n\n// Import component-specific styles\nimport { Input } from \"../input\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\n\nimport \"./style.css\";\n\nexport type DropdownMenuItemType =\n  | {\n      type: \"item\";\n      label?: React.ReactNode;\n      disabled?: boolean;\n      icon?: React.ReactNode;\n      key: React.Key;\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      danger?: boolean;\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      type: \"divider\";\n    }\n  | {\n      type: \"header\";\n      title?: React.ReactNode;\n    };\n\nexport interface DropdownMenuProps {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    group?: string;\n    groupLabel?: string;\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    separator?: string;\n    positioner?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n  /**\n   * Whether to show search input\n   * @default false\n   */\n  showSearch?: boolean;\n  /**\n   * Size of the dropdown menu\n   * @default \"auto\"\n   */\n  size?: \"auto\" | keyof typeof PopupPanelSize;\n  /**\n   * Search placeholder\n   */\n  searchProps?: Omit<\n    React.ComponentProps<typeof Command.Input>,\n    \"size\" | \"ref\"\n  >;\n  /**\n   *\n   */\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  className,\n  itemRender,\n  classNames,\n  size = \"auto\",\n  showSearch,\n  searchProps = {\n    placeholder: \"Search...\",\n  },\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  const MenuSeparator = showSearch ? Command.Separator : Menu.Separator;\n\n  const renderMenuItem = useCallback(\n    (item: DropdownMenuItemType, i: number, j: number) => {\n      const MenuItem = showSearch ? Command.Item : Menu.Item;\n\n      if (item.type === \"item\") {\n        const props = {\n          className: clsx(cls(\"dropdown-menu-item\"), classNames?.item),\n          disabled: item.disabled,\n          \"data-danger\": item.danger,\n          ref: item.ref as Ref<HTMLDivElement>,\n          onClick: item.onClick,\n          onMouseEnter: item.onMouseEnter,\n          onMouseLeave: item.onMouseLeave,\n          onMouseOver: item.onMouseOver,\n          onMouseOut: item.onMouseOut,\n          onSelect: showSearch\n            ? () => {\n                const e = new MouseEvent(\"click\", {\n                  bubbles: true,\n                  cancelable: true,\n                }) as unknown as React.MouseEvent<HTMLElement, MouseEvent>;\n                item.onClick(e);\n                onOpenChange?.(false);\n              }\n            : undefined,\n          render: itemRender\n            ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n                itemRender(item, itemProps)\n            : undefined,\n          children: [\n            item.icon && (\n              <span\n                key=\"icon\"\n                className={clsx(\n                  cls(\"dropdown-menu-item-icon\"),\n                  classNames?.itemIcon\n                )}\n              >\n                {item.icon}\n              </span>\n            ),\n            <span key=\"label\">{item.label}</span>,\n          ],\n        };\n        return showSearch ? (\n          <Command.Item key={i + \"-\" + j} {...props}></Command.Item>\n        ) : (\n          <MenuItem key={i + \"-\" + j} {...props}></MenuItem>\n        );\n      } else if (item.type === \"divider\") {\n        return (\n          <MenuSeparator\n            key={i + \"-\" + j}\n            className={clsx(\n              cls(\"dropdown-menu-divider\"),\n              classNames?.separator\n            )}\n          />\n        );\n      }\n      return null;\n    },\n    [cls, classNames, itemRender, onOpenChange, showSearch, MenuSeparator]\n  );\n\n  const renderGroup = useCallback(\n    (group: DropdownMenuGroup, index: number) => (\n      <Menu.Group\n        key={\"group\" + index}\n        className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n      >\n        {group.label && (\n          <Menu.GroupLabel\n            className={clsx(\n              cls(\"dropdown-menu-header\"),\n              classNames?.groupLabel\n            )}\n          >\n            <span>{group.label}</span>\n          </Menu.GroupLabel>\n        )}\n        {group.items.map((item, j) => renderMenuItem(item, index, j))}\n      </Menu.Group>\n    ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderGroupShowSearch = useCallback(\n    (group: DropdownMenuGroup, index: number) =>\n      group.label ? (\n        <Command.Group\n          key={\"group\" + index}\n          className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n          heading={\n            <Menu.GroupLabel\n              className={clsx(\n                cls(\"dropdown-menu-header\"),\n                classNames?.groupLabel\n              )}\n            >\n              <span>{group.label}</span>\n            </Menu.GroupLabel>\n          }\n        >\n          {group.items.map((item, j) => renderMenuItem(item, index, j))}\n        </Command.Group>\n      ) : (\n        group.items.map((item, j) => renderMenuItem(item, index, j))\n      ),\n    [cls, classNames, renderMenuItem]\n  );\n\n  const renderMenuInner = useCallback(\n    () =>\n      showSearch ? (\n        <Command>\n          <Command.Input\n            {...searchProps}\n            key=\"search\"\n            render={\n              <Input allowClear className={cls(\"dropdown-menu-search\")} />\n            }\n          />\n          <Command.List>\n            <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n              No results found.\n            </Command.Empty>\n            {itemGroups.map(renderGroupShowSearch)}\n          </Command.List>\n        </Command>\n      ) : (\n        itemGroups.map(renderGroup)\n      ),\n    [\n      showSearch,\n      itemGroups,\n      renderGroupShowSearch,\n      renderGroup,\n      searchProps,\n      cls,\n    ]\n  );\n\n  const BaseComponent = showSearch ? Popover : Menu;\n\n  return (\n    <BaseComponent.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <BaseComponent.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname\n        )}\n      />\n      <BaseComponent.Portal>\n        <BaseComponent.Positioner\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n          collisionAvoidance={DROPDOWN_COLLISION_AVOIDANCE}\n        >\n          <BaseComponent.Popup\n            className={clsx(\n              cls(\"dropdown-menu\"),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n            style={\n              {\n                \"--size-width\":\n                  size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n              } as React.CSSProperties\n            }\n          >\n            {renderMenuInner()}\n          </BaseComponent.Popup>\n        </BaseComponent.Positioner>\n      </BaseComponent.Portal>\n    </BaseComponent.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","size","showSearch","searchProps","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","MenuSeparator","Command","Menu","renderMenuItem","item","i","j","MenuItem","props","clsx","e","itemProps","jsx","renderGroup","group","index","jsxs","renderGroupShowSearch","renderMenuInner","createElement","Input","BaseComponent","Popover","DROPDOWN_COLLISION_AVOIDANCE","PopupPanelSize"],"mappings":";;;;;;;;;;;;;AAyHO,MAAMA,KAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAMC;AAAA,EACN,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,IACZ,aAAa;AAAA,EAAA;AAEjB,MAAyB;AACvB,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAc;AAAA,IACpC,YAAYV;AAAA,IACZ,SAAS;AAAA,IACT,MAAM;AAAA,EAAA,CACP,GACKW,IAAeC;AAAA,IACnB,CAACC,MAAsB;AACrB,MAAAJ,EAAQI,CAAQ,GAChBZ,KAAA,QAAAA,EAAsBY;AAAA,IACxB;AAAA,IACA,CAACJ,GAASR,CAAmB;AAAA,EAC/B,GACMa,IAAMC,EAAO,GACbC,IAAsBC,EAAuB,GAC7CC,IAAsBC,EAAmBrB,CAAS,GAClDsB,IAAYC,EAA0B,IAAI,GAC1CC,IAAazB,EAAM,OAA4B,CAAC0B,GAAKC,OAErDD,EAAI,WAAW,KAAKC,EAAQ,SAAS,YACvCD,EAAI,KAAK;AAAA,IACP,OAAO;AAAA,IACP,OAAO,CAAA;AAAA,EAAC,CACT,GAICC,EAAQ,SAAS,WACnBD,EAAI,KAAK;AAAA,IACP,OAAOC,EAAQ;AAAA,IACf,OAAO,CAAA;AAAA,EAAC,CACT,KAIAA,EAAQ,SAAS,UAAUA,EAAQ,SAAS,cAC7CD,EAAI,SAAS,KAEbA,EAAIA,EAAI,SAAS,CAAC,EAAE,MAAM,KAAKC,CAAO,GAGjCD,IACN,EAAE,GAECE,IAAgBnB,IAAaoB,EAAQ,YAAYC,EAAK,WAEtDC,IAAiBhB;AAAA,IACrB,CAACiB,GAA4BC,GAAWC,MAAc;AACpD,YAAMC,IAAW1B,IAAaoB,EAAQ,OAAOC,EAAK;AAE9C,UAAAE,EAAK,SAAS,QAAQ;AACxB,cAAMI,IAAQ;AAAA,UACZ,WAAWC,EAAKpB,EAAI,oBAAoB,GAAGV,KAAA,gBAAAA,EAAY,IAAI;AAAA,UAC3D,UAAUyB,EAAK;AAAA,UACf,eAAeA,EAAK;AAAA,UACpB,KAAKA,EAAK;AAAA,UACV,SAASA,EAAK;AAAA,UACd,cAAcA,EAAK;AAAA,UACnB,cAAcA,EAAK;AAAA,UACnB,aAAaA,EAAK;AAAA,UAClB,YAAYA,EAAK;AAAA,UACjB,UAAUvB,IACN,MAAM;AACE,kBAAA6B,IAAI,IAAI,WAAW,SAAS;AAAA,cAChC,SAAS;AAAA,cACT,YAAY;AAAA,YAAA,CACb;AACD,YAAAN,EAAK,QAAQM,CAAC,GACdxB,KAAA,QAAAA,EAAe;AAAA,UAAK,IAEtB;AAAA,UACJ,QAAQR,IACJ,CAACiC,MACCjC,EAAW0B,GAAMO,CAAS,IAC5B;AAAA,UACJ,UAAU;AAAA,YACRP,EAAK,QACH,gBAAAQ;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWH;AAAA,kBACTpB,EAAI,yBAAyB;AAAA,kBAC7BV,KAAA,gBAAAA,EAAY;AAAA,gBACd;AAAA,gBAEC,UAAKyB,EAAA;AAAA,cAAA;AAAA,cANF;AAAA,YAON;AAAA,YAED,gBAAAQ,EAAA,QAAA,EAAkB,UAAKR,EAAA,MAAA,GAAd,OAAoB;AAAA,UAAA;AAAA,QAElC;AACA,eAAOvB,IACJ,gBAAA+B,EAAAX,EAAQ,MAAR,EAAgC,GAAGO,EAAjB,GAAAH,IAAI,MAAMC,CAAc,IAE1C,gBAAAM,EAAAL,GAAA,EAA4B,GAAGC,EAAjB,GAAAH,IAAI,MAAMC,CAAc;AAAA,MAAA,WAEhCF,EAAK,SAAS;AAErB,eAAA,gBAAAQ;AAAA,UAACZ;AAAA,UAAA;AAAA,YAEC,WAAWS;AAAA,cACTpB,EAAI,uBAAuB;AAAA,cAC3BV,KAAA,gBAAAA,EAAY;AAAA,YAAA;AAAA,UACd;AAAA,UAJK0B,IAAI,MAAMC;AAAA,QAKjB;AAGG,aAAA;AAAA,IACT;AAAA,IACA,CAACjB,GAAKV,GAAYD,GAAYQ,GAAcL,GAAYmB,CAAa;AAAA,EACvE,GAEMa,IAAc1B;AAAA,IAClB,CAAC2B,GAA0BC,MACzB,gBAAAC;AAAA,MAACd,EAAK;AAAA,MAAL;AAAA,QAEC,WAAWO,EAAKpB,EAAI,qBAAqB,GAAGV,KAAA,gBAAAA,EAAY,KAAK;AAAA,QAE5D,UAAA;AAAA,UAAAmC,EAAM,SACL,gBAAAF;AAAA,YAACV,EAAK;AAAA,YAAL;AAAA,cACC,WAAWO;AAAA,gBACTpB,EAAI,sBAAsB;AAAA,gBAC1BV,KAAA,gBAAAA,EAAY;AAAA,cACd;AAAA,cAEA,UAAA,gBAAAiC,EAAC,QAAM,EAAA,UAAAE,EAAM,MAAM,CAAA;AAAA,YAAA;AAAA,UACrB;AAAA,UAEDA,EAAM,MAAM,IAAI,CAACV,GAAME,MAAMH,EAAeC,GAAMW,GAAOT,CAAC,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAbvD,UAAUS;AAAA,IAcjB;AAAA,IAEF,CAAC1B,GAAKV,GAAYwB,CAAc;AAAA,EAClC,GAEMc,IAAwB9B;AAAA,IAC5B,CAAC2B,GAA0BC,MACzBD,EAAM,QACJ,gBAAAF;AAAA,MAACX,EAAQ;AAAA,MAAR;AAAA,QAEC,WAAWQ,EAAKpB,EAAI,qBAAqB,GAAGV,KAAA,gBAAAA,EAAY,KAAK;AAAA,QAC7D,SACE,gBAAAiC;AAAA,UAACV,EAAK;AAAA,UAAL;AAAA,YACC,WAAWO;AAAA,cACTpB,EAAI,sBAAsB;AAAA,cAC1BV,KAAA,gBAAAA,EAAY;AAAA,YACd;AAAA,YAEA,UAAA,gBAAAiC,EAAC,QAAM,EAAA,UAAAE,EAAM,MAAM,CAAA;AAAA,UAAA;AAAA,QACrB;AAAA,QAGD,UAAAA,EAAM,MAAM,IAAI,CAACV,GAAME,MAAMH,EAAeC,GAAMW,GAAOT,CAAC,CAAC;AAAA,MAAA;AAAA,MAbvD,UAAUS;AAAA,IAcjB,IAEAD,EAAM,MAAM,IAAI,CAACV,GAAME,MAAMH,EAAeC,GAAMW,GAAOT,CAAC,CAAC;AAAA,IAE/D,CAACjB,GAAKV,GAAYwB,CAAc;AAAA,EAClC,GAEMe,IAAkB/B;AAAA,IACtB,MACEN,IACE,gBAAAmC,EAACf,GACC,EAAA,UAAA;AAAA,MAAA,gBAAAkB;AAAA,QAAClB,EAAQ;AAAA,QAAR;AAAA,UACE,GAAGnB;AAAA,UACJ,KAAI;AAAA,UACJ,0BACGsC,GAAM,EAAA,YAAU,IAAC,WAAW/B,EAAI,sBAAsB,EAAG,CAAA;AAAA,QAAA;AAAA,MAE9D;AAAA,MACA,gBAAA2B,EAACf,EAAQ,MAAR,EACC,UAAA;AAAA,QAAA,gBAAAW,EAACX,EAAQ,OAAR,EAAc,WAAWZ,EAAI,qBAAqB,GAAG,UAEtD,qBAAA;AAAA,QACCQ,EAAW,IAAIoB,CAAqB;AAAA,MAAA,EACvC,CAAA;AAAA,IACF,EAAA,CAAA,IAEApB,EAAW,IAAIgB,CAAW;AAAA,IAE9B;AAAA,MACEhC;AAAA,MACAgB;AAAA,MACAoB;AAAA,MACAJ;AAAA,MACA/B;AAAA,MACAO;AAAA,IAAA;AAAA,EAEJ,GAEMgC,IAAgBxC,IAAayC,IAAUpB;AAG3C,SAAA,gBAAAc;AAAA,IAACK,EAAc;AAAA,IAAd;AAAA,MACC,aAAA/C;AAAA,MACA,MAAAS;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAA0B;AAAA,UAACS,EAAc;AAAA,UAAd;AAAA,YACC,QAAQlD;AAAA,YACR,KAAKwB;AAAA,YACL,WAAWc;AAAA,cACTpB,EAAI,uBAAuB;AAAA,cAC3BV,KAAA,gBAAAA,EAAY;AAAA,cACZY;AAAA,YAAA;AAAA,UACF;AAAA,QACF;AAAA,QACA,gBAAAqB,EAACS,EAAc,QAAd,EACC,UAAA,gBAAAT;AAAA,UAACS,EAAc;AAAA,UAAd;AAAA,YACC,MAAM5B,EAAoB;AAAA,YAC1B,OAAOA,EAAoB;AAAA,YAC3B,YAAY;AAAA,YACZ,WAAWgB,EAAKpB,EAAI,oBAAoB,GAAGV,KAAA,gBAAAA,EAAY,IAAI;AAAA,YAC3D,oBAAoB4C;AAAA,YAEpB,UAAA,gBAAAX;AAAA,cAACS,EAAc;AAAA,cAAd;AAAA,gBACC,WAAWZ;AAAA,kBACTpB,EAAI,eAAe;AAAA,kBACnBZ;AAAA,kBACAE,KAAA,gBAAAA,EAAY;AAAA,kBACZY;AAAA,gBACF;AAAA,gBACA,OACE;AAAA,kBACE,gBACEX,KAAQ4C,IAAiBA,EAAe5C,CAAI,IAAI;AAAA,gBACpD;AAAA,gBAGD,UAAgBsC,EAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/icon-button/component.js

@@ -1,62 +1,65 @@
 "use client";
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as w } from "react";
-import { useRender as N } from "@base-ui-components/react/use-render";
 import './style.css';/* empty css          */
-import { Tooltip as S } from "../tooltip/component.js";
-import { Spin as T } from "../spin/component.js";
-import { useCls as $ } from "../utils/antdUtils.js";
-import { clsx as k } from "../utils/cn.js";
-const q = ({
+import { Tooltip as N } from "../tooltip/component.js";
+import { WithRenderProp as P } from "../utils/WithRenderProp.js";
+import { Spin as S } from "../spin/component.js";
+import { useCls as T } from "../utils/antdUtils.js";
+import { clsx as W } from "../utils/cn.js";
+const $ = ({
   label: s,
-  size: l = "medium",
-  negativeMargin: b = !0,
-  children: v,
+  size: d = "medium",
+  negativeMargin: l = !0,
+  children: b,
   className: f,
-  tooltipProps: x = {},
-  as: C,
-  href: o,
+  tooltipProps: v = {},
+  as: x,
+  href: t,
   // Extract anchor-specific props
   target: r,
   rel: e,
   download: c,
   hrefLang: p,
   referrerPolicy: u,
-  loading: t,
-  render: I,
-  ...B
-}, d) => {
-  const n = $(), R = k(
+  loading: o,
+  render: C,
+  ...I
+}, B) => {
+  const n = T(), R = W(
     n("icon-button"),
-    n(`icon-button-${l}`),
-    n(b ? "icon-button-negative-margin" : ""),
+    n(`icon-button-${d}`),
+    n(l ? "icon-button-negative-margin" : ""),
     f
-  ), i = C || (o ? "a" : "button"), j = {
-    ref: d,
+  ), i = x || (t ? "a" : "button"), j = {
+    ref: B,
     className: R,
     ...i === "button" && { type: "button" },
     ...i === "a" ? {
-      ...o && { href: o },
+      ...t && { href: t },
       ...r !== void 0 && { target: r },
       ...e !== void 0 && { rel: e },
       ...c !== void 0 && { download: c },
       ...p !== void 0 && { hrefLang: p },
       ...u !== void 0 && { referrerPolicy: u }
     } : {},
-    "data-loading": t,
-    children: t ? /* @__PURE__ */ m(T, {}) : v,
-    ...B
-  }, a = N({
-    ref: d,
-    render: I || /* @__PURE__ */ m(i, {}),
-    props: j,
-    state: {
-      loading: t
+    "data-loading": o,
+    children: o ? /* @__PURE__ */ m(S, {}) : b,
+    ...I
+  }, a = /* @__PURE__ */ m(
+    P,
+    {
+      as: i,
+      render: C,
+      ...j,
+      state: {
+        loading: o
+      }
     }
-  });
-  return s ? /* @__PURE__ */ m(S, { title: s, arrow: !1, ...x, children: a }) : a;
-}, J = w(q);
+  );
+  return s ? /* @__PURE__ */ m(N, { title: s, arrow: !1, ...v, children: a }) : a;
+}, F = w($);
 export {
-  J as IconButton
+  F as IconButton
 };
 //# sourceMappingURL=component.js.map

package/dist/components/icon-button/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  type AnchorHTMLAttributes,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport { useCls, clsx } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\ntype IconButtonBaseProps = {\n  /**\n   * Label text or element to display within tooltip\n   * @default undefined\n   */\n  label?: React.ReactNode;\n  /**\n   * Size of the icon button: small (1.25rem) or medium (1.5rem)\n   * @default medium\n   */\n  size?: \"small\" | \"medium\";\n  /**\n   * Whether to apply negative margin for better visual alignment\n   * @default true\n   */\n  negativeMargin?: boolean;\n  /**\n   * Whether to show loading state\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Props to pass to the Tooltip component when wrapping the button\n   */\n  tooltipProps?: TooltipProps;\n  /**\n   * Custom render function for the button\n   */\n  render?: useRender.RenderProp<{ loading: boolean }>;\n};\n\n// Extract anchor-specific props we want to automatically handle\ntype AnchorSpecificProps = Pick<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"target\" | \"rel\" | \"download\" | \"hrefLang\" | \"referrerPolicy\"\n>;\n\n// Props when href is provided - as defaults to 'a' and includes anchor-specific props\ntype WithHrefProps<E extends ElementType = \"a\"> = IconButtonBaseProps & {\n  href: string;\n  as?: E;\n} & AnchorSpecificProps;\n\n// Props when href is not provided - as defaults to 'button'\ntype WithoutHrefProps<E extends ElementType = \"button\"> =\n  IconButtonBaseProps & {\n    href?: undefined;\n    as?: E;\n  } & {\n    [K in keyof AnchorSpecificProps]?: never;\n  };\n\n// Combined props type with conditional behavior\ntype IconButtonOwnProps<E extends ElementType = ElementType> =\n  | WithHrefProps<E>\n  | WithoutHrefProps<E>;\n\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  IconButtonOwnProps<E> &\n    Omit<ComponentPropsWithoutRef<E>, keyof IconButtonOwnProps<E>>;\n\n/**\n * A type-safe polymorphic component pattern\n */\ninterface PolymorphicComponentProps<E extends ElementType = \"button\"> {\n  as?: E;\n  href?: string;\n}\n\n/**\n * Type for wrapping the forwardRef implementation\n */\ntype IconButtonComponent = <E extends ElementType = \"button\">(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReactElement;\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n  {\n    label,\n    size = \"medium\",\n    negativeMargin = true,\n    children,\n    className,\n    tooltipProps = {},\n    as,\n    href,\n    // Extract anchor-specific props\n    target,\n    rel,\n    download,\n    hrefLang,\n    referrerPolicy,\n    loading,\n    render,\n    ...rest\n  }: IconButtonProps<E> & PolymorphicComponentProps<E>,\n  ref: Ref<Element>\n) => {\n  const cls = useCls();\n  const buttonClasses = clsx(\n    cls(\"icon-button\"),\n    cls(`icon-button-${size}`),\n    cls(negativeMargin ? \"icon-button-negative-margin\" : \"\"),\n    className\n  );\n\n  // Use a type assertion for the component to avoid TypeScript errors\n  const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n  const elementProps = {\n    ref,\n    className: buttonClasses,\n    ...(Component === \"button\" && { type: \"button\" }),\n    ...(Component === \"a\"\n      ? {\n          ...(href && { href }),\n          ...(target !== undefined && { target }),\n          ...(rel !== undefined && { rel }),\n          ...(download !== undefined && { download }),\n          ...(hrefLang !== undefined && { hrefLang }),\n          ...(referrerPolicy !== undefined && { referrerPolicy }),\n        }\n      : {}),\n    \"data-loading\": loading,\n    children: loading ? <Spin /> : children,\n    ...rest,\n  };\n\n  const element = useRender({\n    ref,\n    render: render || <Component />,\n    props: elementProps,\n    state: {\n      loading,\n    },\n  });\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as IconButtonComponent;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","useRender","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAkGA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH,EAAI,aAAa;AAAA,IACjBA,EAAI,eAAehB,CAAI,EAAE;AAAA,IACzBgB,EAAIf,IAAiB,gCAAgC,EAAE;AAAA,IACvDE;AAAA,EACF,GAGMiB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKrB;AAAA,IAC/B,GAAGY;AAAA,EACL,GAEMU,IAAUC,EAAU;AAAA,IACxB,KAAAV;AAAA,IACA,QAAQF,KAAU,gBAAAS,EAACF,GAAU,CAAA,CAAA;AAAA,IAC7B,OAAOC;AAAA,IACP,OAAO;AAAA,MACL,SAAAT;AAAA,IAAA;AAAA,EACF,CACD;AAEM,SAAAb,IACJ,gBAAAuB,EAAAI,GAAA,EAAQ,OAAO3B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAoB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW9B,CAAc;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type ReactElement,\n  type Ref,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n  useCls,\n  clsx,\n  WithRenderPropProps,\n  WithRenderProp,\n  ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  WithRenderPropProps<E, { loading: boolean }> & {\n    /**\n     * Label text or element to display within tooltip\n     * @default undefined\n     */\n    label?: React.ReactNode;\n    /**\n     * Size of the icon button: small (1.25rem) or medium (1.5rem)\n     * @default medium\n     */\n    size?: \"small\" | \"medium\";\n    /**\n     * Whether to apply negative margin for better visual alignment\n     * @default true\n     */\n    negativeMargin?: boolean;\n    /**\n     * Whether to show loading state\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Props to pass to the Tooltip component when wrapping the button\n     */\n    tooltipProps?: TooltipProps;\n  };\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n  {\n    label,\n    size = \"medium\",\n    negativeMargin = true,\n    children,\n    className,\n    tooltipProps = {},\n    as,\n    href,\n    // Extract anchor-specific props\n    target,\n    rel,\n    download,\n    hrefLang,\n    referrerPolicy,\n    loading,\n    render,\n    ...rest\n  }: IconButtonProps<E>,\n  ref: Ref<ElementTypeToDOMType<E>>\n) => {\n  const cls = useCls();\n  const buttonClasses = clsx(\n    cls(\"icon-button\"),\n    cls(`icon-button-${size}`),\n    cls(negativeMargin ? \"icon-button-negative-margin\" : \"\"),\n    className\n  );\n\n  // Use a type assertion for the component to avoid TypeScript errors\n  const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n  const elementProps = {\n    ref,\n    className: buttonClasses,\n    ...(Component === \"button\" && { type: \"button\" }),\n    ...(Component === \"a\"\n      ? {\n          ...(href && { href }),\n          ...(target !== undefined && { target }),\n          ...(rel !== undefined && { rel }),\n          ...(download !== undefined && { download }),\n          ...(hrefLang !== undefined && { hrefLang }),\n          ...(referrerPolicy !== undefined && { referrerPolicy }),\n        }\n      : {}),\n    \"data-loading\": loading,\n    children: loading ? <Spin /> : children,\n    ...rest,\n  };\n\n  const element = (\n    <WithRenderProp\n      as={Component}\n      render={render}\n      {...elementProps}\n      state={{\n        loading,\n      }}\n    />\n  );\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as <\n  E extends ElementType = \"button\"\n>(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof IconButtonImpl>;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","WithRenderProp","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAqDA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH,EAAI,aAAa;AAAA,IACjBA,EAAI,eAAehB,CAAI,EAAE;AAAA,IACzBgB,EAAIf,IAAiB,gCAAgC,EAAE;AAAA,IACvDE;AAAA,EACF,GAGMiB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKrB;AAAA,IAC/B,GAAGY;AAAA,EACL,GAEMU,IACJ,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,IAAIL;AAAA,MACJ,QAAAP;AAAA,MACC,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,SAAAT;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAGK,SAAAb,IACJ,gBAAAuB,EAAAI,GAAA,EAAQ,OAAO3B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAoB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW9B,CAAc;"}

package/dist/components/utils/WithRenderProp.js

@@ -1,14 +1,15 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { useRender as s } from "@base-ui-components/react/use-render";
-const i = (e, r) => {
-  const { render: n, as: o = "div", ...t } = e;
-  return s({
-    render: n || ((d) => /* @__PURE__ */ m(o, { ...d })),
-    props: t,
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { useRender as i } from "@base-ui-components/react/use-render";
+const p = (e, r) => {
+  const { render: t, as: n = "div", ...o } = e;
+  return i({
+    render: t || ((d) => /* @__PURE__ */ s(n, { ...d })),
+    props: o,
+    state: e.state,
     ref: r
   });
-}, h = p(i);
+}, h = m(p);
 export {
   h as WithRenderProp
 };

package/dist/components/utils/WithRenderProp.js.map

@@ -1 +1 @@
-{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef, JSX } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\n// Utility type to map a tag name to its DOM element type\ntype ElementTypeToDOMType<T extends React.ElementType> =\n  T extends keyof JSX.IntrinsicElements\n    ? JSX.IntrinsicElements[T] extends React.DetailedHTMLProps<\n        infer Props,\n        infer Element\n      >\n      ? Element\n      : never\n    : never;\n\nexport type WithRenderPropProps<T extends React.ElementType = \"div\"> =\n  React.ComponentPropsWithoutRef<T> & {\n    render?: useRender.RenderProp;\n    as?: T;\n  };\n\nconst WithRenderPropInner = <T extends React.ElementType = \"div\">(\n  props: WithRenderPropProps<T>,\n  ref: React.ForwardedRef<T>\n) => {\n  const { render, as: Tag = \"div\", ...etc } = props;\n  const renderedElement = useRender({\n    render: render || ((props) => <Tag {...props} />),\n    props: etc,\n    ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n  });\n  return renderedElement;\n};\n\nexport const WithRenderProp = forwardRef(WithRenderPropInner) as <\n  T extends React.ElementType = \"div\"\n>(\n  props: WithRenderPropProps<T> & { ref?: React.Ref<ElementTypeToDOMType<T>> }\n) => ReturnType<typeof WithRenderPropInner>;\n"],"names":["WithRenderPropInner","props","ref","render","Tag","etc","useRender","jsx","WithRenderProp","forwardRef"],"mappings":";;;AAoBA,MAAMA,IAAsB,CAC1BC,GACAC,MACG;AACH,QAAM,EAAE,QAAAC,GAAQ,IAAIC,IAAM,OAAO,GAAGC,MAAQJ;AAMrC,SALiBK,EAAU;AAAA,IAChC,QAAQH,MAAW,CAACF,MAAW,gBAAAM,EAAAH,GAAA,EAAK,GAAGH,EAAO,CAAA;AAAA,IAC9C,OAAOI;AAAA,IACP,KAAAH;AAAA,EAAA,CACD;AAEH,GAEaM,IAAiBC,EAAWT,CAAmB;"}
+{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { ElementTypeToDOMType } from \"./types\";\n\nexport type WithRenderPropProps<\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n> = React.ComponentPropsWithoutRef<T> & {\n  render?: useRender.RenderProp<State>;\n  as?: T;\n  state?: State;\n};\n\nconst WithRenderPropInner = <\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n>(\n  props: WithRenderPropProps<T, State>,\n  ref: React.ForwardedRef<T>\n) => {\n  const { render, as: Tag = \"div\", ...etc } = props;\n  const renderedElement = useRender({\n    render: render || ((props) => <Tag {...props} />),\n    props: etc,\n    state: props.state,\n    ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n  });\n  return renderedElement;\n};\n\nexport const WithRenderProp = forwardRef(WithRenderPropInner) as <\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n>(\n  props: WithRenderPropProps<T, State> & {\n    ref?: React.Ref<ElementTypeToDOMType<T>>;\n  }\n) => ReturnType<typeof WithRenderPropInner>;\n"],"names":["WithRenderPropInner","props","ref","render","Tag","etc","useRender","jsx","WithRenderProp","forwardRef"],"mappings":";;;AAaA,MAAMA,IAAsB,CAI1BC,GACAC,MACG;AACH,QAAM,EAAE,QAAAC,GAAQ,IAAIC,IAAM,OAAO,GAAGC,MAAQJ;AAOrC,SANiBK,EAAU;AAAA,IAChC,QAAQH,MAAW,CAACF,MAAW,gBAAAM,EAAAH,GAAA,EAAK,GAAGH,EAAO,CAAA;AAAA,IAC9C,OAAOI;AAAA,IACP,OAAOJ,EAAM;AAAA,IACb,KAAAC;AAAA,EAAA,CACD;AAEH,GAEaM,IAAiBC,EAAWT,CAAmB;"}

package/dist/components/utils/constants.js

@@ -0,0 +1,10 @@
+const O = {
+  fallbackAxisSide: "none"
+}, A = {
+  fallbackAxisSide: "end"
+};
+export {
+  O as DROPDOWN_COLLISION_AVOIDANCE,
+  A as POPUP_COLLISION_AVOIDANCE
+};
+//# sourceMappingURL=constants.js.map

package/dist/components/utils/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/utils/constants.ts"],"sourcesContent":["/**\n * Used for dropdowns that usually strictly prefer top/bottom placements and\n * use `var(--available-height)` to limit their height.\n */\nexport const DROPDOWN_COLLISION_AVOIDANCE = {\n  fallbackAxisSide: \"none\",\n} as const;\n\n/**\n * Used by regular popups that usually aren't scrollable and are allowed to\n * freely flip to any axis of placement.\n */\nexport const POPUP_COLLISION_AVOIDANCE = {\n  fallbackAxisSide: \"end\",\n} as const;\n"],"names":["DROPDOWN_COLLISION_AVOIDANCE","POPUP_COLLISION_AVOIDANCE"],"mappings":"AAIO,MAAMA,IAA+B;AAAA,EAC1C,kBAAkB;AACpB,GAMaC,IAA4B;AAAA,EACvC,kBAAkB;AACpB;"}

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import { Alert } from 'antd';
 import { AlertProps } from 'antd';
 import { AliasToken } from 'antd/es/theme/internal';
 import { Anchor } from 'antd';
-import { AnchorHTMLAttributes } from 'react';
 import { AnchorLinkProps } from 'antd';
 import { AnchorProps } from 'antd';
 import { App } from 'antd';
@@ -265,8 +264,6 @@ export { AnchorLinkProps }
 
 export { AnchorProps }
 
-declare type AnchorSpecificProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel" | "download" | "hrefLang" | "referrerPolicy">;
-
 export declare const antdColorTokens: ColorTokens;
 
 declare type AnyFunction = (...args: any[]) => any;
@@ -1556,6 +1553,14 @@ export { DrawerProps }
 
 export { Dropdown }
 
+/**
+ * Used for dropdowns that usually strictly prefer top/bottom placements and
+ * use `var(--available-height)` to limit their height.
+ */
+export declare const DROPDOWN_COLLISION_AVOIDANCE: {
+    readonly fallbackAxisSide: "none";
+};
+
 export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, className, itemRender, classNames, size, showSearch, searchProps, }: DropdownMenuProps) => JSX.Element;
 
 export declare type DropdownMenuItemType = {
@@ -1663,7 +1668,7 @@ export declare interface DSRootProps extends ThemeProviderProps {
     appendClassesTo?: string | HTMLElement;
 }
 
-declare type ElementTypeToDOMType<T extends default_2.ElementType> = T extends keyof JSX_2.IntrinsicElements ? JSX_2.IntrinsicElements[T] extends default_2.DetailedHTMLProps<infer Props, infer Element> ? Element : never : never;
+export declare type ElementTypeToDOMType<T extends React.ElementType> = T extends keyof JSX_2.IntrinsicElements ? JSX_2.IntrinsicElements[T] extends React.DetailedHTMLProps<infer _Props, infer Element> ? Element : never : never;
 
 export declare const Empty: ({ image, size, className, ...rest }: EmptyProps) => JSX.Element;
 
@@ -1770,9 +1775,18 @@ export { GlobalToken }
 
 export { Grid }
 
-export declare const IconButton: IconButtonComponent;
+export declare const IconButton: <E extends ElementType = "button">(props: IconButtonProps<E> & {
+    ref?: ComponentPropsWithRef<E>["ref"];
+}) => ReturnType<typeof IconButtonImpl>;
+
+/**
+ * Implementation of the IconButton component
+ */
+declare const IconButtonImpl: <E extends ElementType = "button">({ label, size, negativeMargin, children, className, tooltipProps, as, href, target, rel, download, hrefLang, referrerPolicy, loading, render, ...rest }: IconButtonProps<E>, ref: Ref<ElementTypeToDOMType<E>>) => JSX.Element;
 
-declare type IconButtonBaseProps = {
+export declare type IconButtonProps<E extends ElementType = "button"> = WithRenderPropProps<E, {
+    loading: boolean;
+}> & {
     /**
      * Label text or element to display within tooltip
      * @default undefined
@@ -1797,25 +1811,8 @@ declare type IconButtonBaseProps = {
      * Props to pass to the Tooltip component when wrapping the button
      */
     tooltipProps?: TooltipProps;
-    /**
-     * Custom render function for the button
-     */
-    render?: useRender.RenderProp<{
-        loading: boolean;
-    }>;
 };
 
-/**
- * Type for wrapping the forwardRef implementation
- */
-declare type IconButtonComponent = <E extends ElementType = "button">(props: IconButtonProps<E> & {
-    ref?: ComponentPropsWithRef<E>["ref"];
-}) => ReactElement;
-
-declare type IconButtonOwnProps<E extends ElementType = ElementType> = WithHrefProps<E> | WithoutHrefProps<E>;
-
-export declare type IconButtonProps<E extends ElementType = "button"> = IconButtonOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof IconButtonOwnProps<E>>;
-
 declare const InnerInternalTable: <RecordType extends object = object>({ columns, locale, emptyDescription, loading, virtual, scroll: scrollProp, className, variant, ...rest }: TableProps<RecordType>, ref: Ref<TableRef>) => JSX.Element;
 
 declare function InnerToast({ toast, }: {
@@ -2090,8 +2087,9 @@ export declare interface PasswordProps extends PasswordProps_2 {
 }
 
 declare const pkg: default_2.ForwardRefExoticComponent<Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    render?: useRender_2.RenderProp;
+    render?: useRender_2.RenderProp<Record<string, unknown>>;
     as?: "div";
+    state?: Record<string, unknown>;
 } & {
     /**
      * Accessible label for this command menu. Not shown visibly.
@@ -2134,8 +2132,9 @@ declare const pkg: default_2.ForwardRefExoticComponent<Children & Omit<default_2
     vimBindings?: boolean;
 } & default_2.RefAttributes<HTMLDivElement>> & {
     List: default_2.ForwardRefExoticComponent<Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        render?: useRender_2.RenderProp;
+        render?: useRender_2.RenderProp<Record<string, unknown>>;
         as?: "div";
+        state?: Record<string, unknown>;
     } & {
         /**
          * Accessible label for this List of suggestions. Not shown visibly.
@@ -2176,15 +2175,17 @@ declare const pkg: default_2.ForwardRefExoticComponent<Children & Omit<default_2
         forceMount?: boolean;
     } & default_2.RefAttributes<HTMLDivElement>>;
     Separator: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        render?: useRender_2.RenderProp;
+        render?: useRender_2.RenderProp<Record<string, unknown>>;
         as?: "div";
+        state?: Record<string, unknown>;
     } & {
         /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
         alwaysRender?: boolean;
     } & default_2.RefAttributes<HTMLDivElement>>;
     Dialog: default_2.ForwardRefExoticComponent<Dialog.Root.Props & Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        render?: useRender_2.RenderProp;
+        render?: useRender_2.RenderProp<Record<string, unknown>>;
         as?: "div";
+        state?: Record<string, unknown>;
     } & {
         /**
          * Accessible label for this command menu. Not shown visibly.
@@ -2234,12 +2235,14 @@ declare const pkg: default_2.ForwardRefExoticComponent<Children & Omit<default_2
         container?: HTMLElement;
     } & default_2.RefAttributes<HTMLDivElement>>;
     Empty: default_2.ForwardRefExoticComponent<Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        render?: useRender_2.RenderProp;
+        render?: useRender_2.RenderProp<Record<string, unknown>>;
         as?: "div";
+        state?: Record<string, unknown>;
     } & default_2.RefAttributes<HTMLDivElement>>;
     Loading: default_2.ForwardRefExoticComponent<Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        render?: useRender_2.RenderProp;
+        render?: useRender_2.RenderProp<Record<string, unknown>>;
         as?: "div";
+        state?: Record<string, unknown>;
     } & {
         /** Estimated progress of loading asynchronous options. */
         progress?: number;
@@ -2264,6 +2267,14 @@ export declare interface PopoverProps extends PopoverProps_2 {
     arrow?: PopoverProps_2["arrow"];
 }
 
+/**
+ * Used by regular popups that usually aren't scrollable and are allowed to
+ * freely flip to any axis of placement.
+ */
+export declare const POPUP_COLLISION_AVOIDANCE: {
+    readonly fallbackAxisSide: "end";
+};
+
 export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, classNames, modal, closeOnClickOutside, }: PopupPanelProps) => JSX.Element;
 
 export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">, "title" | "content" | "children"> {
@@ -3567,27 +3578,16 @@ export declare type WidthAntdTokensProps<T extends IntrinsicElement> = {
 
 export declare const WithAntdTokens: <T extends IntrinsicElement = "div">({ as: Tag, ref, className, ...rest }: WidthAntdTokensProps<T>) => null;
 
-declare type WithHrefProps<E extends ElementType = "a"> = IconButtonBaseProps & {
-    href: string;
-    as?: E;
-} & AnchorSpecificProps;
-
-declare type WithoutHrefProps<E extends ElementType = "button"> = IconButtonBaseProps & {
-    href?: undefined;
-    as?: E;
-} & {
-    [K in keyof AnchorSpecificProps]?: never;
-};
-
-export declare const WithRenderProp: <T extends default_2.ElementType = "div">(props: WithRenderPropProps<T> & {
+export declare const WithRenderProp: <T extends default_2.ElementType = "div", State extends Record<string, unknown> = Record<string, unknown>>(props: WithRenderPropProps<T, State> & {
     ref?: default_2.Ref<ElementTypeToDOMType<T>>;
 }) => ReturnType<typeof WithRenderPropInner>;
 
-declare const WithRenderPropInner: <T extends default_2.ElementType = "div">(props: WithRenderPropProps<T>, ref: default_2.ForwardedRef<T>) => null;
+declare const WithRenderPropInner: <T extends default_2.ElementType = "div", State extends Record<string, unknown> = Record<string, unknown>>(props: WithRenderPropProps<T, State>, ref: default_2.ForwardedRef<T>) => null;
 
-export declare type WithRenderPropProps<T extends default_2.ElementType = "div"> = default_2.ComponentPropsWithoutRef<T> & {
-    render?: useRender.RenderProp;
+export declare type WithRenderPropProps<T extends default_2.ElementType = "div", State extends Record<string, unknown> = Record<string, unknown>> = default_2.ComponentPropsWithoutRef<T> & {
+    render?: useRender.RenderProp<State>;
     as?: T;
+    state?: State;
 };
 
 export { }

package/dist/index.js

@@ -1,5 +1,5 @@
 import { componentMetadata as e, getComponentsByCategory as t } from "./metadata.js";
-import { Affix as p, Alert as m, Anchor as s, App as f, AutoComplete as l, Avatar as n, BackTop as x, Calendar as i, Card as C, Carousel as c, Cascader as T, Col as u, ColorPicker as d, ConfigProvider as g, DatePicker as S, Descriptions as h, Divider as A, Drawer as E, Dropdown as k, Flex as P, FloatButton as R, Grid as b, InputNumber as D, Layout as y, List as B, Mentions as L, Menu as v, Pagination as I, Popconfirm as M, Progress as F, QRCode as N, Rate as U, Result as w, Row as W, Skeleton as _, Space as O, Statistic as q, Steps as G, Tabs as V, TimePicker as K, Timeline as Q, Transfer as H, TreeSelect as j, Typography as z, Watermark as J, message as X, notification as Y, theme as Z, unstableSetRender as $, version as oo } from "antd";
+import { Affix as p, Alert as m, Anchor as s, App as f, AutoComplete as l, Avatar as n, BackTop as x, Calendar as i, Card as C, Carousel as c, Cascader as T, Col as u, ColorPicker as d, ConfigProvider as S, DatePicker as g, Descriptions as h, Divider as A, Drawer as E, Dropdown as P, Flex as k, FloatButton as D, Grid as R, InputNumber as L, Layout as I, List as b, Mentions as O, Menu as y, Pagination as B, Popconfirm as N, Progress as v, QRCode as M, Rate as _, Result as U, Row as F, Skeleton as W, Space as w, Statistic as V, Steps as q, Tabs as G, TimePicker as K, Timeline as Q, Transfer as H, TreeSelect as j, Typography as z, Watermark as J, message as X, notification as Y, theme as Z, unstableSetRender as $, version as oo } from "antd";
 import { Select as eo } from "./components/select/component.js";
 import { Modal as ao } from "./components/modal/index.js";
 import { IconButton as mo } from "./components/icon-button/component.js";
@@ -8,66 +8,67 @@ import { Checkbox as no } from "./components/checkbox/component.js";
 import { Segmented as io } from "./components/segmented/component.js";
 import { Table as co } from "./components/table/component.js";
 import { Tag as uo } from "./components/tag/component.js";
-import { ThemeProvider as So } from "./components/theme-provider/component.js";
+import { ThemeProvider as go } from "./components/theme-provider/component.js";
 import { Split as Ao, Splitter as Eo } from "./components/splitter/component.js";
-import { Truncate as Po } from "./components/truncate/component.js";
-import { DropdownMenu as bo } from "./components/dropdown-menu/component.js";
-import { clsx as yo, cn as Bo, cx as Lo } from "./components/utils/cn.js";
-import { reactNodeToString as Io } from "./components/utils/reactToString.js";
-import { isTracebackError as Fo } from "./components/utils/isTracebackError.js";
-import { isValidHexColor as Uo } from "./components/utils/colors.js";
-import { WithRenderProp as Wo } from "./components/utils/WithRenderProp.js";
-import { parseAntdPlacement as Oo, useAntdCssVarClassname as qo, useCls as Go, useGetPrefixCls as Vo } from "./components/utils/antdUtils.js";
+import { Truncate as ko } from "./components/truncate/component.js";
+import { DropdownMenu as Ro } from "./components/dropdown-menu/component.js";
+import { clsx as Io, cn as bo, cx as Oo } from "./components/utils/cn.js";
+import { reactNodeToString as Bo } from "./components/utils/reactToString.js";
+import { isTracebackError as vo } from "./components/utils/isTracebackError.js";
+import { isValidHexColor as _o } from "./components/utils/colors.js";
+import { WithRenderProp as Fo } from "./components/utils/WithRenderProp.js";
+import { parseAntdPlacement as wo, useAntdCssVarClassname as Vo, useCls as qo, useGetPrefixCls as Go } from "./components/utils/antdUtils.js";
 import { WithAntdTokens as Qo } from "./components/utils/WithAntdTokens.js";
 import { changeThemeWithoutTransition as jo } from "./components/utils/theme.js";
 import { moveTypingCursorToEnd as Jo } from "./components/utils/selectionRange.js";
-import { Transition as Yo } from "./components/transition/component.js";
-import { DefaultUpload as $o, Upload as or } from "./components/upload/component.js";
-import { useUploadItemRender as er } from "./components/upload/hooks.js";
-import { ScrollArea as ar } from "./components/scroll-area/component.js";
-import { Popover as mr } from "./components/popover/component.js";
-import { Slider as fr } from "./components/slider/component.js";
-import { Tooltip as nr } from "./components/tooltip/component.js";
-import { Breadcrumb as ir } from "./components/breadcrumb/component.js";
-import { useUniqueKeysTree as cr } from "./components/tree/useUniqueKeysTree.js";
-import { getUniqueKeysFromOriginals as ur, processTreeData as dr } from "./components/tree/helpers.js";
-import { Tree as Sr } from "./components/tree/components.js";
-import { Spin as Ar } from "./components/spin/component.js";
-import { Empty as kr, EmptyIcon as Pr } from "./components/empty/component.js";
+import { DROPDOWN_COLLISION_AVOIDANCE as Yo, POPUP_COLLISION_AVOIDANCE as Zo } from "./components/utils/constants.js";
+import { Transition as or } from "./components/transition/component.js";
+import { DefaultUpload as er, Upload as tr } from "./components/upload/component.js";
+import { useUploadItemRender as pr } from "./components/upload/hooks.js";
+import { ScrollArea as sr } from "./components/scroll-area/component.js";
+import { Popover as lr } from "./components/popover/component.js";
+import { Slider as xr } from "./components/slider/component.js";
+import { Tooltip as Cr } from "./components/tooltip/component.js";
+import { Breadcrumb as Tr } from "./components/breadcrumb/component.js";
+import { useUniqueKeysTree as dr } from "./components/tree/useUniqueKeysTree.js";
+import { getUniqueKeysFromOriginals as gr, processTreeData as hr } from "./components/tree/helpers.js";
+import { Tree as Er } from "./components/tree/components.js";
+import { Spin as kr } from "./components/spin/component.js";
+import { Empty as Rr, EmptyIcon as Lr } from "./components/empty/component.js";
 import { Form as br } from "./components/form/component.js";
 import { Field as yr } from "./components/field/component.js";
-import { Tour as Lr } from "./components/tour/component.js";
-import { Toast as Ir } from "./components/toast/component.js";
-import { toast as Fr, toastManager as Nr } from "./components/toast/function.js";
+import { Tour as Nr } from "./components/tour/component.js";
+import { Toast as Mr } from "./components/toast/component.js";
+import { toast as Ur, toastManager as Fr } from "./components/toast/function.js";
 import { VerticalCollapsiblePanel as wr } from "./components/vertical-collapsible-panel/component.js";
-import { PopupPanel as _r } from "./components/popup-panel/component.js";
-import { CodeBlock as qr } from "./components/code-block/component.js";
-import { StackChild as Vr } from "./components/stack/StackChild.js";
-import { Stack as Qr } from "./components/stack/index.js";
-import { Collapse as jr } from "./components/collapse/component.js";
-import { Input as Jr } from "./components/input/component.js";
-import { Badge as Yr, InternalBadge as Zr } from "./components/badge/component.js";
-import { Radio as oe } from "./components/radio/component.js";
-import { Button as ee } from "./components/button/component.js";
-import { DSRoot as ae } from "./components/ds-root/component.js";
-import { DSRootContextProvider as me, useDS as se } from "./components/ds-root/context.js";
-import { DragDrop as le, DragDropRoot as ne } from "./components/drag-drop/index.js";
-import { ColorSelect as ie } from "./components/color-select/component.js";
-import { Nav as ce } from "./components/nav/index.js";
-import { ChoiceList as ue } from "./components/choice-list/component.js";
-import { useForm as ge, useWatch as Se } from "antd/es/form/Form";
-import { useBreakpoint as Ae, useMessage as Ee, useModal as ke, useToken as Pe } from "./components/hooks/antd.js";
+import { PopupPanel as qr } from "./components/popup-panel/component.js";
+import { CodeBlock as Kr } from "./components/code-block/component.js";
+import { StackChild as Hr } from "./components/stack/StackChild.js";
+import { Stack as zr } from "./components/stack/index.js";
+import { Collapse as Xr } from "./components/collapse/component.js";
+import { Input as Zr } from "./components/input/component.js";
+import { Badge as oe, InternalBadge as re } from "./components/badge/component.js";
+import { Radio as te } from "./components/radio/component.js";
+import { Button as pe } from "./components/button/component.js";
+import { DSRoot as se } from "./components/ds-root/component.js";
+import { DSRootContextProvider as le, useDS as ne } from "./components/ds-root/context.js";
+import { DragDrop as ie, DragDropRoot as Ce } from "./components/drag-drop/index.js";
+import { ColorSelect as Te } from "./components/color-select/component.js";
+import { Nav as de } from "./components/nav/index.js";
+import { ChoiceList as ge } from "./components/choice-list/component.js";
+import { useForm as Ae, useWatch as Ee } from "antd/es/form/Form";
+import { useBreakpoint as ke, useMessage as De, useModal as Re, useToken as Le } from "./components/hooks/antd.js";
 import { default as be } from "antd/es/app/useApp";
-import { useAnimationsFinished as ye, useEnhancedEffect as Be, useEventCallback as Le, useLatestRef as ve } from "./components/hooks/base-ui.js";
-import { useControlledState as Me } from "./components/hooks/useControlledState.js";
-import { useCharts as Ne } from "./components/hooks/useCharts.js";
+import { useAnimationsFinished as ye, useEnhancedEffect as Be, useEventCallback as Ne, useLatestRef as ve } from "./components/hooks/base-ui.js";
+import { useControlledState as _e } from "./components/hooks/useControlledState.js";
+import { useCharts as Fe } from "./components/hooks/useCharts.js";
 import { useCSSVariables as we } from "./components/hooks/useCSSVariables.js";
-import { antdColorTokens as _e, darkTheme as Oe, lightTheme as qe } from "./tokens/and-theme/tokens.js";
-import { categoricalChartColorKeys as Ve, categoricalChartColorTokens as Ke, categoricalChartsColors as Qe, chartColorTokens as He, rawChartColorTokens as je } from "./tokens/charts/palettes/cloudscape.js";
-import { COLORBREWER as Je } from "./tokens/charts/palettes/colorbrewer.js";
-import { tab10 as Ye, tab20 as Ze, tab20b as $e, tab20c as ot } from "./tokens/charts/palettes/tableau.js";
-import { CATEGORICAL_PALETTES as et, CATEGORICAL_PALETTE_NAMES as tt, SEQUENTIAL_PALETTES as at, SEQUENTIAL_PALETTE_NAMES as pt, getAllCategoricalChartColors as mt, getAllSequentialChartColors as st, getCategoricalChartColors as ft, getSequentialChartColors as lt } from "./tokens/charts/palettes/index.js";
-import { getColorsByTheme as xt, getTokensByTheme as it, resolveColorTokens as Ct } from "./tokens/utils.js";
+import { antdColorTokens as qe, darkTheme as Ge, lightTheme as Ke } from "./tokens/and-theme/tokens.js";
+import { categoricalChartColorKeys as He, categoricalChartColorTokens as je, categoricalChartsColors as ze, chartColorTokens as Je, rawChartColorTokens as Xe } from "./tokens/charts/palettes/cloudscape.js";
+import { COLORBREWER as Ze } from "./tokens/charts/palettes/colorbrewer.js";
+import { tab10 as ot, tab20 as rt, tab20b as et, tab20c as tt } from "./tokens/charts/palettes/tableau.js";
+import { CATEGORICAL_PALETTES as pt, CATEGORICAL_PALETTE_NAMES as mt, SEQUENTIAL_PALETTES as st, SEQUENTIAL_PALETTE_NAMES as ft, getAllCategoricalChartColors as lt, getAllSequentialChartColors as nt, getCategoricalChartColors as xt, getSequentialChartColors as it } from "./tokens/charts/palettes/index.js";
+import { getColorsByTheme as ct, getTokensByTheme as Tt, resolveColorTokens as ut } from "./tokens/utils.js";
 export {
   p as Affix,
   m as Alert,
@@ -76,156 +77,158 @@ export {
   l as AutoComplete,
   n as Avatar,
   x as BackTop,
-  Yr as Badge,
-  ir as Breadcrumb,
-  ee as Button,
-  et as CATEGORICAL_PALETTES,
-  tt as CATEGORICAL_PALETTE_NAMES,
-  Je as COLORBREWER,
+  oe as Badge,
+  Tr as Breadcrumb,
+  pe as Button,
+  pt as CATEGORICAL_PALETTES,
+  mt as CATEGORICAL_PALETTE_NAMES,
+  Ze as COLORBREWER,
   i as Calendar,
   C as Card,
   c as Carousel,
   T as Cascader,
   no as Checkbox,
-  ue as ChoiceList,
-  qr as CodeBlock,
+  ge as ChoiceList,
+  Kr as CodeBlock,
   u as Col,
-  jr as Collapse,
+  Xr as Collapse,
   d as ColorPicker,
-  ie as ColorSelect,
-  g as ConfigProvider,
-  ae as DSRoot,
-  me as DSRootContextProvider,
-  S as DatePicker,
-  $o as DefaultUpload,
+  Te as ColorSelect,
+  S as ConfigProvider,
+  Yo as DROPDOWN_COLLISION_AVOIDANCE,
+  se as DSRoot,
+  le as DSRootContextProvider,
+  g as DatePicker,
+  er as DefaultUpload,
   h as Descriptions,
   A as Divider,
-  le as DragDrop,
-  ne as DragDropRoot,
+  ie as DragDrop,
+  Ce as DragDropRoot,
   E as Drawer,
-  k as Dropdown,
-  bo as DropdownMenu,
-  kr as Empty,
-  Pr as EmptyIcon,
+  P as Dropdown,
+  Ro as DropdownMenu,
+  Rr as Empty,
+  Lr as EmptyIcon,
   yr as Field,
-  P as Flex,
-  R as FloatButton,
+  k as Flex,
+  D as FloatButton,
   br as Form,
-  b as Grid,
+  R as Grid,
   mo as IconButton,
-  Jr as Input,
-  D as InputNumber,
-  Zr as InternalBadge,
-  y as Layout,
-  B as List,
-  L as Mentions,
-  v as Menu,
+  Zr as Input,
+  L as InputNumber,
+  re as InternalBadge,
+  I as Layout,
+  b as List,
+  O as Mentions,
+  y as Menu,
   ao as Modal,
-  ce as Nav,
-  I as Pagination,
-  M as Popconfirm,
-  mr as Popover,
-  _r as PopupPanel,
-  F as Progress,
-  N as QRCode,
-  oe as Radio,
-  U as Rate,
-  w as Result,
-  W as Row,
-  at as SEQUENTIAL_PALETTES,
-  pt as SEQUENTIAL_PALETTE_NAMES,
-  ar as ScrollArea,
+  de as Nav,
+  Zo as POPUP_COLLISION_AVOIDANCE,
+  B as Pagination,
+  N as Popconfirm,
+  lr as Popover,
+  qr as PopupPanel,
+  v as Progress,
+  M as QRCode,
+  te as Radio,
+  _ as Rate,
+  U as Result,
+  F as Row,
+  st as SEQUENTIAL_PALETTES,
+  ft as SEQUENTIAL_PALETTE_NAMES,
+  sr as ScrollArea,
   io as Segmented,
   eo as Select,
-  _ as Skeleton,
-  fr as Slider,
-  O as Space,
-  Ar as Spin,
+  W as Skeleton,
+  xr as Slider,
+  w as Space,
+  kr as Spin,
   Ao as Split,
   Eo as Splitter,
-  Qr as Stack,
-  Vr as StackChild,
-  q as Statistic,
-  G as Steps,
+  zr as Stack,
+  Hr as StackChild,
+  V as Statistic,
+  q as Steps,
   fo as Switch,
   co as Table,
-  V as Tabs,
+  G as Tabs,
   uo as Tag,
-  So as ThemeProvider,
+  go as ThemeProvider,
   K as TimePicker,
   Q as Timeline,
-  Ir as Toast,
-  nr as Tooltip,
-  Lr as Tour,
+  Mr as Toast,
+  Cr as Tooltip,
+  Nr as Tour,
   H as Transfer,
-  Yo as Transition,
-  Sr as Tree,
+  or as Transition,
+  Er as Tree,
   j as TreeSelect,
-  Po as Truncate,
+  ko as Truncate,
   z as Typography,
-  or as Upload,
+  tr as Upload,
   wr as VerticalCollapsiblePanel,
   J as Watermark,
   Qo as WithAntdTokens,
-  Wo as WithRenderProp,
-  _e as antdColorTokens,
-  Ve as categoricalChartColorKeys,
-  Ke as categoricalChartColorTokens,
-  Qe as categoricalChartsColors,
+  Fo as WithRenderProp,
+  qe as antdColorTokens,
+  He as categoricalChartColorKeys,
+  je as categoricalChartColorTokens,
+  ze as categoricalChartsColors,
   jo as changeThemeWithoutTransition,
-  He as chartColorTokens,
-  yo as clsx,
-  Bo as cn,
+  Je as chartColorTokens,
+  Io as clsx,
+  bo as cn,
   e as componentMetadata,
-  Lo as cx,
-  Oe as darkTheme,
-  mt as getAllCategoricalChartColors,
-  st as getAllSequentialChartColors,
-  ft as getCategoricalChartColors,
-  xt as getColorsByTheme,
+  Oo as cx,
+  Ge as darkTheme,
+  lt as getAllCategoricalChartColors,
+  nt as getAllSequentialChartColors,
+  xt as getCategoricalChartColors,
+  ct as getColorsByTheme,
   t as getComponentsByCategory,
-  lt as getSequentialChartColors,
-  it as getTokensByTheme,
-  ur as getUniqueKeysFromOriginals,
-  Fo as isTracebackError,
-  Uo as isValidHexColor,
-  qe as lightTheme,
+  it as getSequentialChartColors,
+  Tt as getTokensByTheme,
+  gr as getUniqueKeysFromOriginals,
+  vo as isTracebackError,
+  _o as isValidHexColor,
+  Ke as lightTheme,
   X as message,
   Jo as moveTypingCursorToEnd,
   Y as notification,
-  Oo as parseAntdPlacement,
-  dr as processTreeData,
-  je as rawChartColorTokens,
-  Io as reactNodeToString,
-  Ct as resolveColorTokens,
-  Ye as tab10,
-  Ze as tab20,
-  $e as tab20b,
-  ot as tab20c,
+  wo as parseAntdPlacement,
+  hr as processTreeData,
+  Xe as rawChartColorTokens,
+  Bo as reactNodeToString,
+  ut as resolveColorTokens,
+  ot as tab10,
+  rt as tab20,
+  et as tab20b,
+  tt as tab20c,
   Z as theme,
-  Fr as toast,
-  Nr as toastManager,
+  Ur as toast,
+  Fr as toastManager,
   $ as unstableSetRender,
   ye as useAnimationsFinished,
-  qo as useAntdCssVarClassname,
+  Vo as useAntdCssVarClassname,
   be as useApp,
-  Ae as useBreakpoint,
+  ke as useBreakpoint,
   we as useCSSVariables,
-  Ne as useCharts,
-  Go as useCls,
-  Me as useControlledState,
-  se as useDS,
+  Fe as useCharts,
+  qo as useCls,
+  _e as useControlledState,
+  ne as useDS,
   Be as useEnhancedEffect,
-  Le as useEventCallback,
-  ge as useForm,
-  Vo as useGetPrefixCls,
+  Ne as useEventCallback,
+  Ae as useForm,
+  Go as useGetPrefixCls,
   ve as useLatestRef,
-  Ee as useMessage,
-  ke as useModal,
-  Pe as useToken,
-  cr as useUniqueKeysTree,
-  er as useUploadItemRender,
-  Se as useWatch,
+  De as useMessage,
+  Re as useModal,
+  Le as useToken,
+  dr as useUniqueKeysTree,
+  pr as useUploadItemRender,
+  Ee as useWatch,
   oo as version
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bioturing/components",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "type": "module",
   "module": "./dist/index.js",
   "main": "./dist/index.js",