use-scroll-animate 3.1.0 → 3.3.0

package/dist/components/vue.d.cts

@@ -1374,6 +1374,116 @@ declare global {
     }
 }
 
+type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+
+/**
+ * `<usa-swipeable>` — swipe-to-dismiss / swipe actions. The content follows
+ * the finger (rubber-banded past `distance`), flies out on a swipe or a drag
+ * past `distance`, otherwise springs home with the release velocity.
+ *
+ * Attributes: `axis` (`x` default · `y`), `distance` (px, 120), `preset`
+ * (spring), `dismiss` (remove the element after flying out), `disabled`.
+ * Keyboard: Delete/Backspace dismisses, ←/→ swipe. Events `usa:swipe`
+ * (`{ direction }`, cancelable), `usa:dismiss`. Methods `swipe(dir)`, `reset()`.
+ * Reduced motion: no follow / fly-out animation, events still fire.
+ */
+interface UsaSwipeableElement extends UsaElement {
+    swipe(direction: SwipeDirection): void;
+    reset(): void;
+    readonly offset: number;
+}
+
+/**
+ * `<usa-pinch-zoom>` — pinch (two fingers or Ctrl/⌘ + wheel / trackpad
+ * pinch) to zoom its content, pan while zoomed, double-tap to toggle zoom;
+ * scale and position spring back inside the bounds on release.
+ *
+ * Attributes: `min` (1), `max` (4), `double-tap` (zoom level, 2), `preset`.
+ * Keyboard: `+` / `-` / `0`. Property `scale`, method `zoomTo(scale)`.
+ * Event `usa:zoom` (`{ scale }`). Reduced motion: zoom changes instantly.
+ */
+interface UsaPinchZoomElement extends UsaElement {
+    readonly scale: number;
+    zoomTo(scale: number): void;
+}
+
+/**
+ * use-scroll-animate/components/gesture — unified gestures (v3.2).
+ * `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
+ * with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
+ * and `<usa-pinch-zoom>` are built on it.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-swipeable': UsaSwipeableElement;
+        'usa-pinch-zoom': UsaPinchZoomElement;
+    }
+}
+
+/**
+ * `<usa-draw>` — line drawing: every stroke of the SVG inside draws itself.
+ * Attributes: `trigger` (`view` default · `hover` · `click` · `scrub`),
+ * `duration` (1600), `stagger` (0–0.9 share of the timeline, 0.2), `fill`
+ * (fade the fill in after drawing), `repeat`. Method `play()`, property
+ * `progress`, event `usa:complete`. Reduced motion: drawn immediately.
+ */
+interface UsaDrawElement extends UsaElement {
+    play(): void;
+    progress: number;
+}
+
+/**
+ * `<usa-morph>` — morphs an SVG path through a list of shapes.
+ * Put a `<svg><path></path></svg>` inside (one is created otherwise) and set
+ * `paths="M… | M… | M…"` (same command structure morphs smoothly, others
+ * switch at the midpoint). Attributes: `trigger` (`click` default · `hover`
+ * · `auto` · `view`), `interval` (ms for auto, 2000), `duration` (600).
+ * Property `index`, method `next()`, event `usa:change`.
+ * Reduced motion: shapes switch without animating; `auto` does not cycle.
+ */
+interface UsaMorphElement extends UsaElement {
+    readonly index: number;
+    next(): Promise<void>;
+}
+
+/**
+ * `<usa-mask-reveal>` — reveals its content through a growing mask shape.
+ * Attributes: `shape` (`circle` default · `diamond` · `wipe` · `wipe-up` ·
+ * `iris` · `star`), `duration` (900), `delay`, `trigger` (`view` · `hover`
+ * · `click`), `repeat`, `at` (`x% y%` origin for circle). Event
+ * `usa:complete`. Reduced motion: content is shown without the mask.
+ */
+interface UsaMaskRevealElement extends UsaElement {
+    reveal(): Promise<void>;
+}
+
+/**
+ * `<usa-anim-icon name="bell">` — an animated stroke icon that plays its
+ * motion on `trigger` (`hover` default · `click` · `view` · `loop`).
+ * Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible
+ * name; decorative when absent). Method `play()`. Reduced motion: static.
+ */
+interface UsaAnimIconElement extends UsaElement {
+    play(): void;
+}
+
+/**
+ * use-scroll-animate/components/svg — SVG animation (v3.3).
+ * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
+ * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
+ * `interpolatePath()`, `morphTo()`, `drawLines()`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-draw': UsaDrawElement;
+        'usa-morph': UsaMorphElement;
+        'usa-mask-reveal': UsaMaskRevealElement;
+        'usa-anim-icon': UsaAnimIconElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1388,6 +1498,8 @@ declare const COMPONENT_CATEGORIES: {
     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"];
     readonly timeline: readonly ["usa-timeline"];
+    readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
+    readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.d.ts

@@ -1374,6 +1374,116 @@ declare global {
     }
 }
 
+type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+
+/**
+ * `<usa-swipeable>` — swipe-to-dismiss / swipe actions. The content follows
+ * the finger (rubber-banded past `distance`), flies out on a swipe or a drag
+ * past `distance`, otherwise springs home with the release velocity.
+ *
+ * Attributes: `axis` (`x` default · `y`), `distance` (px, 120), `preset`
+ * (spring), `dismiss` (remove the element after flying out), `disabled`.
+ * Keyboard: Delete/Backspace dismisses, ←/→ swipe. Events `usa:swipe`
+ * (`{ direction }`, cancelable), `usa:dismiss`. Methods `swipe(dir)`, `reset()`.
+ * Reduced motion: no follow / fly-out animation, events still fire.
+ */
+interface UsaSwipeableElement extends UsaElement {
+    swipe(direction: SwipeDirection): void;
+    reset(): void;
+    readonly offset: number;
+}
+
+/**
+ * `<usa-pinch-zoom>` — pinch (two fingers or Ctrl/⌘ + wheel / trackpad
+ * pinch) to zoom its content, pan while zoomed, double-tap to toggle zoom;
+ * scale and position spring back inside the bounds on release.
+ *
+ * Attributes: `min` (1), `max` (4), `double-tap` (zoom level, 2), `preset`.
+ * Keyboard: `+` / `-` / `0`. Property `scale`, method `zoomTo(scale)`.
+ * Event `usa:zoom` (`{ scale }`). Reduced motion: zoom changes instantly.
+ */
+interface UsaPinchZoomElement extends UsaElement {
+    readonly scale: number;
+    zoomTo(scale: number): void;
+}
+
+/**
+ * use-scroll-animate/components/gesture — unified gestures (v3.2).
+ * `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
+ * with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
+ * and `<usa-pinch-zoom>` are built on it.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-swipeable': UsaSwipeableElement;
+        'usa-pinch-zoom': UsaPinchZoomElement;
+    }
+}
+
+/**
+ * `<usa-draw>` — line drawing: every stroke of the SVG inside draws itself.
+ * Attributes: `trigger` (`view` default · `hover` · `click` · `scrub`),
+ * `duration` (1600), `stagger` (0–0.9 share of the timeline, 0.2), `fill`
+ * (fade the fill in after drawing), `repeat`. Method `play()`, property
+ * `progress`, event `usa:complete`. Reduced motion: drawn immediately.
+ */
+interface UsaDrawElement extends UsaElement {
+    play(): void;
+    progress: number;
+}
+
+/**
+ * `<usa-morph>` — morphs an SVG path through a list of shapes.
+ * Put a `<svg><path></path></svg>` inside (one is created otherwise) and set
+ * `paths="M… | M… | M…"` (same command structure morphs smoothly, others
+ * switch at the midpoint). Attributes: `trigger` (`click` default · `hover`
+ * · `auto` · `view`), `interval` (ms for auto, 2000), `duration` (600).
+ * Property `index`, method `next()`, event `usa:change`.
+ * Reduced motion: shapes switch without animating; `auto` does not cycle.
+ */
+interface UsaMorphElement extends UsaElement {
+    readonly index: number;
+    next(): Promise<void>;
+}
+
+/**
+ * `<usa-mask-reveal>` — reveals its content through a growing mask shape.
+ * Attributes: `shape` (`circle` default · `diamond` · `wipe` · `wipe-up` ·
+ * `iris` · `star`), `duration` (900), `delay`, `trigger` (`view` · `hover`
+ * · `click`), `repeat`, `at` (`x% y%` origin for circle). Event
+ * `usa:complete`. Reduced motion: content is shown without the mask.
+ */
+interface UsaMaskRevealElement extends UsaElement {
+    reveal(): Promise<void>;
+}
+
+/**
+ * `<usa-anim-icon name="bell">` — an animated stroke icon that plays its
+ * motion on `trigger` (`hover` default · `click` · `view` · `loop`).
+ * Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible
+ * name; decorative when absent). Method `play()`. Reduced motion: static.
+ */
+interface UsaAnimIconElement extends UsaElement {
+    play(): void;
+}
+
+/**
+ * use-scroll-animate/components/svg — SVG animation (v3.3).
+ * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
+ * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
+ * `interpolatePath()`, `morphTo()`, `drawLines()`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-draw': UsaDrawElement;
+        'usa-morph': UsaMorphElement;
+        'usa-mask-reveal': UsaMaskRevealElement;
+        'usa-anim-icon': UsaAnimIconElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1388,6 +1498,8 @@ declare const COMPONENT_CATEGORIES: {
     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"];
     readonly timeline: readonly ["usa-timeline"];
+    readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
+    readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.js

@@ -14,7 +14,9 @@ import './click.js';
 import './ui.js';
 import './page.js';
 import './timeline.js';
-import '../chunks/index-tags-D7NynL4r.js';
+import './gesture.js';
+import './svg.js';
+import '../chunks/index-tags-Dc_Z4yAY.js';
 
 /**
  * use-scroll-animate/components/vue — Vue integration (v2.9).

package/dist/components/vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}
+{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}

package/dist/components.cjs

@@ -12,9 +12,11 @@ var components_click = require('./components/click.cjs');
 var components_ui = require('./components/ui.cjs');
 var components_page = require('./components/page.cjs');
 var components_timeline = require('./components/timeline.cjs');
+var components_gesture = require('./components/gesture.cjs');
+var components_svg = require('./components/svg.cjs');
 var variants = require('./chunks/variants-BNIrn4ch.cjs');
 var base = require('./chunks/base-CXx7jZ-o.cjs');
-var indexTags = require('./chunks/index-tags-Gw1G06Pb.cjs');
+var indexTags = require('./chunks/index-tags-Cz4iTBEK.cjs');
 var spring = require('./chunks/spring-2OTnYCzm.cjs');
 
 /**
@@ -50,6 +52,8 @@ const BY_CATEGORY = {
     ui: components_ui.defineUiComponents,
     page: components_page.definePageComponents,
     timeline: components_timeline.defineTimelineComponents,
+    gesture: components_gesture.defineGestureComponents,
+    svg: components_svg.defineSvgComponents,
 };
 /**
  * Register every `<usa-*>` component (or only the given categories).
@@ -184,6 +188,23 @@ exports.defineTimeline = components_timeline.defineTimeline;
 exports.defineTimelineComponents = components_timeline.defineTimelineComponents;
 exports.resolvePosition = components_timeline.resolvePosition;
 exports.timeline = components_timeline.timeline;
+exports.defineGestureComponents = components_gesture.defineGestureComponents;
+exports.definePinchZoom = components_gesture.definePinchZoom;
+exports.defineSwipeable = components_gesture.defineSwipeable;
+exports.gesture = components_gesture.gesture;
+exports.pinchScale = components_gesture.pinchScale;
+exports.swipeDirection = components_gesture.swipeDirection;
+exports.ANIM_ICONS = components_svg.ANIM_ICONS;
+exports.MASK_SHAPES = components_svg.MASK_SHAPES;
+exports.defineAnimIcon = components_svg.defineAnimIcon;
+exports.defineDraw = components_svg.defineDraw;
+exports.defineMaskReveal = components_svg.defineMaskReveal;
+exports.defineMorph = components_svg.defineMorph;
+exports.defineSvgComponents = components_svg.defineSvgComponents;
+exports.drawLines = components_svg.drawLines;
+exports.interpolatePath = components_svg.interpolatePath;
+exports.morphTo = components_svg.morphTo;
+exports.pathsCompatible = components_svg.pathsCompatible;
 exports.VARIANTS = variants.VARIANTS;
 exports.adoptVariants = variants.adoptVariants;
 exports.setVariant = variants.setVariant;

package/dist/components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n  reveal: defineRevealComponents,\n  text: defineTextComponents,\n  interaction: defineInteractionComponents,\n  feedback: defineFeedbackComponents,\n  background: defineBackgroundComponents,\n  transitions: defineTransitionComponents,\n  physics: definePhysicsComponents,\n  cards: defineCardComponents,\n  click: defineClickComponents,\n  ui: defineUiComponents,\n  page: definePageComponents,\n  timeline: defineTimelineComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n  if (canDefine()) adoptVariants();\n  (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAiCH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,QAAQ,EAAEC,4CAAwB;CACnC;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n  reveal: defineRevealComponents,\n  text: defineTextComponents,\n  interaction: defineInteractionComponents,\n  feedback: defineFeedbackComponents,\n  background: defineBackgroundComponents,\n  transitions: defineTransitionComponents,\n  physics: definePhysicsComponents,\n  cards: defineCardComponents,\n  click: defineClickComponents,\n  ui: defineUiComponents,\n  page: definePageComponents,\n  timeline: defineTimelineComponents,\n  gesture: defineGestureComponents,\n  svg: defineSvgComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n  if (canDefine()) adoptVariants();\n  (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","defineGestureComponents","defineSvgComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAqCH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,GAAG,EAAEC,kCAAmB;CACzB;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components.css

@@ -67,3 +67,5 @@ usa-motion-switch{--usa-motion-i:2;position:relative;display:inline-grid;grid-au
 usa-splash{position:fixed;inset:0;z-index:2147483400;display:grid;place-items:center;background:var(--usa-splash-bg,var(--usa-surface,#0b0d12));color:var(--usa-text,#fff)}usa-splash[hidden]{display:none}
 ::view-transition-group(root){animation-duration:var(--usa-pt-duration,600ms)}html[data-usa-pt] ::view-transition-old(root),html[data-usa-pt] ::view-transition-new(root){animation-duration:var(--usa-pt-duration,600ms);animation-timing-function:cubic-bezier(0.22,1,0.36,1);mix-blend-mode:normal}html[data-usa-pt="slide"] ::view-transition-old(root),html[data-usa-pt="slide-left"] ::view-transition-old(root){animation-name:usa-pt-out-left}html[data-usa-pt="slide"] ::view-transition-new(root),html[data-usa-pt="slide-left"] ::view-transition-new(root){animation-name:usa-pt-in-right}html[data-usa-pt="slide-right"] ::view-transition-old(root){animation-name:usa-pt-out-right}html[data-usa-pt="slide-right"] ::view-transition-new(root){animation-name:usa-pt-in-left}html[data-usa-pt="slide-up"] ::view-transition-old(root){animation-name:usa-pt-out-up}html[data-usa-pt="slide-up"] ::view-transition-new(root){animation-name:usa-pt-in-up}html[data-usa-pt="zoom"] ::view-transition-old(root){animation-name:usa-pt-zoom-out}html[data-usa-pt="zoom"] ::view-transition-new(root){animation-name:usa-pt-zoom-in}html[data-usa-pt="circle"] ::view-transition-old(root){animation:none}html[data-usa-pt="circle"] ::view-transition-new(root){animation-name:usa-pt-circle}html[data-usa-pt="blinds"] ::view-transition-old(root){animation:none}html[data-usa-pt="blinds"] ::view-transition-new(root){animation-name:usa-pt-blinds;-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 var(--usa-blind),transparent var(--usa-blind) 10vh);mask-image:repeating-linear-gradient(to bottom,#000 0 var(--usa-blind),transparent var(--usa-blind) 10vh)}html[data-usa-pt="pixel"] ::view-transition-old(root){animation-name:usa-pt-pixel-out;animation-timing-function:steps(10,end)}html[data-usa-pt="pixel"] ::view-transition-new(root){animation-name:usa-pt-pixel-in;animation-timing-function:steps(10,end)}@property --usa-blind{syntax:"<length-percentage>";inherits:false;initial-value:0vh}@keyframes usa-pt-out-left{to{transform:translateX(-30%);opacity:0}}@keyframes usa-pt-in-right{from{transform:translateX(30%);opacity:0}}@keyframes usa-pt-out-right{to{transform:translateX(30%);opacity:0}}@keyframes usa-pt-in-left{from{transform:translateX(-30%);opacity:0}}@keyframes usa-pt-out-up{to{transform:translateY(-12%);opacity:0}}@keyframes usa-pt-in-up{from{transform:translateY(12%);opacity:0}}@keyframes usa-pt-zoom-out{to{transform:scale(0.92);opacity:0}}@keyframes usa-pt-zoom-in{from{transform:scale(1.08);opacity:0}}@keyframes usa-pt-circle{from{clip-path:circle(0 at var(--usa-pt-x,50%) var(--usa-pt-y,50%))}to{clip-path:circle(var(--usa-pt-r,150vmax) at var(--usa-pt-x,50%) var(--usa-pt-y,50%))}}@keyframes usa-pt-blinds{from{--usa-blind:0vh}to{--usa-blind:10vh}}@keyframes usa-pt-pixel-out{to{opacity:0;filter:blur(6px) contrast(1.4)}}@keyframes usa-pt-pixel-in{from{opacity:0;filter:blur(6px) contrast(1.4)}}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}
 usa-timeline{display:block}usa-timeline[scrub]{position:relative}@media (prefers-reduced-motion:reduce){usa-timeline [data-tl]{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}}
+usa-swipeable{display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}usa-swipeable[axis="y"]{touch-action:pan-x}usa-swipeable>*{transform:translate3d(var(--usa-swipe,0px),0,0);opacity:calc(1 - var(--usa-swipe-p,0) * 0.5)}usa-swipeable[axis="y"]>*{transform:translate3d(0,var(--usa-swipe,0px),0)}usa-swipeable:focus-visible{outline:2px solid currentColor;outline-offset:2px}usa-pinch-zoom{display:block;overflow:hidden;touch-action:none;position:relative}usa-pinch-zoom>*{transform:translate3d(var(--usa-zoom-x,0px),var(--usa-zoom-y,0px),0) scale(var(--usa-zoom,1));transform-origin:50% 50%}usa-pinch-zoom[data-zoomed]{cursor:grab}usa-pinch-zoom:focus-visible{outline:2px solid currentColor;outline-offset:2px}
+usa-draw{display:inline-block}usa-draw svg :is(path,line,polyline,polygon,circle,ellipse,rect){transition:fill-opacity 0.6s ease}usa-draw[fill]:not([data-drawn]) svg :is(path,polygon,circle,ellipse,rect){fill-opacity:0}usa-morph{display:inline-block;line-height:0}usa-morph svg{width:100%;height:100%;fill:currentColor}usa-morph[role="button"]{cursor:pointer}usa-mask-reveal{display:block}usa-mask-reveal[data-state="visible"]{clip-path:none !important}usa-anim-icon{display:inline-flex;line-height:0;vertical-align:middle}usa-anim-icon svg{overflow:visible}@media (prefers-reduced-motion:reduce){usa-mask-reveal{clip-path:none !important}usa-draw svg *{stroke-dashoffset:0 !important}}

package/dist/components.d.cts

@@ -1891,6 +1891,229 @@ declare global {
     }
 }
 
+interface PanState {
+    /** Offset from the gesture start (px). */
+    dx: number;
+    dy: number;
+    /** Velocity (px/s). */
+    vx: number;
+    vy: number;
+    first: boolean;
+    last: boolean;
+    event: Event;
+}
+type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+interface SwipeState {
+    direction: SwipeDirection;
+    velocity: number;
+    dx: number;
+    dy: number;
+}
+interface PinchState {
+    scale: number; /** Midpoint of the two pointers (client px). */
+    x: number;
+    y: number;
+    first: boolean;
+    last: boolean;
+}
+interface PressState {
+    x: number;
+    y: number;
+}
+interface GestureHandlers {
+    onPan?: (s: PanState) => void;
+    onSwipe?: (s: SwipeState) => void;
+    onPinch?: (s: PinchState) => void;
+    onLongPress?: (s: PressState) => void;
+    onTap?: (s: PressState) => void;
+    onDoubleTap?: (s: PressState) => void;
+}
+interface GestureOptions {
+    /** Restrict panning to an axis. */
+    axis?: 'x' | 'y';
+    /** Movement (px) before a pan starts (default 4). */
+    threshold?: number;
+    /** Minimum distance (px, default 40) and speed (px/s, default 300) for a swipe. */
+    swipeDistance?: number;
+    swipeVelocity?: number;
+    /** Long-press delay (ms, default 500). */
+    longPress?: number;
+    /** Ctrl/⌘ + wheel (trackpad pinch) counts as pinch (default true). */
+    wheelPinch?: boolean;
+}
+/** The swipe a pointer release represents, or `null` (pure). */
+declare function swipeDirection(dx: number, dy: number, vx: number, vy: number, o?: {
+    distance?: number;
+    velocity?: number;
+    axis?: 'x' | 'y';
+}): SwipeState | null;
+/** Scale between two pointer distances, clamped to [min, max] (pure). */
+declare function pinchScale(startDistance: number, distance: number, base?: number, min?: number, max?: number): number;
+/**
+ * One recognizer for pan, swipe, pinch (two pointers or Ctrl + wheel),
+ * long-press, tap and double-tap, with velocities ready to hand to a spring
+ * (`createSpring().set(target, velocity)`). Works with mouse, touch and pen
+ * through Pointer Events. Returns a cleanup function.
+ *
+ * @example
+ * const x = createSpring({ onUpdate: (v) => (card.style.translate = `${v}px`) });
+ * gesture(card, {
+ *   onPan: ({ dx, last, vx }) => (last ? x.set(0, vx) : x.jump(dx)),
+ *   onSwipe: ({ direction }) => dismiss(direction),
+ * }, { axis: 'x' });
+ */
+declare function gesture(el: HTMLElement, h: GestureHandlers, o?: GestureOptions): () => void;
+
+/**
+ * `<usa-swipeable>` — swipe-to-dismiss / swipe actions. The content follows
+ * the finger (rubber-banded past `distance`), flies out on a swipe or a drag
+ * past `distance`, otherwise springs home with the release velocity.
+ *
+ * Attributes: `axis` (`x` default · `y`), `distance` (px, 120), `preset`
+ * (spring), `dismiss` (remove the element after flying out), `disabled`.
+ * Keyboard: Delete/Backspace dismisses, ←/→ swipe. Events `usa:swipe`
+ * (`{ direction }`, cancelable), `usa:dismiss`. Methods `swipe(dir)`, `reset()`.
+ * Reduced motion: no follow / fly-out animation, events still fire.
+ */
+interface UsaSwipeableElement extends UsaElement {
+    swipe(direction: SwipeDirection): void;
+    reset(): void;
+    readonly offset: number;
+}
+declare function defineSwipeable(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-pinch-zoom>` — pinch (two fingers or Ctrl/⌘ + wheel / trackpad
+ * pinch) to zoom its content, pan while zoomed, double-tap to toggle zoom;
+ * scale and position spring back inside the bounds on release.
+ *
+ * Attributes: `min` (1), `max` (4), `double-tap` (zoom level, 2), `preset`.
+ * Keyboard: `+` / `-` / `0`. Property `scale`, method `zoomTo(scale)`.
+ * Event `usa:zoom` (`{ scale }`). Reduced motion: zoom changes instantly.
+ */
+interface UsaPinchZoomElement extends UsaElement {
+    readonly scale: number;
+    zoomTo(scale: number): void;
+}
+declare function definePinchZoom(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * use-scroll-animate/components/gesture — unified gestures (v3.2).
+ * `gesture()` recognises pan, swipe, pinch, long-press, tap and double-tap
+ * with release velocities for springs; `<usa-swipeable>` (swipe-to-dismiss)
+ * and `<usa-pinch-zoom>` are built on it.
+ */
+
+/** Register every component of this category under its default tag. */
+declare function defineGestureComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-swipeable': UsaSwipeableElement;
+        'usa-pinch-zoom': UsaPinchZoomElement;
+    }
+}
+
+/**
+ * `<usa-draw>` — line drawing: every stroke of the SVG inside draws itself.
+ * Attributes: `trigger` (`view` default · `hover` · `click` · `scrub`),
+ * `duration` (1600), `stagger` (0–0.9 share of the timeline, 0.2), `fill`
+ * (fade the fill in after drawing), `repeat`. Method `play()`, property
+ * `progress`, event `usa:complete`. Reduced motion: drawn immediately.
+ */
+interface UsaDrawElement extends UsaElement {
+    play(): void;
+    progress: number;
+}
+declare function defineDraw(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-morph>` — morphs an SVG path through a list of shapes.
+ * Put a `<svg><path></path></svg>` inside (one is created otherwise) and set
+ * `paths="M… | M… | M…"` (same command structure morphs smoothly, others
+ * switch at the midpoint). Attributes: `trigger` (`click` default · `hover`
+ * · `auto` · `view`), `interval` (ms for auto, 2000), `duration` (600).
+ * Property `index`, method `next()`, event `usa:change`.
+ * Reduced motion: shapes switch without animating; `auto` does not cycle.
+ */
+interface UsaMorphElement extends UsaElement {
+    readonly index: number;
+    next(): Promise<void>;
+}
+declare function defineMorph(tag?: string): CustomElementConstructor | undefined;
+
+/** Clip-path start / end frames for each reveal shape. */
+declare const MASK_SHAPES: Record<string, [string, string]>;
+/**
+ * `<usa-mask-reveal>` — reveals its content through a growing mask shape.
+ * Attributes: `shape` (`circle` default · `diamond` · `wipe` · `wipe-up` ·
+ * `iris` · `star`), `duration` (900), `delay`, `trigger` (`view` · `hover`
+ * · `click`), `repeat`, `at` (`x% y%` origin for circle). Event
+ * `usa:complete`. Reduced motion: content is shown without the mask.
+ */
+interface UsaMaskRevealElement extends UsaElement {
+    reveal(): Promise<void>;
+}
+declare function defineMaskReveal(tag?: string): CustomElementConstructor | undefined;
+
+type Icon = {
+    d: string;
+    frames: Keyframe[];
+    duration: number;
+    origin?: string;
+};
+/** Built-in animated icons (24×24 strokes) and the motion each one plays. */
+declare const ANIM_ICONS: Record<string, Icon>;
+/**
+ * `<usa-anim-icon name="bell">` — an animated stroke icon that plays its
+ * motion on `trigger` (`hover` default · `click` · `view` · `loop`).
+ * Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible
+ * name; decorative when absent). Method `play()`. Reduced motion: static.
+ */
+interface UsaAnimIconElement extends UsaElement {
+    play(): void;
+}
+declare function defineAnimIcon(tag?: string): CustomElementConstructor | undefined;
+
+/** `true` when two path strings share the same commands (so their numbers can be interpolated). */
+declare function pathsCompatible(a: string, b: string): boolean;
+/**
+ * Path data between `a` and `b` at `t` (0–1). Paths with the same command
+ * structure morph number-by-number; others switch at the midpoint.
+ */
+declare function interpolatePath(a: string, b: string, t: number): string;
+interface MorphOptions {
+    duration?: number;
+    easing?: (t: number) => number;
+}
+/** Animate a `<path>`'s `d` to `to`. Resolves when done; instant under reduced motion. */
+declare function morphTo(path: SVGPathElement | Element, to: string, o?: MorphOptions): Promise<void>;
+/**
+ * Prepare every stroke in `root` for line drawing (normalised `pathLength=1`,
+ * so no `getTotalLength()` is needed) and return a function that sets
+ * progress 0–1, optionally staggered between shapes.
+ */
+declare function drawLines(root: Element, o?: {
+    stagger?: number;
+}): (progress: number) => void;
+
+/**
+ * use-scroll-animate/components/svg — SVG animation (v3.3).
+ * `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
+ * (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
+ * `interpolatePath()`, `morphTo()`, `drawLines()`.
+ */
+
+/** Register every component of this category under its default tag. */
+declare function defineSvgComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-draw': UsaDrawElement;
+        'usa-morph': UsaMorphElement;
+        'usa-mask-reveal': UsaMaskRevealElement;
+        'usa-anim-icon': UsaAnimIconElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1905,6 +2128,8 @@ declare const COMPONENT_CATEGORIES: {
     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"];
     readonly timeline: readonly ["usa-timeline"];
+    readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
+    readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 
@@ -1914,5 +2139,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
  */
 declare function defineComponents(categories?: ComponentCategory[]): void;
 
-export { AMBIENT_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MORPH_ICONS, MOTION_SCALE, PAGE_EFFECTS, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAurora, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCursor, defineDialog, defineDotNetwork, defineDoubleTap, defineDraggable, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineFullpage, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineLoadingBar, defineMagnetic, defineMarquee, defineMotionSwitch, defineNavbar, defineOverscroll, definePageComponents, defineParticles, definePhysicsComponents, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, easeOutExpo, enableMpaTransitions, flip, fluentPreset, getMotionIntensity, haptic, linearEasing, loadingBar, morphPath, pageTransition, prefersReducedMotion, projectInertia, readScrollProgress, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsViewTransitions, themeTransition, timeline, toast, viewTransition };
-export type { AmbientEffect, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, MotionIntensity, PageEffect, PageTransitionOptions, Placement, RevealEffect, ScrubOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAuroraElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCursorElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaFullpageElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
+export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PAGE_EFFECTS, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCursor, defineDialog, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, drawLines, easeOutExpo, enableMpaTransitions, flip, fluentPreset, gesture, getMotionIntensity, haptic, interpolatePath, linearEasing, loadingBar, morphPath, morphTo, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsViewTransitions, swipeDirection, themeTransition, timeline, toast, viewTransition };
+export type { AmbientEffect, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCursorElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaFullpageElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };