@astryxdesign/core 0.3.0 → 0.4.0

package/dist/hooks/containerReveal.stylex.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @file containerReveal.stylex.ts
+ * @input Uses StyleX, theme tokens
+ * @output The container style that publishes the reveal state, and the four
+ *   content style blocks (reveal / conceal, each with a layout-preserved
+ *   variant) that read it.
+ * @position Internal to useContainerReveal.
+ *
+ * HOW THE SCOPING WORKS: the container declares its own reveal state as
+ * inherited custom properties on itself, and content reads them. Because a
+ * nested container re-declares the same properties on itself, its subtree sees
+ * the inner value and never the ancestor's — nesting isolation falls out of the
+ * cascade, with one static style block for any number of containers.
+ *
+ * SYNC: When the block shape changes, update useContainerReveal.ts.
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const styles: Readonly<{
+    readonly container: Readonly<{
+        readonly '--_reveal-opacity': stylex.StyleXClassNameFor<"--_reveal-opacity", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly '--_reveal-position': stylex.StyleXClassNameFor<"--_reveal-position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "static";
+        }>;
+        readonly '--_reveal-delay': stylex.StyleXClassNameFor<"--_reveal-delay", string | {
+            readonly '@media (hover: hover)': "0s, 0s";
+        }>;
+        readonly '--_conceal-opacity': stylex.StyleXClassNameFor<"--_conceal-opacity", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    readonly reveal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity, position">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly transitionBehavior: stylex.StyleXClassNameFor<"transitionBehavior", "allow-discrete">;
+        readonly transitionDelay: stylex.StyleXClassNameFor<"transitionDelay", "0s, 0s" | "var(--_reveal-delay, 0s, 0s)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", "var(--_reveal-opacity, 1)">;
+        readonly position: stylex.StyleXClassNameFor<"position", "var(--_reveal-position, static)">;
+    }>;
+    readonly revealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", "var(--_reveal-opacity, 1)">;
+    }>;
+    readonly conceal: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", "var(--_conceal-opacity, 1)">;
+    }>;
+    readonly concealLayoutPreserved: Readonly<{
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", "var(--_conceal-opacity, 1)">;
+    }>;
+}>;
+//# sourceMappingURL=containerReveal.stylex.d.ts.map

package/dist/hooks/containerReveal.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"containerReveal.stylex.d.ts","sourceRoot":"","sources":["../../src/hooks/containerReveal.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAK3C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6EjB,CAAC"}

package/dist/hooks/containerReveal.stylex.js

@@ -0,0 +1,63 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file containerReveal.stylex.ts
+ * @input Uses StyleX, theme tokens
+ * @output The container style that publishes the reveal state, and the four
+ *   content style blocks (reveal / conceal, each with a layout-preserved
+ *   variant) that read it.
+ * @position Internal to useContainerReveal.
+ *
+ * HOW THE SCOPING WORKS: the container declares its own reveal state as
+ * inherited custom properties on itself, and content reads them. Because a
+ * nested container re-declares the same properties on itself, its subtree sees
+ * the inner value and never the ancestor's — nesting isolation falls out of the
+ * cascade, with one static style block for any number of containers.
+ *
+ * SYNC: When the block shape changes, update useContainerReveal.ts.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { durationVars, easeVars } from "../theme/tokens.stylex.js";
+const REST_DELAY = '0s, ' + durationVars['--duration-fast'];
+export const styles = {
+  container: {
+    "--_reveal-opacity": "xct0gwe x1wblmmc xi33vf3 xi7d7de",
+    "--_reveal-position": "xp0pj8v x106rhu xoa21yc xarvkxi",
+    "--_reveal-delay": "x1xiarpw xp1dr9k x1mjsb9v x1pn63d7",
+    "--_conceal-opacity": "x1kgmhs9 xb9fdgj",
+    $$css: true
+  },
+  reveal: {
+    k1ekBW: "x1n1p2mu",
+    kIyJzY: "x1tw3moq xsr0bmt",
+    kAMwcw: "xlr8y92",
+    kzIqYQ: "xd00j3c",
+    kIr0Dl: "x1rq8cwj x1k6wr6r",
+    kSiTet: "xgsobzw",
+    kVAEAm: "x1mf7ja4",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xgsobzw",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1wnsjo",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1wnsjo",
+    $$css: true
+  }
+};

package/dist/hooks/index.d.ts

@@ -10,6 +10,8 @@ export { useFocusTrap } from './useFocusTrap';
 export type { UseFocusTrapOptions, UseFocusTrapReturn } from './useFocusTrap';
 export { useAnnounce } from './useAnnounce';
 export type { AnnounceFn, AnnouncePoliteness } from './useAnnounce';
