@aurora-ds/components 1.7.11 → 1.7.13

package/dist/esm/index.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");*,:after,:before{box-sizing:border-box}body{font-family:Inter,sans-serif}

package/dist/esm/index.js

@@ -254,7 +254,7 @@ const skeletonShimmerAnimation = keyframes({
 });
 
 /** Default duration in milliseconds for mount/unmount transition animations. */
-const DEFAULT_TRANSITION_DURATION_MS = 250;
+const DEFAULT_TRANSITION_DURATION_MS = 150;
 const DEFAULT_BUTTON_HEIGHT = 40;
 const DEFAULT_DRAWER_ITEM_SIZE = 40;
 /** Drawer widths (px) — single source of truth for both the Drawer and its items. */
@@ -5648,7 +5648,7 @@ const DRAWER_STYLES = createStyles((theme) => ({
         display: 'flex',
         flexDirection: 'column',
         width: isExpanded ? EXPANDED_DRAWER_WIDTH : COLLAPSED_DRAWER_WIDTH,
-        transition: `width ${theme.transition.fast}`,
+        transition: `width ${theme.transition.normal}`,
         overflow: 'hidden',
         backgroundColor: theme.colors.surfacePaper,
         borderRight: `1px solid ${theme.colors.borderMain}`,
@@ -5756,6 +5756,12 @@ const BACKDROP_STYLES = createStyles((theme) => ({
 const Backdrop = ({ visible, onClick }) => (jsx("div", { className: cx(BACKDROP_STYLES.root, visible && BACKDROP_STYLES.visible), onClick: onClick, "aria-hidden": true }));
 Backdrop.displayName = 'Backdrop';
 
+/**
+ * Returns `true` if the user has requested reduced motion at the OS/browser level.
+ * Falls back to `false` in environments where `matchMedia` is unavailable (SSR, tests).
+ */
+const getPrefersReducedMotion = () => typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 /**
  * Manages mount/unmount transitions with a two-phase approach (visible → fading-in).
  *
@@ -5769,10 +5775,15 @@ Backdrop.displayName = 'Backdrop';
  * Closing sequence:
  *   `isFadingIn=false` → CSS transition plays → after `duration` ms → `isVisible=false`.
  *
+ * When `prefers-reduced-motion: reduce` is active the effective duration is forced to
+ * `0` so the element is removed from the DOM immediately after hiding, in sync with
+ * the near-instant CSS transition set by the global `globals.css` rule.
+ *
  * @param isOpen - Whether the element should be shown.
  * @param duration - Transition duration in milliseconds (defaults to `DEFAULT_TRANSITION_DURATION_MS`).
  */
 const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
+    const effectiveDuration = getPrefersReducedMotion() ? 0 : duration;
     const [isVisible, setIsVisible] = useState(isOpen);
     const [isFadingIn, setIsFadingIn] = useState(isOpen);
     // Mount synchronously before paint so the element is in the DOM at opacity:0
@@ -5797,10 +5808,10 @@ const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS)
         }
         else {
             setIsFadingIn(false);
-            const timeout = setTimeout(() => setIsVisible(false), duration);
+            const timeout = setTimeout(() => setIsVisible(false), effectiveDuration);
             return () => clearTimeout(timeout);
         }
-    }, [isOpen, duration]);
+    }, [isOpen, effectiveDuration]);
     return { isVisible, isFadingIn };
 };
 
@@ -5833,7 +5844,7 @@ const DRAWER_ITEM_STYLES = createStyles((theme) => ({
         outline: 'none',
         textDecoration: 'none',
         boxSizing: 'border-box',
-        transition: `width ${theme.transition.fast}, background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
+        transition: `width ${theme.transition.normal}, background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         height: DEFAULT_DRAWER_ITEM_SIZE,
@@ -5897,7 +5908,7 @@ const DRAWER_ITEM_STYLES = createStyles((theme) => ({
  */
 const DrawerItem = ({ startIcon, label, selected = false, endContent, href, onClick, disabled = false, ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaControls, ariaExpanded, ariaHasPopup, ariaCurrent, }) => {
     const { isExpanded } = useDrawerContext();
-    const { isVisible: isLabelVisible, isFadingIn: isLabelFadingIn } = useTransitionRender(isExpanded);
+    const { isVisible: isLabelVisible, isFadingIn: isLabelFadingIn } = useTransitionRender(isExpanded, 200);
     const rootClassName = DRAWER_ITEM_STYLES.root({ selected, isExpanded });
     const computedAriaLabel = ariaLabel ?? (!isExpanded ? label : undefined);
     const computedAriaCurrent = ariaCurrent ?? (selected ? 'page' : undefined);
@@ -7188,9 +7199,9 @@ const themeSpacing = {
  * Default transition tokens
  */
 const themeTransition = {
-    fast: '150ms ease-in-out',
-    normal: '250ms ease-in-out',
-    slow: '350ms ease-in-out',
+    fast: '100ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
 };
 
 /**