@passui/react 0.1.45 → 0.1.46

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 (140) hide show
  1. package/README.md +57 -46
  2. package/dist/types/src/components/accordion/accordion.d.ts +1 -1
  3. package/dist/types/src/components/breadcrumb/breadcrumb.d.ts +1 -1
  4. package/dist/types/src/components/inline-disclosure/inline-disclosure.d.ts +1 -1
  5. package/dist/types/src/components/popover/anchored-surface.d.ts +5 -1
  6. package/dist/types/src/components/popover/index.d.ts +41 -0
  7. package/dist/types/src/components/popover/popover-content.d.ts +32 -0
  8. package/dist/types/src/components/popover/popover-root.d.ts +22 -0
  9. package/dist/types/src/components/popover/popover-trigger.d.ts +23 -0
  10. package/dist/types/src/components/stepper/rolling-digit.d.ts +1 -1
  11. package/dist/types/src/components/table/table.d.ts +1 -1
  12. package/dist/types/src/components/view-controller/view-controller.d.ts +2 -2
  13. package/dist/types/src/index.d.ts +1 -1
  14. package/dist/types/src/machines/popover.machine.d.ts +30 -0
  15. package/package.json +307 -307
  16. package/src/appearance/index.ts +2 -2
  17. package/src/appearance/platform.tsx +76 -60
  18. package/src/appearance/theme.tsx +409 -377
  19. package/src/components/accordion/accordion.tsx +58 -49
  20. package/src/components/ambient/ambient.tsx +25 -25
  21. package/src/components/ambient/index.ts +1 -1
  22. package/src/components/aspect-ratio/aspect-ratio.tsx +21 -16
  23. package/src/components/breadcrumb/breadcrumb.tsx +63 -57
  24. package/src/components/button/button-styles.ts +39 -32
  25. package/src/components/button/button.tsx +91 -84
  26. package/src/components/button/icon-button.tsx +27 -25
  27. package/src/components/button/pending-spinner.tsx +8 -8
  28. package/src/components/button/use-pending-indicator.ts +11 -11
  29. package/src/components/chip/chip.tsx +35 -30
  30. package/src/components/code-block/code-block.tsx +40 -39
  31. package/src/components/combo-box/combo-box.tsx +5 -5
  32. package/src/components/command/command.tsx +124 -94
  33. package/src/components/compact-date-picker/calendar-month.ts +75 -53
  34. package/src/components/compact-date-picker/compact-date-picker.tsx +308 -289
  35. package/src/components/compact-time-picker/compact-time-picker.tsx +288 -281
  36. package/src/components/compact-time-picker/time-value.ts +32 -29
  37. package/src/components/content-unavailable-view/content-unavailable-view.tsx +64 -48
  38. package/src/components/content-view/content-view.tsx +168 -159
  39. package/src/components/content-view/index.ts +1 -1
  40. package/src/components/context-menu/conceal-menu-source.ts +25 -25
  41. package/src/components/context-menu/context-menu-host.tsx +439 -402
  42. package/src/components/context-menu/context-menu-store.ts +125 -123
  43. package/src/components/context-menu/menu-navigation.ts +25 -18
  44. package/src/components/context-menu/menu-position.ts +33 -29
  45. package/src/components/context-menu/menu-reveal.ts +32 -32
  46. package/src/components/context-menu/use-context-menu.ts +63 -56
  47. package/src/components/conversation/conversation.tsx +265 -263
  48. package/src/components/conversation/index.ts +1 -1
  49. package/src/components/date-picker/date-picker.tsx +95 -94
  50. package/src/components/date-picker/date-value.ts +20 -10
  51. package/src/components/dialog/dialog-host.tsx +105 -103
  52. package/src/components/dialog/dialog-store.ts +37 -36
  53. package/src/components/dialog/dialog.tsx +192 -179
  54. package/src/components/dialog/index.ts +1 -1
  55. package/src/components/disclosure-group/disclosure-group.tsx +93 -86
  56. package/src/components/divider/divider.tsx +24 -22
  57. package/src/components/inline-disclosure/inline-disclosure.tsx +40 -36
  58. package/src/components/keyboard-shortcut/keyboard-shortcut.tsx +23 -19
  59. package/src/components/labeled-content/labeled-content.tsx +68 -68
  60. package/src/components/locale-switcher/index.ts +1 -1
  61. package/src/components/locale-switcher/locale-switcher.tsx +279 -251
  62. package/src/components/menu/menu.tsx +75 -58
  63. package/src/components/morph/index.ts +2 -2
  64. package/src/components/morph/morph.tsx +227 -201
  65. package/src/components/morph/use-morph-disclosure.ts +19 -19
  66. package/src/components/one-time-code/one-time-code.tsx +216 -200
  67. package/src/components/picker/picker-trigger.ts +16 -13
  68. package/src/components/picker/picker.tsx +371 -345
  69. package/src/components/popover/anchored-surface.tsx +253 -229
  70. package/src/components/popover/index.ts +50 -0
  71. package/src/components/popover/popover-content.tsx +334 -0
  72. package/src/components/popover/popover-fit.ts +58 -53
  73. package/src/components/popover/popover-root.tsx +97 -0
  74. package/src/components/popover/popover-trigger.tsx +71 -0
  75. package/src/components/profile-image/profile-image.tsx +80 -64
  76. package/src/components/progress-view/progress-view.tsx +61 -59
  77. package/src/components/progress-view/use-liquid-progress.ts +38 -38
  78. package/src/components/radio-group/radio-group.tsx +71 -68
  79. package/src/components/search-field/expanding-search-field.tsx +191 -177
  80. package/src/components/search-field/search-field.tsx +59 -50
  81. package/src/components/search-list/search-list.tsx +246 -236
  82. package/src/components/section/section.tsx +58 -58
  83. package/src/components/secure-field/secure-field.tsx +3 -3
  84. package/src/components/segmented-control/segmented-control.tsx +136 -136
  85. package/src/components/sheet/modal-environment.ts +71 -64
  86. package/src/components/sheet/sheet-portal.tsx +58 -53
  87. package/src/components/sheet/sheet.tsx +146 -141
  88. package/src/components/sheet/use-sheet-focus.ts +97 -82
  89. package/src/components/sidebar/sidebar.tsx +78 -78
  90. package/src/components/skeleton/skeleton.tsx +30 -21
  91. package/src/components/slider/slider.tsx +113 -104
  92. package/src/components/slosh-slider/liquid-step.ts +32 -31
  93. package/src/components/slosh-slider/slosh-slider.tsx +265 -228
  94. package/src/components/stat-tile/index.ts +1 -1
  95. package/src/components/stat-tile/stat-tile.tsx +79 -68
  96. package/src/components/status-indicator/status-indicator.tsx +40 -37
  97. package/src/components/stepper/rolling-digit.tsx +82 -68
  98. package/src/components/stepper/stepper.tsx +122 -113
  99. package/src/components/swatch-picker/swatch-picker.tsx +120 -120
  100. package/src/components/tab-bar/tab-bar.tsx +149 -148
  101. package/src/components/tab-view/tab-view.tsx +140 -137
  102. package/src/components/table/table.tsx +117 -98
  103. package/src/components/text-editor/text-editor.tsx +34 -29
  104. package/src/components/text-field/text-field.tsx +182 -180
  105. package/src/components/toast/toast-store.ts +127 -115
  106. package/src/components/toast/toaster.tsx +361 -347
  107. package/src/components/toggle/toggle.tsx +297 -282
  108. package/src/components/tooltip/tooltip-host.tsx +157 -150
  109. package/src/components/view-controller/index.ts +1 -1
  110. package/src/components/view-controller/view-controller.tsx +64 -53
  111. package/src/components/wake-slider/wake-slider.tsx +220 -205
  112. package/src/hooks/scroll/minimize-decision.ts +11 -7
  113. package/src/hooks/use-anchored-disclosure.ts +19 -19
  114. package/src/hooks/use-anchored-placement.ts +29 -25
  115. package/src/hooks/use-dismiss.ts +33 -29
  116. package/src/hooks/use-floating-dismiss.ts +24 -22
  117. package/src/hooks/use-media-query.ts +67 -60
  118. package/src/hooks/use-minimize-on-scroll.ts +69 -60
  119. package/src/hooks/use-visual-viewport.ts +63 -63
  120. package/src/hooks/viewport/types.ts +16 -16
  121. package/src/hooks/viewport/viewport-metrics.ts +16 -10
  122. package/src/icons/icons.tsx +440 -328
  123. package/src/index.ts +91 -91
  124. package/src/lib/anchored-placement.ts +70 -65
  125. package/src/lib/class-names.ts +14 -13
  126. package/src/lib/clipboard.ts +8 -7
  127. package/src/lib/date.ts +61 -60
  128. package/src/lib/floating-layers.ts +39 -24
  129. package/src/lib/haptics.ts +10 -10
  130. package/src/lib/language.ts +9 -9
  131. package/src/lib/range-value.ts +27 -21
  132. package/src/lib/screen-edges.ts +33 -30
  133. package/src/lib/shapes.ts +38 -34
  134. package/src/machines/popover.machine.ts +51 -0
  135. package/src/motion/transitions.ts +46 -43
  136. package/src/styles/code-block.css +69 -43
  137. package/src/styles/motion-controls.css +393 -191
  138. package/src/tokens.ts +1 -1
  139. package/dist/types/src/components/popover/popover.d.ts +0 -21
  140. package/src/components/popover/popover.tsx +0 -334
