@cdx-ui/components 0.2.3 → 0.2.4

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 (248) hide show
  1. package/AGENTS.md +24 -0
  2. package/README.md +2 -0
  3. package/coverage.svg +1 -1
  4. package/docs/components/accordion/content.md +538 -0
  5. package/docs/components/alert/content.md +203 -0
  6. package/docs/components/alert-dialog/content.md +319 -0
  7. package/docs/components/avatar/content.md +368 -0
  8. package/docs/components/avatar/design.md +202 -0
  9. package/docs/components/badge/content.md +235 -0
  10. package/docs/components/bottom-sheet/content.md +351 -0
  11. package/docs/components/bottom-sheet/design.md +249 -0
  12. package/docs/components/breadcrumbs/content.md +169 -0
  13. package/docs/components/button/content.md +398 -0
  14. package/docs/components/button/design.md +258 -0
  15. package/docs/components/calendar/content.md +137 -0
  16. package/docs/components/card/content.md +283 -0
  17. package/docs/components/carousel/content.md +416 -0
  18. package/docs/components/checkbox/content.md +236 -0
  19. package/docs/components/checkbox/design.md +214 -0
  20. package/docs/components/chip/content.md +439 -0
  21. package/docs/components/chip/design.md +418 -0
  22. package/docs/components/color-area/content.md +86 -0
  23. package/docs/components/color-field/content.md +134 -0
  24. package/docs/components/color-picker/content.md +208 -0
  25. package/docs/components/color-slider/content.md +120 -0
  26. package/docs/components/color-swatch/content.md +64 -0
  27. package/docs/components/color-swatch-picker/content.md +126 -0
  28. package/docs/components/content.md +97 -0
  29. package/docs/components/currency-input/content.md +205 -0
  30. package/docs/components/data-grid/content.md +522 -0
  31. package/docs/components/date-field/content.md +147 -0
  32. package/docs/components/date-picker/content.md +360 -0
  33. package/docs/components/date-range-picker/content.md +301 -0
  34. package/docs/components/date-time-field/content.md +157 -0
  35. package/docs/components/date-time-list/content.md +105 -0
  36. package/docs/components/date-time-picker/content.md +272 -0
  37. package/docs/components/dialog/content.md +436 -0
  38. package/docs/components/dialog/design.md +192 -0
  39. package/docs/components/divider/content.md +112 -0
  40. package/docs/components/drawer/content.md +436 -0
  41. package/docs/components/field/content.md +277 -0
  42. package/docs/components/form/content.md +62 -0
  43. package/docs/components/full-screen-dialog/content.md +881 -0
  44. package/docs/components/heading/content.md +55 -0
  45. package/docs/components/icon/content.md +190 -0
  46. package/docs/components/icon-button/content.md +200 -0
  47. package/docs/components/icon-button/design.md +165 -0
  48. package/docs/components/image/content.md +104 -0
  49. package/docs/components/input/content.md +281 -0
  50. package/docs/components/input/design.md +389 -0
  51. package/docs/components/insurance-disclosure/content.md +103 -0
  52. package/docs/components/link/content.md +180 -0
  53. package/docs/components/link/design.md +160 -0
  54. package/docs/components/list-item/content.md +695 -0
  55. package/docs/components/menu/content.md +1247 -0
  56. package/docs/components/month-calendar/content.md +84 -0
  57. package/docs/components/month-picker/content.md +273 -0
  58. package/docs/components/otp-input/content.md +327 -0
  59. package/docs/components/progress-bar/content.md +87 -0
  60. package/docs/components/progress-circle/content.md +176 -0
  61. package/docs/components/progress-segmented/content.md +119 -0
  62. package/docs/components/quick-action-button/content.md +154 -0
  63. package/docs/components/quick-action-button/design.md +170 -0
  64. package/docs/components/radio/content.md +224 -0
  65. package/docs/components/range-calendar/content.md +123 -0
  66. package/docs/components/reorderable-list/content.md +309 -0
  67. package/docs/components/scoped-theme/content.md +47 -0
  68. package/docs/components/scroll-shadow/content.md +686 -0
  69. package/docs/components/select/content.md +400 -0
  70. package/docs/components/select/design.md +301 -0
  71. package/docs/components/skeleton/content.md +103 -0
  72. package/docs/components/slider/content.md +423 -0
  73. package/docs/components/stack/content.md +161 -0
  74. package/docs/components/switch/content.md +150 -0
  75. package/docs/components/switch/design.md +208 -0
  76. package/docs/components/table/content.md +548 -0
  77. package/docs/components/table-pagination/content.md +177 -0
  78. package/docs/components/tabs/content.md +292 -0
  79. package/docs/components/text/content.md +142 -0
  80. package/docs/components/textarea/content.md +222 -0
  81. package/docs/components/tile/content.md +703 -0
  82. package/docs/components/toast/content.md +456 -0
  83. package/docs/components/toggle-button/content.md +505 -0
  84. package/docs/components/tooltip/content.md +350 -0
  85. package/docs/components/virtualized-list/content.md +250 -0
  86. package/docs/foundations/content.md +9 -0
  87. package/docs/foundations/expressions/icons/content.md +19 -0
  88. package/docs/foundations/styles/tokens/all-tokens/content.md +192 -0
  89. package/docs/foundations/styles/tokens/what-are-tokens/content.md +33 -0
  90. package/docs/foundations/styles/tokens/what-are-tokens/design.md +33 -0
  91. package/docs/getting-started/content.md +4 -0
  92. package/docs/getting-started/designers/content.md +13 -0
  93. package/docs/getting-started/designers/design.md +13 -0
  94. package/docs/getting-started/developers/accessibility/content.md +31 -0
  95. package/docs/getting-started/developers/content.md +612 -0
  96. package/docs/getting-started/developers/styling/content.md +193 -0
  97. package/docs/llms.txt +193 -0
  98. package/docs/patterns/account-management/content.md +75 -0
  99. package/docs/patterns/authentication/content.md +52 -0
  100. package/docs/patterns/content.md +10 -0
  101. package/docs/patterns/dashboard/content.md +39 -0
  102. package/docs/patterns/empty-states/content.md +31 -0
  103. package/docs/patterns/forms/content.md +109 -0
  104. package/docs/patterns/onboarding/content.md +69 -0
  105. package/docs/patterns/payments/content.md +35 -0
  106. package/docs/patterns/settings/content.md +72 -0
  107. package/docs/resources/content.md +9 -0
  108. package/docs/resources/figma-libraries/content.md +42 -0
  109. package/docs/resources/release-notes/0.0.1-beta.118/content.md +27 -0
  110. package/docs/resources/release-notes/0.0.1-beta.122/content.md +21 -0
  111. package/docs/resources/release-notes/0.0.1-beta.124/content.md +16 -0
  112. package/docs/resources/release-notes/0.0.1-beta.126/content.md +10 -0
  113. package/docs/resources/release-notes/0.0.1-beta.127/content.md +14 -0
  114. package/docs/resources/release-notes/0.0.1-beta.128/content.md +9 -0
  115. package/docs/resources/release-notes/0.0.1-beta.129/content.md +18 -0
  116. package/docs/resources/release-notes/0.0.1-beta.130/content.md +18 -0
  117. package/docs/resources/release-notes/0.0.1-beta.133/content.md +7 -0
  118. package/docs/resources/release-notes/0.0.1-beta.134/content.md +17 -0
  119. package/docs/resources/release-notes/0.0.1-beta.136/content.md +7 -0
  120. package/docs/resources/release-notes/0.0.1-beta.137/content.md +10 -0
  121. package/docs/resources/release-notes/0.0.1-beta.138/content.md +7 -0
  122. package/docs/resources/release-notes/0.0.1-beta.139/content.md +13 -0
  123. package/docs/resources/release-notes/0.0.1-beta.140/content.md +26 -0
  124. package/docs/resources/release-notes/0.0.1-beta.141/content.md +63 -0
  125. package/docs/resources/release-notes/0.0.1-beta.142/content.md +7 -0
  126. package/docs/resources/release-notes/0.0.1-beta.143/content.md +12 -0
  127. package/docs/resources/release-notes/0.0.1-beta.144/content.md +7 -0
  128. package/docs/resources/release-notes/0.0.1-beta.145/content.md +7 -0
  129. package/docs/resources/release-notes/0.0.1-beta.147/content.md +10 -0
  130. package/docs/resources/release-notes/0.0.1-beta.149/content.md +10 -0
  131. package/docs/resources/release-notes/0.0.1-beta.150/content.md +13 -0
  132. package/docs/resources/release-notes/0.0.1-beta.152/content.md +7 -0
  133. package/docs/resources/release-notes/0.0.1-beta.154/content.md +15 -0
  134. package/docs/resources/release-notes/0.0.1-beta.156/content.md +7 -0
  135. package/docs/resources/release-notes/0.0.1-beta.158/content.md +9 -0
  136. package/docs/resources/release-notes/0.0.1-beta.159/content.md +11 -0
  137. package/docs/resources/release-notes/0.0.1-beta.160/content.md +7 -0
  138. package/docs/resources/release-notes/0.0.1-beta.161/content.md +7 -0
  139. package/docs/resources/release-notes/0.0.1-beta.163/content.md +7 -0
  140. package/docs/resources/release-notes/0.0.1-beta.164/content.md +9 -0
  141. package/docs/resources/release-notes/0.0.1-beta.166/content.md +17 -0
  142. package/docs/resources/release-notes/0.0.1-beta.167/content.md +7 -0
  143. package/docs/resources/release-notes/0.0.1-beta.168/content.md +7 -0
  144. package/docs/resources/release-notes/0.0.1-beta.169/content.md +7 -0
  145. package/docs/resources/release-notes/0.0.1-beta.171/content.md +16 -0
  146. package/docs/resources/release-notes/0.0.1-beta.172/content.md +24 -0
  147. package/docs/resources/release-notes/0.0.1-beta.173/content.md +15 -0
  148. package/docs/resources/release-notes/0.0.1-beta.174/content.md +7 -0
  149. package/docs/resources/release-notes/0.0.1-beta.176/content.md +32 -0
  150. package/docs/resources/release-notes/0.0.1-beta.179/content.md +11 -0
  151. package/docs/resources/release-notes/0.0.1-beta.182/content.md +13 -0
  152. package/docs/resources/release-notes/0.0.1-beta.185/content.md +7 -0
  153. package/docs/resources/release-notes/0.0.1-beta.187/content.md +27 -0
  154. package/docs/resources/release-notes/0.1.1/content.md +23 -0
  155. package/docs/resources/release-notes/0.1.2/content.md +7 -0
  156. package/docs/resources/release-notes/0.1.4/content.md +19 -0
  157. package/docs/resources/release-notes/0.1.5/content.md +7 -0
  158. package/docs/resources/release-notes/0.1.6/content.md +7 -0
  159. package/docs/resources/release-notes/0.2.0/content.md +31 -0
  160. package/docs/resources/release-notes/0.2.1/content.md +17 -0
  161. package/docs/resources/release-notes/0.2.2/content.md +11 -0
  162. package/docs/resources/release-notes/0.2.3/content.md +15 -0
  163. package/docs/resources/release-notes/content.md +64 -0
  164. package/lib/commonjs/components/DateTimeList/index.js +11 -26
  165. package/lib/commonjs/components/DateTimeList/index.js.map +1 -1
  166. package/lib/commonjs/components/DateTimeList/styles.js +2 -12
  167. package/lib/commonjs/components/DateTimeList/styles.js.map +1 -1
  168. package/lib/commonjs/components/ListItem/index.js.map +1 -1
  169. package/lib/commonjs/components/ListItem/styles.js +2 -1
  170. package/lib/commonjs/components/ListItem/styles.js.map +1 -1
  171. package/lib/commonjs/components/Menu/index.js +11 -5
  172. package/lib/commonjs/components/Menu/index.js.map +1 -1
  173. package/lib/commonjs/components/ScrollShadow/gradient.js +29 -0
  174. package/lib/commonjs/components/ScrollShadow/gradient.js.map +1 -0
  175. package/lib/commonjs/components/ScrollShadow/index.js +171 -44
  176. package/lib/commonjs/components/ScrollShadow/index.js.map +1 -1
  177. package/lib/commonjs/components/ScrollShadow/styles.js +58 -14
  178. package/lib/commonjs/components/ScrollShadow/styles.js.map +1 -1
  179. package/lib/commonjs/components/ScrollShadow/useComposedScrollHandler.js +63 -0
  180. package/lib/commonjs/components/ScrollShadow/useComposedScrollHandler.js.map +1 -0
  181. package/lib/commonjs/components/ScrollShadow/useScrollShadow.js +48 -8
  182. package/lib/commonjs/components/ScrollShadow/useScrollShadow.js.map +1 -1
  183. package/lib/commonjs/components/Tabs/index.js +16 -23
  184. package/lib/commonjs/components/Tabs/index.js.map +1 -1
  185. package/lib/commonjs/components/Tabs/styles.js +1 -10
  186. package/lib/commonjs/components/Tabs/styles.js.map +1 -1
  187. package/lib/commonjs/figma/ListItem.SectionHeader.figma.js +20 -5
  188. package/lib/commonjs/figma/ListItem.SectionHeader.figma.js.map +1 -1
  189. package/lib/module/components/DateTimeList/index.js +12 -27
  190. package/lib/module/components/DateTimeList/index.js.map +1 -1
  191. package/lib/module/components/DateTimeList/styles.js +1 -11
  192. package/lib/module/components/DateTimeList/styles.js.map +1 -1
  193. package/lib/module/components/ListItem/index.js.map +1 -1
  194. package/lib/module/components/ListItem/styles.js +2 -1
  195. package/lib/module/components/ListItem/styles.js.map +1 -1
  196. package/lib/module/components/Menu/index.js +11 -5
  197. package/lib/module/components/Menu/index.js.map +1 -1
  198. package/lib/module/components/ScrollShadow/gradient.js +24 -0
  199. package/lib/module/components/ScrollShadow/gradient.js.map +1 -0
  200. package/lib/module/components/ScrollShadow/index.js +170 -48
  201. package/lib/module/components/ScrollShadow/index.js.map +1 -1
  202. package/lib/module/components/ScrollShadow/styles.js +57 -13
  203. package/lib/module/components/ScrollShadow/styles.js.map +1 -1
  204. package/lib/module/components/ScrollShadow/useComposedScrollHandler.js +57 -0
  205. package/lib/module/components/ScrollShadow/useComposedScrollHandler.js.map +1 -0
  206. package/lib/module/components/ScrollShadow/useScrollShadow.js +46 -8
  207. package/lib/module/components/ScrollShadow/useScrollShadow.js.map +1 -1
  208. package/lib/module/components/Tabs/index.js +17 -24
  209. package/lib/module/components/Tabs/index.js.map +1 -1
  210. package/lib/module/components/Tabs/styles.js +0 -9
  211. package/lib/module/components/Tabs/styles.js.map +1 -1
  212. package/lib/module/figma/ListItem.SectionHeader.figma.js +20 -5
  213. package/lib/module/figma/ListItem.SectionHeader.figma.js.map +1 -1
  214. package/lib/typescript/components/DateTimeList/index.d.ts.map +1 -1
  215. package/lib/typescript/components/DateTimeList/styles.d.ts +1 -4
  216. package/lib/typescript/components/DateTimeList/styles.d.ts.map +1 -1
  217. package/lib/typescript/components/ListItem/index.d.ts +5 -4
  218. package/lib/typescript/components/ListItem/index.d.ts.map +1 -1
  219. package/lib/typescript/components/ListItem/styles.d.ts +1 -1
  220. package/lib/typescript/components/ListItem/styles.d.ts.map +1 -1
  221. package/lib/typescript/components/Menu/index.d.ts.map +1 -1
  222. package/lib/typescript/components/ScrollShadow/gradient.d.ts +7 -0
  223. package/lib/typescript/components/ScrollShadow/gradient.d.ts.map +1 -0
  224. package/lib/typescript/components/ScrollShadow/index.d.ts +57 -15
  225. package/lib/typescript/components/ScrollShadow/index.d.ts.map +1 -1
  226. package/lib/typescript/components/ScrollShadow/styles.d.ts +8 -2
  227. package/lib/typescript/components/ScrollShadow/styles.d.ts.map +1 -1
  228. package/lib/typescript/components/ScrollShadow/useComposedScrollHandler.d.ts +13 -0
  229. package/lib/typescript/components/ScrollShadow/useComposedScrollHandler.d.ts.map +1 -0
  230. package/lib/typescript/components/ScrollShadow/useScrollShadow.d.ts +15 -2
  231. package/lib/typescript/components/ScrollShadow/useScrollShadow.d.ts.map +1 -1
  232. package/lib/typescript/components/Tabs/index.d.ts.map +1 -1
  233. package/lib/typescript/components/Tabs/styles.d.ts +0 -7
  234. package/lib/typescript/components/Tabs/styles.d.ts.map +1 -1
  235. package/lib/typescript/figma/ListItem.SectionHeader.figma.d.ts.map +1 -1
  236. package/package.json +8 -6
  237. package/src/components/DateTimeList/index.tsx +13 -26
  238. package/src/components/DateTimeList/styles.ts +1 -10
  239. package/src/components/ListItem/index.tsx +5 -4
  240. package/src/components/ListItem/styles.ts +1 -0
  241. package/src/components/Menu/index.tsx +11 -8
  242. package/src/components/ScrollShadow/gradient.ts +48 -0
  243. package/src/components/ScrollShadow/index.tsx +300 -69
  244. package/src/components/ScrollShadow/styles.ts +45 -28
  245. package/src/components/ScrollShadow/useComposedScrollHandler.ts +58 -0
  246. package/src/components/ScrollShadow/useScrollShadow.ts +72 -10
  247. package/src/components/Tabs/index.tsx +25 -35
  248. package/src/components/Tabs/styles.ts +0 -9
