@setsquare/ui 0.5.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 +58 -0
- package/README.md +37 -2
- package/dist/index.d.ts +10 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -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/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/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 +9 -1
- package/dist/ui/breadcrumbs.d.ts.map +1 -1
- package/dist/ui/breadcrumbs.js +5 -2
- package/dist/ui/breadcrumbs.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 +7 -1
- package/dist/ui/combo-box.d.ts.map +1 -1
- package/dist/ui/combo-box.js +9 -2
- 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/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/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/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/tree.d.ts.map +1 -1
- package/dist/ui/tree.js +5 -5
- package/dist/ui/tree.js.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useLabels } from '../lib/locale.js';
|
|
4
|
+
import { CopyButton } from './copy-button.js';
|
|
5
|
+
import { ScrollRegion } from './scroll-region.js';
|
|
6
|
+
/** Its own words; its copy button's come from CopyButton's, app-wide under `copyButton`. */
|
|
7
|
+
export const codeBlockLabels = {
|
|
8
|
+
terminal: 'Terminal',
|
|
9
|
+
code: 'code',
|
|
10
|
+
region: '{name}: {first}',
|
|
11
|
+
};
|
|
12
|
+
/** What the block calls itself: its label, or the word for a terminal or for code. */
|
|
13
|
+
function useName({ label, terminal, labels }) {
|
|
14
|
+
const t = useLabels('codeBlock', codeBlockLabels, labels);
|
|
15
|
+
return { t, name: label ?? (terminal ? t('terminal') : t('code')) };
|
|
16
|
+
}
|
|
17
|
+
/** The line above the code: its label, and the copy button. */
|
|
18
|
+
export function CodeBlockCaption({ copy, copied, ...words }) {
|
|
19
|
+
const { t, name } = useName(words);
|
|
20
|
+
return (_jsxs("figcaption", { className: "relative flex items-center justify-between gap-2.5 border-b border-border py-1 pr-1.5 pl-4", children: [_jsx("span", { className: "min-w-0 truncate font-mono text-[13px] leading-5 text-muted-foreground", children: words.label ?? (words.terminal ? t('terminal') : '') }), copy && _jsx(CopyButton, { text: copied, label: name, labels: words.labels })] }));
|
|
21
|
+
}
|
|
22
|
+
/** The code's scroller, named by the block's label and its first line. */
|
|
23
|
+
export function CodeBlockRegion({ first, children, ...words }) {
|
|
24
|
+
const { t, name } = useName(words);
|
|
25
|
+
return (_jsx(ScrollRegion, { label: first ? t('region', { name, first }) : name, children: children }));
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=code-block-parts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-block-parts.js","sourceRoot":"","sources":["../../src/ui/code-block-parts.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAyB,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAYlD,4FAA4F;AAC5F,MAAM,CAAC,MAAM,eAAe,GAAkD;IAC5E,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,iBAAiB;CAC1B,CAAC;AAQF,sFAAsF;AACtF,SAAS,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAkB;IAC1D,MAAM,CAAC,GAAG,SAAS,CAAC,WAAW,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC;IAC1D,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;AACtE,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,EACJ,MAAM,EACN,GAAG,KAAK,EAC2C;IACnD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IACnC,OAAO,CACL,sBAAY,SAAS,EAAC,4FAA4F,aAChH,eAAM,SAAS,EAAC,wEAAwE,YACrF,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAChD,EACN,IAAI,IAAI,KAAC,UAAU,IAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,IAC7D,CACd,CAAC;AACJ,CAAC;AAED,0EAA0E;AAC1E,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACgD;IACxD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IACnC,OAAO,CACL,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,YAAG,QAAQ,GAAgB,CAC5F,CAAC;AACJ,CAAC"}
|
package/dist/ui/code-block.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type CodeBlockLabels } from './code-block-parts.js';
|
|
2
|
+
export type { CodeBlockLabels } from './code-block-parts.js';
|
|
2
3
|
export interface CodeBlockProps {
|
|
3
4
|
code: string;
|
|
4
5
|
/** What it is: a file path (`app/layout.tsx`), a language, or "Terminal". Shown above the code. */
|
|
@@ -13,17 +14,10 @@ export interface CodeBlockProps {
|
|
|
13
14
|
labels?: Partial<CodeBlockLabels>;
|
|
14
15
|
className?: string;
|
|
15
16
|
}
|
|
16
|
-
/** A code block's words, for the `labels` prop: its copy button's, and what it calls itself unlabelled. */
|
|
17
|
-
export interface CodeBlockLabels extends CopyButtonLabels {
|
|
18
|
-
/** Shown above a `terminal` block with no `label`. */
|
|
19
|
-
terminal: string;
|
|
20
|
-
/** What the copy button says it copies when there is no `label`. */
|
|
21
|
-
code: string;
|
|
22
|
-
}
|
|
23
17
|
/**
|
|
24
18
|
* Code with a label and a copy button. Long lines scroll sideways inside a ScrollRegion, never the page; the
|
|
25
|
-
* region is named by the label and the first line, so two on a page can be told apart. Server-safe:
|
|
26
|
-
*
|
|
19
|
+
* region is named by the label and the first line, so two on a page can be told apart. Server-safe: its words
|
|
20
|
+
* are in two small client components, so the code itself is rendered on the server and holds no state.
|
|
27
21
|
*/
|
|
28
22
|
export declare function CodeBlock({ code, label, tone, copy, labels, className, }: CodeBlockProps): import("react").JSX.Element;
|
|
29
23
|
//# sourceMappingURL=code-block.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/ui/code-block.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/ui/code-block.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEhG,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,IAAa,EACb,IAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,cAAc,+BAgDhB"}
|
package/dist/ui/code-block.js
CHANGED
|
@@ -1,24 +1,19 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from '../lib/cn.js';
|
|
3
|
-
import {
|
|
4
|
-
import { withLabels } from '../lib/labels.js';
|
|
5
|
-
import { ScrollRegion } from './scroll-region.js';
|
|
6
|
-
const codeBlockNames = { terminal: 'Terminal', code: 'code' };
|
|
3
|
+
import { CodeBlockCaption, CodeBlockRegion } from './code-block-parts.js';
|
|
7
4
|
const PROMPT = /^\$ /;
|
|
8
5
|
/**
|
|
9
6
|
* Code with a label and a copy button. Long lines scroll sideways inside a ScrollRegion, never the page; the
|
|
10
|
-
* region is named by the label and the first line, so two on a page can be told apart. Server-safe:
|
|
11
|
-
*
|
|
7
|
+
* region is named by the label and the first line, so two on a page can be told apart. Server-safe: its words
|
|
8
|
+
* are in two small client components, so the code itself is rendered on the server and holds no state.
|
|
12
9
|
*/
|
|
13
10
|
export function CodeBlock({ code, label, tone = 'code', copy = true, labels, className, }) {
|
|
14
|
-
const names = withLabels(codeBlockNames, labels);
|
|
15
11
|
const lines = code.split('\n');
|
|
16
12
|
const terminal = tone === 'terminal';
|
|
17
13
|
const commands = terminal ? lines.filter((l) => PROMPT.test(l)) : [];
|
|
18
14
|
const copied = commands.length ? commands.map((l) => l.replace(PROMPT, '')).join('\n') : code;
|
|
19
|
-
const name = label ?? (terminal ? names.terminal : names.code);
|
|
20
15
|
const first = (commands[0]?.replace(PROMPT, '') ?? lines[0]).trim().slice(0, 60);
|
|
21
|
-
return (_jsxs("figure", { className: cn('relative m-0 min-w-0 overflow-clip rounded-lg border border-border bg-background', className), children: [(label || terminal || copy) && (
|
|
16
|
+
return (_jsxs("figure", { className: cn('relative m-0 min-w-0 overflow-clip rounded-lg border border-border bg-background', className), children: [(label || terminal || copy) && (_jsx(CodeBlockCaption, { label: label, terminal: terminal, copy: copy, copied: copied, labels: labels })), _jsx(CodeBlockRegion, { label: label, terminal: terminal, first: first, labels: labels, children: _jsx("pre", { className: "m-0 w-max min-w-full p-[18px] text-code", children: _jsx("code", { children: terminal
|
|
22
17
|
? lines.map((line, i) => (_jsx("span", { className: "block", children: PROMPT.test(line) ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground select-none", children: '$ ' }), line.replace(PROMPT, '')] })) : (_jsx("span", { className: "text-muted-foreground", children: line || ' ' })) }, i)))
|
|
23
18
|
: code }) }) })] }));
|
|
24
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../src/ui/code-block.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../src/ui/code-block.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAwB,MAAM,uBAAuB,CAAC;AAmBhG,MAAM,MAAM,GAAG,MAAM,CAAC;AAEtB;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,IAAI,EACX,MAAM,EACN,SAAS,GACM;IACf,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,QAAQ,GAAG,IAAI,KAAK,UAAU,CAAC;IACrC,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACrE,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9F,MAAM,KAAK,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACjF,OAAO,CACL,kBACE,SAAS,EAAE,EAAE,CACX,kFAAkF,EAClF,SAAS,CACV,aAEA,CAAC,KAAK,IAAI,QAAQ,IAAI,IAAI,CAAC,IAAI,CAC9B,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACd,CACH,EACD,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,YAE7E,cAAK,SAAS,EAAC,yCAAyC,YACtD,yBACG,QAAQ;4BACP,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAErB,eAAc,SAAS,EAAC,OAAO,YAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACnB,8BACE,8BAAkB,MAAM,EAAC,SAAS,EAAC,mCAAmC,YACnE,IAAI,GACA,EACN,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,IACxB,CACJ,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,uBAAuB,YAAE,IAAI,IAAI,GAAG,GAAQ,CAC7D,IAVQ,CAAC,CAWL,CACR,CAAC;4BACJ,CAAC,CAAC,IAAI,GACH,GACH,GACU,IACX,CACV,CAAC;AACJ,CAAC"}
|
package/dist/ui/combo-box.d.ts
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import { type ComboBoxProps as RACComboBoxProps, type Key } from 'react-aria-components';
|
|
3
3
|
import { type FieldWidth, type FieldLabels } from './field.js';
|
|
4
|
+
/** A combo box's words, for the `labels` prop: every field's, and what its open list says when it's empty. */
|
|
5
|
+
export interface ComboBoxLabels extends FieldLabels {
|
|
6
|
+
/** The open list with nothing in it, when there is no `emptyState`. */
|
|
7
|
+
noMatches: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const comboBoxLabels: ComboBoxLabels;
|
|
4
10
|
export interface ComboBoxProps<T extends object> extends Omit<RACComboBoxProps<T>, 'className' | 'children' | 'validate'> {
|
|
5
11
|
label: string;
|
|
6
12
|
description?: ReactNode;
|
|
@@ -10,7 +16,7 @@ export interface ComboBoxProps<T extends object> extends Omit<RACComboBoxProps<T
|
|
|
10
16
|
placeholder?: string;
|
|
11
17
|
children: ReactNode | ((item: T) => ReactNode);
|
|
12
18
|
width?: FieldWidth;
|
|
13
|
-
labels?: Partial<
|
|
19
|
+
labels?: Partial<ComboBoxLabels>;
|
|
14
20
|
/**
|
|
15
21
|
* What the open list says when nothing is in it: "Searching…" while results load, or why nothing matched. Inside
|
|
16
22
|
* the list, because React Aria hides the rest of the page from assistive technology while the list is open.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../src/ui/combo-box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,GAAG,EACT,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../src/ui/combo-box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,GAAG,EACT,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EASL,KAAK,UAAU,EAEf,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAIpB,8GAA8G;AAC9G,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC;AAEF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAC3D,gBAAgB,CAAC,CAAC,CAAC,EACnB,WAAW,GAAG,UAAU,GAAG,UAAU,CACtC;IACC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,cAAc,CAAC,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4HAA4H;AAC5H,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAY,EACZ,MAAM,EACN,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,CAAC,CAAC,+BA2ClB"}
|
package/dist/ui/combo-box.js
CHANGED
|
@@ -3,12 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { ComboBox as RACComboBox, Input, } from 'react-aria-components';
|
|
4
4
|
import { ChevronsUpDown } from 'lucide-react';
|
|
5
5
|
import { cn } from '../lib/cn.js';
|
|
6
|
+
import { useLabels } from '../lib/locale.js';
|
|
6
7
|
import { Button } from './button.js';
|
|
7
|
-
import { FieldDescription, FieldError, FieldLabel, fieldBox, fieldInput, fieldStack, fieldWidths,
|
|
8
|
+
import { FieldDescription, FieldError, FieldLabel, fieldBox, fieldInput, fieldStack, fieldWidths, withRequired, fieldLabels, } from './field.js';
|
|
8
9
|
import { ListBox } from './list-box.js';
|
|
9
10
|
import { Popover } from './menu.js';
|
|
11
|
+
export const comboBoxLabels = {
|
|
12
|
+
...fieldLabels,
|
|
13
|
+
noMatches: 'No matches. Check the spelling or try fewer letters.',
|
|
14
|
+
};
|
|
10
15
|
/** Type to filter a long list, then choose (people, countries, projects). The list opens as you type or from the button. */
|
|
11
16
|
export function ComboBox({ label, description, errorMessage, requiredMessage, validate, placeholder, children, width = 'md', labels, emptyState, className, ...props }) {
|
|
12
|
-
|
|
17
|
+
const t = useLabels(['field', 'comboBox'], comboBoxLabels, labels);
|
|
18
|
+
const required = requiredMessage ?? t('chooseValue', { label });
|
|
19
|
+
return (_jsxs(RACComboBox, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, validate), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, labels: labels, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: t('errorPrefix'), requiredMessage: required, children: errorMessage }), _jsxs("div", { className: fieldBox, children: [_jsx(Input, { placeholder: placeholder, className: fieldInput }), _jsx(Button, { variant: "ghost", visualSize: "icon-sm", className: "me-1 justify-end", visualClassName: "text-muted-foreground group-data-hovered/button:text-foreground [&_svg]:size-4", children: _jsx(ChevronsUpDown, { "aria-hidden": "true" }) })] }), _jsx(Popover, { placement: "bottom start", className: "max-h-80", children: _jsx(ListBox, { renderEmptyState: () => (_jsx("p", { className: "px-3 py-2 text-sm text-muted-foreground", children: emptyState ?? t('noMatches') })), children: children }) })] }));
|
|
13
20
|
}
|
|
14
21
|
//# sourceMappingURL=combo-box.js.map
|
package/dist/ui/combo-box.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../src/ui/combo-box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,KAAK,GAGN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,WAAW,EACX,
|
|
1
|
+
{"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../src/ui/combo-box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,KAAK,GAGN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,WAAW,EACX,YAAY,EAEZ,WAAW,GAEZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAQpC,MAAM,CAAC,MAAM,cAAc,GAAmB;IAC5C,GAAG,WAAW;IACd,SAAS,EAAE,sDAAsD;CAClE,CAAC;AAuBF,4HAA4H;AAC5H,MAAM,UAAU,QAAQ,CAAmB,EACzC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,GAAG,IAAI,EACZ,MAAM,EACN,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACS;IACjB,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,eAAe,IAAI,CAAC,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IAChE,OAAO,CACL,MAAC,WAAW,OACL,KAA6B,EAClC,QAAQ,EACN,YAAY,CAAa,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,QAAQ,CAAU,EAE3F,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,eAAK,SAAS,EAAE,QAAQ,aACtB,KAAC,KAAK,IAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,GAAI,EAE1D,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,UAAU,EAAC,SAAS,EACpB,SAAS,EAAC,kBAAkB,EAC5B,eAAe,EAAC,gFAAgF,YAEhG,KAAC,cAAc,mBAAa,MAAM,GAAG,GAC9B,IACL,EACN,KAAC,OAAO,IAAC,SAAS,EAAC,cAAc,EAAC,SAAS,EAAC,UAAU,YACpD,KAAC,OAAO,IACN,gBAAgB,EAAE,GAAG,EAAE,CAAC,CACtB,YAAG,SAAS,EAAC,yCAAyC,YACnD,UAAU,IAAI,CAAC,CAAC,WAAW,CAAC,GAC3B,CACL,YAEA,QAAiB,GACV,GACF,IACE,CACf,CAAC;AACJ,CAAC"}
|
package/dist/ui/copy-button.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { type ButtonProps } from './button.js';
|
|
|
2
2
|
export interface CopyButtonProps extends Omit<ButtonProps, 'onPress' | 'children' | 'aria-label'> {
|
|
3
3
|
/** What to copy. */
|
|
4
4
|
text: string;
|
|
5
|
-
/** What it copies, said after "Copy" to a screen reader: "install command"
|
|
5
|
+
/** What it copies, said after "Copy" to a screen reader (`{label}` in `labels.name`): "install command". */
|
|
6
6
|
label: string;
|
|
7
7
|
labels?: Partial<CopyButtonLabels>;
|
|
8
8
|
}
|
|
@@ -11,11 +11,17 @@ export interface CopyButtonLabels {
|
|
|
11
11
|
copy: string;
|
|
12
12
|
copied: string;
|
|
13
13
|
notCopied: string;
|
|
14
|
+
/**
|
|
15
|
+
* The button's name: `{word}` is the word it shows (`copy`, `copied` or `notCopied`) and `{label}` what it
|
|
16
|
+
* copies. Keep `{word}` in it, so a voice command for what's on screen reaches the button.
|
|
17
|
+
*/
|
|
18
|
+
name: string;
|
|
14
19
|
/** Said after a copy. */
|
|
15
20
|
announceCopied: string;
|
|
16
21
|
/** Said when the browser refuses. */
|
|
17
22
|
announceFailed: string;
|
|
18
23
|
}
|
|
24
|
+
export declare const copyButtonLabels: CopyButtonLabels;
|
|
19
25
|
/**
|
|
20
26
|
* Copies text to the clipboard and says so: the button reads Copied (or Not copied) for two seconds, and a
|
|
21
27
|
* status message says what happened, again on a second copy. The visible word starts the button's name, so a
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/ui/copy-button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;IAC/F,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,
|
|
1
|
+
{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/ui/copy-button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;IAC/F,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,4GAA4G;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACpC;AAED,uGAAuG;AACvG,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAO9B,CAAC;AAIF;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,OAAiB,EACjB,UAAiB,EACjB,MAAM,EAAE,KAAK,EACb,GAAG,KAAK,EACT,EAAE,eAAe,+BA6CjB"}
|
package/dist/ui/copy-button.js
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useRef, useState } from 'react';
|
|
4
4
|
import { Button } from './button.js';
|
|
5
|
-
import {
|
|
6
|
-
const copyButtonLabels = {
|
|
5
|
+
import { useLabels } from '../lib/locale.js';
|
|
6
|
+
export const copyButtonLabels = {
|
|
7
7
|
copy: 'Copy',
|
|
8
8
|
copied: 'Copied',
|
|
9
9
|
notCopied: 'Not copied',
|
|
10
|
+
name: '{word} {label}',
|
|
10
11
|
announceCopied: 'Copied {label}',
|
|
11
12
|
announceFailed: "Couldn't copy {label}. Select it and copy it yourself.",
|
|
12
13
|
};
|
|
@@ -16,11 +17,11 @@ const copyButtonLabels = {
|
|
|
16
17
|
* voice command for what's on screen reaches it.
|
|
17
18
|
*/
|
|
18
19
|
export function CopyButton({ text, label, variant = 'ghost', visualSize = 'sm', labels: given, ...props }) {
|
|
19
|
-
const
|
|
20
|
+
const t = useLabels('copyButton', copyButtonLabels, given);
|
|
20
21
|
const shown = {
|
|
21
|
-
idle:
|
|
22
|
-
copied:
|
|
23
|
-
failed:
|
|
22
|
+
idle: t('copy'),
|
|
23
|
+
copied: t('copied'),
|
|
24
|
+
failed: t('notCopied'),
|
|
24
25
|
};
|
|
25
26
|
const [state, setState] = useState('idle');
|
|
26
27
|
const [message, setMessage] = useState('');
|
|
@@ -36,14 +37,14 @@ export function CopyButton({ text, label, variant = 'ghost', visualSize = 'sm',
|
|
|
36
37
|
later(() => setMessage(words), 100);
|
|
37
38
|
later(() => setState('idle'), 2000);
|
|
38
39
|
};
|
|
39
|
-
return (_jsxs("span", { className: "relative inline-flex", children: [
|
|
40
|
+
return (_jsxs("span", { className: "relative inline-flex", children: [_jsx(Button, { ...props, "aria-label": t('name', { word: shown[state], label }), variant: variant, visualSize: visualSize, onPress: async () => {
|
|
40
41
|
try {
|
|
41
42
|
await navigator.clipboard.writeText(text);
|
|
42
|
-
announce('copied',
|
|
43
|
+
announce('copied', t('announceCopied', { label }));
|
|
43
44
|
}
|
|
44
45
|
catch {
|
|
45
|
-
announce('failed',
|
|
46
|
+
announce('failed', t('announceFailed', { label }));
|
|
46
47
|
}
|
|
47
|
-
}, children:
|
|
48
|
+
}, children: shown[state] }), _jsx("span", { role: "status", className: "sr-only", children: message })] }));
|
|
48
49
|
}
|
|
49
50
|
//# sourceMappingURL=copy-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../src/ui/copy-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../src/ui/copy-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA0B7C,MAAM,CAAC,MAAM,gBAAgB,GAAqB;IAChD,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,gBAAgB;IACtB,cAAc,EAAE,gBAAgB;IAChC,cAAc,EAAE,wDAAwD;CACzE,CAAC;AAIF;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,OAAO,GAAG,OAAO,EACjB,UAAU,GAAG,IAAI,EACjB,MAAM,EAAE,KAAK,EACb,GAAG,KAAK,EACQ;IAChB,MAAM,CAAC,GAAG,SAAS,CAAC,YAAY,EAAE,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAC3D,MAAM,KAAK,GAA0B;QACnC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;QACf,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC;QACnB,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC;KACvB,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,MAAM,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAC;IAC3D,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IAChE,MAAM,KAAK,GAAG,CAAC,EAAc,EAAE,EAAU,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,CAAC,IAAW,EAAE,KAAa,EAAE,EAAE;QAC9C,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QACrC,MAAM,CAAC,OAAO,GAAG,EAAE,CAAC;QACpB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,sFAAsF;QACtF,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,KAAK,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;QACpC,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;IACtC,CAAC,CAAC;IACF,OAAO,CAEL,gBAAM,SAAS,EAAC,sBAAsB,aACpC,KAAC,MAAM,OACD,KAAK,gBACG,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,EACpD,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,KAAK,IAAI,EAAE;oBAClB,IAAI,CAAC;wBACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;wBAC1C,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;oBACrD,CAAC;oBAAC,MAAM,CAAC;wBACP,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;oBACrD,CAAC;gBACH,CAAC,YAEA,KAAK,CAAC,KAAK,CAAC,GACN,EACT,eAAM,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,YACpC,OAAO,GACH,IACF,CACR,CAAC;AACJ,CAAC"}
|
package/dist/ui/date-field.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export interface DateFieldLabels extends FieldLabels {
|
|
|
14
14
|
}
|
|
15
15
|
/** A date picker's words: its field's and its calendar's. */
|
|
16
16
|
export type DatePickerLabels = DateFieldLabels & CalendarLabels;
|
|
17
|
+
export declare const dateFieldLabels: DateFieldLabels;
|
|
17
18
|
interface FieldBase {
|
|
18
19
|
label: string;
|
|
19
20
|
/** Hint beyond the format, e.g. "The date on your certificate". */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../src/ui/date-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAUL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,eAAe,IAAI,kBAAkB,EAC1C,KAAK,SAAS,EACd,KAAK,oBAAoB,IAAI,uBAAuB,EACpD,KAAK,SAAS,EACd,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAE7E,OAAO,
|
|
1
|
+
{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../src/ui/date-field.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/date-field.js
CHANGED
|
@@ -6,8 +6,8 @@ import { CalendarDays } from 'lucide-react';
|
|
|
6
6
|
import { cn } from '../lib/cn.js';
|
|
7
7
|
import { Button } from './button.js';
|
|
8
8
|
import { Calendar, RangeCalendar } from './calendar.js';
|
|
9
|
-
import {
|
|
10
|
-
import { FieldDescription, FieldError, FieldLabel, fieldBox, fieldStack, fieldWidths,
|
|
9
|
+
import { useLabels } from '../lib/locale.js';
|
|
10
|
+
import { FieldDescription, FieldError, FieldLabel, fieldBox, fieldStack, fieldWidths, withRequired, fieldLabels, useFieldLabels, } from './field.js';
|
|
11
11
|
import { Popover } from './menu.js';
|
|
12
12
|
/**
|
|
13
13
|
* The box around the segments (Layer 2, painted by field-paint), the same height, edge and focus ring as
|
|
@@ -27,14 +27,14 @@ function Segments({ className, slot }) {
|
|
|
27
27
|
// the box's height, not the target's.
|
|
28
28
|
'flex min-h-control-target min-w-(--target-min) cursor-text items-center justify-center self-stretch rounded-sm border-y-(length:--field-band) border-transparent bg-clip-padding px-1 tabular-nums outline-none caret-transparent', 'data-disabled:cursor-not-allowed data-[type=literal]:min-w-0 data-[type=literal]:cursor-default', 'data-placeholder:text-muted-foreground data-[type=literal]:px-0 data-[type=literal]:text-muted-foreground', 'data-focused:bg-primary data-focused:text-primary-foreground data-invalid:data-focused:bg-destructive data-invalid:data-focused:text-destructive-foreground') })) }));
|
|
29
29
|
}
|
|
30
|
-
const dateFieldLabels = {
|
|
31
|
-
|
|
30
|
+
export const dateFieldLabels = {
|
|
31
|
+
...fieldLabels,
|
|
32
32
|
tooEarly: 'Enter a date on or after {date}',
|
|
33
33
|
tooLate: 'Enter a date on or before {date}',
|
|
34
34
|
unavailable: "{date} isn't available. Choose another date",
|
|
35
35
|
};
|
|
36
36
|
function useLimitMessages(minValue, maxValue, isDateUnavailable, given) {
|
|
37
|
-
const
|
|
37
|
+
const t = useLabels(['field', 'dateField'], dateFieldLabels, given);
|
|
38
38
|
const { locale } = useLocale();
|
|
39
39
|
const fmt = new DateFormatter(locale, { dateStyle: 'medium' });
|
|
40
40
|
const show = (d) => fmt.format(d.toDate(getLocalTimeZone()));
|
|
@@ -42,24 +42,26 @@ function useLimitMessages(minValue, maxValue, isDateUnavailable, given) {
|
|
|
42
42
|
if (!value)
|
|
43
43
|
return null;
|
|
44
44
|
if (minValue && value.compare(minValue) < 0)
|
|
45
|
-
return
|
|
45
|
+
return t('tooEarly', { date: show(minValue) });
|
|
46
46
|
if (maxValue && value.compare(maxValue) > 0)
|
|
47
|
-
return
|
|
47
|
+
return t('tooLate', { date: show(maxValue) });
|
|
48
48
|
if (isDateUnavailable?.(value, null))
|
|
49
|
-
return
|
|
49
|
+
return t('unavailable', { date: show(value) });
|
|
50
50
|
return null;
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
53
|
/** A date typed in parts. Best for dates people know without looking — a date of birth, an expiry date. */
|
|
54
54
|
export function DateField({ label, description, errorMessage, requiredMessage, validate, width = 'sm', labels, className, ...props }) {
|
|
55
55
|
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable, labels);
|
|
56
|
-
const
|
|
57
|
-
|
|
56
|
+
const t = useLabels(['field', 'dateField'], dateFieldLabels, labels);
|
|
57
|
+
const required = requiredMessage ?? t('enterValue', { label });
|
|
58
|
+
return (_jsxs(RACDateField, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, (v) => validate?.(v) ?? limits(v)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, labels: labels, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: t('errorPrefix'), requiredMessage: required, children: errorMessage }), _jsx(Segments, { className: cn(boxStyles, 'px-(--control-pad-x)') })] }));
|
|
58
59
|
}
|
|
59
60
|
/** A time typed in parts. The hour cycle (12 or 24) follows the locale unless `hourCycle` is set. */
|
|
60
61
|
export function TimeField({ label, description, errorMessage, requiredMessage, validate, width = 'sm', labels, className, ...props }) {
|
|
61
|
-
const
|
|
62
|
-
|
|
62
|
+
const t = useFieldLabels(labels);
|
|
63
|
+
const required = requiredMessage ?? t('enterValue', { label });
|
|
64
|
+
return (_jsxs(RACTimeField, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, validate), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, labels: labels, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: t('errorPrefix'), requiredMessage: required, children: errorMessage }), _jsx(Segments, { className: cn(boxStyles, 'px-(--control-pad-x)') })] }));
|
|
63
65
|
}
|
|
64
66
|
function PickerButton() {
|
|
65
67
|
// React Aria names it ("Calendar", localised) and wires it to the popover. The painted button stays 4px
|
|
@@ -72,13 +74,15 @@ function PickerButton() {
|
|
|
72
74
|
*/
|
|
73
75
|
export function DatePicker({ label, description, errorMessage, requiredMessage, validate, width = 'sm', labels, className, ...props }) {
|
|
74
76
|
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable, labels);
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
+
const t = useLabels(['field', 'dateField'], dateFieldLabels, labels);
|
|
78
|
+
const required = requiredMessage ?? t('enterValue', { label });
|
|
79
|
+
return (_jsxs(RACDatePicker, { ...props, validate: withRequired(props.isRequired, required, (v) => v == null, (v) => validate?.(v) ?? limits(v)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, labels: labels, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: t('errorPrefix'), requiredMessage: required, children: errorMessage }), _jsxs(Group, { className: boxStyles, children: [_jsx(Segments, { className: "ps-(--control-pad-x)" }), _jsx(PickerButton, {})] }), _jsx(Popover, { placement: "bottom end", className: "min-w-0 p-3", children: _jsx(RACDialog, { className: "outline-none", children: _jsx(Calendar, { labels: labels }) }) })] }));
|
|
77
80
|
}
|
|
78
81
|
/** A start and an end date, each typed in parts, with a two-click range calendar. */
|
|
79
82
|
export function DateRangePicker({ label, description, errorMessage, requiredMessage, validate, width = 'md', labels, className, ...props }) {
|
|
80
83
|
const limits = useLimitMessages(props.minValue, props.maxValue, props.isDateUnavailable, labels);
|
|
81
|
-
const
|
|
82
|
-
|
|
84
|
+
const t = useLabels(['field', 'dateField'], dateFieldLabels, labels);
|
|
85
|
+
const required = requiredMessage ?? t('enterValue', { label });
|
|
86
|
+
return (_jsxs(RACDateRangePicker, { ...props, validate: withRequired(props.isRequired, required, (v) => !v?.start || !v?.end, (v) => validate?.(v) ?? (v ? (limits(v.start) ?? limits(v.end)) : null)), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, labels: labels, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { errorPrefix: t('errorPrefix'), requiredMessage: required, children: errorMessage }), _jsxs(Group, { className: boxStyles, children: [_jsx(Segments, { slot: "start", className: "ps-(--control-pad-x)" }), _jsx("span", { "aria-hidden": "true", className: "flex items-center px-2 text-muted-foreground", children: "\u2013" }), _jsx(Segments, { slot: "end" }), _jsx(PickerButton, {})] }), _jsx(Popover, { placement: "bottom end", className: "min-w-0 p-3", children: _jsx(RACDialog, { className: "outline-none", children: _jsx(RangeCalendar, { labels: labels }) }) })] }));
|
|
83
87
|
}
|
|
84
88
|
//# sourceMappingURL=date-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-field.js","sourceRoot":"","sources":["../../src/ui/date-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,SAAS,IAAI,YAAY,EACzB,SAAS,EACT,UAAU,IAAI,aAAa,EAC3B,eAAe,IAAI,kBAAkB,EACrC,WAAW,EACX,MAAM,IAAI,SAAS,EACnB,KAAK,EACL,SAAS,IAAI,YAAY,EACzB,SAAS,GAQV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAuB,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"date-field.js","sourceRoot":"","sources":["../../src/ui/date-field.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/dialog.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { type ReactNode } from 'react';
|
|
|
3
3
|
export interface DialogLabels {
|
|
4
4
|
close: string;
|
|
5
5
|
}
|
|
6
|
+
export declare const dialogLabels: DialogLabels;
|
|
6
7
|
export interface DialogProps {
|
|
7
8
|
isOpen: boolean;
|
|
8
9
|
onOpenChange: (open: boolean) => void;
|
|
@@ -21,8 +22,10 @@ export interface DialogProps {
|
|
|
21
22
|
}
|
|
22
23
|
/** A centred modal: focus moves in and is trapped, Escape closes, focus returns to what opened it. */
|
|
23
24
|
export declare function Dialog({ isOpen, onOpenChange, title, description, children, footer, role, isDismissable, size, labels, className, }: DialogProps): import("react").JSX.Element;
|
|
24
|
-
/** A ConfirmDialog's words, for the `labels` prop.
|
|
25
|
+
/** A ConfirmDialog's words, for the `labels` prop. */
|
|
25
26
|
export interface ConfirmDialogLabels {
|
|
27
|
+
/** The button that closes it without acting. */
|
|
28
|
+
cancel: string;
|
|
26
29
|
/** The type-to-confirm field's label; `{text}` is `confirmText`. */
|
|
27
30
|
typeToConfirm: string;
|
|
28
31
|
/** Its error when the text doesn't match. */
|
|
@@ -32,6 +35,7 @@ export interface ConfirmDialogLabels {
|
|
|
32
35
|
/** The error when `onConfirm` throws without a message of its own. */
|
|
33
36
|
failed: string;
|
|
34
37
|
}
|
|
38
|
+
export declare const confirmDialogLabels: ConfirmDialogLabels;
|
|
35
39
|
export interface ConfirmDialogProps {
|
|
36
40
|
isOpen: boolean;
|
|
37
41
|
onOpenChange: (open: boolean) => void;
|
|
@@ -41,6 +45,7 @@ export interface ConfirmDialogProps {
|
|
|
41
45
|
children: ReactNode;
|
|
42
46
|
/** A verb phrase that repeats the action: "Delete project" — never "OK" or "Yes". */
|
|
43
47
|
confirmLabel: string;
|
|
48
|
+
/** @deprecated Use `labels.cancel`. Kept for one release. */
|
|
44
49
|
cancelLabel?: string;
|
|
45
50
|
tone?: 'danger' | 'default';
|
|
46
51
|
/** For the riskiest actions: the exact text to type before confirming (the project's name). */
|
package/dist/ui/dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUxD,+CAA+C;AAC/C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,sGAAsG;IACtG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,sGAAsG;AACtG,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAe,EACf,aAAoB,EACpB,IAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,WAAW,+
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUxD,+CAA+C;AAC/C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY,EAAE,YAAiC,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,sGAAsG;IACtG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,sGAAsG;AACtG,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAe,EACf,aAAoB,EACpB,IAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,WAAW,+BAwDb;AAED,sDAAsD;AACtD,MAAM,WAAW,mBAAmB;IAClC,gDAAgD;IAChD,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,WAAW,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAMjC,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qGAAqG;IACrG,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,IAAe,EACf,WAAW,EACX,SAAS,EACT,MAAM,EAAE,KAAK,GACd,EAAE,kBAAkB,+BAwFpB"}
|
package/dist/ui/dialog.js
CHANGED
|
@@ -4,18 +4,21 @@ import { useId, useState } from 'react';
|
|
|
4
4
|
import { Dialog as RACDialog, Heading, Modal, ModalOverlay } from 'react-aria-components';
|
|
5
5
|
import { X } from 'lucide-react';
|
|
6
6
|
import { cn } from '../lib/cn.js';
|
|
7
|
-
import {
|
|
7
|
+
import { useLabels } from '../lib/locale.js';
|
|
8
8
|
import { Alert } from './alert.js';
|
|
9
9
|
import { Button } from './button.js';
|
|
10
10
|
import { IconButton } from './icon-button.js';
|
|
11
11
|
import { TextField } from './text-field.js';
|
|
12
|
+
export const dialogLabels = { close: 'Close' };
|
|
12
13
|
const widths = { sm: 'max-w-[26rem]', md: 'max-w-[32rem]', lg: 'max-w-[44rem]' };
|
|
13
14
|
/** A centred modal: focus moves in and is trapped, Escape closes, focus returns to what opened it. */
|
|
14
15
|
export function Dialog({ isOpen, onOpenChange, title, description, children, footer, role = 'dialog', isDismissable = true, size = 'md', labels, className, }) {
|
|
16
|
+
const t = useLabels('dialog', dialogLabels, labels);
|
|
15
17
|
const descId = useId();
|
|
16
|
-
return (_jsx(ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: isDismissable, "data-overlay": true, className: "fixed inset-0 z-(--z-sheet) flex items-center justify-center bg-overlay p-4", children: _jsx(Modal, { "data-sheet": "top", className: cn('relative max-h-[calc(100dvh-2rem)] w-full overflow-auto rounded-xl border border-border bg-popover text-popover-foreground shadow-(--shadow-lg) outline-none', widths[size], className), children: _jsxs(RACDialog, { role: role, "aria-describedby": description ? descId : undefined, className: "flex flex-col outline-none", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 px-5 pt-5", children: [_jsx(Heading, { slot: "title", className: "text-heading", children: title }), isDismissable && (_jsx(IconButton, { label:
|
|
18
|
+
return (_jsx(ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: isDismissable, "data-overlay": true, className: "fixed inset-0 z-(--z-sheet) flex items-center justify-center bg-overlay p-4", children: _jsx(Modal, { "data-sheet": "top", className: cn('relative max-h-[calc(100dvh-2rem)] w-full overflow-auto rounded-xl border border-border bg-popover text-popover-foreground shadow-(--shadow-lg) outline-none', widths[size], className), children: _jsxs(RACDialog, { role: role, "aria-describedby": description ? descId : undefined, className: "flex flex-col outline-none", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 px-5 pt-5", children: [_jsx(Heading, { slot: "title", className: "text-heading", children: title }), isDismissable && (_jsx(IconButton, { label: t('close'), icon: X, visualSize: "icon-sm", slot: "close", tooltip: false, className: "-mt-1 -mr-2 items-start justify-end" }))] }), _jsxs("div", { className: "flex flex-col gap-4 px-5 pt-2 pb-5 text-sm leading-6", children: [description && (_jsx("div", { id: descId, className: "max-w-(--measure) text-muted-foreground", children: description })), children] }), footer && (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-(--control-gap) border-t border-border px-5 py-4", children: footer }))] }) }) }));
|
|
17
19
|
}
|
|
18
|
-
const confirmDialogLabels = {
|
|
20
|
+
export const confirmDialogLabels = {
|
|
21
|
+
cancel: 'Cancel',
|
|
19
22
|
typeToConfirm: 'Type {text} to confirm',
|
|
20
23
|
typeExactly: 'Type {text} exactly, including capitals',
|
|
21
24
|
failedTitle: "{action} didn't work",
|
|
@@ -26,8 +29,8 @@ const confirmDialogLabels = {
|
|
|
26
29
|
* role=alertdialog, not dismissed by the backdrop; focus starts on Cancel, or the confirm-text field.
|
|
27
30
|
* Anything reversible should skip this and offer Undo in a toast instead.
|
|
28
31
|
*/
|
|
29
|
-
export function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLabel, cancelLabel
|
|
30
|
-
const
|
|
32
|
+
export function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLabel, cancelLabel, tone = 'danger', confirmText, onConfirm, labels: given, }) {
|
|
33
|
+
const t = useLabels('confirmDialog', confirmDialogLabels, given);
|
|
31
34
|
const [typed, setTyped] = useState('');
|
|
32
35
|
const [mismatch, setMismatch] = useState(false);
|
|
33
36
|
const [pending, setPending] = useState(false);
|
|
@@ -58,18 +61,18 @@ export function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLa
|
|
|
58
61
|
onOpenChange(false);
|
|
59
62
|
}
|
|
60
63
|
catch (e) {
|
|
61
|
-
setError(e instanceof Error && e.message ? e.message :
|
|
64
|
+
setError(e instanceof Error && e.message ? e.message : t('failed'));
|
|
62
65
|
}
|
|
63
66
|
finally {
|
|
64
67
|
setPending(false);
|
|
65
68
|
}
|
|
66
69
|
};
|
|
67
|
-
return (_jsxs(Dialog, { isOpen: isOpen, onOpenChange: (open) => !pending && onOpenChange(open), title: title, role: "alertdialog", isDismissable: false, description: children, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", slot: "close", autoFocus: !confirmText, isDisabled: pending, children: cancelLabel }), _jsx(Button, { variant: tone === 'danger' ? 'destructive' : 'primary', isPending: pending, onPress: run, children: confirmLabel })] }), children: [confirmText && (_jsx(TextField, { id: fieldId, label:
|
|
70
|
+
return (_jsxs(Dialog, { isOpen: isOpen, onOpenChange: (open) => !pending && onOpenChange(open), title: title, role: "alertdialog", isDismissable: false, description: children, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", slot: "close", autoFocus: !confirmText, isDisabled: pending, children: cancelLabel ?? t('cancel') }), _jsx(Button, { variant: tone === 'danger' ? 'destructive' : 'primary', isPending: pending, onPress: run, children: confirmLabel })] }), children: [confirmText && (_jsx(TextField, { id: fieldId, label: t('typeToConfirm', { text: confirmText }), value: typed, onChange: (v) => {
|
|
68
71
|
setTyped(v);
|
|
69
72
|
setMismatch(false);
|
|
70
73
|
},
|
|
71
74
|
// Type-to-confirm: the field is the dialog's first task, so it takes focus when the dialog opens.
|
|
72
75
|
// oxlint-disable-next-line jsx-a11y/no-autofocus
|
|
73
|
-
autoFocus: true, autoComplete: "off", spellCheck: "false", isInvalid: mismatch, errorMessage:
|
|
76
|
+
autoFocus: true, autoComplete: "off", spellCheck: "false", isInvalid: mismatch, errorMessage: t('typeExactly', { text: confirmText }) })), error && (_jsx(Alert, { tone: "danger", live: "assertive", title: t('failedTitle', { action: confirmLabel }), children: error }))] }));
|
|
74
77
|
}
|
|
75
78
|
//# sourceMappingURL=dialog.js.map
|
package/dist/ui/dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1F,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"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"}
|