@tcn/ui 0.12.5 → 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 (210) hide show
  1. package/dist/aside.css +1 -0
  2. package/dist/body.css +1 -1
  3. package/dist/inputs/color_input/color_input.js +18 -18
  4. package/dist/inputs/color_input/color_input.js.map +1 -1
  5. package/dist/inputs/control/control.d.ts +10 -0
  6. package/dist/inputs/control/control.d.ts.map +1 -0
  7. package/dist/inputs/control/control.js +17 -0
  8. package/dist/inputs/control/control.js.map +1 -0
  9. package/dist/inputs/control_set/control_set.d.ts +5 -0
  10. package/dist/inputs/control_set/control_set.d.ts.map +1 -0
  11. package/dist/inputs/control_set/control_set.js +20 -0
  12. package/dist/inputs/{input_group/input_group.js.map → control_set/control_set.js.map} +1 -1
  13. package/dist/inputs/date_picker/date_picker_input.js +20 -20
  14. package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
  15. package/dist/inputs/index.d.ts +2 -1
  16. package/dist/inputs/index.d.ts.map +1 -1
  17. package/dist/inputs/index.js +27 -24
  18. package/dist/inputs/index.js.map +1 -1
  19. package/dist/inputs/input/input.js +6 -6
  20. package/dist/inputs/input/input.js.map +1 -1
  21. package/dist/inputs/phone_number_input/phone_number_country_select_adapter.js +15 -15
  22. package/dist/inputs/phone_number_input/phone_number_country_select_adapter.js.map +1 -1
  23. package/dist/inputs/phone_number_input/phone_number_input.d.ts +2 -1
  24. package/dist/inputs/phone_number_input/phone_number_input.d.ts.map +1 -1
  25. package/dist/inputs/phone_number_input/phone_number_input.js +45 -43
  26. package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
  27. package/dist/inputs/phone_number_input/phone_number_input_adapter.js +21 -21
  28. package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
  29. package/dist/inputs/phone_number_input/sip_input.d.ts +2 -1
  30. package/dist/inputs/phone_number_input/sip_input.d.ts.map +1 -1
  31. package/dist/inputs/phone_number_input/sip_input.js +51 -49
  32. package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
  33. package/dist/inputs/select/select.js +6 -6
  34. package/dist/inputs/select/select.js.map +1 -1
  35. package/dist/inputs/textarea/textarea.js +8 -8
  36. package/dist/inputs/textarea/textarea.js.map +1 -1
  37. package/dist/inputs/unit_input/unit_input.js +20 -20
  38. package/dist/inputs/unit_input/unit_input.js.map +1 -1
  39. package/dist/layouts/body/body.d.ts +17 -0
  40. package/dist/layouts/body/body.d.ts.map +1 -1
  41. package/dist/layouts/body/body.js +11 -12
  42. package/dist/layouts/body/body.js.map +1 -1
  43. package/dist/layouts/index.d.ts +1 -2
  44. package/dist/layouts/index.d.ts.map +1 -1
  45. package/dist/layouts/index.js +38 -40
  46. package/dist/layouts/index.js.map +1 -1
  47. package/dist/layouts/scaffold/scaffold.js +1 -1
  48. package/dist/layouts/scaffold/scaffold.js.map +1 -1
  49. package/dist/layouts/section/section.d.ts.map +1 -1
  50. package/dist/layouts/section/section.js +14 -13
  51. package/dist/layouts/section/section.js.map +1 -1
  52. package/dist/overlay/frame/frame.d.ts +2 -2
  53. package/dist/overlay/frame/frame.d.ts.map +1 -1
  54. package/dist/overlay/frame/frame.js +67 -59
  55. package/dist/overlay/frame/frame.js.map +1 -1
  56. package/dist/overlay/slide/slide.d.ts +9 -0
  57. package/dist/overlay/slide/slide.d.ts.map +1 -0
  58. package/dist/overlay/slide/slide.js +29 -0
  59. package/dist/overlay/slide/slide.js.map +1 -0
  60. package/dist/page.css +1 -1
  61. package/dist/slide.css +1 -0
  62. package/dist/surfaces/aside/aside.d.ts +5 -0
  63. package/dist/surfaces/aside/aside.d.ts.map +1 -0
  64. package/dist/surfaces/aside/aside.js +19 -0
  65. package/dist/surfaces/aside/aside.js.map +1 -0
  66. package/dist/surfaces/drawers/drawer.d.ts +5 -0
  67. package/dist/surfaces/drawers/drawer.d.ts.map +1 -0
  68. package/dist/surfaces/drawers/drawer.js +31 -0
  69. package/dist/surfaces/drawers/drawer.js.map +1 -0
  70. package/dist/surfaces/index.d.ts +3 -6
  71. package/dist/surfaces/index.d.ts.map +1 -1
  72. package/dist/surfaces/index.js +20 -26
  73. package/dist/surfaces/index.js.map +1 -1
  74. package/dist/surfaces/modal/modal.d.ts +1 -1
  75. package/dist/surfaces/modal/modal.d.ts.map +1 -1
  76. package/dist/surfaces/modal/modal.js +22 -14
  77. package/dist/surfaces/modal/modal.js.map +1 -1
  78. package/dist/surfaces/page/page.d.ts +5 -0
  79. package/dist/surfaces/page/page.d.ts.map +1 -0
  80. package/dist/surfaces/page/page.js +19 -0
  81. package/dist/surfaces/page/page.js.map +1 -0
  82. package/dist/surfaces/pop_confirm/pop_confirm.d.ts.map +1 -1
  83. package/dist/surfaces/pop_confirm/pop_confirm.js +23 -16
  84. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  85. package/dist/surfaces/window/window.d.ts +1 -1
  86. package/dist/surfaces/window/window.d.ts.map +1 -1
  87. package/dist/surfaces/window/window.js +27 -19
  88. package/dist/surfaces/window/window.js.map +1 -1
  89. package/dist/themes/stylesheets/reset.css +1 -1
  90. package/dist/themes/stylesheets/reset.js +2 -2
  91. package/dist/themes/stylesheets/reset.js.map +1 -1
  92. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  93. package/dist/themes/themes/ergo/ergo_theme.js +134 -44
  94. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  95. package/dist/utils/dnd/hooks/use_drag_container.d.ts.map +1 -1
  96. package/dist/utils/dnd/hooks/use_drag_container.js.map +1 -1
  97. package/package.json +2 -2
  98. package/src/inputs/color_input/color_input.tsx +3 -3
  99. package/src/inputs/control/control.stories.tsx +158 -0
  100. package/src/inputs/control/control.tsx +32 -0
  101. package/src/inputs/control/control_stories.module.css +7 -0
  102. package/src/inputs/control_set/control_set.stories.tsx +46 -0
  103. package/src/inputs/{input_group/input_group.tsx → control_set/control_set.tsx} +5 -5
  104. package/src/inputs/date_picker/date_picker_input.stories.tsx +1 -1
  105. package/src/inputs/date_picker/date_picker_input.tsx +1 -1
  106. package/src/inputs/index.ts +2 -1
  107. package/src/inputs/input/input.tsx +1 -1
  108. package/src/inputs/phone_number_input/phone_number_country_select_adapter.tsx +1 -1
  109. package/src/inputs/phone_number_input/phone_number_input.tsx +4 -1
  110. package/src/inputs/phone_number_input/phone_number_input_adapter.tsx +2 -2
  111. package/src/inputs/phone_number_input/sip_input.tsx +7 -4
  112. package/src/inputs/select/select.tsx +1 -1
  113. package/src/inputs/textarea/textarea.stories.tsx +1 -1
  114. package/src/inputs/textarea/textarea.tsx +1 -1
  115. package/src/inputs/unit_input/unit_input.tsx +3 -3
  116. package/src/layouts/__stories__/composed_stories.module.css +1 -7
  117. package/src/layouts/__stories__/rail.stories.tsx +20 -13
  118. package/src/layouts/__stories__/scaffold.stories.tsx +34 -22
  119. package/src/layouts/__stories__/utils.tsx +10 -7
  120. package/src/layouts/body/body.module.css +0 -8
  121. package/src/layouts/body/body.tsx +19 -3
  122. package/src/layouts/index.ts +1 -2
  123. package/src/layouts/scaffold/scaffold.tsx +1 -1
  124. package/src/layouts/section/section.tsx +2 -1
  125. package/src/overlay/frame/frame.tsx +13 -16
  126. package/src/overlay/slide/slide.module.css +30 -0
  127. package/src/overlay/slide/slide.stories.tsx +61 -0
  128. package/src/overlay/slide/slide.tsx +51 -0
  129. package/src/surfaces/aside/aside.module.css +5 -0
  130. package/src/surfaces/aside/aside.stories.tsx +75 -0
  131. package/src/surfaces/aside/aside.tsx +22 -0
  132. package/src/surfaces/card/card.stories.tsx +8 -5
  133. package/src/surfaces/card/card_stories.module.css +4 -2
  134. package/src/surfaces/drawers/drawer.stories.tsx +144 -0
  135. package/src/surfaces/drawers/drawer.tsx +30 -0
  136. package/src/surfaces/index.ts +3 -6
  137. package/src/surfaces/modal/__stories__/modal.stories.tsx +21 -4
  138. package/src/surfaces/modal/modal.tsx +5 -1
  139. package/src/surfaces/page/page.module.css +0 -6
  140. package/src/surfaces/page/page.stories.tsx +71 -0
  141. package/src/surfaces/page/page.tsx +22 -0
  142. package/src/surfaces/panel/__stories__/panel.stories.tsx +66 -60
  143. package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +43 -31
  144. package/src/surfaces/pop_confirm/pop_confirm.tsx +5 -1
  145. package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx +31 -0
  146. package/src/surfaces/window/window.stories.tsx +15 -4
  147. package/src/surfaces/window/window.tsx +5 -1
  148. package/src/themes/stylesheets/reset.css +2 -2
  149. package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_card.tsx +16 -15
  150. package/src/themes/themes/ergo/__stories__/material.stories.tsx +6 -4
  151. package/src/themes/themes/ergo/ergo_theme.css +134 -44
  152. package/src/utils/dnd/hooks/use_drag_container.ts +0 -7
  153. package/dist/body.module-BbFZ7KNP.js +0 -5
  154. package/dist/body.module-BbFZ7KNP.js.map +0 -1
  155. package/dist/drawer_bottom.css +0 -1
  156. package/dist/drawer_end.css +0 -1
  157. package/dist/drawer_start.css +0 -1
  158. package/dist/drawer_top.css +0 -1
  159. package/dist/inputs/input_group/input_group.d.ts +0 -5
  160. package/dist/inputs/input_group/input_group.d.ts.map +0 -1
  161. package/dist/inputs/input_group/input_group.js +0 -20
  162. package/dist/layouts/body/h_body.d.ts +0 -6
  163. package/dist/layouts/body/h_body.d.ts.map +0 -1
  164. package/dist/layouts/body/h_body.js +0 -27
  165. package/dist/layouts/body/h_body.js.map +0 -1
  166. package/dist/layouts/body/v_body.d.ts +0 -6
  167. package/dist/layouts/body/v_body.d.ts.map +0 -1
  168. package/dist/layouts/body/v_body.js +0 -27
  169. package/dist/layouts/body/v_body.js.map +0 -1
  170. package/dist/page.module-DXhph-u6.js +0 -5
  171. package/dist/page.module-DXhph-u6.js.map +0 -1
  172. package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.d.ts +0 -7
  173. package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.d.ts.map +0 -1
  174. package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.js +0 -22
  175. package/dist/surfaces/drawers/drawer_bottom/drawer_bottom.js.map +0 -1
  176. package/dist/surfaces/drawers/drawer_end/drawer_end.d.ts +0 -7
  177. package/dist/surfaces/drawers/drawer_end/drawer_end.d.ts.map +0 -1
  178. package/dist/surfaces/drawers/drawer_end/drawer_end.js +0 -20
  179. package/dist/surfaces/drawers/drawer_end/drawer_end.js.map +0 -1
  180. package/dist/surfaces/drawers/drawer_start/drawer_start.d.ts +0 -7
  181. package/dist/surfaces/drawers/drawer_start/drawer_start.d.ts.map +0 -1
  182. package/dist/surfaces/drawers/drawer_start/drawer_start.js +0 -22
  183. package/dist/surfaces/drawers/drawer_start/drawer_start.js.map +0 -1
  184. package/dist/surfaces/drawers/drawer_top/drawer_top.d.ts +0 -7
  185. package/dist/surfaces/drawers/drawer_top/drawer_top.d.ts.map +0 -1
  186. package/dist/surfaces/drawers/drawer_top/drawer_top.js +0 -20
  187. package/dist/surfaces/drawers/drawer_top/drawer_top.js.map +0 -1
  188. package/dist/surfaces/page/h_page.d.ts +0 -6
  189. package/dist/surfaces/page/h_page.d.ts.map +0 -1
  190. package/dist/surfaces/page/h_page.js +0 -22
  191. package/dist/surfaces/page/h_page.js.map +0 -1
  192. package/dist/surfaces/page/v_page.d.ts +0 -6
  193. package/dist/surfaces/page/v_page.d.ts.map +0 -1
  194. package/dist/surfaces/page/v_page.js +0 -21
  195. package/dist/surfaces/page/v_page.js.map +0 -1
  196. package/src/layouts/body/h_body.module.css +0 -7
  197. package/src/layouts/body/h_body.tsx +0 -28
  198. package/src/layouts/body/v_body.module.css +0 -7
  199. package/src/layouts/body/v_body.tsx +0 -28
  200. package/src/surfaces/drawers/__stories__/drawers.stories.tsx +0 -26
  201. package/src/surfaces/drawers/drawer_bottom/drawer_bottom.module.css +0 -5
  202. package/src/surfaces/drawers/drawer_bottom/drawer_bottom.tsx +0 -23
  203. package/src/surfaces/drawers/drawer_end/drawer_end.module.css +0 -5
  204. package/src/surfaces/drawers/drawer_end/drawer_end.tsx +0 -24
  205. package/src/surfaces/drawers/drawer_start/drawer_start.module.css +0 -5
  206. package/src/surfaces/drawers/drawer_start/drawer_start.tsx +0 -23
  207. package/src/surfaces/drawers/drawer_top/drawer_top.module.css +0 -5
  208. package/src/surfaces/drawers/drawer_top/drawer_top.tsx +0 -24
  209. package/src/surfaces/page/h_page.tsx +0 -23
  210. package/src/surfaces/page/v_page.tsx +0 -22
