@tcn/ui 0.13.1 → 0.15.0

package/src/actions/button/button_group/button_group.tsx

@@ -3,12 +3,13 @@ import { HStack } from '../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
 import { clsx } from 'clsx';
 import React from 'react';
-import { Button, ButtonProps } from '../button/button.js';
+import { ButtonProps } from '../button/button.js';
 import styles from './button_group.module.css';
 
 export interface ButtonGroupOwnProps {
   hierarchy?: Hierarchy;
   size?: Size;
+  width?: string;
   children:
     | React.ReactElement<Omit<ButtonProps, 'hierarchy'>>
     | React.ReactElement<Omit<ButtonProps, 'hierarchy'>>[];
@@ -18,7 +19,14 @@ export type ButtonGroupProps = WithDetailedHTMLProps<ButtonGroupOwnProps, 'div'>
 
 export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
   function ButtonGroup(
-    { children, className, hierarchy = 'secondary', size = 'md', ...props },
+    {
+      children,
+      className,
+      hierarchy = 'secondary',
+      size = 'md',
+      width = 'auto',
+      ...props
+    },
     ref
   ) {
     const buttons: React.ReactElement<ButtonProps>[] = Array.isArray(children)
@@ -30,7 +38,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
         ref={ref}
         as="div"
         inline
-        width="auto"
+        width={width}
         height="auto"
         data-hierarchy={hierarchy}
         data-size={size}
@@ -42,16 +50,16 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
 
           return (
             <React.Fragment key={i}>
-              <Button
-                {...button.props}
-                className={clsx(
+              {React.cloneElement(button, {
+                ...button.props,
+                className: clsx(
                   styles['button-group-button'],
                   'tcn-button-group-button',
                   button.props.className
-                )}
-                hierarchy={hierarchy}
-                size={size}
-              />
+                ),
+                hierarchy,
+                size,
+              })}
               {!isLast && (
                 <div
                   className={clsx(

package/src/form/field_set/field_set.tsx

@@ -1,4 +1,4 @@
-import { Title } from '../../typography/index.js';
+import { BodyText } from '../../typography/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
@@ -49,7 +49,9 @@ export const FieldSet = React.forwardRef(function FieldSet(
         >
           {startAdornments}
           {startAdornments && <Spacer width="8px" />}
-          <Title className="tcn-field-set-legend-text">{legend}</Title>
+          <BodyText className="tcn-field-set-legend-text" size="lg">
+            {legend}
+          </BodyText>
           {endAdornments && <Spacer />}
           {endAdornments}
         </HStack>

package/src/inputs/phone_number_input/phone_number_input.module.css

@@ -1,6 +1,8 @@
-.phone-number-input {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0%;
-  width: auto;
+@layer tcn-system {
+  .phone-number-input {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0%;
+    width: auto;
+  }
 }

package/src/layouts/__stories__/composed.stories.tsx

@@ -3,6 +3,7 @@ import { VStack } from '../../stacks/v_stack.js';
 import { SBNestedScaffold, SBContent, SBNestedRail } from './utils.js';
 
 import styles from './composed_stories.module.css';
+import { Rail } from '../containers/rail.js';
 
 const meta: Meta = {
   title: 'Layouts/Composed',
@@ -33,10 +34,12 @@ export const Baseline: Story = {
   render: () => (
     <SBContainer>
       <SBNestedScaffold depth={1}>
-        <SBNestedRail depth={2}>
-          <SBContent />
-          <SBContent />
-          <SBContent />
+        <SBNestedRail depth={2} minWidth="100px">
+          <Rail>
+            <SBContent />
+            <SBContent />
+            <SBContent />
+          </Rail>
         </SBNestedRail>
       </SBNestedScaffold>
     </SBContainer>
@@ -46,11 +49,13 @@ export const Baseline: Story = {
 export const WithColumns: Story = {
   render: () => (
     <SBContainer>
-      <SBNestedScaffold depth={1} utilityBar={false} body={false} footer={false}>
+      <SBNestedScaffold depth={1} utilityBar={false} footer={false}>
         <SBNestedRail depth={2} scaffold={false}>
-          <SBContent />
-          <SBContent />
-          <SBContent />
+          <Rail>
+            <SBContent />
+            <SBContent />
+            <SBContent />
+          </Rail>
         </SBNestedRail>
       </SBNestedScaffold>
     </SBContainer>

package/src/layouts/__stories__/composed_stories.module.css

@@ -94,6 +94,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.75);
 }
 
 .action-box {

package/src/layouts/__stories__/rail.stories.tsx

@@ -2,13 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
 import { SBLayoutContent } from './utils/content.js';
-import { Rail } from '../rail/rail.js';
-import { Side } from '../rail/side/side.js';
-import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
-import { BodyText, Title } from '../../typography/index.js';
-import { Body } from '../body/body.js';
-import { VStack } from '../../stacks/v_stack.js';
-import { Scaffold } from '../scaffold/scaffold.js';
+import { Rail } from '../containers/rail.js';
+import { Side } from '../containers/side/side.js';
+import { UtilityStrip } from '../containers/utility_strip/utility_strip.js';
+import { Title } from '../../typography/index.js';
+import { Scaffold } from '../containers/scaffold.js';
 
 const meta: Meta<typeof Rail> = {
   title: 'Layouts/Rail',
@@ -34,7 +32,12 @@ export const Baseline: Story = {
         <UtilityStrip>
           <Title>Utility Strip</Title>
         </UtilityStrip>
-        <Body>Body fills available space </Body>
+        <Rail>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </Rail>
         <Side width="200px">Side</Side>
       </Rail>
     </LayoutStoryDecorator>
@@ -48,16 +51,12 @@ export const HorizontalContent: Story = {
         <UtilityStrip>
           <Title>Utility Strip</Title>
         </UtilityStrip>
-        <Body>
-          <Rail>
-            <VStack minWidth="200px">
-              <BodyText>Body + Rail</BodyText>
-            </VStack>
-            <SBLayoutContent />
-            <SBLayoutContent />
-            <SBLayoutContent />
-          </Rail>
-        </Body>
+        <Rail>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </Rail>
         <Side width="200px">Side</Side>
       </Rail>
     </LayoutStoryDecorator>
@@ -71,13 +70,12 @@ export const VerticalContent: Story = {
         <UtilityStrip>
           <Title>Utility Strip</Title>
         </UtilityStrip>
-        <Body>
-          <Scaffold>
-            <SBLayoutContent />
-            <SBLayoutContent />
-            <SBLayoutContent />
-          </Scaffold>
-        </Body>
+        <Scaffold>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </Scaffold>
         <Side width="200px">Side</Side>
       </Rail>
     </LayoutStoryDecorator>

package/src/layouts/__stories__/scaffold.stories.tsx

@@ -1,4 +1,4 @@
-import { Scaffold } from '../scaffold/scaffold.js';
+import { Scaffold } from '../containers/scaffold.js';
 import { Header } from '../header/header.js';
 import { UtilityBar } from '../utility_bar/utility_bar.js';
 import { Footer } from '../footer/footer.js';
@@ -6,12 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
 import { SBLayoutContent } from './utils/content.js';
-import { VStack } from '../../stacks/v_stack.js';
-import { Body } from '../body/body.js';
-import { Rail } from '../rail/rail.js';
-import { Section } from '../section/section.js';
-import { BodyText } from '../../typography/index.js';
-import { Heading } from '../section/heading.js';
+import { Rail } from '../containers/rail.js';
 
 const meta: Meta<typeof Scaffold> = {
   title: 'Layouts/Scaffold',
@@ -33,10 +28,14 @@ type Story = StoryObj<typeof Scaffold>;
 export const Baseline: Story = {
   render: () => (
     <LayoutStoryDecorator>
-      <Scaffold>
+      <Scaffold height="100%">
         <Header>Header</Header>
         <UtilityBar>Utility Bar</UtilityBar>
-        <Body>Body fills available space</Body>
+        <Scaffold>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </Scaffold>
         <Footer>Footer</Footer>
       </Scaffold>
     </LayoutStoryDecorator>
@@ -49,29 +48,14 @@ export const VerticalContent: Story = {
   },
   render: () => (
     <LayoutStoryDecorator>
-      <Scaffold height="100vh">
+      <Scaffold height="100%">
         <Header>Header</Header>
         <UtilityBar>Utility Bar</UtilityBar>
-        <Body>
-          <Scaffold>
-            <VStack>
-              <BodyText>Body + Scaffold</BodyText>
-            </VStack>
-            <Section>
-              <Heading>Section 1 - A</Heading>
-              <SBLayoutContent />
-              <Section>
-                <Heading>Section 1 - B</Heading>
-                <SBLayoutContent />
-              </Section>
-            </Section>
-            <Section>
-              <Heading>Section 2</Heading>
-              <SBLayoutContent />
-              <SBLayoutContent />
-            </Section>
-          </Scaffold>
-        </Body>
+        <Scaffold>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </Scaffold>
       </Scaffold>
     </LayoutStoryDecorator>
   ),
@@ -82,19 +66,15 @@ export const HorizontalContent: Story = {
   },
   render: () => (
     <LayoutStoryDecorator>
-      <Scaffold height="100vh">
+      <Scaffold height="100%">
         <Header>Header</Header>
         <UtilityBar>Utility Bar</UtilityBar>
-        <Body>
-          <Rail>
-            <VStack minWidth="200px">
-              <BodyText>Body + Rail</BodyText>
-            </VStack>
-            <SBLayoutContent />
-            <SBLayoutContent />
-            <SBLayoutContent />
-          </Rail>
-        </Body>
+        <Rail>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </Rail>
         <Footer>Footer</Footer>
       </Scaffold>
     </LayoutStoryDecorator>

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

@@ -48,10 +48,6 @@
     background: var(--bg-3);
   }
 
-  :where(.tcn-body) {
-    background: var(--bg-4);
-  }
-
   :where(.tcn-rail) {
     background: var(--bg);
   }

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

@@ -4,7 +4,14 @@ import './layout_theme.css';
 
 export const LayoutStoryDecorator = ({ children }: { children: React.ReactNode }) => {
   return (
-    <Box className="sb-layout-theme" height="100vh" width="100vw" minHeight="400px">
+    <Box
+      className="sb-layout-theme"
+      height="100vh"
+      width="100vw"
+      minHeight="400px"
+      maxHeight="800px"
+      overflow="auto"
+    >
       {children}
     </Box>
   );

package/src/layouts/__stories__/utils.tsx

@@ -1,19 +1,18 @@
 import type { PropsWithChildren } from 'react';
 import clsx from 'clsx';
 
-import { Scaffold, type ScaffoldProps } from '../scaffold/scaffold.js';
+import { Scaffold, type ScaffoldProps } from '../containers/scaffold.js';
 import { Header } from '../header/header.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 { Rail, type RailProps } from '../containers/rail.js';
+import { Side } from '../containers/side/side.js';
 import { Box, Spacer } from '../../stacks/index.js';
-import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
+import { UtilityStrip } from '../containers/utility_strip/utility_strip.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
 
 import styles from './composed_stories.module.css';
-import { Body } from '../body/body.js';
 
 const FloatingLabel = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -68,10 +67,8 @@ interface SBNestedRailProps extends RailProps {
   depth?: number;
   scaffold?: boolean;
   side?: boolean;
-  main?: boolean;
   utilityStrip?: boolean;
   label?: boolean;
-  mainLabel?: boolean;
 }
 
 export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
@@ -80,14 +77,14 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
   depth = 1,
   scaffold = true,
   side = true,
-  main = true,
   utilityStrip = true,
   label = true,
-  mainLabel = true,
+  height = '100%',
   ...props
 }) => {
   return (
     <Rail
+      height={height}
       className={clsx(styles.rail, styles.primary, className)}
       data-depth={depth}
       {...props}
@@ -99,15 +96,7 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
           <SBActions />
         </UtilityStrip>
       )}
-      {main && (
-        <Body className={clsx(styles.main, styles.secondary)} width="200px">
-          <Scaffold>
-            {mainLabel && <>Body</>}
-            {children}
-          </Scaffold>
-        </Body>
-      )}
-      {!main && children}
+      {children}
       {side && (
         <Side className={clsx(styles.side, styles.secondary)} minWidth="200px">
           <span>Side/Column/WIP</span>
@@ -120,9 +109,11 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
           footer={false}
           minWidth={'fit-content'}
         >
-          <SBContent />
-          <SBContent />
-          <SBContent />
+          <Scaffold>
+            <SBContent />
+            <SBContent />
+            <SBContent />
+          </Scaffold>
         </SBNestedScaffold>
       )}
     </Rail>
@@ -133,7 +124,6 @@ interface SBNestedScaffoldProps extends ScaffoldProps {
   depth?: number;
   header?: boolean;
   utilityBar?: boolean;
-  body?: boolean;
   footer?: boolean;
 }
 
@@ -143,12 +133,13 @@ export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>
   depth = 1,
   header = true,
   utilityBar = true,
-  body = true,
   footer = true,
+  height = '100%',
   ...props
 }) => {
   return (
     <Scaffold
+      height={height}
       className={clsx(styles.scaffold, styles.primary, className)}
       data-depth={depth}
       {...props}
@@ -163,12 +154,7 @@ export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>
           <SBActions />
         </UtilityBar>
       )}
-      {body && (
-        <Body className={clsx(styles.body, styles.secondary)}>
-          <Scaffold>Body {children}</Scaffold>
-        </Body>
-      )}
-      {!body && children}
+      {children}
       {footer && (
         <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
       )}

package/src/layouts/containers/containers.module.css

@@ -0,0 +1,55 @@
+@layer tcn-system {
+  :where(.scaffold) {
+    max-height: 100%;
+    width: 100%;
+    height: auto;
+  }
+
+  :where(.rail) {
+    max-width: 100%;
+    height: 100%;
+    width: auto;
+  }
+
+  :where(.container) > :where(.container-stack) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Scaffold base — layout frame only, no overflow clipping */
+  :where(.scaffold) > :where(.scaffold-stack) {
+    overflow-y: auto;
+  }
+
+  /* Switching direction - rail fills scaffold width */
+  :where(.scaffold) > :where(.scaffold-stack) > :where(.rail) {
+    width: 100%;
+  }
+
+  /* Switching direction - scaffold fills rail height */
+  :where(.rail) > :where(.rail-stack) > :where(.scaffold) {
+    height: 100%;
+  }
+
+  /* Rail base — layout frame only, no overflow clipping */
+  :where(.rail) > :where(.rail-stack) {
+    overflow-x: auto;
+  }
+
+  /* container grows to fill remaining space */
+  :where(.container-stack) > :where(.container) {
+    flex-grow: 1;
+  }
+
+  /* container nested Scaffold scrolls vertically */
+  :where(.container-stack) > :where(.scaffold) {
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  /*  container nested Rail scrolls horizontally */
+  :where(.container-stack) > :where(.rail) {
+    min-width: 0;
+    overflow-x: auto;
+  }
+}

package/src/layouts/{rail → containers}/rail.tsx

@@ -4,8 +4,7 @@ import { Box, type BoxProps } from '../../stacks/box/box.js';
 import type { Alignment } from '../../stacks/types/alignment.js';
 import { HStack } from '../../stacks/h_stack.js';
 
-// Styles
-import styles from './rail.module.css';
+import styles from './containers.module.css';
 
 export interface RailProps extends Omit<BoxProps, 'as'> {
   vAlign?: Alignment;
@@ -17,7 +16,7 @@ export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
   {
     children,
     width,
-    height = '100%',
+    height,
     minWidth,
     maxWidth,
     minHeight,
@@ -40,7 +39,13 @@ export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={clsx(className, styles['rail'], 'tcn-rail')}
+      className={clsx(
+        className,
+        styles['rail'],
+        styles['container'],
+        'tcn-container',
+        'tcn-rail'
+      )}
       {...props}
     >
       <HStack
@@ -52,7 +57,12 @@ export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
         hAlign={hAlign}
         vAlign={vAlign}
         ref={ref}
-        className={clsx(styles['rail-stack'], 'tcn-rail-stack')}
+        className={clsx(
+          styles['rail-stack'],
+          styles['container-stack'],
+          'tcn-container-stack',
+          'tcn-rail-stack'
+        )}
         zIndex={0}
       >
         {children}

package/src/layouts/{scaffold → containers}/scaffold.tsx

@@ -3,8 +3,7 @@ import { clsx } from 'clsx';
 import { Box, type BoxProps } from '../../stacks/box/box.js';
 import type { Alignment } from '../../stacks/types/alignment.js';
 import { VStack } from '../../stacks/v_stack.js';
-// Styles
-import styles from './scaffold.module.css';
+import styles from './containers.module.css';
 
 export interface ScaffoldProps extends Omit<BoxProps, 'as'> {
   vAlign?: Alignment;
@@ -15,7 +14,7 @@ export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Sc
   {
     children,
     width,
-    height = '100%',
+    height,
     minWidth,
     maxWidth,
     minHeight,
@@ -38,7 +37,13 @@ export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Sc
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={clsx(className, styles['scaffold'], 'tcn-scaffold')}
+      className={clsx(
+        className,
+        styles['scaffold'],
+        styles['container'],
+        'tcn-container',
+        'tcn-scaffold'
+      )}
       {...props}
     >
       <VStack
@@ -50,7 +55,12 @@ export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Sc
         hAlign={hAlign}
         vAlign={vAlign}
         ref={ref}
-        className={clsx(styles['scaffold-stack'], 'tcn-scaffold-stack')}
+        className={clsx(
+          styles['scaffold-stack'],
+          styles['container-stack'],
+          'tcn-container-stack',
+          'tcn-scaffold-stack'
+        )}
         zIndex={0}
       >
         {children}

package/src/layouts/{rail → containers}/side/side.tsx

@@ -7,13 +7,14 @@ import styles from './side.module.css';
 export interface SideProps extends Omit<VStackProps, 'as'> {}
 
 export const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(
-  { children, className, width = 'auto', ...props }: SideProps,
+  { children, className, height = '100%', width = 'auto', ...props }: SideProps,
   ref
 ) {
   return (
     <VStack
       ref={ref}
       width={width}
+      height={height}
       className={clsx(styles['side'], 'tcn-side', className)}
       as="section"
       {...props}

package/src/layouts/index.ts

@@ -6,24 +6,22 @@ export * from './list/list.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
 
-export { Scaffold, type ScaffoldProps } from './scaffold/scaffold.js';
-export { Body, type BodyProps } from './body/body.js';
+export { Scaffold, type ScaffoldProps } from './containers/scaffold.js';
+
 export { Footer, type FooterProps } from './footer/footer.js';
 export { Header, type HeaderProps } from './header/header.js';
 export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
 export { Group, type GroupProps } from './group/group.js';
 export { Bar, type BarProps } from './bar/bar.js';
-export { Row } from './row/row.js';
-export { Section } from './section/section.js';
-export { Heading, type HeadingOwnProps } from './section/heading.js';
+export { Section, Heading, Detail, type HeadingOwnProps } from './section/index.js';
 export { Responsive, type ResponsiveProps } from './responsive/responsive.js';
 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 { Side, type SideProps } from './rail/side/side.js';
+export { Rail, type RailProps } from './containers/rail.js';
+export { Side, type SideProps } from './containers/side/side.js';
 export {
   UtilityStrip,
   type UtilityStripProps,
-} from './rail/utility_strip/utility_strip.js';
+} from './containers/utility_strip/utility_strip.js';