@tcn/ui 0.9.0 → 0.11.0

package/src/layouts/__stories__/utils/content.tsx

@@ -0,0 +1,27 @@
+import { Box } from '../../../stacks/index.js';
+import type { PropsWithChildren } from 'react';
+import type { BoxProps } from '../../../stacks/index.js';
+import { clsx } from 'clsx';
+
+export interface SBLayoutContentProps extends BoxProps {}
+
+export const SBLayoutContent: React.FC<PropsWithChildren<SBLayoutContentProps>> = ({
+  className,
+  children,
+  minHeight = '200px',
+  minWidth = '200px',
+  ...props
+}) => {
+  return (
+    <Box
+      minHeight={minHeight}
+      minWidth={minWidth}
+      className={clsx('sb-layout-content', className)}
+      {...props}
+    >
+      ↔ {minWidth}
+      <br />↕ {minHeight}
+      {children}
+    </Box>
+  );
+};

package/src/layouts/__stories__/utils/layout_theme.css

@@ -0,0 +1,88 @@
+/* A way to visualize layout components - since they are not themed until being used in a surface */
+.sb-layout-theme {
+  /* Forest (5) - Greens & teals */
+  --pastel-forest-bg: #e8f5e9;
+  --pastel-forest-1: #a5d6a7;
+  --pastel-forest-2: #81c784;
+  --pastel-forest-3: #66bb6a;
+  --pastel-forest-4: #4caf50;
+
+  /* Sunset (5) - Warm peaches, corals & yellows */
+  --pastel-sunset-bg: #fff7e3;
+  --pastel-sunset-1: #f5c6a0;
+  --pastel-sunset-2: #eba985;
+  --pastel-sunset-3: #e08f6a;
+  --pastel-sunset-4: #d47550;
+
+  /* Berry (5) - Purples, lavenders & pinks */
+  --pastel-berry-bg: #f5eafa;
+  --pastel-berry-1: #e8d5f2;
+  --pastel-berry-2: #d4b8e8;
+  --pastel-berry-3: #c9a7e0;
+  --pastel-berry-4: #b78ed4;
+
+  --bg: var(--pastel-sunset-bg);
+  --bg-1: var(--pastel-sunset-1);
+  --bg-2: var(--pastel-sunset-2);
+  --bg-3: var(--pastel-sunset-3);
+  --bg-4: var(--pastel-sunset-4);
+  --bg-5: rgba(0, 0, 0, 0.25);
+
+  :where(.tcn-scaffold) {
+    background: var(--bg);
+  }
+
+  :where(.tcn-bar) {
+    min-height: 32px;
+  }
+
+  :where(.tcn-header) {
+    background: var(--bg-1);
+  }
+
+  :where(.tcn-utility-bar) {
+    background: var(--bg-2);
+  }
+
+  :where(.tcn-footer) {
+    background: var(--bg-3);
+  }
+
+  :where(.tcn-body) {
+    background: var(--bg-4);
+  }
+
+  :where(.tcn-rail) {
+    background: var(--bg);
+  }
+
+  :where(.tcn-utility-strip) {
+    background: var(--bg-1);
+    min-width: 32px;
+    padding: 8px;
+
+    :where(.tcn-title) {
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+  }
+
+  :where(.tcn-side) {
+    background: var(--bg-2);
+    min-width: 32px;
+  }
+
+  :where(.tcn-main) {
+    background: var(--bg-4);
+    gap: 8px;
+  }
+
+  :where(.sb-layout-content) {
+    background: var(--bg-5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* flex-grow: 1; */
+    height: 100%;
+  }
+}

package/src/layouts/__stories__/utils/layout_theme_provider.tsx

@@ -0,0 +1,11 @@
+import { Box } from '../../../stacks/index.js';
+
+import './layout_theme.css';
+
+export const LayoutStoryDecorator = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box className="sb-layout-theme" height="100vh" width="100vw" minHeight="400px">
+      {children}
+    </Box>
+  );
+};

package/src/layouts/__stories__/utils.tsx

@@ -3,13 +3,13 @@ import clsx from 'clsx';
 
 import { Scaffold, type ScaffoldProps } from '../scaffold/scaffold.js';
 import { Header } from '../header/header.js';
-import { Body } from '../body/body.js';
 import { Footer } from '../footer/footer.js';
 import { UtilityBar } from '../utility_bar/utility_bar.js';
 
 import { Rail, type RailProps } from '../rail/rail.js';
 import { Side } from '../rail/side/side.js';
-import { Main } from '../rail/main/main.js';
+import { VBody } from '../body/v_body.js';
+import { HBody } from '../body/h_body.js';
 import { Box, Spacer } from '../../stacks/index.js';
 import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
