@tcn/ui 0.16.0 → 0.18.0

package/src/inputs/date_picker/date_picker_header.tsx

@@ -2,7 +2,7 @@ import { useSignalValue, useSignalValueEffect } from '@tcn/state';
 import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import React, { useMemo, useRef } from 'react';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { getMonthsOfYear } from '../../utils/calendar/get_months_of_year.js';
 import { DatePickerPresenter } from './date_picker_presenter.js';
 import { Select } from '../select/select.js';
@@ -65,13 +65,14 @@ export function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderPro
       minWidth="35px"
       width="100%"
     >
-      <SlimButton
+      <Button
+        utility
         disabled={!state.canNavigateToPreviousMonth}
         hierarchy="tertiary"
         onClick={previous}
       >
         <ChevronLeftIcon flipOnRtl size="md" />
-      </SlimButton>
+      </Button>
       <Spacer />
       <HStack hAlign="center" gap="4px" width="auto">
         <Select
@@ -86,13 +87,14 @@ export function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderPro
         <DatePickerYearInput presenter={presenter} />
       </HStack>
       <Spacer />
-      <SlimButton
+      <Button
+        utility
         disabled={!state.canNavigateToNextMonth}
         hierarchy="tertiary"
         onClick={next}
       >
         <ChevronRightIcon flipOnRtl size="md" />
-      </SlimButton>
+      </Button>
     </HStack>
   );
 }

package/src/inputs/date_picker/date_picker_year_selector.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';
 import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
@@ -102,9 +102,9 @@ export function DatePickerYearSelector({
       gap="4px"
     >
       <HStack gap="4px">
-        <SlimButton onClick={prev} hierarchy="tertiary">
+        <Button utility onClick={prev} hierarchy="tertiary">
           <ChevronLeftIcon flipOnRtl size="md" />
-        </SlimButton>
+        </Button>
         <Spacer />
         <Headline
           selectable={false}
@@ -112,9 +112,9 @@ export function DatePickerYearSelector({
           hierarchy="tertiary"
         >{`${firstYear}-${lastYear}`}</Headline>
         <Spacer />
-        <SlimButton hierarchy="tertiary" onClick={next}>
+        <Button utility hierarchy="tertiary" onClick={next}>
           <ChevronRightIcon size="md" />
-        </SlimButton>
+        </Button>
       </HStack>
       <HStack gap="4px">{firstRow}</HStack>
       <HStack gap="4px">{secondRow}</HStack>

package/src/inputs/multiselect/multiselect_inline_values.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './multiselect_values.module.css';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { OptionProps } from '../options/option.js';
 import { Chip } from '../../tokens/index.js';
 import clsx from 'clsx';
@@ -27,7 +27,8 @@ export function MultiselectInlineValues({
         width="auto"
       >
         <span>{v.props.label}</span>
-        <SlimButton
+        <Button
+          utility
           disabled={disabled}
           size="sm"
           hierarchy="tertiary"
@@ -37,7 +38,7 @@ export function MultiselectInlineValues({
           }}
         >
           <CrossIcon size="xs" />
-        </SlimButton>
+        </Button>
       </Chip>
     );
   });

package/src/inputs/multiselect/multiselect_values.module.css

@@ -12,6 +12,7 @@
   }
 
   :where(.item-container) {
+    box-sizing: border-box;
     background-color: #fff;
     border-radius: 4px;
     padding: 4px;

package/src/inputs/multiselect/multiselect_values.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import styles from './multiselect_values.module.css';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { OptionProps } from '../options/option.js';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { Chip } from '../../tokens/index.js';
 
 export interface MultiselectValueProps {
@@ -23,13 +23,13 @@ export function MultiselectValues({
     return (
       <Chip
         hAlign="start"
-        color="rgb(57, 85, 120)"
         className={clsx(styles.chip, 'tcn-multiselect-chip')}
         key={index}
         paddingInlineStart="8px"
       >
         <span>{v.props.label}</span>
-        <SlimButton
+        <Button
+          utility
           disabled={disabled}
           size="sm"
           hierarchy="tertiary"
@@ -39,7 +39,7 @@ export function MultiselectValues({
           }}
         >
           <CrossIcon size="xs" />
-        </SlimButton>
+        </Button>
       </Chip>
     );
   });

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

@@ -23,6 +23,37 @@ export default meta;
 
 type Story = StoryObj;
 
+/**
+ * Simple example of two columns side by side.
+ */
+/**
+ * columnsMinWidth sets a default minWidth on all child Columns.
+ * An explicit minWidth prop on a Column overrides it.
+ */
+export const ColumnsMinWidth: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Columns columnsMinWidth="200px">
+        <Column>
+          <Section>
+            <Detail>default (200px)</Detail>
+          </Section>
+        </Column>
+        <Column>
+          <Section>
+            <Detail>default (200px)</Detail>
+          </Section>
+        </Column>
+        <Column minWidth="400px">
+          <Section>
+            <Detail>override (400px)</Detail>
+          </Section>
+        </Column>
+      </Columns>
+    </LayoutStoryDecorator>
+  ),
+};
+
 /**
  * Simple example of two columns side by side.
  */

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

@@ -1,8 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import clsx from 'clsx';
 import { VStack } from '../../stacks/v_stack.js';
 import { SBNestedScaffold, SBContent, SBNestedRail } from './utils.js';
+import { Header } from '../header/header.js';
+import { Footer } from '../footer/footer.js';
+import { Column } from '../containers/columns/column.js';
 
 import styles from './composed_stories.module.css';
+import { Scaffold } from '../containers/scaffold.js';
 import { Rail } from '../containers/rail.js';
 
 const meta: Meta = {
@@ -30,33 +35,97 @@ const SBContainer = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export const Baseline: Story = {
+export const RailInRail: Story = {
   render: () => (
     <SBContainer>
-      <SBNestedScaffold depth={1}>
-        <SBNestedRail depth={2} minWidth="100px">
+      <SBNestedRail depth={1}>
+        <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+          Column (Start)
+        </Column>
+        <SBNestedRail depth={2}>
+          <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+            Column (Start)
+          </Column>
+          {/* Inner Body */}
           <Rail>
             <SBContent />
             <SBContent />
-            <SBContent />
           </Rail>
+          <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+            Column (End)
+          </Column>
         </SBNestedRail>
+        <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+          Column (End)
+        </Column>
+      </SBNestedRail>
+    </SBContainer>
+  ),
+};
+
+export const ScaffoldInRail: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedRail depth={1}>
+        <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+          Column (Start)
+        </Column>
+        <SBNestedScaffold depth={2}>
+          <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+          {/* Inner Body */}
+          <Scaffold>
+            <SBContent />
+            <SBContent />
+          </Scaffold>
+          <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
+        </SBNestedScaffold>
+        <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+          Column (End)
+        </Column>
+      </SBNestedRail>
+    </SBContainer>
+  ),
+};
+
+export const ScaffoldInScaffold: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1}>
+        <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+        <SBNestedScaffold depth={2}>
+          <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+          {/* Inner Body */}
+          <Scaffold>
+            <SBContent />
+            <SBContent />
+          </Scaffold>
+          <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
+        </SBNestedScaffold>
+        <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
       </SBNestedScaffold>
     </SBContainer>
   ),
 };
 
