@nadicodeai/ui 12.1.172 → 12.1.173

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.
Files changed (44) hide show
  1. package/AGENTS.md +7 -5
  2. package/README.md +1 -2
  3. package/dist/components/chart-card.js +1 -1
  4. package/dist/components/kpi-card.d.ts.map +1 -1
  5. package/dist/components/kpi-card.js +3 -3
  6. package/dist/components/object-page.d.ts +6 -6
  7. package/dist/components/object-page.d.ts.map +1 -1
  8. package/dist/components/object-page.js +4 -5
  9. package/dist/components/object-workspace.d.ts +17 -9
  10. package/dist/components/object-workspace.d.ts.map +1 -1
  11. package/dist/components/object-workspace.js +7 -6
  12. package/dist/components/overview-page.d.ts +7 -2
  13. package/dist/components/overview-page.d.ts.map +1 -1
  14. package/dist/components/overview-page.js +4 -4
  15. package/dist/components/page-actions.d.ts +22 -0
  16. package/dist/components/page-actions.d.ts.map +1 -1
  17. package/dist/components/page-actions.js +16 -0
  18. package/dist/components/record-list.d.ts +4 -2
  19. package/dist/components/record-list.d.ts.map +1 -1
  20. package/dist/components/record-list.js +1 -1
  21. package/dist/components/settings-facts.d.ts +5 -4
  22. package/dist/components/settings-facts.d.ts.map +1 -1
  23. package/dist/components/settings-facts.js +5 -4
  24. package/dist/components/settings-section.d.ts +19 -8
  25. package/dist/components/settings-section.d.ts.map +1 -1
  26. package/dist/components/settings-section.js +4 -3
  27. package/dist/components/table-card.d.ts +9 -4
  28. package/dist/components/table-card.d.ts.map +1 -1
  29. package/dist/components/table-card.js +7 -5
  30. package/dist/components/text-link.d.ts +6 -6
  31. package/dist/components/text-link.js +6 -6
  32. package/dist/showcase/specimens/actions.d.ts +1 -0
  33. package/dist/showcase/specimens/actions.d.ts.map +1 -1
  34. package/dist/showcase/specimens/actions.js +5 -1
  35. package/dist/showcase/specimens/compositions.d.ts.map +1 -1
  36. package/dist/showcase/specimens/compositions.js +1 -1
  37. package/dist/showcase/specimens/data.js +1 -1
  38. package/dist/showcase/specimens/index.d.ts +1 -0
  39. package/dist/showcase/specimens/index.d.ts.map +1 -1
  40. package/dist/showcase/usage.generated.d.ts +1 -1
  41. package/dist/showcase/usage.generated.d.ts.map +1 -1
  42. package/dist/showcase/usage.generated.js +22 -11
  43. package/dist/styles/components.css +9 -0
  44. package/package.json +2 -2
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useId } from "react";
3
3
  import { FooterStrip } from "../internal/footer-strip.js";
4
4
  import { ObjectFacts } from "./object-workspace.js";
5
+ import { CardActionsRow } from "./page-actions.js";
5
6
  import { TableValue } from "./table-value.js";
6
7
  import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "./card.js";
7
8
  /**
@@ -16,7 +17,7 @@ import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle,
16
17
  * compared across records are a table. A relation is its identity or a `Tag`, never its own card.
17
18
  * @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
19
  * Ours: required: the description and the footer's left line (`footerHint`), as on a
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
+ * `SettingsSection`. Two places take a control, each for one job: `actions` at the header's end are the commands on the facts, the Edit that opens their editor, drawn as every card's header draws them (`CardActions`); `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
21
  * its value, in two equal columns from 640 px (`sm`) and one column below it. Every label stays when its value is missing,
21
22
  * as *—*. A long value
22
23
  * spans both columns. No fact gets a box of its own. In a side column, `presentation="summary"`
@@ -30,13 +31,13 @@ import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle,
30
31
  * 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
32
  * when an editor closes. A dash carries screen-reader text.
32
33
  */
33
- export function SettingsFactsSection({ action, command, presentation = "card", description, facts, footerHint, missingValueLabel, headingId, headingLevel = 2, title, surface = "resting", size = "default", ...props }) {
34
+ export function SettingsFactsSection({ actions, action, presentation = "card", description, facts, footerHint, missingValueLabel, headingId, headingLevel = 2, title, surface = "resting", size = "default", ...props }) {
34
35
  const termId = useId();
35
36
  const Heading = headingLevel === 3 ? "h3" : "h2";
36
37
  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 }), 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
