use-scroll-animate 2.8.0 → 3.0.0

package/dist/components/interaction.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var base = require('../chunks/base-BR6fYLBA.cjs');
+var base = require('../chunks/base-CXx7jZ-o.cjs');
 
 var css$5 = "usa-ripple{position:relative;display:inline-block;overflow:hidden;isolation:isolate;border-radius:inherit;-webkit-tap-highlight-color:transparent}usa-ripple[block]{display:block}usa-ripple .usa-ripple-wave{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);z-index:-1;will-change:transform,opacity}";
 

package/dist/components/interaction.js

@@ -1,5 +1,5 @@
-import { d as defineElement, E as EASE_OUT, r as raf, e as caf, b as clamp, f as EASE_SPRING } from '../chunks/base-C_w9ibbn.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-C_w9ibbn.js';
+import { f as defineElement, i as EASE_OUT, r as raf, d as caf, h as clamp, E as EASE_SPRING } from '../chunks/base-Co98Z2iM.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-Co98Z2iM.js';
 
 var css$5 = "usa-ripple{position:relative;display:inline-block;overflow:hidden;isolation:isolate;border-radius:inherit;-webkit-tap-highlight-color:transparent}usa-ripple[block]{display:block}usa-ripple .usa-ripple-wave{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);z-index:-1;will-change:transform,opacity}";
 

package/dist/components/jsx.cjs

@@ -0,0 +1,3 @@
+'use strict';
+
+//# sourceMappingURL=jsx.cjs.map

package/dist/components/jsx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/jsx.d.cts

@@ -0,0 +1,45 @@
+/** The component categories and their default tags. */
+declare const COMPONENT_CATEGORIES: {
+    readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
+    readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
+    readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
+    readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
+    readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
+    readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
+    readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
+    readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
+    readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
+    readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
+};
+
+/**
+ * use-scroll-animate/components/jsx — JSX typings for the raw `<usa-*>` tags (v2.9).
+ *
+ * ```ts
+ * // src/usa-jsx.d.ts (React 18/19)
+ * import type { UsaIntrinsicElements } from 'use-scroll-animate/components/jsx';
+ * declare module 'react' { namespace JSX { interface IntrinsicElements extends UsaIntrinsicElements {} } }
+ * // Solid / Preact / other JSX: extend their JSX.IntrinsicElements the same way.
+ * ```
+ */
+
+type Tags = (typeof COMPONENT_CATEGORIES)[keyof typeof COMPONENT_CATEGORIES][number];
+/** Attributes accepted by every `<usa-*>` element (all component attributes are strings / booleans). */
+interface UsaAttributes {
+    [attr: string]: unknown;
+    class?: string;
+    className?: string;
+    id?: string;
+    style?: unknown;
+    slot?: string;
+    variant?: 'minimal' | 'neon' | 'glass' | 'brutalist' | 'fluent' | 'material' | (string & {});
+    children?: unknown;
+    ref?: unknown;
+}
+type UsaIntrinsicElements = {
+    [K in Tags]: UsaAttributes;
+};
+type UsaTag = Tags;
+
+export type { UsaAttributes, UsaIntrinsicElements, UsaTag };

package/dist/components/jsx.d.ts

