use-scroll-animate 3.8.0 → 4.0.0

package/dist/components/packs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"packs.js","sources":["../../src/components/packs/core.ts","../../src/components/packs/pack-el.ts","../../src/components/packs/index.ts"],"sourcesContent":["import { prefersReducedMotion, motionScale, EASE_OUT, EASE_SPRING, raf, now, clamp } from '../base';\n\ntype Cleanup = () => void;\n/** A pack primitive: wire one element, return a cleanup. */\ntype Effect = (el: HTMLElement, ctx: PackContext) => Cleanup | void;\n\nexport interface PackContext {\n  root: HTMLElement;\n  /** Index of the element among those with the same role (for staggering). */\n  index: number;\n  reduced: boolean;\n}\n\nconst anim = (el: Element, frames: Keyframe[], o: KeyframeAnimationOptions): Animation | null => {\n  if (typeof (el as HTMLElement).animate !== 'function') return null;\n  const k = motionScale();\n  return (el as HTMLElement).animate(frames, { ...o, duration: ((o.duration as number) ?? 400) * k, delay: (o.delay ?? 0) * k });\n};\nconst on = (el: EventTarget, type: string, fn: (e: any) => void): Cleanup => {\n  el.addEventListener(type, fn);\n  return () => el.removeEventListener(type, fn);\n};\nconst io = (el: Element, cb: () => void): Cleanup => {\n  if (typeof IntersectionObserver === 'undefined') return void cb() as unknown as Cleanup;\n  const o = new IntersectionObserver((es) => es.some((e) => e.isIntersecting) && (o.disconnect(), cb()), { threshold: 0.15 });\n  o.observe(el);\n  return () => o.disconnect();\n};\n\n/** Count `el`'s number up from 0 when it enters the view (keeps prefix / suffix / decimals). */\nexport function countUp(el: HTMLElement, duration = 1200): Cleanup {\n  const text = el.textContent || '';\n  const m = /(-?[\\d,]*\\.?\\d+)/.exec(text);\n  if (!m || prefersReducedMotion()) return () => {};\n  const target = Number(m[1].replace(/,/g, ''));\n  const dec = (m[1].split('.')[1] || '').length;\n  const fmt = (v: number) => text.replace(m[1], v.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec }));\n  el.setAttribute('aria-label', text.trim());\n  el.textContent = fmt(0);\n  let stop = false;\n  const off = io(el, () => {\n    const t0 = now();\n    const d = duration * motionScale() || 1;\n    const step = () => {\n      if (stop) return;\n      const p = clamp((now() - t0) / d, 0, 1);\n      el.textContent = fmt(target * (1 - Math.pow(1 - p, 3)));\n      if (p < 1) raf(step);\n    };\n    raf(step);\n  });\n  return () => {\n    stop = true;\n    off();\n    el.textContent = text;\n  };\n}\n\n/**\n * Fly a copy of `from` (e.g. a product image) into `to` (the cart icon) along\n * an arc, then bump the target. Resolves when it lands. Instant under\n * reduced motion (only the bump's state change, no flight).\n */\nexport async function flyToCart(from: Element, to: Element, o: { duration?: number } = {}): Promise<void> {\n  if (prefersReducedMotion() || typeof document === 'undefined') return;\n  const a = from.getBoundingClientRect();\n  const b = to.getBoundingClientRect();\n  const ghost = from.cloneNode(true) as HTMLElement;\n  ghost.setAttribute('aria-hidden', 'true');\n  Object.assign(ghost.style, { position: 'fixed', left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, margin: '0', zIndex: '2147483000', pointerEvents: 'none' });\n  document.body.appendChild(ghost);\n  const dx = b.left + b.width / 2 - (a.left + a.width / 2);\n  const dy = b.top + b.height / 2 - (a.top + a.height / 2);\n  const f = anim(ghost, [\n    { transform: 'translate(0, 0) scale(1)', opacity: 1 },\n    { transform: `translate(${dx * 0.5}px, ${dy * 0.5 - 80}px) scale(0.6)`, opacity: 0.9, offset: 0.5 },\n    { transform: `translate(${dx}px, ${dy}px) scale(0.15)`, opacity: 0.4 },\n  ], { duration: o.duration ?? 700, easing: 'cubic-bezier(0.5, 0, 0.5, 1)' });\n  await f?.finished.catch(() => undefined);\n  ghost.remove();\n  anim(to, [{ transform: 'scale(1)' }, { transform: 'scale(1.3)' }, { transform: 'scale(1)' }], { duration: 380, easing: EASE_SPRING });\n}\n\nconst PRIMITIVES: Record<string, Effect> = {\n  reveal: (el, c) => {\n    if (c.reduced) return;\n    el.style.opacity = '0';\n    const off = io(el, () => {\n      el.style.opacity = '';\n      anim(el, [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }], { duration: 600, delay: Math.min(c.index, 8) * 70, easing: EASE_OUT, fill: 'backwards' });\n    });\n    return () => (off(), (el.style.opacity = ''));\n  },\n  lift: (el, c) => {\n    if (c.reduced) return;\n    const a = on(el, 'pointerenter', () => anim(el, [{ transform: 'none' }, { transform: 'translateY(-6px) scale(1.02)' }], { duration: 220, easing: EASE_OUT, fill: 'forwards' }));\n    const b = on(el, 'pointerleave', () => anim(el, [{ transform: 'translateY(-6px) scale(1.02)' }, { transform: 'none' }], { duration: 260, easing: EASE_OUT, fill: 'forwards' }));\n    return () => (a(), b());\n  },\n  press: (el, c) => (c.reduced ? undefined : on(el, 'pointerdown', () => anim(el, [{ transform: 'scale(1)' }, { transform: 'scale(0.94)' }, { transform: 'scale(1)' }], { duration: 260, easing: EASE_SPRING }))),\n  'count-up': (el) => countUp(el),\n  pulse: (el, c) => {\n    if (c.reduced) return;\n    const a = anim(el, [{ boxShadow: '0 0 0 0 rgba(124, 92, 255, 0.55)' }, { boxShadow: '0 0 0 14px rgba(124, 92, 255, 0)' }], { duration: 1600, iterations: Infinity });\n    return () => a?.cancel();\n  },\n  float: (el, c) => {\n    if (c.reduced) return;\n    const a = anim(el, [{ transform: 'translateY(0)' }, { transform: 'translateY(-8px)' }, { transform: 'translateY(0)' }], { duration: 3000, delay: c.index * 300, iterations: Infinity, easing: 'ease-in-out' });\n    return () => a?.cancel();\n  },\n  shake: (el, c) => (c.reduced ? undefined : on(el, 'click', () => anim(el, [0, -8, 8, -6, 6, -3, 0].map((x) => ({ transform: `translateX(${x}px)` })), { duration: 420 }))),\n  bump: (el, c) => (c.reduced ? undefined : on(el, 'usa:bump', () => anim(el, [{ transform: 'scale(1)' }, { transform: 'scale(1.25)' }, { transform: 'scale(1)' }], { duration: 360, easing: EASE_SPRING }))),\n  'fly-to-cart': (el, c) =>\n    on(el, 'click', () => {\n      const cart = c.root.querySelector('[data-role=\"cart\"]') || document.querySelector('[data-role=\"cart\"]');\n      const item = el.closest('[data-role=\"product\"]')?.querySelector('img, [data-role=\"thumb\"]') || el;\n      if (cart) void flyToCart(item, cart).then(() => cart.dispatchEvent(new CustomEvent('usa:added', { bubbles: true })));\n    }),\n};\n\n/** The five effect packs: `data-role` → primitives. */\nexport const PACKS: Record<string, Record<string, string[]>> = {\n  ecommerce: { product: ['reveal', 'lift'], 'add-to-cart': ['press', 'fly-to-cart'], cart: ['bump'], price: ['count-up'], badge: ['pulse'] },\n  portfolio: { project: ['reveal', 'lift'], heading: ['reveal'], stat: ['count-up'], contact: ['press', 'pulse'] },\n  dashboard: { card: ['reveal'], stat: ['count-up'], alert: ['pulse'], action: ['press'] },\n  game: { button: ['press'], score: ['count-up', 'bump'], item: ['float'], hit: ['shake'], reward: ['pulse'] },\n  landing: { hero: ['reveal'], feature: ['reveal', 'lift'], cta: ['press', 'pulse'], logo: ['float'], stat: ['count-up'] },\n};\n\nexport type PackName = keyof typeof PACKS;\n\n/**\n * Apply an effect pack to `root`: every descendant with a `data-role` the\n * pack knows gets its effects (staggered by index). Returns an undo function.\n * Reduced motion: only non-motion behaviour (e.g. the cart event) remains.\n *\n * @example\n * applyPack('ecommerce', document.querySelector('main'));\n * // <article data-role=\"product\">… <button data-role=\"add-to-cart\"> … <a data-role=\"cart\">\n */\nexport function applyPack(name: PackName | string, root: HTMLElement | Document = document): Cleanup {\n  const pack = PACKS[name];\n  if (!pack || typeof document === 'undefined') return () => {};\n  const r = (root as Document).documentElement ? (root as Document).body : (root as HTMLElement);\n  const reduced = prefersReducedMotion();\n  const cleanups: Cleanup[] = [];\n  for (const [role, fx] of Object.entries(pack)) {\n    r.querySelectorAll<HTMLElement>(`[data-role=\"${role}\"]`).forEach((el, index) => {\n      for (const f of fx) {\n        const c = PRIMITIVES[f]?.(el, { root: r, index, reduced });\n        if (c) cleanups.push(c);\n      }\n    });\n  }\n  return () => cleanups.splice(0).forEach((c) => c());\n}\n\n/** Primitive names a pack uses (for docs / tooling). */\nexport const PACK_PRIMITIVES = Object.keys(PRIMITIVES);\n","import { defineElement, type UsaElement } from '../base';\nimport { applyPack, PACKS } from './core';\n\n/**\n * `<usa-pack name=\"ecommerce\">` — applies an effect pack (`ecommerce` ·\n * `portfolio` · `dashboard` · `game` · `landing`) to its subtree:\n * descendants opt in with `data-role` (see `PACKS`). Re-applies when\n * `name` changes; undone on disconnect.\n */\nexport interface UsaPackElement extends UsaElement {\n  readonly roles: string[];\n}\n\nexport function definePack(tag = 'usa-pack'): CustomElementConstructor | undefined {\n  return defineElement(tag, (Base) =>\n    class UsaPack extends Base {\n      static get observedAttributes(): string[] {\n        return ['name'];\n      }\n      get roles(): string[] {\n        return Object.keys(PACKS[this.str('name', 'landing')] || {});\n      }\n      mount(): void {\n        this.style.display ||= 'block';\n        this.onCleanup(applyPack(this.str('name', 'landing'), this));\n      }\n    }\n  );\n}\n","/**\n * use-scroll-animate/components/packs — effect packs (v3.9).\n * Ready-made motion for e-commerce, portfolio, dashboard, game UI and\n * landing pages: mark elements with `data-role` and apply a pack with\n * `<usa-pack name=\"…\">` or `applyPack(name, root)`. Includes `flyToCart()`\n * and `countUp()`.\n */\nimport { definePack, type UsaPackElement } from './pack-el';\n\nexport { definePack };\nexport { applyPack, flyToCart, countUp, PACKS, PACK_PRIMITIVES } from './core';\nexport type { PackName, PackContext } from './core';\nexport type { UsaPackElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function definePacksComponents(): void {\n  definePack();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-pack': UsaPackElement;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/page.js

@@ -1,6 +1,6 @@
-import { h as defineElement, e as caf, r as raf, p as prefersReducedMotion, n as now, g as getMotionIntensity, a as configureComponents, f as adoptStyles } from '../chunks/base-BpROOcey.js';
-export { M as MOTION_SCALE } from '../chunks/base-BpROOcey.js';
-import { e as springSamples } from '../chunks/spring-C-fw7_9f.js';
+import { h as defineElement, b as caf, r as raf, p as prefersReducedMotion, n as now, g as getMotionIntensity, a as configureComponents, f as adoptStyles } from '../chunks/base-ZARFccur.js';
+export { M as MOTION_SCALE } from '../chunks/base-ZARFccur.js';
+import { e as springSamples } from '../chunks/spring-E2ickYNI.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.js

@@ -1,7 +1,7 @@
-import { h as defineElement, b as clamp } from '../chunks/base-BpROOcey.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BpROOcey.js';
-import { d as springEasing, c as createSpring, s as snapTo, a as rubberBand, p as projectInertia } from '../chunks/spring-C-fw7_9f.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-C-fw7_9f.js';
+import { h as defineElement, d as clamp } from '../chunks/base-ZARFccur.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-ZARFccur.js';
+import { d as springEasing, c as createSpring, s as snapTo, a as rubberBand, p as projectInertia } from '../chunks/spring-E2ickYNI.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-E2ickYNI.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

@@ -1,6 +1,6 @@
 'use strict';
 
-var indexTags = require('../chunks/index-tags-wbuPiMR6.cjs');
+var indexTags = require('../chunks/index-tags-BQh_uGqH.cjs');
 
 /**
  * use-scroll-animate/components/react — React wrappers for every `<usa-*>`
@@ -21,7 +21,7 @@ var indexTags = require('../chunks/index-tags-wbuPiMR6.cjs');
  * JSX types for the raw tags (`<usa-card effect="flip">`) come from
  * `use-scroll-animate/components/jsx` (see `UsaIntrinsicElements`).
  */
-/** `usa-flip-list` → `UsaFlipList` */
+/** `usa-auto-animate` → `UsaAutoAnimate` */
 const pascal = (tag) => tag.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());
 /** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */
 function eventName(prop) {

package/dist/components/react.cjs.map

@@ -1 +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":";;;;AAAA;;;;;;;;;;;;;;;;;;AAkBG;AAYH;AACO,MAAM,MAAM,GAAG,CAAC,GAAW,KAAa,GAAG,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE;AAC5G;AACM,SAAU,SAAS,CAAC,IAAY,EAAA;IACpC,MAAM,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AACpC,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,OAAO,IAAI;AACnB,IAAA,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE;IACvE,OAAO,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAA,IAAA,EAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK;AACnE;AAEA;AACA,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC;AAE1I;AACO,MAAM,QAAQ,GAAa,MAAM,CAAC,MAAM,CAACA,8BAAoB,CAAC,CAAC,IAAI;AAEpE,SAAU,mBAAmB,CAAC,KAAgB,EAAA;IAClD,MAAM,MAAM,GAAG,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS;AACvD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAW,KAAI;QAC3B,MAAM,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAe,EAAE,GAAQ,KAAI;YACvD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAqB,IAAI,CAAC;YACpD,MAAM,KAAK,GAAa,EAAE;YAC1B,MAAM,MAAM,GAAoB,EAAE;YAClC,MAAM,QAAQ,GAAoB,EAAE;AACpC,YAAA,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBAC1C,IAAI,CAAC,KAAK,UAAU;oBAAE;AACtB,gBAAA,MAAM,EAAE,GAAG,OAAO,CAAC,KAAK,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI;AACxD,gBAAA,IAAI,EAAE;oBAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;qBACvB,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ;oBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;qBAChE,IAAI,CAAC,KAAK,WAAW;AAAE,oBAAA,KAAK,CAAC,KAAK,GAAG,CAAC;AACtC,qBAAA,IAAI,OAAO,CAAC,KAAK,SAAS,EAAE;AAC/B,oBAAA,IAAI,CAAC;AAAE,wBAAA,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE;gBACtB;;AAAO,oBAAA,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;YACrB;YACA,MAAM,CAAC,MAAK;AACV,gBAAA,MAAM,EAAE,GAAG,KAAK,CAAC,OAAc;AAC/B,gBAAA,IAAI,CAAC,EAAE;oBAAE;AACT,gBAAA,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,QAAQ;AAAE,oBAAA,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;AAC1C,YAAA,CAAC,CAAC;YACF,MAAM,CAAC,MAAK;AACV,gBAAA,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO;AACxB,gBAAA,IAAI,CAAC,EAAE;oBAAE;gBACT,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACrD,OAAO,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACvE,YAAA,CAAC,CAAC;AACF,YAAA,MAAM,MAAM,GAAG,CAAC,IAAwB,KAAI;AAC1C,gBAAA,KAAK,CAAC,OAAO,GAAG,IAAI;gBACpB,IAAI,OAAO,GAAG,KAAK,UAAU;oBAAE,GAAG,CAAC,IAAI,CAAC;AACnC,qBAAA,IAAI,GAAG;AAAE,oBAAA,GAAG,CAAC,OAAO,GAAG,IAAI;AAClC,YAAA,CAAC;AACD,YAAA,OAAO,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC;AAC5E,QAAA,CAAC,CAAC;AACD,QAAA,CAAS,CAAC,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC;AACpC,QAAA,OAAO,CAAC;AACV,IAAA,CAAC;IACD,OAAO,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE;;;;;;;"}
+{"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-auto-animate` → `UsaAutoAnimate` */\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

@@ -7,7 +7,7 @@ interface ReactLike {
     useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void;
     useLayoutEffect?: (fn: () => void | (() => void), deps?: unknown[]) => void;
 }
-/** `usa-flip-list` → `UsaFlipList` */
+/** `usa-auto-animate` → `UsaAutoAnimate` */
 declare const pascal: (tag: string) => string;
 /** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */
 declare function eventName(prop: string): string | null;

package/dist/components/react.d.ts

@@ -7,7 +7,7 @@ interface ReactLike {
     useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void;
     useLayoutEffect?: (fn: () => void | (() => void), deps?: unknown[]) => void;
 }
-/** `usa-flip-list` → `UsaFlipList` */
+/** `usa-auto-animate` → `UsaAutoAnimate` */
 declare const pascal: (tag: string) => string;
 /** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */
 declare function eventName(prop: string): string | null;

package/dist/components/react.js

@@ -1,4 +1,4 @@
-import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-BANJ-e4H.js';
+import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-43Xtd01A.js';
 
 /**
  * use-scroll-animate/components/react — React wrappers for every `<usa-*>`
@@ -19,7 +19,7 @@ import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-BANJ-e4H.js';
  * JSX types for the raw tags (`<usa-card effect="flip">`) come from
  * `use-scroll-animate/components/jsx` (see `UsaIntrinsicElements`).
  */
-/** `usa-flip-list` → `UsaFlipList` */
+/** `usa-auto-animate` → `UsaAutoAnimate` */
 const pascal = (tag) => tag.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());
 /** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */
 function eventName(prop) {

package/dist/components/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","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":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;AAkBG;AAYH;AACO,MAAM,MAAM,GAAG,CAAC,GAAW,KAAa,GAAG,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE;AAC5G;AACM,SAAU,SAAS,CAAC,IAAY,EAAA;IACpC,MAAM,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AACpC,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,OAAO,IAAI;AACnB,IAAA,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE;IACvE,OAAO,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAA,IAAA,EAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK;AACnE;AAEA;AACA,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC;AAE1I;AACO,MAAM,QAAQ,GAAa,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,IAAI;AAEpE,SAAU,mBAAmB,CAAC,KAAgB,EAAA;IAClD,MAAM,MAAM,GAAG,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS;AACvD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAW,KAAI;QAC3B,MAAM,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAe,EAAE,GAAQ,KAAI;YACvD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAqB,IAAI,CAAC;YACpD,MAAM,KAAK,GAAa,EAAE;YAC1B,MAAM,MAAM,GAAoB,EAAE;YAClC,MAAM,QAAQ,GAAoB,EAAE;AACpC,YAAA,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBAC1C,IAAI,CAAC,KAAK,UAAU;oBAAE;AACtB,gBAAA,MAAM,EAAE,GAAG,OAAO,CAAC,KAAK,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI;AACxD,gBAAA,IAAI,EAAE;oBAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;qBACvB,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ;oBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;qBAChE,IAAI,CAAC,KAAK,WAAW;AAAE,oBAAA,KAAK,CAAC,KAAK,GAAG,CAAC;AACtC,qBAAA,IAAI,OAAO,CAAC,KAAK,SAAS,EAAE;AAC/B,oBAAA,IAAI,CAAC;AAAE,wBAAA,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE;gBACtB;;AAAO,oBAAA,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;YACrB;YACA,MAAM,CAAC,MAAK;AACV,gBAAA,MAAM,EAAE,GAAG,KAAK,CAAC,OAAc;AAC/B,gBAAA,IAAI,CAAC,EAAE;oBAAE;AACT,gBAAA,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,QAAQ;AAAE,oBAAA,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;AAC1C,YAAA,CAAC,CAAC;YACF,MAAM,CAAC,MAAK;AACV,gBAAA,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO;AACxB,gBAAA,IAAI,CAAC,EAAE;oBAAE;gBACT,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACrD,OAAO,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACvE,YAAA,CAAC,CAAC;AACF,YAAA,MAAM,MAAM,GAAG,CAAC,IAAwB,KAAI;AAC1C,gBAAA,KAAK,CAAC,OAAO,GAAG,IAAI;gBACpB,IAAI,OAAO,GAAG,KAAK,UAAU;oBAAE,GAAG,CAAC,IAAI,CAAC;AACnC,qBAAA,IAAI,GAAG;AAAE,oBAAA,GAAG,CAAC,OAAO,GAAG,IAAI;AAClC,YAAA,CAAC;AACD,YAAA,OAAO,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC;AAC5E,QAAA,CAAC,CAAC;AACD,QAAA,CAAS,CAAC,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC;AACpC,QAAA,OAAO,CAAC;AACV,IAAA,CAAC;IACD,OAAO,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE;;;;"}
+{"version":3,"file":"react.js","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-auto-animate` → `UsaAutoAnimate` */\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":[],"mappings":"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"}

package/dist/components/reveal.js

@@ -1,5 +1,5 @@
-import { h as defineElement, i as EASE_OUT, b as clamp, e as caf, r as raf } from '../chunks/base-BpROOcey.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BpROOcey.js';
+import { h as defineElement, i as EASE_OUT, d as clamp, b as caf, r as raf } from '../chunks/base-ZARFccur.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-ZARFccur.js';
 
 /** Entrance effects shared by `<usa-reveal>` and `<usa-stagger>` (transform / opacity / filter only). */
 const REVEAL_EFFECTS = [

package/dist/components/solid.cjs

@@ -17,13 +17,15 @@ require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
+require('../chunks/core-DXqZm5Il.cjs');
 require('./gesture.cjs');
 require('../chunks/core-IaorbTdu.cjs');
 require('./svg.cjs');
 require('./webgl.cjs');
 require('./depth.cjs');
 require('./layout.cjs');
-require('../chunks/index-tags-wbuPiMR6.cjs');
+require('./packs.cjs');
+require('../chunks/index-tags-BQh_uGqH.cjs');
 
 /**
  * use-scroll-animate/components/solid — Solid integration (v3.8).

package/dist/components/solid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"solid.cjs","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; the binding is read once on mount and re-read whenever\n * `refresh()` on the returned handle is called (or wrap it in `createEffect`).\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  const b = bindUsa(el, accessor() || {});\n  return { refresh: () => b.update(accessor() || {}), destroy: b.destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":["bindUsa","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAQH;;;;AAIG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,MAAM,CAAC,GAAGA,YAAO,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACvC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE;AAC1E;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}
+{"version":3,"file":"solid.cjs","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; the binding is read once on mount and re-read whenever\n * `refresh()` on the returned handle is called (or wrap it in `createEffect`).\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  const b = bindUsa(el, accessor() || {});\n  return { refresh: () => b.update(accessor() || {}), destroy: b.destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":["bindUsa","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAQH;;;;AAIG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,MAAM,CAAC,GAAGA,YAAO,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACvC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE;AAC1E;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}

package/dist/components/solid.d.cts

@@ -622,19 +622,6 @@ interface UsaAccordionElement extends UsaElement {
     toggleItem(details: HTMLDetailsElement, open?: boolean): Promise<void>;
 }
 
-/**
- * `<usa-flip-list>` — animates its children to their new places whenever
- * they are added, removed or reordered (FLIP: transforms only). Works with
- * any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
- *
- * Attributes: `duration` (ms, 420), `easing`, `disabled`.
- * Method: `flip(mutate)` for explicit changes (also measures resizes).
- * Reduced motion: no animation.
- */
-interface UsaFlipListElement extends UsaElement {
-    flip(mutate: () => void | Promise<void>): Promise<void>;
-}
-
 /**
  * `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
  * steps, app pages) and animates between them. Children are views; name
@@ -654,15 +641,15 @@ interface UsaViewSwitchElement extends UsaElement {
 
 /**
  * use-scroll-animate/components/transitions — view & layout transitions.
- * `<usa-dialog>`, `<usa-accordion>`, `<usa-flip-list>`, `<usa-view-switch>`
- * and the `viewTransition()`, `flip()`, `connectedAnimation()` helpers.
+ * `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
+ * and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
+ * `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
  */
 
 declare global {
     interface HTMLElementTagNameMap {
         'usa-dialog': UsaDialogElement;
         'usa-accordion': UsaAccordionElement;
-        'usa-flip-list': UsaFlipListElement;
         'usa-view-switch': UsaViewSwitchElement;
     }
 }
@@ -1590,6 +1577,30 @@ declare global {
     }
 }
 
+/**
+ * `<usa-pack name="ecommerce">` — applies an effect pack (`ecommerce` ·
+ * `portfolio` · `dashboard` · `game` · `landing`) to its subtree:
+ * descendants opt in with `data-role` (see `PACKS`). Re-applies when
+ * `name` changes; undone on disconnect.
+ */
+interface UsaPackElement extends UsaElement {
+    readonly roles: string[];
+}
+
+/**
+ * use-scroll-animate/components/packs — effect packs (v3.9).
+ * Ready-made motion for e-commerce, portfolio, dashboard, game UI and
+ * landing pages: mark elements with `data-role` and apply a pack with
+ * `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
+ * and `countUp()`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-pack': UsaPackElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1597,7 +1608,7 @@ declare const COMPONENT_CATEGORIES: {
     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 transitions: readonly ["usa-dialog", "usa-accordion", "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"];
@@ -1609,6 +1620,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
     readonly depth: readonly ["usa-cube", "usa-depth"];
     readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
+    readonly packs: readonly ["usa-pack"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/solid.d.ts

@@ -622,19 +622,6 @@ interface UsaAccordionElement extends UsaElement {
     toggleItem(details: HTMLDetailsElement, open?: boolean): Promise<void>;
 }
 
-/**
- * `<usa-flip-list>` — animates its children to their new places whenever
- * they are added, removed or reordered (FLIP: transforms only). Works with
- * any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
- *
- * Attributes: `duration` (ms, 420), `easing`, `disabled`.
- * Method: `flip(mutate)` for explicit changes (also measures resizes).
- * Reduced motion: no animation.
- */
-interface UsaFlipListElement extends UsaElement {
-    flip(mutate: () => void | Promise<void>): Promise<void>;
-}
-
 /**
  * `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
  * steps, app pages) and animates between them. Children are views; name
@@ -654,15 +641,15 @@ interface UsaViewSwitchElement extends UsaElement {
 
 /**
  * use-scroll-animate/components/transitions — view & layout transitions.
- * `<usa-dialog>`, `<usa-accordion>`, `<usa-flip-list>`, `<usa-view-switch>`
- * and the `viewTransition()`, `flip()`, `connectedAnimation()` helpers.
+ * `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
+ * and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
+ * `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
  */
 
 declare global {
     interface HTMLElementTagNameMap {
         'usa-dialog': UsaDialogElement;
         'usa-accordion': UsaAccordionElement;
-        'usa-flip-list': UsaFlipListElement;
         'usa-view-switch': UsaViewSwitchElement;
     }
 }
@@ -1590,6 +1577,30 @@ declare global {
     }
 }
 
