@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.
Files changed (212) hide show
  1. package/README.md +7 -6
  2. package/dist/docs/AGENTS.md +8 -5
  3. package/dist/docs/index.md +143 -135
  4. package/dist/docs/marketing/introduction/getting-started.md +241 -0
  5. package/dist/docs/{components → product/components}/accordion.md +8 -8
  6. package/dist/docs/{components → product/components}/address-card.md +5 -5
  7. package/dist/docs/{components → product/components}/agent-logo.md +5 -5
  8. package/dist/docs/{components → product/components}/alert-dialog.md +11 -11
  9. package/dist/docs/{components → product/components}/alert.md +11 -11
  10. package/dist/docs/{components → product/components}/amount-input.md +13 -13
  11. package/dist/docs/{components → product/components}/amount.md +8 -8
  12. package/dist/docs/{components → product/components}/app-shell.md +13 -13
  13. package/dist/docs/{components → product/components}/asset-chip.md +11 -11
  14. package/dist/docs/{components → product/components}/autocomplete.md +10 -9
  15. package/dist/docs/{components → product/components}/avatar.md +8 -8
  16. package/dist/docs/{components → product/components}/badge.md +9 -9
  17. package/dist/docs/{components → product/components}/badged-logo.md +6 -6
  18. package/dist/docs/{components → product/components}/banner.md +8 -8
  19. package/dist/docs/{components → product/components}/bar-chart.md +7 -7
  20. package/dist/docs/{components → product/components}/breadcrumbs.md +8 -8
  21. package/dist/docs/{components → product/components}/button-group.md +8 -8
  22. package/dist/docs/{components → product/components}/button.md +17 -17
  23. package/dist/docs/{components → product/components}/calendar.md +8 -8
  24. package/dist/docs/{components → product/components}/callout.md +5 -5
  25. package/dist/docs/{components → product/components}/checkbox-group.md +13 -13
  26. package/dist/docs/{components → product/components}/checkbox.md +12 -12
  27. package/dist/docs/{components → product/components}/choice-group.md +14 -14
  28. package/dist/docs/{components → product/components}/choicebox.md +9 -9
  29. package/dist/docs/{components → product/components}/code.md +5 -5
  30. package/dist/docs/{components → product/components}/combobox.md +9 -9
  31. package/dist/docs/{components → product/components}/container.md +7 -7
  32. package/dist/docs/{components → product/components}/copy-button.md +13 -13
  33. package/dist/docs/{components → product/components}/date-picker.md +11 -11
  34. package/dist/docs/{components → product/components}/dialog.md +17 -17
  35. package/dist/docs/{components → product/components}/drawer.md +11 -11
  36. package/dist/docs/{components → product/components}/empty.md +9 -9
  37. package/dist/docs/{components → product/components}/field.md +14 -14
  38. package/dist/docs/{components → product/components}/fieldset.md +6 -6
  39. package/dist/docs/{components → product/components}/frame.md +9 -9
  40. package/dist/docs/{components → product/components}/gauge.md +7 -7
  41. package/dist/docs/{components → product/components}/get-started-visual.md +4 -4
  42. package/dist/docs/{components → product/components}/grid.md +7 -7
  43. package/dist/docs/{components → product/components}/hero-visual.md +4 -4
  44. package/dist/docs/{components → product/components}/hex.md +9 -9
  45. package/dist/docs/{components → product/components}/icon-tile.md +8 -8
  46. package/dist/docs/{components → product/components}/identicon.md +7 -7
  47. package/dist/docs/{components → product/components}/inline.md +7 -7
  48. package/dist/docs/{components → product/components}/inset.md +8 -8
  49. package/dist/docs/{components → product/components}/kbd.md +8 -8
  50. package/dist/docs/{components → product/components}/list-group.md +24 -24
  51. package/dist/docs/{components → product/components}/loading-dots.md +8 -8
  52. package/dist/docs/{components → product/components}/menu.md +14 -14
  53. package/dist/docs/{components → product/components}/native-select.md +7 -7
  54. package/dist/docs/{components → product/components}/network-logo.md +7 -7
  55. package/dist/docs/{components → product/components}/number-field.md +8 -8
  56. package/dist/docs/{components → product/components}/otp-field.md +9 -9
  57. package/dist/docs/{components → product/components}/pagination.md +8 -8
  58. package/dist/docs/{components → product/components}/popover.md +11 -11
  59. package/dist/docs/{components → product/components}/progress.md +10 -10
  60. package/dist/docs/{components → product/components}/qr.md +8 -8
  61. package/dist/docs/{components → product/components}/radio-group.md +10 -10
  62. package/dist/docs/{components → product/components}/secret-value.md +8 -8
  63. package/dist/docs/{components → product/components}/select.md +13 -13
  64. package/dist/docs/{components → product/components}/separator.md +7 -7
  65. package/dist/docs/{components → product/components}/sidebar-menu.md +11 -11
  66. package/dist/docs/{components → product/components}/skeleton.md +9 -9
  67. package/dist/docs/{components → product/components}/slider.md +8 -8
  68. package/dist/docs/{components → product/components}/snippet.md +10 -10
  69. package/dist/docs/{components → product/components}/spinner.md +12 -12
  70. package/dist/docs/{components → product/components}/split-bar.md +5 -5
  71. package/dist/docs/{components → product/components}/split-button.md +11 -11
  72. package/dist/docs/{components → product/components}/stack.md +8 -8
  73. package/dist/docs/{components → product/components}/status-chip.md +7 -7
  74. package/dist/docs/{components → product/components}/status-indicator.md +6 -6
  75. package/dist/docs/{components → product/components}/status-row.md +7 -7
  76. package/dist/docs/{components → product/components}/stepper.md +9 -9
  77. package/dist/docs/{components → product/components}/success-hero.md +5 -5
  78. package/dist/docs/{components → product/components}/surface.md +11 -11
  79. package/dist/docs/{components → product/components}/switch.md +11 -11
  80. package/dist/docs/{components → product/components}/table.md +16 -16
  81. package/dist/docs/{components → product/components}/tabs.md +11 -11
  82. package/dist/docs/{components → product/components}/tempo-logo.md +4 -4
  83. package/dist/docs/{components → product/components}/text-input.md +14 -14
  84. package/dist/docs/{components → product/components}/textarea.md +7 -7
  85. package/dist/docs/{components → product/components}/toast.md +11 -11
  86. package/dist/docs/{components → product/components}/token-logo.md +16 -16
  87. package/dist/docs/{components → product/components}/token.md +10 -10
  88. package/dist/docs/{components → product/components}/tooltip.md +11 -11
  89. package/dist/docs/{components → product/components}/verification-code.md +4 -4
  90. package/dist/docs/{components → product/components}/visual.md +5 -5
  91. package/dist/docs/product/components.md +203 -0
  92. package/dist/docs/{foundations → product/foundations}/accessibility.md +16 -16
  93. package/dist/docs/{foundations → product/foundations}/agents.md +17 -17
  94. package/dist/docs/{foundations → product/foundations}/color.md +7 -7
  95. package/dist/docs/{foundations → product/foundations}/content/tone.md +7 -7
  96. package/dist/docs/{foundations → product/foundations}/content/voice.md +2 -2
  97. package/dist/docs/{foundations → product/foundations}/content/writing-style.md +8 -8
  98. package/dist/docs/{foundations → product/foundations}/iconography.md +11 -11
  99. package/dist/docs/{foundations → product/foundations}/intent.md +28 -28
  100. package/dist/docs/{foundations → product/foundations}/layout.md +22 -22
  101. package/dist/docs/product/foundations/linter.md +496 -0
  102. package/dist/docs/{foundations → product/foundations}/motion.md +7 -7
  103. package/dist/docs/{foundations → product/foundations}/radius-and-padding.md +3 -3
  104. package/dist/docs/{foundations → product/foundations}/typography.md +4 -4
  105. package/dist/docs/{introduction → product/introduction}/faq.md +22 -21
  106. package/dist/docs/{introduction → product/introduction}/getting-started.md +4 -4
  107. package/dist/docs/{patterns → product/patterns}/blockchain-values.md +20 -20
  108. package/dist/docs/{patterns → product/patterns}/dashboards.md +28 -28
  109. package/dist/docs/{patterns → product/patterns}/destructive-actions.md +16 -16
  110. package/dist/docs/{patterns → product/patterns}/empty-states.md +14 -14
  111. package/dist/docs/{patterns → product/patterns}/errors-and-validation.md +23 -23
  112. package/dist/docs/{patterns → product/patterns}/feedback-and-status.md +31 -31
  113. package/dist/docs/{patterns → product/patterns}/forms.md +24 -24
  114. package/dist/docs/{patterns → product/patterns}/loading.md +19 -19
  115. package/dist/docs/{patterns → product/patterns}/navigation.md +23 -23
  116. package/dist/docs/{patterns → product/patterns}/payments.md +20 -20
  117. package/dist/docs/{patterns → product/patterns}/responsive-layout.md +23 -23
  118. package/dist/docs/{patterns → product/patterns}/tables-and-lists.md +19 -19
  119. package/dist/docs/{products → product/products}/tempo-console.md +12 -12
  120. package/dist/docs/{products → product/products}/tempo-performance.md +11 -11
  121. package/dist/docs/{products → product/products}/tempo-wallet.md +12 -12
  122. package/dist/marketing/index.d.ts +4 -0
  123. package/dist/marketing/index.d.ts.map +1 -0
  124. package/dist/marketing/index.js +4 -0
  125. package/dist/marketing/index.js.map +1 -0
  126. package/dist/marketing/index.js.zyzz.json +1 -0
  127. package/dist/marketing/vars.d.ts +907 -0
  128. package/dist/marketing/vars.d.ts.map +1 -0
  129. package/dist/marketing/vars.js +15 -0
  130. package/dist/marketing/vars.js.map +1 -0
  131. package/dist/marketing/vars.js.zyzz.json +1 -0
  132. package/dist/marketing/zyzz.config.d.ts +4512 -0
  133. package/dist/marketing/zyzz.config.d.ts.map +1 -0
  134. package/dist/marketing/zyzz.config.js +63 -0
  135. package/dist/marketing/zyzz.config.js.map +1 -0
  136. package/dist/marketing/zyzz.config.js.zyzz.json +1 -0
  137. package/dist/oxlint/index.d.ts +12 -1
  138. package/dist/oxlint/index.d.ts.map +1 -1
  139. package/dist/oxlint/index.js +39 -1
  140. package/dist/oxlint/index.js.map +1 -1
  141. package/dist/oxlint/internal/Docs.d.ts +9 -0
  142. package/dist/oxlint/internal/Docs.d.ts.map +1 -0
  143. package/dist/oxlint/internal/Docs.js +15 -0
  144. package/dist/oxlint/internal/Docs.js.map +1 -0
  145. package/dist/oxlint/internal/Imports.d.ts +1 -1
  146. package/dist/oxlint/internal/Imports.d.ts.map +1 -1
  147. package/dist/oxlint/internal/Imports.js +2 -0
  148. package/dist/oxlint/internal/Imports.js.map +1 -1
  149. package/dist/oxlint/internal/Styles.d.ts +40 -0
  150. package/dist/oxlint/internal/Styles.d.ts.map +1 -0
  151. package/dist/oxlint/internal/Styles.js +194 -0
  152. package/dist/oxlint/internal/Styles.js.map +1 -0
  153. package/dist/oxlint/internal/Tokens.d.ts +16 -0
  154. package/dist/oxlint/internal/Tokens.d.ts.map +1 -0
  155. package/dist/oxlint/internal/Tokens.js +39 -0
  156. package/dist/oxlint/internal/Tokens.js.map +1 -0
  157. package/dist/oxlint/rules/NoCrossSurface.d.ts +2 -2
  158. package/dist/oxlint/rules/NoCrossSurface.js +3 -3
  159. package/dist/oxlint/rules/NoCrossSurface.js.map +1 -1
  160. package/dist/oxlint/rules/NoCustomValues.d.ts +11 -0
  161. package/dist/oxlint/rules/NoCustomValues.d.ts.map +1 -0
  162. package/dist/oxlint/rules/NoCustomValues.js +150 -0
  163. package/dist/oxlint/rules/NoCustomValues.js.map +1 -0
  164. package/dist/oxlint/rules/NoSingleKeyShortcuts.d.ts +11 -0
  165. package/dist/oxlint/rules/NoSingleKeyShortcuts.d.ts.map +1 -0
  166. package/dist/oxlint/rules/NoSingleKeyShortcuts.js +158 -0
  167. package/dist/oxlint/rules/NoSingleKeyShortcuts.js.map +1 -0
  168. package/dist/oxlint/rules/PreferComponent.d.ts +3 -2
  169. package/dist/oxlint/rules/PreferComponent.d.ts.map +1 -1
  170. package/dist/oxlint/rules/PreferComponent.js +11 -4
  171. package/dist/oxlint/rules/PreferComponent.js.map +1 -1
  172. package/dist/oxlint/rules/PreferLayout.d.ts +9 -0
  173. package/dist/oxlint/rules/PreferLayout.d.ts.map +1 -0
  174. package/dist/oxlint/rules/PreferLayout.js +90 -0
  175. package/dist/oxlint/rules/PreferLayout.js.map +1 -0
  176. package/dist/oxlint/rules/PreferProgress.d.ts +9 -0
  177. package/dist/oxlint/rules/PreferProgress.d.ts.map +1 -0
  178. package/dist/oxlint/rules/PreferProgress.js +43 -0
  179. package/dist/oxlint/rules/PreferProgress.js.map +1 -0
  180. package/dist/oxlint/rules/PreferSurface.d.ts +9 -0
  181. package/dist/oxlint/rules/PreferSurface.d.ts.map +1 -0
  182. package/dist/oxlint/rules/PreferSurface.js +55 -0
  183. package/dist/oxlint/rules/PreferSurface.js.map +1 -0
  184. package/dist/oxlint/rules/RequireAccessibleName.d.ts.map +1 -1
  185. package/dist/oxlint/rules/RequireAccessibleName.js +3 -1
  186. package/dist/oxlint/rules/RequireAccessibleName.js.map +1 -1
  187. package/dist/oxlint/rules/RequireScrollRegion.d.ts +11 -0
  188. package/dist/oxlint/rules/RequireScrollRegion.d.ts.map +1 -0
  189. package/dist/oxlint/rules/RequireScrollRegion.js +71 -0
  190. package/dist/oxlint/rules/RequireScrollRegion.js.map +1 -0
  191. package/dist/web/icons/index.js.zyzz.json +1 -0
  192. package/package.json +6 -1
  193. package/src/marketing/README.md +21 -0
  194. package/src/marketing/index.ts +3 -0
  195. package/src/marketing/vars.ts +751 -0
  196. package/src/marketing/zyzz.config.ts +376 -0
  197. package/src/oxlint/index.ts +40 -1
  198. package/src/oxlint/internal/Docs.ts +18 -0
  199. package/src/oxlint/internal/Imports.ts +2 -1
  200. package/src/oxlint/internal/Styles.ts +240 -0
  201. package/src/oxlint/internal/Tokens.ts +43 -0
  202. package/src/oxlint/rules/NoCrossSurface.ts +3 -3
  203. package/src/oxlint/rules/NoCustomValues.ts +170 -0
  204. package/src/oxlint/rules/NoSingleKeyShortcuts.ts +190 -0
  205. package/src/oxlint/rules/PreferComponent.ts +11 -4
  206. package/src/oxlint/rules/PreferLayout.ts +96 -0
  207. package/src/oxlint/rules/PreferProgress.ts +49 -0
  208. package/src/oxlint/rules/PreferSurface.ts +70 -0
  209. package/src/oxlint/rules/RequireAccessibleName.ts +3 -1
  210. package/src/oxlint/rules/RequireScrollRegion.ts +92 -0
  211. package/dist/docs/components.md +0 -203
  212. 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](/docs/components/avatar). The row grows to 64px.
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](/docs/components/network-logo), and list supported assets in [AssetChip](/docs/components/asset-chip) elements inside a `ListGroup.Chips` under the title.
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](/docs/components/agent-logo) and end with a `ListGroup.Meter` to show how much of a limit each agent used. The bars line up from row to row.
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](/docs/components/table) to compare many records across the same fields.
559
- * Use [Accordion](/docs/components/accordion) to reveal details under a heading, such as a fee breakdown or help answers.
560
- * Use [Menu](/docs/components/menu) for a list of actions that opens from a button.
561
- * Use [SidebarMenu](/docs/components/sidebar-menu) for the main navigation of an app.
562
- * Use [Field](/docs/components/field) with form controls when people edit the values.
563
- * Use [RadioGroup](/docs/components/radio-group) to pick one short text option in a form, without an avatar or a description.
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](/docs/components/amount), [Hex](/docs/components/hex), and [Badge](/docs/components/badge).
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](/docs/components/hex) 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](/docs/components/hex) page shows.
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](/docs/components/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](/docs/components/switch), leave `action` and `onClick` off and place the control at the end. The row fills on hover, and the control stays the only target.
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](/docs/components/table)
939
+ [Table](table.md)
940
940
 