-export const WithColumns: Story = {
+export const RailInScaffold: Story = {
   render: () => (
     <SBContainer>
-      <SBNestedScaffold depth={1} utilityBar={false} footer={false}>
-        <SBNestedRail depth={2} scaffold={false}>
+      <SBNestedScaffold depth={1}>
+        <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+        <SBNestedRail depth={2}>
+          <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+            Column (Start)
+          </Column>
+          {/* Inner Body */}
           <Rail>
             <SBContent />
             <SBContent />
-            <SBContent />
           </Rail>
+          <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+            Column (End)
+          </Column>
         </SBNestedRail>
+        <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
       </SBNestedScaffold>
     </SBContainer>
   ),

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
+import { Row } from '../containers/rows/row.js';
+import { Rows } from '../containers/rows/rows.js';
+import { Detail, Section } from '../section/index.js';
+
+const meta: Meta = {
+  title: 'Layouts/Rows',
+  component: () => <></>,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Vertical container for fixed-height Row components. Theme controls row separation via the `.tcn-rows` context selector.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+/**
+ * Simple example of two rows stacked vertically.
+ */
+/**
+ * rowsMinHeight sets a default minHeight on all child Rows.
+ * An explicit minHeight prop on a Row overrides it.
+ */
+export const RowsMinHeight: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Rows rowsMinHeight="80px">
+        <Row>
+          <Section>
+            <Detail>default (80px)</Detail>
+          </Section>
+        </Row>
+        <Row>
+          <Section>
+            <Detail>default (80px)</Detail>
+          </Section>
+        </Row>
+        <Row minHeight="160px">
+          <Section>
+            <Detail>override (160px)</Detail>
+          </Section>
+        </Row>
+      </Rows>
+    </LayoutStoryDecorator>
+  ),
+};
+
+/**
+ * Simple example of two rows stacked vertically.
+ */
+export const Baseline: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Rows>
+        <Row minHeight="120px">
+          <Section>
+            <Detail>120px row</Detail>
+          </Section>
+        </Row>
+        <Row minHeight="120px">
+          <Section>
+            <Detail>120px row</Detail>
+          </Section>
+        </Row>
+      </Rows>
+    </LayoutStoryDecorator>
+  ),
+};

