@tcn/ui 0.9.0 → 0.10.0

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

@@ -1,25 +0,0 @@
-.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

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

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

@@ -1,26 +0,0 @@
-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/scaffold/__stories__/scaffold.stories.tsx

@@ -1,53 +0,0 @@
-import { Scaffold } from '../scaffold.js';
-import { Header } from '../../header/header.js';
-import { UtilityBar } from '../../utility_bar/utility_bar.js';
-import { VBody } from '../../body/v_body.js';
-import { Footer } from '../../footer/footer.js';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { HStack } from '../../../stacks/h_stack.js';
-
-import styles from './scaffold_stories.module.css';
-
-const meta: Meta<typeof Scaffold> = {
-  title: 'Layouts/Scaffold',
-  component: Scaffold,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'A scaffold component that lays out content in a vertical hierarchy.',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Scaffold>;
-
-const Content = () => {
-  return <HStack className={styles.content} />;
-};
-
-export const Baseline: Story = {
-  args: {
-    height: '100vh',
-  },
-  render: () => (
-    <Scaffold height="100vh">
-      <Header className={styles.header}>Header</Header>
-      <UtilityBar className={styles.utilityBar}>Utility Bar</UtilityBar>
-      <VBody className={styles.body}>
-        <p>(V)Body</p>
-        <p>Fills available space</p>
-        <p>Scrolls vertically</p>
-        <Content />
-        <Content />
-        <Content />
-        <Content />
-        <Content />
-      </VBody>
-      <Footer className={styles.footer}>Footer</Footer>
-    </Scaffold>
-  ),
-};

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

@@ -1,31 +0,0 @@
-.header {
-  height: 56px;
-  background-color: #3b82f6;
-  color: white;
-}
-
-.utilityBar {
-  height: 40px;
-  background-color: #8b5cf6;
-  color: white;
-}
-
-.body {
-  background-color: #f1f5f9;
-}
-
-.footer {
-  height: 48px;
-  background-color: #10b981;
-  color: white;
-}
-
-.level {
-  background-color: #0ab4d2;
-  color: white;
-}
-
-.content {
-  background-color: #e5e7eb;
-  height: 100px;
-}

package/src/surfaces/panel/h_panel.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { clsx } from 'clsx';
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import { HStack } from '../../stacks/h_stack.js';
-import type { Alignment } from '../../stacks/types/alignment.js';
-// Styles
-import styles from './panel.module.css';
-
-export interface HPanelProps extends Omit<BoxProps, 'as'> {
-  vAlign?: Alignment;
-  hAlign?: Alignment;
-}
-
-export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel(
-  {
-    children,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    hAlign,
-    vAlign = 'start',
-    className,
-    ...props
-  }: HPanelProps,
-  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(styles['panel'], className, 'panel', 'tcn-panel', 'tcn-h-panel')}
-      {...props}
-    >
-      <HStack
-        as="section"
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        hAlign={hAlign}
-        vAlign={vAlign}
-        ref={ref}
-        className={clsx(
-          styles['panel-stack'],
-          className,
-          'panel-stack',
-          'tcn-panel-stack'
-        )}
-        zIndex={0}
-      >
-        {children}
-      </HStack>
-    </Box>
-  );
-});

package/src/surfaces/panel/v_panel.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
-import clsx from 'clsx';
-
-export type VPanelProps = ScaffoldProps;
-
-export const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel(
-  { children, className, ...props }: VPanelProps,
-  ref
-) {
-  return (
-    <Scaffold
-      ref={ref}
-      className={clsx('tcn-surface', 'tcn-panel', 'tcn-v-panel', className)}
-      {...props}
-    >
-      {children}
-    </Scaffold>
-  );
-});