@aurora-ds/components 1.7.10 → 1.7.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.css +1 -0
- package/dist/cjs/index.js +26 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.css +1 -0
- package/dist/esm/index.js +26 -8
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +14 -2
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
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/cjs/index.js
CHANGED
|
@@ -274,7 +274,7 @@ const skeletonShimmerAnimation = theme.keyframes({
|
|
|
274
274
|
});
|
|
275
275
|
|
|
276
276
|
/** Default duration in milliseconds for mount/unmount transition animations. */
|
|
277
|
-
const DEFAULT_TRANSITION_DURATION_MS =
|
|
277
|
+
const DEFAULT_TRANSITION_DURATION_MS = 150;
|
|
278
278
|
const DEFAULT_BUTTON_HEIGHT = 40;
|
|
279
279
|
const DEFAULT_DRAWER_ITEM_SIZE = 40;
|
|
280
280
|
/** Drawer widths (px) — single source of truth for both the Drawer and its items. */
|
|
@@ -5420,6 +5420,12 @@ const Grid = ({ display = 'grid', columns, rows, autoFlow, autoColumns, autoRows
|
|
|
5420
5420
|
};
|
|
5421
5421
|
Grid.displayName = 'Grid';
|
|
5422
5422
|
|
|
5423
|
+
const HEADER_STYLES = theme.createStyles((theme) => ({
|
|
5424
|
+
withBorder: () => ({
|
|
5425
|
+
borderBottom: `1px solid ${theme.colors.borderMain}`,
|
|
5426
|
+
}),
|
|
5427
|
+
}), { id: 'header' });
|
|
5428
|
+
|
|
5423
5429
|
/**
|
|
5424
5430
|
* Semantic `<header>` enriched with the same token-aware style props as `Box`.
|
|
5425
5431
|
*
|
|
@@ -5428,11 +5434,12 @@ Grid.displayName = 'Grid';
|
|
|
5428
5434
|
* `banner` landmark when it is a direct child of `<body>`.
|
|
5429
5435
|
*
|
|
5430
5436
|
* @example <Header padding="md" display="flex" alignItems="center" gap="sm">…</Header>
|
|
5437
|
+
* @example <Header withBorder>…</Header>
|
|
5431
5438
|
*/
|
|
5432
|
-
const Header = ({ ref, style, className, children, ...props }) => {
|
|
5439
|
+
const Header = ({ ref, style, className, children, withBorder = true, ...props }) => {
|
|
5433
5440
|
const { styleProps, restProps } = extractBoxStyleProps(props);
|
|
5434
5441
|
const generatedClassName = BOX_STYLES.root(styleProps);
|
|
5435
|
-
return (jsxRuntime.jsx("header", { ref: ref, className: theme.cx(generatedClassName, className), style: style, ...restProps, children: children }));
|
|
5442
|
+
return (jsxRuntime.jsx("header", { ref: ref, className: theme.cx(generatedClassName, withBorder && HEADER_STYLES.withBorder(), className), style: style, ...restProps, children: children }));
|
|
5436
5443
|
};
|
|
5437
5444
|
Header.displayName = 'Header';
|
|
5438
5445
|
|
|
@@ -5769,6 +5776,12 @@ const BACKDROP_STYLES = theme.createStyles((theme) => ({
|
|
|
5769
5776
|
const Backdrop = ({ visible, onClick }) => (jsxRuntime.jsx("div", { className: theme.cx(BACKDROP_STYLES.root, visible && BACKDROP_STYLES.visible), onClick: onClick, "aria-hidden": true }));
|
|
5770
5777
|
Backdrop.displayName = 'Backdrop';
|
|
5771
5778
|
|
|
5779
|
+
/**
|
|
5780
|
+
* Returns `true` if the user has requested reduced motion at the OS/browser level.
|
|
5781
|
+
* Falls back to `false` in environments where `matchMedia` is unavailable (SSR, tests).
|
|
5782
|
+
*/
|
|
5783
|
+
const getPrefersReducedMotion = () => typeof window !== 'undefined' &&
|
|
5784
|
+
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
5772
5785
|
/**
|
|
5773
5786
|
* Manages mount/unmount transitions with a two-phase approach (visible → fading-in).
|
|
5774
5787
|
*
|
|
@@ -5782,10 +5795,15 @@ Backdrop.displayName = 'Backdrop';
|
|
|
5782
5795
|
* Closing sequence:
|
|
5783
5796
|
* `isFadingIn=false` → CSS transition plays → after `duration` ms → `isVisible=false`.
|
|
5784
5797
|
*
|
|
5798
|
+
* When `prefers-reduced-motion: reduce` is active the effective duration is forced to
|
|
5799
|
+
* `0` so the element is removed from the DOM immediately after hiding, in sync with
|
|
5800
|
+
* the near-instant CSS transition set by the global `globals.css` rule.
|
|
5801
|
+
*
|
|
5785
5802
|
* @param isOpen - Whether the element should be shown.
|
|
5786
5803
|
* @param duration - Transition duration in milliseconds (defaults to `DEFAULT_TRANSITION_DURATION_MS`).
|
|
5787
5804
|
*/
|
|
5788
5805
|
const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
|
|
5806
|
+
const effectiveDuration = getPrefersReducedMotion() ? 0 : duration;
|
|
5789
5807
|
const [isVisible, setIsVisible] = React.useState(isOpen);
|
|
5790
5808
|
const [isFadingIn, setIsFadingIn] = React.useState(isOpen);
|
|
5791
5809
|
// Mount synchronously before paint so the element is in the DOM at opacity:0
|
|
@@ -5810,10 +5828,10 @@ const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS)
|
|
|
5810
5828
|
}
|
|
5811
5829
|
else {
|
|
5812
5830
|
setIsFadingIn(false);
|
|
5813
|
-
const timeout = setTimeout(() => setIsVisible(false),
|
|
5831
|
+
const timeout = setTimeout(() => setIsVisible(false), effectiveDuration);
|
|
5814
5832
|
return () => clearTimeout(timeout);
|
|
5815
5833
|
}
|
|
5816
|
-
}, [isOpen,
|
|
5834
|
+
}, [isOpen, effectiveDuration]);
|
|
5817
5835
|
return { isVisible, isFadingIn };
|
|
5818
5836
|
};
|
|
5819
5837
|
|
|
@@ -7201,9 +7219,9 @@ const themeSpacing = {
|
|
|
7201
7219
|
* Default transition tokens
|
|
7202
7220
|
*/
|
|
7203
7221
|
const themeTransition = {
|
|
7204
|
-
fast: '
|
|
7205
|
-
normal: '
|
|
7206
|
-
slow: '
|
|
7222
|
+
fast: '100ms ease-in-out',
|
|
7223
|
+
normal: '200ms ease-in-out',
|
|
7224
|
+
slow: '300ms ease-in-out',
|
|
7207
7225
|
};
|
|
7208
7226
|
|
|
7209
7227
|
/**
|