@@ -0,0 +1,45 @@
+/** The component categories and their default tags. */
+declare const COMPONENT_CATEGORIES: {
+    readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
+    readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
+    readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
+    readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
+    readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
+    readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
+    readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
+    readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
+    readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
+    readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
+};
+
+/**
+ * use-scroll-animate/components/jsx — JSX typings for the raw `<usa-*>` tags (v2.9).
+ *
+ * ```ts
+ * // src/usa-jsx.d.ts (React 18/19)
+ * import type { UsaIntrinsicElements } from 'use-scroll-animate/components/jsx';
+ * declare module 'react' { namespace JSX { interface IntrinsicElements extends UsaIntrinsicElements {} } }
+ * // Solid / Preact / other JSX: extend their JSX.IntrinsicElements the same way.
+ * ```
+ */
+
+type Tags = (typeof COMPONENT_CATEGORIES)[keyof typeof COMPONENT_CATEGORIES][number];
+/** Attributes accepted by every `<usa-*>` element (all component attributes are strings / booleans). */
+interface UsaAttributes {
+    [attr: string]: unknown;
+    class?: string;
+    className?: string;
+    id?: string;
+    style?: unknown;
+    slot?: string;
+    variant?: 'minimal' | 'neon' | 'glass' | 'brutalist' | 'fluent' | 'material' | (string & {});
+    children?: unknown;
+    ref?: unknown;
+}
+type UsaIntrinsicElements = {
+    [K in Tags]: UsaAttributes;
+};
+type UsaTag = Tags;
+
+export type { UsaAttributes, UsaIntrinsicElements, UsaTag };

package/dist/components/jsx.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=jsx.js.map

package/dist/components/jsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/lazy.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+var indexTags = require('../chunks/index-tags-BEM98giN.cjs');
+
+/**
+ * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).
+ *
+ * `lazyDefine()` scans the page (and watches it with a MutationObserver) for
+ * `<usa-*>` tags that are not registered yet and dynamically imports only the
+ * categories they belong to. Bundlers split each category into its own chunk,
+ * so a page that only uses `<usa-button>` loads just the click category.
+ *
+ * ```js
+ * import { lazyDefine } from 'use-scroll-animate/components/lazy';
+ * lazyDefine(); // returns a stop() function
+ * ```
+ */
+const LOADERS = {
+    reveal: () => Promise.resolve().then(function () { return require('./reveal.cjs'); }),
+    text: () => Promise.resolve().then(function () { return require('./text.cjs'); }),
+    interaction: () => Promise.resolve().then(function () { return require('./interaction.cjs'); }),
+    feedback: () => Promise.resolve().then(function () { return require('./feedback.cjs'); }),
+    background: () => Promise.resolve().then(function () { return require('./background.cjs'); }),
+    transitions: () => Promise.resolve().then(function () { return require('./transitions.cjs'); }),
+    physics: () => Promise.resolve().then(function () { return require('./physics.cjs'); }),
+    cards: () => Promise.resolve().then(function () { return require('./cards.cjs'); }),
+    click: () => Promise.resolve().then(function () { return require('./click.cjs'); }),
+    ui: () => Promise.resolve().then(function () { return require('./ui.cjs'); }),
+    page: () => Promise.resolve().then(function () { return require('./page.cjs'); }),
+};
+const TAG_TO_CAT = new Map();
+for (const [cat, tags] of Object.entries(indexTags.COMPONENT_CATEGORIES))
+    for (const t of tags)
+        TAG_TO_CAT.set(t, cat);
+const loaded = new Map();
+/** Category of a tag (`usa-button` → `click`), or `null`. */
+const categoryOfTag = (tag) => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;
+/** Load and register one category (once). */
+function loadCategory(cat) {
+    let p = loaded.get(cat);
+    if (!p) {
+        p = LOADERS[cat]().then((m) => {
+            const fn = Object.keys(m).find((k) => /^define[A-Z]\w*Components$/.test(k));
+            if (fn)
+                m[fn]();
+        });
+        loaded.set(cat, p);
+    }
+    return p;
+}
+/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */
+async function defineUsed(root = document) {
+    if (typeof customElements === 'undefined')
+        return [];
+    const cats = new Set();
+    const scan = (el) => {
+        const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;
+        if (c)
+            cats.add(c);
+    };
+    if (root.localName)
+        scan(root);
+    root.querySelectorAll('*').forEach(scan);
+    await Promise.all([...cats].map(loadCategory));
+    return [...cats];
+}
+/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */
+function lazyDefine(root = typeof document !== 'undefined' ? document : undefined) {
+    if (!root || typeof MutationObserver === 'undefined')
+        return () => undefined;
+    defineUsed(root);
+    const mo = new MutationObserver((records) => {
+        for (const r of records)
+            r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n));
+    });
+    mo.observe(root, { childList: true, subtree: true });
+    return () => mo.disconnect();
+}
+
+exports.categoryOfTag = categoryOfTag;
+exports.defineUsed = defineUsed;
+exports.lazyDefine = lazyDefine;
+exports.loadCategory = loadCategory;
+//# sourceMappingURL=lazy.cjs.map

