@pharos-ds/core 0.1.9

package/dist/hooks/useAnnounce.js

@@ -0,0 +1,180 @@
+// 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; regions are
+ *   auto-cleared shortly after announcing so stale status text does not
+ *   linger in the accessibility tree
+ *
+ * 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.
+ */
+
+/**
+ * Imperative screen-reader announcement function.
+ */
+
+const CONTAINER_ATTR = 'data-pharos-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;';
+/**
+ * How long an announcement stays in its region before being auto-cleared.
+ * Long enough for screen readers to pick the message up and finish reading
+ * it; clearing afterwards keeps stale status text out of the accessibility
+ * tree for users who browse the DOM later. Each announce resets the timer.
+ */
+const CLEAR_DELAY_MS = 2000;
+const clearTimers = {
+  polite: null,
+  assertive: null
+};
+function cancelScheduledClear(politeness) {
+  const timer = clearTimers[politeness];
+  if (timer != null) {
+    clearTimeout(timer);
+    clearTimers[politeness] = null;
+  }
+}
+function scheduleClear(politeness, target) {
+  cancelScheduledClear(politeness);
+  clearTimers[politeness] = setTimeout(() => {
+    clearTimers[politeness] = null;
+    target.textContent = '';
+  }, CLEAR_DELAY_MS);
+}
+
+// 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 = null;
+function createRegion(politeness) {
+  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() {
+  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, politeness) {
+  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;
+  });
+  // Auto-clear so the last message does not linger in the accessibility tree
+  // indefinitely. Scheduled per announce, so a newer announcement always
+  // resets the countdown (the delay comfortably outlasts the rAF re-set).
+  scheduleClear(politeness, target);
+}
+
+/**
+ * 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) {
+  cancelScheduledClear(politeness);
+  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).
+ * Each message is automatically cleared a couple of seconds after being
+ * announced, so users browsing the DOM later do not encounter stale status
+ * text; announcing again before the clear simply resets the countdown.
+ *
+ * @example
+ * ```
+ * function Search() {
+ *   const announce = useAnnounce();
+ *   const onResults = (n: number) => {
+ *     announce(n === 0 ? 'No results found' : `${n} results`);
+ *   };
+ *   // ...
+ * }
+ * ```
+ */
+export function useAnnounce() {
+  return useCallback((message, politeness = '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() {
+  cancelScheduledClear('polite');
+  cancelScheduledClear('assertive');
+  if (regions) {
+    regions.polite.remove();
+    regions.assertive.remove();
+    regions = null;
+  }
+}

package/dist/hooks/useClickableContainer.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @file useClickableContainer.ts
+ * @input Container ref, interactive element ref, click/href handlers
+ * @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 { type RefObject, type MouseEvent } from 'react';
+/**
+ * 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 declare const INTERACTIVE_SELECTORS: string;
+export interface UseClickableContainerOptions {
+    /** Ref to the outer container element */
+    containerRef: RefObject<HTMLElement | null>;
+    /** Ref to the primary interactive element inside (link, button) */
+    interactiveRef?: RefObject<HTMLElement | null>;
+    /** Click handler */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** Navigation URL — when provided, clicking the container navigates */
+    href?: string;
+    /** Link target */
+    target?: string;
+    /** Whether the container is disabled */
+    disabled?: boolean;
+}
+export interface ClickableContainerResult {
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    onMouseUp: (event: MouseEvent<HTMLElement>) => void;
+}
+/**
+ * Hook that makes a container element clickable while preserving
+ * nested interactive element behavior.
+ *
+ * When the user clicks the container surface (not on a nested button/link),
+ * the hook fires the onClick handler or navigates to href.
+ * When the user clicks a nested interactive element, it does nothing —
+ * the nested element handles its own event.
+ *
+ * @compositionHint Use inside ClickableCard or SelectableCard.
+ * For custom interactive containers, pair with a ref to the outer div.
+ *
+ * @example
+ * ```
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const { onClick, onMouseUp } = useClickableContainer({
+ *   containerRef,
+ *   onClick: () => console.log('card clicked'),
+ * });
+ * return (
+ *   <div ref={containerRef} onClick={onClick} onMouseUp={onMouseUp}>
+ *     <p>Click anywhere on this card</p>
+ *     <button onClick={() => alert('button')}>Nested button</button>
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useClickableContainer({ containerRef, interactiveRef, onClick: onClickProp, href, target, disabled, }: UseClickableContainerOptions): ClickableContainerResult;
+//# sourceMappingURL=useClickableContainer.d.ts.map

package/dist/hooks/useClickableContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickableContainer.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickableContainer.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAE9E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB,QAmBvB,CAAC;AAmCZ,MAAM,WAAW,4BAA4B;IAC3C,yCAAyC;IACzC,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,mEAAmE;IACnE,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,cAAc,EACd,OAAO,EAAE,WAAW,EACpB,IAAI,EACJ,MAAM,EACN,QAAgB,GACjB,EAAE,4BAA4B,GAAG,wBAAwB,CA6GzD"}

package/dist/hooks/useClickableContainer.js

@@ -0,0 +1,184 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useClickableContainer.ts
+ * @input Container ref, interactive element ref, click/href handlers
+ * @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 } from 'react';
+
+/**
+ * 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', 'select', 'textarea', '[role="button"]', '[role="link"]', '[role="checkbox"]', '[role="radio"]', '[role="switch"]', '[role="tab"]', '[role="menuitem"]', '[role="option"]', '[role="combobox"]', '[role="listbox"]', '[role="slider"]', '[role="spinbutton"]', '[data-pressable-container]'].join(',');
+const NON_INTERACTIVE_SELECTORS = '[aria-readonly="true"]';
+
+/**
+ * Check whether an element has an interactive ancestor between it and the root.
+ * If the click target is inside a nested button/link/etc., we should NOT
+ * handle it at the container level.
+ */
+function hasInteractiveAncestor(el, rootEl) {
+  let current = el;
+  while (current != null && current !== rootEl && current !== document.body) {
+    if (current.matches(INTERACTIVE_SELECTORS) && !current.matches(NON_INTERACTIVE_SELECTORS)) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+/** Check if there's a text selection inside the node (don't navigate on text select) */
+function hasTextSelection(node) {
+  if (typeof document === 'undefined' || !('getSelection' in document)) {
+    return false;
+  }
+  const selection = document.getSelection();
+  if (selection == null || selection.isCollapsed) {
+    return false;
+  }
+  return node.contains(selection.anchorNode);
+}
+/**
+ * Hook that makes a container element clickable while preserving
+ * nested interactive element behavior.
+ *
+ * When the user clicks the container surface (not on a nested button/link),
+ * the hook fires the onClick handler or navigates to href.
+ * When the user clicks a nested interactive element, it does nothing —
+ * the nested element handles its own event.
+ *
+ * @compositionHint Use inside ClickableCard or SelectableCard.
+ * For custom interactive containers, pair with a ref to the outer div.
+ *
+ * @example
+ * ```
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const { onClick, onMouseUp } = useClickableContainer({
+ *   containerRef,
+ *   onClick: () => console.log('card clicked'),
+ * });
+ * return (
+ *   <div ref={containerRef} onClick={onClick} onMouseUp={onMouseUp}>
+ *     <p>Click anywhere on this card</p>
+ *     <button onClick={() => alert('button')}>Nested button</button>
+ *   </div>
+ * );
+ * ```
+ */
+export function useClickableContainer({
+  containerRef,
+  interactiveRef,
+  onClick: onClickProp,
+  href,
+  target,
+  disabled = false
+}) {
+  // Mark container as pressable for the interactive selector check
+  useEffect(() => {
+    const el = containerRef.current;
+    if (el) {
+      el.setAttribute('data-pressable-container', 'true');
+    }
+  }, [containerRef]);
+  const onClick = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+    const containerEl = containerRef.current;
+    if (!containerEl) {
+      return;
+    }
+
+    // Don't trigger on text selection
+    if (hasTextSelection(containerEl)) {
+      return;
+    }
+    const eventTarget = event.target;
+    if (!(eventTarget instanceof Element)) {
+      return;
+    }
+
+    // If the click landed on or inside a nested interactive element, bail
+    if (eventTarget !== event.currentTarget && hasInteractiveAncestor(eventTarget, containerEl)) {
+      return;
+    }
+
+    // Fire the click handler
+    onClickProp?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    // Navigate if href is provided
+    if (href != null) {
+      const shouldOpenNewTab = target === '_blank' || event.ctrlKey || event.metaKey;
+      if (shouldOpenNewTab) {
+        window.open(href, '_blank', 'noopener');
+      } else if (interactiveRef?.current) {
+        // Proxy click to the sr-only link so the framework link component
+        // handles navigation (client-side transitions in Next.js, etc.).
+        interactiveRef.current.click();
+      } else {
+        // eslint-disable-next-line react-compiler/react-compiler -- browser navigation API
+        window.location.href = href;
+      }
+    }
+
+    // Proxy click to the interactive ref if no explicit handler
+    if (href == null && onClickProp == null && interactiveRef?.current) {
+      const clickEvent = new MouseEvent('click', {
+        bubbles: event.bubbles,
+        cancelable: event.cancelable,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        button: event.button
+      });
+      interactiveRef.current.dispatchEvent(clickEvent);
+      event.stopPropagation();
+    }
+  }, [containerRef, interactiveRef, onClickProp, href, target, disabled]);
+  const onMouseUp = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+    const containerEl = containerRef.current;
+    if (!containerEl) {
+      return;
+    }
+    const eventTarget = event.target;
+    if (!(eventTarget instanceof Element)) {
+      return;
+    }
+
+    // Middle-click on href opens in new tab
+    const isMiddleClick = event.button === 1;
+    if (isMiddleClick && href != null && (eventTarget === event.currentTarget || !hasInteractiveAncestor(eventTarget, containerEl))) {
+      window.open(href, '_blank', 'noopener');
+    }
+  }, [containerRef, href, disabled]);
+  return {
+    onClick,
+    onMouseUp
+  };
+}

