@veracity/vui 5.2.0-alpha.398622.2606110819 → 5.2.0

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 (72) hide show
  1. package/dist/badge/badge.d.ts.map +1 -1
  2. package/dist/badge/badge.js +1 -8
  3. package/dist/badge/badge.js.map +1 -1
  4. package/dist/button/buttonText.js +1 -1
  5. package/dist/button/buttons.d.ts +1 -2
  6. package/dist/button/buttons.d.ts.map +1 -1
  7. package/dist/button/buttons.js +5 -21
  8. package/dist/button/buttons.js.map +1 -1
  9. package/dist/button/index.d.ts +1 -1
  10. package/dist/dialog/dialogCloseButton.js +1 -1
  11. package/dist/dialog/dialogCloseButton.js.map +1 -1
  12. package/dist/dismissButton/DismissButton.d.ts +34 -0
  13. package/dist/dismissButton/DismissButton.d.ts.map +1 -0
  14. package/dist/dismissButton/DismissButton.js +69 -0
  15. package/dist/dismissButton/DismissButton.js.map +1 -0
  16. package/dist/dismissButton/index.d.ts +1 -0
  17. package/dist/dismissButton/theme.js +33 -0
  18. package/dist/dismissButton/theme.js.map +1 -0
  19. package/dist/header/loggedInHeader.js +1 -1
  20. package/dist/index.d.ts +6 -5
  21. package/dist/index.js +10 -9
  22. package/dist/notification/index.d.ts +1 -1
  23. package/dist/notification/notification.d.ts.map +1 -1
  24. package/dist/notification/notification.js +27 -6
  25. package/dist/notification/notification.js.map +1 -1
  26. package/dist/notification/notification.types.d.ts +26 -7
  27. package/dist/notification/notification.types.d.ts.map +1 -1
  28. package/dist/notification/notificationAction.d.ts.map +1 -1
  29. package/dist/notification/notificationAction.js +6 -1
  30. package/dist/notification/notificationAction.js.map +1 -1
  31. package/dist/notification/theme.js +25 -10
  32. package/dist/notification/theme.js.map +1 -1
  33. package/dist/notification/utils.js +39 -10
  34. package/dist/notification/utils.js.map +1 -1
  35. package/dist/range/index.d.ts +1 -1
  36. package/dist/range/range.d.ts.map +1 -1
  37. package/dist/range/range.js +93 -51
  38. package/dist/range/range.js.map +1 -1
  39. package/dist/range/range.types.d.ts +2 -3
  40. package/dist/range/range.types.d.ts.map +1 -1
  41. package/dist/range/theme.js +1 -5
  42. package/dist/range/theme.js.map +1 -1
  43. package/dist/stepIndicator/stepIndicator.js +1 -0
  44. package/dist/stepIndicator/stepIndicator.js.map +1 -1
  45. package/dist/tabs/tabsNavBar.js +2 -2
  46. package/dist/tabs/tabsNavBar.js.map +1 -1
  47. package/dist/tag/index.d.ts +1 -1
  48. package/dist/tag/tag.d.ts.map +1 -1
  49. package/dist/tag/tag.js +4 -4
  50. package/dist/tag/tag.js.map +1 -1
  51. package/dist/tag/tag.types.d.ts +9 -9
  52. package/dist/tag/tag.types.d.ts.map +1 -1
  53. package/dist/tag/theme.js +13 -33
  54. package/dist/tag/theme.js.map +1 -1
  55. package/dist/tag/utils.d.ts +7 -7
  56. package/dist/tag/utils.d.ts.map +1 -1
  57. package/dist/tag/utils.js +8 -8
  58. package/dist/tag/utils.js.map +1 -1
  59. package/dist/theme/components.d.ts +33 -16
  60. package/dist/theme/components.js +88 -86
  61. package/dist/theme/components.js.map +1 -1
  62. package/dist/theme/defaultTheme.d.ts +33 -16
  63. package/dist/theme/types.d.ts +3 -1
  64. package/dist/theme/types.d.ts.map +1 -1
  65. package/dist/toast/useToast.d.ts.map +1 -1
  66. package/dist/toast/useToast.js +2 -0
  67. package/dist/toast/useToast.js.map +1 -1
  68. package/dist/tutorial/tutorialCard.js +2 -1
  69. package/dist/tutorial/tutorialCard.js.map +1 -1
  70. package/package.json +5 -3
  71. package/skills/build-with-vui/SKILL.md +1 -1
  72. package/skills/upgrade-vui-v4-to-v5/SKILL.md +8 -7
package/dist/theme/components.js CHANGED
@@ -11,49 +11,50 @@ import theme_default$9 from "../checkbox/theme.js";
11
11
  import theme_default$10 from "../datePicker/theme.js";
12
12
  import theme_default$11 from "../definition/theme.js";
13
13
  import theme_default$12 from "../dialog/theme.js";
