@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/esm/index.js
CHANGED
|
@@ -254,7 +254,7 @@ const skeletonShimmerAnimation = keyframes({
|
|
|
254
254
|
});
|
|
255
255
|
|
|
256
256
|
/** Default duration in milliseconds for mount/unmount transition animations. */
|
|
257
|
-
const DEFAULT_TRANSITION_DURATION_MS =
|
|
257
|
+
const DEFAULT_TRANSITION_DURATION_MS = 150;
|
|
258
258
|
const DEFAULT_BUTTON_HEIGHT = 40;
|
|
259
259
|
const DEFAULT_DRAWER_ITEM_SIZE = 40;
|
|
260
260
|
/** Drawer widths (px) — single source of truth for both the Drawer and its items. */
|
|
@@ -5400,6 +5400,12 @@ const Grid = ({ display = 'grid', columns, rows, autoFlow, autoColumns, autoRows
|
|
|
5400
5400
|
};
|
|
5401
5401
|
Grid.displayName = 'Grid';
|
|
5402
5402
|
|
|
5403
|
+
const HEADER_STYLES = createStyles((theme) => ({
|
|
5404
|
+
withBorder: () => ({
|
|
5405
|
+
borderBottom: `1px solid ${theme.colors.borderMain}`,
|
|
5406
|
+
}),
|
|
5407
|
+
}), { id: 'header' });
|
|
5408
|
+
|
|
5403
5409
|
/**
|
|
5404
5410
|
* Semantic `<header>` enriched with the same token-aware style props as `Box`.
|
|
5405
5411
|
*
|
|
@@ -5408,11 +5414,12 @@ Grid.displayName = 'Grid';
|
|
|
5408
5414
|
* `banner` landmark when it is a direct child of `<body>`.
|
|
5409
5415
|
*
|
|
5410
5416
|
* @example <Header padding="md" display="flex" alignItems="center" gap="sm">…</Header>
|
|
5417
|
+
* @example <Header withBorder>…</Header>
|
|
5411
5418
|
*/
|
|
5412
|
-
const Header = ({ ref, style, className, children, ...props }) => {
|
|
5419
|
+
const Header = ({ ref, style, className, children, withBorder = true, ...props }) => {
|
|
5413
5420
|
const { styleProps, restProps } = extractBoxStyleProps(props);
|
|
5414
5421
|
const generatedClassName = BOX_STYLES.root(styleProps);
|
|
5415
|
-
return (jsx("header", { ref: ref, className: cx(generatedClassName, className), style: style, ...restProps, children: children }));
|
|
5422
|
+
return (jsx("header", { ref: ref, className: cx(generatedClassName, withBorder && HEADER_STYLES.withBorder(), className), style: style, ...restProps, children: children }));
|
|
5416
5423
|
};
|
|
5417
5424
|
Header.displayName = 'Header';
|
|
5418
5425
|
|
|
@@ -5749,6 +5756,12 @@ const BACKDROP_STYLES = createStyles((theme) => ({
|
|
|
5749
5756
|
const Backdrop = ({ visible, onClick }) => (jsx("div", { className: cx(BACKDROP_STYLES.root, visible && BACKDROP_STYLES.visible), onClick: onClick, "aria-hidden": true }));
|
|
5750
5757
|
Backdrop.displayName = 'Backdrop';
|
|
5751
5758
|
|
|
5759
|
+
/**
|
|
5760
|
+
* Returns `true` if the user has requested reduced motion at the OS/browser level.
|
|
5761
|
+
* Falls back to `false` in environments where `matchMedia` is unavailable (SSR, tests).
|
|
5762
|
+
*/
|
|
5763
|
+
const getPrefersReducedMotion = () => typeof window !== 'undefined' &&
|
|
5764
|
+
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
5752
5765
|
/**
|
|
5753
5766
|
* Manages mount/unmount transitions with a two-phase approach (visible → fading-in).
|
|
5754
5767
|
*
|
|
@@ -5762,10 +5775,15 @@ Backdrop.displayName = 'Backdrop';
|
|
|
5762
5775
|
* Closing sequence:
|
|
5763
5776
|
* `isFadingIn=false` → CSS transition plays → after `duration` ms → `isVisible=false`.
|
|
5764
5777
|
*
|
|
5778
|
+
* When `prefers-reduced-motion: reduce` is active the effective duration is forced to
|
|
5779
|
+
* `0` so the element is removed from the DOM immediately after hiding, in sync with
|
|
5780
|
+
* the near-instant CSS transition set by the global `globals.css` rule.
|
|
5781
|
+
*
|
|
5765
5782
|
* @param isOpen - Whether the element should be shown.
|
|
5766
5783
|
* @param duration - Transition duration in milliseconds (defaults to `DEFAULT_TRANSITION_DURATION_MS`).
|
|
5767
5784
|
*/
|
|
5768
5785
|
const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
|
|
5786
|
+
const effectiveDuration = getPrefersReducedMotion() ? 0 : duration;
|
|
5769
5787
|
const [isVisible, setIsVisible] = useState(isOpen);
|
|
5770
5788
|
const [isFadingIn, setIsFadingIn] = useState(isOpen);
|
|
5771
5789
|
// Mount synchronously before paint so the element is in the DOM at opacity:0
|
|
@@ -5790,10 +5808,10 @@ const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS)
|
|
|
5790
5808
|
}
|
|
5791
5809
|
else {
|
|
5792
5810
|
setIsFadingIn(false);
|
|
5793
|
-
const timeout = setTimeout(() => setIsVisible(false),
|
|
5811
|
+
const timeout = setTimeout(() => setIsVisible(false), effectiveDuration);
|
|
5794
5812
|
return () => clearTimeout(timeout);
|
|
5795
5813
|
}
|
|
5796
|
-
}, [isOpen,
|
|
5814
|
+
}, [isOpen, effectiveDuration]);
|
|
5797
5815
|
return { isVisible, isFadingIn };
|
|
5798
5816
|
};
|
|
5799
5817
|
|
|
@@ -7181,9 +7199,9 @@ const themeSpacing = {
|
|
|
7181
7199
|
* Default transition tokens
|
|
7182
7200
|
*/
|
|
7183
7201
|
const themeTransition = {
|
|
7184
|
-
fast: '
|
|
7185
|
-
normal: '
|
|
7186
|
-
slow: '
|
|
7202
|
+
fast: '100ms ease-in-out',
|
|
7203
|
+
normal: '200ms ease-in-out',
|
|
7204
|
+
slow: '300ms ease-in-out',
|
|
7187
7205
|
};
|
|
7188
7206
|
|
|
7189
7207
|
/**
|