motionary 6.9.0 → 7.1.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 +30 -0
- package/README.md +2 -2
- package/README_ja.md +2 -2
- package/README_zh.md +2 -2
- package/dist/chunks/audio-DcPvT2Kh.js +333 -0
- package/dist/chunks/audio-DcPvT2Kh.js.map +1 -0
- package/dist/chunks/audio-EXUoijsG.cjs +342 -0
- package/dist/chunks/audio-EXUoijsG.cjs.map +1 -0
- package/dist/chunks/{base-D5MHqeDd.js → base-2-yYc93C.js} +2 -2
- package/dist/chunks/{base-D5MHqeDd.js.map → base-2-yYc93C.js.map} +1 -1
- package/dist/chunks/{core-DyJu5r5a.js → core-D5rU0CV6.js} +2 -2
- package/dist/chunks/{core-DyJu5r5a.js.map → core-D5rU0CV6.js.map} +1 -1
- package/dist/chunks/{core-ZGo4hOEk.js → core-DuO-AVXL.js} +2 -2
- package/dist/chunks/{core-ZGo4hOEk.js.map → core-DuO-AVXL.js.map} +1 -1
- package/dist/chunks/{fx-DlGRMJ-Z.js → fx-CMxWNwH8.js} +2 -2
- package/dist/chunks/{fx-DlGRMJ-Z.js.map → fx-CMxWNwH8.js.map} +1 -1
- package/dist/chunks/{gpu-DPhMkJq6.js → gpu-DLPghVWr.js} +183 -11
- package/dist/chunks/gpu-DLPghVWr.js.map +1 -0
- package/dist/chunks/{gpu-C2D4T9Q-.cjs → gpu-Dx0H875w.cjs} +185 -9
- package/dist/chunks/gpu-Dx0H875w.cjs.map +1 -0
- package/dist/chunks/{index-tags-wv0R_vkO.cjs → index-tags-BTMwrfgV.cjs} +3 -3
- package/dist/chunks/index-tags-BTMwrfgV.cjs.map +1 -0
- package/dist/chunks/{index-tags-DucKMQr_.js → index-tags-C04JP8g4.js} +3 -3
- package/dist/chunks/index-tags-C04JP8g4.js.map +1 -0
- package/dist/chunks/{player-DH3TIz-t.js → player-DxvCYo7Q.js} +4 -4
- package/dist/chunks/{player-DH3TIz-t.js.map → player-DxvCYo7Q.js.map} +1 -1
- package/dist/chunks/{registry-CTLWeg-J.js → registry-CyKExAmE.js} +2 -2
- package/dist/chunks/{registry-CTLWeg-J.js.map → registry-CyKExAmE.js.map} +1 -1
- package/dist/chunks/{spring-B-9MZOrW.js → spring-BK8DiezC.js} +2 -2
- package/dist/chunks/{spring-B-9MZOrW.js.map → spring-BK8DiezC.js.map} +1 -1
- package/dist/chunks/{variants-CoZn3k_5.js → variants-BQ6bhzn4.js} +2 -2
- package/dist/chunks/{variants-CoZn3k_5.js.map → variants-BQ6bhzn4.js.map} +1 -1
- package/dist/components/a11y.cjs +1 -1
- package/dist/components/a11y.d.cts +2 -2
- package/dist/components/a11y.d.ts +2 -2
- package/dist/components/a11y.js +3 -3
- package/dist/components/angular.cjs +2 -2
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +5 -36
- package/dist/components/angular.d.ts +5 -36
- package/dist/components/angular.js +9 -9
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.js +2 -2
- package/dist/components/bridge.js +1 -1
- package/dist/components/cards.js +2 -2
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +3 -3
- package/dist/components/effects.cjs +11 -336
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +9 -333
- package/dist/components/effects.js.map +1 -1
- package/dist/components/feedback.js +1 -1
- package/dist/components/fx-3d.cjs +1 -7
- package/dist/components/fx-3d.cjs.map +1 -1
- package/dist/components/fx-3d.d.cts +1 -3
- package/dist/components/fx-3d.d.ts +1 -3
- package/dist/components/fx-3d.js +3 -8
- package/dist/components/fx-3d.js.map +1 -1
- package/dist/components/fx-focus.js +2 -2
- package/dist/components/fx-gpu.cjs +2 -3
- package/dist/components/fx-gpu.cjs.map +1 -1
- package/dist/components/fx-gpu.d.cts +1 -3
- package/dist/components/fx-gpu.d.ts +1 -3
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.cjs +1 -7
- package/dist/components/fx-light.cjs.map +1 -1
- package/dist/components/fx-light.d.cts +1 -3
- package/dist/components/fx-light.d.ts +1 -3
- package/dist/components/fx-light.js +3 -8
- package/dist/components/fx-light.js.map +1 -1
- package/dist/components/fx-morph.cjs +1 -7
- package/dist/components/fx-morph.cjs.map +1 -1
- package/dist/components/fx-morph.d.cts +1 -3
- package/dist/components/fx-morph.d.ts +1 -3
- package/dist/components/fx-morph.js +3 -8
- package/dist/components/fx-morph.js.map +1 -1
- package/dist/components/fx-music.cjs +179 -0
- package/dist/components/fx-music.cjs.map +1 -0
- package/dist/components/fx-music.d.cts +102 -0
- package/dist/components/fx-music.d.ts +102 -0
- package/dist/components/fx-music.js +174 -0
- package/dist/components/fx-music.js.map +1 -0
- package/dist/components/fx-physics.cjs +1 -7
- package/dist/components/fx-physics.cjs.map +1 -1
- package/dist/components/fx-physics.d.cts +1 -3
- package/dist/components/fx-physics.d.ts +1 -3
- package/dist/components/fx-physics.js +3 -8
- package/dist/components/fx-physics.js.map +1 -1
- package/dist/components/fx-text.cjs +1 -7
- package/dist/components/fx-text.cjs.map +1 -1
- package/dist/components/fx-text.d.cts +1 -3
- package/dist/components/fx-text.d.ts +1 -3
- package/dist/components/fx-text.js +3 -8
- package/dist/components/fx-text.js.map +1 -1
- package/dist/components/fx-transitions.cjs +1 -7
- package/dist/components/fx-transitions.cjs.map +1 -1
- package/dist/components/fx-transitions.d.cts +1 -3
- package/dist/components/fx-transitions.d.ts +1 -3
- package/dist/components/fx-transitions.js +4 -9
- package/dist/components/fx-transitions.js.map +1 -1
- package/dist/components/fx-weather.cjs +1 -7
- package/dist/components/fx-weather.cjs.map +1 -1
- package/dist/components/fx-weather.d.cts +1 -3
- package/dist/components/fx-weather.d.ts +1 -3
- package/dist/components/fx-weather.js +3 -8
- package/dist/components/fx-weather.js.map +1 -1
- package/dist/components/fx.js +5 -5
- package/dist/components/fx2.cjs +15 -19
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +97 -22
- package/dist/components/fx2.d.ts +97 -22
- package/dist/components/fx2.js +16 -19
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/gesture.js +4 -4
- package/dist/components/interaction.cjs +11 -95
- package/dist/components/interaction.cjs.map +1 -1
- package/dist/components/interaction.css +0 -1
- package/dist/components/interaction.d.cts +3 -21
- package/dist/components/interaction.d.ts +3 -21
- package/dist/components/interaction.js +13 -96
- package/dist/components/interaction.js.map +1 -1
- package/dist/components/jsx.d.cts +2 -2
- package/dist/components/jsx.d.ts +2 -2
- package/dist/components/layout.js +1 -1
- package/dist/components/lazy.cjs +1 -1
- package/dist/components/lazy.d.cts +2 -2
- package/dist/components/lazy.d.ts +2 -2
- package/dist/components/lazy.js +1 -1
- package/dist/components/lite.cjs +115 -258
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +116 -257
- package/dist/components/lite.js.map +1 -1
- package/dist/components/marketplace.js +2 -2
- package/dist/components/packs.js +1 -1
- package/dist/components/page.js +3 -3
- package/dist/components/perf.cjs +1 -1
- package/dist/components/perf.d.cts +2 -2
- package/dist/components/perf.d.ts +2 -2
- package/dist/components/perf.js +3 -3
- package/dist/components/physics.js +3 -3
- package/dist/components/react.cjs +2 -2
- package/dist/components/react.cjs.map +1 -1
- package/dist/components/react.js +2 -2
- package/dist/components/react.js.map +1 -1
- package/dist/components/reveal.js +1 -1
- package/dist/components/solid.cjs +2 -2
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +4 -35
- package/dist/components/solid.d.ts +4 -35
- package/dist/components/solid.js +9 -9
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +2 -2
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +5 -36
- package/dist/components/svelte.d.ts +5 -36
- package/dist/components/svelte.js +9 -9
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.js +1 -1
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.js +3 -3
- package/dist/components/transitions.js +1 -1
- package/dist/components/ui.cjs +16 -75
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.css +0 -1
- package/dist/components/ui.d.cts +3 -18
- package/dist/components/ui.d.ts +3 -18
- package/dist/components/ui.js +21 -79
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.cjs +2 -2
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +5 -36
- package/dist/components/vue.d.ts +5 -36
- package/dist/components/vue.js +9 -9
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.js +1 -1
- package/dist/components/widgets.cjs +542 -61
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +79 -2
- package/dist/components/widgets.d.ts +79 -2
- package/dist/components/widgets.js +542 -67
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.cjs +1 -3
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +0 -2
- package/dist/components.d.cts +6 -39
- package/dist/components.d.ts +6 -39
- package/dist/components.js +12 -12
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +12 -12
- package/docs/accessibility.md +2 -2
- package/docs/components.md +38 -2
- package/docs/frameworks-ssr.md +4 -4
- package/docs/hybrid-apps.md +2 -2
- package/docs/upgrading-7.md +11 -1
- package/docs/windows-apps.md +1 -1
- package/package.json +131 -1
- package/dist/chunks/gpu-C2D4T9Q-.cjs.map +0 -1
- package/dist/chunks/gpu-DPhMkJq6.js.map +0 -1
- package/dist/chunks/index-tags-DucKMQr_.js.map +0 -1
- package/dist/chunks/index-tags-wv0R_vkO.cjs.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { hasEffect, registerEffect, EFFECT_KINDS } from '../chunks/registry-
|
|
2
|
-
import '../chunks/base-
|
|
1
|
+
import { hasEffect, registerEffect, EFFECT_KINDS } from '../chunks/registry-CyKExAmE.js';
|
|
2
|
+
import '../chunks/base-2-yYc93C.js';
|
|
3
3
|
|
|
4
4
|
const EFFECT_PACK_FORMAT = 'motionary/effect-pack';
|
|
5
5
|
const SEMVER = /^\d+\.\d+\.\d+(?:-[\w.]+)?$/;
|
package/dist/components/packs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as prefersReducedMotion, q as now, m as motionScale, r as raf, z as EASE_OUT, k as clamp, E as EASE_SPRING,
|
|
1
|
+
import { p as prefersReducedMotion, q as now, m as motionScale, r as raf, z as EASE_OUT, k as clamp, E as EASE_SPRING, u as defineElement } from '../chunks/base-2-yYc93C.js';
|
|
2
2
|
|
|
3
3
|
const anim = (el, frames, o) => {
|
|
4
4
|
if (typeof el.animate !== 'function')
|
package/dist/components/page.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { M as MOTION_SCALE } from '../chunks/base-
|
|
3
|
-
import { e as springSamples } from '../chunks/spring-
|
|
1
|
+
import { u as defineElement, l as caf, r as raf, p as prefersReducedMotion, q as now, i as getMotionSensitivity, h as getMotionIntensity, g as configureComponents, x as adoptStyles } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
export { M as MOTION_SCALE } from '../chunks/base-2-yYc93C.js';
|
|
3
|
+
import { e as springSamples } from '../chunks/spring-BK8DiezC.js';
|
|
4
4
|
|
|
5
5
|
var css$8 = "usa-cursor{--usa-cursor-color:var(--usa-accent,#7c5cff);--usa-cursor-size:28px;position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity 0.2s ease;contain:strict}usa-cursor[data-active]{opacity:1}usa-cursor .usa-cursor-ring{position:absolute;left:0;top:0;width:var(--usa-cursor-size);height:var(--usa-cursor-size);margin:calc(var(--usa-cursor-size) / -2) 0 0 calc(var(--usa-cursor-size) / -2);border:1.5px solid var(--usa-cursor-color);border-radius:999px;box-sizing:border-box;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),height 0.25s cubic-bezier(0.34,1.56,0.64,1),margin 0.25s ease,border-radius 0.25s ease,background-color 0.2s ease;will-change:transform}usa-cursor[data-hover] .usa-cursor-ring:first-child{width:calc(var(--usa-cursor-size) * 1.6);height:calc(var(--usa-cursor-size) * 1.6);margin:calc(var(--usa-cursor-size) * -0.8) 0 0 calc(var(--usa-cursor-size) * -0.8);background:color-mix(in srgb,var(--usa-cursor-color) 15%,transparent)}usa-cursor[data-snapped] .usa-cursor-ring{border-radius:12px;background:color-mix(in srgb,var(--usa-cursor-color) 12%,transparent);translate:-50% -50%;margin:0}usa-cursor[data-down] .usa-cursor-ring:first-child{scale:0.8}usa-cursor .usa-cursor-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--usa-cursor-color)}usa-cursor[data-snapped] .usa-cursor-dot{opacity:0}usa-cursor .usa-cursor-glow{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--usa-cursor-color) 35%,transparent),transparent 65%);mix-blend-mode:screen}.usa-cursor-none,.usa-cursor-none *{cursor:none !important}@media (pointer:coarse),(prefers-reduced-motion:reduce){usa-cursor{display:none}.usa-cursor-none,.usa-cursor-none *{cursor:auto !important}}";
|
|
6
6
|
|
package/dist/components/perf.cjs
CHANGED
|
@@ -19,14 +19,14 @@ declare const animationBudget: () => number;
|
|
|
19
19
|
declare const COMPONENT_CATEGORIES: {
|
|
20
20
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
21
21
|
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
22
|
-
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"
|
|
22
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"];
|
|
23
23
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
24
24
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
25
25
|
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
26
26
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
27
27
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
28
28
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
29
|
-
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-
|
|
29
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
30
30
|
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
31
31
|
readonly timeline: readonly ["usa-timeline"];
|
|
32
32
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
@@ -19,14 +19,14 @@ declare const animationBudget: () => number;
|
|
|
19
19
|
declare const COMPONENT_CATEGORIES: {
|
|
20
20
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
21
21
|
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
22
|
-
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"
|
|
22
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"];
|
|
23
23
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
24
24
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
25
25
|
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
26
26
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
27
27
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
28
28
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
29
|
-
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-
|
|
29
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
30
30
|
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
31
31
|
readonly timeline: readonly ["usa-timeline"];
|
|
32
32
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
package/dist/components/perf.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { o as onFrame, t as setStyleLoader, f as animationBudget, h as getMotionIntensity, g as configureComponents, j as setAnimationBudget, b as activeAnimations } from '../chunks/base-
|
|
2
|
-
export { s as schedulerStats } from '../chunks/base-
|
|
3
|
-
import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-
|
|
1
|
+
import { o as onFrame, t as setStyleLoader, f as animationBudget, h as getMotionIntensity, g as configureComponents, j as setAnimationBudget, b as activeAnimations } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
export { s as schedulerStats } from '../chunks/base-2-yYc93C.js';
|
|
3
|
+
import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-C04JP8g4.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* motionary/components/perf — performance toolkit (4.5).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { d as springEasing, c as createSpring, s as snapTo, a as rubberBand, p as projectInertia } from '../chunks/spring-
|
|
3
|
-
export { S as SPRING_PRESETS, l as linearEasing, r as resolveSpring, b as spring, e as springSamples, f as stepSpring, g as supportsLinearEasing } from '../chunks/spring-
|
|
1
|
+
import { u as defineElement, k as clamp } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
import { d as springEasing, c as createSpring, s as snapTo, a as rubberBand, p as projectInertia } from '../chunks/spring-BK8DiezC.js';
|
|
3
|
+
export { S as SPRING_PRESETS, l as linearEasing, r as resolveSpring, b as spring, e as springSamples, f as stepSpring, g as supportsLinearEasing } from '../chunks/spring-BK8DiezC.js';
|
|
4
4
|
|
|
5
5
|
var css$2 = "usa-spring{display:inline-block;transform-origin:50% 70%}usa-spring[block]{display:block}usa-spring[effect=\"drop\"]{transform-origin:50% 100%}usa-spring[data-state=\"hidden\"]{opacity:0}usa-spring[trigger=\"click\"],usa-spring[trigger=\"hover\"]{cursor:pointer;-webkit-tap-highlight-color:transparent}";
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var indexTags = require('../chunks/index-tags-
|
|
3
|
+
var indexTags = require('../chunks/index-tags-BTMwrfgV.cjs');
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* motionary/components/react — React wrappers for every `<usa-*>`
|
|
@@ -14,7 +14,7 @@ var indexTags = require('../chunks/index-tags-wv0R_vkO.cjs');
|
|
|
14
14
|
* import { createUsaComponents } from 'motionary/components/react';
|
|
15
15
|
* import { defineComponents } from 'motionary/components';
|
|
16
16
|
* defineComponents();
|
|
17
|
-
* const { UsaButton,
|
|
17
|
+
* const { UsaButton, UsaSwitch } = createUsaComponents(React);
|
|
18
18
|
* <UsaButton deform="squash" onUsaSubmit={(e) => e.detail.done(true)}><button>Pay</button></UsaButton>
|
|
19
19
|
* ```
|
|
20
20
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.cjs","sources":["../../src/components/frameworks/react.ts"],"sourcesContent":["/**\n * motionary/components/react — React wrappers for every `<usa-*>`\n * element (v2.9). React 19 handles custom elements natively; for React 18\n * (and nicer DX in both) `createUsaComponents(React)` returns typed wrapper\n * components that set **properties** (`checked`, `value`, `state`, …),\n * forward `ref`, and map `onUsaChange`-style props to `usa:change` events.\n *\n * ```tsx\n * import * as React from 'react';\n * import { createUsaComponents } from 'motionary/components/react';\n * import { defineComponents } from 'motionary/components';\n * defineComponents();\n * const { UsaButton,
|
|
1
|
+
{"version":3,"file":"react.cjs","sources":["../../src/components/frameworks/react.ts"],"sourcesContent":["/**\n * motionary/components/react — React wrappers for every `<usa-*>`\n * element (v2.9). React 19 handles custom elements natively; for React 18\n * (and nicer DX in both) `createUsaComponents(React)` returns typed wrapper\n * components that set **properties** (`checked`, `value`, `state`, …),\n * forward `ref`, and map `onUsaChange`-style props to `usa:change` events.\n *\n * ```tsx\n * import * as React from 'react';\n * import { createUsaComponents } from 'motionary/components/react';\n * import { defineComponents } from 'motionary/components';\n * defineComponents();\n * const { UsaButton, UsaSwitch } = createUsaComponents(React);\n * <UsaButton deform=\"squash\" onUsaSubmit={(e) => e.detail.done(true)}><button>Pay</button></UsaButton>\n * ```\n *\n * JSX types for the raw tags (`<usa-card effect=\"flip\">`) come from\n * `motionary/components/jsx` (see `UsaIntrinsicElements`).\n */\nimport { COMPONENT_CATEGORIES } from '../index-tags';\n\ntype AnyProps = Record<string, any>;\ninterface ReactLike {\n createElement: (type: any, props?: any, ...children: any[]) => any;\n forwardRef: (render: (props: any, ref: any) => any) => any;\n useRef: <T>(v: T) => { current: T };\n useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void;\n useLayoutEffect?: (fn: () => void | (() => void), deps?: unknown[]) => void;\n}\n\n/** `usa-auto-animate` → `UsaAutoAnimate` */\nexport const pascal = (tag: string): string => tag.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());\n/** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */\nexport function eventName(prop: string): string | null {\n const m = /^on([A-Z].*)$/.exec(prop);\n if (!m) return null;\n const kebab = m[1].replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n return kebab.startsWith('usa-') ? `usa:${kebab.slice(4)}` : kebab;\n}\n\n/** Props written as DOM properties (not attributes) when given non-string values. */\nconst PROPS = new Set(['checked', 'value', 'state', 'open', 'liked', 'count', 'loading', 'flipped', 'selected', 'index', 'indeterminate']);\n\n/** All `<usa-*>` tags shipped by the package. */\nexport const USA_TAGS: string[] = Object.values(COMPONENT_CATEGORIES).flat() as string[];\n\nexport function createUsaComponents(React: ReactLike): Record<string, any> {\n const useIso = React.useLayoutEffect || React.useEffect;\n const make = (tag: string) => {\n const C = React.forwardRef((props: AnyProps, ref: any) => {\n const inner = React.useRef<HTMLElement | null>(null);\n const attrs: AnyProps = {};\n const events: [string, any][] = [];\n const propsSet: [string, any][] = [];\n for (const [k, v] of Object.entries(props)) {\n if (k === 'children') continue;\n const ev = typeof v === 'function' ? eventName(k) : null;\n if (ev) events.push([ev, v]);\n else if (PROPS.has(k) && typeof v !== 'string') propsSet.push([k, v]);\n else if (k === 'className') attrs.class = v;\n else if (typeof v === 'boolean') {\n if (v) attrs[k] = '';\n } else attrs[k] = v;\n }\n useIso(() => {\n const el = inner.current as any;\n if (!el) return;\n for (const [k, v] of propsSet) el[k] = v;\n });\n useIso(() => {\n const el = inner.current;\n if (!el) return;\n events.forEach(([n, f]) => el.addEventListener(n, f));\n return () => events.forEach(([n, f]) => el.removeEventListener(n, f));\n });\n const setRef = (node: HTMLElement | null) => {\n inner.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n };\n return React.createElement(tag, { ...attrs, ref: setRef }, props.children);\n });\n (C as any).displayName = pascal(tag);\n return C;\n };\n return Object.fromEntries(USA_TAGS.map((t) => [pascal(t), make(t)]));\n}\n"],"names":["COMPONENT_CATEGORIES"],"mappings":"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"}
|
package/dist/components/react.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-
|
|
1
|
+
import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-C04JP8g4.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* motionary/components/react — React wrappers for every `<usa-*>`
|
|
@@ -12,7 +12,7 @@ import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-DucKMQr_.js';
|
|
|
12
12
|
* import { createUsaComponents } from 'motionary/components/react';
|
|
13
13
|
* import { defineComponents } from 'motionary/components';
|
|
14
14
|
* defineComponents();
|
|
15
|
-
* const { UsaButton,
|
|
15
|
+
* const { UsaButton, UsaSwitch } = createUsaComponents(React);
|
|
16
16
|
* <UsaButton deform="squash" onUsaSubmit={(e) => e.detail.done(true)}><button>Pay</button></UsaButton>
|
|
17
17
|
* ```
|
|
18
18
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sources":["../../src/components/frameworks/react.ts"],"sourcesContent":["/**\n * motionary/components/react — React wrappers for every `<usa-*>`\n * element (v2.9). React 19 handles custom elements natively; for React 18\n * (and nicer DX in both) `createUsaComponents(React)` returns typed wrapper\n * components that set **properties** (`checked`, `value`, `state`, …),\n * forward `ref`, and map `onUsaChange`-style props to `usa:change` events.\n *\n * ```tsx\n * import * as React from 'react';\n * import { createUsaComponents } from 'motionary/components/react';\n * import { defineComponents } from 'motionary/components';\n * defineComponents();\n * const { UsaButton,
|
|
1
|
+
{"version":3,"file":"react.js","sources":["../../src/components/frameworks/react.ts"],"sourcesContent":["/**\n * motionary/components/react — React wrappers for every `<usa-*>`\n * element (v2.9). React 19 handles custom elements natively; for React 18\n * (and nicer DX in both) `createUsaComponents(React)` returns typed wrapper\n * components that set **properties** (`checked`, `value`, `state`, …),\n * forward `ref`, and map `onUsaChange`-style props to `usa:change` events.\n *\n * ```tsx\n * import * as React from 'react';\n * import { createUsaComponents } from 'motionary/components/react';\n * import { defineComponents } from 'motionary/components';\n * defineComponents();\n * const { UsaButton, UsaSwitch } = createUsaComponents(React);\n * <UsaButton deform=\"squash\" onUsaSubmit={(e) => e.detail.done(true)}><button>Pay</button></UsaButton>\n * ```\n *\n * JSX types for the raw tags (`<usa-card effect=\"flip\">`) come from\n * `motionary/components/jsx` (see `UsaIntrinsicElements`).\n */\nimport { COMPONENT_CATEGORIES } from '../index-tags';\n\ntype AnyProps = Record<string, any>;\ninterface ReactLike {\n createElement: (type: any, props?: any, ...children: any[]) => any;\n forwardRef: (render: (props: any, ref: any) => any) => any;\n useRef: <T>(v: T) => { current: T };\n useEffect: (fn: () => void | (() => void), deps?: unknown[]) => void;\n useLayoutEffect?: (fn: () => void | (() => void), deps?: unknown[]) => void;\n}\n\n/** `usa-auto-animate` → `UsaAutoAnimate` */\nexport const pascal = (tag: string): string => tag.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());\n/** `onUsaChange` → `usa:change`, `onUsaDragEnd` → `usa:drag-end`; `onChange` → `change`. */\nexport function eventName(prop: string): string | null {\n const m = /^on([A-Z].*)$/.exec(prop);\n if (!m) return null;\n const kebab = m[1].replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n return kebab.startsWith('usa-') ? `usa:${kebab.slice(4)}` : kebab;\n}\n\n/** Props written as DOM properties (not attributes) when given non-string values. */\nconst PROPS = new Set(['checked', 'value', 'state', 'open', 'liked', 'count', 'loading', 'flipped', 'selected', 'index', 'indeterminate']);\n\n/** All `<usa-*>` tags shipped by the package. */\nexport const USA_TAGS: string[] = Object.values(COMPONENT_CATEGORIES).flat() as string[];\n\nexport function createUsaComponents(React: ReactLike): Record<string, any> {\n const useIso = React.useLayoutEffect || React.useEffect;\n const make = (tag: string) => {\n const C = React.forwardRef((props: AnyProps, ref: any) => {\n const inner = React.useRef<HTMLElement | null>(null);\n const attrs: AnyProps = {};\n const events: [string, any][] = [];\n const propsSet: [string, any][] = [];\n for (const [k, v] of Object.entries(props)) {\n if (k === 'children') continue;\n const ev = typeof v === 'function' ? eventName(k) : null;\n if (ev) events.push([ev, v]);\n else if (PROPS.has(k) && typeof v !== 'string') propsSet.push([k, v]);\n else if (k === 'className') attrs.class = v;\n else if (typeof v === 'boolean') {\n if (v) attrs[k] = '';\n } else attrs[k] = v;\n }\n useIso(() => {\n const el = inner.current as any;\n if (!el) return;\n for (const [k, v] of propsSet) el[k] = v;\n });\n useIso(() => {\n const el = inner.current;\n if (!el) return;\n events.forEach(([n, f]) => el.addEventListener(n, f));\n return () => events.forEach(([n, f]) => el.removeEventListener(n, f));\n });\n const setRef = (node: HTMLElement | null) => {\n inner.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n };\n return React.createElement(tag, { ...attrs, ref: setRef }, props.children);\n });\n (C as any).displayName = pascal(tag);\n return C;\n };\n return Object.fromEntries(USA_TAGS.map((t) => [pascal(t), make(t)]));\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { u as defineElement, z as EASE_OUT, l as caf, r as raf, k as clamp } from '../chunks/base-2-yYc93C.js';
|
|
2
2
|
|
|
3
3
|
/** Entrance effects shared by `<usa-reveal>` and `<usa-stagger>` (transform / opacity / filter only). */
|
|
4
4
|
const REVEAL_EFFECTS = [
|
|
@@ -31,14 +31,14 @@ require('./packs.cjs');
|
|
|
31
31
|
require('./fx.cjs');
|
|
32
32
|
require('../chunks/registry-DehBVRDV.cjs');
|
|
33
33
|
require('./a11y.cjs');
|
|
34
|
-
require('../chunks/index-tags-
|
|
34
|
+
require('../chunks/index-tags-BTMwrfgV.cjs');
|
|
35
35
|
require('./perf.cjs');
|
|
36
36
|
require('./bridge.cjs');
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
39
|
* motionary/components/solid — Solid integration (v3.8).
|
|
40
40
|
* Solid renders custom elements natively: set properties with `prop:` and
|
|
41
|
-
* listen with `on:` (`<usa-
|
|
41
|
+
* listen with `on:` (`<usa-switch prop:checked={on()} on:usa:change={…}>`).
|
|
42
42
|
* This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`
|
|
43
43
|
* directive for `use:usa={{ props, on }}`, and JSX types.
|
|
44
44
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"solid.cjs","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * motionary/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-
|
|
1
|
+
{"version":3,"file":"solid.cjs","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * motionary/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-switch prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'motionary/components/solid';\n * import type {} from 'motionary/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n let b: ReturnType<typeof bindUsa> | null = null;\n const run = () => {\n const v = accessor() || {};\n if (b) b.update(v);\n else b = bindUsa(el, v);\n };\n createRenderEffect(run);\n if (!b) run();\n const destroy = () => b?.destroy();\n onCleanup(destroy);\n return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":["bindUsa","createRenderEffect","onCleanup","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAGA,YAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACDC,0BAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClCC,iBAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}
|
|
@@ -393,26 +393,10 @@ interface UsaPressElement extends UsaElement {
|
|
|
393
393
|
readonly pressed: boolean;
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
/**
|
|
397
|
-
* `<usa-toggle>` — an accessible switch whose knob stretches while pressed
|
|
398
|
-
* and glides across (the Windows 11 / iOS toggle). `role="switch"`,
|
|
399
|
-
* keyboard (Space / Enter), and form-associated where `ElementInternals`
|
|
400
|
-
* exists (submits `value`, default `"on"`, under `name` when checked).
|
|
401
|
-
*
|
|
402
|
-
* Attributes: `checked`, `disabled`, `name`, `value`, `label`
|
|
403
|
-
* (accessible name if there is no `aria-label` / `<label>`). Events:
|
|
404
|
-
* `change` and `usa:change` (`detail.checked`). Reduced motion: no glide.
|
|
405
|
-
*/
|
|
406
|
-
interface UsaToggleElement extends UsaElement {
|
|
407
|
-
checked: boolean;
|
|
408
|
-
disabled: boolean;
|
|
409
|
-
toggle(force?: boolean): void;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
396
|
/**
|
|
413
397
|
* motionary/components/interaction — micro-interactions.
|
|
414
398
|
* `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,
|
|
415
|
-
* `<usa-press
|
|
399
|
+
* `<usa-press>`.
|
|
416
400
|
*/
|
|
417
401
|
|
|
418
402
|
declare global {
|
|
@@ -422,7 +406,6 @@ declare global {
|
|
|
422
406
|
'usa-tilt': UsaTiltElement;
|
|
423
407
|
'usa-spotlight': UsaSpotlightElement;
|
|
424
408
|
'usa-press': UsaPressElement;
|
|
425
|
-
'usa-toggle': UsaToggleElement;
|
|
426
409
|
}
|
|
427
410
|
}
|
|
428
411
|
|
|
@@ -1152,19 +1135,6 @@ interface UsaRatingElement extends UsaElement {
|
|
|
1152
1135
|
value: number;
|
|
1153
1136
|
}
|
|
1154
1137
|
|
|
1155
|
-
/**
|
|
1156
|
-
* `<usa-tooltip text="…">` — a tooltip for the element it wraps, shown on
|
|
1157
|
-
* hover (after `delay` ms, 300) and on keyboard focus, hidden on Esc / blur.
|
|
1158
|
-
* It springs in from its placement side and flips to stay on screen; the
|
|
1159
|
-
* trigger gets `aria-describedby`.
|
|
1160
|
-
* Attributes: `text`, `placement` (`top` default, `bottom`, `left`, `right`),
|
|
1161
|
-
* `delay`, `variant`. Reduced motion: fades only.
|
|
1162
|
-
*/
|
|
1163
|
-
interface UsaTooltipElement extends UsaElement {
|
|
1164
|
-
show(): void;
|
|
1165
|
-
hide(): void;
|
|
1166
|
-
}
|
|
1167
|
-
|
|
1168
1138
|
/**
|
|
1169
1139
|
* `<usa-popover>` — a click-to-open popover: the first element child is the
|
|
1170
1140
|
* trigger, `[data-popover]` is the content. Springs open from the trigger,
|
|
@@ -1203,7 +1173,7 @@ interface UsaAvatarStackElement extends UsaElement {
|
|
|
1203
1173
|
* motionary/components/ui — animated UI components + style variants (v2.6).
|
|
1204
1174
|
* `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
|
|
1205
1175
|
* `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
|
|
1206
|
-
* `<usa-
|
|
1176
|
+
* `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
|
|
1207
1177
|
* and `variant="minimal | neon | glass | brutalist | fluent | material"`
|
|
1208
1178
|
* design tokens (`setVariant()`, `VARIANTS`).
|
|
1209
1179
|
*/
|
|
@@ -1218,7 +1188,6 @@ declare global {
|
|
|
1218
1188
|
'usa-navbar': UsaNavbarElement;
|
|
1219
1189
|
'usa-slider': UsaSliderElement;
|
|
1220
1190
|
'usa-rating': UsaRatingElement;
|
|
1221
|
-
'usa-tooltip': UsaTooltipElement;
|
|
1222
1191
|
'usa-popover': UsaPopoverElement;
|
|
1223
1192
|
'usa-badge': UsaBadgeElement;
|
|
1224
1193
|
'usa-avatar-stack': UsaAvatarStackElement;
|
|
@@ -1638,14 +1607,14 @@ declare global {
|
|
|
1638
1607
|
declare const COMPONENT_CATEGORIES: {
|
|
1639
1608
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
1640
1609
|
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
1641
|
-
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"
|
|
1610
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"];
|
|
1642
1611
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
1643
1612
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
1644
1613
|
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
1645
1614
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
1646
1615
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
1647
1616
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
1648
|
-
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-
|
|
1617
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
1649
1618
|
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
1650
1619
|
readonly timeline: readonly ["usa-timeline"];
|
|
1651
1620
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
@@ -393,26 +393,10 @@ interface UsaPressElement extends UsaElement {
|
|
|
393
393
|
readonly pressed: boolean;
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
/**
|
|
397
|
-
* `<usa-toggle>` — an accessible switch whose knob stretches while pressed
|
|
398
|
-
* and glides across (the Windows 11 / iOS toggle). `role="switch"`,
|
|
399
|
-
* keyboard (Space / Enter), and form-associated where `ElementInternals`
|
|
400
|
-
* exists (submits `value`, default `"on"`, under `name` when checked).
|
|
401
|
-
*
|
|
402
|
-
* Attributes: `checked`, `disabled`, `name`, `value`, `label`
|
|
403
|
-
* (accessible name if there is no `aria-label` / `<label>`). Events:
|
|
404
|
-
* `change` and `usa:change` (`detail.checked`). Reduced motion: no glide.
|
|
405
|
-
*/
|
|
406
|
-
interface UsaToggleElement extends UsaElement {
|
|
407
|
-
checked: boolean;
|
|
408
|
-
disabled: boolean;
|
|
409
|
-
toggle(force?: boolean): void;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
396
|
/**
|
|
413
397
|
* motionary/components/interaction — micro-interactions.
|
|
414
398
|
* `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,
|
|
415
|
-
* `<usa-press
|
|
399
|
+
* `<usa-press>`.
|
|
416
400
|
*/
|
|
417
401
|
|
|
418
402
|
declare global {
|
|
@@ -422,7 +406,6 @@ declare global {
|
|
|
422
406
|
'usa-tilt': UsaTiltElement;
|
|
423
407
|
'usa-spotlight': UsaSpotlightElement;
|
|
424
408
|
'usa-press': UsaPressElement;
|
|
425
|
-
'usa-toggle': UsaToggleElement;
|
|
426
409
|
}
|
|
427
410
|
}
|
|
428
411
|
|
|
@@ -1152,19 +1135,6 @@ interface UsaRatingElement extends UsaElement {
|
|
|
1152
1135
|
value: number;
|
|
1153
1136
|
}
|
|
1154
1137
|
|
|
1155
|
-
/**
|
|
1156
|
-
* `<usa-tooltip text="…">` — a tooltip for the element it wraps, shown on
|
|
1157
|
-
* hover (after `delay` ms, 300) and on keyboard focus, hidden on Esc / blur.
|
|
1158
|
-
* It springs in from its placement side and flips to stay on screen; the
|
|
1159
|
-
* trigger gets `aria-describedby`.
|
|
1160
|
-
* Attributes: `text`, `placement` (`top` default, `bottom`, `left`, `right`),
|
|
1161
|
-
* `delay`, `variant`. Reduced motion: fades only.
|
|
1162
|
-
*/
|
|
1163
|
-
interface UsaTooltipElement extends UsaElement {
|
|
1164
|
-
show(): void;
|
|
1165
|
-
hide(): void;
|
|
1166
|
-
}
|
|
1167
|
-
|
|
1168
1138
|
/**
|
|
1169
1139
|
* `<usa-popover>` — a click-to-open popover: the first element child is the
|
|
1170
1140
|
* trigger, `[data-popover]` is the content. Springs open from the trigger,
|
|
@@ -1203,7 +1173,7 @@ interface UsaAvatarStackElement extends UsaElement {
|
|
|
1203
1173
|
* motionary/components/ui — animated UI components + style variants (v2.6).
|
|
1204
1174
|
* `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
|
|
1205
1175
|
* `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
|
|
1206
|
-
* `<usa-
|
|
1176
|
+
* `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
|
|
1207
1177
|
* and `variant="minimal | neon | glass | brutalist | fluent | material"`
|
|
1208
1178
|
* design tokens (`setVariant()`, `VARIANTS`).
|
|
1209
1179
|
*/
|
|
@@ -1218,7 +1188,6 @@ declare global {
|
|
|
1218
1188
|
'usa-navbar': UsaNavbarElement;
|
|
1219
1189
|
'usa-slider': UsaSliderElement;
|
|
1220
1190
|
'usa-rating': UsaRatingElement;
|
|
1221
|
-
'usa-tooltip': UsaTooltipElement;
|
|
1222
1191
|
'usa-popover': UsaPopoverElement;
|
|
1223
1192
|
'usa-badge': UsaBadgeElement;
|
|
1224
1193
|
'usa-avatar-stack': UsaAvatarStackElement;
|
|
@@ -1638,14 +1607,14 @@ declare global {
|
|
|
1638
1607
|
declare const COMPONENT_CATEGORIES: {
|
|
1639
1608
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
1640
1609
|
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
1641
|
-
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"
|
|
1610
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"];
|
|
1642
1611
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
1643
1612
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
1644
1613
|
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
1645
1614
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
1646
1615
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
1647
1616
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
1648
|
-
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-
|
|
1617
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
1649
1618
|
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
1650
1619
|
readonly timeline: readonly ["usa-timeline"];
|
|
1651
1620
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
package/dist/components/solid.js
CHANGED
|
@@ -3,41 +3,41 @@ import { defineComponents } from '../components.js';
|
|
|
3
3
|
import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
|
|
4
4
|
export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
5
5
|
import './reveal.js';
|
|
6
|
-
import '../chunks/base-
|
|
6
|
+
import '../chunks/base-2-yYc93C.js';
|
|
7
7
|
import './text.js';
|
|
8
|
-
import '../chunks/core-
|
|
8
|
+
import '../chunks/core-D5rU0CV6.js';
|
|
9
9
|
import './tokens.js';
|
|
10
10
|
import './interaction.js';
|
|
11
11
|
import './feedback.js';
|
|
12
12
|
import './background.js';
|
|
13
|
-
import '../chunks/variants-
|
|
13
|
+
import '../chunks/variants-BQ6bhzn4.js';
|
|
14
14
|
import './transitions.js';
|
|
15
15
|
import './physics.js';
|
|
16
|
-
import '../chunks/spring-
|
|
16
|
+
import '../chunks/spring-BK8DiezC.js';
|
|
17
17
|
import './cards.js';
|
|
18
18
|
import './click.js';
|
|
19
|
-
import '../chunks/fx-
|
|
19
|
+
import '../chunks/fx-CMxWNwH8.js';
|
|
20
20
|
import './ui.js';
|
|
21
21
|
import './page.js';
|
|
22
22
|
import './timeline.js';
|
|
23
23
|
import './gesture.js';
|
|
24
|
-
import '../chunks/core-
|
|
24
|
+
import '../chunks/core-DuO-AVXL.js';
|
|
25
25
|
import './svg.js';
|
|
26
26
|
import './webgl.js';
|
|
27
27
|
import './depth.js';
|
|
28
28
|
import './layout.js';
|
|
29
29
|
import './packs.js';
|
|
30
30
|
import './fx.js';
|
|
31
|
-
import '../chunks/registry-
|
|
31
|
+
import '../chunks/registry-CyKExAmE.js';
|
|
32
32
|
import './a11y.js';
|
|
33
|
-
import '../chunks/index-tags-
|
|
33
|
+
import '../chunks/index-tags-C04JP8g4.js';
|
|
34
34
|
import './perf.js';
|
|
35
35
|
import './bridge.js';
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* motionary/components/solid — Solid integration (v3.8).
|
|
39
39
|
* Solid renders custom elements natively: set properties with `prop:` and
|
|
40
|
-
* listen with `on:` (`<usa-
|
|
40
|
+
* listen with `on:` (`<usa-switch prop:checked={on()} on:usa:change={…}>`).
|
|
41
41
|
* This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`
|
|
42
42
|
* directive for `use:usa={{ props, on }}`, and JSX types.
|
|
43
43
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"solid.js","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * motionary/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-
|
|
1
|
+
{"version":3,"file":"solid.js","sources":["../../src/components/frameworks/solid.ts"],"sourcesContent":["/**\n * motionary/components/solid — Solid integration (v3.8).\n * Solid renders custom elements natively: set properties with `prop:` and\n * listen with `on:` (`<usa-switch prop:checked={on()} on:usa:change={…}>`).\n * This entry adds `defineUsa()` (client only, SolidStart-safe), a `usa`\n * directive for `use:usa={{ props, on }}`, and JSX types.\n *\n * ```tsx\n * import { defineUsa, usa } from 'motionary/components/solid';\n * import type {} from 'motionary/components/solid'; // JSX types\n * onMount(() => defineUsa());\n * false && usa; // keep the directive import (Solid convention)\n * <usa-card use:usa={{ on: { flip: (e) => console.log(e.detail) } }} effect=\"flip\">…</usa-card>\n * ```\n */\nimport { createRenderEffect, onCleanup } from 'solid-js';\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\nimport type { UsaIntrinsicElements } from './jsx';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/**\n * Solid directive (`use:usa`). Solid calls it with the element and an\n * accessor; since 4.0.1 the binding is tracked with `createRenderEffect`, so\n * signals read inside `{{ props, on }}` update the element automatically and\n * the listeners are removed on cleanup. `refresh()` is kept for code that\n * calls the directive outside a reactive owner.\n */\nexport function usa(el: HTMLElement, accessor: () => UsaBinding | undefined): { refresh(): void; destroy(): void } {\n let b: ReturnType<typeof bindUsa> | null = null;\n const run = () => {\n const v = accessor() || {};\n if (b) b.update(v);\n else b = bindUsa(el, v);\n };\n createRenderEffect(run);\n if (!b) run();\n const destroy = () => b?.destroy();\n onCleanup(destroy);\n return { refresh: run, destroy };\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` in SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** JSX intrinsic elements for Solid (same attribute types as the React/Preact ones). */\nexport type SolidUsaIntrinsicElements = UsaIntrinsicElements;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AASH;;;;;;AAMG;AACG,SAAU,GAAG,CAAC,EAAe,EAAE,QAAsC,EAAA;IACzE,IAAI,CAAC,GAAsC,IAAI;IAC/C,MAAM,GAAG,GAAG,MAAK;AACf,QAAA,MAAM,CAAC,GAAG,QAAQ,EAAE,IAAI,EAAE;AAC1B,QAAA,IAAI,CAAC;AAAE,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;AACb,YAAA,CAAC,GAAG,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AACzB,IAAA,CAAC;IACD,kBAAkB,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,CAAC;AAAE,QAAA,GAAG,EAAE;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,OAAO,EAAE;IAClC,SAAS,CAAC,OAAO,CAAC;AAClB,IAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;AAClC;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}
|
|
@@ -30,7 +30,7 @@ require('./packs.cjs');
|
|
|
30
30
|
require('./fx.cjs');
|
|
31
31
|
require('../chunks/registry-DehBVRDV.cjs');
|
|
32
32
|
require('./a11y.cjs');
|
|
33
|
-
require('../chunks/index-tags-
|
|
33
|
+
require('../chunks/index-tags-BTMwrfgV.cjs');
|
|
34
34
|
require('./perf.cjs');
|
|
35
35
|
require('./bridge.cjs');
|
|
36
36
|
|
|
@@ -47,7 +47,7 @@ require('./bridge.cjs');
|
|
|
47
47
|
* onMount(() => defineUsa(['click', 'ui']));
|
|
48
48
|
* let on = false;
|
|
49
49
|
* </script>
|
|
50
|
-
* <usa-
|
|
50
|
+
* <usa-switch use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-switch>
|
|
51
51
|
* ```
|
|
52
52
|
* Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.
|
|
53
53
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svelte.cjs","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * motionary/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n * import { usa, defineUsa } from 'motionary/components/svelte';\n * import { onMount } from 'svelte';\n * onMount(() => defineUsa(['click', 'ui']));\n * let on = false;\n * </script>\n * <usa-
|
|
1
|
+
{"version":3,"file":"svelte.cjs","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * motionary/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n * import { usa, defineUsa } from 'motionary/components/svelte';\n * import { onMount } from 'svelte';\n * onMount(() => defineUsa(['click', 'ui']));\n * let on = false;\n * </script>\n * <usa-switch use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-switch>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":["bindUsa","defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAOA,YAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEC,2BAAgB,CAAC,UAAU,CAAC;AACjE;;;;;;;"}
|