use-scroll-animate 3.9.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/README.md +16 -14
- package/README_ja.md +10 -11
- package/README_zh.md +11 -12
- package/dist/chunks/{base-Dm6ee5ug.cjs → base-CXx7jZ-o.cjs} +1 -11
- package/dist/chunks/{base-Dm6ee5ug.cjs.map → base-CXx7jZ-o.cjs.map} +1 -1
- package/dist/chunks/{base-BRIPyPtX.js → base-ZARFccur.js} +2 -11
- package/dist/chunks/{base-BRIPyPtX.js.map → base-ZARFccur.js.map} +1 -1
- package/dist/chunks/core-Co-6AL0h.js +218 -0
- package/dist/chunks/core-Co-6AL0h.js.map +1 -0
- package/dist/chunks/{core-CYozf_E-.js → core-DKY-fVzR.js} +2 -2
- package/dist/chunks/{core-CYozf_E-.js.map → core-DKY-fVzR.js.map} +1 -1
- package/dist/chunks/core-DXqZm5Il.cjs +222 -0
- package/dist/chunks/core-DXqZm5Il.cjs.map +1 -0
- package/dist/chunks/{core-CHAtivHV.cjs → core-IaorbTdu.cjs} +2 -2
- package/dist/chunks/{core-CHAtivHV.cjs.map → core-IaorbTdu.cjs.map} +1 -1
- package/dist/chunks/{index-tags-BmQR17Sb.js → index-tags-43Xtd01A.js} +2 -2
- package/dist/chunks/index-tags-43Xtd01A.js.map +1 -0
- package/dist/chunks/{index-tags-DYYsgbba.cjs → index-tags-BQh_uGqH.cjs} +2 -2
- package/dist/chunks/index-tags-BQh_uGqH.cjs.map +1 -0
- package/dist/chunks/{spring-Dp5BllPB.cjs → spring-2OTnYCzm.cjs} +2 -2
- package/dist/chunks/{spring-Dp5BllPB.cjs.map → spring-2OTnYCzm.cjs.map} +1 -1
- package/dist/chunks/{spring-UBPhrh1X.js → spring-E2ickYNI.js} +2 -2
- package/dist/chunks/{spring-UBPhrh1X.js.map → spring-E2ickYNI.js.map} +1 -1
- package/dist/chunks/{variants-_dC-ey6R.cjs → variants-BNIrn4ch.cjs} +2 -2
- package/dist/chunks/{variants-_dC-ey6R.cjs.map → variants-BNIrn4ch.cjs.map} +1 -1
- package/dist/chunks/{variants-DTypaOH3.js → variants-DvnxvRCM.js} +2 -2
- package/dist/chunks/{variants-DTypaOH3.js.map → variants-DvnxvRCM.js.map} +1 -1
- package/dist/components/angular.cjs +6 -5
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +4 -17
- package/dist/components/angular.d.ts +4 -17
- package/dist/components/angular.js +6 -5
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.cjs +2 -2
- package/dist/components/background.js +3 -3
- package/dist/components/cards.cjs +2 -2
- package/dist/components/cards.js +3 -3
- package/dist/components/click.cjs +2 -2
- package/dist/components/click.js +3 -3
- package/dist/components/depth.cjs +3 -3
- package/dist/components/depth.js +4 -4
- package/dist/components/feedback.cjs +1 -1
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.cjs +3 -3
- package/dist/components/gesture.js +5 -5
- package/dist/components/interaction.cjs +1 -1
- package/dist/components/interaction.js +2 -2
- package/dist/components/jsx.d.cts +1 -1
- package/dist/components/jsx.d.ts +1 -1
- package/dist/components/layout.cjs +1 -1
- package/dist/components/layout.js +2 -2
- package/dist/components/lazy.cjs +1 -1
- package/dist/components/lazy.d.cts +1 -1
- package/dist/components/lazy.d.ts +1 -1
- package/dist/components/lazy.js +1 -1
- package/dist/components/packs.cjs +1 -1
- package/dist/components/packs.js +2 -2
- package/dist/components/page.cjs +2 -2
- package/dist/components/page.js +3 -3
- package/dist/components/physics.cjs +2 -2
- package/dist/components/physics.js +4 -4
- package/dist/components/react.cjs +2 -2
- package/dist/components/react.cjs.map +1 -1
- package/dist/components/react.d.cts +1 -1
- package/dist/components/react.d.ts +1 -1
- package/dist/components/react.js +2 -2
- package/dist/components/react.js.map +1 -1
- package/dist/components/reveal.cjs +1 -1
- package/dist/components/reveal.js +2 -2
- package/dist/components/solid.cjs +6 -5
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +4 -17
- package/dist/components/solid.d.ts +4 -17
- package/dist/components/solid.js +6 -5
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +6 -5
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +4 -17
- package/dist/components/svelte.d.ts +4 -17
- package/dist/components/svelte.js +6 -5
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.cjs +1 -1
- package/dist/components/svg.js +2 -2
- package/dist/components/text.cjs +1 -1
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.cjs +7 -220
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.js +5 -217
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/transitions.cjs +8 -125
- package/dist/components/transitions.cjs.map +1 -1
- package/dist/components/transitions.css +0 -1
- package/dist/components/transitions.d.cts +5 -34
- package/dist/components/transitions.d.ts +5 -34
- package/dist/components/transitions.js +10 -125
- package/dist/components/transitions.js.map +1 -1
- package/dist/components/ui.cjs +3 -3
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +6 -5
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +4 -17
- package/dist/components/vue.d.ts +4 -17
- package/dist/components/vue.js +6 -5
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.cjs +1 -1
- package/dist/components/webgl.js +2 -2
- package/dist/components.cjs +12 -13
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +0 -1
- package/dist/components.d.cts +6 -35
- package/dist/components.d.ts +6 -35
- package/dist/components.js +10 -9
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +5 -109
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +72 -32
- package/dist/index.d.ts +72 -32
- package/dist/index.js +4 -110
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/docs/API.md +6 -6
- package/docs/ROADMAP.md +14 -0
- package/docs/components.md +3 -5
- package/docs/migration-from-aos.md +1 -1
- package/docs/migration-from-gsap-scrolltrigger.md +6 -6
- package/package.json +1 -1
- package/dist/chunks/index-tags-BmQR17Sb.js.map +0 -1
- package/dist/chunks/index-tags-DYYsgbba.cjs.map +0 -1
|
@@ -1 +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":"
|
|
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;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var base = require('../chunks/base-
|
|
3
|
+
var base = require('../chunks/base-CXx7jZ-o.cjs');
|
|
4
4
|
|
|
5
5
|
/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */
|
|
6
6
|
const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
|
package/dist/components/webgl.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-
|
|
1
|
+
import { h as defineElement, n as now, b as caf, d as clamp, r as raf } from '../chunks/base-ZARFccur.js';
|
|
2
|
+
export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-ZARFccur.js';
|
|
3
3
|
|
|
4
4
|
/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */
|
|
5
5
|
const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
|
package/dist/components.cjs
CHANGED
|
@@ -18,11 +18,12 @@ var components_webgl = require('./components/webgl.cjs');
|
|
|
18
18
|
var components_depth = require('./components/depth.cjs');
|
|
19
19
|
var components_layout = require('./components/layout.cjs');
|
|
20
20
|
var components_packs = require('./components/packs.cjs');
|
|
21
|
-
var variants = require('./chunks/variants-
|
|
22
|
-
var base = require('./chunks/base-
|
|
23
|
-
var indexTags = require('./chunks/index-tags-
|
|
24
|
-
var spring = require('./chunks/spring-
|
|
25
|
-
var core = require('./chunks/core-
|
|
21
|
+
var variants = require('./chunks/variants-BNIrn4ch.cjs');
|
|
22
|
+
var base = require('./chunks/base-CXx7jZ-o.cjs');
|
|
23
|
+
var indexTags = require('./chunks/index-tags-BQh_uGqH.cjs');
|
|
24
|
+
var spring = require('./chunks/spring-2OTnYCzm.cjs');
|
|
25
|
+
var core = require('./chunks/core-DXqZm5Il.cjs');
|
|
26
|
+
var core$1 = require('./chunks/core-IaorbTdu.cjs');
|
|
26
27
|
|
|
27
28
|
/**
|
|
28
29
|
* use-scroll-animate/components
|
|
@@ -122,10 +123,8 @@ exports.defineMarquee = components_background.defineMarquee;
|
|
|
122
123
|
exports.defineParticles = components_background.defineParticles;
|
|
123
124
|
exports.defineWaterRipple = components_background.defineWaterRipple;
|
|
124
125
|
exports.fluentPreset = components_background.fluentPreset;
|
|
125
|
-
exports.connectedAnimation = components_transitions.connectedAnimation;
|
|
126
126
|
exports.defineAccordion = components_transitions.defineAccordion;
|
|
127
127
|
exports.defineDialog = components_transitions.defineDialog;
|
|
128
|
-
exports.defineFlipList = components_transitions.defineFlipList;
|
|
129
128
|
exports.defineTransitionComponents = components_transitions.defineTransitionComponents;
|
|
130
129
|
exports.defineViewSwitch = components_transitions.defineViewSwitch;
|
|
131
130
|
exports.flip = components_transitions.flip;
|
|
@@ -192,11 +191,8 @@ exports.setMotionIntensity = components_page.setMotionIntensity;
|
|
|
192
191
|
exports.smoothScroll = components_page.smoothScroll;
|
|
193
192
|
exports.supportsViewTransitions = components_page.supportsViewTransitions;
|
|
194
193
|
exports.themeTransition = components_page.themeTransition;
|
|
195
|
-
exports.TIMELINE_PRESETS = components_timeline.TIMELINE_PRESETS;
|
|
196
194
|
exports.defineTimeline = components_timeline.defineTimeline;
|
|
197
195
|
exports.defineTimelineComponents = components_timeline.defineTimelineComponents;
|
|
198
|
-
exports.resolvePosition = components_timeline.resolvePosition;
|
|
199
|
-
exports.timeline = components_timeline.timeline;
|
|
200
196
|
exports.defineGestureComponents = components_gesture.defineGestureComponents;
|
|
201
197
|
exports.definePinchZoom = components_gesture.definePinchZoom;
|
|
202
198
|
exports.defineSwipeable = components_gesture.defineSwipeable;
|
|
@@ -260,8 +256,11 @@ exports.springEasing = spring.springEasing;
|
|
|
260
256
|
exports.springSamples = spring.springSamples;
|
|
261
257
|
exports.stepSpring = spring.stepSpring;
|
|
262
258
|
exports.supportsLinearEasing = spring.supportsLinearEasing;
|
|
263
|
-
exports.
|
|
264
|
-
exports.
|
|
265
|
-
exports.
|
|
259
|
+
exports.TIMELINE_PRESETS = core.TIMELINE_PRESETS;
|
|
260
|
+
exports.resolvePosition = core.resolvePosition;
|
|
261
|
+
exports.timeline = core.timeline;
|
|
262
|
+
exports.gesture = core$1.gesture;
|
|
263
|
+
exports.pinchScale = core$1.pinchScale;
|
|
264
|
+
exports.swipeDirection = core$1.swipeDirection;
|
|
266
265
|
exports.defineComponents = defineComponents;
|
|
267
266
|
//# sourceMappingURL=components.cjs.map
|
package/dist/components.cjs.map
CHANGED
|
@@ -1 +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 { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/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';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/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 webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\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","defineWebglComponents","defineDepthComponents","defineLayoutComponents","definePacksComponents","canDefine","adoptVariants"],"mappings":"
|
|
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 { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/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';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/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 webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\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","defineWebglComponents","defineDepthComponents","defineLayoutComponents","definePacksComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AA6CH,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;AACxB,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,MAAM,EAAEC,wCAAsB;AAC9B,IAAA,KAAK,EAAEC,sCAAqB;CAC7B;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
CHANGED
|
@@ -29,7 +29,6 @@ usa-marquee{--usa-marquee-gap:32px;display:block;overflow:hidden;contain:content
|
|
|
29
29
|
usa-particles{position:relative;display:block;min-height:120px;overflow:hidden}usa-particles>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
|
|
30
30
|
usa-accordion{display:block}usa-accordion>details>summary{cursor:pointer}usa-accordion>details>summary::-webkit-details-marker{display:none}usa-accordion>details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1em}usa-accordion>details>summary::after{content:"";flex:none;width:0.5em;height:0.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);opacity:0.7}usa-accordion>details[open]:not([data-closing])>summary::after{transform:translateY(25%) rotate(-135deg)}@media (prefers-reduced-motion:reduce){usa-accordion>details>summary::after{transition:none}}
|
|
31
31
|
usa-dialog{display:contents}usa-dialog:not(:defined){display:none}
|
|
32
|
-
usa-flip-list{display:block}
|
|
33
32
|
usa-view-switch{display:grid}usa-view-switch>*{grid-area:1 / 1;min-width:0}usa-view-switch>[hidden]:not([data-leaving]){display:none !important}usa-view-switch>[data-leaving]{display:block;pointer-events:none}
|
|
34
33
|
usa-draggable{display:inline-block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform;-webkit-tap-highlight-color:transparent}usa-draggable[axis="x"]{touch-action:pan-y}usa-draggable[axis="y"]{touch-action:pan-x}usa-draggable[block]{display:block}usa-draggable[data-dragging]{cursor:grabbing}usa-draggable[disabled]{cursor:default}usa-draggable:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:3px}
|
|
35
34
|
usa-overscroll{display:block;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}usa-overscroll[axis="x"]{overflow-y:hidden}usa-overscroll>*{transform:translate3d(0,var(--usa-overscroll,0px),0)}usa-overscroll[axis="x"]>*{transform:translate3d(var(--usa-overscroll,0px),0,0)}usa-overscroll[data-stretched]>*{will-change:transform}
|
package/dist/components.d.cts
CHANGED
|
@@ -745,20 +745,6 @@ interface UsaAccordionElement extends UsaElement {
|
|
|
745
745
|
}
|
|
746
746
|
declare function defineAccordion(tag?: string): CustomElementConstructor | undefined;
|
|
747
747
|
|
|
748
|
-
/**
|
|
749
|
-
* `<usa-flip-list>` — animates its children to their new places whenever
|
|
750
|
-
* they are added, removed or reordered (FLIP: transforms only). Works with
|
|
751
|
-
* any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
|
|
752
|
-
*
|
|
753
|
-
* Attributes: `duration` (ms, 420), `easing`, `disabled`.
|
|
754
|
-
* Method: `flip(mutate)` for explicit changes (also measures resizes).
|
|
755
|
-
* Reduced motion: no animation.
|
|
756
|
-
*/
|
|
757
|
-
interface UsaFlipListElement extends UsaElement {
|
|
758
|
-
flip(mutate: () => void | Promise<void>): Promise<void>;
|
|
759
|
-
}
|
|
760
|
-
declare function defineFlipList(tag?: string): CustomElementConstructor | undefined;
|
|
761
|
-
|
|
762
748
|
/**
|
|
763
749
|
* `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
|
|
764
750
|
* steps, app pages) and animates between them. Children are views; name
|
|
@@ -815,26 +801,12 @@ type Targets = Element | Iterable<Element> | ArrayLike<Element>;
|
|
|
815
801
|
* ```
|
|
816
802
|
*/
|
|
817
803
|
declare function flip(targets: Targets, mutate: () => void | Promise<void>, options?: FlipOptions): Promise<void>;
|
|
818
|
-
interface ConnectedOptions {
|
|
819
|
-
duration?: number;
|
|
820
|
-
easing?: string;
|
|
821
|
-
/** Hide `from` while the animation runs (default true). */
|
|
822
|
-
hideSource?: boolean;
|
|
823
|
-
}
|
|
824
|
-
/**
|
|
825
|
-
* Connected (shared-element) animation, like WinUI's
|
|
826
|
-
* `ConnectedAnimationService`: `to` flies from the position and size of
|
|
827
|
-
* `from` into its own place (e.g. a thumbnail opening into a detail view).
|
|
828
|
-
* Call it right after `to` is shown. Transforms only.
|
|
829
|
-
*
|
|
830
|
-
* @deprecated since 3.9, removed in 4.0 — use `sharedTransition()` (components/layout).
|
|
831
|
-
*/
|
|
832
|
-
declare function connectedAnimation(from: Element, to: HTMLElement, options?: ConnectedOptions): Promise<void>;
|
|
833
804
|
|
|
834
805
|
/**
|
|
835
806
|
* use-scroll-animate/components/transitions — view & layout transitions.
|
|
836
|
-
* `<usa-dialog>`, `<usa-accordion>`, `<usa-
|
|
837
|
-
* and the `viewTransition()
|
|
807
|
+
* `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
|
|
808
|
+
* and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
|
|
809
|
+
* `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
|
|
838
810
|
*/
|
|
839
811
|
|
|
840
812
|
/** Register every component of this category under its default tag. */
|
|
@@ -843,7 +815,6 @@ declare global {
|
|
|
843
815
|
interface HTMLElementTagNameMap {
|
|
844
816
|
'usa-dialog': UsaDialogElement;
|
|
845
817
|
'usa-accordion': UsaAccordionElement;
|
|
846
|
-
'usa-flip-list': UsaFlipListElement;
|
|
847
818
|
'usa-view-switch': UsaViewSwitchElement;
|
|
848
819
|
}
|
|
849
820
|
}
|
|
@@ -2411,7 +2382,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
2411
2382
|
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
|
|
2412
2383
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
2413
2384
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
2414
|
-
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-
|
|
2385
|
+
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
2415
2386
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
2416
2387
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
2417
2388
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
@@ -2433,5 +2404,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2433
2404
|
*/
|
|
2434
2405
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2435
2406
|
|
|
2436
|
-
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents,
|
|
2437
|
-
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions,
|
|
2407
|
+
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, 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, defineWebglComponents, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2408
|
+
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, 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 };
|
package/dist/components.d.ts
CHANGED
|
@@ -745,20 +745,6 @@ interface UsaAccordionElement extends UsaElement {
|
|
|
745
745
|
}
|
|
746
746
|
declare function defineAccordion(tag?: string): CustomElementConstructor | undefined;
|
|
747
747
|
|
|
748
|
-
/**
|
|
749
|
-
* `<usa-flip-list>` — animates its children to their new places whenever
|
|
750
|
-
* they are added, removed or reordered (FLIP: transforms only). Works with
|
|
751
|
-
* any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
|
|
752
|
-
*
|
|
753
|
-
* Attributes: `duration` (ms, 420), `easing`, `disabled`.
|
|
754
|
-
* Method: `flip(mutate)` for explicit changes (also measures resizes).
|
|
755
|
-
* Reduced motion: no animation.
|
|
756
|
-
*/
|
|
757
|
-
interface UsaFlipListElement extends UsaElement {
|
|
758
|
-
flip(mutate: () => void | Promise<void>): Promise<void>;
|
|
759
|
-
}
|
|
760
|
-
declare function defineFlipList(tag?: string): CustomElementConstructor | undefined;
|
|
761
|
-
|
|
762
748
|
/**
|
|
763
749
|
* `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
|
|
764
750
|
* steps, app pages) and animates between them. Children are views; name
|
|
@@ -815,26 +801,12 @@ type Targets = Element | Iterable<Element> | ArrayLike<Element>;
|
|
|
815
801
|
* ```
|
|
816
802
|
*/
|
|
817
803
|
declare function flip(targets: Targets, mutate: () => void | Promise<void>, options?: FlipOptions): Promise<void>;
|
|
818
|
-
interface ConnectedOptions {
|
|
819
|
-
duration?: number;
|
|
820
|
-
easing?: string;
|
|
821
|
-
/** Hide `from` while the animation runs (default true). */
|
|
822
|
-
hideSource?: boolean;
|
|
823
|
-
}
|
|
824
|
-
/**
|
|
825
|
-
* Connected (shared-element) animation, like WinUI's
|
|
826
|
-
* `ConnectedAnimationService`: `to` flies from the position and size of
|
|
827
|
-
* `from` into its own place (e.g. a thumbnail opening into a detail view).
|
|
828
|
-
* Call it right after `to` is shown. Transforms only.
|
|
829
|
-
*
|
|
830
|
-
* @deprecated since 3.9, removed in 4.0 — use `sharedTransition()` (components/layout).
|
|
831
|
-
*/
|
|
832
|
-
declare function connectedAnimation(from: Element, to: HTMLElement, options?: ConnectedOptions): Promise<void>;
|
|
833
804
|
|
|
834
805
|
/**
|
|
835
806
|
* use-scroll-animate/components/transitions — view & layout transitions.
|
|
836
|
-
* `<usa-dialog>`, `<usa-accordion>`, `<usa-
|
|
837
|
-
* and the `viewTransition()
|
|
807
|
+
* `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
|
|
808
|
+
* and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
|
|
809
|
+
* `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
|
|
838
810
|
*/
|
|
839
811
|
|
|
840
812
|
/** Register every component of this category under its default tag. */
|
|
@@ -843,7 +815,6 @@ declare global {
|
|
|
843
815
|
interface HTMLElementTagNameMap {
|
|
844
816
|
'usa-dialog': UsaDialogElement;
|
|
845
817
|
'usa-accordion': UsaAccordionElement;
|
|
846
|
-
'usa-flip-list': UsaFlipListElement;
|
|
847
818
|
'usa-view-switch': UsaViewSwitchElement;
|
|
848
819
|
}
|
|
849
820
|
}
|
|
@@ -2411,7 +2382,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
2411
2382
|
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
|
|
2412
2383
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
2413
2384
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
2414
|
-
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-
|
|
2385
|
+
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
2415
2386
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
2416
2387
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
2417
2388
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
@@ -2433,5 +2404,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2433
2404
|
*/
|
|
2434
2405
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2435
2406
|
|
|
2436
|
-
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents,
|
|
2437
|
-
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions,
|
|
2407
|
+
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, 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, defineWebglComponents, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2408
|
+
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, 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 };
|
package/dist/components.js
CHANGED
|
@@ -9,7 +9,7 @@ export { SPINNER_VARIANTS, defineCheck, defineProgress, defineSkeleton, defineSp
|
|
|
9
9
|
import { defineBackgroundComponents } from './components/background.js';
|
|
10
10
|
export { defineAcrylic, defineAurora, defineBlobs, defineDotNetwork, defineGrain, defineGridGlow, defineMarquee, defineParticles, defineWaterRipple, fluentPreset } from './components/background.js';
|
|
11
11
|
import { defineTransitionComponents } from './components/transitions.js';
|
|
12
|
-
export {
|
|
12
|
+
export { defineAccordion, defineDialog, defineViewSwitch, flip, viewTransition } from './components/transitions.js';
|
|
13
13
|
import { definePhysicsComponents } from './components/physics.js';
|
|
14
14
|
export { SPRING_EFFECTS, defineDraggable, defineOverscroll, defineSpring, springEffectKeyframes } from './components/physics.js';
|
|
15
15
|
import { defineCardComponents } from './components/cards.js';
|
|
@@ -21,7 +21,7 @@ export { defineAvatarStack, defineBadge, defineBottomSheet, defineDrawer, define
|
|
|
21
21
|
import { definePageComponents } from './components/page.js';
|
|
22
22
|
export { AMBIENT_EFFECTS, CURSOR_MODES, PAGE_EFFECTS, defineAmbient, defineAutoSkeleton, defineBackToTop, defineCursor, defineFullpage, defineLoadingBar, defineMotionSwitch, defineSplash, enableMpaTransitions, loadingBar, pageTransition, restoreMotionIntensity, scrollToTarget, setMotionIntensity, smoothScroll, supportsViewTransitions, themeTransition } from './components/page.js';
|
|
23
23
|
import { defineTimelineComponents } from './components/timeline.js';
|
|
24
|
-
export {
|
|
24
|
+
export { defineTimeline } from './components/timeline.js';
|
|
25
25
|
import { defineGestureComponents } from './components/gesture.js';
|
|
26
26
|
export { definePinchZoom, defineSwipeable } from './components/gesture.js';
|
|
27
27
|
import { defineSvgComponents } from './components/svg.js';
|
|
@@ -34,13 +34,14 @@ import { defineLayoutComponents } from './components/layout.js';
|
|
|
34
34
|
export { autoAnimate, defineAutoAnimate, defineMasonry, flipFrames, masonryLayout, sharedTransition } from './components/layout.js';
|
|
35
35
|
import { definePacksComponents } from './components/packs.js';
|
|
36
36
|
export { PACKS, PACK_PRIMITIVES, applyPack, countUp, definePack, flyToCart } from './components/packs.js';
|
|
37
|
-
import { a as adoptVariants } from './chunks/variants-
|
|
38
|
-
export { V as VARIANTS, s as setVariant } from './chunks/variants-
|
|
39
|
-
import { c as canDefine } from './chunks/base-
|
|
40
|
-
export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-
|
|
41
|
-
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-
|
|
42
|
-
export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-
|
|
43
|
-
export {
|
|
37
|
+
import { a as adoptVariants } from './chunks/variants-DvnxvRCM.js';
|
|
38
|
+
export { V as VARIANTS, s as setVariant } from './chunks/variants-DvnxvRCM.js';
|
|
39
|
+
import { c as canDefine } from './chunks/base-ZARFccur.js';
|
|
40
|
+
export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-ZARFccur.js';
|
|
41
|
+
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-43Xtd01A.js';
|
|
42
|
+
export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-E2ickYNI.js';
|
|
43
|
+
export { T as TIMELINE_PRESETS, r as resolvePosition, t as timeline } from './chunks/core-Co-6AL0h.js';
|
|
44
|
+
export { g as gesture, p as pinchScale, s as swipeDirection } from './chunks/core-DKY-fVzR.js';
|
|
44
45
|
|
|
45
46
|
/**
|
|
46
47
|
* use-scroll-animate/components
|
package/dist/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","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 { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/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';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/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 webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\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":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.js","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 { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/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';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/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 webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AA6CH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,UAAU,EAAE,0BAA0B;AACtC,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,KAAK,EAAE,oBAAoB;AAC3B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,EAAE,EAAE,kBAAkB;AACtB,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,GAAG,EAAE,mBAAmB;AACxB,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,KAAK,EAAE,qBAAqB;CAC7B;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAI,SAAS,EAAE;AAAE,QAAA,aAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;"}
|