@yewdiel21/motion-kit 0.9.1 → 0.10.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/README.md +93 -83
- package/dist/auto/index.d.ts +22 -3
- package/dist/auto/index.js +41 -3
- package/dist/auto/index.js.map +1 -1
- package/dist/{chunk-BFC27F2G.js → chunk-IKQ5FODN.js} +2 -2
- package/dist/{chunk-JQMJQSXD.js → chunk-TFNRIZHU.js} +1614 -11
- package/dist/chunk-TFNRIZHU.js.map +1 -0
- package/dist/{chunk-XDWBVFHQ.js → chunk-XAKC2QY7.js} +1202 -3
- package/dist/chunk-XAKC2QY7.js.map +1 -0
- package/dist/css/components/calendar.css +159 -0
- package/dist/css/components/hover-card.css +14 -0
- package/dist/css/components/input-otp.css +10 -0
- package/dist/css/components/pagination.css +11 -0
- package/dist/css/components/quantity.css +16 -0
- package/dist/css/components/slot-picker.css +126 -0
- package/dist/css/components/studio-dock.css +35 -0
- package/dist/css/components/trailer.css +37 -0
- package/dist/css/controls.css +65 -0
- package/dist/elements/index.d.ts +72 -4
- package/dist/elements/index.js +170 -4
- package/dist/elements/index.js.map +1 -1
- package/dist/index.css +1017 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.js +45 -3
- package/dist/index.js.map +1 -1
- package/dist/react/index.d.ts +105 -6
- package/dist/react/index.js +350 -3
- package/dist/react/index.js.map +1 -1
- package/dist/{reduced-B98f8LPs.d.ts → reduced-BmBzKH94.d.ts} +199 -2
- package/dist/{reveal-C0hCDcB_.d.ts → reveal-jsX-uwUz.d.ts} +211 -1
- package/dist/{store-pHiUvxP8.d.ts → store-DYb3tTsZ.d.ts} +1 -1
- package/package.json +1 -1
- package/registry.json +178 -104
- package/skills/motion-kit/SKILL.md +209 -189
- package/src/auto/auto-init.ts +38 -0
- package/src/components/calendar/README.md +82 -0
- package/src/components/calendar/calendar.css +158 -0
- package/src/components/calendar/element.ts +27 -0
- package/src/components/calendar/engine.ts +412 -0
- package/src/components/calendar/react.tsx +69 -0
- package/src/components/hover-card/README.md +16 -0
- package/src/components/hover-card/element.ts +8 -0
- package/src/components/hover-card/engine.ts +69 -0
- package/src/components/hover-card/hover-card.css +13 -0
- package/src/components/hover-card/react.tsx +19 -0
- package/src/components/input-otp/README.md +18 -0
- package/src/components/input-otp/element.ts +14 -0
- package/src/components/input-otp/engine.ts +106 -0
- package/src/components/input-otp/input-otp.css +9 -0
- package/src/components/input-otp/react.tsx +21 -0
- package/src/components/pagination/README.md +17 -0
- package/src/components/pagination/element.ts +14 -0
- package/src/components/pagination/engine.ts +102 -0
- package/src/components/pagination/pagination.css +10 -0
- package/src/components/pagination/react.tsx +22 -0
- package/src/components/quantity/README.md +20 -0
- package/src/components/quantity/element.ts +14 -0
- package/src/components/quantity/engine.ts +85 -0
- package/src/components/quantity/quantity.css +15 -0
- package/src/components/quantity/react.tsx +21 -0
- package/src/components/slot-picker/README.md +68 -0
- package/src/components/slot-picker/element.ts +27 -0
- package/src/components/slot-picker/engine.ts +412 -0
- package/src/components/slot-picker/react.tsx +76 -0
- package/src/components/slot-picker/slot-picker.css +125 -0
- package/src/components/studio-dock/README.md +44 -0
- package/src/components/studio-dock/element.ts +11 -0
- package/src/components/studio-dock/engine.ts +212 -0
- package/src/components/studio-dock/react.tsx +23 -0
- package/src/components/studio-dock/studio-dock.css +34 -0
- package/src/components/trailer/README.md +28 -0
- package/src/components/trailer/element.ts +13 -0
- package/src/components/trailer/engine.ts +189 -0
- package/src/components/trailer/react.tsx +16 -0
- package/src/components/trailer/trailer.css +36 -0
- package/src/core/dates.ts +98 -0
- package/src/css/controls/README.md +14 -0
- package/src/css/controls/status.css +63 -0
- package/src/elements/index.ts +24 -0
- package/src/index.ts +25 -0
- package/src/react/index.ts +21 -0
- package/src/react/use-action-button.ts +6 -0
- package/src/react/use-editorial-reveal.ts +7 -0
- package/src/react/use-film-hero.ts +6 -0
- package/src/react/use-font-cycle.ts +7 -0
- package/src/react/use-image-zoom.ts +5 -0
- package/src/react/use-joined-cta.ts +5 -0
- package/src/react/use-local-clock.ts +5 -0
- package/src/react/use-scroll-dock.ts +5 -0
- package/src/react/use-sticker.ts +5 -0
- package/src/react/use-studio-dock.ts +8 -0
- package/src/react/use-thumbnail-nav.ts +7 -0
- package/src/react/use-trailer.ts +6 -0
- package/src/react/use-weight-hover.ts +5 -0
- package/src/recipes/action-button/README.md +31 -0
- package/src/recipes/action-button/action-button.css +113 -0
- package/src/recipes/action-button/create-action-button.ts +56 -0
- package/src/recipes/editorial-reveal/README.md +35 -0
- package/src/recipes/editorial-reveal/create-editorial-reveal.ts +91 -0
- package/src/recipes/editorial-reveal/editorial-reveal.css +17 -0
- package/src/recipes/film-hero/README.md +23 -0
- package/src/recipes/film-hero/create-film-hero.ts +65 -0
- package/src/recipes/film-hero/film-hero.css +29 -0
- package/src/recipes/font-cycle/README.md +11 -0
- package/src/recipes/font-cycle/create-font-cycle.ts +126 -0
- package/src/recipes/font-cycle/font-cycle.css +36 -0
- package/src/recipes/image-zoom/README.md +16 -0
- package/src/recipes/image-zoom/create-image-zoom.ts +27 -0
- package/src/recipes/image-zoom/image-zoom.css +7 -0
- package/src/recipes/joined-cta/README.md +13 -0
- package/src/recipes/joined-cta/create-joined-cta.ts +22 -0
- package/src/recipes/joined-cta/joined-cta.css +17 -0
- package/src/recipes/local-clock/README.md +31 -0
- package/src/recipes/local-clock/create-local-clock.ts +61 -0
- package/src/recipes/scroll-dock/README.md +46 -0
- package/src/recipes/scroll-dock/create-scroll-dock.ts +72 -0
- package/src/recipes/scroll-dock/scroll-dock.css +70 -0
- package/src/recipes/sticker/README.md +59 -0
- package/src/recipes/sticker/create-sticker.ts +490 -0
- package/src/recipes/sticker/sticker.css +112 -0
- package/src/recipes/thumbnail-nav/README.md +16 -0
- package/src/recipes/thumbnail-nav/create-thumbnail-nav.ts +165 -0
- package/src/recipes/thumbnail-nav/thumbnail-nav.css +108 -0
- package/src/recipes/weight-hover/README.md +37 -0
- package/src/recipes/weight-hover/create-weight-hover.ts +136 -0
- package/src/recipes/weight-hover/weight-hover.css +7 -0
- package/dist/chunk-JQMJQSXD.js.map +0 -1
- package/dist/chunk-XDWBVFHQ.js.map +0 -1
- /package/dist/{chunk-BFC27F2G.js.map → chunk-IKQ5FODN.js.map} +0 -0
package/README.md
CHANGED
|
@@ -1,83 +1,93 @@
|
|
|
1
|
-
# @yewdiel21/motion-kit
|
|
2
|
-
|
|
3
|
-
Motion toolkit for vanilla JavaScript, Astro and React/Next.js. GSAP recipes, accessible UI components, 19 Material 3 themes, CSS controls and optional WebGL effects.
|
|
4
|
-
|
|
5
|
-
[Live playground](https://motion-kit-playground.vercel.app) — vanilla and React examples for every component.
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
npm install @yewdiel21/motion-kit gsap
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
For React components, install React 18 or newer. The theme generator additionally requires `@material/material-color-utilities@^0.3.0`.
|
|
14
|
-
|
|
15
|
-
## Vanilla / Astro
|
|
16
|
-
|
|
17
|
-
```ts
|
|
18
|
-
import '@yewdiel21/motion-kit/css';
|
|
19
|
-
import { autoInit } from '@yewdiel21/motion-kit/auto';
|
|
20
|
-
|
|
21
|
-
const destroy = autoInit(document);
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
```html
|
|
25
|
-
<div class="mk-segmented" data-mk="tabs">
|
|
26
|
-
<button data-mk-tab aria-selected="true">Today</button>
|
|
27
|
-
<button data-mk-tab>Week</button>
|
|
28
|
-
<span data-mk-indicator></span>
|
|
29
|
-
</div>
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
Call `destroy()` before replacing the DOM. Add `MK_HEAD_SCRIPT` from `/auto` inline to `<head>` when using entrance recipes, and `defineElements()` from `/elements` to register the `mk-*` custom elements.
|
|
33
|
-
|
|
34
|
-
## React / Next.js
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
'use client';
|
|
38
|
-
|
|
39
|
-
import '@yewdiel21/motion-kit/css';
|
|
40
|
-
import { useRef } from 'react';
|
|
41
|
-
import { useTabs } from '@yewdiel21/motion-kit/react';
|
|
42
|
-
|
|
43
|
-
export function Tabs() {
|
|
44
|
-
const ref = useRef<HTMLDivElement>(null);
|
|
45
|
-
useTabs(ref);
|
|
46
|
-
return (
|
|
47
|
-
<div ref={ref} className="mk-segmented">
|
|
48
|
-
<button data-mk-tab aria-selected="true">Today</button>
|
|
49
|
-
<button data-mk-tab>Week</button>
|
|
50
|
-
<span data-mk-indicator="" />
|
|
51
|
-
</div>
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
Hooks create the engine after mount and destroy it on unmount. Import themes separately from `/css/themes`, fonts from `/css/fonts`, and theme utilities from `/theme`.
|
|
57
|
-
|
|
58
|
-
## Copy source with the CLI
|
|
59
|
-
|
|
60
|
-
```sh
|
|
61
|
-
npx @yewdiel21/motion-kit list
|
|
62
|
-
npx @yewdiel21/motion-kit add tabs island drag-ruler --react --elements --dir src/motion-kit
|
|
63
|
-
npx @yewdiel21/motion-kit skill
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
The CLI copies the selected components, their dependencies and CSS. Each copied folder includes its README. It does not overwrite files without `--force`.
|
|
67
|
-
|
|
68
|
-
## Entry points
|
|
69
|
-
|
|
70
|
-
| Import | Contents |
|
|
71
|
-
|---|---|
|
|
72
|
-
| `@yewdiel21/motion-kit` | Factories, motion functions, easings and timing constants |
|
|
73
|
-
| `/auto` | Declarative `data-mk` initialization and head script |
|
|
74
|
-
| `/react` | Hooks and React components |
|
|
75
|
-
| `/elements` | Custom elements |
|
|
76
|
-
| `/theme` | Theme runtime and head script |
|
|
77
|
-
| `/theme/generate` | Optional Material 3 palette generator |
|
|
78
|
-
| `/gl` | Particle hero, liquid blend, matcap, shader grain and blur |
|
|
79
|
-
| `/css`, `/css/themes`, `/css/fonts` | Styles, theme palettes and font imports |
|
|
80
|
-
|
|
81
|
-
WebGL is optional. Keep accessible text and images in HTML; effects provide a fallback when graphics support is unavailable. Motion recipes respect reduced-motion preferences and return an idempotent `destroy()`.
|
|
82
|
-
|
|
83
|
-
Full component documentation and the playground source are in the [repository](https://github.com/YewdielMartinez/motion-kit). Each component README documents its markup, options and controls. License notices: `NOTICE`. License: `UNLICENSED`; all rights reserved.
|
|
1
|
+
# @yewdiel21/motion-kit
|
|
2
|
+
|
|
3
|
+
Motion toolkit for vanilla JavaScript, Astro and React/Next.js. GSAP recipes, accessible UI components, 19 Material 3 themes, CSS controls and optional WebGL effects.
|
|
4
|
+
|
|
5
|
+
[Live playground](https://motion-kit-playground.vercel.app) — vanilla and React examples for every component.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @yewdiel21/motion-kit gsap
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For React components, install React 18 or newer. The theme generator additionally requires `@material/material-color-utilities@^0.3.0`.
|
|
14
|
+
|
|
15
|
+
## Vanilla / Astro
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import '@yewdiel21/motion-kit/css';
|
|
19
|
+
import { autoInit } from '@yewdiel21/motion-kit/auto';
|
|
20
|
+
|
|
21
|
+
const destroy = autoInit(document);
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<div class="mk-segmented" data-mk="tabs">
|
|
26
|
+
<button data-mk-tab aria-selected="true">Today</button>
|
|
27
|
+
<button data-mk-tab>Week</button>
|
|
28
|
+
<span data-mk-indicator></span>
|
|
29
|
+
</div>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Call `destroy()` before replacing the DOM. Add `MK_HEAD_SCRIPT` from `/auto` inline to `<head>` when using entrance recipes, and `defineElements()` from `/elements` to register the `mk-*` custom elements.
|
|
33
|
+
|
|
34
|
+
## React / Next.js
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
'use client';
|
|
38
|
+
|
|
39
|
+
import '@yewdiel21/motion-kit/css';
|
|
40
|
+
import { useRef } from 'react';
|
|
41
|
+
import { useTabs } from '@yewdiel21/motion-kit/react';
|
|
42
|
+
|
|
43
|
+
export function Tabs() {
|
|
44
|
+
const ref = useRef<HTMLDivElement>(null);
|
|
45
|
+
useTabs(ref);
|
|
46
|
+
return (
|
|
47
|
+
<div ref={ref} className="mk-segmented">
|
|
48
|
+
<button data-mk-tab aria-selected="true">Today</button>
|
|
49
|
+
<button data-mk-tab>Week</button>
|
|
50
|
+
<span data-mk-indicator="" />
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Hooks create the engine after mount and destroy it on unmount. Import themes separately from `/css/themes`, fonts from `/css/fonts`, and theme utilities from `/theme`.
|
|
57
|
+
|
|
58
|
+
## Copy source with the CLI
|
|
59
|
+
|
|
60
|
+
```sh
|
|
61
|
+
npx @yewdiel21/motion-kit list
|
|
62
|
+
npx @yewdiel21/motion-kit add tabs island drag-ruler --react --elements --dir src/motion-kit
|
|
63
|
+
npx @yewdiel21/motion-kit skill
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
The CLI copies the selected components, their dependencies and CSS. Each copied folder includes its README. It does not overwrite files without `--force`.
|
|
67
|
+
|
|
68
|
+
## Entry points
|
|
69
|
+
|
|
70
|
+
| Import | Contents |
|
|
71
|
+
|---|---|
|
|
72
|
+
| `@yewdiel21/motion-kit` | Factories, motion functions, easings and timing constants |
|
|
73
|
+
| `/auto` | Declarative `data-mk` initialization and head script |
|
|
74
|
+
| `/react` | Hooks and React components |
|
|
75
|
+
| `/elements` | Custom elements |
|
|
76
|
+
| `/theme` | Theme runtime and head script |
|
|
77
|
+
| `/theme/generate` | Optional Material 3 palette generator |
|
|
78
|
+
| `/gl` | Particle hero, liquid blend, matcap, shader grain and blur |
|
|
79
|
+
| `/css`, `/css/themes`, `/css/fonts` | Styles, theme palettes and font imports |
|
|
80
|
+
|
|
81
|
+
WebGL is optional. Keep accessible text and images in HTML; effects provide a fallback when graphics support is unavailable. Motion recipes respect reduced-motion preferences and return an idempotent `destroy()`.
|
|
82
|
+
|
|
83
|
+
Full component documentation and the playground source are in the [repository](https://github.com/YewdielMartinez/motion-kit). Each component README documents its markup, options and controls. License notices: `NOTICE`. License: `UNLICENSED`; all rights reserved.
|
|
84
|
+
|
|
85
|
+
## New in 0.10.0
|
|
86
|
+
|
|
87
|
+
Nineteen entries, each with vanilla and React demos in the playground:
|
|
88
|
+
|
|
89
|
+
- **Components** (factory, React and custom element): `quantity`, `pagination`, `hover-card`, `input-otp`, `studio-dock`, `trailer`, `calendar` (month and week views with events, ARIA grid) and `slot-picker` (day and time slots for bookings; accepts lists, maps or promises and submits through a hidden input).
|
|
90
|
+
- **Recipes** (factory, hook and `autoInit()`): `joined-cta`, `image-zoom`, `font-cycle`, `thumbnail-nav`, `action-button`, `film-hero`, `editorial-reveal`, `weight-hover` (requires a variable font), `sticker`, `scroll-dock` and `local-clock`.
|
|
91
|
+
- **CSS control**: `.mk-status`, an availability pill with a pulsing dot.
|
|
92
|
+
|
|
93
|
+
All new entries return an idempotent `destroy()`, support the keyboard and respect reduced motion. No original assets from the reference sites are included.
|
package/dist/auto/index.d.ts
CHANGED
|
@@ -1,10 +1,29 @@
|
|
|
1
|
-
import { c as createSpringCards, C as CurvedCarouselInstance,
|
|
2
|
-
export {
|
|
1
|
+
import { c as createJoinedCta, a as createImageZoom, b as createFontCycle, d as createThumbnailNav, e as createActionButton, f as createFilmHero, g as createEditorialReveal, h as createWeightHover, i as createSticker, j as createScrollDock, k as createLocalClock, l as createSpringCards, C as CurvedCarouselInstance, m as createPile, n as createWords, o as createFlow, p as createPop, q as createFitText, r as createStretchFooter, s as createRadialMenu, t as createTabs, u as createCounter, v as createReveal, w as createReflow, x as createSlotText, y as createSortable, z as createMaskText, A as createCascade, B as createTextRoll, D as createLetters, E as createParallax, F as createDepthGrid, G as createFrameZoom, H as createContrast, I as createMarquee, J as createCardDock, K as createSnapStrip, L as createFillText, T as TicketMenuOptions, M as TicketMenuInstance, N as createInfiniteReel, O as createRepelBento, P as createRotator, Q as createDragRuler, R as createDockPill } from '../reduced-BmBzKH94.js';
|
|
2
|
+
export { S as MK_HEAD_SCRIPT } from '../reduced-BmBzKH94.js';
|
|
3
|
+
import { c as createStudioDock, a as createTrailer, b as createQuantity, d as createPagination, e as createHoverCard, f as createInputOtp, g as createCalendar, h as createSlotPicker } from '../reveal-jsX-uwUz.js';
|
|
3
4
|
import { I as Instance } from '../types-BkS_raL8.js';
|
|
4
|
-
import '../reveal-C0hCDcB_.js';
|
|
5
5
|
import 'gsap/SplitText';
|
|
6
6
|
|
|
7
7
|
declare const factories: {
|
|
8
|
+
'joined-cta': typeof createJoinedCta;
|
|
9
|
+
'image-zoom': typeof createImageZoom;
|
|
10
|
+
'font-cycle': typeof createFontCycle;
|
|
11
|
+
'thumbnail-nav': typeof createThumbnailNav;
|
|
12
|
+
'action-button': typeof createActionButton;
|
|
13
|
+
'film-hero': typeof createFilmHero;
|
|
14
|
+
'editorial-reveal': typeof createEditorialReveal;
|
|
15
|
+
'studio-dock': typeof createStudioDock;
|
|
16
|
+
trailer: typeof createTrailer;
|
|
17
|
+
quantity: typeof createQuantity;
|
|
18
|
+
pagination: typeof createPagination;
|
|
19
|
+
'hover-card': typeof createHoverCard;
|
|
20
|
+
'input-otp': typeof createInputOtp;
|
|
21
|
+
calendar: typeof createCalendar;
|
|
22
|
+
'slot-picker': typeof createSlotPicker;
|
|
23
|
+
'weight-hover': typeof createWeightHover;
|
|
24
|
+
sticker: typeof createSticker;
|
|
25
|
+
'scroll-dock': typeof createScrollDock;
|
|
26
|
+
'local-clock': typeof createLocalClock;
|
|
8
27
|
'spring-cards': typeof createSpringCards;
|
|
9
28
|
'curved-carousel': (el: HTMLElement, options: Record<string, unknown>) => CurvedCarouselInstance;
|
|
10
29
|
pile: typeof createPile;
|
package/dist/auto/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
+
createActionButton,
|
|
2
3
|
createCardDock,
|
|
3
4
|
createCascade,
|
|
4
5
|
createContrast,
|
|
@@ -8,12 +9,18 @@ import {
|
|
|
8
9
|
createDetails,
|
|
9
10
|
createDockPill,
|
|
10
11
|
createDragRuler,
|
|
12
|
+
createEditorialReveal,
|
|
11
13
|
createFillText,
|
|
14
|
+
createFilmHero,
|
|
12
15
|
createFitText,
|
|
13
16
|
createFlow,
|
|
17
|
+
createFontCycle,
|
|
14
18
|
createFrameZoom,
|
|
19
|
+
createImageZoom,
|
|
15
20
|
createInfiniteReel,
|
|
21
|
+
createJoinedCta,
|
|
16
22
|
createLetters,
|
|
23
|
+
createLocalClock,
|
|
17
24
|
createMarquee,
|
|
18
25
|
createMaskText,
|
|
19
26
|
createParallax,
|
|
@@ -24,19 +31,31 @@ import {
|
|
|
24
31
|
createRepelBento,
|
|
25
32
|
createReveal,
|
|
26
33
|
createRotator,
|
|
34
|
+
createScrollDock,
|
|
27
35
|
createSlotText,
|
|
28
36
|
createSnapStrip,
|
|
29
37
|
createSortable,
|
|
30
38
|
createSpringCards,
|
|
39
|
+
createSticker,
|
|
31
40
|
createStretchFooter,
|
|
32
41
|
createTabs,
|
|
33
42
|
createTextRoll,
|
|
43
|
+
createThumbnailNav,
|
|
34
44
|
createTicketMenu,
|
|
45
|
+
createWeightHover,
|
|
35
46
|
createWords
|
|
36
|
-
} from "../chunk-
|
|
47
|
+
} from "../chunk-XAKC2QY7.js";
|
|
37
48
|
import {
|
|
38
|
-
ScrollTrigger
|
|
39
|
-
|
|
49
|
+
ScrollTrigger,
|
|
50
|
+
createCalendar,
|
|
51
|
+
createHoverCard,
|
|
52
|
+
createInputOtp,
|
|
53
|
+
createPagination,
|
|
54
|
+
createQuantity,
|
|
55
|
+
createSlotPicker,
|
|
56
|
+
createStudioDock,
|
|
57
|
+
createTrailer
|
|
58
|
+
} from "../chunk-TFNRIZHU.js";
|
|
40
59
|
import "../chunk-34EZ7DF4.js";
|
|
41
60
|
import {
|
|
42
61
|
MK_HEAD_SCRIPT
|
|
@@ -110,6 +129,25 @@ function parseOptions(el) {
|
|
|
110
129
|
|
|
111
130
|
// src/auto/auto-init.ts
|
|
112
131
|
var factories = {
|
|
132
|
+
"joined-cta": createJoinedCta,
|
|
133
|
+
"image-zoom": createImageZoom,
|
|
134
|
+
"font-cycle": createFontCycle,
|
|
135
|
+
"thumbnail-nav": createThumbnailNav,
|
|
136
|
+
"action-button": createActionButton,
|
|
137
|
+
"film-hero": createFilmHero,
|
|
138
|
+
"editorial-reveal": createEditorialReveal,
|
|
139
|
+
"studio-dock": createStudioDock,
|
|
140
|
+
"trailer": createTrailer,
|
|
141
|
+
"quantity": createQuantity,
|
|
142
|
+
"pagination": createPagination,
|
|
143
|
+
"hover-card": createHoverCard,
|
|
144
|
+
"input-otp": createInputOtp,
|
|
145
|
+
"calendar": createCalendar,
|
|
146
|
+
"slot-picker": createSlotPicker,
|
|
147
|
+
"weight-hover": createWeightHover,
|
|
148
|
+
"sticker": createSticker,
|
|
149
|
+
"scroll-dock": createScrollDock,
|
|
150
|
+
"local-clock": createLocalClock,
|
|
113
151
|
"spring-cards": createSpringCards,
|
|
114
152
|
"curved-carousel": (el, options) => createCurvedCarousel(el, {
|
|
115
153
|
...options,
|
package/dist/auto/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/auto/parse-options.ts","../../src/auto/auto-init.ts"],"sourcesContent":["/** Attributes the recipes write themselves or use for children; never options. */\nconst RESERVED = new Set([\n '',\n 'ready',\n 'inview',\n 'carousel',\n 'open',\n 'card',\n 'slide',\n 'toggle',\n 'item',\n 'phantom',\n 'footerTitle',\n 'tab',\n 'indicator',\n 'chevron',\n 'text',\n 'role',\n 'motion',\n 'veil',\n 'swatch',\n 'part',\n 'sorting',\n 'sortableGroup',\n 'sortableLocked',\n 'cascade',\n 'on',\n 'tone',\n 'cursorZone',\n 'hidden',\n 'pressed',\n 'parallaxTarget',\n 'spread',\n 'expanded',\n 'settled',\n 'mode',\n 'active',\n 'islandToggle',\n 'islandPanel',\n 'islandItem',\n 'islandClose',\n 'reelTrack',\n 'reelCopy',\n 'dragging',\n 'dockItem',\n]);\n\nconst coerce = (value: string): unknown => {\n if (value === '' || value === 'true') return true;\n if (value === 'false') return false;\n if (/^-?\\d*\\.?\\d+$/.test(value)) return Number(value);\n return value;\n};\n\n/**\n * `data-mk-<option>` attributes → options object.\n * `data-mk-throw-boost=\"2.5\"` → `{ throwBoost: 2.5 }`, `data-mk-trigger=\"load\"` → `{ trigger: 'load' }`.\n */\nexport function parseOptions(el: HTMLElement): Record<string, unknown> {\n const options: Record<string, unknown> = {};\n for (const [key, raw] of Object.entries(el.dataset)) {\n if (!key.startsWith('mk') || key.length === 2) continue;\n const name = key.charAt(2).toLowerCase() + key.slice(3);\n if (RESERVED.has(name)) continue;\n options[name] = coerce(raw ?? '');\n }\n return options;\n}\n","import { ScrollTrigger } from '../core/gsap';\nimport { warnOnce, type Instance } from '../core/types';\nimport { createSpringCards } from '../recipes/spring-cards/create-spring-cards';\nimport { createCurvedCarousel } from '../recipes/curved-carousel/create-curved-carousel';\nimport { createPile } from '../recipes/pile/create-pile';\nimport { createWords } from '../recipes/words/create-words';\nimport { createFlow } from '../recipes/flow/create-flow';\nimport { createPop } from '../recipes/pop/create-pop';\nimport { createFitText } from '../recipes/fit-text/create-fit-text';\nimport { createStretchFooter } from '../recipes/stretch-footer/create-stretch-footer';\nimport { createRadialMenu } from '../recipes/radial-menu/create-radial-menu';\nimport { createTabs } from '../recipes/tabs/create-tabs';\nimport { createCounter } from '../recipes/counter/create-counter';\nimport { createDetails } from '../recipes/details/create-details';\nimport { createReveal } from '../recipes/reveal/create-reveal';\nimport { createReflow } from '../recipes/reflow/create-reflow';\nimport { createSlotText } from '../recipes/slot-text/create-slot-text';\nimport { createSortable } from '../recipes/sortable/create-sortable';\nimport { createMaskText } from '../recipes/mask-text/create-mask-text';\nimport { createCascade } from '../recipes/cascade/create-cascade';\nimport { createTextRoll } from '../recipes/text-roll/create-text-roll';\nimport { createLetters } from '../recipes/letters/create-letters';\nimport { createParallax } from '../recipes/parallax/create-parallax';\nimport { createDepthGrid } from '../recipes/depth-grid/create-depth-grid';\nimport { createFrameZoom } from '../recipes/frame-zoom/create-frame-zoom';\nimport { createContrast } from '../recipes/contrast/create-contrast';\nimport { createMarquee } from '../recipes/marquee/create-marquee';\nimport { createCardDock } from '../recipes/card-dock/create-card-dock';\nimport { createSnapStrip } from '../recipes/snap-strip/create-snap-strip';\nimport { createFillText } from '../recipes/fill-text/create-fill-text';\nimport { parseOptions } from './parse-options';\nimport { createTicketMenu } from '../recipes/ticket-menu/create-ticket-menu';\nimport { createInfiniteReel } from '../recipes/infinite-reel/create-infinite-reel';\nimport { createRepelBento } from '../recipes/repel-bento/create-repel-bento';\nimport { createRotator } from '../recipes/rotator/create-rotator';\nimport { createDragRuler } from '../recipes/drag-ruler/create-drag-ruler';\nimport { createDockPill } from '../recipes/dock-pill/create-dock-pill';\n\ntype Factory = (el: HTMLElement, options: Record<string, unknown>) => Instance;\n\nconst factories = {\n 'spring-cards': createSpringCards,\n 'curved-carousel': (el, options) =>\n createCurvedCarousel(el, {\n ...options,\n onSelect: (index, slide) => el.dispatchEvent(new CustomEvent('mk:select', { detail: { index, slide }, bubbles: true })),\n }),\n pile: createPile,\n words: createWords,\n flow: createFlow,\n pop: createPop,\n 'fit-text': createFitText,\n 'stretch-footer': createStretchFooter,\n 'radial-menu': createRadialMenu,\n tabs: createTabs,\n counter: createCounter,\n details: (el) => createDetails(el),\n reveal: createReveal,\n reflow: createReflow,\n 'slot-text': createSlotText,\n sortable: createSortable,\n 'mask-text': createMaskText,\n cascade: createCascade,\n 'text-roll': createTextRoll,\n letters: createLetters,\n parallax: createParallax,\n 'depth-grid': createDepthGrid,\n 'frame-zoom': createFrameZoom,\n contrast: createContrast,\n marquee: createMarquee,\n 'card-dock': createCardDock,\n 'snap-strip': createSnapStrip,\n 'fill-text': createFillText,\n 'ticket-menu': createTicketMenu,\n 'infinite-reel': createInfiniteReel,\n 'repel-bento': createRepelBento,\n 'rotator': createRotator,\n 'drag-ruler': createDragRuler,\n 'dock-pill': createDockPill,\n} satisfies Record<string, Factory>;\n\nexport type RecipeName = keyof typeof factories;\nexport const recipeNames = Object.keys(factories) as RecipeName[];\n\n/** Measured text: wait for web fonts, fit before splitting into words. */\nconst AFTER_FONTS: RecipeName[] = ['fit-text', 'words', 'slot-text'];\n\nconst instances = new WeakMap<HTMLElement, Map<RecipeName, Instance>>();\n\nexport interface AutoInitOptions {\n /** Only start these recipes. */\n only?: RecipeName[];\n}\n\n/**\n * Start every `[data-mk]` recipe inside `root` (an element may list several:\n * `data-mk=\"fit-text words\"`). Options come from `data-mk-*` attributes.\n * Returns a function that destroys what this call created. Safe to call again:\n * elements that already run a recipe are skipped.\n */\nexport function autoInit(root: ParentNode = document, { only }: AutoInitOptions = {}): () => void {\n if (typeof window === 'undefined') return () => {};\n const created: Array<[HTMLElement, RecipeName, Instance]> = [];\n let cancelled = false;\n\n const elements = [...root.querySelectorAll<HTMLElement>('[data-mk]')];\n if (root instanceof HTMLElement && root.matches('[data-mk]')) elements.unshift(root);\n\n const start = (el: HTMLElement, name: RecipeName) => {\n if (cancelled) return;\n const running = instances.get(el) ?? new Map<RecipeName, Instance>();\n if (running.has(name)) return;\n const instance = (factories[name] as Factory)(el, parseOptions(el));\n running.set(name, instance);\n instances.set(el, running);\n created.push([el, name, instance]);\n };\n\n const now: Array<[HTMLElement, RecipeName]> = [];\n const later: Array<[HTMLElement, RecipeName]> = [];\n for (const el of elements) {\n for (const raw of (el.dataset.mk ?? '').split(/\\s+/).filter(Boolean)) {\n if (!(raw in factories)) {\n warnOnce(`autoInit: unknown recipe \"${raw}\" (known: ${recipeNames.join(', ')})`);\n continue;\n }\n const name = raw as RecipeName;\n if (only && !only.includes(name)) continue;\n (AFTER_FONTS.includes(name) ? later : now).push([el, name]);\n }\n }\n\n now.forEach(([el, name]) => start(el, name));\n if (later.length) {\n later.sort((a, b) => AFTER_FONTS.indexOf(a[1]) - AFTER_FONTS.indexOf(b[1]));\n const fonts = document.fonts?.ready ?? Promise.resolve();\n void Promise.race([fonts, new Promise((resolve) => setTimeout(resolve, 1500))]).then(() => {\n later.forEach(([el, name]) => start(el, name));\n if (!cancelled) ScrollTrigger.refresh();\n });\n }\n\n return () => {\n cancelled = true;\n for (const [el, name, instance] of created.reverse()) {\n instance.destroy();\n instances.get(el)?.delete(name);\n }\n created.length = 0;\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/auto/parse-options.ts","../../src/auto/auto-init.ts"],"sourcesContent":["/** Attributes the recipes write themselves or use for children; never options. */\nconst RESERVED = new Set([\n '',\n 'ready',\n 'inview',\n 'carousel',\n 'open',\n 'card',\n 'slide',\n 'toggle',\n 'item',\n 'phantom',\n 'footerTitle',\n 'tab',\n 'indicator',\n 'chevron',\n 'text',\n 'role',\n 'motion',\n 'veil',\n 'swatch',\n 'part',\n 'sorting',\n 'sortableGroup',\n 'sortableLocked',\n 'cascade',\n 'on',\n 'tone',\n 'cursorZone',\n 'hidden',\n 'pressed',\n 'parallaxTarget',\n 'spread',\n 'expanded',\n 'settled',\n 'mode',\n 'active',\n 'islandToggle',\n 'islandPanel',\n 'islandItem',\n 'islandClose',\n 'reelTrack',\n 'reelCopy',\n 'dragging',\n 'dockItem',\n]);\n\nconst coerce = (value: string): unknown => {\n if (value === '' || value === 'true') return true;\n if (value === 'false') return false;\n if (/^-?\\d*\\.?\\d+$/.test(value)) return Number(value);\n return value;\n};\n\n/**\n * `data-mk-<option>` attributes → options object.\n * `data-mk-throw-boost=\"2.5\"` → `{ throwBoost: 2.5 }`, `data-mk-trigger=\"load\"` → `{ trigger: 'load' }`.\n */\nexport function parseOptions(el: HTMLElement): Record<string, unknown> {\n const options: Record<string, unknown> = {};\n for (const [key, raw] of Object.entries(el.dataset)) {\n if (!key.startsWith('mk') || key.length === 2) continue;\n const name = key.charAt(2).toLowerCase() + key.slice(3);\n if (RESERVED.has(name)) continue;\n options[name] = coerce(raw ?? '');\n }\n return options;\n}\n","import { createQuantity } from '../components/quantity/engine';\nimport { createPagination } from '../components/pagination/engine';\nimport { createHoverCard } from '../components/hover-card/engine';\nimport { createInputOtp } from '../components/input-otp/engine';\nimport { createJoinedCta } from '../recipes/joined-cta/create-joined-cta';\nimport { createImageZoom } from '../recipes/image-zoom/create-image-zoom';\nimport { createFontCycle } from '../recipes/font-cycle/create-font-cycle';\nimport { createThumbnailNav } from '../recipes/thumbnail-nav/create-thumbnail-nav';\nimport { createActionButton } from '../recipes/action-button/create-action-button';\nimport { createFilmHero } from '../recipes/film-hero/create-film-hero';\nimport { createEditorialReveal } from '../recipes/editorial-reveal/create-editorial-reveal';\nimport { createStudioDock } from '../components/studio-dock/engine';\nimport { createCalendar } from '../components/calendar/engine';\nimport { createSlotPicker } from '../components/slot-picker/engine';\nimport { createWeightHover } from '../recipes/weight-hover/create-weight-hover';\nimport { createSticker } from '../recipes/sticker/create-sticker';\nimport { createScrollDock } from '../recipes/scroll-dock/create-scroll-dock';\nimport { createLocalClock } from '../recipes/local-clock/create-local-clock';\nimport { createTrailer } from '../components/trailer/engine';\nimport { ScrollTrigger } from '../core/gsap';\nimport { warnOnce, type Instance } from '../core/types';\nimport { createSpringCards } from '../recipes/spring-cards/create-spring-cards';\nimport { createCurvedCarousel } from '../recipes/curved-carousel/create-curved-carousel';\nimport { createPile } from '../recipes/pile/create-pile';\nimport { createWords } from '../recipes/words/create-words';\nimport { createFlow } from '../recipes/flow/create-flow';\nimport { createPop } from '../recipes/pop/create-pop';\nimport { createFitText } from '../recipes/fit-text/create-fit-text';\nimport { createStretchFooter } from '../recipes/stretch-footer/create-stretch-footer';\nimport { createRadialMenu } from '../recipes/radial-menu/create-radial-menu';\nimport { createTabs } from '../recipes/tabs/create-tabs';\nimport { createCounter } from '../recipes/counter/create-counter';\nimport { createDetails } from '../recipes/details/create-details';\nimport { createReveal } from '../recipes/reveal/create-reveal';\nimport { createReflow } from '../recipes/reflow/create-reflow';\nimport { createSlotText } from '../recipes/slot-text/create-slot-text';\nimport { createSortable } from '../recipes/sortable/create-sortable';\nimport { createMaskText } from '../recipes/mask-text/create-mask-text';\nimport { createCascade } from '../recipes/cascade/create-cascade';\nimport { createTextRoll } from '../recipes/text-roll/create-text-roll';\nimport { createLetters } from '../recipes/letters/create-letters';\nimport { createParallax } from '../recipes/parallax/create-parallax';\nimport { createDepthGrid } from '../recipes/depth-grid/create-depth-grid';\nimport { createFrameZoom } from '../recipes/frame-zoom/create-frame-zoom';\nimport { createContrast } from '../recipes/contrast/create-contrast';\nimport { createMarquee } from '../recipes/marquee/create-marquee';\nimport { createCardDock } from '../recipes/card-dock/create-card-dock';\nimport { createSnapStrip } from '../recipes/snap-strip/create-snap-strip';\nimport { createFillText } from '../recipes/fill-text/create-fill-text';\nimport { parseOptions } from './parse-options';\nimport { createTicketMenu } from '../recipes/ticket-menu/create-ticket-menu';\nimport { createInfiniteReel } from '../recipes/infinite-reel/create-infinite-reel';\nimport { createRepelBento } from '../recipes/repel-bento/create-repel-bento';\nimport { createRotator } from '../recipes/rotator/create-rotator';\nimport { createDragRuler } from '../recipes/drag-ruler/create-drag-ruler';\nimport { createDockPill } from '../recipes/dock-pill/create-dock-pill';\n\ntype Factory = (el: HTMLElement, options: Record<string, unknown>) => Instance;\n\nconst factories = {\n 'joined-cta': createJoinedCta,\n 'image-zoom': createImageZoom,\n 'font-cycle': createFontCycle,\n 'thumbnail-nav': createThumbnailNav,\n 'action-button': createActionButton,\n 'film-hero': createFilmHero,\n 'editorial-reveal': createEditorialReveal,\n 'studio-dock': createStudioDock,\n 'trailer': createTrailer,\n 'quantity': createQuantity,\n 'pagination': createPagination,\n 'hover-card': createHoverCard,\n 'input-otp': createInputOtp,\n 'calendar': createCalendar,\n 'slot-picker': createSlotPicker,\n 'weight-hover': createWeightHover,\n 'sticker': createSticker,\n 'scroll-dock': createScrollDock,\n 'local-clock': createLocalClock,\n 'spring-cards': createSpringCards,\n 'curved-carousel': (el, options) =>\n createCurvedCarousel(el, {\n ...options,\n onSelect: (index, slide) => el.dispatchEvent(new CustomEvent('mk:select', { detail: { index, slide }, bubbles: true })),\n }),\n pile: createPile,\n words: createWords,\n flow: createFlow,\n pop: createPop,\n 'fit-text': createFitText,\n 'stretch-footer': createStretchFooter,\n 'radial-menu': createRadialMenu,\n tabs: createTabs,\n counter: createCounter,\n details: (el) => createDetails(el),\n reveal: createReveal,\n reflow: createReflow,\n 'slot-text': createSlotText,\n sortable: createSortable,\n 'mask-text': createMaskText,\n cascade: createCascade,\n 'text-roll': createTextRoll,\n letters: createLetters,\n parallax: createParallax,\n 'depth-grid': createDepthGrid,\n 'frame-zoom': createFrameZoom,\n contrast: createContrast,\n marquee: createMarquee,\n 'card-dock': createCardDock,\n 'snap-strip': createSnapStrip,\n 'fill-text': createFillText,\n 'ticket-menu': createTicketMenu,\n 'infinite-reel': createInfiniteReel,\n 'repel-bento': createRepelBento,\n 'rotator': createRotator,\n 'drag-ruler': createDragRuler,\n 'dock-pill': createDockPill,\n} satisfies Record<string, Factory>;\n\nexport type RecipeName = keyof typeof factories;\nexport const recipeNames = Object.keys(factories) as RecipeName[];\n\n/** Measured text: wait for web fonts, fit before splitting into words. */\nconst AFTER_FONTS: RecipeName[] = ['fit-text', 'words', 'slot-text'];\n\nconst instances = new WeakMap<HTMLElement, Map<RecipeName, Instance>>();\n\nexport interface AutoInitOptions {\n /** Only start these recipes. */\n only?: RecipeName[];\n}\n\n/**\n * Start every `[data-mk]` recipe inside `root` (an element may list several:\n * `data-mk=\"fit-text words\"`). Options come from `data-mk-*` attributes.\n * Returns a function that destroys what this call created. Safe to call again:\n * elements that already run a recipe are skipped.\n */\nexport function autoInit(root: ParentNode = document, { only }: AutoInitOptions = {}): () => void {\n if (typeof window === 'undefined') return () => {};\n const created: Array<[HTMLElement, RecipeName, Instance]> = [];\n let cancelled = false;\n\n const elements = [...root.querySelectorAll<HTMLElement>('[data-mk]')];\n if (root instanceof HTMLElement && root.matches('[data-mk]')) elements.unshift(root);\n\n const start = (el: HTMLElement, name: RecipeName) => {\n if (cancelled) return;\n const running = instances.get(el) ?? new Map<RecipeName, Instance>();\n if (running.has(name)) return;\n const instance = (factories[name] as Factory)(el, parseOptions(el));\n running.set(name, instance);\n instances.set(el, running);\n created.push([el, name, instance]);\n };\n\n const now: Array<[HTMLElement, RecipeName]> = [];\n const later: Array<[HTMLElement, RecipeName]> = [];\n for (const el of elements) {\n for (const raw of (el.dataset.mk ?? '').split(/\\s+/).filter(Boolean)) {\n if (!(raw in factories)) {\n warnOnce(`autoInit: unknown recipe \"${raw}\" (known: ${recipeNames.join(', ')})`);\n continue;\n }\n const name = raw as RecipeName;\n if (only && !only.includes(name)) continue;\n (AFTER_FONTS.includes(name) ? later : now).push([el, name]);\n }\n }\n\n now.forEach(([el, name]) => start(el, name));\n if (later.length) {\n later.sort((a, b) => AFTER_FONTS.indexOf(a[1]) - AFTER_FONTS.indexOf(b[1]));\n const fonts = document.fonts?.ready ?? Promise.resolve();\n void Promise.race([fonts, new Promise((resolve) => setTimeout(resolve, 1500))]).then(() => {\n later.forEach(([el, name]) => start(el, name));\n if (!cancelled) ScrollTrigger.refresh();\n });\n }\n\n return () => {\n cancelled = true;\n for (const [el, name, instance] of created.reverse()) {\n instance.destroy();\n instances.get(el)?.delete(name);\n }\n created.length = 0;\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -21,7 +21,7 @@ import {
|
|
|
21
21
|
splitWords,
|
|
22
22
|
spring,
|
|
23
23
|
springEase
|
|
24
|
-
} from "./chunk-
|
|
24
|
+
} from "./chunk-TFNRIZHU.js";
|
|
25
25
|
import {
|
|
26
26
|
THEMES,
|
|
27
27
|
THEME_EVENT,
|
|
@@ -1614,4 +1614,4 @@ export {
|
|
|
1614
1614
|
createCursor,
|
|
1615
1615
|
createIsland
|
|
1616
1616
|
};
|
|
1617
|
-
//# sourceMappingURL=chunk-
|
|
1617
|
+
//# sourceMappingURL=chunk-IKQ5FODN.js.map
|