@@ -101,10 +101,10 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
         </UtilityStrip>
       )}
       {main && (
-        <Main className={clsx(styles.main, styles.secondary)} width="200px">
-          {mainLabel && <>Main</>}
+        <HBody className={clsx(styles.main, styles.secondary)} width="200px">
+          {mainLabel && <>Body</>}
           {children}
-        </Main>
+        </HBody>
       )}
       {!main && children}
       {side && (
@@ -163,7 +163,7 @@ export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>
         </UtilityBar>
       )}
       {body && (
-        <Body className={clsx(styles.body, styles.secondary)}>Body {children}</Body>
+        <VBody className={clsx(styles.body, styles.secondary)}>Body {children}</VBody>
       )}
       {!body && children}
       {footer && (

package/src/layouts/{utility_bar/utility_bar.module.css → bar/bar.module.css}

@@ -1,6 +1,7 @@
 @layer tcn-system {
-  :where(.utility-bar) {
+  :where(.bar) {
     width: 100%;
+    height: auto;
     min-height: 0;
   }
 }

package/src/layouts/bar/bar.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+
+import styles from './bar.module.css';
+
+export type BarProps = HStackProps;
+
+export const Bar = React.forwardRef<HTMLElement, BarProps>(function Bar(
+  { children, className, ...props }: BarProps,
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      as="header"
+      className={clsx(className, styles['bar'], 'tcn-bar')}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/layouts/body/body.module.css

@@ -1,11 +1,16 @@
 @layer tcn-system {
   .body {
     min-height: 0;
+    min-width: 0;
     flex-grow: 1;
-    width: 100%;
-    height: 100%;
+    flex-shrink: unset;
   }
-  :where(.tcn-main) {
-    height: auto;
+
+  .h-body {
+    overflow-x: auto;
+  }
+
+  .v-body {
+    overflow-y: auto;
   }
 }

package/src/layouts/body/body.tsx

@@ -1,23 +1,24 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import React from 'react';
 import { clsx } from 'clsx';
 import styles from './body.module.css';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
 
-export interface BodyProps extends Omit<VStackProps, 'as'> {}
+export interface BodyProps extends Omit<BoxProps, 'as'> {}
 
+// Under construction: although this component behaves correctly, a content/child component that manages scrolling is needed.
+// For now HBody and VBody are recommended.
 export const Body = React.forwardRef<HTMLElement, BodyProps>(function Body(
-  { children, className, overflowY = 'auto', ...props }: BodyProps,
+  { children, className, ...props }: BodyProps,
   ref
 ) {
   return (
-    <VStack
+    <Box
       ref={ref}
       as="div"
-      overflowY={overflowY}
       className={clsx(styles['body'], className, 'tcn-body')}
       {...props}
     >
       {children}
-    </VStack>
+    </Box>
   );
 });

package/src/layouts/body/h_body.module.css

@@ -2,7 +2,6 @@
   :where(.h-body) {
     min-width: 0;
     flex-grow: 1;
-    flex-grow: 1;
-    height: 100%;
+    height: auto;
   }
 }

package/src/layouts/body/h_body.tsx

@@ -1,20 +1,25 @@
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import React from 'react';
 import { clsx } from 'clsx';
-import styles from './h_body.module.css';
+import styles from './body.module.css';
 
 export interface HBodyProps extends Omit<HStackProps, 'as'> {}
 
 export const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(
-  { children, className, overflowX = 'auto', ...props }: HBodyProps,
+  { children, className, ...props }: HBodyProps,
   ref
 ) {
   return (
     <HStack
       ref={ref}
       as="div"
-      overflowX={overflowX}
-      className={clsx(styles['h-body'], className, 'tcn-h-body', 'tcn-body')}
+      className={clsx(
+        styles['body'],
+        styles['h-body'],
+        className,
+        'tcn-h-body',
+        'tcn-body'
+      )}
       {...props}
     >
       {children}

package/src/layouts/body/v_body.tsx

@@ -1,20 +1,25 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import React from 'react';
 import { clsx } from 'clsx';
-import styles from './v_body.module.css';
+import styles from './body.module.css';
 
 export interface VBodyProps extends Omit<VStackProps, 'as'> {}
 
 export const VBody = React.forwardRef<HTMLElement, VBodyProps>(function VBody(
-  { children, className, overflowY = 'auto', ...props }: VBodyProps,
+  { children, className, ...props }: VBodyProps,
   ref
 ) {
   return (
     <VStack
       ref={ref}
       as="div"
-      overflowY={overflowY}
-      className={clsx(styles['v-body'], className, 'tcn-body', 'tcn-v-body')}
+      className={clsx(
+        styles['body'],
+        styles['v-body'],
+        className,
+        'tcn-body',
+        'tcn-v-body'
+      )}
       {...props}
     >
       {children}

package/src/layouts/divider/divider.module.css

@@ -19,7 +19,7 @@
     background: #aaa;
   }
 
-  :where(.divider-line[data-emphasis="light"]) {
+  :where(.divider-line[data-emphasis="faint"]) {
     background: color-mix(in srgb, #aaa, white 20%);
   }
 

package/src/layouts/footer/footer.module.css

@@ -1,9 +1,6 @@
 @layer tcn-system {
   :where(.footer) {
-    width: 100%;
     min-height: 0;
-    padding: var(--padding) var(--padding-large);
-    gap: var(--gap);
   }
 
   /*

package/src/layouts/footer/footer.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
-import styles from './footer.module.css';
+import { Bar, type BarProps } from '../bar/bar.js';
 
-export interface FooterProps extends Omit<HStackProps, 'as' | 'children'> {
+import styles from './footer.module.css';
+export interface FooterProps extends Omit<BarProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;
-  children?: React.ReactNode;
 }
 
 export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer(
@@ -15,7 +14,7 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer
   ref
 ) {
   return (
-    <HStack
+    <Bar
       ref={ref}
       as="footer"
       className={clsx(styles.footer, className, 'tcn-footer')}
@@ -24,6 +23,6 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer
       {...props}
     >
       {children}
-    </HStack>
+    </Bar>
   );
 });

package/src/layouts/header/header.tsx

@@ -1,36 +1,27 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
-import styles from './header.module.css';
+import { Bar, type BarProps } from '../bar/bar.js';
 
-export interface HeaderProps extends Omit<HStackProps, 'as'> {
+export interface HeaderProps extends Omit<BarProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;
 }
 
 export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(
-  {
-    hierarchy = 'secondary',
-    height = 'auto',
-    children,
-    className,
-    size = 'md',
-    ...props
-  }: HeaderProps,
+  { hierarchy = 'secondary', size = 'md', children, className, ...props }: HeaderProps,
   ref
 ) {
   return (
-    <HStack
+    <Bar
       ref={ref}
       as="header"
-      className={clsx(styles.header, className, 'tcn-header')}
+      className={clsx(className, 'tcn-header')}
       data-hierarchy={hierarchy}
       data-size={size}
-      height={height}
       {...props}
     >
       {children}
-    </HStack>
+    </Bar>
   );
 });

package/src/layouts/index.ts

@@ -21,7 +21,6 @@ export { Breakpoint, type BreakpointProps } from './responsive/breakpoint.js';
 export { TTable, THead, TBody, TFoot, TR, TH, TD } from './table/table.js';
 
 export { Rail, type RailProps } from './rail/rail.js';
-export { Main, type MainProps } from './rail/main/main.js';
 export { Side, type SideProps } from './rail/side/side.js';
 export {
   UtilityStrip,

package/src/layouts/rail/rail.module.css

@@ -1,10 +1,14 @@
 @layer tcn-system {
-  :where(.rail-stack) {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    :where(.tcn-body) {
+  .rail {
+    :where(.rail-stack) {
+      width: 100%;
       height: 100%;
+      overflow: auto;
+      > :global(.tcn-body) {
+        height: 100%;
+        width: auto;
+        overflow-x: auto;
+      }
     }
   }
 }

package/src/layouts/rail/rail.tsx

@@ -40,7 +40,7 @@ export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={clsx(className, 'tcn-rail')}
+      className={clsx(className, styles['rail'], 'tcn-rail')}
       {...props}
     >
       <HStack

package/src/layouts/rail/side/side.module.css

@@ -2,7 +2,6 @@
   :where(.side) {
     min-width: 0;
     height: 100%;
-    flex-grow: 0;
     width: auto;
   }
 }

package/src/layouts/rail/side/side.tsx

@@ -4,7 +4,6 @@ import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
 
 import styles from './side.module.css';
 
-// UtilityBar
 export interface SideProps extends Omit<VStackProps, 'as'> {}
 
 export const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(
@@ -14,9 +13,9 @@ export const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStr
   return (
     <VStack
       ref={ref}
+      width={width}
       className={clsx(styles['side'], 'tcn-side', className)}
       as="section"
-      width={width}
       {...props}
     >
       {children}

package/src/layouts/rail/utility_strip/utility_strip.module.css

@@ -2,5 +2,10 @@
   :where(.utility-strip) {
     height: 100%;
     min-width: 0;
+    /* WIP */
+    /* writing-mode: vertical-rl;
+    text-orientation: mixed;
+    align-items: start;
+    justify-content: center; */
   }
 }

package/src/layouts/rail/utility_strip/utility_strip.tsx

@@ -5,7 +5,6 @@ import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
 
 import styles from './utility_strip.module.css';
 
-// UtilityBar
 export interface UtilityStripProps extends Omit<VStackProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;
@@ -18,6 +17,8 @@ export const UtilityStrip = React.forwardRef<HTMLElement, UtilityStripProps>(
       className,
       width = 'auto',
       hierarchy = 'secondary',
+      vAlign = 'start',
+      hAlign = 'center',
       size = 'md',
       ...props
     }: UtilityStripProps,
@@ -27,6 +28,8 @@ export const UtilityStrip = React.forwardRef<HTMLElement, UtilityStripProps>(
       <VStack
         ref={ref}
         as="header"
+        vAlign={vAlign}
+        hAlign={hAlign}
         className={clsx(styles['utility-strip'], 'tcn-utility-strip', className)}
         data-hierarchy={hierarchy}
         data-size={size}

package/src/layouts/scaffold/scaffold.module.css

@@ -1,11 +1,14 @@
 @layer tcn-system {
-  :where(.scaffold-stack) {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    :where(.tcn-main) {
-      height: auto;
-      background: black !important;
+  .scaffold {
+    :where(.scaffold-stack) {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      > :global(.tcn-body) {
+        width: 100%;
+        height: auto;
+        overflow-y: auto;
+      }
     }
   }
 }

package/src/layouts/scaffold/scaffold.tsx

@@ -38,7 +38,7 @@ export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Sc
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={clsx(className, 'tcn-scaffold')}
+      className={clsx(className, styles['scaffold'], 'tcn-scaffold')}
       {...props}
     >
       <VStack

package/src/layouts/utility_bar/utility_bar.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
-import styles from './utility_bar.module.css';
+import { Bar, type BarProps } from '../bar/bar.js';
 
 // UtilityBar
-export interface UtilityBarProps extends Omit<HStackProps, 'as'> {
+export interface UtilityBarProps extends Omit<BarProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;
 }
@@ -14,26 +13,24 @@ export const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(
   function UtilityBar(
     {
       hierarchy = 'secondary',
-      height = 'auto',
+      size = 'md',
       children,
       className,
-      size = 'md',
       ...props
     }: UtilityBarProps,
     ref
   ) {
     return (
-      <HStack
+      <Bar
         ref={ref}
         as="header"
-        className={clsx(styles['utility-bar'], className, 'tcn-utility-bar')}
+        className={clsx(className, 'tcn-utility-bar')}
         data-hierarchy={hierarchy}
         data-size={size}
-        height={height}
         {...props}
       >
         {children}
-      </HStack>
+      </Bar>
     );
   }
 );

package/src/overlay/frame/frame.module.css

@@ -1,7 +1,5 @@
 @layer tcn-system {
-  :where(.frame) {
-    padding: 0;
-    border: none;
-    background: none;
+  :where(.frame-dialog) {
+    overflow: hidden;
   }
 }

package/src/overlay/frame/frame.stories.tsx

@@ -1,9 +1,9 @@
+import { Header, Scaffold } from '../../layouts/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import { Frame, type FrameOwnProps } from './frame.js';
-import { DragHandle } from '../../utils/dnd/handle.js';
-import { Title } from '../../typography/title/title.js';
 import { BodyText } from '../../typography/index.js';
-import { Header } from '../../layouts/index.js';
+import { Title } from '../../typography/title/title.js';
+import { DragHandle } from '../../utils/dnd/handle.js';
+import { Frame, type FrameOwnProps } from './frame.js';
 import styles from './frame_stories.module.css';
 export default {
   title: 'Overlays/Floating/Frame',
@@ -14,6 +14,7 @@ export default {
     isOpen: true,
     draggable: true,
     veil: false,
+    resizable: true,
   },
 };
 
@@ -26,14 +27,16 @@ export const FrameStory = (args: Omit<FrameOwnProps, 'children'>) => {
         className={styles['sb-frame-container']}
         {...args}
       >
-        <Header className={styles['sb-frame-header']}>
-          <Title> This is a frame</Title>
-        </Header>
-        <DragHandle>
+        <Scaffold>
           <Header className={styles['sb-frame-header']}>
-            <BodyText> You can drag here.</BodyText>
+            <Title> This is a frame</Title>
           </Header>
-        </DragHandle>
+          <DragHandle>
+            <Header className={styles['sb-frame-header']}>
+              <BodyText> You can drag here.</BodyText>
+            </Header>
+          </DragHandle>
+        </Scaffold>
       </Frame>
     </ZStack>
   );