14
- import theme_default$13 from "../display/theme.js";
15
- import theme_default$14 from "../divider/theme.js";
16
- import theme_default$15 from "../dragAndDrop/theme.js";
17
- import theme_default$16 from "../drawer/theme.js";
18
- import theme_default$17 from "../footer/theme.js";
19
- import theme_default$18 from "../grid/theme.js";
20
- import theme_default$19 from "../header/theme.js";
21
- import theme_default$20 from "../heading/theme.js";
22
- import theme_default$21 from "../icon/theme.js";
23
- import theme_default$22 from "../image/theme.js";
24
- import theme_default$23 from "../input/theme.js";
25
- import theme_default$24 from "../label/theme.js";
26
- import theme_default$25 from "../link/theme.js";
27
- import theme_default$26 from "../list/theme.js";
28
- import theme_default$27 from "../menu/theme.js";
29
- import theme_default$28 from "../message/theme.js";
30
- import theme_default$29 from "../modal/theme.js";
31
- import theme_default$30 from "../notification/theme.js";
32
- import theme_default$31 from "../p/theme.js";
33
- import theme_default$32 from "../pagination/theme.js";
34
- import theme_default$33 from "../panel/theme.js";
35
- import theme_default$34 from "../popover/theme.js";
36
- import theme_default$35 from "../progress/theme.js";
37
- import theme_default$36 from "../progressCircular/theme.js";
38
- import theme_default$37 from "../radio/theme.js";
39
- import theme_default$38 from "../range/theme.js";
40
- import theme_default$39 from "../rating/theme.js";
41
- import theme_default$40 from "../select/theme.js";
42
- import theme_default$41 from "../sidemenu/theme.js";
43
- import theme_default$42 from "../sidemenuV2/theme.js";
44
- import theme_default$43 from "../skeleton/theme.js";
45
- import theme_default$44 from "../spinner/theme.js";
46
- import theme_default$45 from "../stepIndicator/theme.js";
47
- import theme_default$46 from "../stepperHorizontal/theme.js";
48
- import theme_default$47 from "../stepperVertical/theme.js";
49
- import theme_default$48 from "../switch/theme.js";
50
- import theme_default$49 from "../t/theme.js";
51
- import theme_default$50 from "../table/theme.js";
52
- import theme_default$51 from "../tabs/theme.js";
53
- import theme_default$52 from "../tag/theme.js";
54
- import theme_default$53 from "../tagToggle/theme.js";
55
- import theme_default$54 from "../textarea/theme.js";
56
- import theme_default$55 from "../tree/theme.js";
14
+ import theme_default$13 from "../dismissButton/theme.js";
15
+ import theme_default$14 from "../display/theme.js";
16
+ import theme_default$15 from "../divider/theme.js";
17
+ import theme_default$16 from "../dragAndDrop/theme.js";
18
+ import theme_default$17 from "../drawer/theme.js";
19
+ import theme_default$18 from "../footer/theme.js";
20
+ import theme_default$19 from "../grid/theme.js";
21
+ import theme_default$20 from "../header/theme.js";
22
+ import theme_default$21 from "../heading/theme.js";
23
+ import theme_default$22 from "../icon/theme.js";
24
+ import theme_default$23 from "../image/theme.js";
25
+ import theme_default$24 from "../input/theme.js";
26
+ import theme_default$25 from "../label/theme.js";
27
+ import theme_default$26 from "../link/theme.js";
28
+ import theme_default$27 from "../list/theme.js";
29
+ import theme_default$28 from "../menu/theme.js";
30
+ import theme_default$29 from "../message/theme.js";
31
+ import theme_default$30 from "../modal/theme.js";
32
+ import theme_default$31 from "../notification/theme.js";
33
+ import theme_default$32 from "../p/theme.js";
34
+ import theme_default$33 from "../pagination/theme.js";
35
+ import theme_default$34 from "../panel/theme.js";
36
+ import theme_default$35 from "../popover/theme.js";
37
+ import theme_default$36 from "../progress/theme.js";
38
+ import theme_default$37 from "../progressCircular/theme.js";
39
+ import theme_default$38 from "../radio/theme.js";
40
+ import theme_default$39 from "../range/theme.js";
41
+ import theme_default$40 from "../rating/theme.js";
42
+ import theme_default$41 from "../select/theme.js";
43
+ import theme_default$42 from "../sidemenu/theme.js";
44
+ import theme_default$43 from "../sidemenuV2/theme.js";
45
+ import theme_default$44 from "../skeleton/theme.js";
46
+ import theme_default$45 from "../spinner/theme.js";
47
+ import theme_default$46 from "../stepIndicator/theme.js";
48
+ import theme_default$47 from "../stepperHorizontal/theme.js";
49
+ import theme_default$48 from "../stepperVertical/theme.js";
50
+ import theme_default$49 from "../switch/theme.js";
51
+ import theme_default$50 from "../t/theme.js";
52
+ import theme_default$51 from "../table/theme.js";
53
+ import theme_default$52 from "../tabs/theme.js";
54
+ import theme_default$53 from "../tag/theme.js";
55
+ import theme_default$54 from "../tagToggle/theme.js";
56
+ import theme_default$55 from "../textarea/theme.js";
57
+ import theme_default$56 from "../tree/theme.js";
57
58
  import themePlaceholder_default from "./themePlaceholder.js";
58
59
 
59
60
  //#region src/theme/components.ts
@@ -72,52 +73,53 @@ var components_default = {
72
73
  Checkbox: theme_default$9,
73
74
  DatePicker: theme_default$10,
74
75
  Dialog: theme_default$12,
75
- Divider: theme_default$14,
76
- Display: theme_default$13,
77
- DragAndDrop: theme_default$15,
78
- Drawer: theme_default$16,
79
- Footer: theme_default$17,
80
- Grid: theme_default$18,
81
- Header: theme_default$19,
82
- Heading: theme_default$20,
83
- Icon: theme_default$21,
84
- Image: theme_default$22,
85
- Input: theme_default$23,
86
- Label: theme_default$24,
87
- Link: theme_default$25,
88
- List: theme_default$26,
76
+ Divider: theme_default$15,
77
+ Display: theme_default$14,
78
+ DismissButton: theme_default$13,
79
+ DragAndDrop: theme_default$16,
80
+ Drawer: theme_default$17,
81
+ Footer: theme_default$18,
82
+ Grid: theme_default$19,
83
+ Header: theme_default$20,
84
+ Heading: theme_default$21,
85
+ Icon: theme_default$22,
86
+ Image: theme_default$23,
87
+ Input: theme_default$24,
88
+ Label: theme_default$25,
89
+ Link: theme_default$26,
90
+ List: theme_default$27,
89
91
  Markdown,
90
92
  MarkdownEditor,
91
- Menu: theme_default$27,
92
- Message: theme_default$28,
93
- Modal: theme_default$29,
94
- Notification: theme_default$30,
95
- P: theme_default$31,
96
- Pagination: theme_default$32,
97
- Panel: theme_default$33,
98
- Progress: theme_default$35,
99
- ProgressCircular: theme_default$36,
93
+ Menu: theme_default$28,
94
+ Message: theme_default$29,
95
+ Modal: theme_default$30,
96
+ Notification: theme_default$31,
97
+ P: theme_default$32,
98
+ Pagination: theme_default$33,
99
+ Panel: theme_default$34,
100
+ Progress: theme_default$36,
101
+ ProgressCircular: theme_default$37,
100
102
  Definition: theme_default$11,
101
- Popover: theme_default$34,
102
- Radio: theme_default$37,
103
- Range: theme_default$38,
104
- Rating: theme_default$39,
105
- Select: theme_default$40,
106
- Sidemenu: theme_default$41,
107
- Skeleton: theme_default$43,
108
- StepIndicator: theme_default$45,
109
- StepperHorizontal: theme_default$46,
110
- StepperVertical: theme_default$47,
111
- Spinner: theme_default$44,
112
- SidemenuV2: theme_default$42,
113
- Switch: theme_default$48,
114
- T: theme_default$49,
115
- Table: theme_default$50,
116
- Tabs: theme_default$51,
117
- Tag: theme_default$52,
118
- TagToggle: theme_default$53,
119
- Textarea: theme_default$54,
120
- Tree: theme_default$55
103
+ Popover: theme_default$35,
104
+ Radio: theme_default$38,
105
+ Range: theme_default$39,
106
+ Rating: theme_default$40,
107
+ Select: theme_default$41,
108
+ Sidemenu: theme_default$42,
109
+ Skeleton: theme_default$44,
110
+ StepIndicator: theme_default$46,
111
+ StepperHorizontal: theme_default$47,
112
+ StepperVertical: theme_default$48,
113
+ Spinner: theme_default$45,
114
+ SidemenuV2: theme_default$43,
115
+ Switch: theme_default$49,
116
+ T: theme_default$50,
117
+ Table: theme_default$51,
118
+ Tabs: theme_default$52,
119
+ Tag: theme_default$53,
120
+ TagToggle: theme_default$54,
121
+ Textarea: theme_default$55,
122
+ Tree: theme_default$56
121
123
  };
