@tcn/ui 0.12.6 → 0.13.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 (111) hide show
  1. package/dist/aside.css +1 -0
  2. package/dist/body.css +1 -1
  3. package/dist/inputs/phone_number_input/phone_number_input.d.ts +2 -1
  4. package/dist/inputs/phone_number_input/phone_number_input.d.ts.map +1 -1
  5. package/dist/inputs/phone_number_input/phone_number_input.js +28 -26
  6. package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
  7. package/dist/inputs/phone_number_input/sip_input.d.ts +2 -1
  8. package/dist/inputs/phone_number_input/sip_input.d.ts.map +1 -1
  9. package/dist/inputs/phone_number_input/sip_input.js +45 -43
  10. package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
  11. package/dist/layouts/body/body.d.ts +17 -0
  12. package/dist/layouts/body/body.d.ts.map +1 -1
  13. package/dist/layouts/body/body.js +11 -12
  14. package/dist/layouts/body/body.js.map +1 -1
  15. package/dist/layouts/index.d.ts +1 -2
  16. package/dist/layouts/index.d.ts.map +1 -1
  17. package/dist/layouts/index.js +38 -40
  18. package/dist/layouts/index.js.map +1 -1
  19. package/dist/layouts/scaffold/scaffold.js +1 -1
  20. package/dist/layouts/scaffold/scaffold.js.map +1 -1
  21. package/dist/layouts/section/section.d.ts.map +1 -1
  22. package/dist/layouts/section/section.js +14 -13
  23. package/dist/layouts/section/section.js.map +1 -1
  24. package/dist/page.css +1 -1
  25. package/dist/surfaces/aside/aside.d.ts +5 -0
  26. package/dist/surfaces/aside/aside.d.ts.map +1 -0
  27. package/dist/surfaces/aside/aside.js +19 -0
  28. package/dist/surfaces/aside/aside.js.map +1 -0
  29. package/dist/surfaces/drawers/drawer.d.ts.map +1 -1
  30. package/dist/surfaces/drawers/drawer.js +19 -11
  31. package/dist/surfaces/drawers/drawer.js.map +1 -1
  32. package/dist/surfaces/index.d.ts +2 -2
  33. package/dist/surfaces/index.d.ts.map +1 -1
  34. package/dist/surfaces/index.js +14 -14
  35. package/dist/surfaces/modal/modal.d.ts.map +1 -1
  36. package/dist/surfaces/modal/modal.js +22 -14
  37. package/dist/surfaces/modal/modal.js.map +1 -1
  38. package/dist/surfaces/page/page.d.ts +5 -0
  39. package/dist/surfaces/page/page.d.ts.map +1 -0
  40. package/dist/surfaces/page/page.js +19 -0
  41. package/dist/surfaces/page/page.js.map +1 -0
  42. package/dist/surfaces/pop_confirm/pop_confirm.d.ts.map +1 -1
  43. package/dist/surfaces/pop_confirm/pop_confirm.js +23 -16
  44. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  45. package/dist/surfaces/window/window.d.ts.map +1 -1
  46. package/dist/surfaces/window/window.js +27 -19
  47. package/dist/surfaces/window/window.js.map +1 -1
  48. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  49. package/dist/themes/themes/ergo/ergo_theme.js +71 -45
  50. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  51. package/package.json +2 -2
  52. package/src/inputs/phone_number_input/phone_number_input.tsx +3 -0
  53. package/src/inputs/phone_number_input/sip_input.tsx +3 -0
  54. package/src/layouts/__stories__/composed_stories.module.css +1 -7
  55. package/src/layouts/__stories__/rail.stories.tsx +20 -13
  56. package/src/layouts/__stories__/scaffold.stories.tsx +34 -22
  57. package/src/layouts/__stories__/utils.tsx +10 -7
  58. package/src/layouts/body/body.module.css +0 -8
  59. package/src/layouts/body/body.tsx +19 -3
  60. package/src/layouts/index.ts +1 -2
  61. package/src/layouts/scaffold/scaffold.tsx +1 -1
  62. package/src/layouts/section/section.tsx +2 -1
  63. package/src/overlay/slide/slide.stories.tsx +9 -6
  64. package/src/surfaces/aside/aside.module.css +5 -0
  65. package/src/surfaces/aside/aside.stories.tsx +75 -0
  66. package/src/surfaces/aside/aside.tsx +22 -0
  67. package/src/surfaces/card/card.stories.tsx +8 -5
  68. package/src/surfaces/card/card_stories.module.css +4 -2
  69. package/src/surfaces/drawers/drawer.stories.tsx +21 -7
  70. package/src/surfaces/drawers/drawer.tsx +5 -1
  71. package/src/surfaces/index.ts +2 -2
  72. package/src/surfaces/modal/__stories__/modal.stories.tsx +21 -4
  73. package/src/surfaces/modal/modal.tsx +5 -1
  74. package/src/surfaces/page/page.module.css +0 -6
  75. package/src/surfaces/page/page.stories.tsx +71 -0
  76. package/src/surfaces/page/page.tsx +22 -0
  77. package/src/surfaces/panel/__stories__/panel.stories.tsx +66 -60
  78. package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +43 -31
  79. package/src/surfaces/pop_confirm/pop_confirm.tsx +5 -1
  80. package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx +31 -0
  81. package/src/surfaces/window/window.stories.tsx +15 -4
  82. package/src/surfaces/window/window.tsx +5 -1
  83. package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_card.tsx +16 -15
  84. package/src/themes/themes/ergo/__stories__/material.stories.tsx +6 -4
  85. package/src/themes/themes/ergo/ergo_theme.css +71 -45
  86. package/dist/body.module-BbFZ7KNP.js +0 -5
  87. package/dist/body.module-BbFZ7KNP.js.map +0 -1
  88. package/dist/layouts/body/h_body.d.ts +0 -6
  89. package/dist/layouts/body/h_body.d.ts.map +0 -1
  90. package/dist/layouts/body/h_body.js +0 -27
  91. package/dist/layouts/body/h_body.js.map +0 -1
  92. package/dist/layouts/body/v_body.d.ts +0 -6
  93. package/dist/layouts/body/v_body.d.ts.map +0 -1
  94. package/dist/layouts/body/v_body.js +0 -27
  95. package/dist/layouts/body/v_body.js.map +0 -1
  96. package/dist/page.module-DXhph-u6.js +0 -5
  97. package/dist/page.module-DXhph-u6.js.map +0 -1
  98. package/dist/surfaces/page/h_page.d.ts +0 -6
  99. package/dist/surfaces/page/h_page.d.ts.map +0 -1
  100. package/dist/surfaces/page/h_page.js +0 -22
  101. package/dist/surfaces/page/h_page.js.map +0 -1
  102. package/dist/surfaces/page/v_page.d.ts +0 -6
  103. package/dist/surfaces/page/v_page.d.ts.map +0 -1
  104. package/dist/surfaces/page/v_page.js +0 -21
  105. package/dist/surfaces/page/v_page.js.map +0 -1
  106. package/src/layouts/body/h_body.module.css +0 -7
  107. package/src/layouts/body/h_body.tsx +0 -28
  108. package/src/layouts/body/v_body.module.css +0 -7
  109. package/src/layouts/body/v_body.tsx +0 -28
  110. package/src/surfaces/page/h_page.tsx +0 -23
  111. package/src/surfaces/page/v_page.tsx +0 -22