+ 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 }), actions ? _jsx(CardActionsRow, { ...actions }) : null] }), 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
39
  }
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
+ 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, actions ? (_jsx(CardAction, { children: _jsx(CardActionsRow, { ...actions }) })) : null] }), _jsx(CardContent, { children: _jsx(ObjectFacts, { facts: facts.map((fact) => ({
40
41
  label: fact.label,
41
42
  block: fact.block,
42
43
  value: fact.value === null || fact.value === undefined || fact.value === "" ? (_jsx(TableValue, { missingLabel: missingValueLabel, value: null })) : (fact.value),
@@ -1,6 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { type SettingsSave } from "../internal/settings-save.js";
3
3
  import { Field } from "./field.js";
4
+ import { type CardActions } from "./page-actions.js";
4
5
  export type { SettingsSave, SettingsSaveFailure } from "../internal/settings-save.js";
5
6
  export type SettingsFieldControlProps = {
6
7
  id: string;
@@ -26,17 +27,26 @@ type SettingsSectionBase = Omit<React.ComponentProps<"section">, "title" | "chil
26
27
  type Titled = {
27
28
  /** The section's heading, on every card. */
28
29
  title: string;
30
+ /** The state of what the card sets, as a `StatusBadge` right after the title: "Verified", "Overridden". */
31
+ status?: React.ReactElement | undefined;
29
32
  children?: React.ReactNode;
30
33
  };
31
- type SavingSection = Titled & {
34
+ type HeaderEnd = {
35
+ /** The card's commands at its header's trailing edge, drawn as every card draws them: "Add hub". */
36
+ actions?: CardActions;
37
+ control?: never;
38
+ } | {
39
+ actions?: never;
40
+ /** The card's own value at its header's trailing edge instead, as Vercel's Team Avatar: an avatar's upload. */
41
+ control: React.ReactElement;
42
+ };
43
+ type SavingSection = Titled & HeaderEnd & {
32
44
  save: SettingsSave;
33
45
  footer?: never;
34
46
  footerHint?: never;
35
47
  tone?: never;
36
48
  lockedReason?: never;
37
49
  unlock?: never;
38
- /** A control on the section's own header: an avatar's upload. */
39
- actions?: React.ReactNode;
40
50
  };
41
51
  type FooterSection = Titled & {
42
52
  save?: never;
@@ -48,9 +58,7 @@ type FooterSection = Titled & {
48
58
  tone?: SettingsSectionTone;
49
59
  lockedReason?: never;
50
60
  unlock?: never;
51
- /** A button or a badge on the section's own header. */
52
- actions?: React.ReactNode;
53
- };
61
+ } & HeaderEnd;
54
62
  type LockedSection = Titled & {
55
63
  save?: never;
56
64
  footer?: never;
@@ -61,10 +69,13 @@ type LockedSection = Titled & {
61
69
  /** The way to get access: an Upgrade button, a Contact sales link. Left out when nothing the person does unlocks it. */
62
70
  unlock?: React.ReactNode;
63
71
  actions?: never;
72
+ control?: never;
64
73
  };
65
74
  type UntitledSection = {
66
75
  /** Left out only on a card with no control, whose description then names it. */
67
76
  title?: undefined;
77
+ status?: never;
78
+ control?: never;
68
79
  children?: undefined;
69
80
  save?: never;
70
81
  footer?: never;
@@ -83,11 +94,11 @@ export type SavingSettingsSectionProps = SettingsSectionBase & SavingSection;
83
94
  * @family Compositions
84
95
  * @when One setting a person changes on a SettingsPage or as a section of an ObjectPage: Personal details, Company identity, Notifications. A typed value takes `save`; a switch or a short reversible choice applies at once through its own control's change, with no Save. Also a plan-gated feature, a delete card, one read-only value (an ID in a read-only mono InputGroup with its copy button, no Save), and a paid quantity (its stepper field, the price as the description, a two-fact summary under it).
85
96
  * @instead Read-only facts of an object are a SettingsFactsSection; a table or a list of records is a TableCard; Theme and Language live in the account menu; a record's edit in a list is a RowEditForm.
86
- * @behaviour "Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: one setting per card, a single SettingsField with the description its only help, unless the card's description covers several settings: then they are its SettingsRows, switches and selects together. A typed value (a name, a URL, a server, a port, a key) gets its own card. A semantic subgroup of related controls inside a field, such as radios or checkboxes, is a `FieldSet` with a `FieldLegend`. Several settings in one card are declared by SettingsRows, never by classes at the call site. "Use Toggle for a single boolean setting where ON takes effect immediately, like `Password Protection` or `Auto-Cancel Builds`." (https://vercel.com/geist/toggle) "Pair with a form footer only when the setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) "Disable Toggle only when the action is impossible (missing plan, locked policy); pair with helper text or a `Tooltip` that names the resolver." (https://vercel.com/geist/toggle) Ours: a switch never applies on change; it is a row of the card, a draft until the footer's Save, as Vercel's settings cards are. A switch blocked from above is shown off and disabled, the footer saying why and never a tooltip. Required: the title and the description. The header's actions stand at the title's right; on a card narrower than 28 rem they keep the title's row and the description runs under both, as Vercel's cards read on a phone, and when the title's longest word would not fit beside them they move under the title, so they never cover it. The footer's left line (`footerHint`, `save.hint`) is optional and specific to the card, never a generic line repeated on every card: a limit, what a value is for, a plan it needs, a link; absent, it is nothing, and a card with neither a line nor a button has no footer. Ours: `save`: a typed value, one card with its own Save in the footer, always visible. The section owns the changed state: Save stays disabled until a field differs from what is saved and says `pendingLabel` while saving with Cancel beside it; a completed save calls `saved`, and the product raises one toast from its catalogue ("Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." https://vercel.com/geist/toast), and Save returns to disabled, with no saved state in the footer. Ours: the section never raises a toast itself. A failed save keeps every value and shows under its field, or above the footer when no field owns it. `tone` marks a state with a command (a failed payment, a trial ending): a 1px border and a footer tinted in the hue with its line in it, the line saying the condition in words; title, line, fields and buttons stay neutral, an outline secondary then a default primary. A button takes the hue of its command, not of the card: `destructive` (red) for a permanent loss (Delete), `warning` (amber) for a disruptive command that can be undone (Pause, Archive). A delete card is `tone="error"` with the object's summary as its body; an archive card is neutral with a `warning` button in the footer. "Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge." (https://vercel.com/geist/note) "One Note per concept." (https://vercel.com/geist/note) Ours: a message about the fields inside is a MessageNotice in the body, the card staying neutral. "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: `lockedReason` (Geist's disabled wall) is the reason, written as the footer's line, not in a tooltip; it keeps the fields in view, inert with muted text, under a not-allowed cursor, the title and line unchanged; `unlock` is the way to get access, left out when nothing the person does unlocks it. A locked section has no `save` and no header `actions`.
97
+ * @behaviour "Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: one setting per card, a single SettingsField with the description its only help, unless the card's description covers several settings: then they are its SettingsRows, switches and selects together. A typed value (a name, a URL, a server, a port, a key) gets its own card. A semantic subgroup of related controls inside a field, such as radios or checkboxes, is a `FieldSet` with a `FieldLegend`. Several settings in one card are declared by SettingsRows, never by classes at the call site. "Use Toggle for a single boolean setting where ON takes effect immediately, like `Password Protection` or `Auto-Cancel Builds`." (https://vercel.com/geist/toggle) "Pair with a form footer only when the setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) "Disable Toggle only when the action is impossible (missing plan, locked policy); pair with helper text or a `Tooltip` that names the resolver." (https://vercel.com/geist/toggle) Ours: a switch never applies on change; it is a row of the card, a draft until the footer's Save, as Vercel's settings cards are. A switch blocked from above is shown off and disabled, the footer saying why and never a tooltip. Required: the title and the description. A `status` stands right after the title, as Vercel's plan card puts "Active" after "Pro Plan". The header's `actions` are drawn as every card draws them (`CardActions`: the muted meta, up to two secondaries as outline buttons, the primary as the filled one, the three dots), a way to another page among them as an outline button named for it; a card whose value is itself shown there, as Vercel's Team Avatar, takes `control` instead. They stand at the title's right; on a card narrower than 28 rem they keep the title's row and the description runs under both, as Vercel's cards read on a phone, and when the title's longest word would not fit beside them they move under the title, so they never cover it. The footer's left line (`footerHint`, `save.hint`) is optional and specific to the card, never a generic line repeated on every card: a limit, what a value is for, a plan it needs, a link; absent, it is nothing, and a card with neither a line nor a button has no footer. Ours: `save`: a typed value, one card with its own Save in the footer, always visible. The section owns the changed state: Save stays disabled until a field differs from what is saved and says `pendingLabel` while saving with Cancel beside it; a completed save calls `saved`, and the product raises one toast from its catalogue ("Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." https://vercel.com/geist/toast), and Save returns to disabled, with no saved state in the footer. Ours: the section never raises a toast itself. A failed save keeps every value and shows under its field, or above the footer when no field owns it. `tone` marks a state with a command (a failed payment, a trial ending): a 1px border and a footer tinted in the hue with its line in it, the line saying the condition in words; title, line, fields and buttons stay neutral, an outline secondary then a default primary. A button takes the hue of its command, not of the card: `destructive` (red) for a permanent loss (Delete), `warning` (amber) for a disruptive command that can be undone (Pause, Archive). A delete card is `tone="error"` with the object's summary as its body; an archive card is neutral with a `warning` button in the footer. "Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge." (https://vercel.com/geist/note) "One Note per concept." (https://vercel.com/geist/note) Ours: a message about the fields inside is a MessageNotice in the body, the card staying neutral. "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: `lockedReason` (Geist's disabled wall) is the reason, written as the footer's line, not in a tooltip; it keeps the fields in view, inert with muted text, under a not-allowed cursor, the title and line unchanged; `unlock` is the way to get access, left out when nothing the person does unlocks it. A locked section has no `save` and no header `actions`.
87
98
  * @words "Helper text is sentence case, one sentence with a trailing period, on a sibling element wired through `aria-describedby`." (https://vercel.com/geist/input) Ours: the description is that helper text for the whole card, and no field has its own. "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: a header-switch card's description says what turning it on does. The title names the values ("Personal details"); the description says what changing them does, in one line; the footer line is a Learn more link, a limit ("Use 32 characters at most."), what stays unaffected, or what is blocked and why ("Ask an owner to change this."); Save and Saving come from the product's catalogue, and so does the toast a `saved` callback raises; a delete card's description opens "Permanently delete".
88
99
  * @access "Provide an accessible name through `children`, `aria-label`, or `aria-labelledby`." (https://vercel.com/geist/toggle) Ours: the title is the section's h2, or an h3 with `headingLevel` inside an ObjectPage's row, and names the form that saves it, and the header switch. The footer's line is one status, announced politely; a failure under a field marks the control invalid and describes it. Locked fields are inert, so the section's title, description and reason are what a screen reader meets.
89
100
  */
90
- declare function SettingsSection({ title, headingLevel, description, actions, tone, children, className, save, footer, footerHint, lockedReason, unlock, ...props }: SettingsSectionProps): React.JSX.Element;
101
+ declare function SettingsSection({ title, headingLevel, description, status, actions, control, tone, children, className, save, footer, footerHint, lockedReason, unlock, ...props }: SettingsSectionProps): React.JSX.Element;
91
102
  type SettingsFieldBase = Omit<React.ComponentProps<typeof Field>, "children" | "orientation"> & {
92
103
  id: string;
93
104
  label: NonNullable<React.ReactNode>;
@@ -1 +1 @@
1
- {"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"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"}
@@ -8,6 +8,7 @@ import { Button } from "./button.js";
8
8
  import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "./card.js";
9
9
  import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from "./field.js";
10
10
  import { NativeSelect, NativeSelectOption } from "./native-select.js";
11
+ import { CardActionsRow } from "./page-actions.js";
11
12
  import { Switch } from "./switch.js";
12
13
  import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
13
14
  const toneClassNames = {
@@ -20,16 +21,16 @@ const toneClassNames = {
20
21
  * @family Compositions
21
22
  * @when One setting a person changes on a SettingsPage or as a section of an ObjectPage: Personal details, Company identity, Notifications. A typed value takes `save`; a switch or a short reversible choice applies at once through its own control's change, with no Save. Also a plan-gated feature, a delete card, one read-only value (an ID in a read-only mono InputGroup with its copy button, no Save), and a paid quantity (its stepper field, the price as the description, a two-fact summary under it).
22
23
  * @instead Read-only facts of an object are a SettingsFactsSection; a table or a list of records is a TableCard; Theme and Language live in the account menu; a record's edit in a list is a RowEditForm.
23
- * @behaviour "Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: one setting per card, a single SettingsField with the description its only help, unless the card's description covers several settings: then they are its SettingsRows, switches and selects together. A typed value (a name, a URL, a server, a port, a key) gets its own card. A semantic subgroup of related controls inside a field, such as radios or checkboxes, is a `FieldSet` with a `FieldLegend`. Several settings in one card are declared by SettingsRows, never by classes at the call site. "Use Toggle for a single boolean setting where ON takes effect immediately, like `Password Protection` or `Auto-Cancel Builds`." (https://vercel.com/geist/toggle) "Pair with a form footer only when the setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) "Disable Toggle only when the action is impossible (missing plan, locked policy); pair with helper text or a `Tooltip` that names the resolver." (https://vercel.com/geist/toggle) Ours: a switch never applies on change; it is a row of the card, a draft until the footer's Save, as Vercel's settings cards are. A switch blocked from above is shown off and disabled, the footer saying why and never a tooltip. Required: the title and the description. The header's actions stand at the title's right; on a card narrower than 28 rem they keep the title's row and the description runs under both, as Vercel's cards read on a phone, and when the title's longest word would not fit beside them they move under the title, so they never cover it. The footer's left line (`footerHint`, `save.hint`) is optional and specific to the card, never a generic line repeated on every card: a limit, what a value is for, a plan it needs, a link; absent, it is nothing, and a card with neither a line nor a button has no footer. Ours: `save`: a typed value, one card with its own Save in the footer, always visible. The section owns the changed state: Save stays disabled until a field differs from what is saved and says `pendingLabel` while saving with Cancel beside it; a completed save calls `saved`, and the product raises one toast from its catalogue ("Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." https://vercel.com/geist/toast), and Save returns to disabled, with no saved state in the footer. Ours: the section never raises a toast itself. A failed save keeps every value and shows under its field, or above the footer when no field owns it. `tone` marks a state with a command (a failed payment, a trial ending): a 1px border and a footer tinted in the hue with its line in it, the line saying the condition in words; title, line, fields and buttons stay neutral, an outline secondary then a default primary. A button takes the hue of its command, not of the card: `destructive` (red) for a permanent loss (Delete), `warning` (amber) for a disruptive command that can be undone (Pause, Archive). A delete card is `tone="error"` with the object's summary as its body; an archive card is neutral with a `warning` button in the footer. "Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge." (https://vercel.com/geist/note) "One Note per concept." (https://vercel.com/geist/note) Ours: a message about the fields inside is a MessageNotice in the body, the card staying neutral. "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: `lockedReason` (Geist's disabled wall) is the reason, written as the footer's line, not in a tooltip; it keeps the fields in view, inert with muted text, under a not-allowed cursor, the title and line unchanged; `unlock` is the way to get access, left out when nothing the person does unlocks it. A locked section has no `save` and no header `actions`.
24
+ * @behaviour "Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: one setting per card, a single SettingsField with the description its only help, unless the card's description covers several settings: then they are its SettingsRows, switches and selects together. A typed value (a name, a URL, a server, a port, a key) gets its own card. A semantic subgroup of related controls inside a field, such as radios or checkboxes, is a `FieldSet` with a `FieldLegend`. Several settings in one card are declared by SettingsRows, never by classes at the call site. "Use Toggle for a single boolean setting where ON takes effect immediately, like `Password Protection` or `Auto-Cancel Builds`." (https://vercel.com/geist/toggle) "Pair with a form footer only when the setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) "Disable Toggle only when the action is impossible (missing plan, locked policy); pair with helper text or a `Tooltip` that names the resolver." (https://vercel.com/geist/toggle) Ours: a switch never applies on change; it is a row of the card, a draft until the footer's Save, as Vercel's settings cards are. A switch blocked from above is shown off and disabled, the footer saying why and never a tooltip. Required: the title and the description. A `status` stands right after the title, as Vercel's plan card puts "Active" after "Pro Plan". The header's `actions` are drawn as every card draws them (`CardActions`: the muted meta, up to two secondaries as outline buttons, the primary as the filled one, the three dots), a way to another page among them as an outline button named for it; a card whose value is itself shown there, as Vercel's Team Avatar, takes `control` instead. They stand at the title's right; on a card narrower than 28 rem they keep the title's row and the description runs under both, as Vercel's cards read on a phone, and when the title's longest word would not fit beside them they move under the title, so they never cover it. The footer's left line (`footerHint`, `save.hint`) is optional and specific to the card, never a generic line repeated on every card: a limit, what a value is for, a plan it needs, a link; absent, it is nothing, and a card with neither a line nor a button has no footer. Ours: `save`: a typed value, one card with its own Save in the footer, always visible. The section owns the changed state: Save stays disabled until a field differs from what is saved and says `pendingLabel` while saving with Cancel beside it; a completed save calls `saved`, and the product raises one toast from its catalogue ("Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." https://vercel.com/geist/toast), and Save returns to disabled, with no saved state in the footer. Ours: the section never raises a toast itself. A failed save keeps every value and shows under its field, or above the footer when no field owns it. `tone` marks a state with a command (a failed payment, a trial ending): a 1px border and a footer tinted in the hue with its line in it, the line saying the condition in words; title, line, fields and buttons stay neutral, an outline secondary then a default primary. A button takes the hue of its command, not of the card: `destructive` (red) for a permanent loss (Delete), `warning` (amber) for a disruptive command that can be undone (Pause, Archive). A delete card is `tone="error"` with the object's summary as its body; an archive card is neutral with a `warning` button in the footer. "Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge." (https://vercel.com/geist/note) "One Note per concept." (https://vercel.com/geist/note) Ours: a message about the fields inside is a MessageNotice in the body, the card staying neutral. "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: `lockedReason` (Geist's disabled wall) is the reason, written as the footer's line, not in a tooltip; it keeps the fields in view, inert with muted text, under a not-allowed cursor, the title and line unchanged; `unlock` is the way to get access, left out when nothing the person does unlocks it. A locked section has no `save` and no header `actions`.
24
25
  * @words "Helper text is sentence case, one sentence with a trailing period, on a sibling element wired through `aria-describedby`." (https://vercel.com/geist/input) Ours: the description is that helper text for the whole card, and no field has its own. "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: a header-switch card's description says what turning it on does. The title names the values ("Personal details"); the description says what changing them does, in one line; the footer line is a Learn more link, a limit ("Use 32 characters at most."), what stays unaffected, or what is blocked and why ("Ask an owner to change this."); Save and Saving come from the product's catalogue, and so does the toast a `saved` callback raises; a delete card's description opens "Permanently delete".
25
26
  * @access "Provide an accessible name through `children`, `aria-label`, or `aria-labelledby`." (https://vercel.com/geist/toggle) Ours: the title is the section's h2, or an h3 with `headingLevel` inside an ObjectPage's row, and names the form that saves it, and the header switch. The footer's line is one status, announced politely; a failure under a field marks the control invalid and describes it. Locked fields are inert, so the section's title, description and reason are what a screen reader meets.
26
27
  */
27
- function SettingsSection({ title, headingLevel = 2, description, actions, tone, children, className, save, footer, footerHint, lockedReason, unlock, ...props }) {
28
+ function SettingsSection({ title, headingLevel = 2, description, status, actions, control, tone, children, className, save, footer, footerHint, lockedReason, unlock, ...props }) {
28
29
  const titleId = React.useId();
29
30
  const Heading = headingLevel === 3 ? "h3" : "h2";
30
31
  const locked = lockedReason !== undefined;
31
32
  const fields = children !== null && children !== undefined ? (_jsx(CardContent, { children: _jsx(FieldGroup, { "data-slot": "settings-section-fields", inert: locked, className: cn(locked && "**:text-muted-foreground"), children: children }) })) : null;
32
- return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "settings-section", "data-tone": tone, "data-locked": locked || undefined }), className: cn("min-w-0", tone && toneClassNames[tone], locked && "cursor-not-allowed *:data-[slot=card-footer]:cursor-default", className), children: [_jsxs(CardHeader, { narrowAction: "title-row", className: cn(!title && "has-data-[slot=card-description]:grid-rows-none"), children: [title ? (_jsx(CardTitle, { children: _jsx(Heading, { id: titleId, children: title }) })) : null, _jsx(CardDescription, { children: description }), actions ? _jsx(CardAction, { children: actions }) : null] }), save ? (_jsx(SettingsSaveForm, { save: save, titleId: titleId, children: fields })) : (_jsxs(_Fragment, { children: [fields, _jsx(FooterStrip, { hint: locked ? lockedReason : footerHint, hintSlot: "settings-section-hint", children: locked ? unlock : footer })] }))] }));
33
+ return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "settings-section", "data-tone": tone, "data-locked": locked || undefined }), className: cn("min-w-0", tone && toneClassNames[tone], locked && "cursor-not-allowed *:data-[slot=card-footer]:cursor-default", className), children: [_jsxs(CardHeader, { narrowAction: "title-row", className: cn(!title && "has-data-[slot=card-description]:grid-rows-none"), children: [title ? (_jsxs(CardTitle, { className: cn(status && "flex flex-wrap items-center gap-2"), children: [_jsx(Heading, { id: titleId, children: title }), status] })) : null, _jsx(CardDescription, { children: description }), actions || control ? (_jsx(CardAction, { children: control ?? (actions ? _jsx(CardActionsRow, { ...actions }) : null) })) : null] }), save ? (_jsx(SettingsSaveForm, { save: save, titleId: titleId, children: fields })) : (_jsxs(_Fragment, { children: [fields, _jsx(FooterStrip, { hint: locked ? lockedReason : footerHint, hintSlot: "settings-section-hint", children: locked ? unlock : footer })] }))] }));
33
34
  }
34
35
  function controlPropsOf({ id, info, error, invalid, disabled, required, }) {
35
36
  return {
@@ -1,6 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { type CollectionNote } from "../internal/collection-note.js";
3
3
  import { type CardSurface } from "./card.js";
4
+ import { type CardActions } from "./page-actions.js";
4
5
  /**
5
6
  * The frame a collection's table sits in: a heading with the collection's own
6
7
  * toolbar at its trailing edge, the table, a labelled total, and the recessed footer strip.
@@ -13,8 +14,9 @@ import { type CardSurface } from "./card.js";
13
14
  * the recessed footer strip.
14
15
  * @instead An entity collection that is the page's whole job is `CollectionPage`. A chart is
15
16
  * `ChartCard`. One object's facts are `SettingsFactsSection`.
16
- * @behaviour The heading and a separator come first when given, the toolbar on the heading's row at
17
- * its trailing edge, title left and controls right, as Vercel heads a card's list; on a card under
17
+ * @behaviour The heading and a separator come first when given, a `status` right after the title, the
18
+ * heading's `actions` drawn as every card's header draws them (`CardActions`), and the toolbar on the
19
+ * heading's row at its trailing edge, title left and controls right, as Vercel heads a card's list; on a card under
18
20
  * 576 px the toolbar takes its own line under the title. The table's first and last columns stand
19
21
  * in from the card's edges by the card's spacing, so the first column lines up with the title. The summary row is a
20
22
  * labelled total under the table, padded like a table footer so its label lines up with the first
@@ -26,10 +28,13 @@ import { type CardSurface } from "./card.js";
26
28
  * Ours: the title names the collection. The footer is a count or the paging; the summary is a labelled total. Never a help sentence in the footer.
27
29
  * @access A `section` whose title is an `h2`; the summary is a `dl`.
28
30
  */
29
- declare function TableCard({ title, description, actions, toolbar, summary, footer, footerHint, note, children, className, surface, ...props }: Omit<React.ComponentProps<"section">, "title"> & {
31
+ declare function TableCard({ title, status, description, actions, toolbar, summary, footer, footerHint, note, children, className, surface, ...props }: Omit<React.ComponentProps<"section">, "title"> & {
30
32
  title?: React.ReactNode;
33
+ /** A summary of the list's state right after its title: a `CheckCounts`, a `StatusBadge`. */
34
+ status?: React.ReactElement | undefined;
31
35
  description?: React.ReactNode;
32
- actions?: React.ReactNode;
36
+ /** The list's commands at the heading's trailing edge, drawn as every card draws them. */
37
+ actions?: CardActions | undefined;
33
38
  /** The collection's search, filters and actions, on the heading's row at its trailing edge. */
34
39
  toolbar?: React.ReactNode;
35
40
  /** A labelled total under the table. */
@@ -1 +1 @@
1
- {"version":3,"file":"table-card.d.ts","sourceRoot":"","sources":["../../src/components/table-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEtF,OAAO,EAA4D,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGpG;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,GAAG,SAAS,CAAC;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gIAAgI;IAChI,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACnC,qBA0DA;AAED,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"table-card.d.ts","sourceRoot":"","sources":["../../src/components/table-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEtF,OAAO,EAA4D,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpG,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,gBAAgB,CAAC;AAGlE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,MAAM,EACN,WAAW,EACX,OAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0FAA0F;IAC1F,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAClC,+FAA+F;IAC/F,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,GAAG,SAAS,CAAC;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gIAAgI;IAChI,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACnC,qBA2DA;AAED,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}
@@ -3,6 +3,7 @@ import { cn } from "../lib/utils.js";
3
3
  import { CollectionNoteStrip } from "../internal/collection-note.js";
4
4
  import { FooterStrip } from "../internal/footer-strip.js";
5
5
  import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "./card.js";
6
+ import { CardActionsRow } from "./page-actions.js";
6
7
  import { Separator } from "./separator.js";
7
8
  /**
8
9
  * The frame a collection's table sits in: a heading with the collection's own
@@ -16,8 +17,9 @@ import { Separator } from "./separator.js";
16
17
  * the recessed footer strip.
17
18
  * @instead An entity collection that is the page's whole job is `CollectionPage`. A chart is
18
19
  * `ChartCard`. One object's facts are `SettingsFactsSection`.
19
- * @behaviour The heading and a separator come first when given, the toolbar on the heading's row at
20
- * its trailing edge, title left and controls right, as Vercel heads a card's list; on a card under
20
+ * @behaviour The heading and a separator come first when given, a `status` right after the title, the
21
+ * heading's `actions` drawn as every card's header draws them (`CardActions`), and the toolbar on the
22
+ * heading's row at its trailing edge, title left and controls right, as Vercel heads a card's list; on a card under
21
23
  * 576 px the toolbar takes its own line under the title. The table's first and last columns stand
22
24
  * in from the card's edges by the card's spacing, so the first column lines up with the title. The summary row is a
23
25
  * labelled total under the table, padded like a table footer so its label lines up with the first
@@ -29,9 +31,9 @@ import { Separator } from "./separator.js";
29
31
  * Ours: the title names the collection. The footer is a count or the paging; the summary is a labelled total. Never a help sentence in the footer.
30
32
  * @access A `section` whose title is an `h2`; the summary is a `dl`.
31
33
  */
32
- function TableCard({ title, description, actions, toolbar, summary, footer, footerHint, note, children, className, surface = "resting", ...props }) {
34
+ function TableCard({ title, status, description, actions, toolbar, summary, footer, footerHint, note, children, className, surface = "resting", ...props }) {
33
35
  const heading = Boolean(title) || Boolean(description) || Boolean(actions);
34
- return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "table-card" }), surface: surface, className: cn("min-w-0 gap-0 py-0", className), children: [(heading || toolbar) && (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { className: "py-(--card-spacing)", children: [title && (_jsx(CardTitle, { children: _jsx("h2", { children: title }) })), description && _jsx(CardDescription, { children: description }), actions || toolbar ? (_jsxs(CardAction, { className: cn("flex min-w-0 items-center gap-2", toolbar &&
35
- "@max-xl/card-header:col-span-2 @max-xl/card-header:col-start-1 @max-xl/card-header:row-span-1 @max-xl/card-header:row-start-auto @max-xl/card-header:justify-self-stretch"), children: [actions, toolbar ? (_jsx("div", { "data-slot": "table-card-toolbar", className: "min-w-0 flex-1", children: toolbar })) : null] })) : null] }), _jsx(Separator, {})] })), _jsx("div", { "data-slot": "table-card-body", className: "min-w-0 [&_[data-slot=table-cell]:first-child]:pl-(--card-spacing) [&_[data-slot=table-cell]:last-child]:pr-(--card-spacing) [&_[data-slot=table-head]:first-child]:pl-(--card-spacing) [&_[data-slot=table-head]:last-child]:pr-(--card-spacing)", children: children }), summary && (_jsxs("dl", { "data-slot": "table-card-summary", className: "flex min-w-0 items-start justify-between gap-4 border-t border-border px-(--card-spacing) py-2.5 text-sm font-medium", children: [_jsx("dt", { children: summary.label }), _jsx("dd", { className: "text-right tabular-nums", children: summary.value })] })), _jsx(FooterStrip, { hint: footerHint, hintSlot: "table-card-hint", children: footer }), note ? _jsx(CollectionNoteStrip, { note: note }) : null] }));
36
+ return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "table-card" }), surface: surface, className: cn("min-w-0 gap-0 py-0", className), children: [(heading || toolbar) && (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { className: "py-(--card-spacing)", children: [title && (_jsxs(CardTitle, { className: cn(status && "flex flex-wrap items-center gap-2"), children: [_jsx("h2", { children: title }), status] })), description && _jsx(CardDescription, { children: description }), actions || toolbar ? (_jsxs(CardAction, { className: cn("flex min-w-0 items-center gap-2", toolbar &&
37
+ "@max-xl/card-header:col-span-2 @max-xl/card-header:col-start-1 @max-xl/card-header:row-span-1 @max-xl/card-header:row-start-auto @max-xl/card-header:justify-self-stretch"), children: [actions ? _jsx(CardActionsRow, { ...actions }) : null, toolbar ? (_jsx("div", { "data-slot": "table-card-toolbar", className: "min-w-0 flex-1", children: toolbar })) : null] })) : null] }), _jsx(Separator, {})] })), _jsx("div", { "data-slot": "table-card-body", className: "min-w-0 [&_[data-slot=table-cell]:first-child]:pl-(--card-spacing) [&_[data-slot=table-cell]:last-child]:pr-(--card-spacing) [&_[data-slot=table-head]:first-child]:pl-(--card-spacing) [&_[data-slot=table-head]:last-child]:pr-(--card-spacing)", children: children }), summary && (_jsxs("dl", { "data-slot": "table-card-summary", className: "flex min-w-0 items-start justify-between gap-4 border-t border-border px-(--card-spacing) py-2.5 text-sm font-medium", children: [_jsx("dt", { children: summary.label }), _jsx("dd", { className: "text-right tabular-nums", children: summary.value })] })), _jsx(FooterStrip, { hint: footerHint, hintSlot: "table-card-hint", children: footer }), note ? _jsx(CollectionNoteStrip, { note: note }) : null] }));
36
38
  }
