@refineui/react 0.0.6 → 0.0.8

package/dist/index.cjs

@@ -90,7 +90,6 @@ __export(index_exports, {
   Chip: () => Chip,
   Collapsible: () => Collapsible,
   CollapsibleContent: () => CollapsibleContent,
-  CollapsibleRoot: () => CollapsibleRoot,
   CollapsibleTrigger: () => CollapsibleTrigger,
   Command: () => Command,
   CommandDialog: () => CommandDialog,
@@ -106,9 +105,8 @@ __export(index_exports, {
   ContextMenu: () => ContextMenu,
   ContextMenuContent: () => ContextMenuContent,
   ContextMenuItem: () => ContextMenuItem,
+  ContextMenuLabel: () => ContextMenuLabel,
   ContextMenuPortal: () => ContextMenuPortal,
-  ContextMenuRoot: () => ContextMenuRoot,
-  ContextMenuSection: () => ContextMenuSection,
   ContextMenuSeparator: () => ContextMenuSeparator,
   ContextMenuSub: () => ContextMenuSub,
   ContextMenuSubContent: () => ContextMenuSubContent,
@@ -124,7 +122,6 @@ __export(index_exports, {
   Divider: () => Divider,
   Drawer: () => Drawer,
   DrawerBody: () => DrawerBody,
-  DrawerClose: () => DrawerClose,
   DrawerContent: () => DrawerContent,
   DrawerDescription: () => DrawerDescription,
   DrawerFooter: () => DrawerFooter,
@@ -176,9 +173,9 @@ __export(index_exports, {
   Menu: () => Menu,
   MenuDivider: () => MenuDivider,
   MenuItem: () => MenuItem,
+  MenuLabel: () => MenuLabel,
   MenuList: () => MenuList,
   MenuPopover: () => MenuPopover,
-  MenuSection: () => MenuSection,
   MenuSub: () => MenuSub,
   MenuSubContent: () => MenuSubContent,
   MenuSubTrigger: () => MenuSubTrigger,
@@ -235,7 +232,6 @@ __export(index_exports, {
   SelectPortal: () => SelectPortal,
   SelectScrollDownButton: () => SelectScrollDownButton,
   SelectScrollUpButton: () => SelectScrollUpButton,
-  SelectSection: () => SelectSection,
   SelectSeparator: () => SelectSeparator,
   SelectTrigger: () => SelectTrigger,
   SelectValue: () => SelectValue,
@@ -431,7 +427,7 @@ var componentColorTokens = {
       border: semanticToken("borderDefault")
     },
     menu: {
-      background: semanticToken("backgroundPrimary"),
+      background: semanticToken("surfaceFrosted"),
       border: semanticToken("borderDefault"),
       title: semanticToken("foregroundPrimary"),
       itemText: semanticToken("foregroundPrimary"),
@@ -445,6 +441,10 @@ var componentColorTokens = {
     placeholder: semanticToken("foregroundPlaceholder"),
     background: semanticToken("backgroundPrimary"),
     disabledBackground: semanticToken("backgroundSurfaceDisabled"),
+    menu: {
+      background: semanticToken("surfaceFrosted"),
+      border: semanticToken("borderDefault")
+    },
     border: {
       default: semanticToken("borderDefault"),
       disabled: semanticToken("borderDisabled"),
@@ -836,15 +836,15 @@ var componentColorTokens = {
   },
   menu: {
     panel: {
-      /** Matches Menu.style panel classes */
-      background: semanticToken("backgroundPrimary"),
+      /** Frosted glass — `surfaceFrosted` fill + `surfaceFrost` blur in refineui.css */
+      background: semanticToken("surfaceFrosted"),
       border: semanticToken("borderDefault")
     },
     popover: {
       background: "transparent"
     },
     list: {
-      background: semanticToken("backgroundPrimary"),
+      background: semanticToken("surfaceFrosted"),
       border: semanticToken("borderDefault")
     },
     section: semanticToken("foregroundPrimary"),
@@ -1085,7 +1085,7 @@ var componentTypographyTokens = {
     link: role("bodyMd"),
     copyright: role("bodyMd")
   },
-  /** App sidebar — group labels match menu sections; links match menu rows. */
+  /** App sidebar — group labels share `captionLg` + tight py with Menu/Dropdown/Select/Command. */
   sidebar: {
     brand: role("bodyMd"),
     groupLabel: role("captionLg"),
@@ -1280,7 +1280,10 @@ var componentTokens = {
       foundation: import_tokens.semanticElevations.surface
     },
     motion: {
-      /** Indicator slide after first layout */
+      /**
+       * Indicator slide after first layout.
+       * CSS applies transform=`medium` / width=`slow` so edges arrive apart.
+       */
       indicator: motion.indicator,
       /** Item label color fade */
       itemColor: motion.fast
@@ -1896,6 +1899,7 @@ function InputOTP({
 function InputOTPSlot({
   index,
   className,
+  style,
   onChange,
   onKeyDown,
   onPaste,
@@ -1982,6 +1986,10 @@ function InputOTPSlot({
       value: char,
       "aria-label": `Digit ${index + 1} of ${maxLength}`,
       className: (0, import_clsx5.clsx)(inputOtpStyles.slot, inputOtpSlotSizeClass[size], className),
+      style: {
+        ...style,
+        ["--refineui-input-otp-slot-index"]: index
+      },
       onChange: onSlotChange,
       onKeyDown: onSlotKeyDown,
       onPaste: onSlotPaste,
@@ -3208,8 +3216,9 @@ var selectStyles = {
   iconWrap: "inline-flex size-refineui-icon-xsmall shrink-0 items-center justify-center",
   chevron: "shrink-0 transition-transform duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]",
   chevronOpen: "rotate-180",
-  positioner: "z-refineui-popup flex flex-col overflow-hidden",
-  contentShell: "box-border flex w-full min-h-0 flex-col overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2 outline-none",
+  /* No overflow-hidden — it isolates descendants and kills panel `backdrop-filter`. */
+  positioner: "z-refineui-popup flex flex-col",
+  contentShell: "box-border flex w-full min-h-0 flex-col overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default p-refineui-size-xx-small shadow-refineui-2 outline-none",
   contentPopper: "h-auto max-h-[var(--refineui-select-content-available-height,100dvh)]",
   contentItemAligned: "max-h-full",
   viewportPopper: "relative flex max-h-full min-h-0 min-w-full w-full flex-col",
@@ -3219,7 +3228,7 @@ var selectStyles = {
   group: "flex flex-col gap-px",
   label: (0, import_clsx27.clsx)(
     componentTextClass(componentTypographyTokens.select.label),
-    "px-refineui-size-x-small py-refineui-size-x-small text-refineui-alias-foreground-tertiary"
+    "px-refineui-size-x-small py-refineui-size-xxx-small text-refineui-alias-foreground-tertiary"
   ),
   separator: "my-refineui-size-x-small h-px bg-refineui-alias-border-default",
   item: (0, import_clsx27.clsx)(
@@ -3874,9 +3883,6 @@ function SelectGroup({ children, className, ...props }) {
 function SelectLabel({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx28.clsx)(selectStyles.label, className), ...props, children });
 }
-function SelectSection({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx28.clsx)(selectStyles.label, className), ...props, children });
-}
 function SelectSeparator({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "separator", className: (0, import_clsx28.clsx)(selectStyles.separator, className), ...props });
 }
@@ -4501,7 +4507,7 @@ var COMMAND_LIST_MAX_HEIGHT = `min(60vh, ${import_tokens11.foundationSizes.found
 var commandStyles = {
   root: (0, import_clsx33.clsx)(
     "flex w-full flex-col overflow-hidden outline-none",
-    "rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default",
+    "rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default",
     "bg-refineui-alias-background-primary text-refineui-alias-foreground-primary",
     "shadow-refineui-2"
   ),
@@ -4529,7 +4535,7 @@ var commandStyles = {
   group: "flex flex-col gap-refineui-size-xxx-small overflow-hidden",
   groupHeading: (0, import_clsx33.clsx)(
     componentTextClass(componentTypographyTokens.command.group),
-    "flex w-full items-center overflow-hidden px-refineui-size-x-small pb-refineui-size-xxx-small pt-refineui-size-x-small text-refineui-alias-foreground-tertiary"
+    "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-xxx-small text-refineui-alias-foreground-tertiary"
   ),
   separatorWrap: "flex w-full items-center px-refineui-size-x-small py-refineui-size-x-small",
   separatorLine: "h-px w-full shrink-0 bg-refineui-alias-border-default",
@@ -7210,6 +7216,7 @@ var import_react28 = require("react");
 var import_tokens17 = require("@refineui/tokens");
 
 // src/components/Breadcrumb/style.ts
+var ellipsisChip = "box-border inline-flex min-h-refineui-button-min-height-sm min-w-refineui-button-min-height-sm shrink-0 items-center justify-center rounded-refineui-large p-refineui-size-xx-small leading-none";
 var breadcrumbStyles = {
   textRow: `${componentTextClass(componentTypographyTokens.breadcrumb.row)} whitespace-nowrap`,
   root: "py-refineui-size-x-small",
@@ -7219,8 +7226,9 @@ var breadcrumbStyles = {
   page: "inline-flex items-center px-refineui-size-medium py-refineui-size-x-small font-medium text-refineui-alias-foreground-primary",
   separator: "inline-flex shrink-0 items-center",
   separatorText: "inline-flex items-center text-refineui-alias-foreground-tertiary select-none",
-  ellipsis: "box-border inline-flex min-h-refineui-button-min-height-sm shrink-0 items-center justify-center rounded-refineui-large px-refineui-size-medium py-refineui-size-x-small text-refineui-alias-foreground-tertiary leading-none",
-  ellipsisTrigger: "box-border inline-flex min-h-refineui-button-min-height-sm shrink-0 cursor-pointer items-center justify-center rounded-refineui-large border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small text-refineui-alias-foreground-tertiary leading-none outline-none transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)]"
+  ellipsis: `${ellipsisChip} text-refineui-alias-foreground-tertiary`,
+  /** Color only — size/layout come from Button `layout="icon" size="sm"`. */
+  ellipsisTrigger: "text-refineui-alias-foreground-tertiary"
 };
 
 // src/components/Breadcrumb/Breadcrumb.tsx
@@ -7293,52 +7301,43 @@ function BreadcrumbSeparator({ children, className, ...props }) {
     }
   );
 }
+function EllipsisIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    WebIcon,
+    {
+      name: "more-horizontal",
+      size: import_tokens17.iconSizes.small,
+      color: "currentColor",
+      fallback: "\u22EF",
+      className: "items-center justify-center"
+    }
+  );
+}
 function BreadcrumbEllipsis({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "span",
     {
       "data-refineui": "breadcrumb-ellipsis",
-      className: (0, import_clsx55.clsx)(
-        breadcrumbStyles.ellipsis,
-        className
-      ),
+      className: (0, import_clsx55.clsx)(breadcrumbStyles.ellipsis, className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        WebIcon,
-        {
-          name: "more-horizontal",
-          size: import_tokens17.iconSizes.small,
-          color: "currentColor",
-          fallback: "\u22EF",
-          className: "items-center justify-center"
-        }
-      )
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EllipsisIcon, {})
     }
   );
 }
 var BreadcrumbEllipsisTrigger = (0, import_react28.forwardRef)(
   function BreadcrumbEllipsisTrigger2({ className, type = "button", children, ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      "button",
+      Button,
       {
         ref,
         type,
+        variant: "ghost",
+        size: "sm",
+        layout: "icon",
         "data-refineui": "breadcrumb-ellipsis",
-        className: (0, import_clsx55.clsx)(
-          breadcrumbStyles.ellipsisTrigger,
-          className
-        ),
+        className: (0, import_clsx55.clsx)(breadcrumbStyles.ellipsisTrigger, className),
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          WebIcon,
-          {
-            name: "more-horizontal",
-            size: import_tokens17.iconSizes.small,
-            color: "currentColor",
-            fallback: "\u22EF",
-            className: "items-center justify-center"
-          }
-        )
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EllipsisIcon, {})
       }
     );
   }
@@ -8650,7 +8649,6 @@ function DrawerContent({
 function DrawerHeader({
   className,
   children,
-  showClose = true,
   actions,
   ...props
 }) {
@@ -8666,8 +8664,7 @@ function DrawerHeader({
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: drawerStyles.headerMain, children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: drawerStyles.headerMainText, children }),
-        hasActions ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: drawerStyles.headerActions, children: actions }) : null,
-        showClose ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DrawerClose, {}) : null
+        hasActions ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: drawerStyles.headerActions, children: actions }) : null
       ] })
     }
   );
@@ -8746,36 +8743,6 @@ function DrawerFooter({ className, ...props }) {
     }
   );
 }
-function DrawerClose({
-  children,
-  onClick,
-  className,
-  type = "button",
-  variant,
-  size,
-  layout,
-  ...props
-}) {
-  const { setOpen } = useDrawerContext("DrawerClose");
-  const iconOnly = children == null;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    Button,
-    {
-      ...props,
-      type,
-      variant: variant ?? (iconOnly ? "ghost" : "outline"),
-      size: size ?? "md",
-      layout: layout ?? (iconOnly ? "icon" : "label"),
-      "aria-label": iconOnly ? "Close" : void 0,
-      className,
-      onClick: (e) => {
-        onClick?.(e);
-        if (!e.defaultPrevented) setOpen(false);
-      },
-      children: iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(WebIcon, { name: "dismiss", size: import_tokens19.iconSizes.xlarge, color: "currentColor", iconStyle: "regular", "aria-hidden": true }) : children
-    }
-  );
-}
 
 // src/components/Dropdown/Dropdown.tsx
 var import_clsx70 = require("clsx");
@@ -8786,13 +8753,17 @@ var import_color8 = require("@refineui/utilities/color");
 
 // src/components/Dropdown/style.ts
 var import_clsx69 = require("clsx");
+var dropdownPanelChrome = "box-border flex w-refineui-dropdown-menu-width min-w-refineui-dropdown-menu-width flex-col overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default shadow-refineui-2 outline-none";
 var dropdownStyles = {
-  menuShell: "box-border flex w-refineui-dropdown-menu-width min-w-refineui-dropdown-menu-width max-w-[min(100vw-16px,calc(100vw-2rem))] flex-col overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary shadow-refineui-2 outline-none",
-  submenuShell: "box-border flex w-refineui-dropdown-menu-width min-w-refineui-dropdown-menu-width flex-col overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary shadow-refineui-2 outline-none",
+  menuShell: (0, import_clsx69.clsx)(
+    dropdownPanelChrome,
+    "max-w-[min(100vw-16px,calc(100vw-2rem))]"
+  ),
+  submenuShell: dropdownPanelChrome,
   menuViewport: "box-border flex flex-col gap-px p-refineui-size-xx-small",
   label: (0, import_clsx69.clsx)(
     componentTextClass(componentTypographyTokens.dropdown.label),
-    "shrink-0 px-refineui-size-x-small py-refineui-size-x-small text-refineui-alias-foreground-tertiary"
+    "shrink-0 px-refineui-size-x-small py-refineui-size-xxx-small text-refineui-alias-foreground-tertiary"
   ),
   item: (0, import_clsx69.clsx)(
     componentTextClass(componentTypographyTokens.dropdown.item),
@@ -9662,16 +9633,21 @@ var import_react37 = require("@refineui/utilities/react");
 
 // src/components/Menu/style.ts
 var import_clsx75 = require("clsx");
+var menuPanelChrome = "box-border flex flex-col gap-px overflow-hidden rounded-refineui-xx-large border-refineui-hairline border-refineui-alias-border-default p-refineui-size-xx-small shadow-refineui-2";
 var menuStyles = {
-  /** Panel chrome — Web Kit Menu `633:4268` (fill matches Dropdown elevated panel for contrast on docs) */
-  panel: "box-border flex w-refineui-menu-panel-width flex-col gap-px overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2",
+  /** Panel chrome — Web Kit Menu `633:4268` (fill/blur: `surfaceFrosted` + `surfaceFrost`) */
+  panel: (0, import_clsx75.clsx)(menuPanelChrome, "w-refineui-menu-panel-width"),
   root: "relative inline-flex items-center leading-none",
   triggerFallback: "cursor-pointer border-none bg-transparent p-0 font-inherit text-inherit",
   /** Portal shell — position/z-index from `MenuPopover` fixed style */
   popover: "z-refineui-messages",
-  list: "box-border flex w-full min-w-refineui-menu-panel-width flex-col gap-px overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2 outline-none",
-  subPanel: "box-border flex w-refineui-menu-panel-width min-w-refineui-menu-panel-width flex-col gap-px overflow-hidden rounded-refineui-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-xx-small shadow-refineui-2 outline-none",
-  section: "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-x-small",
+  list: (0, import_clsx75.clsx)(menuPanelChrome, "w-full min-w-refineui-menu-panel-width outline-none"),
+  subPanel: (0, import_clsx75.clsx)(
+    menuPanelChrome,
+    "w-refineui-menu-panel-width min-w-refineui-menu-panel-width outline-none"
+  ),
+  /** Vertical density matches Sidebar `groupLabel` (`py-xxx-small`). */
+  section: "flex w-full items-center overflow-hidden px-refineui-size-x-small py-refineui-size-xxx-small",
   sectionText: (0, import_clsx75.clsx)(
     componentTextClass(componentTypographyTokens.menu.section),
     "text-refineui-alias-foreground-tertiary"
@@ -9854,11 +9830,11 @@ function MenuList({ className, ...props }) {
     }
   );
 }
-function MenuSection({ className, children, ...props }) {
+function MenuLabel({ className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
-      "data-refineui": "menu-section",
+      "data-refineui": "menu-label",
       className: (0, import_clsx76.clsx)(menuStyles.section, className),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: menuStyles.sectionText, children })
@@ -14813,7 +14789,7 @@ var CHART_VIEWBOX_HEIGHT = 320;
 var CHART_PLOT_PADDING_TOP = parseFloat(import_tokens34.spacings.sizeMedium);
 var CHART_PLOT_PADDING_BOTTOM = parseFloat(import_tokens34.spacings.sizeXXSmall);
 var CHART_PLOT_PADDING_X = parseFloat(import_tokens34.spacings.sizeMedium);
-var CHART_BAR_RADIUS = parseFloat(import_tokens34.borderRadii.roundedMedium);
+var CHART_BAR_RADIUS = parseFloat(import_tokens34.borderRadii.roundedXLarge);
 var CHART_BAR_BAND_FILL = 0.5;
 var CHART_POINT_RADIUS = parseFloat(import_tokens34.foundationSizes.foundationSize40);
 var CHART_POINT_STROKE = parseFloat(import_tokens34.foundationSizes.foundationSize20);
@@ -15462,40 +15438,63 @@ function ChartLegendItem({
 var import_react57 = require("@refineui/utilities/react");
 
 // src/components/Collapsible/Collapsible.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_clsx108 = require("clsx");
+var import_react60 = require("@refineui/utilities/react");
+
+// src/components/Collapsible/context.ts
+var import_react58 = require("react");
 var import_tokens36 = require("@refineui/tokens");
-var import_react59 = require("@refineui/utilities/react");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_animation9 = require("@refineui/utilities/animation");
 var CollapsibleContext = (0, import_react58.createContext)(null);
-function useCollapsible() {
+function useCollapsibleContext(part) {
   const value = (0, import_react58.useContext)(CollapsibleContext);
-  if (!value) throw new Error("Collapsible parts must be used inside Collapsible.Root");
+  if (!value) throw new Error(`${part} must be used within Collapsible`);
   return value;
 }
 function usePrefersReducedMotion3() {
   const [reduce, setReduce] = (0, import_react58.useState)(false);
   (0, import_react58.useEffect)(() => {
-    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const sync = () => setReduce(query.matches);
+    const mql = window.matchMedia((0, import_animation9.getReducedMotionQuery)().replace("@media ", ""));
+    const sync = () => setReduce(mql.matches);
     sync();
-    query.addEventListener("change", sync);
-    return () => query.removeEventListener("change", sync);
+    mql.addEventListener("change", sync);
+    return () => mql.removeEventListener("change", sync);
   }, []);
   return reduce;
 }
-var CollapsibleRoot = (0, import_react58.forwardRef)(function CollapsibleRoot2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
-  const [uncontrolled, setUncontrolled] = (0, import_react58.useState)(defaultOpen);
+var PANEL_HEIGHT_MS2 = Number.parseFloat(import_tokens36.semanticInteraction.duration.panel) / 1e3;
+var PANEL_CONTENT_MS2 = Number.parseFloat(import_tokens36.semanticInteraction.duration.normal) / 1e3;
+var PANEL_HEIGHT_EASE2 = import_tokens36.semanticInteraction.easing.panel;
+var PANEL_CONTENT_EASE2 = import_tokens36.semanticInteraction.easing.content;
+
+// src/components/Collapsible/style.ts
+var collapsibleStyles = {
+  panelOuter: "min-h-0 overflow-hidden"
+};
+
+// src/components/Collapsible/Collapsible.tsx
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var Collapsible = (0, import_react59.forwardRef)(function Collapsible2({ open: openProp, defaultOpen = false, onOpenChange, asChild = false, className, children, ...props }, ref) {
+  const [uncontrolled, setUncontrolled] = (0, import_react59.useState)(defaultOpen);
   const open = openProp ?? uncontrolled;
-  const openRef = (0, import_react58.useRef)(open);
-  openRef.current = open;
-  const reactId = (0, import_react58.useId)();
+  const reactId = (0, import_react59.useId)();
   const reduceMotion = usePrefersReducedMotion3();
-  const toggle = () => {
-    const next = !openRef.current;
+  const toggle = (0, import_react59.useCallback)(() => {
+    const next = !(openProp ?? uncontrolled);
     if (openProp === void 0) setUncontrolled(next);
     onOpenChange?.(next);
-  };
+  }, [onOpenChange, openProp, uncontrolled]);
+  const contextValue = (0, import_react59.useMemo)(
+    () => ({
+      open,
+      toggle,
+      contentId: `${reactId}-content`,
+      triggerId: `${reactId}-trigger`,
+      reduceMotion
+    }),
+    [open, reactId, reduceMotion, toggle]
+  );
   const shared = {
     ...props,
     ref,
@@ -15503,98 +15502,98 @@ var CollapsibleRoot = (0, import_react58.forwardRef)(function CollapsibleRoot2({
     "data-refineui": "collapsible",
     className
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-    CollapsibleContext.Provider,
-    {
-      value: {
-        open,
-        toggle,
-        contentId: `${reactId}-content`,
-        triggerId: `${reactId}-trigger`,
-        reduceMotion
-      },
-      children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react59.Slot, { ...shared, children }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ...shared, children })
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react60.Slot, { ...shared, children }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ...shared, children }) });
 });
-var CollapsibleTrigger = (0, import_react58.forwardRef)(function CollapsibleTrigger2({ asChild = false, onClick, className, children, ...props }, ref) {
-  const { open, toggle, contentId, triggerId } = useCollapsible();
-  const shared = {
-    ...props,
-    ref,
-    id: triggerId,
-    "aria-expanded": open,
-    "aria-controls": contentId,
-    "data-state": open ? "open" : "closed",
-    "data-refineui": "collapsible-trigger",
+var CollapsibleTrigger = (0, import_react59.forwardRef)(
+  function CollapsibleTrigger2({
+    asChild = false,
+    onClick,
     className,
-    onClick: (event) => {
-      onClick?.(event);
-      if (!event.defaultPrevented) toggle();
-    }
-  };
-  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react59.Slot, { ...shared, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("button", { ...shared, type: "button", children });
-});
-var CollapsibleContent = (0, import_react58.forwardRef)(function CollapsibleContent2({ className, children, style, ...props }, ref) {
-  const { open, contentId, triggerId, reduceMotion } = useCollapsible();
-  const innerRef = (0, import_react58.useRef)(null);
-  const [size, setSize] = (0, import_react58.useState)({ height: 0, width: 0 });
-  (0, import_react58.useLayoutEffect)(() => {
-    const node = innerRef.current;
-    if (!node) return;
-    const measure = () => {
-      setSize({ height: node.scrollHeight, width: node.scrollWidth });
-    };
-    measure();
-    const observer = new ResizeObserver(measure);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [children, open]);
-  const clipStyle = {
-    ["--refineui-collapsible-content-height"]: `${size.height}px`,
-    ["--refineui-collapsible-content-width"]: `${size.width}px`,
-    height: open ? size.height : 0,
-    overflow: "hidden",
-    transition: reduceMotion ? void 0 : `height ${import_tokens36.semanticInteraction.duration.panel} ${import_tokens36.semanticInteraction.easing.panel}`
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-    "div",
-    {
+    children,
+    variant = "ghost",
+    size,
+    layout,
+    fullWidth,
+    type = "button",
+    ...props
+  }, ref) {
+    const { open, toggle, contentId, triggerId } = useCollapsibleContext("CollapsibleTrigger");
+    const shared = {
       ...props,
       ref,
-      id: contentId,
-      role: "region",
-      "aria-labelledby": triggerId,
-      "aria-hidden": !open,
+      id: triggerId,
+      "aria-expanded": open,
+      "aria-controls": contentId,
       "data-state": open ? "open" : "closed",
-      "data-refineui": "collapsible-content",
-      style: clipStyle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ref: innerRef, className: (0, import_clsx108.clsx)(className), style, children })
-    }
-  );
-});
-var Collapsible = Object.assign(CollapsibleRoot, {
-  Root: CollapsibleRoot,
-  Trigger: CollapsibleTrigger,
-  Content: CollapsibleContent
-});
+      className,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggle();
+      }
+    };
+    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react60.Slot, { ...shared, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      Button,
+      {
+        ...shared,
+        type,
+        variant,
+        size,
+        layout,
+        fullWidth,
+        children
+      }
+    );
+  }
+);
+var CollapsibleContent = (0, import_react59.forwardRef)(
+  function CollapsibleContent2({ className, children, style, ...props }, ref) {
+    const { open, contentId, triggerId, reduceMotion } = useCollapsibleContext("CollapsibleContent");
+    const gridStyle = {
+      display: "grid",
+      gridTemplateRows: open ? "1fr" : "0fr",
+      transition: reduceMotion ? void 0 : `grid-template-rows ${PANEL_HEIGHT_MS2}s ${PANEL_HEIGHT_EASE2}`
+    };
+    const innerMotionStyle = {
+      opacity: open ? 1 : 0,
+      transform: open ? "translate3d(0, 0, 0)" : "translate3d(0, calc(-1 * var(--refineui-spacing-size-x-small)), 0)",
+      transition: reduceMotion ? void 0 : `opacity ${PANEL_CONTENT_MS2}s ${PANEL_CONTENT_EASE2}, transform ${PANEL_CONTENT_MS2}s ${PANEL_CONTENT_EASE2}`,
+      pointerEvents: open ? void 0 : "none",
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      "div",
+      {
+        ...props,
+        ref,
+        id: contentId,
+        role: "region",
+        "aria-labelledby": triggerId,
+        "aria-hidden": !open,
+        "data-state": open ? "open" : "closed",
+        "data-refineui": "collapsible-content",
+        style: gridStyle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: collapsibleStyles.panelOuter, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_clsx108.clsx)(className), style: innerMotionStyle, children }) })
+      }
+    );
+  }
+);
 
 // src/components/ContextMenu/ContextMenu.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_react_dom7 = require("react-dom");
 var import_clsx109 = require("clsx");
 var import_tokens37 = require("@refineui/tokens");
-var import_animation9 = require("@refineui/utilities/animation");
-var import_react61 = require("@refineui/utilities/react");
+var import_animation10 = require("@refineui/utilities/animation");
+var import_react62 = require("@refineui/utilities/react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var MENU_ATTR = "data-refineui-context-menu";
-var CLOSE_MS = (0, import_animation9.motionMsToNumber)(import_tokens37.semanticInteraction.duration.normal);
-var MenuContext2 = (0, import_react60.createContext)(null);
-var SubContext = (0, import_react60.createContext)(null);
+var CLOSE_MS = (0, import_animation10.motionMsToNumber)(import_tokens37.semanticInteraction.duration.normal);
+var MenuContext2 = (0, import_react61.createContext)(null);
+var SubContext = (0, import_react61.createContext)(null);
 function useMenu() {
-  const value = (0, import_react60.useContext)(MenuContext2);
-  if (!value) throw new Error("Context menu parts must be used inside ContextMenu.Root");
+  const value = (0, import_react61.useContext)(MenuContext2);
+  if (!value) throw new Error("Context menu parts must be used within ContextMenu");
   return value;
 }
 function placeInView(element, x, y) {
@@ -15608,31 +15607,31 @@ function placeInView(element, x, y) {
   element.style.left = `${left}px`;
   element.style.top = `${top}px`;
 }
-function ContextMenuRoot({ modal = true, onOpenChange, children }) {
+function ContextMenu({ modal = true, onOpenChange, children }) {
   void modal;
-  const [open, setOpen] = (0, import_react60.useState)(false);
-  const [point, setPoint] = (0, import_react60.useState)({ x: 0, y: 0 });
-  const openRef = (0, import_react60.useRef)(false);
-  const onOpenChangeRef = (0, import_react60.useRef)(onOpenChange);
+  const [open, setOpen] = (0, import_react61.useState)(false);
+  const [point, setPoint] = (0, import_react61.useState)({ x: 0, y: 0 });
+  const openRef = (0, import_react61.useRef)(false);
+  const onOpenChangeRef = (0, import_react61.useRef)(onOpenChange);
   openRef.current = open;
   onOpenChangeRef.current = onOpenChange;
-  const close = (0, import_react60.useCallback)(() => {
+  const close = (0, import_react61.useCallback)(() => {
     if (!openRef.current) return;
     openRef.current = false;
     setOpen(false);
     onOpenChangeRef.current?.(false);
   }, []);
-  const openAt = (0, import_react60.useCallback)((x, y) => {
+  const openAt = (0, import_react61.useCallback)((x, y) => {
     setPoint({ x, y });
     const wasOpen = openRef.current;
     openRef.current = true;
     setOpen(true);
     if (!wasOpen) onOpenChangeRef.current?.(true);
   }, []);
-  const value = (0, import_react60.useMemo)(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
+  const value = (0, import_react61.useMemo)(() => ({ open, point, openAt, close }), [open, point, openAt, close]);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(MenuContext2.Provider, { value, children });
 }
-var ContextMenuTrigger = (0, import_react60.forwardRef)(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
+var ContextMenuTrigger = (0, import_react61.forwardRef)(function ContextMenuTrigger2({ asChild = false, onContextMenu, children, ...props }, ref) {
   const { openAt } = useMenu();
   const shared = {
     ...props,
@@ -15645,18 +15644,18 @@ var ContextMenuTrigger = (0, import_react60.forwardRef)(function ContextMenuTrig
       openAt(event.clientX, event.clientY);
     }
   };
-  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react61.Slot, { ...shared, children });
+  if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react62.Slot, { ...shared, children });
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { ...shared, className: (0, import_clsx109.clsx)(menuStyles.triggerFallback, props.className), children });
 });
 function ContextMenuPortal({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children });
 }
-var ContextMenuContent = (0, import_react60.forwardRef)(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
+var ContextMenuContent = (0, import_react61.forwardRef)(function ContextMenuContent2({ className, style, onPointerDown, children, ...props }, ref) {
   const { open, point, close } = useMenu();
-  const localRef = (0, import_react60.useRef)(null);
-  const [shouldRender, setShouldRender] = (0, import_react60.useState)(open);
-  const [isClosing, setIsClosing] = (0, import_react60.useState)(false);
-  (0, import_react60.useEffect)(() => {
+  const localRef = (0, import_react61.useRef)(null);
+  const [shouldRender, setShouldRender] = (0, import_react61.useState)(open);
+  const [isClosing, setIsClosing] = (0, import_react61.useState)(false);
+  (0, import_react61.useEffect)(() => {
     if (open) {
       setShouldRender(true);
       setIsClosing(false);
@@ -15670,11 +15669,11 @@ var ContextMenuContent = (0, import_react60.forwardRef)(function ContextMenuCont
     }, CLOSE_MS);
     return () => window.clearTimeout(timeout);
   }, [open, shouldRender]);
-  (0, import_react60.useLayoutEffect)(() => {
+  (0, import_react61.useLayoutEffect)(() => {
     if (!shouldRender || !localRef.current) return;
     placeInView(localRef.current, point.x, point.y);
   }, [shouldRender, point.x, point.y]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (!open) return;
     const onKey = (event) => {
       if (event.key === "Escape") close();
@@ -15737,7 +15736,7 @@ function runSelect(onSelect, close, disabled) {
   onSelect?.(selectEvent);
   if (!selectEvent.defaultPrevented) close();
 }
-var ContextMenuItem = (0, import_react60.forwardRef)(function ContextMenuItem2({ disabled = false, description, shortcut, startIcon, endIcon, state = "default", onSelect, className, onClick, onKeyDown, children, ...props }, ref) {
+var ContextMenuItem = (0, import_react61.forwardRef)(function ContextMenuItem2({ disabled = false, description, shortcut, startIcon, endIcon, state = "default", onSelect, className, onClick, onKeyDown, children, ...props }, ref) {
   const { close } = useMenu();
   const isDisabled = disabled || state === "disabled";
   const slotted = startIcon != null || description != null || shortcut != null || endIcon != null;
@@ -15795,7 +15794,7 @@ var ContextMenuItem = (0, import_react60.forwardRef)(function ContextMenuItem2({
     }
   );
 });
-var ContextMenuSeparator = (0, import_react60.forwardRef)(
+var ContextMenuSeparator = (0, import_react61.forwardRef)(
   function ContextMenuSeparator2({ className, ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "div",
@@ -15812,19 +15811,19 @@ var ContextMenuSeparator = (0, import_react60.forwardRef)(
     );
   }
 );
-function ContextMenuSection({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { "data-refineui": "menu-section", className: (0, import_clsx109.clsx)(menuStyles.section, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: menuStyles.sectionText, children }) });
+function ContextMenuLabel({ className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { "data-refineui": "menu-label", className: (0, import_clsx109.clsx)(menuStyles.section, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: menuStyles.sectionText, children }) });
 }
 function ContextMenuSub({ children }) {
-  const [open, setOpen] = (0, import_react60.useState)(false);
-  const triggerRef = (0, import_react60.useRef)(null);
-  const timer = (0, import_react60.useRef)(null);
+  const [open, setOpen] = (0, import_react61.useState)(false);
+  const triggerRef = (0, import_react61.useRef)(null);
+  const timer = (0, import_react61.useRef)(null);
   const clear = () => {
     if (timer.current != null) window.clearTimeout(timer.current);
     timer.current = null;
   };
-  (0, import_react60.useEffect)(() => clear, []);
-  const value = (0, import_react60.useMemo)(
+  (0, import_react61.useEffect)(() => clear, []);
+  const value = (0, import_react61.useMemo)(
     () => ({
       open,
       triggerRef,
@@ -15842,11 +15841,11 @@ function ContextMenuSub({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(SubContext.Provider, { value, children });
 }
 function useSub2() {
-  const value = (0, import_react60.useContext)(SubContext);
-  if (!value) throw new Error("ContextMenu.SubTrigger must be used inside ContextMenu.Sub");
+  const value = (0, import_react61.useContext)(SubContext);
+  if (!value) throw new Error("ContextMenuSubTrigger must be used within ContextMenuSub");
   return value;
 }
-var ContextMenuSubTrigger = (0, import_react60.forwardRef)(
+var ContextMenuSubTrigger = (0, import_react61.forwardRef)(
   function ContextMenuSubTrigger2({ asChild = false, description, startIcon, onMouseEnter, onMouseLeave, onClick, className, children, ...props }, ref) {
     const sub = useSub2();
     const shared = {
@@ -15882,7 +15881,7 @@ var ContextMenuSubTrigger = (0, import_react60.forwardRef)(
         if (!event.defaultPrevented) sub.show();
       }
     };
-    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react61.Slot, { ...shared, children });
+    if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react62.Slot, { ...shared, children });
     return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("button", { ...shared, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: menuStyles.row, children: [
       startIcon ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "span",
@@ -15907,12 +15906,12 @@ var ContextMenuSubTrigger = (0, import_react60.forwardRef)(
     ] }) });
   }
 );
-var ContextMenuSubContent = (0, import_react60.forwardRef)(
+var ContextMenuSubContent = (0, import_react61.forwardRef)(
   function ContextMenuSubContent2({ className, style, onPointerDown, onMouseEnter, onMouseLeave, ...props }, ref) {
     const sub = useSub2();
-    const localRef = (0, import_react60.useRef)(null);
-    const [side, setSide] = (0, import_react60.useState)("right");
-    (0, import_react60.useLayoutEffect)(() => {
+    const localRef = (0, import_react61.useRef)(null);
+    const [side, setSide] = (0, import_react61.useState)("right");
+    (0, import_react61.useLayoutEffect)(() => {
       const trigger = sub.triggerRef.current;
       const element = localRef.current;
       if (!sub.open || !trigger || !element) return;
@@ -15966,18 +15965,6 @@ var ContextMenuSubContent = (0, import_react60.forwardRef)(
     );
   }
 );
-var ContextMenu = Object.assign(ContextMenuRoot, {
-  Root: ContextMenuRoot,
-  Trigger: ContextMenuTrigger,
-  Portal: ContextMenuPortal,
-  Content: ContextMenuContent,
-  Item: ContextMenuItem,
-  Section: ContextMenuSection,
-  Separator: ContextMenuSeparator,
-  Sub: ContextMenuSub,
-  SubTrigger: ContextMenuSubTrigger,
-  SubContent: ContextMenuSubContent
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -16050,7 +16037,6 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   Chip,
   Collapsible,
   CollapsibleContent,
-  CollapsibleRoot,
   CollapsibleTrigger,
   Command,
   CommandDialog,
@@ -16066,9 +16052,8 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuLabel,
   ContextMenuPortal,
-  ContextMenuRoot,
-  ContextMenuSection,
   ContextMenuSeparator,
   ContextMenuSub,
   ContextMenuSubContent,
@@ -16084,7 +16069,6 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   Divider,
   Drawer,
   DrawerBody,
-  DrawerClose,
   DrawerContent,
   DrawerDescription,
   DrawerFooter,
@@ -16136,9 +16120,9 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   Menu,
   MenuDivider,
   MenuItem,
+  MenuLabel,
   MenuList,
   MenuPopover,
-  MenuSection,
   MenuSub,
   MenuSubContent,
   MenuSubTrigger,
@@ -16195,7 +16179,6 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   SelectPortal,
   SelectScrollDownButton,
   SelectScrollUpButton,
-  SelectSection,
   SelectSeparator,
   SelectTrigger,
   SelectValue,