@yewdiel21/motion-kit 0.16.0 → 0.17.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.
Files changed (60) hide show
  1. package/README.md +21 -0
  2. package/dist/auto/index.d.ts +8 -3
  3. package/dist/auto/index.js +13 -3
  4. package/dist/auto/index.js.map +1 -1
  5. package/dist/{chunk-SDQ776LG.js → chunk-7IQTMF7Y.js} +1414 -38
  6. package/dist/chunk-7IQTMF7Y.js.map +1 -0
  7. package/dist/{chunk-NFZIX3IA.js → chunk-BZLMCHUD.js} +2 -2
  8. package/dist/{chunk-RBEKR5UZ.js → chunk-VJFPTLAK.js} +2 -2
  9. package/dist/css/components/drilldown-menu.css +130 -0
  10. package/dist/css/components/signature-pad.css +104 -0
  11. package/dist/css/components/voice-message-bubble.css +50 -0
  12. package/dist/css/components/waveform-player.css +36 -0
  13. package/dist/css/components/wheel-picker.css +17 -0
  14. package/dist/elements/index.d.ts +90 -4
  15. package/dist/elements/index.js +281 -4
  16. package/dist/elements/index.js.map +1 -1
  17. package/dist/{reveal-DRpNO4KP.d.ts → engine-Bn6hC87X.d.ts} +194 -1
  18. package/dist/index.css +305 -0
  19. package/dist/index.d.ts +3 -3
  20. package/dist/index.js +13 -3
  21. package/dist/index.js.map +1 -1
  22. package/dist/react/index.d.ts +45 -7
  23. package/dist/react/index.js +227 -3
  24. package/dist/react/index.js.map +1 -1
  25. package/dist/{reduced-DQwVXQYb.d.ts → reduced-YS6TZjpa.d.ts} +1 -1
  26. package/dist/{store-Da3zSh8Z.d.ts → store-CZ6vdtIE.d.ts} +1 -1
  27. package/package.json +110 -110
  28. package/registry.json +64 -0
  29. package/src/auto/auto-init.ts +308 -293
  30. package/src/components/drilldown-menu/README.md +163 -0
  31. package/src/components/drilldown-menu/drilldown-menu.css +129 -0
  32. package/src/components/drilldown-menu/element.ts +59 -0
  33. package/src/components/drilldown-menu/engine.ts +338 -0
  34. package/src/components/drilldown-menu/react.tsx +76 -0
  35. package/src/components/signature-pad/README.md +97 -0
  36. package/src/components/signature-pad/element.ts +57 -0
  37. package/src/components/signature-pad/engine.ts +437 -0
  38. package/src/components/signature-pad/react.tsx +56 -0
  39. package/src/components/signature-pad/signature-pad.css +103 -0
  40. package/src/components/voice-message-bubble/README.md +31 -0
  41. package/src/components/voice-message-bubble/element.ts +20 -0
  42. package/src/components/voice-message-bubble/engine.ts +68 -0
  43. package/src/components/voice-message-bubble/react.tsx +27 -0
  44. package/src/components/voice-message-bubble/voice-message-bubble.css +12 -0
  45. package/src/components/waveform-player/README.md +30 -0
  46. package/src/components/waveform-player/element.ts +21 -0
  47. package/src/components/waveform-player/engine.ts +261 -0
  48. package/src/components/waveform-player/react.tsx +27 -0
  49. package/src/components/waveform-player/waveform-player.css +35 -0
  50. package/src/components/wheel-picker/README.md +33 -0
  51. package/src/components/wheel-picker/element.ts +18 -0
  52. package/src/components/wheel-picker/engine.ts +210 -0
  53. package/src/components/wheel-picker/react.tsx +32 -0
  54. package/src/components/wheel-picker/wheel-picker.css +16 -0
  55. package/src/elements/index.ts +273 -258
  56. package/src/index.ts +295 -290
  57. package/src/react/index.ts +176 -171
  58. package/dist/chunk-SDQ776LG.js.map +0 -1
  59. /package/dist/{chunk-NFZIX3IA.js.map → chunk-BZLMCHUD.js.map} +0 -0
  60. /package/dist/{chunk-RBEKR5UZ.js.map → chunk-VJFPTLAK.js.map} +0 -0