package/src/surfaces/page/page.stories.tsx ADDED
@@ -0,0 +1,71 @@
1
+ import { Header } from '../../layouts/header/header.js';
2
+ import { Body, Footer, Rail, Scaffold } from '../../layouts/index.js';
3
+ import { BodyText } from '../../typography/body_text/body_text.js';
4
+ import { Section } from '../../layouts/section/section.js';
5
+ import { Title } from '../../typography/title/title.js';
6
+ import { Page } from './page.js';
7
+ import { ZStack } from '../../stacks/z_stack.js';
8
+ import { Panel } from '../panel/panel.js';
9
+
10
+ export default {
11
+ title: 'Surfaces/Page',
12
+ component: Page,
13
+ tags: ['autodocs'],
14
+ };
15
+
16
+ export const Baseline = () => {
17
+ return (
18
+ <ZStack height="100%" width="100%" minHeight="600px" minWidth="600px">
19
+ <Page>
20
+ <Header>
21
+ <Title>Page Header</Title>
22
+ </Header>
23
+ <Body>
24
+ <Scaffold>
25
+ <Section>
26
+ <BodyText>Page Content</BodyText>
27
+ </Section>
28
+ </Scaffold>
29
+ </Body>
30
+
31
+ <Footer>
32
+ <Title>Page Footer</Title>
33
+ </Footer>
34
+ </Page>
35
+ </ZStack>
36
+ );
37
+ };
38
+
39
+ export const WithPanelBody = () => {
40
+ return (
41
+ <ZStack height="100%" width="100%" minHeight="600px" minWidth="600px">
42
+ <Page>
43
+ <Body>
44
+ <Rail>
45
+ <Panel>
46
+ <Header>
47
+ <Title>Primary</Title>
48
+ </Header>
49
+ <Body>
50
+ <Section>
51
+ <BodyText>Page Content</BodyText>
52
+ </Section>
53
+ </Body>
54
+ </Panel>
55
+
56
+ <Panel width="300px">
57
+ <Header>
58
+ <Title>Secondary</Title>
59
+ </Header>
60
+ <Body>
61
+ <Section>
62
+ <BodyText>Supporting Content</BodyText>
63
+ </Section>
64
+ </Body>
65
+ </Panel>
66
+ </Rail>
67
+ </Body>
68
+ </Page>
69
+ </ZStack>
70
+ );
71
+ };
package/src/surfaces/page/page.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
3
+ import clsx from 'clsx';
4
+
5
+ import styles from './page.module.css';
6
+
7
+ export type PageProps = ScaffoldProps;
8
+
9
+ export const Page = React.forwardRef<HTMLElement, PageProps>(function Page(
10
+ { children, className, ...props }: PageProps,
11
+ ref
12
+ ) {
13
+ return (
14
+ <Scaffold
15
+ ref={ref}
16
+ className={clsx(styles['page'], 'tcn-surface', 'tcn-page', className)}
17
+ {...props}
18
+ >
19
+ {children}
20
+ </Scaffold>
21
+ );
22
+ });
package/src/surfaces/panel/__stories__/panel.stories.tsx CHANGED
@@ -2,7 +2,7 @@ import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
2
2
  import { Button } from '../../../actions/button/button/button.js';
