@setsquare/ui 0.4.0 → 0.6.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 +129 -0
- package/README.md +41 -3
- package/dist/index.d.ts +15 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/english.d.ts +11 -0
- package/dist/lib/english.d.ts.map +1 -0
- package/dist/lib/english.js +65 -0
- package/dist/lib/english.js.map +1 -0
- package/dist/lib/labels.d.ts +38 -8
- package/dist/lib/labels.d.ts.map +1 -1
- package/dist/lib/labels.js +97 -9
- package/dist/lib/labels.js.map +1 -1
- package/dist/lib/locale.d.ts +105 -0
- package/dist/lib/locale.d.ts.map +1 -0
- package/dist/lib/locale.js +42 -0
- package/dist/lib/locale.js.map +1 -0
- package/dist/lint/index.d.ts +5 -0
- package/dist/lint/index.d.ts.map +1 -1
- package/dist/lint/index.js +80 -3
- package/dist/lint/index.js.map +1 -1
- package/dist/shell/dashboard-shell.d.ts +4 -1
- package/dist/shell/dashboard-shell.d.ts.map +1 -1
- package/dist/shell/dashboard-shell.js +3 -2
- package/dist/shell/dashboard-shell.js.map +1 -1
- package/dist/shell/landmarks.d.ts +33 -0
- package/dist/shell/landmarks.d.ts.map +1 -0
- package/dist/shell/landmarks.js +20 -0
- package/dist/shell/landmarks.js.map +1 -0
- package/dist/shell/right-panel.d.ts +7 -2
- package/dist/shell/right-panel.d.ts.map +1 -1
- package/dist/shell/right-panel.js +13 -7
- package/dist/shell/right-panel.js.map +1 -1
- package/dist/shell/sidebar.d.ts +10 -2
- package/dist/shell/sidebar.d.ts.map +1 -1
- package/dist/shell/sidebar.js +31 -14
- package/dist/shell/sidebar.js.map +1 -1
- package/dist/shell/site-menu.d.ts +11 -3
- package/dist/shell/site-menu.d.ts.map +1 -1
- package/dist/shell/site-menu.js +7 -1
- package/dist/shell/site-menu.js.map +1 -1
- package/dist/shell/site-nav.d.ts +4 -1
- package/dist/shell/site-nav.d.ts.map +1 -1
- package/dist/shell/site-nav.js +3 -3
- package/dist/shell/site-nav.js.map +1 -1
- package/dist/shell/site-shell.d.ts +4 -2
- package/dist/shell/site-shell.d.ts.map +1 -1
- package/dist/shell/site-shell.js +3 -2
- package/dist/shell/site-shell.js.map +1 -1
- package/dist/styles/theme.css +2 -0
- package/dist/styles/tokens.css +9 -0
- package/dist/testing/index.d.ts +54 -0
- package/dist/testing/index.d.ts.map +1 -1
- package/dist/testing/index.js +246 -9
- package/dist/testing/index.js.map +1 -1
- package/dist/tokens.json +25 -0
- package/dist/ui/alert.d.ts +2 -0
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +11 -9
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/breadcrumbs.d.ts +17 -1
- package/dist/ui/breadcrumbs.d.ts.map +1 -1
- package/dist/ui/breadcrumbs.js +6 -3
- package/dist/ui/breadcrumbs.js.map +1 -1
- package/dist/ui/button-styles.d.ts.map +1 -1
- package/dist/ui/button-styles.js +16 -6
- package/dist/ui/button-styles.js.map +1 -1
- package/dist/ui/calendar.d.ts +1 -0
- package/dist/ui/calendar.d.ts.map +1 -1
- package/dist/ui/calendar.js +7 -1
- package/dist/ui/calendar.js.map +1 -1
- package/dist/ui/checkbox.d.ts.map +1 -1
- package/dist/ui/checkbox.js +7 -7
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/code-block-parts.d.ts +30 -0
- package/dist/ui/code-block-parts.d.ts.map +1 -0
- package/dist/ui/code-block-parts.js +27 -0
- package/dist/ui/code-block-parts.js.map +1 -0
- package/dist/ui/code-block.d.ts +4 -10
- package/dist/ui/code-block.d.ts.map +1 -1
- package/dist/ui/code-block.js +4 -9
- package/dist/ui/code-block.js.map +1 -1
- package/dist/ui/combo-box.d.ts +13 -2
- package/dist/ui/combo-box.d.ts.map +1 -1
- package/dist/ui/combo-box.js +10 -3
- package/dist/ui/combo-box.js.map +1 -1
- package/dist/ui/copy-button.d.ts +7 -1
- package/dist/ui/copy-button.d.ts.map +1 -1
- package/dist/ui/copy-button.js +11 -10
- package/dist/ui/copy-button.js.map +1 -1
- package/dist/ui/date-field.d.ts +1 -0
- package/dist/ui/date-field.d.ts.map +1 -1
- package/dist/ui/date-field.js +20 -16
- package/dist/ui/date-field.js.map +1 -1
- package/dist/ui/dialog.d.ts +6 -1
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +11 -8
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/drop-indicator.d.ts +21 -0
- package/dist/ui/drop-indicator.d.ts.map +1 -0
- package/dist/ui/drop-indicator.js +20 -0
- package/dist/ui/drop-indicator.js.map +1 -0
- package/dist/ui/error-state.d.ts +17 -2
- package/dist/ui/error-state.d.ts.map +1 -1
- package/dist/ui/error-state.js +32 -34
- package/dist/ui/error-state.js.map +1 -1
- package/dist/ui/feature-card.d.ts +18 -3
- package/dist/ui/feature-card.d.ts.map +1 -1
- package/dist/ui/feature-card.js +18 -3
- package/dist/ui/feature-card.js.map +1 -1
- package/dist/ui/field.d.ts +28 -9
- package/dist/ui/field.d.ts.map +1 -1
- package/dist/ui/field.js +22 -10
- package/dist/ui/field.js.map +1 -1
- package/dist/ui/file-upload.d.ts +23 -5
- package/dist/ui/file-upload.d.ts.map +1 -1
- package/dist/ui/file-upload.js +54 -36
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/form.d.ts +11 -1
- package/dist/ui/form.d.ts.map +1 -1
- package/dist/ui/form.js +7 -4
- package/dist/ui/form.js.map +1 -1
- package/dist/ui/grid-list.d.ts +10 -3
- package/dist/ui/grid-list.d.ts.map +1 -1
- package/dist/ui/grid-list.js +18 -7
- package/dist/ui/grid-list.js.map +1 -1
- package/dist/ui/number-field.d.ts.map +1 -1
- package/dist/ui/number-field.js +5 -3
- package/dist/ui/number-field.js.map +1 -1
- package/dist/ui/pagination.d.ts +11 -3
- package/dist/ui/pagination.d.ts.map +1 -1
- package/dist/ui/pagination.js +30 -23
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/radio-group.d.ts.map +1 -1
- package/dist/ui/radio-group.js +4 -4
- package/dist/ui/radio-group.js.map +1 -1
- package/dist/ui/search.d.ts +3 -0
- package/dist/ui/search.d.ts.map +1 -1
- package/dist/ui/search.js +11 -10
- package/dist/ui/search.js.map +1 -1
- package/dist/ui/select.d.ts +7 -1
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +7 -3
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/selection-bar.d.ts +17 -4
- package/dist/ui/selection-bar.d.ts.map +1 -1
- package/dist/ui/selection-bar.js +15 -11
- package/dist/ui/selection-bar.js.map +1 -1
- package/dist/ui/sheet.d.ts +1 -0
- package/dist/ui/sheet.d.ts.map +1 -1
- package/dist/ui/sheet.js +4 -1
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/slider.d.ts +9 -2
- package/dist/ui/slider.d.ts.map +1 -1
- package/dist/ui/slider.js +13 -5
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/switch.d.ts +2 -1
- package/dist/ui/switch.d.ts.map +1 -1
- package/dist/ui/switch.js +5 -2
- package/dist/ui/switch.js.map +1 -1
- package/dist/ui/tabs.d.ts +1 -0
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +13 -12
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/text-field.d.ts.map +1 -1
- package/dist/ui/text-field.js +7 -3
- package/dist/ui/text-field.js.map +1 -1
- package/dist/ui/theme-switcher.d.ts +1 -0
- package/dist/ui/theme-switcher.d.ts.map +1 -1
- package/dist/ui/theme-switcher.js +7 -7
- package/dist/ui/theme-switcher.js.map +1 -1
- package/dist/ui/toast.d.ts +1 -0
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +4 -1
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toolbar.d.ts +22 -0
- package/dist/ui/toolbar.d.ts.map +1 -0
- package/dist/ui/toolbar.js +22 -0
- package/dist/ui/toolbar.js.map +1 -0
- package/dist/ui/tree.d.ts +57 -12
- package/dist/ui/tree.d.ts.map +1 -1
- package/dist/ui/tree.js +55 -16
- package/dist/ui/tree.js.map +1 -1
- package/package.json +4 -3
|
@@ -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,
|
|
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,cAAc,EACd,YAAY,EAEZ,cAAc,GAEf,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,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IACjC,MAAM,QAAQ,GAAG,eAAe,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/D,OAAO,CACL,MAAC,YAAY,OACP,KAAK,EACT,QAAQ,EAAE,YAAY,CAAS,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,CAAC,EACvF,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,aAExD,KAAC,UAAU,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,YACrD,KAAK,GACK,EACZ,WAAW,IAAI,KAAC,gBAAgB,cAAE,WAAW,GAAoB,EAClE,KAAC,UAAU,IAAC,WAAW,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,eAAe,EAAE,QAAQ,YACjE,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,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IACjC,MAAM,QAAQ,GAAG,eAAe,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/D,OAAO,CACL,MAAC,YAAY,OACP,KAAK,EACT,QAAQ,EAAE,YAAY,CAAS,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,CAAC,EACvF,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,aAExD,KAAC,UAAU,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,YACrD,KAAK,GACK,EACZ,WAAW,IAAI,KAAC,gBAAgB,cAAE,WAAW,GAAoB,EAClE,KAAC,UAAU,IAAC,WAAW,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,eAAe,EAAE,QAAQ,YACjE,YAAY,GACF,EACb,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,GAAI,IACnE,CAChB,CAAC;AACJ,CAAC"}
|
|
@@ -11,6 +11,7 @@ export interface ThemeSwitcherLabels {
|
|
|
11
11
|
aa: string;
|
|
12
12
|
aaa: string;
|
|
13
13
|
}
|
|
14
|
+
export declare const themeSwitcherLabels: ThemeSwitcherLabels;
|
|
14
15
|
export interface ThemeSwitcherProps extends ThemeOptions {
|
|
15
16
|
/** Also offer AA and AAA, as the docs site does. */
|
|
16
17
|
level?: boolean;
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAQjC,CAAC;AAEF,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"}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useSyncExternalStore } from 'react';
|
|
4
4
|
import { cn } from '../lib/cn.js';
|
|
5
|
-
import {
|
|
5
|
+
import { useLabels } from '../lib/locale.js';
|
|
6
6
|
import { Segment, SegmentedControl } from './segmented-control.js';
|
|
7
7
|
import { applyLevel, applyTheme, readLevel, readTheme, resolveTheme, subscribeTheme, } from './theme.js';
|
|
8
|
-
const themeSwitcherLabels = {
|
|
8
|
+
export const themeSwitcherLabels = {
|
|
9
9
|
theme: 'Theme',
|
|
10
10
|
light: 'Light',
|
|
11
11
|
dark: 'Dark',
|
|
@@ -20,24 +20,24 @@ const themeSwitcherLabels = {
|
|
|
20
20
|
* Use the same options as the page's ThemeScript.
|
|
21
21
|
*/
|
|
22
22
|
export function ThemeSwitcher({ level: offerLevel = false, initialTheme, initialLevel = 'aa', onChange, labels: given, className, ...options }) {
|
|
23
|
-
const
|
|
23
|
+
const t = useLabels('themeSwitcher', themeSwitcherLabels, given);
|
|
24
24
|
const { storage, key, levelKey, defaultTheme } = options;
|
|
25
25
|
const subscribe = useCallback((cb) => subscribeTheme(cb, { storage, key, levelKey, defaultTheme }), [storage, key, levelKey, defaultTheme]);
|
|
26
26
|
const theme = useSyncExternalStore(subscribe, () => readTheme(options), () => initialTheme ?? defaultTheme ?? 'system');
|
|
27
27
|
const level = useSyncExternalStore(subscribe, readLevel, () => initialLevel);
|
|
28
|
-
const report = (
|
|
29
|
-
return (_jsxs("div", { className: cn('flex flex-wrap items-center gap-2', className), children: [_jsxs(SegmentedControl, { "aria-label":
|
|
28
|
+
const report = (preference, l) => onChange?.({ theme: preference, resolved: resolveTheme(preference), level: l });
|
|
29
|
+
return (_jsxs("div", { className: cn('flex flex-wrap items-center gap-2', className), children: [_jsxs(SegmentedControl, { "aria-label": t('theme'), selectedKeys: [theme], onSelectionChange: (keys) => {
|
|
30
30
|
const next = [...keys][0];
|
|
31
31
|
if (next !== 'light' && next !== 'dark' && next !== 'system')
|
|
32
32
|
return;
|
|
33
33
|
applyTheme(next, options);
|
|
34
34
|
report(next, level);
|
|
35
|
-
}, children: [_jsx(Segment, { id: "light", children:
|
|
35
|
+
}, children: [_jsx(Segment, { id: "light", children: t('light') }), _jsx(Segment, { id: "dark", children: t('dark') }), _jsx(Segment, { id: "system", children: t('system') })] }), offerLevel && (_jsxs(SegmentedControl, { "aria-label": t('level'), selectedKeys: [level], onSelectionChange: (keys) => {
|
|
36
36
|
const next = [...keys][0];
|
|
37
37
|
if (next !== 'aa' && next !== 'aaa')
|
|
38
38
|
return;
|
|
39
39
|
applyLevel(next, options);
|
|
40
40
|
report(theme, next);
|
|
41
|
-
}, children: [_jsx(Segment, { id: "aa", children:
|
|
41
|
+
}, children: [_jsx(Segment, { id: "aa", children: t('aa') }), _jsx(Segment, { id: "aaa", children: t('aaa') })] }))] }));
|
|
42
42
|
}
|
|
43
43
|
//# sourceMappingURL=theme-switcher.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-switcher.js","sourceRoot":"","sources":["../../src/ui/theme-switcher.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"theme-switcher.js","sourceRoot":"","sources":["../../src/ui/theme-switcher.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/toast.d.ts
CHANGED
|
@@ -33,6 +33,7 @@ export interface ToasterLabels {
|
|
|
33
33
|
/** Each toast's close button. */
|
|
34
34
|
dismiss: string;
|
|
35
35
|
}
|
|
36
|
+
export declare const toasterLabels: ToasterLabels;
|
|
36
37
|
export declare function Toaster({ labels, className, }: {
|
|
37
38
|
labels?: Partial<ToasterLabels>;
|
|
38
39
|
className?: string;
|
package/dist/ui/toast.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/ui/toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,mBAAmB,IAAI,UAAU,EAElC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/ui/toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,mBAAmB,IAAI,UAAU,EAElC,MAAM,uBAAuB,CAAC;AAU/B,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAElE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gFAAgF;IAChF,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAClD;AAED,eAAO,MAAM,UAAU,0BAAwD,CAAC;AAEhF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAA;CAAO,UAQ7F;AA8BD;;;;;;;;GAQG;AACH,6DAA6D;AAC7D,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,aAAsC,CAAC;AAEnE,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA+DA"}
|
package/dist/ui/toast.js
CHANGED
|
@@ -5,6 +5,7 @@ import { Text, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastCont
|
|
|
5
5
|
import { useCallback, useRef } from 'react';
|
|
6
6
|
import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';
|
|
7
7
|
import { cn } from '../lib/cn.js';
|
|
8
|
+
import { useLabels } from '../lib/locale.js';
|
|
8
9
|
import { readMs } from '../lib/tokens.js';
|
|
9
10
|
import { useOptionalShell } from '../shell/dashboard-shell.js';
|
|
10
11
|
import { Button } from './button.js';
|
|
@@ -43,7 +44,9 @@ function useRegionHeight() {
|
|
|
43
44
|
observer.current.observe(el);
|
|
44
45
|
}, []);
|
|
45
46
|
}
|
|
47
|
+
export const toasterLabels = { dismiss: 'Dismiss' };
|
|
46
48
|
export function Toaster({ labels, className, }) {
|
|
49
|
+
const words = useLabels('toaster', toasterLabels, labels);
|
|
47
50
|
const regionRef = useRegionHeight();
|
|
48
51
|
// With the right panel open beside the page, the stack sits left of it: the panel's footer doesn't scroll,
|
|
49
52
|
// so nothing could move its buttons clear of a toast.
|
|
@@ -54,7 +57,7 @@ export function Toaster({ labels, className, }) {
|
|
|
54
57
|
return (_jsxs(RACToast, { toast: t, className: "flex items-start gap-3 rounded-lg border border-border bg-popover py-3 pr-2 pl-3 text-sm text-popover-foreground shadow-(--shadow-lg) outline-none data-focus-visible:focus-ring motion-safe:animate-[setsquare-toast_var(--duration-enter)_var(--ease-standard)]", children: [_jsx(tone.Icon, { "aria-hidden": "true", className: cn('mt-px size-5 shrink-0', tone.icon) }), _jsxs(RACToastContent, { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(Text, { slot: "title", className: "font-semibold", children: t.content.title }), t.content.description && (_jsx(Text, { slot: "description", className: "text-[13px] leading-5 text-muted-foreground", children: t.content.description })), t.content.action && (_jsx("div", { className: "mt-2", children: _jsx(Button, { variant: "outline", visualSize: "sm", onPress: () => {
|
|
55
58
|
t.content.action.onAction();
|
|
56
59
|
toastQueue.close(t.key);
|
|
57
|
-
}, children: t.content.action.label }) }))] }), _jsx(Button, { slot: "close", "aria-label":
|
|
60
|
+
}, children: t.content.action.label }) }))] }), _jsx(Button, { slot: "close", "aria-label": words('dismiss'), variant: "ghost", visualSize: "icon-sm", className: "-my-0.5 shrink-0", children: _jsx(X, { "aria-hidden": "true" }) })] }));
|
|
58
61
|
} }));
|
|
59
62
|
}
|
|
60
63
|
//# sourceMappingURL=toast.js.map
|
package/dist/ui/toast.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../src/ui/toast.tsx"],"names":[],"mappings":"AAAA,+GAA+G;AAC/G,YAAY,CAAC;;AACb,OAAO,EACL,IAAI,EACJ,cAAc,IAAI,QAAQ,EAC1B,qBAAqB,IAAI,eAAe,EACxC,mBAAmB,IAAI,UAAU,EACjC,oBAAoB,IAAI,WAAW,GACpC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAarC,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,UAAU,CAAe,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,CAAC;AAEhF;;;;GAIG;AACH,MAAM,UAAU,KAAK,CAAC,OAAqB,EAAE,OAAO,GAAwC,EAAE;IAC5F,MAAM,UAAU,GACd,OAAO,CAAC,OAAO,KAAK,YAAY,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC;IACpF,MAAM,EAAE,GACN,OAAO,OAAO,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC1F,OAAO,UAAU,CAAC,GAAG,CAAC,OAAO,EAAE;QAC7B,OAAO,EAAE,UAAU,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC;KAChE,CAAC,CAAC;AACL,CAAC;AAED,MAAM,KAAK,GAA6D;IACtE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE;IACpD,IAAI,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE;IACxC,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE;IACtD,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,WAAW,EAAE;CACxD,CAAC;AAEF,iHAAiH;AACjH,SAAS,eAAe;IACtB,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC,CAAC,EAAsB,EAAE,EAAE;QAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;QAC/B,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;YACvD,OAAO;QACT,CAAC;QACD,MAAM,GAAG,GAAG,GAAG,EAAE,CACf,IAAI,CAAC,KAAK,CAAC,WAAW,CACpB,uBAAuB,EACvB,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,IAAI,CACpD,CAAC;QACJ,GAAG,EAAE,CAAC;QACN,QAAQ,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,GAAG,CAAC,CAAC;QAC3C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAiBD,MAAM,UAAU,OAAO,CAAC,EACtB,MAAM,EACN,SAAS,GAIV;IACC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IACpC,2GAA2G;IAC3G,sDAAsD;IACtD,MAAM,KAAK,GAAG,gBAAgB,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,CAAC;IACxE,OAAO,CACL,KAAC,WAAW,IACV,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,EAAE,CACX,0JAA0J,EAC1J,YAAY,IAAI,yCAAyC,EACzD,SAAS,CACV,YAEA,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE;YAChB,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC;YAChD,OAAO,CACL,MAAC,QAAQ,IACP,KAAK,EAAE,CAAC,EACR,SAAS,EAAC,mQAAmQ,aAE7Q,KAAC,IAAI,CAAC,IAAI,mBAAa,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,IAAI,CAAC,IAAI,CAAC,GAAI,EACnF,MAAC,eAAe,IAAC,SAAS,EAAC,sCAAsC,aAC/D,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,YACzC,CAAC,CAAC,OAAO,CAAC,KAAK,GACX,EACN,CAAC,CAAC,OAAO,CAAC,WAAW,IAAI,CACxB,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,6CAA6C,YAC7E,CAAC,CAAC,OAAO,CAAC,WAAW,GACjB,CACR,EACA,CAAC,CAAC,OAAO,CAAC,MAAM,IAAI,CACnB,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,UAAU,EAAC,IAAI,EACf,OAAO,EAAE,GAAG,EAAE;wCACZ,CAAC,CAAC,OAAO,CAAC,MAAO,CAAC,QAAQ,EAAE,CAAC;wCAC7B,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;oCAC1B,CAAC,YAEA,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,GAChB,GACL,CACP,IACe,EAClB,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,gBACA,
|
|
1
|
+
{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../src/ui/toast.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { type ToolbarProps as RACToolbarProps } from 'react-aria-components';
|
|
2
|
+
export interface ToolbarProps extends Omit<RACToolbarProps, 'className' | 'aria-label'> {
|
|
3
|
+
/** Required: what the buttons act on, such as "Fixtures actions". */
|
|
4
|
+
'aria-label': string;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* A row of buttons that act on one thing: a block on a canvas, a selection, a rich text field. React Aria's
|
|
9
|
+
* Toolbar, so it is one stop in the tab order: ← → (↑ ↓ when vertical) move between its buttons, Home and End go to
|
|
10
|
+
* the ends, and Tab leaves it. It wraps instead of overflowing, so nothing is cut off at 320px (1.4.10); a toolbar
|
|
11
|
+
* that would wrap onto more than two lines should move its less-used commands into a `MenuTrigger` at its end.
|
|
12
|
+
* Buttons inside it are ordinary `IconButton`s and `Button`s, at least `--target-min` square, `--control-gap`
|
|
13
|
+
* apart. A button that can't act right now (Move up on the first block) is better left enabled with
|
|
14
|
+
* `aria-disabled="true"` and a reason in its description than `isDisabled`: React Aria skips disabled buttons,
|
|
15
|
+
* so a button that disables itself while focused would drop focus.
|
|
16
|
+
*/
|
|
17
|
+
export declare function Toolbar({ className, orientation, ...props }: ToolbarProps): import("react").JSX.Element;
|
|
18
|
+
/** A line between groups of buttons in a Toolbar. Decorative to sight, a separator to a screen reader. */
|
|
19
|
+
export declare function ToolbarSeparator({ className }: {
|
|
20
|
+
className?: string;
|
|
21
|
+
}): import("react").JSX.Element;
|
|
22
|
+
//# sourceMappingURL=toolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/ui/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,YAAY,CAAC;IACrF,qEAAqE;IACrE,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAWxF;AAED,0GAA0G;AAC1G,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOrE"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Separator as RACSeparator, Toolbar as RACToolbar, } from 'react-aria-components';
|
|
4
|
+
import { cn } from '../lib/cn.js';
|
|
5
|
+
/**
|
|
6
|
+
* A row of buttons that act on one thing: a block on a canvas, a selection, a rich text field. React Aria's
|
|
7
|
+
* Toolbar, so it is one stop in the tab order: ← → (↑ ↓ when vertical) move between its buttons, Home and End go to
|
|
8
|
+
* the ends, and Tab leaves it. It wraps instead of overflowing, so nothing is cut off at 320px (1.4.10); a toolbar
|
|
9
|
+
* that would wrap onto more than two lines should move its less-used commands into a `MenuTrigger` at its end.
|
|
10
|
+
* Buttons inside it are ordinary `IconButton`s and `Button`s, at least `--target-min` square, `--control-gap`
|
|
11
|
+
* apart. A button that can't act right now (Move up on the first block) is better left enabled with
|
|
12
|
+
* `aria-disabled="true"` and a reason in its description than `isDisabled`: React Aria skips disabled buttons,
|
|
13
|
+
* so a button that disables itself while focused would drop focus.
|
|
14
|
+
*/
|
|
15
|
+
export function Toolbar({ className, orientation = 'horizontal', ...props }) {
|
|
16
|
+
return (_jsx(RACToolbar, { orientation: orientation, ...props, className: cn('flex flex-wrap items-center gap-(--control-gap) outline-none aria-[orientation=vertical]:flex-col', className) }));
|
|
17
|
+
}
|
|
18
|
+
/** A line between groups of buttons in a Toolbar. Decorative to sight, a separator to a screen reader. */
|
|
19
|
+
export function ToolbarSeparator({ className }) {
|
|
20
|
+
return (_jsx(RACSeparator, { orientation: "vertical", className: cn('mx-0.5 h-6 w-px self-center bg-border', className) }));
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=toolbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/ui/toolbar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,SAAS,IAAI,YAAY,EACzB,OAAO,IAAI,UAAU,GAEtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC;;;;;;;;;GASG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,EAAE,WAAW,GAAG,YAAY,EAAE,GAAG,KAAK,EAAgB;IACvF,OAAO,CACL,KAAC,UAAU,IACT,WAAW,EAAE,WAAW,KACpB,KAAK,EACT,SAAS,EAAE,EAAE,CACX,mGAAmG,EACnG,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC;AAED,0GAA0G;AAC1G,MAAM,UAAU,gBAAgB,CAAC,EAAE,SAAS,EAA0B;IACpE,OAAO,CACL,KAAC,YAAY,IACX,WAAW,EAAC,UAAU,EACtB,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,SAAS,CAAC,GACjE,CACH,CAAC;AACJ,CAAC"}
|
package/dist/ui/tree.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import { TreeSection as RACTreeSection, type TreeItemProps as RACTreeItemProps, type TreeProps as RACTreeProps } from 'react-aria-components';
|
|
3
|
+
import { type IconProp } from './icon.js';
|
|
3
4
|
/** A tree is named by a visible heading (`aria-labelledby`) or, when it has none, by `aria-label`. */
|
|
4
5
|
type TreeName = {
|
|
5
6
|
'aria-label': string;
|
|
@@ -10,11 +11,19 @@ export type TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'a
|
|
|
10
11
|
className?: string;
|
|
11
12
|
};
|
|
12
13
|
/**
|
|
13
|
-
* Nested things people open, close and act on: the steps of a workflow and their outcomes,
|
|
14
|
-
* resource. React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between rows, → opens a
|
|
15
|
-
* it, Home and End go to the ends, and typing jumps to the next row whose name starts with what you
|
|
16
|
-
* open row, → moves to the row's own buttons.
|
|
17
|
-
*
|
|
14
|
+
* Nested things people open, close and act on: the blocks of a page, the steps of a workflow and their outcomes,
|
|
15
|
+
* operations grouped by resource. React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between rows, → opens a
|
|
16
|
+
* row and ← closes it, Home and End go to the ends, and typing jumps to the next row whose name starts with what you
|
|
17
|
+
* typed. On an open row, → moves to the row's own buttons.
|
|
18
|
+
*
|
|
19
|
+
* It draws no box of its own: rows sit on whatever surface holds the tree (a panel, a card), `--nav-item-gap`
|
|
20
|
+
* apart, like a nav list. The tree is `relative` because it scrolls, and because React Aria positions its drop
|
|
21
|
+
* indicators absolutely.
|
|
22
|
+
*
|
|
23
|
+
* Drag and drop: pass `dragAndDropHooks` from React Aria's `useDragAndDrop`, with
|
|
24
|
+
* `renderDropIndicator: (target) => <DropIndicator target={target} />`. Every draggable row then shows a drag
|
|
25
|
+
* button, which is how a keyboard or screen reader drag starts: Enter on it, ↑ ↓ to a drop place, Enter to drop,
|
|
26
|
+
* Esc to cancel.
|
|
18
27
|
*/
|
|
19
28
|
export declare function Tree<T extends object>({ className, ...props }: TreeProps<T>): import("react").JSX.Element;
|
|
20
29
|
export interface TreeItemProps<T extends object = object> extends Omit<RACTreeItemProps<T>, 'className' | 'children' | 'textValue' | 'style'> {
|
|
@@ -22,21 +31,57 @@ export interface TreeItemProps<T extends object = object> extends Omit<RACTreeIt
|
|
|
22
31
|
title: ReactNode;
|
|
23
32
|
/** Required when `title` isn't a string: the words typeahead matches and a screen reader reads. */
|
|
24
33
|
textValue?: string;
|
|
25
|
-
/**
|
|
34
|
+
/** What kind of thing the row is: a block's type, a step's verb. 16px, `brand` while the row is selected. */
|
|
35
|
+
icon?: IconProp;
|
|
36
|
+
/**
|
|
37
|
+
* A few words after the title, on the same line: a block's heading, a count. When they don't fit beside the
|
|
38
|
+
* title they move under it and wrap there. They're never cut short, so text spacing and zoom lose none of them
|
|
39
|
+
* (1.4.12). A string is added to the row's accessible name, so the words are never only seen.
|
|
40
|
+
*/
|
|
26
41
|
description?: ReactNode;
|
|
27
|
-
/**
|
|
42
|
+
/**
|
|
43
|
+
* A `StatusBadge` for this row: a check result ("2nd H1"), a draft, a lock. It sits after the description,
|
|
44
|
+
* before the actions. Always an icon and a word.
|
|
45
|
+
*/
|
|
46
|
+
status?: ReactNode;
|
|
47
|
+
/**
|
|
48
|
+
* The status in words for a screen reader ("2nd H1, must fix"). React Aria names a row from its `textValue`
|
|
49
|
+
* alone, so without this the status is only seen, never heard. Added to the row's name after the description.
|
|
50
|
+
*/
|
|
51
|
+
statusLabel?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Buttons for this row only. Name them with the row ("Actions for Fixtures"). They show on the selected row,
|
|
54
|
+
* the row with focus and the row under the pointer, so the tree stays quiet; keyboard focus on a row shows them
|
|
55
|
+
* before → reaches them. `alwaysShowActions` keeps them showing, for a row that can't be selected.
|
|
56
|
+
*/
|
|
28
57
|
actions?: ReactNode;
|
|
58
|
+
alwaysShowActions?: boolean;
|
|
29
59
|
/** The rows inside this one: `TreeItem`s, or a React Aria `Collection` of them. */
|
|
30
60
|
children?: ReactNode;
|
|
61
|
+
/** Words for the drag button, when the row can be dragged. React Aria's own ("Drag {title}") by default. */
|
|
62
|
+
dragLabel?: string;
|
|
63
|
+
/**
|
|
64
|
+
* `false` leaves the drag button off a row that can't move, such as a column in a page layout, in a tree that
|
|
65
|
+
* otherwise drags. React Aria has no per-row switch for dragging (only for `disabledBehavior="all"`, which also
|
|
66
|
+
* takes the row out of focus), so the tree's `getItems` should give such a row a type its drop targets refuse.
|
|
67
|
+
*/
|
|
68
|
+
allowsDragging?: boolean;
|
|
31
69
|
className?: string;
|
|
32
70
|
}
|
|
33
71
|
/**
|
|
34
|
-
* One row and the rows inside it
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
* GridList; with multiple selection, a ticked box too.
|
|
72
|
+
* One row and the rows inside it, on one line while it fits: chevron, icon, title, description, status, then its
|
|
73
|
+
* buttons. Each level indents by `--tree-indent` (16px). A row is at least `--nav-item-height` tall and `--target-min` at AAA,
|
|
74
|
+
* rounded, with the `accent` ground on hover. Selected: `brand-subtle`, the 3px `sidebar-primary` marker, a bold
|
|
75
|
+
* title and a `brand` icon, as in a GridList and the sidebar; with multiple selection, a ticked box too.
|
|
76
|
+
*
|
|
77
|
+
* A row that only holds other rows, such as a column in a page layout, can be focused and opened but never
|
|
78
|
+
* selected: put its id in the Tree's `disabledKeys` and set `disabledBehavior="selection"`. React Aria then
|
|
79
|
+
* leaves it focusable and doesn't mark it disabled, so it isn't dimmed.
|
|
80
|
+
*
|
|
81
|
+
* While a drag is over the row, as a place to drop into, it gets the `brand-subtle` ground and a 2px `brand`
|
|
82
|
+
* outline inside its edge. The row being dragged fades to 50%.
|
|
38
83
|
*/
|
|
39
|
-
export declare function TreeItem<T extends object = object>({ title, textValue, description, actions, children, className, ...props }: TreeItemProps<T>): import("react").JSX.Element;
|
|
84
|
+
export declare function TreeItem<T extends object = object>({ title, textValue, icon, description, status, statusLabel, actions, alwaysShowActions, children, dragLabel, allowsDragging: rowDrags, className, ...props }: TreeItemProps<T>): import("react").JSX.Element;
|
|
40
85
|
/** React Aria doesn't export its TreeSection's props by name. */
|
|
41
86
|
type RACTreeSectionProps<T extends object> = Parameters<typeof RACTreeSection<T>>[0];
|
|
42
87
|
export interface TreeSectionProps<T extends object> extends Omit<RACTreeSectionProps<T>, 'className'> {
|
package/dist/ui/tree.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/ui/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAML,WAAW,IAAI,cAAc,
|
|
1
|
+
{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/ui/tree.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/tree.js
CHANGED
|
@@ -1,29 +1,68 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { ChevronRight } from 'lucide-react';
|
|
4
|
-
import { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent, TreeSection as RACTreeSection, } from 'react-aria-components';
|
|
3
|
+
import { ChevronRight, GripVertical } from 'lucide-react';
|
|
4
|
+
import { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent, TreeSection as RACTreeSection, useLocale, } from 'react-aria-components';
|
|
5
5
|
import { cn } from '../lib/cn.js';
|
|
6
|
+
import { formatList } from '../lib/labels.js';
|
|
6
7
|
import { SelectionCheckbox } from './checkbox.js';
|
|
8
|
+
import { renderIcon } from './icon.js';
|
|
7
9
|
/**
|
|
8
|
-
* Nested things people open, close and act on: the steps of a workflow and their outcomes,
|
|
9
|
-
* resource. React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between rows, → opens a
|
|
10
|
-
* it, Home and End go to the ends, and typing jumps to the next row whose name starts with what you
|
|
11
|
-
* open row, → moves to the row's own buttons.
|
|
12
|
-
*
|
|
10
|
+
* Nested things people open, close and act on: the blocks of a page, the steps of a workflow and their outcomes,
|
|
11
|
+
* operations grouped by resource. React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between rows, → opens a
|
|
12
|
+
* row and ← closes it, Home and End go to the ends, and typing jumps to the next row whose name starts with what you
|
|
13
|
+
* typed. On an open row, → moves to the row's own buttons.
|
|
14
|
+
*
|
|
15
|
+
* It draws no box of its own: rows sit on whatever surface holds the tree (a panel, a card), `--nav-item-gap`
|
|
16
|
+
* apart, like a nav list. The tree is `relative` because it scrolls, and because React Aria positions its drop
|
|
17
|
+
* indicators absolutely.
|
|
18
|
+
*
|
|
19
|
+
* Drag and drop: pass `dragAndDropHooks` from React Aria's `useDragAndDrop`, with
|
|
20
|
+
* `renderDropIndicator: (target) => <DropIndicator target={target} />`. Every draggable row then shows a drag
|
|
21
|
+
* button, which is how a keyboard or screen reader drag starts: Enter on it, ↑ ↓ to a drop place, Enter to drop,
|
|
22
|
+
* Esc to cancel.
|
|
13
23
|
*/
|
|
14
24
|
export function Tree({ className, ...props }) {
|
|
15
|
-
return (_jsx(RACTree, { ...props, className: cn('relative flex max-h-[inherit] flex-col
|
|
25
|
+
return (_jsx(RACTree, { ...props, className: cn('relative flex max-h-[inherit] flex-col gap-(--nav-item-gap) overflow-auto text-sm outline-none data-focus-visible:focus-ring',
|
|
26
|
+
// Dropping onto the tree itself (an empty tree, or the end of it).
|
|
27
|
+
'data-drop-target:bg-brand-subtle data-drop-target:outline-2 data-drop-target:outline-solid data-drop-target:outline-brand data-drop-target:-outline-offset-2', className) }));
|
|
16
28
|
}
|
|
29
|
+
/** The column the chevron, or the space for one, takes: one target wide, so every title lines up. */
|
|
30
|
+
const lead = 'w-[max(var(--target-min),var(--control-height-sm))] shrink-0';
|
|
17
31
|
/**
|
|
18
|
-
* One row and the rows inside it
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* GridList; with multiple selection, a ticked box too.
|
|
32
|
+
* One row and the rows inside it, on one line while it fits: chevron, icon, title, description, status, then its
|
|
33
|
+
* buttons. Each level indents by `--tree-indent` (16px). A row is at least `--nav-item-height` tall and `--target-min` at AAA,
|
|
34
|
+
* rounded, with the `accent` ground on hover. Selected: `brand-subtle`, the 3px `sidebar-primary` marker, a bold
|
|
35
|
+
* title and a `brand` icon, as in a GridList and the sidebar; with multiple selection, a ticked box too.
|
|
36
|
+
*
|
|
37
|
+
* A row that only holds other rows, such as a column in a page layout, can be focused and opened but never
|
|
38
|
+
* selected: put its id in the Tree's `disabledKeys` and set `disabledBehavior="selection"`. React Aria then
|
|
39
|
+
* leaves it focusable and doesn't mark it disabled, so it isn't dimmed.
|
|
40
|
+
*
|
|
41
|
+
* While a drag is over the row, as a place to drop into, it gets the `brand-subtle` ground and a 2px `brand`
|
|
42
|
+
* outline inside its edge. The row being dragged fades to 50%.
|
|
22
43
|
*/
|
|
23
|
-
export function TreeItem({ title, textValue, description, actions, children, className, ...props }) {
|
|
24
|
-
|
|
44
|
+
export function TreeItem({ title, textValue, icon, description, status, statusLabel, actions, alwaysShowActions, children, dragLabel, allowsDragging: rowDrags = true, className, ...props }) {
|
|
45
|
+
const { locale } = useLocale();
|
|
46
|
+
const text = textValue ?? (typeof title === 'string' ? title : '');
|
|
47
|
+
const named = formatList([
|
|
48
|
+
props['aria-label'] ?? text,
|
|
49
|
+
typeof description === 'string' ? description : '',
|
|
50
|
+
statusLabel ?? '',
|
|
51
|
+
].filter(Boolean), locale);
|
|
52
|
+
return (_jsxs(RACTreeItem, { ...props, textValue: text, "aria-label": named || undefined, style: ({ level }) => ({ '--tree-level': level }), className: cn(
|
|
25
53
|
// React Aria sets data-hovered only on a row that can be selected or has an action: the pointer then.
|
|
26
|
-
'group/tree-item relative flex min-h-[
|
|
54
|
+
'group/tree-item relative flex min-h-[max(var(--target-min),var(--nav-item-height))] cursor-default items-center gap-0.5 rounded-md py-1 ps-[calc((var(--tree-level)-1)*var(--tree-indent))] pe-1 outline-none', 'data-hovered:cursor-pointer data-disabled:cursor-not-allowed data-hovered:bg-accent data-selected:bg-brand-subtle data-selected:shadow-[inset_3px_0_0_var(--sidebar-primary)] data-focus-visible:focus-ring-inset data-disabled:opacity-60', 'data-dragging:opacity-50 data-drop-target:bg-brand-subtle data-drop-target:outline-2 data-drop-target:outline-solid data-drop-target:outline-brand data-drop-target:-outline-offset-2',
|
|
55
|
+
// Forced colours drop the selected ground and the inset marker: draw the marker in Highlight instead.
|
|
56
|
+
"forced-colors:data-selected:before:absolute forced-colors:data-selected:before:inset-y-1 forced-colors:data-selected:before:start-0 forced-colors:data-selected:before:w-[3px] forced-colors:data-selected:before:bg-[Highlight] forced-colors:data-selected:before:forced-color-adjust-none forced-colors:data-selected:before:content-['']", className), children: [_jsx(TreeItemContent, { children: ({ hasChildItems, selectionMode, selectionBehavior, allowsDragging: treeDrags }) => {
|
|
57
|
+
const allowsDragging = treeDrags && rowDrags;
|
|
58
|
+
return (_jsxs(_Fragment, { children: [hasChildItems ? (_jsx(RACButton, { slot: "chevron", className: cn('group/tree-chevron relative flex min-h-target cursor-pointer items-center justify-center outline-none', lead), children: _jsx("span", { className: "flex size-control-sm items-center justify-center rounded-md text-muted-foreground group-data-hovered/tree-chevron:bg-muted group-data-hovered/tree-chevron:text-foreground", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 group-data-expanded/tree-item:rotate-90" }) }) })) : (_jsx("span", { "aria-hidden": "true", className: lead })), selectionMode === 'multiple' && selectionBehavior === 'toggle' && (_jsx(SelectionCheckbox, {})), _jsxs("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 px-2", children: [icon &&
|
|
59
|
+
renderIcon(icon, 'size-4 shrink-0 text-muted-foreground group-data-selected/tree-item:text-brand'), _jsx("span", { className: "min-w-0 leading-5 font-semibold [overflow-wrap:anywhere] text-foreground group-data-selected/tree-item:font-bold", children: title }), description && (_jsx("span", { className: "min-w-0 leading-5 [overflow-wrap:anywhere] text-muted-foreground", children: description })), status && (_jsx("span", { className: "flex flex-wrap items-center gap-1", children: status }))] }), (actions || allowsDragging) && (_jsxs("span", { className: cn('flex shrink-0 items-center gap-0.5', !alwaysShowActions &&
|
|
60
|
+
// Faded out, not hidden: they stay focusable, so focus can land on them (and shows
|
|
61
|
+
// them) and React Aria can hand focus back to the drag button when a drag ends. No
|
|
62
|
+
// pointer events until they show: group-hover needs a device that hovers, so on touch
|
|
63
|
+
// a tap selects the row first.
|
|
64
|
+
'pointer-events-none opacity-0', 'group-hover/tree-item:pointer-events-auto group-hover/tree-item:opacity-100', 'group-focus-within/tree-item:pointer-events-auto group-focus-within/tree-item:opacity-100', 'group-data-selected/tree-item:pointer-events-auto group-data-selected/tree-item:opacity-100', 'group-data-dragging/tree-item:opacity-100'), children: [allowsDragging && (_jsx(RACButton, { slot: "drag", "aria-label": dragLabel, className: "group/tree-drag relative flex min-h-target min-w-target shrink-0 cursor-grab items-center justify-center outline-none", children: _jsx("span", { className: "flex size-control-sm items-center justify-center rounded-md text-muted-foreground group-data-focus-visible/tree-drag:focus-ring group-data-hovered/tree-drag:bg-muted group-data-hovered/tree-drag:text-foreground", children: _jsx(GripVertical, { "aria-hidden": "true", className: "size-4" }) }) })), actions] }))] }));
|
|
65
|
+
} }), children] }));
|
|
27
66
|
}
|
|
28
67
|
/** A group of top-level rows under a `TreeHeader`: operations by resource, steps by phase. */
|
|
29
68
|
export function TreeSection({ className, ...props }) {
|
|
@@ -31,6 +70,6 @@ export function TreeSection({ className, ...props }) {
|
|
|
31
70
|
}
|
|
32
71
|
/** The name of a `TreeSection`, read before its rows. Not a target: arrow keys pass over it. */
|
|
33
72
|
export function TreeHeader({ children, className }) {
|
|
34
|
-
return (_jsx(RACTreeHeader, { className: cn('
|
|
73
|
+
return (_jsx(RACTreeHeader, { className: cn('px-3 pt-3 pb-1 text-caption-strong text-muted-foreground first:pt-1', className), children: children }));
|
|
35
74
|
}
|
|
36
75
|
//# sourceMappingURL=tree.js.map
|
package/dist/ui/tree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/ui/tree.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/ui/tree.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@setsquare/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "React Aria components, design tokens, a dashboard shell and a site shell, with a switch between WCAG 2.2 AA and AAA sizing, spacing and contrast.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/Worktree-Amigos/setsquare-ui#readme",
|
|
@@ -72,6 +72,7 @@
|
|
|
72
72
|
},
|
|
73
73
|
"dependencies": {
|
|
74
74
|
"clsx": "2.1.1",
|
|
75
|
+
"intl-messageformat": "12.1.3",
|
|
75
76
|
"lucide-react": "1.48.0",
|
|
76
77
|
"tailwind-merge": "3.7.0"
|
|
77
78
|
},
|
|
@@ -101,8 +102,8 @@
|
|
|
101
102
|
"access": "public"
|
|
102
103
|
},
|
|
103
104
|
"scripts": {
|
|
104
|
-
"build": "node scripts/build-css.mjs && tsc -p tsconfig.json && pnpm --filter @setsquare/ui-flows build",
|
|
105
|
-
"typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json && pnpm --filter @setsquare/ui-flows typecheck",
|
|
105
|
+
"build": "node scripts/build-css.mjs && tsc -p tsconfig.json && pnpm --filter @setsquare/ui-flows build && pnpm --filter @setsquare/ui-blocks build",
|
|
106
|
+
"typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json && pnpm --filter @setsquare/ui-flows typecheck && pnpm --filter @setsquare/ui-blocks typecheck",
|
|
106
107
|
"lint": "oxlint && node scripts/check-contrast.mjs",
|
|
107
108
|
"format": "oxfmt",
|
|
108
109
|
"format:check": "oxfmt --check",
|