package/dist/components/lazy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.cjs","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":["COMPONENT_CATEGORIES"],"mappings":"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"}

package/dist/components/lazy.d.cts

@@ -0,0 +1,40 @@
+/** The component categories and their default tags. */
+declare const COMPONENT_CATEGORIES: {
+    readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
+    readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
+    readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
+    readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
+    readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
+    readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
+    readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
+    readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
+    readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
+    readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
+};
+type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
+
+/**
+ * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).
+ *
+ * `lazyDefine()` scans the page (and watches it with a MutationObserver) for
+ * `<usa-*>` tags that are not registered yet and dynamically imports only the
+ * categories they belong to. Bundlers split each category into its own chunk,
+ * so a page that only uses `<usa-button>` loads just the click category.
+ *
+ * ```js
+ * import { lazyDefine } from 'use-scroll-animate/components/lazy';
+ * lazyDefine(); // returns a stop() function
+ * ```
+ */
+
+/** Category of a tag (`usa-button` → `click`), or `null`. */
+declare const categoryOfTag: (tag: string) => ComponentCategory | null;
+/** Load and register one category (once). */
+declare function loadCategory(cat: ComponentCategory): Promise<void>;
+/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */
+declare function defineUsed(root?: ParentNode): Promise<ComponentCategory[]>;
+/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */
+declare function lazyDefine(root?: ParentNode): () => void;
+
+export { categoryOfTag, defineUsed, lazyDefine, loadCategory };

package/dist/components/lazy.d.ts

@@ -0,0 +1,40 @@
+/** The component categories and their default tags. */
+declare const COMPONENT_CATEGORIES: {
+    readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
+    readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
+    readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
+    readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
+    readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
+    readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
+    readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
+    readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
+    readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
+    readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
+    readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
+};
+type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
+
+/**
+ * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).
+ *
+ * `lazyDefine()` scans the page (and watches it with a MutationObserver) for
+ * `<usa-*>` tags that are not registered yet and dynamically imports only the
+ * categories they belong to. Bundlers split each category into its own chunk,
+ * so a page that only uses `<usa-button>` loads just the click category.
+ *
+ * ```js
+ * import { lazyDefine } from 'use-scroll-animate/components/lazy';
+ * lazyDefine(); // returns a stop() function
+ * ```
+ */
+
+/** Category of a tag (`usa-button` → `click`), or `null`. */
+declare const categoryOfTag: (tag: string) => ComponentCategory | null;
+/** Load and register one category (once). */
+declare function loadCategory(cat: ComponentCategory): Promise<void>;
+/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */
+declare function defineUsed(root?: ParentNode): Promise<ComponentCategory[]>;
+/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */
+declare function lazyDefine(root?: ParentNode): () => void;
+
+export { categoryOfTag, defineUsed, lazyDefine, loadCategory };

package/dist/components/lazy.js