941
941
  Use for comparing many records.
942
942
 
943
- [Accordion](/docs/components/accordion)
943
+ [Accordion](accordion.md)
944
944
 
945
945
  Use for collapsible sections of content.
946
946
 
947
- [Surface](/docs/components/surface)
947
+ [Surface](surface.md)
948
948
 
949
949
  Use for grouping rows in a card.
950
950
 
951
- [Amount](/docs/components/amount)
951
+ [Amount](amount.md)
952
952
 
953
953
  Use for values.
954
954
 
955
- [Hex](/docs/components/hex)
955
+ [Hex](hex.md)
956
956
 
957
957
  Use for values.
958
958
 
959
- [Avatar](/docs/components/avatar)
959
+ [Avatar](avatar.md)
960
960
 
961
961
  Use for the leading image of a contact row.
962
962
 
963
- [NetworkLogo](/docs/components/network-logo)
963
+ [NetworkLogo](network-logo.md)
964
964
 
965
965
  Use for the leading logo of a network row.
966
966
 
967
- [AssetChip](/docs/components/asset-chip)
967
+ [AssetChip](asset-chip.md)
968
968
 
969
969
  Use for the assets a network row supports.
970
970
 
971
- [AgentLogo](/docs/components/agent-logo)
971
+ [AgentLogo](agent-logo.md)
972
972
 
