@passui/react 0.1.44 → 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 -398
  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 -322
@@ -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
  }