37
39
  export { TableCard };
@@ -4,12 +4,12 @@ import { type VariantProps } from "class-variance-authority";
4
4
  * for a muted way out.
5
5
  *
6
6
  * @family Navigation
7
- * @when A link inside a sentence, or offered alone as a section's way on (`inline`, blue and
8
- * underlined at rest); a link that is itself the value, such as a record's name or a fact (`plain`);
9
- * a secondary way out beside the content, such as a card header's *See everything*, which takes the
10
- * same blue treatment as `inline`; or a muted way to somewhere such as a footer's *Learn more*
11
- * (`quiet`).
12
- * @instead A command is a `Button`; a destination drawn as a button is a `ButtonLink`. Going to a record from its row is the record's name in `RecordIdentity`.
7
+ * @when A link inside a sentence, such as a card's description or its footer's line (`inline`,
8
+ * blue and underlined at rest); a link that is itself the value, such as a record's name or a fact
9
+ * (`plain`); or a muted way to the documentation at the end of a footer's line, *Learn more*
10
+ * (`quiet`). As on Vercel's dashboard, a text link never stands alone: not in a card's header, not
11
+ * on a line of its own between cards.
12
+ * @instead A command is a `Button`; a destination drawn as a button is a `ButtonLink`. A card's way to another page is a command in its header's `actions` (`CardActions`), an outline button named for the page, as Vercel's plan card draws "Invoices"; a page's is in `PageActions`. Going to a record from its row is the record's name in `RecordIdentity`.
13
13
  * Breadcrumb and back navigation are not text links: they keep their own quieter navigation
