@astryxdesign/core 0.1.2 → 0.1.3-canary.6d57c8d

package/src/VisuallyHidden/VisuallyHidden.test.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file VisuallyHidden.test.tsx
+ * @input Uses vitest, @testing-library/react, VisuallyHidden component
+ * @output Unit tests for VisuallyHidden rendering + a11y behavior
+ * @position Testing; validates VisuallyHidden.tsx implementation
+ *
+ * SYNC: When VisuallyHidden.tsx changes, update tests to match new behavior
+ */
+
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {createRef} from 'react';
+import {VisuallyHidden} from './VisuallyHidden';
+
+describe('VisuallyHidden', () => {
+  it('renders its children in the accessibility tree', () => {
+    render(<VisuallyHidden>Delete incident</VisuallyHidden>);
+    // Present in the a11y tree (getByText finds it — it is not display:none).
+    expect(screen.getByText('Delete incident')).toBeInTheDocument();
+  });
+
+  it('renders a <span> by default', () => {
+    render(<VisuallyHidden>Label</VisuallyHidden>);
+    expect(screen.getByText('Label').tagName).toBe('SPAN');
+  });
+
+  it('renders a custom element via the `as` prop', () => {
+    render(
+      <VisuallyHidden as="div" aria-live="polite">
+        Moved task to Done
+      </VisuallyHidden>,
+    );
+    const el = screen.getByText('Moved task to Done');
+    expect(el.tagName).toBe('DIV');
+    expect(el).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('applies the clip styles that hide it visually', () => {
+    render(<VisuallyHidden>Hidden</VisuallyHidden>);
+    const el = screen.getByText('Hidden');
+    // jsdom does not apply the stylesheet, but the StyleX class is attached.
+    expect(el.getAttribute('class')).toBeTruthy();
+    // It must NOT be display:none / hidden — it stays in the a11y tree.
+    expect(el).not.toHaveAttribute('hidden');
+  });
+
+  it('forwards a ref to the rendered element', () => {
+    const ref = createRef<HTMLElement>();
+    render(<VisuallyHidden ref={ref}>Ref target</VisuallyHidden>);
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+    expect(ref.current?.textContent).toBe('Ref target');
+  });
+
+  it('passes through arbitrary BaseProps (id, role, data-*)', () => {
+    render(
+      <VisuallyHidden id="announcer" role="status" data-testid="vh">
+        Status
+      </VisuallyHidden>,
+    );
+    const el = screen.getByTestId('vh');
+    expect(el).toHaveAttribute('id', 'announcer');
+    expect(el).toHaveAttribute('role', 'status');
+  });
+
+  it('gives an icon-only control an accessible name', () => {
+    render(
+      <button type="button">
+        <span aria-hidden="true">🗑️</span>
+        <VisuallyHidden>Delete</VisuallyHidden>
+      </button>,
+    );
+    expect(screen.getByRole('button', {name: 'Delete'})).toBeInTheDocument();
+  });
+});

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,113 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file VisuallyHidden.tsx
+ * @input Uses React createElement/ElementType, stylex
+ * @output Exports VisuallyHidden component and VisuallyHiddenProps
+ * @position Accessibility primitive; renders content in the a11y tree while
+ *   hiding it visually (icon-only labels, aria-live regions, SR-only context)
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ * - /packages/core/src/VisuallyHidden/VisuallyHidden.test.tsx
+ * - /apps/storybook/stories/VisuallyHidden.stories.tsx
+ */
+
+import {createElement, type ElementType, type ReactNode, type Ref} from 'react';
+import type {BaseProps} from '../BaseProps';
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * VisuallyHidden is deliberately styling-free: it exists to *not* be seen, so it
+ * intentionally omits `xstyle`/`className`/`style`. The clip block is fixed and
+ * non-overridable — styling a visually-hidden node is always a mistake. The
+ * accessibility pass-throughs from `BaseProps` (`aria-*`, `role`, `id`,
+ * `data-*`, event handlers) remain, since the live-region use case needs them.
+ */
+export interface VisuallyHiddenProps extends Omit<
+  BaseProps<HTMLElement>,
+  'className' | 'style'
+> {
+  /** Ref forwarded to the rendered element. */
+  ref?: React.Ref<HTMLElement>;
+
+  /** Content to expose to assistive technology while hidden from sight. */
+  children: ReactNode;
+
+  /**
+   * HTML tag to render as. Defaults to `'span'` (inline) for the common
+   * icon-label case; pass a block element such as `'div'` when wrapping block
+   * content or hosting an `aria-live` region. This is a structural choice, not
+   * a visual one.
+   *
+   * @default 'span'
+   */
+  as?: ElementType;
+}
+
+const styles = stylex.create({
+  // Canonical "visually hidden" clip block. Uses `clip: rect(...)` (not
+  // clip-path) for the widest assistive-tech/browser support. `inset` pins the
+  // 1px box to the top-left so a positioned ancestor cannot reveal it, and
+  // pointer/selection are disabled so the hidden node can't catch clicks or be
+  // text-selected.
+  visuallyHidden: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    borderStyle: 'none',
+    insetBlockStart: 0,
+    insetInlineStart: 0,
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+});
+
+/**
+ * Renders its children in the accessibility tree while hiding them visually.
+ *
+ * Use for content that assistive technology must perceive but sighted users
+ * should not see: accessible names for icon-only controls, `aria-live`
+ * announcement regions, and supplementary screen-reader context.
+ *
+ * @example
+ * ```
+ * // Accessible name for an icon-only button
+ * <IconButton icon="trash" label="">
+ *   <VisuallyHidden>Delete incident</VisuallyHidden>
+ * </IconButton>
+ *
+ * // Live region for announcements
+ * <VisuallyHidden as="div" aria-live="polite">
+ *   {`Moved ${task} to ${column}`}
+ * </VisuallyHidden>
+ * ```
+ */
+export function VisuallyHidden({
+  children,
+  as: element = 'span',
+  ref,
+  ...props
+}: VisuallyHiddenProps) {
+  return createElement(
+    element,
+    {
+      ref: ref as Ref<Element>,
+      // Spread consumer props (aria-*, role, id, data-*, handlers) first, then
+      // the fixed clip styles, so the visually-hidden class can never be
+      // displaced. There is no consumer className/style to merge — by design.
+      ...props,
+      ...stylex.props(styles.visuallyHidden),
+    },
+    children,
+  );
+}
+
+VisuallyHidden.displayName = 'VisuallyHidden';

package/src/VisuallyHidden/index.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports from VisuallyHidden.tsx
+ * @output Exports VisuallyHidden component and props type
+ * @position Package entry point for VisuallyHidden
+ *
+ * SYNC: When modified, update /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ */
+
+export {VisuallyHidden} from './VisuallyHidden';
+export type {VisuallyHiddenProps} from './VisuallyHidden';

package/src/docs-script.test.mjs

@@ -0,0 +1,50 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Subprocess smoke tests for the zero-dependency docs script.
+ *
+ * `docs.mjs` resolves the package directory from `import.meta.url`. Using
+ * `new URL(...).pathname` there breaks on Windows (drive-letter paths come
+ * back as `/D:/...`), which made `--list` print nothing and component
+ * lookups crash with ENOENT. These tests spawn the script as a real
+ * subprocess from a neutral cwd, so resolution can only come from the
+ * module URL, and assert it finds the component catalog on every platform.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {spawnSync} from 'node:child_process';
+import * as os from 'node:os';
+import * as path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DOCS_SCRIPT = path.resolve(__dirname, '..', 'docs.mjs');
+
+function runDocs(args) {
+  return spawnSync(process.execPath, [DOCS_SCRIPT, ...args], {
+    cwd: os.tmpdir(),
+    encoding: 'utf8',
+    timeout: 20_000,
+    env: {...process.env, FORCE_COLOR: '0'},
+  });
+}
+
+describe('docs.mjs component discovery', () => {
+  it('--list discovers the component catalog', () => {
+    const r = runDocs(['--list']);
+    expect(r.error).toBeUndefined();
+    expect(r.signal).toBeNull();
+    expect(r.status).toBe(0);
+    expect(r.stdout).toMatch(/\bButton\b/);
+    expect(r.stdout).toMatch(/\bDialog\b/);
+  });
+
+  it('renders docs for a single component', () => {
+    const r = runDocs(['Button']);
+    expect(r.error).toBeUndefined();
+    expect(r.signal).toBeNull();
+    expect(r.status).toBe(0);
+    expect(r.stdout).toMatch(/^# Button$/m);
+    expect(r.stdout).toMatch(/## Props/);
+  });
+});

package/src/hooks/focusableSelector.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file focusableSelector.ts
+ * @input None (a plain CSS selector string constant)
+ * @output Exports FOCUSABLE_SELECTOR
+ * @position Internal utility; the canonical CSS selector for focusable
+ *   elements, shared by focus-management hooks (e.g. useFocusTrap) so the
+ *   selector isn't duplicated across components/hooks. Not exported from the
+ *   public barrel — internal implementation detail.
+ */
+
+/**
+ * Canonical CSS selector for commonly focusable elements. Includes the
+ * tabbable natives (button/link/input/select/textarea/[tabindex]) plus
+ * editable and media elements the browser also puts in the tab order —
+ * contenteditable, media with controls, iframe, and an open <details>'s
+ * <summary> — which a naive selector misses, letting Tab escape a trap whose
+ * only interactive content is (e.g.) a contenteditable composer (infra-8).
+ *
+ * This is the canonical focusable selector; prefer importing it here over
+ * re-declaring the string so behavior stays consistent across hooks.
+ */
+export const FOCUSABLE_SELECTOR =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), [contenteditable]:not([contenteditable="false"]), audio[controls], video[controls], iframe, details > summary:first-child';

package/src/hooks/index.ts

@@ -14,11 +14,31 @@
 export {useFocusTrap} from './useFocusTrap';
 export type {UseFocusTrapOptions, UseFocusTrapReturn} from './useFocusTrap';
 
+export {useAnnounce} from './useAnnounce';
+export type {AnnounceFn, AnnouncePoliteness} from './useAnnounce';
+
 export {useGridFocus} from './useGridFocus';
 export type {UseGridFocusOptions, UseGridFocusReturn} from './useGridFocus';
 
 export {useListFocus} from './useListFocus';
-export type {UseListFocusOptions, UseListFocusReturn} from './useListFocus';
+export type {
+  UseListFocusOptions,
+  UseListFocusReturn,
+  ListFocusOrientation,
+} from './useListFocus';
+
+export {useTreeFocus} from './useTreeFocus';
+export type {UseTreeFocusOptions, UseTreeFocusReturn} from './useTreeFocus';
+
+export {useTypeahead} from './useTypeahead';
+
+export {useKeyboardHint} from './useKeyboardHint';
+export type {
+  UseKeyboardHintOptions,
+  UseKeyboardHintReturn,
+  KeyboardHintOrientation,
+} from './useKeyboardHint';
+export type {UseTypeaheadOptions, UseTypeaheadReturn} from './useTypeahead';
 
 export {useMediaQuery} from './useMediaQuery';
 
@@ -41,7 +61,10 @@ export type {
 export {useImageMode} from './useImageMode';
 export type {ImageSampleRegion, UseImageModeOptions} from './useImageMode';
 
-export {useClickableContainer} from './useClickableContainer';
+export {
+  useClickableContainer,
+  INTERACTIVE_SELECTORS,
+} from './useClickableContainer';
 export type {
   UseClickableContainerOptions,
   ClickableContainerResult,
@@ -55,3 +78,6 @@ export type {
   InteractiveRole,
   UseInteractiveRoleOptions,
 } from './useInteractiveRole';
+
+export {useLongPress} from './useLongPress';
+export type {UseLongPressOptions, UseLongPressHandlers} from './useLongPress';

package/src/hooks/useAnnounce.test.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useAnnounce.test.tsx
+ * @input Uses vitest, @testing-library/react, useAnnounce hook
+ * @output Unit tests for useAnnounce live-region announcements
+ * @position Testing; validates useAnnounce.ts
+ *
+ * SYNC: When useAnnounce.ts changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, afterEach} from 'vitest';
+import {renderHook, waitFor} from '@testing-library/react';
+import {useAnnounce, __resetLiveRegionsForTest} from './useAnnounce';
+
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
+
+function politeRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="polite"]');
+}
+function assertiveRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="assertive"]');
+}
+
+describe('useAnnounce', () => {
+  it('mounts empty polite and assertive live regions on first announce', async () => {
+    const {result} = renderHook(() => useAnnounce());
+    // Regions do not exist until first use.
+    expect(politeRegion()).toBeNull();
+
+    result.current('Saved');
+
+    // Both regions exist after the first announce, before content settles.
+    expect(politeRegion()).not.toBeNull();
+    expect(assertiveRegion()).not.toBeNull();
+    expect(politeRegion()).toHaveAttribute('aria-live', 'polite');
+    expect(politeRegion()).toHaveAttribute('aria-atomic', 'true');
+    expect(politeRegion()).toHaveAttribute('role', 'status');
+    expect(assertiveRegion()).toHaveAttribute('aria-live', 'assertive');
+    expect(assertiveRegion()).toHaveAttribute('role', 'alert');
+  });
+
+  it('announces a polite message into the polite region', async () => {
+    const {result} = renderHook(() => useAnnounce());
+    result.current('12 results');
+    await waitFor(() => {
+      expect(politeRegion()).toHaveTextContent('12 results');
+    });
+    // Assertive region stays empty.
+    expect(assertiveRegion()).toHaveTextContent('');
+  });
+
+  it('routes assertive messages to the assertive region', async () => {
+    const {result} = renderHook(() => useAnnounce());
+    result.current('Upload failed', 'assertive');
+    await waitFor(() => {
+      expect(assertiveRegion()).toHaveTextContent('Upload failed');
+    });
+    expect(politeRegion()).toHaveTextContent('');
+  });
+
+  it('re-announces an identical message (clears then re-sets)', async () => {
+    const {result} = renderHook(() => useAnnounce());
+    result.current('No results found');
+    await waitFor(() => {
+      expect(politeRegion()).toHaveTextContent('No results found');
+    });
+    // Second identical announce should still land (region is cleared first).
+    result.current('No results found');
+    expect(politeRegion()).toHaveTextContent('');
+    await waitFor(() => {
+      expect(politeRegion()).toHaveTextContent('No results found');
+    });
+  });
+
+  it('ignores empty messages', () => {
+    const {result} = renderHook(() => useAnnounce());
+    result.current('');
+    // No regions created for an empty announce.
+    expect(politeRegion()).toBeNull();
+  });
+
+  it('reuses the same singleton regions across hook instances', async () => {
+    const {result: a} = renderHook(() => useAnnounce());
+    a.current('first');
+    const region = politeRegion();
+
+    const {result: b} = renderHook(() => useAnnounce());
+    b.current('second');
+    await waitFor(() => {
+      expect(politeRegion()).toHaveTextContent('second');
+    });
+    // Same DOM node, not a duplicate.
+    expect(politeRegion()).toBe(region);
+    expect(
+      document.querySelectorAll('[data-astryx-live-region="polite"]').length,
+    ).toBe(1);
+  });
+});

