@astryxdesign/core 0.2.0 → 0.3.0

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

@@ -0,0 +1,303 @@
+/**
+ * @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. GENERATED by
+ *   scripts/gen-container-reveal-pool.mjs — do not edit by hand.
+ *
+ * WHY A POOL: `stylex.when.ancestor(':hover', marker)` welds the marker's
+ * class into the compiled selector (`.marker:hover *`), so a marker and the
+ * styles referencing it are inseparable at compile time. A single shared
+ * marker would leak hover/focus across NESTED reveal containers (an ancestor
+ * container's `:hover` matches a descendant container's revealed content).
+ * Pre-declaring N markers lets useContainerReveal hand each concurrently
+ * mounted container a distinct marker (free-list in useContainerReveal),
+ * isolating nested containers without the caller authoring any StyleX.
+ *
+ * SYNC: When the block shape changes, edit
+ * scripts/gen-container-reveal-pool.mjs and useContainerReveal.ts, then
+ * regenerate (node scripts/gen-container-reveal-pool.mjs) and commit.
+ */
+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, 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", string | {
+            readonly '@media (hover: hover)': "0s, 0s";
+        }>;
+        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, 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", string | {
+            readonly '@media (hover: hover)': "0s, 0s";
+        }>;
+        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, 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", string | {
+            readonly '@media (hover: hover)': "0s, 0s";
+        }>;
+        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, 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", string | {
+            readonly '@media (hover: hover)': "0s, 0s";
+        }>;
+        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, 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", string | {
+            readonly '@media (hover: hover)': "0s, 0s";
+        }>;
+        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, 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", string | {
+            readonly '@media (hover: hover)': "0s, 0s";
+        }>;
+        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;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,eAAO,MAAM,SAAS,IAAI,CAAC;AAE3B,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAkFxC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAkFxC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAkFxC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAkFxC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAkFxC,eAAO,MAAM,EAAE;;EAAwB,CAAC;AAqFxC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CP,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC"}

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

@@ -0,0 +1,292 @@
+// 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. GENERATED by
+ *   scripts/gen-container-reveal-pool.mjs — do not edit by hand.
+ *
+ * WHY A POOL: `stylex.when.ancestor(':hover', marker)` welds the marker's
+ * class into the compiled selector (`.marker:hover *`), so a marker and the
+ * styles referencing it are inseparable at compile time. A single shared
+ * marker would leak hover/focus across NESTED reveal containers (an ancestor
+ * container's `:hover` matches a descendant container's revealed content).
+ * Pre-declaring N markers lets useContainerReveal hand each concurrently
+ * mounted container a distinct marker (free-list in useContainerReveal),
+ * isolating nested containers without the caller authoring any StyleX.
+ *
+ * SYNC: When the block shape changes, edit
+ * scripts/gen-container-reveal-pool.mjs and useContainerReveal.ts, then
+ * regenerate (node scripts/gen-container-reveal-pool.mjs) and commit.
+ */
+
+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: "x1n1p2mu",
+    kIyJzY: "x1tw3moq xsr0bmt",
+    kAMwcw: "xlr8y92",
+    kzIqYQ: "xd00j3c",
+    kIr0Dl: "x11ixquu x1ue31p x134zogi x7so5qh x1eb35i0",
+    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: "x1n1p2mu",
+    kIyJzY: "x1tw3moq xsr0bmt",
+    kAMwcw: "xlr8y92",
+    kzIqYQ: "xd00j3c",
+    kIr0Dl: "x11ixquu xqw8whb x1xhgmdq x7so5qh x1eb35i0",
+    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: "x1n1p2mu",
+    kIyJzY: "x1tw3moq xsr0bmt",
+    kAMwcw: "xlr8y92",
+    kzIqYQ: "xd00j3c",
+    kIr0Dl: "x11ixquu xrhii57 xeozflw x7so5qh x1eb35i0",
+    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: "x1n1p2mu",
+    kIyJzY: "x1tw3moq xsr0bmt",
+    kAMwcw: "xlr8y92",
+    kzIqYQ: "xd00j3c",
+    kIr0Dl: "x11ixquu xtj9ir3 x1okg2q x7so5qh x1eb35i0",
+    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: "x1n1p2mu",
+    kIyJzY: "x1tw3moq xsr0bmt",
+    kAMwcw: "xlr8y92",
+    kzIqYQ: "xd00j3c",
+    kIr0Dl: "x11ixquu x1ybz0u4 x1fpm3bq x7so5qh x1eb35i0",
+    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: "x1n1p2mu",
+    kIyJzY: "x1tw3moq xsr0bmt",
+    kAMwcw: "xlr8y92",
+    kzIqYQ: "xd00j3c",
+    kIr0Dl: "x11ixquu x17lvmk x192eg1j x7so5qh x1eb35i0",
+    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 style objects carry `when.ancestor` conditionals that
+// the public `StyleXStyles` type does not model, so the slot shape is inferred
+// from the generated blocks rather than annotated.
+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

@@ -45,4 +45,6 @@ export type { InteractiveRole, UseInteractiveRoleOptions, } from './useInteracti
 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,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAE9B,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

@@ -30,4 +30,5 @@ 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";