973
973
  Use for the leading logo of an agent row.
974
974
 
975
- [RadioGroup](/docs/components/radio-group)
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](/docs/patterns/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](/docs/components/button) while its action runs.
69
- * Use [Spinner](/docs/components/spinner) for a busy region or control.
70
- * Use [Skeleton](/docs/components/skeleton) for content with a known shape, such as rows or cards.
71
- * Use [Progress](/docs/components/progress) for measurable work, or any wait longer than about 10 seconds.
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](/docs/components/spinner)
223
+ [Spinner](spinner.md)
224
224
 
225
225
  Use for a busy region or control.
226
226
 
227
- [Skeleton](/docs/components/skeleton)
227
+ [Skeleton](skeleton.md)
228
228
 
229
229
  Use for content with a known shape.
230
230
 
231
- [Button](/docs/components/button)
231
+ [Button](button.md)
232
232
 
233
233
  Use for an action's loading state.
234
234
 
235
- [Loading](/docs/patterns/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](/docs/components/select) or [Combobox](/docs/components/combobox) to choose a form value, such as a token or network.
205
- * Use [Tabs](/docs/components/tabs) or [ChoiceGroup](/docs/components/choice-group) to switch views with every option visible.
206
- * Use a [Button](/docs/components/button) for one or two actions.
207
- * Use [SplitButton](/docs/components/split-button) when one action is the clear default.
208
- * Use [SidebarMenu](/docs/components/sidebar-menu) or links for navigation. `Menu.LinkItem` suits an occasional link among actions, such as View on explorer.
209
- * Use [Popover](/docs/components/popover) for text or form controls. A menu holds only items.
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](/docs/components/alert-dialog) from the item and repeat the item's verb on its confirm button:
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](/docs/patterns/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](/docs/components/split-button)
912
+ [SplitButton](split-button.md)
913
913
 