@@ -0,0 +1,79 @@
+import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-f37txHmb.js';
+
+/**
+ * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).
+ *
+ * `lazyDefine()` scans the page (and watches it with a MutationObserver) for
+ * `<usa-*>` tags that are not registered yet and dynamically imports only the
+ * categories they belong to. Bundlers split each category into its own chunk,
+ * so a page that only uses `<usa-button>` loads just the click category.
+ *
+ * ```js
+ * import { lazyDefine } from 'use-scroll-animate/components/lazy';
+ * lazyDefine(); // returns a stop() function
+ * ```
+ */
+const LOADERS = {
+    reveal: () => import('./reveal.js'),
+    text: () => import('./text.js'),
+    interaction: () => import('./interaction.js'),
+    feedback: () => import('./feedback.js'),
+    background: () => import('./background.js'),
+    transitions: () => import('./transitions.js'),
+    physics: () => import('./physics.js'),
+    cards: () => import('./cards.js'),
+    click: () => import('./click.js'),
+    ui: () => import('./ui.js'),
+    page: () => import('./page.js'),
+};
+const TAG_TO_CAT = new Map();
+for (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES))
+    for (const t of tags)
+        TAG_TO_CAT.set(t, cat);
+const loaded = new Map();
+/** Category of a tag (`usa-button` → `click`), or `null`. */
+const categoryOfTag = (tag) => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;
+/** Load and register one category (once). */
+function loadCategory(cat) {
+    let p = loaded.get(cat);
+    if (!p) {
+        p = LOADERS[cat]().then((m) => {
+            const fn = Object.keys(m).find((k) => /^define[A-Z]\w*Components$/.test(k));
+            if (fn)
+                m[fn]();
+        });
+        loaded.set(cat, p);
+    }
+    return p;
+}
+/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */
+async function defineUsed(root = document) {
+    if (typeof customElements === 'undefined')
+        return [];
+    const cats = new Set();
+    const scan = (el) => {
+        const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;
+        if (c)
+            cats.add(c);
+    };
+    if (root.localName)
+        scan(root);
+    root.querySelectorAll('*').forEach(scan);
+    await Promise.all([...cats].map(loadCategory));
+    return [...cats];
+}
+/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */
+function lazyDefine(root = typeof document !== 'undefined' ? document : undefined) {
+    if (!root || typeof MutationObserver === 'undefined')
+        return () => undefined;
+    defineUsed(root);
+    const mo = new MutationObserver((records) => {
+        for (const r of records)
+            r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n));
+    });
+    mo.observe(root, { childList: true, subtree: true });
+    return () => mo.disconnect();
+}
+
+export { categoryOfTag, defineUsed, lazyDefine, loadCategory };
+//# sourceMappingURL=lazy.js.map

package/dist/components/lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.js","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":[],"mappings":"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"}

package/dist/components/page.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var base = require('../chunks/base-BR6fYLBA.cjs');
-var spring = require('../chunks/spring-DyHe1Hfa.cjs');
+var base = require('../chunks/base-CXx7jZ-o.cjs');
+var spring = require('../chunks/spring-2OTnYCzm.cjs');
 
 var css$8 = "usa-cursor{--usa-cursor-color:var(--usa-accent,#7c5cff);--usa-cursor-size:28px;position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity 0.2s ease;contain:strict}usa-cursor[data-active]{opacity:1}usa-cursor .usa-cursor-ring{position:absolute;left:0;top:0;width:var(--usa-cursor-size);height:var(--usa-cursor-size);margin:calc(var(--usa-cursor-size) / -2) 0 0 calc(var(--usa-cursor-size) / -2);border:1.5px solid var(--usa-cursor-color);border-radius:999px;box-sizing:border-box;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),height 0.25s cubic-bezier(0.34,1.56,0.64,1),margin 0.25s ease,border-radius 0.25s ease,background-color 0.2s ease;will-change:transform}usa-cursor[mode=\"trail\"] .usa-cursor-ring{border:0;background:var(--usa-cursor-color);width:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));height:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));margin:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2) 0 0 calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2);opacity:calc(1 - var(--i) * 0.11)}usa-cursor[data-hover] .usa-cursor-ring:first-child{width:calc(var(--usa-cursor-size) * 1.6);height:calc(var(--usa-cursor-size) * 1.6);margin:calc(var(--usa-cursor-size) * -0.8) 0 0 calc(var(--usa-cursor-size) * -0.8);background:color-mix(in srgb,var(--usa-cursor-color) 15%,transparent)}usa-cursor[data-snapped] .usa-cursor-ring{border-radius:12px;background:color-mix(in srgb,var(--usa-cursor-color) 12%,transparent);translate:-50% -50%;margin:0}usa-cursor[data-down] .usa-cursor-ring:first-child{scale:0.8}usa-cursor .usa-cursor-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--usa-cursor-color)}usa-cursor[data-snapped] .usa-cursor-dot{opacity:0}usa-cursor .usa-cursor-glow{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--usa-cursor-color) 35%,transparent),transparent 65%);mix-blend-mode:screen}.usa-cursor-none,.usa-cursor-none *{cursor:none !important}@media (pointer:coarse),(prefers-reduced-motion:reduce){usa-cursor{display:none}.usa-cursor-none,.usa-cursor-none *{cursor:auto !important}}";
 