14
14
  * treatment.
15
15
  * @behaviour Classes only: the caller renders the real anchor or router link. `inline` thickens its
@@ -4,12 +4,12 @@ import { cva } from "class-variance-authority";
4
4
  * for a muted way out.
5
5
  *
6
6
  * @family Navigation
7
- * @when A link inside a sentence, or offered alone as a section's way on (`inline`, blue and
8
- * underlined at rest); a link that is itself the value, such as a record's name or a fact (`plain`);
9
- * a secondary way out beside the content, such as a card header's *See everything*, which takes the
10
- * same blue treatment as `inline`; or a muted way to somewhere such as a footer's *Learn more*
11
- * (`quiet`).
12
- * @instead A command is a `Button`; a destination drawn as a button is a `ButtonLink`. Going to a record from its row is the record's name in `RecordIdentity`.
7
+ * @when A link inside a sentence, such as a card's description or its footer's line (`inline`,
8
+ * blue and underlined at rest); a link that is itself the value, such as a record's name or a fact
9
+ * (`plain`); or a muted way to the documentation at the end of a footer's line, *Learn more*
10
+ * (`quiet`). As on Vercel's dashboard, a text link never stands alone: not in a card's header, not
11
+ * on a line of its own between cards.
12
+ * @instead A command is a `Button`; a destination drawn as a button is a `ButtonLink`. A card's way to another page is a command in its header's `actions` (`CardActions`), an outline button named for the page, as Vercel's plan card draws "Invoices"; a page's is in `PageActions`. Going to a record from its row is the record's name in `RecordIdentity`.
13
13
  * Breadcrumb and back navigation are not text links: they keep their own quieter navigation