package/src/hooks/useAnnounce.ts

@@ -0,0 +1,168 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useAnnounce.ts
+ * @input Uses React useCallback; DOM APIs for a singleton live-region pair
+ * @output Exports useAnnounce hook and AnnouncePoliteness type
+ * @position Core a11y hook; provides imperative screen-reader announcements
+ *   via persistently-mounted polite/assertive live regions
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/index.ts
+ */
+
+import {useCallback} from 'react';
+
+/**
+ * Announcement urgency:
+ * - `'polite'` (default): announced when the screen reader is idle. Use for
+ *   status updates, result counts, "no results", non-urgent confirmations.
+ * - `'assertive'`: interrupts the current announcement. Reserve for errors and
+ *   time-sensitive alerts.
+ */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+
+/**
+ * Imperative screen-reader announcement function.
+ */
+export type AnnounceFn = (
+  message: string,
+  politeness?: AnnouncePoliteness,
+) => void;
+
+const CONTAINER_ATTR = 'data-astryx-live-region';
+
+// Visually-hidden clip block (matches the VisuallyHidden primitive). Applied
+// inline so the regions work without any stylesheet being present.
+const VISUALLY_HIDDEN_CSS =
+  'position:absolute;width:1px;height:1px;margin:-1px;padding:0;' +
+  'overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;' +
+  'inset-block-start:0;inset-inline-start:0;pointer-events:none;' +
+  'user-select:none;';
+
+interface LiveRegions {
+  polite: HTMLElement;
+  assertive: HTMLElement;
+}
+
+// Singleton: the live regions are created ONCE and stay mounted for the
+// lifetime of the document. This is the crux of reliable announcements — many
+// screen readers will not announce content injected into a live region that is
+// created together with its content ("born with content"). By mounting empty
+// regions up front and only mutating their text later, updates are announced.
+let regions: LiveRegions | null = null;
+
+function createRegion(politeness: AnnouncePoliteness): HTMLElement {
+  const el = document.createElement('div');
+  el.setAttribute(CONTAINER_ATTR, politeness);
+  el.setAttribute('aria-live', politeness);
+  el.setAttribute('aria-atomic', 'true');
+  el.setAttribute('role', politeness === 'assertive' ? 'alert' : 'status');
+  el.style.cssText = VISUALLY_HIDDEN_CSS;
+  document.body.appendChild(el);
+  return el;
+}
+
+function getRegions(): LiveRegions | null {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+  if (regions) {
+    // Re-attach if a region was removed from the DOM (e.g. by a test cleanup).
+    if (!regions.polite.isConnected) {
+      document.body.appendChild(regions.polite);
+    }
+    if (!regions.assertive.isConnected) {
+      document.body.appendChild(regions.assertive);
+    }
+    return regions;
+  }
+  regions = {
+    polite: createRegion('polite'),
+    assertive: createRegion('assertive'),
+  };
+  return regions;
+}
+
+function announceMessage(
+  message: string,
+  politeness: AnnouncePoliteness,
+): void {
+  const r = getRegions();
+  if (!r) {
+    return;
+  }
+  const target = politeness === 'assertive' ? r.assertive : r.polite;
+  // Clearing first guarantees the mutation is observed even when the new
+  // message equals the current text — some AT deduplicate identical content.
+  target.textContent = '';
+  // A microtask/rAF-free re-set in the next frame is more reliable across AT
+  // than an immediate re-set, which can be coalesced with the clear.
+  requestAnimationFrame(() => {
+    target.textContent = message;
+  });
+}
+
+/**
+ * Clear any pending announcement from a region without announcing anything new.
+ * Used when the triggering context goes away (e.g. a search query is cleared),
+ * so stale status text does not linger in the accessibility tree.
+ */
+function clearRegion(politeness: AnnouncePoliteness): void {
+  if (!regions) {
+    return;
+  }
+  const target =
+    politeness === 'assertive' ? regions.assertive : regions.polite;
+  target.textContent = '';
+}
+
+/**
+ * Returns an imperative `announce(message, politeness?)` function that speaks a
+ * message through a persistently-mounted, visually-hidden live region.
+ *
+ * The polite and assertive regions are created once on first use and kept
+ * mounted, so announcements are reliable even for messages that appear
+ * immediately (unlike a live region rendered together with its content).
+ *
+ * @example
+ * ```
+ * function Search() {
+ *   const announce = useAnnounce();
+ *   const onResults = (n: number) => {
+ *     announce(n === 0 ? 'No results found' : `${n} results`);
+ *   };
+ *   // ...
+ * }
+ * ```
+ */
+export function useAnnounce(): AnnounceFn {
+  return useCallback(
+    (message: string, politeness: AnnouncePoliteness = 'polite') => {
+      if (!message) {
+        // An empty message clears any lingering status from the region rather
+        // than announcing nothing — useful when the triggering context ends.
+        clearRegion(politeness);
+        return;
+      }
+      announceMessage(message, politeness);
+    },
+    [],
+  );
+}
+
+/**
+ * Test-only helper: removes the singleton live regions and resets state so
+ * each test starts clean. Not part of the public runtime API.
+ *
+ * @internal
+ */
+export function __resetLiveRegionsForTest(): void {
+  if (regions) {
+    regions.polite.remove();
+    regions.assertive.remove();
+    regions = null;
+  }
+}

