@aurora-ds/components 1.6.0 → 1.7.1

package/dist/esm/index.js

@@ -952,13 +952,13 @@ const LINK_STYLES = 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;
@@ -984,7 +984,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 && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(StartIcon, { width: '1em', height: '1em' }) })), children, EndIcon && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: 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 && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(StartIcon, { width: '1em', height: '1em' }) })), jsx(Text, { as: 'span', fontSize: fontSize, children: label }), EndIcon && (jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsx(EndIcon, { width: '1em', height: '1em' }) }))] }));
 };
 Link.displayName = 'Link';
 
@@ -5652,7 +5652,13 @@ const DRAWER_STYLES = 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`};
@@ -6551,6 +6557,13 @@ const AlertContext = createContext({
 });
 const useAlertContext = () => useContext(AlertContext);
 
+const VARIANT_DISMISS_COLOR = {
+    default: 'neutral',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    info: 'info',
+};
 const VARIANT_ICONS = {
     success: AlertSuccessIcon,
     error: AlertErrorIcon,
@@ -6563,7 +6576,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
@@ -6573,7 +6586,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 (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
+    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', justifyContent: onDismiss ? 'space-between' : undefined, children: [jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }), onDismiss && (jsx(IconButton, { icon: CloseIcon, ariaLabel: 'Dismiss', variant: 'text', color: VARIANT_DISMISS_COLOR[variant], size: 'sm', onClick: onDismiss }))] }));
 };
 AlertTitle.displayName = 'Alert.Title';
 
@@ -6583,6 +6596,22 @@ AlertTitle.displayName = 'Alert.Title';
 const AlertBody = ({ children }) => (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 }) => (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' },
@@ -6624,6 +6653,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 = createStyles((theme) => ({
@@ -6670,12 +6700,18 @@ const DIALOG_STYLES = 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' });
 
@@ -6772,6 +6808,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] = useState(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    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.
  *
@@ -7241,5 +7324,5 @@ const darkTheme = createTheme({
     breakpoints: themeBreakpoints,
 });
 
-export { Accordion, Alert, Article, Aside, Avatar, AvatarGroup, Backdrop, Badge, Box, Breadcrumb, Button, Card, Checkbox, DatePicker, DefaultErrorFallback, Dialog, Drawer, ErrorBoundary, Fab, Footer, Form, Grid, Header, Icon, IconButton, Image, InfoBubble, Link, LoaderScreen, Main, Menu, Nav, Pagination, RadioButton, RadioGroup, Section, Select, Separator, Skeleton, Stack, SvgImage, Switch, Table, Tabs, Text, TextField, ToggleButton, ToggleGroup, ToggleIconButton, Tooltip, darkTheme, lightTheme, useBodyScrollLock, useControllableState, useDrawerContext, useFocusTrap, useKeyPress, useListKeyNav, useMenuPosition, useMergedRefs, useTooltipPosition, useTransitionRender };
+export { Accordion, Alert, Article, Aside, Avatar, AvatarGroup, Backdrop, Badge, Box, Breadcrumb, Button, Card, Checkbox, DatePicker, DefaultErrorFallback, Dialog, Drawer, ErrorBoundary, Fab, Footer, Form, Grid, Header, Icon, IconButton, Image, InfoBubble, Link, LoaderScreen, Main, Menu, Nav, Pagination, RadioButton, RadioGroup, Section, Select, Separator, Skeleton, Stack, SvgImage, Switch, Table, Tabs, Text, TextField, ToggleButton, ToggleGroup, ToggleIconButton, Tooltip, darkTheme, lightTheme, useBodyScrollLock, useBreakpointMax, useBreakpointMin, useControllableState, useDrawerContext, useFocusTrap, useKeyPress, useListKeyNav, useMediaQuery, useMenuPosition, useMergedRefs, useTooltipPosition, useTransitionRender };
 //# sourceMappingURL=index.js.map