14
14
  * treatment.
15
15
  * @behaviour Classes only: the caller renders the real anchor or router link. `inline` thickens its
@@ -4,6 +4,7 @@ export declare const ACTIONS: {
4
4
  ButtonGroup: () => import("react").JSX.Element;
5
5
  LoadMoreButton: () => import("react").JSX.Element;
6
6
  CopyButton: () => import("react").JSX.Element;
7
+ CardActionsRow: () => import("react").JSX.Element;
7
8
  PageActions: () => import("react").JSX.Element;
8
9
  };
9
10
  //# sourceMappingURL=actions.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/actions.tsx"],"names":[],"mappings":"AAmDA,eAAO,MAAM,OAAO;;;;;;;CA6NO,CAAC"}
1
+ {"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/actions.tsx"],"names":[],"mappings":"AAmDA,eAAO,MAAM,OAAO;;;;;;;;CAsOO,CAAC"}
@@ -6,7 +6,7 @@ import { ButtonGroup } from "../../components/button-group.js";
6
6
  import { Card } from "../../components/card.js";
7
7
  import { CopyButton } from "../../components/copy-button.js";
8
8
  import { LoadMoreButton } from "../../components/load-more-button.js";
9
- import { PageActionsRow } from "../../components/page-actions.js";
9
+ import { CardActionsRow, PageActionsRow } from "../../components/page-actions.js";
10
10
  import { nothing, PAGE_MENU } from "../samples.js";
