beez-ui 3.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +45 -47
  3. package/dist/components/account-menu.js +1 -1
  4. package/dist/components/alert.js +3 -7
  5. package/dist/components/animated-collapse.js +51 -38
  6. package/dist/components/animated-list-item.js +33 -34
  7. package/dist/components/animated-theme-toggler.d.ts +5 -1
  8. package/dist/components/animated-theme-toggler.js +75 -120
  9. package/dist/components/badge.js +7 -11
  10. package/dist/components/card.js +13 -16
  11. package/dist/components/dialog-surface.js +8 -21
  12. package/dist/components/filter-query-bar.js +7 -11
  13. package/dist/components/input-group.js +5 -9
  14. package/dist/components/input.js +8 -12
  15. package/dist/components/label.js +4 -8
  16. package/dist/components/link.d.ts +1 -0
  17. package/dist/components/link.js +2 -16
  18. package/dist/components/presence-swap.d.ts +1 -1
  19. package/dist/components/presence-swap.js +44 -32
  20. package/dist/components/primitives/avatar.js +8 -10
  21. package/dist/components/primitives/dropdown-menu.d.ts +2 -2
  22. package/dist/components/primitives/dropdown-menu.js +8 -5
  23. package/dist/components/primitives/select.d.ts +2 -1
  24. package/dist/components/primitives/select.js +104 -83
  25. package/dist/components/reaction-button.d.ts +5 -6
  26. package/dist/components/reaction-button.js +139 -75
  27. package/dist/components/rich-link-editor.js +1 -1
  28. package/dist/components/separator.js +5 -9
  29. package/dist/components/sheet.js +8 -11
  30. package/dist/components/sidebar.d.ts +6 -6
  31. package/dist/components/sidebar.js +221 -184
  32. package/dist/components/svgs/whatsappIcon.js +10 -14
  33. package/dist/components/table.js +4 -8
  34. package/dist/components/textarea.js +7 -11
  35. package/dist/components/themed-toaster.js +28 -62
  36. package/dist/constants/avatar.d.ts +6 -1
  37. package/dist/constants/avatar.js +6 -0
  38. package/dist/constants/dropdown-menu.d.ts +6 -1
  39. package/dist/constants/dropdown-menu.js +33 -1
  40. package/dist/constants/popover.js +2 -8
  41. package/dist/constants/select.d.ts +3 -1
  42. package/dist/constants/select.js +30 -1
  43. package/dist/motion/arc-tokens.d.ts +6 -0
  44. package/dist/motion/arc-tokens.js +6 -0
  45. package/dist/motion/glide-indicator.d.ts +6 -21
  46. package/dist/motion/glide-indicator.js +8 -17
  47. package/dist/motion/motion-slot.d.ts +6 -3
  48. package/dist/motion/motion-slot.js +100 -411
  49. package/dist/motion/presence.d.ts +8 -0
  50. package/dist/motion/presence.js +11 -1
  51. package/dist/motion/surface-keyframes.d.ts +2 -2
  52. package/dist/motion/surface-keyframes.js +40 -141
  53. package/dist/motion/tokens.d.ts +10 -114
  54. package/dist/motion/tokens.js +11 -116
  55. package/dist/styles.css +1 -1
  56. package/package.json +1 -1
  57. package/dist/motion/shared-layout-bg.d.ts +0 -16
  58. package/dist/motion/shared-layout-bg.js +0 -181
@@ -9,6 +9,7 @@ declare const OPEN_CONTEXTS: {
9
9
  popover: import("react").Context<boolean>;
10
10
  "hover-card": import("react").Context<boolean>;
11
11
  tooltip: import("react").Context<boolean>;
12
+ select: import("react").Context<boolean>;
12
13
  };
13
14
  type MotionScope = keyof typeof OPEN_CONTEXTS;
14
15
  /** Provides only the owning primitive's visibility, independently of other nested primitives. */
@@ -17,6 +18,13 @@ export declare function MotionOpenProvider({ scope, open, children, }: {
17
18
  open: boolean;
18
19
  children: ReactNode;
19
20
  }): import("react").JSX.Element;
21
+ /**
22
+ * Reads the owning primitive's visibility, for content that Radix keeps mounted while closed and so cannot be
23
+ * retained by `MotionPresence`.
24
+ * @param scope - The primitive whose visibility is read.
25
+ * @returns Whether that primitive is open.
26
+ */
27
+ export declare function useMotionOpen(scope: MotionScope): boolean;
20
28
  /** Preserves the primitive's controlled/uncontrolled open contract. */