package/src/hooks/useClickableContainer.ts

@@ -5,18 +5,30 @@
 /**
  * @file useClickableContainer.ts
  * @input Container ref, interactive element ref, click/href handlers
- * @output onClick and onMouseUp handlers for the container
+ * @output onClick and onMouseUp handlers for the container; INTERACTIVE_SELECTORS list
  * @position Core hook for clickable containers that safely handle nested interactive elements
  *
  * Solves the "nested interactive elements" problem: when a card is clickable
  * but contains buttons/links, clicking those should NOT trigger the card's action.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/index.ts (export)
  */
 
 import {useCallback, useEffect, type RefObject, type MouseEvent} from 'react';
 
-// Interactive element selectors — clicks on these (or their descendants)
-// should NOT bubble to the container's click handler.
-const INTERACTIVE_SELECTORS = [
+/**
+ * Canonical list of interactive element selectors — native controls plus
+ * role-based interactive elements. Clicks on these (or their descendants)
+ * should NOT bubble to a clickable container's click handler.
+ *
+ * Exported so other focus/interaction utilities can share one comprehensive
+ * definition of "interactive target" rather than hand-rolling divergent lists.
+ * Note: this list is about "don't bubble clicks", not focus-eligibility —
+ * consumers that need focusable elements must additionally exclude
+ * unfocusable/disabled targets (e.g. `[tabindex="-1"]`, `:disabled`).
+ */
+export const INTERACTIVE_SELECTORS = [
   'button',
   'a',
   'input',

package/src/hooks/useEntryAnimation.ts

@@ -61,25 +61,37 @@ const scaleIn = stylex.keyframes({
 
 const styles = stylex.create({
   slideDown: {
-    animationName: slideDown,
+    animationName: {
+      default: slideDown,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     animationDuration: durationVars['--duration-fast-max'],
     animationTimingFunction: easeVars['--ease-standard'],
     animationFillMode: 'backwards',
   },
   slideUp: {
-    animationName: slideUp,
+    animationName: {
+      default: slideUp,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     animationDuration: durationVars['--duration-fast-max'],
     animationTimingFunction: easeVars['--ease-standard'],
     animationFillMode: 'backwards',
   },
   fadeIn: {
-    animationName: fadeIn,
+    animationName: {
+      default: fadeIn,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     animationDuration: durationVars['--duration-fast-max'],
     animationTimingFunction: easeVars['--ease-standard'],
     animationFillMode: 'backwards',
   },
   scaleIn: {
-    animationName: scaleIn,
+    animationName: {
+      default: scaleIn,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     animationDuration: durationVars['--duration-fast-max'],
     animationTimingFunction: easeVars['--ease-standard'],
     animationFillMode: 'backwards',