package/dist/hooks/useDevWarning.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Fire a dev-only warning once per mount while `condition` is true.
+ *
+ * @param component - Component or hook name (message prefix)
+ * @param message - What went wrong and how to fix it
+ * @param condition - Whether to warn; defaults to `true`
+ *
+ * @example
+ * ```
+ * useDevWarning(
+ *   'Field',
+ *   'isOptional and isRequired are mutually exclusive. isOptional takes precedence.',
+ *   isOptional && isRequired,
+ * );
+ * ```
+ */
+export declare function useDevWarning(component: string, message: string, condition?: boolean): void;
+//# sourceMappingURL=useDevWarning.d.ts.map

package/dist/hooks/useDevWarning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDevWarning.d.ts","sourceRoot":"","sources":["../../src/hooks/useDevWarning.ts"],"names":[],"mappings":"AAyBA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,SAAS,GAAE,OAAc,GACxB,IAAI,CAQN"}

package/dist/hooks/useDevWarning.js

@@ -0,0 +1,49 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useDevWarning.ts
+ * @input A component name, a message, and a boolean condition
+ * @output Fires a dev-only `Component: message` warning once per mount
+ * @position Core hook; the render-safe way to warn the builder from a component
+ *
+ * The right way to surface a dev guardrail from inside a component. A naive
+ * `if (condition) console.warn(...)` in the render body repeats on every
+ * render, and reaching for `useState` to gate it adds needless state and
+ * re-renders. This hook uses a ref + effect: the warning fires once per mount
+ * when the condition holds, never during render, and never triggers a
+ * re-render. Messages use the standardized `Component: message` format.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/index.ts
+ * - /packages/core/src/utils/devWarning.ts (the imperative counterpart)
+ */
+import { useEffect, useRef } from 'react';
+import { devWarn } from "../utils/devWarning.js";
+
+/**
+ * Fire a dev-only warning once per mount while `condition` is true.
+ *
+ * @param component - Component or hook name (message prefix)
+ * @param message - What went wrong and how to fix it
+ * @param condition - Whether to warn; defaults to `true`
+ *
+ * @example
+ * ```
+ * useDevWarning(
+ *   'Field',
+ *   'isOptional and isRequired are mutually exclusive. isOptional takes precedence.',
+ *   isOptional && isRequired,
+ * );
+ * ```
+ */
+export function useDevWarning(component, message, condition = true) {
+  const hasWarnedRef = useRef(false);
+  useEffect(() => {
+    if (condition && !hasWarnedRef.current) {
+      hasWarnedRef.current = true;
+      devWarn(component, message);
+    }
+  }, [component, message, condition]);
+}