21
29
  export declare function useMotionOpenState({ open, defaultOpen, onOpenChange, }: {
22
30
  open?: boolean;
@@ -12,7 +12,8 @@ const OPEN_CONTEXTS = {
12
12
  "dropdown-menu": createContext(true),
13
13
  popover: createContext(true),
14
14
  "hover-card": createContext(true),
15
- tooltip: createContext(true)
15
+ tooltip: createContext(true),
16
+ select: createContext(true)
16
17
  };
17
18
  /** Provides only the owning primitive's visibility, independently of other nested primitives. */
18
19
  export function MotionOpenProvider(t0) {
@@ -34,6 +35,15 @@ export function MotionOpenProvider(t0) {
34
35
  }
35
36
  return t1;
36
37
  }
38
+ /**
39
+ * Reads the owning primitive's visibility, for content that Radix keeps mounted while closed and so cannot be
40
+ * retained by `MotionPresence`.
41
+ * @param scope - The primitive whose visibility is read.
42
+ * @returns Whether that primitive is open.
43
+ */
44
+ export function useMotionOpen(scope) {
45
+ return useContext(OPEN_CONTEXTS[scope]);
46
+ }
37
47
  /** Preserves the primitive's controlled/uncontrolled open contract. */
38
48
  export function useMotionOpenState(t0) {
39
49
  const $ = _c(6);
@@ -1,7 +1,7 @@
1
- /** Resolves entry and exit playback for floating and modal surfaces from their rendered placement. */
1
+ /** Resolves entry and exit playback of Arc's modal surfaces: dialogs, sheets and their scrims. */
2
2
  import type { AnimationOptions, DOMKeyframesDefinition } from "motion/react";
3
3
  /** Surface kinds whose presence is animated on mount and before removal. */
4
- export type SurfaceKind = "tooltip" | "surface" | "dialog" | "center-morph" | "sheet" | "overlay";
4
+ export type SurfaceKind = "dialog" | "sheet" | "overlay";
5
5
  /** Keyframes plus the transition that plays them. */
6
6
  export interface MotionStep {
7
7
  keyframes: DOMKeyframesDefinition;
@@ -1,6 +1,7 @@
1
- import { MOTION_DIALOG_DISTANCE, MOTION_DIALOG_EXIT_DISTANCE, MOTION_EASE, MOTION_EASE_DRAWER, MOTION_EASE_STANDARD, MOTION_EXIT_SCALE, MOTION_SURFACE_CLIP_BLEED_PX, MOTION_SURFACE_CLIP_PERCENT, MOTION_SURFACE_SCALE, MOTION_TIMING, MOTION_TOOLTIP_DISTANCE, MOTION_TOOLTIP_SCALE, SPRING_PANEL } from "./tokens.js";
1
+ import { MOTION_DIALOG_DISTANCE, MOTION_DIALOG_EXIT_DISTANCE, MOTION_EASE, MOTION_EASE_STANDARD, MOTION_EXIT_SCALE, MOTION_SURFACE_SCALE, MOTION_TIMING, SPRING_PANEL } from "./tokens.js";
2
+ /** Fraction of Arc's drawer close after which the panel starts to fade. */
3
+ const SHEET_EXIT_FADE_START = .65;
2
4
  const EASE_OUT = [...MOTION_EASE];
3
- const EASE_DRAWER = [...MOTION_EASE_DRAWER];
4
5
  const EASE_STANDARD = [...MOTION_EASE_STANDARD];
5
6
  const SIDES = [
6
7
  "top",
@@ -8,68 +9,11 @@ const SIDES = [
8
9
  "bottom",
9
10
  "left"
10
11
  ];
11
- const ALIGNS = [
12
- "start",
13
- "center",
14
- "end"
15
- ];
16
- /** Reads Radix placement attributes, tolerating primitives that do not position with a popper. */
17
- function readPlacement(element) {
18
- const side = element.getAttribute("data-side");
19
- const align = element.getAttribute("data-align");
20
- return {
21
- side: SIDES.includes(side) ? side : undefined,
22
- align: ALIGNS.includes(align) ? align : "center"
23
- };
24
- }
25
12
  /** Builds a transform with explicit identity parts, so Motion never reads a missing scale as zero. */
26
13
  function transform(x, y, scale = 1) {
27
14
  const unit = (value) => typeof value === "number" ? `${value}px` : value;
28
15
  return `translate(${unit(x)}, ${unit(y)}) scale(${scale})`;
29
16
  }
30
- /** Offset pointing away from the trigger, so content appears to emerge from it. */
31
- function offsetAwayFromTrigger(side, distance) {
32
- if (side === "top") return {
33
- x: 0,
34
- y: distance
35
- };
36
- if (side === "left") return {
37
- x: distance,
38
- y: 0
39
- };
40
- if (side === "right") return {
41
- x: -distance,
42
- y: 0
43
- };
44
- if (side === "bottom") return {
45
- x: 0,
46
- y: -distance
47
- };
48
- return {
49
- x: 0,
50
- y: 0
51
- };
52
- }
53
- /**
54
- * Open edges extend the clip past the box, so the ring and drop shadow drawn outside it
55
- * (Tailwind rings are box-shadows) are never cut while the surface reveals or settles.
56
- */
57
- const OPEN_EDGE = `-${MOTION_SURFACE_CLIP_BLEED_PX}px`;
58
- /** Fully revealed clip: nothing of the surface, its outline or its shadow is hidden. */
59
- const REVEALED_CLIP = `inset(${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE} ${OPEN_EDGE})`;
60
- /** Collapsed clip anchored at the corner or edge closest to the trigger. */
61
- function collapsedClip(side, align) {
62
- const hidden = `${MOTION_SURFACE_CLIP_PERCENT}%`;
63
- const half = `${MOTION_SURFACE_CLIP_PERCENT / 2}%`;
64
- /** Maps an alignment to the inset kept on the leading and trailing edges of the cross axis. */
65
- const crossAxis = (value) => value === "start" ? [OPEN_EDGE, hidden] : value === "end" ? [hidden, OPEN_EDGE] : [half, half];
66
- if (side === "bottom" || side === "top") {
67
- const [left, right] = crossAxis(align);
68
- return side === "bottom" ? `inset(${OPEN_EDGE} ${right} ${hidden} ${left})` : `inset(${hidden} ${right} ${OPEN_EDGE} ${left})`;
69
- }
70
- const [top, bottom] = crossAxis(align);
71
- return side === "right" ? `inset(${top} ${hidden} ${bottom} ${OPEN_EDGE})` : `inset(${top} ${OPEN_EDGE} ${bottom} ${hidden})`;
72
- }
73
17
  /**
74
18
  * Arc's dialog leave: a short tween on the standard curve, so it never lingers and a reopen
75
19
  * retargets from wherever the panel is.
@@ -80,16 +24,17 @@ const DIALOG_LEAVE = {
80
24
  };
81
25
  /** Edge-panel travel: fully off-screen on the side the sheet is attached to. */
82
26
  function sheetOffset(element) {
83
- const side = readPlacement(element).side ?? "right";
84
- if (side === "left") return {
27
+ const side = element.getAttribute("data-side");
28
+ const resolved = SIDES.includes(side) ? side : "right";
29
+ if (resolved === "left") return {
85
30
  x: "-100%",
86
31
  y: "0%"
87
32
  };
88
- if (side === "top") return {
33
+ if (resolved === "top") return {
89
34
  x: "0%",
90
35
  y: "-100%"
91
36
  };
92
- if (side === "bottom") return {
37
+ if (resolved === "bottom") return {
93
38
  x: "0%",
94
39
  y: "100%"
95
40
  };
@@ -100,7 +45,6 @@ function sheetOffset(element) {
100
45
  }
101
46
  /** Entrance playback for each surface kind, on Arc's motion presets. */
102
47
  export function surfaceEnter(element, kind) {
103
- const { side, align } = readPlacement(element);
104
48
  if (kind === "overlay") {
105
49
  return {
106
50
  keyframes: { opacity: [0, 1] },
@@ -110,62 +54,28 @@ export function surfaceEnter(element, kind) {
110
54
  }
111
55
  };
112
56
  }
113
- if (kind === "tooltip") {
114
- // Arc's tooltip: a short rise from its trigger and a fade, without blur.
115
- const offset = offsetAwayFromTrigger(side, MOTION_TOOLTIP_DISTANCE);
116
- return {
117
- keyframes: {
118
- opacity: [0, 1],
119
- transform: [transform(offset.x, offset.y, MOTION_TOOLTIP_SCALE), transform(0, 0)]
120
- },
121
- transition: {
122
- duration: MOTION_TIMING.fast,
123
- ease: EASE_OUT
124
- }
125
- };
126
- }
127
- // The deprecated center morph now plays Arc's dialog transition, like the library's own dialogs.
128
- if (kind === "dialog" || kind === "center-morph") {
129
- // Arc's dialog: the panel rises and scales in on the smooth spring while it fades in quickly.
130
- return {
131
- keyframes: {
132
- opacity: [0, 1],
133
- transform: [transform(0, MOTION_DIALOG_DISTANCE, MOTION_SURFACE_SCALE), transform(0, 0)]
134
- },
135
- transition: {
136
- ...SPRING_PANEL,
137
- opacity: {
138
- duration: MOTION_TIMING.fast,
139
- ease: EASE_OUT
140
- }
141
- }
142
- };
143
- }
144
57
  if (kind === "sheet") {
58
+ // Arc's drawer: the panel slides in from its edge on the smooth spring, at full opacity.
145
59
  const offset = sheetOffset(element);
146
60
  return {
147
- keyframes: { transform: [transform(offset.x, offset.y), transform("0%", "0%")] },
61
+ // Opacity is listed at rest so a reopen during the close fades back from where the close left it.
62
+ keyframes: {
63
+ transform: [transform(offset.x, offset.y), transform("0%", "0%")],
64
+ opacity: [1, 1]
65
+ },
148
66
  transition: SPRING_PANEL
149
67
  };
150
68
  }
151
- const keyframes = {
152
- opacity: [0, 1],
153
- transform: [transform(0, 0, MOTION_SURFACE_SCALE), transform(0, 0)]
154
- };
155
- // Primitives aligned over their trigger (Select item-aligned) have no side to reveal from.
156
- if (side) {
157
- keyframes.clipPath = [collapsedClip(side, align), REVEALED_CLIP];
158
- }
69
+ // Arc's dialog: the panel rises and scales in on the smooth spring while it fades in quickly.
159
70
  return {
160
- keyframes,
71
+ keyframes: {
72
+ opacity: [0, 1],
73
+ transform: [transform(0, MOTION_DIALOG_DISTANCE, MOTION_SURFACE_SCALE), transform(0, 0)]
74
+ },
161
75
  transition: {
162
76
  ...SPRING_PANEL,
163
77
  opacity: {
164
- duration: MOTION_TIMING.enter,
165
- ease: EASE_OUT
166
- },
167
- clipPath: {
168
- duration: MOTION_TIMING.surfaceClip,
78
+ duration: MOTION_TIMING.fast,
169
79
  ease: EASE_OUT
170
80
  }
171
81
  }
@@ -189,54 +99,43 @@ export function withRestingStyle(keyframes, resting) {
189
99
  }
190
100
  /** Exit playback: brief and eased so dismissal never blocks the next interaction. */
191
101
  export function surfaceExit(element, kind) {
192
- const exitTween = {
193
- duration: MOTION_TIMING.exit,
194
- ease: EASE_OUT
195
- };
196
102
  if (kind === "overlay") {
197
103
  return {
198
104
  keyframes: { opacity: [1, 0] },
199
105
  transition: DIALOG_LEAVE
200
106
  };
201
107
  }
202
- if (kind === "tooltip") {
203
- // Arc's tooltip leaves in place, shrinking slightly while it fades, on the instant timing.
204
- return {
205
- keyframes: {
206
- opacity: [1, 0],
207
- transform: [transform(0, 0), transform(0, 0, MOTION_EXIT_SCALE)]
208
- },
209
- transition: {
210
- duration: MOTION_TIMING.instant,
211
- ease: EASE_STANDARD
212
- }
213
- };
214
- }
215
- if (kind === "dialog" || kind === "center-morph") {
216
- return {
217
- keyframes: {
218
- opacity: [1, 0],
219
- transform: [transform(0, 0), transform(0, MOTION_DIALOG_EXIT_DISTANCE, MOTION_EXIT_SCALE)]
220
- },
221
- transition: DIALOG_LEAVE
222
- };
223
- }
224
108
  if (kind === "sheet") {
109
+ // Arc's drawer close: a tween on the standard curve that holds the panel opaque until it is mostly gone.
225
110
  const offset = sheetOffset(element);
226
- // A spring would linger at the edge; the drawer curve accelerates the panel away.
227
111
  return {
228
- keyframes: { transform: [transform("0%", "0%"), transform(offset.x, offset.y)] },
112
+ keyframes: {
113
+ transform: [transform("0%", "0%"), transform(offset.x, offset.y)],
114
+ opacity: [
115
+ 1,
116
+ 1,
117
+ 0
118
+ ]
119
+ },
229
120
  transition: {
230
121
  duration: MOTION_TIMING.sheetExit,
231
- ease: EASE_DRAWER
122
+ ease: EASE_STANDARD,
123
+ opacity: {
124
+ duration: MOTION_TIMING.sheetExit,
125
+ times: [
126
+ 0,
127
+ SHEET_EXIT_FADE_START,
128
+ 1
129
+ ]
130
+ }
232
131
  }
233
132
  };
234
133
  }
235
134
  return {
236
135
  keyframes: {
237
136
  opacity: [1, 0],
238
- transform: [transform(0, 0), transform(0, 0, MOTION_SURFACE_SCALE)]
137
+ transform: [transform(0, 0), transform(0, MOTION_DIALOG_EXIT_DISTANCE, MOTION_EXIT_SCALE)]
239
138
  },
240
- transition: exitTween
139
+ transition: DIALOG_LEAVE
241
140
  };
242
141
  }
@@ -9,55 +9,23 @@ export declare const MOTION_TIMING: {
9
9
  readonly standard: 0.24;
10
10
  /** Arc `duration.considered`: the slowest tween, for large layout changes. */
11
11
  readonly considered: 0.48;
12
- /** Arc `duration.standard`: inline messages that appear next to the content they describe. */
13
- readonly message: 0.24;
14
12
  /** Arc `duration.standard`: opacity of panels whose size moves on a spring. */
15
13
  readonly panel: 0.24;
16
14
  /** Arc `duration.standard`: scrims fading in behind dialogs and sheets. */
17
15
  readonly overlay: 0.24;
18
16
  /** Arc `duration.exit`: leaving is faster than arriving. */
19
17
  readonly exit: 0.18;
20
- readonly surfaceClip: 0.32;
21
- /**
22
- * @deprecated Invalid fields no longer shake: the error is told by color and message. Kept for consumers that
23
- * animate their own fields.
24
- */
25
- readonly shake: 0.45;
26
- readonly checkDraw: 0.3;
27
- readonly checkDrawDelay: 0.04;
28
- /** Arc `duration.fast`: the fade of an icon swapped in place; its scale rides `SPRING_POP`. */
29
- readonly iconSwap: 0.16;
30
- /** Arc `duration.fast`: options fading in with their list. */
31
- readonly listItem: 0.16;
32
- readonly listDelay: 0.05;
18
+ /** Arc `duration.standard`: a check mark drawing its stroke. */
19
+ readonly checkDraw: 0.24;
33
20
  /** Arc `stagger.item`. */
34
21
  readonly listStagger: 0.035;
35
- readonly closeEnter: 0.2;
36
- readonly closeDelay: 0.16;
37
22
  /** Arc `duration.standard`: edge panels leaving the viewport. */
38
23
  readonly sheetExit: 0.24;
39
- /**
40
- * @deprecated Dialogs no longer unfold from their center; they rise and scale in on `SPRING_PANEL`. Kept for
41
- * consumers that animate their own surfaces with it.
42
- */
43
- readonly centerMorph: 0.43;
44
- /**
45
- * @deprecated Dialogs no longer fold back to their center; they leave in `MOTION_TIMING.fast`. Kept for consumers
46
- * that animate their own surfaces with it.
47
- */
48
- readonly centerMorphFold: 0.24;
49
- readonly reveal: 0.4;
50
- /** Heart and badge pops that confirm a toggle. */
51
- readonly pop: 0.32;
52
- /** Height of expanding and collapsing regions. */
53
- readonly collapse: 0.26;
54
- /** Arc `duration.standard`. */
55
- readonly monthSwap: 0.24;
24
+ /** Blink period of the typing cursor, the one loop that shows live status. */
56
25
  readonly cursorBlink: 1;
57
- readonly skeleton: 1.8;
58
26
  };
59
- /** Items beyond this position share the last stagger delay, so long lists never lag behind. */
60
- export declare const MOTION_LIST_STAGGER_LIMIT = 10;
27
+ /** Arc staggers at most the first four items of a list; the rest share the last delay, so long lists never lag. */
28
+ export declare const MOTION_LIST_STAGGER_LIMIT = 4;
61
29
  /** Arc `ease.enter`: strong ease-out for entrances; weak defaults such as `ease-out` feel sluggish. */
62
30
  export declare const MOTION_EASE: readonly [0.16, 1, 0.3, 1];
63
31
  /** Arc `ease.exit`: accelerates away, for elements leaving the screen. */
@@ -66,21 +34,13 @@ export declare const MOTION_EASE_EXIT: readonly [0.7, 0, 0.84, 0];
66
34
  export declare const MOTION_EASE_STANDARD: readonly [0.22, 1, 0.36, 1];
67
35
  /** Arc `ease.inOut`: elements that move while already on screen, and looping effects. */
68
36
  export declare const MOTION_EASE_IN_OUT: readonly [0.65, 0, 0.35, 1];
69
- /** Drawer curve for edge panels leaving the viewport. */
70
- export declare const MOTION_EASE_DRAWER: readonly [0.32, 0.72, 0, 1];
71
- /**
72
- * Near-linear curve for the center morph: a spring or strong ease-out would resolve the clip
73
- * early and spend the last frames barely moving, so the whole duration reads as unfolding.
74
- * @deprecated Dialogs no longer unfold from their center. Kept for consumers that animate their own surfaces with it.
75
- */
76
- export declare const MOTION_EASE_UNFOLD: readonly [0.2, 0, 0.2, 1];
77
37
  /** Arc `spring.snappy`: press feedback on buttons and other tappable surfaces. */
78
38
  export declare const SPRING_PRESS: {
79
39
  readonly type: "spring";
80
40
  readonly visualDuration: 0.26;
81
41
  readonly bounce: 0.12;
82
42
  };
83
- /** Arc `spring.smooth`: overlay panel entrances (dialogs, sheets and floating surfaces); never overshoots. */
43
+ /** Arc `spring.smooth`: panels, heights and overlay entrances; never overshoots. */
84
44
  export declare const SPRING_PANEL: {
85
45
  readonly type: "spring";
86
46
  readonly visualDuration: 0.4;
@@ -92,36 +52,12 @@ export declare const SPRING_LAYOUT: {
92
52
  readonly visualDuration: 0.42;
93
53
  readonly bounce: 0.16;
94
54
  };
95
- /** Arc `spring.snappy`: keyboard highlight in menus and lists, quick enough to keep up with a held arrow key. */
96
- export declare const SPRING_HIGHLIGHT: {
97
- readonly type: "spring";
98
- readonly visualDuration: 0.26;
99
- readonly bounce: 0.12;
100
- };
101
- /** Arc `spring.morph`: the tab indicator gliding between tabs. */
102
- export declare const SPRING_TABS: {
103
- readonly type: "spring";
104
- readonly visualDuration: 0.42;
105
- readonly bounce: 0.16;
106
- };
107
- /** Arc `spring.snappy`: small tooltip surfaces. */
108
- export declare const SPRING_TOOLTIP: {
109
- readonly type: "spring";
110
- readonly visualDuration: 0.26;
111
- readonly bounce: 0.12;
112
- };
113
55
  /** Arc `spring.snappy`: disclosure chevrons turning toward their new state. */
114
56
  export declare const SPRING_CHEVRON: {
115
57
  readonly type: "spring";
116
58
  readonly visualDuration: 0.26;
117
59
  readonly bounce: 0.12;
118
60
  };
119
- /** Arc `spring.smooth`: the switch thumb reports state, so it lands without overshoot. */
120
- export declare const SPRING_THUMB: {
121
- readonly type: "spring";
122
- readonly visualDuration: 0.4;
123
- readonly bounce: 0;
124
- };
125
61
  /** Arc `spring.snappy`: small, confident pops for counters, badges and swapped icons. */
126
62
  export declare const SPRING_POP: {
127
63
  readonly type: "spring";
@@ -130,56 +66,16 @@ export declare const SPRING_POP: {
130
66
  };
131
67
  /** Arc's press: about 0.97, so every pressable reads as the same push. */
132
68
  export declare const MOTION_PRESS_SCALE = 0.97;
133
- export declare const MOTION_SUBTLE_PRESS_SCALE = 0.98;
134
- export declare const MOTION_TOGGLE_PRESS_SCALE = 0.92;
135
- export declare const MOTION_HOVER_SCALE = 1.02;
136
- export declare const MOTION_THUMB_SQUISH_SCALE = 0.9;
137
- export declare const MOTION_ITEM_CHECK_SCALE = 0.75;
138
- /** Arc's icon swap: the incoming icon grows from 0.6 on `SPRING_POP`. */
139
- export declare const MOTION_ICON_SWAP_SCALE = 0.6;
140
- export declare const MOTION_CLOSE_BUTTON_SCALE = 0.8;
141
- export declare const MOTION_LIST_ITEM_DISTANCE = 6;
142
- /** Scale a freshly inserted list item, option or inline message starts from, and a leaving one shrinks to. */
143
- export declare const MOTION_ITEM_ENTER_SCALE = 0.98;
144
- /** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
145
- export declare const MOTION_REVEAL_SCALE = 1.06;
146
- export declare const MOTION_REVEAL_BLUR_PX = 6;
147
- /** Calendar months slide just enough to show the direction of navigation. */
69
+ /** Arc's calendar title slides just enough to show the direction of navigation. */
148
70
  export declare const MOTION_MONTH_DISTANCE = 12;
149
- /** Skeleton shine travels from fully before the box to fully past it, as a `translate` value. */
150
- export declare const MOTION_SHIMMER_TRANSLATE: readonly ["-100% 0", "100% 0"];
151
- /** Hovered interactive cards gain a soft drop shadow; the rest value has the same shape, invisible. */
152
- export declare const MOTION_CARD_SHADOW_LIFT = "0px 4px 16px 0px rgba(0, 0, 0, 0.08)";
153
- export declare const MOTION_CARD_SHADOW_REST = "0px 0px 0px 0px rgba(0, 0, 0, 0)";
154
- /** Arc's dialog panel scale on entrance; floating surfaces start from it too. */
71
+ /** Arc's dialog panel scale on entrance. */
155
72
  export declare const MOTION_SURFACE_SCALE = 0.96;
156
- /** Scale a dialog or tooltip shrinks to while it leaves (Arc). */
73
+ /** Scale a dialog shrinks to while it leaves (Arc). */
157
74
  export declare const MOTION_EXIT_SCALE = 0.98;
158
- /** Fraction of the surface kept hidden by the clip at the start of its reveal, in percent. */
159
- export declare const MOTION_SURFACE_CLIP_PERCENT = 92;
160
- /** Room left outside a revealing surface for its ring and drop shadow (`shadow-lg` spans ~22px). */
161
- export declare const MOTION_SURFACE_CLIP_BLEED_PX = 24;
162
- /** Arc's tooltip rise from its trigger, in pixels. */
163
- export declare const MOTION_TOOLTIP_DISTANCE = 3;
164
- /** Arc's tooltip scale on entrance. */
165
- export declare const MOTION_TOOLTIP_SCALE = 0.97;
166
75
  /** Arc's dialog rise on entrance, in pixels. */
167
76
  export declare const MOTION_DIALOG_DISTANCE = 8;
168
77
  /** Arc's dialog drop while it leaves, in pixels. */
169
78
  export declare const MOTION_DIALOG_EXIT_DISTANCE = 4;
170
- /**
171
- * Inset kept on every side of a center-morph dialog while folded, in percent: a sliver at its center.
172
- * @deprecated Dialogs no longer unfold from their center. Kept for consumers that animate their own surfaces with it.
173
- */
174
- export declare const MOTION_CENTER_MORPH_FOLDED_PERCENT = 48;
175
- export declare const MOTION_CONTENT_DISTANCE = 4;
176
- /**
177
- * @deprecated Invalid fields no longer shake: the error is told by color and message. Kept for consumers that
178
- * animate their own fields.
179
- */
180
- export declare const MOTION_INVALID_SHAKE_PX: readonly [0, -6, 6, -4, 4, -2, 0];
181
79
  /** Time after an item loses its active state during which a new active item still glides from it. */
182
80
  export declare const GLIDE_CONTINUITY_MS = 300;
183
- export type MotionKind = "press" | "subtle-press" | "toggle" | "fade" | "content" | "message" | "card" | "row" | "field" | "thumb" | "check" | "selection" | "item-check" | "rotate" | "list-item" | "icon-swap" | "delayed-pop" | "skeleton" | "reveal" | "link" | "icon" | "tooltip" | "surface" | "dialog"
184
- /** @deprecated Library dialogs use `dialog`. */
185
- | "center-morph" | "sheet" | "overlay";
81
+ export type MotionKind = "rotate" | "item-check" | "icon-swap" | "message" | "reveal" | "dialog" | "sheet" | "overlay";
@@ -1,9 +1,8 @@
1
1
  /**
2
- * Defines the timing, curves and physics shared by Motion animations, aligned with Arc's motion presets
2
+ * Defines the timing, curves and physics shared by Motion animations. Every value is one of Arc's motion presets
3
3
  * (https://uiarc.dev, `components/arc/lib/motion-tokens.ts`): `snappy` for presses and small indicators, `smooth` for
4
4
  * panels and anything that reports state, `morph` for shared highlights. Motion explains cause and effect; it does not
5
5
  * decorate. Public: consumers animate their own product surfaces with these tokens so they move like the library.
6
- * Names are stable API; values follow Arc.
7
6
  */
8
7
  import { ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SMOOTH, ARC_SPRING_SNAPPY, ARC_STAGGER } from "./arc-tokens.js";
9
8
  export const MOTION_TIMING = {
@@ -17,55 +16,23 @@ export const MOTION_TIMING = {
17
16
  standard: ARC_DURATION.standard,
18
17
  /** Arc `duration.considered`: the slowest tween, for large layout changes. */
19
18
  considered: ARC_DURATION.considered,
20
- /** Arc `duration.standard`: inline messages that appear next to the content they describe. */
21
- message: ARC_DURATION.standard,
22
19
  /** Arc `duration.standard`: opacity of panels whose size moves on a spring. */
23
20
  panel: ARC_DURATION.standard,
24
21
  /** Arc `duration.standard`: scrims fading in behind dialogs and sheets. */
25
22
  overlay: ARC_DURATION.standard,
26
23
  /** Arc `duration.exit`: leaving is faster than arriving. */
27
24
  exit: ARC_DURATION.exit,
28
- surfaceClip: .32,
29
- /**
30
- * @deprecated Invalid fields no longer shake: the error is told by color and message. Kept for consumers that
31
- * animate their own fields.
32
- */
33
- shake: .45,
34
- checkDraw: .3,
35
- checkDrawDelay: .04,
36
- /** Arc `duration.fast`: the fade of an icon swapped in place; its scale rides `SPRING_POP`. */
37
- iconSwap: ARC_DURATION.fast,
38
- /** Arc `duration.fast`: options fading in with their list. */
39
- listItem: ARC_DURATION.fast,
40
- listDelay: .05,
25
+ /** Arc `duration.standard`: a check mark drawing its stroke. */
26
+ checkDraw: ARC_DURATION.standard,
41
27
  /** Arc `stagger.item`. */
42
28
  listStagger: ARC_STAGGER.item,
43
- closeEnter: .2,
44
- closeDelay: .16,
45
29
  /** Arc `duration.standard`: edge panels leaving the viewport. */
46
30
  sheetExit: ARC_DURATION.standard,
47
- /**
48
- * @deprecated Dialogs no longer unfold from their center; they rise and scale in on `SPRING_PANEL`. Kept for
49
- * consumers that animate their own surfaces with it.
50
- */
51
- centerMorph: .43,
52
- /**
53
- * @deprecated Dialogs no longer fold back to their center; they leave in `MOTION_TIMING.fast`. Kept for consumers
54
- * that animate their own surfaces with it.
55
- */
56
- centerMorphFold: .24,
57
- reveal: .4,
58
- /** Heart and badge pops that confirm a toggle. */
59
- pop: .32,
60
- /** Height of expanding and collapsing regions. */
61
- collapse: .26,
62
- /** Arc `duration.standard`. */
63
- monthSwap: ARC_DURATION.standard,
64
- cursorBlink: 1,
65
- skeleton: 1.8
31
+ /** Blink period of the typing cursor, the one loop that shows live status. */
32
+ cursorBlink: 1
66
33
  };
67
- /** Items beyond this position share the last stagger delay, so long lists never lag behind. */
68
- export const MOTION_LIST_STAGGER_LIMIT = 10;
34
+ /** Arc staggers at most the first four items of a list; the rest share the last delay, so long lists never lag. */
35
+ export const MOTION_LIST_STAGGER_LIMIT = 4;
69
36
  /** Arc `ease.enter`: strong ease-out for entrances; weak defaults such as `ease-out` feel sluggish. */
70
37
  export const MOTION_EASE = ARC_EASE.enter;
71
38
  /** Arc `ease.exit`: accelerates away, for elements leaving the screen. */
@@ -74,99 +41,27 @@ export const MOTION_EASE_EXIT = ARC_EASE.exit;
74
41
  export const MOTION_EASE_STANDARD = ARC_EASE.standard;
75
42
  /** Arc `ease.inOut`: elements that move while already on screen, and looping effects. */
76
43
  export const MOTION_EASE_IN_OUT = ARC_EASE.inOut;
77
- /** Drawer curve for edge panels leaving the viewport. */
78
- export const MOTION_EASE_DRAWER = [
79
- .32,
80
- .72,
81
- 0,
82
- 1
83
- ];
84
- /**
85
- * Near-linear curve for the center morph: a spring or strong ease-out would resolve the clip
86
- * early and spend the last frames barely moving, so the whole duration reads as unfolding.
87
- * @deprecated Dialogs no longer unfold from their center. Kept for consumers that animate their own surfaces with it.
88
- */
89
- export const MOTION_EASE_UNFOLD = [
90
- .2,
91
- 0,
92
- .2,
93
- 1
94
- ];
95
44
  /** Arc `spring.snappy`: press feedback on buttons and other tappable surfaces. */
96
45
  export const SPRING_PRESS = ARC_SPRING_SNAPPY;
97
- /** Arc `spring.smooth`: overlay panel entrances (dialogs, sheets and floating surfaces); never overshoots. */
46
+ /** Arc `spring.smooth`: panels, heights and overlay entrances; never overshoots. */
98
47
  export const SPRING_PANEL = ARC_SPRING_SMOOTH;
99
48
  /** Arc `spring.morph`: shared-layout glides, indicators and highlights moving between items. */
100
49
  export const SPRING_LAYOUT = ARC_SPRING_MORPH;
101
- /** Arc `spring.snappy`: keyboard highlight in menus and lists, quick enough to keep up with a held arrow key. */
102
- export const SPRING_HIGHLIGHT = ARC_SPRING_SNAPPY;
103
- /** Arc `spring.morph`: the tab indicator gliding between tabs. */
104
- export const SPRING_TABS = ARC_SPRING_MORPH;
105
- /** Arc `spring.snappy`: small tooltip surfaces. */
106
- export const SPRING_TOOLTIP = ARC_SPRING_SNAPPY;
107
50
  /** Arc `spring.snappy`: disclosure chevrons turning toward their new state. */
108
51
  export const SPRING_CHEVRON = ARC_SPRING_SNAPPY;
109
- /** Arc `spring.smooth`: the switch thumb reports state, so it lands without overshoot. */
110
- export const SPRING_THUMB = ARC_SPRING_SMOOTH;
111
52
  /** Arc `spring.snappy`: small, confident pops for counters, badges and swapped icons. */
112
53
  export const SPRING_POP = ARC_SPRING_SNAPPY;
113
54
  /** Arc's press: about 0.97, so every pressable reads as the same push. */
114
55
  export const MOTION_PRESS_SCALE = .97;
115
- export const MOTION_SUBTLE_PRESS_SCALE = .98;
116
- export const MOTION_TOGGLE_PRESS_SCALE = .92;
117
- export const MOTION_HOVER_SCALE = 1.02;
118
- export const MOTION_THUMB_SQUISH_SCALE = .9;
119
- export const MOTION_ITEM_CHECK_SCALE = .75;
120
- /** Arc's icon swap: the incoming icon grows from 0.6 on `SPRING_POP`. */
121
- export const MOTION_ICON_SWAP_SCALE = .6;
122
- export const MOTION_CLOSE_BUTTON_SCALE = .8;
123
- export const MOTION_LIST_ITEM_DISTANCE = 6;
124
- /** Scale a freshly inserted list item, option or inline message starts from, and a leaving one shrinks to. */
125
- export const MOTION_ITEM_ENTER_SCALE = .98;
126
- /** Loaded images settle from a slight zoom, so they develop in place instead of popping in. */
127
- export const MOTION_REVEAL_SCALE = 1.06;
128
- export const MOTION_REVEAL_BLUR_PX = 6;
129
- /** Calendar months slide just enough to show the direction of navigation. */
56
+ /** Arc's calendar title slides just enough to show the direction of navigation. */
130
57
  export const MOTION_MONTH_DISTANCE = 12;
131
- /** Skeleton shine travels from fully before the box to fully past it, as a `translate` value. */
132
- export const MOTION_SHIMMER_TRANSLATE = ["-100% 0", "100% 0"];
133
- /** Hovered interactive cards gain a soft drop shadow; the rest value has the same shape, invisible. */
134
- export const MOTION_CARD_SHADOW_LIFT = "0px 4px 16px 0px rgba(0, 0, 0, 0.08)";
135
- export const MOTION_CARD_SHADOW_REST = "0px 0px 0px 0px rgba(0, 0, 0, 0)";
136
- /** Arc's dialog panel scale on entrance; floating surfaces start from it too. */
58
+ /** Arc's dialog panel scale on entrance. */
137
59
  export const MOTION_SURFACE_SCALE = .96;
138
- /** Scale a dialog or tooltip shrinks to while it leaves (Arc). */
60
+ /** Scale a dialog shrinks to while it leaves (Arc). */
139
61
  export const MOTION_EXIT_SCALE = .98;
140
- /** Fraction of the surface kept hidden by the clip at the start of its reveal, in percent. */
141
- export const MOTION_SURFACE_CLIP_PERCENT = 92;
142
- /** Room left outside a revealing surface for its ring and drop shadow (`shadow-lg` spans ~22px). */
143
- export const MOTION_SURFACE_CLIP_BLEED_PX = 24;
144
- /** Arc's tooltip rise from its trigger, in pixels. */
145
- export const MOTION_TOOLTIP_DISTANCE = 3;
146
- /** Arc's tooltip scale on entrance. */
147
- export const MOTION_TOOLTIP_SCALE = .97;
148
62
  /** Arc's dialog rise on entrance, in pixels. */
149
63
  export const MOTION_DIALOG_DISTANCE = 8;
150
64
  /** Arc's dialog drop while it leaves, in pixels. */
151
65
  export const MOTION_DIALOG_EXIT_DISTANCE = 4;
152
- /**
153
- * Inset kept on every side of a center-morph dialog while folded, in percent: a sliver at its center.
154
- * @deprecated Dialogs no longer unfold from their center. Kept for consumers that animate their own surfaces with it.
155
- */
156
- export const MOTION_CENTER_MORPH_FOLDED_PERCENT = 48;
157
- export const MOTION_CONTENT_DISTANCE = 4;
158
- /**
159
- * @deprecated Invalid fields no longer shake: the error is told by color and message. Kept for consumers that
160
- * animate their own fields.
161
- */
162
- export const MOTION_INVALID_SHAKE_PX = [
163
- 0,
164
- -6,
165
- 6,
166
- -4,
167
- 4,
168
- -2,
169
- 0
170
- ];
171
66
  /** Time after an item loses its active state during which a new active item still glides from it. */
172
67
  export const GLIDE_CONTINUITY_MS = 300;