@@ -2,151 +2,163 @@
2
2
  * App-wide toasts: short messages that confirm, report progress or explain
3
3
  * a failure. Call `toast` from anywhere; render one `<Toaster />`.
4
4
  */
5
- export type ToastTone = "neutral" | "success" | "error" | "loading"
6
- export type ToastSize = "sm" | "md" | "lg"
5
+ export type ToastTone = "neutral" | "success" | "error" | "loading";
6
+ export type ToastSize = "sm" | "md" | "lg";
7
7
 
8
8
  export interface ToastAction {
9
- label: string
10
- onClick: () => void
9
+ label: string;
10
+ onClick: () => void;
11
11
  }
12
12
 
13
13
  export interface Toast {
14
- id: number
15
- tone: ToastTone
16
- title: string
17
- description?: string
18
- action?: ToastAction
19
- /** Milliseconds before it leaves on its own; `null` stays until dismissed. */
20
- duration: number | null
21
- createdAt: number
22
- /** Pill size, content padding and title/description text scale. @default "md" */
23
- size: ToastSize
14
+ id: number;
15
+ tone: ToastTone;
16
+ title: string;
17
+ description?: string;
18
+ action?: ToastAction;
19
+ /** Milliseconds before it leaves on its own; `null` stays until dismissed. */
20
+ duration: number | null;
21
+ createdAt: number;
22
+ /** Pill size, content padding and title/description text scale. @default "md" */
23
+ size: ToastSize;
24
24
  }