122
124
 
123
125
  //#endregion
package/dist/theme/components.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.js","names":["themePlaceholder"],"sources":["../../src/theme/components.ts"],"sourcesContent":["// Basic components\nimport Accordion from '../accordion/theme'\nimport Avatar from '../avatar/theme'\nimport Badge from '../badge/theme'\nimport Box from '../box/theme'\nimport Breadcrumbs from '../breadcrumbs/theme'\nimport Button from '../button/theme'\nimport Calendar from '../calendar/theme'\nimport Card from '../card/theme'\nimport Chat from '../chat/theme'\nimport Checkbox from '../checkbox/theme'\nimport DatePicker from '../datePicker/theme'\nimport Definition from '../definition/theme'\nimport Dialog from '../dialog/theme'\nimport Display from '../display/theme'\nimport Divider from '../divider/theme'\nimport DragAndDrop from '../dragAndDrop/theme'\nimport Drawer from '../drawer/theme'\nimport Footer from '../footer/theme'\nimport Grid from '../grid/theme'\nimport Header from '../header/theme'\nimport Heading from '../heading/theme'\nimport Icon from '../icon/theme'\nimport Image from '../image/theme'\nimport Input from '../input/theme'\nimport Label from '../label/theme'\nimport Link from '../link/theme'\nimport List from '../list/theme'\nimport Menu from '../menu/theme'\nimport Message from '../message/theme'\nimport Modal from '../modal/theme'\nimport Notification from '../notification/theme'\nimport P from '../p/theme'\nimport Pagination from '../pagination/theme'\nimport Panel from '../panel/theme'\nimport Popover from '../popover/theme'\nimport Progress from '../progress/theme'\nimport ProgressCircular from '../progressCircular/theme'\nimport Radio from '../radio/theme'\nimport Range from '../range/theme'\nimport Rating from '../rating/theme'\nimport Select from '../select/theme'\nimport Sidemenu from '../sidemenu/theme'\nimport SidemenuV2 from '../sidemenuV2/theme'\nimport Skeleton from '../skeleton/theme'\nimport Spinner from '../spinner/theme'\nimport StepIndicator from '../stepIndicator/theme'\nimport StepperHorizontal from '../stepperHorizontal/theme'\nimport StepperVertical from '../stepperVertical/theme'\nimport Switch from '../switch/theme'\nimport T from '../t/theme'\nimport Table from '../table/theme'\nimport Tabs from '../tabs/theme'\nimport Tag from '../tag/theme'\nimport TagToggle from '../tagToggle/theme'\nimport Textarea from '../textarea/theme'\nimport Tree from '../tree/theme'\nimport themePlaceholder from './themePlaceholder'\n\n// Official external components\n\nconst Markdown = themePlaceholder\nconst MarkdownEditor = themePlaceholder\n\nexport default {\n Accordion,\n Avatar,\n Badge,\n Box,\n Breadcrumbs,\n Button,\n Calendar,\n Card,\n Chat,\n Checkbox,\n DatePicker,\n Dialog,\n Divider,\n Display,\n DragAndDrop,\n Drawer,\n Footer,\n Grid,\n Header,\n Heading,\n Icon,\n Image,\n Input,\n Label,\n Link,\n List,\n Markdown,\n MarkdownEditor,\n Menu,\n Message,\n Modal,\n Notification,\n P,\n Pagination,\n Panel,\n Progress,\n ProgressCircular,\n Definition,\n Popover,\n Radio,\n Range,\n Rating,\n Select,\n Sidemenu,\n Skeleton,\n StepIndicator,\n StepperHorizontal,\n StepperVertical,\n Spinner,\n SidemenuV2,\n Switch,\n T,\n Table,\n Tabs,\n Tag,\n TagToggle,\n Textarea,\n Tree,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,WAAWA;AACjB,MAAM,iBAAiBA;AAEvB,yBAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
1
+ {"version":3,"file":"components.js","names":["themePlaceholder"],"sources":["../../src/theme/components.ts"],"sourcesContent":["// Basic components\nimport Accordion from '../accordion/theme'\nimport Avatar from '../avatar/theme'\nimport Badge from '../badge/theme'\nimport Box from '../box/theme'\nimport Breadcrumbs from '../breadcrumbs/theme'\nimport Button from '../button/theme'\nimport Calendar from '../calendar/theme'\nimport Card from '../card/theme'\nimport Chat from '../chat/theme'\nimport Checkbox from '../checkbox/theme'\nimport DatePicker from '../datePicker/theme'\nimport Definition from '../definition/theme'\nimport Dialog from '../dialog/theme'\nimport DismissButton from '../dismissButton/theme'\nimport Display from '../display/theme'\nimport Divider from '../divider/theme'\nimport DragAndDrop from '../dragAndDrop/theme'\nimport Drawer from '../drawer/theme'\nimport Footer from '../footer/theme'\nimport Grid from '../grid/theme'\nimport Header from '../header/theme'\nimport Heading from '../heading/theme'\nimport Icon from '../icon/theme'\nimport Image from '../image/theme'\nimport Input from '../input/theme'\nimport Label from '../label/theme'\nimport Link from '../link/theme'\nimport List from '../list/theme'\nimport Menu from '../menu/theme'\nimport Message from '../message/theme'\nimport Modal from '../modal/theme'\nimport Notification from '../notification/theme'\nimport P from '../p/theme'\nimport Pagination from '../pagination/theme'\nimport Panel from '../panel/theme'\nimport Popover from '../popover/theme'\nimport Progress from '../progress/theme'\nimport ProgressCircular from '../progressCircular/theme'\nimport Radio from '../radio/theme'\nimport Range from '../range/theme'\nimport Rating from '../rating/theme'\nimport Select from '../select/theme'\nimport Sidemenu from '../sidemenu/theme'\nimport SidemenuV2 from '../sidemenuV2/theme'\nimport Skeleton from '../skeleton/theme'\nimport Spinner from '../spinner/theme'\nimport StepIndicator from '../stepIndicator/theme'\nimport StepperHorizontal from '../stepperHorizontal/theme'\nimport StepperVertical from '../stepperVertical/theme'\nimport Switch from '../switch/theme'\nimport T from '../t/theme'\nimport Table from '../table/theme'\nimport Tabs from '../tabs/theme'\nimport Tag from '../tag/theme'\nimport TagToggle from '../tagToggle/theme'\nimport Textarea from '../textarea/theme'\nimport Tree from '../tree/theme'\nimport themePlaceholder from './themePlaceholder'\n\n// Official external components\n\nconst Markdown = themePlaceholder\nconst MarkdownEditor = themePlaceholder\n\nexport default {\n Accordion,\n Avatar,\n Badge,\n Box,\n Breadcrumbs,\n Button,\n Calendar,\n Card,\n Chat,\n Checkbox,\n DatePicker,\n Dialog,\n Divider,\n Display,\n DismissButton,\n DragAndDrop,\n Drawer,\n Footer,\n Grid,\n Header,\n Heading,\n Icon,\n Image,\n Input,\n Label,\n Link,\n List,\n Markdown,\n MarkdownEditor,\n Menu,\n Message,\n Modal,\n Notification,\n P,\n Pagination,\n Panel,\n Progress,\n ProgressCircular,\n Definition,\n Popover,\n Radio,\n Range,\n Rating,\n Select,\n Sidemenu,\n Skeleton,\n StepIndicator,\n StepperHorizontal,\n StepperVertical,\n Spinner,\n SidemenuV2,\n Switch,\n T,\n Table,\n Tabs,\n Tag,\n TagToggle,\n Textarea,\n Tree,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAM,WAAWA;AACjB,MAAM,iBAAiBA;AAEvB,yBAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
package/dist/theme/defaultTheme.d.ts CHANGED
@@ -1081,6 +1081,33 @@ declare const defaultTheme: {
1081
1081
  };
1082
1082
  variants: {};
1083
1083
  };
1084
+ DismissButton: {
1085
+ defaultProps: {
1086
+ size: string;
1087
+ };
1088
+ sizes: {
1089
+ xs: {
1090
+ h: number;
1091
+ w: number;
1092
+ p: string;
1093
+ };
1094
+ sm: {
1095
+ h: number;
1096
+ w: number;
1097
+ p: string;
1098
+ };
1099
+ md: {
1100
+ h: number;
1101
+ w: number;
1102
+ p: string;
1103
+ };
1104
+ lg: {
1105
+ h: number;
1106
+ w: number;
1107
+ p: string;
1108
+ };
1109
+ };
1110
+ };
1084
1111
  DragAndDrop: {
1085
1112
  baseStyle: {
1086
1113
  borderWidth: number;
@@ -1944,7 +1971,9 @@ declare const defaultTheme: {
1944
1971
  };
1945
1972
  text: {
1946
1973
  flex: string;
1974
+ fontSize: string;
1947
1975
  lineHeight: string;
1976
+ fontWeight: number;
1948
1977
  minW: number;
1949
1978
  };
1950
1979
  title: {
@@ -1961,6 +1990,10 @@ declare const defaultTheme: {
1961
1990
  subtleRed: object;
1962
1991
  subtleYellow: object;
1963
1992
  subtleGreen: object;
1993
+ bannerBlue: object;
1994
+ bannerRed: object;
1995
+ bannerYellow: object;
1996
+ bannerGreen: object;
1964
1997
  };
1965
1998
  };
1966
1999
  P: {
@@ -2288,12 +2321,10 @@ declare const defaultTheme: {
2288
2321
  bg: string;
2289
2322
  border: string;
2290
2323
  borderRadius: string;
2291
- cursor: string;
2292
2324
  h: string;
2293
2325
  lineHeight: string;
2294
2326
  w: string;
2295
2327
  textAlign: string;
2296
- top: string;
2297
2328
  transitionDuration: string;
2298
2329
  };
2299
2330
  thumbValue: {
@@ -2303,9 +2334,7 @@ declare const defaultTheme: {
2303
2334
  };
2304
2335
  track: {
2305
2336
  bg: "seaBlue.28";
2306
- bottom: number;
2307
2337
  borderRadius: string;
2308
- top: number;
2309
2338
  transitionDuration: string;
2310
2339
  };
2311
2340
  };
@@ -3107,9 +3136,6 @@ declare const defaultTheme: {
3107
3136
  };
3108
3137
  dismiss: {
3109
3138
  size: string;
3110
- w: number;
3111
- h: number;
3112
- minW: number;
3113
3139
  };
3114
3140
  };
3115
3141
  sm: {
@@ -3126,9 +3152,6 @@ declare const defaultTheme: {
3126
3152
  };
3127
3153
  dismiss: {
3128
3154
  size: string;
3129
- w: number;
3130
- h: number;
3131
- minW: number;
3132
3155
  };
3133
3156
  };
3134
3157
  md: {
@@ -3145,9 +3168,6 @@ declare const defaultTheme: {
3145
3168
  };
3146
3169
  dismiss: {
3147
3170
  size: string;
3148
- w: number;
3149
- h: number;
3150
- minW: number;
3151
3171
  };
3152
3172
  };
3153
3173
  lg: {
@@ -3164,9 +3184,6 @@ declare const defaultTheme: {
3164
3184
  };
3165
3185
  dismiss: {
3166
3186
  size: string;
3167
- w: number;
3168
- h: number;
3169
- minW: number;
3170
3187
  };
3171
3188
  };
3172
3189
  };
package/dist/theme/types.d.ts CHANGED
@@ -26,7 +26,9 @@ type VuiThemeExtensions = object;
26
26
  /** Defines variant, size and intent types of each component connected to the theme. */
27
27
  type ThemingProps<ThemeComponent extends string = string> = {
28
28
  intent?: string;
29
- variant?: ThemeComponent extends Component ? keyof VuiTheme['components'][ThemeComponent]['variants'] : string;
29
+ variant?: ThemeComponent extends Component ? VuiTheme['components'][ThemeComponent] extends {
30
+ variants: infer V;
31
+ } ? keyof V : string : string;
30
32
  size?: ThemeComponent extends keyof VuiTheme['components'] ? VuiTheme['components'][ThemeComponent] extends {
31
33
  sizes: infer S;
32
34
  } ? keyof S : string : string;
package/dist/theme/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","names":[],"sources":["../../src/theme/types.ts"],"mappings":";;;KAEY,SAAA,SAAkB,QAAQ;AAAA,KAC1B,MAAA,SAAe,QAAQ;AAAA,KACvB,KAAA,SAAc,QAAQ;AAAA,KACtB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,SAAA,SAAkB,QAAQ;AAAA,KAC1B,IAAA,SAAa,QAAQ;AAAA,KACrB,QAAA,SAAiB,QAAQ;AAAA,KACzB,UAAA,SAAmB,QAAQ;AAAA,KAC3B,kBAAA,SAA2B,QAAQ;AAAA,KACnC,eAAA,SAAwB,QAAQ;AAAA,KAChC,MAAA,SAAe,QAAQ;AAAA,KACvB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,MAAA,SAAe,QAAQ;AAAA,KACvB,MAAA,SAAe,QAAQ;AAAA,KACvB,IAAA,SAAa,QAAQ;AAAA,KACrB,KAAA,SAAc,QAAQ;AAAA,KACtB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,kBAAA,SAA2B,QAAQ;AAAA,KACnC,MAAA,SAAe,QAAQ;AAAA,KAEvB,gBAAA,UAA0B,YAAY;;KAGtC,kBAAA;AAnBZ;AAAA,KAsBY,YAAA;EACV,MAAA;EACA,OAAA,GAAU,cAAA,SAAuB,SAAA,SAAkB,QAAA,eAAuB,cAAA;EAC1E,IAAA,GAAO,cAAA,eAA6B,QAAA,iBAChC,QAAA,eAAuB,cAAA;IAA0B,KAAA;EAAA,UACzC,CAAA;AAAA;;KAOF,QAAA,GAAW,gBAAA,GAAmB,kBAAkB"}
1
+ {"version":3,"file":"types.d.ts","names":[],"sources":["../../src/theme/types.ts"],"mappings":";;;KAEY,SAAA,SAAkB,QAAQ;AAAA,KAC1B,MAAA,SAAe,QAAQ;AAAA,KACvB,KAAA,SAAc,QAAQ;AAAA,KACtB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,SAAA,SAAkB,QAAQ;AAAA,KAC1B,IAAA,SAAa,QAAQ;AAAA,KACrB,QAAA,SAAiB,QAAQ;AAAA,KACzB,UAAA,SAAmB,QAAQ;AAAA,KAC3B,kBAAA,SAA2B,QAAQ;AAAA,KACnC,eAAA,SAAwB,QAAQ;AAAA,KAChC,MAAA,SAAe,QAAQ;AAAA,KACvB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,MAAA,SAAe,QAAQ;AAAA,KACvB,MAAA,SAAe,QAAQ;AAAA,KACvB,IAAA,SAAa,QAAQ;AAAA,KACrB,KAAA,SAAc,QAAQ;AAAA,KACtB,SAAA,SAAkB,QAAQ;AAAA,KAC1B,kBAAA,SAA2B,QAAQ;AAAA,KACnC,MAAA,SAAe,QAAQ;AAAA,KAEvB,gBAAA,UAA0B,YAAY;;KAGtC,kBAAA;AAnBZ;AAAA,KAsBY,YAAA;EACV,MAAA;EACA,OAAA,GAAU,cAAA,SAAuB,SAAA,GAC7B,QAAA,eAAuB,cAAA;IAA0B,QAAA;EAAA,UACzC,CAAA;EAGZ,IAAA,GAAO,cAAA,eAA6B,QAAA,iBAChC,QAAA,eAAuB,cAAA;IAA0B,KAAA;EAAA,UACzC,CAAA;AAAA;AA7Bd;AAAA,KAoCY,QAAA,GAAW,gBAAA,GAAmB,kBAAkB"}
package/dist/toast/useToast.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useToast.d.ts","names":[],"sources":["../../src/toast/useToast.tsx"],"mappings":";;;;cAQa,eAAA;AAAA,cACA,iBAAA;AAAA,cACA,iBAAA;AAAA,cAWA,QAAA;wBAG8B,YAAA;;mBA+BhC,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;oBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;AAAA"}
1
+ {"version":3,"file":"useToast.d.ts","names":[],"sources":["../../src/toast/useToast.tsx"],"mappings":";;;;cAQa,eAAA;AAAA,cACA,iBAAA;AAAA,cACA,iBAAA;AAAA,cAWA,QAAA;wBAG8B,YAAA;;mBAqChC,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;oBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;sBAKrB,SAAA,EAAS,QAAA,GAAY,aAAA;AAAA"}
package/dist/toast/useToast.js CHANGED
@@ -35,6 +35,8 @@ const useToast = () => {
35
35
  text,
36
36
  title,
37
37
  align: "center",
38
+ role: "status",
39
+ ariaLive: "polite",
38
40
  w: 1
39
41
  })
40
42
  });
