npm - @tcn/ui - Versions diffs - 0.7.0 → 0.8.1 - Mend

@tcn/ui 0.7.0 → 0.8.1

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 (137) hide show

package/dist/{Color-6BZIO3FS-CWWwv-fq.js → Color-6BZIO3FS-C9xkPWgz.js} +2 -2
package/dist/{Color-6BZIO3FS-CWWwv-fq.js.map → Color-6BZIO3FS-C9xkPWgz.js.map} +1 -1
package/dist/{WithTooltip-65CFNBJE-DvcUZizH.js → WithTooltip-65CFNBJE-DEnh547F.js} +2 -2
package/dist/{WithTooltip-65CFNBJE-DvcUZizH.js.map → WithTooltip-65CFNBJE-DEnh547F.js.map} +1 -1
package/dist/actions/__docs__/components/showcase.js +1 -1
package/dist/actions/index.d.ts +1 -0
package/dist/actions/index.d.ts.map +1 -1
package/dist/actions/index.js +8 -6
package/dist/actions/index.js.map +1 -1
package/dist/body.css +1 -0
package/dist/form/field_presenters/field_presenter.d.ts +2 -2
package/dist/form/field_presenters/field_presenter.d.ts.map +1 -1
package/dist/form/field_presenters/field_presenter.js.map +1 -1
package/dist/formatter-EIJCOSYU-DWmgEY3b.js +6 -0
package/dist/{formatter-EIJCOSYU-D6nmx63h.js.map → formatter-EIJCOSYU-DWmgEY3b.js.map} +1 -1
package/dist/inputs/color_input/color_input.js +10 -9
package/dist/inputs/color_input/color_input.js.map +1 -1
package/dist/inputs/date_picker/date_picker_header.js +7 -6
package/dist/inputs/date_picker/date_picker_header.js.map +1 -1
package/dist/inputs/date_picker/date_picker_input.js +3 -2
package/dist/inputs/date_picker/date_picker_input.js.map +1 -1
package/dist/inputs/date_picker/date_picker_time_selector.js +3 -2
package/dist/inputs/date_picker/date_picker_time_selector.js.map +1 -1
package/dist/inputs/date_picker/date_picker_year_input.js +6 -5
package/dist/inputs/date_picker/date_picker_year_input.js.map +1 -1
package/dist/inputs/date_picker/date_picker_year_selector.js +3 -2
package/dist/inputs/date_picker/date_picker_year_selector.js.map +1 -1
package/dist/inputs/multiselect/multiselect_inline_values.js +8 -7
package/dist/inputs/multiselect/multiselect_inline_values.js.map +1 -1
package/dist/inputs/multiselect/multiselect_values.js +3 -2
package/dist/inputs/multiselect/multiselect_values.js.map +1 -1
package/dist/inputs/phone_number_input/phone_number_input.js +44 -43
package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
package/dist/inputs/select/select.js +3 -2
package/dist/inputs/select/select.js.map +1 -1
package/dist/inputs/suggestions/suggestion_list.js +3 -2
package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
package/dist/layouts/body/body.d.ts +6 -0
package/dist/layouts/body/body.d.ts.map +1 -0
package/dist/layouts/body/body.js +21 -0
package/dist/layouts/body/body.js.map +1 -0
package/dist/layouts/index.d.ts +5 -0
package/dist/layouts/index.d.ts.map +1 -1
package/dist/layouts/index.js +38 -22
package/dist/layouts/index.js.map +1 -1
package/dist/layouts/rail/main/main.d.ts +6 -0
package/dist/layouts/rail/main/main.d.ts.map +1 -0
package/dist/layouts/rail/main/main.js +21 -0
package/dist/layouts/rail/main/main.js.map +1 -0
package/dist/layouts/rail/rail.d.ts +9 -0
package/dist/layouts/rail/rail.d.ts.map +1 -0
package/dist/layouts/rail/rail.js +55 -0
package/dist/layouts/rail/rail.js.map +1 -0
package/dist/layouts/rail/side/side.d.ts +6 -0
package/dist/layouts/rail/side/side.d.ts.map +1 -0
package/dist/layouts/rail/side/side.js +21 -0
package/dist/layouts/rail/side/side.js.map +1 -0
package/dist/layouts/rail/utility_strip/utility_strip.d.ts +9 -0
package/dist/layouts/rail/utility_strip/utility_strip.d.ts.map +1 -0
package/dist/layouts/rail/utility_strip/utility_strip.js +32 -0
package/dist/layouts/rail/utility_strip/utility_strip.js.map +1 -0
package/dist/layouts/scaffold/scaffold.js +31 -31
package/dist/layouts/scaffold/scaffold.js.map +1 -1
package/dist/layouts/table/table.d.ts +27 -0
package/dist/layouts/table/table.d.ts.map +1 -0
package/dist/layouts/table/table.js +70 -0
package/dist/layouts/table/table.js.map +1 -0
package/dist/main.css +1 -0
package/dist/navigation/tabs/primitives/tabs_list.d.ts.map +1 -1
package/dist/navigation/tabs/primitives/tabs_list.js +61 -21
package/dist/navigation/tabs/primitives/tabs_list.js.map +1 -1
package/dist/navigation/tabs/state/link/tab_link.d.ts.map +1 -1
package/dist/navigation/tabs/state/link/tab_link.js +20 -17
package/dist/navigation/tabs/state/link/tab_link.js.map +1 -1
package/dist/navigation/tabs/state/tab.d.ts.map +1 -1
package/dist/navigation/tabs/state/tab.js +8 -3
package/dist/navigation/tabs/state/tab.js.map +1 -1
package/dist/rail.css +1 -0
package/dist/scaffold.css +1 -1
package/dist/{showcase-DK557szS.js → showcase-y9D3_Y8T.js} +3413 -3396
package/dist/showcase-y9D3_Y8T.js.map +1 -0
package/dist/side.css +1 -0
package/dist/stacks/box/box.d.ts +2 -2
package/dist/stacks/box/box.d.ts.map +1 -1
package/dist/stacks/box/box.js.map +1 -1
package/dist/stacks/story_components/style_box.d.ts +1 -1
package/dist/stacks/story_components/style_box.d.ts.map +1 -1
package/dist/surfaces/alert/alert.js +3 -2
package/dist/surfaces/alert/alert.js.map +1 -1
package/dist/surfaces/pop_confirm/pop_confirm.js +13 -2
package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
package/dist/{syntaxhighlighter-ED5Y7EFY-DaMS-2cF.js → syntaxhighlighter-ED5Y7EFY-CqInEOwQ.js} +2 -2
package/dist/{syntaxhighlighter-ED5Y7EFY-DaMS-2cF.js.map → syntaxhighlighter-ED5Y7EFY-CqInEOwQ.js.map} +1 -1
package/dist/table.css +1 -0
package/dist/table.module-BtSxOntS.js +5 -0
package/dist/table.module-BtSxOntS.js.map +1 -0
package/dist/themes/themes/ergo/ergo_theme.css +1 -1
package/dist/themes/themes/ergo/ergo_theme.js +179 -44
package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
package/dist/utility_strip.css +1 -0
package/package.json +2 -2
package/src/actions/index.ts +1 -0
package/src/form/field_presenters/field_presenter.ts +3 -3
package/src/layouts/__stories__/composed.stories.tsx +113 -0
package/src/layouts/__stories__/composed_stories.module.css +142 -0
package/src/layouts/__stories__/utils.tsx +174 -0
package/src/layouts/body/body.module.css +11 -0
package/src/layouts/body/body.tsx +23 -0
package/src/layouts/index.ts +10 -0
package/src/layouts/rail/__stories__/rail.stories.tsx +64 -0
package/src/layouts/rail/__stories__/rail_stories.module.css +25 -0
package/src/layouts/rail/main/main.module.css +7 -0
package/src/layouts/rail/main/main.tsx +26 -0
package/src/layouts/rail/rail.module.css +10 -0
package/src/layouts/rail/rail.tsx +62 -0
package/src/layouts/rail/side/side.module.css +8 -0
package/src/layouts/rail/side/side.tsx +25 -0
package/src/layouts/rail/utility_strip/utility_strip.module.css +6 -0
package/src/layouts/rail/utility_strip/utility_strip.tsx +40 -0
package/src/layouts/scaffold/__stories__/scaffold.stories.tsx +53 -0
package/src/layouts/scaffold/__stories__/scaffold_stories.module.css +31 -0
package/src/layouts/scaffold/scaffold.module.css +4 -0
package/src/layouts/table/__stories__/mock_data.ts +420 -0
package/src/layouts/table/__stories__/table.stories.tsx +326 -0
package/src/layouts/table/__stories__/table_stories.module.css +30 -0
package/src/layouts/table/table.module.css +37 -0
package/src/layouts/table/table.tsx +132 -0
package/src/navigation/tabs/primitives/tabs_list.tsx +46 -2
package/src/navigation/tabs/state/link/tab_link.tsx +4 -1
package/src/navigation/tabs/state/tab.tsx +10 -0
package/src/stacks/box/box.tsx +1 -1
package/src/surfaces/modal/__stories__/modal.stories.tsx +5 -5
package/src/surfaces/panel/__stories__/panel.stories.tsx +114 -1
package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +4 -2
package/src/themes/themes/ergo/ergo_theme.css +178 -43
package/dist/formatter-EIJCOSYU-D6nmx63h.js +0 -6
package/dist/showcase-DK557szS.js.map +0 -1

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { VStack } from '../../stacks/v_stack.js';
+import { SBNestedScaffold, SBContent, SBNestedRail } from './utils.js';
+import styles from './composed_stories.module.css';
+import clsx from 'clsx';
+import { Body } from '../body/body.js';
+const meta: Meta = {
+  title: 'Layouts/Composed',
+  component: () => <></>,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Examples of nested layout compositions.',
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj;
+const SBContainer = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <VStack height="100vh" width="100%" padding="16px" className={styles.sbContainer}>
+      {children}
+    </VStack>
+  );
+};
+export const Baseline: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1}>
+        <SBNestedRail depth={2}>
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </SBNestedRail>
+      </SBNestedScaffold>
+    </SBContainer>
+  ),
+};
+export const ScaffoldWithBody: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1}>
+        <SBContent />
+        <SBContent />
+        <SBContent />
+      </SBNestedScaffold>
+    </SBContainer>
+  ),
+};
+export const ScaffoldWithMain: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1}>
+        <SBNestedRail depth={2} side={false} utilityStrip={false} scaffold={false}>
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </SBNestedRail>
+      </SBNestedScaffold>
+    </SBContainer>
+  ),
+};
+export const RailWithMain: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedRail depth={1} scaffold={false}>
+        <SBContent />
+        <SBContent />
+        <SBContent />
+      </SBNestedRail>
+    </SBContainer>
+  ),
+};
+export const RailWithBody: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedRail depth={1} scaffold={false}>
+        <Body className={clsx(styles.body, styles.secondary)}>
+          Body
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </Body>
+      </SBNestedRail>
+    </SBContainer>
+  ),
+};
+export const WithColumns: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1} utilityBar={false} body={false} footer={false}>
+        <SBNestedRail depth={2} scaffold={false}>
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </SBNestedRail>
+      </SBNestedScaffold>
+    </SBContainer>
+  ),
+};

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