package/src/layouts/__stories__/utils.tsx

@@ -2,15 +2,9 @@ import type { PropsWithChildren } from 'react';
 import clsx from 'clsx';
 
 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 '../containers/rail.js';
-import { Column } from '../containers/columns/column.js';
-import { Box, Spacer } from '../../stacks/index.js';
-import { UtilityStrip } from '../containers/utility_strip/utility_strip.js';
-import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { Box } from '../../stacks/index.js';
 
 import styles from './composed_stories.module.css';
 
@@ -22,10 +16,6 @@ const FloatingLabel = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-const VerticalLabel = ({ children }: { children: React.ReactNode }) => {
-  return <span className={styles.verticalLabel}>{children}</span>;
-};
-
 export const SBContent: React.FC<
   PropsWithChildren<{ className?: string; minHeight?: string; minWidth?: string }>
 > = ({ className, children, minHeight = '200px', minWidth = '200px' }) => {
@@ -42,43 +32,14 @@ export const SBContent: React.FC<
   );
 };
 
-const SBActionBox = ({ children }: { children: React.ReactNode }) => {
-  return <span className={styles.actionBox}>{children}</span>;
-};
-
-const SBActions = () => {
-  return (
-    <>
-      <Spacer />
-      <SBActionBox>
-        <SearchIcon />
-      </SBActionBox>
-      <SBActionBox>
-        <SearchIcon />
-      </SBActionBox>
-      <SBActionBox>
-        <SearchIcon />
-      </SBActionBox>
-    </>
-  );
-};
-
 interface SBNestedRailProps extends RailProps {
   depth?: number;
-  scaffold?: boolean;
-  side?: boolean;
-  utilityStrip?: boolean;
-  label?: boolean;
 }
 
 export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
   children,
   className,
   depth = 1,
-  scaffold = true,
-  side = true,
-  utilityStrip = true,
-  label = true,
   height = '100%',
   ...props
 }) => {
@@ -89,51 +50,20 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
       data-depth={depth}
       {...props}
     >
-      {label && <FloatingLabel>Rail</FloatingLabel>}
-      {utilityStrip && (
-        <UtilityStrip className={clsx(styles.utilityStrip, styles.secondary)}>
-          <VerticalLabel>Utility Strip</VerticalLabel>
-          <SBActions />
-        </UtilityStrip>
-      )}
+      <FloatingLabel>Rail</FloatingLabel>
       {children}
-      {side && (
-        <Column className={clsx(styles.side, styles.secondary)} minWidth="200px">
-          <span>Column</span>
-        </Column>
-      )}
-      {scaffold && (
-        <SBNestedScaffold
-          depth={depth + 1}
-          utilityBar={false}
-          footer={false}
-          minWidth={'fit-content'}
-        >
-          <Scaffold>
-            <SBContent />
-            <SBContent />
-            <SBContent />
-          </Scaffold>
-        </SBNestedScaffold>
-      )}
     </Rail>
   );
 };
 
 interface SBNestedScaffoldProps extends ScaffoldProps {
   depth?: number;
-  header?: boolean;
-  utilityBar?: boolean;
-  footer?: boolean;
 }
 
 export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>> = ({
   children,
   className,
   depth = 1,
-  header = true,
-  utilityBar = true,
-  footer = true,
   height = '100%',
   ...props
 }) => {
@@ -145,19 +75,7 @@ export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>
       {...props}
     >
       <FloatingLabel>Scaffold</FloatingLabel>
-      {header && (
-        <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
-      )}
-      {utilityBar && (
-        <UtilityBar className={clsx(styles.utilityBar, styles.secondary)}>
-          Utility Bar
-          <SBActions />
-        </UtilityBar>
-      )}
       {children}
-      {footer && (
-        <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
-      )}
     </Scaffold>
   );
 };

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