package/dist/components/page.js

@@ -1,6 +1,6 @@
-import { d as defineElement, e as caf, r as raf, p as prefersReducedMotion, n as now, g as getMotionIntensity, a as configureComponents, h as adoptStyles } from '../chunks/base-C_w9ibbn.js';
-export { M as MOTION_SCALE } from '../chunks/base-C_w9ibbn.js';
-import { e as springSamples } from '../chunks/spring-Dc8ZqDWE.js';
+import { f as defineElement, d as caf, r as raf, p as prefersReducedMotion, n as now, g as getMotionIntensity, a as configureComponents, e as adoptStyles } from '../chunks/base-Co98Z2iM.js';
+export { M as MOTION_SCALE } from '../chunks/base-Co98Z2iM.js';
+import { e as springSamples } from '../chunks/spring-YNUpez2g.js';
 
 var css$8 = "usa-cursor{--usa-cursor-color:var(--usa-accent,#7c5cff);--usa-cursor-size:28px;position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity 0.2s ease;contain:strict}usa-cursor[data-active]{opacity:1}usa-cursor .usa-cursor-ring{position:absolute;left:0;top:0;width:var(--usa-cursor-size);height:var(--usa-cursor-size);margin:calc(var(--usa-cursor-size) / -2) 0 0 calc(var(--usa-cursor-size) / -2);border:1.5px solid var(--usa-cursor-color);border-radius:999px;box-sizing:border-box;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),height 0.25s cubic-bezier(0.34,1.56,0.64,1),margin 0.25s ease,border-radius 0.25s ease,background-color 0.2s ease;will-change:transform}usa-cursor[mode=\"trail\"] .usa-cursor-ring{border:0;background:var(--usa-cursor-color);width:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));height:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04));margin:calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2) 0 0 calc(var(--usa-cursor-size) * (0.45 - var(--i) * 0.04) / -2);opacity:calc(1 - var(--i) * 0.11)}usa-cursor[data-hover] .usa-cursor-ring:first-child{width:calc(var(--usa-cursor-size) * 1.6);height:calc(var(--usa-cursor-size) * 1.6);margin:calc(var(--usa-cursor-size) * -0.8) 0 0 calc(var(--usa-cursor-size) * -0.8);background:color-mix(in srgb,var(--usa-cursor-color) 15%,transparent)}usa-cursor[data-snapped] .usa-cursor-ring{border-radius:12px;background:color-mix(in srgb,var(--usa-cursor-color) 12%,transparent);translate:-50% -50%;margin:0}usa-cursor[data-down] .usa-cursor-ring:first-child{scale:0.8}usa-cursor .usa-cursor-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--usa-cursor-color)}usa-cursor[data-snapped] .usa-cursor-dot{opacity:0}usa-cursor .usa-cursor-glow{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--usa-cursor-color) 35%,transparent),transparent 65%);mix-blend-mode:screen}.usa-cursor-none,.usa-cursor-none *{cursor:none !important}@media (pointer:coarse),(prefers-reduced-motion:reduce){usa-cursor{display:none}.usa-cursor-none,.usa-cursor-none *{cursor:auto !important}}";
 

