@salesforce/webapp-template-feature-react-authentication-experimental 1.102.0 → 1.103.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.
package/dist/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.103.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.102.1...v1.103.0) (2026-03-16)
7
+
8
+ **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
9
+
10
+
11
+
12
+
13
+
14
+ ## [1.102.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.102.0...v1.102.1) (2026-03-16)
15
+
16
+ **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
17
+
18
+
19
+
20
+
21
+
6
22
  # [1.102.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.101.5...v1.102.0) (2026-03-16)
7
23
 
8
24
  **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
@@ -27,9 +27,11 @@
27
27
  "@tanstack/react-form": "^1.28.5",
28
28
  "class-variance-authority": "^0.7.1",
29
29
  "clsx": "^2.1.1",
30
+ "date-fns": "^4.1.0",
30
31
  "lucide-react": "^0.562.0",
31
32
  "radix-ui": "^1.4.3",
32
33
  "react": "^19.2.0",
34
+ "react-day-picker": "^9.14.0",
33
35
  "react-dom": "^19.2.0",
34
36
  "react-router": "^7.10.1",
35
37
  "shadcn": "^3.8.5",
@@ -0,0 +1,48 @@
1
+ import * as React from 'react';
2
+ import { cva, type VariantProps } from 'class-variance-authority';
3
+ import { Slot } from 'radix-ui';
4
+
5
+ import { cn } from '@/lib/utils';
6
+
7
+ const badgeVariants = cva(
8
+ 'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
9
+ {
10
+ variants: {
11
+ variant: {
12
+ default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
13
+ secondary:
14
+ 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
15
+ destructive:
16
+ 'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
17
+ outline:
18
+ 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
19
+ ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
20
+ link: 'text-primary underline-offset-4 [a&]:hover:underline',
21
+ },
22
+ },
23
+ defaultVariants: {
24
+ variant: 'default',
25
+ },
26
+ }
27
+ );
28
+
29
+ function Badge({
30
+ className,
31
+ variant = 'default',
32
+ asChild = false,
33
+ ...props
34
+ }: React.ComponentProps<'span'> &
35
+ VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
36
+ const Comp = asChild ? Slot.Root : 'span';
37
+
38
+ return (
39
+ <Comp
40
+ data-slot="badge"
41
+ data-variant={variant}
42
+ className={cn(badgeVariants({ variant }), className)}
43
+ {...props}
44
+ />
45
+ );
46
+ }
47
+
48
+ export { Badge, badgeVariants };
@@ -0,0 +1,109 @@
1
+ import * as React from 'react';
2
+ import { ChevronRight, MoreHorizontal } from 'lucide-react';
3
+ import { Slot } from 'radix-ui';
4
+
5
+ import { cn } from '@/lib/utils';
6
+
7
+ function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
8
+ return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
9
+ }
10
+
11
+ function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
12
+ return (
13
+ <ol
14
+ data-slot="breadcrumb-list"
15
+ className={cn(
16
+ 'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5',
17
+ className
18
+ )}
19
+ {...props}
20
+ />
21
+ );
22
+ }
23
+
24
+ function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
25
+ return (
26
+ <li
27
+ data-slot="breadcrumb-item"
28
+ className={cn('inline-flex items-center gap-1.5', className)}
29
+ {...props}
30
+ />
31
+ );
32
+ }
33
+
34
+ function BreadcrumbLink({
35
+ asChild,
36
+ className,
37
+ ...props
38
+ }: React.ComponentProps<'a'> & {
39
+ asChild?: boolean;
40
+ }) {
41
+ const Comp = asChild ? Slot.Root : 'a';
42
+
43
+ return (
44
+ <Comp
45
+ data-slot="breadcrumb-link"
46
+ className={cn('transition-colors hover:text-foreground', className)}
47
+ {...props}
48
+ />
49
+ );
50
+ }
51
+
52
+ function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
53
+ return (
54
+ <span
55
+ data-slot="breadcrumb-page"
56
+ role="link"
57
+ aria-disabled="true"
58
+ aria-current="page"
59
+ className={cn('font-normal text-foreground', className)}
60
+ {...props}
61
+ />
62
+ );
63
+ }
64
+
65
+ function BreadcrumbSeparator({
66
+ children,
67
+ className,
68
+ ...props
69
+ }: React.ComponentProps<'li'>) {
70
+ return (
71
+ <li
72
+ data-slot="breadcrumb-separator"
73
+ role="presentation"
74
+ aria-hidden="true"
75
+ className={cn('[&>svg]:size-3.5', className)}
76
+ {...props}
77
+ >
78
+ {children ?? <ChevronRight />}
79
+ </li>
80
+ );
81
+ }
82
+
83
+ function BreadcrumbEllipsis({
84
+ className,
85
+ ...props
86
+ }: React.ComponentProps<'span'>) {
87
+ return (
88
+ <span
89
+ data-slot="breadcrumb-ellipsis"
90
+ role="presentation"
91
+ aria-hidden="true"
92
+ className={cn('flex size-9 items-center justify-center', className)}
93
+ {...props}
94
+ >
95
+ <MoreHorizontal className="size-4" />
96
+ <span className="sr-only">More</span>
97
+ </span>
98
+ );
99
+ }
100
+
101
+ export {
102
+ Breadcrumb,
103
+ BreadcrumbList,
104
+ BreadcrumbItem,
105
+ BreadcrumbLink,
106
+ BreadcrumbPage,
107
+ BreadcrumbSeparator,
108
+ BreadcrumbEllipsis,
109
+ };
@@ -0,0 +1,232 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import {
5
+ DayPicker,
6
+ getDefaultClassNames,
7
+ type DayButton,
8
+ type Locale,
9
+ } from 'react-day-picker';
10
+
11
+ import { cn } from '@/lib/utils';
12
+ import { Button, buttonVariants } from '@/components/ui/button';
13
+ import {
14
+ ChevronLeftIcon,
15
+ ChevronRightIcon,
16
+ ChevronDownIcon,
17
+ } from 'lucide-react';
18
+
19
+ function Calendar({
20
+ className,
21
+ classNames,
22
+ showOutsideDays = true,
23
+ captionLayout = 'label',
24
+ buttonVariant = 'ghost',
25
+ locale,
26
+ formatters,
27
+ components,
28
+ ...props
29
+ }: React.ComponentProps<typeof DayPicker> & {
30
+ buttonVariant?: React.ComponentProps<typeof Button>['variant'];
31
+ }) {
32
+ const defaultClassNames = getDefaultClassNames();
33
+
34
+ return (
35
+ <DayPicker
36
+ showOutsideDays={showOutsideDays}
37
+ className={cn(
38
+ 'p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
39
+ String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
40
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
41
+ className
42
+ )}
43
+ captionLayout={captionLayout}
44
+ locale={locale}
45
+ formatters={{
46
+ formatMonthDropdown: date =>
47
+ date.toLocaleString(locale?.code, { month: 'short' }),
48
+ ...formatters,
49
+ }}
50
+ classNames={{
51
+ root: cn('w-fit', defaultClassNames.root),
52
+ months: cn(
53
+ 'relative flex flex-col gap-4 md:flex-row',
54
+ defaultClassNames.months
55
+ ),
56
+ month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
57
+ nav: cn(
58
+ 'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
59
+ defaultClassNames.nav
60
+ ),
61
+ button_previous: cn(
62
+ buttonVariants({ variant: buttonVariant }),
63
+ 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
64
+ defaultClassNames.button_previous
65
+ ),
66
+ button_next: cn(
67
+ buttonVariants({ variant: buttonVariant }),
68
+ 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
69
+ defaultClassNames.button_next
70
+ ),
71
+ month_caption: cn(
72
+ 'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
73
+ defaultClassNames.month_caption
74
+ ),
75
+ dropdowns: cn(
76
+ 'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
77
+ defaultClassNames.dropdowns
78
+ ),
79
+ dropdown_root: cn(
80
+ 'cn-calendar-dropdown-root relative rounded-(--cell-radius)',
81
+ defaultClassNames.dropdown_root
82
+ ),
83
+ dropdown: cn(
84
+ 'absolute inset-0 bg-popover opacity-0',
85
+ defaultClassNames.dropdown
86
+ ),
87
+ caption_label: cn(
88
+ 'font-medium select-none',
89
+ captionLayout === 'label'
90
+ ? 'text-sm'
91
+ : 'cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
92
+ defaultClassNames.caption_label
93
+ ),
94
+ table: 'w-full border-collapse',
95
+ weekdays: cn('flex', defaultClassNames.weekdays),
96
+ weekday: cn(
97
+ 'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
98
+ defaultClassNames.weekday
99
+ ),
100
+ week: cn('mt-2 flex w-full', defaultClassNames.week),
101
+ week_number_header: cn(
102
+ 'w-(--cell-size) select-none',
103
+ defaultClassNames.week_number_header
104
+ ),
105
+ week_number: cn(
106
+ 'text-[0.8rem] text-muted-foreground select-none',
107
+ defaultClassNames.week_number
108
+ ),
109
+ day: cn(
110
+ 'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
111
+ props.showWeekNumber
112
+ ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
113
+ : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
114
+ defaultClassNames.day
115
+ ),
116
+ range_start: cn(
117
+ 'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
118
+ defaultClassNames.range_start
119
+ ),
120
+ range_middle: cn('rounded-none', defaultClassNames.range_middle),
121
+ range_end: cn(
122
+ 'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
123
+ defaultClassNames.range_end
124
+ ),
125
+ today: cn(
126
+ 'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',
127
+ defaultClassNames.today
128
+ ),
129
+ outside: cn(
130
+ 'text-muted-foreground aria-selected:text-muted-foreground',
131
+ defaultClassNames.outside
132
+ ),
133
+ disabled: cn(
134
+ 'text-muted-foreground opacity-50',
135
+ defaultClassNames.disabled
136
+ ),
137
+ hidden: cn('invisible', defaultClassNames.hidden),
138
+ ...classNames,
139
+ }}
140
+ components={{
141
+ Root: ({ className, rootRef, ...props }) => {
142
+ return (
143
+ <div
144
+ data-slot="calendar"
145
+ ref={rootRef}
146
+ className={cn(className)}
147
+ {...props}
148
+ />
149
+ );
150
+ },
151
+ Chevron: ({ className, orientation, ...props }) => {
152
+ if (orientation === 'left') {
153
+ return (
154
+ <ChevronLeftIcon
155
+ className={cn('cn-rtl-flip size-4', className)}
156
+ {...props}
157
+ />
158
+ );
159
+ }
160
+
161
+ if (orientation === 'right') {
162
+ return (
163
+ <ChevronRightIcon
164
+ className={cn('cn-rtl-flip size-4', className)}
165
+ {...props}
166
+ />
167
+ );
168
+ }
169
+
170
+ return (
171
+ <ChevronDownIcon className={cn('size-4', className)} {...props} />
172
+ );
173
+ },
174
+ DayButton: ({ ...props }) => (
175
+ <CalendarDayButton locale={locale} {...props} />
176
+ ),
177
+ WeekNumber: ({ children, ...props }) => {
178
+ return (
179
+ <td {...props}>
180
+ <div className="flex size-(--cell-size) items-center justify-center text-center">
181
+ {children}
182
+ </div>
183
+ </td>
184
+ );
185
+ },
186
+ ...components,
187
+ }}
188
+ {...props}
189
+ />
190
+ );
191
+ }
192
+
193
+ function CalendarDayButton({
194
+ className,
195
+ day,
196
+ modifiers,
197
+ locale,
198
+ ...props
199
+ }: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
200
+ const defaultClassNames = getDefaultClassNames();
201
+
202
+ const ref = React.useRef<HTMLButtonElement>(null);
203
+ React.useEffect(() => {
204
+ if (modifiers.focused) ref.current?.focus();
205
+ }, [modifiers.focused]);
206
+
207
+ return (
208
+ <Button
209
+ ref={ref}
210
+ variant="ghost"
211
+ size="icon"
212
+ data-day={day.date.toLocaleDateString(locale?.code)}
213
+ data-selected-single={
214
+ modifiers.selected &&
215
+ !modifiers.range_start &&
216
+ !modifiers.range_end &&
217
+ !modifiers.range_middle
218
+ }
219
+ data-range-start={modifiers.range_start}
220
+ data-range-end={modifiers.range_end}
221
+ data-range-middle={modifiers.range_middle}
222
+ className={cn(
223
+ 'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',
224
+ defaultClassNames.day,
225
+ className
226
+ )}
227
+ {...props}
228
+ />
229
+ );
230
+ }
231
+
232
+ export { Calendar, CalendarDayButton };
@@ -0,0 +1,32 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { Checkbox as CheckboxPrimitive } from 'radix-ui';
5
+
6
+ import { cn } from '@/lib/utils';
7
+ import { CheckIcon } from 'lucide-react';
8
+
9
+ function Checkbox({
10
+ className,
11
+ ...props
12
+ }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
13
+ return (
14
+ <CheckboxPrimitive.Root
15
+ data-slot="checkbox"
16
+ className={cn(
17
+ 'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
18
+ className
19
+ )}
20
+ {...props}
21
+ >
22
+ <CheckboxPrimitive.Indicator
23
+ data-slot="checkbox-indicator"
24
+ className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
25
+ >
26
+ <CheckIcon />
27
+ </CheckboxPrimitive.Indicator>
28
+ </CheckboxPrimitive.Root>
29
+ );
30
+ }
31
+
32
+ export { Checkbox };
@@ -0,0 +1,33 @@
1
+ 'use client';
2
+
3
+ import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
4
+
5
+ function Collapsible({
6
+ ...props
7
+ }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
8
+ return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
9
+ }
10
+
11
+ function CollapsibleTrigger({
12
+ ...props
13
+ }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
14
+ return (
15
+ <CollapsiblePrimitive.CollapsibleTrigger
16
+ data-slot="collapsible-trigger"
17
+ {...props}
18
+ />
19
+ );
20
+ }
21
+
22
+ function CollapsibleContent({
23
+ ...props
24
+ }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
25
+ return (
26
+ <CollapsiblePrimitive.CollapsibleContent
27
+ data-slot="collapsible-content"
28
+ {...props}
29
+ />
30
+ );
31
+ }
32
+
33
+ export { Collapsible, CollapsibleTrigger, CollapsibleContent };
@@ -0,0 +1,127 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { format } from 'date-fns';
5
+ import { Calendar as CalendarIcon } from 'lucide-react';
6
+
7
+ import type { DateRange, DayPickerProps } from 'react-day-picker';
8
+
9
+ import { cn } from '@/lib/utils';
10
+ import { Button } from '@/components/ui/button';
11
+ import { Calendar } from '@/components/ui/calendar';
12
+ import {
13
+ Popover,
14
+ PopoverContent,
15
+ PopoverTrigger,
16
+ } from '@/components/ui/popover';
17
+
18
+ function DatePicker({ ...props }: React.ComponentProps<typeof Popover>) {
19
+ return <Popover data-slot="date-picker" {...props} />;
20
+ }
21
+
22
+ function DatePickerTrigger({
23
+ className,
24
+ children,
25
+ date,
26
+ placeholder = 'Pick a date',
27
+ dateFormat = 'PPP',
28
+ ...props
29
+ }: React.ComponentProps<typeof Button> & {
30
+ date?: Date;
31
+ placeholder?: string;
32
+ dateFormat?: string;
33
+ }) {
34
+ return (
35
+ <PopoverTrigger asChild>
36
+ <Button
37
+ variant="outline"
38
+ data-slot="date-picker-trigger"
39
+ data-empty={!date}
40
+ className={cn(
41
+ 'w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
42
+ className
43
+ )}
44
+ {...props}
45
+ >
46
+ {children ?? (
47
+ <>
48
+ <CalendarIcon />
49
+ {date ? format(date, dateFormat) : <span>{placeholder}</span>}
50
+ </>
51
+ )}
52
+ </Button>
53
+ </PopoverTrigger>
54
+ );
55
+ }
56
+
57
+ function DatePickerContent({
58
+ className,
59
+ ...props
60
+ }: React.ComponentProps<typeof PopoverContent>) {
61
+ return (
62
+ <PopoverContent
63
+ data-slot="date-picker-content"
64
+ className={cn('w-auto p-0', className)}
65
+ {...props}
66
+ />
67
+ );
68
+ }
69
+
70
+ function DatePickerRangeTrigger({
71
+ className,
72
+ children,
73
+ dateRange,
74
+ placeholder = 'Pick a date',
75
+ dateFormat = 'LLL dd, y',
76
+ ...props
77
+ }: React.ComponentProps<typeof Button> & {
78
+ dateRange?: DateRange;
79
+ placeholder?: string;
80
+ dateFormat?: string;
81
+ }) {
82
+ const hasDate = dateRange?.from != null;
83
+ return (
84
+ <PopoverTrigger asChild>
85
+ <Button
86
+ variant="outline"
87
+ data-slot="date-picker-range-trigger"
88
+ data-empty={!hasDate}
89
+ className={cn(
90
+ 'justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
91
+ className
92
+ )}
93
+ {...props}
94
+ >
95
+ {children ?? (
96
+ <>
97
+ <CalendarIcon />
98
+ {dateRange?.from ? (
99
+ dateRange.to ? (
100
+ <>
101
+ {format(dateRange.from, dateFormat)} –{' '}
102
+ {format(dateRange.to, dateFormat)}
103
+ </>
104
+ ) : (
105
+ format(dateRange.from, dateFormat)
106
+ )
107
+ ) : (
108
+ <span>{placeholder}</span>
109
+ )}
110
+ </>
111
+ )}
112
+ </Button>
113
+ </PopoverTrigger>
114
+ );
115
+ }
116
+
117
+ function DatePickerCalendar(props: DayPickerProps) {
118
+ return <Calendar data-slot="date-picker-calendar" {...props} />;
119
+ }
120
+
121
+ export {
122
+ DatePicker,
123
+ DatePickerTrigger,
124
+ DatePickerRangeTrigger,
125
+ DatePickerContent,
126
+ DatePickerCalendar,
127
+ };
@@ -0,0 +1,89 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { Popover as PopoverPrimitive } from 'radix-ui';
5
+
6
+ import { cn } from '@/lib/utils';
7
+
8
+ function Popover({
9
+ ...props
10
+ }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
11
+ return <PopoverPrimitive.Root data-slot="popover" {...props} />;
12
+ }
13
+
14
+ function PopoverTrigger({
15
+ ...props
16
+ }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
17
+ return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
18
+ }
19
+
20
+ function PopoverContent({
21
+ className,
22
+ align = 'center',
23
+ sideOffset = 4,
24
+ ...props
25
+ }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
26
+ return (
27
+ <PopoverPrimitive.Portal>
28
+ <PopoverPrimitive.Content
29
+ data-slot="popover-content"
30
+ align={align}
31
+ sideOffset={sideOffset}
32
+ className={cn(
33
+ 'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden',
34
+ className
35
+ )}
36
+ {...props}
37
+ />
38
+ </PopoverPrimitive.Portal>
39
+ );
40
+ }
41
+
42
+ function PopoverAnchor({
43
+ ...props
44
+ }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
45
+ return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
46
+ }
47
+
48
+ function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
49
+ return (
50
+ <div
51
+ data-slot="popover-header"
52
+ className={cn('flex flex-col gap-0.5 text-sm', className)}
53
+ {...props}
54
+ />
55
+ );
56
+ }
57
+
58
+ function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
59
+ return (
60
+ <div
61
+ data-slot="popover-title"
62
+ className={cn('font-medium', className)}
63
+ {...props}
64
+ />
65
+ );
66
+ }
67
+
68
+ function PopoverDescription({
69
+ className,
70
+ ...props
71
+ }: React.ComponentProps<'p'>) {
72
+ return (
73
+ <p
74
+ data-slot="popover-description"
75
+ className={cn('text-muted-foreground', className)}
76
+ {...props}
77
+ />
78
+ );
79
+ }
80
+
81
+ export {
82
+ Popover,
83
+ PopoverAnchor,
84
+ PopoverContent,
85
+ PopoverDescription,
86
+ PopoverHeader,
87
+ PopoverTitle,
88
+ PopoverTrigger,
89
+ };
@@ -1 +1 @@
1
- {"root":["./src/app.tsx","./src/appLayout.tsx","./src/navigationMenu.tsx","./src/router-utils.tsx","./src/routes.tsx","./src/components/alerts/status-alert.tsx","./src/components/layouts/card-layout.tsx","./src/components/ui/alert.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/dialog.tsx","./src/components/ui/field.tsx","./src/components/ui/index.ts","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/pagination.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/spinner.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/features/authentication/authHelpers.ts","./src/features/authentication/authenticationConfig.ts","./src/features/authentication/api/userProfileApi.ts","./src/features/authentication/context/AuthContext.tsx","./src/features/authentication/footers/footer-link.tsx","./src/features/authentication/forms/auth-form.tsx","./src/features/authentication/forms/submit-button.tsx","./src/features/authentication/hooks/form.tsx","./src/features/authentication/hooks/useCountdownTimer.ts","./src/features/authentication/hooks/useRetryWithBackoff.ts","./src/features/authentication/layout/card-skeleton.tsx","./src/features/authentication/layout/centered-page-layout.tsx","./src/features/authentication/layouts/AuthAppLayout.tsx","./src/features/authentication/layouts/authenticationRouteLayout.tsx","./src/features/authentication/layouts/privateRouteLayout.tsx","./src/features/authentication/pages/ChangePassword.tsx","./src/features/authentication/pages/ForgotPassword.tsx","./src/features/authentication/pages/Login.tsx","./src/features/authentication/pages/Profile.tsx","./src/features/authentication/pages/Register.tsx","./src/features/authentication/pages/ResetPassword.tsx","./src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx","./src/features/authentication/sessionTimeout/sessionTimeService.ts","./src/features/authentication/sessionTimeout/sessionTimeoutConfig.ts","./src/features/authentication/utils/helpers.ts","./src/lib/utils.ts","./src/pages/Home.tsx","./src/pages/NotFound.tsx","./vite-env.d.ts","./vitest-env.d.ts"],"version":"5.9.3"}
1
+ {"root":["./src/app.tsx","./src/appLayout.tsx","./src/navigationMenu.tsx","./src/router-utils.tsx","./src/routes.tsx","./src/components/alerts/status-alert.tsx","./src/components/layouts/card-layout.tsx","./src/components/ui/alert.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/datePicker.tsx","./src/components/ui/dialog.tsx","./src/components/ui/field.tsx","./src/components/ui/index.ts","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/pagination.tsx","./src/components/ui/popover.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/spinner.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/features/authentication/authHelpers.ts","./src/features/authentication/authenticationConfig.ts","./src/features/authentication/api/userProfileApi.ts","./src/features/authentication/context/AuthContext.tsx","./src/features/authentication/footers/footer-link.tsx","./src/features/authentication/forms/auth-form.tsx","./src/features/authentication/forms/submit-button.tsx","./src/features/authentication/hooks/form.tsx","./src/features/authentication/hooks/useCountdownTimer.ts","./src/features/authentication/hooks/useRetryWithBackoff.ts","./src/features/authentication/layout/card-skeleton.tsx","./src/features/authentication/layout/centered-page-layout.tsx","./src/features/authentication/layouts/AuthAppLayout.tsx","./src/features/authentication/layouts/authenticationRouteLayout.tsx","./src/features/authentication/layouts/privateRouteLayout.tsx","./src/features/authentication/pages/ChangePassword.tsx","./src/features/authentication/pages/ForgotPassword.tsx","./src/features/authentication/pages/Login.tsx","./src/features/authentication/pages/Profile.tsx","./src/features/authentication/pages/Register.tsx","./src/features/authentication/pages/ResetPassword.tsx","./src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx","./src/features/authentication/sessionTimeout/sessionTimeService.ts","./src/features/authentication/sessionTimeout/sessionTimeoutConfig.ts","./src/features/authentication/utils/helpers.ts","./src/lib/utils.ts","./src/pages/Home.tsx","./src/pages/NotFound.tsx","./vite-env.d.ts","./vitest-env.d.ts"],"version":"5.9.3"}
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
3
- "version": "1.102.0",
3
+ "version": "1.103.0",
4
4
  "description": "Base SFDX project template",
5
5
  "private": true,
6
6
  "files": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforce/webapp-template-feature-react-authentication-experimental",
3
- "version": "1.102.0",
3
+ "version": "1.103.0",
4
4
  "description": "Authentication feature for web applications",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "",
@@ -16,7 +16,7 @@
16
16
  "clean": "rm -rf dist"
17
17
  },
18
18
  "devDependencies": {
19
- "@salesforce/webapp-experimental": "^1.102.0",
19
+ "@salesforce/webapp-experimental": "^1.103.0",
20
20
  "@tanstack/react-form": "^1.27.7",
21
21
  "@types/react": "^19.2.7",
22
22
  "@types/react-dom": "^19.2.3",