@refineui/react 0.0.3 → 0.0.4

package/dist/index.js

@@ -137,13 +137,16 @@ var componentColorTokens = {
   },
   tooltip: {
     default: {
-      background: semanticToken("surfacePopover"),
-      foreground: semanticToken("foregroundPrimary")
+      /** Menu / Select floating panel semantic */
+      background: semanticToken("backgroundPrimary"),
+      foreground: semanticToken("foregroundPrimary"),
+      border: semanticToken("borderDefault")
     }
   },
   popover: {
     default: {
-      background: semanticToken("surfacePopover"),
+      /** Menu / Select floating panel semantic */
+      background: semanticToken("backgroundPrimary"),
       foreground: semanticToken("foregroundPrimary"),
       border: semanticToken("borderDefault")
     },
@@ -322,8 +325,8 @@ var componentColorTokens = {
       foreground: semanticToken("foregroundOnSuccess")
     },
     warning: {
-      background: paletteToken("orange500"),
-      foreground: paletteToken("neutralWhite")
+      background: semanticToken("backgroundWarning"),
+      foreground: semanticToken("foregroundOnWarning")
     },
     danger: {
       background: semanticToken("backgroundError"),
@@ -392,7 +395,7 @@ var componentColorTokens = {
     pointStroke: semanticToken("backgroundPrimary"),
     cursor: semanticToken("backgroundSurfaceHover"),
     tooltip: {
-      background: semanticToken("surfacePopover"),
+      background: semanticToken("backgroundPrimary"),
       foreground: semanticToken("foregroundPrimary"),
       muted: semanticToken("foregroundSecondary"),
       border: semanticToken("borderDefault")
@@ -445,8 +448,10 @@ var componentColorTokens = {
     }
   },
   toast: {
-    background: semanticToken("surfacePopover"),
+    /** Menu / Select panel semantic — solid, not frosted */
+    background: semanticToken("backgroundPrimary"),
     message: semanticToken("foregroundPrimary"),
+    border: semanticToken("borderDefault"),
     accent: {
       default: semanticToken("foregroundPrimary"),
       success: semanticToken("foregroundSuccess"),
@@ -514,14 +519,15 @@ var componentColorTokens = {
   },
   menu: {
     panel: {
-      background: semanticToken("backgroundSurface"),
+      /** Matches Menu.style panel classes */
+      background: semanticToken("backgroundPrimary"),
       border: semanticToken("borderDefault")
     },
     popover: {
       background: "transparent"
     },
     list: {
-      background: semanticToken("backgroundSurface"),
+      background: semanticToken("backgroundPrimary"),
       border: semanticToken("borderDefault")
     },
     section: semanticToken("foregroundPrimary"),
@@ -625,8 +631,8 @@ var componentColorTokens = {
   },
   divider: {
     line: semanticToken("borderDefault"),
-    label: paletteToken("primaryBlack"),
-    icon: paletteToken("primaryBlack")
+    label: semanticToken("foregroundPrimary"),
+    icon: semanticToken("foregroundPrimary")
   },
   avatar: {
     image: {
@@ -910,6 +916,129 @@ var componentTypographyTokens = {
   }
 };
 
+// src/tokens/componentTokens.ts
+import { componentSizes, semanticElevations, semanticInteraction } from "@refineui/tokens";
+var motion = {
+  fast: {
+    duration: semanticInteraction.duration.fast,
+    easing: semanticInteraction.easing.easeOut
+  },
+  indicator: {
+    duration: semanticInteraction.duration.medium,
+    easing: semanticInteraction.easing.emphasized
+  },
+  panel: {
+    duration: semanticInteraction.duration.panel,
+    easing: semanticInteraction.easing.panel
+  }
+};
+var componentTokens = {
+  color: componentColorTokens,
+  typography: componentTypographyTokens,
+  motion,
+  elevation: semanticElevations,
+  toast: {
+    color: componentColorTokens.toast,
+    typography: componentTypographyTokens.toast,
+    size: {
+      minWidth: componentSizes.toastMinWidth,
+      maxWidth: componentSizes.toastMaxWidth
+    },
+    elevation: {
+      role: "toast",
+      foundation: semanticElevations.toast
+    },
+    motion: {
+      enter: semanticInteraction.duration.toastEnter,
+      leave: semanticInteraction.duration.toastLeave,
+      easing: semanticInteraction.easing.emphasized
+    }
+  },
+  segmentedControl: {
+    color: componentColorTokens.segmentedControl,
+    typography: componentTypographyTokens.segmentedControl,
+    elevation: {
+      /** Selected thumb — recipe `shadow-refineui-2` / surface */
+      role: "surface",
+      foundation: semanticElevations.surface
+    },
+    motion: {
+      /** Indicator slide after first layout */
+      indicator: motion.indicator,
+      /** Item label color fade */
+      itemColor: motion.fast
+    }
+  },
+  button: {
+    color: componentColorTokens.button,
+    typography: componentTypographyTokens.button,
+    motion: {
+      pressScale: semanticInteraction.scale.press,
+      color: motion.fast
+    }
+  },
+  chip: {
+    color: componentColorTokens.chip,
+    typography: componentTypographyTokens.chip
+  },
+  badge: {
+    color: componentColorTokens.badge
+  },
+  alert: {
+    color: componentColorTokens.alert,
+    typography: componentTypographyTokens.alert
+  },
+  dialog: {
+    color: componentColorTokens.dialog,
+    typography: componentTypographyTokens.dialog,
+    elevation: {
+      role: "modal",
+      foundation: semanticElevations.modal
+    },
+    motion: {
+      enterScale: semanticInteraction.scale.dialogEnter,
+      panel: motion.panel
+    }
+  },
+  drawer: {
+    color: componentColorTokens.drawer,
+    typography: componentTypographyTokens.drawer,
+    motion: {
+      panel: motion.panel
+    }
+  },
+  accordion: {
+    color: componentColorTokens.accordion,
+    typography: componentTypographyTokens.accordion,
+    motion: {
+      panel: semanticInteraction.duration.accordionPanel,
+      content: semanticInteraction.duration.accordionContent
+    }
+  },
+  tabs: {
+    // underline indicator shares the same mount/slide motion contract
+    motion: {
+      indicator: motion.indicator
+    }
+  },
+  input: {
+    color: componentColorTokens.input,
+    typography: componentTypographyTokens.formControl
+  },
+  checkbox: {
+    color: componentColorTokens.checkbox
+  },
+  radio: {
+    color: componentColorTokens.radio
+  },
+  switch: {
+    color: componentColorTokens.switch
+  },
+  toggle: {
+    color: componentColorTokens.toggle
+  }
+};
+
 // src/typography.ts
 import { SEMANTIC_TEXT } from "@refineui/tokens";
 import {
@@ -942,7 +1071,7 @@ import { SEMANTIC_TEXT as SEMANTIC_TEXT2 } from "@refineui/tokens";
 
 // src/componentSizes.ts
 import {
-  componentSizes,
+  componentSizes as componentSizes2,
   componentSizeFoundationKeys,
   foundationSizes
 } from "@refineui/tokens";
@@ -3271,7 +3400,7 @@ var SelectContent = forwardRef6(function SelectContent2(props, forwardedRef) {
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const vw = window.innerWidth;
     const vh = window.innerHeight;
-    const minW = parsePx(componentSizes.dropdownMenuWidth, 180);
+    const minW = parsePx(componentSizes2.dropdownMenuWidth, 180);
     const width = Math.min(Math.max(triggerRect.width, minW), vw - 2 * CONTENT_MARGIN);
     const left = clampNumber(triggerRect.left, [CONTENT_MARGIN, Math.max(CONTENT_MARGIN, vw - width - CONTENT_MARGIN)]);
     const gap2 = SIDE_OFFSET;
@@ -3801,7 +3930,7 @@ import {
   useState as useState6
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { iconSizes as iconSizes6, semanticInteraction } from "@refineui/tokens";
+import { iconSizes as iconSizes6, semanticInteraction as semanticInteraction2 } from "@refineui/tokens";
 import { motionMsToNumber } from "@refineui/utilities/animation";
 import { resolveColorTokenValue as resolveColorTokenValue2 } from "@refineui/utilities/color";
 
@@ -3899,9 +4028,9 @@ var dialogStyles = {
 
 // src/components/Dialog/Dialog.tsx
 import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
-var PANEL_MS = motionMsToNumber(semanticInteraction.duration.panel);
-var SCRIM_MS = motionMsToNumber(semanticInteraction.duration.overlay);
-var EASING = semanticInteraction.easing.panel;
+var PANEL_MS = motionMsToNumber(semanticInteraction2.duration.panel);
+var SCRIM_MS = motionMsToNumber(semanticInteraction2.duration.overlay);
+var EASING = semanticInteraction2.easing.panel;
 var DialogContext = createContext6(null);
 function useDialogContext(component) {
   const ctx = useContext6(DialogContext);
@@ -3994,7 +4123,7 @@ function DialogContent({ className, style, container, scrollable = true, childre
     transform: entered ? "scale(1) translateY(0)" : "scale(var(--refineui-motion-scale-enter)) translateY(var(--refineui-spacing-size-small))",
     transition: `opacity ${PANEL_MS}ms ${EASING}, transform ${PANEL_MS}ms ${EASING}`,
     willChange: "opacity, transform",
-    maxWidth: size === "lg" ? componentSizes.dialogMaxWidth : componentSizes.dialogWidthSm
+    maxWidth: size === "lg" ? componentSizes2.dialogMaxWidth : componentSizes2.dialogWidthSm
   };
   const panelBody = scrollable ? /* @__PURE__ */ jsx25(
     ScrollAreaRegion,
@@ -6030,11 +6159,15 @@ function TabsList({ className, children, ...props }) {
     width: 0,
     ready: false
   });
+  const [animate, setAnimate] = useState10(false);
+  const hasMeasuredRef = useRef9(false);
   const updateIndicator = useCallback8(() => {
     const list = tabListRef.current;
     if (!list) return;
     const selected = list.querySelector(`${TRIGGER_SELECTOR}[data-selected="true"]`);
     if (!selected) {
+      hasMeasuredRef.current = false;
+      setAnimate(false);
       setIndicator((prev) => ({ ...prev, width: 0, ready: false }));
       return;
     }
@@ -6047,6 +6180,18 @@ function TabsList({ className, children, ...props }) {
   useLayoutEffect4(() => {
     updateIndicator();
   }, [updateIndicator, selectedValue, children]);
+  useEffect6(() => {
+    if (!indicator.ready || hasMeasuredRef.current) return;
+    hasMeasuredRef.current = true;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [indicator.ready]);
   useEffect6(() => {
     const list = tabListRef.current;
     if (!list) return;
@@ -6082,6 +6227,7 @@ function TabsList({ className, children, ...props }) {
           {
             "data-refineui": "tabs-indicator",
             "data-ready": indicator.ready ? "true" : void 0,
+            "data-animate": animate ? "true" : void 0,
             "aria-hidden": true,
             className: tabsStyles.indicator,
             style: indicatorStyle
@@ -6299,6 +6445,8 @@ function SegmentedControl({
     width: 0,
     ready: false
   });
+  const [animate, setAnimate] = useState11(false);
+  const hasMeasuredRef = useRef10(false);
   const updateIndicator = useCallback9(() => {
     const group = groupRef.current;
     if (!group) return;
@@ -6306,6 +6454,8 @@ function SegmentedControl({
       `${ITEM_SELECTOR}[data-selected="true"]`
     );
     if (!selected) {
+      hasMeasuredRef.current = false;
+      setAnimate(false);
       setIndicator((prev) => ({ ...prev, width: 0, ready: false }));
       return;
     }
@@ -6318,6 +6468,18 @@ function SegmentedControl({
   useLayoutEffect5(() => {
     updateIndicator();
   }, [updateIndicator, selectedValue, children]);
+  useEffect7(() => {
+    if (!indicator.ready || hasMeasuredRef.current) return;
+    hasMeasuredRef.current = true;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [indicator.ready]);
   useEffect7(() => {
     const group = groupRef.current;
     if (!group) return;
@@ -6353,6 +6515,7 @@ function SegmentedControl({
           {
             "data-refineui": "segmented-control-indicator",
             "data-ready": indicator.ready ? "true" : void 0,
+            "data-animate": animate ? "true" : void 0,
             "aria-hidden": true,
             className: segmentedControlStyles.indicator,
             style: indicatorStyle
@@ -6524,14 +6687,14 @@ import { clsx as clsx51 } from "clsx";
 
 // src/components/Accordion/context.ts
 import { createContext as createContext13, useEffect as useEffect8, useState as useState12 } from "react";
-import { semanticInteraction as semanticInteraction2 } from "@refineui/tokens";
+import { semanticInteraction as semanticInteraction3 } from "@refineui/tokens";
 import { getReducedMotionQuery } from "@refineui/utilities/animation";
 var AccordionContext = createContext13(null);
 var AccordionItemContext = createContext13(null);
-var PANEL_HEIGHT_MS = Number.parseFloat(semanticInteraction2.duration.accordionPanel) / 1e3;
-var PANEL_CONTENT_MS = Number.parseFloat(semanticInteraction2.duration.accordionContent) / 1e3;
-var PANEL_HEIGHT_EASE = semanticInteraction2.easing.panel;
-var PANEL_CONTENT_EASE = semanticInteraction2.easing.content;
+var PANEL_HEIGHT_MS = Number.parseFloat(semanticInteraction3.duration.accordionPanel) / 1e3;
+var PANEL_CONTENT_MS = Number.parseFloat(semanticInteraction3.duration.accordionContent) / 1e3;
+var PANEL_HEIGHT_EASE = semanticInteraction3.easing.panel;
+var PANEL_CONTENT_EASE = semanticInteraction3.easing.content;
 function usePrefersReducedMotion() {
   const [reduce, setReduce] = useState12(false);
   useEffect8(() => {
@@ -7640,8 +7803,8 @@ function DividerCircleGlyph() {
       "aria-hidden": true,
       className: dividerStyles.iconCircle,
       style: {
-        width: componentSizes.dividerIconCircleDiameter,
-        height: componentSizes.dividerIconCircleDiameter
+        width: componentSizes2.dividerIconCircleDiameter,
+        height: componentSizes2.dividerIconCircleDiameter
       }
     }
   );
@@ -8025,7 +8188,7 @@ import {
   useState as useState15
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { iconSizes as iconSizes13, semanticInteraction as semanticInteraction3 } from "@refineui/tokens";
+import { iconSizes as iconSizes13, 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";
@@ -8066,9 +8229,9 @@ var drawerStyles = {
 
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
-var PANEL_MS2 = motionMsToNumber2(semanticInteraction3.duration.panel);
-var SCRIM_MS2 = motionMsToNumber2(semanticInteraction3.duration.overlay);
-var EASING2 = semanticInteraction3.easing.panel;
+var PANEL_MS2 = motionMsToNumber2(semanticInteraction4.duration.panel);
+var SCRIM_MS2 = motionMsToNumber2(semanticInteraction4.duration.overlay);
+var EASING2 = semanticInteraction4.easing.panel;
 var DrawerContext = createContext15(null);
 function useDrawerContext(component) {
   const ctx = useContext17(DrawerContext);
@@ -8091,11 +8254,11 @@ function useDrawerOpenState(openProp, defaultOpen, onOpenChange) {
 function widthToken(s) {
   switch (s) {
     case "md":
-      return componentSizes.drawerWidthMd;
+      return componentSizes2.drawerWidthMd;
     case "lg":
-      return componentSizes.drawerWidthLg;
+      return componentSizes2.drawerWidthLg;
     default:
-      return componentSizes.drawerWidthSm;
+      return componentSizes2.drawerWidthSm;
   }
 }
 function Drawer({
@@ -8690,7 +8853,7 @@ function DropdownContent({
   const [fixedStyle, setFixedStyle] = useState16(null);
   const [menuSide, setMenuSide] = useState16("bottom");
   const gapPx = sideOffset ?? parseCssPxLen(spacings2.sizeXXSmall, 4);
-  const defaultMenuW = parseCssPxLen(componentSizes.dropdownMenuWidth, 180);
+  const defaultMenuW = parseCssPxLen(componentSizes2.dropdownMenuWidth, 180);
   const z = Number.parseInt(String(zIndex.zIndexMessages), 10) || 1e4;
   useIsomorphicLayoutEffect3(() => {
     if (!open) {
@@ -8718,7 +8881,7 @@ function DropdownContent({
           position: "fixed",
           top: pos.top,
           left: pos.left,
-          minWidth: componentSizes.dropdownMenuWidth,
+          minWidth: componentSizes2.dropdownMenuWidth,
           zIndex: z,
           maxHeight: "min(60vh, 20rem)"
         };
@@ -9055,7 +9218,7 @@ function DropdownSubContent({ className, children, style, ...props }) {
   const panelRef = useRef13(null);
   const [fixedStyle, setFixedStyle] = useState16(null);
   const [side, setSide] = useState16("right");
-  const defaultMenuW = parseCssPxLen(componentSizes.dropdownMenuWidth, 180);
+  const defaultMenuW = parseCssPxLen(componentSizes2.dropdownMenuWidth, 180);
   const gapPx = parseCssPxLen(spacings2.sizeXXXSmall, 2);
   const setPanelEl = useCallback12(
     (el) => {
@@ -9093,7 +9256,7 @@ function DropdownSubContent({ className, children, style, ...props }) {
         position: "fixed",
         top: pos.top,
         left: pos.left,
-        minWidth: componentSizes.dropdownMenuWidth,
+        minWidth: componentSizes2.dropdownMenuWidth,
         zIndex: (Number.parseInt(String(zIndex.zIndexMessages), 10) || 1e4) + 100,
         maxHeight: "min(60vh, 20rem)"
       });
@@ -9305,7 +9468,7 @@ import {
   useState as useState17
 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { iconSizes as iconSizes16, semanticInteraction as semanticInteraction4, spacings as spacings3, zIndex as zIndex2 } from "@refineui/tokens";
+import { iconSizes as iconSizes16, semanticInteraction as semanticInteraction5, spacings as spacings3, zIndex as zIndex2 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber3 } from "@refineui/utilities/animation";
 import { getMergeableTriggerChild as getMergeableTriggerChild2 } from "@refineui/utilities/react";
 
@@ -9450,7 +9613,7 @@ function MenuPopover({ className, children, style, ...props }) {
       setShouldRender(false);
       setIsClosing(false);
       setFixedStyle(null);
-    }, motionMsToNumber3(semanticInteraction4.duration.normal));
+    }, motionMsToNumber3(semanticInteraction5.duration.normal));
     return () => window.clearTimeout(timeout);
   }, [open, shouldRender]);
   useIsomorphicLayoutEffect4(() => {
@@ -9465,7 +9628,7 @@ function MenuPopover({ className, children, style, ...props }) {
         position: "fixed",
         top: rect.bottom + gapPx,
         left: rect.left,
-        minWidth: componentSizes.menuPanelWidth,
+        minWidth: componentSizes2.menuPanelWidth,
         width: positioning?.autoSize ? "max-content" : void 0,
         maxWidth: "min(100vw - 16px, 24rem)",
         zIndex: z
@@ -9815,7 +9978,7 @@ function MenuSubContent({ className, children, style, ...props }) {
   const [side, setSide] = useState17("right");
   const gapPx = parseCssPx(spacings3.sizeXXXSmall, 2);
   const z = (Number.parseInt(String(zIndex2.zIndexMessages), 10) || 1e4) + 100;
-  const defaultW = parseCssPx(componentSizes.menuPanelWidth, 244);
+  const defaultW = parseCssPx(componentSizes2.menuPanelWidth, 244);
   const setPanelEl = useCallback13(
     (el) => {
       panelRef.current = el;
@@ -9854,7 +10017,7 @@ function MenuSubContent({ className, children, style, ...props }) {
         position: "fixed",
         top: pos.top,
         left: pos.left,
-        minWidth: componentSizes.menuPanelWidth,
+        minWidth: componentSizes2.menuPanelWidth,
         zIndex: z,
         maxHeight: "min(60vh, 20rem)"
       });
@@ -9923,14 +10086,14 @@ import {
   useRef as useRef15,
   useState as useState18
 } from "react";
-import { iconSizes as iconSizes17, semanticInteraction as semanticInteraction5 } from "@refineui/tokens";
+import { iconSizes as iconSizes17, semanticInteraction as semanticInteraction6 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber4 } from "@refineui/utilities/animation";
 
 // src/components/NavigationMenu/style.ts
 import { clsx as clsx77 } from "clsx";
 var topLevelItem = clsx77(
   componentTextClass(componentTypographyTokens.navigationMenu.trigger),
-  "box-border inline-flex cursor-pointer items-center justify-center gap-refineui-size-x-small",
+  "box-border inline-flex h-refineui-button-min-height-md min-w-refineui-navigation-menu-item-min-width cursor-pointer items-center justify-center gap-refineui-size-x-small",
   "rounded-refineui-large border-none bg-transparent px-refineui-size-medium py-refineui-size-x-small",
   "text-refineui-alias-foreground-tertiary outline-none leading-none",
   "transition-[color,background-color] duration-[var(--refineui-motion-duration-fast)]"
@@ -9947,8 +10110,6 @@ var navigationMenuStyles = {
   triggerDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   chevron,
   chevronOpen: "rotate-180",
-  /** Matches trigger chevron box so direct top-level links align with dropdown triggers. */
-  linkChevronSpacer: clsx77(chevron, "inline-block size-refineui-icon-xsmall shrink-0 pointer-events-none invisible"),
   content: clsx77(
     /** Flush under trigger so pointer does not leave the item while moving into the panel. */
     "absolute start-0 top-full z-refineui-messages pt-refineui-size-xx-small",
@@ -10023,8 +10184,8 @@ function NavigationMenu({
   const openTimerRef = useRef15(null);
   const closeTimerRef = useRef15(null);
   const rootRef = useRef15(null);
-  const delayDuration = delayDurationProp ?? motionMsToNumber4(semanticInteraction5.duration.normal);
-  const skipDelayDuration = skipDelayDurationProp ?? motionMsToNumber4(semanticInteraction5.duration.fast);
+  const delayDuration = delayDurationProp ?? motionMsToNumber4(semanticInteraction6.duration.normal);
+  const skipDelayDuration = skipDelayDurationProp ?? motionMsToNumber4(semanticInteraction6.duration.fast);
   const clearTimers = useCallback14(() => {
     if (openTimerRef.current != null) {
       window.clearTimeout(openTimerRef.current);
@@ -10189,10 +10350,12 @@ function NavigationMenuItem({
       onPointerEnter: (event) => {
         onPointerEnter?.(event);
         if (event.defaultPrevented) return;
-        const hasTrigger = Boolean(
-          event.currentTarget.querySelector('[data-refineui="navigation-menu-trigger"]')
+        const hasEnabledTrigger = Boolean(
+          event.currentTarget.querySelector(
+            '[data-refineui="navigation-menu-trigger"]:not(:disabled)'
+          )
         );
-        if (hasTrigger) {
+        if (hasEnabledTrigger) {
           menu.openItem(value);
         }
       },
@@ -10304,7 +10467,7 @@ function NavigationMenuContent({
     const timeout = window.setTimeout(() => {
       setShouldRender(false);
       setIsClosing(false);
-    }, motionMsToNumber4(semanticInteraction5.duration.fast));
+    }, motionMsToNumber4(semanticInteraction6.duration.fast));
     return () => window.clearTimeout(timeout);
   }, [item.open, shouldRender]);
   const contentCtx = useMemo14(
@@ -10346,7 +10509,7 @@ function NavigationMenuLink({
   const menu = useContext20(NavigationMenuContext);
   const inContent = menu?.isInsideContent ?? false;
   const disabled = ariaDisabled === true || ariaDisabled === "true";
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx59(
     "a",
     {
       "data-refineui": "navigation-menu-link",
@@ -10362,7 +10525,11 @@ function NavigationMenuLink({
       ),
       onClick: (event) => {
         onClick?.(event);
-        if (event.defaultPrevented || disabled) return;
+        if (event.defaultPrevented) return;
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
         menu?.setValue("");
       },
       onFocus: (event) => {
@@ -10372,10 +10539,7 @@ function NavigationMenuLink({
         }
       },
       ...props,
-      children: [
-        children,
-        !inContent ? /* @__PURE__ */ jsx59("span", { "aria-hidden": true, className: navigationMenuStyles.linkChevronSpacer }) : null
-      ]
+      children
     }
   );
 }
@@ -10588,7 +10752,7 @@ import {
   useRef as useRef16,
   useState as useState19
 } from "react";
-import { semanticInteraction as semanticInteraction6 } from "@refineui/tokens";
+import { semanticInteraction as semanticInteraction7 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber5 } from "@refineui/utilities/animation";
 
 // src/components/Sidebar/peekStyle.ts
@@ -10614,9 +10778,9 @@ var sidebarPeekStyles = {
 
 // src/components/Sidebar/SidebarPeek.tsx
 import { jsx as jsx61 } from "react/jsx-runtime";
-var PEEK_OPEN_DELAY_MS = motionMsToNumber5(semanticInteraction6.duration.medium);
-var PEEK_CLOSE_DELAY_MS = motionMsToNumber5(semanticInteraction6.duration.medium);
-var PEEK_BRIDGE_DELAY_MS = motionMsToNumber5(semanticInteraction6.duration.slow);
+var PEEK_OPEN_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.medium);
+var PEEK_CLOSE_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.medium);
+var PEEK_BRIDGE_DELAY_MS = motionMsToNumber5(semanticInteraction7.duration.slow);
 var SidebarPeekContext = createContext19(null);
 function useSidebarPeekContext(component) {
   const ctx = useContext21(SidebarPeekContext);
@@ -11032,8 +11196,8 @@ var BEAK_OFFSET = foundationSizes.foundationSize80;
 var BEAK_BORDER_OVERLAP = strokeWidths2.strokeWidthThin;
 var POPOVER_GAP = spacings4.sizeMedium;
 function beakWrapperStyle(placement, align) {
-  const insetStart = componentSizes.popoverBeakInsetFromStartEdge;
-  const insetEnd = componentSizes.popoverBeakInsetFromEndEdge;
+  const insetStart = componentSizes2.popoverBeakInsetFromStartEdge;
+  const insetEnd = componentSizes2.popoverBeakInsetFromEndEdge;
   const edge = spacings4.sizeMedium;
   const overlapOffset = `calc(-1 * ${BEAK_OFFSET} + ${BEAK_BORDER_OVERLAP})`;
   switch (placement) {
@@ -11262,7 +11426,7 @@ function PopoverContent({
             ),
             style: {
               ...styleProp && typeof styleProp === "object" ? styleProp : {},
-              minWidth: componentSizes.popoverPanelWidth,
+              minWidth: componentSizes2.popoverPanelWidth,
               padding: spacings4.sizeLarge,
               backgroundColor: bg,
               color: resolveColorTokenValue10(palette.foreground),
@@ -13235,14 +13399,15 @@ import {
   useSyncExternalStore
 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { iconSizes as iconSizes22, semanticInteraction as semanticInteraction7, spacings as spacings5 } from "@refineui/tokens";
+import { iconSizes as iconSizes22, spacings as spacings5 } from "@refineui/tokens";
 import { motionMsToNumber as motionMsToNumber6 } from "@refineui/utilities/animation";
+import { resolveColorTokenValue as resolveColorTokenValue11 } from "@refineui/utilities/color";
 
 // src/recipes/toast.recipe.ts
 import { clsx as clsx97 } from "clsx";
 var toastRecipe = defineRecipe({
   name: "toast",
-  base: "relative isolate box-border flex w-fit max-w-refineui-toast-max-width cursor-grab items-center gap-refineui-size-small rounded-refineui-circle border-none py-refineui-size-medium ps-refineui-size-medium pe-refineui-size-large select-none",
+  base: "relative isolate box-border flex w-fit min-w-refineui-toast-min-width max-w-refineui-toast-max-width cursor-grab items-center gap-refineui-size-small rounded-refineui-x-large border-refineui-hairline border-refineui-alias-border-default bg-refineui-alias-background-primary py-refineui-size-medium ps-refineui-size-medium pe-refineui-size-large select-none",
   variants: {
     variant: {
       default: "",
@@ -13272,7 +13437,7 @@ var toastStyles = {
 import { jsx as jsx71, jsxs as jsxs29 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? useLayoutEffect11 : useEffect18;
 var ENTER_MS = 20;
-var LEAVE_MS = motionMsToNumber6(semanticInteraction7.duration.toastLeave) + 60;
+var LEAVE_MS = motionMsToNumber6(componentTokens.toast.motion.leave) + 60;
 var DEFAULT_DURATION = 4200;
 var DEFAULT_MAX_TOASTS = 1;
 var STACK_Z_BASE = 100;
@@ -13477,6 +13642,12 @@ var Toast = forwardRef15(function Toast2(props, ref) {
       children: action.label
     }
   ) : action;
+  const color = componentColorTokens.toast;
+  const tokenStyle = {
+    backgroundColor: resolveColorTokenValue11(color.background),
+    borderColor: resolveColorTokenValue11(color.border),
+    color: resolveColorTokenValue11(color.message)
+  };
   return /* @__PURE__ */ jsxs29(
     "div",
     {
@@ -13487,7 +13658,7 @@ var Toast = forwardRef15(function Toast2(props, ref) {
       role: liveRole,
       "aria-live": ariaLive,
       ...domProps,
-      style,
+      style: { ...tokenStyle, ...style },
       className: clsx98(toastStyles.card, className),
       children: [
         /* @__PURE__ */ jsx71("div", { "data-refineui": "toast-icon", className: toastStyles.iconWrap, children: iconContent }),
@@ -14243,36 +14414,49 @@ function TreeItemContent({ className, children, ...props }) {
 // src/components/Tooltip/Tooltip.tsx
 import { clsx as clsx105 } from "clsx";
 import { cloneElement as cloneElement6, useId as useId16, useRef as useRef23, useState as useState30 } from "react";
-import { spacings as spacings7 } from "@refineui/tokens";
-import { resolveColorTokenValue as resolveColorTokenValue11 } from "@refineui/utilities/color";
+import { resolveColorTokenValue as resolveColorTokenValue12 } from "@refineui/utilities/color";
 import { getMergeableTriggerChild as getMergeableTriggerChild4 } from "@refineui/utilities/react";
 
 // src/components/Tooltip/style.ts
-import { shadows, spacings as spacings6, strokeWidths as strokeWidths3 } from "@refineui/tokens";
+import { spacings as spacings6, strokeWidths as strokeWidths3 } from "@refineui/tokens";
 import { clsx as clsx104 } from "clsx";
+var TOOLTIP_BEAK_W = foundationSizes.foundationSize160;
+var TOOLTIP_BEAK_H = foundationSizes.foundationSize80;
+var TOOLTIP_BEAK_OFFSET = foundationSizes.foundationSize80;
+var BEAK_BORDER_OVERLAP2 = strokeWidths3.strokeWidthThin;
+var gap = spacings6.sizeXSmall;
+var edgeInset = spacings6.sizeMedium;
 var tooltipStyles = {
   root: "relative inline-block",
   fallbackTrigger: "inline-flex outline-none",
+  /** Positions the floating stack (beak + panel), like PopOver `floatingRoot`. */
+  floating: "pointer-events-none absolute z-refineui-popup",
+  panelWrap: "relative inline-block max-w-refineui-tooltip-max-width",
+  beakWrap: "pointer-events-none absolute z-[1]",
   panel: clsx104(
     componentTextClass(componentTypographyTokens.tooltip),
-    "pointer-events-none absolute z-refineui-popup max-w-refineui-tooltip-max-width whitespace-nowrap rounded-refineui-medium px-refineui-size-medium py-refineui-size-small"
+    "relative z-0 box-border max-w-refineui-tooltip-max-width whitespace-nowrap rounded-refineui-medium border-refineui-thin px-refineui-size-medium py-refineui-size-small shadow-refineui-8"
   )
 };
-var gap = spacings6.sizeXSmall;
-var edgeInset = spacings6.sizeMedium;
-var arrowPanelOverlap = strokeWidths3.strokeWidthThin;
-function arrowOutset(halfPx) {
-  return `calc(-1 * ${halfPx}px + ${arrowPanelOverlap})`;
-}
-function dropShadowFromLayer(layer) {
-  const [x, y, blur, , ...colorTokens] = layer.split(" ");
-  return `drop-shadow(${x} ${y} ${blur} ${colorTokens.join(" ")})`;
+function tooltipPlacement(position) {
+  switch (position) {
+    case "Top":
+      return "top";
+    case "Left":
+      return "left";
+    case "Right":
+      return "right";
+    case "Bottom":
+    default:
+      return "bottom";
+  }
 }
-function dropShadowFromLevel(level) {
-  return `${dropShadowFromLayer(level.key)} ${dropShadowFromLayer(level.ambient)}`;
+function tooltipAlignKey(align) {
+  if (align === "Start") return "start";
+  if (align === "End") return "end";
+  return "center";
 }
-var tooltipPanelDropShadow = dropShadowFromLevel(shadows.shadow8Light);
-function tooltipPanelStyle(position, align) {
+function tooltipFloatingStyle(position, align) {
   switch (position) {
     case "Top":
       if (align === "Start") return { bottom: "100%", left: 0, marginBottom: gap };
@@ -14294,55 +14478,44 @@ function tooltipPanelStyle(position, align) {
       return {};
   }
 }
-function tooltipArrowStyle(position, align, bg, b) {
-  const baseBox = { position: "absolute", display: "block", width: 0, height: 0 };
-  const outset = arrowOutset(b);
-  if (position === "Top") {
-    const tri2 = {
-      ...baseBox,
-      bottom: outset,
-      borderLeft: `${b}px solid transparent`,
-      borderRight: `${b}px solid transparent`,
-      borderTop: `${b}px solid ${bg}`
-    };
-    if (align === "Start") return { ...tri2, left: edgeInset, marginLeft: 0 };
-    if (align === "End") return { ...tri2, right: edgeInset, left: "auto", marginLeft: 0 };
-    return { ...tri2, left: "50%", marginLeft: -b };
-  }
-  if (position === "Bottom") {
-    const tri2 = {
-      ...baseBox,
-      top: outset,
-      borderLeft: `${b}px solid transparent`,
-      borderRight: `${b}px solid transparent`,
-      borderBottom: `${b}px solid ${bg}`
-    };
-    if (align === "Start") return { ...tri2, left: edgeInset, marginLeft: 0 };
-    if (align === "End") return { ...tri2, right: edgeInset, left: "auto", marginLeft: 0 };
-    return { ...tri2, left: "50%", marginLeft: -b };
+function tooltipBeakWrapperStyle(position, align) {
+  const overlapOffset = `calc(-1 * ${TOOLTIP_BEAK_OFFSET} + ${BEAK_BORDER_OVERLAP2})`;
+  const placement = tooltipPlacement(position);
+  const a = tooltipAlignKey(align);
+  switch (placement) {
+    case "bottom":
+      if (a === "center") return { top: overlapOffset, left: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
+      if (a === "start") return { top: overlapOffset, left: edgeInset };
+      return { top: overlapOffset, right: edgeInset };
+    case "top":
+      if (a === "center") return { bottom: overlapOffset, left: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
+      if (a === "start") return { bottom: overlapOffset, left: edgeInset };
+      return { bottom: overlapOffset, right: edgeInset };
+    case "left":
+      if (a === "center") return { right: overlapOffset, top: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
+      if (a === "start") return { right: overlapOffset, top: edgeInset };
+      return { right: overlapOffset, bottom: edgeInset };
+    case "right":
+      if (a === "center") return { left: overlapOffset, top: `calc(50% - ${TOOLTIP_BEAK_W} / 2)` };
+      if (a === "start") return { left: overlapOffset, top: edgeInset };
+      return { left: overlapOffset, bottom: edgeInset };
+    default:
+      return {};
   }
-  if (position === "Left") {
-    const tri2 = {
-      ...baseBox,
-      right: outset,
-      borderTop: `${b}px solid transparent`,
-      borderBottom: `${b}px solid transparent`,
-      borderLeft: `${b}px solid ${bg}`
-    };
-    if (align === "Start") return { ...tri2, top: edgeInset, marginTop: 0 };
-    if (align === "End") return { ...tri2, bottom: edgeInset, top: "auto", marginTop: 0 };
-    return { ...tri2, top: "50%", marginTop: -b };
+}
+function tooltipBeakRotateDeg(position) {
+  switch (tooltipPlacement(position)) {
+    case "bottom":
+      return 0;
+    case "top":
+      return 180;
+    case "left":
+      return -90;
+    case "right":
+      return 90;
+    default:
+      return 0;
   }
-  const tri = {
-    ...baseBox,
-    left: outset,
-    borderTop: `${b}px solid transparent`,
-    borderBottom: `${b}px solid transparent`,
-    borderRight: `${b}px solid ${bg}`
-  };
-  if (align === "Start") return { ...tri, top: edgeInset, marginTop: 0 };
-  if (align === "End") return { ...tri, bottom: edgeInset, top: "auto", marginTop: 0 };
-  return { ...tri, top: "50%", marginTop: -b };
 }
 
 // src/components/Tooltip/Tooltip.tsx
@@ -14367,8 +14540,10 @@ function Tooltip({
     if (ctrlOpen === void 0) setInnerOpen(next);
     onOpenChange?.(next);
   };
-  const bg = resolveColorTokenValue11(componentColorTokens.tooltip.default.background);
-  const fg = resolveColorTokenValue11(componentColorTokens.tooltip.default.foreground);
+  const tipColor = componentColorTokens.tooltip.default;
+  const bg = resolveColorTokenValue12(tipColor.background);
+  const fg = resolveColorTokenValue12(tipColor.foreground);
+  const borderCol = resolveColorTokenValue12(tipColor.border);
   const clearTimer = () => {
     if (showTimer.current != null) {
       clearTimeout(showTimer.current);
@@ -14383,9 +14558,9 @@ function Tooltip({
     clearTimer();
     setOpen(false);
   };
-  const arrowHalf = Number.parseInt(spacings7.sizeXSmall, 10) || 6;
-  const panelPos = tooltipPanelStyle(position, align);
-  const arrow = tooltipArrowStyle(position, align, bg, arrowHalf);
+  const floatingStyle = tooltipFloatingStyle(position, align);
+  const beakWrapStyle = tooltipBeakWrapperStyle(position, align);
+  const beakRot = tooltipBeakRotateDeg(position);
   const describedBy = open ? tooltipId : void 0;
   const mergeEl = getMergeableTriggerChild4(trigger);
   let triggerNode;
@@ -14435,26 +14610,59 @@ function Tooltip({
   }
   return /* @__PURE__ */ jsxs31("div", { "data-refineui": "tooltip", className: clsx105(tooltipStyles.root, className), ...props, children: [
     triggerNode,
-    open && /* @__PURE__ */ jsxs31(
-      "div",
-      {
-        id: tooltipId,
-        role: "tooltip",
-        "data-position": position,
-        "data-align": align,
-        className: tooltipStyles.panel,
-        style: {
-          ...panelPos,
-          backgroundColor: bg,
-          color: fg,
-          filter: tooltipPanelDropShadow
-        },
-        children: [
-          content,
-          /* @__PURE__ */ jsx76("span", { "aria-hidden": true, style: arrow })
-        ]
-      }
-    )
+    open && /* @__PURE__ */ jsx76("div", { className: tooltipStyles.floating, style: floatingStyle, children: /* @__PURE__ */ jsxs31("div", { className: tooltipStyles.panelWrap, children: [
+      /* @__PURE__ */ jsx76(
+        "div",
+        {
+          className: tooltipStyles.beakWrap,
+          style: { ...beakWrapStyle, width: TOOLTIP_BEAK_W, height: TOOLTIP_BEAK_H },
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx76(
+            "div",
+            {
+              style: {
+                width: TOOLTIP_BEAK_W,
+                height: TOOLTIP_BEAK_H,
+                transform: `rotate(${beakRot}deg)`,
+                transformOrigin: "center center"
+              },
+              children: /* @__PURE__ */ jsxs31(
+                "svg",
+                {
+                  width: TOOLTIP_BEAK_W,
+                  height: TOOLTIP_BEAK_H,
+                  viewBox: "0 0 16 8",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  style: { display: "block" },
+                  children: [
+                    /* @__PURE__ */ jsx76("polygon", { points: "8,0 0,8 16,8", fill: borderCol }),
+                    /* @__PURE__ */ jsx76("polygon", { points: "8,2 2,8 14,8", fill: bg })
+                  ]
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx76(
+        "div",
+        {
+          id: tooltipId,
+          role: "tooltip",
+          "data-refineui": "tooltip-panel",
+          "data-position": position,
+          "data-align": align,
+          className: tooltipStyles.panel,
+          style: {
+            backgroundColor: bg,
+            color: fg,
+            borderColor: borderCol
+          },
+          children: content
+        }
+      )
+    ] }) })
   ] });
 }
 
@@ -14471,7 +14679,7 @@ import {
   useState as useState31
 } from "react";
 import { opacities } from "@refineui/tokens";
-import { resolveColorTokenValue as resolveColorTokenValue12 } from "@refineui/utilities/color";
+import { resolveColorTokenValue as resolveColorTokenValue13 } from "@refineui/utilities/color";
 
 // src/components/Chart/style.ts
 import { clsx as clsx106 } from "clsx";
@@ -14515,12 +14723,12 @@ var chartStyles = {
 };
 
 // src/components/Chart/utils.ts
-import { borderRadii, foundationSizes as foundationSizes3, spacings as spacings8 } from "@refineui/tokens";
+import { borderRadii, foundationSizes as foundationSizes3, spacings as spacings7 } from "@refineui/tokens";
 var CHART_VIEWBOX_WIDTH = 800;
 var CHART_VIEWBOX_HEIGHT = 320;
-var CHART_PLOT_PADDING_TOP = parseFloat(spacings8.sizeMedium);
-var CHART_PLOT_PADDING_BOTTOM = parseFloat(spacings8.sizeXXSmall);
-var CHART_PLOT_PADDING_X = parseFloat(spacings8.sizeMedium);
+var CHART_PLOT_PADDING_TOP = parseFloat(spacings7.sizeMedium);
+var CHART_PLOT_PADDING_BOTTOM = parseFloat(spacings7.sizeXXSmall);
+var CHART_PLOT_PADDING_X = parseFloat(spacings7.sizeMedium);
 var CHART_BAR_RADIUS = parseFloat(borderRadii.roundedMedium);
 var CHART_BAR_BAND_FILL = 0.5;
 var CHART_POINT_RADIUS = parseFloat(foundationSizes3.foundationSize40);
@@ -14704,19 +14912,19 @@ function useChartContext(component) {
   return value;
 }
 function seriesColorToken(color) {
-  return resolveColorTokenValue12(componentColorTokens.chart.series[color]);
+  return resolveColorTokenValue13(componentColorTokens.chart.series[color]);
 }
 function seriesSubtleToken(color) {
-  return resolveColorTokenValue12(componentColorTokens.chart.seriesSubtle[color]);
+  return resolveColorTokenValue13(componentColorTokens.chart.seriesSubtle[color]);
 }
 function gridStroke() {
-  return resolveColorTokenValue12(componentColorTokens.chart.grid);
+  return resolveColorTokenValue13(componentColorTokens.chart.grid);
 }
 function gridBaselineStroke() {
-  return resolveColorTokenValue12(componentColorTokens.chart.gridBaseline);
+  return resolveColorTokenValue13(componentColorTokens.chart.gridBaseline);
 }
 function pointStrokeColor() {
-  return resolveColorTokenValue12(componentColorTokens.chart.pointStroke);
+  return resolveColorTokenValue13(componentColorTokens.chart.pointStroke);
 }
 function resolveScale(values, max, fallbackMax = 100) {
   if (max !== void 0 && max > 0) return max;
@@ -15427,8 +15635,9 @@ export {
   breadcrumbLinkClassName,
   componentColorTokens,
   componentSizeFoundationKeys,
-  componentSizes,
+  componentSizes2 as componentSizes,
   componentTextClass,
+  componentTokens,
   componentTypographyTokens,
   defaultCommandFilter,
   dismissToast,