@setsquare/ui 0.1.0 → 0.2.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/CHANGELOG.md +38 -0
- package/dist/index.d.ts +20 -13
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/labels.d.ts +11 -0
- package/dist/lib/labels.d.ts.map +1 -0
- package/dist/lib/labels.js +15 -0
- package/dist/lib/labels.js.map +1 -0
- package/dist/shell/app-header.d.ts +4 -1
- package/dist/shell/app-header.d.ts.map +1 -1
- package/dist/shell/app-header.js +2 -2
- package/dist/shell/app-header.js.map +1 -1
- package/dist/shell/dashboard-shell.d.ts +1 -1
- package/dist/shell/dashboard-shell.d.ts.map +1 -1
- package/dist/shell/dashboard-shell.js +10 -14
- package/dist/shell/dashboard-shell.js.map +1 -1
- package/dist/shell/right-panel.d.ts +7 -1
- package/dist/shell/right-panel.d.ts.map +1 -1
- package/dist/shell/right-panel.js +6 -3
- package/dist/shell/right-panel.js.map +1 -1
- package/dist/shell/sidebar.d.ts +16 -2
- package/dist/shell/sidebar.d.ts.map +1 -1
- package/dist/shell/sidebar.js +17 -8
- package/dist/shell/sidebar.js.map +1 -1
- package/dist/styles/theme.css +2 -1
- package/dist/ui/alert.d.ts +16 -2
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +11 -4
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/calendar.d.ts +9 -2
- package/dist/ui/calendar.d.ts.map +1 -1
- package/dist/ui/calendar.js +6 -6
- package/dist/ui/calendar.js.map +1 -1
- package/dist/ui/checkbox.d.ts +5 -2
- package/dist/ui/checkbox.d.ts.map +1 -1
- package/dist/ui/checkbox.js +4 -4
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/code-block.d.ts +10 -1
- package/dist/ui/code-block.d.ts.map +1 -1
- package/dist/ui/code-block.js +6 -3
- package/dist/ui/code-block.js.map +1 -1
- package/dist/ui/combo-box.d.ts +3 -2
- package/dist/ui/combo-box.d.ts.map +1 -1
- package/dist/ui/combo-box.js +2 -2
- package/dist/ui/combo-box.js.map +1 -1
- package/dist/ui/copy-button.d.ts +12 -1
- package/dist/ui/copy-button.d.ts.map +1 -1
- package/dist/ui/copy-button.js +18 -5
- package/dist/ui/copy-button.js.map +1 -1
- package/dist/ui/date-field.d.ts +22 -5
- package/dist/ui/date-field.d.ts.map +1 -1
- package/dist/ui/date-field.js +23 -17
- package/dist/ui/date-field.js.map +1 -1
- package/dist/ui/dialog.d.ts +19 -2
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +14 -8
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/error-state.d.ts +17 -1
- package/dist/ui/error-state.d.ts.map +1 -1
- package/dist/ui/error-state.js +15 -5
- package/dist/ui/error-state.js.map +1 -1
- package/dist/ui/field.d.ts +8 -1
- package/dist/ui/field.d.ts.map +1 -1
- package/dist/ui/field.js +2 -2
- package/dist/ui/field.js.map +1 -1
- package/dist/ui/file-upload.d.ts +33 -1
- package/dist/ui/file-upload.d.ts.map +1 -1
- package/dist/ui/file-upload.js +43 -15
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/form.d.ts +3 -2
- package/dist/ui/form.d.ts.map +1 -1
- package/dist/ui/form.js +17 -9
- package/dist/ui/form.js.map +1 -1
- package/dist/ui/link-card.d.ts +6 -4
- package/dist/ui/link-card.d.ts.map +1 -1
- package/dist/ui/link-card.js +4 -5
- package/dist/ui/link-card.js.map +1 -1
- package/dist/ui/number-field.d.ts +3 -2
- package/dist/ui/number-field.d.ts.map +1 -1
- package/dist/ui/number-field.js +2 -2
- package/dist/ui/number-field.js.map +1 -1
- package/dist/ui/pagination.d.ts +30 -0
- package/dist/ui/pagination.d.ts.map +1 -0
- package/dist/ui/pagination.js +48 -0
- package/dist/ui/pagination.js.map +1 -0
- package/dist/ui/radio-group.d.ts +3 -1
- package/dist/ui/radio-group.d.ts.map +1 -1
- package/dist/ui/radio-group.js +2 -2
- package/dist/ui/radio-group.js.map +1 -1
- package/dist/ui/search.d.ts +23 -5
- package/dist/ui/search.d.ts.map +1 -1
- package/dist/ui/search.js +24 -10
- package/dist/ui/search.js.map +1 -1
- package/dist/ui/select.d.ts +3 -2
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +2 -2
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/selection-bar.d.ts +14 -1
- package/dist/ui/selection-bar.d.ts.map +1 -1
- package/dist/ui/selection-bar.js +15 -6
- package/dist/ui/selection-bar.js.map +1 -1
- package/dist/ui/sheet.d.ts +6 -1
- package/dist/ui/sheet.d.ts.map +1 -1
- package/dist/ui/sheet.js +2 -2
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/tabs.d.ts +43 -0
- package/dist/ui/tabs.d.ts.map +1 -0
- package/dist/ui/tabs.js +37 -0
- package/dist/ui/tabs.js.map +1 -0
- package/dist/ui/text-field.d.ts +4 -3
- package/dist/ui/text-field.d.ts.map +1 -1
- package/dist/ui/text-field.js +4 -4
- package/dist/ui/text-field.js.map +1 -1
- package/dist/ui/theme-switcher.d.ts +14 -1
- package/dist/ui/theme-switcher.d.ts.map +1 -1
- package/dist/ui/theme-switcher.js +15 -4
- package/dist/ui/theme-switcher.js.map +1 -1
- package/dist/ui/toast.d.ts +7 -1
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +2 -11
- package/dist/ui/toast.js.map +1 -1
- package/package.json +21 -20
package/dist/ui/date-field.d.ts
CHANGED
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import { type DateFieldProps as RACDateFieldProps, type DatePickerProps as RACDatePickerProps, type DateRange, type DateRangePickerProps as RACDateRangePickerProps, type DateValue, type TimeFieldProps as RACTimeFieldProps, type TimeValue } from 'react-aria-components';
|
|
3
|
-
import { type
|
|
3
|
+
import { type CalendarLabels } from './calendar.js';
|
|
4
|
+
import { type FieldLabels, type FieldWidth } from './field.js';
|
|
5
|
+
/** Messages that say what to do, for the limits React Aria checks. */
|
|
6
|
+
/** A date field's words, for the `labels` prop; `{date}` is a date in the page's locale. */
|
|
7
|
+
export interface DateFieldLabels extends FieldLabels {
|
|
8
|
+
/** Before `minValue`. */
|
|
9
|
+
tooEarly: string;
|
|
10
|
+
/** After `maxValue`. */
|
|
11
|
+
tooLate: string;
|
|
12
|
+
/** A date `isDateUnavailable` turns down. */
|
|
13
|
+
unavailable: string;
|
|
14
|
+
}
|
|
15
|
+
/** A date picker's words: its field's and its calendar's. */
|
|
16
|
+
export type DatePickerLabels = DateFieldLabels & CalendarLabels;
|
|
4
17
|
interface FieldBase {
|
|
5
18
|
label: string;
|
|
6
19
|
/** Hint beyond the format, e.g. "The date on your certificate". */
|
|
@@ -13,26 +26,30 @@ interface FieldBase {
|
|
|
13
26
|
}
|
|
14
27
|
export interface DateFieldProps<T extends DateValue> extends FieldBase, Omit<RACDateFieldProps<T>, 'className' | 'children' | 'validate'> {
|
|
15
28
|
validate?: (value: DateValue | null) => string | string[] | true | null | undefined;
|
|
29
|
+
labels?: Partial<DateFieldLabels>;
|
|
16
30
|
}
|
|
17
31
|
/** A date typed in parts. Best for dates people know without looking — a date of birth, an expiry date. */
|
|
18
|
-
export declare function DateField<T extends DateValue>({ label, description, errorMessage, requiredMessage, validate, width, className, ...props }: DateFieldProps<T>): import("react").JSX.Element;
|
|
32
|
+
export declare function DateField<T extends DateValue>({ label, description, errorMessage, requiredMessage, validate, width, labels, className, ...props }: DateFieldProps<T>): import("react").JSX.Element;
|
|
19
33
|
export interface TimeFieldProps<T extends TimeValue> extends FieldBase, Omit<RACTimeFieldProps<T>, 'className' | 'children' | 'validate'> {
|
|
20
34
|
validate?: (value: TimeValue | null) => string | string[] | true | null | undefined;
|
|
35
|
+
labels?: Partial<FieldLabels>;
|
|
21
36
|
}
|
|
22
37
|
/** A time typed in parts. The hour cycle (12 or 24) follows the locale unless `hourCycle` is set. */
|
|
23
|
-
export declare function TimeField<T extends TimeValue>({ label, description, errorMessage, requiredMessage, validate, width, className, ...props }: TimeFieldProps<T>): import("react").JSX.Element;
|
|
38
|
+
export declare function TimeField<T extends TimeValue>({ label, description, errorMessage, requiredMessage, validate, width, labels, className, ...props }: TimeFieldProps<T>): import("react").JSX.Element;
|
|
24
39
|
export interface DatePickerProps<T extends DateValue> extends FieldBase, Omit<RACDatePickerProps<T>, 'className' | 'children' | 'validate'> {
|
|
25
40
|
validate?: (value: DateValue | null) => string | string[] | true | null | undefined;
|
|
41
|
+
labels?: Partial<DatePickerLabels>;
|
|
26
42
|
}
|
|
27
43
|
/**
|
|
28
44
|
* A date typed in parts, with a calendar for dates people need to see in context — a due date, a booking.
|
|
29
45
|
* The calendar is an alternative, never the only way in: everything can be typed.
|
|
30
46
|
*/
|
|
31
|
-
export declare function DatePicker<T extends DateValue>({ label, description, errorMessage, requiredMessage, validate, width, className, ...props }: DatePickerProps<T>): import("react").JSX.Element;
|
|
47
|
+
export declare function DatePicker<T extends DateValue>({ label, description, errorMessage, requiredMessage, validate, width, labels, className, ...props }: DatePickerProps<T>): import("react").JSX.Element;
|
|
32
48
|
export interface DateRangePickerProps<T extends DateValue> extends FieldBase, Omit<RACDateRangePickerProps<T>, 'className' | 'children' | 'validate'> {
|
|
33
49
|
validate?: (value: DateRange | null) => string | string[] | true | null | undefined;
|
|
50
|
+
labels?: Partial<DatePickerLabels>;
|
|
34
51
|
}
|
|
35
52
|
/** A start and an end date, each typed in parts, with a two-click range calendar. */
|
|
36
|
-
export declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, requiredMessage, validate, width, className, ...props }: DateRangePickerProps<T>): import("react").JSX.Element;
|
|
53
|
+
export declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, requiredMessage, validate, width, labels, className, ...props }: DateRangePickerProps<T>): import("react").JSX.Element;
|
|
37
54
|
export {};
|
|
38
55
|
//# sourceMappingURL=date-field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../src/ui/date-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAUL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,eAAe,IAAI,kBAAkB,EAC1C,KAAK,SAAS,EACd,KAAK,oBAAoB,IAAI,uBAAuB,EACpD,KAAK,SAAS,EACd,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../src/ui/date-field.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/date-field.js
CHANGED
|
@@ -6,6 +6,7 @@ import { CalendarDays } from 'lucide-react';
|
|
|
6
6
|
import { cn } from '../lib/cn.js';
|
|
7
7
|
import { Button } from './button.js';
|
|
8
8
|
import { Calendar, RangeCalendar } from './calendar.js';
|
|
9
|
+
import { fill, withLabels } from '../lib/labels.js';
|
|
9
10
|
import { FieldDescription, FieldError, FieldLabel, fieldBox, fieldStack, fieldWidths, lcFirst, withRequired, } from './field.js';
|
|
10
11
|
import { Popover } from './menu.js';
|
|
11
12
|
/**
|
|
@@ -26,9 +27,14 @@ function Segments({ className, slot }) {
|
|
|
26
27
|
// the box's height, not the target's.
|
|
27
28
|
'flex min-h-control-target min-w-(--target-min) cursor-text items-center justify-center self-stretch rounded-sm border-y-(length:--field-band) border-transparent bg-clip-padding px-1 tabular-nums outline-none caret-transparent', 'data-disabled:cursor-not-allowed data-[type=literal]:min-w-0 data-[type=literal]:cursor-default', 'data-placeholder:text-muted-foreground data-[type=literal]:px-0 data-[type=literal]:text-muted-foreground', 'data-focused:bg-primary data-focused:text-primary-foreground data-invalid:data-focused:bg-destructive data-invalid:data-focused:text-destructive-foreground') })) }));
|
|
28
29
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
const dateFieldLabels = {
|
|
31
|
+
errorPrefix: 'Error: ',
|
|
32
|
+
tooEarly: 'Enter a date on or after {date}',
|
|
33
|
+
tooLate: 'Enter a date on or before {date}',
|
|
34
|
+
unavailable: "{date} isn't available. Choose another date",
|
|
35
|
+
};
|
|
36
|
+
function useLimitMessages(minValue, maxValue, isDateUnavailable, given) {
|
|
37
|
+
const labels = withLabels(dateFieldLabels, given);
|
|
32
38
|
const { locale } = useLocale();
|
|
33
39
|
const fmt = new DateFormatter(locale, { dateStyle: 'medium' });
|
|
34
40
|
const show = (d) => fmt.format(d.toDate(getLocalTimeZone()));
|
|
@@ -36,24 +42,24 @@ function useLimitMessages(minValue, maxValue, isDateUnavailable) {
|
|
|
36
42
|
if (!value)
|
|
37
43
|
return null;
|
|
38
44
|
if (minValue && value.compare(minValue) < 0)
|
|
39
|
-
return
|
|
45
|
+
return fill(labels.tooEarly, { date: show(minValue) });
|
|
40
46
|
if (maxValue && value.compare(maxValue) > 0)
|
|
41
|
-
return
|
|
47
|
+
return fill(labels.tooLate, { date: show(maxValue) });
|
|
42
48
|
if (isDateUnavailable?.(value, null))
|
|
43
|
-
return
|
|
49
|
+
return fill(labels.unavailable, { date: show(value) });
|
|
44
50
|
return null;
|
|
45
51
|
};
|
|
46
52
|
}
|
|
47
53
|
/** A date typed in parts. Best for dates people know without looking — a date of birth, an expiry date. */
|
|
48
|
-
export function DateField({ label, description, errorMessage, requiredMessage, validate, width = 'sm', className, ...props }) {
|
|
49
|
-
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable);
|
|
54
|
+
export function DateField({ label, description, errorMessage, requiredMessage, validate, width = 'sm', labels, className, ...props }) {
|
|
55
|
+
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable, labels);
|
|
50
56
|
const required = requiredMessage ?? `Enter ${lcFirst(label)}`;
|
|
51
|
-
return (_jsxs(RACDateField, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, (v) => validate?.(v) ?? limits(v)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { requiredMessage: required, children: errorMessage }), _jsx(Segments, { className: cn(boxStyles, 'px-(--control-pad-x)') })] }));
|
|
57
|
+
return (_jsxs(RACDateField, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, (v) => validate?.(v) ?? limits(v)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: labels?.errorPrefix, requiredMessage: required, children: errorMessage }), _jsx(Segments, { className: cn(boxStyles, 'px-(--control-pad-x)') })] }));
|
|
52
58
|
}
|
|
53
59
|
/** A time typed in parts. The hour cycle (12 or 24) follows the locale unless `hourCycle` is set. */
|
|
54
|
-
export function TimeField({ label, description, errorMessage, requiredMessage, validate, width = 'sm', className, ...props }) {
|
|
60
|
+
export function TimeField({ label, description, errorMessage, requiredMessage, validate, width = 'sm', labels, className, ...props }) {
|
|
55
61
|
const required = requiredMessage ?? `Enter ${lcFirst(label)}`;
|
|
56
|
-
return (_jsxs(RACTimeField, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, validate), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { requiredMessage: required, children: errorMessage }), _jsx(Segments, { className: cn(boxStyles, 'px-(--control-pad-x)') })] }));
|
|
62
|
+
return (_jsxs(RACTimeField, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, validate), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: labels?.errorPrefix, requiredMessage: required, children: errorMessage }), _jsx(Segments, { className: cn(boxStyles, 'px-(--control-pad-x)') })] }));
|
|
57
63
|
}
|
|
58
64
|
function PickerButton() {
|
|
59
65
|
// React Aria names it ("Calendar", localised) and wires it to the popover. The painted button stays 4px
|
|
@@ -64,15 +70,15 @@ function PickerButton() {
|
|
|
64
70
|
* A date typed in parts, with a calendar for dates people need to see in context — a due date, a booking.
|
|
65
71
|
* The calendar is an alternative, never the only way in: everything can be typed.
|
|
66
72
|
*/
|
|
67
|
-
export function DatePicker({ label, description, errorMessage, requiredMessage, validate, width = 'sm', className, ...props }) {
|
|
68
|
-
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable);
|
|
73
|
+
export function DatePicker({ label, description, errorMessage, requiredMessage, validate, width = 'sm', labels, className, ...props }) {
|
|
74
|
+
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable, labels);
|
|
69
75
|
const required = requiredMessage ?? `Enter ${lcFirst(label)}`;
|
|
70
|
-
return (_jsxs(RACDatePicker, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, (v) => validate?.(v) ?? limits(v)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { requiredMessage: required, children: errorMessage }), _jsxs(Group, { className: boxStyles, children: [_jsx(Segments, { className: "ps-(--control-pad-x)" }), _jsx(PickerButton, {})] }), _jsx(Popover, { placement: "bottom end", className: "min-w-0 p-3", children: _jsx(RACDialog, { className: "outline-none", children: _jsx(Calendar, {}) }) })] }));
|
|
76
|
+
return (_jsxs(RACDatePicker, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, (v) => validate?.(v) ?? limits(v)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: labels?.errorPrefix, requiredMessage: required, children: errorMessage }), _jsxs(Group, { className: boxStyles, children: [_jsx(Segments, { className: "ps-(--control-pad-x)" }), _jsx(PickerButton, {})] }), _jsx(Popover, { placement: "bottom end", className: "min-w-0 p-3", children: _jsx(RACDialog, { className: "outline-none", children: _jsx(Calendar, { labels: labels }) }) })] }));
|
|
71
77
|
}
|
|
72
78
|
/** A start and an end date, each typed in parts, with a two-click range calendar. */
|
|
73
|
-
export function DateRangePicker({ label, description, errorMessage, requiredMessage, validate, width = 'md', className, ...props }) {
|
|
74
|
-
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable);
|
|
79
|
+
export function DateRangePicker({ label, description, errorMessage, requiredMessage, validate, width = 'md', labels, className, ...props }) {
|
|
80
|
+
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable, labels);
|
|
75
81
|
const required = requiredMessage ?? `Enter ${lcFirst(label)}`;
|
|
76
|
-
return (_jsxs(RACDateRangePicker, { ...props, validate: withRequired(props.isRequired, required, (v) => !v?.start || !v?.end, (v) => validate?.(v) ?? (v ? (limits(v.start) ?? limits(v.end)) : null)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { requiredMessage: required, children: errorMessage }), _jsxs(Group, { className: boxStyles, children: [_jsx(Segments, { slot: "start", className: "ps-(--control-pad-x)" }), _jsx("span", { "aria-hidden": "true", className: "flex items-center px-2 text-muted-foreground", children: "\u2013" }), _jsx(Segments, { slot: "end" }), _jsx(PickerButton, {})] }), _jsx(Popover, { placement: "bottom end", className: "min-w-0 p-3", children: _jsx(RACDialog, { className: "outline-none", children: _jsx(RangeCalendar, {}) }) })] }));
|
|
82
|
+
return (_jsxs(RACDateRangePicker, { ...props, validate: withRequired(props.isRequired, required, (v) => !v?.start || !v?.end, (v) => validate?.(v) ?? (v ? (limits(v.start) ?? limits(v.end)) : null)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: labels?.errorPrefix, requiredMessage: required, children: errorMessage }), _jsxs(Group, { className: boxStyles, children: [_jsx(Segments, { slot: "start", className: "ps-(--control-pad-x)" }), _jsx("span", { "aria-hidden": "true", className: "flex items-center px-2 text-muted-foreground", children: "\u2013" }), _jsx(Segments, { slot: "end" }), _jsx(PickerButton, {})] }), _jsx(Popover, { placement: "bottom end", className: "min-w-0 p-3", children: _jsx(RACDialog, { className: "outline-none", children: _jsx(RangeCalendar, { labels: labels }) }) })] }));
|
|
77
83
|
}
|
|
78
84
|
//# sourceMappingURL=date-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-field.js","sourceRoot":"","sources":["../../src/ui/date-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,SAAS,IAAI,YAAY,EACzB,SAAS,EACT,UAAU,IAAI,aAAa,EAC3B,eAAe,IAAI,kBAAkB,EACrC,WAAW,EACX,MAAM,IAAI,SAAS,EACnB,KAAK,EACL,SAAS,IAAI,YAAY,EACzB,SAAS,GAQV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"date-field.js","sourceRoot":"","sources":["../../src/ui/date-field.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/dialog.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
+
/** A Dialog's words, for the `labels` prop. */
|
|
3
|
+
export interface DialogLabels {
|
|
4
|
+
close: string;
|
|
5
|
+
}
|
|
2
6
|
export interface DialogProps {
|
|
3
7
|
isOpen: boolean;
|
|
4
8
|
onOpenChange: (open: boolean) => void;
|
|
@@ -12,10 +16,22 @@ export interface DialogProps {
|
|
|
12
16
|
/** Backdrop click and the × close it. Default true; false for confirmations. Escape always closes. */
|
|
13
17
|
isDismissable?: boolean;
|
|
14
18
|
size?: 'sm' | 'md' | 'lg';
|
|
19
|
+
labels?: Partial<DialogLabels>;
|
|
15
20
|
className?: string;
|
|
16
21
|
}
|
|
17
22
|
/** A centred modal: focus moves in and is trapped, Escape closes, focus returns to what opened it. */
|
|
18
|
-
export declare function Dialog({ isOpen, onOpenChange, title, description, children, footer, role, isDismissable, size, className, }: DialogProps): import("react").JSX.Element;
|
|
23
|
+
export declare function Dialog({ isOpen, onOpenChange, title, description, children, footer, role, isDismissable, size, labels, className, }: DialogProps): import("react").JSX.Element;
|
|
24
|
+
/** A ConfirmDialog's words, for the `labels` prop. Its cancel button's is `cancelLabel`. */
|
|
25
|
+
export interface ConfirmDialogLabels {
|
|
26
|
+
/** The type-to-confirm field's label; `{text}` is `confirmText`. */
|
|
27
|
+
typeToConfirm: string;
|
|
28
|
+
/** Its error when the text doesn't match. */
|
|
29
|
+
typeExactly: string;
|
|
30
|
+
/** Heads the error when `onConfirm` fails; `{action}` is `confirmLabel`. */
|
|
31
|
+
failedTitle: string;
|
|
32
|
+
/** The error when `onConfirm` throws without a message of its own. */
|
|
33
|
+
failed: string;
|
|
34
|
+
}
|
|
19
35
|
export interface ConfirmDialogProps {
|
|
20
36
|
isOpen: boolean;
|
|
21
37
|
onOpenChange: (open: boolean) => void;
|
|
@@ -31,11 +47,12 @@ export interface ConfirmDialogProps {
|
|
|
31
47
|
confirmText?: string;
|
|
32
48
|
/** May return a promise: the button shows pending, and a thrown Error is shown inside the dialog. */
|
|
33
49
|
onConfirm: () => void | Promise<void>;
|
|
50
|
+
labels?: Partial<ConfirmDialogLabels>;
|
|
34
51
|
}
|
|
35
52
|
/**
|
|
36
53
|
* Confirms an action that cannot be undone: the "confirmed" option of WCAG 3.3.4 (AA) and 3.3.6 (AAA).
|
|
37
54
|
* role=alertdialog, not dismissed by the backdrop; focus starts on Cancel, or the confirm-text field.
|
|
38
55
|
* Anything reversible should skip this and offer Undo in a toast instead.
|
|
39
56
|
*/
|
|
40
|
-
export declare function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLabel, cancelLabel, tone, confirmText, onConfirm, }: ConfirmDialogProps): import("react").JSX.Element;
|
|
57
|
+
export declare function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLabel, cancelLabel, tone, confirmText, onConfirm, labels: given, }: ConfirmDialogProps): import("react").JSX.Element;
|
|
41
58
|
//# sourceMappingURL=dialog.d.ts.map
|
package/dist/ui/dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUxD,+CAA+C;AAC/C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,sGAAsG;IACtG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,sGAAsG;AACtG,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAe,EACf,aAAoB,EACpB,IAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,WAAW,+BAuDb;AAED,4FAA4F;AAC5F,MAAM,WAAW,mBAAmB;IAClC,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,WAAW,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;CAChB;AASD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qGAAqG;IACrG,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,WAAsB,EACtB,IAAe,EACf,WAAW,EACX,SAAS,EACT,MAAM,EAAE,KAAK,GACd,EAAE,kBAAkB,+BA4FpB"}
|
package/dist/ui/dialog.js
CHANGED
|
@@ -4,22 +4,30 @@ import { useId, useState } from 'react';
|
|
|
4
4
|
import { Dialog as RACDialog, Heading, Modal, ModalOverlay } from 'react-aria-components';
|
|
5
5
|
import { X } from 'lucide-react';
|
|
6
6
|
import { cn } from '../lib/cn.js';
|
|
7
|
+
import { fill, withLabels } from '../lib/labels.js';
|
|
7
8
|
import { Alert } from './alert.js';
|
|
8
9
|
import { Button } from './button.js';
|
|
9
10
|
import { IconButton } from './icon-button.js';
|
|
10
11
|
import { TextField } from './text-field.js';
|
|
11
12
|
const widths = { sm: 'max-w-[26rem]', md: 'max-w-[32rem]', lg: 'max-w-[44rem]' };
|
|
12
13
|
/** A centred modal: focus moves in and is trapped, Escape closes, focus returns to what opened it. */
|
|
13
|
-
export function Dialog({ isOpen, onOpenChange, title, description, children, footer, role = 'dialog', isDismissable = true, size = 'md', className, }) {
|
|
14
|
+
export function Dialog({ isOpen, onOpenChange, title, description, children, footer, role = 'dialog', isDismissable = true, size = 'md', labels, className, }) {
|
|
14
15
|
const descId = useId();
|
|
15
|
-
return (_jsx(ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: isDismissable, "data-overlay": true, className: "fixed inset-0 z-(--z-sheet) flex items-center justify-center bg-overlay p-4", children: _jsx(Modal, { "data-sheet": "top", className: cn('relative max-h-[calc(100dvh-2rem)] w-full overflow-auto rounded-xl border border-border bg-popover text-popover-foreground shadow-(--shadow-lg) outline-none', widths[size], className), children: _jsxs(RACDialog, { role: role, "aria-describedby": description ? descId : undefined, className: "flex flex-col outline-none", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 px-5 pt-5", children: [_jsx(Heading, { slot: "title", className: "text-heading", children: title }), isDismissable && (_jsx(IconButton, { label:
|
|
16
|
+
return (_jsx(ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: isDismissable, "data-overlay": true, className: "fixed inset-0 z-(--z-sheet) flex items-center justify-center bg-overlay p-4", children: _jsx(Modal, { "data-sheet": "top", className: cn('relative max-h-[calc(100dvh-2rem)] w-full overflow-auto rounded-xl border border-border bg-popover text-popover-foreground shadow-(--shadow-lg) outline-none', widths[size], className), children: _jsxs(RACDialog, { role: role, "aria-describedby": description ? descId : undefined, className: "flex flex-col outline-none", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 px-5 pt-5", children: [_jsx(Heading, { slot: "title", className: "text-heading", children: title }), isDismissable && (_jsx(IconButton, { label: labels?.close ?? 'Close', icon: X, visualSize: "icon-sm", slot: "close", tooltip: false, className: "-mt-1 -mr-2 items-start justify-end" }))] }), _jsxs("div", { className: "flex flex-col gap-4 px-5 pt-2 pb-5 text-sm leading-6", children: [description && (_jsx("div", { id: descId, className: "max-w-(--measure) text-muted-foreground", children: description })), children] }), footer && (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-(--control-gap) border-t border-border px-5 py-4", children: footer }))] }) }) }));
|
|
16
17
|
}
|
|
18
|
+
const confirmDialogLabels = {
|
|
19
|
+
typeToConfirm: 'Type {text} to confirm',
|
|
20
|
+
typeExactly: 'Type {text} exactly, including capitals',
|
|
21
|
+
failedTitle: "{action} didn't work",
|
|
22
|
+
failed: "That didn't work. Check your connection and try again.",
|
|
23
|
+
};
|
|
17
24
|
/**
|
|
18
25
|
* Confirms an action that cannot be undone: the "confirmed" option of WCAG 3.3.4 (AA) and 3.3.6 (AAA).
|
|
19
26
|
* role=alertdialog, not dismissed by the backdrop; focus starts on Cancel, or the confirm-text field.
|
|
20
27
|
* Anything reversible should skip this and offer Undo in a toast instead.
|
|
21
28
|
*/
|
|
22
|
-
export function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLabel, cancelLabel = 'Cancel', tone = 'danger', confirmText, onConfirm, }) {
|
|
29
|
+
export function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLabel, cancelLabel = 'Cancel', tone = 'danger', confirmText, onConfirm, labels: given, }) {
|
|
30
|
+
const labels = withLabels(confirmDialogLabels, given);
|
|
23
31
|
const [typed, setTyped] = useState('');
|
|
24
32
|
const [mismatch, setMismatch] = useState(false);
|
|
25
33
|
const [pending, setPending] = useState(false);
|
|
@@ -50,20 +58,18 @@ export function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLa
|
|
|
50
58
|
onOpenChange(false);
|
|
51
59
|
}
|
|
52
60
|
catch (e) {
|
|
53
|
-
setError(e instanceof Error && e.message
|
|
54
|
-
? e.message
|
|
55
|
-
: "That didn't work. Check your connection and try again.");
|
|
61
|
+
setError(e instanceof Error && e.message ? e.message : labels.failed);
|
|
56
62
|
}
|
|
57
63
|
finally {
|
|
58
64
|
setPending(false);
|
|
59
65
|
}
|
|
60
66
|
};
|
|
61
|
-
return (_jsxs(Dialog, { isOpen: isOpen, onOpenChange: (open) => !pending && onOpenChange(open), title: title, role: "alertdialog", isDismissable: false, description: children, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", slot: "close", autoFocus: !confirmText, isDisabled: pending, children: cancelLabel }), _jsx(Button, { variant: tone === 'danger' ? 'destructive' : 'primary', isPending: pending, onPress: run, children: confirmLabel })] }), children: [confirmText && (_jsx(TextField, { id: fieldId, label:
|
|
67
|
+
return (_jsxs(Dialog, { isOpen: isOpen, onOpenChange: (open) => !pending && onOpenChange(open), title: title, role: "alertdialog", isDismissable: false, description: children, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", slot: "close", autoFocus: !confirmText, isDisabled: pending, children: cancelLabel }), _jsx(Button, { variant: tone === 'danger' ? 'destructive' : 'primary', isPending: pending, onPress: run, children: confirmLabel })] }), children: [confirmText && (_jsx(TextField, { id: fieldId, label: fill(labels.typeToConfirm, { text: confirmText }), value: typed, onChange: (v) => {
|
|
62
68
|
setTyped(v);
|
|
63
69
|
setMismatch(false);
|
|
64
70
|
},
|
|
65
71
|
// Type-to-confirm: the field is the dialog's first task, so it takes focus when the dialog opens.
|
|
66
72
|
// oxlint-disable-next-line jsx-a11y/no-autofocus
|
|
67
|
-
autoFocus: true, autoComplete: "off", spellCheck: "false", isInvalid: mismatch, errorMessage:
|
|
73
|
+
autoFocus: true, autoComplete: "off", spellCheck: "false", isInvalid: mismatch, errorMessage: fill(labels.typeExactly, { text: confirmText }) })), error && (_jsx(Alert, { tone: "danger", live: "assertive", title: fill(labels.failedTitle, { action: confirmLabel }), children: error }))] }));
|
|
68
74
|
}
|
|
69
75
|
//# sourceMappingURL=dialog.js.map
|
package/dist/ui/dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1F,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/error-state.d.ts
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
import { Component, type ErrorInfo, type ReactNode } from 'react';
|
|
2
2
|
export type ErrorKind = 'load' | 'offline' | 'forbidden' | 'not-found' | 'server';
|
|
3
|
+
/**
|
|
4
|
+
* An error state's words, for the `labels` prop; `{reference}` is the reference. Each kind's title and body are
|
|
5
|
+
* `title` and `children`.
|
|
6
|
+
*/
|
|
7
|
+
export interface ErrorStateLabels {
|
|
8
|
+
retry: string;
|
|
9
|
+
/** Before the reference. */
|
|
10
|
+
reference: string;
|
|
11
|
+
copy: string;
|
|
12
|
+
/** The copy button's name. */
|
|
13
|
+
copyReference: string;
|
|
14
|
+
copied: string;
|
|
15
|
+
/** When the browser refuses to copy. */
|
|
16
|
+
copyFailed: string;
|
|
17
|
+
}
|
|
3
18
|
export interface ErrorStateProps {
|
|
4
19
|
kind?: ErrorKind;
|
|
5
20
|
/** Override the default title — name the thing: "Projects didn't load". */
|
|
@@ -15,13 +30,14 @@ export interface ErrorStateProps {
|
|
|
15
30
|
/** Move focus to the heading when it replaces content the person was using. */
|
|
16
31
|
autoFocus?: boolean;
|
|
17
32
|
size?: 'page' | 'section';
|
|
33
|
+
labels?: Partial<ErrorStateLabels>;
|
|
18
34
|
className?: string;
|
|
19
35
|
}
|
|
20
36
|
/**
|
|
21
37
|
* Something failed: says what happened in plain words, that it isn't the person's fault when it isn't,
|
|
22
38
|
* and what to do next. Never a raw error message or stack trace.
|
|
23
39
|
*/
|
|
24
|
-
export declare function ErrorState({ kind, title, children, onRetry, reference, actions, headingLevel, autoFocus, size, className, }: ErrorStateProps): import("react").JSX.Element;
|
|
40
|
+
export declare function ErrorState({ kind, title, children, onRetry, reference, actions, headingLevel, autoFocus, size, labels: given, className, }: ErrorStateProps): import("react").JSX.Element;
|
|
25
41
|
export interface ErrorBoundaryProps {
|
|
26
42
|
children: ReactNode;
|
|
27
43
|
/** Render the fallback; call `reset` to try the children again. Default: an ErrorState with Try again. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../src/ui/error-state.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,SAAS,EAKT,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../src/ui/error-state.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,SAAS,EAKT,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgBf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,GAAG,QAAQ,CAAC;AA8BlF;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;CACpB;AAWD,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wFAAwF;IACxF,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAa,EACb,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,YAAgB,EAChB,SAAS,EACT,IAAa,EACb,MAAM,EAAE,KAAK,EACb,SAAS,GACV,EAAE,eAAe,+BA2FjB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAC1D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACnD;AAED,8GAA8G;AAC9G,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE;IAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAAC;IAC9E,KAAK;QAAK,KAAK,EAAU,KAAK,GAAG,IAAI;MAAG;IACjD,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;MAE3C;IACQ,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,QAEvD;IACD,KAAK,aAAwC;IACpC,MAAM,gUASd;CACF"}
|
package/dist/ui/error-state.js
CHANGED
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { Component, useEffect, useId, useRef, useState, } from 'react';
|
|
4
4
|
import { CircleAlert, Copy, FileQuestionMark, Lock, RefreshCw, ServerCrash, WifiOff, } from 'lucide-react';
|
|
5
5
|
import { cn } from '../lib/cn.js';
|
|
6
|
+
import { fill, withLabels } from '../lib/labels.js';
|
|
6
7
|
import { Button } from './button.js';
|
|
7
8
|
import { StatusMessage } from './form.js';
|
|
8
9
|
const kinds = {
|
|
@@ -32,11 +33,20 @@ const kinds = {
|
|
|
32
33
|
body: "It isn't anything you did. Try again in a minute; if it keeps happening, contact support and quote the reference below.",
|
|
33
34
|
},
|
|
34
35
|
};
|
|
36
|
+
const errorStateLabels = {
|
|
37
|
+
retry: 'Try again',
|
|
38
|
+
reference: 'Reference',
|
|
39
|
+
copy: 'Copy',
|
|
40
|
+
copyReference: 'Copy reference {reference}',
|
|
41
|
+
copied: 'Reference copied',
|
|
42
|
+
copyFailed: 'Select the reference and copy it',
|
|
43
|
+
};
|
|
35
44
|
/**
|
|
36
45
|
* Something failed: says what happened in plain words, that it isn't the person's fault when it isn't,
|
|
37
46
|
* and what to do next. Never a raw error message or stack trace.
|
|
38
47
|
*/
|
|
39
|
-
export function ErrorState({ kind = 'load', title, children, onRetry, reference, actions, headingLevel = 2, autoFocus, size = 'page', className, }) {
|
|
48
|
+
export function ErrorState({ kind = 'load', title, children, onRetry, reference, actions, headingLevel = 2, autoFocus, size = 'page', labels: given, className, }) {
|
|
49
|
+
const labels = withLabels(errorStateLabels, given);
|
|
40
50
|
const k = kinds[kind];
|
|
41
51
|
const H = `h${headingLevel}`;
|
|
42
52
|
const headingRef = useRef(null);
|
|
@@ -58,15 +68,15 @@ export function ErrorState({ kind = 'load', title, children, onRetry, reference,
|
|
|
58
68
|
setPending(false);
|
|
59
69
|
}
|
|
60
70
|
};
|
|
61
|
-
return (_jsxs("div", { role: "group", "aria-labelledby": headingId, className: cn('mx-auto flex max-w-(--measure) flex-col items-center px-6 text-center', size === 'page' ? 'py-16' : 'py-10', className), children: [_jsx("span", { "aria-hidden": "true", className: cn('mb-4 grid place-items-center rounded-full bg-destructive-subtle text-destructive', size === 'page' ? 'size-14' : 'size-11'), children: _jsx(k.Icon, { className: size === 'page' ? 'size-7' : 'size-5' }) }), _jsx(H, { ref: headingRef, id: headingId, tabIndex: -1, className: cn('outline-none focus-visible:focus-ring rounded-sm', size === 'page' ? 'text-heading' : 'text-subheading'), children: title ?? k.title }), _jsx("div", { className: "mt-2 text-[15px] leading-6 text-muted-foreground", children: children ?? k.body }), (onRetry || actions) && (_jsxs("div", { className: "mt-6 flex flex-wrap items-center justify-center gap-(--control-gap)", children: [onRetry && (_jsxs(Button, { variant: "primary", isPending: pending, onPress: retry, children: [_jsx(RefreshCw, { "aria-hidden": "true" }),
|
|
71
|
+
return (_jsxs("div", { role: "group", "aria-labelledby": headingId, className: cn('mx-auto flex max-w-(--measure) flex-col items-center px-6 text-center', size === 'page' ? 'py-16' : 'py-10', className), children: [_jsx("span", { "aria-hidden": "true", className: cn('mb-4 grid place-items-center rounded-full bg-destructive-subtle text-destructive', size === 'page' ? 'size-14' : 'size-11'), children: _jsx(k.Icon, { className: size === 'page' ? 'size-7' : 'size-5' }) }), _jsx(H, { ref: headingRef, id: headingId, tabIndex: -1, className: cn('outline-none focus-visible:focus-ring rounded-sm', size === 'page' ? 'text-heading' : 'text-subheading'), children: title ?? k.title }), _jsx("div", { className: "mt-2 text-[15px] leading-6 text-muted-foreground", children: children ?? k.body }), (onRetry || actions) && (_jsxs("div", { className: "mt-6 flex flex-wrap items-center justify-center gap-(--control-gap)", children: [onRetry && (_jsxs(Button, { variant: "primary", isPending: pending, onPress: retry, children: [_jsx(RefreshCw, { "aria-hidden": "true" }), labels.retry] })), actions] })), reference && (_jsxs("div", { className: "mt-6 flex flex-col items-center gap-1", children: [_jsxs("p", { className: "flex flex-wrap items-center justify-center gap-2 text-[13px] text-muted-foreground", children: [labels.reference, ' ', _jsx("code", { className: "rounded-sm bg-muted px-1.5 py-0.5 font-mono text-foreground", children: reference }), _jsxs(Button, { variant: "ghost", visualSize: "sm", "aria-label": fill(labels.copyReference, { reference }), onPress: async () => {
|
|
62
72
|
try {
|
|
63
73
|
await navigator.clipboard.writeText(reference);
|
|
64
|
-
setCopied(
|
|
74
|
+
setCopied(labels.copied);
|
|
65
75
|
}
|
|
66
76
|
catch {
|
|
67
|
-
setCopied(
|
|
77
|
+
setCopied(labels.copyFailed);
|
|
68
78
|
}
|
|
69
|
-
}, children: [_jsx(Copy, { "aria-hidden": "true" }),
|
|
79
|
+
}, children: [_jsx(Copy, { "aria-hidden": "true" }), labels.copy] })] }), _jsx(StatusMessage, { tone: "neutral", children: copied })] }))] }));
|
|
70
80
|
}
|
|
71
81
|
/** Contains a failing widget so the rest of the page keeps working. (Route segments use Next's error.tsx.) */
|
|
72
82
|
export class ErrorBoundary extends Component {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"error-state.js","sourceRoot":"","sources":["../../src/ui/error-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,SAAS,EACT,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,GAGT,MAAM,OAAO,CAAC;AACf,OAAO,EACL,WAAW,EACX,IAAI,EACJ,gBAAgB,EAChB,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAO,GACR,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,MAAM,KAAK,GAA4E;IACrF,IAAI,EAAE;QACJ,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,4GAA4G;KACnH;IACD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,+FAA+F;KACtG;IACD,SAAS,EAAE;QACT,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,+BAA+B;QACtC,IAAI,EAAE,mFAAmF;KAC1F;IACD,WAAW,EAAE;QACX,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,+GAA+G;KACtH;IACD,MAAM,EAAE;QACN,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,kCAAkC;QACzC,IAAI,EAAE,yHAAyH;KAChI;CACF,CAAC;
|
|
1
|
+
{"version":3,"file":"error-state.js","sourceRoot":"","sources":["../../src/ui/error-state.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/field.d.ts
CHANGED
|
@@ -25,13 +25,20 @@ export declare function FieldDescription({ children, className, }: {
|
|
|
25
25
|
children: ReactNode;
|
|
26
26
|
className?: string;
|
|
27
27
|
}): import("react").JSX.Element;
|
|
28
|
+
/** A field's words, for the `labels` prop on every field. Its required message is `requiredMessage`. */
|
|
29
|
+
export interface FieldLabels {
|
|
30
|
+
/** Said before the error, to a screen reader. */
|
|
31
|
+
errorPrefix: string;
|
|
32
|
+
}
|
|
28
33
|
/**
|
|
29
34
|
* The error, shown only when the field is invalid. Sits between the hint and the input so it is next to the
|
|
30
35
|
* label at high zoom, starts with an icon and a hidden "Error:", and is linked by aria-describedby.
|
|
31
36
|
*/
|
|
32
|
-
export declare function FieldError({ children, requiredMessage, className, }: {
|
|
37
|
+
export declare function FieldError({ children, requiredMessage, errorPrefix, className, }: {
|
|
33
38
|
children?: ReactNode;
|
|
34
39
|
requiredMessage?: string;
|
|
40
|
+
/** `labels.errorPrefix` from the field. */
|
|
41
|
+
errorPrefix?: string;
|
|
35
42
|
className?: string;
|
|
36
43
|
}): import("react").JSX.Element;
|
|
37
44
|
/** Lower-case the first letter unless the label starts with an acronym ("VAT number"). */
|
package/dist/ui/field.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/ui/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,wEAAwE;AACxE,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AAClE,eAAO,MAAM,gBAAgB,6CAAgD,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,sFAAsF;AACtF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMlD,CAAC;AAYF,8GAA8G;AAC9G,eAAO,MAAM,QAAQ,QAIgJ,CAAC;AAEtK,uGAAuG;AACvG,eAAO,MAAM,UAAU,mJAC2H,CAAC;AAEnJ,yGAAyG;AACzG,eAAO,MAAM,cAAc,QAG4E,CAAC;AAExG,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iJAAiJ;AACjJ,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAU,EACV,WAAqB,EACrB,SAAS,GACV,EAAE,eAAe,+BAqBjB;AAED,yGAAyG;AACzG,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAYA;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,eAAe,EACf,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/ui/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,wEAAwE;AACxE,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AAClE,eAAO,MAAM,gBAAgB,6CAAgD,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,sFAAsF;AACtF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMlD,CAAC;AAYF,8GAA8G;AAC9G,eAAO,MAAM,QAAQ,QAIgJ,CAAC;AAEtK,uGAAuG;AACvG,eAAO,MAAM,UAAU,mJAC2H,CAAC;AAEnJ,yGAAyG;AACzG,eAAO,MAAM,cAAc,QAG4E,CAAC;AAExG,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iJAAiJ;AACjJ,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAU,EACV,WAAqB,EACrB,SAAS,GACV,EAAE,eAAe,+BAqBjB;AAED,yGAAyG;AACzG,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAYA;AAED,wGAAwG;AACxG,MAAM,WAAW,WAAW;IAC1B,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,eAAe,EACf,WAAuB,EACvB,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAyBA;AAED,0FAA0F;AAC1F,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAC5B,UAAU,EAAE,OAAO,GAAG,SAAS,EAC/B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,EAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,YAGrD,CAAC,8DAIjB;AAED,oEAAoE;AACpE,eAAO,MAAM,UAAU,sDAAsD,CAAC"}
|
package/dist/ui/field.js
CHANGED
|
@@ -51,8 +51,8 @@ export function FieldDescription({ children, className, }) {
|
|
|
51
51
|
* The error, shown only when the field is invalid. Sits between the hint and the input so it is next to the
|
|
52
52
|
* label at high zoom, starts with an icon and a hidden "Error:", and is linked by aria-describedby.
|
|
53
53
|
*/
|
|
54
|
-
export function FieldError({ children, requiredMessage, className, }) {
|
|
55
|
-
return (_jsx(RACFieldError, { "data-field-error": true, className: cn('flex items-start gap-1.5 text-[13px] leading-5 font-semibold text-destructive', className), children: ({ validationErrors, validationDetails }) => (_jsxs(_Fragment, { children: [_jsx(CircleAlert, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }), _jsxs("span", { "data-field-error-text": true, children: [_jsx("span", { className: "sr-only",
|
|
54
|
+
export function FieldError({ children, requiredMessage, errorPrefix = 'Error: ', className, }) {
|
|
55
|
+
return (_jsx(RACFieldError, { "data-field-error": true, className: cn('flex items-start gap-1.5 text-[13px] leading-5 font-semibold text-destructive', className), children: ({ validationErrors, validationDetails }) => (_jsxs(_Fragment, { children: [_jsx(CircleAlert, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }), _jsxs("span", { "data-field-error-text": true, children: [_jsx("span", { className: "sr-only", "data-field-error-prefix": true, children: errorPrefix }), children ??
|
|
56
56
|
(requiredMessage && validationDetails?.valueMissing && !validationDetails.customError
|
|
57
57
|
? requiredMessage
|
|
58
58
|
: validationErrors.join(' '))] })] })) }));
|
package/dist/ui/field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/ui/field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,KAAK,IAAI,QAAQ,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAIlC,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAqB,UAAU,CAAC,CAAC;AAG9E,sFAAsF;AACtF,MAAM,CAAC,MAAM,WAAW,GAA+B;IACrD,EAAE,EAAE,cAAc;IAClB,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,eAAe;IACnB,IAAI,EAAE,EAAE;CACT,CAAC;AAEF;;;;;;;;GAQG;AAEH,8GAA8G;AAC9G,MAAM,CAAC,MAAM,QAAQ,GACnB,wEAAwE;IACxE,sFAAsF;IACtF,iIAAiI;IACjI,mKAAmK,CAAC;AAEtK,uGAAuG;AACvG,MAAM,CAAC,MAAM,UAAU,GACrB,gJAAgJ,CAAC;AAEnJ,yGAAyG;AACzG,MAAM,CAAC,MAAM,cAAc,GACzB,kMAAkM;IAClM,qJAAqJ;IACrJ,qGAAqG,CAAC;AAUxG,iJAAiJ;AACjJ,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,UAAU,EACV,WAAW,GAAG,OAAO,EACrB,SAAS,GACO;IAChB,MAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC/C,MAAM,MAAM,GACV,SAAS,KAAK,UAAU,IAAI,UAAU;QACpC,CAAC,CAAC,aAAa;QACf,CAAC,CAAC,SAAS,KAAK,UAAU,IAAI,CAAC,UAAU;YACvC,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,EAAE,CAAC;IACX,OAAO,CACL,MAAC,QAAQ,IACP,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CAAC,uDAAuD,EAAE,SAAS,CAAC,aAEhF,QAAQ,EACR,MAAM,IAAI,CACT,8BAAkB,MAAM,EAAC,SAAS,EAAC,mCAAmC,YACnE,MAAM,GACF,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED,yGAAyG;AACzG,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GAIV;IACC,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,EAAE,CACX,qEAAqE,EACrE,SAAS,CACV,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;
|
|
1
|
+
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/ui/field.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/file-upload.d.ts
CHANGED
|
@@ -16,6 +16,37 @@ export interface FileRejection {
|
|
|
16
16
|
file: File;
|
|
17
17
|
reason: string;
|
|
18
18
|
}
|
|
19
|
+
/**
|
|
20
|
+
* A file upload's words, for the `labels` prop. `{name}` is a file's name; `{types}` is `acceptedTypesLabel`
|
|
21
|
+
* (or the extensions, listed in English); `{size}` and `{max}` are sizes in the page's locale, or a count.
|
|
22
|
+
*/
|
|
23
|
+
export interface FileUploadLabels {
|
|
24
|
+
/** On the drop area while something is dragged over it. */
|
|
25
|
+
dropToAdd: string;
|
|
26
|
+
dropFiles: string;
|
|
27
|
+
dropFile: string;
|
|
28
|
+
chooseFiles: string;
|
|
29
|
+
chooseFile: string;
|
|
30
|
+
/** A file's progress bar. */
|
|
31
|
+
uploadingFile: string;
|
|
32
|
+
uploading: string;
|
|
33
|
+
uploaded: string;
|
|
34
|
+
/** Said before an error, to a screen reader. */
|
|
35
|
+
errorPrefix: string;
|
|
36
|
+
/** A failed upload with no `error` of its own. */
|
|
37
|
+
failed: string;
|
|
38
|
+
retry: string;
|
|
39
|
+
dismiss: string;
|
|
40
|
+
cancel: string;
|
|
41
|
+
remove: string;
|
|
42
|
+
/** Announced when a file finishes. */
|
|
43
|
+
announceUploaded: string;
|
|
44
|
+
/** Announced when one fails; `{error}` is its `error`, or nothing. */
|
|
45
|
+
announceFailed: string;
|
|
46
|
+
wrongType: string;
|
|
47
|
+
tooBig: string;
|
|
48
|
+
tooMany: string;
|
|
49
|
+
}
|
|
19
50
|
export interface FileUploadProps {
|
|
20
51
|
label: string;
|
|
21
52
|
/** What to upload, and the limits in words: "PDF or PNG, up to 10 MB each". */
|
|
@@ -38,6 +69,7 @@ export interface FileUploadProps {
|
|
|
38
69
|
/** Also told about files that were turned away (they are listed with the reason either way). */
|
|
39
70
|
onReject?: (rejections: FileRejection[]) => void;
|
|
40
71
|
isDisabled?: boolean;
|
|
72
|
+
labels?: Partial<FileUploadLabels>;
|
|
41
73
|
className?: string;
|
|
42
74
|
}
|
|
43
75
|
/** "2.4 MB", in the page's locale. */
|
|
@@ -50,5 +82,5 @@ export declare function formatBytes(bytes: number): string;
|
|
|
50
82
|
* in the list with a reason that says what to do. Additions, completions and failures are announced once
|
|
51
83
|
* each through a polite live region. Removing a file moves focus to the next file, or back to "Choose files".
|
|
52
84
|
*/
|
|
53
|
-
export declare function FileUpload({ label, description, acceptedFileTypes, acceptedTypesLabel, maxFileSize, maxFiles, allowsMultiple, items, onSelect, onRemove, onRetry, onReject, isDisabled, className, }: FileUploadProps): import("react").JSX.Element;
|
|
85
|
+
export declare function FileUpload({ label, description, acceptedFileTypes, acceptedTypesLabel, maxFileSize, maxFiles, allowsMultiple, items, onSelect, onRemove, onRetry, onReject, isDisabled, labels: given, className, }: FileUploadProps): import("react").JSX.Element;
|
|
54
86
|
//# sourceMappingURL=file-upload.d.ts.map
|