+export { useClipboard } from './useClipboard';
+export type { UseClipboardOptions, UseClipboardReturn } from './useClipboard';
 export { useGridFocus } from './useGridFocus';
 export type { UseGridFocusOptions, UseGridFocusReturn } from './useGridFocus';
 export { useListFocus } from './useListFocus';
@@ -45,6 +47,7 @@ export type { InteractiveRole, UseInteractiveRoleOptions, } from './useInteracti
 export { useLongPress } from './useLongPress';
 export type { UseLongPressOptions, UseLongPressHandlers } from './useLongPress';
 export { useDevWarning } from './useDevWarning';
+export { useIndicatorFocusRing } from './useIndicatorFocusRing';
 export { useContainerReveal } from './useContainerReveal';
 export type { UseContainerRevealOptions, UseContainerRevealReturn, ContentRevealOptions, } from './useContainerReveal';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}

package/dist/hooks/index.js

@@ -12,6 +12,7 @@
  */
 export { useFocusTrap } from "./useFocusTrap.js";
 export { useAnnounce } from "./useAnnounce.js";
+export { useClipboard } from "./useClipboard.js";
 export { useGridFocus } from "./useGridFocus.js";
 export { useListFocus } from "./useListFocus.js";
 export { useTreeFocus } from "./useTreeFocus.js";
@@ -31,4 +32,5 @@ export { useInputStatusIcon } from "./useInputStatusIcon.js";
 export { useInteractiveRole } from "./useInteractiveRole.js";
 export { useLongPress } from "./useLongPress.js";
 export { useDevWarning } from "./useDevWarning.js";
+export { useIndicatorFocusRing } from "./useIndicatorFocusRing.js";
 export { useContainerReveal } from "./useContainerReveal.js";