11
11
  const TEXT_SIZES = ["xs", "sm", "default", "lg"];
12
12
  const LOOKS = [
@@ -36,5 +36,9 @@ export const ACTIONS = {
36
36
  ButtonGroup: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs(ButtonGroup, { "aria-label": "Status filter", children: [_jsx(Button, { variant: "outline", children: "Status: Needs attention" }), _jsx(Button, { "aria-label": "Remove filter: Status", size: "icon", variant: "outline", children: _jsx(X, { "aria-hidden": "true" }) })] }), _jsxs(ButtonGroup, { "aria-label": "Pages", children: [_jsx(Button, { "aria-label": "Previous page", disabled: true, size: "icon", variant: "outline", children: _jsx(ChevronLeft, { "aria-hidden": "true" }) }), _jsx(Button, { "aria-label": "Next page", size: "icon", variant: "outline", children: _jsx(ChevronRight, { "aria-hidden": "true" }) })] })] })),
37
37
  LoadMoreButton: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("ul", { className: "flex flex-col gap-1 text-body-sm", children: EVENTS.map((event) => (_jsx("li", { children: event }, event))) }), _jsx(LoadMoreButton, { loading: false, loadingLabel: "Loading more events", onClick: nothing, children: "Load more events" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("ul", { className: "flex flex-col gap-1 text-body-sm", children: EVENTS.map((event) => (_jsx("li", { children: event }, event))) }), _jsx(LoadMoreButton, { loading: true, loadingLabel: "Loading more events", children: "Load more events" })] }), _jsxs(Card, { className: "gap-0 py-0", surface: "outlined", children: [_jsx("ul", { className: "flex flex-col gap-1 p-4 text-body-sm", children: EVENTS.map((event) => (_jsx("li", { children: event }, event))) }), _jsx(LoadMoreButton, { className: "border-x-0 border-b-0", loading: false, loadingLabel: "Loading more events", noBorderRadius: true, noGap: true, onClick: nothing, children: "Load more events" })] })] })),