914
914
  Use for a main action with alternatives.
915
915
 
916
- [Select](/docs/components/select)
916
+ [Select](select.md)
917
917
 
918
918
  Use for choosing a form value.
919
919
 
920
- [AlertDialog](/docs/components/alert-dialog)
920
+ [AlertDialog](alert-dialog.md)
921
921
 
922
922
  Use for confirming a destructive item.
923
923
 
924
- [Popover](/docs/components/popover)
924
+ [Popover](popover.md)
925
925
 
926
926
  Use for anchored content other than actions.
927
927
 
928
- [Destructive Actions](/docs/patterns/destructive-actions)
928
+ [Destructive Actions](../patterns/destructive-actions.md)
929
929
 
930
930
  Covers deleting and revoking.
931
931
 
932
- [Tables and Lists](/docs/patterns/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](/docs/components/select) when the options need icons, logos, or a styled popup.
126
- * Use [ChoiceGroup](/docs/components/choice-group) or [RadioGroup](/docs/components/radio-group) when a few options fit on screen.
127
- * Use [Combobox](/docs/components/combobox) when the list is long enough to need search.
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](/docs/components/select)
190
+ [Select](select.md)
191
191
 
192
192
  Use for options with icons or a styled popup.
193
193
 
194
- [Field](/docs/components/field)
194
+ [Field](field.md)
195
195
 