25
25
 
26
26
  export interface ToastOptions {
27
- description?: string
28
- action?: ToastAction
29
- duration?: number | null
30
- /** Pill size, content padding and title/description text scale. @default "md" */
31
- size?: ToastSize
27
+ description?: string;
28
+ action?: ToastAction;
29
+ duration?: number | null;
30
+ /** Pill size, content padding and title/description text scale. @default "md" */
31
+ size?: ToastSize;
32
32
  }
33
33
 
34
- const DEFAULT_DURATION = 4200
35
- const MAX_VISIBLE = 3
34
+ const DEFAULT_DURATION = 4200;
35
+ const MAX_VISIBLE = 3;
36
36
 
37
- let toasts: Toast[] = []
38
- let nextId = 1
39
- const listeners = new Set<() => void>()
37
+ let toasts: Toast[] = [];
38
+ let nextId = 1;
39
+ const listeners = new Set<() => void>();
40
40
 
41
41
  const emit = () => {
42
- for (const listener of listeners) listener()
43
- }
42
+ for (const listener of listeners) listener();
43
+ };
44
44
 
45
- function show(tone: ToastTone, title: string, options: ToastOptions = {}): number {
46
- const id = nextId++
47
- const duration =
48
- options.duration !== undefined
49
- ? options.duration
50
- : tone === "loading"
51
- ? null
52
- : DEFAULT_DURATION
53
- toasts = [
54
- {
55
- id,
56
- tone,
57
- title,
58
- description: options.description,
59
- action: options.action,
60
- duration,
61
- createdAt: Date.now(),
62
- size: options.size ?? "md",
63
- },
64
- ...toasts,
65
- ].slice(0, MAX_VISIBLE + 2)
66
- emit()
67
- return id
45
+ function show(
46
+ tone: ToastTone,
47
+ title: string,
48
+ options: ToastOptions = {},
49
+ ): number {
50
+ const id = nextId++;
51
+ const duration =
52
+ options.duration !== undefined
53
+ ? options.duration
54
+ : tone === "loading"
55
+ ? null
56
+ : DEFAULT_DURATION;
57
+ toasts = [
58
+ {
59
+ id,
60
+ tone,
61
+ title,
62
+ description: options.description,
63
+ action: options.action,
64
+ duration,
65
+ createdAt: Date.now(),
66
+ size: options.size ?? "md",
67
+ },
68
+ ...toasts,
69
+ ].slice(0, MAX_VISIBLE + 2);
70
+ emit();
71
+ return id;
68
72
  }
69
73
 
70
74
  /** Changes a toast in place; it morphs to its new state. */
71
- function update(id: number, tone: ToastTone, title: string, options: ToastOptions = {}) {
72
- if (!toasts.some((t) => t.id === id)) return show(tone, title, options)
73
- toasts = toasts.map((t) =>
74
- t.id === id
75
- ? {
76
- ...t,
77
- tone,
78
- title,
79
- description: options.description,
80
- action: options.action,
81
- duration:
82
- options.duration !== undefined
83
- ? options.duration
84
- : tone === "loading"
85
- ? null
86
- : DEFAULT_DURATION,
87
- createdAt: Date.now(),
88
- size: options.size ?? t.size,
89
- }
90
- : t
91
- )
92
- emit()
93
- return id
75
+ function update(
76
+ id: number,
77
+ tone: ToastTone,
78
+ title: string,
79
+ options: ToastOptions = {},
80
+ ) {
81
+ if (!toasts.some((t) => t.id === id)) return show(tone, title, options);
82
+ toasts = toasts.map((t) =>
83
+ t.id === id
84
+ ? {
85
+ ...t,
86
+ tone,
87
+ title,
88
+ description: options.description,
89
+ action: options.action,
90
+ duration:
91
+ options.duration !== undefined
92
+ ? options.duration
93
+ : tone === "loading"
94
+ ? null
95
+ : DEFAULT_DURATION,
96
+ createdAt: Date.now(),
97
+ size: options.size ?? t.size,
98
+ }
99
+ : t,
100
+ );
101
+ emit();
102
+ return id;
94
103
  }
95
104
 
96
105
  function dismiss(id: number) {
97
- toasts = toasts.filter((t) => t.id !== id)
98
- emit()
106
+ toasts = toasts.filter((t) => t.id !== id);
107
+ emit();
99
108
  }
100
109
 
101
110
  interface PromiseMessages<T> {
102
- loading: string
103
- success: string | ((value: T) => string)
104
- error: string | ((error: unknown) => string)
111
+ loading: string;
112
+ success: string | ((value: T) => string);
113
+ error: string | ((error: unknown) => string);
105
114
  }
106
115
 
107
116
  export const toast = Object.assign(
108
- (title: string, options?: ToastOptions) => show("neutral", title, options),
109
- {
110
- success: (title: string, options?: ToastOptions) => show("success", title, options),
111
- error: (title: string, options?: ToastOptions) => show("error", title, options),
112
- loading: (title: string, options?: ToastOptions) => show("loading", title, options),
113
- update,
114
- dismiss,
115
- /** Shows progress, then morphs into the outcome. Returns the promise. */
116
- promise<T>(promise: Promise<T>, messages: PromiseMessages<T>): Promise<T> {
117
- const id = show("loading", messages.loading)
118
- promise.then(
119
- (value) =>
120
- update(
121
- id,
122
- "success",
123
- typeof messages.success === "function"
124
- ? messages.success(value)
125
- : messages.success
126
- ),
127
- (error: unknown) =>
128
- update(
129
- id,
130
- "error",
131
- typeof messages.error === "function"
132
- ? messages.error(error)
133
- : messages.error
134
- )
135
- )
136
- return promise
137
- },
138
- }
139
- )
117
+ (title: string, options?: ToastOptions) => show("neutral", title, options),
118
+ {
119
+ success: (title: string, options?: ToastOptions) =>
120
+ show("success", title, options),
121
+ error: (title: string, options?: ToastOptions) =>
122
+ show("error", title, options),
123
+ loading: (title: string, options?: ToastOptions) =>
124
+ show("loading", title, options),
125
+ update,
126
+ dismiss,
127
+ /** Shows progress, then morphs into the outcome. Returns the promise. */
128
+ promise<T>(promise: Promise<T>, messages: PromiseMessages<T>): Promise<T> {
129
+ const id = show("loading", messages.loading);
130
+ promise.then(
131
+ (value) =>
132
+ update(
133
+ id,
134
+ "success",
135
+ typeof messages.success === "function"
136
+ ? messages.success(value)
137
+ : messages.success,
138
+ ),
139
+ (error: unknown) =>
140
+ update(
141
+ id,
142
+ "error",
143
+ typeof messages.error === "function"
144
+ ? messages.error(error)
145
+ : messages.error,
146
+ ),
147
+ );
148
+ return promise;
149
+ },
150
+ },
151
+ );
140
152
 
141
153
  export function subscribeToasts(listener: () => void) {
142
- listeners.add(listener)
143
- return () => {
144
- listeners.delete(listener)
145
- }
154
+ listeners.add(listener);
155
+ return () => {
156
+ listeners.delete(listener);
157
+ };
146
158
  }
147
159
 
148
160
  export function getToasts(): Toast[] {
149
- return toasts
161
+ return toasts;
150
162
  }
151
163
 
152
- export const toastLimits = { visible: MAX_VISIBLE } as const
164
+ export const toastLimits = { visible: MAX_VISIBLE } as const;