@passui/react 0.1.45 → 0.1.47

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 (141) 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 +38 -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 +278 -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 +374 -0
  72. package/src/components/popover/popover-root.tsx +97 -0
  73. package/src/components/popover/popover-trigger.tsx +71 -0
  74. package/src/components/profile-image/profile-image.tsx +80 -64
  75. package/src/components/progress-view/progress-view.tsx +61 -59
  76. package/src/components/progress-view/use-liquid-progress.ts +38 -38
  77. package/src/components/radio-group/radio-group.tsx +71 -68
  78. package/src/components/search-field/expanding-search-field.tsx +191 -177
  79. package/src/components/search-field/search-field.tsx +59 -50
  80. package/src/components/search-list/search-list.tsx +246 -236
  81. package/src/components/section/section.tsx +58 -58
  82. package/src/components/secure-field/secure-field.tsx +3 -3
  83. package/src/components/segmented-control/segmented-control.tsx +136 -136
  84. package/src/components/sheet/modal-environment.ts +71 -64
  85. package/src/components/sheet/sheet-portal.tsx +58 -53
  86. package/src/components/sheet/sheet.tsx +146 -141
  87. package/src/components/sheet/use-sheet-focus.ts +97 -82
  88. package/src/components/sidebar/sidebar.tsx +78 -78
  89. package/src/components/skeleton/skeleton.tsx +30 -21
  90. package/src/components/slider/slider.tsx +113 -104
  91. package/src/components/slosh-slider/liquid-step.ts +32 -31
  92. package/src/components/slosh-slider/slosh-slider.tsx +265 -228
  93. package/src/components/stat-tile/index.ts +1 -1
  94. package/src/components/stat-tile/stat-tile.tsx +79 -68
  95. package/src/components/status-indicator/status-indicator.tsx +40 -37
  96. package/src/components/stepper/rolling-digit.tsx +82 -68
  97. package/src/components/stepper/stepper.tsx +122 -113
  98. package/src/components/swatch-picker/swatch-picker.tsx +120 -120
  99. package/src/components/tab-bar/tab-bar.tsx +149 -148
  100. package/src/components/tab-view/tab-view.tsx +140 -137
  101. package/src/components/table/table.tsx +117 -98
  102. package/src/components/text-editor/text-editor.tsx +34 -29
  103. package/src/components/text-field/text-field.tsx +182 -180
  104. package/src/components/toast/toast-store.ts +127 -115
  105. package/src/components/toast/toaster.tsx +361 -347
  106. package/src/components/toggle/toggle.tsx +297 -282
  107. package/src/components/tooltip/tooltip-host.tsx +157 -150
  108. package/src/components/view-controller/index.ts +1 -1
  109. package/src/components/view-controller/view-controller.tsx +64 -53
  110. package/src/components/wake-slider/wake-slider.tsx +220 -205
  111. package/src/hooks/scroll/minimize-decision.ts +11 -7
  112. package/src/hooks/use-anchored-disclosure.ts +19 -19
  113. package/src/hooks/use-anchored-placement.ts +29 -25
  114. package/src/hooks/use-dismiss.ts +33 -29
  115. package/src/hooks/use-floating-dismiss.ts +24 -22
  116. package/src/hooks/use-media-query.ts +67 -60
  117. package/src/hooks/use-minimize-on-scroll.ts +69 -60
  118. package/src/hooks/use-visual-viewport.ts +63 -63
  119. package/src/hooks/viewport/types.ts +16 -16
  120. package/src/hooks/viewport/viewport-metrics.ts +16 -10
  121. package/src/icons/icons.tsx +440 -328
  122. package/src/index.ts +91 -91
  123. package/src/lib/anchored-placement.ts +70 -65
  124. package/src/lib/class-names.ts +14 -13
  125. package/src/lib/clipboard.ts +8 -7
  126. package/src/lib/date.ts +61 -60
  127. package/src/lib/floating-layers.ts +39 -24
  128. package/src/lib/haptics.ts +10 -10
  129. package/src/lib/language.ts +9 -9
  130. package/src/lib/range-value.ts +27 -21
  131. package/src/lib/screen-edges.ts +33 -30
  132. package/src/lib/shapes.ts +38 -34
  133. package/src/machines/popover.machine.ts +51 -0
  134. package/src/motion/transitions.ts +46 -43
  135. package/src/styles/code-block.css +69 -43
  136. package/src/styles/motion-controls.css +393 -191
  137. package/src/tokens.ts +1 -1
  138. package/dist/types/src/components/popover/popover-fit.d.ts +0 -21
  139. package/dist/types/src/components/popover/popover.d.ts +0 -21
  140. package/src/components/popover/popover-fit.ts +0 -69
  141. package/src/components/popover/popover.tsx +0 -334
@@ -1,45 +1,50 @@
1
1
  /** A calendar day, with `month` counted from 1. */
2
2
  export interface CalendarDay {
3
- year: number
4
- month: number
5
- day: number
3
+ year: number;
4
+ month: number;
5
+ day: number;
6
6
  }
7
7
 
8
8
  /** Reads `YYYY-MM-DD`; null for anything else, or a date that doesn't exist. */