196
196
  Use for labels, descriptions, and errors.
197
197
 
198
- [RadioGroup](/docs/components/radio-group)
198
+ [RadioGroup](radio-group.md)
199
199
 
200
200
  Use for a few options shown at once.
201
201
 
202
- [Forms](/docs/patterns/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](/docs/components/token-logo) for the token itself.
114
- * Use [Identicon](/docs/components/identicon) for an account address.
115
- * Use [IconTile](/docs/components/icon-tile) for a feature or category icon.
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](/docs/components/token-logo)
234
+ [TokenLogo](token-logo.md)
235
235
 
236
236
  Use for token logos.
237
237
 
238
- [AssetChip](/docs/components/asset-chip)
238
+ [AssetChip](asset-chip.md)
239
239
 
240
240
  Use for listing the assets a network supports.
241
241
 
242
- [ListGroup](/docs/components/list-group)
242
+ [ListGroup](list-group.md)
243
243
 
244
244
  Use for network lists.
245
245
 
246
- [Blockchain Values](/docs/patterns/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](/docs/components/amount-input) for token and fiat amounts.
198
- * Use [TextInput](/docs/components/text-input) for codes and identifiers that look numeric, such as a chain ID or a postal code.
199
- * Use [Slider](/docs/components/slider) when an approximate position matters more than the exact number.
200
- * Use [ChoiceGroup](/docs/components/choice-group) or [Select](/docs/components/select) when only a few values are valid, such as 1, 5, or 10 minutes.
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](/docs/components/amount-input)
529
+ [AmountInput](amount-input.md)
530
530
 