@@ -0,0 +1,142 @@
+/* Pastel Color Palette */
+.sb-container {
+  /* 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;
+  color: white;
+}
+.secondary {
+  padding: 8px 16px;
+}
+.primary {
+  padding: 8px;
+  &[data-depth="1"] {
+    --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);
+  }
+  &[data-depth="2"] {
+    --bg: var(--pastel-berry-bg);
+    --bg-1: var(--pastel-berry-1);
+    --bg-2: var(--pastel-berry-2);
+    --bg-3: var(--pastel-berry-3);
+    --bg-4: var(--pastel-berry-4);
+  }
+  &[data-depth="3"] {
+    --bg: var(--pastel-forest-bg);
+    --bg-1: var(--pastel-forest-1);
+    --bg-2: var(--pastel-forest-2);
+    --bg-3: var(--pastel-forest-3);
+    --bg-4: var(--pastel-forest-4);
+  }
+}
+/* Vertical Layouts */
+.scaffold,
+.rail {
+  background: var(--bg);
+}
+.header {
+  background: var(--bg-1);
+}
+.utilityBar {
+  background: var(--bg-2);
+}
+.footer {
+  background: var(--bg-3);
+}
+.body {
+  background: var(--bg-4);
+  gap: 8px;
+}
+/* Horizontal Layouts */
+.utilityStrip {
+  background: var(--bg-1);
+  gap: 8px;
+}
+.side {
+  background: var(--bg-2);
+}
+.main {
+  background: var(--bg-3);
+  gap: 8px;
+}
+.content {
+  background: rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.action-box {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(0, 0, 0, 0.25);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+.floating-label {
+  height: 0;
+  z-index: 2;
+  overflow: visible;
+  color: var(--font-color);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.floating-label-chip {
+  padding: 4px;
+  border-radius: 4px;
+  /* 100% bg at top → 75% opacity of bg at bottom so overlapping content shows through */
+  background: linear-gradient(
+    to bottom,
+    var(--bg) 0%,
+    color-mix(in srgb, var(--bg) 75%, transparent) 100%
+  );
+  color: var(--font-color);
+}
+.vertical-label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}

package/src/layouts/__stories__/utils.tsx ADDED Viewed

@@ -0,0 +1,174 @@
+import type { PropsWithChildren } from 'react';
+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 { Box, Spacer } from '../../stacks/index.js';
+import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import styles from './composed_stories.module.css';
+const FloatingLabel = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className={styles.floatingLabel}>
+      <span className={styles.floatingLabelChip}>{children}</span>
+    </div>
+  );
+};
+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' }) => {
+  return (
+    <Box
+      minHeight={minHeight}
+      minWidth={minWidth}
+      className={clsx(styles.content, className)}
+    >
+      ↔ {minWidth}
+      <br />↕ {minHeight}
+      {children}
+    </Box>
+  );
+};
+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;
+  main?: boolean;
+  utilityStrip?: boolean;
+  label?: boolean;
+  mainLabel?: boolean;
+}
+export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
+  children,
+  className,
+  depth = 1,
+  scaffold = true,
+  side = true,
+  main = true,
+  utilityStrip = true,
+  label = true,
+  mainLabel = true,
+  ...props
+}) => {
+  return (
+    <Rail
+      className={clsx(styles.rail, styles.primary, className)}
+      data-depth={depth}
+      {...props}
+    >
+      {label && <FloatingLabel>Rail</FloatingLabel>}
+      {utilityStrip && (
+        <UtilityStrip className={clsx(styles.utilityStrip, styles.secondary)}>
+          <VerticalLabel>Utility Strip</VerticalLabel>
+          <SBActions />
+        </UtilityStrip>
+      )}
+      {main && (
+        <Main className={clsx(styles.main, styles.secondary)} width="200px">
+          {mainLabel && <>Main</>}
+          {children}
+        </Main>
+      )}
+      {!main && children}
+      {side && (
+        <Side className={clsx(styles.side, styles.secondary)} minWidth="200px">
+          <span>Side/Column/WIP</span>
+        </Side>
+      )}
+      {scaffold && (
+        <SBNestedScaffold
+          depth={depth + 1}
+          utilityBar={false}
+          footer={false}
+          minWidth={'fit-content'}
+        >
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </SBNestedScaffold>
+      )}
+    </Rail>
+  );
+};
+interface SBNestedScaffoldProps extends ScaffoldProps {
+  depth?: number;
+  header?: boolean;
+  utilityBar?: boolean;
+  body?: boolean;
+  footer?: boolean;
+}
+export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>> = ({
+  children,
+  className,
+  depth = 1,
+  header = true,
+  utilityBar = true,
+  body = true,
+  footer = true,
+  ...props
+}) => {
+  return (
+    <Scaffold
+      className={clsx(styles.scaffold, styles.primary, className)}
+      data-depth={depth}
+      {...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>
+      )}
+      {body && (
+        <Body className={clsx(styles.body, styles.secondary)}>Body {children}</Body>
+      )}
+      {!body && children}
+      {footer && (
+        <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
+      )}
+    </Scaffold>
+  );
+};

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