package/src/layouts/__stories__/utils.tsx CHANGED
@@ -8,13 +8,12 @@ import { UtilityBar } from '../utility_bar/utility_bar.js';
8
8
 
9
9
  import { Rail, type RailProps } from '../rail/rail.js';
10
10
  import { Side } from '../rail/side/side.js';
11
- import { VBody } from '../body/v_body.js';
12
- import { HBody } from '../body/h_body.js';
13
11
  import { Box, Spacer } from '../../stacks/index.js';
14
12
  import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
15
13
  import { SearchIcon } from '@tcn/icons/search_icon.js';
16
14
 
17
15
  import styles from './composed_stories.module.css';
16
+ import { Body } from '../body/body.js';
18
17
 
19
18
  const FloatingLabel = ({ children }: { children: React.ReactNode }) => {
20
19
  return (
@@ -101,10 +100,12 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
101
100
  </UtilityStrip>
102
101
  )}
103
102
  {main && (
104
- <HBody className={clsx(styles.main, styles.secondary)} width="200px">
105
- {mainLabel && <>Body</>}
106
- {children}
107
- </HBody>
103
+ <Body className={clsx(styles.main, styles.secondary)} width="200px">
104
+ <Scaffold>
105
+ {mainLabel && <>Body</>}
106
+ {children}
107
+ </Scaffold>
108
+ </Body>
108
109
  )}