531
531
  Use for token and fiat amounts.
532
532
 
533
- [TextInput](/docs/components/text-input)
533
+ [TextInput](text-input.md)
534
534
 
535
535
  Use for codes and identifiers.
536
536
 
537
- [Slider](/docs/components/slider)
537
+ [Slider](slider.md)
538
538
 
539
539
  Use for approximate values in a range.
540
540
 
541
- [Field](/docs/components/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](/docs/components/text-input) for codes without a fixed length, such as invite or promo codes.
166
- * Use [TextInput](/docs/components/text-input) with `type="password"` for passwords.
167
- * Use [SecretValue](/docs/components/secret-value) to show a key or recovery phrase.
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](/docs/components/spinner) or [LoadingDots](/docs/components/loading-dots) nearby. Then set `success` or `invalid`.
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](/docs/components/button) such as Send a new code below the field. After a resend, disable it for a short cooldown and state when it returns.
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](/docs/components/text-input)
602
+ [TextInput](text-input.md)
603
603
 
604
604
  Use for variable-length codes.
605
605
 
606
- [Field](/docs/components/field)
606
+ [Field](field.md)
607
607
 
608
608
  Use for labels, descriptions, and errors.
609
609
 
610
- [SecretValue](/docs/components/secret-value)
610
+ [SecretValue](secret-value.md)
611
611
 
612
612
  Use for showing keys and secrets.
613
613
 
614
- [Errors and Validation](/docs/patterns/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](/docs/components/button) labelled Load more at the end of a feed, such as wallet Activity.
150
- * Use [Stepper](/docs/components/stepper) for progress through a flow.
151
- * Use [Tabs](/docs/components/tabs) to split a list by category, such as Incoming and Outgoing.
152
- * Use a [Table](/docs/components/table) or [ListGroup](/docs/components/list-group) without pagination when the list fits on one screen.
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](/docs/components/table)
502
+ [Table](table.md)
503
503
 
504
504
  Use for the rows you paginate.
505
505
 
506
- [ListGroup](/docs/components/list-group)
506
+ [ListGroup](list-group.md)
507
507
 
508
508
  Use for lists of records.
509
509
 
510
- [Button](/docs/components/button)
510
+ [Button](button.md)
511
511
 
512
512
  Use for a Load more action.
513
513
 
