@tcn/ui 0.14.0 → 0.16.0

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

@@ -0,0 +1,14 @@
+@layer tcn-system {
+  :where(.column) {
+    height: 100%;
+    min-height: 100%;
+    width: auto;
+    min-width: 0;
+    flex-grow: 0;
+  }
+
+  :where(.column[data-width="fill"]) {
+    flex-grow: 1;
+    width: 0; /* let flex-grow determine width, not content */
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+import styles from './column.module.css';
+
+export interface ColumnProps extends Omit<VStackProps, 'as'> {}
+
+export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column(
+  { children, className, ...props }: ColumnProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as="section"
+      className={clsx('tcn-column', styles['column'], className)}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Rail, type RailProps } from '../rail.js';
+
+export interface ColumnsProps extends Omit<RailProps, 'as'> {}
+
+export const Columns = React.forwardRef<HTMLElement, ColumnsProps>(function Columns(
+  { children, className, ...props }: ColumnsProps,
+  ref
+) {
+  return (
+    <Rail ref={ref} className={clsx('tcn-columns', className)} {...props}>
+      {children}
+    </Rail>
+  );
+});

package/src/layouts/index.ts

@@ -1,4 +1,4 @@
-export * from './column/column.js';
+export { Column, type ColumnProps } from './containers/columns/column.js';
 export * from './divider/divider.js';
 export * from './grid/grid.js';
 export * from './list/item.js';
@@ -13,16 +13,14 @@ 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 './containers/rail.js';
-export { Side, type SideProps } from './containers/side/side.js';
+export { Columns, type ColumnsProps } from './containers/columns/columns.js';
 export {
   UtilityStrip,
   type UtilityStripProps,

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

@@ -1,7 +1,8 @@
 import { Key } from '../../../tokens/key/key.js';
 import { Value } from '../../../tokens/value/value.js';
-import { Row } from '../../row/row.js';
+import { Term } from '../../../tokens/term/term.js';
 import { Section } from '../section.js';
+import { Detail } from '../detail.js';
 import styles from './section.stories.module.css';
 import { Heading } from '../heading.js';
 
@@ -17,56 +18,84 @@ export const Default = () => {
       <div className={styles['stories-container']}>
         <Section>
           <Heading>Section 1</Heading>
-          <Rows />
+          <Detail>
+            <SBTermGroup />
+          </Detail>
           <Section>
             <Heading>Subsection 1 - 1</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 1 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 1 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 1 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
           </Section>
           <Section>
             <Heading>Subsection 1 - 2</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 2 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 2 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 2 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
           </Section>
           <Section>
             <Heading>Subsection 1 - 3</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 3 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 3 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 3 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
               <Section>
                 <Heading>Subsection 1 - 3 - 3 - 1</Heading>
-                <Rows />
+                <Detail>
+                  <SBTermGroup />
+                </Detail>
               </Section>
             </Section>
           </Section>
@@ -76,77 +105,77 @@ export const Default = () => {
   );
 };
 
-const Rows = () => {
+const SBTermGroup = () => {
   return (
     <>
-      <Row>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
+      </Term>
     </>
   );
 };

package/src/layouts/section/detail.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+
+export const Detail = React.forwardRef<HTMLDivElement, VStackProps>(function Detail(
+  { children, className, ...props },
+  ref
+) {
+  return (
+    <VStack ref={ref} className={clsx(className, 'tcn-detail')} {...props}>
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/section/index.ts

@@ -0,0 +1,3 @@
+export { Section } from './section.js';
+export { Heading, type HeadingOwnProps } from './heading.js';
+export { Detail } from './detail.js';

package/src/layouts/section/section.module.css

@@ -2,40 +2,4 @@
   :where(.section) {
     position: relative;
   }
-
-  :where(.heading) {
-    position: sticky;
-    height: 23px;
-    z-index: 4;
-    padding-inline-end: 8px;
-    user-select: none;
-  }
-
-  :where(.section > .heading) {
-    top: 0;
-    padding-inline: 8px 8px;
-    z-index: 3;
-  }
-
-  :where(.section > .section > .heading) {
-    top: 30px;
-    padding-inline: 12px 8px;
-    z-index: 2;
-  }
-
-  :where(.section > .section > .section > .heading) {
-    top: 60px;
-    padding-inline: 16px 8px;
-    z-index: 1;
-  }
-
-  :where(.section > .section > .section > .section > .heading) {
-    top: 90px;
-    padding-inline: 20px 8px;
-    z-index: 0;
-  }
-
-  .section > :not(.heading, .section) {
-    padding-inline-end: 8px;
-  }
 }

package/src/surfaces/page/page.stories.tsx

@@ -1,7 +1,8 @@
 import { Header } from '../../layouts/header/header.js';
-import { Footer, Rail, Scaffold } from '../../layouts/index.js';
+import { Detail, Footer, Scaffold } from '../../layouts/index.js';
+import { Column } from '../../layouts/containers/columns/column.js';
+import { Columns } from '../../layouts/containers/columns/columns.js';
 import { BodyText } from '../../typography/body_text/body_text.js';
-import { Section } from '../../layouts/section/section.js';
 import { Title } from '../../typography/title/title.js';
 import { Page } from './page.js';
 import { ZStack } from '../../stacks/z_stack.js';
@@ -21,9 +22,9 @@ export const Baseline = () => {
           <Title>Page Header</Title>
         </Header>
         <Scaffold>
-          <Section>
+          <Detail>
             <BodyText>Page Content</BodyText>
-          </Section>
+          </Detail>
         </Scaffold>
 
         <Footer>
@@ -34,33 +35,36 @@ export const Baseline = () => {
   );
 };
 
-export const WithPanelBody = () => {
+export const WithColumns = () => {
   return (
     <ZStack height="100%" width="100%" minHeight="600px" minWidth="600px">
       <Page>
-        <Rail>
-          <Panel>
-            <Header>
-              <Title>Primary</Title>
-            </Header>
-            <Scaffold>
-              <Section>
-                <BodyText>Page Content</BodyText>
-              </Section>
-            </Scaffold>
-          </Panel>
-
-          <Panel width="300px">
-            <Header>
-              <Title>Secondary</Title>
-            </Header>
-            <Scaffold>
-              <Section>
-                <BodyText>Supporting Content</BodyText>
-              </Section>
-            </Scaffold>
-          </Panel>
-        </Rail>
+        <Columns>
+          <Column minWidth="400px" width="fill">
+            <Panel>
+              <Header>
+                <Title>Left Panel</Title>
+              </Header>
+              <Scaffold>
+                <Detail>
+                  <BodyText>Left panel content</BodyText>
+                </Detail>
+              </Scaffold>
+            </Panel>
+          </Column>
+          <Column minWidth="400px">
+            <Panel>
+              <Header>
+                <Title>Right Panel</Title>
+              </Header>
+              <Scaffold>
+                <Detail>
+                  <BodyText>Right panel content</BodyText>
+                </Detail>
+              </Scaffold>
+            </Panel>
+          </Column>
+        </Columns>
       </Page>
     </ZStack>
   );