@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../src/ui/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,UAAU,IAAI,aAAa,GAG5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,OAAO,EACP,YAAY,
|
|
1
|
+
{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../src/ui/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,UAAU,IAAI,aAAa,GAG5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,OAAO,EACP,YAAY,GAEb,MAAM,YAAY,CAAC;AAepB,+GAA+G;AAC/G,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,EACT,WAAW,GAAG,UAAU,EACxB,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,MAAC,aAAa,OACR,KAAK,EACT,WAAW,EAAE,WAAW,EACxB,QAAQ,EACN,KAAK,CAAC,UAAU;YACd,CAAC,CAAC,YAAY,CACV,IAAI,EACJ,eAAe,IAAI,UAAU,OAAO,CAAC,KAAK,CAAC,EAAE,EAC7C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CACV;YACH,CAAC,CAAC,SAAS,EAEf,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,aAEpC,KAAC,UAAU,IAAC,WAAW,EAAC,MAAM,EAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YACxD,KAAK,GACK,EACZ,WAAW,IAAI,KAAC,gBAAgB,cAAE,WAAW,GAAoB,EAClE,KAAC,UAAU,IACT,WAAW,EAAE,MAAM,EAAE,WAAW,EAChC,eAAe,EAAE,eAAe,IAAI,UAAU,OAAO,CAAC,KAAK,CAAC,EAAE,YAE7D,YAAY,GACF,EACb,cACE,SAAS,EAAE,EAAE,CACX,MAAM,EACN,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,UAAU,CACzE,YAEA,QAAQ,GACL,IACQ,CACjB,CAAC;AACJ,CAAC;AAQD,gFAAgF;AAChF,MAAM,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,EAAc;IAC9E,OAAO,CAEL,MAAC,QAAQ,OACH,KAAK,EACT,SAAS,EAAE,EAAE,CACX,oQAAoQ,EACpQ,SAAS,CACV,aAED,8BACc,MAAM,EAClB,SAAS,EAAE,EAAE,CACX,4GAA4G,EAC5G,wFAAwF,EACxF,4GAA4G,EAC5G,8CAA8C,CAC/C,GACD,EACF,gBAAM,SAAS,EAAC,uBAAuB,aACrC,yBAAO,QAAQ,GAAQ,EACtB,WAAW,IAAI,eAAM,SAAS,EAAC,mCAAmC,YAAE,WAAW,GAAQ,IACnF,IACE,CACZ,CAAC;AACJ,CAAC"}
|
package/dist/ui/search.d.ts
CHANGED
|
@@ -7,6 +7,14 @@ export interface SearchItem {
|
|
|
7
7
|
icon?: IconProp;
|
|
8
8
|
href?: string;
|
|
9
9
|
}
|
|
10
|
+
/** The search's own words, for the `labels` prop. */
|
|
11
|
+
export interface SearchLabels {
|
|
12
|
+
/** The trigger's name when compact, and the dialog's and its field's. */
|
|
13
|
+
search: string;
|
|
14
|
+
noResults: string;
|
|
15
|
+
/** The key shown in the field that closes the dialog. */
|
|
16
|
+
escapeKey: string;
|
|
17
|
+
}
|
|
10
18
|
export interface SearchSection {
|
|
11
19
|
id: string;
|
|
12
20
|
title: string;
|
|
@@ -18,26 +26,36 @@ export interface CommandSearchProps {
|
|
|
18
26
|
sections: SearchSection[];
|
|
19
27
|
onAction?: (id: Key) => void;
|
|
20
28
|
placeholder?: string;
|
|
29
|
+
labels?: Partial<SearchLabels>;
|
|
21
30
|
}
|
|
22
31
|
/** The search dialog: type to filter, arrow keys to move, Enter to go, Escape to close. */
|
|
23
|
-
export declare function CommandSearch({ isOpen, onOpenChange, sections, onAction, placeholder, }: CommandSearchProps): import("react").JSX.Element;
|
|
32
|
+
export declare function CommandSearch({ isOpen, onOpenChange, sections, onAction, placeholder, labels: given, }: CommandSearchProps): import("react").JSX.Element;
|
|
24
33
|
export interface SearchTriggerProps {
|
|
25
34
|
onPress: () => void;
|
|
35
|
+
/** The text it shows. Default: `labels.search`. */
|
|
26
36
|
placeholder?: string;
|
|
27
|
-
/** Icon-only, for narrow headers. */
|
|
37
|
+
/** Icon-only, for narrow headers, named `labels.search`. */
|
|
28
38
|
compact?: boolean;
|
|
39
|
+
labels?: Partial<SearchLabels>;
|
|
29
40
|
className?: string;
|
|
30
41
|
}
|
|
31
|
-
/**
|
|
32
|
-
|
|
42
|
+
/**
|
|
43
|
+
* Opens the search dialog. Looks like a field; is a button named by what it shows, "Search ⌘K", with the
|
|
44
|
+
* shortcut also in `aria-keyshortcuts`. No `aria-label`: one that left out the shortcut would no longer contain
|
|
45
|
+
* the visible text (2.5.3 Label in Name, as axe and the Setsquare SDK measure it).
|
|
46
|
+
*/
|
|
47
|
+
export declare function SearchTrigger({ onPress, placeholder, compact, labels: given, className, }: SearchTriggerProps): import("react").JSX.Element;
|
|
33
48
|
export interface AppSearchProps {
|
|
34
49
|
sections: SearchSection[];
|
|
35
50
|
onAction?: (id: Key) => void;
|
|
36
51
|
compact?: boolean;
|
|
37
52
|
defaultOpen?: boolean;
|
|
53
|
+
/** The dialog's field's placeholder. */
|
|
38
54
|
placeholder?: string;
|
|
55
|
+
/** For the trigger and the dialog. */
|
|
56
|
+
labels?: Partial<SearchLabels>;
|
|
39
57
|
className?: string;
|
|
40
58
|
}
|
|
41
59
|
/** Trigger + dialog + the ⌘K / Ctrl+K shortcut, wired together. */
|
|
42
|
-
export declare function AppSearch({ sections, onAction, compact, defaultOpen, placeholder, className, }: AppSearchProps): import("react").JSX.Element;
|
|
60
|
+
export declare function AppSearch({ sections, onAction, compact, defaultOpen, placeholder, labels, className, }: AppSearchProps): import("react").JSX.Element;
|
|
43
61
|
//# sourceMappingURL=search.d.ts.map
|
package/dist/ui/search.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/ui/search.tsx"],"names":[],"mappings":"AAGA,OAAO,EAcL,KAAK,GAAG,EACT,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/ui/search.tsx"],"names":[],"mappings":"AAGA,OAAO,EAcL,KAAK,GAAG,EACT,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAKtD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,qDAAqD;AACrD,MAAM,WAAW,YAAY;IAC3B,yEAAyE;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAC;CACnB;AAQD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAChC;AAED,2FAA2F;AAC3F,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAoD,EACpD,MAAM,EAAE,KAAK,GACd,EAAE,kBAAkB,+BAwFpB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,WAAW,EACX,OAAO,EACP,MAAM,EAAE,KAAK,EACb,SAAS,GACV,EAAE,kBAAkB,+BA6BpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,mEAAmE;AACnE,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAmB,EACnB,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,cAAc,+BA8BhB"}
|
package/dist/ui/search.js
CHANGED
|
@@ -8,27 +8,41 @@ import { fieldBox, fieldInput } from './field.js';
|
|
|
8
8
|
import { IconButton } from './icon-button.js';
|
|
9
9
|
import { renderIcon } from './icon.js';
|
|
10
10
|
import { Kbd } from './kbd.js';
|
|
11
|
+
import { withLabels } from '../lib/labels.js';
|
|
11
12
|
import { itemVisual, rowTarget } from './menu.js';
|
|
13
|
+
const searchLabels = {
|
|
14
|
+
search: 'Search',
|
|
15
|
+
noResults: 'No results. Try a project name, a person or a setting.',
|
|
16
|
+
escapeKey: 'Esc',
|
|
17
|
+
};
|
|
12
18
|
/** The search dialog: type to filter, arrow keys to move, Enter to go, Escape to close. */
|
|
13
|
-
export function CommandSearch({ isOpen, onOpenChange, sections, onAction, placeholder = 'Search projects, people and settings', }) {
|
|
19
|
+
export function CommandSearch({ isOpen, onOpenChange, sections, onAction, placeholder = 'Search projects, people and settings', labels: given, }) {
|
|
20
|
+
const labels = withLabels(searchLabels, given);
|
|
14
21
|
const { contains } = useFilter({ sensitivity: 'base' });
|
|
15
|
-
return (_jsx(ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: true, "data-overlay": true, className: "fixed inset-0 z-(--z-popover) flex items-start justify-center bg-overlay px-4 pt-[12vh]", children: _jsx(Modal, { "data-sheet": "top", className: "w-full max-w-[40rem] overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-(--shadow-lg) outline-none", children: _jsx(Dialog, { "aria-label":
|
|
22
|
+
return (_jsx(ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: true, "data-overlay": true, className: "fixed inset-0 z-(--z-popover) flex items-start justify-center bg-overlay px-4 pt-[12vh]", children: _jsx(Modal, { "data-sheet": "top", className: "w-full max-w-[40rem] overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-(--shadow-lg) outline-none", children: _jsx(Dialog, { "aria-label": labels.search, className: "flex max-h-[70vh] flex-col outline-none", children: _jsxs(Autocomplete, { filter: contains, children: [_jsx(SearchField, { "aria-label": labels.search,
|
|
23
|
+
// oxlint-disable-next-line jsx-a11y/no-autofocus
|
|
24
|
+
autoFocus: true, className: "border-b border-border p-3", children: _jsxs("div", { className: fieldBox, children: [_jsx(Search, { "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-2.5 size-5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: placeholder, className: cn(fieldInput, 'pr-14 pl-10 [&::-webkit-search-cancel-button]:hidden') }), _jsx(Kbd, { className: "pointer-events-none absolute top-1/2 right-2 -translate-y-1/2", children: labels.escapeKey })] }) }), _jsx(Menu, { items: sections, onAction: (id) => {
|
|
16
25
|
onAction?.(id);
|
|
17
26
|
onOpenChange(false);
|
|
18
|
-
}, renderEmptyState: () => (_jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-muted-foreground", children: [_jsx(SearchX, { "aria-hidden": "true", className: "size-6" }),
|
|
27
|
+
}, renderEmptyState: () => (_jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-muted-foreground", children: [_jsx(SearchX, { "aria-hidden": "true", className: "size-6" }), labels.noResults] })), className: "relative min-h-0 flex-1 overflow-auto p-2 outline-none", children: (section) => (_jsxs(MenuSection, { id: section.id, className: "not-first:mt-2", children: [_jsx(Header, { className: "px-3 pt-1 pb-1 text-[13px] leading-5 font-semibold text-muted-foreground", children: section.title }), _jsx(Collection, { items: section.items, children: (item) => (_jsx(MenuItem, { id: item.id, href: item.href, textValue: item.label, className: cn('group/item', rowTarget), children: _jsxs("span", { className: itemVisual, children: [item.icon &&
|
|
19
28
|
renderIcon(item.icon, 'size-5 shrink-0 text-muted-foreground'), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: item.label }), item.description && (_jsx("span", { className: "truncate text-[13px] text-muted-foreground", children: item.description }))] })] }) })) })] })) })] }) }) }) }));
|
|
20
29
|
}
|
|
21
|
-
/**
|
|
22
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Opens the search dialog. Looks like a field; is a button named by what it shows, "Search ⌘K", with the
|
|
32
|
+
* shortcut also in `aria-keyshortcuts`. No `aria-label`: one that left out the shortcut would no longer contain
|
|
33
|
+
* the visible text (2.5.3 Label in Name, as axe and the Setsquare SDK measure it).
|
|
34
|
+
*/
|
|
35
|
+
export function SearchTrigger({ onPress, placeholder, compact, labels: given, className, }) {
|
|
36
|
+
const labels = withLabels(searchLabels, given);
|
|
23
37
|
if (compact) {
|
|
24
|
-
return (_jsx(IconButton, { label:
|
|
38
|
+
return (_jsx(IconButton, { label: labels.search, icon: Search, onPress: onPress, "aria-haspopup": "dialog", "aria-keyshortcuts": "Meta+K Control+K" }));
|
|
25
39
|
}
|
|
26
|
-
return (_jsxs(RACButton, { onPress: onPress, "aria-
|
|
40
|
+
return (_jsxs(RACButton, { onPress: onPress, "aria-haspopup": "dialog", "aria-keyshortcuts": "Meta+K Control+K", className: cn(
|
|
27
41
|
// Looks like a field, so it is built like one: the button is the target, the box is painted behind it.
|
|
28
|
-
'field-paint flex h-control-target w-64 min-w-0 cursor-pointer items-center gap-2 pr-2 pl-2.5 text-left text-sm text-muted-foreground outline-none', 'data-hovered:before:bg-accent data-focus-visible:before:focus-ring', className), children: [_jsx(Search, { "aria-hidden": "true", className: "size-5 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: placeholder }), _jsx(Kbd, { children: "\u2318K" })] }));
|
|
42
|
+
'field-paint flex h-control-target w-64 min-w-0 cursor-pointer items-center gap-2 pr-2 pl-2.5 text-left text-sm text-muted-foreground outline-none', 'data-hovered:before:bg-accent data-focus-visible:before:focus-ring', className), children: [_jsx(Search, { "aria-hidden": "true", className: "size-5 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: placeholder ?? labels.search }), " ", _jsx(Kbd, { children: "\u2318K" })] }));
|
|
29
43
|
}
|
|
30
44
|
/** Trigger + dialog + the ⌘K / Ctrl+K shortcut, wired together. */
|
|
31
|
-
export function AppSearch({ sections, onAction, compact, defaultOpen = false, placeholder, className, }) {
|
|
45
|
+
export function AppSearch({ sections, onAction, compact, defaultOpen = false, placeholder, labels, className, }) {
|
|
32
46
|
const [isOpen, setOpen] = useState(defaultOpen);
|
|
33
47
|
useEffect(() => {
|
|
34
48
|
const onKey = (e) => {
|
|
@@ -40,6 +54,6 @@ export function AppSearch({ sections, onAction, compact, defaultOpen = false, pl
|
|
|
40
54
|
document.addEventListener('keydown', onKey);
|
|
41
55
|
return () => document.removeEventListener('keydown', onKey);
|
|
42
56
|
}, []);
|
|
43
|
-
return (_jsxs(_Fragment, { children: [_jsx(SearchTrigger, { onPress: () => setOpen(true), compact: compact, className: className }), _jsx(CommandSearch, { isOpen: isOpen, onOpenChange: setOpen, sections: sections, onAction: onAction, placeholder: placeholder })] }));
|
|
57
|
+
return (_jsxs(_Fragment, { children: [_jsx(SearchTrigger, { onPress: () => setOpen(true), compact: compact, labels: labels, className: className }), _jsx(CommandSearch, { isOpen: isOpen, onOpenChange: setOpen, sections: sections, onAction: onAction, placeholder: placeholder, labels: labels })] }));
|
|
44
58
|
}
|
|
45
59
|
//# sourceMappingURL=search.js.map
|
package/dist/ui/search.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/ui/search.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,YAAY,EACZ,MAAM,IAAI,SAAS,EACnB,UAAU,EACV,MAAM,EACN,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,WAAW,EACX,SAAS,GAEV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAiB,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/ui/search.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/select.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import { type Key, type SelectProps as RACSelectProps } from 'react-aria-components';
|
|
3
|
-
import { type FieldWidth } from './field.js';
|
|
3
|
+
import { type FieldWidth, type FieldLabels } from './field.js';
|
|
4
4
|
export interface SelectProps<T extends object> extends Omit<RACSelectProps<T>, 'className' | 'children' | 'validate'> {
|
|
5
5
|
label: string;
|
|
6
6
|
description?: ReactNode;
|
|
@@ -11,8 +11,9 @@ export interface SelectProps<T extends object> extends Omit<RACSelectProps<T>, '
|
|
|
11
11
|
items?: Iterable<T>;
|
|
12
12
|
children: ReactNode | ((item: T) => ReactNode);
|
|
13
13
|
width?: FieldWidth;
|
|
14
|
+
labels?: Partial<FieldLabels>;
|
|
14
15
|
className?: string;
|
|
15
16
|
}
|
|
16
17
|
/** Choose one of a known, short list (about 5–15). Longer or searchable lists are a ComboBox. */
|
|
17
|
-
export declare function Select<T extends object>({ label, description, errorMessage, requiredMessage, validate, items, children, width, placeholder, className, ...props }: SelectProps<T>): import("react").JSX.Element;
|
|
18
|
+
export declare function Select<T extends object>({ label, description, errorMessage, requiredMessage, validate, items, children, width, placeholder, labels, className, ...props }: SelectProps<T>): import("react").JSX.Element;
|
|
18
19
|
//# sourceMappingURL=select.d.ts.map
|
package/dist/ui/select.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,KAAK,GAAG,EACR,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAQL,KAAK,UAAU,
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,KAAK,GAAG,EACR,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAIpB,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CACzD,cAAc,CAAC,CAAC,CAAC,EACjB,WAAW,GAAG,UAAU,GAAG,UAAU,CACtC;IACC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9E,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpB,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iGAAiG;AACjG,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EACvC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,KAAY,EACZ,WAAuB,EACvB,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,CAAC,CAAC,+BAsChB"}
|
package/dist/ui/select.js
CHANGED
|
@@ -7,7 +7,7 @@ import { FieldDescription, FieldError, FieldLabel, fieldStack, fieldWidths, lcFi
|
|
|
7
7
|
import { ListBox } from './list-box.js';
|
|
8
8
|
import { Popover } from './menu.js';
|
|
9
9
|
/** Choose one of a known, short list (about 5–15). Longer or searchable lists are a ComboBox. */
|
|
10
|
-
export function Select({ label, description, errorMessage, requiredMessage, validate, items, children, width = 'md', placeholder = 'Choose…', className, ...props }) {
|
|
11
|
-
return (_jsxs(RACSelect, { ...props, placeholder: placeholder, validate: withRequired(props.isRequired, requiredMessage ?? `Choose ${lcFirst(label)}`, (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: requiredMessage ?? `Choose ${lcFirst(label)}`, children: errorMessage }), _jsxs(Button, { className: cn('field-paint flex h-control-target w-full min-w-0 cursor-pointer items-center gap-2 px-(--control-pad-x) text-left text-sm text-foreground outline-none data-disabled:cursor-not-allowed', 'data-focus-visible:before:focus-ring data-pressed:before:bg-accent group-data-invalid/field:before:border-destructive group-data-invalid/field:before:shadow-[inset_0_0_0_1px_var(--destructive)] data-disabled:opacity-60'), children: [_jsx(SelectValue, { className: "min-w-0 flex-1 truncate data-placeholder:text-muted-foreground" }), _jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })] }), _jsx(Popover, { placement: "bottom start", className: "max-h-80", children: _jsx(ListBox, { items: items, children: children }) })] }));
|
|
10
|
+
export function Select({ label, description, errorMessage, requiredMessage, validate, items, children, width = 'md', placeholder = 'Choose…', labels, className, ...props }) {
|
|
11
|
+
return (_jsxs(RACSelect, { ...props, placeholder: placeholder, validate: withRequired(props.isRequired, requiredMessage ?? `Choose ${lcFirst(label)}`, (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: requiredMessage ?? `Choose ${lcFirst(label)}`, children: errorMessage }), _jsxs(Button, { className: cn('field-paint flex h-control-target w-full min-w-0 cursor-pointer items-center gap-2 px-(--control-pad-x) text-left text-sm text-foreground outline-none data-disabled:cursor-not-allowed', 'data-focus-visible:before:focus-ring data-pressed:before:bg-accent group-data-invalid/field:before:border-destructive group-data-invalid/field:before:shadow-[inset_0_0_0_1px_var(--destructive)] data-disabled:opacity-60'), children: [_jsx(SelectValue, { className: "min-w-0 flex-1 truncate data-placeholder:text-muted-foreground" }), _jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })] }), _jsx(Popover, { placement: "bottom start", className: "max-h-80", children: _jsx(ListBox, { items: items, children: children }) })] }));
|
|
12
12
|
}
|
|
13
13
|
//# sourceMappingURL=select.js.map
|
package/dist/ui/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,MAAM,EACN,MAAM,IAAI,SAAS,EACnB,WAAW,GAGZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,OAAO,EACP,YAAY,
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,MAAM,EACN,MAAM,IAAI,SAAS,EACnB,WAAW,GAGZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,OAAO,EACP,YAAY,GAGb,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAmBpC,iGAAiG;AACjG,MAAM,UAAU,MAAM,CAAmB,EACvC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,IAAI,EACZ,WAAW,GAAG,SAAS,EACvB,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACO;IACf,OAAO,CACL,MAAC,SAAS,OACH,KAA2B,EAChC,WAAW,EAAE,WAAW,EACxB,QAAQ,EACN,YAAY,CACV,KAAK,CAAC,UAAU,EAChB,eAAe,IAAI,UAAU,OAAO,CAAC,KAAK,CAAC,EAAE,EAC7C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAChB,QAAQ,CACA,EAEZ,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,aAExD,KAAC,UAAU,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAc,EAC7D,WAAW,IAAI,KAAC,gBAAgB,cAAE,WAAW,GAAoB,EAClE,KAAC,UAAU,IACT,WAAW,EAAE,MAAM,EAAE,WAAW,EAChC,eAAe,EAAE,eAAe,IAAI,UAAU,OAAO,CAAC,KAAK,CAAC,EAAE,YAE7D,YAAY,GACF,EAEb,MAAC,MAAM,IACL,SAAS,EAAE,EAAE,CACX,yLAAyL,EACzL,4NAA4N,CAC7N,aAED,KAAC,WAAW,IAAC,SAAS,EAAC,gEAAgE,GAAG,EAC1F,KAAC,WAAW,mBAAa,MAAM,EAAC,SAAS,EAAC,uCAAuC,GAAG,IAC7E,EACT,KAAC,OAAO,IAAC,SAAS,EAAC,cAAc,EAAC,SAAS,EAAC,UAAU,YACpD,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,YAAG,QAAiB,GAAW,GAC5C,IACA,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -1,4 +1,16 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A selection bar's words, for the `labels` prop. `{count}` is a number and `{noun}` the singular or plural from
|
|
4
|
+
* `noun`, whichever the count takes.
|
|
5
|
+
*/
|
|
6
|
+
export interface SelectionBarLabels {
|
|
7
|
+
selected: string;
|
|
8
|
+
allSelected: string;
|
|
9
|
+
selectAll: string;
|
|
10
|
+
clear: string;
|
|
11
|
+
/** Names the group of actions. */
|
|
12
|
+
actions: string;
|
|
13
|
+
}
|
|
2
14
|
export interface SelectionBarProps {
|
|
3
15
|
/** How many are selected. "all" when the whole collection is selected (React Aria's `'all'`). */
|
|
4
16
|
count: number | 'all';
|
|
@@ -14,6 +26,7 @@ export interface SelectionBarProps {
|
|
|
14
26
|
onSelectAll?: () => void;
|
|
15
27
|
/** Actions for the selection, shown while something is selected. */
|
|
16
28
|
children?: ReactNode;
|
|
29
|
+
labels?: Partial<SelectionBarLabels>;
|
|
17
30
|
className?: string;
|
|
18
31
|
}
|
|
19
32
|
/**
|
|
@@ -24,5 +37,5 @@ export interface SelectionBarProps {
|
|
|
24
37
|
* selection", to "Select all" if there is one, otherwise to the next focusable thing after the bar — so put the
|
|
25
38
|
* bar directly above its table or list.
|
|
26
39
|
*/
|
|
27
|
-
export declare function SelectionBar({ count, total, noun, onClear, onSelectAll, children, className, }: SelectionBarProps): import("react").JSX.Element;
|
|
40
|
+
export declare function SelectionBar({ count, total, noun, onClear, onSelectAll, children, labels: given, className, }: SelectionBarProps): import("react").JSX.Element;
|
|
28
41
|
//# sourceMappingURL=selection-bar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-bar.d.ts","sourceRoot":"","sources":["../../src/ui/selection-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"selection-bar.d.ts","sourceRoot":"","sources":["../../src/ui/selection-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/C;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AAUD,MAAM,WAAW,iBAAiB;IAChC,iGAAiG;IACjG,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IACtB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,MAAM,EAAE,KAAK,EACb,SAAS,GACV,EAAE,iBAAiB,+BAgEnB"}
|
package/dist/ui/selection-bar.js
CHANGED
|
@@ -3,7 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useRef } from 'react';
|
|
4
4
|
import { cn } from '../lib/cn.js';
|
|
5
5
|
import { focusAfter } from '../lib/tokens.js';
|
|
6
|
+
import { fill, withLabels } from '../lib/labels.js';
|
|
6
7
|
import { Button } from './button.js';
|
|
8
|
+
const selectionBarLabels = {
|
|
9
|
+
selected: '{count} {noun} selected',
|
|
10
|
+
allSelected: 'All {count} {noun} selected',
|
|
11
|
+
selectAll: 'Select all {count} {noun}',
|
|
12
|
+
clear: 'Clear selection',
|
|
13
|
+
actions: 'Selection',
|
|
14
|
+
};
|
|
7
15
|
/**
|
|
8
16
|
* The count and bulk actions for a multi-select Table or GridList. The count is a live region that is always
|
|
9
17
|
* in the page, so each change is announced ("3 projects selected") without moving focus.
|
|
@@ -12,7 +20,8 @@ import { Button } from './button.js';
|
|
|
12
20
|
* selection", to "Select all" if there is one, otherwise to the next focusable thing after the bar — so put the
|
|
13
21
|
* bar directly above its table or list.
|
|
14
22
|
*/
|
|
15
|
-
export function SelectionBar({ count, total, noun, onClear, onSelectAll, children, className, }) {
|
|
23
|
+
export function SelectionBar({ count, total, noun, onClear, onSelectAll, children, labels: given, className, }) {
|
|
24
|
+
const labels = withLabels(selectionBarLabels, given);
|
|
16
25
|
const ref = useRef(null);
|
|
17
26
|
const clearRef = useRef(null);
|
|
18
27
|
const selectAllRef = useRef(null);
|
|
@@ -21,15 +30,15 @@ export function SelectionBar({ count, total, noun, onClear, onSelectAll, childre
|
|
|
21
30
|
const text = n === 0
|
|
22
31
|
? ''
|
|
23
32
|
: all
|
|
24
|
-
?
|
|
25
|
-
:
|
|
33
|
+
? fill(labels.allSelected, { count: total ?? n, noun: noun[1] })
|
|
34
|
+
: fill(labels.selected, { count: n, noun: n === 1 ? noun[0] : noun[1] });
|
|
26
35
|
const showSelectAll = !!onSelectAll && !all && (total ?? 0) > 0;
|
|
27
|
-
return (_jsxs("div", { ref: ref, className: cn('flex flex-wrap items-center gap-x-4 gap-y-2', (n > 0 || showSelectAll) && 'min-h-control-target', className), children: [_jsx("p", { role: "status", className: cn('text-sm leading-5 font-semibold text-foreground', n === 0 && 'sr-only'), children: text }), (n > 0 || showSelectAll) && (_jsxs("div", { role: "group", "aria-label":
|
|
36
|
+
return (_jsxs("div", { ref: ref, className: cn('flex flex-wrap items-center gap-x-4 gap-y-2', (n > 0 || showSelectAll) && 'min-h-control-target', className), children: [_jsx("p", { role: "status", className: cn('text-sm leading-5 font-semibold text-foreground', n === 0 && 'sr-only'), children: text }), (n > 0 || showSelectAll) && (_jsxs("div", { role: "group", "aria-label": labels.actions, className: "flex flex-wrap items-center gap-2", children: [n > 0 && children, showSelectAll && (_jsx(Button, { ref: selectAllRef, variant: "ghost", visualSize: "sm", onPress: () => {
|
|
28
37
|
onSelectAll();
|
|
29
38
|
requestAnimationFrame(() => clearRef.current?.focus());
|
|
30
|
-
}, children:
|
|
39
|
+
}, children: fill(labels.selectAll, { count: total ?? 0, noun: noun[1] }) })), n > 0 && (_jsx(Button, { ref: clearRef, variant: "ghost", visualSize: "sm", onPress: () => {
|
|
31
40
|
onClear();
|
|
32
41
|
requestAnimationFrame(() => selectAllRef.current ? selectAllRef.current.focus() : focusAfter(ref.current));
|
|
33
|
-
}, children:
|
|
42
|
+
}, children: labels.clear }))] }))] }));
|
|
34
43
|
}
|
|
35
44
|
//# sourceMappingURL=selection-bar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-bar.js","sourceRoot":"","sources":["../../src/ui/selection-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"selection-bar.js","sourceRoot":"","sources":["../../src/ui/selection-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAerC,MAAM,kBAAkB,GAAuB;IAC7C,QAAQ,EAAE,yBAAyB;IACnC,WAAW,EAAE,6BAA6B;IAC1C,SAAS,EAAE,2BAA2B;IACtC,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,WAAW;CACrB,CAAC;AAqBF;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,MAAM,EAAE,KAAK,EACb,SAAS,GACS;IAClB,MAAM,MAAM,GAAG,UAAU,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,GAAG,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACjD,MAAM,GAAG,GAAG,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IACvE,MAAM,IAAI,GACR,CAAC,KAAK,CAAC;QACL,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,GAAG;YACH,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAChE,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,6CAA6C,EAC7C,CAAC,CAAC,GAAG,CAAC,IAAI,aAAa,CAAC,IAAI,sBAAsB,EAClD,SAAS,CACV,aAED,YACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,YAErF,IAAI,GACH,EACH,CAAC,CAAC,GAAG,CAAC,IAAI,aAAa,CAAC,IAAI,CAC3B,eAAK,IAAI,EAAC,OAAO,gBAAa,MAAM,CAAC,OAAO,EAAE,SAAS,EAAC,mCAAmC,aACxF,CAAC,GAAG,CAAC,IAAI,QAAQ,EACjB,aAAa,IAAI,CAChB,KAAC,MAAM,IACL,GAAG,EAAE,YAAY,EACjB,OAAO,EAAC,OAAO,EACf,UAAU,EAAC,IAAI,EACf,OAAO,EAAE,GAAG,EAAE;4BACZ,WAAY,EAAE,CAAC;4BACf,qBAAqB,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;wBACzD,CAAC,YAEA,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,GACtD,CACV,EACA,CAAC,GAAG,CAAC,IAAI,CACR,KAAC,MAAM,IACL,GAAG,EAAE,QAAQ,EACb,OAAO,EAAC,OAAO,EACf,UAAU,EAAC,IAAI,EACf,OAAO,EAAE,GAAG,EAAE;4BACZ,OAAO,EAAE,CAAC;4BACV,qBAAqB,CAAC,GAAG,EAAE,CACzB,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAC9E,CAAC;wBACJ,CAAC,YAEA,MAAM,CAAC,KAAK,GACN,CACV,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC"}
|
package/dist/ui/sheet.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
/** A Sheet's words, for the `labels` prop. */
|
|
3
|
+
export interface SheetLabels {
|
|
4
|
+
close: string;
|
|
5
|
+
}
|
|
2
6
|
export interface SheetProps {
|
|
3
7
|
isOpen: boolean;
|
|
4
8
|
onOpenChange: (open: boolean) => void;
|
|
@@ -11,11 +15,12 @@ export interface SheetProps {
|
|
|
11
15
|
headerActions?: ReactNode;
|
|
12
16
|
children: ReactNode;
|
|
13
17
|
footer?: ReactNode;
|
|
18
|
+
labels?: Partial<SheetLabels>;
|
|
14
19
|
className?: string;
|
|
15
20
|
}
|
|
16
21
|
/**
|
|
17
22
|
* A modal panel from the edge: focus is trapped inside, Escape and the backdrop close it,
|
|
18
23
|
* focus returns to what opened it. Slides by --motion-distance, so AAA themes fade only.
|
|
19
24
|
*/
|
|
20
|
-
export declare function Sheet({ isOpen, onOpenChange, side, title, headerActions, children, footer, className, ...rest }: SheetProps): import("react").JSX.Element;
|
|
25
|
+
export declare function Sheet({ isOpen, onOpenChange, side, title, headerActions, children, footer, labels, className, ...rest }: SheetProps): import("react").JSX.Element;
|
|
21
26
|
//# sourceMappingURL=sheet.d.ts.map
|
package/dist/ui/sheet.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,YAAY,EACZ,IAAc,EACd,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,+BA+CZ"}
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,8CAA8C;AAC9C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,YAAY,EACZ,IAAc,EACd,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,+BA+CZ"}
|
package/dist/ui/sheet.js
CHANGED
|
@@ -8,9 +8,9 @@ import { IconButton } from './icon-button.js';
|
|
|
8
8
|
* A modal panel from the edge: focus is trapped inside, Escape and the backdrop close it,
|
|
9
9
|
* focus returns to what opened it. Slides by --motion-distance, so AAA themes fade only.
|
|
10
10
|
*/
|
|
11
|
-
export function Sheet({ isOpen, onOpenChange, side = 'right', title, headerActions, children, footer, className, ...rest }) {
|
|
11
|
+
export function Sheet({ isOpen, onOpenChange, side = 'right', title, headerActions, children, footer, labels, className, ...rest }) {
|
|
12
12
|
return (_jsx(ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: true, "data-overlay": true, className: "fixed inset-0 z-(--z-sheet) bg-overlay", children: _jsx(Modal, { "data-sheet": side, className: cn('fixed inset-y-0 flex max-w-[calc(100%-3rem)] flex-col bg-background text-foreground shadow-(--shadow-lg) outline-none', side === 'right'
|
|
13
13
|
? 'right-0 w-panel border-l border-border'
|
|
14
|
-
: 'left-0 w-sidebar border-r border-sidebar-border bg-sidebar', className), children: _jsxs(Dialog, { "aria-label": title ? undefined : rest['aria-label'], className: "flex h-full min-h-0 flex-col outline-none", children: [title ? (_jsxs("div", { className: "flex min-h-[calc(var(--control-height)+1rem)] items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4", children: [_jsx(Heading, { slot: "title", className: "text-subheading", children: title }), _jsxs("div", { className: "flex items-center gap-1", children: [headerActions, _jsx(IconButton, { label:
|
|
14
|
+
: 'left-0 w-sidebar border-r border-sidebar-border bg-sidebar', className), children: _jsxs(Dialog, { "aria-label": title ? undefined : rest['aria-label'], className: "flex h-full min-h-0 flex-col outline-none", children: [title ? (_jsxs("div", { className: "flex min-h-[calc(var(--control-height)+1rem)] items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4", children: [_jsx(Heading, { slot: "title", className: "text-subheading", children: title }), _jsxs("div", { className: "flex items-center gap-1", children: [headerActions, _jsx(IconButton, { label: labels?.close ?? 'Close', icon: X, visualSize: "icon-sm", slot: "close", tooltip: false, className: "justify-end" })] })] })) : null, children, footer] }) }) }));
|
|
15
15
|
}
|
|
16
16
|
//# sourceMappingURL=sheet.js.map
|
package/dist/ui/sheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAuB9C;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,YAAY,EACZ,IAAI,GAAG,OAAO,EACd,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACI;IACX,OAAO,CACL,KAAC,YAAY,IACX,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,8BAEb,SAAS,EAAC,wCAAwC,YAElD,KAAC,KAAK,kBACQ,IAAI,EAChB,SAAS,EAAE,EAAE,CACX,uHAAuH,EACvH,IAAI,KAAK,OAAO;gBACd,CAAC,CAAC,wCAAwC;gBAC1C,CAAC,CAAC,4DAA4D,EAChE,SAAS,CACV,YAED,MAAC,MAAM,kBACO,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,EAClD,SAAS,EAAC,2CAA2C,aAEpD,KAAK,CAAC,CAAC,CAAC,CACP,eAAK,SAAS,EAAC,wHAAwH,aACrI,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,iBAAiB,YAC9C,KAAK,GACE,EACV,eAAK,SAAS,EAAC,yBAAyB,aACrC,aAAa,EACd,KAAC,UAAU,IACT,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,OAAO,EAC/B,IAAI,EAAE,CAAC,EACP,UAAU,EAAC,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,KAAK,EACd,SAAS,EAAC,aAAa,GACvB,IACE,IACF,CACP,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EACR,MAAM,IACA,GACH,GACK,CAChB,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { type TabListProps as RACTabListProps, type TabPanelProps as RACTabPanelProps, type TabProps as RACTabProps, type TabsProps as RACTabsProps } from 'react-aria-components';
|
|
2
|
+
export interface TabsProps extends Omit<RACTabsProps, 'className'> {
|
|
3
|
+
className?: string;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Views of the same thing, one at a time: a TabList and a TabPanel for each tab. Arrow keys move between tabs and
|
|
7
|
+
* show each as focus reaches it; Tab moves on to the panel. Use them for peers people switch between, not for
|
|
8
|
+
* steps in order (that's a form) or for navigation between pages (that's links).
|
|
9
|
+
*/
|
|
10
|
+
export declare function Tabs({ className, ...props }: TabsProps): import("react").JSX.Element;
|
|
11
|
+
export interface TabListProps<T extends object> extends Omit<RACTabListProps<T>, 'className'> {
|
|
12
|
+
/** What the tabs switch between: "Project details". */
|
|
13
|
+
'aria-label': string;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* The row of tabs, on a rule. It wraps rather than scrolls when the tabs don't fit, so no tab is ever hidden off
|
|
18
|
+
* the edge at 320px (1.4.10).
|
|
19
|
+
*/
|
|
20
|
+
export declare function TabList<T extends object>({ className, ...props }: TabListProps<T>): import("react").JSX.Element;
|
|
21
|
+
export interface TabProps extends Omit<RACTabProps, 'className'> {
|
|
22
|
+
/** Layer 1, the target. */
|
|
23
|
+
className?: string;
|
|
24
|
+
/** Layer 2, the painted tab. */
|
|
25
|
+
visualClassName?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* A tab in three layers. The tab is the target (Layer 1), at least --target-min both ways. The painted tab
|
|
29
|
+
* inside it (Layer 2) takes the hover ground and the focus ring, and the selected one is bold with a brand bar on
|
|
30
|
+
* the rule: weight and the bar, never colour alone. The bar is the brand colour, which clears 3:1 against every
|
|
31
|
+
* surface because it is also the focus ring.
|
|
32
|
+
*/
|
|
33
|
+
export declare function Tab({ className, visualClassName, children, ...props }: TabProps): import("react").JSX.Element;
|
|
34
|
+
export interface TabPanelProps extends Omit<RACTabPanelProps, 'className'> {
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* A tab's content. With nothing focusable inside, React Aria makes the panel itself a tab stop so a keyboard
|
|
39
|
+
* reaches it after the tabs; it shows the focus ring then. Positioned, so hidden text inside it is placed against
|
|
40
|
+
* it.
|
|
41
|
+
*/
|
|
42
|
+
export declare function TabPanel({ className, ...props }: TabPanelProps): import("react").JSX.Element;
|
|
43
|
+
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,YAAY,IAAI,eAAe,EACpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,QAAQ,IAAI,WAAW,EAC5B,KAAK,SAAS,IAAI,YAAY,EAC/B,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAEtD;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC;IAC3F,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,+BAOjF;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9D,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,+BAwB/E;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAO9D"}
|
package/dist/ui/tabs.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { composeRenderProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, Tabs as RACTabs, } from 'react-aria-components';
|
|
4
|
+
import { cn } from '../lib/cn.js';
|
|
5
|
+
/**
|
|
6
|
+
* Views of the same thing, one at a time: a TabList and a TabPanel for each tab. Arrow keys move between tabs and
|
|
7
|
+
* show each as focus reaches it; Tab moves on to the panel. Use them for peers people switch between, not for
|
|
8
|
+
* steps in order (that's a form) or for navigation between pages (that's links).
|
|
9
|
+
*/
|
|
10
|
+
export function Tabs({ className, ...props }) {
|
|
11
|
+
return _jsx(RACTabs, { ...props, className: cn('flex flex-col gap-4', className) });
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* The row of tabs, on a rule. It wraps rather than scrolls when the tabs don't fit, so no tab is ever hidden off
|
|
15
|
+
* the edge at 320px (1.4.10).
|
|
16
|
+
*/
|
|
17
|
+
export function TabList({ className, ...props }) {
|
|
18
|
+
return (_jsx(RACTabList, { ...props, className: cn('flex flex-wrap gap-x-1 border-b border-border', className) }));
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* A tab in three layers. The tab is the target (Layer 1), at least --target-min both ways. The painted tab
|
|
22
|
+
* inside it (Layer 2) takes the hover ground and the focus ring, and the selected one is bold with a brand bar on
|
|
23
|
+
* the rule: weight and the bar, never colour alone. The bar is the brand colour, which clears 3:1 against every
|
|
24
|
+
* surface because it is also the focus ring.
|
|
25
|
+
*/
|
|
26
|
+
export function Tab({ className, visualClassName, children, ...props }) {
|
|
27
|
+
return (_jsx(RACTab, { ...props, className: cn('group/tab relative -mb-px inline-flex min-h-target min-w-target cursor-pointer items-stretch outline-none data-disabled:cursor-not-allowed', className), children: composeRenderProps(children, (kids) => (_jsx("span", { className: cn('inline-flex h-control items-center gap-2 rounded-t-md border-b-[3px] border-transparent px-(--control-pad-x) text-sm font-medium whitespace-nowrap text-muted-foreground', 'group-data-hovered/tab:bg-accent group-data-hovered/tab:text-foreground group-data-focus-visible/tab:focus-ring-inset', 'group-data-selected/tab:border-brand group-data-selected/tab:font-bold group-data-selected/tab:text-foreground', 'group-data-disabled/tab:opacity-50', visualClassName), children: kids }))) }));
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* A tab's content. With nothing focusable inside, React Aria makes the panel itself a tab stop so a keyboard
|
|
31
|
+
* reaches it after the tabs; it shows the focus ring then. Positioned, so hidden text inside it is placed against
|
|
32
|
+
* it.
|
|
33
|
+
*/
|
|
34
|
+
export function TabPanel({ className, ...props }) {
|
|
35
|
+
return (_jsx(RACTabPanel, { ...props, className: cn('relative rounded-md outline-none data-focus-visible:focus-ring', className) }));
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,kBAAkB,EAClB,GAAG,IAAI,MAAM,EACb,OAAO,IAAI,UAAU,EACrB,QAAQ,IAAI,WAAW,EACvB,IAAI,IAAI,OAAO,GAKhB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAMlC;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa;IACrD,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,GAAI,CAAC;AACjF,CAAC;AAQD;;;GAGG;AACH,MAAM,UAAU,OAAO,CAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB;IAChF,OAAO,CACL,KAAC,UAAU,OACL,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,GACzE,CACH,CAAC;AACJ,CAAC;AASD;;;;;GAKG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAY;IAC9E,OAAO,CACL,KAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAE,EAAE,CACX,4IAA4I,EAC5I,SAAS,CACV,YAEA,kBAAkB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACtC,eACE,SAAS,EAAE,EAAE,CACX,0KAA0K,EAC1K,uHAAuH,EACvH,gHAAgH,EAChH,oCAAoC,EACpC,eAAe,CAChB,YAEA,IAAI,GACA,CACR,CAAC,GACK,CACV,CAAC;AACJ,CAAC;AAMD;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB;IAC7D,OAAO,CACL,KAAC,WAAW,OACN,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,gEAAgE,EAAE,SAAS,CAAC,GAC1F,CACH,CAAC;AACJ,CAAC"}
|
package/dist/ui/text-field.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import { type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
|
|
3
|
-
import { type FieldWidth } from './field.js';
|
|
3
|
+
import { type FieldWidth, type FieldLabels } from './field.js';
|
|
4
4
|
export interface TextFieldProps extends Omit<RACTextFieldProps, 'className' | 'children' | 'validate'> {
|
|
5
5
|
label: string;
|
|
6
6
|
/** Hint: what to enter and in what format. */
|
|
@@ -12,16 +12,17 @@ export interface TextFieldProps extends Omit<RACTextFieldProps, 'className' | 'c
|
|
|
12
12
|
validate?: (value: string) => string | string[] | true | null | undefined;
|
|
13
13
|
placeholder?: string;
|
|
14
14
|
width?: FieldWidth;
|
|
15
|
+
labels?: Partial<FieldLabels>;
|
|
15
16
|
className?: string;
|
|
16
17
|
}
|
|
17
18
|
/**
|
|
18
19
|
* Single-line text input. Pass `autoComplete` for anything about the user (email, name, organization,
|
|
19
20
|
* tel, postal-code…) so browsers can fill it and assistive tech can identify it (WCAG 1.3.5).
|
|
20
21
|
*/
|
|
21
|
-
export declare function TextField({ label, description, errorMessage, requiredMessage, validate, placeholder, width, className, ...props }: TextFieldProps): import("react").JSX.Element;
|
|
22
|
+
export declare function TextField({ label, description, errorMessage, requiredMessage, validate, placeholder, width, labels, className, ...props }: TextFieldProps): import("react").JSX.Element;
|
|
22
23
|
export interface TextAreaProps extends TextFieldProps {
|
|
23
24
|
rows?: number;
|
|
24
25
|
}
|
|
25
26
|
/** Multi-line text. Grows with its rows; never resizes narrower than its field. */
|
|
26
|
-
export declare function TextArea({ label, description, errorMessage, requiredMessage, validate, placeholder, width, rows, className, ...props }: TextAreaProps): import("react").JSX.Element;
|
|
27
|
+
export declare function TextArea({ label, description, errorMessage, requiredMessage, validate, placeholder, width, rows, labels, className, ...props }: TextAreaProps): import("react").JSX.Element;
|
|
27
28
|
//# sourceMappingURL=text-field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/ui/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAWL,KAAK,UAAU,
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/ui/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAWL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,iBAAiB,EACjB,WAAW,GAAG,UAAU,GAAG,UAAU,CACtC;IACC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,KAAc,EACd,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,+BAyBhB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mFAAmF;AACnF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,KAAY,EACZ,IAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,+BAuBf"}
|
package/dist/ui/text-field.js
CHANGED
|
@@ -7,11 +7,11 @@ import { FieldDescription, FieldError, FieldLabel, fieldStack, fieldBox, fieldIn
|
|
|
7
7
|
* Single-line text input. Pass `autoComplete` for anything about the user (email, name, organization,
|
|
8
8
|
* tel, postal-code…) so browsers can fill it and assistive tech can identify it (WCAG 1.3.5).
|
|
9
9
|
*/
|
|
10
|
-
export function TextField({ label, description, errorMessage, requiredMessage, validate, placeholder, width = 'full', className, ...props }) {
|
|
11
|
-
return (_jsxs(RACTextField, { ...props, validate: withRequired(props.isRequired, requiredMessage ?? `Enter ${lcFirst(label)}`, (v) => !v?.trim(), validate), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { requiredMessage: requiredMessage ?? `Enter ${lcFirst(label)}`, children: errorMessage }), _jsx("div", { className: fieldBox, children: _jsx(Input, { placeholder: placeholder, className: fieldInput }) })] }));
|
|
10
|
+
export function TextField({ label, description, errorMessage, requiredMessage, validate, placeholder, width = 'full', labels, className, ...props }) {
|
|
11
|
+
return (_jsxs(RACTextField, { ...props, validate: withRequired(props.isRequired, requiredMessage ?? `Enter ${lcFirst(label)}`, (v) => !v?.trim(), 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: requiredMessage ?? `Enter ${lcFirst(label)}`, children: errorMessage }), _jsx("div", { className: fieldBox, children: _jsx(Input, { placeholder: placeholder, className: fieldInput }) })] }));
|
|
12
12
|
}
|
|
13
13
|
/** Multi-line text. Grows with its rows; never resizes narrower than its field. */
|
|
14
|
-
export function TextArea({ label, description, errorMessage, requiredMessage, validate, placeholder, width = 'lg', rows = 4, className, ...props }) {
|
|
15
|
-
return (_jsxs(RACTextField, { ...props, validate: withRequired(props.isRequired, requiredMessage ?? `Enter ${lcFirst(label)}`, (v) => !v?.trim(), validate), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { requiredMessage: requiredMessage ?? `Enter ${lcFirst(label)}`, children: errorMessage }), _jsx(RACTextArea, { rows: rows, placeholder: placeholder, className: textAreaStyles })] }));
|
|
14
|
+
export function TextArea({ label, description, errorMessage, requiredMessage, validate, placeholder, width = 'lg', rows = 4, labels, className, ...props }) {
|
|
15
|
+
return (_jsxs(RACTextField, { ...props, validate: withRequired(props.isRequired, requiredMessage ?? `Enter ${lcFirst(label)}`, (v) => !v?.trim(), 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: requiredMessage ?? `Enter ${lcFirst(label)}`, children: errorMessage }), _jsx(RACTextArea, { rows: rows, placeholder: placeholder, className: textAreaStyles })] }));
|
|
16
16
|
}
|
|
17
17
|
//# sourceMappingURL=text-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/ui/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,KAAK,EACL,QAAQ,IAAI,WAAW,EACvB,SAAS,IAAI,YAAY,GAE1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,EACV,WAAW,EACX,OAAO,EACP,cAAc,EACd,YAAY,
|
|
1
|
+
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/ui/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,KAAK,EACL,QAAQ,IAAI,WAAW,EACvB,SAAS,IAAI,YAAY,GAE1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,EACV,WAAW,EACX,OAAO,EACP,cAAc,EACd,YAAY,GAGb,MAAM,YAAY,CAAC;AAoBpB;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,KAAK,GAAG,MAAM,EACd,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACO;IACf,OAAO,CACL,MAAC,YAAY,OACP,KAAK,EACT,QAAQ,EAAE,YAAY,CACpB,KAAK,CAAC,UAAU,EAChB,eAAe,IAAI,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,EAC5C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EACjB,QAAQ,CACT,EACD,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,aAExD,KAAC,UAAU,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAc,EAC7D,WAAW,IAAI,KAAC,gBAAgB,cAAE,WAAW,GAAoB,EAClE,KAAC,UAAU,IACT,WAAW,EAAE,MAAM,EAAE,WAAW,EAChC,eAAe,EAAE,eAAe,IAAI,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,YAE5D,YAAY,GACF,EACb,cAAK,SAAS,EAAE,QAAQ,YACtB,KAAC,KAAK,IAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,GAAI,GACtD,IACO,CAChB,CAAC;AACJ,CAAC;AAMD,mFAAmF;AACnF,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,KAAK,GAAG,IAAI,EACZ,IAAI,GAAG,CAAC,EACR,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACM;IACd,OAAO,CACL,MAAC,YAAY,OACP,KAAK,EACT,QAAQ,EAAE,YAAY,CACpB,KAAK,CAAC,UAAU,EAChB,eAAe,IAAI,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,EAC5C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EACjB,QAAQ,CACT,EACD,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,aAExD,KAAC,UAAU,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAc,EAC7D,WAAW,IAAI,KAAC,gBAAgB,cAAE,WAAW,GAAoB,EAClE,KAAC,UAAU,IACT,WAAW,EAAE,MAAM,EAAE,WAAW,EAChC,eAAe,EAAE,eAAe,IAAI,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,YAE5D,YAAY,GACF,EACb,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,GAAI,IACnE,CAChB,CAAC;AACJ,CAAC"}
|
|
@@ -1,4 +1,16 @@
|
|
|
1
1
|
import { type ConformanceLevel, type ThemeOptions, type ThemePreference } from './theme.js';
|
|
2
|
+
/** The switcher's words, for the `labels` prop. */
|
|
3
|
+
export interface ThemeSwitcherLabels {
|
|
4
|
+
/** Names the theme control. */
|
|
5
|
+
theme: string;
|
|
6
|
+
light: string;
|
|
7
|
+
dark: string;
|
|
8
|
+
system: string;
|
|
9
|
+
/** Names the level control, when `level` is on. */
|
|
10
|
+
level: string;
|
|
11
|
+
aa: string;
|
|
12
|
+
aaa: string;
|
|
13
|
+
}
|
|
2
14
|
export interface ThemeSwitcherProps extends ThemeOptions {
|
|
3
15
|
/** Also offer AA and AAA, as the docs site does. */
|
|
4
16
|
level?: boolean;
|
|
@@ -15,6 +27,7 @@ export interface ThemeSwitcherProps extends ThemeOptions {
|
|
|
15
27
|
resolved: 'light' | 'dark';
|
|
16
28
|
level: ConformanceLevel;
|
|
17
29
|
}) => void;
|
|
30
|
+
labels?: Partial<ThemeSwitcherLabels>;
|
|
18
31
|
className?: string;
|
|
19
32
|
}
|
|
20
33
|
/**
|
|
@@ -22,5 +35,5 @@ export interface ThemeSwitcherProps extends ThemeOptions {
|
|
|
22
35
|
* where ThemeScript reads it before the next page paints. System follows the operating system as it changes.
|
|
23
36
|
* Use the same options as the page's ThemeScript.
|
|
24
37
|
*/
|
|
25
|
-
export declare function ThemeSwitcher({ level: offerLevel, initialTheme, initialLevel, onChange, className, ...options }: ThemeSwitcherProps): import("react").JSX.Element;
|
|
38
|
+
export declare function ThemeSwitcher({ level: offerLevel, initialTheme, initialLevel, onChange, labels: given, className, ...options }: ThemeSwitcherProps): import("react").JSX.Element;
|
|
26
39
|
//# sourceMappingURL=theme-switcher.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-switcher.d.ts","sourceRoot":"","sources":["../../src/ui/theme-switcher.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme-switcher.d.ts","sourceRoot":"","sources":["../../src/ui/theme-switcher.tsx"],"names":[],"mappings":"AAMA,OAAO,EAOL,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,YAAY,CAAC;AAEpB,mDAAmD;AACnD,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;CACb;AAYD,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,mEAAmE;IACnE,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QACjB,KAAK,EAAE,eAAe,CAAC;QACvB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,KAAK,EAAE,gBAAgB,CAAC;KACzB,KAAK,IAAI,CAAC;IACX,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,UAAkB,EACzB,YAAY,EACZ,YAAmB,EACnB,QAAQ,EACR,MAAM,EAAE,KAAK,EACb,SAAS,EACT,GAAG,OAAO,EACX,EAAE,kBAAkB,+BAgDpB"}
|