package/dist/hooks/useClipboard.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Options for {@link useClipboard}.
+ */
+export interface UseClipboardOptions {
+    /**
+     * Message announced to a polite live region on a successful copy. Swapping a
+     * control's `aria-label` alone is not reliably announced by screen readers,
+     * so pass the localized confirmation (e.g. "Copied") to have it spoken.
+     * Omit to skip the announcement.
+     */
+    announce?: string;
+    /**
+     * Milliseconds `isCopied` stays true after a successful copy before it
+     * reverts to false.
+     * @default 2000
+     */
+    resetAfterMs?: number;
+}
+/**
+ * Return value of {@link useClipboard}.
+ */
+export interface UseClipboardReturn {
+    /**
+     * Write `text` to the clipboard. On success, flips `isCopied` to true,
+     * announces the configured message, and (re)starts the reset timer;
+     * resolves `true`. A clipboard rejection is a silent no-op that leaves the
+     * copied state unchanged and resolves `false`.
+     */
+    copy: (text: string) => Promise<boolean>;
+    /** True for `resetAfterMs` after the most recent successful copy. */
+    isCopied: boolean;
+}
+/**
+ * Copy-to-clipboard behavior: the clipboard write, a transient `isCopied`
+ * flag with its own reset timer, and an optional polite screen-reader
+ * announcement — the block otherwise re-derived at every copy affordance.
+ *
+ * Per [API Conventions → Behaviors: Hooks Over Wrappers], the behavior is a
+ * hook and the control (an icon button, a menu item, a value chip) is a thin
+ * shell over it. Rapid re-copies restart the reset timer so the confirmation
+ * always lasts the full duration, and the timer is cleaned up on unmount.
+ *
+ * @example
+ * ```
+ * function CopyButton({text}: {text: string}) {
+ *   const {copy, isCopied} = useClipboard({announce: 'Copied'});
+ *   return (
+ *     <IconButton
+ *       label={isCopied ? 'Copied' : 'Copy'}
+ *       tooltip="Copy"
+ *       icon={<Icon icon={isCopied ? 'check' : 'copy'} />}
+ *       onClick={() => void copy(text)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;
+//# sourceMappingURL=useClipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/useClipboard.ts"],"names":[],"mappings":"AA8BA;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzC,qEAAqE;IACrE,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,YAAY,CAC1B,OAAO,GAAE,mBAAwB,GAChC,kBAAkB,CA2CpB"}

package/dist/hooks/useClipboard.js

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useClipboard.ts
+ * @input Uses React state/effect/callback; navigator.clipboard; useAnnounce
+ * @output Exports useClipboard hook plus its options/return types
+ * @position Core behavior hook; owns the copy-to-clipboard behavior shared by
+ *   CodeBlock and Timestamp — the clipboard write, the transient "copied"
+ *   flag with its reset timer, and the polite screen-reader announcement — so
+ *   each call site is a thin control over one implementation instead of
+ *   re-deriving the timer/announce details independently.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/hooks/index.ts
+ * - /packages/core/src/hooks/useClipboard.doc.mjs
+ * - /packages/core/src/hooks/useClipboard.test.tsx
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAnnounce } from "./useAnnounce.js";
+
+/**
+ * How long `isCopied` stays true after a successful copy before reverting.
+ * Long enough for the copied confirmation (e.g. a copy → check icon flip) to
+ * register without lingering.
+ */
+const DEFAULT_RESET_AFTER_MS = 2000;
+
+/**
+ * Options for {@link useClipboard}.
+ */
+
+/**
+ * Return value of {@link useClipboard}.
+ */
+
+/**
+ * Copy-to-clipboard behavior: the clipboard write, a transient `isCopied`
+ * flag with its own reset timer, and an optional polite screen-reader
+ * announcement — the block otherwise re-derived at every copy affordance.
+ *
+ * Per [API Conventions → Behaviors: Hooks Over Wrappers], the behavior is a
+ * hook and the control (an icon button, a menu item, a value chip) is a thin
+ * shell over it. Rapid re-copies restart the reset timer so the confirmation
+ * always lasts the full duration, and the timer is cleaned up on unmount.
+ *
+ * @example
+ * ```
+ * function CopyButton({text}: {text: string}) {
+ *   const {copy, isCopied} = useClipboard({announce: 'Copied'});
+ *   return (
+ *     <IconButton
+ *       label={isCopied ? 'Copied' : 'Copy'}
+ *       tooltip="Copy"
+ *       icon={<Icon icon={isCopied ? 'check' : 'copy'} />}
+ *       onClick={() => void copy(text)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function useClipboard(options = {}) {
+  const {
+    announce: announceMessage,
+    resetAfterMs = DEFAULT_RESET_AFTER_MS
+  } = options;
+  const announce = useAnnounce();
+  const [isCopied, setIsCopied] = useState(false);
+  const resetTimerRef = useRef(null);
+
+  // Clear a pending "copied" reset when the consumer unmounts.
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current != null) {
+        clearTimeout(resetTimerRef.current);
+      }
+    };
+  }, []);
+  const copy = useCallback(async text => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopied(true);
+      if (announceMessage) {
+        announce(announceMessage);
+      }
+      // Restart the reset timer on every copy — otherwise a rapid re-copy
+      // is reverted early by the previous copy's timer.
+      if (resetTimerRef.current != null) {
+        clearTimeout(resetTimerRef.current);
+      }
+      resetTimerRef.current = setTimeout(() => {
+        resetTimerRef.current = null;
+        setIsCopied(false);
+      }, resetAfterMs);
+      return true;
+    } catch {
+      // Clipboard failures leave the copied state unchanged.
+      return false;
+    }
+  }, [announce, announceMessage, resetAfterMs]);
+  return {
+    copy,
+    isCopied
+  };
+}

package/dist/hooks/useContainerReveal.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file useContainerReveal.ts
- * @input Uses React, the generated marker pool, useDevWarning
+ * @input Uses the containerReveal styles
  * @output Exports useContainerReveal — a headless hover/focus reveal primitive
  * @position Core hook. Consumed by any component that reveals (or conceals)
  *   content when its container is hovered or focused — e.g. Thumbnail's remove
@@ -8,8 +8,13 @@
  *
  * Gives a container a scoped hover/focus-within trigger that reveals or
  * conceals content inside it, entirely in CSS (no hover state in JS, no
- * re-render on hover). The caller authors NO StyleX: the hook hands out a
- * marker + matching reveal styles from a pre-compiled pool.
+ * re-render on hover). The caller authors NO StyleX: the hook hands out the
+ * container style and the matching content styles.
+ *
+ * Scoping is by inheritance: the container publishes its reveal state as
+ * custom properties on itself and the content reads them, so a nested
+ * container shadows its ancestor's state for its own subtree. See
+ * containerReveal.stylex.ts.
  *
  * ACCESSIBILITY (WCAG 2.2 by construction):
  * - Revealed content is visually hidden at rest via position + opacity, so it
@@ -23,14 +28,15 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts (export)
- * - containerReveal.pool.stylex.ts (if the slot shape changes)
+ * - containerReveal.stylex.ts (if the style blocks change)
  */
 import { type CSSProperties } from 'react';
 export interface UseContainerRevealOptions {
     /**
-     * When false the hook is inert: no marker is applied and content getters
-     * return no styles, so content is always shown. Lets a component gate on its
-     * own prop (e.g. `revealOn === 'hover'`).
+     * When false the hook is inert: the container gets no styles and content
+     * getters return no styles, so content is always shown. Read on every
+     * render, so a component can flip it with its own prop (e.g.
+     * `revealOn === 'hover'`).
      * @default true
      */
     isEnabled?: boolean;
@@ -66,7 +72,7 @@ export interface UseContainerRevealReturn {
  * Scoped, CSS-only hover/focus reveal for content inside a container.
  *
  * @example
- * ```tsx
+ * ```
  * const {getContainerProps, getContentRevealProps} = useContainerReveal({
  *   isEnabled: revealOn === 'hover',
  * });

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

@@ -1 +1 @@
-{"version":3,"file":"useContainerReveal.d.ts","sourceRoot":"","sources":["../../src/hooks/useContainerReveal.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAsB,KAAK,aAAa,EAAC,MAAM,OAAO,CAAC;AA0C9D,MAAM,WAAW,yBAAyB;IACxC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,iBAAiB,EAAE,MAAM;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IACrE,mDAAmD;IACnD,qBAAqB,EAAE,CAAC,OAAO,CAAC,EAAE,oBAAoB,KAAK;QACzD,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CAiD1B"}
+{"version":3,"file":"useContainerReveal.d.ts","sourceRoot":"","sources":["../../src/hooks/useContainerReveal.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAU,KAAK,aAAa,EAAC,MAAM,OAAO,CAAC;AAIlD,MAAM,WAAW,yBAAyB;IACxC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,iBAAiB,EAAE,MAAM;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IACrE,mDAAmD;IACnD,qBAAqB,EAAE,CAAC,OAAO,CAAC,EAAE,oBAAoB,KAAK;QACzD,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,aAAa,CAAC;KACvB,CAAC;CACH;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CA0B1B"}

package/dist/hooks/useContainerReveal.js

@@ -4,7 +4,7 @@
 
 /**
  * @file useContainerReveal.ts
- * @input Uses React, the generated marker pool, useDevWarning
+ * @input Uses the containerReveal styles
  * @output Exports useContainerReveal — a headless hover/focus reveal primitive
  * @position Core hook. Consumed by any component that reveals (or conceals)
  *   content when its container is hovered or focused — e.g. Thumbnail's remove
@@ -12,8 +12,13 @@
  *
  * Gives a container a scoped hover/focus-within trigger that reveals or
  * conceals content inside it, entirely in CSS (no hover state in JS, no
- * re-render on hover). The caller authors NO StyleX: the hook hands out a
- * marker + matching reveal styles from a pre-compiled pool.
+ * re-render on hover). The caller authors NO StyleX: the hook hands out the
+ * container style and the matching content styles.
+ *
+ * Scoping is by inheritance: the container publishes its reveal state as
+ * custom properties on itself and the content reads them, so a nested
+ * container shadows its ancestor's state for its own subtree. See
+ * containerReveal.stylex.ts.
  *
  * ACCESSIBILITY (WCAG 2.2 by construction):
  * - Revealed content is visually hidden at rest via position + opacity, so it
@@ -27,53 +32,18 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts (export)
- * - containerReveal.pool.stylex.ts (if the slot shape changes)
+ * - containerReveal.stylex.ts (if the style blocks change)
  */
-import { useState, useEffect } from 'react';
+import { useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { POOL, POOL_SIZE } from "./containerReveal.pool.stylex.js";
-import { useDevWarning } from "./useDevWarning.js";
-
-// Module-level free-list. Each mounted, enabled useContainerReveal claims a
-// distinct pool slot so that any two CONCURRENTLY mounted containers — in
-// particular a nested container inside another's revealed content — get
-// different markers and cannot leak hover/focus into one another. Slots are
-// returned on unmount. Sibling containers that would only ever collide when
-// the pool is exhausted are harmless (a sibling is never an ancestor), so the
-// pool only needs to cover the number of concurrently mounted containers, not
-// instances over time.
-const claimed = new Array(POOL_SIZE).fill(false);
-function claimSlot() {
-  for (let i = 0; i < POOL_SIZE; i++) {
-    if (!claimed[i]) {
-      claimed[i] = true;
-      return {
-        index: i,
-        isExhausted: false
-      };
-    }
-  }
-  // Exhausted: fall back to slot 0. Safe for siblings (a sibling is never an
-  // ancestor); only nesting deeper than POOL_SIZE could reintroduce a leak.
-  // Surfaced via useDevWarning so the pool can be grown.
-  return {
-    index: 0,
-    isExhausted: true
-  };
-}
-function releaseSlot(index, isExhausted) {
-  // A fallback claim never owned the slot exclusively; leave it as-is.
-  if (!isExhausted) {
-    claimed[index] = false;
-  }
-}
+import { styles } from "./containerReveal.stylex.js";
 const EMPTY = Object.freeze({});
 
 /**
  * Scoped, CSS-only hover/focus reveal for content inside a container.
  *
  * @example
- * ```tsx
+ * ```
  * const {getContainerProps, getContentRevealProps} = useContainerReveal({
  *   isEnabled: revealOn === 'hover',
  * });
@@ -90,34 +60,23 @@ export function useContainerReveal(options = {}) {
   const {
     isEnabled = true
   } = options;
-
-  // Claim a slot for this container's lifetime. Assigned in the initializer
-  // (not the render body) and released on unmount so the free-list stays
-  // effect-scoped and StrictMode-safe.
-  const [claim] = useState(() => isEnabled ? claimSlot() : null);
-  useEffect(() => {
-    if (claim == null) {
-      return;
+  return useMemo(() => {
+    if (!isEnabled) {
+      return {
+        getContainerProps: () => EMPTY,
+        getContentRevealProps: () => EMPTY
+      };
     }
-    return () => releaseSlot(claim.index, claim.isExhausted);
-  }, [claim]);
-  useDevWarning('useContainerReveal', `More than ${POOL_SIZE} reveal containers are mounted at once; nested ` + `containers beyond the pool may share a marker. Add markers to ` + `containerReveal.pool.stylex.ts and raise POOL_SIZE.`, claim?.isExhausted ?? false);
-  if (claim == null) {
     return {
-      getContainerProps: () => EMPTY,
-      getContentRevealProps: () => EMPTY
+      getContainerProps: () => stylex.props(styles.container),
+      getContentRevealProps: (contentOptions = {}) => {
+        const {
+          isRevealInverted = false,
+          isLayoutPreserved = false
+        } = contentOptions;
+        const style = isRevealInverted ? isLayoutPreserved ? styles.concealLayoutPreserved : styles.conceal : isLayoutPreserved ? styles.revealLayoutPreserved : styles.reveal;
+        return stylex.props(style);
+      }
     };
-  }
-  const slot = POOL[claim.index];
-  return {
-    getContainerProps: () => stylex.props(slot.marker),
-    getContentRevealProps: (contentOptions = {}) => {
-      const {
-        isRevealInverted = false,
-        isLayoutPreserved = false
-      } = contentOptions;
-      const style = isRevealInverted ? isLayoutPreserved ? slot.concealLayoutPreserved : slot.conceal : isLayoutPreserved ? slot.revealLayoutPreserved : slot.reveal;
-      return stylex.props(style);
-    }
-  };
+  }, [isEnabled]);
 }

package/dist/hooks/useIndicatorFocusRing.d.ts

@@ -0,0 +1,28 @@
+import type { FocusEvent, RefObject } from 'react';
+export interface UseIndicatorFocusRingReturn {
+    /** Spread onto the element that owns the focusable input. */
+    focusProps: {
+        onFocus: (event: FocusEvent<HTMLElement>) => void;
+        onBlur: () => void;
+    };
+}
+/**
+ * Draw the standard focus ring on the indicator inside `containerRef`, shaped
+ * by whatever that indicator actually is.
+ *
+ * @param containerRef - Wraps ONLY the indicator, so its single element child
+ *   is unambiguously the thing to ring, whatever a theme renders there.
+ * @param isDisabled - Skip the ring; a disabled control is not focusable.
+ *
+ * @example
+ * ```
+ * const indicatorRef = useRef<HTMLSpanElement>(null);
+ * const {focusProps} = useIndicatorFocusRing(indicatorRef, isDisabled);
+ * <div {...focusProps}>
+ *   <input type="checkbox" />
+ *   <span ref={indicatorRef}><Indicator state="checked" /></span>
+ * </div>
+ * ```
+ */
+export declare function useIndicatorFocusRing(containerRef: RefObject<HTMLElement | null>, isDisabled?: boolean): UseIndicatorFocusRingReturn;
+//# sourceMappingURL=useIndicatorFocusRing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIndicatorFocusRing.d.ts","sourceRoot":"","sources":["../../src/hooks/useIndicatorFocusRing.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,2BAA2B;IAC1C,6DAA6D;IAC7D,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;QAClD,MAAM,EAAE,MAAM,IAAI,CAAC;KACpB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC3C,UAAU,UAAQ,GACjB,2BAA2B,CAkC7B"}