@nadicodeai/ui 12.1.111 → 12.1.113
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/AGENTS.md +11 -9
- package/README.md +3 -2
- package/dist/components/account-menu.d.ts +1 -1
- package/dist/components/account-menu.js +1 -1
- package/dist/components/action-menu.d.ts +2 -2
- package/dist/components/action-menu.js +2 -2
- package/dist/components/activity-feed.d.ts +1 -1
- package/dist/components/activity-feed.js +1 -1
- package/dist/components/agent-card.d.ts +5 -3
- package/dist/components/agent-card.d.ts.map +1 -1
- package/dist/components/agent-card.js +5 -3
- package/dist/components/agent-list-row.d.ts +2 -2
- package/dist/components/agent-list-row.js +2 -2
- package/dist/components/agent-orb.d.ts +31 -7
- package/dist/components/agent-orb.d.ts.map +1 -1
- package/dist/components/agent-orb.js +29 -5
- package/dist/components/agent-profile.d.ts +6 -2
- package/dist/components/agent-profile.d.ts.map +1 -1
- package/dist/components/agent-profile.js +6 -2
- package/dist/components/aspect-ratio.d.ts +7 -3
- package/dist/components/aspect-ratio.d.ts.map +1 -1
- package/dist/components/aspect-ratio.js +7 -3
- package/dist/components/avatar.d.ts +11 -5
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +11 -5
- package/dist/components/breadcrumb.d.ts +1 -1
- package/dist/components/breadcrumb.js +1 -1
- package/dist/components/button.d.ts +23 -10
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +23 -10
- package/dist/components/card-row.d.ts +4 -2
- package/dist/components/card-row.d.ts.map +1 -1
- package/dist/components/card-row.js +4 -2
- package/dist/components/card.d.ts +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/carousel.d.ts +9 -4
- package/dist/components/carousel.d.ts.map +1 -1
- package/dist/components/carousel.js +9 -4
- package/dist/components/catalog-drawer.d.ts +1 -1
- package/dist/components/catalog-drawer.js +1 -1
- package/dist/components/chart-card.d.ts +1 -1
- package/dist/components/chart-card.js +1 -1
- package/dist/components/checkbox.d.ts +2 -1
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +2 -1
- package/dist/components/choicebox.d.ts +9 -5
- package/dist/components/choicebox.d.ts.map +1 -1
- package/dist/components/choicebox.js +9 -5
- package/dist/components/clearable-input.d.ts +2 -1
- package/dist/components/clearable-input.d.ts.map +1 -1
- package/dist/components/clearable-input.js +2 -1
- package/dist/components/code-block.d.ts +13 -10
- package/dist/components/code-block.d.ts.map +1 -1
- package/dist/components/code-block.js +13 -10
- package/dist/components/collection-filters.d.ts +1 -1
- package/dist/components/collection-filters.js +1 -1
- package/dist/components/collection-search.d.ts +11 -7
- package/dist/components/collection-search.d.ts.map +1 -1
- package/dist/components/collection-search.js +11 -7
- package/dist/components/combobox.d.ts +4 -1
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +4 -1
- package/dist/components/command.d.ts +1 -1
- package/dist/components/command.js +1 -1
- package/dist/components/company-card.d.ts +28 -5
- package/dist/components/company-card.d.ts.map +1 -1
- package/dist/components/company-card.js +28 -5
- package/dist/components/confirm-dialog.d.ts +3 -2
- package/dist/components/confirm-dialog.d.ts.map +1 -1
- package/dist/components/confirm-dialog.js +2 -2
- package/dist/components/copy-button.d.ts +2 -2
- package/dist/components/copy-button.js +2 -2
- package/dist/components/data-table.d.ts +2 -2
- package/dist/components/data-table.js +2 -2
- package/dist/components/drawer.d.ts +4 -4
- package/dist/components/drawer.d.ts.map +1 -1
- package/dist/components/drawer.js +3 -3
- package/dist/components/dropdown-menu.d.ts +2 -2
- package/dist/components/dropdown-menu.js +2 -2
- package/dist/components/empty-state.d.ts +2 -2
- package/dist/components/empty-state.js +2 -2
- package/dist/components/field.d.ts +4 -0
- package/dist/components/field.d.ts.map +1 -1
- package/dist/components/field.js +4 -0
- package/dist/components/file-diff.d.ts +5 -2
- package/dist/components/file-diff.d.ts.map +1 -1
- package/dist/components/file-diff.js +5 -2
- package/dist/components/form-dialog.d.ts +1 -1
- package/dist/components/form-dialog.js +1 -1
- package/dist/components/form-drawer.d.ts +1 -1
- package/dist/components/form-drawer.js +1 -1
- package/dist/components/gauge.d.ts +9 -7
- package/dist/components/gauge.d.ts.map +1 -1
- package/dist/components/gauge.js +9 -7
- package/dist/components/hover-card.d.ts +5 -2
- package/dist/components/hover-card.d.ts.map +1 -1
- package/dist/components/hover-card.js +5 -2
- package/dist/components/identity-mark.d.ts +3 -3
- package/dist/components/identity-mark.js +3 -3
- package/dist/components/input-group.d.ts +1 -0
- package/dist/components/input-group.d.ts.map +1 -1
- package/dist/components/input-group.js +1 -0
- package/dist/components/input-otp.d.ts +5 -3
- package/dist/components/input-otp.d.ts.map +1 -1
- package/dist/components/input-otp.js +5 -3
- package/dist/components/input.d.ts +4 -2
- package/dist/components/input.d.ts.map +1 -1
- package/dist/components/input.js +4 -2
- package/dist/components/item.d.ts +1 -1
- package/dist/components/item.js +1 -1
- package/dist/components/kbd.d.ts +4 -2
- package/dist/components/kbd.d.ts.map +1 -1
- package/dist/components/kbd.js +4 -2
- package/dist/components/label.d.ts +8 -3
- package/dist/components/label.d.ts.map +1 -1
- package/dist/components/label.js +8 -3
- package/dist/components/load-more-button.d.ts +3 -2
- package/dist/components/load-more-button.d.ts.map +1 -1
- package/dist/components/load-more-button.js +3 -2
- package/dist/components/message-notice.d.ts +1 -1
- package/dist/components/message-notice.js +1 -1
- package/dist/components/multi-select.d.ts +6 -4
- package/dist/components/multi-select.d.ts.map +1 -1
- package/dist/components/multi-select.js +6 -4
- package/dist/components/notice-banner.d.ts +2 -2
- package/dist/components/notice-banner.js +2 -2
- package/dist/components/object-workspace.d.ts +3 -3
- package/dist/components/object-workspace.d.ts.map +1 -1
- package/dist/components/object-workspace.js +2 -2
- package/dist/components/pairing-code.d.ts +2 -2
- package/dist/components/pairing-code.js +2 -2
- package/dist/components/picture-label.d.ts +3 -2
- package/dist/components/picture-label.d.ts.map +1 -1
- package/dist/components/picture-label.js +3 -2
- package/dist/components/popover.d.ts +7 -3
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +7 -3
- package/dist/components/progress-checklist.d.ts +1 -1
- package/dist/components/progress-checklist.js +1 -1
- package/dist/components/progress.d.ts +4 -2
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +4 -2
- package/dist/components/qr-code.d.ts +5 -2
- package/dist/components/qr-code.d.ts.map +1 -1
- package/dist/components/qr-code.js +5 -2
- package/dist/components/radio-group.d.ts +8 -5
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +8 -5
- package/dist/components/record-identity.d.ts +1 -1
- package/dist/components/record-identity.js +1 -1
- package/dist/components/record-list.d.ts +2 -2
- package/dist/components/record-list.js +2 -2
- package/dist/components/record-sheet.d.ts +2 -2
- package/dist/components/record-sheet.js +2 -2
- package/dist/components/record-time.d.ts +1 -1
- package/dist/components/record-time.js +1 -1
- package/dist/components/resizable.d.ts +2 -2
- package/dist/components/resizable.js +2 -2
- package/dist/components/row-edit-form.d.ts +1 -1
- package/dist/components/row-edit-form.js +1 -1
- package/dist/components/run-timeline.d.ts +2 -2
- package/dist/components/run-timeline.js +2 -2
- package/dist/components/scroll-area.d.ts +5 -3
- package/dist/components/scroll-area.d.ts.map +1 -1
- package/dist/components/scroll-area.js +5 -3
- package/dist/components/segmented-control.d.ts +1 -1
- package/dist/components/segmented-control.js +1 -1
- package/dist/components/select.d.ts +5 -3
- package/dist/components/select.d.ts.map +1 -1
- package/dist/components/select.js +5 -3
- package/dist/components/separator.d.ts +4 -2
- package/dist/components/separator.d.ts.map +1 -1
- package/dist/components/separator.js +4 -2
- package/dist/components/settings-facts.d.ts +3 -2
- package/dist/components/settings-facts.d.ts.map +1 -1
- package/dist/components/settings-facts.js +3 -2
- package/dist/components/settings-section.d.ts +1 -1
- package/dist/components/settings-section.js +1 -1
- package/dist/components/sheet.d.ts +6 -3
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +6 -3
- package/dist/components/skeleton.d.ts +1 -1
- package/dist/components/skeleton.js +1 -1
- package/dist/components/slider.d.ts +2 -1
- package/dist/components/slider.d.ts.map +1 -1
- package/dist/components/slider.js +2 -1
- package/dist/components/snippet.d.ts +3 -1
- package/dist/components/snippet.d.ts.map +1 -1
- package/dist/components/snippet.js +3 -1
- package/dist/components/sonner.d.ts +2 -2
- package/dist/components/sonner.js +2 -2
- package/dist/components/status-badge.d.ts +5 -2
- package/dist/components/status-badge.d.ts.map +1 -1
- package/dist/components/status-badge.js +5 -2
- package/dist/components/status-dot.d.ts +2 -1
- package/dist/components/status-dot.d.ts.map +1 -1
- package/dist/components/status-dot.js +2 -1
- package/dist/components/switch.d.ts +7 -6
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +7 -6
- package/dist/components/table.d.ts +18 -11
- package/dist/components/table.d.ts.map +1 -1
- package/dist/components/table.js +18 -11
- package/dist/components/tabs.d.ts +19 -13
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +19 -13
- package/dist/components/text-link.d.ts +9 -4
- package/dist/components/text-link.d.ts.map +1 -1
- package/dist/components/text-link.js +9 -4
- package/dist/components/text-with-copy-button.d.ts +2 -2
- package/dist/components/text-with-copy-button.js +2 -2
- package/dist/components/textarea.d.ts +4 -3
- package/dist/components/textarea.d.ts.map +1 -1
- package/dist/components/textarea.js +4 -3
- package/dist/components/tooltip.d.ts +5 -3
- package/dist/components/tooltip.d.ts.map +1 -1
- package/dist/components/tooltip.js +5 -3
- package/dist/components/usage-meter.d.ts +2 -2
- package/dist/components/usage-meter.js +2 -2
- package/dist/components/waiting-line.d.ts +1 -1
- package/dist/components/waiting-line.js +1 -1
- package/dist/showcase/usage.generated.d.ts.map +1 -1
- package/dist/showcase/usage.generated.js +147 -147
- package/dist/styles/shadcn.tailwind.css +8 -0
- package/package.json +3 -3
package/dist/components/kbd.d.ts
CHANGED
|
@@ -37,10 +37,12 @@ export type KbdProps = Omit<React.ComponentProps<"kbd">, "children"> & {
|
|
|
37
37
|
* to half your users." (https://vercel.com/geist/keyboard-input)
|
|
38
38
|
* Ours: not interactive. ⌘ ⇧ ⌥ ⌃ on Apple systems, *Ctrl* *Shift* *Alt* elsewhere, with `meta`
|
|
39
39
|
* becoming *Ctrl*. The server draws the Apple form and the browser corrects it after hydration.
|
|
40
|
-
* Several flags make one key: `meta shift
|
|
40
|
+
* Several flags make one key: `meta shift`; there is no `KbdGroup`. `CommandShortcut` draws this
|
|
41
|
+
* same `Kbd`. It is 24 px high (`size="sm"`: 20 px) in the interface's
|
|
41
42
|
* sans type, 14 px (12 px), with no gap between Apple glyphs. Colour: one neutral key in the primary
|
|
42
43
|
* ink on the page surface with a hairline ring, no hue; inside a tooltip it drops the ring and takes
|
|
43
|
-
* a fill one step off the tooltip's inverted surface,
|
|
44
|
+
* a fill one step off the tooltip's inverted surface, and the tooltip draws it 20 px high whatever
|
|
45
|
+
* its `size`.
|
|
44
46
|
* @words "`children` is one key, digit, or named key (`K`, `7`, `Enter`, `Esc`)." "Don’t lowercase
|
|
45
47
|
* it, don’t spell out modifiers inside, and don’t pack a sentence into the element." "Punctuation
|
|
46
48
|
* lives outside the element: `Press <Kbd meta>K</Kbd> to open the command menu.`" "Period, comma,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../src/components/kbd.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,iVAuDX,CAAC;AAEX,6EAA6E;AAC7E,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/C,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAClD,KAAK,SAAS,GAAG;KAAG,CAAC,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAC/C,KAAK,YAAY,GAAG;KAAG,CAAC,IAAI,QAAQ,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,SAAS;CAAE,CAAC,QAAQ,CAAC,CAAC;AAE/E,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,GAAG,CACE,CAAC,SAAS,GAAG;IACX;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,GACF,CAAC,YAAY,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,CAC5C,CAAC;AA6BJ
|
|
1
|
+
{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../src/components/kbd.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,iVAuDX,CAAC;AAEX,6EAA6E;AAC7E,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/C,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAClD,KAAK,SAAS,GAAG;KAAG,CAAC,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAC/C,KAAK,YAAY,GAAG;KAAG,CAAC,IAAI,QAAQ,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,SAAS;CAAE,CAAC,QAAQ,CAAC,CAAC;AAE/E,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,GAAG,CACE,CAAC,SAAS,GAAG;IACX;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,GACF,CAAC,YAAY,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,CAC5C,CAAC;AA6BJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,GAAG,CAAC,EACX,SAAS,EACT,IAAgB,EAChB,IAAI,EACJ,KAAK,EACL,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,QAAQ,+BA+BV;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}
|
package/dist/components/kbd.js
CHANGED
|
@@ -97,10 +97,12 @@ const beforeThePlatformIsKnown = () => true;
|
|
|
97
97
|
* to half your users." (https://vercel.com/geist/keyboard-input)
|
|
98
98
|
* Ours: not interactive. ⌘ ⇧ ⌥ ⌃ on Apple systems, *Ctrl* *Shift* *Alt* elsewhere, with `meta`
|
|
99
99
|
* becoming *Ctrl*. The server draws the Apple form and the browser corrects it after hydration.
|
|
100
|
-
* Several flags make one key: `meta shift
|
|
100
|
+
* Several flags make one key: `meta shift`; there is no `KbdGroup`. `CommandShortcut` draws this
|
|
101
|
+
* same `Kbd`. It is 24 px high (`size="sm"`: 20 px) in the interface's
|
|
101
102
|
* sans type, 14 px (12 px), with no gap between Apple glyphs. Colour: one neutral key in the primary
|
|
102
103
|
* ink on the page surface with a hairline ring, no hue; inside a tooltip it drops the ring and takes
|
|
103
|
-
* a fill one step off the tooltip's inverted surface,
|
|
104
|
+
* a fill one step off the tooltip's inverted surface, and the tooltip draws it 20 px high whatever
|
|
105
|
+
* its `size`.
|
|
104
106
|
* @words "`children` is one key, digit, or named key (`K`, `7`, `Enter`, `Esc`)." "Don’t lowercase
|
|
105
107
|
* it, don’t spell out modifiers inside, and don’t pack a sentence into the element." "Punctuation
|
|
106
108
|
* lives outside the element: `Press <Kbd meta>K</Kbd> to open the command menu.`" "Period, comma,
|
|
@@ -5,10 +5,15 @@ import * as React from "react";
|
|
|
5
5
|
* @family Inputs
|
|
6
6
|
* @when "Accessible text label for form controls." (https://vercel.com/geist/label) Ours: a control
|
|
7
7
|
* standing on its own that needs a visible name: a checkbox's sentence, a switch's
|
|
8
|
-
* setting, a bare control in a toolbar or a table cell.
|
|
8
|
+
* setting, a bare control in a toolbar or a table cell. `FieldLabel` is the same label inside a
|
|
9
|
+
* `Field`.
|
|
9
10
|
* @instead A text box, a textarea or a select names itself with its own `label`, so it never needs
|
|
10
|
-
* this. A group of controls takes `FieldLegend
|
|
11
|
-
*
|
|
11
|
+
* this. A group of controls takes `FieldLegend`, a heading at 16 px semibold (its `label` variant
|
|
12
|
+
* is 13 px regular, like this label). A short tag of metadata is a `Tag`. Geist's `value` and
|
|
13
|
+
* `withInput` are not needed: the label is its children, and the `Field` places it, 8 px above a
|
|
14
|
+
* control in a vertical `Field`, at 13 px regular.
|
|
15
|
+
* @behaviour In a vertical `Field` it stands above its control, 8 px clear of it (the `Field`'s gap;
|
|
16
|
+
* the label has no margin), in 13 px type at regular weight in the secondary grey, one step
|
|
12
17
|
* quieter than the control's own text. Beside a checkbox or a radio it is the sentence at 13 px in
|
|
13
18
|
* the text colour; beside a switch it is 12 px at medium weight. It stays neutral when the control
|
|
14
19
|
* is invalid. When its control is disabled it steps down to the placeholder grey, never in opacity.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B
|
|
1
|
+
{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAY7E;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
package/dist/components/label.js
CHANGED
|
@@ -7,10 +7,15 @@ import { cn } from "../lib/utils.js";
|
|
|
7
7
|
* @family Inputs
|
|
8
8
|
* @when "Accessible text label for form controls." (https://vercel.com/geist/label) Ours: a control
|
|
9
9
|
* standing on its own that needs a visible name: a checkbox's sentence, a switch's
|
|
10
|
-
* setting, a bare control in a toolbar or a table cell.
|
|
10
|
+
* setting, a bare control in a toolbar or a table cell. `FieldLabel` is the same label inside a
|
|
11
|
+
* `Field`.
|
|
11
12
|
* @instead A text box, a textarea or a select names itself with its own `label`, so it never needs
|
|
12
|
-
* this. A group of controls takes `FieldLegend
|
|
13
|
-
*
|
|
13
|
+
* this. A group of controls takes `FieldLegend`, a heading at 16 px semibold (its `label` variant
|
|
14
|
+
* is 13 px regular, like this label). A short tag of metadata is a `Tag`. Geist's `value` and
|
|
15
|
+
* `withInput` are not needed: the label is its children, and the `Field` places it, 8 px above a
|
|
16
|
+
* control in a vertical `Field`, at 13 px regular.
|
|
17
|
+
* @behaviour In a vertical `Field` it stands above its control, 8 px clear of it (the `Field`'s gap;
|
|
18
|
+
* the label has no margin), in 13 px type at regular weight in the secondary grey, one step
|
|
14
19
|
* quieter than the control's own text. Beside a checkbox or a radio it is the sentence at 13 px in
|
|
15
20
|
* the text colour; beside a switch it is 12 px at medium weight. It stays neutral when the control
|
|
16
21
|
* is invalid. When its control is disabled it steps down to the placeholder grey, never in opacity.
|
|
@@ -17,9 +17,10 @@ type LoadMoreButtonProps = Omit<TextButtonProps, "children" | "loading" | "loadi
|
|
|
17
17
|
* @family Actions
|
|
18
18
|
* @when "A full-width button used to append more items to a paginated list, with loading and styling variants." (https://vercel.com/geist/load-more-button)
|
|
19
19
|
* Ours: a list that grows in place by a page of items at a time: older events, more results. The
|
|
20
|
-
* button follows the last item.
|
|
20
|
+
* button follows the last item; `ActivityFeed`'s `older` is one.
|
|
21
21
|
* @instead A list that is whole stays whole, with no button.
|
|
22
|
-
* Going to another page of the product is a `ButtonLink
|
|
22
|
+
* Going to another page of the product is a `ButtonLink`, which `ActivityFeed`'s `older` is when it
|
|
23
|
+
* navigates.
|
|
23
24
|
* @behaviour Takes the list's full width, 36 px high, below the last item, always `outline`: neutral,
|
|
24
25
|
* no hue in any state. The label and the `loadingLabel` are both required. While the next items load
|
|
25
26
|
* it is `loading`, held in the muted look, and the rows already shown stay. It sits one `md` step
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"load-more-button.d.ts","sourceRoot":"","sources":["../../src/components/load-more-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAU,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGnE,KAAK,mBAAmB,GAAG,IAAI,CAC7B,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAC7F,GAAG;IACF,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"load-more-button.d.ts","sourceRoot":"","sources":["../../src/components/load-more-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAU,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGnE,KAAK,mBAAmB,GAAG,IAAI,CAC7B,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAC7F,GAAG;IACF,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,OAAO,EACP,cAAsB,EACtB,KAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAerB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -7,9 +7,10 @@ import { cn } from "../lib/utils.js";
|
|
|
7
7
|
* @family Actions
|
|
8
8
|
* @when "A full-width button used to append more items to a paginated list, with loading and styling variants." (https://vercel.com/geist/load-more-button)
|
|
9
9
|
* Ours: a list that grows in place by a page of items at a time: older events, more results. The
|
|
10
|
-
* button follows the last item.
|
|
10
|
+
* button follows the last item; `ActivityFeed`'s `older` is one.
|
|
11
11
|
* @instead A list that is whole stays whole, with no button.
|
|
12
|
-
* Going to another page of the product is a `ButtonLink
|
|
12
|
+
* Going to another page of the product is a `ButtonLink`, which `ActivityFeed`'s `older` is when it
|
|
13
|
+
* navigates.
|
|
13
14
|
* @behaviour Takes the list's full width, 36 px high, below the last item, always `outline`: neutral,
|
|
14
15
|
* no hue in any state. The label and the `loadingLabel` are both required. While the next items load
|
|
15
16
|
* it is `loading`, held in the muted look, and the rows already shown stay. It sits one `md` step
|
|
@@ -21,7 +21,7 @@ export type MessageNoticeProps = {
|
|
|
21
21
|
* @family Feedback
|
|
22
22
|
* @when "Display text that requires attention or provides additional information." (https://vercel.com/geist/note) "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) "Choose `variant` by meaning: `error` for a problem the user must fix, `warning` for a consequence to acknowledge, `success` for a passed check, `secondary` for neutral information." (https://vercel.com/geist/note) Ours: a message beside the field, card or section it describes, under the control whose write failed (`action`), or atop the section whose condition lasts (`section`). The `tone` is the `variant`: `destructive` is `error`, `warning` is `warning`, `info` is `success` (a passed check or a state the product manages for the reader, drawn in the accent blue) and `neutral` is `secondary`; there is no violet or cyan.
|
|
23
23
|
* @instead "Pick `Banner` when the message is page-level or system-wide and needs a CTA, `Toast` for transient acknowledgments, `Modal` for destructive confirmations." (https://vercel.com/geist/note) Ours: `Banner` is `NoticeBanner`, `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a field's wrong value use `FieldError`. For a failed read use `EmptyState failed`.
|
|
24
|
-
* @behaviour "A Note is persistent until the underlying state changes; don’t add an ad hoc dismiss control because it competes with the message." (https://vercel.com/geist/note) "One Note per concept. Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "The optional `NoteAction` holds a single inline CTA. Don’t pair it with a second button." (https://vercel.com/geist/note) Ours:
|
|
24
|
+
* @behaviour "A Note is persistent until the underlying state changes; don’t add an ad hoc dismiss control because it competes with the message." (https://vercel.com/geist/note) "One Note per concept. Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "The optional `NoteAction` holds a single inline CTA. Don’t pair it with a second button." (https://vercel.com/geist/note) Ours: `Alert` is its primitive. Tone `destructive` by default, `warning`, `info` or `neutral`; there is no `success` tone. Colour sits on the line, the text and the mark; the ground stays clear, and the action stays neutral. `section` is the framed note, a line 36 px high with its mark and sentence on one row and the action at its trailing edge (under 768 px the action takes its own row, full width), with or without an action; `action` is the unframed passage, its mark and sentence on one row with the action link inside the sentence, after a space. The title and the body run on as one passage, the title closed by a full stop when it has none of its own, so the two never read as one sentence; the title leads in bold (semibold in a note, medium in a passage) only when a body follows it, and stands at regular weight alone. A message worded for a notice has one action, a small default button in a section and an underlined 14 px link in the passage, and at most a second one after it (Nadia's *Ask Nadia* after *Try again*), an outline button in a section and a second link in the passage; a third is not shown. Long words wrap, nothing truncates. A successful retry removes it. Required: the catalogue `message`, so the sentence and its mark are always drawn.
|
|
25
25
|
* @words "`NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`." (https://vercel.com/geist/note) "`NoteContent` is one sentence in active voice that names the impact: `Changing this region restarts all functions.`" (https://vercel.com/geist/note) "No `variant="info"` exists; omit `variant` for the default info icon or use `variant="secondary"` for neutral copy." (https://vercel.com/geist/note) "Single-fragment labels take no period; full descriptive sentences in the body do." (https://vercel.com/geist/note) Ours: words come from the catalogue only. The message's title stands in for `NoteLabel` and `NoteContent`, in sentence case, and `info` exists as Geist's blue `success`. The action is labelled with its result: *Try again*, *Sign in*. When the message carries an action, its body does not repeat it: the link is the step, so the body ends before "Try again".
|
|
26
26
|
* @access `action`: `role="alert"` (`status` for info and neutral). `section`: `role="status"`, `aria-live="polite"`, atomic. The mark is hidden. Focus stays where the person was.
|
|
27
27
|
*/
|
|
@@ -20,7 +20,7 @@ const closedSentence = (title) => (/[.!?:…]$/u.test(title) ? title : `${title}
|
|
|
20
20
|
* @family Feedback
|
|
21
21
|
* @when "Display text that requires attention or provides additional information." (https://vercel.com/geist/note) "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) "Choose `variant` by meaning: `error` for a problem the user must fix, `warning` for a consequence to acknowledge, `success` for a passed check, `secondary` for neutral information." (https://vercel.com/geist/note) Ours: a message beside the field, card or section it describes, under the control whose write failed (`action`), or atop the section whose condition lasts (`section`). The `tone` is the `variant`: `destructive` is `error`, `warning` is `warning`, `info` is `success` (a passed check or a state the product manages for the reader, drawn in the accent blue) and `neutral` is `secondary`; there is no violet or cyan.
|
|
22
22
|
* @instead "Pick `Banner` when the message is page-level or system-wide and needs a CTA, `Toast` for transient acknowledgments, `Modal` for destructive confirmations." (https://vercel.com/geist/note) Ours: `Banner` is `NoticeBanner`, `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a field's wrong value use `FieldError`. For a failed read use `EmptyState failed`.
|
|
23
|
-
* @behaviour "A Note is persistent until the underlying state changes; don’t add an ad hoc dismiss control because it competes with the message." (https://vercel.com/geist/note) "One Note per concept. Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "The optional `NoteAction` holds a single inline CTA. Don’t pair it with a second button." (https://vercel.com/geist/note) Ours:
|
|
23
|
+
* @behaviour "A Note is persistent until the underlying state changes; don’t add an ad hoc dismiss control because it competes with the message." (https://vercel.com/geist/note) "One Note per concept. Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "The optional `NoteAction` holds a single inline CTA. Don’t pair it with a second button." (https://vercel.com/geist/note) Ours: `Alert` is its primitive. Tone `destructive` by default, `warning`, `info` or `neutral`; there is no `success` tone. Colour sits on the line, the text and the mark; the ground stays clear, and the action stays neutral. `section` is the framed note, a line 36 px high with its mark and sentence on one row and the action at its trailing edge (under 768 px the action takes its own row, full width), with or without an action; `action` is the unframed passage, its mark and sentence on one row with the action link inside the sentence, after a space. The title and the body run on as one passage, the title closed by a full stop when it has none of its own, so the two never read as one sentence; the title leads in bold (semibold in a note, medium in a passage) only when a body follows it, and stands at regular weight alone. A message worded for a notice has one action, a small default button in a section and an underlined 14 px link in the passage, and at most a second one after it (Nadia's *Ask Nadia* after *Try again*), an outline button in a section and a second link in the passage; a third is not shown. Long words wrap, nothing truncates. A successful retry removes it. Required: the catalogue `message`, so the sentence and its mark are always drawn.
|
|
24
24
|
* @words "`NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`." (https://vercel.com/geist/note) "`NoteContent` is one sentence in active voice that names the impact: `Changing this region restarts all functions.`" (https://vercel.com/geist/note) "No `variant="info"` exists; omit `variant` for the default info icon or use `variant="secondary"` for neutral copy." (https://vercel.com/geist/note) "Single-fragment labels take no period; full descriptive sentences in the body do." (https://vercel.com/geist/note) Ours: words come from the catalogue only. The message's title stands in for `NoteLabel` and `NoteContent`, in sentence case, and `info` exists as Geist's blue `success`. The action is labelled with its result: *Try again*, *Sign in*. When the message carries an action, its body does not repeat it: the link is the step, so the body ends before "Try again".
|
|
25
25
|
* @access `action`: `role="alert"` (`status` for info and neutral). `section`: `role="status"`, `aria-live="polite"`, atomic. The mark is hidden. Focus stays where the person was.
|
|
26
26
|
*/
|
|
@@ -17,13 +17,14 @@ type MultiSelectProps = React.ComponentProps<typeof Popover> & MultiSelectContex
|
|
|
17
17
|
* @family Choices
|
|
18
18
|
* @when "A keyboard-navigable dropdown for selecting multiple items with advanced focus management."
|
|
19
19
|
* (https://vercel.com/geist/multi-select) "Pick `<MultiSelect>` when users pick more than one value
|
|
20
|
-
* from a known list (regions, scopes, tags)." (https://vercel.com/geist/multi-select)
|
|
20
|
+
* from a known list (regions, scopes, tags)." (https://vercel.com/geist/multi-select)
|
|
21
21
|
* @instead "For a single value from a short list, use `Select`."
|
|
22
22
|
* (https://vercel.com/geist/multi-select) "When typing to filter is more important than seeing
|
|
23
23
|
* every option at once, use `Combobox`." (https://vercel.com/geist/multi-select) "Skip
|
|
24
24
|
* `<MultiSelect>` for boolean settings; `Toggle` handles those."
|
|
25
25
|
* (https://vercel.com/geist/multi-select) Ours: `Combobox` takes several values with `multiple`; a
|
|
26
|
-
* yes-or-no setting is a `Switch`, never a one-row multi-select
|
|
26
|
+
* yes-or-no setting is a `Switch`, never a one-row multi-select; the query facets of a collection,
|
|
27
|
+
* where a suggested value waits as a dashed chip, are `CollectionFilters`.
|
|
27
28
|
* @behaviour "Use controlled mode when state lives in the URL or syncs to the server so the trigger
|
|
28
29
|
* label and stored value stay in lockstep." (https://vercel.com/geist/multi-select) "Use controlled
|
|
29
30
|
* state to manage selections programmatically." (https://vercel.com/geist/multi-select) Ours: the
|
|
@@ -45,7 +46,7 @@ type MultiSelectProps = React.ComponentProps<typeof Popover> & MultiSelectContex
|
|
|
45
46
|
* Only, Select All, or Toggle based on context)" (https://vercel.com/geist/multi-select) "**Hidden
|
|
46
47
|
* action labels**: Appear on hover/focus to show available actions"
|
|
47
48
|
* (https://vercel.com/geist/multi-select) Ours: the button's label reads *Select all* on a chosen
|
|
48
|
-
* row while some rows are unchosen, and *Select only* on every other row;
|
|
49
|
+
* row while some rows are unchosen, and *Select only* on every other row, and a list of one row has no button, only the label; the button shows on hover and
|
|
49
50
|
* focus of the row, and always on touch. "Keep checkbox focus and button focus distinct so Up/Down
|
|
50
51
|
* navigates rows and Left/Right toggles between the row’s checkbox and action button."
|
|
51
52
|
* (https://vercel.com/geist/multi-select) "**Up/Down arrows**: Navigate between rows while
|
|
@@ -58,7 +59,8 @@ type MultiSelectProps = React.ComponentProps<typeof Popover> & MultiSelectContex
|
|
|
58
59
|
* (https://vercel.com/geist/multi-select) Ours: focus moves into the list when it opens; Tab leaves
|
|
59
60
|
* it in order. "For empty filters, render `No {items} match "{query}"` rather than `No results`."
|
|
60
61
|
* (https://vercel.com/geist/multi-select) Ours: there is no filter box, so a list that needs one is
|
|
61
|
-
* a `Combobox` with `multiple`.
|
|
62
|
+
* a `Combobox` with `multiple`. Its list is solid, as every menu is, and a row that cannot be chosen
|
|
63
|
+
* turns its text muted, never dimmed.
|
|
62
64
|
* @words The trigger says how many are chosen in the product's words: the name when exactly one is
|
|
63
65
|
* chosen, *No regions selected* when none. It is never empty. Rows are sentence case names.
|
|
64
66
|
* "Announce bulk actions (`Select All`, `Select Only`) through the visible button label so the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG/E,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG,uBAAuB,CAAC;AAEvF
|
|
1
|
+
{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG/E,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG,uBAAuB,CAAC;AAEvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,iBAAS,WAAW,CAAC,EACnB,aAAa,EACb,UAAU,EACV,WAAW,EACX,eAAe,EACf,cAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAUlB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE,uGAAuG;IACvG,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,qBAmCZ;AAwBD,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAe,EACf,UAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,qBAiB7C;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,4CAA4C;IAC5C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAuDA;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -24,13 +24,14 @@ function useMultiSelect() {
|
|
|
24
24
|
* @family Choices
|
|
25
25
|
* @when "A keyboard-navigable dropdown for selecting multiple items with advanced focus management."
|
|
26
26
|
* (https://vercel.com/geist/multi-select) "Pick `<MultiSelect>` when users pick more than one value
|
|
27
|
-
* from a known list (regions, scopes, tags)." (https://vercel.com/geist/multi-select)
|
|
27
|
+
* from a known list (regions, scopes, tags)." (https://vercel.com/geist/multi-select)
|
|
28
28
|
* @instead "For a single value from a short list, use `Select`."
|
|
29
29
|
* (https://vercel.com/geist/multi-select) "When typing to filter is more important than seeing
|
|
30
30
|
* every option at once, use `Combobox`." (https://vercel.com/geist/multi-select) "Skip
|
|
31
31
|
* `<MultiSelect>` for boolean settings; `Toggle` handles those."
|
|
32
32
|
* (https://vercel.com/geist/multi-select) Ours: `Combobox` takes several values with `multiple`; a
|
|
33
|
-
* yes-or-no setting is a `Switch`, never a one-row multi-select
|
|
33
|
+
* yes-or-no setting is a `Switch`, never a one-row multi-select; the query facets of a collection,
|
|
34
|
+
* where a suggested value waits as a dashed chip, are `CollectionFilters`.
|
|
34
35
|
* @behaviour "Use controlled mode when state lives in the URL or syncs to the server so the trigger
|
|
35
36
|
* label and stored value stay in lockstep." (https://vercel.com/geist/multi-select) "Use controlled
|
|
36
37
|
* state to manage selections programmatically." (https://vercel.com/geist/multi-select) Ours: the
|
|
@@ -52,7 +53,7 @@ function useMultiSelect() {
|
|
|
52
53
|
* Only, Select All, or Toggle based on context)" (https://vercel.com/geist/multi-select) "**Hidden
|
|
53
54
|
* action labels**: Appear on hover/focus to show available actions"
|
|
54
55
|
* (https://vercel.com/geist/multi-select) Ours: the button's label reads *Select all* on a chosen
|
|
55
|
-
* row while some rows are unchosen, and *Select only* on every other row;
|
|
56
|
+
* row while some rows are unchosen, and *Select only* on every other row, and a list of one row has no button, only the label; the button shows on hover and
|
|
56
57
|
* focus of the row, and always on touch. "Keep checkbox focus and button focus distinct so Up/Down
|
|
57
58
|
* navigates rows and Left/Right toggles between the row’s checkbox and action button."
|
|
58
59
|
* (https://vercel.com/geist/multi-select) "**Up/Down arrows**: Navigate between rows while
|
|
@@ -65,7 +66,8 @@ function useMultiSelect() {
|
|
|
65
66
|
* (https://vercel.com/geist/multi-select) Ours: focus moves into the list when it opens; Tab leaves
|
|
66
67
|
* it in order. "For empty filters, render `No {items} match "{query}"` rather than `No results`."
|
|
67
68
|
* (https://vercel.com/geist/multi-select) Ours: there is no filter box, so a list that needs one is
|
|
68
|
-
* a `Combobox` with `multiple`.
|
|
69
|
+
* a `Combobox` with `multiple`. Its list is solid, as every menu is, and a row that cannot be chosen
|
|
70
|
+
* turns its text muted, never dimmed.
|
|
69
71
|
* @words The trigger says how many are chosen in the product's words: the name when exactly one is
|
|
70
72
|
* chosen, *No regions selected* when none. It is never empty. Rows are sentence case names.
|
|
71
73
|
* "Announce bulk actions (`Select All`, `Select Only`) through the visible button label so the
|
|
@@ -23,8 +23,8 @@ export type NoticeBannerProps = {
|
|
|
23
23
|
*
|
|
24
24
|
* @family Feedback
|
|
25
25
|
* @when "A prominent message that spans the full width of its container to announce important information." (https://vercel.com/geist/banner) "Used for temporary, project-wide notifications that require resolution" (https://vercel.com/geist/project-banner) "Use Project Banner for project-wide states that need resolution: overdue billing, an active rollback, attack mitigation, an expiring trial blocking deploys." (https://vercel.com/geist/project-banner) "Match `variant` to severity: `error` for critical downtime or payment-blocking states, `warning` for an exceptional state with non-immediate action, `success` for a positive temporary mitigation, `gray` for routine project-wide notices." (https://vercel.com/geist/project-banner) Ours: a condition of the whole page, the account or the service that the page itself can resolve, with that resolving action on the banner. The `tone` is the `variant`: `destructive` is `error`, `warning` is `warning`, `info` is `success` and `neutral` is `gray`. One sits above the page's content, under its title.
|
|
26
|
-
* @instead "Pick `Note` for inline contextual messages tied to a single field or card, `Toast` for transient acknowledgments, `Modal` for confirmations." (https://vercel.com/geist/project-banner) Ours: `Note` is `MessageNotice` (`placement="section"`), `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
|
|
27
|
-
* @behaviour "Project Banner is non-dismissible by design. If the message can be dismissed without resolving the underlying state, it isn’t banner-worthy; move it to a `Note`." (https://vercel.com/geist/project-banner) "Show one Project Banner at a time. Stacking competing banners drowns the most urgent state." (https://vercel.com/geist/project-banner) "Always pass a `callToAction` that resolves the state. A banner with no route is a dead end." (https://vercel.com/geist/project-banner) Ours: a strip as wide as its container: a filled ground with a line on its top and bottom edge only, no corners, 40 px high and centred, with the mark, the sentence and the fix on one row; under 768 px the fix drops under the sentence, aligned with its text. Colour sits on the whole strip (ground, both lines, mark and text); the fix is an underlined link in the darkest step of the same hue (neutral: `text-foreground`) and returns to the strip's text on hover. Neutral and info take the Info mark, warning and destructive the TriangleAlert. `action` is the `callToAction`: one command, never two, never a ready-made button, and there is no close button. Required: `action`, `title`, `tone` and `liveRegion`; the mark is always drawn.
|
|
26
|
+
* @instead "Pick `Note` for inline contextual messages tied to a single field or card, `Toast` for transient acknowledgments, `Modal` for confirmations." (https://vercel.com/geist/project-banner) Ours: there is no announcement strip. `Note` is `MessageNotice` (`placement="section"`), `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
|
|
27
|
+
* @behaviour "Project Banner is non-dismissible by design. If the message can be dismissed without resolving the underlying state, it isn’t banner-worthy; move it to a `Note`." (https://vercel.com/geist/project-banner) "Show one Project Banner at a time. Stacking competing banners drowns the most urgent state." (https://vercel.com/geist/project-banner) "Always pass a `callToAction` that resolves the state. A banner with no route is a dead end." (https://vercel.com/geist/project-banner) Ours: a strip as wide as its container: a filled ground with a line on its top and bottom edge only, no corners, 40 px high and centred, with the mark, the sentence and the fix on one row; under 768 px the fix drops under the sentence, aligned with its text. Colour sits on the whole strip (ground, both lines, mark and text); the fix is an underlined link in the darkest step of the same hue (neutral: `text-foreground`) and returns to the strip's text on hover. Neutral and info take the Info mark, warning and destructive the TriangleAlert. `action` is the `callToAction`: one command, never two, never a ready-made button, and there is no close button. Required: `action`, `title`, `tone` and `liveRegion`; the mark is always drawn, and `icon` swaps the tone's mark for another lucide icon.
|
|
28
28
|
* @words "`label` is one sentence in sentence case that names the impact: `Your Pro trial expires in 3 days.` Don’t open with `Heads up` or apologetic preambles." (https://vercel.com/geist/project-banner) "`callToAction.label` is Title Case `Verb + Noun` and points at the resolver: `Update Payment Method`, `Reactivate Project`, `Review Tokens`." (https://vercel.com/geist/project-banner) "Name the affected entity when the project context isn’t obvious from the surrounding chrome (`Production deployments are paused on my-project`)." (https://vercel.com/geist/project-banner) "Don’t encode severity in the copy with emoji or interjections; the variant carries that signal." (https://vercel.com/geist/project-banner) "`NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`." (https://vercel.com/geist/note) Ours: the `title` is the `label`: the one sentence, naming the condition, its impact and the object. A `description` only adds what the title leaves out, in one more sentence. Our `label` is the `NoteLabel` topic prefix. The action is sentence case, verb and noun, pointing at the resolver: "Open Slack settings", "Update card". No "Please". The words come from the product's catalogue code.
|
|
29
29
|
* @access `liveRegion="polite"` gives `role="status"`, announced once when it appears; `"off"` gives `role="note"` for one already there at load. The mark, given or not, is hidden.
|
|
30
30
|
*/
|
|
@@ -8,8 +8,8 @@ import { cn } from "../lib/utils.js";
|
|
|
8
8
|
*
|
|
9
9
|
* @family Feedback
|
|
10
10
|
* @when "A prominent message that spans the full width of its container to announce important information." (https://vercel.com/geist/banner) "Used for temporary, project-wide notifications that require resolution" (https://vercel.com/geist/project-banner) "Use Project Banner for project-wide states that need resolution: overdue billing, an active rollback, attack mitigation, an expiring trial blocking deploys." (https://vercel.com/geist/project-banner) "Match `variant` to severity: `error` for critical downtime or payment-blocking states, `warning` for an exceptional state with non-immediate action, `success` for a positive temporary mitigation, `gray` for routine project-wide notices." (https://vercel.com/geist/project-banner) Ours: a condition of the whole page, the account or the service that the page itself can resolve, with that resolving action on the banner. The `tone` is the `variant`: `destructive` is `error`, `warning` is `warning`, `info` is `success` and `neutral` is `gray`. One sits above the page's content, under its title.
|
|
11
|
-
* @instead "Pick `Note` for inline contextual messages tied to a single field or card, `Toast` for transient acknowledgments, `Modal` for confirmations." (https://vercel.com/geist/project-banner) Ours: `Note` is `MessageNotice` (`placement="section"`), `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
|
|
12
|
-
* @behaviour "Project Banner is non-dismissible by design. If the message can be dismissed without resolving the underlying state, it isn’t banner-worthy; move it to a `Note`." (https://vercel.com/geist/project-banner) "Show one Project Banner at a time. Stacking competing banners drowns the most urgent state." (https://vercel.com/geist/project-banner) "Always pass a `callToAction` that resolves the state. A banner with no route is a dead end." (https://vercel.com/geist/project-banner) Ours: a strip as wide as its container: a filled ground with a line on its top and bottom edge only, no corners, 40 px high and centred, with the mark, the sentence and the fix on one row; under 768 px the fix drops under the sentence, aligned with its text. Colour sits on the whole strip (ground, both lines, mark and text); the fix is an underlined link in the darkest step of the same hue (neutral: `text-foreground`) and returns to the strip's text on hover. Neutral and info take the Info mark, warning and destructive the TriangleAlert. `action` is the `callToAction`: one command, never two, never a ready-made button, and there is no close button. Required: `action`, `title`, `tone` and `liveRegion`; the mark is always drawn.
|
|
11
|
+
* @instead "Pick `Note` for inline contextual messages tied to a single field or card, `Toast` for transient acknowledgments, `Modal` for confirmations." (https://vercel.com/geist/project-banner) Ours: there is no announcement strip. `Note` is `MessageNotice` (`placement="section"`), `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
|
|
12
|
+
* @behaviour "Project Banner is non-dismissible by design. If the message can be dismissed without resolving the underlying state, it isn’t banner-worthy; move it to a `Note`." (https://vercel.com/geist/project-banner) "Show one Project Banner at a time. Stacking competing banners drowns the most urgent state." (https://vercel.com/geist/project-banner) "Always pass a `callToAction` that resolves the state. A banner with no route is a dead end." (https://vercel.com/geist/project-banner) Ours: a strip as wide as its container: a filled ground with a line on its top and bottom edge only, no corners, 40 px high and centred, with the mark, the sentence and the fix on one row; under 768 px the fix drops under the sentence, aligned with its text. Colour sits on the whole strip (ground, both lines, mark and text); the fix is an underlined link in the darkest step of the same hue (neutral: `text-foreground`) and returns to the strip's text on hover. Neutral and info take the Info mark, warning and destructive the TriangleAlert. `action` is the `callToAction`: one command, never two, never a ready-made button, and there is no close button. Required: `action`, `title`, `tone` and `liveRegion`; the mark is always drawn, and `icon` swaps the tone's mark for another lucide icon.
|
|
13
13
|
* @words "`label` is one sentence in sentence case that names the impact: `Your Pro trial expires in 3 days.` Don’t open with `Heads up` or apologetic preambles." (https://vercel.com/geist/project-banner) "`callToAction.label` is Title Case `Verb + Noun` and points at the resolver: `Update Payment Method`, `Reactivate Project`, `Review Tokens`." (https://vercel.com/geist/project-banner) "Name the affected entity when the project context isn’t obvious from the surrounding chrome (`Production deployments are paused on my-project`)." (https://vercel.com/geist/project-banner) "Don’t encode severity in the copy with emoji or interjections; the variant carries that signal." (https://vercel.com/geist/project-banner) "`NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`." (https://vercel.com/geist/note) Ours: the `title` is the `label`: the one sentence, naming the condition, its impact and the object. A `description` only adds what the title leaves out, in one more sentence. Our `label` is the `NoteLabel` topic prefix. The action is sentence case, verb and noun, pointing at the resolver: "Open Slack settings", "Update card". No "Please". The words come from the product's catalogue code.
|
|
14
14
|
* @access `liveRegion="polite"` gives `role="status"`, announced once when it appears; `"off"` gives `role="note"` for one already there at load. The mark, given or not, is hidden.
|
|
15
15
|
*/
|
|
@@ -17,7 +17,7 @@ export type ObjectFact = ObjectFactShape & ({
|
|
|
17
17
|
ellipsis?: never;
|
|
18
18
|
} | {
|
|
19
19
|
block?: false;
|
|
20
|
-
/** A value that ends in an ellipsis on one line
|
|
20
|
+
/** A value that ends in an ellipsis on one line instead of wrapping; a string value is also whole in its title. Not available on a `block` fact. */
|
|
21
21
|
ellipsis?: boolean;
|
|
22
22
|
});
|
|
23
23
|
/**
|
|
@@ -26,7 +26,7 @@ export type ObjectFact = ObjectFactShape & ({
|
|
|
26
26
|
* @family Compositions
|
|
27
27
|
* @when A part of an ObjectPage a person reads or changes on its own: a customer's Company details, an Agent's Instructions, a Library entry's source.
|
|
28
28
|
* @instead Values a person edits and saves together are a SettingsSection; a list of the object's records is a RecordList with its heading; a passing condition is a MessageNotice.
|
|
29
|
-
* @behaviour A resting card: its title and the one-sentence description directly under it, both always given, at the trailing edge `meta` (muted) then `action` as an outline button, then its body. No icon in the header. Neutral throughout.
|
|
29
|
+
* @behaviour A resting card: its title and the one-sentence description directly under it, both always given, at the trailing edge `meta` (muted) then `action` as an outline button, then its body. No icon in the header. Neutral throughout. A section that edits in place swaps to the same section as a `SettingsSection`, with Cancel (`save.cancel`) before Save.
|
|
30
30
|
* @words The title names what the section holds ("Company", "Instructions"); the description says in one sentence what it holds or lets a person change; the action is a verb on it ("Edit"); `meta` is a short count or time ("2 of 5 Agents").
|
|
31
31
|
* @access The title is a heading one level under the page (h2), deeper only under another heading through `headingLevel`.
|
|
32
32
|
*/
|
|
@@ -49,7 +49,7 @@ export declare function ObjectSection({ title, description, action, meta, childr
|
|
|
49
49
|
* @when “Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`). For inline help under a form field, use the input’s helper-text slot instead.” (https://vercel.com/geist/description)
|
|
50
50
|
* Ours: read-only values that describe an object, inside an ObjectSection: a company's legal name, VAT number and address. One fact alone is a description: a short label over its value.
|
|
51
51
|
* @instead Facts under the object's name belong to ObjectPage's `facts`; values a person changes are SettingsFields in a SettingsSection; figures compared across records are a DataTable.
|
|
52
|
-
* @behaviour Two columns from `sm`, one below; `compact` tightens the gaps for a dense card; a `block` fact takes the full width and keeps its line breaks. A fact is its label (14/14 px, muted) over its value (14/16 px, medium, ink) 8 px apart in a 16 px label line, 40 px in all; every fact has both. `right` aligns a fact to the trailing edge, and `ellipsis` cuts the label and the value to one line,
|
|
52
|
+
* @behaviour Two columns from `sm`, one below; `compact` tightens the gaps for a dense card; a `block` fact takes the full width and keeps its line breaks. A fact is its label (14/14 px, muted) over its value (14/16 px, medium, ink) 8 px apart in a 16 px label line, 40 px in all; every fact has both. `right` aligns a fact to the trailing edge, and `ellipsis` cuts the label and the value to one line, and a string value is whole in its title; a `block` fact cannot take it. Neutral throughout.
|
|
53
53
|
* “Pass `tooltip` only when the title alone is ambiguous and a one-sentence definition resolves it. The tooltip text is sentence case and ends with a period.” (https://vercel.com/geist/description)
|
|
54
54
|
* Ours: the `tooltip` stands behind an info icon after the label that a keyboard reaches; the value never carries it.
|
|
55
55
|
* @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)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"object-workspace.d.ts","sourceRoot":"","sources":["../../src/components/object-workspace.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAI9C,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAGrE,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,eAAe,GACtC,CACI;IACE;;;OAGG;IACH,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,
|
|
1
|
+
{"version":3,"file":"object-workspace.d.ts","sourceRoot":"","sources":["../../src/components/object-workspace.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAI9C,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAGrE,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,eAAe,GACtC,CACI;IACE;;;OAGG;IACH,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,oJAAoJ;IACpJ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CACJ,CAAC;AAEJ;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,YAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,kEAAkE;IAClE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sFAAsF;IACtF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1B,+BAsBA;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAmB,GACpB,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,+BAwDA"}
|
|
@@ -11,7 +11,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
|
|
|
11
11
|
* @family Compositions
|
|
12
12
|
* @when A part of an ObjectPage a person reads or changes on its own: a customer's Company details, an Agent's Instructions, a Library entry's source.
|
|
13
13
|
* @instead Values a person edits and saves together are a SettingsSection; a list of the object's records is a RecordList with its heading; a passing condition is a MessageNotice.
|
|
14
|
-
* @behaviour A resting card: its title and the one-sentence description directly under it, both always given, at the trailing edge `meta` (muted) then `action` as an outline button, then its body. No icon in the header. Neutral throughout.
|
|
14
|
+
* @behaviour A resting card: its title and the one-sentence description directly under it, both always given, at the trailing edge `meta` (muted) then `action` as an outline button, then its body. No icon in the header. Neutral throughout. A section that edits in place swaps to the same section as a `SettingsSection`, with Cancel (`save.cancel`) before Save.
|
|
15
15
|
* @words The title names what the section holds ("Company", "Instructions"); the description says in one sentence what it holds or lets a person change; the action is a verb on it ("Edit"); `meta` is a short count or time ("2 of 5 Agents").
|
|
16
16
|
* @access The title is a heading one level under the page (h2), deeper only under another heading through `headingLevel`.
|
|
17
17
|
*/
|
|
@@ -25,7 +25,7 @@ export function ObjectSection({ title, description, action, meta, children, head
|
|
|
25
25
|
* @when “Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`). For inline help under a form field, use the input’s helper-text slot instead.” (https://vercel.com/geist/description)
|
|
26
26
|
* Ours: read-only values that describe an object, inside an ObjectSection: a company's legal name, VAT number and address. One fact alone is a description: a short label over its value.
|
|
27
27
|
* @instead Facts under the object's name belong to ObjectPage's `facts`; values a person changes are SettingsFields in a SettingsSection; figures compared across records are a DataTable.
|
|
28
|
-
* @behaviour Two columns from `sm`, one below; `compact` tightens the gaps for a dense card; a `block` fact takes the full width and keeps its line breaks. A fact is its label (14/14 px, muted) over its value (14/16 px, medium, ink) 8 px apart in a 16 px label line, 40 px in all; every fact has both. `right` aligns a fact to the trailing edge, and `ellipsis` cuts the label and the value to one line,
|
|
28
|
+
* @behaviour Two columns from `sm`, one below; `compact` tightens the gaps for a dense card; a `block` fact takes the full width and keeps its line breaks. A fact is its label (14/14 px, muted) over its value (14/16 px, medium, ink) 8 px apart in a 16 px label line, 40 px in all; every fact has both. `right` aligns a fact to the trailing edge, and `ellipsis` cuts the label and the value to one line, and a string value is whole in its title; a `block` fact cannot take it. Neutral throughout.
|
|
29
29
|
* “Pass `tooltip` only when the title alone is ambiguous and a one-sentence definition resolves it. The tooltip text is sentence case and ends with a period.” (https://vercel.com/geist/description)
|
|
30
30
|
* Ours: the `tooltip` stands behind an info icon after the label that a keyboard reaches; the value never carries it.
|
|
31
31
|
* @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)
|
|
@@ -17,8 +17,8 @@ export type PairingCodeProps = Omit<React.ComponentProps<"div">, "children" | "r
|
|
|
17
17
|
* @when Pairing two devices or apps a person can see side by side: the four digits Nadia and
|
|
18
18
|
* Alveare Server both show while a Nadia asks to join.
|
|
19
19
|
* @instead A code a person types is `InputOTP`. A link another device scans is `QrCode`.
|
|
20
|
-
* @behaviour Each digit in its own cell
|
|
21
|
-
* is a digit.
|
|
20
|
+
* @behaviour Each digit in its own cell at `heading-lg` with tabular figures, large enough to
|
|
21
|
+
* compare from across a desk. A leading zero is a digit. It only shows a code and takes no input.
|
|
22
22
|
* @words The label says what the code is: *Pairing code*.
|
|
23
23
|
* @access `role="img"` named by the label and the digits read one by one.
|
|
24
24
|
*/
|
|
@@ -12,8 +12,8 @@ import { cn } from "../lib/utils.js";
|
|
|
12
12
|
* @when Pairing two devices or apps a person can see side by side: the four digits Nadia and
|
|
13
13
|
* Alveare Server both show while a Nadia asks to join.
|
|
14
14
|
* @instead A code a person types is `InputOTP`. A link another device scans is `QrCode`.
|
|
15
|
-
* @behaviour Each digit in its own cell
|
|
16
|
-
* is a digit.
|
|
15
|
+
* @behaviour Each digit in its own cell at `heading-lg` with tabular figures, large enough to
|
|
16
|
+
* compare from across a desk. A leading zero is a digit. It only shows a code and takes no input.
|
|
17
17
|
* @words The label says what the code is: *Pairing code*.
|
|
18
18
|
* @access `role="img"` named by the label and the digits read one by one.
|
|
19
19
|
*/
|
|
@@ -11,8 +11,9 @@ import type { ReactNode } from "react";
|
|
|
11
11
|
* the page stays. Never turn the whole page into an error because one card failed.
|
|
12
12
|
* @behaviour Picture 256 px, 320 from sm, 384 from lg. The label stands centred under the picture at
|
|
13
13
|
* every width, on the same centre line as the words below. Still.
|
|
14
|
-
* @words Never apologise, never name the mechanism. The label's title says what the
|
|
15
|
-
* doing; the second line gives its materials and
|
|
14
|
+
* @words Never apologise, never name the mechanism. The label's title says what the figure in the
|
|
15
|
+
* picture is doing, which is the page's one joke; the second line, in mono, gives its materials and
|
|
16
|
+
* year.
|
|
16
17
|
* @access The picture is decorative; the label is a `figcaption`, read once. The page's heading is
|
|
17
18
|
* its `h1`; its actions are real links.
|
|
18
19
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"picture-label.d.ts","sourceRoot":"","sources":["../../src/components/picture-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC
|
|
1
|
+
{"version":3,"file":"picture-label.d.ts","sourceRoot":"","sources":["../../src/components/picture-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAUA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,+BASlF"}
|
|
@@ -12,8 +12,9 @@ import { cn } from "../lib/utils.js";
|
|
|
12
12
|
* the page stays. Never turn the whole page into an error because one card failed.
|
|
13
13
|
* @behaviour Picture 256 px, 320 from sm, 384 from lg. The label stands centred under the picture at
|
|
14
14
|
* every width, on the same centre line as the words below. Still.
|
|
15
|
-
* @words Never apologise, never name the mechanism. The label's title says what the
|
|
16
|
-
* doing; the second line gives its materials and
|
|
15
|
+
* @words Never apologise, never name the mechanism. The label's title says what the figure in the
|
|
16
|
+
* picture is doing, which is the page's one joke; the second line, in mono, gives its materials and
|
|
17
|
+
* year.
|
|
17
18
|
* @access The picture is decorative; the label is a `figcaption`, read once. The page's heading is
|
|
18
19
|
* its `h1`; its actions are real links.
|
|
19
20
|
*/
|
|
@@ -7,13 +7,17 @@ import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
|
|
|
7
7
|
* @when A small control set tied to its trigger: filters, a scope chooser, a date range, a feedback
|
|
8
8
|
* form. The page stays live behind it.
|
|
9
9
|
* @instead For commands use `DropdownMenu`. For a form that adds a record use `FormDialog`. For one
|
|
10
|
-
* phrase use `Tooltip`; for facts on hover use `HoverCard`.
|
|
10
|
+
* phrase use `Tooltip`; for facts on hover use `HoverCard`. DESIGN.md "Menus and commands" decides
|
|
11
|
+
* which surface a job takes.
|
|
11
12
|
* @behaviour Solid floating surface, 12 px padding and gap. Opens on click, closes on Escape or
|
|
12
|
-
* outside press, focus returns to the trigger.
|
|
13
|
+
* outside press, focus returns to the trigger. A control set applies at once, with no Save inside;
|
|
14
|
+
* a feedback form is the exception: its button sends it, it shows its pending and result state, and
|
|
15
|
+
* it keeps what was typed when sending fails.
|
|
13
16
|
* @words Title names the control's job (*Filter skills*); an optional one-line description. Options
|
|
14
17
|
* are nouns.
|
|
15
18
|
* @access Trigger has a visible name and `aria-expanded`. The popup is a labelled dialog that does
|
|
16
|
-
* not trap focus; Tab leaves it in order.
|
|
19
|
+
* not trap focus; Tab leaves it in order. Nothing essential shows only on hover: what a person
|
|
20
|
+
* needs to read stays visible in the trigger or the page, never only in the popup's hover state.
|
|
17
21
|
*/
|
|
18
22
|
declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
|
|
19
23
|
declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,qBAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,WAAe,EACf,IAAe,EACf,UAAc,EACd,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CACF,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAC3D,qBAwBF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,qBAQ1E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,qBAQtF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -9,13 +9,17 @@ import { anchoredOverlayMotion } from "../lib/motion.js";
|
|
|
9
9
|
* @when A small control set tied to its trigger: filters, a scope chooser, a date range, a feedback
|
|
10
10
|
* form. The page stays live behind it.
|
|
11
11
|
* @instead For commands use `DropdownMenu`. For a form that adds a record use `FormDialog`. For one
|
|
12
|
-
* phrase use `Tooltip`; for facts on hover use `HoverCard`.
|
|
12
|
+
* phrase use `Tooltip`; for facts on hover use `HoverCard`. DESIGN.md "Menus and commands" decides
|
|
13
|
+
* which surface a job takes.
|
|
13
14
|
* @behaviour Solid floating surface, 12 px padding and gap. Opens on click, closes on Escape or
|
|
14
|
-
* outside press, focus returns to the trigger.
|
|
15
|
+
* outside press, focus returns to the trigger. A control set applies at once, with no Save inside;
|
|
16
|
+
* a feedback form is the exception: its button sends it, it shows its pending and result state, and
|
|
17
|
+
* it keeps what was typed when sending fails.
|
|
15
18
|
* @words Title names the control's job (*Filter skills*); an optional one-line description. Options
|
|
16
19
|
* are nouns.
|
|
17
20
|
* @access Trigger has a visible name and `aria-expanded`. The popup is a labelled dialog that does
|
|
18
|
-
* not trap focus; Tab leaves it in order.
|
|
21
|
+
* not trap focus; Tab leaves it in order. Nothing essential shows only on hover: what a person
|
|
22
|
+
* needs to read stays visible in the trigger or the page, never only in the popup's hover state.
|
|
19
23
|
*/
|
|
20
24
|
function Popover({ ...props }) {
|
|
21
25
|
return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
|
|
@@ -38,7 +38,7 @@ export type ProgressChecklistProps = {
|
|
|
38
38
|
* @when “Production Checklist”, the ring at the end of a project's row on Vercel's Projects page, which opens the steps that make a project ready for production. (https://vercel.com/dashboard)
|
|
39
39
|
* Ours: the steps a Customer or a Partner takes before nadicode's work runs for them, each one a fact the Portal can read (company details confirmed, a plan, Nadia connected, an Agent at work), at the end of the record's row.
|
|
40
40
|
* @instead Steps a person follows on a page, one after the other, are `NumberedSteps`; a setup with a wait is `FormDrawer job="steps"`. A ratio with no steps behind it is a `Gauge`. One state of a record is a `StatusBadge`.
|
|
41
|
-
* @behaviour The ring is a 24 px `Gauge` in blue with the double check inside in ink, so the glyph reads at a glance, on a 36 px ghost button whose tooltip names the checklist and how far it is ("Customer setup 3/4"). It opens a drawer from the right: the ring again, the title, one line, then one card per step: its icon on a tile of its tone, its title, one line, and the outline button that goes where the step is done; every card is the same hairline card, and a done step differs only by its blue Done chip after its title, with no button, so the steps still to do, with their buttons, draw the eye. The footer's button closes it. A step is done because the thing it asks for exists, so the checklist has no Skip and remembers nothing.
|
|
41
|
+
* @behaviour The ring is a 24 px `Gauge` in blue with the double check inside in ink, so the glyph reads at a glance, on a 36 px ghost button before the row's commands, whose tooltip names the checklist and how far it is ("Customer setup 3/4"). It opens a drawer from the right: the ring again, the title, one line, then one card per step: its icon on a tile of its tone, its title, one line, and the outline button that goes where the step is done; every card is the same hairline card, and a done step differs only by its blue Done chip after its title, with no button, so the steps still to do, with their buttons, draw the eye. The arc is the share of steps done (done steps over all steps, none drawn for no steps) and the track is the neutral remainder, so the ring is whole when every step is done. The footer's button closes it. A step is done because the thing it asks for exists, so the checklist has no Skip and remembers nothing. A step's tone says which kind of step it is, never whether it is done.
|
|
42
42
|
* @words Every string is the product's. The title names the checklist ("Customer setup"); a step's title reads as the thing done ("Plan chosen"); its button names where it goes ("Open billing").
|
|
43
43
|
* @access The ring's button is named by `label`, which says whose checklist and how many steps are done; the ring itself is hidden from assistive technology. The drawer is a dialog named by its title; Escape, × and the footer's button close it and give focus back to the ring. The steps are a list.
|
|
44
44
|
*/
|
|
@@ -34,7 +34,7 @@ function StepCard({ step, doneLabel }) {
|
|
|
34
34
|
* @when “Production Checklist”, the ring at the end of a project's row on Vercel's Projects page, which opens the steps that make a project ready for production. (https://vercel.com/dashboard)
|
|
35
35
|
* Ours: the steps a Customer or a Partner takes before nadicode's work runs for them, each one a fact the Portal can read (company details confirmed, a plan, Nadia connected, an Agent at work), at the end of the record's row.
|
|
36
36
|
* @instead Steps a person follows on a page, one after the other, are `NumberedSteps`; a setup with a wait is `FormDrawer job="steps"`. A ratio with no steps behind it is a `Gauge`. One state of a record is a `StatusBadge`.
|
|
37
|
-
* @behaviour The ring is a 24 px `Gauge` in blue with the double check inside in ink, so the glyph reads at a glance, on a 36 px ghost button whose tooltip names the checklist and how far it is ("Customer setup 3/4"). It opens a drawer from the right: the ring again, the title, one line, then one card per step: its icon on a tile of its tone, its title, one line, and the outline button that goes where the step is done; every card is the same hairline card, and a done step differs only by its blue Done chip after its title, with no button, so the steps still to do, with their buttons, draw the eye. The footer's button closes it. A step is done because the thing it asks for exists, so the checklist has no Skip and remembers nothing.
|
|
37
|
+
* @behaviour The ring is a 24 px `Gauge` in blue with the double check inside in ink, so the glyph reads at a glance, on a 36 px ghost button before the row's commands, whose tooltip names the checklist and how far it is ("Customer setup 3/4"). It opens a drawer from the right: the ring again, the title, one line, then one card per step: its icon on a tile of its tone, its title, one line, and the outline button that goes where the step is done; every card is the same hairline card, and a done step differs only by its blue Done chip after its title, with no button, so the steps still to do, with their buttons, draw the eye. The arc is the share of steps done (done steps over all steps, none drawn for no steps) and the track is the neutral remainder, so the ring is whole when every step is done. The footer's button closes it. A step is done because the thing it asks for exists, so the checklist has no Skip and remembers nothing. A step's tone says which kind of step it is, never whether it is done.
|
|
38
38
|
* @words Every string is the product's. The title names the checklist ("Customer setup"); a step's title reads as the thing done ("Plan chosen"); its button names where it goes ("Open billing").
|
|
39
39
|
* @access The ring's button is named by `label`, which says whose checklist and how many steps are done; the ring itself is hidden from assistive technology. The drawer is a dialog named by its title; Escape, × and the footer's button close it and give focus back to the ring. The steps are a list.
|
|
40
40
|
*/
|
|
@@ -25,7 +25,8 @@ type ProgressStop = {
|
|
|
25
25
|
* "Use `max` for the real ceiling (`max={files.length}`), not a hardcoded `100`. The component computes the percentage from `value / max`." (https://vercel.com/geist/progress)
|
|
26
26
|
* Ours: it always has a `value` and a name, as `aria-label` or as `aria-labelledby` pointing at its
|
|
27
27
|
* `ProgressLabel`, and the type asks for both. `stops` mark genuine stages, each named. `size` is
|
|
28
|
-
* `md` (10 px), or `sm` (4 px) inside a table cell or a row.
|
|
28
|
+
* `md` (10 px), or `sm` (4 px) inside a table cell or a row. `ProgressLabel` and `ProgressValue` go
|
|
29
|
+
* inside it as children; it draws `ProgressTrack` and `ProgressIndicator` itself.
|
|
29
30
|
* @instead "For short indeterminate waits (~1–3s), use `Spinner`; for inline copy like `Saving`, use `Loading Dots`." (https://vercel.com/geist/progress)
|
|
30
31
|
* Ours: neither exists; an unknown wait is the waiting line, never a bar with an invented
|
|
31
32
|
* percentage.
|
|
@@ -34,7 +35,8 @@ type ProgressStop = {
|
|
|
34
35
|
* @behaviour "Threshold colors via `dynamic colors` should mirror the same breakpoints used elsewhere (warning at the same threshold a quota note fires)." (https://vercel.com/geist/progress)
|
|
35
36
|
* Ours: colour sits on the fill alone: the track is always the neutral line colour and the words
|
|
36
37
|
* beside the bar stay neutral. The fill is neutral by default; `tone` is that threshold (amber
|
|
37
|
-
* where the note fires, red past the cap), never derived from the value
|
|
38
|
+
* where the note fires, red past the cap), never derived from the value; it is `default`,
|
|
39
|
+
* `secondary`, `success`, `warning`, `critical` or `info`. Past the maximum the bar
|
|
38
40
|
* fills and turns red, whatever the tone. The fill's end is rounded, and square when `stops` cut
|
|
39
41
|
* the bar. The fill moves only when the reading changes, on `open`; still under reduced motion. The
|
|
40
42
|
* printed value is always the live reading.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,QAAA,MAAM,yBAAyB;;8EAiB9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAExF,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AAOhC,KAAK,YAAY,GACb;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAexD,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAkEF
|
|
1
|
+
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,QAAA,MAAM,yBAAyB;;8EAiB9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAExF,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AAOhC,KAAK,YAAY,GACb;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAexD,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAkEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,IAAgB,EAChB,IAAW,EACX,cAAc,EACd,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,iBAAiB,GAAG,OAAO,CAAC,GAC/E,YAAY,GAAG;IACb,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;CACjC,+BA+CF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAc5E;AAMD,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BA+B3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,yBAAyB,GAC1B,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -78,7 +78,8 @@ const ProgressStateContext = createContext({
|
|
|
78
78
|
* "Use `max` for the real ceiling (`max={files.length}`), not a hardcoded `100`. The component computes the percentage from `value / max`." (https://vercel.com/geist/progress)
|
|
79
79
|
* Ours: it always has a `value` and a name, as `aria-label` or as `aria-labelledby` pointing at its
|
|
80
80
|
* `ProgressLabel`, and the type asks for both. `stops` mark genuine stages, each named. `size` is
|
|
81
|
-
* `md` (10 px), or `sm` (4 px) inside a table cell or a row.
|
|
81
|
+
* `md` (10 px), or `sm` (4 px) inside a table cell or a row. `ProgressLabel` and `ProgressValue` go
|
|
82
|
+
* inside it as children; it draws `ProgressTrack` and `ProgressIndicator` itself.
|
|
82
83
|
* @instead "For short indeterminate waits (~1–3s), use `Spinner`; for inline copy like `Saving`, use `Loading Dots`." (https://vercel.com/geist/progress)
|
|
83
84
|
* Ours: neither exists; an unknown wait is the waiting line, never a bar with an invented
|
|
84
85
|
* percentage.
|
|
@@ -87,7 +88,8 @@ const ProgressStateContext = createContext({
|
|
|
87
88
|
* @behaviour "Threshold colors via `dynamic colors` should mirror the same breakpoints used elsewhere (warning at the same threshold a quota note fires)." (https://vercel.com/geist/progress)
|
|
88
89
|
* Ours: colour sits on the fill alone: the track is always the neutral line colour and the words
|
|
89
90
|
* beside the bar stay neutral. The fill is neutral by default; `tone` is that threshold (amber
|
|
90
|
-
* where the note fires, red past the cap), never derived from the value
|
|
91
|
+
* where the note fires, red past the cap), never derived from the value; it is `default`,
|
|
92
|
+
* `secondary`, `success`, `warning`, `critical` or `info`. Past the maximum the bar
|
|
91
93
|
* fills and turns red, whatever the tone. The fill's end is rounded, and square when `stops` cut
|
|
92
94
|
* the bar. The fill moves only when the reading changes, on `open`; still under reduced motion. The
|
|
93
95
|
* printed value is always the live reading.
|
|
@@ -5,9 +5,12 @@
|
|
|
5
5
|
* @when Opening something on a phone from a screen: a mobile sign-in, a download link.
|
|
6
6
|
* @instead Two screens compared by eye is `PairingCode`. A link a person clicks is a link.
|
|
7
7
|
* @behaviour Square dark modules on a white tile in every theme, with the quiet zone a reader
|
|
8
|
-
* needs.
|
|
8
|
+
* needs. It draws a real, scannable `value` and nothing more: the caller shows a readable fallback
|
|
9
|
+
* beside it (the link as text) and an alternative action for when scanning is unavailable, and shows
|
|
10
|
+
* the code's expiry or invalidity from the actual state of the value, not from the drawing.
|
|
9
11
|
* @words The label names what the code opens: *Open Nadia on your phone*.
|
|
10
|
-
* @access `role="img"` named by `label`.
|
|
12
|
+
* @access `role="img"` named by `label`. Keep secrets out of the label; it names what the code
|
|
13
|
+
* opens, never the value.
|
|
11
14
|
*/
|
|
12
15
|
declare function QrCode({ value, label, size, className, }: {
|
|
13
16
|
value: string;
|