package/dist/hooks/useEntryAnimation.d.ts

@@ -0,0 +1,16 @@
+import type { StyleXStyles } from '@stylexjs/stylex';
+export type EntryAnimationPreset = 'slideDown' | 'slideUp' | 'fadeIn' | 'scaleIn';
+/**
+ * Returns a StyleX style for animating an element on mount.
+ *
+ * Only animates when the element is dynamically inserted after the initial
+ * page paint. Elements rendered on page load are not animated.
+ *
+ * @example
+ * ```
+ * const entryStyle = useEntryAnimation('slideDown');
+ * <div {...stylex.props(entryStyle)}>Animated content</div>
+ * ```
+ */
+export declare function useEntryAnimation(preset?: EntryAnimationPreset): StyleXStyles | null;
+//# sourceMappingURL=useEntryAnimation.d.ts.map

package/dist/hooks/useEntryAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEntryAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useEntryAnimation.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAoFnD,MAAM,MAAM,oBAAoB,GAC5B,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,CAAC;AAEd;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,GAAE,oBAAkC,GACzC,YAAY,GAAG,IAAI,CAGrB"}

package/dist/hooks/useEntryAnimation.js

@@ -0,0 +1,84 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useEntryAnimation.ts
+ * @input Uses React, StyleX, theme tokens
+ * @output Exports useEntryAnimation hook for mount-only entry animations
+ * @position Hook utility; consumed by FieldStatus and available to consumers
+ *
+ * Provides entry animations for conditionally rendered elements.
+ * Only animates when the element is dynamically mounted after the initial
+ * page paint — statically rendered elements on page load are not animated.
+ */
+import { useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { durationVars, easeVars, spacingVars } from "../theme/tokens.stylex.js";
+
+// Track whether the initial page paint has completed.
+// Elements rendered on page load should not animate;
+// only dynamically inserted ones should.
+//
+// NOTE: This module is marked 'use client' so it never runs on the server.
+// If the directive is removed, this flag will always be false during SSR,
+// and useState(() => initialPaintComplete) will capture false — meaning
+// animations won't run after hydration. Keep 'use client' or add an
+// effect-based fallback if SSR support is needed.
+let initialPaintComplete = false;
+if (typeof window !== 'undefined') {
+  requestAnimationFrame(() => {
+    initialPaintComplete = true;
+  });
+}
+const slideDown = "xiylxmw-B";
+const slideUp = "x1b6yrix-B";
+const fadeIn = "x18re5ia-B";
+const scaleIn = "x1k48ry3-B";
+const styles = {
+  slideDown: {
+    kKVMdj: "x1srr2gu x1aquc0h",
+    k44tkh: "x9uej1z",
+    kyAemX: "x128ha8g",
+    kWV6AL: "xskzprw",
+    $$css: true
+  },
+  slideUp: {
+    kKVMdj: "x1dvww92 x1aquc0h",
+    k44tkh: "x9uej1z",
+    kyAemX: "x128ha8g",
+    kWV6AL: "xskzprw",
+    $$css: true
+  },
+  fadeIn: {
+    kKVMdj: "xqcmdr3 x1aquc0h",
+    k44tkh: "x9uej1z",
+    kyAemX: "x128ha8g",
+    kWV6AL: "xskzprw",
+    $$css: true
+  },
+  scaleIn: {
+    kKVMdj: "x97zbip x1aquc0h",
+    k44tkh: "x9uej1z",
+    kyAemX: "x128ha8g",
+    kWV6AL: "xskzprw",
+    $$css: true
+  }
+};
+/**
+ * Returns a StyleX style for animating an element on mount.
+ *
+ * Only animates when the element is dynamically inserted after the initial
+ * page paint. Elements rendered on page load are not animated.
+ *
+ * @example
+ * ```
+ * const entryStyle = useEntryAnimation('slideDown');
+ * <div {...stylex.props(entryStyle)}>Animated content</div>
+ * ```
+ */
+export function useEntryAnimation(preset = 'slideDown') {
+  const [animate] = useState(() => initialPaintComplete);
+  return animate ? styles[preset] : null;
+}