@nadicodeai/ui 12.1.111 → 12.1.114
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
|
@@ -67,17 +67,23 @@ export type IconButtonPartProps = Omit<IconButtonProps, "size" | "aria-label" |
|
|
|
67
67
|
* Ours: one `default` per surface, the thing this page or dialog is for.
|
|
68
68
|
* @instead "Switch to a `Menu` or `Split Button` when more than one related action shares a row." (https://vercel.com/geist/button)
|
|
69
69
|
* Ours: a link inside a sentence is `TextLink`. A record's secondary commands go in `ActionMenu`. Appending to a list is a
|
|
70
|
-
* `LoadMoreButton`. An on/off value is a `Switch`.
|
|
70
|
+
* `LoadMoreButton`. An on/off value is a `Switch`. An element that is neither a `Button` nor a
|
|
71
|
+
* `ButtonLink` takes `buttonVariants`.
|
|
71
72
|
* @behaviour "Default `Button` is primary." (https://vercel.com/geist/button)
|
|
72
73
|
* "Pass `type="secondary"` for the supporting action and `type="error"` for destructive confirmations." (https://vercel.com/geist/button)
|
|
73
74
|
* "`primary`, `success`, `ghost`, and `violet` are not valid `type` values." (https://vercel.com/geist/button)
|
|
74
75
|
* "For form submits, use `typeName="submit"`." (https://vercel.com/geist/button)
|
|
75
76
|
* "The HTML `type` attribute lives on `typeName`, not on `type`, which controls the visual variant." (https://vercel.com/geist/button)
|
|
76
77
|
* Ours: the look is `variant` (`default`, `secondary`, `outline`, `ghost`, `link`, `destructive` for
|
|
77
|
-
* Geist's error, `warning`
|
|
78
|
+
* Geist's error, `warning`, and `brandSolid` and `brandGhost` for a colour or black ground) and
|
|
79
|
+
* `type` is the HTML type, `button` unless it submits. There is no `CustomButton`: colour is ours,
|
|
80
|
+
* chosen by `variant`, never at the call site.
|
|
78
81
|
* "The default size is medium." (https://vercel.com/geist/button)
|
|
79
|
-
* Ours: `xs
|
|
80
|
-
* content, such as a composer or an input group, never for chrome.
|
|
82
|
+
* Ours: `xs` (24 px), `sm` (32 px), `default` (36 px, medium) and `lg` (40 px); `sm` and `xs` are
|
|
83
|
+
* for a control nested in dense content, such as a composer or an input group, never for chrome.
|
|
84
|
+
* The corner is 6 px, 8 px at `lg` and 4 px on the 24 px icon button. The label is the button type
|
|
85
|
+
* at `sm` and `default`, the large one at `lg` and the 12 px one at `xs`, and the inline padding is
|
|
86
|
+
* 6 px at `sm`, 10 px at `default` and 14 px at `lg` (8 px at `xs`).
|
|
81
87
|
* "Pass `loading` instead of swapping in a spinner so the button stays focusable and announces the busy state to assistive tech." (https://vercel.com/geist/button)
|
|
82
88
|
* Ours: `loading` is the only busy state: the button keeps its place and focus, says `loadingLabel`
|
|
83
89
|
* in the label's place, ignores a second press and shows no spinner.
|
|
@@ -89,15 +95,22 @@ export type IconButtonPartProps = Omit<IconButtonProps, "size" | "aria-label" |
|
|
|
89
95
|
* "Combination of `shape="rounded"` and the `shadow` prop, often used on marketing pages." (https://vercel.com/geist/button)
|
|
90
96
|
* Ours: `shape="rounded"` is a pill for a call to action that stands apart (a banner's or a
|
|
91
97
|
* scroller's), with no `shadow` prop.
|
|
92
|
-
* Ours: text children sit in a label box that adds 6 px each side to the padding
|
|
93
|
-
* (a `render` target, a row with a trailing `Kbd`)
|
|
94
|
-
*
|
|
98
|
+
* Ours: text children sit in a label box that adds 6 px each side to the padding, except at `xs` and
|
|
99
|
+
* the icon sizes, which have none; an element child (a `render` target, a row with a trailing `Kbd`)
|
|
100
|
+
* lays itself out and gets no box. Colour sits on
|
|
101
|
+
* the whole button for three looks: `default` is ink with a white label (in dark, the light action
|
|
102
|
+
* fill with a near-black label, never pure white), `destructive` is the error fill for permanent
|
|
95
103
|
* loss (Delete project), `warning` is the amber fill for a disruptive command that can be undone
|
|
96
104
|
* (Pause project). `link` is the link colour as text, with the arrow as `suffix` when the
|
|
97
105
|
* destination is outside the product. `outline` and `secondary` are neutral with a hairline edge,
|
|
98
|
-
* `ghost` has no chrome
|
|
99
|
-
*
|
|
100
|
-
* `
|
|
106
|
+
* `ghost` has no chrome and serves a tertiary text action or an icon-only command (the three dots,
|
|
107
|
+
* close, collapse), and no look puts a hue on its edge. Held (disabled or `loading`), a filled
|
|
108
|
+
* look (`default`, `outline`, `secondary`, `destructive` and `warning`, so `outline` and `secondary`
|
|
109
|
+
* too) drops its hue to the muted fill, the muted text and the hairline at full opacity, so it
|
|
110
|
+
* reads as unavailable; `ghost`, `link` and the two brand looks dim instead. Pressed looks like
|
|
111
|
+
* hover, with no movement. On a colour or black ground a control takes a look whose label clears
|
|
112
|
+
* AA there: `brandSolid` (white fill, ink label) or `brandGhost` (white label, no fill) on cobalto,
|
|
113
|
+
* rosso and black, and the `default` ink button on verde, arancio and giallo.
|
|
101
114
|
* @words "Title Case the label and name what happens: `Deploy Project`, `Invite Member`, `Rotate Key`." (https://vercel.com/geist/button)
|
|
102
115
|
* "Avoid bare verbs (`Submit`) and generic confirms (`OK`, `Confirm`)." (https://vercel.com/geist/button)
|
|
103
116
|
* "Destructive buttons follow `Verb + Noun` and pair 1:1 with their toast: `Delete Project` then `Project deleted`." (https://vercel.com/geist/button)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUjE,QAAA,MAAM,aAAa;;;;8EA+DlB,CAAC;AAEF,KAAK,aAAa,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AAChF,KAAK,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC1E,KAAK,QAAQ,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,MAAM,EAAE,CAAC,CAAC;AACrD,KAAK,QAAQ,GAAG,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAE9C;;;;;;GAMG;AACH,iBAAS,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAE3E;AAED,MAAM,MAAM,WAAW,GACnB;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,GACjD;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,KAAK,QAAQ,GAAG,WAAW,GAAG;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GACtB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,GAChE;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAErE,KAAK,QAAQ,GAAG,cAAc,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IACtE,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,eAAe,CAAC;AAE5D,qGAAqG;AACrG,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,eAAe,EACf,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAC1C,GAAG;IACF,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC,CAAC;AAiFF
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUjE,QAAA,MAAM,aAAa;;;;8EA+DlB,CAAC;AAEF,KAAK,aAAa,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AAChF,KAAK,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC1E,KAAK,QAAQ,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,MAAM,EAAE,CAAC,CAAC;AACrD,KAAK,QAAQ,GAAG,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAE9C;;;;;;GAMG;AACH,iBAAS,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAE3E;AAED,MAAM,MAAM,WAAW,GACnB;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,GACjD;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,KAAK,QAAQ,GAAG,WAAW,GAAG;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GACtB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,GAChE;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAErE,KAAK,QAAQ,GAAG,cAAc,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IACtE,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,eAAe,CAAC;AAE5D,qGAAqG;AACrG,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,eAAe,EACf,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAC1C,GAAG;IACF,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC,CAAC;AAiFF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,YAAY,EACZ,MAAM,EACN,KAAgB,EAChB,IAAgB,EAChB,MAAM,EACN,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,WAAW,+BAwBb;AAED,KAAK,cAAc,GAAG,IAAI,CACxB,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,EAC7B,WAAW,GAAG,eAAe,GAAG,QAAQ,CACzC,GAAG;IACF,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAMrE;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,OAAO,EACP,MAAM,EACN,MAAM,EACN,KAAgB,EAChB,IAAgB,EAChB,MAAM,EACN,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,eAAe,8FA4BjB;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -103,17 +103,23 @@ function ButtonContent({ children, loading, loadingLabel, prefix, size, suffix,
|
|
|
103
103
|
* Ours: one `default` per surface, the thing this page or dialog is for.
|
|
104
104
|
* @instead "Switch to a `Menu` or `Split Button` when more than one related action shares a row." (https://vercel.com/geist/button)
|
|
105
105
|
* Ours: a link inside a sentence is `TextLink`. A record's secondary commands go in `ActionMenu`. Appending to a list is a
|
|
106
|
-
* `LoadMoreButton`. An on/off value is a `Switch`.
|
|
106
|
+
* `LoadMoreButton`. An on/off value is a `Switch`. An element that is neither a `Button` nor a
|
|
107
|
+
* `ButtonLink` takes `buttonVariants`.
|
|
107
108
|
* @behaviour "Default `Button` is primary." (https://vercel.com/geist/button)
|
|
108
109
|
* "Pass `type="secondary"` for the supporting action and `type="error"` for destructive confirmations." (https://vercel.com/geist/button)
|
|
109
110
|
* "`primary`, `success`, `ghost`, and `violet` are not valid `type` values." (https://vercel.com/geist/button)
|
|
110
111
|
* "For form submits, use `typeName="submit"`." (https://vercel.com/geist/button)
|
|
111
112
|
* "The HTML `type` attribute lives on `typeName`, not on `type`, which controls the visual variant." (https://vercel.com/geist/button)
|
|
112
113
|
* Ours: the look is `variant` (`default`, `secondary`, `outline`, `ghost`, `link`, `destructive` for
|
|
113
|
-
* Geist's error, `warning`
|
|
114
|
+
* Geist's error, `warning`, and `brandSolid` and `brandGhost` for a colour or black ground) and
|
|
115
|
+
* `type` is the HTML type, `button` unless it submits. There is no `CustomButton`: colour is ours,
|
|
116
|
+
* chosen by `variant`, never at the call site.
|
|
114
117
|
* "The default size is medium." (https://vercel.com/geist/button)
|
|
115
|
-
* Ours: `xs
|
|
116
|
-
* content, such as a composer or an input group, never for chrome.
|
|
118
|
+
* Ours: `xs` (24 px), `sm` (32 px), `default` (36 px, medium) and `lg` (40 px); `sm` and `xs` are
|
|
119
|
+
* for a control nested in dense content, such as a composer or an input group, never for chrome.
|
|
120
|
+
* The corner is 6 px, 8 px at `lg` and 4 px on the 24 px icon button. The label is the button type
|
|
121
|
+
* at `sm` and `default`, the large one at `lg` and the 12 px one at `xs`, and the inline padding is
|
|
122
|
+
* 6 px at `sm`, 10 px at `default` and 14 px at `lg` (8 px at `xs`).
|
|
117
123
|
* "Pass `loading` instead of swapping in a spinner so the button stays focusable and announces the busy state to assistive tech." (https://vercel.com/geist/button)
|
|
118
124
|
* Ours: `loading` is the only busy state: the button keeps its place and focus, says `loadingLabel`
|
|
119
125
|
* in the label's place, ignores a second press and shows no spinner.
|
|
@@ -125,15 +131,22 @@ function ButtonContent({ children, loading, loadingLabel, prefix, size, suffix,
|
|
|
125
131
|
* "Combination of `shape="rounded"` and the `shadow` prop, often used on marketing pages." (https://vercel.com/geist/button)
|
|
126
132
|
* Ours: `shape="rounded"` is a pill for a call to action that stands apart (a banner's or a
|
|
127
133
|
* scroller's), with no `shadow` prop.
|
|
128
|
-
* Ours: text children sit in a label box that adds 6 px each side to the padding
|
|
129
|
-
* (a `render` target, a row with a trailing `Kbd`)
|
|
130
|
-
*
|
|
134
|
+
* Ours: text children sit in a label box that adds 6 px each side to the padding, except at `xs` and
|
|
135
|
+
* the icon sizes, which have none; an element child (a `render` target, a row with a trailing `Kbd`)
|
|
136
|
+
* lays itself out and gets no box. Colour sits on
|
|
137
|
+
* the whole button for three looks: `default` is ink with a white label (in dark, the light action
|
|
138
|
+
* fill with a near-black label, never pure white), `destructive` is the error fill for permanent
|
|
131
139
|
* loss (Delete project), `warning` is the amber fill for a disruptive command that can be undone
|
|
132
140
|
* (Pause project). `link` is the link colour as text, with the arrow as `suffix` when the
|
|
133
141
|
* destination is outside the product. `outline` and `secondary` are neutral with a hairline edge,
|
|
134
|
-
* `ghost` has no chrome
|
|
135
|
-
*
|
|
136
|
-
* `
|
|
142
|
+
* `ghost` has no chrome and serves a tertiary text action or an icon-only command (the three dots,
|
|
143
|
+
* close, collapse), and no look puts a hue on its edge. Held (disabled or `loading`), a filled
|
|
144
|
+
* look (`default`, `outline`, `secondary`, `destructive` and `warning`, so `outline` and `secondary`
|
|
145
|
+
* too) drops its hue to the muted fill, the muted text and the hairline at full opacity, so it
|
|
146
|
+
* reads as unavailable; `ghost`, `link` and the two brand looks dim instead. Pressed looks like
|
|
147
|
+
* hover, with no movement. On a colour or black ground a control takes a look whose label clears
|
|
148
|
+
* AA there: `brandSolid` (white fill, ink label) or `brandGhost` (white label, no fill) on cobalto,
|
|
149
|
+
* rosso and black, and the `default` ink button on verde, arancio and giallo.
|
|
137
150
|
* @words "Title Case the label and name what happens: `Deploy Project`, `Invite Member`, `Rotate Key`." (https://vercel.com/geist/button)
|
|
138
151
|
* "Avoid bare verbs (`Submit`) and generic confirms (`OK`, `Confirm`)." (https://vercel.com/geist/button)
|
|
139
152
|
* "Destructive buttons follow `Verb + Noun` and pair 1:1 with their toast: `Delete Project` then `Project deleted`." (https://vercel.com/geist/button)
|
|
@@ -23,8 +23,10 @@ type CardRowFrom = "sm" | "md" | "lg" | "xl";
|
|
|
23
23
|
* @behaviour "Set `columns` and `rows` at all three breakpoints so cells reflow predictably between mobile, tablet, and desktop." (https://vercel.com/geist/grid)
|
|
24
24
|
* Ours: one column below `from`, then `columns` columns, 16 px apart, with no `rows`; `auto` gives
|
|
25
25
|
* each card an equal share, and `5` sets two by two with the fifth across, then three over two
|
|
26
|
-
* from `lg
|
|
27
|
-
*
|
|
26
|
+
* from `lg` (the pair sharing the width of the three), then all five in one row from `xl` (1280 px),
|
|
27
|
+
* as OpenRouter's Activity sets its five tiles, never leaving one card alone beside a hole. Below
|
|
28
|
+
* `from`, a phone included, the five are one column; with `from="lg"` there is no two by two step. Each card fills its cell, so the bottom
|
|
29
|
+
* edge is even. The row is
|
|
28
30
|
* neutral; it tints nothing.
|
|
29
31
|
* @words None of its own.
|
|
30
32
|
* @access A layout container; reading order is source order.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-row.d.ts","sourceRoot":"","sources":["../../src/components/card-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAC7C,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAwC7C
|
|
1
|
+
{"version":3,"file":"card-row.d.ts","sourceRoot":"","sources":["../../src/components/card-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAC7C,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAwC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,OAAW,EACX,IAAW,EACX,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,8FAgBA;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}
|
|
@@ -60,8 +60,10 @@ const columnClasses = {
|
|
|
60
60
|
* @behaviour "Set `columns` and `rows` at all three breakpoints so cells reflow predictably between mobile, tablet, and desktop." (https://vercel.com/geist/grid)
|
|
61
61
|
* Ours: one column below `from`, then `columns` columns, 16 px apart, with no `rows`; `auto` gives
|
|
62
62
|
* each card an equal share, and `5` sets two by two with the fifth across, then three over two
|
|
63
|
-
* from `lg
|
|
64
|
-
*
|
|
63
|
+
* from `lg` (the pair sharing the width of the three), then all five in one row from `xl` (1280 px),
|
|
64
|
+
* as OpenRouter's Activity sets its five tiles, never leaving one card alone beside a hole. Below
|
|
65
|
+
* `from`, a phone included, the five are one column; with `from="lg"` there is no two by two step. Each card fills its cell, so the bottom
|
|
66
|
+
* edge is even. The row is
|
|
65
67
|
* neutral; it tints nothing.
|
|
66
68
|
* @words None of its own.
|
|
67
69
|
* @access A layout container; reading order is source order.
|
|
@@ -8,7 +8,7 @@ type CardVariant = "default" | "interactive" | "link";
|
|
|
8
8
|
* @family Data
|
|
9
9
|
* @when "For in-product cards and dashboard tiles, use `Card`; Book is too decorative for repeated UI rows." (https://vercel.com/geist/book) Ours: only inside a composition that owns the job: the object card of an `ObjectPage`, the setting card of a `SettingsSection`, a KPI, a chart, a table. A new kind of card is a new composition, never a `Card` assembled at a call site.
|
|
10
10
|
* @instead "Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: that card, a title and description, one control and a footer with help at the start and one action at the end, is `SettingsSection`. An object's card (a header bar with its name and commands, a body of facts, rows that open, a footer hint with one link elsewhere) is `ObjectPage`. The page's title row is never in a card. A row of a list is `Item`. A plane of brand colour is `BrandField`.
|
|
11
|
-
* @behaviour "One Note per concept." (https://vercel.com/geist/note) "Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the corner and shadow come with `surface`: a raised card takes the larger corner. Never set a corner at the call site. `CardHeader` lays out title, description and one `CardAction`, which stays at the title's right at every width when it is one control (a button, a badge, the three dots) and moves under the description in a header narrower than 28rem when it holds several; `CardFooter` is the recessed
|
|
11
|
+
* @behaviour "One Note per concept." (https://vercel.com/geist/note) "Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the corner and shadow come with `surface`: a raised card takes the larger corner. Never set a corner at the call site. `surface` defaults to `resting`, the resting height of "Elevation & Depth" in DESIGN.md. `CardHeader` lays out title, description and one `CardAction`, which stays at the title's right at every width when it is one control (a button, a badge, a sparkline, the three dots), as Vercel keeps a card's Add on its title row on a phone, and moves under the description in a header narrower than 28rem when it holds several (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. It is 56 px high whether or not it holds a button, and as high as its lines in a `size="sm"` card, the compact card of a side column or a figure. The two kinds differ in what their header and footer hold: an object card's header holds the object's commands and its footer only a link, so it never saves; a setting card's header holds a title, a description and at most a switch that applies on change, and its footer holds the Save. A card is neutral; colour enters only through a status inside it or a section's `tone`.
|
|
12
12
|
* @words The title is a noun phrase naming what the card holds; the description one sentence directly under it, only when it adds something.
|
|
13
13
|
* @access A plain container; give it `render={<section />}` with a heading when it is a region of the page.
|
|
14
14
|
*/
|
package/dist/components/card.js
CHANGED
|
@@ -8,7 +8,7 @@ import { cn } from "../lib/utils.js";
|
|
|
8
8
|
* @family Data
|
|
9
9
|
* @when "For in-product cards and dashboard tiles, use `Card`; Book is too decorative for repeated UI rows." (https://vercel.com/geist/book) Ours: only inside a composition that owns the job: the object card of an `ObjectPage`, the setting card of a `SettingsSection`, a KPI, a chart, a table. A new kind of card is a new composition, never a `Card` assembled at a call site.
|
|
10
10
|
* @instead "Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: that card, a title and description, one control and a footer with help at the start and one action at the end, is `SettingsSection`. An object's card (a header bar with its name and commands, a body of facts, rows that open, a footer hint with one link elsewhere) is `ObjectPage`. The page's title row is never in a card. A row of a list is `Item`. A plane of brand colour is `BrandField`.
|
|
11
|
-
* @behaviour "One Note per concept." (https://vercel.com/geist/note) "Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the corner and shadow come with `surface`: a raised card takes the larger corner. Never set a corner at the call site. `CardHeader` lays out title, description and one `CardAction`, which stays at the title's right at every width when it is one control (a button, a badge, the three dots) and moves under the description in a header narrower than 28rem when it holds several; `CardFooter` is the recessed
|
|
11
|
+
* @behaviour "One Note per concept." (https://vercel.com/geist/note) "Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the corner and shadow come with `surface`: a raised card takes the larger corner. Never set a corner at the call site. `surface` defaults to `resting`, the resting height of "Elevation & Depth" in DESIGN.md. `CardHeader` lays out title, description and one `CardAction`, which stays at the title's right at every width when it is one control (a button, a badge, a sparkline, the three dots), as Vercel keeps a card's Add on its title row on a phone, and moves under the description in a header narrower than 28rem when it holds several (the header's own width, not the viewport's); `CardFooter` is a strip in the `recessed` role, one tone off the card body inside the card's edge, behind one seam in the border colour: `canvas-soft` below the white card in light, and `dark-canvas` below the resting body in dark; on the left one short muted line, only where it says something specific to that card (a limit such as *Please use 32 characters at maximum.*, what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, on the right at most one button or link, the section's action. It is 56 px high whether or not it holds a button, and as high as its lines in a `size="sm"` card, the compact card of a side column or a figure. The two kinds differ in what their header and footer hold: an object card's header holds the object's commands and its footer only a link, so it never saves; a setting card's header holds a title, a description and at most a switch that applies on change, and its footer holds the Save. A card is neutral; colour enters only through a status inside it or a section's `tone`.
|
|
12
12
|
* @words The title is a noun phrase naming what the card holds; the description one sentence directly under it, only when it adds something.
|
|
13
13
|
* @access A plain container; give it `render={<section />}` with a heading when it is a region of the page.
|
|
14
14
|
*/
|
|
@@ -24,11 +24,16 @@ declare function useCarousel(): CarouselContextProps;
|
|
|
24
24
|
* A rail of slides moved with Previous and Next.
|
|
25
25
|
*
|
|
26
26
|
* @family Other
|
|
27
|
-
* @when A controlled rail of like items
|
|
28
|
-
*
|
|
29
|
-
*
|
|
27
|
+
* @when A controlled, finite rail of like items whose neighbours have a meaningful sequence:
|
|
28
|
+
* screens, testimonials.
|
|
29
|
+
* @instead A product's records are a list or a table, never a carousel; a sortable record
|
|
30
|
+
* collection is a table or an entity list. One overflowing row is `ScrollArea`.
|
|
30
31
|
* @behaviour Slides move by swipe, drag or the Previous and Next buttons; the buttons disable at
|
|
31
|
-
* the ends.
|
|
32
|
+
* the ends. Left and Right arrow keys move when the carousel holds focus, in both orientations;
|
|
33
|
+
* Up and Down do nothing. The rail is horizontal; `orientation` also accepts `vertical`, which
|
|
34
|
+
* stacks the buttons above and below. The motion is Embla's, and the component does not read the
|
|
35
|
+
* reduced-motion setting, so a page that must honour it sets Embla's `duration` itself through
|
|
36
|
+
* `opts` (Embla jumps with a duration of 0).
|
|
32
37
|
* @words The buttons name their move: *Previous slide*, *Next slide*.
|
|
33
38
|
* @access A `region` described as a carousel; each slide is a `group` described as a slide.
|
|
34
39
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGvE,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACxB,GAAG,aAAa,CAAC;AAIlB,iBAAS,WAAW,yBAQnB;AAED
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGvE,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACxB,GAAG,aAAa,CAAC;AAIlB,iBAAS,WAAW,yBAQnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,qBAgF7C;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgBzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,YAAY,EAAE,SAA4B,EAC1C,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAuBrB;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,YAAY,EAAE,SAAwB,EACtC,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAuBrB;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,GACZ,CAAC"}
|
|
@@ -17,11 +17,16 @@ function useCarousel() {
|
|
|
17
17
|
* A rail of slides moved with Previous and Next.
|
|
18
18
|
*
|
|
19
19
|
* @family Other
|
|
20
|
-
* @when A controlled rail of like items
|
|
21
|
-
*
|
|
22
|
-
*
|
|
20
|
+
* @when A controlled, finite rail of like items whose neighbours have a meaningful sequence:
|
|
21
|
+
* screens, testimonials.
|
|
22
|
+
* @instead A product's records are a list or a table, never a carousel; a sortable record
|
|
23
|
+
* collection is a table or an entity list. One overflowing row is `ScrollArea`.
|
|
23
24
|
* @behaviour Slides move by swipe, drag or the Previous and Next buttons; the buttons disable at
|
|
24
|
-
* the ends.
|
|
25
|
+
* the ends. Left and Right arrow keys move when the carousel holds focus, in both orientations;
|
|
26
|
+
* Up and Down do nothing. The rail is horizontal; `orientation` also accepts `vertical`, which
|
|
27
|
+
* stacks the buttons above and below. The motion is Embla's, and the component does not read the
|
|
28
|
+
* reduced-motion setting, so a page that must honour it sets Embla's `duration` itself through
|
|
29
|
+
* `opts` (Embla jumps with a duration of 0).
|
|
25
30
|
* @words The buttons name their move: *Previous slide*, *Next slide*.
|
|
26
31
|
* @access A `region` described as a carousel; each slide is a `group` described as a slide.
|
|
27
32
|
*/
|
|
@@ -21,7 +21,7 @@ export type CatalogDrawerProps = Omit<FormSurfaceProps, "children" | "unsaved">
|
|
|
21
21
|
* @family Compositions
|
|
22
22
|
* @when Ours: a person picks one or more things from a list too long for a dialog, the page still behind it: add a skill, add an app to a new Agent.
|
|
23
23
|
* @instead "Don’t use Sheet to confirm destructive actions. The default `modal=false` keeps the page interactive, which weakens severity for a delete or revoke." (https://vercel.com/geist/sheet) Ours: the shelf of everything the company holds, on its own page, is a `LibraryShelf`; a setup in steps is a `FormDrawer` with `job="steps"`; a new record from a few fields is a `FormDialog`.
|
|
24
|
-
* @behaviour "Outside-click does not auto-close, so always render an explicit close affordance and honor Escape." (https://vercel.com/geist/sheet) Ours: a modal sheet from the right, as `FormDrawer`. The header holds the title, the description and Close;
|
|
24
|
+
* @behaviour "Outside-click does not auto-close, so always render an explicit close affordance and honor Escape." (https://vercel.com/geist/sheet) Ours: a modal sheet from the right, as `FormDrawer`. The header holds the title, the description and Close; below it sits the search, which stays in place, and then the body, which scrolls and holds the entries in one column under their section titles. It draws one state at a time: the failure with its retry, three still entries while the catalogue loads, no match with a way to clear the search, nothing at all, or the entries. An entry already held shows a muted check and its word in place of Add. The footer's one button closes the drawer.
|
|
25
25
|
* @words "Title is Title Case and names the entity (`Deployment Details`, `Member Profile`), not the page action." (https://vercel.com/geist/sheet) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title is sentence case and names the job: "Add a skill". The search names what it finds: "Search the hub". Each entry's button is "Add"; the held word is "Added"; the footer's is "Done".
|
|
26
26
|
* @access "Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list." (https://vercel.com/geist/sheet) "Provide a visible close button labeled `Close` (or an icon button with `aria-label="Close"`) since clicking outside doesn’t dismiss." (https://vercel.com/geist/sheet) Ours: a modal dialog named by its title; focus starts in the search. The loading entries are one status named by `loadingLabel`.
|
|
27
27
|
*/
|
|
@@ -12,7 +12,7 @@ import { CatalogList, CatalogSkeleton, catalogIsEmpty } from "../internal/catalo
|
|
|
12
12
|
* @family Compositions
|
|
13
13
|
* @when Ours: a person picks one or more things from a list too long for a dialog, the page still behind it: add a skill, add an app to a new Agent.
|
|
14
14
|
* @instead "Don’t use Sheet to confirm destructive actions. The default `modal=false` keeps the page interactive, which weakens severity for a delete or revoke." (https://vercel.com/geist/sheet) Ours: the shelf of everything the company holds, on its own page, is a `LibraryShelf`; a setup in steps is a `FormDrawer` with `job="steps"`; a new record from a few fields is a `FormDialog`.
|
|
15
|
-
* @behaviour "Outside-click does not auto-close, so always render an explicit close affordance and honor Escape." (https://vercel.com/geist/sheet) Ours: a modal sheet from the right, as `FormDrawer`. The header holds the title, the description and Close;
|
|
15
|
+
* @behaviour "Outside-click does not auto-close, so always render an explicit close affordance and honor Escape." (https://vercel.com/geist/sheet) Ours: a modal sheet from the right, as `FormDrawer`. The header holds the title, the description and Close; below it sits the search, which stays in place, and then the body, which scrolls and holds the entries in one column under their section titles. It draws one state at a time: the failure with its retry, three still entries while the catalogue loads, no match with a way to clear the search, nothing at all, or the entries. An entry already held shows a muted check and its word in place of Add. The footer's one button closes the drawer.
|
|
16
16
|
* @words "Title is Title Case and names the entity (`Deployment Details`, `Member Profile`), not the page action." (https://vercel.com/geist/sheet) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title is sentence case and names the job: "Add a skill". The search names what it finds: "Search the hub". Each entry's button is "Add"; the held word is "Added"; the footer's is "Done".
|
|
17
17
|
* @access "Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list." (https://vercel.com/geist/sheet) "Provide a visible close button labeled `Close` (or an icon button with `aria-label="Close"`) since clicking outside doesn’t dismiss." (https://vercel.com/geist/sheet) Ours: a modal dialog named by its title; focus starts in the search. The loading entries are one status named by `loadingLabel`.
|
|
18
18
|
*/
|
|
@@ -97,7 +97,7 @@ declare function foldOtherSeries(series: readonly ChartSeries[], data: readonly
|
|
|
97
97
|
* @family Charts
|
|
98
98
|
* @when Every chart and every reading built around one: the frame a page never builds by hand. A chart is a named section of its page.
|
|
99
99
|
* @instead A single figure is a `KpiCard`, never nested inside a chart. A ranking beside the plot goes in the card's `aside`, not a second card.
|
|
100
|
-
* @behaviour Header grid: title and period in the first column, controls and then the link to the reading's owner (a small ghost button ending in a chevron, as OpenRouter's "Explore ›") in the second from a 28 rem card width, under the title below it; a link with no controls stays at the trailing edge at every width. Summary, plot, legend, footer in that order. An empty dataset shows its `emptyState` in the plot's place. The footer is a recessed strip behind a hairline: the reading's time left,
|
|
100
|
+
* @behaviour Header grid: title and period in the first column, controls and then the link to the reading's owner (a small ghost button ending in a chevron, as OpenRouter's "Explore ›") in the second from a 28 rem card width, under the title below it; a link with no controls stays at the trailing edge at every width. Summary, plot, legend, footer in that order. An empty dataset shows its `emptyState` in the plot's place. The footer is a recessed strip behind a hairline: the reading's time left, at most one command on the reading (Refresh) right.
|
|
101
101
|
* @words Title names the measure and its split: "Model spend by Customer". Period as dates. The link: "Explore", or "Open in Analytics" where the owner is another page. Footer: the reading's time, "Updated 4 minutes ago" or "Read at 12:42". Sentence case throughout.
|
|
102
102
|
* @access The title is a heading at the page's level (default 2) and labels the plot. The plot is focusable and shows the 2 px focus outline only on keyboard focus.
|
|
103
103
|
*/
|
|
@@ -69,7 +69,7 @@ function foldOtherSeries(series, data, entityColorMap, otherLabel) {
|
|
|
69
69
|
* @family Charts
|
|
70
70
|
* @when Every chart and every reading built around one: the frame a page never builds by hand. A chart is a named section of its page.
|
|
71
71
|
* @instead A single figure is a `KpiCard`, never nested inside a chart. A ranking beside the plot goes in the card's `aside`, not a second card.
|
|
72
|
-
* @behaviour Header grid: title and period in the first column, controls and then the link to the reading's owner (a small ghost button ending in a chevron, as OpenRouter's "Explore ›") in the second from a 28 rem card width, under the title below it; a link with no controls stays at the trailing edge at every width. Summary, plot, legend, footer in that order. An empty dataset shows its `emptyState` in the plot's place. The footer is a recessed strip behind a hairline: the reading's time left,
|
|
72
|
+
* @behaviour Header grid: title and period in the first column, controls and then the link to the reading's owner (a small ghost button ending in a chevron, as OpenRouter's "Explore ›") in the second from a 28 rem card width, under the title below it; a link with no controls stays at the trailing edge at every width. Summary, plot, legend, footer in that order. An empty dataset shows its `emptyState` in the plot's place. The footer is a recessed strip behind a hairline: the reading's time left, at most one command on the reading (Refresh) right.
|
|
73
73
|
* @words Title names the measure and its split: "Model spend by Customer". Period as dates. The link: "Explore", or "Open in Analytics" where the owner is another page. Footer: the reading's time, "Updated 4 minutes ago" or "Read at 12:42". Sentence case throughout.
|
|
74
74
|
* @access The title is a heading at the page's level (default 2) and labels the plot. The plot is focusable and shows the 2 px focus outline only on keyboard focus.
|
|
75
75
|
*/
|
|
@@ -22,7 +22,8 @@ import { type ControlName } from "../internal/control-name.js";
|
|
|
22
22
|
* a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: named
|
|
23
23
|
* by `aria-label`, `aria-labelledby` or an `id` that a `FieldLabel` points at; a box with none does
|
|
24
24
|
* not compile. It is 16 px with a 4 px corner, the label 8 px away at 13 px regular weight on a 20
|
|
25
|
-
* px row, and the label is part of the target. Colour: only a checked box fills,
|
|
25
|
+
* px row, and the label is part of the target. Colour: only a checked box fills, with the action
|
|
26
|
+
* pair (ink and a white mark, the light action fill and a near-black mark in dark); an
|
|
26
27
|
* unchecked box shows the surface and greys on hover. Mixed is an unfilled box with a grey dash. A
|
|
27
28
|
* disabled box turns grey, an unchecked or mixed one with a lighter edge and a checked one mid
|
|
28
29
|
* grey, and ignores hover.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGxE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGxE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,+BAmBpF;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -25,7 +25,8 @@ import { CheckIcon, MinusIcon } from "lucide-react";
|
|
|
25
25
|
* a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: named
|
|
26
26
|
* by `aria-label`, `aria-labelledby` or an `id` that a `FieldLabel` points at; a box with none does
|
|
27
27
|
* not compile. It is 16 px with a 4 px corner, the label 8 px away at 13 px regular weight on a 20
|
|
28
|
-
* px row, and the label is part of the target. Colour: only a checked box fills,
|
|
28
|
+
* px row, and the label is part of the target. Colour: only a checked box fills, with the action
|
|
29
|
+
* pair (ink and a white mark, the light action fill and a near-black mark in dark); an
|
|
29
30
|
* unchecked box shows the surface and greys on hover. Mixed is an unfilled box with a grey dash. A
|
|
30
31
|
* disabled box turns grey, an unchecked or mixed one with a lighter edge and a checked one mid
|
|
31
32
|
* grey, and ignores hover.
|
|
@@ -32,7 +32,8 @@ export type ChoiceboxGroupProps = ChoiceboxGroupBase & ({
|
|
|
32
32
|
* (https://vercel.com/geist/choicebox) "Single-select for mutually exclusive choices, multi-select
|
|
33
33
|
* for additive ones." (https://vercel.com/geist/choicebox) "Don’t mix the two within one group."
|
|
34
34
|
* (https://vercel.com/geist/choicebox) "Cap at 4–6 tiles." (https://vercel.com/geist/choicebox)
|
|
35
|
-
* Ours: where a Library entry applies, an API key's access level.
|
|
35
|
+
* Ours: where a Library entry applies, an API key's access level. The options are known in advance
|
|
36
|
+
* and number no more than six.
|
|
36
37
|
* @instead "Past that, switch to `Select` or `Combobox` so the page doesn’t scroll for a single
|
|
37
38
|
* field." (https://vercel.com/geist/choicebox) "For plain text labels with no description, use
|
|
38
39
|
* `Radio`." (https://vercel.com/geist/choicebox) Ours: Geist's `Radio` is our `RadioGroup`, or a
|
|
@@ -43,7 +44,8 @@ export type ChoiceboxGroupProps = ChoiceboxGroupBase & ({
|
|
|
43
44
|
* filled dot in the corner." (https://vercel.com/geist/choicebox) "The border highlight alone isn’t
|
|
44
45
|
* enough on low-contrast screens." (https://vercel.com/geist/choicebox) "Disabled tiles need a
|
|
45
46
|
* Tooltip naming why (`Available on Pro`)." (https://vercel.com/geist/choicebox) "A faded tile with
|
|
46
|
-
* no reason reads as broken." (https://vercel.com/geist/choicebox) Ours:
|
|
47
|
+
* no reason reads as broken." (https://vercel.com/geist/choicebox) Ours: each tile is a
|
|
48
|
+
* `ChoiceboxGroupItem`, which throws outside a `ChoiceboxGroup`. The group has a `label`
|
|
47
49
|
* and a `type`, and every tile a `title` and a `description`; a group or a tile without them does
|
|
48
50
|
* not compile. Tiles share one row and wrap to a column on a narrow screen;
|
|
49
51
|
* `orientation="vertical"` stacks them. They are 12 px apart, each with 12 px inside and 24 px
|
|
@@ -51,9 +53,11 @@ export type ChoiceboxGroupProps = ChoiceboxGroupBase & ({
|
|
|
51
53
|
* available tile is the one place blue sits on a choice, as a blue border, a blue tint behind the
|
|
52
54
|
* title and description, blue words, and a blue corner mark; a selected tile that is unavailable
|
|
53
55
|
* stays grey, never a faded blue. An unselected tile stays neutral and takes a grey fill on hover.
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
56
|
+
* The corner always draws the dot or the check, empty until the tile is selected. The whole tinted
|
|
57
|
+
* row (title, specs, description, reason and corner mark) is the label that selects; `children` of a
|
|
58
|
+
* tile appear below that row while it is selected, outside the label, so a click there does not
|
|
59
|
+
* select, and they are for reading, never a link or a button. A tile, or the whole group, is unavailable only with a `disabledReason`, written under
|
|
60
|
+
* the tile's description or the legend, and only its title greys. A tile may carry `specs`, grey chips under its title, and one
|
|
57
61
|
* `badge` beside it for the option to prefer (*Recommended*); both are grey `secondary` badges,
|
|
58
62
|
* because blue marks only the selected tile.
|
|
59
63
|
* @words "Titles are parallel: one Title Case title plus one sentence-case description per tile,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"choicebox.d.ts","sourceRoot":"","sources":["../../src/components/choicebox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,KAAK,kBAAkB,GAAG;IACxB,6FAA6F;IAC7F,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAClD,CACI;IACE,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CACJ,CAAC;AAQJ
|
|
1
|
+
{"version":3,"file":"choicebox.d.ts","sourceRoot":"","sources":["../../src/components/choicebox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,KAAK,kBAAkB,GAAG;IACxB,6FAA6F;IAC7F,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAClD,CACI;IACE,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CACJ,CAAC;AAQJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAwDjD;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,cAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,uBAAuB,qBA0FzB;AAED,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -24,7 +24,8 @@ function asList(value) {
|
|
|
24
24
|
* (https://vercel.com/geist/choicebox) "Single-select for mutually exclusive choices, multi-select
|
|
25
25
|
* for additive ones." (https://vercel.com/geist/choicebox) "Don’t mix the two within one group."
|
|
26
26
|
* (https://vercel.com/geist/choicebox) "Cap at 4–6 tiles." (https://vercel.com/geist/choicebox)
|
|
27
|
-
* Ours: where a Library entry applies, an API key's access level.
|
|
27
|
+
* Ours: where a Library entry applies, an API key's access level. The options are known in advance
|
|
28
|
+
* and number no more than six.
|
|
28
29
|
* @instead "Past that, switch to `Select` or `Combobox` so the page doesn’t scroll for a single
|
|
29
30
|
* field." (https://vercel.com/geist/choicebox) "For plain text labels with no description, use
|
|
30
31
|
* `Radio`." (https://vercel.com/geist/choicebox) Ours: Geist's `Radio` is our `RadioGroup`, or a
|
|
@@ -35,7 +36,8 @@ function asList(value) {
|
|
|
35
36
|
* filled dot in the corner." (https://vercel.com/geist/choicebox) "The border highlight alone isn’t
|
|
36
37
|
* enough on low-contrast screens." (https://vercel.com/geist/choicebox) "Disabled tiles need a
|
|
37
38
|
* Tooltip naming why (`Available on Pro`)." (https://vercel.com/geist/choicebox) "A faded tile with
|
|
38
|
-
* no reason reads as broken." (https://vercel.com/geist/choicebox) Ours:
|
|
39
|
+
* no reason reads as broken." (https://vercel.com/geist/choicebox) Ours: each tile is a
|
|
40
|
+
* `ChoiceboxGroupItem`, which throws outside a `ChoiceboxGroup`. The group has a `label`
|
|
39
41
|
* and a `type`, and every tile a `title` and a `description`; a group or a tile without them does
|
|
40
42
|
* not compile. Tiles share one row and wrap to a column on a narrow screen;
|
|
41
43
|
* `orientation="vertical"` stacks them. They are 12 px apart, each with 12 px inside and 24 px
|
|
@@ -43,9 +45,11 @@ function asList(value) {
|
|
|
43
45
|
* available tile is the one place blue sits on a choice, as a blue border, a blue tint behind the
|
|
44
46
|
* title and description, blue words, and a blue corner mark; a selected tile that is unavailable
|
|
45
47
|
* stays grey, never a faded blue. An unselected tile stays neutral and takes a grey fill on hover.
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
48
|
+
* The corner always draws the dot or the check, empty until the tile is selected. The whole tinted
|
|
49
|
+
* row (title, specs, description, reason and corner mark) is the label that selects; `children` of a
|
|
50
|
+
* tile appear below that row while it is selected, outside the label, so a click there does not
|
|
51
|
+
* select, and they are for reading, never a link or a button. A tile, or the whole group, is unavailable only with a `disabledReason`, written under
|
|
52
|
+
* the tile's description or the legend, and only its title greys. A tile may carry `specs`, grey chips under its title, and one
|
|
49
53
|
* `badge` beside it for the option to prefer (*Recommended*); both are grey `secondary` badges,
|
|
50
54
|
* because blue marks only the selected tile.
|
|
51
55
|
* @words "Titles are parallel: one Title Case title plus one sentence-case description per tile,
|
|
@@ -29,7 +29,8 @@ export type ClearableInputProps = Omit<React.ComponentProps<"input">, "defaultVa
|
|
|
29
29
|
* (https://vercel.com/geist/clearable-input) Ours: a single-line value a person may want to empty
|
|
30
30
|
* in one move: a filter, a search, a reference they paste and replace.
|
|
31
31
|
* @instead A collection's search is `CollectionSearch`. A value that is never emptied is `Input`. A
|
|
32
|
-
* box with a fixed prefix or suffix is `Input`; one with a copy button is `InputGroup
|
|
32
|
+
* box with a fixed prefix or suffix is `Input`; one with a copy button is `InputGroup`, and any
|
|
33
|
+
* other fixed part beside a box is an `InputGroup` composition.
|
|
33
34
|
* @behaviour Same ring, halo, hover, disabled and error as `Input`; colour sits where it does there
|
|
34
35
|
* and nowhere else. The clear button shows only while the box has text and is enabled, as an Esc
|
|
35
36
|
* key cap flush against the end of the box that darkens on hover and keeps a transparent fill (a
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clearable-input.d.ts","sourceRoot":"","sources":["../../src/components/clearable-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGtD,sGAAsG;AACtG,MAAM,MAAM,sBAAsB,GAAG,QAAQ,SAAS,MAAM,IAAI,GAC5D,IAAI,SAAS,OAAO,GAClB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,GAClB,KAAK,GACP,KAAK,CAAC;AAEV,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,cAAc,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAClE,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gHAAgH;IAChH,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC;AAEd
|
|
1
|
+
{"version":3,"file":"clearable-input.d.ts","sourceRoot":"","sources":["../../src/components/clearable-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGtD,sGAAsG;AACtG,MAAM,MAAM,sBAAsB,GAAG,QAAQ,SAAS,MAAM,IAAI,GAC5D,IAAI,SAAS,OAAO,GAClB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,GAClB,KAAK,GACP,KAAK,CAAC;AAEV,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,cAAc,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAClE,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gHAAgH;IAChH,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAK,EACL,aAAa,EACb,OAAO,EACP,UAAU,EACV,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAe,EACf,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAyErB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -14,7 +14,8 @@ import { WaitingLine } from "./waiting-line.js";
|
|
|
14
14
|
* (https://vercel.com/geist/clearable-input) Ours: a single-line value a person may want to empty
|
|
15
15
|
* in one move: a filter, a search, a reference they paste and replace.
|
|
16
16
|
* @instead A collection's search is `CollectionSearch`. A value that is never emptied is `Input`. A
|
|
17
|
-
* box with a fixed prefix or suffix is `Input`; one with a copy button is `InputGroup
|
|
17
|
+
* box with a fixed prefix or suffix is `Input`; one with a copy button is `InputGroup`, and any
|
|
18
|
+
* other fixed part beside a box is an `InputGroup` composition.
|
|
18
19
|
* @behaviour Same ring, halo, hover, disabled and error as `Input`; colour sits where it does there
|
|
19
20
|
* and nowhere else. The clear button shows only while the box has text and is enabled, as an Esc
|
|
20
21
|
* key cap flush against the end of the box that darkens on hover and keeps a transparent fill (a
|
|
@@ -41,7 +41,8 @@ type CodeBlockProps = {
|
|
|
41
41
|
* @family Data
|
|
42
42
|
* @when “Use `<CodeBlock>` for multi-line, syntax-highlighted source the reader will scan or paste.” (https://vercel.com/geist/code-block)
|
|
43
43
|
* Ours: several lines a person reads or copies exactly: a configuration, static JSON, a command
|
|
44
|
-
* sequence, a file with the lines under discussion marked. There is no syntax colour yet.
|
|
44
|
+
* sequence, a file with the lines under discussion marked. There is no syntax colour yet. Static JSON
|
|
45
|
+
* is serialized by the caller or the adapter before it reaches `code`; the block shows the text as given.
|
|
45
46
|
* @instead “For a single inline token (env var, function name, file path), use `Inline Code`.” (https://vercel.com/geist/code-block)
|
|
46
47
|
* “Pick `Snippet` for a copy-to-clipboard shell command or one-line key reveal; it ships with the prompt glyph and copy affordance built in.” (https://vercel.com/geist/code-block)
|
|
47
48
|
* Ours: a token inside a sentence is inline code. One short value to copy is `TextWithCopyButton`. A
|
|
@@ -57,17 +58,19 @@ type CodeBlockProps = {
|
|
|
57
58
|
* `highlightedLinesNumbers` (info), `addedLinesNumbers` (success) and `removedLinesNumbers`
|
|
58
59
|
* (destructive); a line carries one mark, and the line a link points at takes the warning fill. A
|
|
59
60
|
* mark is fill and bar with no glyph, announced by the line's name. `hideLineNumbers` is for a few
|
|
60
|
-
* lines where numbers add nothing. The header (40 px, muted
|
|
61
|
-
* only with a `filename`, a `switcher` or `tabs`. `tabs`
|
|
62
|
-
* `switcher` (a select) sits in the header before the copy
|
|
63
|
-
* filename and the copy mark are muted; without a header the
|
|
64
|
-
* right corner in the full text colour and shows while the
|
|
65
|
-
* focus (always on a touch screen).
|
|
66
|
-
*
|
|
67
|
-
*
|
|
61
|
+
* lines where numbers add nothing; the marks still show and are announced. The header (40 px, muted
|
|
62
|
+
* fill, the file's icon and name) exists only with a `filename`, a `switcher` or `tabs`. `tabs`
|
|
63
|
+
* draw as a row above the header, a `switcher` (a select) sits in the header before the copy
|
|
64
|
+
* button; never both. In the header the filename and the copy mark are muted; without a header the
|
|
65
|
+
* copy button floats 15 px from the top right corner in the full text colour and shows while the
|
|
66
|
+
* block is hovered or something in it has focus (always on a touch screen). The copy button is
|
|
67
|
+
* `CopyButton` at `icon-sm`, 32 px, not Geist's 28 px: `CopyButton` has no 28 px size. A line
|
|
68
|
+
* number links to its line for a pointer and is out of the tab order. The file icon follows the
|
|
69
|
+
* filename's extension. There is no syntax colour and no `language` until a highlighter is adopted,
|
|
70
|
+
* and no Open in v0 action.
|
|
68
71
|
* @words “Snippets stay runnable. Don’t paraphrase real code into pseudo-syntax, and don’t prepend `$` to shell commands. `<Snippet>` already renders the prompt, so `text="$ vercel deploy"` doubles to `$ $ vercel deploy`.” (https://vercel.com/geist/code-block)
|
|
69
72
|
* “Keep prose around the block in sentence case and put backticks around CLI flags inline (`` `--prebuilt` ``).” (https://vercel.com/geist/code-block)
|
|
70
|
-
* Ours: the real filename,
|
|
73
|
+
* Ours: the real filename, and only when the code has a place to be pasted into, otherwise none. A switcher's `label` names what it switches (*Language*), and
|
|
71
74
|
* its options are the languages by their common names (*JSON*). `label` names the code (*MCP
|
|
72
75
|
* configuration*). `lineLabel` says a marked line and its mark in the catalogue's words (*Line 3,
|
|
73
76
|
* added*, *Riga 3, aggiunta*); it is only called for a highlighted, added or removed line.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAc5E,KAAK,WAAW,GAAG,aAAa,GAAG,OAAO,GAAG,SAAS,CAAC;AAGvD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,eAAe,GAChB;IAAE,QAAQ,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAC3D;IAAE,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAEhE,oGAAoG;AACpG,KAAK,WAAW,GACZ;IACE,uBAAuB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACxD,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAClD,mBAAmB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACpD,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,KAAK,MAAM,CAAC;CACzD,GACD;IACE,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEN,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACvC,GAAG,WAAW,GACb,eAAe,GACf,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAyDzE
|
|
1
|
+
{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAc5E,KAAK,WAAW,GAAG,aAAa,GAAG,OAAO,GAAG,SAAS,CAAC;AAGvD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,eAAe,GAChB;IAAE,QAAQ,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAC3D;IAAE,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAEhE,oGAAoG;AACpG,KAAK,WAAW,GACZ;IACE,uBAAuB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACxD,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAClD,mBAAmB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACpD,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,KAAK,MAAM,CAAC;CACzD,GACD;IACE,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEN,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACvC,GAAG,WAAW,GACb,eAAe,GACf,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAyDzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,iBAAS,SAAS,CAAC,EACjB,iBAAiB,EACjB,SAAS,EACT,IAAI,EACJ,WAAW,EACX,eAAe,EACf,SAAS,EACT,QAAQ,EACR,eAAuB,EACvB,uBAAuB,EACvB,KAAK,EACL,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,IAAI,GACL,EAAE,cAAc,+BA4FhB;AAED,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}
|
|
@@ -30,7 +30,8 @@ function LanguageTabs({ label, onChange, options, value }) {
|
|
|
30
30
|
* @family Data
|
|
31
31
|
* @when “Use `<CodeBlock>` for multi-line, syntax-highlighted source the reader will scan or paste.” (https://vercel.com/geist/code-block)
|
|
32
32
|
* Ours: several lines a person reads or copies exactly: a configuration, static JSON, a command
|
|
33
|
-
* sequence, a file with the lines under discussion marked. There is no syntax colour yet.
|
|
33
|
+
* sequence, a file with the lines under discussion marked. There is no syntax colour yet. Static JSON
|
|
34
|
+
* is serialized by the caller or the adapter before it reaches `code`; the block shows the text as given.
|
|
34
35
|
* @instead “For a single inline token (env var, function name, file path), use `Inline Code`.” (https://vercel.com/geist/code-block)
|
|
35
36
|
* “Pick `Snippet` for a copy-to-clipboard shell command or one-line key reveal; it ships with the prompt glyph and copy affordance built in.” (https://vercel.com/geist/code-block)
|
|
36
37
|
* Ours: a token inside a sentence is inline code. One short value to copy is `TextWithCopyButton`. A
|
|
@@ -46,17 +47,19 @@ function LanguageTabs({ label, onChange, options, value }) {
|
|
|
46
47
|
* `highlightedLinesNumbers` (info), `addedLinesNumbers` (success) and `removedLinesNumbers`
|
|
47
48
|
* (destructive); a line carries one mark, and the line a link points at takes the warning fill. A
|
|
48
49
|
* mark is fill and bar with no glyph, announced by the line's name. `hideLineNumbers` is for a few
|
|
49
|
-
* lines where numbers add nothing. The header (40 px, muted
|
|
50
|
-
* only with a `filename`, a `switcher` or `tabs`. `tabs`
|
|
51
|
-
* `switcher` (a select) sits in the header before the copy
|
|
52
|
-
* filename and the copy mark are muted; without a header the
|
|
53
|
-
* right corner in the full text colour and shows while the
|
|
54
|
-
* focus (always on a touch screen).
|
|
55
|
-
*
|
|
56
|
-
*
|
|
50
|
+
* lines where numbers add nothing; the marks still show and are announced. The header (40 px, muted
|
|
51
|
+
* fill, the file's icon and name) exists only with a `filename`, a `switcher` or `tabs`. `tabs`
|
|
52
|
+
* draw as a row above the header, a `switcher` (a select) sits in the header before the copy
|
|
53
|
+
* button; never both. In the header the filename and the copy mark are muted; without a header the
|
|
54
|
+
* copy button floats 15 px from the top right corner in the full text colour and shows while the
|
|
55
|
+
* block is hovered or something in it has focus (always on a touch screen). The copy button is
|
|
56
|
+
* `CopyButton` at `icon-sm`, 32 px, not Geist's 28 px: `CopyButton` has no 28 px size. A line
|
|
57
|
+
* number links to its line for a pointer and is out of the tab order. The file icon follows the
|
|
58
|
+
* filename's extension. There is no syntax colour and no `language` until a highlighter is adopted,
|
|
59
|
+
* and no Open in v0 action.
|
|
57
60
|
* @words “Snippets stay runnable. Don’t paraphrase real code into pseudo-syntax, and don’t prepend `$` to shell commands. `<Snippet>` already renders the prompt, so `text="$ vercel deploy"` doubles to `$ $ vercel deploy`.” (https://vercel.com/geist/code-block)
|
|
58
61
|
* “Keep prose around the block in sentence case and put backticks around CLI flags inline (`` `--prebuilt` ``).” (https://vercel.com/geist/code-block)
|
|
59
|
-
* Ours: the real filename,
|
|
62
|
+
* Ours: the real filename, and only when the code has a place to be pasted into, otherwise none. A switcher's `label` names what it switches (*Language*), and
|
|
60
63
|
* its options are the languages by their common names (*JSON*). `label` names the code (*MCP
|
|
61
64
|
* configuration*). `lineLabel` says a marked line and its mark in the catalogue's words (*Line 3,
|
|
62
65
|
* added*, *Riga 3, aggiunta*); it is only called for a highlighted, added or removed line.
|