package/dist/toast/useToast.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useToast.js","names":[],"sources":["../../src/toast/useToast.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback } from 'react'\n\nimport { useVuiContext } from '../core/vuiProvider/context'\nimport { Notification } from '../notification'\nimport { uid } from '../utils'\nimport type { ToastDuration, ToastOptions, ToastSetup } from './toast.types'\n\nexport const defaultDuration = 'fast'\nexport const fastToastDuration = 4000\nexport const slowToastDuration = 8000\n\nconst setup: ToastSetup = {\n options: {\n duration: defaultDuration,\n },\n componentList: [],\n}\n\nconst getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fastToastDuration : slowToastDuration)\n\nexport const useToast = () => {\n const { addToast, removeToast } = useVuiContext()\n\n const showToast = useCallback((options?: ToastOptions): void => {\n const id = options?.id ? options.id : uid('toast')\n const { duration = setup.options.duration, status = 'info', action, icon, text, title } = options || {}\n\n const toast = {\n id,\n component: (\n <Notification\n action={action}\n animation=\"fadeDown\"\n elevation={3}\n icon={icon}\n mt={{ md: 1, sm: '4px', xs: '4px' }}\n onClose={() => removeToast(id)}\n status={status}\n text={text}\n title={title}\n align=\"center\"\n w={1}\n />\n ),\n }\n\n addToast(toast)\n\n if (duration && duration !== 'sticky') {\n window.setTimeout(() => removeToast(id), getDurationTime(duration))\n }\n }, [])\n\n const showInfo = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'info', duration }),\n [showToast],\n )\n\n const showSuccess = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'success', duration }),\n [showToast],\n )\n\n const showWarning = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'warning', duration }),\n [showToast],\n )\n\n const showError = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'error', duration }),\n [showToast],\n )\n\n const showLoading = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'loading', duration }),\n [showToast],\n )\n\n return {\n showToast,\n hideToast: removeToast,\n showInfo,\n showSuccess,\n showWarning,\n showError,\n showLoading,\n }\n}\n"],"mappings":";;;;;;;AAQA,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AAEjC,MAAM,QAAoB;CACxB,SAAS,EACP,UAAU,gBACZ;CACA,eAAe,CAAC;AAClB;AAEA,MAAM,mBAAmB,aAA6B,aAAa,SAAS,oBAAoB;AAEhG,MAAa,iBAAiB;CAC5B,MAAM,EAAE,UAAU,gBAAgB,cAAc;CAEhD,MAAM,YAAY,aAAa,YAAiC;EAC9D,MAAM,KAAK,SAAS,KAAK,QAAQ,KAAK,IAAI,OAAO;EACjD,MAAM,EAAE,WAAW,MAAM,QAAQ,UAAU,SAAS,QAAQ,QAAQ,MAAM,MAAM,UAAU,WAAW,CAAC;EAqBtG,SAAS;GAlBP;GACA,WACE,oBAAC,cAAD;IACU;IACR,WAAU;IACV,WAAW;IACL;IACN,IAAI;KAAE,IAAI;KAAG,IAAI;KAAO,IAAI;IAAM;IAClC,eAAe,YAAY,EAAE;IACrB;IACF;IACC;IACP,OAAM;IACN,GAAG;GACJ;EAIQ,CAAC;EAEd,IAAI,YAAY,aAAa,UAC3B,OAAO,iBAAiB,YAAY,EAAE,GAAG,gBAAgB,QAAQ,CAAC;CAEtE,GAAG,CAAC,CAAC;CA2BL,OAAO;EACL;EACA,WAAW;EACX,UA5Be,aACd,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAQ;EAAS,CAAC,GAC5G,CAAC,SAAS,CA0BH;EACP,aAxBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAsBA;EACV,aApBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAkBA;EACV,WAhBgB,aACf,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAS;EAAS,CAAC,GAC7G,CAAC,SAAS,CAcF;EACR,aAZkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAUA;CACZ;AACF"}
1
+ {"version":3,"file":"useToast.js","names":[],"sources":["../../src/toast/useToast.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback } from 'react'\n\nimport { useVuiContext } from '../core/vuiProvider/context'\nimport { Notification } from '../notification'\nimport { uid } from '../utils'\nimport type { ToastDuration, ToastOptions, ToastSetup } from './toast.types'\n\nexport const defaultDuration = 'fast'\nexport const fastToastDuration = 4000\nexport const slowToastDuration = 8000\n\nconst setup: ToastSetup = {\n options: {\n duration: defaultDuration,\n },\n componentList: [],\n}\n\nconst getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fastToastDuration : slowToastDuration)\n\nexport const useToast = () => {\n const { addToast, removeToast } = useVuiContext()\n\n const showToast = useCallback((options?: ToastOptions): void => {\n const id = options?.id ? options.id : uid('toast')\n const { duration = setup.options.duration, status = 'info', action, icon, text, title } = options || {}\n\n const toast = {\n id,\n component: (\n <Notification\n action={action}\n animation=\"fadeDown\"\n elevation={3}\n icon={icon}\n mt={{ md: 1, sm: '4px', xs: '4px' }}\n onClose={() => removeToast(id)}\n status={status}\n text={text}\n title={title}\n align=\"center\"\n // Q7: Toasts pin role=status / aria-live=polite regardless of intent to preserve\n // current SR behavior (the auto-mapping in Notification would otherwise upgrade\n // warning/danger intents to role=alert / assertive). Full toast migration is a\n // follow-up; this override keeps the existing user-perceived behavior intact.\n role=\"status\"\n ariaLive=\"polite\"\n w={1}\n />\n ),\n }\n\n addToast(toast)\n\n if (duration && duration !== 'sticky') {\n window.setTimeout(() => removeToast(id), getDurationTime(duration))\n }\n }, [])\n\n const showInfo = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'info', duration }),\n [showToast],\n )\n\n const showSuccess = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'success', duration }),\n [showToast],\n )\n\n const showWarning = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'warning', duration }),\n [showToast],\n )\n\n const showError = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'error', duration }),\n [showToast],\n )\n\n const showLoading = useCallback(\n (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'loading', duration }),\n [showToast],\n )\n\n return {\n showToast,\n hideToast: removeToast,\n showInfo,\n showSuccess,\n showWarning,\n showError,\n showLoading,\n }\n}\n"],"mappings":";;;;;;;AAQA,MAAa,kBAAkB;AAC/B,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AAEjC,MAAM,QAAoB;CACxB,SAAS,EACP,UAAU,gBACZ;CACA,eAAe,CAAC;AAClB;AAEA,MAAM,mBAAmB,aAA6B,aAAa,SAAS,oBAAoB;AAEhG,MAAa,iBAAiB;CAC5B,MAAM,EAAE,UAAU,gBAAgB,cAAc;CAEhD,MAAM,YAAY,aAAa,YAAiC;EAC9D,MAAM,KAAK,SAAS,KAAK,QAAQ,KAAK,IAAI,OAAO;EACjD,MAAM,EAAE,WAAW,MAAM,QAAQ,UAAU,SAAS,QAAQ,QAAQ,MAAM,MAAM,UAAU,WAAW,CAAC;EA2BtG,SAAS;GAxBP;GACA,WACE,oBAAC,cAAD;IACU;IACR,WAAU;IACV,WAAW;IACL;IACN,IAAI;KAAE,IAAI;KAAG,IAAI;KAAO,IAAI;IAAM;IAClC,eAAe,YAAY,EAAE;IACrB;IACF;IACC;IACP,OAAM;IAKN,MAAK;IACL,UAAS;IACT,GAAG;GACJ;EAIQ,CAAC;EAEd,IAAI,YAAY,aAAa,UAC3B,OAAO,iBAAiB,YAAY,EAAE,GAAG,gBAAgB,QAAQ,CAAC;CAEtE,GAAG,CAAC,CAAC;CA2BL,OAAO;EACL;EACA,WAAW;EACX,UA5Be,aACd,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAQ;EAAS,CAAC,GAC5G,CAAC,SAAS,CA0BH;EACP,aAxBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAsBA;EACV,aApBkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAkBA;EACV,WAhBgB,aACf,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAS;EAAS,CAAC,GAC7G,CAAC,SAAS,CAcF;EACR,aAZkB,aACjB,MAAiB,WAA0B,oBAAoB,UAAU;GAAE;GAAM,QAAQ;GAAW;EAAS,CAAC,GAC/G,CAAC,SAAS,CAUA;CACZ;AACF"}
package/dist/tutorial/tutorialCard.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import styled from "../core/styled.js";
2
2
  import Box from "../box/box.js";
3
3
  import Icon from "../icon/icon.js";
4
+ import { DismissButton } from "../dismissButton/DismissButton.js";
4
5
  import Button from "../button/button.js";
5
- import { DismissButton, IconButton } from "../button/buttons.js";
6
+ import { IconButton } from "../button/buttons.js";
6
7
  import Card from "../card/card.js";
7
8
  import { H4 } from "../heading/headings.js";
8
9
  import { tutorialColors } from "./consts.js";
package/dist/tutorial/tutorialCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tutorialCard.js","names":[],"sources":["../../src/tutorial/tutorialCard.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { styled } from '../core'\nimport { Box, Button, Card, DismissButton, H4, Icon, IconButton } from '../index'\nimport { tutorialColors } from './consts'\n\nconst TutorialHeader = styled(Box)`\n display: flex;\n flex-direction: row;\n flex: 0;\n flex-grow: 0;\n -webkit-flex-grow: 0;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n min-height: 48px;\n --vui-dismiss-fg: var(--vui-action-contrast-solid);\n`\nimport type { TutorialCardProps, TutorialDataStep, TutorialStepWrapper } from './tutorial.types'\nimport { TutorialStep } from './tutorialStep'\n\nexport function TutorialCard({\n actionLabel = 'Action',\n className,\n title,\n readMoreLink,\n steps: propsSteps = [],\n showSkipButton,\n onAction,\n onDismiss,\n onFinish,\n includeFinalPage,\n useContentTitle,\n}: TutorialCardProps) {\n const [steps, setSteps] = useState<TutorialStepWrapper[]>([])\n const [activeStep, setActiveStep] = useState<number>(0)\n\n useEffect(() => {\n if (title && propsSteps.length) {\n const s = propsSteps.map((step, key) => ({ active: false, step, key }))\n\n const finalStep: TutorialDataStep = {\n title: `Completed!`,\n content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`,\n }\n\n if (readMoreLink) finalStep.readMoreLink = readMoreLink\n\n includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s])\n }\n }, [title, propsSteps])\n\n const isStartStep = activeStep === 0\n const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1\n\n return (\n <Card\n bg={tutorialColors.bg}\n className={className}\n color={tutorialColors.color}\n column\n justifyContent=\"space-between\"\n minH={400}\n px={3}\n py={2}\n w={580}\n >\n <TutorialHeader className={className + '__header'}>\n <H4 color={tutorialColors.color}>{useContentTitle ? steps[activeStep]?.step?.title : title}</H4>\n {!isFinalStep && <DismissButton aria-label=\"close\" icon=\"uiTimes\" onClick={onDismiss} scale={2} />}\n </TutorialHeader>\n <Box flex={5} row>\n {steps?.map?.(s => (\n <TutorialStep\n active={s.key === activeStep}\n content={s.step.content}\n key={s.step.title}\n readMoreLink={s.step.readMoreLink}\n title={s.step.title}\n useContentTitle={useContentTitle}\n />\n ))}\n </Box>\n <Box alignItems=\"center\" justifyContent=\"space-between\" mt={0}>\n <Box alignItems=\"center\" justifyContent=\"space-between\" w=\"-webkit-fill-available\">\n <IconButton\n aria-label=\"previous\"\n color={tutorialColors.buttonColor}\n disabled={isStartStep}\n icon=\"uiArrowLeft\"\n onClick={() => setActiveStep(activeStep - 1)}\n scale={2}\n transition=\"none\"\n variant=\"tertiary\"\n />\n <Box className=\"vuiTutorialStepDots\">\n {steps?.map?.(s => (\n <Icon\n color={s.key === activeStep ? tutorialColors.color : 'darkBlue.30'}\n cursor=\"pointer\"\n hoverColor={tutorialColors.buttonColor}\n key={s.key}\n name=\"uiDotFull\"\n onClick={() => setActiveStep(s.key)}\n />\n ))}\n </Box>\n <IconButton\n aria-label=\"next\"\n color={tutorialColors.buttonColor}\n disabled={isFinalStep}\n icon=\"uiArrowRight\"\n onClick={() => setActiveStep(activeStep + 1)}\n scale={2}\n transition=\"none\"\n variant=\"tertiary\"\n />\n </Box>\n {(showSkipButton || isFinalStep || !!onAction) && (\n <Box alignItems=\"center\" justifyContent=\"space-between\">\n {showSkipButton && !isFinalStep && (\n <Button mx={1} onClick={onDismiss} variant=\"secondary\" intent=\"contrast\">\n Skip\n </Button>\n )}\n {isFinalStep && (\n <Button mx={1} onClick={onFinish} variant=\"primary\" intent=\"contrast\" minW=\"82px\">\n I got it\n </Button>\n )}\n {!!onAction && (\n <Button\n ml={1}\n mr={showSkipButton || isFinalStep ? 12 : 2}\n onClick={onAction}\n variant=\"primary\"\n intent=\"contrast\"\n >\n {actionLabel}\n </Button>\n )}\n </Box>\n )}\n </Box>\n </Card>\n )\n}\n\nTutorialCard.displayName = 'TutorialCard'\n"],"mappings":"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"}
1
+ {"version":3,"file":"tutorialCard.js","names":[],"sources":["../../src/tutorial/tutorialCard.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { styled } from '../core'\nimport { Box, Button, Card, DismissButton, H4, Icon, IconButton } from '../index'\nimport { tutorialColors } from './consts'\n\nconst TutorialHeader = styled(Box)`\n display: flex;\n flex-direction: row;\n flex: 0;\n flex-grow: 0;\n -webkit-flex-grow: 0;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n min-height: 48px;\n --vui-dismiss-fg: var(--vui-action-contrast-solid);\n`\nimport type { TutorialCardProps, TutorialDataStep, TutorialStepWrapper } from './tutorial.types'\nimport { TutorialStep } from './tutorialStep'\n\nexport function TutorialCard({\n actionLabel = 'Action',\n className,\n title,\n readMoreLink,\n steps: propsSteps = [],\n showSkipButton,\n onAction,\n onDismiss,\n onFinish,\n includeFinalPage,\n useContentTitle,\n}: TutorialCardProps) {\n const [steps, setSteps] = useState<TutorialStepWrapper[]>([])\n const [activeStep, setActiveStep] = useState<number>(0)\n\n useEffect(() => {\n if (title && propsSteps.length) {\n const s = propsSteps.map((step, key) => ({ active: false, step, key }))\n\n const finalStep: TutorialDataStep = {\n title: `Completed!`,\n content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`,\n }\n\n if (readMoreLink) finalStep.readMoreLink = readMoreLink\n\n includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s])\n }\n }, [title, propsSteps])\n\n const isStartStep = activeStep === 0\n const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1\n\n return (\n <Card\n bg={tutorialColors.bg}\n className={className}\n color={tutorialColors.color}\n column\n justifyContent=\"space-between\"\n minH={400}\n px={3}\n py={2}\n w={580}\n >\n <TutorialHeader className={className + '__header'}>\n <H4 color={tutorialColors.color}>{useContentTitle ? steps[activeStep]?.step?.title : title}</H4>\n {!isFinalStep && <DismissButton aria-label=\"close\" icon=\"uiTimes\" onClick={onDismiss} scale={2} />}\n </TutorialHeader>\n <Box flex={5} row>\n {steps?.map?.(s => (\n <TutorialStep\n active={s.key === activeStep}\n content={s.step.content}\n key={s.step.title}\n readMoreLink={s.step.readMoreLink}\n title={s.step.title}\n useContentTitle={useContentTitle}\n />\n ))}\n </Box>\n <Box alignItems=\"center\" justifyContent=\"space-between\" mt={0}>\n <Box alignItems=\"center\" justifyContent=\"space-between\" w=\"-webkit-fill-available\">\n <IconButton\n aria-label=\"previous\"\n color={tutorialColors.buttonColor}\n disabled={isStartStep}\n icon=\"uiArrowLeft\"\n onClick={() => setActiveStep(activeStep - 1)}\n scale={2}\n transition=\"none\"\n variant=\"tertiary\"\n />\n <Box className=\"vuiTutorialStepDots\">\n {steps?.map?.(s => (\n <Icon\n color={s.key === activeStep ? tutorialColors.color : 'darkBlue.30'}\n cursor=\"pointer\"\n hoverColor={tutorialColors.buttonColor}\n key={s.key}\n name=\"uiDotFull\"\n onClick={() => setActiveStep(s.key)}\n />\n ))}\n </Box>\n <IconButton\n aria-label=\"next\"\n color={tutorialColors.buttonColor}\n disabled={isFinalStep}\n icon=\"uiArrowRight\"\n onClick={() => setActiveStep(activeStep + 1)}\n scale={2}\n transition=\"none\"\n variant=\"tertiary\"\n />\n </Box>\n {(showSkipButton || isFinalStep || !!onAction) && (\n <Box alignItems=\"center\" justifyContent=\"space-between\">\n {showSkipButton && !isFinalStep && (\n <Button mx={1} onClick={onDismiss} variant=\"secondary\" intent=\"contrast\">\n Skip\n </Button>\n )}\n {isFinalStep && (\n <Button mx={1} onClick={onFinish} variant=\"primary\" intent=\"contrast\" minW=\"82px\">\n I got it\n </Button>\n )}\n {!!onAction && (\n <Button\n ml={1}\n mr={showSkipButton || isFinalStep ? 12 : 2}\n onClick={onAction}\n variant=\"primary\"\n intent=\"contrast\"\n >\n {actionLabel}\n </Button>\n )}\n </Box>\n )}\n </Box>\n </Card>\n )\n}\n\nTutorialCard.displayName = 'TutorialCard'\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veracity/vui",
3
- "version": "5.2.0-alpha.398622.2606110819",
3
+ "version": "5.2.0",
4
4
  "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Veracity",
@@ -24,6 +24,8 @@
24
24
  "dev": "tsdown --watch",
25
25
  "eslint:fix": "eslint . --fix",
26
26
  "eslint": "eslint .",
27
+ "figma:publish": "npx figma connect publish",
28
+ "figma:publish:dry-run": "npx figma connect publish --dry-run --verbose",
27
29
  "fix": "npm run eslint:fix && npm run format",
28
30
  "format": "oxfmt",
29
31
  "lint:attw": "attw --pack . --profile esm-only",
@@ -35,22 +37,22 @@
35
37
  },
36
38
  "dependencies": {
37
39
  "@floating-ui/react": "^0.27.19",
40
+ "@radix-ui/react-slider": "^1.3.6",
38
41
  "@types/styled-components": "5.1.36",
39
42
  "@xstyled/core": "2.5.0",
40
43
  "@xstyled/styled-components": "2.5.0",
41
44
  "@xstyled/system": "2.5.0",
42
45
  "@xstyled/util": "2.2.3",
43
46
  "react-focus-lock": "2.13.7",
44
- "react-slider": "2.0.6",
45
47
  "styled-components": "^5.3.11"
46
48
  },
47
49
  "devDependencies": {
48
50
  "@arethetypeswrong/cli": "^0.18.3",
51
+ "@figma/code-connect": "^1.4.8",
49
52
  "@tanstack/intent": "^0.0.41",
50
53
  "@types/node": "^24",
51
54
  "@types/react": "^19.2.16",
52
55
  "@types/react-dom": "^19.2.3",
53
- "@types/react-slider": "^1.3.6",
54
56
  "@veracity/eslint-config": "*",
55
57
  "@veracity/tsconfig": "*",
56
58
  "eslint": "^10.4.1",
package/skills/build-with-vui/SKILL.md CHANGED
@@ -140,7 +140,7 @@ Wrong:
140
140
  Correct:
141
141
 
142
142
  ```tsx
143
- <Badge variant="subtle" intent="success">Active</Badge>
143
+ <Badge variant="subtle" color="green">Active</Badge>
144
144
  ```
145
145
 
146
146
  Check component docs for exact variant values before coding.
package/skills/upgrade-vui-v4-to-v5/SKILL.md CHANGED
@@ -176,25 +176,26 @@ For `subtleBlue`, `subtleRed`, `subtleGreen`, `subtleYellow`, `menuLight`, and `
176
176
 
177
177
  `Tag` and `Badge` adopt the two-prop `variant` + `intent` API. Legacy combined-string variants and `iconLeft` / `iconRight` still work but emit dev-mode warnings and will be removed in VUI 6.0.
178
178
 
179
- Split combined variant keys into `variant` + `intent`:
179
+ Split combined variant keys into `variant` + `color`:
180
180
 
181
181
  ```tsx
182
182
  <Tag variant="subtleBrand" iconLeft="uiCheck">Done</Tag>
183
- <Tag variant="subtle" intent="brand" startIcon="uiCheck">Done</Tag>
183
+ <Tag variant="subtle" color="blue" startIcon="uiCheck">Done</Tag>
184
184
 
185
185
  <Tag variant="solidDanger" iconRight="uiXmark">Error</Tag>
186
- <Tag variant="solid" intent="danger" endIcon="uiXmark">Error</Tag>
186
+ <Tag variant="solid" color="red" endIcon="uiXmark">Error</Tag>
187
187
 
188
188
  <Badge variant="subtleSuccess">New</Badge>
189
- <Badge variant="subtle" intent="success">New</Badge>
189
+ <Badge variant="subtle" color="green">New</Badge>
190
190
 
191
191
  <Badge variant="solidBlue">Beta</Badge>
192
- <Badge variant="solid" intent="blue">Beta</Badge>
192
+ <Badge variant="solid" color="blue">Beta</Badge>
193
193
  ```
194
194
 
195
- Tag supports `variant`: `subtle | solid | minimal` and `intent`: `brand | success | danger | lavender | eucalyptus | terracotta | grey`.
195
+ **Tag** icon props: `startIcon` (before text), `endIcon` (after text), `icon` (icon-only — replaces all content). `iconLeft`/`iconRight` are deprecated aliases for `startIcon`/`endIcon`.
196
+ **Badge** icon prop: `icon` renders a leading icon alongside the label (`iconLeft` is a deprecated alias).
196
197
 
197
- Badge supports `variant`: `subtle | solid` and `intent`: `grey | earth | blue | blue2 | danger | yellow | success | brand`. Shared intents (`grey`, `success`, `danger`, `brand`) delegate to `Tag`; Badge-specific intents (`earth`, `blue`, `blue2`, `yellow`) keep dedicated palette tokens.
198
+ Tag supports `variant`: `subtle | solid` and `color`: `blue | green | red | yellow | lavender | eucalyptus | terracotta | grey`. Badge supports 5 colors: `blue | green | red | yellow | grey`.
198
199
 
199
200
  For interactive filter chips or pressed-state pills, use `Tag` with `isInteractive`:
200
201