@refineui/react 0.0.7 → 0.0.9

package/dist/index.js

@@ -2937,13 +2937,26 @@ var selectStyles = {
     "border-refineui-hairline border-refineui-alias-border-default",
     "bg-refineui-alias-background-primary px-refineui-size-medium py-refineui-size-x-small",
     "text-refineui-alias-foreground-primary outline-none",
-    "transition-[color,background-color,border-color] duration-[var(--refineui-motion-duration-fast)]"
+    "transition-[color,background-color,border-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+  ),
+  /** Ghost plate — same gap/radius as filled, no field border (Button ghost-like). */
+  triggerGhost: clsx27(
+    "box-border inline-flex cursor-pointer items-center justify-between",
+    "gap-refineui-size-x-small rounded-refineui-large",
+    "border-refineui-none border-transparent bg-transparent",
+    "px-refineui-size-x-small py-refineui-size-xx-small",
+    "text-refineui-alias-foreground-primary outline-none",
+    "transition-[color,background-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
   ),
   /** Flush shell — consumer / parent owns padding, radius, surface. */
-  triggerPlain: "box-border inline-flex cursor-pointer items-center outline-none",
+  triggerPlain: clsx27(
+    "box-border inline-flex cursor-pointer items-center outline-none",
+    "transition-[transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+  ),
   triggerInner: "min-w-0 flex-1 overflow-hidden text-start",
   triggerOpen: "text-refineui-alias-foreground-primary",
   triggerDisabled: "cursor-not-allowed border-refineui-alias-border-disabled bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled",
+  triggerGhostDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   triggerPlainDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   value: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-start",
   iconWrap: "inline-flex size-refineui-icon-xsmall shrink-0 items-center justify-center",
@@ -3224,9 +3237,12 @@ function Select({
 }
 var SelectTrigger = forwardRef6(function SelectTrigger2(props, forwardedRef) {
   const { className, children, style, appearance = "filled", ...triggerRest } = props;
-  const { open, setOpen, triggerRef, onKeyDown, size, fullWidth, disabled, value, getLabelByValue } = useSelectCtx();
-  const hasLabel = Boolean(getLabelByValue(value));
+  const { open, setOpen, triggerRef, onKeyDown, size, fullWidth, disabled, value } = useSelectCtx();
+  const isPlaceholder = value === "";
   const isPlain = appearance === "plain";
+  const isGhost = appearance === "ghost";
+  const isFilled = appearance === "filled";
+  const [pressed, setPressed] = useState5(false);
   const setRefs = useCallback4(
     (node) => {
       triggerRef.current = node;
@@ -3235,6 +3251,7 @@ var SelectTrigger = forwardRef6(function SelectTrigger2(props, forwardedRef) {
     },
     [forwardedRef, triggerRef]
   );
+  const clearPressed = useCallback4(() => setPressed(false), []);
   return /* @__PURE__ */ jsxs4(
     "button",
     {
@@ -3247,20 +3264,31 @@ var SelectTrigger = forwardRef6(function SelectTrigger2(props, forwardedRef) {
       "data-appearance": appearance,
       "data-size": size,
       "data-state": open ? "open" : "closed",
-      "data-placeholder": hasLabel ? void 0 : "",
+      "data-pressed": pressed ? "" : void 0,
+      "data-placeholder": isPlaceholder ? "" : void 0,
       disabled,
+      onPointerDown: (event) => {
+        if (disabled || event.button !== 0) return;
+        setPressed(true);
+      },
+      onPointerUp: clearPressed,
+      onPointerLeave: clearPressed,
+      onPointerCancel: clearPressed,
       onMouseDown: (event) => {
         event.preventDefault();
+        if (disabled) return;
         setOpen(!open);
         triggerRef.current?.focus();
       },
       onKeyDown,
       className: clsx28(
         "data-[placeholder]:[&_[data-refineui-select-value]]:text-refineui-alias-foreground-placeholder",
-        isPlain ? selectStyles.triggerPlain : selectStyles.trigger,
-        !isPlain && selectTriggerSizeClass[size],
-        !isPlain && open && selectStyles.triggerOpen,
-        disabled && (isPlain ? selectStyles.triggerPlainDisabled : selectStyles.triggerDisabled),
+        isPlain && selectStyles.triggerPlain,
+        isGhost && selectStyles.triggerGhost,
+        isFilled && selectStyles.trigger,
+        (isFilled || isGhost) && selectTriggerSizeClass[size],
+        isFilled && open && selectStyles.triggerOpen,
+        disabled && (isPlain ? selectStyles.triggerPlainDisabled : isGhost ? selectStyles.triggerGhostDisabled : selectStyles.triggerDisabled),
         fullWidth && "w-full",
         className
       ),
@@ -3286,7 +3314,20 @@ SelectTrigger.displayName = "SelectTrigger";
 function SelectValue({ placeholder, className, ...props }) {
   const { value, getLabelByValue, placeholder: rootPlaceholder } = useSelectCtx();
   const label = getLabelByValue(value);
-  return /* @__PURE__ */ jsx22("span", { "data-refineui-select-value": "", className: clsx28(selectStyles.value, !label && "text-refineui-alias-foreground-placeholder", className), ...props, children: label || placeholder || rootPlaceholder || "Select..." });
+  const isPlaceholder = value === "";
+  return /* @__PURE__ */ jsx22(
+    "span",
+    {
+      "data-refineui-select-value": "",
+      className: clsx28(
+        selectStyles.value,
+        isPlaceholder && "text-refineui-alias-foreground-placeholder",
+        className
+      ),
+      ...props,
+      children: label || placeholder || rootPlaceholder || "Select..."
+    }
+  );
 }
 function SelectIcon({ children, className, ...props }) {
   return /* @__PURE__ */ jsx22("span", { className: clsx28(selectStyles.iconWrap, className), ...props, children: children ?? /* @__PURE__ */ jsx22(WebIcon, { name: "chevron-down", size: iconSizes4.xsmall }) });
@@ -7394,15 +7435,10 @@ var calendarStyles = {
   dayWrapEndpoint: "box-border flex size-refineui-calendar-day-size items-center justify-center bg-refineui-alias-background-primary-hover",
   dayWrapEndpointStart: "rounded-s-refineui-large",
   dayWrapEndpointEnd: "rounded-e-refineui-large",
-  root: "box-border flex w-fit min-w-refineui-calendar-min-width flex-col gap-refineui-size-none rounded-refineui-large bg-refineui-alias-background-primary p-refineui-size-x-large",
+  root: "box-border flex w-fit min-w-refineui-calendar-min-width flex-col gap-refineui-size-none rounded-refineui-xx-large border-refineui-thin border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-x-large",
   header: "flex w-full min-w-0 items-center justify-between pb-refineui-size-large",
   navButton: "shrink-0 text-refineui-alias-foreground-primary",
-  captionButton: clsx58(
-    "shrink-0",
-    "border-refineui-none border-transparent bg-transparent",
-    "px-refineui-size-x-small py-refineui-size-xx-small",
-    "text-refineui-alias-foreground-primary"
-  ),
+  captionButton: "shrink-0",
   body: "flex flex-col gap-refineui-size-small",
   weekday: clsx58(
     componentTextClass(componentTypographyTokens.calendar.weekday),
@@ -7431,12 +7467,15 @@ function normalizeRange(start, end) {
 function getWeekdayLabels(weekStartsOn) {
   return [...WEEKDAYS.slice(weekStartsOn), ...WEEKDAYS.slice(0, weekStartsOn)];
 }
-function formatMonthName(year, month) {
+function formatMonthLabel(year, month) {
+  return new Intl.DateTimeFormat("en-US", { month: "short" }).format(new Date(year, month, 1));
+}
+function formatMonthNameLong(year, month) {
   return new Intl.DateTimeFormat("en-US", { month: "long" }).format(new Date(year, month, 1));
 }
 var MONTH_LABELS = Array.from(
   { length: MONTH_COUNT },
-  (_, monthIndex) => formatMonthName(2e3, monthIndex)
+  (_, monthIndex) => formatMonthLabel(2e3, monthIndex)
 );
 function yearOptionsForView(viewYear) {
   const referenceYear = (/* @__PURE__ */ new Date()).getFullYear();
@@ -7457,16 +7496,16 @@ function CalendarCaptionSelect({
   children
 }) {
   return /* @__PURE__ */ jsxs16(Select, { value, onValueChange, "aria-label": ariaLabel, size: "sm", children: [
-    /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsx45(
       SelectTrigger,
       {
-        appearance: "plain",
+        appearance: "ghost",
         "data-calendar-header": header,
-        className: calendarStyles.captionButton,
-        children: [
-          "                ",
-          /* @__PURE__ */ jsx45(SelectValue, { placeholder })
-        ]
+        className: clsx59(
+          calendarStyles.captionButton,
+          header === "caption-year" && "tabular-nums"
+        ),
+        children: /* @__PURE__ */ jsx45(SelectValue, { placeholder })
       }
     ),
     /* @__PURE__ */ jsx45(SelectPortal, { children: /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectGroup, { children }) }) })
@@ -7522,7 +7561,9 @@ function Calendar({
   const cells = getMonthGrid(year, month, weekStartsOn);
   const weeks = chunkWeeks(cells);
   const weekdayLabels = getWeekdayLabels(weekStartsOn);
-  const monthName = formatMonthName(year, month);
+  const monthLabel = formatMonthLabel(year, month);
+  const monthNameLong = formatMonthNameLong(year, month);
+  const yearOptions = yearOptionsForView(year);
   const getDateFromCell = (d, monthOffset) => new Date(year, month + monthOffset, d);
   const setRange = (start, end) => {
     if (onRangeChange) onRangeChange(start, end);
@@ -7713,8 +7754,8 @@ function Calendar({
             CalendarCaptionSelect,
             {
               value: String(month),
-              placeholder: monthName,
-              ariaLabel: `Month: ${monthName}`,
+              placeholder: monthLabel,
+              ariaLabel: `Month: ${monthNameLong}`,
               header: "caption-month",
               onValueChange: (nextMonth) => {
                 setView(new Date(year, Number.parseInt(nextMonth, 10), 1));
@@ -7732,7 +7773,7 @@ function Calendar({
               onValueChange: (nextYear) => {
                 setView(new Date(Number.parseInt(nextYear, 10), month, 1));
               },
-              children: yearOptionsForView(year).map((yearOption) => /* @__PURE__ */ jsx45(SelectItem, { value: String(yearOption), children: String(yearOption) }, yearOption))
+              children: yearOptions.map((yearOption) => /* @__PURE__ */ jsx45(SelectItem, { value: String(yearOption), children: String(yearOption) }, yearOption))
             }
           ),
           /* @__PURE__ */ jsx45(
@@ -8191,7 +8232,7 @@ import {
   useState as useState15
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { iconSizes as iconSizes13, semanticInteraction as semanticInteraction4 } from "@refineui/tokens";
+import { semanticInteraction as semanticInteraction4 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber2 } from "@refineui/utilities/animation";
 import { resolveColorTokenValue as resolveColorTokenValue6 } from "@refineui/utilities/color";
 import { acquireBodyScrollLock as acquireBodyScrollLock2 } from "@refineui/utilities/react";
@@ -8445,7 +8486,6 @@ function DrawerContent({
 function DrawerHeader({
   className,
   children,
-  showClose = true,
   actions,
   ...props
 }) {
@@ -8461,8 +8501,7 @@ function DrawerHeader({
       ...props,
       children: /* @__PURE__ */ jsxs18("div", { className: drawerStyles.headerMain, children: [
         /* @__PURE__ */ jsx52("div", { className: drawerStyles.headerMainText, children }),
-        hasActions ? /* @__PURE__ */ jsx52("div", { className: drawerStyles.headerActions, children: actions }) : null,
-        showClose ? /* @__PURE__ */ jsx52(DrawerClose, {}) : null
+        hasActions ? /* @__PURE__ */ jsx52("div", { className: drawerStyles.headerActions, children: actions }) : null
       ] })
     }
   );
@@ -8541,36 +8580,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__ */ jsx52(
-    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__ */ jsx52(WebIcon, { name: "dismiss", size: iconSizes13.xlarge, color: "currentColor", iconStyle: "regular", "aria-hidden": true }) : children
-    }
-  );
-}
 
 // src/components/Dropdown/Dropdown.tsx
 import { clsx as clsx70 } from "clsx";
@@ -8585,7 +8594,7 @@ import {
   useState as useState16
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { iconSizes as iconSizes14, spacings as spacings2, zIndex } from "@refineui/tokens";
+import { iconSizes as iconSizes13, spacings as spacings2, zIndex } from "@refineui/tokens";
 import { resolveColorTokenValue as resolveColorTokenValue7 } from "@refineui/utilities/color";
 
 // src/components/Dropdown/style.ts
@@ -9208,7 +9217,7 @@ function DropdownSubTrigger({
           WebIcon,
           {
             name: "chevron-right",
-            size: iconSizes14.small,
+            size: iconSizes13.small,
             color: "currentColor",
             "aria-hidden": true,
             className: "ms-auto shrink-0"
@@ -9416,7 +9425,7 @@ function FieldError({ className, ...props }) {
 
 // src/components/Link/Link.tsx
 import { clsx as clsx74 } from "clsx";
-import { iconSizes as iconSizes15 } from "@refineui/tokens";
+import { iconSizes as iconSizes14 } from "@refineui/tokens";
 
 // src/components/Link/style.ts
 var linkStyles = {
@@ -9454,7 +9463,7 @@ function Link({
       ...props,
       children: [
         children,
-        showOpen && /* @__PURE__ */ jsx57(WebIcon, { name: "open", size: iconSizes15.large, color: "currentColor" })
+        showOpen && /* @__PURE__ */ jsx57(WebIcon, { name: "open", size: iconSizes14.large, color: "currentColor" })
       ]
     }
   );
@@ -9473,7 +9482,7 @@ import {
   useState as useState17
 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { iconSizes as iconSizes16, semanticInteraction as semanticInteraction5, spacings as spacings3, zIndex as zIndex2 } from "@refineui/tokens";
+import { iconSizes as iconSizes15, semanticInteraction as semanticInteraction5, spacings as spacings3, zIndex as zIndex2 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber3 } from "@refineui/utilities/animation";
 import { Slot as Slot2, getMergeableTriggerChild as getMergeableTriggerChild2 } from "@refineui/utilities/react";
 
@@ -9755,9 +9764,9 @@ function MenuItem({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: iconSizes16.small,
-              minWidth: iconSizes16.small,
-              height: iconSizes16.small
+              width: iconSizes15.small,
+              minWidth: iconSizes15.small,
+              height: iconSizes15.small
             },
             children: startIcon
           }
@@ -9782,9 +9791,9 @@ function MenuItem({
             {
               className: menuStyles.iconWrap,
               style: {
-                width: iconSizes16.small,
-                minWidth: iconSizes16.small,
-                height: iconSizes16.small
+                width: iconSizes15.small,
+                minWidth: iconSizes15.small,
+                height: iconSizes15.small
               },
               children: endIcon
             }
@@ -9936,9 +9945,9 @@ function MenuSubTrigger({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: iconSizes16.small,
-              minWidth: iconSizes16.small,
-              height: iconSizes16.small
+              width: iconSizes15.small,
+              minWidth: iconSizes15.small,
+              height: iconSizes15.small
             },
             children: startIcon
           }
@@ -9961,11 +9970,11 @@ function MenuSubTrigger({
           {
             className: menuStyles.iconWrap,
             style: {
-              width: iconSizes16.small,
-              minWidth: iconSizes16.small,
-              height: iconSizes16.small
+              width: iconSizes15.small,
+              minWidth: iconSizes15.small,
+              height: iconSizes15.small
             },
-            children: /* @__PURE__ */ jsx58(WebIcon, { name: "chevron-right", size: iconSizes16.small, color: "currentColor", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx58(WebIcon, { name: "chevron-right", size: iconSizes15.small, color: "currentColor", "aria-hidden": true })
           }
         ) })
       ] })
@@ -10088,7 +10097,7 @@ import {
   useRef as useRef15,
   useState as useState18
 } from "react";
-import { iconSizes as iconSizes17, semanticInteraction as semanticInteraction6 } from "@refineui/tokens";
+import { iconSizes as iconSizes16, semanticInteraction as semanticInteraction6 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber4 } from "@refineui/utilities/animation";
 
 // src/components/NavigationMenu/style.ts
@@ -10436,7 +10445,7 @@ function NavigationMenuTrigger({
           WebIcon,
           {
             name: "chevron-down",
-            size: iconSizes17.xsmall,
+            size: iconSizes16.xsmall,
             color: "currentColor",
             className: clsx78(
               navigationMenuStyles.chevron,
@@ -11034,7 +11043,7 @@ function useSidebarPeek() {
 
 // src/components/Pagination/Pagination.tsx
 import { clsx as clsx84 } from "clsx";
-import { iconSizes as iconSizes18 } from "@refineui/tokens";
+import { iconSizes as iconSizes17 } from "@refineui/tokens";
 import { resolveColorTokenValue as resolveColorTokenValue9 } from "@refineui/utilities/color";
 
 // src/components/Pagination/style.ts
@@ -11097,7 +11106,7 @@ function PaginationNavButton({
         WebIcon,
         {
           name: isPrev ? "chevron-left" : "chevron-right",
-          size: iconSizes18.medium,
+          size: iconSizes17.medium,
           color: iconColor,
           fallback: isPrev ? "\u2039" : "\u203A"
         }
@@ -11124,7 +11133,7 @@ function PaginationEllipsis({ className, ...props }) {
         WebIcon,
         {
           name: "more-horizontal",
-          size: iconSizes18.medium,
+          size: iconSizes17.medium,
           color: resolveColorTokenValue9(componentColorTokens.pagination.navIcon.default),
           fallback: "\u2026"
         }
@@ -11584,7 +11593,7 @@ function Slider({
 
 // src/components/Carousel/Carousel.tsx
 import { clsx as clsx89 } from "clsx";
-import { iconSizes as iconSizes19 } from "@refineui/tokens";
+import { iconSizes as iconSizes18 } from "@refineui/tokens";
 import {
   Children as Children6,
   cloneElement as cloneElement2,
@@ -11948,7 +11957,7 @@ function CarouselPrevious({ className, disabled, onClick, ...props }) {
         WebIcon,
         {
           name: "chevron-left",
-          size: iconSizes19.small,
+          size: iconSizes18.small,
           color: "currentColor",
           iconStyle: "filled",
           fallback: "\u2039"
@@ -11980,7 +11989,7 @@ function CarouselNext({ className, disabled, onClick, ...props }) {
         WebIcon,
         {
           name: "chevron-right",
-          size: iconSizes19.small,
+          size: iconSizes18.small,
           color: "currentColor",
           iconStyle: "filled",
           fallback: "\u203A"
@@ -12250,7 +12259,7 @@ function BubbleReactions({
 
 // src/components/Stepper/Stepper.tsx
 import { clsx as clsx93 } from "clsx";
-import { iconSizes as iconSizes20 } from "@refineui/tokens";
+import { iconSizes as iconSizes19 } from "@refineui/tokens";
 import {
   createContext as createContext23,
   useCallback as useCallback18,
@@ -12519,7 +12528,7 @@ function StepperIndicator({ className, children, ...props }) {
     WebIcon,
     {
       name: "checkmark",
-      size: iconSizes20.xsmall,
+      size: iconSizes19.xsmall,
       color: "currentColor",
       iconStyle: "filled",
       fallback: "\u2713",
@@ -13139,7 +13148,7 @@ function ResizableHandle({
 // src/components/SpinButton/SpinButton.tsx
 import { clsx as clsx96 } from "clsx";
 import { useEffect as useEffect17, useState as useState25 } from "react";
-import { iconSizes as iconSizes21 } from "@refineui/tokens";
+import { iconSizes as iconSizes20 } from "@refineui/tokens";
 
 // src/components/SpinButton/style.ts
 var spinButtonStyles = {
@@ -13348,7 +13357,7 @@ function SpinButton({
                     WebIcon,
                     {
                       name: "chevron-up",
-                      size: iconSizes21.xsmall,
+                      size: iconSizes20.xsmall,
                       color: "currentColor",
                       iconStyle: "filled",
                       fallback: "\u25B2"
@@ -13372,7 +13381,7 @@ function SpinButton({
                     WebIcon,
                     {
                       name: "chevron-down",
-                      size: iconSizes21.xsmall,
+                      size: iconSizes20.xsmall,
                       color: "currentColor",
                       iconStyle: "filled",
                       fallback: "\u25BC"
@@ -13400,7 +13409,7 @@ import {
   useSyncExternalStore
 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { iconSizes as iconSizes22, spacings as spacings5 } from "@refineui/tokens";
+import { iconSizes as iconSizes21, spacings as spacings5 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber6 } from "@refineui/utilities/animation";
 import { resolveColorTokenValue as resolveColorTokenValue11 } from "@refineui/utilities/color";
 
@@ -13627,7 +13636,7 @@ var Toast = forwardRef15(function Toast2(props, ref) {
     WebIcon,
     {
       name: resolvedIconName,
-      size: iconSizes22.medium,
+      size: iconSizes21.medium,
       color: "currentColor",
       iconStyle: "filled"
     }
@@ -13973,7 +13982,7 @@ function toExpandedSet(value) {
 
 // src/components/Tree/style.ts
 import { clsx as clsx99 } from "clsx";
-import { iconSizes as iconSizes23 } from "@refineui/tokens";
+import { iconSizes as iconSizes22 } from "@refineui/tokens";
 var treeStyles = {
   root: "m-0 flex list-none flex-col gap-px p-0",
   item: "m-0 list-none p-0",
@@ -14001,9 +14010,9 @@ var treeStyles = {
   label: "min-w-0 flex-1 truncate text-start"
 };
 var treeIconSize = {
-  sm: iconSizes23.xxsmall,
-  md: iconSizes23.xsmall,
-  lg: iconSizes23.xsmall
+  sm: iconSizes22.xxsmall,
+  md: iconSizes22.xsmall,
+  lg: iconSizes22.xsmall
 };
 var treeItemTypo = {
   sm: sizedComponentTextClass(componentTypographyTokens.tree.item, "sm"),
@@ -15443,7 +15452,18 @@ var Collapsible = forwardRef16(function Collapsible2({ open: openProp, defaultOp
   return /* @__PURE__ */ jsx78(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ jsx78(Slot6, { ...shared, children }) : /* @__PURE__ */ jsx78("div", { ...shared, children }) });
 });
 var CollapsibleTrigger = forwardRef16(
-  function CollapsibleTrigger2({ asChild = false, onClick, className, children, ...props }, ref) {
+  function CollapsibleTrigger2({
+    asChild = false,
+    onClick,
+    className,
+    children,
+    variant = "ghost",
+    size,
+    layout,
+    fullWidth,
+    type = "button",
+    ...props
+  }, ref) {
     const { open, toggle, contentId, triggerId } = useCollapsibleContext("CollapsibleTrigger");
     const shared = {
       ...props,
@@ -15452,7 +15472,6 @@ var CollapsibleTrigger = forwardRef16(
       "aria-expanded": open,
       "aria-controls": contentId,
       "data-state": open ? "open" : "closed",
-      "data-refineui": "collapsible-trigger",
       className,
       onClick: (event) => {
         onClick?.(event);
@@ -15460,7 +15479,18 @@ var CollapsibleTrigger = forwardRef16(
       }
     };
     if (asChild) return /* @__PURE__ */ jsx78(Slot6, { ...shared, children });
-    return /* @__PURE__ */ jsx78("button", { ...shared, type: "button", children });
+    return /* @__PURE__ */ jsx78(
+      Button,
+      {
+        ...shared,
+        type,
+        variant,
+        size,
+        layout,
+        fullWidth,
+        children
+      }
+    );
   }
 );
 var CollapsibleContent = forwardRef16(
@@ -15510,7 +15540,7 @@ import {
 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { clsx as clsx109 } from "clsx";
-import { componentSizes as componentSizes3, iconSizes as iconSizes24, semanticInteraction as semanticInteraction10 } from "@refineui/tokens";
+import { componentSizes as componentSizes3, iconSizes as iconSizes23, semanticInteraction as semanticInteraction10 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber7 } from "@refineui/utilities/animation";
 import { Slot as Slot7 } from "@refineui/utilities/react";
 import { Fragment as Fragment5, jsx as jsx79, jsxs as jsxs33 } from "react/jsx-runtime";
@@ -15698,7 +15728,7 @@ var ContextMenuItem = forwardRef17(function ContextMenuItem2({ disabled = false,
           "span",
           {
             className: menuStyles.iconWrap,
-            style: { width: iconSizes24.small, minWidth: iconSizes24.small, height: iconSizes24.small },
+            style: { width: iconSizes23.small, minWidth: iconSizes23.small, height: iconSizes23.small },
             children: startIcon
           }
         ) : null,
@@ -15712,7 +15742,7 @@ var ContextMenuItem = forwardRef17(function ContextMenuItem2({ disabled = false,
             "span",
             {
               className: menuStyles.iconWrap,
-              style: { width: iconSizes24.small, minWidth: iconSizes24.small, height: iconSizes24.small },
+              style: { width: iconSizes23.small, minWidth: iconSizes23.small, height: iconSizes23.small },
               children: endIcon
             }
           ) : null
@@ -15814,7 +15844,7 @@ var ContextMenuSubTrigger = forwardRef17(
         "span",
         {
           className: menuStyles.iconWrap,
-          style: { width: iconSizes24.small, minWidth: iconSizes24.small, height: iconSizes24.small },
+          style: { width: iconSizes23.small, minWidth: iconSizes23.small, height: iconSizes23.small },
           children: startIcon
         }
       ) : null,
@@ -15826,8 +15856,8 @@ var ContextMenuSubTrigger = forwardRef17(
         "span",
         {
           className: menuStyles.iconWrap,
-          style: { width: iconSizes24.small, minWidth: iconSizes24.small, height: iconSizes24.small },
-          children: /* @__PURE__ */ jsx79(WebIcon, { name: "chevron-right", size: iconSizes24.small, color: "currentColor", "aria-hidden": true })
+          style: { width: iconSizes23.small, minWidth: iconSizes23.small, height: iconSizes23.small },
+          children: /* @__PURE__ */ jsx79(WebIcon, { name: "chevron-right", size: iconSizes23.small, color: "currentColor", "aria-hidden": true })
         }
       ) })
     ] }) });
@@ -15995,7 +16025,6 @@ export {
   Divider,
   Drawer,
   DrawerBody,
-  DrawerClose,
   DrawerContent,
   DrawerDescription,
   DrawerFooter,