@tcn/ui 0.0.1

package/src/layouts/divider/divider.module.css

@@ -0,0 +1,102 @@
+.divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.divider-line {
+  background: var(--material-line, #aaa);
+  border-radius: calc(4px * var(--scalar, 1));
+}
+
+/* Emphasis */
+.divider-line[data-emphasis="strong"] {
+  background: color-mix(in srgb, #aaa, black 20%);
+}
+
+.divider-line[data-emphasis="normal"] {
+  background: #aaa;
+}
+
+.divider-line[data-emphasis="light"] {
+  background: color-mix(in srgb, #aaa, white 20%);
+}
+
+/* Horizontal Divider */
+.divider[data-orientation="horizontal"] {
+  width: 100%;
+  height: auto;
+}
+
+.divider-line[data-orientation="horizontal"] {
+  width: var(--divider-width, 100%);
+  height: calc(var(--divider-height, 1px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="horizontal"][data-thickness="sm"] {
+  height: calc(var(--divider-height, 1px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="horizontal"][data-thickness="md"] {
+  height: calc(var(--divider-height, 2px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="horizontal"][data-thickness="lg"] {
+  height: calc(var(--divider-height, 3px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="horizontal"][data-length="full"] {
+  width: var(--divider-width, 100%);
+}
+
+.divider-line[data-orientation="horizontal"][data-length="sm"] {
+  width: calc(var(--divider-width, 16px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="horizontal"][data-length="md"] {
+  width: calc(var(--divider-width, 20px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="horizontal"][data-length="lg"] {
+  width: calc(var(--divider-width, 24px) * var(--scalar, 1));
+}
+
+/* Vertical Divider */
+
+.divider[data-orientation="vertical"] {
+  height: 100%;
+  width: auto;
+}
+
+.divider-line[data-orientation="vertical"] {
+  width: calc(var(--divider-width, 1px) * var(--scalar, 1));
+  height: var(--divider-height, 100%);
+}
+
+.divider-line[data-orientation="vertical"][data-thickness="sm"] {
+  min-width: calc(var(--divider-width, 1px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="vertical"][data-thickness="md"] {
+  min-width: calc(var(--divider-width, 2px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="vertical"][data-thickness="lg"] {
+  min-width: calc(var(--divider-width, 3px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="vertical"][data-length="full"] {
+  height: var(--divider-height, 100%);
+}
+
+.divider-line[data-orientation="vertical"][data-length="sm"] {
+  height: calc(var(--divider-height, 16px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="vertical"][data-length="md"] {
+  height: calc(var(--divider-height, 20px) * var(--scalar, 1));
+}
+
+.divider-line[data-orientation="vertical"][data-length="lg"] {
+  height: calc(var(--divider-height, 24px) * var(--scalar, 1));
+}

package/src/layouts/divider/divider.tsx

@@ -0,0 +1,81 @@
+import { Emphasis, Size } from '../../utils/index.js';
+import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import classnames from 'classnames';
+import React, { CSSProperties } from 'react';
+import styles from './divider.module.css';
+
+export type DividerOrientation =
+  | {
+      horizontal?: boolean;
+      vertical?: never;
+    }
+  | {
+      horizontal?: never;
+      vertical?: boolean;
+    };
+
+export interface DividerClasses {
+  line?: string;
+}
+
+export interface DividerProperties {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+}
+
+export type DividerOwnProps = DividerOrientation &
+  DividerProperties & {
+    emphasis?: Emphasis;
+    thickness?: Size;
+    length?: Size | 'full';
+    classes?: Partial<DividerClasses>;
+  };
+
+export type DividerProps = WithDetailedHTMLProps<DividerOwnProps, 'div'>;
+
+export const Divider: React.FC<DividerProps> = ({
+  emphasis = 'normal',
+  thickness = 'sm',
+  length = 'full',
+  style,
+  horizontal,
+  vertical,
+  width,
+  height,
+  className,
+  children,
+  ...props
+}) => {
+  const orientation = horizontal ? 'horizontal' : 'vertical';
+
+  const cssVariables = {
+    '--divider-width': width,
+    '--divider-height': height,
+  } as CSSProperties;
+
+  return (
+    <div
+      data-emphasis={emphasis}
+      data-thickness={thickness}
+      data-length={length}
+      data-orientation={orientation}
+      className={classnames(styles[`divider`], 'divider', className)}
+      {...props}
+    >
+      <div
+        data-emphasis={emphasis}
+        data-thickness={thickness}
+        data-length={length}
+        data-orientation={orientation}
+        style={cssVariables}
+        className={classnames(
+          styles[`divider-line`],
+          'divider-line',
+          'material',
+          className
+        )}
+      />
+      {children}
+    </div>
+  );
+};

package/src/layouts/draggable_list/draggable_list.tsx

@@ -0,0 +1,5 @@
+// TODO: Implement DraggableList
+
+export const DraggableList = () => {
+  return <div>DraggableList</div>;
+};

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

@@ -0,0 +1,26 @@
+import { DrawerStart } from '../drawer_start/drawer_start';
+import { DrawerEnd } from '../drawer_end/drawer_end';
+import { DrawerTop } from '../drawer_top/drawer_top';
+import { DrawerBottom } from '../drawer_bottom/drawer_bottom';
+
+export default {
+  title: 'Drawers / Drawers',
+  component: DrawerStart,
+  tags: ['autodocs'],
+};
+
+export const DrawerStartStory = () => {
+  return <DrawerStart>drawer start</DrawerStart>;
+};
+
+export const DrawerEndStory = () => {
+  return <DrawerEnd>drawer end</DrawerEnd>;
+};
+
+export const DrawerTopStory = () => {
+  return <DrawerTop>drawer top</DrawerTop>;
+};
+
+export const DrawerBottomStory = () => {
+  return <DrawerBottom>drawer bottom</DrawerBottom>;
+};

package/src/layouts/drawers/drawer_bottom/drawer_bottom.module.css

@@ -0,0 +1,3 @@
+.drawerBottom {
+  background-color: var(--background-color-primary);
+}

package/src/layouts/drawers/drawer_bottom/drawer_bottom.tsx

@@ -0,0 +1,23 @@
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './drawer_bottom.module.css';
+
+export interface DrawerBottomProps extends Omit<VStackProps, 'as' | 'children'> {
+  children?: React.ReactNode;
+}
+
+export const DrawerBottom = React.forwardRef<HTMLElement, DrawerBottomProps>(
+  function DrawerBottom({ children, className, ...props }: DrawerBottomProps, ref) {
+    return (
+      <VStack
+        ref={ref}
+        as="section"
+        className={classNames(styles.drawerBottom, className, 'drawer-bottom')}
+        {...props}
+      >
+        {children}
+      </VStack>
+    );
+  }
+);

package/src/layouts/drawers/drawer_end/drawer_end.module.css

@@ -0,0 +1,3 @@
+.drawerEnd {
+  background-color: var(--background-color-primary);
+}

package/src/layouts/drawers/drawer_end/drawer_end.tsx

@@ -0,0 +1,24 @@
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './drawer_end.module.css';
+
+export interface DrawerEndProps extends Omit<VStackProps, 'as' | 'children'> {
+  children?: React.ReactNode;
+}
+
+export const DrawerEnd = React.forwardRef<HTMLElement, DrawerEndProps>(function DrawerEnd(
+  { children, className, ...props }: DrawerEndProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as="section"
+      className={classNames(styles.drawerEnd, className, 'drawerEnd')}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/drawers/drawer_start/drawer_start.module.css

@@ -0,0 +1,3 @@
+.drawerStart {
+  background-color: var(--background-color-primary);
+}

package/src/layouts/drawers/drawer_start/drawer_start.tsx

@@ -0,0 +1,23 @@
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './drawer_start.module.css';
+
+export interface DrawerStartProps extends Omit<VStackProps, 'as' | 'children'> {
+  children?: React.ReactNode;
+}
+
+export const DrawerStart = React.forwardRef<HTMLElement, DrawerStartProps>(
+  function DrawerStart({ children, className, ...props }: DrawerStartProps, ref) {
+    return (
+      <VStack
+        ref={ref}
+        as="section"
+        className={classNames(styles.drawerStart, className, 'drawerStart')}
+        {...props}
+      >
+        {children}
+      </VStack>
+    );
+  }
+);

package/src/layouts/drawers/drawer_top/drawer_top.module.css

@@ -0,0 +1,3 @@
+.drawerBottom {
+  background-color: var(--background-color-primary);
+}

package/src/layouts/drawers/drawer_top/drawer_top.tsx

@@ -0,0 +1,24 @@
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './drawer_top.module.css';
+
+export interface DrawerTopProps extends Omit<VStackProps, 'as' | 'children'> {
+  children?: React.ReactNode;
+}
+
+export const DrawerTop = React.forwardRef<HTMLElement, DrawerTopProps>(function DrawerTop(
+  { children, className, ...props }: DrawerTopProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as="section"
+      className={classNames(styles.drawerTop, className, 'drawerTop')}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/footer/footer.module.css

@@ -0,0 +1,31 @@
+.footer {
+  width: 100%;
+  min-height: 0;
+  border-top: 1px solid rgb(221, 221, 221);
+  padding: var(--padding) var(--padding-large);
+  gap: var(--gap);
+}
+/*
+  Kinds:
+ 'default' | 'app' | 'nav' | 'toolbar' | 'window' | 'status';
+*/
+
+.footer[data-kind="app"] {
+  position: relative;
+}
+
+.footer[data-kind="nav"] {
+  position: relative;
+}
+
+.footer[data-kind="toolbar"] {
+  position: relative;
+}
+
+.footer[data-kind="window"] {
+  position: relative;
+}
+
+.footer[data-kind="status"] {
+  position: relative;
+}

package/src/layouts/footer/footer.tsx

@@ -0,0 +1,29 @@
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './footer.module.css';
+import type { Hierarchy, Size } from '../../utils/index.js';
+
+export interface FooterProps extends Omit<HStackProps, 'as' | 'children'> {
+  hierarchy?: Hierarchy;
+  size?: Size;
+  children?: React.ReactNode;
+}
+
+export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer(
+  { hierarchy = 'secondary', size = 'md', children, className, ...props }: FooterProps,
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      as="footer"
+      className={classNames(styles.footer, className, 'footer')}
+      data-hierarchy={hierarchy}
+      data-size={size}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/layouts/grid/grid.module.css

@@ -0,0 +1,22 @@
+.grid {
+  display: inline-grid;
+  grid-auto-flow: row;
+  height: auto;
+  grid-template-columns: var(--template);
+  width: 100%;
+  max-width: var(--max-width);
+  grid-auto-rows: var(--item-height);
+  justify-items: center;
+}
+
+:global([data-h-alignment="center"]) > .grid {
+  justify-content: center;
+}
+
+:global([data-h-alignment="end"]) > .grid {
+  justify-content: end;
+}
+
+:global([data-h-alignment="start"]) > .grid {
+  justify-content: start;
+}

package/src/layouts/grid/grid.stories.tsx

@@ -0,0 +1,260 @@
+import React from 'react';
+import { Meta } from '@storybook/react-vite';
+import { Grid, GridProps } from './grid.js';
+import { Rect } from '../../stacks/story_components/rect.js';
+import { Circle } from '../../stacks/story_components/circle.js';
+import { StyleBox } from '../../stacks/story_components/style_box.js';
+import { VStack } from '../../stacks/v_stack.js';
+
+const meta: Meta<GridProps> = {
+  title: 'Grid',
+  component: Grid,
+  args: {
+    gap: '1rem',
+    itemHeight: 100,
+    itemWidth: 100,
+    columnAmount: 4,
+  },
+  argTypes: {
+    itemHeight: {
+      control: { type: 'text' },
+      description: 'Fixed height for grid items',
+    },
+    itemWidth: {
+      control: { type: 'text' },
+      description: 'Fixed width for grid items',
+    },
+    columnAmount: {
+      control: { type: 'number', min: 1, max: 12, defaultValue: 4 },
+      description: 'Maximum number of columns for the grid',
+    },
+    gap: {
+      control: { type: 'text' },
+      description: 'Gap between grid items',
+    },
+    rowGap: {
+      control: { type: 'text' },
+      description: 'Row gap between grid items',
+    },
+    columnGap: {
+      control: { type: 'text' },
+      description: 'Column gap between grid items',
+    },
+    children: { table: { disable: true } },
+    className: { table: { disable: true } },
+    style: { table: { disable: true } },
+  },
+};
+
+export default meta;
+
+export function Default(props: GridProps) {
+  return (
+    <StyleBox>
+      <Grid {...props} gap="10px">
+        <Rect width="100%" height="100%" color="#ff6b6b" />
+        <Rect width="100%" height="100%" color="#4ecdc4" />
+        <Rect width="100%" height="100%" color="#45b7d1" />
+        <Rect width="100%" height="100%" color="#96ceb4" />
+        <Rect width="100%" height="100%" color="#feca57" />
+        <Rect width="100%" height="100%" color="#ff9ff3" />
+      </Grid>
+    </StyleBox>
+  );
+}
+
+export function AlignmentExamples() {
+  return (
+    <StyleBox>
+      <VStack vAlign="center" gap="2rem">
+        <VStack hAlign="start">
+          <h3>Start Alignment (Default)</h3>
+          <Grid itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+          </Grid>
+        </VStack>
+
+        <VStack hAlign="center">
+          <h3>Center Alignment</h3>
+          <Grid itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+          </Grid>
+        </VStack>
+
+        <VStack hAlign="end">
+          <h3>End Alignment</h3>
+          <Grid itemWidth={100} itemHeight={100} columnAmount={4} gap="10px">
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+          </Grid>
+        </VStack>
+      </VStack>
+    </StyleBox>
+  );
+}
+
+export function DifferentGaps() {
+  return (
+    <StyleBox>
+      <VStack vAlign="start" gap="30px">
+        <VStack hAlign="start">
+          <h3>Small Gap</h3>
+          <Grid itemWidth={120} itemHeight={120} columnAmount={3} gap="4px">
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+          </Grid>
+        </VStack>
+
+        <VStack hAlign="start">
+          <h3>Large Gap</h3>
+          <Grid itemWidth={120} itemHeight={120} columnAmount={3} gap="8px">
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+          </Grid>
+        </VStack>
+
+        <VStack hAlign="start">
+          <h3>Different Row and Column Gaps</h3>
+          <Grid itemWidth={120} itemHeight={120} columnAmount={3} gap="16px">
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+            <Rect width="100%" height="100%" color="#96ceb4" />
+            <Rect width="100%" height="100%" color="#feca57" />
+            <Rect width="100%" height="100%" color="#ff9ff3" />
+          </Grid>
+        </VStack>
+      </VStack>
+    </StyleBox>
+  );
+}
+
+export function MaxColumnsExamples() {
+  return (
+    <StyleBox>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div>
+          <h3>2 Columns</h3>
+          <Grid itemWidth={150} itemHeight={150} columnAmount={2}>
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+            <Rect width="100%" height="100%" color="#96ceb4" />
+            <Rect width="100%" height="100%" color="#feca57" />
+            <Rect width="100%" height="100%" color="#ff9ff3" />
+          </Grid>
+        </div>
+
+        <div>
+          <h3>3 Columns</h3>
+          <Grid itemWidth={120} itemHeight={120} columnAmount={3}>
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+            <Rect width="100%" height="100%" color="#96ceb4" />
+            <Rect width="100%" height="100%" color="#feca57" />
+            <Rect width="100%" height="100%" color="#ff9ff3" />
+          </Grid>
+        </div>
+
+        <div>
+          <h3>4 Columns</h3>
+          <Grid itemWidth={100} itemHeight={100} columnAmount={4}>
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+            <Rect width="100%" height="100%" color="#96ceb4" />
+            <Rect width="100%" height="100%" color="#feca57" />
+            <Rect width="100%" height="100%" color="#ff9ff3" />
+          </Grid>
+        </div>
+
+        <div>
+          <h3>6 Columns</h3>
+          <Grid itemWidth={80} itemHeight={80} columnAmount={6}>
+            <Rect width="100%" height="100%" color="#ff6b6b" />
+            <Rect width="100%" height="100%" color="#4ecdc4" />
+            <Rect width="100%" height="100%" color="#45b7d1" />
+            <Rect width="100%" height="100%" color="#96ceb4" />
+            <Rect width="100%" height="100%" color="#feca57" />
+            <Rect width="100%" height="100%" color="#ff9ff3" />
+          </Grid>
+        </div>
+      </div>
+    </StyleBox>
+  );
+}
+
+export function DifferentSizes() {
+  return (
+    <StyleBox>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div>
+          <h3>Small Items (80px x 80px)</h3>
+          <Grid itemWidth={80} itemHeight={80} columnAmount={6}>
+            {Array.from({ length: 8 }, (_, i) => (
+              <Rect
+                key={i}
+                width="100%"
+                height="100%"
+                color={`hsl(${i * 45}, 70%, 60%)`}
+              />
+            ))}
+          </Grid>
+        </div>
+
+        <div>
+          <h3>Medium Items (120px x 120px)</h3>
+          <Grid itemWidth={120} itemHeight={120} columnAmount={4}>
+            {Array.from({ length: 6 }, (_, i) => (
+              <Rect
+                key={i}
+                width="100%"
+                height="100%"
+                color={`hsl(${i * 60}, 70%, 60%)`}
+              />
+            ))}
+          </Grid>
+        </div>
+
+        <div>
+          <h3>Large Items (150px x 150px)</h3>
+          <Grid itemWidth={150} itemHeight={150} columnAmount={3}>
+            {Array.from({ length: 4 }, (_, i) => (
+              <Rect
+                key={i}
+                width="100%"
+                height="100%"
+                color={`hsl(${i * 90}, 70%, 60%)`}
+              />
+            ))}
+          </Grid>
+        </div>
+      </div>
+    </StyleBox>
+  );
+}
+
+export function WithCircles() {
+  return (
+    <StyleBox>
+      <Grid itemWidth={100} itemHeight={100} columnAmount={5}>
+        <Circle size="80px" color="#ff6b6b" />
+        <Circle size="80px" color="#4ecdc4" />
+        <Circle size="80px" color="#45b7d1" />
+        <Circle size="80px" color="#96ceb4" />
+        <Circle size="80px" color="#feca57" />
+        <Circle size="80px" color="#ff9ff3" />
+        <Circle size="80px" color="#a55eea" />
+        <Circle size="80px" color="#fd79a8" />
+      </Grid>
+    </StyleBox>
+  );
+}