@@ -0,0 +1,31 @@
1
+ # Empty States (https://design.candescent.com/docs/patterns/empty-states)
2
+
3
+ ## No Transactions
4
+
5
+ An empty state shown when no transaction history is available.
6
+
7
+ **Platforms:** iOS, Android, Web
8
+
9
+ ```tsx
10
+ import { Button, Heading, Icon, Text, VStack } from '@cdx-ui/components';
11
+ import { ReceiptLong } from '@cdx-ui/icons';
12
+
13
+ export default function NoTransactionsBlock() {
14
+ return (
15
+ <VStack space="lg" className="w-full max-w-sm items-center py-12 px-6">
16
+ <VStack space="md" className="items-center bg-surface-secondary rounded-full p-5">
17
+ <Icon as={ReceiptLong} className="size-10 text-content-secondary" />
18
+ </VStack>
19
+ <VStack space="sm" className="items-center">
20
+ <Heading size="md">No transactions yet</Heading>
21
+ <Text className="text-content-secondary text-center">
22
+ Once you make your first transaction, it will appear here.
23
+ </Text>
24
+ </VStack>
25
+ <Button variant="solid">
26
+ <Button.Label>Make a transfer</Button.Label>
27
+ </Button>
28
+ </VStack>
29
+ );
30
+ }
31
+ ```
@@ -0,0 +1,109 @@
1
+ # Forms (https://design.candescent.com/docs/patterns/forms)
2
+
3
+ ## Contact Information Form
4
+
5
+ A form card for editing personal contact details.
6
+
7
+ **Platforms:** iOS, Android, Web
8
+
9
+ ```tsx
10
+ import { Button, Card, Field, Heading, Input, VStack } from '@cdx-ui/components';
11
+
12
+ export default function ContactInfoFormBlock() {
13
+ return (
14
+ <Card className="w-full max-w-md shadow-lg">
15
+ <Card.Header>
16
+ <VStack space="xs">
17
+ <Heading size="md">Contact information</Heading>
18
+ </VStack>
19
+ </Card.Header>
20
+ <Card.Content>
21
+ <VStack space="lg">
22
+ <Field>
23
+ <Field.Label>First name</Field.Label>
24
+ <Input>
25
+ <Input.Field placeholder="Bernadette" />
26
+ </Input>
27
+ </Field>
28
+ <Field>
29
+ <Field.Label>Last name</Field.Label>
30
+ <Input>
31
+ <Input.Field placeholder="Miller" />
32
+ </Input>
33
+ </Field>
34
+ <Field>
35
+ <Field.Label>Email address</Field.Label>
36
+ <Input>
37
+ <Input.Field placeholder="bernadette@example.com" keyboardType="email-address" />
38
+ </Input>
39
+ </Field>
40
+ <Field>
41
+ <Field.Label>Phone number</Field.Label>
42
+ <Input>
43
+ <Input.Field placeholder="(555) 123-4567" keyboardType="phone-pad" />
44
+ </Input>
45
+ </Field>
46
+ </VStack>
47
+ </Card.Content>
48
+ <Card.Footer>
49
+ <Button variant="solid" fullWidth>
50
+ <Button.Label>Save changes</Button.Label>
51
+ </Button>
52
+ </Card.Footer>
53
+ </Card>
54
+ );
55
+ }
56
+ ```
57
+
58
+ ## Date range
59
+
60
+ A card that reveals a date range picker for choosing a start and end date.
61
+
62
+ **Platforms:** iOS, Android, Web
63
+
64
+ ```tsx
65
+ import { useState } from 'react';
66
+ import {
67
+ Accordion,
68
+ Box,
69
+ Card,
70
+ DateField,
71
+ DateRangePicker,
72
+ Icon,
73
+ type DateRangeValue,
74
+ } from '@cdx-ui/components';
75
+ import { CalendarToday } from '@cdx-ui/icons';
76
+
77
+ export default function DateRangeBlock() {
78
+ const [value, setValue] = useState<DateRangeValue | undefined>();
79
+
80
+ return (
81
+ <Card className="w-full max-w-sm">
82
+ <Accordion type="single" defaultValue="date-range" aria-label="Date range">
83
+ <Accordion.Item value="date-range" showSeparator={false}>
84
+ <Accordion.Trigger>
85
+ <Accordion.LeadingSlot>
86
+ <Box className="size-10 items-center justify-center rounded-full bg-surface-info-subtle">
87
+ <Icon as={CalendarToday} />
88
+ </Box>
89
+ </Accordion.LeadingSlot>
90
+ <Accordion.Label>
91
+ <Accordion.Title>Date range</Accordion.Title>
92
+ </Accordion.Label>
93
+ </Accordion.Trigger>
94
+ <Accordion.Content>
95
+ <DateRangePicker value={value} onValueChange={setValue} className="w-full">
96
+ <DateField.Group fullWidth>
97
+ <DateField.Input slot="start" />
98
+ <DateRangePicker.RangeSeparator />
99
+ <DateField.Input slot="end" />
100
+ </DateField.Group>
101
+ <DateRangePicker.Calendar accessibilityLabel="Date range" />
102
+ </DateRangePicker>
103
+ </Accordion.Content>
104
+ </Accordion.Item>
105
+ </Accordion>
106
+ </Card>
107
+ );
108
+ }
109
+ ```
@@ -0,0 +1,69 @@
1
+ # Onboarding (https://design.candescent.com/docs/patterns/onboarding)
2
+
3
+ ## Welcome Step
4
+
5
+ A first-step onboarding screen with progress indicator and call-to-action.
6
+
7
+ **Platforms:** iOS, Android, Web
8
+
9
+ ```tsx
10
+ import { useState } from 'react';
11
+ import { Button, Heading, ProgressSegmented, Text, VStack } from '@cdx-ui/components';
12
+
13
+ type WelcomePhase = 'welcome' | 'details' | 'skipped';
14
+
15
+ export default function WelcomeStepBlock() {
16
+ const [phase, setPhase] = useState<WelcomePhase>('welcome');
17
+ const step = phase === 'details' ? 2 : 1;
18
+
19
+ return (
20
+ <VStack space="4xl" className="w-full max-w-sm items-center py-8 px-6">
21
+ <ProgressSegmented step={step} segments={4} />
22
+ {phase === 'details' ? (
23
+ <VStack space="md" className="items-center">
24
+ <Heading size="xl" className="text-center">
25
+ Secure your account
26
+ </Heading>
27
+ <Text className="text-content-secondary text-center">
28
+ Add a recovery method so you can get back in if you are locked out.
29
+ </Text>
30
+ </VStack>
31
+ ) : (
32
+ <VStack space="md" className="items-center">
33
+ <Heading size="xl" className="text-center">
34
+ Welcome to your new account
35
+ </Heading>
36
+ <Text className="text-content-secondary text-center">
37
+ Let&apos;s get you set up in a few quick steps. You&apos;ll be banking in no time.
38
+ </Text>
39
+ </VStack>
40
+ )}
41
+ {phase === 'skipped' ? (
42
+ <VStack space="md" className="w-full items-center">
43
+ <Text className="text-content-secondary text-center">
44
+ Setup skipped for now. Resume whenever you are ready.
45
+ </Text>
46
+ <Button variant="ghost" fullWidth onPress={() => setPhase('welcome')}>
47
+ <Button.Label>Resume setup</Button.Label>
48
+ </Button>
49
+ </VStack>
50
+ ) : phase === 'details' ? (
51
+ <VStack space="md" className="w-full">
52
+ <Button variant="ghost" fullWidth onPress={() => setPhase('welcome')}>
53
+ <Button.Label>Back</Button.Label>
54
+ </Button>
55
+ </VStack>
56
+ ) : (
57
+ <VStack space="md" className="w-full">
58
+ <Button variant="solid" fullWidth onPress={() => setPhase('details')}>
59
+ <Button.Label>Get started</Button.Label>
60
+ </Button>
61
+ <Button variant="ghost" fullWidth onPress={() => setPhase('skipped')}>
62
+ <Button.Label>Skip for now</Button.Label>
63
+ </Button>
64
+ </VStack>
65
+ )}
66
+ </VStack>
67
+ );
68
+ }
69
+ ```
@@ -0,0 +1,35 @@
1
+ # Payments (https://design.candescent.com/docs/patterns/payments)
2
+
3
+ ## Quick Actions Row
4
+
5
+ A row of quick-action buttons for common banking tasks like send, transfer, and deposit.
6
+
7
+ **Platforms:** iOS, Android, Web
8
+
9
+ ```tsx
10
+ import { HStack, QuickActionButton } from '@cdx-ui/components';
11
+ import { Send, SyncAlt, PhotoCamera, ReceiptLong } from '@cdx-ui/icons';
12
+
13
+ export default function QuickActionsRowBlock() {
14
+ return (
15
+ <HStack className="justify-between w-full max-w-md">
16
+ <QuickActionButton>
17
+ <QuickActionButton.Icon as={Send} />
18
+ <QuickActionButton.Label>Send</QuickActionButton.Label>
19
+ </QuickActionButton>
20
+ <QuickActionButton>
21
+ <QuickActionButton.Icon as={SyncAlt} />
22
+ <QuickActionButton.Label>Transfer</QuickActionButton.Label>
23
+ </QuickActionButton>
24
+ <QuickActionButton>
25
+ <QuickActionButton.Icon as={PhotoCamera} />
26
+ <QuickActionButton.Label>Deposit</QuickActionButton.Label>
27
+ </QuickActionButton>
28
+ <QuickActionButton>
29
+ <QuickActionButton.Icon as={ReceiptLong} />
30
+ <QuickActionButton.Label>Bill pay</QuickActionButton.Label>
31
+ </QuickActionButton>
32
+ </HStack>
33
+ );
34
+ }
35
+ ```
@@ -0,0 +1,72 @@
1
+ # Settings (https://design.candescent.com/docs/patterns/settings)
2
+
3
+ ## Notification Settings
4
+
5
+ Toggle switches for managing notification preferences.
6
+
7
+ **Platforms:** iOS, Android, Web
8
+
9
+ ```tsx
10
+ import { Card, Heading, Switch, Text, VStack, HStack, Divider } from '@cdx-ui/components';
11
+
12
+ function SettingRow({
13
+ title,
14
+ description,
15
+ last,
16
+ }: {
17
+ title: string;
18
+ description: string;
19
+ last?: boolean;
20
+ }) {
21
+ return (
22
+ <>
23
+ <HStack className="items-center justify-between py-3">
24
+ <VStack className="gap-0.5 flex-1 pr-4">
25
+ <Text className="font-medium">{title}</Text>
26
+ <Text size="sm" className="text-content-secondary">
27
+ {description}
28
+ </Text>
29
+ </VStack>
30
+ <Switch />
31
+ </HStack>
32
+ {last ? null : <Divider />}
33
+ </>
34
+ );
35
+ }
36
+
37
+ export default function SettingsNotificationsBlock() {
38
+ return (
39
+ <Card className="w-full max-w-md shadow-md">
40
+ <Card.Header>
41
+ <VStack space="xs">
42
+ <Heading size="md">Notifications</Heading>
43
+ <Text size="sm" className="text-content-secondary">
44
+ Choose what alerts you receive
45
+ </Text>
46
+ </VStack>
47
+ </Card.Header>
48
+ <Card.Content>
49
+ <VStack>
50
+ <SettingRow
51
+ title="Transaction alerts"
52
+ description="Get notified for every transaction on your accounts"
53
+ />
54
+ <SettingRow
55
+ title="Balance updates"
56
+ description="Daily summary of your account balances"
57
+ />
58
+ <SettingRow
59
+ title="Security alerts"
60
+ description="Important security notifications and login attempts"
61
+ />
62
+ <SettingRow
63
+ title="Promotional offers"
64
+ description="Special offers and product recommendations"
65
+ last
66
+ />
67
+ </VStack>
68
+ </Card.Content>
69
+ </Card>
70
+ );
71
+ }
72
+ ```
@@ -0,0 +1,9 @@
1
+ # Resources (https://design.candescent.com/docs/resources)
2
+
3
+ ## Tools
4
+
5
+ - [Figma libraries](https://design.candescent.com/docs/resources/figma-libraries/content.md) — Access our official design system Figma libraries
6
+
7
+ ## Changelogs
8
+
9
+ - [Release notes](https://design.candescent.com/docs/resources/release-notes/content.md) — What changed in every published version of the Forge UI packages.
@@ -0,0 +1,42 @@
1
+ # Figma libraries (https://design.candescent.com/docs/resources/figma-libraries)
2
+
3
+ ## For Candescent designers
4
+
5
+ The goal of our newest Figma libraries is to match one-to-one with the components that developers use, simplifying handoff and implementation. We also use [Figma Code Connect](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect) to provide code snippets that correctly use our code libraries and architecture.
6
+
7
+ Our main library of components and design tokens. All components are for web and mobile unless
8
+ otherwise noted.
9
+
10
+ Our library of icons, built from Material Symbols as well as our own custom banking icons.
11
+
12
+ ### Add libraries to your design files
13
+
14
+ For Candescent designers, our Figma libraries are available inside our Candescent Figma organization. To use our libraries, follow these steps:
15
+
16
+ **Create a new Design file**
17
+
18
+ ![Step 1](/media/resources/figma-libraries/step_1@2x.png)
19
+
20
+ **Open the Assets panel**
21
+
22
+ ![Step 2](/media/resources/figma-libraries/step_2@2x.png)
23
+
24
+ **Open the "Manage libraries" dialog**
25
+
26
+ ![Step 3](/media/resources/figma-libraries/step_3@2x.png)
27
+
28
+ **Remove any CDS libraries**
29
+
30
+ ![Step 4](/media/resources/figma-libraries/step_4@2x.png)
31
+
32
+ **Select _Recommended_ under _Browse libraries_**
33
+
34
+ ![Step 5](/media/resources/figma-libraries/step_5@2x.png)
35
+
36
+ **Add the Forge DS libraries to your design file**
37
+
38
+ ![Step 6](/media/resources/figma-libraries/step_6@2x.png)
39
+
40
+ ## For external partners
41
+
42
+ Our Figma libraries are not currently available for external partners while the Forge Design System is in **v0**. We look forward to sharing our libraries externally after our first major release is live.
@@ -0,0 +1,27 @@
1
+ # 0.0.1-beta.118 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.118)
2
+
3
+ Color and variant props are standardised across components; tint and default are renamed.
4
+
5
+ ## Breaking changes
6
+
7
+ Every component now draws its `color` and `variant` values from one shared set, following
8
+ the `strong` → `solid` rename that landed on Button. The old values still work and still
9
+ render, but each emits a one-time deprecation warning in development and will be removed in
10
+ a future major release (#393).
11
+
12
+ - **[Chip](https://design.candescent.com/docs/components/chip/content.md)** — `variant="tint"` is now `variant="subtle"`, and
13
+ `color="default"` is now `color="neutral"`. The subtle variant also switches to the subtle
14
+ design tokens, so its surface and content colours shift slightly.
15
+ - **[Icon Button](https://design.candescent.com/docs/components/icon-button/content.md)** — `variant="tint"` is now
16
+ `variant="subtle"`.
17
+ - **[Toast](https://design.candescent.com/docs/components/toast/content.md)** — `color="default"` is now `color="neutral"`, including
18
+ the provider-level fallback.
19
+ - **[Dialog](https://design.candescent.com/docs/components/dialog/content.md)** — `Dialog.Title` renames the `appearance` prop to
20
+ `color`, and its `default` value to `neutral`. When both props are passed, `color` wins.
21
+ [Alert Dialog](https://design.candescent.com/docs/components/alert-dialog/content.md) inherits the same change.
22
+
23
+ ## Utilities and DX
24
+
25
+ **Alert** — `color` is accepted as an alias for `severity`, so Alert lines up with the
26
+ global colour convention. `severity` still takes precedence when both are set (also updates
27
+ internal tooling).
@@ -0,0 +1,21 @@
1
+ # 0.0.1-beta.122 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.122)
2
+
3
+ Tabs arrives with a scroll-shadow affordance for overflowing tab strips.
4
+
5
+ ## What's new
6
+
7
+ **[Tabs](https://design.candescent.com/docs/components/tabs/content.md)** — A compound tab set for switching between sibling views
8
+ without navigating away. Compose `Tabs.List` with `Tabs.Trigger` for the strip and
9
+ `Tabs.Content` for each panel; selection state, roving focus, and the ARIA wiring are
10
+ handled for you on all three platforms. A tab strip that overflows its container now
11
+ fades at the edge through the new `ScrollShadow` helper, so it reads as scrollable
12
+ rather than clipped (#407).
13
+
14
+ ## Internal
15
+
16
+ - **Tooling** — Added a `component-discovery` skill so component work starts from a
17
+ structured research pass instead of ad-hoc exploration (#422).
18
+ - **Tooling** — Fixed the skill description quoting that broke the YAML frontmatter
19
+ parse (#423).
20
+
21
+ Plus 1 backlog and dependency-sync commit.
@@ -0,0 +1,16 @@
1
+ # 0.0.1-beta.124 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.124)
2
+
3
+ Breadcrumbs joins the component set for hierarchical navigation trails.
4
+
5
+ ## What's new
6
+
7
+ **[Breadcrumbs](https://design.candescent.com/docs/components/breadcrumbs/content.md)** — Shows a user where they are inside a nested flow
8
+ and lets them jump back to any ancestor. Compose `Breadcrumbs.Item` for each level and
9
+ `Breadcrumbs.Separator` between them; the trailing item is marked as the current page
10
+ for assistive technology automatically. Reach for it in account and settings flows
11
+ that run more than two levels deep, where a single back affordance loses the trail
12
+ (#419).
13
+
14
+ ## Documentation
15
+
16
+ - Added the retroactive story covering the Dialog Vite/web fix from PR #416 (#426).
@@ -0,0 +1,10 @@
1
+ # 0.0.1-beta.126 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.126)
2
+
3
+ ThemeEditor no longer fires onChange on mount before the user edits a control.
4
+
5
+ ## Bug fixes
6
+
7
+ - **ThemeEditor** — `onChange` no longer fires on mount with the default seed theme, so
8
+ integrations that treat a null `themeOverride` as untouched no longer show a dirty form
9
+ or Save bar until the user edits a control
10
+ ([#427](https://github.com/dfh-candescent-ui/ui-component-framework/pull/427)).
@@ -0,0 +1,14 @@
1
+ # 0.0.1-beta.127 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.127)
2
+
3
+ Internal release — docs demo drift guard and a CI coverage-threshold gate.
4
+
5
+ ## Internal
6
+
7
+ - **CI** — Added a coverage-threshold gate so a package dropping below its line
8
+ coverage floor fails the build (#412).
9
+ - **Tooling** — `validate:demos` now cross-checks every `ComponentPreview` name in the
10
+ docs MDX against the demo registries and fails the docs build on drift, and the
11
+ `Dialog.Header` Code Connect template points at its current Figma component set
12
+ (#428).
13
+
14
+ Plus 2 backlog and dependency-sync commits.
@@ -0,0 +1,9 @@
1
+ # 0.0.1-beta.128 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.128)
2
+
3
+ Design token values update from the design system source for poise, prestige, and pulse presets.
4
+
5
+ ## Dependencies
6
+
7
+ **Design tokens** — Token values updated from the design system source. Review your
8
+ theme if you override specific token values
9
+ ([#430](https://github.com/dfh-candescent-ui/ui-component-framework/pull/430)).
@@ -0,0 +1,18 @@
1
+ # 0.0.1-beta.129 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.129)
2
+
3
+ Tabs and Breadcrumbs documentation ships; Tabs.Tab interaction props are now internal-only.
4
+
5
+ This release adds documentation for **[Tabs](https://design.candescent.com/docs/components/tabs/content.md)** and **[Breadcrumbs](https://design.candescent.com/docs/components/breadcrumbs/content.md)**, and narrows the public surface of `Tabs.Tab`.
6
+
7
+ ## What's new
8
+
9
+ **[Tabs](https://design.candescent.com/docs/components/tabs/content.md)** — `Tabs.Tab` interaction props are now marked internal
10
+ and are no longer part of the supported public API. Compose tabs with the documented
11
+ selection pattern instead of passing press handlers directly to `Tabs.Tab`.
12
+
13
+ ## Documentation
14
+
15
+ - **[Tabs](https://design.candescent.com/docs/components/tabs/content.md)** — New component page with live demos for basic usage,
16
+ vertical layout, overflow scrolling, visual variants, and disabled tabs.
17
+ - **[Breadcrumbs](https://design.candescent.com/docs/components/breadcrumbs/content.md)** — New component page with live demos for basic trails,
18
+ custom separators, disabled items, underlined styling, and icons.
@@ -0,0 +1,18 @@
1
+ # 0.0.1-beta.130 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.130)
2
+
3
+ Import ForgeDesignProvider directly from @cdx-ui/components.
4
+
5
+ ## What's new
6
+
7
+ **ForgeDesignProvider** — Exported from the `@cdx-ui/components` package root, so you
8
+ can import it alongside other public APIs without a deep import path. The provider and
9
+ its config types follow the same root-export pattern as `ToastProvider`. (#432)
10
+
11
+ ## Internal
12
+
13
+ Plus 2 backlog and dependency-sync commits.
14
+
15
+ ## Documentation
16
+
17
+ - Added Textarea component documentation with live demos for basic usage, sizes,
18
+ states, auto-grow, resizable layout, and Field integration (#437).
@@ -0,0 +1,7 @@
1
+ # 0.0.1-beta.133 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.133)
2
+
3
+ Button asChild no longer overrides child role and event handlers when composing with Link or other interactive elements.
4
+
5
+ ## Bug fixes
6
+
7
+ **[Button](https://design.candescent.com/docs/components/button/content.md)** — `asChild` no longer replaces the child’s role or press, focus, and hover handlers, so `<Button asChild><Link>` keeps the link’s `role="link"` and navigation behavior ([#446](https://github.com/dfh-candescent-ui/ui-component-framework/pull/446)).
@@ -0,0 +1,17 @@
1
+ # 0.0.1-beta.134 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.134)
2
+
3
+ Published @cdx-ui packages declare MIT license metadata; versions published before this release are unchanged.
4
+
5
+ ## What's new
6
+
7
+ **Package licensing** — `@cdx-ui/utils`, `@cdx-ui/primitives`, `@cdx-ui/styles`, and
8
+ `@cdx-ui/components` now declare `"license": "MIT"` and ship a root `LICENSE` file in
9
+ the published tarball
10
+ ([#368](https://github.com/dfh-candescent-ui/ui-component-framework/pull/368)). Legal
11
+ later confirmed MIT and the copyright holder as **Digital First Holdings LLC**; the
12
+ copyright line in package `LICENSE` files is updated on a subsequent publish. npm
13
+ versions are immutable: packages published **before** `0.0.1-beta.134` keep whatever
14
+ metadata they had (no license field) and are not retroactively changed.
15
+ `@cdx-ui/icons` also received provisional license files in this release; a later
16
+ publish reverted icons licensing so the package again ships without a `license`
17
+ field until third-party brand marks are removed.
@@ -0,0 +1,7 @@
1
+ # 0.0.1-beta.136 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.136)
2
+
3
+ Font overrides applied with applyThemeOverride now persist inside ScopedTheme scopes instead of being shadowed.
4
+
5
+ ## Bug fixes
6
+
7
+ **[ScopedTheme](https://design.candescent.com/docs/components/scoped-theme/content.md)** — Font overrides and other mode-invariant tokens (such as radii) applied through `applyThemeOverride` now persist inside `ScopedTheme` scopes instead of being shadowed by per-mode CSS variants ([#457](https://github.com/dfh-candescent-ui/ui-component-framework/pull/457)).
@@ -0,0 +1,10 @@
1
+ # 0.0.1-beta.137 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.137)
2
+
3
+ Tabs indicator animation now completes in 150ms for snappier tab switching.
4
+
5
+ ## What's new
6
+
7
+ **[Tabs](https://design.candescent.com/docs/components/tabs/content.md)** — The sliding indicator under the active tab now
8
+ animates in 150ms, making tab switches feel snappier when users move between panels.
9
+ No API changes are required — upgrade and the new timing applies automatically
10
+ ([#454](https://github.com/dfh-candescent-ui/ui-component-framework/pull/454)).
@@ -0,0 +1,7 @@
1
+ # 0.0.1-beta.138 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.138)
2
+
3
+ WhatsApp icon is themeable again after reverting a premature fixed-color brand-icon carve-out and package license files.
4
+
5
+ ## Bug fixes
6
+
7
+ **[Icon](https://design.candescent.com/docs/components/icon/content.md)** — WhatsApp icon is themeable again (`color` and `filled` props apply as with other icons); the fixed-color brand-icon carve-out and premature `@cdx-ui/icons` license files are removed ([#458](https://github.com/dfh-candescent-ui/ui-component-framework/pull/458)).
@@ -0,0 +1,13 @@
1
+ # 0.0.1-beta.139 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.139)
2
+
3
+ Carousel adds PrevButton and NextButton for ghost icon prev/next navigation, nested in Carousel or composed via useCarousel().
4
+
5
+ ## What's new
6
+
7
+ **[Carousel](https://design.candescent.com/docs/components/carousel/content.md)** — Adds `Carousel.PrevButton` and
8
+ `Carousel.NextButton`, ghost icon controls for moving between slides without
9
+ swiping. Nest them inside `Carousel` for zero-prop wiring below the track, or
10
+ pair them with `useCarousel()` for sibling placement — for example, flanking the
11
+ track or sitting in a header row. The buttons respect `loop` and disable at the
12
+ first or last slide when looping is off, with direction-aware default icons and
13
+ accessibility labels for horizontal and vertical layouts ([#440](https://github.com/dfh-candescent-ui/ui-component-framework/pull/440)).
@@ -0,0 +1,26 @@
1
+ # 0.0.1-beta.140 (https://design.candescent.com/docs/resources/release-notes/0.0.1-beta.140)
2
+
3
+ @cdx-ui/utils re-exports cva and VariantProps; Select documentation consolidates on the docs site with live demos.
4
+
5
+ This release centralizes CVA imports through `@cdx-ui/utils` and consolidates
6
+ Select documentation on the docs site.
7
+
8
+ ## What's new
9
+
10
+ **`@cdx-ui/utils`** — Re-exports `cva` and `VariantProps` from
11
+ `class-variance-authority`, so you import variant helpers from the same package
12
+ as other Forge UI utilities instead of adding a direct dependency on
13
+ `class-variance-authority`. Update custom styled components that import `cva`
14
+ directly:
15
+
16
+ ```tsx
17
+ import { cva, type VariantProps } from '@cdx-ui/utils';
18
+ ```
19
+
20
+ ([#462](https://github.com/dfh-candescent-ui/ui-component-framework/pull/462)).
21
+
22
+ **[Select](https://design.candescent.com/docs/components/select/content.md)** — Documentation consolidates onto the docs
23
+ site as the single source of truth, with live demos for basic usage, sizes, a
24
+ custom trigger, and Field integration. Use the page for prop tables, anatomy,
25
+ and accessibility guidance when implementing Select in your app
26
+ ([#470](https://github.com/dfh-candescent-ui/ui-component-framework/pull/470)).