+/**
+ * `<usa-pack name="ecommerce">` — applies an effect pack (`ecommerce` ·
+ * `portfolio` · `dashboard` · `game` · `landing`) to its subtree:
+ * descendants opt in with `data-role` (see `PACKS`). Re-applies when
+ * `name` changes; undone on disconnect.
+ */
+interface UsaPackElement extends UsaElement {
+    readonly roles: string[];
+}
+
+/**
+ * use-scroll-animate/components/packs — effect packs (v3.9).
+ * Ready-made motion for e-commerce, portfolio, dashboard, game UI and
+ * landing pages: mark elements with `data-role` and apply a pack with
+ * `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
+ * and `countUp()`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-pack': UsaPackElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1597,7 +1608,7 @@ declare const COMPONENT_CATEGORIES: {
     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 transitions: readonly ["usa-dialog", "usa-accordion", "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"];
@@ -1609,6 +1620,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
     readonly depth: readonly ["usa-cube", "usa-depth"];
     readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
+    readonly packs: readonly ["usa-pack"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/solid.js

@@ -2,27 +2,29 @@ import { defineComponents } from '../components.js';
 import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
 export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
 import './reveal.js';
-import '../chunks/base-BpROOcey.js';
+import '../chunks/base-ZARFccur.js';
 import './text.js';
 import './interaction.js';
 import './feedback.js';
 import './background.js';
-import '../chunks/variants-CHe1VbSn.js';
+import '../chunks/variants-DvnxvRCM.js';
 import './transitions.js';
 import './physics.js';
-import '../chunks/spring-C-fw7_9f.js';
+import '../chunks/spring-E2ickYNI.js';
 import './cards.js';
 import './click.js';
 import './ui.js';
 import './page.js';
 import './timeline.js';
+import '../chunks/core-Co-6AL0h.js';
 import './gesture.js';
-import '../chunks/core-uxs3ETou.js';
+import '../chunks/core-DKY-fVzR.js';
 import './svg.js';
 import './webgl.js';
 import './depth.js';
 import './layout.js';
-import '../chunks/index-tags-BANJ-e4H.js';
+import './packs.js';
+import '../chunks/index-tags-43Xtd01A.js';
 
 /**
  * use-scroll-animate/components/solid — Solid integration (v3.8).

package/dist/components/solid.js.map

@@ -1 +1 @@
-{"version":3,"file":"solid.js","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; the binding is read once on mount and re-read whenever\n * `refresh()` on the returned handle is called (or wrap it in `createEffect`).\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  const b = bindUsa(el, accessor() || {});\n  return { refresh: () => b.update(accessor() || {}), destroy: b.destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAQH;;;;AAIG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,MAAM,CAAC,GAAG,OAAO,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACvC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE;AAC1E;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}
+{"version":3,"file":"solid.js","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-toggle prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'use-scroll-animate/components/solid';\n * import type {} from 'use-scroll-animate/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; the binding is read once on mount and re-read whenever\n * `refresh()` on the returned handle is called (or wrap it in `createEffect`).\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n  const b = bindUsa(el, accessor() || {});\n  return { refresh: () => b.update(accessor() || {}), destroy: b.destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAQH;;;;AAIG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,MAAM,CAAC,GAAG,OAAO,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACvC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE;AAC1E;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}

package/dist/components/svelte.cjs

@@ -17,13 +17,15 @@ require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
+require('../chunks/core-DXqZm5Il.cjs');
 require('./gesture.cjs');
 require('../chunks/core-IaorbTdu.cjs');
 require('./svg.cjs');
 require('./webgl.cjs');
 require('./depth.cjs');
 require('./layout.cjs');
-require('../chunks/index-tags-wbuPiMR6.cjs');
+require('./packs.cjs');
+require('../chunks/index-tags-BQh_uGqH.cjs');
 
 /**
  * use-scroll-animate/components/svelte — Svelte integration (v3.8).

package/dist/components/svelte.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.cjs","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n *   import { usa, defineUsa } from 'use-scroll-animate/components/svelte';\n *   import { onMount } from 'svelte';\n *   onMount(() => defineUsa(['click', 'ui']));\n *   let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n  return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":["bindUsa","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAOA,YAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}
+{"version":3,"file":"svelte.cjs","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n *   import { usa, defineUsa } from 'use-scroll-animate/components/svelte';\n *   import { onMount } from 'svelte';\n *   onMount(() => defineUsa(['click', 'ui']));\n *   let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n  return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n  if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":["bindUsa","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAOA,YAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}

package/dist/components/svelte.d.cts

@@ -622,19 +622,6 @@ interface UsaAccordionElement extends UsaElement {
     toggleItem(details: HTMLDetailsElement, open?: boolean): Promise<void>;
 }
 
-/**
- * `<usa-flip-list>` — animates its children to their new places whenever
- * they are added, removed or reordered (FLIP: transforms only). Works with
- * any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
- *
- * Attributes: `duration` (ms, 420), `easing`, `disabled`.
- * Method: `flip(mutate)` for explicit changes (also measures resizes).
- * Reduced motion: no animation.
- */
-interface UsaFlipListElement extends UsaElement {
-    flip(mutate: () => void | Promise<void>): Promise<void>;
-}
-
 /**
  * `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
  * steps, app pages) and animates between them. Children are views; name
@@ -654,15 +641,15 @@ interface UsaViewSwitchElement extends UsaElement {
 
 /**
  * use-scroll-animate/components/transitions — view & layout transitions.
- * `<usa-dialog>`, `<usa-accordion>`, `<usa-flip-list>`, `<usa-view-switch>`
- * and the `viewTransition()`, `flip()`, `connectedAnimation()` helpers.
+ * `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
+ * and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
+ * `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
  */
 
 declare global {
     interface HTMLElementTagNameMap {
         'usa-dialog': UsaDialogElement;
         'usa-accordion': UsaAccordionElement;
-        'usa-flip-list': UsaFlipListElement;
         'usa-view-switch': UsaViewSwitchElement;
     }
 }
@@ -1590,6 +1577,30 @@ declare global {
     }
 }
 
+/**
+ * `<usa-pack name="ecommerce">` — applies an effect pack (`ecommerce` ·
+ * `portfolio` · `dashboard` · `game` · `landing`) to its subtree:
+ * descendants opt in with `data-role` (see `PACKS`). Re-applies when
+ * `name` changes; undone on disconnect.
+ */
+interface UsaPackElement extends UsaElement {
+    readonly roles: string[];
+}
+
+/**
+ * use-scroll-animate/components/packs — effect packs (v3.9).
+ * Ready-made motion for e-commerce, portfolio, dashboard, game UI and
+ * landing pages: mark elements with `data-role` and apply a pack with
+ * `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
+ * and `countUp()`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-pack': UsaPackElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1597,7 +1608,7 @@ declare const COMPONENT_CATEGORIES: {
     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 transitions: readonly ["usa-dialog", "usa-accordion", "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"];
@@ -1609,6 +1620,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
     readonly depth: readonly ["usa-cube", "usa-depth"];
     readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
+    readonly packs: readonly ["usa-pack"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;