package/dist/components/physics.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var base = require('../chunks/base-BR6fYLBA.cjs');
-var spring = require('../chunks/spring-DyHe1Hfa.cjs');
+var base = require('../chunks/base-CXx7jZ-o.cjs');
+var spring = require('../chunks/spring-2OTnYCzm.cjs');
 
 var css$2 = "usa-spring{display:inline-block;transform-origin:50% 70%}usa-spring[block]{display:block}usa-spring[effect=\"drop\"]{transform-origin:50% 100%}usa-spring[data-state=\"hidden\"]{opacity:0}usa-spring[trigger=\"click\"],usa-spring[trigger=\"hover\"]{cursor:pointer;-webkit-tap-highlight-color:transparent}";
 

package/dist/components/physics.js

@@ -1,7 +1,7 @@
-import { d as defineElement, b as clamp } from '../chunks/base-C_w9ibbn.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-C_w9ibbn.js';
-import { d as springEasing, c as createSpring, s as snapTo, a as rubberBand, p as projectInertia } from '../chunks/spring-Dc8ZqDWE.js';
-export { S as SPRING_PRESETS, l as linearEasing, r as resolveSpring, b as spring, e as springSamples, f as stepSpring, g as supportsLinearEasing } from '../chunks/spring-Dc8ZqDWE.js';
+import { f as defineElement, h as clamp } from '../chunks/base-Co98Z2iM.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-Co98Z2iM.js';
+import { d as springEasing, c as createSpring, s as snapTo, a as rubberBand, p as projectInertia } from '../chunks/spring-YNUpez2g.js';
+export { S as SPRING_PRESETS, l as linearEasing, r as resolveSpring, b as spring, e as springSamples, f as stepSpring, g as supportsLinearEasing } from '../chunks/spring-YNUpez2g.js';
 
 var css$2 = "usa-spring{display:inline-block;transform-origin:50% 70%}usa-spring[block]{display:block}usa-spring[effect=\"drop\"]{transform-origin:50% 100%}usa-spring[data-state=\"hidden\"]{opacity:0}usa-spring[trigger=\"click\"],usa-spring[trigger=\"hover\"]{cursor:pointer;-webkit-tap-highlight-color:transparent}";
 