@@ -0,0 +1,11 @@
+@layer tcn-system {
+  .body {
+    min-height: 0;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+  }
+  :where(.tcn-main) {
+    height: auto;
+  }
+}

package/src/layouts/body/body.tsx ADDED Viewed

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

package/src/layouts/index.ts CHANGED Viewed

@@ -15,3 +15,13 @@ export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
 export { Row } from './row/row.js';
 export { Section } from './section/section.js';
 export { Heading, type HeadingOwnProps } from './section/heading.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,
+  type UtilityStripProps,
+} from './rail/utility_strip/utility_strip.js';

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

@@ -0,0 +1,64 @@
+import { Main } from '../main/main.js';
+import { Rail } from '../rail.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Side } from '../side/side.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import styles from './rail_stories.module.css';
+const meta: Meta<typeof Rail> = {
+  title: 'Layouts/Rail',
+  component: Rail,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A rail component that lays out content in a horizontal hierarchy.',
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Rail>;
+const Content = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <VStack hAlign="start" className={styles.content}>
+      {children}
+    </VStack>
+  );
+};
+export const Baseline: Story = {
+  args: {
+    height: '100vh',
+  },
+  render: () => (
+    <Rail height="100vh" className={styles.rail}>
+      <Side className={styles.side}>
+        <p>Side (Start)</p>
+        <p>Fills available space</p>
+        <p>Scrolls horizontally</p>
+      </Side>
+      <Main className={styles.main}>
+        <Content>
+          <p>Main</p>
+          <p>Fills available space</p>
+          <p>Scrolls horizontally</p>
+        </Content>
+        <Content />
+        <Content />
+        <Content />
+        <Content />
+      </Main>
+      <Side className={styles.side}>
+        <p>Side (End)</p>
+        <p>Fills available space</p>
+        <p>Scrolls horizontally</p>
+      </Side>
+    </Rail>
+  ),
+};