109
110
  {!main && children}
110
111
  {side && (
@@ -163,7 +164,9 @@ export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>
163
164
  </UtilityBar>
164
165
  )}
165
166
  {body && (
166
- <VBody className={clsx(styles.body, styles.secondary)}>Body {children}</VBody>
167
+ <Body className={clsx(styles.body, styles.secondary)}>
168
+ <Scaffold>Body {children}</Scaffold>
169
+ </Body>
167
170
  )}
168
171
  {!body && children}
169
172
  {footer && (
package/src/layouts/body/body.module.css CHANGED
@@ -5,12 +5,4 @@
5
5
  flex-grow: 1;
6
6
  flex-shrink: unset;
7
7
  }
8
-
9
- .h-body {
10
- overflow-x: auto;
11
- }
12
-
13
- .v-body {
14
- overflow-y: auto;
15
- }
16
8
  }
package/src/layouts/body/body.tsx CHANGED
@@ -1,12 +1,28 @@
1
1
  import React from 'react';
2
2
  import { clsx } from 'clsx';
3
- import styles from './body.module.css';
4
3
  import { Box, type BoxProps } from '../../stacks/box/box.js';
5
4
 
5
+ import styles from './body.module.css';
6
+
6
7
  export interface BodyProps extends Omit<BoxProps, 'as'> {}