38
38
  CopyButton: () => (_jsxs("div", { className: "flex items-center gap-2 font-mono text-sm", children: ["agt_0042", _jsx(CopyButton, { copiedLabel: "Copied", copyFailedLabel: "Couldn't copy", copyLabel: "Copy Agent ID", value: "agt_0042" })] })),
39
+ CardActionsRow: () => (_jsx(CardActionsRow, { meta: "2 of 5 Agents", secondary: [
40
+ { label: "Statements", link: _jsx("a", { href: "#statements" }) },
41
+ { label: "Buy Extra usage for Customers", onClick: nothing },
42
+ ] })),
39
43
  PageActions: () => (_jsx(PageActionsRow, { menu: PAGE_MENU, primary: { label: "Invite customer", icon: _jsx(Plus, {}), onClick: nothing }, secondary: { label: "Import", onClick: nothing } })),
40
44
  };
@@ -1 +1 @@
1
- {"version":3,"file":"compositions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/compositions.tsx"],"names":[],"mappings":"AAsIA,iBAAS,oBAAoB,gCA+B5B;AAMD,iBAAS,wBAAwB,gCAahC;AAED,iBAAS,qBAAqB,gCA0B7B;AAED,iBAAS,yBAAyB,gCAGjC;AAED,iBAAS,sBAAsB,gCAyD9B;AAED,iBAAS,yBAAyB,gCAUjC;AAED,iBAAS,qBAAqB,gCAwC7B;AAED,iBAAS,kBAAkB,gCAiB1B;AAED,iBAAS,oBAAoB,gCAS5B;AAED,iBAAS,kBAAkB,gCA0B1B;AAED,iBAAS,kBAAkB,gCAuE1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,oBAAoB,gCAkD5B;AAED,iBAAS,oBAAoB,gCAqC5B;AAED,iBAAS,mBAAmB,gCA2B3B;AAED,iBAAS,mBAAmB,gCAoB3B;AAwBD,iBAAS,uBAAuB,gCAkD/B;AA+BD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;CA6FE,CAAC"}
1
+ {"version":3,"file":"compositions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/compositions.tsx"],"names":[],"mappings":"AAsIA,iBAAS,oBAAoB,gCA+B5B;AAMD,iBAAS,wBAAwB,gCAahC;AAED,iBAAS,qBAAqB,gCA0B7B;AAED,iBAAS,yBAAyB,gCAGjC;AAED,iBAAS,sBAAsB,gCAyD9B;AAED,iBAAS,yBAAyB,gCAUjC;AAED,iBAAS,qBAAqB,gCAwC7B;AAED,iBAAS,kBAAkB,gCAiB1B;AAED,iBAAS,oBAAoB,gCAS5B;AAED,iBAAS,kBAAkB,gCA0B1B;AAED,iBAAS,kBAAkB,gCAuE1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,oBAAoB,gCAkD5B;AAED,iBAAS,oBAAoB,gCAqC5B;AAED,iBAAS,mBAAmB,gCA2B3B;AAED,iBAAS,mBAAmB,gCAoB3B;AAwBD,iBAAS,uBAAuB,gCAkD/B;AA+BD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;CA4FE,CAAC"}
@@ -392,7 +392,7 @@ export const COMPOSITIONS = {
392
392
  { label: "Customers", value: "4" },
393
393
  { label: "Plan", value: "Business" },
394
394
  ], mark: { kind: "company", name: "Rossi Ottica" }, name: "Rossi Ottica", children: _jsx(ObjectSection, { description: "Legal details of the partner.", title: "Company", children: _jsx(ObjectFacts, { facts: [{ label: "VAT number", value: "IT01234567890" }] }) }) })),