@@ -2,8 +2,9 @@
   :where(.column) {
     height: 100%;
     min-height: 100%;
-    width: auto;
-    min-width: 0;
+    width: var(--columns-width, auto);
+    min-width: var(--columns-min-width, 0);
+    max-width: var(--columns-max-width, none);
     flex-grow: 0;
   }
 

package/src/layouts/containers/columns/columns.tsx

@@ -1,15 +1,41 @@
 import React from 'react';
 import { clsx } from 'clsx';
 import { Rail, type RailProps } from '../rail.js';
+import { removeUndefinedProperties } from '../../../stacks/utils/remove_undefined_properties.js';
 
-export interface ColumnsProps extends Omit<RailProps, 'as'> {}
+export interface ColumnsOwnProps {
+  columnsMinWidth?: string | number;
+  columnsWidth?: string | number;
+  columnsMaxWidth?: string | number;
+}
+
+export interface ColumnsProps extends Omit<RailProps, 'as'>, ColumnsOwnProps {}
 
 export const Columns = React.forwardRef<HTMLElement, ColumnsProps>(function Columns(
-  { children, className, ...props }: ColumnsProps,
+  {
+    children,
+    className,
+    columnsMinWidth,
+    columnsWidth,
+    columnsMaxWidth,
+    style,
+    ...props
+  }: ColumnsProps,
   ref
 ) {
+  const columnVars = removeUndefinedProperties({
+    '--columns-min-width': columnsMinWidth,
+    '--columns-width': columnsWidth,
+    '--columns-max-width': columnsMaxWidth,
+  });
+
   return (
-    <Rail ref={ref} className={clsx('tcn-columns', className)} {...props}>
+    <Rail
+      ref={ref}
+      className={clsx('tcn-columns', className)}
+      style={{ ...columnVars, ...style }}
+      {...props}
+    >
       {children}
     </Rail>
   );

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

@@ -1,55 +1,53 @@
 @layer tcn-system {
+  /* Outer or standalone scaffold fills its container */
   :where(.scaffold) {
-    max-height: 100%;
+    height: 100%;
     width: 100%;
-    height: auto;
+    max-height: 100%;
+    overflow: auto;
   }
 
+  /* Outer or standalone Rail fills its container */
   :where(.rail) {
     max-width: 100%;
     height: 100%;
-    width: auto;
-  }
-
-  :where(.container) > :where(.container-stack) {
     width: 100%;
-    height: 100%;
+    overflow: auto;
   }
 
-  /* Scaffold base — layout frame only, no overflow clipping */
-  :where(.scaffold) > :where(.scaffold-stack) {
-    overflow-y: auto;
+  /* Nested Containers should grow via flex-grow */
+  :where(.container) > .container {
+    flex-grow: 1;
+    /* Important - override the Stack css  */
+    flex-shrink: unset;
   }
 
-  /* Switching direction - rail fills scaffold width */
-  :where(.scaffold) > :where(.scaffold-stack) > :where(.rail) {
-    width: 100%;
+  /* Child Scaffolds should use flex-grow to manage height - scroll vertically */
+  :where(.container) > .scaffold {
+    overflow-y: auto;
+    min-height: 0;
   }
 
-  /* Switching direction - scaffold fills rail height */
-  :where(.rail) > :where(.rail-stack) > :where(.scaffold) {
-    height: 100%;
+  :where(.scaffold) > .scaffold {
+    height: auto;
   }
 
-  /* Rail base — layout frame only, no overflow clipping */
-  :where(.rail) > :where(.rail-stack) {
+  /* Child Rails should use flex-grow to manage width - scroll horizontally */
+  :where(.container) > .rail {
     overflow-x: auto;
+    min-width: 0;
   }
 
-  /* container grows to fill remaining space */
-  :where(.container-stack) > :where(.container) {
-    flex-grow: 1;
+  :where(.rail) > .rail {
+    width: auto;
   }
 
-  /* container nested Scaffold scrolls vertically */
-  :where(.container-stack) > :where(.scaffold) {
-    min-height: 0;
-    overflow-y: auto;
+  /* The opposite axis of the flex grow should fill via height or width */
+  :where(.rail) > .container {
+    height: 100%;
   }
 
-  /*  container nested Rail scrolls horizontally */
-  :where(.container-stack) > :where(.rail) {
-    min-width: 0;
-    overflow-x: auto;
+  :where(.scaffold) > .container {
+    width: 100%;
   }
 }