@aurora-ds/components 1.6.0 → 1.7.1

package/dist/cjs/index.js

@@ -972,13 +972,13 @@ const LINK_STYLES = theme.createStyles((theme) => ({
  * In that case the component stays accessible: it gets `role="link"`,
  * `tabIndex={0}` and keyboard Enter support automatically.
  *
- * @example <Link href='/about'>About</Link>
- * @example <Link href='https://example.com' external>External site</Link>
- * @example <Link href='/profile' underline='always' startIcon={UserIcon}>Profile</Link>
- * @example <Link href='/terms' underline='none'>Terms</Link>
- * @example <Link onClick={() => navigate('/about')}>About (SPA)</Link>
+ * @example <Link href='/about' label='About' />
+ * @example <Link href='https://example.com' label='External site' external />
+ * @example <Link href='/profile' underline='always' startIcon={UserIcon} label='Profile' />
+ * @example <Link href='/terms' underline='none' label='Terms' />
+ * @example <Link onClick={() => navigate('/about')} label='About (SPA)' />
  */
-const Link = ({ ref, underline = 'hover', color = 'default', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, children, className, href, onClick, onKeyDown, ...rest }) => {
+const Link = ({ ref, label, fontSize = 'sm', underline = 'hover', color = 'default', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, className, href, onClick, onKeyDown, ...rest }) => {
     // An <a> without href has no implicit ARIA role and is not focusable.
     // When used for SPA navigation (onClick only), we restore both behaviours.
     const hasHref = !!href;
@@ -1004,7 +1004,7 @@ const Link = ({ ref, underline = 'hover', color = 'default', external = false, d
         // With href: the browser handles focusability natively (no tabIndex needed).
         tabIndex: disabled ? -1 : (!hasHref ? 0 : undefined), 
         // Without href: <a> has no implicit ARIA role — add role="link" explicitly.
-        role: !hasHref ? 'link' : undefined, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [StartIcon && (jsxRuntime.jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsxRuntime.jsx(StartIcon, { width: '1em', height: '1em' }) })), children, EndIcon && (jsxRuntime.jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsxRuntime.jsx(EndIcon, { width: '1em', height: '1em' }) }))] }));
+        role: !hasHref ? 'link' : undefined, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [StartIcon && (jsxRuntime.jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsxRuntime.jsx(StartIcon, { width: '1em', height: '1em' }) })), jsxRuntime.jsx(Text, { as: 'span', fontSize: fontSize, children: label }), EndIcon && (jsxRuntime.jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsxRuntime.jsx(EndIcon, { width: '1em', height: '1em' }) }))] }));
 };
 Link.displayName = 'Link';
 