395
- ObjectSection: () => (_jsx(ObjectSection, { action: { label: "Edit", onClick: nothing }, description: "Where invoices go and which plan applies.", meta: "Changed on 2 October", title: "Billing", children: _jsx(ObjectFacts, { facts: [
395
+ ObjectSection: () => (_jsx(ObjectSection, { actions: { meta: "Changed on 2 October", secondary: { label: "Edit", onClick: nothing } }, description: "Where invoices go and which plan applies.", title: "Billing", children: _jsx(ObjectFacts, { facts: [
396
396
  { label: "Billing email", value: "amministrazione@acme.it", ellipsis: true },
397
397
  { label: "Plan", value: "Business" },
398
398
  {
@@ -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, { command: _jsx(Button, { variant: "outline", children: "Edit" }), description: "The legal details on every invoice.", facts: [
204
+ SettingsFactsSection: () => (_jsx("div", { className: "max-w-lg", children: _jsx(SettingsFactsSection, { actions: { secondary: { label: "Edit", onClick: () => undefined } }, 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 },
@@ -147,6 +147,7 @@ export declare const SPECIMENS: {
147
147
  ButtonGroup: () => import("react").JSX.Element;
148
148
  LoadMoreButton: () => import("react").JSX.Element;
149
149
  CopyButton: () => import("react").JSX.Element;
150
+ CardActionsRow: () => import("react").JSX.Element;
150
151
  PageActions: () => import("react").JSX.Element;
151
152
  ActivityFeed: () => import("react").JSX.Element;
152
153
  AgentProfileCard: () => import("react").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYiB,CAAC"}
@@ -1,4 +1,4 @@
1
- export type UsageName = "ActivityFeed" | "AgentProfileCard" | "CatalogDrawer" | "CollectionFilters" | "CollectionPage" | "CollectionToolbar" | "ConfirmDialog" | "EntryPicture" | "EntryScene" | "FormDialog" | "FormDrawer" | "InviteCard" | "LibraryShelf" | "ObjectPage" | "ObjectSection" | "OverviewPage" | "PageHeader" | "RecordList" | "RecordSheet" | "RowEditForm" | "SettingsPage" | "SettingsSection" | "Button" | "ButtonGroup" | "ButtonLink" | "CopyButton" | "LoadMoreButton" | "PageActions" | "Calendar" | "ClearableInput" | "CollectionSearch" | "Field" | "Form" | "Input" | "InputGroup" | "InputOTP" | "Label" | "NativeSelect" | "SettingsField" | "SettingsRows" | "Slider" | "Textarea" | "Checkbox" | "ChoiceboxGroup" | "CollectionSort" | "Combobox" | "ModelSelect" | "MultiSelect" | "RadioGroup" | "SegmentedChoice" | "SegmentedControl" | "Select" | "Switch" | "ThemeModeSegments" | "ThemeModeSwitcher" | "Toggle" | "ToggleGroup" | "ActionStatus" | "AgentOrb" | "AppMark" | "ArchIcon" | "Avatar" | "Badge" | "BrandWordmark" | "CheckCounts" | "FileTypeIcon" | "IdentityMark" | "ModelIdentity" | "ModelMark" | "ObjectFactValue" | "PlatformMark" | "ProgressChecklist" | "RecordIdentity" | "StatusBadge" | "Tag" | "AgentListRow" | "Breadcrumb" | "CommandDialog" | "Footer" | "PortalSidebarFrame" | "ScopeSwitcher" | "Sidebar" | "SidebarBrand" | "SidebarFind" | "SidebarFrame" | "SidebarMenuChevron" | "SidebarSections" | "Tabs" | "TabsNav" | "textLinkVariants" | "AgentCard" | "Card" | "CardRow" | "CodeBlock" | "DataTable" | "DiffCount" | "DisclosureRow" | "FileDiff" | "Gauge" | "Item" | "Kbd" | "MiddleTruncate" | "ObjectFacts" | "PairingCode" | "Progress" | "QrCode" | "RecordTime" | "RunTimeline" | "SettingsFactsSection" | "Snippet" | "Table" | "TableCard" | "TableValue" | "TextWithCopyButton" | "UsageMeter" | "Alert" | "EmptyState" | "EntryProgress" | "EntryStageList" | "HoverCard" | "MessageNotice" | "NoticeBanner" | "PendingLabel" | "Skeleton" | "SkeletonRegion" | "Toaster" | "Tooltip" | "UpdateCard" | "WaitingLine" | "AccountMenu" | "ActionContextMenu" | "ActionMenu" | "AlertDialog" | "ContextMenu" | "Dialog" | "Drawer" | "DropdownMenu" | "GlassControl" | "MenuChoiceRow" | "Popover" | "Sheet" | "SiteMenu" | "ThemeModeMenu" | "ActivityCalendar" | "ChartAreaStacked" | "ChartBarHorizontal" | "ChartBarMultiple" | "ChartBarStacked" | "ChartCard" | "ChartContainer" | "ChartRanking" | "ChartSparkline" | "DateRangeControl" | "KpiCard" | "TrendBadge" | "createEntityColorMap" | "Accordion" | "AspectRatio" | "BrandField" | "Collapsible" | "CompanyCard" | "Disclosure" | "HiveScene" | "NadiaPresence" | "NumberedSteps" | "Prose" | "ReadingColumn" | "ResizablePanelGroup" | "ScrollArea" | "Separator" | "ToolIcon";
1
+ export type UsageName = "ActivityFeed" | "AgentProfileCard" | "CatalogDrawer" | "CollectionFilters" | "CollectionPage" | "CollectionToolbar" | "ConfirmDialog" | "EntryPicture" | "EntryScene" | "FormDialog" | "FormDrawer" | "InviteCard" | "LibraryShelf" | "ObjectPage" | "ObjectSection" | "OverviewPage" | "PageHeader" | "RecordList" | "RecordSheet" | "RowEditForm" | "SettingsPage" | "SettingsSection" | "Button" | "ButtonGroup" | "ButtonLink" | "CardActionsRow" | "CopyButton" | "LoadMoreButton" | "PageActions" | "Calendar" | "ClearableInput" | "CollectionSearch" | "Field" | "Form" | "Input" | "InputGroup" | "InputOTP" | "Label" | "NativeSelect" | "SettingsField" | "SettingsRows" | "Slider" | "Textarea" | "Checkbox" | "ChoiceboxGroup" | "CollectionSort" | "Combobox" | "ModelSelect" | "MultiSelect" | "RadioGroup" | "SegmentedChoice" | "SegmentedControl" | "Select" | "Switch" | "ThemeModeSegments" | "ThemeModeSwitcher" | "Toggle" | "ToggleGroup" | "ActionStatus" | "AgentOrb" | "AppMark" | "ArchIcon" | "Avatar" | "Badge" | "BrandWordmark" | "CheckCounts" | "FileTypeIcon" | "IdentityMark" | "ModelIdentity" | "ModelMark" | "ObjectFactValue" | "PlatformMark" | "ProgressChecklist" | "RecordIdentity" | "StatusBadge" | "Tag" | "AgentListRow" | "Breadcrumb" | "CommandDialog" | "Footer" | "PortalSidebarFrame" | "ScopeSwitcher" | "Sidebar" | "SidebarBrand" | "SidebarFind" | "SidebarFrame" | "SidebarMenuChevron" | "SidebarSections" | "Tabs" | "TabsNav" | "textLinkVariants" | "AgentCard" | "Card" | "CardRow" | "CodeBlock" | "DataTable" | "DiffCount" | "DisclosureRow" | "FileDiff" | "Gauge" | "Item" | "Kbd" | "MiddleTruncate" | "ObjectFacts" | "PairingCode" | "Progress" | "QrCode" | "RecordTime" | "RunTimeline" | "SettingsFactsSection" | "Snippet" | "Table" | "TableCard" | "TableValue" | "TextWithCopyButton" | "UsageMeter" | "Alert" | "EmptyState" | "EntryProgress" | "EntryStageList" | "HoverCard" | "MessageNotice" | "NoticeBanner" | "PendingLabel" | "Skeleton" | "SkeletonRegion" | "Toaster" | "Tooltip" | "UpdateCard" | "WaitingLine" | "AccountMenu" | "ActionContextMenu" | "ActionMenu" | "AlertDialog" | "ContextMenu" | "Dialog" | "Drawer" | "DropdownMenu" | "GlassControl" | "MenuChoiceRow" | "Popover" | "Sheet" | "SiteMenu" | "ThemeModeMenu" | "ActivityCalendar" | "ChartAreaStacked" | "ChartBarHorizontal" | "ChartBarMultiple" | "ChartBarStacked" | "ChartCard" | "ChartContainer" | "ChartRanking" | "ChartSparkline" | "DateRangeControl" | "KpiCard" | "TrendBadge" | "createEntityColorMap" | "Accordion" | "AspectRatio" | "BrandField" | "Collapsible" | "CompanyCard" | "Disclosure" | "HiveScene" | "NadiaPresence" | "NumberedSteps" | "Prose" | "ReadingColumn" | "ResizablePanelGroup" | "ScrollArea" | "Separator" | "ToolIcon";
2
2
  export type UsageFamily = "Compositions" | "Actions" | "Inputs" | "Choices" | "Status" | "Navigation" | "Data" | "Feedback" | "Menus" | "Charts" | "Other";
3
3
  export type ComponentUsage = {
4
4
  name: UsageName;
@@ -1 +1 @@
1
- {"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}