package/src/layouts/rail/__stories__/rail_stories.module.css ADDED Viewed

@@ -0,0 +1,25 @@
+.rail {
+  :global(.tcn-rail-stack) {
+    gap: 8px;
+  }
+}
+.main {
+  background-color: #f1f5f9;
+  gap: 16px;
+  padding: 16px 0;
+}
+.side {
+  width: 200px;
+  background-color: #3b82f6;
+  color: white;
+  padding: 16px 0;
+}
+.content {
+  background-color: #e5e7eb;
+  min-width: 200px;
+  height: 100%;
+  padding: 16px;
+}

package/src/layouts/rail/main/main.module.css ADDED Viewed

@@ -0,0 +1,7 @@
+@layer tcn-system {
+  :where(.main) {
+    min-width: 0;
+    flex-grow: 1;
+    height: 100%;
+  }
+}

package/src/layouts/rail/main/main.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
+// Styles
+import styles from './main.module.css';
+export interface MainProps extends Omit<HStackProps, 'as'> {}
+// WIP: This component is not fully implemented.
+export const Main = React.forwardRef<HTMLElement, MainProps>(function Main(
+  { children, className, overflowX = 'auto', ...props }: MainProps,
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      as="div"
+      overflowX={overflowX}
+      className={clsx(styles['main'], className, 'tcn-main')}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

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

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

package/src/layouts/rail/rail.tsx ADDED Viewed

@@ -0,0 +1,62 @@
+import React from 'react';
+import { clsx } from 'clsx';
+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';
+export interface RailProps extends Omit<BoxProps, 'as'> {
+  vAlign?: Alignment;
+  hAlign?: Alignment;
+}
+// WIP: This component is not fully implemented.
+export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
+  {
+    children,
+    width,
+    height = '100%',
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    hAlign = 'start',
+    vAlign = 'start',
+    className,
+    ...props
+  }: RailProps,
+  ref
+) {
+  return (
+    <Box
+      ref={ref}
+      width={width}
+      height={height}
+      minWidth={minWidth}
+      maxWidth={maxWidth}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      data-h-alignment={hAlign}
+      data-v-alignment={vAlign}
+      className={clsx(className, 'tcn-rail')}
+      {...props}
+    >
+      <HStack
+        as="section"
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        hAlign={hAlign}
+        vAlign={vAlign}
+        ref={ref}
+        className={clsx(styles['rail-stack'], 'tcn-rail-stack')}
+        zIndex={0}
+      >
+        {children}
+      </HStack>
+    </Box>
+  );
+});

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

@@ -0,0 +1,8 @@
+@layer tcn-system {
+  :where(.side) {
+    min-width: 0;
+    height: 100%;
+    flex-grow: 0;
+    width: auto;
+  }
+}