7
8
 
8
- // Under construction: although this component behaves correctly, a content/child component that manages scrolling is needed.
9
- // For now HBody and VBody are recommended.
9
+ /**
10
+ * The Body component will fill the available space in in a flex container.
11
+ * It is typically used within a Scaffold or Rail component.
12
+ * And typically will return a Scaffold or Rail component to determine the scroll behavior of the body
13
+ * Example:
14
+ * <Body>
15
+ * <Scaffold>
16
+ * <VerticalContent />
17
+ * </Scaffold>
18
+ * </Body>
19
+ * or
20
+ * <Body>
21
+ * <Rail>
22
+ * <HorizontalContent />
23
+ * </Rail>
24
+ * </Body>
25
+ */
10
26
  export const Body = React.forwardRef<HTMLElement, BodyProps>(function Body(
11
27
  { children, className, ...props }: BodyProps,
12
28
  ref
package/src/layouts/index.ts CHANGED
@@ -7,8 +7,7 @@ export * from './sidebar_end/sidebar_end.js';
7
7
  export * from './sidebar_start/sidebar_start.js';
8
8
 
9
9
  export { Scaffold, type ScaffoldProps } from './scaffold/scaffold.js';
10
- export { HBody, type HBodyProps } from './body/h_body.js';
11
- export { VBody, type VBodyProps } from './body/v_body.js';
10
+ export { Body, type BodyProps } from './body/body.js';
12
11
  export { Footer, type FooterProps } from './footer/footer.js';
13
12
  export { Header, type HeaderProps } from './header/header.js';
14
13
  export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
package/src/layouts/scaffold/scaffold.tsx CHANGED
@@ -20,7 +20,7 @@ export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Sc
20
20
  maxWidth,
21
21
  minHeight,
22
22
  maxHeight,
23
- hAlign,
23
+ hAlign = 'start',
24
24
  vAlign = 'start',
25
25
  className,
26
26
  ...props
package/src/layouts/section/section.tsx CHANGED
@@ -4,13 +4,14 @@ import { VStack, type VStackProps } from '../../stacks/v_stack.js';
4
4
  import styles from './section.module.css';
5
5
 
6
6
  export const Section = React.forwardRef<HTMLDivElement, VStackProps>(function Section(
7
- { children, className, as = 'section', style, ...props },
7
+ { children, className, hAlign = 'start', as = 'section', style, ...props },
8
8
  ref
9
9
  ) {
10
10
  return (
11
11
  <VStack
12
12
  as={as}
13
13
  ref={ref}
14
+ hAlign={hAlign}
14
15
  className={clsx(className, 'tcn-surface', styles.section, 'tcn-section')}
15
16
  style={style}
16
17
  {...props}
package/src/overlay/frame/frame.tsx CHANGED
@@ -21,14 +21,7 @@ export interface FrameOwnProps {
21
21
  resizable?: boolean;
22
22
  }
23
23
 
24
- export type FrameProps = Omit<
25
- BoxProps,
26
- | 'enableResizeOnLeft'
27
- | 'enableResizeOnRight'
28
- | 'enableResizeOnTop'
29
- | 'enableResizeOnBottom'
30
- > &
31
- FrameOwnProps;
24
+ export type FrameProps = BoxProps & FrameOwnProps;
32
25
 
33
26
  export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
34
27
  {
@@ -38,6 +31,12 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
38
31
  veil = false,
39
32
  resizable = true,
40
33
  className,
34
+ enableResizeOnTop = true,
35
+ enableResizeOnBottom = true,
36
+ enableResizeOnStart = true,
37
+ enableResizeOnEnd = true,
38
+ enableResizeOnLeft = false,
39
+ enableResizeOnRight = false,
41
40
  ...rest
42
41
  }: FrameProps,
43
42
  ref
@@ -50,14 +49,12 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
50
49
  <FrameDialog
51
50
  className={className}
52
51
  ref={ref}
53
- enableResizeOnLeft={resizable}
54
- enableResizeOnRight={resizable}
55
- enableResizeOnTop={resizable}
56
- enableResizeOnBottom={resizable}
57
- // TODO: check to see if these should be enabled, and if so - if left/right should be disabled.
58
- // Could add a "directional" prop and use that in conjunction with enableResizeOnStart/End and deprecate enableResizeOnLeft/Right.
59
- // enableResizeOnStart={resizable}
60
- // enableResizeOnEnd={resizable}
52
+ enableResizeOnStart={resizable && enableResizeOnStart}
53
+ enableResizeOnEnd={resizable && enableResizeOnEnd}
54
+ enableResizeOnTop={resizable && enableResizeOnTop}
55
+ enableResizeOnBottom={resizable && enableResizeOnBottom}
56
+ enableResizeOnRight={resizable && enableResizeOnRight}
57
+ enableResizeOnLeft={resizable && enableResizeOnLeft}
61
58
  draggable={draggable}
62
59
  {...rest}
63
60
  >
package/src/overlay/slide/slide.module.css ADDED
@@ -0,0 +1,30 @@
1
+ @layer tcn-system {
2
+ :where(.slide) {
3
+ position: absolute;
4
+
5
+ &[data-side="top"],
6
+ &[data-side="bottom"] {
7
+ width: 100%;
8
+ }
9
+ &[data-side="start"],
10
+ &[data-side="end"] {
11
+ height: 100%;
12
+ }
13
+ &[data-side="top"] {
14
+ top: 0;
15
+ }
16
+
17
+ &[data-side="bottom"] {
18
+ bottom: 0;
19
+ }
20
+
21
+ /* TODO: support LTR directionality */
22
+ &[data-side="start"] {
23
+ left: 0;
24
+ }
25
+
26
+ &[data-side="end"] {
27
+ right: 0;
28
+ }
29
+ }
30
+ }
package/src/overlay/slide/slide.stories.tsx ADDED
@@ -0,0 +1,61 @@
1
+ import { Header, Scaffold, Body } from '../../layouts/index.js';
2
+ import { ZStack } from '../../stacks/z_stack.js';
3
+ import { BodyText } from '../../typography/index.js';
4
+ import { Title } from '../../typography/title/title.js';
5
+ import { Slide, type SlideProps } from './slide.js';
6
+ import { DragHandle } from '../../utils/dnd/handle.js';
7
+
8
+ export default {
9
+ title: 'Overlays/Floating/Slide',
10
+ component: Slide,
11
+ tags: ['autodocs'],
12
+
13
+ args: {
14
+ isOpen: true,
15
+ veil: false,
16
+ resizable: true,
17
+ side: 'top',
18
+ },
19
+ argTypes: {
20
+ side: {
21
+ control: 'select',
22
+ options: ['top', 'bottom', 'start', 'end'],
23
+ },
24
+ },
25
+ };
26
+
27
+ export const SlideStory = (args: Omit<SlideProps, 'children'>) => {
28
+ const isVertical = args.side === 'top' || args.side === 'bottom';
29
+ return (
30
+ <ZStack height="100%" width="100%" minHeight="600px">
31
+ <Slide
32
+ height={isVertical ? '300px' : undefined}
33
+ width={!isVertical ? '300px' : undefined}
34
+ minHeight={isVertical ? '100px' : undefined}
35
+ minWidth={!isVertical ? '100px' : undefined}
36
+ maxHeight={isVertical ? '90%' : undefined}
37
+ maxWidth={!isVertical ? '90%' : undefined}
38
+ style={{
39
+ background: 'white',
40
+ }}
41
+ {...args}
42
+ >
43
+ <Scaffold>
44
+ <DragHandle>
45
+ <Header>
46
+ <Title> This is a Slide</Title>
47
+ </Header>
48
+ </DragHandle>
49
+ <Body>
50
+ <Scaffold>
51
+ <BodyText>
52
+ This component is fixed to a side of a container (top, bottom, start,
53
+ end).
54
+ </BodyText>
55
+ </Scaffold>
56
+ </Body>
57
+ </Scaffold>
58
+ </Slide>
59
+ </ZStack>
60
+ );
61
+ };
package/src/overlay/slide/slide.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import React from 'react';
2
+ import { Frame, type FrameProps } from '../frame/frame.js';
3
+ import { clsx } from 'clsx';
4
+
5
+ // Styles
6
+ import styles from './slide.module.css';
7
+
8
+ export type SlideSide = 'top' | 'bottom' | 'start' | 'end';
9
+
10
+ export interface SlideOwnProps {
11
+ side: SlideSide;
12
+ }
13
+
14
+ export type SlideProps = Omit<
15
+ FrameProps,
16
+ | 'draggable'
17
+ | 'enableResizeOnLeft'
18
+ | 'enableResizeOnRight'
19
+ | 'enableResizeOnTop'
20
+ | 'enableResizeOnBottom'
21
+ | 'enableResizeOnStart'
22
+ | 'enableResizeOnEnd'
23
+ > &
24
+ SlideOwnProps;
25
+
26
+ // A Frame fixed to a side of a container (top, bottom, start, end) - disables dragging - and limits resizing to one side
27
+ export const Slide = React.forwardRef<HTMLElement, SlideProps>(function Slide(
28
+ { children, side, resizable = false, className, ...rest },
29
+ ref
30
+ ) {
31
+ const isVertical = side === 'top' || side === 'bottom';
32
+
33
+ return (
34
+ <Frame
35
+ data-side={side}
36
+ className={clsx(styles['slide'], className)}
37
+ draggable={false}
38
+ ref={ref}
39
+ data-is-vertical={isVertical}
40
+ data-is-horizontal={!isVertical}
41
+ resizable={resizable}
42
+ enableResizeOnTop={side === 'bottom'}
43
+ enableResizeOnBottom={side === 'top'}
44
+ enableResizeOnStart={side === 'end'}
45
+ enableResizeOnEnd={side === 'start'}
46
+ {...rest}
47
+ >
48
+ {children}
49
+ </Frame>
50
+ );
51
+ });
package/src/surfaces/aside/aside.module.css ADDED
@@ -0,0 +1,5 @@
1
+ @layer tcn-system {
2
+ .aside {
3
+ height: 100%;
4
+ }
5
+ }
package/src/surfaces/aside/aside.stories.tsx ADDED
@@ -0,0 +1,75 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
+ import {
3
+ Body,
4
+ Footer,
5
+ Header,
6
+ Heading,
7
+ Rail,
8
+ Scaffold,
9
+ Section,
10
+ } from '../../layouts/index.js';
11
+ import { Box } from '../../stacks/index.js';
12
+ import { Aside } from './aside.js';
13
+ import { BodyText, Title } from '../../typography/index.js';
14
+ import { Panel } from '../panel/panel.js';
15
+ import { theme } from '../../themes/theme_variables.js';
16
+
17
+ const meta: Meta<typeof Aside> = {
18
+ title: 'Surfaces/Aside',
19
+ component: Aside,
20
+ tags: ['autodocs'],
21
+ };
22
+
23
+ export default meta;
24
+
25
+ type Story = StoryObj<typeof Aside>;
26
+
27
+ export const Baseline: Story = {
28
+ render: () => (
29
+ <Box
30
+ height="100vh"
31
+ minHeight="400px"
32
+ padding="16px"
33
+ style={{ backgroundColor: theme.backgroundColors.tertiary }}
34
+ >
35
+ <Panel>
36
+ <Header>
37
+ <Title>Parent Container Title</Title>
38
+ </Header>
39
+ <Body>
40
+ <Rail>
41
+ <Aside width="240px">
42
+ <Header>
43
+ <Title>Aside - Secondary</Title>
44
+ </Header>
45
+ <Body>
46
+ <Scaffold>
47
+ <Section hAlign="start">
48
+ <Heading>Aside Section</Heading>
49
+ <BodyText>Section Content</BodyText>
50
+ </Section>
51
+ <Section hAlign="start">
52
+ <Heading>Aside Section 2</Heading>
53
+ <BodyText>Section Content 2</BodyText>
54
+ </Section>
55
+ </Scaffold>
56
+ </Body>
57
+ <Footer>
58
+ <Title>Aside Footer</Title>
59
+ </Footer>
60
+ </Aside>
61
+ <Body>
62
+ <Scaffold>
63
+ <BodyText>Primary Content</BodyText>
64
+ </Scaffold>
65
+ </Body>
66
+ </Rail>
67
+ </Body>
68
+
69
+ <Footer>
70
+ <Title>Parent Container Footer</Title>
71
+ </Footer>
72
+ </Panel>
73
+ </Box>
74
+ ),
75
+ };
package/src/surfaces/aside/aside.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 './aside.module.css';
6
+
7
+ export type AsideProps = ScaffoldProps;
8
+
9
+ export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
10
+ { children, className, ...props }: AsideProps,
11
+ ref
12
+ ) {
13
+ return (
14
+ <Scaffold
15
+ ref={ref}
16
+ className={clsx(styles['aside'], 'tcn-surface', 'tcn-aside', className)}
17
+ {...props}
18
+ >
19
+ {children}
20
+ </Scaffold>
21
+ );
22
+ });
package/src/surfaces/card/card.stories.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  import { BugIcon } from '@tcn/icons/bug_icon.js';
2
2
  import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
3
3
  import { Header } from '../../layouts/header/header.js';
4
- import { VBody } from '../../layouts/body/v_body.js';
5
4
  import { UtilityBar } from '../../layouts/utility_bar/utility_bar.js';
6
5
  import { Box, Spacer } from '../../stacks/index.js';
7
6
  import { Title } from '../../typography/title/title.js';
8
7
  import { Button } from '../../actions/index.js';
9
8
  import { Card } from './card.js';
9
+ import { Body, Scaffold } from '../../layouts/index.js';
10
10
 
11
11
  // Styles
12
12
  import styles from './card_stories.module.css';
@@ -20,7 +20,7 @@ export default {
20
20
  export const Default = () => {
21
21
  return (
22
22
  <div className={styles['stories-container']}>
23
- <Card maxHeight="400px">
23
+ <Card maxHeight="400px" maxWidth="400px">
24
24
  <Header>
25
25
  <Title>Card Header</Title>
26
26
  <Spacer />
@@ -48,9 +48,12 @@ export const Default = () => {
48
48
  </Button>
49
49
  </UtilityBar>
50
50
 
51
- <VBody>
52
- <Box className={styles['content-box']} />
53
- </VBody>
51
+ <Body>
52
+ <Scaffold>
53
+ <Box className={styles['content-box']} />
54
+ <Box className={styles['content-box']} />
55
+ </Scaffold>
56
+ </Body>
54
57
  {/* Cards typically do not have a footer */}
55
58
  {/* <Footer>
56
59
  <Title>Footer</Title>
package/src/surfaces/card/card_stories.module.css CHANGED
@@ -6,8 +6,10 @@
6
6
  }
7
7
 
8
8
  :where(.stories-container) {
9
- width: 100%;
10
- height: 100%;
9
+ min-width: 400px;
10
+ min-height: 400px;
11
+ height: 1vh;
12
+ width: 1vw;
11
13
  padding: 16px;
12
14
  background-color: #ccc;
13
15
  overflow: auto;
package/src/surfaces/drawers/drawer.stories.tsx ADDED
@@ -0,0 +1,144 @@
1
+ import { useState } from 'react';
2
+ import { Button } from '../../actions/index.js';
3
+ import {
4
+ Body,
5
+ Footer,
6
+ Header,
7
+ Heading,
8
+ Scaffold,
9
+ Section,
10
+ UtilityBar,
11
+ } from '../../layouts/index.js';
12
+ import { ZStack } from '../../stacks/z_stack.js';
13
+ import { BodyText, Title } from '../../typography/index.js';
14
+ import { Drawer, type DrawerProps } from './drawer.js';
15
+ import { Spacer } from '../../stacks/index.js';
16
+ import { CrossIcon } from '@tcn/icons/cross_icon.js';
17
+ import { BugIcon } from '@tcn/icons/bug_icon.js';
18
+
19
+ export default {
20
+ title: 'Surfaces/Drawer',
21
+ component: Drawer,
22
+ tags: ['autodocs'],
23
+ argTypes: {
24
+ side: {
25
+ control: 'select',
26
+ options: ['start', 'end', 'top', 'bottom'],
27
+ },
28
+ veil: {
29
+ control: 'boolean',
30
+ },
31
+ resizable: {
32
+ control: 'boolean',
33
+ },
34
+ size: {
35
+ control: 'text',
36
+ description: 'Arg to swap between setting width and height',
37
+ },
38
+ minSize: {
39
+ control: 'text',
40
+ description: 'Arg to set the minimum size of the drawer',
41
+ },
42
+ maxSize: {
43
+ control: 'text',
44
+ description: 'Arg to set the maximum size of the drawer',
45
+ },
46
+ },
47
+ args: {
48
+ resizable: true,
49
+ veil: false,
50
+ side: 'start',
51
+ size: '400px',
52
+ minSize: '240px',
53
+ maxSize: '90%',
54
+ },
55
+ };
56
+
57
+ type DrawerStoryProps = Pick<DrawerProps, 'resizable' | 'veil' | 'side'> & {
58
+ size?: string;
59
+ minSize?: string;
60
+ maxSize?: string;
61
+ };
62
+
63
+ export const Baseline = ({
64
+ veil,
65
+ resizable,
66
+ side,
67
+ size,
68
+ minSize,
69
+ maxSize,
70
+ }: DrawerStoryProps) => {
71
+ const [isOpen, setIsOpen] = useState(false);
72
+
73
+ function toggle() {
74
+ setIsOpen(!isOpen);
75
+ }
76
+
77
+ const useWidth = side === 'start' || side === 'end';
78
+
79
+ return (
80
+ <ZStack height="100%" width="100%" minHeight="600px">
81
+ <Button hierarchy="secondary" onClick={toggle}>
82
+ {isOpen ? 'Close' : 'Open'}
83
+ </Button>
84
+
85
+ <Drawer
86
+ side={side}
87
+ isOpen={isOpen}
88
+ veil={veil}
89
+ resizable={resizable}
90
+ width={useWidth ? size : undefined}
91
+ minWidth={useWidth ? minSize : undefined}
92
+ maxWidth={useWidth ? maxSize : undefined}
93
+ height={useWidth ? undefined : size}
94
+ minHeight={useWidth ? undefined : minSize}
95
+ maxHeight={useWidth ? undefined : maxSize}
96
+ >
97
+ <Header>
98
+ <Title>Drawer Title</Title>
99
+ <Spacer />
100
+ <Button utility hierarchy="tertiary" onClick={toggle}>
101
+ <CrossIcon />
102
+ </Button>
103
+ <Button utility hierarchy="secondary" onClick={toggle}>
104
+ <CrossIcon />
105
+ </Button>
106
+ <Button utility hierarchy="primary" onClick={toggle}>
107
+ <CrossIcon />
108
+ </Button>
109
+ </Header>
110
+
111
+ <UtilityBar>
112
+ <Title>Utility Bar</Title>
113
+ <Spacer />
114
+ <Button utility hierarchy="tertiary">
115
+ <BugIcon />
116
+ </Button>
117
+ <Button utility hierarchy="secondary">
118
+ <BugIcon />
119
+ </Button>
120
+ <Button utility hierarchy="primary">
121
+ <BugIcon />
122
+ </Button>
123
+ </UtilityBar>
124
+ <Body>
125
+ <Scaffold>
126
+ <Section>
127
+ <Heading>Drawer Section</Heading>
128
+ <BodyText>Section Content</BodyText>
129
+ </Section>
130
+ <Section>
131
+ <Heading>Drawer Section 2</Heading>
132
+ <BodyText>Section Content 2</BodyText>
133
+ </Section>
134
+ </Scaffold>
135
+ </Body>
136
+ <Footer>
137
+ <Spacer />
138
+ <Button hierarchy="secondary">Cancel</Button>
139
+ <Button hierarchy="primary">Save</Button>
140
+ </Footer>
141
+ </Drawer>
142
+ </ZStack>
143
+ );
144
+ };
package/src/surfaces/drawers/drawer.tsx ADDED
@@ -0,0 +1,30 @@
1
+ import { clsx } from 'clsx';
2
+ import React from 'react';
3
+ import { Scaffold } from '../../layouts/scaffold/scaffold.js';
4
+ import { Slide, type SlideProps } from '../../overlay/slide/slide.js';
5
+
6
+ export type DrawerProps = SlideProps;
7
+
8
+ export const Drawer = React.forwardRef<HTMLElement, DrawerProps>(function Drawer(
9
+ { children, className, isOpen, veil = false, resizable = false, ...props }: DrawerProps,
10
+ ref
11
+ ) {
12
+ return (
13
+ <Slide
14
+ ref={ref}
15
+ isOpen={isOpen}
16
+ veil={veil}
17
+ resizable={resizable}
18
+ className={clsx('tcn-surface', 'tcn-drawer', className)}
19
+ {...props}
20
+ >
21
+ <Scaffold
22
+ className={'tcn-overlay-content tcn-drawer-scaffold'}
23
+ width="100%"
24
+ height="100%"
25
+ >
26
+ {children}
27
+ </Scaffold>
28
+ </Slide>
29
+ );
30
+ });
package/src/surfaces/index.ts CHANGED
@@ -1,14 +1,11 @@
1
1
  export * from './alert/alert.js';
2
2
  export * from './card/card.js';
3
3
  export * from './confirm/confirm.js';
4
- export * from './page/h_page.js';
5
- export * from './page/v_page.js';
4
+ export * from './page/page.js';
6
5
  export * from './panel/panel.js';
6
+ export * from './aside/aside.js';
7
7
  export * from './popover/popover.js';
8
- export * from './drawers/drawer_bottom/drawer_bottom.js';
9
- export * from './drawers/drawer_top/drawer_top.js';
10
- export * from './drawers/drawer_start/drawer_start.js';
11
- export * from './drawers/drawer_end/drawer_end.js';
8
+ export { Drawer, type DrawerProps } from './drawers/drawer.js';
12
9
  export { Window, type WindowProps } from './window/window.js';
13
10
  export { Modal, type ModalProps } from './modal/modal.js';
14
11
  export { Tooltip, type TooltipProps } from './tooltip/tooltip.js';