@@ -5672,7 +5672,13 @@ const DRAWER_STYLES = theme.createStyles((theme) => ({
  * Keep in sync with themeBreakpoints.
  */
 const BREAKPOINTS = {
-    sm: 640};
+    xs: 480,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
 /** Max-width media query strings (max = breakpoint - 1px). */
 const MEDIA_MAX = {
     sm: `max-width: ${BREAKPOINTS.sm - 1}px`};
@@ -6571,6 +6577,13 @@ const AlertContext = React.createContext({
 });
 const useAlertContext = () => React.useContext(AlertContext);
 
+const VARIANT_DISMISS_COLOR = {
+    default: 'neutral',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    info: 'info',
+};
 const VARIANT_ICONS = {
     success: AlertSuccessIcon,
     error: AlertErrorIcon,
@@ -6583,7 +6596,7 @@ const isSvgComponent = (value) => typeof value === 'function';
  * Alert title row: renders the variant icon alongside the title text.
  * Must be used inside an `<Alert>` component.
  */
-const AlertTitle = ({ children, icon }) => {
+const AlertTitle = ({ children, icon, onDismiss }) => {
     const { variant, accentColor } = useAlertContext();
     // Resolve which icon to render:
     // - custom icon prop always takes precedence over the built-in variant icon
@@ -6593,7 +6606,7 @@ const AlertTitle = ({ children, icon }) => {
     const ResolvedIcon = icon && isSvgComponent(icon) ? icon : (icon === undefined ? (builtInIcon ?? null) : null);
     const customNode = icon && !isSvgComponent(icon) ? icon : null;
     const hasIcon = ResolvedIcon !== null || customNode !== null;
-    return (jsxRuntime.jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsxRuntime.jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsxRuntime.jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsxRuntime.jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
+    return (jsxRuntime.jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', justifyContent: onDismiss ? 'space-between' : undefined, children: [jsxRuntime.jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsxRuntime.jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsxRuntime.jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsxRuntime.jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }), onDismiss && (jsxRuntime.jsx(IconButton, { icon: CloseIcon, ariaLabel: 'Dismiss', variant: 'text', color: VARIANT_DISMISS_COLOR[variant], size: 'sm', onClick: onDismiss }))] }));
 };
 AlertTitle.displayName = 'Alert.Title';
 
@@ -6603,6 +6616,22 @@ AlertTitle.displayName = 'Alert.Title';
 const AlertBody = ({ children }) => (jsxRuntime.jsx(Text, { as: 'p', fontSize: 'sm', color: 'textSecondary', children: children }));
 AlertBody.displayName = 'Alert.Body';
 
+/**
+ * Alert actions row: renders action elements (buttons, links…) at the bottom of an `<Alert>`.
+ * Must be used inside an `<Alert>` component.
+ *
+ * @example
+ * <Alert variant="error">
+ *   <Alert.Title>Something went wrong</Alert.Title>
+ *   <Alert.Body>Please try again.</Alert.Body>
+ *   <Alert.Actions>
+ *     <Button size="sm" variant="outlined" color="error">Retry</Button>
+ *   </Alert.Actions>
+ * </Alert>
+ */
+const AlertActions = ({ children }) => (jsxRuntime.jsx(Stack, { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'end', gap: 'sm', paddingTop: 'xs', children: children }));
+AlertActions.displayName = 'Alert.Actions';
+
 const VARIANT_TOKENS = {
     default: { backgroundColor: 'surfacePaper', borderColor: 'defaultMain', accentColor: 'defaultActive' },
     success: { backgroundColor: 'successSubtle', borderColor: 'successMain', accentColor: 'successActive' },
@@ -6644,6 +6673,7 @@ AlertBase.displayName = 'Alert';
 const Alert = AlertBase;
 Alert.Title = AlertTitle;
 Alert.Body = AlertBody;
+Alert.Actions = AlertActions;
 
 const TRANSITION = `${DEFAULT_TRANSITION_DURATION_MS}ms ease`;
 const DIALOG_STYLES = theme.createStyles((theme) => ({
@@ -6690,12 +6720,18 @@ const DIALOG_STYLES = theme.createStyles((theme) => ({
             transform: 'translateY(0)',
         },
     },
-    // Full-height variant on mobile (applied via `fullscreen` prop)
+    // Full-viewport variant (applied via `fullscreen` prop — all screen sizes)
     panelFullscreen: {
-        [`@media (${MEDIA_MAX.sm})`]: {
-            height: '100dvh',
-            maxHeight: 'none',
-        },
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        margin: 0,
+        width: '100%',
+        height: '100dvh',
+        maxWidth: 'none',
+        maxHeight: 'none',
+        borderRadius: 0,
     },
 }), { id: 'dialog' });
 
@@ -6792,6 +6828,53 @@ const Dialog = DialogBase;
 Dialog.Header = DialogHeader;
 Dialog.Body = DialogBody;
 
+/**
+ * Listens to a CSS media query string and returns whether it currently matches.
+ *
+ * @param query - A valid CSS media query string, e.g. `'(max-width: 639px)'`.
+ * @returns `true` when the media query matches, `false` otherwise.
+ *
+ * @example
+ * const isMobile = useMediaQuery('(max-width: 639px)')
+ */
+const useMediaQuery = (query) => {
+    const [matches, setMatches] = React.useState(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const mediaQueryList = window.matchMedia(query);
+        setMatches(mediaQueryList.matches);
+        const listener = (event) => setMatches(event.matches);
+        mediaQueryList.addEventListener('change', listener);
+        return () => mediaQueryList.removeEventListener('change', listener);
+    }, [query]);
+    return matches;
+};
+/**
+ * Returns `true` when the viewport width is **below** the given breakpoint (mobile-first max).
+ *
+ * @param breakpoint - One of the Aurora breakpoints: `xs` | `sm` | `md` | `lg` | `xl` | `2xl`.
+ *
+ * @example
+ * const isMobile = useBreakpointMax('sm') // true when width < 640px
+ */
+const useBreakpointMax = (breakpoint) => useMediaQuery(`(max-width: ${BREAKPOINTS[breakpoint] - 1}px)`);
+/**
+ * Returns `true` when the viewport width is **at or above** the given breakpoint.
+ *
+ * @param breakpoint - One of the Aurora breakpoints: `xs` | `sm` | `md` | `lg` | `xl` | `2xl`.
+ *
+ * @example
+ * const isDesktop = useBreakpointMin('md') // true when width >= 768px
+ */
+const useBreakpointMin = (breakpoint) => useMediaQuery(`(min-width: ${BREAKPOINTS[breakpoint]}px)`);
+
 /**
  * Manages keyboard navigation for a listbox-style menu.
  *
@@ -7314,11 +7397,14 @@ exports.Tooltip = Tooltip;
 exports.darkTheme = darkTheme;
 exports.lightTheme = lightTheme;
 exports.useBodyScrollLock = useBodyScrollLock;
+exports.useBreakpointMax = useBreakpointMax;
+exports.useBreakpointMin = useBreakpointMin;
 exports.useControllableState = useControllableState;
 exports.useDrawerContext = useDrawerContext;
 exports.useFocusTrap = useFocusTrap;
 exports.useKeyPress = useKeyPress;
 exports.useListKeyNav = useListKeyNav;
+exports.useMediaQuery = useMediaQuery;
 exports.useMenuPosition = useMenuPosition;
 exports.useMergedRefs = useMergedRefs;
 exports.useTooltipPosition = useTooltipPosition;