package/dist/components/react.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+var indexTags = require('../chunks/index-tags-BEM98giN.cjs');
+
+/**
+ * use-scroll-animate/components/react — React wrappers for every `<usa-*>`
+ * element (v2.9). React 19 handles custom elements natively; for React 18
+ * (and nicer DX in both) `createUsaComponents(React)` returns typed wrapper
+ * components that set **properties** (`checked`, `value`, `state`, …),
+ * forward `ref`, and map `onUsaChange`-style props to `usa:change` events.
+ *
+ * ```tsx
+ * import * as React from 'react';
+ * import { createUsaComponents } from 'use-scroll-animate/components/react';
+ * import { defineComponents } from 'use-scroll-animate/components';
+ * defineComponents();
+ * const { UsaButton, UsaToggle } = createUsaComponents(React);
+ * <UsaButton deform="squash" onUsaSubmit={(e) => e.detail.done(true)}><button>Pay</button></UsaButton>
+ * ```
+ *
+ * JSX types for the raw tags (`<usa-card effect="flip">`) come from
+ * `use-scroll-animate/components/jsx` (see `UsaIntrinsicElements`).
+ */
+/** `usa-flip-list` → `UsaFlipList` */
+const pascal = (tag) => tag.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());
+/** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */
+function eventName(prop) {
+    const m = /^on([A-Z].*)$/.exec(prop);
+    if (!m)
+        return null;
+    const kebab = m[1].replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    return kebab.startsWith('usa-') ? `usa:${kebab.slice(4)}` : kebab;
+}
+/** Props written as DOM properties (not attributes) when given non-string values. */
+const PROPS = new Set(['checked', 'value', 'state', 'open', 'liked', 'count', 'loading', 'flipped', 'selected', 'index', 'indeterminate']);
+/** All `<usa-*>` tags shipped by the package. */
+const USA_TAGS = Object.values(indexTags.COMPONENT_CATEGORIES).flat();
+function createUsaComponents(React) {
+    const useIso = React.useLayoutEffect || React.useEffect;
+    const make = (tag) => {
+        const C = React.forwardRef((props, ref) => {
+            const inner = React.useRef(null);
+            const attrs = {};
+            const events = [];
+            const propsSet = [];
+            for (const [k, v] of Object.entries(props)) {
+                if (k === 'children')
+                    continue;
+                const ev = typeof v === 'function' ? eventName(k) : null;
+                if (ev)
+                    events.push([ev, v]);
+                else if (PROPS.has(k) && typeof v !== 'string')
+                    propsSet.push([k, v]);
+                else if (k === 'className')
+                    attrs.class = v;
+                else if (typeof v === 'boolean') {
+                    if (v)
+                        attrs[k] = '';
+                }
+                else
+                    attrs[k] = v;
+            }
+            useIso(() => {
+                const el = inner.current;
+                if (!el)
+                    return;
+                for (const [k, v] of propsSet)
+                    el[k] = v;
+            });
+            useIso(() => {
+                const el = inner.current;
+                if (!el)
+                    return;
+                events.forEach(([n, f]) => el.addEventListener(n, f));
+                return () => events.forEach(([n, f]) => el.removeEventListener(n, f));
+            });
+            const setRef = (node) => {
+                inner.current = node;
+                if (typeof ref === 'function')
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            };
+            return React.createElement(tag, { ...attrs, ref: setRef }, props.children);
+        });
+        C.displayName = pascal(tag);
+        return C;
+    };
+    return Object.fromEntries(USA_TAGS.map((t) => [pascal(t), make(t)]));
+}
+
+exports.USA_TAGS = USA_TAGS;
+exports.createUsaComponents = createUsaComponents;
+exports.eventName = eventName;
+exports.pascal = pascal;
+//# sourceMappingURL=react.cjs.map