3
3
  import { Footer } from '../../../layouts/footer/footer.js';
4
4
  import { Header } from '../../../layouts/header/header.js';
5
- import { Heading, Section, VBody } from '../../../layouts/index.js';
5
+ import { Body, Heading, Scaffold, Section } from '../../../layouts/index.js';
6
6
  import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
7
7
  import { Box, HStack, Spacer } from '../../../stacks/index.js';
8
8
  import { Title } from '../../../typography/title/title.js';
@@ -84,25 +84,27 @@ export const Default = () => {
84
84
  <UtilGroupExample />
85
85
  </UtilityBar>
86
86
 
87
- <VBody>
88
- <SectionMockData depth={1} count={1}>
89
- <SectionMockData depth={2} count={1}>
90
- <SectionMockData depth={3} count={1}>
91
- <SectionMockData depth={4} count={1} />
87
+ <Body>
88
+ <Scaffold>
89
+ <SectionMockData depth={1} count={1}>
90
+ <SectionMockData depth={2} count={1}>
91
+ <SectionMockData depth={3} count={1}>
92
+ <SectionMockData depth={4} count={1} />
93
+ </SectionMockData>
92
94
  </SectionMockData>
93
95
  </SectionMockData>
94
- </SectionMockData>
95
- <SectionMockData depth={1} count={2}>
96
- <SectionMockData depth={2} count={1}>
97
- <SectionMockData depth={3} count={1}>
98
- <SectionMockData depth={4} count={1} />
96
+ <SectionMockData depth={1} count={2}>
97
+ <SectionMockData depth={2} count={1}>
98
+ <SectionMockData depth={3} count={1}>
99
+ <SectionMockData depth={4} count={1} />
100
+ </SectionMockData>
99
101
  </SectionMockData>
100
102
  </SectionMockData>
101
- </SectionMockData>
102
- <Ipsum />
103
- <Ipsum />
104
- <Ipsum />
105
- </VBody>
103
+ <Ipsum />
104
+ <Ipsum />
105
+ <Ipsum />
106
+ </Scaffold>
107
+ </Body>
106
108
  <Footer>
107
109
  <Title>Footer</Title>
108
110
  <Spacer />
@@ -132,39 +134,41 @@ export const WithTable = () => {
132
134
  <PlusIcon />
133
135
  </Button>
134
136
  </Header>
135
- <VBody>
136
- <TTable>
137
- <THead>
138
- <TR>
139
- <TH>Name</TH>
140
- <TH>Age</TH>
141
- <TH>Email</TH>
142
- </TR>
143
- </THead>
144
- <TBody>
145
- <TR>
146
- <TD>Jane Smith</TD>
147
- <TD>32</TD>
148
- <TD>jane.smith@example.com</TD>
149
- </TR>
150
- <TR>
151
- <TD>Samuel Barnett</TD>
152
- <TD>28</TD>
153
- <TD>samuel.barnett@example.com</TD>
154
- </TR>
155
- <TR isSelected>
156
- <TD>John Doe</TD>
157
- <TD>25</TD>
158
- <TD>john.doe@example.com</TD>
159
- </TR>
160
- <TR>
161
- <TD>Linda Wang</TD>
162
- <TD>41</TD>
163
- <TD>linda.wang@example.com</TD>
164
- </TR>
165
- </TBody>
166
- </TTable>
167
- </VBody>
137
+ <Body>
138
+ <Scaffold>
139
+ <TTable>
140
+ <THead>
141
+ <TR>
142
+ <TH>Name</TH>
143
+ <TH>Age</TH>
144
+ <TH>Email</TH>
145
+ </TR>
146
+ </THead>
147
+ <TBody>
148
+ <TR>
149
+ <TD>Jane Smith</TD>
150
+ <TD>32</TD>
151
+ <TD>jane.smith@example.com</TD>
152
+ </TR>
153
+ <TR>
154
+ <TD>Samuel Barnett</TD>
155
+ <TD>28</TD>
156
+ <TD>samuel.barnett@example.com</TD>
157
+ </TR>
158
+ <TR isSelected>
159
+ <TD>John Doe</TD>
160
+ <TD>25</TD>
161
+ <TD>john.doe@example.com</TD>
162
+ </TR>
163
+ <TR>
164
+ <TD>Linda Wang</TD>
165
+ <TD>41</TD>
166
+ <TD>linda.wang@example.com</TD>
167
+ </TR>
168
+ </TBody>
169
+ </TTable>
170
+ </Scaffold>
171
+ </Body>
168
172
  <Footer>
169
173
  <HStack gap="8px" hAlign="center">
170
174
  <Button utility hierarchy="tertiary">
@@ -199,17 +203,19 @@ export const WithTable = () => {
199
203
  <CrossIcon />
200
204
  </Button>
201
205
  </Header>
202
- <VBody>
203
- <Section>
204
- <Heading>Personal Information</Heading>
205
- <BodyText>
206
- John Doe is a software engineer at FooBaz. He is a very smart guy and he
207
- loves to code.
208
- </BodyText>
209
- <BodyText>Age: 25</BodyText>
210
- <BodyText>Email: john.doe@example.com</BodyText>
211
- </Section>
212
- </VBody>
206
+ <Body>
207
+ <Scaffold>
208
+ <Section>
209
+ <Heading>Personal Information</Heading>
210
+ <BodyText>
211
+ John Doe is a software engineer at FooBaz. He is a very smart guy and he
212
+ loves to code.
213
+ </BodyText>
214
+ <BodyText>Age: 25</BodyText>
215
+ <BodyText>Email: john.doe@example.com</BodyText>
216
+ </Section>
217
+ </Scaffold>
218
+ </Body>
213
219
  </Panel>
214
220
  </HStack>
215
221
  </Box>
package/src/surfaces/pop_confirm/pop_confirm.stories.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useRef, useState } from 'react';
2
2
  import { Button } from '../../actions/index.js';
3
- import { Footer, Header, Section, VBody } from '../../layouts/index.js';
3
+ import { Body, Footer, Header, Scaffold, Section } from '../../layouts/index.js';
4
4
  import { HStack } from '../../stacks/h_stack.js';
5
5
  import { PopConfirm, type PopConfirmProps } from './pop_confirm.js';
6
6
  import { BodyText, Title } from '../../typography/index.js';
@@ -28,7 +28,7 @@ export default {
28
28
  argTypes: tetheredArgTypes,
29
29
  };
30
30
 
31
- export const DefaultPopConfirm = (
31
+ export const Baseline = (
32
32
  args: Omit<PopConfirmProps, 'anchorElement' | 'open' | 'onDismissal'>
33
33
  ) => {
34
34
  const anchorRef = useRef<HTMLButtonElement>(null);
@@ -54,6 +54,7 @@ export const DefaultPopConfirm = (
54
54
  </Button>
55
55
  <PopConfirm
56
56
  height={'200px'}
57
+ minWidth={'300px'}
57
58
  open={open}
58
59
  onDismissal={cancel}
59
60
  anchorElement={anchorRef}
@@ -64,11 +65,13 @@ export const DefaultPopConfirm = (
64
65
  <Header>
65
66
  <Title>Confirmation Title</Title>
66
67
  </Header>
67
- <VBody>
68
- <Section>
69
- <BodyText>Are you sure you want to confirm this action?</BodyText>
70
- </Section>
71
- </VBody>
68
+ <Body>
69
+ <Scaffold>
70
+ <Section>
71
+ <BodyText>Are you sure you want to confirm this action?</BodyText>
72
+ </Section>
73
+ </Scaffold>
74
+ </Body>
72
75
  <Footer>
73
76
  <Spacer />
74
77
  <Button hierarchy="secondary" onClick={cancel}>
@@ -84,7 +87,7 @@ export const DefaultPopConfirm = (
84
87
  );
85
88
  };
86
89
 
87
- DefaultPopConfirm.parameters = {
90
+ Baseline.parameters = {
88
91
  docs: {
89
92
  description: {
90
93
  story:
@@ -105,6 +108,7 @@ export const ManualCloseOnly = () => {
105
108
  </Button>
106
109
  <PopConfirm
107
110
  height={'200px'}
111
+ maxWidth={'300px'}
108
112
  open={open}
109
113
  onDismissal={() => setOpen(false)}
110
114
  anchorElement={anchorRef}
@@ -113,14 +117,16 @@ export const ManualCloseOnly = () => {
113
117
  <Header>
114
118
  <Title>Must confirm or cancel</Title>
115
119
  </Header>
116
- <VBody>
117
- <Section>
118
- <BodyText>
119
- No automatic dismissal. The popover stays open until you click Cancel or
120
- Confirm. Clicking or scrolling outside does nothing.
121
- </BodyText>
122
- </Section>
123
- </VBody>
120
+ <Body>
121
+ <Scaffold>
122
+ <Section>
123
+ <BodyText>
124
+ No automatic dismissal. The popover stays open until you click Cancel or
125
+ Confirm. Clicking or scrolling outside does nothing.
126
+ </BodyText>
127
+ </Section>
128
+ </Scaffold>
129
+ </Body>
124
130
  <Footer>
125
131
  <Spacer />
126
132
  <Button hierarchy="secondary" onClick={() => setOpen(false)}>
@@ -157,6 +163,7 @@ export const MouseLeaveOnly = () => {
157
163
  </Button>
158
164
  <PopConfirm
159
165
  height={'200px'}
166
+ maxWidth={'300px'}
160
167
  open={open}
161
168
  onDismissal={() => setOpen(false)}
162
169
  anchorElement={anchorRef}
@@ -165,13 +172,15 @@ export const MouseLeaveOnly = () => {
165
172
  <Header>
166
173
  <Title>Confirm action</Title>
167
174
  </Header>
168
- <VBody>
169
- <Section>
170
- <BodyText>
171
- Closes when the pointer leaves the popover and trigger area.
172
- </BodyText>
173
- </Section>
174
- </VBody>
175
+ <Body>
176
+ <Scaffold>
177
+ <Section>
178
+ <BodyText>
179
+ Closes when the pointer leaves the popover and trigger area.
180
+ </BodyText>
181
+ </Section>
182
+ </Scaffold>
183
+ </Body>
175
184
  <Footer>
176
185
  <Spacer />
177
186
  <Button hierarchy="secondary" onClick={() => setOpen(false)}>
@@ -223,6 +232,7 @@ export const ClickAwayAndScrollAway = () => {
223
232
  </Button>
224
233
  <PopConfirm
225
234
  height={'200px'}
235
+ maxWidth={'300px'}
226
236
  open={open}
227
237
  onDismissal={() => setOpen(false)}
228
238
  anchorElement={anchorRef}
@@ -231,14 +241,16 @@ export const ClickAwayAndScrollAway = () => {
231
241
  <Header>
232
242
  <Title>Scroll or click away</Title>
233
243
  </Header>
234
- <VBody>
235
- <Section>
236
- <BodyText>
237
- Closes when you click outside or when you scroll outside the popover.
238
- Scroll the container above or below to see it close.
239
- </BodyText>
240
- </Section>
241
- </VBody>
244
+ <Body>
245
+ <Scaffold>
246
+ <Section>
247
+ <BodyText>
248
+ Closes when you click outside or when you scroll outside the popover.
249
+ Scroll the container above or below to see it close.
250
+ </BodyText>
251
+ </Section>
252
+ </Scaffold>
253
+ </Body>
242
254
  <Footer>
243
255
  <Spacer />
244
256
  <Button hierarchy="secondary" onClick={() => setOpen(false)}>
package/src/surfaces/pop_confirm/pop_confirm.tsx CHANGED
@@ -28,7 +28,11 @@ export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
28
28
  dismissals={dismissals}
29
29
  {...props}
30
30
  >
31
- <Scaffold width={'100%'} height={'100%'}>
31
+ <Scaffold
32
+ width={'100%'}
33
+ height={'100%'}
34
+ className={'tcn-overlay-content tcn-pop-confirm-scaffold'}
35
+ >
32
36
  {children}
33
37
  </Scaffold>
34
38
  </ElementPopper>
package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx CHANGED
@@ -8,6 +8,10 @@ import {
8
8
  import { BodyText, Title } from '../../../typography/index.js';
9
9
  import { VStack } from '../../../stacks/v_stack.js';
10
10
  import styles from './tooltip_stories.module.css';
11
+ import { Modal } from '../../modal/modal.js';
12
+ import { Body, Footer, Header, Scaffold, Section } from '../../../layouts/index.js';
13
+ import { Button } from '../../../actions/button/button/button.js';
14
+ import { Spacer } from '../../../stacks/index.js';
11
15
 
12
16
  export default {
13
17
  title: 'Surfaces/Tooltip',
@@ -134,3 +138,30 @@ export const CustomTooltipLabel = ({
134
138
  </ZStack>
135
139
  );
136
140
  };
141
+
142
+ export const TooltipNestedInPortal = ({
143
+ label = 'Tooltip content',
144
+ precision = 'high',
145
+ ...args
146
+ }: TooltipStoryProps) => {
147
+ return (
148
+ <Modal isOpen width="400px" height="300px">
149
+ <Header>
150
+ <Title>Tooltip Nested in Portal</Title>
151
+ </Header>
152
+ <Body>
153
+ <Scaffold>
154
+ <Section>
155
+ <TooltipComponent label={label} precision={precision} {...args}>
156
+ <BodyText>Hover to learn more...</BodyText>
157
+ </TooltipComponent>
158
+ </Section>
159
+ </Scaffold>
160
+ </Body>
161
+ <Footer>
162
+ <Spacer />
163
+ <Button hierarchy="primary">OK</Button>
164
+ </Footer>
165
+ </Modal>
166
+ );
167
+ };
package/src/surfaces/window/window.stories.tsx CHANGED
@@ -1,6 +1,13 @@
1
1
  import { useState } from 'react';
2
2
  import { Window, type WindowProps } from './window.js';
3
- import { Footer, Header, UtilityBar, VBody } from '../../layouts/index.js';
3
+ import {
4
+ Body,
5
+ Footer,
6
+ Header,
7
+ Scaffold,
8
+ Section,
9
+ UtilityBar,
10
+ } from '../../layouts/index.js';
4
11
  import { BodyText, Title } from '../../typography/index.js';
5
12
  import { Spacer } from '../../stacks/spacer.js';
6
13
  import { Button } from '../../actions/index.js';
@@ -118,9 +125,13 @@ export const Baseline = ({
118
125
  <BugIcon />
119
126
  </Button>
120
127
  </UtilityBar>
121
- <VBody>
122
- <BodyText>This is a window</BodyText>
123
- </VBody>
128
+ <Body>
129
+ <Scaffold>
130
+ <Section>
131
+ <BodyText>This is a window</BodyText>
132
+ </Section>
133
+ </Scaffold>
134
+ </Body>
124
135
  <Footer>
125
136
  <Spacer />
126
137
  <Button hierarchy="secondary">Cancel</Button>
package/src/surfaces/window/window.tsx CHANGED
@@ -30,7 +30,11 @@ export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window
30
30
  className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
31
31
  {...props}
32
32
  >
33
- <Scaffold className={'tcn-window-scaffold'} width="100%" height="100%">
33
+ <Scaffold
34
+ className={'tcn-overlay-content tcn-window-scaffold'}
35
+ width="100%"
36
+ height="100%"
37
+ >
34
38
  {children}
35
39
  </Scaffold>
36
40
  </Frame>
package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_card.tsx CHANGED
@@ -1,16 +1,15 @@
1
- import { Header, VBody } from '../../../../../../layouts/index.js';
1
+ import { Header, Body, Scaffold } from '../../../../../../layouts/index.js';
2
2
  import { Card } from '../../../../../../surfaces/index.js';
3
- import { SlimButton } from '../../../../../../actions/button/slim_button/slim_button.js';
4
3
  import { Spacer } from '../../../../../../stacks/spacer.js';
5
4
  import { Box } from '../../../../../../stacks/index.js';
6
5
  import { InfoIcon } from '@tcn/icons/info_icon.js';
7
6
  import { AlertCircleIcon } from '@tcn/icons/alert_circle_icon.js';
8
7
  import { CheckCircleIcon } from '@tcn/icons/check_circle_icon.js';
9
- import { theme } from '../../../../../theme_variables.js';
8
+ import type { SB_ToneListItem } from './types.js';
9
+ import { Button } from '../../../../../../actions/index.js';
10
10
 
11
11
  // Styles
12
12
  import styles from './sb_card.module.css';
13
- import type { SB_ToneListItem } from './types.js';
14
13
 
15
14
  export const SB_ToneCard: React.FC<{
16
15
  item: SB_ToneListItem | null;
@@ -20,21 +19,23 @@ export const SB_ToneCard: React.FC<{
20
19
  <Header>
21
20
  {item?.name ?? 'Neutral'}
22
21
  <Spacer />
23
- <SlimButton size="sm" hierarchy="tertiary">
22
+ <Button utility size="sm" hierarchy="tertiary">
24
23
  <InfoIcon />
25
- </SlimButton>
26
- <SlimButton size="sm" hierarchy="secondary">
24
+ </Button>
25
+ <Button utility size="sm" hierarchy="secondary">
27
26
  <AlertCircleIcon />
28
- </SlimButton>
29
- <SlimButton size="sm" hierarchy="primary">
27
+ </Button>
28
+ <Button utility size="sm" hierarchy="primary">
30
29
  <CheckCircleIcon />
31
- </SlimButton>
30
+ </Button>
32
31
  </Header>
33
- <VBody gap={theme.gap.md}>
34
- <Box className={styles.box} />
35
- <Box className={styles.box} />
36
- <Box className={styles.box} />
37
- </VBody>
32
+ <Body>
33
+ <Scaffold>
34
+ <Box className={styles.box} />
35
+ <Box className={styles.box} />
36
+ <Box className={styles.box} />
37
+ </Scaffold>
38
+ </Body>
38
39
  </Card>
39
40
  );
40
41
  };
package/src/themes/themes/ergo/__stories__/material.stories.tsx CHANGED
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
2
2
  import { VStack } from '../../../../stacks/v_stack.js';
3
3
  import { clsx } from 'clsx';
4
4
  import { PlusIcon } from '@tcn/icons/plus_icon.js';
5
- import { Divider, Footer, Header, VBody } from '../../../../layouts/index.js';
5
+ import { Body, Divider, Footer, Header, Scaffold } from '../../../../layouts/index.js';
6
6
  import { Panel } from '../../../../surfaces/index.js';
7
7
  import { Button } from '../../../../actions/button/button/button.js';
8
8
  import { Spacer } from '../../../../stacks/spacer.js';
@@ -119,9 +119,11 @@ export const DynamicSurface = (args: {
119
119
  <PlusIcon />
120
120
  </Button>
121
121
  </Header>
122
- <VBody>
123
- <SB_TonePicker />
124
- </VBody>
122
+ <Body>
123
+ <Scaffold>
124
+ <SB_TonePicker />
125
+ </Scaffold>
126
+ </Body>
125
127
  <Footer>
126
128
  Disabled Buttons
127
129
  <Spacer />