9
9
  export function parseDay(value: string): CalendarDay | null {
10
- const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
11
- if (!match) return null
12
- const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])]
13
- const date = new Date(Date.UTC(year, month - 1, day))
14
- const real =
15
- date.getUTCFullYear() === year &&
16
- date.getUTCMonth() === month - 1 &&
17
- date.getUTCDate() === day
18
- return real ? { year, month, day } : null
10
+ const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
11
+ if (!match) return null;
12
+ const [year, month, day] = [
13
+ Number(match[1]),
14
+ Number(match[2]),
15
+ Number(match[3]),
16
+ ];
17
+ const date = new Date(Date.UTC(year, month - 1, day));
18
+ const real =
19
+ date.getUTCFullYear() === year &&
20
+ date.getUTCMonth() === month - 1 &&
21
+ date.getUTCDate() === day;
22
+ return real ? { year, month, day } : null;
19
23
  }
20
24
 
21
25
  export function formatDay({ year, month, day }: CalendarDay): string {
22
- const pad = (value: number, width: number) => String(value).padStart(width, "0")
23
- return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`
26
+ const pad = (value: number, width: number) =>
27
+ String(value).padStart(width, "0");
28
+ return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`;
24
29
  }
25
30
 
26
31
  /** Moves by whole days, across months and years. */
27
32
  export function addDays(day: CalendarDay, count: number): CalendarDay {
28
- const date = new Date(Date.UTC(day.year, day.month - 1, day.day + count))
29
- return {
30
- year: date.getUTCFullYear(),
31
- month: date.getUTCMonth() + 1,
32
- day: date.getUTCDate(),
33
- }
33
+ const date = new Date(Date.UTC(day.year, day.month - 1, day.day + count));
34
+ return {
35
+ year: date.getUTCFullYear(),
36
+ month: date.getUTCMonth() + 1,
37
+ day: date.getUTCDate(),
38
+ };
34
39
  }
35
40
 
36
41
  /** Moves by months, keeping the day where the month allows (31 Jan + 1 is 28 or 29 Feb). */
37
42
  export function addMonths(day: CalendarDay, count: number): CalendarDay {
38
- const first = new Date(Date.UTC(day.year, day.month - 1 + count, 1))
39
- const year = first.getUTCFullYear()
40
- const month = first.getUTCMonth() + 1
41
- const last = new Date(Date.UTC(year, month, 0)).getUTCDate()
42
- return { year, month, day: Math.min(day.day, last) }
43
+ const first = new Date(Date.UTC(day.year, day.month - 1 + count, 1));
44
+ const year = first.getUTCFullYear();
45
+ const month = first.getUTCMonth() + 1;
46
+ const last = new Date(Date.UTC(year, month, 0)).getUTCDate();
47
+ return { year, month, day: Math.min(day.day, last) };
43
48
  }
44
49
 
45
50
  /**
@@ -48,40 +53,57 @@ export function addMonths(day: CalendarDay, count: number): CalendarDay {
48
53
  * places that start on Sunday.
49
54
  */
50
55
  export function firstWeekday(locale: string): number {
51
- try {
52
- const info = new Intl.Locale(locale) as Intl.Locale & {
53
- getWeekInfo?: () => { firstDay: number }
54
- weekInfo?: { firstDay: number }
55
- }
56
- const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
57
- if (first) return first
58
- const region = info.maximize().region ?? ""
59
- return ["US", "CA", "JP", "KR", "TW", "BR", "MX", "IL", "PH", "IN"].includes(region) ? 7 : 1
60
- } catch {
61
- return 1
62
- }
56
+ try {
57
+ const info = new Intl.Locale(locale) as Intl.Locale & {
58
+ getWeekInfo?: () => { firstDay: number };
59
+ weekInfo?: { firstDay: number };
60
+ };
61
+ const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
62
+ if (first) return first;
63
+ const region = info.maximize().region ?? "";
64
+ return [
65
+ "US",
66
+ "CA",
67
+ "JP",
68
+ "KR",
69
+ "TW",
70
+ "BR",
71
+ "MX",
72
+ "IL",
73
+ "PH",
74
+ "IN",
75
+ ].includes(region)
76
+ ? 7
77
+ : 1;
78
+ } catch {
79
+ return 1;
80
+ }
63
81
  }
64
82
 
65
83
  /** Six weeks covering `year`/`month`, starting on `firstDay` (1 to 7). */
66
84
  export function monthGrid(
67
- year: number,
68
- month: number,
69
- firstDay: number
85
+ year: number,
86
+ month: number,
87
+ firstDay: number,
70
88
  ): Array<CalendarDay & { inMonth: boolean }> {
71
- // getUTCDay counts Sunday as 0; weeks here count it as 7.
72
- const weekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7
73
- const lead = (weekday - firstDay + 7) % 7
74
- const start = addDays({ year, month, day: 1 }, -lead)
75
- return Array.from({ length: 42 }, (_, index) => {
76
- const day = addDays(start, index)
77
- return {
78
- ...day,
79
- inMonth: day.month === month && day.year === year,
80
- }
81
- })
89
+ // getUTCDay counts Sunday as 0; weeks here count it as 7.
90
+ const weekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7;
91
+ const lead = (weekday - firstDay + 7) % 7;
92
+ const start = addDays({ year, month, day: 1 }, -lead);
93
+ return Array.from({ length: 42 }, (_, index) => {
94
+ const day = addDays(start, index);
95
+ return {
96
+ ...day,
97
+ inMonth: day.month === month && day.year === year,
98
+ };
99
+ });
82
100
  }
83
101
 
84
102
  /** Whether `value` (`YYYY-MM-DD`) lies within the optional bounds. */
85
- export function withinBounds(value: string, min?: string, max?: string): boolean {
86
- return (!min || value >= min) && (!max || value <= max)
103
+ export function withinBounds(
104
+ value: string,
105
+ min?: string,
106
+ max?: string,
107
+ ): boolean {
108
+ return (!min || value >= min) && (!max || value <= max);
87
109
  }