package/dist/components/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.cjs","sources":["../../src/components/frameworks/react.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/react — React wrappers for every `<usa-*>`\n * element (v2.9). React 19 handles custom elements natively; for React 18\n * (and nicer DX in both) `createUsaComponents(React)` returns typed wrapper\n * components that set **properties** (`checked`, `value`, `state`, …),\n * forward `ref`, and map `onUsaChange`-style props to `usa:change` events.\n *\n * ```tsx\n * import * as React from 'react';\n * import { createUsaComponents } from 'use-scroll-animate/components/react';\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents();\n * const { UsaButton, UsaToggle } = createUsaComponents(React);\n * <UsaButton deform=\"squash\" onUsaSubmit={(e) => e.detail.done(true)}><button>Pay</button></UsaButton>\n * ```\n *\n * JSX types for the raw tags (`<usa-card effect=\"flip\">`) come from\n * `use-scroll-animate/components/jsx` (see `UsaIntrinsicElements`).\n */\nimport { COMPONENT_CATEGORIES } from '../index-tags';\n\ntype AnyProps = Record<string, any>;\ninterface ReactLike {\n  createElement: (type: any, props?: any, ...children: any[]) => any;\n  forwardRef: (render: (props: any, ref: any) => any) => any;\n  useRef: <T>(v: T) => { current: T };\n  useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void;\n  useLayoutEffect?: (fn: () => void | (() => void), deps?: unknown[]) => void;\n}\n\n/** `usa-flip-list` → `UsaFlipList` */\nexport const pascal = (tag: string): string => tag.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());\n/** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */\nexport function eventName(prop: string): string | null {\n  const m = /^on([A-Z].*)$/.exec(prop);\n  if (!m) return null;\n  const kebab = m[1].replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n  return kebab.startsWith('usa-') ? `usa:${kebab.slice(4)}` : kebab;\n}\n\n/** Props written as DOM properties (not attributes) when given non-string values. */\nconst PROPS = new Set(['checked', 'value', 'state', 'open', 'liked', 'count', 'loading', 'flipped', 'selected', 'index', 'indeterminate']);\n\n/** All `<usa-*>` tags shipped by the package. */\nexport const USA_TAGS: string[] = Object.values(COMPONENT_CATEGORIES).flat() as string[];\n\nexport function createUsaComponents(React: ReactLike): Record<string, any> {\n  const useIso = React.useLayoutEffect || React.useEffect;\n  const make = (tag: string) => {\n    const C = React.forwardRef((props: AnyProps, ref: any) => {\n      const inner = React.useRef<HTMLElement | null>(null);\n      const attrs: AnyProps = {};\n      const events: [string, any][] = [];\n      const propsSet: [string, any][] = [];\n      for (const [k, v] of Object.entries(props)) {\n        if (k === 'children') continue;\n        const ev = typeof v === 'function' ? eventName(k) : null;\n        if (ev) events.push([ev, v]);\n        else if (PROPS.has(k) && typeof v !== 'string') propsSet.push([k, v]);\n        else if (k === 'className') attrs.class = v;\n        else if (typeof v === 'boolean') {\n          if (v) attrs[k] = '';\n        } else attrs[k] = v;\n      }\n      useIso(() => {\n        const el = inner.current as any;\n        if (!el) return;\n        for (const [k, v] of propsSet) el[k] = v;\n      });\n      useIso(() => {\n        const el = inner.current;\n        if (!el) return;\n        events.forEach(([n, f]) => el.addEventListener(n, f));\n        return () => events.forEach(([n, f]) => el.removeEventListener(n, f));\n      });\n      const setRef = (node: HTMLElement | null) => {\n        inner.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      };\n      return React.createElement(tag, { ...attrs, ref: setRef }, props.children);\n    });\n    (C as any).displayName = pascal(tag);\n    return C;\n  };\n  return Object.fromEntries(USA_TAGS.map((t) => [pascal(t), make(t)]));\n}\n"],"names":["COMPONENT_CATEGORIES"],"mappings":"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"}

package/dist/components/react.d.cts

@@ -0,0 +1,18 @@
+interface ReactLike {
+    createElement: (type: any, props?: any, ...children: any[]) => any;
+    forwardRef: (render: (props: any, ref: any) => any) => any;
+    useRef: <T>(v: T) => {
+        current: T;
+    };
+    useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void;
+    useLayoutEffect?: (fn: () => void | (() => void), deps?: unknown[]) => void;
+}
+/** `usa-flip-list` → `UsaFlipList` */
+declare const pascal: (tag: string) => string;
+/** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */
+declare function eventName(prop: string): string | null;
+/** All `<usa-*>` tags shipped by the package. */
+declare const USA_TAGS: string[];
+declare function createUsaComponents(React: ReactLike): Record<string, any>;
+
+export { USA_TAGS, createUsaComponents, eventName, pascal };

package/dist/components/react.d.ts

@@ -0,0 +1,18 @@
+interface ReactLike {
+    createElement: (type: any, props?: any, ...children: any[]) => any;
+    forwardRef: (render: (props: any, ref: any) => any) => any;
+    useRef: <T>(v: T) => {
+        current: T;
+    };
+    useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void;
+    useLayoutEffect?: (fn: () => void | (() => void), deps?: unknown[]) => void;
+}
+/** `usa-flip-list` → `UsaFlipList` */
+declare const pascal: (tag: string) => string;
+/** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */
+declare function eventName(prop: string): string | null;
+/** All `<usa-*>` tags shipped by the package. */
+declare const USA_TAGS: string[];
+declare function createUsaComponents(React: ReactLike): Record<string, any>;
+
+export { USA_TAGS, createUsaComponents, eventName, pascal };