@nadicodeai/ui 12.1.167 → 12.1.169
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +6 -3
- package/dist/components/record-list.d.ts.map +1 -1
- package/dist/components/record-list.js +23 -22
- package/dist/components/record-time.d.ts.map +1 -1
- package/dist/components/record-time.js +3 -0
- package/dist/components/settings-facts.d.ts +11 -6
- package/dist/components/settings-facts.d.ts.map +1 -1
- package/dist/components/settings-facts.js +8 -8
- package/dist/components/settings-section.d.ts +14 -3
- package/dist/components/settings-section.d.ts.map +1 -1
- package/dist/components/settings-section.js +8 -2
- package/dist/components/status-badge.js +1 -1
- package/dist/components/table-layouts.d.ts +8 -0
- package/dist/components/table-layouts.d.ts.map +1 -1
- package/dist/components/table-layouts.js +8 -0
- package/dist/components/update-card.d.ts +7 -11
- package/dist/components/update-card.d.ts.map +1 -1
- package/dist/components/update-card.js +6 -7
- package/dist/internal/table-compact-line.d.ts +23 -5
- package/dist/internal/table-compact-line.d.ts.map +1 -1
- package/dist/internal/table-compact-line.js +28 -7
- package/dist/showcase/specimens/data.js +1 -1
- package/dist/showcase/specimens/feedback.d.ts.map +1 -1
- package/dist/showcase/specimens/feedback.js +1 -1
- package/dist/showcase/usage.generated.js +7 -7
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,mBAAmB,EAGnB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,WAAW,EAIX,KAAK,QAAQ,EACb,KAAK,MAAM,EACX,KAAK,SAAS,EAGd,KAAK,OAAO,EAGb,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAU9E,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ import { EmptyState } from "./empty-state.js";
|
|
|
13
13
|
import { MiddleTruncate } from "./middle-truncate.js";
|
|
14
14
|
import { Table, TableCell, TableCol, TableColgroup, TableDetailRow, TableHead, TableHeader, TableRecordGroup, TableRow, } from "./table.js";
|
|
15
15
|
import { TableCard } from "./table-card.js";
|
|
16
|
-
import { TableCompactLine,
|
|
16
|
+
import { TableCompactLayoutOf, TableCompactLine, } from "../internal/table-compact-line.js";
|
|
17
17
|
import { compactLayoutFor, tableCompactLayouts, } from "./table-layouts.js";
|
|
18
18
|
import { titleWhenCut } from "../internal/title-when-cut.js";
|
|
19
19
|
const dataTableFeatures = tableFeatures({
|
|
@@ -129,11 +129,14 @@ function useShownLayout() {
|
|
|
129
129
|
const [shownLayout, setShownLayout] = React.useState("both");
|
|
130
130
|
const probeRef = React.useCallback((probe) => {
|
|
131
131
|
const container = probe?.closest('[data-slot="table-container"]');
|
|
132
|
-
if (!probe || !container
|
|
132
|
+
if (!probe || !container)
|
|
133
133
|
return;
|
|
134
134
|
const read = () => getComputedStyle(probe).display === "none" ? "columns" : "details";
|
|
135
135
|
let shown = read();
|
|
136
136
|
setShownLayout(shown);
|
|
137
|
+
// Without a ResizeObserver to follow the card, the first measurement stands.
|
|
138
|
+
if (typeof ResizeObserver === "undefined")
|
|
139
|
+
return;
|
|
137
140
|
const show = (next) => {
|
|
138
141
|
if (next === shown)
|
|
139
142
|
return;
|
|
@@ -346,7 +349,7 @@ function RecordsTable({ kind, columns, data, getRowId, filterColumnId, filterPla
|
|
|
346
349
|
},
|
|
347
350
|
}
|
|
348
351
|
: empty) }));
|
|
349
|
-
const tableNode = (_jsxs(_Fragment, { children: [_jsx("div", { "aria-live": "polite", "data-slot": "data-table-absence", children: absence }), rows.length === 0 ? null : (_jsx(
|
|
352
|
+
const tableNode = (_jsxs(_Fragment, { children: [_jsx("div", { "aria-live": "polite", "data-slot": "data-table-absence", children: absence }), rows.length === 0 ? null : (_jsx(TableCompactLayoutOf, { layout: tableLayout, shown: shownLayout, children: _jsxs(Table, { "aria-label": tableLabel, className: "table-fixed text-body-sm", compactDetails: tableLayout, density: entities ? "comfortable" : "default", children: [_jsx(TableColgroup, { children: table.getVisibleLeafColumns().map((column) => {
|
|
350
353
|
const size = sizeOf.get(column.id);
|
|
351
354
|
return (_jsx(TableCol, { className: cn(collapseTrackClass(column, primaryColumns, compactLayout)), style: size === undefined ? undefined : { width: size } }, column.id));
|
|
352
355
|
}) }), _jsx(TableHeader, { className: entities ? "sr-only" : undefined, children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { "aria-sort": sortOrder(header.column.getIsSorted()), "data-identity": header.column.id === identityColumnId ? "" : undefined, className: cn(isNumericColumn(header.column) && "text-right tabular-nums", header.column.columnDef.meta?.wraps === true && "last:text-left", header.column.columnDef.meta?.centered === true &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-list.d.ts","sourceRoot":"","sources":["../../src/components/record-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAiB,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAIjG,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAI9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,KAAK,UAAU,EAAqC,MAAM,wBAAwB,CAAC;AAG5F,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,MAAM,MAAM,UAAU,GAAG;IACvB,uFAAuF;IACvF,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0GAA0G;IAC1G,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC;IACnC,+FAA+F;IAC/F,IAAI,EAAE,MAAM,CAAC;IACb,gHAAgH;IAChH,KAAK,CAAC,EAAE,IAAI,CAAC;CACd,CAAC;AAEF,kGAAkG;AAClG,MAAM,MAAM,WAAW,CAAC,OAAO,IAC3B,SAAS,EAAE,GACX,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAC9B,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,GACnD,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,eAAe,CAAA;CAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"record-list.d.ts","sourceRoot":"","sources":["../../src/components/record-list.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ import { TableCard } from "./table-card.js";
|
|
|
16
16
|
import { TableValue } from "./table-value.js";
|
|
17
17
|
import { soleMenuButton } from "../internal/record-menu-items.js";
|
|
18
18
|
import { RowMessageActions, RowMessageLine } from "../internal/row-message.js";
|
|
19
|
-
import {
|
|
19
|
+
import { CompactOnly, WideOnly } from "../internal/table-compact-line.js";
|
|
20
20
|
const CELL_START = 8;
|
|
21
21
|
const CELL_END_AT_CARD_EDGE = 20;
|
|
22
22
|
const COMMANDS_GAP = 8;
|
|
@@ -30,21 +30,23 @@ const BUTTON_ICON_GAP = 3;
|
|
|
30
30
|
const EXTERNAL_ARROW = 14;
|
|
31
31
|
const CHEVRON = 16;
|
|
32
32
|
const WIDEST_LABEL_CHARACTER = 8;
|
|
33
|
-
function shownCommands(list, record
|
|
33
|
+
function shownCommands(list, record) {
|
|
34
34
|
const menu = list.menu?.(record);
|
|
35
35
|
const commands = menu?.commands ?? [];
|
|
36
36
|
const own = list.command?.(record);
|
|
37
|
-
const
|
|
38
|
-
|
|
37
|
+
const ownButtons = own ? [own].flat() : [];
|
|
38
|
+
// A sole menu command is the row's button on a wide card and stays in the dots on a compact one.
|
|
39
|
+
const menuButton = own || list.layout === "line" ? undefined : soleMenuButton(commands);
|
|
39
40
|
const state = list.state?.(record) ?? null;
|
|
40
|
-
const dots = menu && commands.length > 0
|
|
41
|
-
const
|
|
41
|
+
const dots = menu && commands.length > 0 ? menu : undefined;
|
|
42
|
+
const opens = Boolean(list.open?.href(record)) && !state;
|
|
42
43
|
return {
|
|
43
|
-
besideDots:
|
|
44
|
-
underName:
|
|
44
|
+
besideDots: menuButton ? [menuButton] : ownButtons,
|
|
45
|
+
underName: ownButtons,
|
|
46
|
+
menuButton,
|
|
45
47
|
state,
|
|
46
48
|
dots,
|
|
47
|
-
|
|
49
|
+
opens,
|
|
48
50
|
};
|
|
49
51
|
}
|
|
50
52
|
function buttonRoom(command, size) {
|
|
@@ -55,14 +57,16 @@ function buttonRoom(command, size) {
|
|
|
55
57
|
longerLabel * WIDEST_LABEL_CHARACTER);
|
|
56
58
|
}
|
|
57
59
|
function commandsRoom(list, record) {
|
|
58
|
-
const { besideDots, state, dots,
|
|
60
|
+
const { besideDots, menuButton, state, dots, opens } = shownCommands(list, record);
|
|
61
|
+
const wideDots = dots && !menuButton;
|
|
62
|
+
const chevron = opens && !wideDots;
|
|
59
63
|
const widths = [
|
|
60
64
|
...besideDots.map((command) => buttonRoom(command, "sm")),
|
|
61
65
|
...(state?.message.actions ?? []).map((action) => buttonRoom(action, "default")),
|
|
62
66
|
];
|
|
63
67
|
if (widths.length === 0)
|
|
64
68
|
return DOTS_ALONE_SIZE;
|
|
65
|
-
if (
|
|
69
|
+
if (wideDots)
|
|
66
70
|
widths.push(TOUCH_TARGET);
|
|
67
71
|
if (chevron)
|
|
68
72
|
widths.push(CHEVRON);
|
|
@@ -98,13 +102,12 @@ function NameCell({ row }) {
|
|
|
98
102
|
}
|
|
99
103
|
function UnderName({ record }) {
|
|
100
104
|
const list = useShownList();
|
|
101
|
-
const compact = useTableLaidOutCompact();
|
|
102
105
|
const state = list.state?.(record);
|
|
103
|
-
const nextSteps =
|
|
104
|
-
const { underName } = shownCommands(list, record
|
|
106
|
+
const nextSteps = state?.message.actions.length ? state : null;
|
|
107
|
+
const { underName } = shownCommands(list, record);
|
|
105
108
|
if (!nextSteps && underName.length === 0)
|
|
106
109
|
return null;
|
|
107
|
-
return (_jsxs("span", { className: "flex flex-wrap gap-2 pt-2 pl-12 whitespace-normal", "data-slot": "record-under-name", children: [nextSteps ? _jsx(RowMessageActions, { state: nextSteps }) : null, underName.map((command) => (_jsx(PageCommandButton, { command: command, size: "sm", variant: "outline" }, command.label)))] }));
|
|
110
|
+
return (_jsx(CompactOnly, { children: _jsxs("span", { className: "flex flex-wrap gap-2 pt-2 pl-12 whitespace-normal", "data-slot": "record-under-name", children: [nextSteps ? _jsx(RowMessageActions, { state: nextSteps }) : null, underName.map((command) => (_jsx(PageCommandButton, { command: command, size: "sm", variant: "outline" }, command.label)))] }) }));
|
|
108
111
|
}
|
|
109
112
|
function SelectCell({ row }) {
|
|
110
113
|
const select = useShownList().select;
|
|
@@ -152,14 +155,12 @@ function ChecklistCell({ row }) {
|
|
|
152
155
|
function CommandsCell({ row }) {
|
|
153
156
|
const list = useShownList();
|
|
154
157
|
const record = row.original;
|
|
155
|
-
const
|
|
156
|
-
const
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
const end = dots ? (_jsx(ActionMenu, { commands: dots.commands, label: dots.label, record: list.name(record).name })) : chevron ? (_jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground" })) : null;
|
|
160
|
-
if (besideDots.length === 0 && !state && !end)
|
|
158
|
+
const { besideDots, menuButton, state, dots, opens } = shownCommands(list, record);
|
|
159
|
+
const menu = dots ? (_jsx(ActionMenu, { commands: dots.commands, label: dots.label, record: list.name(record).name })) : null;
|
|
160
|
+
const chevron = opens ? (_jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground" })) : null;
|
|
161
|
+
if (besideDots.length === 0 && !state && !menu && !chevron)
|
|
161
162
|
return null;
|
|
162
|
-
return (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [besideDots.length > 0 ? (_jsx("div", { className: "flex min-w-0 justify-end gap-2 *:max-w-full *:min-w-0 *:shrink [&>*>span:not([data-icon])]:truncate", children: besideDots.map((command) => (_jsx(PageCommandButton, { command: command, size: "sm", variant: "outline" }, command.label))) })) : null, state
|
|
163
|
+
return (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsxs(WideOnly, { children: [besideDots.length > 0 ? (_jsx("div", { className: "flex min-w-0 justify-end gap-2 *:max-w-full *:min-w-0 *:shrink [&>*>span:not([data-icon])]:truncate", children: besideDots.map((command) => (_jsx(PageCommandButton, { command: command, size: "sm", variant: "outline" }, command.label))) })) : null, state ? _jsx(RowMessageActions, { state: state }) : null] }), menu && menuButton ? _jsx(CompactOnly, { children: menu }) : menu, chevron && menu && menuButton ? _jsx(WideOnly, { children: chevron }) : null, chevron && !menu ? chevron : null] }));
|
|
163
164
|
}
|
|
164
165
|
function LoadingRecords({ label }) {
|
|
165
166
|
return (_jsx("div", { "aria-busy": "true", "aria-label": label, className: "divide-y divide-border", role: "status", children: Array.from({ length: 3 }, (_, index) => (_jsxs("div", { className: "flex items-center gap-4 px-2 py-4", children: [_jsx(Skeleton, { className: "shrink-0", height: 32, width: 32 }), _jsxs("div", { className: "grid min-w-0 gap-2", children: [_jsx(Skeleton, { className: "max-w-full", height: 16, width: 160 }), _jsx(Skeleton, { className: "max-w-full", height: 16, width: 224 })] }), _jsx(Skeleton, { className: "ml-auto", height: 16, width: 92 })] }, index))) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-time.d.ts","sourceRoot":"","sources":["../../src/components/record-time.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAa,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAYxF,MAAM,MAAM,eAAe,GAAG;IAC5B,0FAA0F;IAC1F,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACvD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kIAAkI;IAClI,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,CACA;IACE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AACH,gEAAgE;GAC9D;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CACpB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,IAAI,EACR,MAAM,CAAC,EAAE,MAAM,EACf,GAAG,SAAa,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAWR;AAeD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA;
|
|
1
|
+
{"version":3,"file":"record-time.d.ts","sourceRoot":"","sources":["../../src/components/record-time.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAa,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAYxF,MAAM,MAAM,eAAe,GAAG;IAC5B,0FAA0F;IAC1F,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACvD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kIAAkI;IAClI,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,CACA;IACE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AACH,gEAAgE;GAC9D;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CACpB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,IAAI,EACR,MAAM,CAAC,EAAE,MAAM,EACf,GAAG,SAAa,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAWR;AAeD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA;AAoDD,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAIrF;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,sCA+EhD"}
|
|
@@ -41,6 +41,9 @@ export function RecordTimeRenderedAt({ moment, children, }) {
|
|
|
41
41
|
return _jsx(RenderedAt, { value: moment, children: children });
|
|
42
42
|
}
|
|
43
43
|
function useReadingTime(now, counted) {
|
|
44
|
+
// A compiling consumer (React Compiler in Nadia and the Portal) would keep the first render's clock for good, and a
|
|
45
|
+
// later `at` would then read as the future and fall back to its date.
|
|
46
|
+
"use no memo";
|
|
44
47
|
const hydrated = useHydrated();
|
|
45
48
|
if (now !== undefined || !counted)
|
|
46
49
|
return now;
|
|
@@ -11,9 +11,14 @@ export type SettingsFact = {
|
|
|
11
11
|
value: ReactNode;
|
|
12
12
|
};
|
|
13
13
|
type SettingsFactsBase = Omit<ComponentPropsWithoutRef<"section">, "children" | "className"> & {
|
|
14
|
+
/** A command on the facts themselves, at the title's right: the Edit that opens their editor, or a summary's control. */
|
|
15
|
+
command?: ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* The one action the card's state asks for, at the footer's right beside its line, as Vercel's settings cards keep
|
|
18
|
+
* theirs: Update, Start, Review billing. Never a Save.
|
|
19
|
+
*/
|
|
14
20
|
action?: ReactNode;
|
|
15
21
|
facts: readonly SettingsFact[];
|
|
16
|
-
footer?: ReactNode;
|
|
17
22
|
missingValueLabel: string;
|
|
18
23
|
/**
|
|
19
24
|
* Stable: the heading names this section's landmark, and it is where focus
|
|
@@ -44,18 +49,18 @@ export type SettingsFactsSectionProps = SettingsFactsBase & ({
|
|
|
44
49
|
size?: never;
|
|
45
50
|
});
|
|
46
51
|
/**
|
|
47
|
-
* Read-only facts about one object, framed as a card with a title, a line,
|
|
52
|
+
* Read-only facts about one object, framed as a card with a title, a line, the facts and a footer.
|
|
48
53
|
*
|
|
49
54
|
* @family Data
|
|
50
|
-
* @when Read-only facts about one object: who it is, where it belongs, its identifiers.
|
|
51
|
-
* `SettingsFactsSection` frames them as a card
|
|
55
|
+
* @when Read-only facts about one object: who it is, where it belongs, its identifiers; and a status, a read-only card whose `action` is the one action that fixes it.
|
|
56
|
+
* `SettingsFactsSection` frames them as a card; `ObjectFacts` is the
|
|
52
57
|
* list alone.
|
|
53
58
|
* @instead Facts a person changes are a `SettingsSection` with its own Save. One server-given value,
|
|
54
59
|
* an ID, is a `SettingsSection` with the value in a read-only mono `InputGroup` and its copy button, no Save. Facts
|
|
55
60
|
* compared across records are a table. A relation is its identity or a `Tag`, never its own card.
|
|
56
61
|
* @behaviour "Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`)." (https://vercel.com/geist/description)
|
|
57
62
|
* Ours: required: the description and the footer's left line (`footerHint`), as on a
|
|
58
|
-
* `SettingsSection
|
|
63
|
+
* `SettingsSection`. Two places take a control, each for one job: `command` at the title's right is a command on the facts, the Edit that opens their editor; `action` at the footer's right, beside its line, is the one action the card's state asks for, as a status card's fix (Update, Start) and every Vercel settings card's button stand there. Facts are plain pairs, the label above
|
|
59
64
|
* its value, in two equal columns from 640 px (`sm`) and one column below it. Every label stays when its value is missing,
|
|
60
65
|
* as *—*. A long value
|
|
61
66
|
* spans both columns. No fact gets a box of its own. In a side column, `presentation="summary"`
|
|
@@ -69,6 +74,6 @@ export type SettingsFactsSectionProps = SettingsFactsBase & ({
|
|
|
69
74
|
* Ours: a `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus
|
|
70
75
|
* when an editor closes. A dash carries screen-reader text.
|
|
71
76
|
*/
|
|
72
|
-
export declare function SettingsFactsSection({ action, presentation, description, facts,
|
|
77
|
+
export declare function SettingsFactsSection({ action, command, presentation, description, facts, footerHint, missingValueLabel, headingId, headingLevel, title, surface, size, ...props }: SettingsFactsSectionProps): import("react").JSX.Element;
|
|
73
78
|
export {};
|
|
74
79
|
//# sourceMappingURL=settings-facts.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings-facts.d.ts","sourceRoot":"","sources":["../../src/components/settings-facts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAM7E,OAAO,EACL,IAAI,EAMJ,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,
|
|
1
|
+
{"version":3,"file":"settings-facts.d.ts","sourceRoot":"","sources":["../../src/components/settings-facts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAM7E,OAAO,EACL,IAAI,EAMJ,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7F,yHAAyH;IACzH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,+GAA+G;IAC/G,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,GACvD,CACI;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACtD,GACD;IACE,YAAY,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CACJ,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,OAAO,EACP,YAAqB,EACrB,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAiB,EACjB,SAAS,EACT,YAAgB,EAChB,KAAK,EACL,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,yBAAyB,+BAkE3B"}
|
|
@@ -5,18 +5,18 @@ import { ObjectFacts } from "./object-workspace.js";
|
|
|
5
5
|
import { TableValue } from "./table-value.js";
|
|
6
6
|
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "./card.js";
|
|
7
7
|
/**
|
|
8
|
-
* Read-only facts about one object, framed as a card with a title, a line,
|
|
8
|
+
* Read-only facts about one object, framed as a card with a title, a line, the facts and a footer.
|
|
9
9
|
*
|
|
10
10
|
* @family Data
|
|
11
|
-
* @when Read-only facts about one object: who it is, where it belongs, its identifiers.
|
|
12
|
-
* `SettingsFactsSection` frames them as a card
|
|
11
|
+
* @when Read-only facts about one object: who it is, where it belongs, its identifiers; and a status, a read-only card whose `action` is the one action that fixes it.
|
|
12
|
+
* `SettingsFactsSection` frames them as a card; `ObjectFacts` is the
|
|
13
13
|
* list alone.
|
|
14
14
|
* @instead Facts a person changes are a `SettingsSection` with its own Save. One server-given value,
|
|
15
15
|
* an ID, is a `SettingsSection` with the value in a read-only mono `InputGroup` and its copy button, no Save. Facts
|
|
16
16
|
* compared across records are a table. A relation is its identity or a `Tag`, never its own card.
|
|
17
17
|
* @behaviour "Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`)." (https://vercel.com/geist/description)
|
|
18
18
|
* Ours: required: the description and the footer's left line (`footerHint`), as on a
|
|
19
|
-
* `SettingsSection
|
|
19
|
+
* `SettingsSection`. Two places take a control, each for one job: `command` at the title's right is a command on the facts, the Edit that opens their editor; `action` at the footer's right, beside its line, is the one action the card's state asks for, as a status card's fix (Update, Start) and every Vercel settings card's button stand there. Facts are plain pairs, the label above
|
|
20
20
|
* its value, in two equal columns from 640 px (`sm`) and one column below it. Every label stays when its value is missing,
|
|
21
21
|
* as *—*. A long value
|
|
22
22
|
* spans both columns. No fact gets a box of its own. In a side column, `presentation="summary"`
|
|
@@ -30,15 +30,15 @@ import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle,
|
|
|
30
30
|
* Ours: a `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus
|
|
31
31
|
* when an editor closes. A dash carries screen-reader text.
|
|
32
32
|
*/
|
|
33
|
-
export function SettingsFactsSection({ action, presentation = "card", description, facts,
|
|
33
|
+
export function SettingsFactsSection({ action, command, presentation = "card", description, facts, footerHint, missingValueLabel, headingId, headingLevel = 2, title, surface = "resting", size = "default", ...props }) {
|
|
34
34
|
const termId = useId();
|
|
35
35
|
const Heading = headingLevel === 3 ? "h3" : "h2";
|
|
36
36
|
if (presentation === "summary") {
|
|
37
|
-
return (_jsxs("section", { ...props, "aria-labelledby": headingId, className: "grid min-w-0 gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Heading, { id: headingId, tabIndex: -1, className: "text-sm font-medium", children: title }),
|
|
37
|
+
return (_jsxs("section", { ...props, "aria-labelledby": headingId, className: "grid min-w-0 gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Heading, { id: headingId, tabIndex: -1, className: "text-sm font-medium", children: title }), command] }), description ? _jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null, _jsx("dl", { className: "flex flex-wrap items-start gap-x-6 gap-y-3", children: facts.map((fact, index) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", id: `${termId}-${index}`, children: fact.label }), _jsx("dd", { "aria-labelledby": `${termId}-${index}`, className: "text-sm", children: fact.value ?? _jsx(TableValue, { missingLabel: missingValueLabel, value: null }) })] }, fact.label))) }), action] }));
|
|
38
38
|
}
|
|
39
|
-
return (_jsxs(Card, { render: _jsx("section", {}), ...props, "aria-labelledby": headingId, surface: surface, size: size, className: "min-w-0", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx(Heading, { id: headingId, tabIndex: -1, children: title }) }), description ? _jsx(CardDescription, { children: description }) : null,
|
|
39
|
+
return (_jsxs(Card, { render: _jsx("section", {}), ...props, "aria-labelledby": headingId, surface: surface, size: size, className: "min-w-0", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx(Heading, { id: headingId, tabIndex: -1, children: title }) }), description ? _jsx(CardDescription, { children: description }) : null, command ? _jsx(CardAction, { children: command }) : null] }), _jsx(CardContent, { children: _jsx(ObjectFacts, { facts: facts.map((fact) => ({
|
|
40
40
|
label: fact.label,
|
|
41
41
|
block: fact.block,
|
|
42
42
|
value: fact.value === null || fact.value === undefined || fact.value === "" ? (_jsx(TableValue, { missingLabel: missingValueLabel, value: null })) : (fact.value),
|
|
43
|
-
})) }) }), _jsx(FooterStrip, { hint: footerHint, hintSlot: "settings-facts-hint", children:
|
|
43
|
+
})) }) }), _jsx(FooterStrip, { hint: footerHint, hintSlot: "settings-facts-hint", children: action })] }));
|
|
44
44
|
}
|
|
@@ -142,6 +142,15 @@ type SettingsSwitchRow = SettingsRowBase & {
|
|
|
142
142
|
onCheckedChange: (checked: boolean) => void;
|
|
143
143
|
options?: never;
|
|
144
144
|
control?: never;
|
|
145
|
+
shows?: never;
|
|
146
|
+
};
|
|
147
|
+
/** A fact the card shows and nobody changes there, such as the app's version: no control, no (i). */
|
|
148
|
+
type SettingsValueRow = Pick<SettingsRowBase, "id" | "label"> & {
|
|
149
|
+
shows: NonNullable<React.ReactNode>;
|
|
150
|
+
info?: never;
|
|
151
|
+
checked?: never;
|
|
152
|
+
options?: never;
|
|
153
|
+
control?: never;
|
|
145
154
|
};
|
|
146
155
|
type SettingsSelectRow = SettingsRowBase & {
|
|
147
156
|
value: string;
|
|
@@ -152,6 +161,7 @@ type SettingsSelectRow = SettingsRowBase & {
|
|
|
152
161
|
}[];
|
|
153
162
|
checked?: never;
|
|
154
163
|
control?: never;
|
|
164
|
+
shows?: never;
|
|
155
165
|
};
|
|
156
166
|
type SettingsControlRow = SettingsRowBase & {
|
|
157
167
|
/** A control whose usage page puts it in a settings row, such as ThemeModeSwitcher. */
|
|
@@ -160,6 +170,7 @@ type SettingsControlRow = SettingsRowBase & {
|
|
|
160
170
|
}) => React.ReactNode;
|
|
161
171
|
options?: never;
|
|
162
172
|
checked?: never;
|
|
173
|
+
shows?: never;
|
|
163
174
|
};
|
|
164
175
|
type StateLabels = {
|
|
165
176
|
on: string;
|
|
@@ -168,10 +179,10 @@ type StateLabels = {
|
|
|
168
179
|
type SettingsRowsProps = {
|
|
169
180
|
/** The word beside each switch for its state: "Enabled" and "Disabled". */
|
|
170
181
|
stateLabels: StateLabels;
|
|
171
|
-
rows: readonly (SettingsSwitchRow | SettingsSelectRow | SettingsControlRow)[];
|
|
182
|
+
rows: readonly (SettingsSwitchRow | SettingsSelectRow | SettingsControlRow | SettingsValueRow)[];
|
|
172
183
|
} | {
|
|
173
184
|
stateLabels?: never;
|
|
174
|
-
rows: readonly (SettingsSelectRow | SettingsControlRow)[];
|
|
185
|
+
rows: readonly (SettingsSelectRow | SettingsControlRow | SettingsValueRow)[];
|
|
175
186
|
};
|
|
176
187
|
/**
|
|
177
188
|
* Several switches and selects in one card: each row its label on the left and its control on the right.
|
|
@@ -179,7 +190,7 @@ type SettingsRowsProps = {
|
|
|
179
190
|
* @family Inputs
|
|
180
191
|
* @when A card of switches and selects that the card's one description covers: a project's Git switches, a team's notification channels, a set of defaults, how long a computer stays awake beside whether the window goes to the tray.
|
|
181
192
|
* @instead One setting is a SettingsField. A text box is a field of its own card.
|
|
182
|
-
* @behaviour A row with `options` is a select, a row with `checked` a switch,
|
|
193
|
+
* @behaviour A row with `options` is a select, a row with `checked` a switch, a row with `control` draws a control whose usage page puts it in a row, such as ThemeModeSwitcher, and a row with `shows` is a fact the card shows and nobody changes there, such as the app's version, its value as text where a control would stand; a card may hold any of them together, as Vercel's Root Directory card holds its switches; `stateLabels` is required once any row is a switch. Required on every row that takes a value: the label and its `info` (an (i) with its sentence in a tooltip and on the control); a `shows` row has its label alone. No help line sits under a row. A switch row shows its state word beside the switch (`stateLabels`) and is controlled, so the word always follows the switch. Rows stand 16 px apart; below 28rem a row stacks its control under its label. "Pair with a form footer only when the setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) Ours: a switch is a draft the card's Save applies.
|
|
183
194
|
* @words "Title Case noun phrase, 1–4 words, naming what is true when ON: `Password Protection`, not `Enable Password Protection`." (https://vercel.com/geist/toggle) Ours: sentence case, a noun for what it controls ("Pull request comments"), the same for a switch as for a select. "Render an optional one-sentence description as a sibling under the label that explains ON only. Don’t describe OFF; it’s the negation." (https://vercel.com/geist/toggle) Ours: that sentence is `info.text`. "Options are Title Case when short and match canonical branding (`Next.js`, not `NextJS`); keep the same register across the list." (https://vercel.com/geist/select) Ours: a select's options are sentence case.
|
|
184
195
|
* @access Each row's control is named by the row's label and described by its info and its error. The info button has its own name and opens on focus.
|
|
185
196
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,KAAK,EAAoD,MAAM,oBAAoB,CAAC;AAK7F,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACvF,mGAAmG;IACnG,WAAW,EAAE,MAAM,CAAC;IACpB,+GAA+G;IAC/G,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACtB,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,KAAK,aAAa,GAAG,MAAM,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,iEAAiE;IACjE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,aAAa,GAAG,MAAM,GAAG;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,yCAAyC;IACzC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mIAAmI;IACnI,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oHAAoH;IACpH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,aAAa,GAAG,MAAM,GAAG;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,2FAA2F;IAC3F,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,wHAAwH;IACxH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mIAAmI;IACnI,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GACpD,CAAC,aAAa,GAAG,aAAa,GAAG,aAAa,GAAG,eAAe,CAAC,CAAC;AAEpE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG,aAAa,CAAC;AAS7E;;;;;;;;;GASG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,YAAgB,EAChB,WAAW,EACX,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,UAAU,EACV,YAAY,EACZ,MAAM,EACN,GAAG,KAAK,EACT,EAAE,oBAAoB,qBA4DtB;AA0FD,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC,GAAG;IAC9F,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,yBAAyB,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CACnF,CAAC;AAEF,KAAK,kBAAkB,GAAG,iBAAiB,GACzC,CACI;IACE,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAC/C,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,GACD;IACE,yDAAyD;IACzD,OAAO,EAAE,QAAQ,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,GACD;IACE,uFAAuF;IACvF,OAAO,EAAE,QAAQ,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAC;CACpB,CACJ,CAAC;AAEJ;;;;;;;;;GASG;AACH,iBAAS,aAAa,CAAC,EACrB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAwB,EACxB,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,YAAyB,EACzB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAiCpB;AAED,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,iBAAiB,GAAG,eAAe,GAAG;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,KAAK,iBAAiB,GAAG,eAAe,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"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"}
|
|
@@ -84,7 +84,8 @@ function SettingsField({ id, label, info, error, invalid = Boolean(error), disab
|
|
|
84
84
|
function SettingsRow({ id, label, info, error, disabled, kind, children, }) {
|
|
85
85
|
const invalid = Boolean(error);
|
|
86
86
|
const controlProps = controlPropsOf({ id, info, error, invalid, disabled });
|
|
87
|
-
|
|
87
|
+
const shown = kind === "value";
|
|
88
|
+
return (_jsx("div", { "data-slot": "settings-row", "data-invalid": invalid ? true : undefined, className: "contents", children: _jsxs(Field, { "aria-labelledby": shown ? `${id}-label` : undefined, "data-invalid": invalid ? true : undefined, "data-disabled": disabled ? true : undefined, orientation: "horizontal", className: "flex-wrap has-[>[data-slot=field-content]]:items-center", children: [_jsxs(FieldContent, { className: "flex-auto", children: [shown ? (_jsx("span", { id: `${id}-label`, className: "text-xs font-medium text-foreground", children: label })) : (_jsx(SettingsFieldLabel, { id: id, label: label, info: info, beside: true })), _jsx(SettingsFieldErrors, { id: id, error: error })] }), _jsx("div", { "data-slot": "settings-row-control", "data-kind": kind, className: "flex items-center gap-2 data-[kind=value]:text-sm data-[kind=control]:w-64 data-[kind=control]:max-w-full data-[kind=select]:w-48 data-[kind=select]:max-w-full", children: children({ controlProps }) })] }) }));
|
|
88
89
|
}
|
|
89
90
|
/**
|
|
90
91
|
* Several switches and selects in one card: each row its label on the left and its control on the right.
|
|
@@ -92,12 +93,14 @@ function SettingsRow({ id, label, info, error, disabled, kind, children, }) {
|
|
|
92
93
|
* @family Inputs
|
|
93
94
|
* @when A card of switches and selects that the card's one description covers: a project's Git switches, a team's notification channels, a set of defaults, how long a computer stays awake beside whether the window goes to the tray.
|
|
94
95
|
* @instead One setting is a SettingsField. A text box is a field of its own card.
|
|
95
|
-
* @behaviour A row with `options` is a select, a row with `checked` a switch,
|
|
96
|
+
* @behaviour A row with `options` is a select, a row with `checked` a switch, a row with `control` draws a control whose usage page puts it in a row, such as ThemeModeSwitcher, and a row with `shows` is a fact the card shows and nobody changes there, such as the app's version, its value as text where a control would stand; a card may hold any of them together, as Vercel's Root Directory card holds its switches; `stateLabels` is required once any row is a switch. Required on every row that takes a value: the label and its `info` (an (i) with its sentence in a tooltip and on the control); a `shows` row has its label alone. No help line sits under a row. A switch row shows its state word beside the switch (`stateLabels`) and is controlled, so the word always follows the switch. Rows stand 16 px apart; below 28rem a row stacks its control under its label. "Pair with a form footer only when the setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) Ours: a switch is a draft the card's Save applies.
|
|
96
97
|
* @words "Title Case noun phrase, 1–4 words, naming what is true when ON: `Password Protection`, not `Enable Password Protection`." (https://vercel.com/geist/toggle) Ours: sentence case, a noun for what it controls ("Pull request comments"), the same for a switch as for a select. "Render an optional one-sentence description as a sibling under the label that explains ON only. Don’t describe OFF; it’s the negation." (https://vercel.com/geist/toggle) Ours: that sentence is `info.text`. "Options are Title Case when short and match canonical branding (`Next.js`, not `NextJS`); keep the same register across the list." (https://vercel.com/geist/select) Ours: a select's options are sentence case.
|
|
97
98
|
* @access Each row's control is named by the row's label and described by its info and its error. The info button has its own name and opens on focus.
|
|
98
99
|
*/
|
|
99
100
|
function SettingsRows({ rows, stateLabels }) {
|
|
100
101
|
return (_jsx("div", { "data-slot": "settings-rows", className: "flex flex-col gap-4", children: rows.map((row) => {
|
|
102
|
+
if (row.shows !== undefined)
|
|
103
|
+
return valueRow(row);
|
|
101
104
|
if (row.control !== undefined)
|
|
102
105
|
return controlRow(row);
|
|
103
106
|
return row.options === undefined ? switchRow(row, stateLabels) : selectRow(row);
|
|
@@ -106,6 +109,9 @@ function SettingsRows({ rows, stateLabels }) {
|
|
|
106
109
|
function switchRow(row, stateLabels) {
|
|
107
110
|
return (_jsx(SettingsRow, { kind: "switch", ...row, children: ({ controlProps }) => (_jsxs(_Fragment, { children: [_jsx(Switch, { ...controlProps, checked: row.checked, name: row.name, onCheckedChange: row.onCheckedChange, size: "md" }), _jsx("span", { className: "text-sm", children: row.checked ? stateLabels?.on : stateLabels?.off })] })) }, row.id));
|
|
108
111
|
}
|
|
112
|
+
function valueRow(row) {
|
|
113
|
+
return (_jsx(SettingsRow, { kind: "value", ...row, children: () => row.shows }, row.id));
|
|
114
|
+
}
|
|
109
115
|
function controlRow(row) {
|
|
110
116
|
return (_jsx(SettingsRow, { kind: "control", ...row, children: row.control }, row.id));
|
|
111
117
|
}
|
|
@@ -13,7 +13,7 @@ const TONE = {
|
|
|
13
13
|
edge: "text-warning-soft-foreground",
|
|
14
14
|
},
|
|
15
15
|
danger: { name: "red", shape: "square", ink: "text-destructive" },
|
|
16
|
-
info: { name: "blue", shape: "diamond", ink: "text-info" },
|
|
16
|
+
info: { name: "blue", shape: "diamond", ink: "text-info-soft-foreground" },
|
|
17
17
|
neutral: { name: "gray", shape: "ring", ink: "text-muted-foreground" },
|
|
18
18
|
};
|
|
19
19
|
const SIZE = {
|
|
@@ -5,6 +5,7 @@ export declare const tableCompactLayouts: {
|
|
|
5
5
|
readonly track: "hidden @xl/table:table-column";
|
|
6
6
|
readonly row: "@max-xl/table:[&>td]:border-b-0 @max-xl/table:[&>td]:after:hidden @max-xl/table:h-auto! @max-xl/table:[&>td]:pb-1!";
|
|
7
7
|
readonly details: "@xl/table:hidden";
|
|
8
|
+
readonly wideOnly: "hidden @xl/table:contents";
|
|
8
9
|
readonly table: "@max-xl/table:table-auto @max-xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-xl/table:[&_td]:whitespace-normal @max-xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
9
10
|
};
|
|
10
11
|
readonly standard: {
|
|
@@ -13,6 +14,7 @@ export declare const tableCompactLayouts: {
|
|
|
13
14
|
readonly track: "hidden @3xl/table:table-column";
|
|
14
15
|
readonly row: "@max-3xl/table:[&>td]:border-b-0 @max-3xl/table:[&>td]:after:hidden @max-3xl/table:h-auto! @max-3xl/table:[&>td]:pb-1!";
|
|
15
16
|
readonly details: "@3xl/table:hidden";
|
|
17
|
+
readonly wideOnly: "hidden @3xl/table:contents";
|
|
16
18
|
readonly table: "@max-3xl/table:table-auto @max-3xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-3xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-3xl/table:[&_td]:whitespace-normal @max-3xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
17
19
|
};
|
|
18
20
|
readonly wide: {
|
|
@@ -21,6 +23,7 @@ export declare const tableCompactLayouts: {
|
|
|
21
23
|
readonly track: "hidden @5xl/table:table-column";
|
|
22
24
|
readonly row: "@max-5xl/table:[&>td]:border-b-0 @max-5xl/table:[&>td]:after:hidden @max-5xl/table:h-auto! @max-5xl/table:[&>td]:pb-1!";
|
|
23
25
|
readonly details: "@5xl/table:hidden";
|
|
26
|
+
readonly wideOnly: "hidden @5xl/table:contents";
|
|
24
27
|
readonly table: "@max-5xl/table:table-auto @max-5xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-5xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-5xl/table:[&_td]:whitespace-normal @max-5xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
25
28
|
};
|
|
26
29
|
readonly roomy: {
|
|
@@ -29,6 +32,7 @@ export declare const tableCompactLayouts: {
|
|
|
29
32
|
readonly track: "hidden @min-[68rem]/table:table-column";
|
|
30
33
|
readonly row: "@max-[68rem]/table:[&>td]:border-b-0 @max-[68rem]/table:[&>td]:after:hidden @max-[68rem]/table:h-auto! @max-[68rem]/table:[&>td]:pb-1!";
|
|
31
34
|
readonly details: "@min-[68rem]/table:hidden";
|
|
35
|
+
readonly wideOnly: "hidden @min-[68rem]/table:contents";
|
|
32
36
|
readonly table: "@max-[68rem]/table:table-auto @max-[68rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-[68rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-[68rem]/table:[&_td]:whitespace-normal @max-[68rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
33
37
|
};
|
|
34
38
|
readonly spacious: {
|
|
@@ -37,6 +41,7 @@ export declare const tableCompactLayouts: {
|
|
|
37
41
|
readonly track: "hidden @6xl/table:table-column";
|
|
38
42
|
readonly row: "@max-6xl/table:[&>td]:border-b-0 @max-6xl/table:[&>td]:after:hidden @max-6xl/table:h-auto! @max-6xl/table:[&>td]:pb-1!";
|
|
39
43
|
readonly details: "@6xl/table:hidden";
|
|
44
|
+
readonly wideOnly: "hidden @6xl/table:contents";
|
|
40
45
|
readonly table: "@max-6xl/table:table-auto @max-6xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-6xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-6xl/table:[&_td]:whitespace-normal @max-6xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
41
46
|
};
|
|
42
47
|
readonly broad: {
|
|
@@ -45,6 +50,7 @@ export declare const tableCompactLayouts: {
|
|
|
45
50
|
readonly track: "hidden @7xl/table:table-column";
|
|
46
51
|
readonly row: "@max-7xl/table:[&>td]:border-b-0 @max-7xl/table:[&>td]:after:hidden @max-7xl/table:h-auto! @max-7xl/table:[&>td]:pb-1!";
|
|
47
52
|
readonly details: "@7xl/table:hidden";
|
|
53
|
+
readonly wideOnly: "hidden @7xl/table:contents";
|
|
48
54
|
readonly table: "@max-7xl/table:table-auto @max-7xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-7xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-7xl/table:[&_td]:whitespace-normal @max-7xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
49
55
|
};
|
|
50
56
|
readonly vast: {
|
|
@@ -53,6 +59,7 @@ export declare const tableCompactLayouts: {
|
|
|
53
59
|
readonly track: "hidden @min-[96rem]/table:table-column";
|
|
54
60
|
readonly row: "@max-[96rem]/table:[&>td]:border-b-0 @max-[96rem]/table:[&>td]:after:hidden @max-[96rem]/table:h-auto! @max-[96rem]/table:[&>td]:pb-1!";
|
|
55
61
|
readonly details: "@min-[96rem]/table:hidden";
|
|
62
|
+
readonly wideOnly: "hidden @min-[96rem]/table:contents";
|
|
56
63
|
readonly table: "@max-[96rem]/table:table-auto @max-[96rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-[96rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-[96rem]/table:[&_td]:whitespace-normal @max-[96rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px";
|
|
57
64
|
};
|
|
58
65
|
readonly always: {
|
|
@@ -61,6 +68,7 @@ export declare const tableCompactLayouts: {
|
|
|
61
68
|
readonly track: "hidden";
|
|
62
69
|
readonly row: "[&>td]:border-b-0 [&>td]:after:hidden h-auto! [&>td]:pb-1!";
|
|
63
70
|
readonly details: "";
|
|
71
|
+
readonly wideOnly: "hidden";
|
|
64
72
|
readonly table: "table-auto [&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal [&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words [&_td]:whitespace-normal [&_th:not(:first-child):not([data-identity])]:w-px";
|
|
65
73
|
};
|
|
66
74
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-layouts.d.ts","sourceRoot":"","sources":["../../src/components/table-layouts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB
|
|
1
|
+
{"version":3,"file":"table-layouts.d.ts","sourceRoot":"","sources":["../../src/components/table-layouts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFtB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAelE;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,kBAAkB,CAG3F"}
|
|
@@ -5,6 +5,7 @@ export const tableCompactLayouts = {
|
|
|
5
5
|
track: "hidden @xl/table:table-column",
|
|
6
6
|
row: "@max-xl/table:[&>td]:border-b-0 @max-xl/table:[&>td]:after:hidden @max-xl/table:h-auto! @max-xl/table:[&>td]:pb-1!",
|
|
7
7
|
details: "@xl/table:hidden",
|
|
8
|
+
wideOnly: "hidden @xl/table:contents",
|
|
8
9
|
table: "@max-xl/table:table-auto @max-xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-xl/table:[&_td]:whitespace-normal @max-xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
9
10
|
},
|
|
10
11
|
standard: {
|
|
@@ -13,6 +14,7 @@ export const tableCompactLayouts = {
|
|
|
13
14
|
track: "hidden @3xl/table:table-column",
|
|
14
15
|
row: "@max-3xl/table:[&>td]:border-b-0 @max-3xl/table:[&>td]:after:hidden @max-3xl/table:h-auto! @max-3xl/table:[&>td]:pb-1!",
|
|
15
16
|
details: "@3xl/table:hidden",
|
|
17
|
+
wideOnly: "hidden @3xl/table:contents",
|
|
16
18
|
table: "@max-3xl/table:table-auto @max-3xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-3xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-3xl/table:[&_td]:whitespace-normal @max-3xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
17
19
|
},
|
|
18
20
|
wide: {
|
|
@@ -21,6 +23,7 @@ export const tableCompactLayouts = {
|
|
|
21
23
|
track: "hidden @5xl/table:table-column",
|
|
22
24
|
row: "@max-5xl/table:[&>td]:border-b-0 @max-5xl/table:[&>td]:after:hidden @max-5xl/table:h-auto! @max-5xl/table:[&>td]:pb-1!",
|
|
23
25
|
details: "@5xl/table:hidden",
|
|
26
|
+
wideOnly: "hidden @5xl/table:contents",
|
|
24
27
|
table: "@max-5xl/table:table-auto @max-5xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-5xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-5xl/table:[&_td]:whitespace-normal @max-5xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
25
28
|
},
|
|
26
29
|
roomy: {
|
|
@@ -29,6 +32,7 @@ export const tableCompactLayouts = {
|
|
|
29
32
|
track: "hidden @min-[68rem]/table:table-column",
|
|
30
33
|
row: "@max-[68rem]/table:[&>td]:border-b-0 @max-[68rem]/table:[&>td]:after:hidden @max-[68rem]/table:h-auto! @max-[68rem]/table:[&>td]:pb-1!",
|
|
31
34
|
details: "@min-[68rem]/table:hidden",
|
|
35
|
+
wideOnly: "hidden @min-[68rem]/table:contents",
|
|
32
36
|
table: "@max-[68rem]/table:table-auto @max-[68rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-[68rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-[68rem]/table:[&_td]:whitespace-normal @max-[68rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
33
37
|
},
|
|
34
38
|
spacious: {
|
|
@@ -37,6 +41,7 @@ export const tableCompactLayouts = {
|
|
|
37
41
|
track: "hidden @6xl/table:table-column",
|
|
38
42
|
row: "@max-6xl/table:[&>td]:border-b-0 @max-6xl/table:[&>td]:after:hidden @max-6xl/table:h-auto! @max-6xl/table:[&>td]:pb-1!",
|
|
39
43
|
details: "@6xl/table:hidden",
|
|
44
|
+
wideOnly: "hidden @6xl/table:contents",
|
|
40
45
|
table: "@max-6xl/table:table-auto @max-6xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-6xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-6xl/table:[&_td]:whitespace-normal @max-6xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
41
46
|
},
|
|
42
47
|
broad: {
|
|
@@ -45,6 +50,7 @@ export const tableCompactLayouts = {
|
|
|
45
50
|
track: "hidden @7xl/table:table-column",
|
|
46
51
|
row: "@max-7xl/table:[&>td]:border-b-0 @max-7xl/table:[&>td]:after:hidden @max-7xl/table:h-auto! @max-7xl/table:[&>td]:pb-1!",
|
|
47
52
|
details: "@7xl/table:hidden",
|
|
53
|
+
wideOnly: "hidden @7xl/table:contents",
|
|
48
54
|
table: "@max-7xl/table:table-auto @max-7xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-7xl/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-7xl/table:[&_td]:whitespace-normal @max-7xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
49
55
|
},
|
|
50
56
|
vast: {
|
|
@@ -53,6 +59,7 @@ export const tableCompactLayouts = {
|
|
|
53
59
|
track: "hidden @min-[96rem]/table:table-column",
|
|
54
60
|
row: "@max-[96rem]/table:[&>td]:border-b-0 @max-[96rem]/table:[&>td]:after:hidden @max-[96rem]/table:h-auto! @max-[96rem]/table:[&>td]:pb-1!",
|
|
55
61
|
details: "@min-[96rem]/table:hidden",
|
|
62
|
+
wideOnly: "hidden @min-[96rem]/table:contents",
|
|
56
63
|
table: "@max-[96rem]/table:table-auto @max-[96rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal @max-[96rem]/table:[&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words @max-[96rem]/table:[&_td]:whitespace-normal @max-[96rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px",
|
|
57
64
|
},
|
|
58
65
|
always: {
|
|
@@ -61,6 +68,7 @@ export const tableCompactLayouts = {
|
|
|
61
68
|
track: "hidden",
|
|
62
69
|
row: "[&>td]:border-b-0 [&>td]:after:hidden h-auto! [&>td]:pb-1!",
|
|
63
70
|
details: "",
|
|
71
|
+
wideOnly: "hidden",
|
|
64
72
|
table: "table-auto [&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:whitespace-normal [&_[data-slot=record-identity-detail]:has([data-slot=table-detail-line])]:break-words [&_td]:whitespace-normal [&_th:not(:first-child):not([data-identity])]:w-px",
|
|
65
73
|
},
|
|
66
74
|
};
|
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
import { type PageCommand } from "./page-actions.js";
|
|
2
2
|
export type UpdateCardProps = {
|
|
3
3
|
state: "available";
|
|
4
|
-
/** "
|
|
4
|
+
/** The version on offer and that it is ready: "Nadia 0.42.0 is ready". */
|
|
5
5
|
title: string;
|
|
6
|
-
/**
|
|
7
|
-
version: string;
|
|
8
|
-
/** "Update and restart", with its pending word while it runs. */
|
|
6
|
+
/** "Update", with its pending word while it runs. */
|
|
9
7
|
action: PageCommand;
|
|
10
8
|
/** The rail is too narrow for words: one icon button. */
|
|
11
9
|
narrow?: boolean;
|
|
12
10
|
} | {
|
|
13
11
|
state: "updated";
|
|
14
|
-
/**
|
|
12
|
+
/** The version now running: "Updated to Nadia 0.42.0". */
|
|
15
13
|
title: string;
|
|
16
|
-
/**
|
|
17
|
-
version: string;
|
|
18
|
-
/** Closes the card: its label names the ghost close. */
|
|
14
|
+
/** Closes the row: its label names the ghost close. */
|
|
19
15
|
dismiss: {
|
|
20
16
|
label: string;
|
|
21
17
|
onClick: () => void;
|
|
@@ -28,9 +24,9 @@ export type UpdateCardProps = {
|
|
|
28
24
|
* @family Feedback
|
|
29
25
|
* @when Nadia's and Alveare's sidebar foot, only while an update is on offer or has just been installed.
|
|
30
26
|
* @instead A failed update or a download that needs the person is a NoticeBanner; the Portal's way to get the app is its Downloads row.
|
|
31
|
-
* @behaviour
|
|
32
|
-
* @words
|
|
33
|
-
* @access The
|
|
27
|
+
* @behaviour One outlined row of the column's width, shaped as the sidebar's Find: available, a download icon in the primary colour, the line, and a small primary command at the end that keeps its place and says its pending word while it runs; updated, a check, the line and a ghost close. A line too long for the column is cut with an ellipsis. Narrow, the row is one icon button whose tooltip shows the line. Nothing else in the window offers the update: no toast, no banner.
|
|
28
|
+
* @words One line names the product, its number and what happened ("Nadia 0.42.0 is ready", "Updated to Nadia 0.42.0"); the command is one verb ("Update").
|
|
29
|
+
* @access The row is a region named by its line. The narrow button is named by its command and the line ("Update: Nadia 0.42.0 is ready"), and the close carries its label; a running command is aria-busy.
|
|
34
30
|
*/
|
|
35
31
|
export declare function UpdateCard(props: UpdateCardProps): import("react").JSX.Element;
|
|
36
32
|
//# sourceMappingURL=update-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"update-card.d.ts","sourceRoot":"","sources":["../../src/components/update-card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"update-card.d.ts","sourceRoot":"","sources":["../../src/components/update-card.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGhF,MAAM,MAAM,eAAe,GACvB;IACE,KAAK,EAAE,WAAW,CAAC;IACnB,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,MAAM,EAAE,WAAW,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GACD;IACE,KAAK,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEN;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA+BhD"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { ArrowDownToLine, CircleCheck, X } from "lucide-react";
|
|
4
4
|
import { Button } from "./button.js";
|
|
5
|
-
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "./card.js";
|
|
6
5
|
import { PageCommandButton } from "./page-actions.js";
|
|
7
6
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
|
|
8
7
|
/**
|
|
@@ -11,18 +10,18 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
|
|
|
11
10
|
* @family Feedback
|
|
12
11
|
* @when Nadia's and Alveare's sidebar foot, only while an update is on offer or has just been installed.
|
|
13
12
|
* @instead A failed update or a download that needs the person is a NoticeBanner; the Portal's way to get the app is its Downloads row.
|
|
14
|
-
* @behaviour
|
|
15
|
-
* @words
|
|
16
|
-
* @access The
|
|
13
|
+
* @behaviour One outlined row of the column's width, shaped as the sidebar's Find: available, a download icon in the primary colour, the line, and a small primary command at the end that keeps its place and says its pending word while it runs; updated, a check, the line and a ghost close. A line too long for the column is cut with an ellipsis. Narrow, the row is one icon button whose tooltip shows the line. Nothing else in the window offers the update: no toast, no banner.
|
|
14
|
+
* @words One line names the product, its number and what happened ("Nadia 0.42.0 is ready", "Updated to Nadia 0.42.0"); the command is one verb ("Update").
|
|
15
|
+
* @access The row is a region named by its line. The narrow button is named by its command and the line ("Update: Nadia 0.42.0 is ready"), and the close carries its label; a running command is aria-busy.
|
|
17
16
|
*/
|
|
18
17
|
export function UpdateCard(props) {
|
|
19
18
|
if (props.narrow)
|
|
20
19
|
return _jsx(NarrowUpdate, { ...props });
|
|
21
|
-
return (_jsxs(
|
|
20
|
+
return (_jsxs("section", { "aria-label": props.title, className: "flex h-control-height min-w-0 items-center gap-2 rounded-sm border border-sidebar-border bg-background py-2 pr-1 pl-2 text-sm text-sidebar-foreground [&>svg]:size-5 [&>svg]:shrink-0", "data-slot": "update-card", "data-state": props.state, children: [props.state === "available" ? (_jsx(ArrowDownToLine, { "aria-hidden": "true", className: "text-primary" })) : (_jsx(CircleCheck, { "aria-hidden": "true", className: "text-muted-foreground" })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: props.title }), props.state === "available" ? (_jsx(PageCommandButton, { command: props.action, size: "xs", variant: "default" })) : (_jsx(Button, { "aria-label": props.dismiss.label, onClick: props.dismiss.onClick, size: "icon-xs", type: "button", variant: "ghost", children: _jsx(X, { "aria-hidden": "true" }) }))] }));
|
|
22
21
|
}
|
|
23
22
|
function NarrowUpdate(props) {
|
|
24
|
-
const button = props.state === "available" ? (_jsx(Button, { "aria-label": `${props.action.pending ? (props.action.pendingLabel ?? props.action.label) : props.action.label}: ${props.
|
|
23
|
+
const button = props.state === "available" ? (_jsx(Button, { "aria-label": `${props.action.pending ? (props.action.pendingLabel ?? props.action.label) : props.action.label}: ${props.title}`, disabled: props.action.disabled, loading: props.action.pending, size: "icon", variant: "ghost", ...(props.action.render
|
|
25
24
|
? { render: props.action.render, nativeButton: false }
|
|
26
25
|
: { onClick: props.action.onClick, type: "button" }), children: _jsx(ArrowDownToLine, { "aria-hidden": "true" }) })) : (_jsx(Button, { "aria-label": `${props.dismiss.label}: ${props.title}`, onClick: props.dismiss.onClick, size: "icon", type: "button", variant: "ghost", children: _jsx(CircleCheck, { "aria-hidden": "true" }) }));
|
|
27
|
-
return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: button }), _jsx(TooltipContent, { side: "right", children:
|
|
26
|
+
return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: button }), _jsx(TooltipContent, { side: "right", children: props.title })] }));
|
|
28
27
|
}
|
|
@@ -28,13 +28,31 @@ export declare function TableCompactFacts(): React.JSX.Element | null;
|
|
|
28
28
|
/** The compact facts that stand beside the name of the row this stands in, which no ellipsis cuts; nothing outside such a row or on a card wide enough for the columns. */
|
|
29
29
|
export declare function TableCompactNameFacts(): React.JSX.Element | null;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
31
|
+
* The layout the table last measured its card at: `both` until it has measured, `columns` for a
|
|
32
|
+
* card wide enough for the row's columns, `details` for a compact one.
|
|
33
33
|
*/
|
|
34
|
-
export
|
|
35
|
-
|
|
34
|
+
export type ShownLayout = "both" | "columns" | "details";
|
|
35
|
+
type TableCompactLayoutValue = {
|
|
36
|
+
layout: TableCompactLayout;
|
|
37
|
+
shown: ShownLayout;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* The layout the entity rows around it fold by. Until the table has measured its card, a row draws
|
|
41
|
+
* what goes beside its name on a wide card and under it on a compact one both, and this layout's
|
|
42
|
+
* container query shows the one that fits, so the server's first draw is already the browser's and
|
|
43
|
+
* nothing moves when it hydrates. Once measured, only the placement that fits stands, so the page
|
|
44
|
+
* holds one copy of each command, and a menu opened on a compact card goes when the card widens.
|
|
45
|
+
*/
|
|
46
|
+
export declare function TableCompactLayoutOf({ layout, shown, children, }: TableCompactLayoutValue & {
|
|
36
47
|
children: React.ReactNode;
|
|
37
48
|
}): React.JSX.Element;
|
|
38
|
-
|
|
49
|
+
/** What stands only on a card wide enough for the row's columns. */
|
|
50
|
+
export declare function WideOnly({ children }: {
|
|
51
|
+
children: React.ReactNode;
|
|
52
|
+
}): React.JSX.Element | null;
|
|
53
|
+
/** What stands only once the row is compact. */
|
|
54
|
+
export declare function CompactOnly({ children }: {
|
|
55
|
+
children: React.ReactNode;
|
|
56
|
+
}): React.JSX.Element | null;
|
|
39
57
|
export {};
|
|
40
58
|
//# sourceMappingURL=table-compact-line.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,eAAe,8EACiD,CAAC;AAE9E,eAAO,MAAM,eAAe,+EACkD,CAAC;AAE/E,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAahC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;
|
|
1
|
+
{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,eAAe,8EACiD,CAAC;AAE9E,eAAO,MAAM,eAAe,+EACkD,CAAC;AAE/E,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAahC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,KAAK,uBAAuB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,WAAW,CAAA;CAAE,CAAC;AAMlF;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,KAAK,EACL,QAAQ,GACT,EAAE,uBAAuB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAGzD;AAQD,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAQnE;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAQtE"}
|
|
@@ -33,14 +33,35 @@ export function TableCompactNameFacts() {
|
|
|
33
33
|
return null;
|
|
34
34
|
return (_jsx("span", { className: cn("flex shrink-0 items-center gap-2", tableCompactLayouts[line.layout].details), "data-slot": "table-name-facts", children: facts.map((fact) => (_jsxs("span", { className: "flex items-center", children: [_jsxs("span", { className: "sr-only", children: [fact.label, ": "] }), fact.value] }, fact.id))) }));
|
|
35
35
|
}
|
|
36
|
-
const
|
|
36
|
+
const TableCompactLayoutContext = React.createContext(undefined);
|
|
37
37
|
/**
|
|
38
|
-
*
|
|
39
|
-
*
|
|
38
|
+
* The layout the entity rows around it fold by. Until the table has measured its card, a row draws
|
|
39
|
+
* what goes beside its name on a wide card and under it on a compact one both, and this layout's
|
|
40
|
+
* container query shows the one that fits, so the server's first draw is already the browser's and
|
|
41
|
+
* nothing moves when it hydrates. Once measured, only the placement that fits stands, so the page
|
|
42
|
+
* holds one copy of each command, and a menu opened on a compact card goes when the card widens.
|
|
40
43
|
*/
|
|
41
|
-
export function
|
|
42
|
-
|
|
44
|
+
export function TableCompactLayoutOf({ layout, shown, children, }) {
|
|
45
|
+
const value = React.useMemo(() => ({ layout, shown }), [layout, shown]);
|
|
46
|
+
return _jsx(TableCompactLayoutContext, { value: value, children: children });
|
|
43
47
|
}
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
function useCompactLayout() {
|
|
49
|
+
const value = React.useContext(TableCompactLayoutContext);
|
|
50
|
+
if (!value)
|
|
51
|
+
throw new Error("A row's placements stand only inside a table's compact layout");
|
|
52
|
+
return value;
|
|
53
|
+
}
|
|
54
|
+
/** What stands only on a card wide enough for the row's columns. */
|
|
55
|
+
export function WideOnly({ children }) {
|
|
56
|
+
const { layout, shown } = useCompactLayout();
|
|
57
|
+
if (shown === "details")
|
|
58
|
+
return null;
|
|
59
|
+
return (_jsx("span", { className: tableCompactLayouts[layout].wideOnly, "data-slot": "wide-only", children: children }));
|
|
60
|
+
}
|
|
61
|
+
/** What stands only once the row is compact. */
|
|
62
|
+
export function CompactOnly({ children }) {
|
|
63
|
+
const { layout, shown } = useCompactLayout();
|
|
64
|
+
if (shown === "columns")
|
|
65
|
+
return null;
|
|
66
|
+
return (_jsx("span", { className: cn("contents", tableCompactLayouts[layout].details), "data-slot": "compact-only", children: children }));
|
|
46
67
|
}
|
|
@@ -201,7 +201,7 @@ export const DATA = {
|
|
|
201
201
|
},
|
|
202
202
|
{ id: "send", label: "Step 03", title: "Send the quote", progress: "upcoming" },
|
|
203
203
|
] })),
|
|
204
|
-
SettingsFactsSection: () => (_jsx("div", { className: "max-w-lg", children: _jsx(SettingsFactsSection, {
|
|
204
|
+
SettingsFactsSection: () => (_jsx("div", { className: "max-w-lg", children: _jsx(SettingsFactsSection, { command: _jsx(Button, { variant: "outline", children: "Edit" }), description: "The legal details on every invoice.", facts: [
|
|
205
205
|
{ label: "Legal name", value: "Acme S.r.l." },
|
|
206
206
|
{ label: "VAT number", value: _jsx("span", { className: "font-mono", children: "IT01234567890" }) },
|
|
207
207
|
{ label: "PEC", value: null },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/feedback.tsx"],"names":[],"mappings":"AA4CA,iBAAS,kBAAkB,gCAoE1B;AAED,iBAAS,oBAAoB,gCAkB5B;AAED,iBAAS,eAAe,gCAyBvB;AAED,iBAAS,kBAAkB,
|
|
1
|
+
{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/feedback.tsx"],"names":[],"mappings":"AA4CA,iBAAS,kBAAkB,gCAoE1B;AAED,iBAAS,oBAAoB,gCAkB5B;AAED,iBAAS,eAAe,gCAyBvB;AAED,iBAAS,kBAAkB,gCA2B1B;AAED,iBAAS,sBAAsB,gCAwB9B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;CAyLM,CAAC"}
|
|
@@ -45,7 +45,7 @@ function ToasterSpecimen() {
|
|
|
45
45
|
}
|
|
46
46
|
function UpdateCardSpecimen() {
|
|
47
47
|
const [updated, setUpdated] = useState(false);
|
|
48
|
-
return (_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-64", children: updated ? (_jsx(UpdateCard, { dismiss: { label: "Dismiss", onClick: () => setUpdated(false) }, state: "updated", title: "
|
|
48
|
+
return (_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-64", children: updated ? (_jsx(UpdateCard, { dismiss: { label: "Dismiss", onClick: () => setUpdated(false) }, state: "updated", title: "Updated to Nadia 12.2.0" })) : (_jsx(UpdateCard, { action: { label: "Update", onClick: () => setUpdated(true) }, state: "available", title: "Nadia 12.2.0 is ready" })) }), _jsx(UpdateCard, { action: { label: "Update", onClick: nothing }, narrow: true, state: "available", title: "Nadia 12.2.0 is ready" })] }));
|
|
49
49
|
}
|
|
50
50
|
function SkeletonRegionSpecimen() {
|
|
51
51
|
const [busy, setBusy] = useState(true);
|
|
@@ -428,7 +428,7 @@ export const USAGE = [
|
|
|
428
428
|
summary: "Several switches and selects in one card: each row its label on the left and its control on the right.",
|
|
429
429
|
when: "A card of switches and selects that the card's one description covers: a project's Git switches, a team's notification channels, a set of defaults, how long a computer stays awake beside whether the window goes to the tray.",
|
|
430
430
|
instead: "One setting is a SettingsField. A text box is a field of its own card.",
|
|
431
|
-
behaviour: "A row with `options` is a select, a row with `checked` a switch,
|
|
431
|
+
behaviour: "A row with `options` is a select, a row with `checked` a switch, a row with `control` draws a control whose usage page puts it in a row, such as ThemeModeSwitcher, and a row with `shows` is a fact the card shows and nobody changes there, such as the app's version, its value as text where a control would stand; a card may hold any of them together, as Vercel's Root Directory card holds its switches; `stateLabels` is required once any row is a switch. Required on every row that takes a value: the label and its `info` (an (i) with its sentence in a tooltip and on the control); a `shows` row has its label alone. No help line sits under a row. A switch row shows its state word beside the switch (`stateLabels`) and is controlled, so the word always follows the switch. Rows stand 16 px apart; below 28rem a row stacks its control under its label. \"Pair with a form footer only when the setting needs an explicit `Save` step.\" (https://vercel.com/geist/toggle) Ours: a switch is a draft the card's Save applies.",
|
|
432
432
|
words: '"Title Case noun phrase, 1–4 words, naming what is true when ON: `Password Protection`, not `Enable Password Protection`." (https://vercel.com/geist/toggle) Ours: sentence case, a noun for what it controls ("Pull request comments"), the same for a switch as for a select. "Render an optional one-sentence description as a sibling under the label that explains ON only. Don’t describe OFF; it’s the negation." (https://vercel.com/geist/toggle) Ours: that sentence is `info.text`. "Options are Title Case when short and match canonical branding (`Next.js`, not `NextJS`); keep the same register across the list." (https://vercel.com/geist/select) Ours: a select\'s options are sentence case.',
|
|
433
433
|
access: "Each row's control is named by the row's label and described by its info and its error. The info button has its own name and opens on focus.",
|
|
434
434
|
},
|
|
@@ -1184,10 +1184,10 @@ export const USAGE = [
|
|
|
1184
1184
|
name: "SettingsFactsSection",
|
|
1185
1185
|
module: "settings-facts",
|
|
1186
1186
|
family: "Data",
|
|
1187
|
-
summary: "Read-only facts about one object, framed as a card with a title, a line,
|
|
1188
|
-
when: "Read-only facts about one object: who it is, where it belongs, its identifiers. `SettingsFactsSection` frames them as a card
|
|
1187
|
+
summary: "Read-only facts about one object, framed as a card with a title, a line, the facts and a footer.",
|
|
1188
|
+
when: "Read-only facts about one object: who it is, where it belongs, its identifiers; and a status, a read-only card whose `action` is the one action that fixes it. `SettingsFactsSection` frames them as a card; `ObjectFacts` is the list alone.",
|
|
1189
1189
|
instead: "Facts a person changes are a `SettingsSection` with its own Save. One server-given value, an ID, is a `SettingsSection` with the value in a read-only mono `InputGroup` and its copy button, no Save. Facts compared across records are a table. A relation is its identity or a `Tag`, never its own card.",
|
|
1190
|
-
behaviour:
|
|
1190
|
+
behaviour: "\"Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`).\" (https://vercel.com/geist/description) Ours: required: the description and the footer's left line (`footerHint`), as on a `SettingsSection`. Two places take a control, each for one job: `command` at the title's right is a command on the facts, the Edit that opens their editor; `action` at the footer's right, beside its line, is the one action the card's state asks for, as a status card's fix (Update, Start) and every Vercel settings card's button stand there. Facts are plain pairs, the label above its value, in two equal columns from 640 px (`sm`) and one column below it. Every label stays when its value is missing, as *—*. A long value spans both columns. No fact gets a box of its own. In a side column, `presentation=\"summary\"` drops the card, the description and the footer line.",
|
|
1191
1191
|
words: '"Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description) Ours: labels are nouns in sentence case, no colon: *VAT number*. Identifiers in mono with a copy button, dates in the person\'s locale. The footer line says what the facts are for or links to the docs.',
|
|
1192
1192
|
access: '"Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t put interactive controls in the title slot." (https://vercel.com/geist/description) Ours: a `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus when an editor closes. A dash carries screen-reader text.',
|
|
1193
1193
|
},
|
|
@@ -1396,9 +1396,9 @@ export const USAGE = [
|
|
|
1396
1396
|
summary: "The update offer at the foot of a desktop app's sidebar, above the account.",
|
|
1397
1397
|
when: "Nadia's and Alveare's sidebar foot, only while an update is on offer or has just been installed.",
|
|
1398
1398
|
instead: "A failed update or a download that needs the person is a NoticeBanner; the Portal's way to get the app is its Downloads row.",
|
|
1399
|
-
behaviour: "
|
|
1400
|
-
words: '
|
|
1401
|
-
access: 'The
|
|
1399
|
+
behaviour: "One outlined row of the column's width, shaped as the sidebar's Find: available, a download icon in the primary colour, the line, and a small primary command at the end that keeps its place and says its pending word while it runs; updated, a check, the line and a ghost close. A line too long for the column is cut with an ellipsis. Narrow, the row is one icon button whose tooltip shows the line. Nothing else in the window offers the update: no toast, no banner.",
|
|
1400
|
+
words: 'One line names the product, its number and what happened ("Nadia 0.42.0 is ready", "Updated to Nadia 0.42.0"); the command is one verb ("Update").',
|
|
1401
|
+
access: 'The row is a region named by its line. The narrow button is named by its command and the line ("Update: Nadia 0.42.0 is ready"), and the close carries its label; a running command is aria-busy.',
|
|
1402
1402
|
},
|
|
1403
1403
|
{
|
|
1404
1404
|
name: "WaitingLine",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.1.169",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"imports": {
|
|
6
6
|
"#jsx": "./src/jsx/index.ts",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"@base-ui/react": "^1.9.0",
|
|
73
73
|
"@iconify-icons/logos": "^2.0.3",
|
|
74
74
|
"@iconify/react": "^6.0.2",
|
|
75
|
-
"@nadicodeai/design-system": "12.1.
|
|
75
|
+
"@nadicodeai/design-system": "12.1.169",
|
|
76
76
|
"@tanstack/react-table": "^9.3.1",
|
|
77
77
|
"@vgpu/wgsl": "0.6.0",
|
|
78
78
|
"class-variance-authority": "^0.7.1",
|