@astryxdesign/core 0.1.9 → 0.2.0-canary.068bda9

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

@@ -0,0 +1,281 @@
+/**
+ * @file containerReveal.pool.stylex.ts
+ * @input Uses StyleX, theme tokens
+ * @output A fixed pool of scoped markers, each paired with its reveal style
+ *   blocks (reveal / conceal, each with a layout-preserved variant) compiled
+ *   against that marker.
+ * @position Internal to useContainerReveal.
+ *
+ * WHY A POOL OF LITERAL BLOCKS: `stylex.when.ancestor(':hover', marker)` is
+ * resolved by the StyleX compiler, which welds the marker's class into the
+ * emitted selector (`.marker:hover *`). A marker and the styles referencing it
+ * are therefore inseparable at build time — the marker cannot be passed as a
+ * runtime argument, so the blocks cannot be produced by a loop or a helper and
+ * must be written out literally per marker. A single shared marker would leak
+ * hover/focus across NESTED reveal containers (an ancestor container's :hover
+ * matches a descendant container's revealed content), so useContainerReveal
+ * hands each concurrently mounted container a distinct marker from this pool
+ * (see the free-list there).
+ *
+ * The reveal recipe hides content with `position: absolute` (removed from
+ * layout flow, so it reserves no space) plus `opacity: 0`. Both keep the
+ * content in the accessibility tree and tab order — unlike display/visibility
+ * — so it stays reachable by keyboard and assistive tech while hidden.
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const POOL_SIZE = 6;
+export declare const m0: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m1: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m2: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m3: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m4: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const m5: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
+export declare const POOL: readonly [{
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: 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", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "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", 0 | 1 | {
+            readonly '@media (hover: hover)': 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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: 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", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "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", 0 | 1 | {
+            readonly '@media (hover: hover)': 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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: 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", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "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", 0 | 1 | {
+            readonly '@media (hover: hover)': 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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: 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", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "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", 0 | 1 | {
+            readonly '@media (hover: hover)': 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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: 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", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "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", 0 | 1 | {
+            readonly '@media (hover: hover)': 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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}, {
+    readonly marker: Readonly<{
+        readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+    }>;
+    readonly reveal: 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", 0 | 1 | {
+            readonly '@media (hover: hover)': 1;
+        }>;
+        readonly position: stylex.StyleXClassNameFor<"position", "static" | "absolute" | {
+            readonly '@media (hover: hover)': "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", 0 | 1 | {
+            readonly '@media (hover: hover)': 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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+    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", 1 | {
+            readonly '@media (hover: hover)': 0;
+        }>;
+    }>;
+}];
+export type RevealSlot = (typeof POOL)[number];
+//# sourceMappingURL=containerReveal.pool.stylex.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"containerReveal.pool.stylex.d.ts","sourceRoot":"","sources":["../../src/hooks/containerReveal.pool.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,eAAO,MAAM,SAAS,IAAI,CAAC;AAE3B,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAsExC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAwExC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOP,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/hooks/containerReveal.pool.stylex.js

@@ -0,0 +1,281 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file containerReveal.pool.stylex.ts
+ * @input Uses StyleX, theme tokens
+ * @output A fixed pool of scoped markers, each paired with its reveal style
+ *   blocks (reveal / conceal, each with a layout-preserved variant) compiled
+ *   against that marker.
+ * @position Internal to useContainerReveal.
+ *
+ * WHY A POOL OF LITERAL BLOCKS: `stylex.when.ancestor(':hover', marker)` is
+ * resolved by the StyleX compiler, which welds the marker's class into the
+ * emitted selector (`.marker:hover *`). A marker and the styles referencing it
+ * are therefore inseparable at build time — the marker cannot be passed as a
+ * runtime argument, so the blocks cannot be produced by a loop or a helper and
+ * must be written out literally per marker. A single shared marker would leak
+ * hover/focus across NESTED reveal containers (an ancestor container's :hover
+ * matches a descendant container's revealed content), so useContainerReveal
+ * hands each concurrently mounted container a distinct marker from this pool
+ * (see the free-list there).
+ *
+ * The reveal recipe hides content with `position: absolute` (removed from
+ * layout flow, so it reserves no space) plus `opacity: 0`. Both keep the
+ * content in the accessibility tree and tab order — unlike display/visibility
+ * — so it stays reachable by keyboard and assistive tech while hidden.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { durationVars, easeVars } from "../theme/tokens.stylex.js";
+export const POOL_SIZE = 6;
+export const m0 = {
+  x177fznd: "x177fznd",
+  $$css: true
+};
+const s0 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xz63v9m x1ceiq2s xhva3ql",
+    kVAEAm: "x10l6tqk xd2i8i8 xw895rg x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xz63v9m x1ceiq2s xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x1d23w33",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x1d23w33",
+    $$css: true
+  }
+};
+export const m1 = {
+  x1e36hu2: "x1e36hu2",
+  $$css: true
+};
+const s1 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x7g73g2 x8e9lel xhva3ql",
+    kVAEAm: "x10l6tqk x13sqjsa xxj8d0r x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x7g73g2 x8e9lel xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x19f70rm",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x19f70rm",
+    $$css: true
+  }
+};
+export const m2 = {
+  x10zkftw: "x10zkftw",
+  $$css: true
+};
+const s2 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xe0m1oz xtpmopf xhva3ql",
+    kVAEAm: "x10l6tqk x1k2a1sm xs5no71 x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xe0m1oz xtpmopf xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr xramsae",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr xramsae",
+    $$css: true
+  }
+};
+export const m3 = {
+  xbjq1vy: "xbjq1vy",
+  $$css: true
+};
+const s3 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xnsjgr4 x1y0vk26 xhva3ql",
+    kVAEAm: "x10l6tqk x1cuf62g x1qy2sty x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk xnsjgr4 x1y0vk26 xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x177ftvf",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x177ftvf",
+    $$css: true
+  }
+};
+export const m4 = {
+  x3z7t8n: "x3z7t8n",
+  $$css: true
+};
+const s4 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x1qps2i7 x1a7n03g xhva3ql",
+    kVAEAm: "x10l6tqk xeilikp x1xz04m3 x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x1qps2i7 x1a7n03g xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x1k1siky",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr x1k1siky",
+    $$css: true
+  }
+};
+export const m5 = {
+  x6dglqq: "x6dglqq",
+  $$css: true
+};
+const s5 = {
+  reveal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x52nu6g xt179ik xhva3ql",
+    kVAEAm: "x10l6tqk x8j1s1q x8gw32m x4k19zs",
+    $$css: true
+  },
+  revealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "xg01cxk x52nu6g xt179ik xhva3ql",
+    $$css: true
+  },
+  conceal: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr xenj0cg",
+    $$css: true
+  },
+  concealLayoutPreserved: {
+    k1ekBW: "x19991ni",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kSiTet: "x1hc1fzr xenj0cg",
+    $$css: true
+  }
+};
+
+// The compiled StyleX objects carry `when.ancestor` conditionals the public
+// `StyleXStyles` type does not model, so the slot shape is inferred.
+export const POOL = [{
+  marker: m0,
+  reveal: s0.reveal,
+  revealLayoutPreserved: s0.revealLayoutPreserved,
+  conceal: s0.conceal,
+  concealLayoutPreserved: s0.concealLayoutPreserved
+}, {
+  marker: m1,
+  reveal: s1.reveal,
+  revealLayoutPreserved: s1.revealLayoutPreserved,
+  conceal: s1.conceal,
+  concealLayoutPreserved: s1.concealLayoutPreserved
+}, {
+  marker: m2,
+  reveal: s2.reveal,
+  revealLayoutPreserved: s2.revealLayoutPreserved,
+  conceal: s2.conceal,
+  concealLayoutPreserved: s2.concealLayoutPreserved
+}, {
+  marker: m3,
+  reveal: s3.reveal,
+  revealLayoutPreserved: s3.revealLayoutPreserved,
+  conceal: s3.conceal,
+  concealLayoutPreserved: s3.concealLayoutPreserved
+}, {
+  marker: m4,
+  reveal: s4.reveal,
+  revealLayoutPreserved: s4.revealLayoutPreserved,
+  conceal: s4.conceal,
+  concealLayoutPreserved: s4.concealLayoutPreserved
+}, {
+  marker: m5,
+  reveal: s5.reveal,
+  revealLayoutPreserved: s5.revealLayoutPreserved,
+  conceal: s5.conceal,
+  concealLayoutPreserved: s5.concealLayoutPreserved
+}];

package/dist/hooks/index.d.ts

@@ -38,9 +38,13 @@ export { useClickableContainer, INTERACTIVE_SELECTORS, } from './useClickableCon
 export type { UseClickableContainerOptions, ClickableContainerResult, } from './useClickableContainer';
 export { useInputContainer } from './useInputContainer';
 export type { UseInputContainerOptions } from './useInputContainer';
+export { useInputStatusIcon } from './useInputStatusIcon';
+export type { UseInputStatusIconOptions, UseInputStatusIconReturn, } from './useInputStatusIcon';
 export { useInteractiveRole } from './useInteractiveRole';
 export type { InteractiveRole, UseInteractiveRoleOptions, } from './useInteractiveRole';
 export { useLongPress } from './useLongPress';
 export type { UseLongPressOptions, UseLongPressHandlers } from './useLongPress';
 export { useDevWarning } from './useDevWarning';
+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":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,UAAU,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAElE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,mBAAmB,EAAC,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EACV,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EACL,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,4BAA4B,EAC5B,wBAAwB,GACzB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,wBAAwB,EAAC,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,YAAY,EACV,eAAe,EACf,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AAE9E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}

package/dist/hooks/index.js

@@ -27,6 +27,8 @@ export { useStreamingText } from "./useStreamingText.js";
 export { useImageMode } from "./useImageMode.js";
 export { useClickableContainer, INTERACTIVE_SELECTORS } from "./useClickableContainer.js";
 export { useInputContainer } from "./useInputContainer.js";
+export { useInputStatusIcon } from "./useInputStatusIcon.js";
 export { useInteractiveRole } from "./useInteractiveRole.js";
 export { useLongPress } from "./useLongPress.js";
-export { useDevWarning } from "./useDevWarning.js";
+export { useDevWarning } from "./useDevWarning.js";
+export { useContainerReveal } from "./useContainerReveal.js";

package/dist/hooks/isRtlElement.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file isRtlElement.ts
+ * @input DOM element (nullable)
+ * @output Exports isRtlElement helper resolving an element's computed text
+ *   direction
+ * @position Internal hook utility; used by useListFocus and useGridFocus to
+ *   auto-detect RTL for arrow-key navigation (same getComputedStyle precedent
+ *   as Resizable's ResizeHandle drag deltas).
+ */
+/**
+ * Whether `el` renders right-to-left, per its computed `direction`.
+ *
+ * SSR-safe: returns false when `el` is null or no DOM is available. Callers
+ * should invoke this lazily (on keydown, not on render) so getComputedStyle
+ * runs only when a horizontal arrow key is actually handled.
+ */
+export declare function isRtlElement(el: HTMLElement | null): boolean;
+//# sourceMappingURL=isRtlElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"isRtlElement.d.ts","sourceRoot":"","sources":["../../src/hooks/isRtlElement.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAK5D"}

package/dist/hooks/isRtlElement.js

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file isRtlElement.ts
+ * @input DOM element (nullable)
+ * @output Exports isRtlElement helper resolving an element's computed text
+ *   direction
+ * @position Internal hook utility; used by useListFocus and useGridFocus to
+ *   auto-detect RTL for arrow-key navigation (same getComputedStyle precedent
+ *   as Resizable's ResizeHandle drag deltas).
+ */
+
+/**
+ * Whether `el` renders right-to-left, per its computed `direction`.
+ *
+ * SSR-safe: returns false when `el` is null or no DOM is available. Callers
+ * should invoke this lazily (on keydown, not on render) so getComputedStyle
+ * runs only when a horizontal arrow key is actually handled.
+ */
+export function isRtlElement(el) {
+  if (!el || typeof window === 'undefined') {
+    return false;
+  }
+  return window.getComputedStyle(el).direction === 'rtl';
+}

package/dist/hooks/useAnnounce.d.ts

@@ -17,6 +17,9 @@ export type AnnounceFn = (message: string, politeness?: AnnouncePoliteness) => v
  * 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
  * ```