@tempoxyz/ds 0.3.11 → 0.3.13
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/README.md +7 -6
- package/dist/docs/AGENTS.md +8 -5
- package/dist/docs/index.md +143 -135
- package/dist/docs/marketing/introduction/getting-started.md +241 -0
- package/dist/docs/{components → product/components}/accordion.md +8 -8
- package/dist/docs/{components → product/components}/address-card.md +5 -5
- package/dist/docs/{components → product/components}/agent-logo.md +5 -5
- package/dist/docs/{components → product/components}/alert-dialog.md +11 -11
- package/dist/docs/{components → product/components}/alert.md +11 -11
- package/dist/docs/{components → product/components}/amount-input.md +13 -13
- package/dist/docs/{components → product/components}/amount.md +8 -8
- package/dist/docs/{components → product/components}/app-shell.md +13 -13
- package/dist/docs/{components → product/components}/asset-chip.md +11 -11
- package/dist/docs/{components → product/components}/autocomplete.md +10 -9
- package/dist/docs/{components → product/components}/avatar.md +8 -8
- package/dist/docs/{components → product/components}/badge.md +9 -9
- package/dist/docs/{components → product/components}/badged-logo.md +6 -6
- package/dist/docs/{components → product/components}/banner.md +8 -8
- package/dist/docs/{components → product/components}/bar-chart.md +7 -7
- package/dist/docs/{components → product/components}/breadcrumbs.md +8 -8
- package/dist/docs/{components → product/components}/button-group.md +8 -8
- package/dist/docs/{components → product/components}/button.md +17 -17
- package/dist/docs/{components → product/components}/calendar.md +8 -8
- package/dist/docs/{components → product/components}/callout.md +5 -5
- package/dist/docs/{components → product/components}/checkbox-group.md +13 -13
- package/dist/docs/{components → product/components}/checkbox.md +12 -12
- package/dist/docs/{components → product/components}/choice-group.md +14 -14
- package/dist/docs/{components → product/components}/choicebox.md +9 -9
- package/dist/docs/{components → product/components}/code.md +5 -5
- package/dist/docs/{components → product/components}/combobox.md +9 -9
- package/dist/docs/{components → product/components}/container.md +7 -7
- package/dist/docs/{components → product/components}/copy-button.md +13 -13
- package/dist/docs/{components → product/components}/date-picker.md +11 -11
- package/dist/docs/{components → product/components}/dialog.md +17 -17
- package/dist/docs/{components → product/components}/drawer.md +11 -11
- package/dist/docs/{components → product/components}/empty.md +9 -9
- package/dist/docs/{components → product/components}/field.md +14 -14
- package/dist/docs/{components → product/components}/fieldset.md +6 -6
- package/dist/docs/{components → product/components}/frame.md +9 -9
- package/dist/docs/{components → product/components}/gauge.md +7 -7
- package/dist/docs/{components → product/components}/get-started-visual.md +4 -4
- package/dist/docs/{components → product/components}/grid.md +7 -7
- package/dist/docs/{components → product/components}/hero-visual.md +4 -4
- package/dist/docs/{components → product/components}/hex.md +9 -9
- package/dist/docs/{components → product/components}/icon-tile.md +8 -8
- package/dist/docs/{components → product/components}/identicon.md +7 -7
- package/dist/docs/{components → product/components}/inline.md +7 -7
- package/dist/docs/{components → product/components}/inset.md +8 -8
- package/dist/docs/{components → product/components}/kbd.md +8 -8
- package/dist/docs/{components → product/components}/list-group.md +24 -24
- package/dist/docs/{components → product/components}/loading-dots.md +8 -8
- package/dist/docs/{components → product/components}/menu.md +14 -14
- package/dist/docs/{components → product/components}/native-select.md +7 -7
- package/dist/docs/{components → product/components}/network-logo.md +7 -7
- package/dist/docs/{components → product/components}/number-field.md +8 -8
- package/dist/docs/{components → product/components}/otp-field.md +9 -9
- package/dist/docs/{components → product/components}/pagination.md +8 -8
- package/dist/docs/{components → product/components}/popover.md +11 -11
- package/dist/docs/{components → product/components}/progress.md +10 -10
- package/dist/docs/{components → product/components}/qr.md +8 -8
- package/dist/docs/{components → product/components}/radio-group.md +10 -10
- package/dist/docs/{components → product/components}/secret-value.md +8 -8
- package/dist/docs/{components → product/components}/select.md +13 -13
- package/dist/docs/{components → product/components}/separator.md +7 -7
- package/dist/docs/{components → product/components}/sidebar-menu.md +11 -11
- package/dist/docs/{components → product/components}/skeleton.md +9 -9
- package/dist/docs/{components → product/components}/slider.md +8 -8
- package/dist/docs/{components → product/components}/snippet.md +10 -10
- package/dist/docs/{components → product/components}/spinner.md +12 -12
- package/dist/docs/{components → product/components}/split-bar.md +5 -5
- package/dist/docs/{components → product/components}/split-button.md +11 -11
- package/dist/docs/{components → product/components}/stack.md +8 -8
- package/dist/docs/{components → product/components}/status-chip.md +7 -7
- package/dist/docs/{components → product/components}/status-indicator.md +6 -6
- package/dist/docs/{components → product/components}/status-row.md +7 -7
- package/dist/docs/{components → product/components}/stepper.md +9 -9
- package/dist/docs/{components → product/components}/success-hero.md +5 -5
- package/dist/docs/{components → product/components}/surface.md +11 -11
- package/dist/docs/{components → product/components}/switch.md +11 -11
- package/dist/docs/{components → product/components}/table.md +16 -16
- package/dist/docs/{components → product/components}/tabs.md +11 -11
- package/dist/docs/{components → product/components}/tempo-logo.md +4 -4
- package/dist/docs/{components → product/components}/text-input.md +14 -14
- package/dist/docs/{components → product/components}/textarea.md +7 -7
- package/dist/docs/{components → product/components}/toast.md +11 -11
- package/dist/docs/{components → product/components}/token-logo.md +16 -16
- package/dist/docs/{components → product/components}/token.md +10 -10
- package/dist/docs/{components → product/components}/tooltip.md +11 -11
- package/dist/docs/{components → product/components}/verification-code.md +4 -4
- package/dist/docs/{components → product/components}/visual.md +5 -5
- package/dist/docs/product/components.md +203 -0
- package/dist/docs/{foundations → product/foundations}/accessibility.md +16 -16
- package/dist/docs/{foundations → product/foundations}/agents.md +17 -17
- package/dist/docs/{foundations → product/foundations}/color.md +7 -7
- package/dist/docs/{foundations → product/foundations}/content/tone.md +7 -7
- package/dist/docs/{foundations → product/foundations}/content/voice.md +2 -2
- package/dist/docs/{foundations → product/foundations}/content/writing-style.md +8 -8
- package/dist/docs/{foundations → product/foundations}/iconography.md +11 -11
- package/dist/docs/{foundations → product/foundations}/intent.md +28 -28
- package/dist/docs/{foundations → product/foundations}/layout.md +22 -22
- package/dist/docs/product/foundations/linter.md +496 -0
- package/dist/docs/{foundations → product/foundations}/motion.md +7 -7
- package/dist/docs/{foundations → product/foundations}/radius-and-padding.md +3 -3
- package/dist/docs/{foundations → product/foundations}/typography.md +4 -4
- package/dist/docs/{introduction → product/introduction}/faq.md +22 -21
- package/dist/docs/{introduction → product/introduction}/getting-started.md +4 -4
- package/dist/docs/{patterns → product/patterns}/blockchain-values.md +20 -20
- package/dist/docs/{patterns → product/patterns}/dashboards.md +28 -28
- package/dist/docs/{patterns → product/patterns}/destructive-actions.md +16 -16
- package/dist/docs/{patterns → product/patterns}/empty-states.md +14 -14
- package/dist/docs/{patterns → product/patterns}/errors-and-validation.md +23 -23
- package/dist/docs/{patterns → product/patterns}/feedback-and-status.md +31 -31
- package/dist/docs/{patterns → product/patterns}/forms.md +24 -24
- package/dist/docs/{patterns → product/patterns}/loading.md +19 -19
- package/dist/docs/{patterns → product/patterns}/navigation.md +23 -23
- package/dist/docs/{patterns → product/patterns}/payments.md +20 -20
- package/dist/docs/{patterns → product/patterns}/responsive-layout.md +23 -23
- package/dist/docs/{patterns → product/patterns}/tables-and-lists.md +19 -19
- package/dist/docs/{products → product/products}/tempo-console.md +12 -12
- package/dist/docs/{products → product/products}/tempo-performance.md +11 -11
- package/dist/docs/{products → product/products}/tempo-wallet.md +12 -12
- package/dist/marketing/index.d.ts +4 -0
- package/dist/marketing/index.d.ts.map +1 -0
- package/dist/marketing/index.js +4 -0
- package/dist/marketing/index.js.map +1 -0
- package/dist/marketing/index.js.zyzz.json +1 -0
- package/dist/marketing/vars.d.ts +907 -0
- package/dist/marketing/vars.d.ts.map +1 -0
- package/dist/marketing/vars.js +15 -0
- package/dist/marketing/vars.js.map +1 -0
- package/dist/marketing/vars.js.zyzz.json +1 -0
- package/dist/marketing/zyzz.config.d.ts +4512 -0
- package/dist/marketing/zyzz.config.d.ts.map +1 -0
- package/dist/marketing/zyzz.config.js +63 -0
- package/dist/marketing/zyzz.config.js.map +1 -0
- package/dist/marketing/zyzz.config.js.zyzz.json +1 -0
- package/dist/oxlint/index.d.ts +12 -1
- package/dist/oxlint/index.d.ts.map +1 -1
- package/dist/oxlint/index.js +39 -1
- package/dist/oxlint/index.js.map +1 -1
- package/dist/oxlint/internal/Docs.d.ts +9 -0
- package/dist/oxlint/internal/Docs.d.ts.map +1 -0
- package/dist/oxlint/internal/Docs.js +15 -0
- package/dist/oxlint/internal/Docs.js.map +1 -0
- package/dist/oxlint/internal/Imports.d.ts +1 -1
- package/dist/oxlint/internal/Imports.d.ts.map +1 -1
- package/dist/oxlint/internal/Imports.js +2 -0
- package/dist/oxlint/internal/Imports.js.map +1 -1
- package/dist/oxlint/internal/Styles.d.ts +40 -0
- package/dist/oxlint/internal/Styles.d.ts.map +1 -0
- package/dist/oxlint/internal/Styles.js +194 -0
- package/dist/oxlint/internal/Styles.js.map +1 -0
- package/dist/oxlint/internal/Tokens.d.ts +16 -0
- package/dist/oxlint/internal/Tokens.d.ts.map +1 -0
- package/dist/oxlint/internal/Tokens.js +39 -0
- package/dist/oxlint/internal/Tokens.js.map +1 -0
- package/dist/oxlint/rules/NoCrossSurface.d.ts +2 -2
- package/dist/oxlint/rules/NoCrossSurface.js +3 -3
- package/dist/oxlint/rules/NoCrossSurface.js.map +1 -1
- package/dist/oxlint/rules/NoCustomValues.d.ts +11 -0
- package/dist/oxlint/rules/NoCustomValues.d.ts.map +1 -0
- package/dist/oxlint/rules/NoCustomValues.js +150 -0
- package/dist/oxlint/rules/NoCustomValues.js.map +1 -0
- package/dist/oxlint/rules/NoSingleKeyShortcuts.d.ts +11 -0
- package/dist/oxlint/rules/NoSingleKeyShortcuts.d.ts.map +1 -0
- package/dist/oxlint/rules/NoSingleKeyShortcuts.js +158 -0
- package/dist/oxlint/rules/NoSingleKeyShortcuts.js.map +1 -0
- package/dist/oxlint/rules/PreferComponent.d.ts +3 -2
- package/dist/oxlint/rules/PreferComponent.d.ts.map +1 -1
- package/dist/oxlint/rules/PreferComponent.js +11 -4
- package/dist/oxlint/rules/PreferComponent.js.map +1 -1
- package/dist/oxlint/rules/PreferLayout.d.ts +9 -0
- package/dist/oxlint/rules/PreferLayout.d.ts.map +1 -0
- package/dist/oxlint/rules/PreferLayout.js +90 -0
- package/dist/oxlint/rules/PreferLayout.js.map +1 -0
- package/dist/oxlint/rules/PreferProgress.d.ts +9 -0
- package/dist/oxlint/rules/PreferProgress.d.ts.map +1 -0
- package/dist/oxlint/rules/PreferProgress.js +43 -0
- package/dist/oxlint/rules/PreferProgress.js.map +1 -0
- package/dist/oxlint/rules/PreferSurface.d.ts +9 -0
- package/dist/oxlint/rules/PreferSurface.d.ts.map +1 -0
- package/dist/oxlint/rules/PreferSurface.js +55 -0
- package/dist/oxlint/rules/PreferSurface.js.map +1 -0
- package/dist/oxlint/rules/RequireAccessibleName.d.ts.map +1 -1
- package/dist/oxlint/rules/RequireAccessibleName.js +3 -1
- package/dist/oxlint/rules/RequireAccessibleName.js.map +1 -1
- package/dist/oxlint/rules/RequireScrollRegion.d.ts +11 -0
- package/dist/oxlint/rules/RequireScrollRegion.d.ts.map +1 -0
- package/dist/oxlint/rules/RequireScrollRegion.js +71 -0
- package/dist/oxlint/rules/RequireScrollRegion.js.map +1 -0
- package/dist/web/icons/index.js.zyzz.json +1 -0
- package/package.json +6 -1
- package/src/marketing/README.md +21 -0
- package/src/marketing/index.ts +3 -0
- package/src/marketing/vars.ts +751 -0
- package/src/marketing/zyzz.config.ts +376 -0
- package/src/oxlint/index.ts +40 -1
- package/src/oxlint/internal/Docs.ts +18 -0
- package/src/oxlint/internal/Imports.ts +2 -1
- package/src/oxlint/internal/Styles.ts +240 -0
- package/src/oxlint/internal/Tokens.ts +43 -0
- package/src/oxlint/rules/NoCrossSurface.ts +3 -3
- package/src/oxlint/rules/NoCustomValues.ts +170 -0
- package/src/oxlint/rules/NoSingleKeyShortcuts.ts +190 -0
- package/src/oxlint/rules/PreferComponent.ts +11 -4
- package/src/oxlint/rules/PreferLayout.ts +96 -0
- package/src/oxlint/rules/PreferProgress.ts +49 -0
- package/src/oxlint/rules/PreferSurface.ts +70 -0
- package/src/oxlint/rules/RequireAccessibleName.ts +3 -1
- package/src/oxlint/rules/RequireScrollRegion.ts +92 -0
- package/dist/docs/components.md +0 -203
- package/dist/docs/foundations/linter.md +0 -296
|
@@ -130,7 +130,7 @@ namespace styles {
|
|
|
130
130
|
|
|
131
131
|
### Title and Description
|
|
132
132
|
|
|
133
|
-
Stack a `ListGroup.Title` over a `ListGroup.Description` in `ListGroup.Info`, after an [Avatar](
|
|
133
|
+
Stack a `ListGroup.Title` over a `ListGroup.Description` in `ListGroup.Info`, after an [Avatar](avatar.md). The row grows to 64px.
|
|
134
134
|
|
|
135
135
|
```tsx
|
|
136
136
|
import { Avatar, ListGroup, style } from '@tempoxyz/ds'
|
|
@@ -241,7 +241,7 @@ namespace styles {
|
|
|
241
241
|
|
|
242
242
|
### Networks
|
|
243
243
|
|
|
244
|
-
Lead with a [NetworkLogo](
|
|
244
|
+
Lead with a [NetworkLogo](network-logo.md), and list supported assets in [AssetChip](asset-chip.md) elements inside a `ListGroup.Chips` under the title.
|
|
245
245
|
|
|
246
246
|
```tsx
|
|
247
247
|
import { AssetChip, ListGroup, NetworkLogo, style } from '@tempoxyz/ds'
|
|
@@ -280,7 +280,7 @@ namespace styles {
|
|
|
280
280
|
|
|
281
281
|
### Meter
|
|
282
282
|
|
|
283
|
-
Lead with an [AgentLogo](
|
|
283
|
+
Lead with an [AgentLogo](agent-logo.md) and end with a `ListGroup.Meter` to show how much of a limit each agent used. The bars line up from row to row.
|
|
284
284
|
|
|
285
285
|
```tsx
|
|
286
286
|
/** Demonstrates ListGroup rows that show how much of a spending limit each agent used. @module */
|
|
@@ -555,12 +555,12 @@ import { ListGroup } from '@tempoxyz/ds'
|
|
|
555
555
|
|
|
556
556
|
### When Not to Use
|
|
557
557
|
|
|
558
|
-
* Use [Table](
|
|
559
|
-
* Use [Accordion](
|
|
560
|
-
* Use [Menu](
|
|
561
|
-
* Use [SidebarMenu](
|
|
562
|
-
* Use [Field](
|
|
563
|
-
* Use [RadioGroup](
|
|
558
|
+
* Use [Table](table.md) to compare many records across the same fields.
|
|
559
|
+
* Use [Accordion](accordion.md) to reveal details under a heading, such as a fee breakdown or help answers.
|
|
560
|
+
* Use [Menu](menu.md) for a list of actions that opens from a button.
|
|
561
|
+
* Use [SidebarMenu](sidebar-menu.md) for the main navigation of an app.
|
|
562
|
+
* Use [Field](field.md) with form controls when people edit the values.
|
|
563
|
+
* Use [RadioGroup](radio-group.md) to pick one short text option in a form, without an avatar or a description.
|
|
564
564
|
|
|
565
565
|
### Pick a Variant by What the Group Holds
|
|
566
566
|
|
|
@@ -625,7 +625,7 @@ Give each topic its own boxed group, and name it by what it holds, not by the sc
|
|
|
625
625
|
|
|
626
626
|
### Put the Label First
|
|
627
627
|
|
|
628
|
-
`ListGroup.Label` keeps its width and pushes the value to the end of the row. Format values with [Amount](
|
|
628
|
+
`ListGroup.Label` keeps its width and pushes the value to the end of the row. Format values with [Amount](amount.md), [Hex](hex.md), and [Badge](badge.md).
|
|
629
629
|
|
|
630
630
|
**Do:** Pair each `ListGroup.Label` with a formatted value, such as an `Amount` or a `Hex`.
|
|
631
631
|
|
|
@@ -713,7 +713,7 @@ export function Demo() {
|
|
|
713
713
|
|
|
714
714
|
### Shorten Addresses in Rows
|
|
715
715
|
|
|
716
|
-
A [Hex](
|
|
716
|
+
A [Hex](hex.md) fills the space beside its label, so a long address crowds the label and ends short of the other values. Wrap it in an element capped at about `10rem`, and add `copy`. Before a payment, show the full recipient outside the rows, as the [Hex](hex.md) page shows.
|
|
717
717
|
|
|
718
718
|
**Do:** Cap the width of a `Hex` so it ends with the other values.
|
|
719
719
|
|
|
@@ -786,11 +786,11 @@ namespace styles {
|
|
|
786
786
|
|
|
787
787
|
* **None (none):** For read-only details, such as Chain ID. With `onClick`, the row becomes a button.
|
|
788
788
|
* **Navigation (navigation):** Opens another page and shows a trailing chevron. Renders a button, or a link through `render`.
|
|
789
|
-
* **Copy (Button):** Copies a value. Keep the row static, which fills on hover, and end it with an `xsmall` [Button](
|
|
789
|
+
* **Copy (Button):** Copies a value. Keep the row static, which fills on hover, and end it with an `xsmall` [Button](button.md).
|
|
790
790
|
|
|
791
791
|
### Keep Pressable Rows Free of Other Controls
|
|
792
792
|
|
|
793
|
-
A pressable row is one button or link. If a row holds its own control, such as a [Switch](
|
|
793
|
+
A pressable row is one button or link. If a row holds its own control, such as a [Switch](switch.md), leave `action` and `onClick` off and place the control at the end. The row fills on hover, and the control stays the only target.
|
|
794
794
|
|
|
795
795
|
**Do:** Place the control at the end of a static row.
|
|
796
796
|
|
|
@@ -936,46 +936,46 @@ namespace styles {
|
|
|
936
936
|
|
|
937
937
|
## Related
|
|
938
938
|
|
|
939
|
-
[Table](
|
|
939
|
+
[Table](table.md)
|
|
940
940
|
|
|
941
941
|
Use for comparing many records.
|
|
942
942
|
|
|
943
|
-
[Accordion](
|
|
943
|
+
[Accordion](accordion.md)
|
|
944
944
|
|
|
945
945
|
Use for collapsible sections of content.
|
|
946
946
|
|
|
947
|
-
[Surface](
|
|
947
|
+
[Surface](surface.md)
|
|
948
948
|
|
|
949
949
|
Use for grouping rows in a card.
|
|
950
950
|
|
|
951
|
-
[Amount](
|
|
951
|
+
[Amount](amount.md)
|
|
952
952
|
|
|
953
953
|
Use for values.
|
|
954
954
|
|
|
955
|
-
[Hex](
|
|
955
|
+
[Hex](hex.md)
|
|
956
956
|
|
|
957
957
|
Use for values.
|
|
958
958
|
|
|
959
|
-
[Avatar](
|
|
959
|
+
[Avatar](avatar.md)
|
|
960
960
|
|
|
961
961
|
Use for the leading image of a contact row.
|
|
962
962
|
|
|
963
|
-
[NetworkLogo](
|
|
963
|
+
[NetworkLogo](network-logo.md)
|
|
964
964
|
|
|
965
965
|
Use for the leading logo of a network row.
|
|
966
966
|
|
|
967
|
-
[AssetChip](
|
|
967
|
+
[AssetChip](asset-chip.md)
|
|
968
968
|
|
|
969
969
|
Use for the assets a network row supports.
|
|
970
970
|
|
|
971
|
-
[AgentLogo](
|
|
971
|
+
[AgentLogo](agent-logo.md)
|
|
972
972
|
|
|
973
973
|
Use for the leading logo of an agent row.
|
|
974
974
|
|
|
975
|
-
[RadioGroup](
|
|
975
|
+
[RadioGroup](radio-group.md)
|
|
976
976
|
|
|
977
977
|
Use for picking one short text option in a form.
|
|
978
978
|
|
|
979
|
-
[Tables and Lists](
|
|
979
|
+
[Tables and Lists](../patterns/tables-and-lists.md)
|
|
980
980
|
|
|
981
981
|
Covers choosing a layout.
|
|
@@ -65,10 +65,10 @@ import { LoadingDots } from '@tempoxyz/ds'
|
|
|
65
65
|
|
|
66
66
|
### When Not to Use
|
|
67
67
|
|
|
68
|
-
* Use `loading` on a [Button](
|
|
69
|
-
* Use [Spinner](
|
|
70
|
-
* Use [Skeleton](
|
|
71
|
-
* Use [Progress](
|
|
68
|
+
* Use `loading` on a [Button](button.md) while its action runs.
|
|
69
|
+
* Use [Spinner](spinner.md) for a busy region or control.
|
|
70
|
+
* Use [Skeleton](skeleton.md) for content with a known shape, such as rows or cards.
|
|
71
|
+
* Use [Progress](progress.md) for measurable work, or any wait longer than about 10 seconds.
|
|
72
72
|
|
|
73
73
|
### Keep Them in Line With Text
|
|
74
74
|
|
|
@@ -220,18 +220,18 @@ LoadingDots renders a polite live region named "Loading". The dots carry no text
|
|
|
220
220
|
|
|
221
221
|
## Related
|
|
222
222
|
|
|
223
|
-
[Spinner](
|
|
223
|
+
[Spinner](spinner.md)
|
|
224
224
|
|
|
225
225
|
Use for a busy region or control.
|
|
226
226
|
|
|
227
|
-
[Skeleton](
|
|
227
|
+
[Skeleton](skeleton.md)
|
|
228
228
|
|
|
229
229
|
Use for content with a known shape.
|
|
230
230
|
|
|
231
|
-
[Button](
|
|
231
|
+
[Button](button.md)
|
|
232
232
|
|
|
233
233
|
Use for an action's loading state.
|
|
234
234
|
|
|
235
|
-
[Loading](
|
|
235
|
+
[Loading](../patterns/loading.md)
|
|
236
236
|
|
|
237
237
|
Covers choosing a loading indicator.
|
|
@@ -201,12 +201,12 @@ import { Menu } from '@tempoxyz/ds'
|
|
|
201
201
|
|
|
202
202
|
### When Not to Use
|
|
203
203
|
|
|
204
|
-
* Use [Select](
|
|
205
|
-
* Use [Tabs](
|
|
206
|
-
* Use a [Button](
|
|
207
|
-
* Use [SplitButton](
|
|
208
|
-
* Use [SidebarMenu](
|
|
209
|
-
* Use [Popover](
|
|
204
|
+
* Use [Select](select.md) or [Combobox](combobox.md) to choose a form value, such as a token or network.
|
|
205
|
+
* Use [Tabs](tabs.md) or [ChoiceGroup](choice-group.md) to switch views with every option visible.
|
|
206
|
+
* Use a [Button](button.md) for one or two actions.
|
|
207
|
+
* Use [SplitButton](split-button.md) when one action is the clear default.
|
|
208
|
+
* Use [SidebarMenu](sidebar-menu.md) or links for navigation. `Menu.LinkItem` suits an occasional link among actions, such as View on explorer.
|
|
209
|
+
* Use [Popover](popover.md) for text or form controls. A menu holds only items.
|
|
210
210
|
|
|
211
211
|
### Order Items by Frequency
|
|
212
212
|
|
|
@@ -578,12 +578,12 @@ namespace styles {
|
|
|
578
578
|
}
|
|
579
579
|
```
|
|
580
580
|
|
|
581
|
-
If the action cannot be undone, open an [AlertDialog](
|
|
581
|
+
If the action cannot be undone, open an [AlertDialog](alert-dialog.md) from the item and repeat the item's verb on its confirm button:
|
|
582
582
|
|
|
583
583
|
* **Placement:** Render the dialog outside `Menu.Popup`, which unmounts when the menu closes.
|
|
584
584
|
* **State:** Open it from the item's `onClick` with `open` and `onOpenChange`.
|
|
585
585
|
|
|
586
|
-
See [Destructive Actions](
|
|
586
|
+
See [Destructive Actions](../patterns/destructive-actions.md).
|
|
587
587
|
|
|
588
588
|
### Disable Unavailable Items
|
|
589
589
|
|
|
@@ -909,26 +909,26 @@ Menu follows the [WAI-ARIA Authoring Practices menu button pattern](https://www.
|
|
|
909
909
|
|
|
910
910
|
## Related
|
|
911
911
|
|
|
912
|
-
[SplitButton](
|
|
912
|
+
[SplitButton](split-button.md)
|
|
913
913
|
|
|
914
914
|
Use for a main action with alternatives.
|
|
915
915
|
|
|
916
|
-
[Select](
|
|
916
|
+
[Select](select.md)
|
|
917
917
|
|
|
918
918
|
Use for choosing a form value.
|
|
919
919
|
|
|
920
|
-
[AlertDialog](
|
|
920
|
+
[AlertDialog](alert-dialog.md)
|
|
921
921
|
|
|
922
922
|
Use for confirming a destructive item.
|
|
923
923
|
|
|
924
|
-
[Popover](
|
|
924
|
+
[Popover](popover.md)
|
|
925
925
|
|
|
926
926
|
Use for anchored content other than actions.
|
|
927
927
|
|
|
928
|
-
[Destructive Actions](
|
|
928
|
+
[Destructive Actions](../patterns/destructive-actions.md)
|
|
929
929
|
|
|
930
930
|
Covers deleting and revoking.
|
|
931
931
|
|
|
932
|
-
[Tables and Lists](
|
|
932
|
+
[Tables and Lists](../patterns/tables-and-lists.md)
|
|
933
933
|
|
|
934
934
|
Covers row actions.
|
|
@@ -122,9 +122,9 @@ import { NativeSelect } from '@tempoxyz/ds'
|
|
|
122
122
|
|
|
123
123
|
### When Not to Use
|
|
124
124
|
|
|
125
|
-
* Use [Select](
|
|
126
|
-
* Use [ChoiceGroup](
|
|
127
|
-
* Use [Combobox](
|
|
125
|
+
* Use [Select](select.md) when the options need icons, logos, or a styled popup.
|
|
126
|
+
* Use [ChoiceGroup](choice-group.md) or [RadioGroup](radio-group.md) when a few options fit on screen.
|
|
127
|
+
* Use [Combobox](combobox.md) when the list is long enough to need search.
|
|
128
128
|
|
|
129
129
|
### Lead With a Placeholder Option
|
|
130
130
|
|
|
@@ -187,18 +187,18 @@ Give the select a `Field.Label`. The placeholder option disappears once a value
|
|
|
187
187
|
|
|
188
188
|
## Related
|
|
189
189
|
|
|
190
|
-
[Select](
|
|
190
|
+
[Select](select.md)
|
|
191
191
|
|
|
192
192
|
Use for options with icons or a styled popup.
|
|
193
193
|
|
|
194
|
-
[Field](
|
|
194
|
+
[Field](field.md)
|
|
195
195
|
|
|
196
196
|
Use for labels, descriptions, and errors.
|
|
197
197
|
|
|
198
|
-
[RadioGroup](
|
|
198
|
+
[RadioGroup](radio-group.md)
|
|
199
199
|
|
|
200
200
|
Use for a few options shown at once.
|
|
201
201
|
|
|
202
|
-
[Forms](
|
|
202
|
+
[Forms](../patterns/forms.md)
|
|
203
203
|
|
|
204
204
|
Covers laying out fields and actions.
|
|
@@ -110,9 +110,9 @@ import { NetworkLogo } from '@tempoxyz/ds'
|
|
|
110
110
|
|
|
111
111
|
### When Not to Use
|
|
112
112
|
|
|
113
|
-
* Use [TokenLogo](
|
|
114
|
-
* Use [Identicon](
|
|
115
|
-
* Use [IconTile](
|
|
113
|
+
* Use [TokenLogo](token-logo.md) for the token itself.
|
|
114
|
+
* Use [Identicon](identicon.md) for an account address.
|
|
115
|
+
* Use [IconTile](icon-tile.md) for a feature or category icon.
|
|
116
116
|
|
|
117
117
|
### Name the Network
|
|
118
118
|
|
|
@@ -231,18 +231,18 @@ A network logo renders an `<svg>` that is hidden from screen readers by default.
|
|
|
231
231
|
|
|
232
232
|
## Related
|
|
233
233
|
|
|
234
|
-
[TokenLogo](
|
|
234
|
+
[TokenLogo](token-logo.md)
|
|
235
235
|
|
|
236
236
|
Use for token logos.
|
|
237
237
|
|
|
238
|
-
[AssetChip](
|
|
238
|
+
[AssetChip](asset-chip.md)
|
|
239
239
|
|
|
240
240
|
Use for listing the assets a network supports.
|
|
241
241
|
|
|
242
|
-
[ListGroup](
|
|
242
|
+
[ListGroup](list-group.md)
|
|
243
243
|
|
|
244
244
|
Use for network lists.
|
|
245
245
|
|
|
246
|
-
[Blockchain Values](
|
|
246
|
+
[Blockchain Values](../patterns/blockchain-values.md)
|
|
247
247
|
|
|
248
248
|
Covers tokens, networks, and addresses.
|
|
@@ -194,10 +194,10 @@ import { NumberField } from '@tempoxyz/ds'
|
|
|
194
194
|
|
|
195
195
|
### When Not to Use
|
|
196
196
|
|
|
197
|
-
* Use [AmountInput](
|
|
198
|
-
* Use [TextInput](
|
|
199
|
-
* Use [Slider](
|
|
200
|
-
* Use [ChoiceGroup](
|
|
197
|
+
* Use [AmountInput](amount-input.md) for token and fiat amounts.
|
|
198
|
+
* Use [TextInput](text-input.md) for codes and identifiers that look numeric, such as a chain ID or a postal code.
|
|
199
|
+
* Use [Slider](slider.md) when an approximate position matters more than the exact number.
|
|
200
|
+
* Use [ChoiceGroup](choice-group.md) or [Select](select.md) when only a few values are valid, such as 1, 5, or 10 minutes.
|
|
201
201
|
|
|
202
202
|
### State the Bounds and the Unit
|
|
203
203
|
|
|
@@ -526,18 +526,18 @@ The keyboard follows the [WAI-ARIA Authoring Practices spinbutton pattern](https
|
|
|
526
526
|
|
|
527
527
|
## Related
|
|
528
528
|
|
|
529
|
-
[AmountInput](
|
|
529
|
+
[AmountInput](amount-input.md)
|
|
530
530
|
|
|
531
531
|
Use for token and fiat amounts.
|
|
532
532
|
|
|
533
|
-
[TextInput](
|
|
533
|
+
[TextInput](text-input.md)
|
|
534
534
|
|
|
535
535
|
Use for codes and identifiers.
|
|
536
536
|
|
|
537
|
-
[Slider](
|
|
537
|
+
[Slider](slider.md)
|
|
538
538
|
|
|
539
539
|
Use for approximate values in a range.
|
|
540
540
|
|
|
541
|
-
[Field](
|
|
541
|
+
[Field](field.md)
|
|
542
542
|
|
|
543
543
|
Use for labels, descriptions, and errors.
|
|
@@ -162,9 +162,9 @@ import { OtpField } from '@tempoxyz/ds'
|
|
|
162
162
|
|
|
163
163
|
### When Not to Use
|
|
164
164
|
|
|
165
|
-
* Use [TextInput](
|
|
166
|
-
* Use [TextInput](
|
|
167
|
-
* Use [SecretValue](
|
|
165
|
+
* Use [TextInput](text-input.md) for codes without a fixed length, such as invite or promo codes.
|
|
166
|
+
* Use [TextInput](text-input.md) with `type="password"` for passwords.
|
|
167
|
+
* Use [SecretValue](secret-value.md) to show a key or recovery phrase.
|
|
168
168
|
|
|
169
169
|
### Support Autofill and Paste
|
|
170
170
|
|
|
@@ -366,7 +366,7 @@ namespace styles {
|
|
|
366
366
|
}
|
|
367
367
|
```
|
|
368
368
|
|
|
369
|
-
Set `readOnly` while the request runs, with a [Spinner](
|
|
369
|
+
Set `readOnly` while the request runs, with a [Spinner](spinner.md) or [LoadingDots](loading-dots.md) nearby. Then set `success` or `invalid`.
|
|
370
370
|
|
|
371
371
|
### Explain a Rejected Code in Text
|
|
372
372
|
|
|
@@ -425,7 +425,7 @@ namespace styles {
|
|
|
425
425
|
|
|
426
426
|
### Offer a New Code
|
|
427
427
|
|
|
428
|
-
Place a `tertiary` [Button](
|
|
428
|
+
Place a `tertiary` [Button](button.md) such as Send a new code below the field. After a resend, disable it for a short cooldown and state when it returns.
|
|
429
429
|
|
|
430
430
|
**Do:** State when a disabled resend returns.
|
|
431
431
|
|
|
@@ -599,18 +599,18 @@ OtpField renders a group of single-character text inputs.
|
|
|
599
599
|
|
|
600
600
|
## Related
|
|
601
601
|
|
|
602
|
-
[TextInput](
|
|
602
|
+
[TextInput](text-input.md)
|
|
603
603
|
|
|
604
604
|
Use for variable-length codes.
|
|
605
605
|
|
|
606
|
-
[Field](
|
|
606
|
+
[Field](field.md)
|
|
607
607
|
|
|
608
608
|
Use for labels, descriptions, and errors.
|
|
609
609
|
|
|
610
|
-
[SecretValue](
|
|
610
|
+
[SecretValue](secret-value.md)
|
|
611
611
|
|
|
612
612
|
Use for showing keys and secrets.
|
|
613
613
|
|
|
614
|
-
[Errors and Validation](
|
|
614
|
+
[Errors and Validation](../patterns/errors-and-validation.md)
|
|
615
615
|
|
|
616
616
|
Covers explaining rejected values.
|
|
@@ -146,10 +146,10 @@ import { Pagination } from '@tempoxyz/ds'
|
|
|
146
146
|
|
|
147
147
|
### When Not to Use
|
|
148
148
|
|
|
149
|
-
* Use a `secondary` [Button](
|
|
150
|
-
* Use [Stepper](
|
|
151
|
-
* Use [Tabs](
|
|
152
|
-
* Use a [Table](
|
|
149
|
+
* Use a `secondary` [Button](button.md) labelled Load more at the end of a feed, such as wallet Activity.
|
|
150
|
+
* Use [Stepper](stepper.md) for progress through a flow.
|
|
151
|
+
* Use [Tabs](tabs.md) to split a list by category, such as Incoming and Outgoing.
|
|
152
|
+
* Use a [Table](table.md) or [ListGroup](list-group.md) without pagination when the list fits on one screen.
|
|
153
153
|
|
|
154
154
|
### Choose Pagination or Load More
|
|
155
155
|
|
|
@@ -499,18 +499,18 @@ The current page and disabled steps carry ARIA states.
|
|
|
499
499
|
|
|
500
500
|
## Related
|
|
501
501
|
|
|
502
|
-
[Table](
|
|
502
|
+
[Table](table.md)
|
|
503
503
|
|
|
504
504
|
Use for the rows you paginate.
|
|
505
505
|
|
|
506
|
-
[ListGroup](
|
|
506
|
+
[ListGroup](list-group.md)
|
|
507
507
|
|
|
508
508
|
Use for lists of records.
|
|
509
509
|
|
|
510
|
-
[Button](
|
|
510
|
+
[Button](button.md)
|
|
511
511
|
|
|
512
512
|
Use for a Load more action.
|
|
513
513
|
|
|
514
|
-
[Tables and Lists](
|
|
514
|
+
[Tables and Lists](../patterns/tables-and-lists.md)
|
|
515
515
|
|
|
516
516
|
Covers sorting, filtering, and paging data.
|
|
@@ -88,11 +88,11 @@ import { Popover } from '@tempoxyz/ds'
|
|
|
88
88
|
|
|
89
89
|
### When Not to Use
|
|
90
90
|
|
|
91
|
-
* Use a [Tooltip](
|
|
92
|
-
* Use a [Menu](
|
|
93
|
-
* Use [Select](
|
|
94
|
-
* Use a [Dialog](
|
|
95
|
-
* Use a [Drawer](
|
|
91
|
+
* Use a [Tooltip](tooltip.md) for a short label on an icon button.
|
|
92
|
+
* Use a [Menu](menu.md) for a list of actions.
|
|
93
|
+
* Use [Select](select.md), [Combobox](combobox.md), or [DatePicker](date-picker.md) to choose a value.
|
|
94
|
+
* Use a [Dialog](dialog.md) for a task with several fields or full attention.
|
|
95
|
+
* Use a [Drawer](drawer.md) for long content.
|
|
96
96
|
* Use visible text for information everyone needs, such as an error or a required step.
|
|
97
97
|
|
|
98
98
|
### Keep Content Small
|
|
@@ -169,7 +169,7 @@ namespace styles {
|
|
|
169
169
|
}
|
|
170
170
|
```
|
|
171
171
|
|
|
172
|
-
**Don't:** Build a multi-field form in a popover. Use a [Dialog](
|
|
172
|
+
**Don't:** Build a multi-field form in a popover. Use a [Dialog](dialog.md).
|
|
173
173
|
|
|
174
174
|
```tsx
|
|
175
175
|
/**
|
|
@@ -523,22 +523,22 @@ Start with the explanation, such as Transactions per second, averaged over each
|
|
|
523
523
|
|
|
524
524
|
## Related
|
|
525
525
|
|
|
526
|
-
[Tooltip](
|
|
526
|
+
[Tooltip](tooltip.md)
|
|
527
527
|
|
|
528
528
|
Use for short labels on icon buttons.
|
|
529
529
|
|
|
530
|
-
[Dialog](
|
|
530
|
+
[Dialog](dialog.md)
|
|
531
531
|
|
|
532
532
|
Use for focused tasks that block the page.
|
|
533
533
|
|
|
534
|
-
[Drawer](
|
|
534
|
+
[Drawer](drawer.md)
|
|
535
535
|
|
|
536
536
|
Use for long content and bottom sheets.
|
|
537
537
|
|
|
538
|
-
[Menu](
|
|
538
|
+
[Menu](menu.md)
|
|
539
539
|
|
|
540
540
|
Use for lists of actions.
|
|
541
541
|
|
|
542
|
-
[Dashboards](
|
|
542
|
+
[Dashboards](../patterns/dashboards.md)
|
|
543
543
|
|
|
544
544
|
Covers explaining metrics.
|
|
@@ -126,11 +126,11 @@ import { Progress } from '@tempoxyz/ds'
|
|
|
126
126
|
|
|
127
127
|
### When Not to Use
|
|
128
128
|
|
|
129
|
-
* Use [Gauge](
|
|
130
|
-
* Use [Spinner](
|
|
131
|
-
* Use [Skeleton](
|
|
132
|
-
* Use `loading` on a [Button](
|
|
133
|
-
* Use [Stepper](
|
|
129
|
+
* Use [Gauge](gauge.md) for a measurement that does not advance, such as storage used.
|
|
130
|
+
* Use [Spinner](spinner.md) for a short wait in a region or control.
|
|
131
|
+
* Use [Skeleton](skeleton.md) for content with a known shape.
|
|
132
|
+
* Use `loading` on a [Button](button.md) while its action runs.
|
|
133
|
+
* Use [Stepper](stepper.md) for a fixed sequence of steps, such as account setup.
|
|
134
134
|
|
|
135
135
|
### Show Determinate Progress When You Can Measure It
|
|
136
136
|
|
|
@@ -343,7 +343,7 @@ namespace styles {
|
|
|
343
343
|
### Report the Outcome
|
|
344
344
|
|
|
345
345
|
* **Success (positive):** Set `intent` to `positive` and change the label. Then replace the bar with the result, such as a link to the file.
|
|
346
|
-
* **Failure (Alert):** Progress has no `negative` intent. Replace the bar with a `negative` [Alert](
|
|
346
|
+
* **Failure (Alert):** Progress has no `negative` intent. Replace the bar with a `negative` [Alert](alert.md) that offers Retry.
|
|
347
347
|
|
|
348
348
|
## Content
|
|
349
349
|
|
|
@@ -371,18 +371,18 @@ The bar is not a live region. A changed value is read only when the reader retur
|
|
|
371
371
|
|
|
372
372
|
## Related
|
|
373
373
|
|
|
374
|
-
[Gauge](
|
|
374
|
+
[Gauge](gauge.md)
|
|
375
375
|
|
|
376
376
|
Use for a measurement within a range.
|
|
377
377
|
|
|
378
|
-
[Spinner](
|
|
378
|
+
[Spinner](spinner.md)
|
|
379
379
|
|
|
380
380
|
Use for a short wait of unknown length.
|
|
381
381
|
|
|
382
|
-
[Skeleton](
|
|
382
|
+
[Skeleton](skeleton.md)
|
|
383
383
|
|
|
384
384
|
Use for content with a known shape.
|
|
385
385
|
|
|
386
|
-
[Loading](
|
|
386
|
+
[Loading](../patterns/loading.md)
|
|
387
387
|
|
|
388
388
|
Covers choosing a loading indicator.
|
|
@@ -80,14 +80,14 @@ import { Qr } from '@tempoxyz/ds'
|
|
|
80
80
|
|
|
81
81
|
### When Not to Use
|
|
82
82
|
|
|
83
|
-
* Use a link or `Button.Link` ([Button](
|
|
84
|
-
* Use [Hex](
|
|
83
|
+
* Use a link or `Button.Link` ([Button](button.md)) for a URL opened on the same device.
|
|
84
|
+
* Use [Hex](hex.md) with `copy` alone when the reader needs the value on the same device. A phone cannot scan its own screen.
|
|
85
85
|
|
|
86
86
|
### Show the Address as Text Too
|
|
87
87
|
|
|
88
88
|
Many people cannot scan: someone on the same phone, a screen reader user, or someone without a camera.
|
|
89
89
|
|
|
90
|
-
* **Copy:** Put the address beside the code with [Hex](
|
|
90
|
+
* **Copy:** Put the address beside the code with [Hex](hex.md) and `copy`.
|
|
91
91
|
* **Match:** The text must match what the code encodes. If the code holds a URI, such as `tempo:` and the address, show the same address. Never encode a different value, such as a tracking link.
|
|
92
92
|
* **Network:** A code does not show its network. State what the address accepts, such as Send USDC on Tempo to this address.
|
|
93
93
|
|
|
@@ -293,22 +293,22 @@ Qr renders an `<svg>` with the `img` role. It is not interactive and takes no fo
|
|
|
293
293
|
|
|
294
294
|
## Related
|
|
295
295
|
|
|
296
|
-
[Hex](
|
|
296
|
+
[Hex](hex.md)
|
|
297
297
|
|
|
298
298
|
Use for showing and copying the address.
|
|
299
299
|
|
|
300
|
-
[CopyButton](
|
|
300
|
+
[CopyButton](copy-button.md)
|
|
301
301
|
|
|
302
302
|
Use for copying a value.
|
|
303
303
|
|
|
304
|
-
[Snippet](
|
|
304
|
+
[Snippet](snippet.md)
|
|
305
305
|
|
|
306
306
|
Use for links and other values.
|
|
307
307
|
|
|
308
|
-
[Payments](
|
|
308
|
+
[Payments](../patterns/payments.md)
|
|
309
309
|
|
|
310
310
|
Covers send and receive flows.
|
|
311
311
|
|
|
312
|
-
[Tempo Wallet](
|
|
312
|
+
[Tempo Wallet](../products/tempo-wallet.md)
|
|
313
313
|
|
|
314
314
|
Covers the receive screen.
|
|
@@ -146,11 +146,11 @@ import { Field, RadioGroup } from '@tempoxyz/ds'
|
|
|
146
146
|
|
|
147
147
|
### When Not to Use
|
|
148
148
|
|
|
149
|
-
* Use [Checkbox](
|
|
150
|
-
* Use [Select](
|
|
151
|
-
* Use [ChoiceGroup](
|
|
152
|
-
* Use [Choicebox](
|
|
153
|
-
* Use [Switch](
|
|
149
|
+
* Use [Checkbox](checkbox.md) or [CheckboxGroup](checkbox-group.md) for several picks, or for a single yes or no.
|
|
150
|
+
* Use [Select](select.md) for more than five options, or when space is tight.
|
|
151
|
+
* Use [ChoiceGroup](choice-group.md) to switch a view or mode, such as 24H and 7D.
|
|
152
|
+
* Use [Choicebox](choicebox.md) when each option needs an icon or a description.
|
|
153
|
+
* Use [Switch](switch.md) for a single setting that applies immediately.
|
|
154
154
|
|
|
155
155
|
### Ask One Question
|
|
156
156
|
|
|
@@ -507,22 +507,22 @@ Arrow keys skip disabled radios.
|
|
|
507
507
|
|
|
508
508
|
## Related
|
|
509
509
|
|
|
510
|
-
[ChoiceGroup](
|
|
510
|
+
[ChoiceGroup](choice-group.md)
|
|
511
511
|
|
|
512
512
|
Use for switching views and modes.
|
|
513
513
|
|
|
514
|
-
[Choicebox](
|
|
514
|
+
[Choicebox](choicebox.md)
|
|
515
515
|
|
|
516
516
|
Use for options with icons or descriptions.
|
|
517
517
|
|
|
518
|
-
[Select](
|
|
518
|
+
[Select](select.md)
|
|
519
519
|
|
|
520
520
|
Use for longer lists.
|
|
521
521
|
|
|
522
|
-
[Checkbox](
|
|
522
|
+
[Checkbox](checkbox.md)
|
|
523
523
|
|
|
524
524
|
Use for independent choices.
|
|
525
525
|
|
|
526
|
-
[Fieldset](
|
|
526
|
+
[Fieldset](fieldset.md)
|
|
527
527
|
|
|
528
528
|
Use for naming a group with a legend.
|