514
- [Tables and Lists](/docs/patterns/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](/docs/components/tooltip) for a short label on an icon button.
92
- * Use a [Menu](/docs/components/menu) for a list of actions.
93
- * Use [Select](/docs/components/select), [Combobox](/docs/components/combobox), or [DatePicker](/docs/components/date-picker) to choose a value.
94
- * Use a [Dialog](/docs/components/dialog) for a task with several fields or full attention.
95
- * Use a [Drawer](/docs/components/drawer) for long content.
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](/docs/components/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](/docs/components/tooltip)
526
+ [Tooltip](tooltip.md)
527
527
 
528
528
  Use for short labels on icon buttons.
529
529
 
530
- [Dialog](/docs/components/dialog)
530
+ [Dialog](dialog.md)
531
531
 
532
532
  Use for focused tasks that block the page.
533
533
 
534
- [Drawer](/docs/components/drawer)
534
+ [Drawer](drawer.md)
535
535
 
536
536
  Use for long content and bottom sheets.
537
537
 
538
- [Menu](/docs/components/menu)
538
+ [Menu](menu.md)
539
539
 
540
540
  Use for lists of actions.
541
541
 
542
- [Dashboards](/docs/patterns/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](/docs/components/gauge) for a measurement that does not advance, such as storage used.
130
- * Use [Spinner](/docs/components/spinner) for a short wait in a region or control.
131
- * Use [Skeleton](/docs/components/skeleton) for content with a known shape.
132
- * Use `loading` on a [Button](/docs/components/button) while its action runs.
133
- * Use [Stepper](/docs/components/stepper) for a fixed sequence of steps, such as account setup.
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](/docs/components/alert) that offers Retry.
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](/docs/components/gauge)
374
+ [Gauge](gauge.md)
375
375
 
376
376
  Use for a measurement within a range.
377
377
 
378
- [Spinner](/docs/components/spinner)
378
+ [Spinner](spinner.md)
379
379
 
380
380
  Use for a short wait of unknown length.
381
381
 
382
- [Skeleton](/docs/components/skeleton)
382
+ [Skeleton](skeleton.md)
383
383
 
384
384
  Use for content with a known shape.
385
385
 
386
- [Loading](/docs/patterns/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](/docs/components/button)) for a URL opened on the same device.
84
- * Use [Hex](/docs/components/hex) with `copy` alone when the reader needs the value on the same device. A phone cannot scan its own screen.
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](/docs/components/hex) and `copy`.
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](/docs/components/hex)
296
+ [Hex](hex.md)
297
297
 
298
298
  Use for showing and copying the address.
299
299
 
300
- [CopyButton](/docs/components/copy-button)
300
+ [CopyButton](copy-button.md)
301
301
 
302
302
  Use for copying a value.
303
303
 
304
- [Snippet](/docs/components/snippet)
304
+ [Snippet](snippet.md)
305
305
 
306
306
  Use for links and other values.
307
307
 
308
- [Payments](/docs/patterns/payments)
308
+ [Payments](../patterns/payments.md)
309
309
 
310
310
  Covers send and receive flows.
311
311
 
312
- [Tempo Wallet](/docs/products/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](/docs/components/checkbox) or [CheckboxGroup](/docs/components/checkbox-group) for several picks, or for a single yes or no.
150
- * Use [Select](/docs/components/select) for more than five options, or when space is tight.
151
- * Use [ChoiceGroup](/docs/components/choice-group) to switch a view or mode, such as 24H and 7D.
152
- * Use [Choicebox](/docs/components/choicebox) when each option needs an icon or a description.
153
- * Use [Switch](/docs/components/switch) for a single setting that applies immediately.
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](/docs/components/choice-group)
510
+ [ChoiceGroup](choice-group.md)
511
511
 
512
512
  Use for switching views and modes.
513
513
 
514
- [Choicebox](/docs/components/choicebox)
514
+ [Choicebox](choicebox.md)
515
515
 
516
516
  Use for options with icons or descriptions.
517
517
 
518
- [Select](/docs/components/select)
518
+ [Select](select.md)
519
519
 
520
520
  Use for longer lists.
521
521
 
522
- [Checkbox](/docs/components/checkbox)
522
+ [Checkbox](checkbox.md)
523
523
 
524
524
  Use for independent choices.
525
525
 
526
- [Fieldset](/docs/components/fieldset)
526
+ [Fieldset](fieldset.md)
527
527
 
528
528
  Use for naming a group with a legend.