@@ -18,7 +18,7 @@ import {
18
18
  slideIndicator,
19
19
  splitGraphemes,
20
20
  takeMovement
21
- } from "./chunk-SDQ776LG.js";
21
+ } from "./chunk-7IQTMF7Y.js";
22
22
  import {
23
23
  clamp,
24
24
  damp,
@@ -4491,4 +4491,4 @@ export {
4491
4491
  createScrollDock,
4492
4492
  createLocalClock
4493
4493
  };
4494
- //# sourceMappingURL=chunk-NFZIX3IA.js.map
4494
+ //# sourceMappingURL=chunk-BZLMCHUD.js.map
@@ -27,7 +27,7 @@ import {
27
27
  startOfWeek,
28
28
  toDate,
29
29
  weekdayNames
30
- } from "./chunk-SDQ776LG.js";
30
+ } from "./chunk-7IQTMF7Y.js";
31
31
  import {
32
32
  THEMES,
33
33
  THEME_EVENT,
@@ -3657,4 +3657,4 @@ export {
3657
3657
  createHeatmapChart,
3658
3658
  createOrbitMenu
3659
3659
  };
3660
- //# sourceMappingURL=chunk-RBEKR5UZ.js.map
3660
+ //# sourceMappingURL=chunk-VJFPTLAK.js.map
@@ -0,0 +1,130 @@
1
+ /* components/drilldown-menu/drilldown-menu.css */
2
+ /* Drilldown menu: a single live level travels in the navigation direction. */
3
+ .mk-drilldown-menu,
4
+ mk-drilldown-menu {
5
+ --mk-drilldown-radius: 28px;
6
+ --mk-drilldown-item-radius: 18px;
7
+ display: block;
8
+ box-sizing: border-box;
9
+ width: 100%;
10
+ max-width: 26rem;
11
+ min-width: 0;
12
+ padding: 10px;
13
+ border: 1px solid var(--mk-outline-soft);
14
+ border-radius: var(--mk-drilldown-radius);
15
+ background: var(--mk-surface-1);
16
+ color: var(--mk-text);
17
+ font-family: var(--md-sys-typescale-body-large-font, inherit);
18
+ box-shadow: 0 12px 36px -20px rgb(0 0 0 / 0.25);
19
+ }
20
+
21
+ [data-mk-drilldown-header] {
22
+ display: flex;
23
+ align-items: center;
24
+ gap: 8px;
25
+ min-height: 48px;
26
+ padding: 4px 10px;
27
+ }
28
+
29
+ [data-mk-drilldown-heading] {
30
+ min-width: 0;
31
+ overflow-wrap: anywhere;
32
+ font-size: 1.1rem;
33
+ font-weight: 650;
34
+ letter-spacing: -0.025em;
35
+ }
36
+
37
+ [data-mk-drilldown-back] {
38
+ display: inline-flex;
39
+ flex: none;
40
+ align-items: center;
41
+ justify-content: center;
42
+ width: 36px;
43
+ height: 36px;
44
+ padding: 0;
45
+ border: 0;
46
+ border-radius: 50%;
47
+ background: var(--mk-surface-3);
48
+ color: var(--mk-text);
49
+ cursor: pointer;
50
+ }
51
+
52
+ [data-mk-drilldown-back] > svg { transform: rotate(180deg); }
53
+ [data-mk-drilldown-back][hidden],
54
+ [data-mk-drilldown-empty][hidden] { display: none; }
55
+
56
+ [data-mk-drilldown-breadcrumb] ol {
57
+ display: flex;
58
+ flex-wrap: wrap;
59
+ align-items: center;
60
+ gap: 4px;
61
+ margin: 0;
62
+ padding: 0 12px 12px;
63
+ list-style: none;
64
+ color: var(--mk-muted);
65
+ font-size: 0.75rem;
66
+ line-height: 1.5;
67
+ }
68
+
69
+ [data-mk-drilldown-breadcrumb] li {
70
+ display: inline-flex;
71
+ align-items: center;
72
+ gap: 4px;
73
+ min-width: 0;
74
+ overflow-wrap: anywhere;
75
+ }
76
+
77
+ [data-mk-drilldown-breadcrumb] li + li::before { content: '/'; opacity: 0.5; }
78
+ [data-mk-drilldown-breadcrumb] [aria-current] { color: var(--mk-text); }
79
+ [data-mk-drilldown-crumb] {
80
+ padding: 2px;
81
+ border: 0;
82
+ border-radius: 4px;
83
+ background: transparent;
84
+ color: inherit;
85
+ font: inherit;
86
+ cursor: pointer;
87
+ }
88
+
89
+ [data-mk-drilldown-viewport] { overflow: hidden; border-radius: var(--mk-drilldown-item-radius); }
90
+ [data-mk-drilldown-level] { display: grid; gap: 3px; }
91
+ [data-mk-drilldown-item] {
92
+ display: flex;
93
+ align-items: center;
94
+ justify-content: space-between;
95
+ gap: 18px;
96
+ width: 100%;
97
+ min-height: 58px;
98
+ padding: 13px 15px;
99
+ border: 0;
100
+ border-radius: var(--mk-drilldown-item-radius);
101
+ background: transparent;
102
+ color: var(--mk-text);
103
+ font: inherit;
104
+ font-size: 0.9rem;
105
+ line-height: 1.4;
106
+ text-align: start;
107
+ cursor: pointer;
108
+ transition: background-color 0.16s ease;
109
+ }
110
+
111
+ [data-mk-drilldown-item]:enabled:hover,
112
+ [data-mk-drilldown-item]:focus-visible { background: var(--mk-surface-3); }
113
+ [data-mk-drilldown-item]:disabled { opacity: 0.42; cursor: default; }
114
+ [data-mk-drilldown-text] { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
115
+ [data-mk-drilldown-label] { font-weight: 550; }
116
+ [data-mk-drilldown-description] { color: var(--mk-muted); font-size: 0.8rem; }
117
+ [data-mk-drilldown-arrow] { display: inline-flex; flex: none; color: var(--mk-muted); }
118
+ [data-mk-drilldown-empty] { margin: 0; padding: 24px 16px; color: var(--mk-muted); font-size: 0.875rem; }
119
+
120
+ [data-mk-drilldown-item]:focus-visible,
121
+ [data-mk-drilldown-back]:focus-visible,
122
+ [data-mk-drilldown-crumb]:focus-visible,
123
+ [data-mk-drilldown-level]:focus-visible {
124
+ outline: 2px solid var(--mk-accent);
125
+ outline-offset: -2px;
126
+ }
127
+
128
+ @media (prefers-reduced-motion: reduce) {
129
+ [data-mk-drilldown-item] { transition: none; }
130
+ }
@@ -0,0 +1,104 @@
1
+ /* components/signature-pad/signature-pad.css */
2
+ /* Normalized SVG ink survives layout changes. Only the drawing area captures touch. */
3
+ .mk-signature-pad,
4
+ mk-signature-pad {
5
+ --mk-signature-height: clamp(12rem, 32vw, 17rem);
6
+ display: block;
7
+ min-width: 0;
8
+ overflow: hidden;
9
+ border: 1px solid var(--mk-outline-soft);
10
+ border-radius: 24px;
11
+ background: var(--mk-surface-1);
12
+ color: var(--mk-text);
13
+ font-family: var(--mk-font);
14
+ }
15
+
16
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-surface] {
17
+ position: relative;
18
+ height: var(--mk-signature-height);
19
+ min-height: 8rem;
20
+ overflow: hidden;
21
+ background: var(--mk-signature-paper, var(--mk-surface-2));
22
+ cursor: crosshair;
23
+ touch-action: none;
24
+ user-select: none;
25
+ -webkit-user-select: none;
26
+ }
27
+
28
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-surface]::after {
29
+ position: absolute;
30
+ right: 1.5rem;
31
+ bottom: 2rem;
32
+ left: 1.5rem;
33
+ border-bottom: 1px dashed var(--mk-outline-soft);
34
+ content: '';
35
+ pointer-events: none;
36
+ }
37
+
38
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-drawing] {
39
+ position: absolute;
40
+ inset: 0;
41
+ display: block;
42
+ width: 100%;
43
+ height: 100%;
44
+ overflow: hidden;
45
+ }
46
+
47
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-placeholder] {
48
+ position: absolute;
49
+ inset: 0;
50
+ display: grid;
51
+ place-items: center;
52
+ color: var(--mk-muted);
53
+ font-size: 1.5rem;
54
+ font-style: italic;
55
+ font-weight: 400;
56
+ pointer-events: none;
57
+ }
58
+
59
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-placeholder][hidden] { display: none; }
60
+
61
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-footer] {
62
+ display: flex;
63
+ flex-wrap: wrap;
64
+ align-items: center;
65
+ justify-content: space-between;
66
+ gap: 0.75rem;
67
+ padding: 0.875rem 1rem 0;
68
+ }
69
+
70
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-toolbar] {
71
+ display: flex;
72
+ flex-wrap: wrap;
73
+ gap: 0.375rem;
74
+ }
75
+
76
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-action] {
77
+ min-height: 2.75rem;
78
+ padding: 0.5rem 0.875rem;
79
+ border: 1px solid var(--mk-outline-soft);
80
+ border-radius: 64px;
81
+ background: var(--mk-surface-3);
82
+ color: var(--mk-text);
83
+ font: inherit;
84
+ font-size: 0.8125rem;
85
+ font-weight: 500;
86
+ cursor: pointer;
87
+ }
88
+
89
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-action]:hover:enabled { background: var(--mk-surface-4); }
90
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-action]:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
91
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-action]:disabled { opacity: 0.4; cursor: default; }
92
+
93
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-status],
94
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-hint] {
95
+ color: var(--mk-muted);
96
+ font-size: 0.75rem;
97
+ line-height: 1.5;
98
+ }
99
+
100
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-status] { font-variant-numeric: tabular-nums; }
101
+ :is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-hint] { margin: 0; padding: 0.75rem 1rem 1rem; }
102
+ :is(.mk-signature-pad, mk-signature-pad)[data-mk-readonly] [data-mk-signature-surface],
103
+ :is(.mk-signature-pad, mk-signature-pad)[data-mk-disabled] [data-mk-signature-surface] { cursor: default; touch-action: auto; }
104
+ :is(.mk-signature-pad, mk-signature-pad)[data-mk-disabled] [data-mk-signature-surface] { opacity: 0.55; }
@@ -0,0 +1,50 @@
1
+ /* components/waveform-player/waveform-player.css */
2
+ .mk-waveform-player, mk-waveform-player {
3
+ --mk-wave-color: var(--mk-accent);
4
+ --mk-wave-track: color-mix(in srgb, var(--mk-text) 38%, transparent);
5
+ display: block;
6
+ width: 100%;
7
+ min-width: 0;
8
+ color: var(--mk-text);
9
+ font-family: var(--mk-font);
10
+ }
11
+ [data-mk-wave-content] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .875rem; }
12
+ [data-mk-wave-toggle] { display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--mk-wave-color); color: var(--mk-on-accent, var(--mk-bg)); cursor: pointer; }
13
+ [data-mk-wave-toggle] svg { width: 1.4rem; height: 1.4rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
14
+ [data-mk-wave-body] { min-width: 0; }
15
+ [data-mk-wave-track] { position: relative; height: 3rem; border-radius: .5rem; }
16
+ [data-mk-wave-bars] { display: flex; align-items: center; gap: 3px; height: 100%; pointer-events: none; overflow: hidden; }
17
+ [data-mk-wave-bar] { display: block; flex: 1 1 0; min-width: 1px; border-radius: 999px; background: var(--mk-wave-track); transition: background-color .16s ease; }
18
+ [data-mk-wave-bar][data-mk-played] { background: var(--mk-wave-color); }
19
+ [data-mk-wave-seek] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
20
+ [data-mk-wave-track]:has(input:focus-visible) { outline: 2px solid var(--mk-wave-color); outline-offset: 4px; }
21
+ [data-mk-wave-footer] { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 2rem; }
22
+ [data-mk-wave-time] { color: var(--mk-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
23
+ [data-mk-wave-rate] { min-width: 44px; min-height: 44px; padding: .25rem .5rem; border: 0; border-radius: 99px; color: var(--mk-text); background: var(--mk-surface-2); font: 600 .75rem var(--mk-font); cursor: pointer; }
24
+ [data-mk-wave-rate][hidden] { display: none; }
25
+ [data-mk-wave-message] { grid-column: 2; color: var(--mk-muted); font-size: .75rem; line-height: 1.5; }
26
+ [data-mk-wave-message]:empty { display: none; }
27
+ [data-mk-wave-toggle]:focus-visible, [data-mk-wave-rate]:focus-visible { outline: 2px solid var(--mk-wave-color); outline-offset: 3px; }
28
+ [data-mk-wave-toggle]:disabled, [data-mk-wave-rate]:disabled { opacity: .5; cursor: default; }
29
+ [data-mk-wave-track]:has(input:disabled) { opacity: .55; }
30
+ [data-mk-wave-state='error'] [data-mk-wave-message] { color: var(--mk-error, var(--mk-text)); }
31
+ @media (prefers-reduced-motion: reduce) { [data-mk-wave-bar] { transition: none; } }
32
+ @media (forced-colors: active) {
33
+ [data-mk-wave-toggle], [data-mk-wave-rate] { border: 1px solid ButtonText; }
34
+ [data-mk-wave-bar] { background: GrayText; }
35
+ [data-mk-wave-bar][data-mk-played] { background: Highlight; }
36
+ }
37
+
38
+ /* components/voice-message-bubble/voice-message-bubble.css */
39
+ /* Requires waveform-player.css; the bubble composes its player without duplicating it. */
40
+ .mk-voice-message-bubble, mk-voice-message-bubble { display: block; width: min(100%, 25rem); color: var(--mk-text); font-family: var(--mk-font); }
41
+ [data-mk-voice-message-content] { display: grid; gap: .75rem; padding: 1rem 1.125rem .75rem; background: var(--mk-surface-2); border: 1px solid var(--mk-outline-soft); border-radius: 1.5rem 1.5rem 1.5rem .375rem; }
42
+ :is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] { margin-inline-start: auto; }
43
+ :is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] [data-mk-voice-message-content] { background: color-mix(in srgb, var(--mk-accent) 10%, var(--mk-surface-1)); border-radius: 1.5rem 1.5rem .375rem 1.5rem; }
44
+ [data-mk-voice-message-header], [data-mk-voice-message-footer] { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .6875rem; color: var(--mk-muted); }
45
+ [data-mk-voice-message-author] { font-weight: 600; color: var(--mk-text); }
46
+ [data-mk-voice-message-caption] { margin-inline-start: auto; }
47
+ [data-mk-voice-message-footer] { justify-content: flex-end; }
48
+ [data-mk-voice-message-status] { color: var(--mk-accent); }
49
+ [data-mk-voice-message-content] .mk-waveform-player { --mk-wave-track: color-mix(in srgb, var(--mk-text) 38%, transparent); }
50
+ @media (forced-colors: active) { [data-mk-voice-message-content] { border-color: CanvasText; } }
@@ -0,0 +1,36 @@
1
+ /* components/waveform-player/waveform-player.css */
2
+ .mk-waveform-player, mk-waveform-player {
3
+ --mk-wave-color: var(--mk-accent);
4
+ --mk-wave-track: color-mix(in srgb, var(--mk-text) 38%, transparent);
5
+ display: block;
6
+ width: 100%;
7
+ min-width: 0;
8
+ color: var(--mk-text);
9
+ font-family: var(--mk-font);
10
+ }
11
+ [data-mk-wave-content] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .875rem; }
12
+ [data-mk-wave-toggle] { display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--mk-wave-color); color: var(--mk-on-accent, var(--mk-bg)); cursor: pointer; }
13
+ [data-mk-wave-toggle] svg { width: 1.4rem; height: 1.4rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
14
+ [data-mk-wave-body] { min-width: 0; }
15
+ [data-mk-wave-track] { position: relative; height: 3rem; border-radius: .5rem; }
16
+ [data-mk-wave-bars] { display: flex; align-items: center; gap: 3px; height: 100%; pointer-events: none; overflow: hidden; }
17
+ [data-mk-wave-bar] { display: block; flex: 1 1 0; min-width: 1px; border-radius: 999px; background: var(--mk-wave-track); transition: background-color .16s ease; }
18
+ [data-mk-wave-bar][data-mk-played] { background: var(--mk-wave-color); }
19
+ [data-mk-wave-seek] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
20
+ [data-mk-wave-track]:has(input:focus-visible) { outline: 2px solid var(--mk-wave-color); outline-offset: 4px; }
21
+ [data-mk-wave-footer] { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 2rem; }
22
+ [data-mk-wave-time] { color: var(--mk-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
23
+ [data-mk-wave-rate] { min-width: 44px; min-height: 44px; padding: .25rem .5rem; border: 0; border-radius: 99px; color: var(--mk-text); background: var(--mk-surface-2); font: 600 .75rem var(--mk-font); cursor: pointer; }
24
+ [data-mk-wave-rate][hidden] { display: none; }
25
+ [data-mk-wave-message] { grid-column: 2; color: var(--mk-muted); font-size: .75rem; line-height: 1.5; }
26
+ [data-mk-wave-message]:empty { display: none; }
27
+ [data-mk-wave-toggle]:focus-visible, [data-mk-wave-rate]:focus-visible { outline: 2px solid var(--mk-wave-color); outline-offset: 3px; }
28
+ [data-mk-wave-toggle]:disabled, [data-mk-wave-rate]:disabled { opacity: .5; cursor: default; }
29
+ [data-mk-wave-track]:has(input:disabled) { opacity: .55; }
30
+ [data-mk-wave-state='error'] [data-mk-wave-message] { color: var(--mk-error, var(--mk-text)); }
31
+ @media (prefers-reduced-motion: reduce) { [data-mk-wave-bar] { transition: none; } }
32
+ @media (forced-colors: active) {
33
+ [data-mk-wave-toggle], [data-mk-wave-rate] { border: 1px solid ButtonText; }
34
+ [data-mk-wave-bar] { background: GrayText; }
35
+ [data-mk-wave-bar][data-mk-played] { background: Highlight; }
36
+ }
@@ -0,0 +1,17 @@
1
+ /* components/wheel-picker/wheel-picker.css */
2
+ .mk-wheel-picker, mk-wheel-picker { --mk-wheel-row: 44px; --mk-wheel-rows: 5; display: grid; gap: .75rem; min-width: 0; color: var(--mk-text); font-family: var(--mk-font); }
3
+ [data-mk-wheel-label] { color: var(--mk-muted); font-size: .8125rem; text-align: center; }
4
+ [data-mk-wheel-frame] { position: relative; isolation: isolate; min-width: 0; }
5
+ [data-mk-wheel-highlight] { position: absolute; top: calc(50% - var(--mk-wheel-row) / 2); right: .5rem; left: .5rem; height: var(--mk-wheel-row); border: 1px solid var(--mk-outline-soft); border-radius: var(--mk-radius-full); background: var(--mk-surface-3); pointer-events: none; z-index: -1; }
6
+ [data-mk-wheel-viewport] { height: calc(var(--mk-wheel-row) * var(--mk-wheel-rows)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-tap-highlight-color: transparent; mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
7
+ [data-mk-wheel-viewport]::-webkit-scrollbar { display: none; }
8
+ [data-mk-wheel-viewport]:focus { outline: none; }
9
+ [data-mk-wheel-frame]:has([data-mk-wheel-viewport]:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 24px; }
10
+ [data-mk-wheel-list] { padding-block: calc(var(--mk-wheel-row) * (var(--mk-wheel-rows) - 1) / 2); }
11
+ [data-mk-wheel-option] { display: grid; place-items: center; height: var(--mk-wheel-row); min-height: 44px; padding-inline: 1rem; color: var(--mk-muted); font-size: 1.1rem; font-variant-numeric: tabular-nums; font-weight: 450; scroll-snap-align: center; cursor: pointer; user-select: none; transform-origin: center; transition: color .18s ease; }
12
+ [data-mk-wheel-option][aria-selected='true'] { color: var(--mk-text); font-weight: 650; }
13
+ [data-mk-wheel-option][aria-disabled='true'] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
14
+ [data-mk-wheel-empty] { display: block; text-align: center; color: var(--mk-muted); font-size: .875rem; }
15
+ [data-mk-disabled] [data-mk-wheel-viewport] { overflow: hidden; opacity: .5; }
16
+ @media (prefers-reduced-motion: reduce) { [data-mk-wheel-option] { transition: none; transform: none !important; } }
17
+ @media (forced-colors: active) { [data-mk-wheel-highlight] { border: 2px solid Highlight; } }
@@ -1,7 +1,7 @@
1
1
  import { I as Instance } from '../types-BkS_raL8.js';
2
- import { d0 as StudioDockInstance, d3 as StudioDockView, dg as TrailerInstance, bb as DialogInstance, bd as DialogOptions, bX as MenuInstance, ch as QuantityInstance, c3 as PaginationInstance, bG as HoverCardInstance, bM as InputOtpInstance, aq as CalendarInstance, cP as SlotPickerInstance, ad as AttachmentInstance, ac as AttachmentFile, ai as AttachmentStatus, cM as SkeletonInstance, ck as QuestionnaireInstance, cj as QuestionnaireAnswers, aF as CodeBlockInstance, aU as ContextMenuInstance, bR as LinkPreviewInstance, ce as ProgressInstance, cp as RangeSliderInstance, cr as RangeValue, aw as ChartInstance, ax as ChartOptions, aX as CreditCardInstance, aW as CreditCardField, a_ as CreditCardValues, av as CardBrand, aS as CommandSearchInstance, aR as CommandItem, bE as HoldConfirmInstance, bK as ImagePreviewInstance, c0 as NotificationBellInstance, c8 as PasswordStrengthInstance, cD as ScratchCardInstance, cY as StarRatingInstance, aP as ColorSliderInstance, aH as ColorAreaInstance, aK as ColorFieldInstance, aN as ColorPickerInstance, d7 as TimeFieldInstance, cn as RangeCalendarInstance, b6 as DateRange, b7 as DateRangePickerInstance, de as TooltipInstance, cc as PopoverInstance, bU as LoadingButtonInstance, bW as LoadingState, ak as BreadcrumbInstance, bm as EmptyStateInstance, c_ as StatCardInstance, aA as ChartTooltipInstance, bZ as MultiSelectInstance, d5 as TagInputInstance, b9 as DateTimePickerInstance, bw as FilterBuilderInstance, bA as FilterGroup, db as TimelineInstance, da as TimelineEvent, a6 as ActivityFeedInstance, a8 as ActivityItem, dj as TreeViewInstance, br as FileExplorerInstance, bP as JsonViewerInstance, dm as VirtualListInstance, cs as ResizablePanelInstance, cW as SplitViewInstance, b4 as DataTableInstance, b2 as DataRow, bh as EditableTableInstance, cy as RichTextEditorInstance, cH as SelectInstance, aa as AddToCartInstance, cF as ScrollIslandInstance } from '../reveal-DRpNO4KP.js';
3
- import { E as ThemePickerInstance, M as ToasterInstance, C as ChatInstance, d as ChatRole, l as NavInstance, n as NavStyle, o as NavStyleAlias, e as CursorInstance, I as IslandInstance, V as ToolbarInstance, B as BidirectionalSliderInstance, X as VoiceDotsInstance, Z as VoiceState, r as PieChartInstance, s as PieChartOptions, R as RadarChartInstance, u as RadarChartOptions, w as RadialChartInstance, x as RadialChartOptions, S as SankeyChartInstance, z as SankeyChartOptions, H as HeatmapChartInstance, h as HeatmapChartOptions, O as OrbitMenuInstance } from '../store-Da3zSh8Z.js';
4
- export { an as toast } from '../store-Da3zSh8Z.js';
2
+ import { dh as StudioDockInstance, dk as StudioDockView, dy as TrailerInstance, bg as DialogInstance, bi as DialogOptions, c3 as MenuInstance, cp as QuantityInstance, cb as PaginationInstance, bO as HoverCardInstance, bU as InputOtpInstance, av as CalendarInstance, d4 as SlotPickerInstance, ai as AttachmentInstance, ah as AttachmentFile, an as AttachmentStatus, d1 as SkeletonInstance, cs as QuestionnaireInstance, cr as QuestionnaireAnswers, aK as CodeBlockInstance, aZ as ContextMenuInstance, bZ as LinkPreviewInstance, cm as ProgressInstance, cx as RangeSliderInstance, cz as RangeValue, aB as ChartInstance, aC as ChartOptions, b0 as CreditCardInstance, a$ as CreditCardField, b3 as CreditCardValues, aA as CardBrand, aX as CommandSearchInstance, aW as CommandItem, bM as HoldConfirmInstance, bS as ImagePreviewInstance, c8 as NotificationBellInstance, cg as PasswordStrengthInstance, cL as ScratchCardInstance, dd as StarRatingInstance, aU as ColorSliderInstance, aM as ColorAreaInstance, aP as ColorFieldInstance, aS as ColorPickerInstance, dp as TimeFieldInstance, cv as RangeCalendarInstance, bb as DateRange, bc as DateRangePickerInstance, dw as TooltipInstance, ck as PopoverInstance, c0 as LoadingButtonInstance, c2 as LoadingState, ap as BreadcrumbInstance, bu as EmptyStateInstance, df as StatCardInstance, aF as ChartTooltipInstance, c5 as MultiSelectInstance, dm as TagInputInstance, be as DateTimePickerInstance, bE as FilterBuilderInstance, bI as FilterGroup, dt as TimelineInstance, ds as TimelineEvent, ab as ActivityFeedInstance, ad as ActivityItem, dB as TreeViewInstance, bz as FileExplorerInstance, bX as JsonViewerInstance, dE as VirtualListInstance, cA as ResizablePanelInstance, db as SplitViewInstance, b9 as DataTableInstance, b7 as DataRow, bp as EditableTableInstance, cG as RichTextEditorInstance, cP as SelectInstance, af as AddToCartInstance, cN as ScrollIslandInstance, cY as SignaturePadInstance, cT as SignatureData, cU as SignatureExportOptions, cV as SignaturePNGOptions, dM as WaveformPlayerInstance, dN as WaveformPlayerOptions, dO as WaveformPlayerState, dJ as VoiceMessageBubbleInstance, dK as VoiceMessageBubbleOptions, bl as DrilldownMenuInstance, bm as DrilldownMenuItem, dR as WheelPickerInstance, dQ as WheelPickerEntry } from '../engine-Bn6hC87X.js';
3
+ import { E as ThemePickerInstance, M as ToasterInstance, C as ChatInstance, d as ChatRole, l as NavInstance, n as NavStyle, o as NavStyleAlias, e as CursorInstance, I as IslandInstance, V as ToolbarInstance, B as BidirectionalSliderInstance, X as VoiceDotsInstance, Z as VoiceState, r as PieChartInstance, s as PieChartOptions, R as RadarChartInstance, u as RadarChartOptions, w as RadialChartInstance, x as RadialChartOptions, S as SankeyChartInstance, z as SankeyChartOptions, H as HeatmapChartInstance, h as HeatmapChartOptions, O as OrbitMenuInstance } from '../store-CZ6vdtIE.js';
4
+ export { an as toast } from '../store-CZ6vdtIE.js';
5
5
  import { C as ChatBackgroundInstance, c as StepsInstance, P as PillButtonInstance } from '../engine-5zRIssTO.js';
6
6
  import { L as LikeButtonInstance, S as SwipeActionsInstance } from '../engine-QECQnGz1.js';
7
7
  import 'gsap/Flip';
@@ -1003,6 +1003,87 @@ declare class MkOrbitMenuElement extends MkElement<OrbitMenuInstance> {
1003
1003
  close(): void;
1004
1004
  }
1005
1005
 
1006
+ /** Light-DOM element. `data` accepts versioned JSON; mk:change carries data and history state. */
1007
+ declare class MkSignaturePadElement extends MkElement<SignaturePadInstance> {
1008
+ static options: Record<string, OptionType>;
1009
+ private saved;
1010
+ protected create(options: Record<string, unknown>): SignaturePadInstance;
1011
+ attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
1012
+ disconnectedCallback(): void;
1013
+ connectedCallback(): void;
1014
+ get data(): SignatureData;
1015
+ set data(value: SignatureData);
1016
+ get isEmpty(): boolean;
1017
+ get canUndo(): boolean;
1018
+ get canRedo(): boolean;
1019
+ undo(): void;
1020
+ redo(): void;
1021
+ clear(): void;
1022
+ importData(value: unknown, notify?: boolean): boolean;
1023
+ exportData(): SignatureData;
1024
+ exportSVG(options?: SignatureExportOptions): string;
1025
+ exportPNG(options?: SignaturePNGOptions): Promise<Blob | null>;
1026
+ }
1027
+ declare const defineSignaturePad: () => void;
1028
+
1029
+ declare class MkWaveformPlayerElement extends MkElement<WaveformPlayerInstance> {
1030
+ static options: Record<string, OptionType>;
1031
+ protected create(options: Record<string, unknown>): WaveformPlayerInstance;
1032
+ play(): Promise<boolean>;
1033
+ pause(): void;
1034
+ seek(seconds: number): void;
1035
+ update(options: Partial<WaveformPlayerOptions>): void;
1036
+ get state(): WaveformPlayerState | undefined;
1037
+ get audio(): HTMLAudioElement | null;
1038
+ attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
1039
+ }
1040
+ declare const defineWaveformPlayer: () => void;
1041
+
1042
+ declare class MkVoiceMessageBubbleElement extends MkElement<VoiceMessageBubbleInstance> {
1043
+ static options: Record<string, OptionType>;
1044
+ protected create(options: Record<string, unknown>): VoiceMessageBubbleInstance;
1045
+ play(): Promise<boolean>;
1046
+ pause(): void;
1047
+ seek(seconds: number): void;
1048
+ update(options: Partial<VoiceMessageBubbleOptions>): void;
1049
+ get state(): WaveformPlayerState | undefined;
1050
+ get audio(): HTMLAudioElement | null;
1051
+ attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
1052
+ }
1053
+ declare const defineVoiceMessageBubble: () => void;
1054
+
1055
+ /** Light DOM action menu; items/path accept JSON. Emits mk:select and mk:path-change. */
1056
+ declare class MkDrilldownMenuElement extends MkElement<DrilldownMenuInstance> {
1057
+ static options: Record<string, OptionType>;
1058
+ private pendingItems;
1059
+ private pendingPath;
1060
+ protected create(options: Record<string, unknown>): DrilldownMenuInstance;
1061
+ attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
1062
+ get items(): DrilldownMenuItem[];
1063
+ set items(items: DrilldownMenuItem[]);
1064
+ get path(): string[];
1065
+ set path(path: string[]);
1066
+ open(id: string): boolean;
1067
+ back(): boolean;
1068
+ root(): void;
1069
+ reset(): void;
1070
+ setItems(items: DrilldownMenuItem[]): void;
1071
+ setPath(path: string[]): void;
1072
+ focusItem(id: string): void;
1073
+ }
1074
+ declare const defineDrilldownMenu: () => void;
1075
+
1076
+ declare class MkWheelPickerElement extends MkElement<WheelPickerInstance> {
1077
+ static options: Record<string, OptionType>;
1078
+ protected create(options: Record<string, unknown>): WheelPickerInstance;
1079
+ attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
1080
+ get value(): string;
1081
+ set value(next: string);
1082
+ setValue(value: string, notify?: boolean): void;
1083
+ setItems(items: WheelPickerEntry[], notify?: boolean): void;
1084
+ }
1085
+ declare const defineWheelPicker: () => void;
1086
+
1006
1087
  /** Tag name → element class, for every component. */
1007
1088
  declare const ELEMENTS: {
1008
1089
  readonly 'mk-theme-picker': typeof MkThemePickerElement;
@@ -1085,9 +1166,14 @@ declare const ELEMENTS: {
1085
1166
  readonly 'mk-sankey-chart': typeof MkSankeyChartElement;
1086
1167
  readonly 'mk-heatmap-chart': typeof MkHeatmapChartElement;
1087
1168
  readonly 'mk-orbit-menu': typeof MkOrbitMenuElement;
1169
+ readonly 'mk-signature-pad': typeof MkSignaturePadElement;
1170
+ readonly 'mk-waveform-player': typeof MkWaveformPlayerElement;
1171
+ readonly 'mk-voice-message-bubble': typeof MkVoiceMessageBubbleElement;
1172
+ readonly 'mk-drilldown-menu': typeof MkDrilldownMenuElement;
1173
+ readonly 'mk-wheel-picker': typeof MkWheelPickerElement;
1088
1174
  };
1089
1175
  type ElementName = keyof typeof ELEMENTS;
1090
1176
  /** Register every motion-kit element (or the ones named). Safe to call more than once. */
1091
1177
  declare function defineElements(names?: ElementName[]): void;
1092
1178
 
1093
- export { ELEMENTS, type ElementName, MkActivityFeedElement, MkAddToCartElement, MkAttachmentElement, MkBidirectionalSliderElement, MkBreadcrumbElement, MkCalendarElement, MkChartElement, MkChartTooltipElement, MkChatBackgroundElement, MkChatElement, MkCodeBlockElement, MkColorAreaElement, MkColorFieldElement, MkColorPickerElement, MkColorSliderElement, MkCommandSearchElement, MkContextMenuElement, MkCreditCardElement, MkCursorElement, MkDataTableElement, MkDateRangePickerElement, MkDateTimePickerElement, MkDialogElement, MkDrawerElement, MkEditableTableElement, MkElement, MkEmptyStateElement, MkFileExplorerElement, MkFilterBuilderElement, MkHeatmapChartElement, MkHoldConfirmElement, MkHoverCardElement, MkImagePreviewElement, MkInputOtpElement, MkIslandElement, MkJsonViewerElement, MkLikeButtonElement, MkLinkPreviewElement, MkLoadingButtonElement, MkMenuElement, MkMultiSelectElement, MkNavElement, MkNotificationBellElement, MkOrbitMenuElement, MkPaginationElement, MkPasswordStrengthElement, MkPieChartElement, MkPillButtonElement, MkPopoverElement, MkProgressElement, MkQuantityElement, MkQuestionnaireElement, MkRadarChartElement, MkRadialChartElement, MkRangeCalendarElement, MkRangeSliderElement, MkResizablePanelElement, MkRichTextEditorElement, MkSankeyChartElement, MkScratchCardElement, MkScrollIslandElement, MkSelectElement, MkSkeletonElement, MkSlotPickerElement, MkSplitViewElement, MkStarRatingElement, MkStatCardElement, MkStepsElement, MkStudioDockElement, MkSwipeActionsElement, MkTagInputElement, MkThemePickerElement, MkTimeFieldElement, MkTimelineElement, MkToasterElement, MkToolbarElement, MkTooltipElement, MkTrailerElement, MkTreeViewElement, MkVirtualListElement, MkVoiceDotsElement, type OptionType, SafeHTMLElement, defineElement, defineElements, defineStudioDock, defineTrailer };
1179
+ export { ELEMENTS, type ElementName, MkActivityFeedElement, MkAddToCartElement, MkAttachmentElement, MkBidirectionalSliderElement, MkBreadcrumbElement, MkCalendarElement, MkChartElement, MkChartTooltipElement, MkChatBackgroundElement, MkChatElement, MkCodeBlockElement, MkColorAreaElement, MkColorFieldElement, MkColorPickerElement, MkColorSliderElement, MkCommandSearchElement, MkContextMenuElement, MkCreditCardElement, MkCursorElement, MkDataTableElement, MkDateRangePickerElement, MkDateTimePickerElement, MkDialogElement, MkDrawerElement, MkDrilldownMenuElement, MkEditableTableElement, MkElement, MkEmptyStateElement, MkFileExplorerElement, MkFilterBuilderElement, MkHeatmapChartElement, MkHoldConfirmElement, MkHoverCardElement, MkImagePreviewElement, MkInputOtpElement, MkIslandElement, MkJsonViewerElement, MkLikeButtonElement, MkLinkPreviewElement, MkLoadingButtonElement, MkMenuElement, MkMultiSelectElement, MkNavElement, MkNotificationBellElement, MkOrbitMenuElement, MkPaginationElement, MkPasswordStrengthElement, MkPieChartElement, MkPillButtonElement, MkPopoverElement, MkProgressElement, MkQuantityElement, MkQuestionnaireElement, MkRadarChartElement, MkRadialChartElement, MkRangeCalendarElement, MkRangeSliderElement, MkResizablePanelElement, MkRichTextEditorElement, MkSankeyChartElement, MkScratchCardElement, MkScrollIslandElement, MkSelectElement, MkSignaturePadElement, MkSkeletonElement, MkSlotPickerElement, MkSplitViewElement, MkStarRatingElement, MkStatCardElement, MkStepsElement, MkStudioDockElement, MkSwipeActionsElement, MkTagInputElement, MkThemePickerElement, MkTimeFieldElement, MkTimelineElement, MkToasterElement, MkToolbarElement, MkTooltipElement, MkTrailerElement, MkTreeViewElement, MkVirtualListElement, MkVoiceDotsElement, MkVoiceMessageBubbleElement, MkWaveformPlayerElement, MkWheelPickerElement, type OptionType, SafeHTMLElement, defineDrilldownMenu, defineElement, defineElements, defineSignaturePad, defineStudioDock, defineTrailer, defineVoiceMessageBubble, defineWaveformPlayer, defineWheelPicker };