@tcn/ui 0.0.1

package/src/stacks/stacks.mdx

@@ -0,0 +1,240 @@
+import { HStack } from './h_stack';
+
+import { VStack } from './v_stack';
+
+import { ZStack } from './z_stack';
+
+import { Box } from './box/box';
+
+import { Rect } from './story_components/rect';
+
+import { StyleBox } from './story_components/style_box';
+
+import { Spacer } from './spacer';
+
+import { Grid } from '../layouts/grid/grid';
+
+# Stacks
+
+Stack layouts were built to simplify the process of building complex layouts with fewer
+gotchas. By composing these components together, you can create virtually any layout you
+can dream of. The stacks support language direction, so they automatically adapt for
+right-to-left (RTL) users.
+
+Here is the list of components that you will use with stacks:
+
+- Box
+- Spacer
+- HStack
+- VStack
+- ZStack
+
+## Box & Spacer
+
+### HStack
+
+This example uses `HStack` to arrange elements horizontally. It places a `Box` on either
+side and a `Box` with width set to `flex` in the middle, creating a simple, evenly spaced layout. The `Box`
+components are set to occupy 25% of the width each, while the `Box` with width set to `flex` automatically
+takes up the remaining space.
+
+<StyleBox height="auto" padding="10px" border="1px solid #ccc">
+  <HStack height="100px">
+    <Rect color="#abdef0" width="25%">25%</Rect>
+    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#abdef0" width="25%">25%</Rect>
+  </HStack>
+</StyleBox>
+
+```tsx
+<HStack height="100px">
+  <Box width="25%">25%</Box>
+  <Box width="flex">flex</Box>
+  <Box width="25%">25%</Box>
+</HStack>
+```
+
+---
+
+Here, two `Box` components with width set to `flex` are placed between `Box` elements. Each `Box` will
+evenly share the available space between them, making it ideal for creating flexible
+layouts where multiple components need equal space.
+
+<StyleBox height="auto" padding="10px" border="1px solid #ccc">
+  <HStack height="100px">
+    <Rect color="#abdef0" width="25%">25%</Rect>
+    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#abdef0" width="25%">25%</Rect>
+  </HStack>
+</StyleBox>
+
+```tsx
+<HStack height="100px">
+  <Box width="25%">25%</Box>
+  <Box width="flex">flex</Box>
+  <Box width="flex">flex</Box>
+  <Box width="25%">25%</Box>
+</HStack>
+```
+
+---
+
+Using `Spacer` components between the `Box` components with width set to `flex` evenly distributes space
+between the elements. This is useful when you want to create consistent gaps between
+components without needing to specify exact widths.
+
+<StyleBox height="auto" padding="10px" border="1px solid #ccc">
+  <HStack height="100px">
+    <Rect color="#abdef0" width="25%">25%</Rect>
+    <Spacer />
+    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Spacer />
+    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Spacer />
+    <Rect color="#abdef0" width="25%">25%</Rect>
+  </HStack>
+</StyleBox>
+
+```tsx
+<HStack height="100px">
+  <Box width="25%">25%</Box>
+  <Spacer />
+  <Box width="flex">flex</Box>
+  <Spacer />
+  <Box width="flex">flex</Box>
+  <Spacer />
+  <Box width="25%">25%</Box>
+</HStack>
+```
+
+---
+
+Here, `Spacer` components are given specific widths of `10px`, creating fixed gaps between
+each element. This is useful when you need precise spacing rather than letting `Spacer`
+automatically fill the available space.
+
+<StyleBox height="auto" padding="10px" border="1px solid #ccc">
+  <HStack height="100px">
+    <Rect width="25%" color="#abdef0">25%</Rect>
+    <Spacer width="10px" />
+    <Rect width="flex" color="#89d9c8">flex</Rect>
+    <Spacer width="10px" />
+    <Rect width="flex" color="#89d9c8">flex</Rect>
+    <Spacer width="10px" />
+    <Rect width="25%" color="#abdef0">25%</Rect>
+  </HStack>
+</StyleBox>
+
+```tsx
+<HStack height="100px">
+  <Box width="25%">25%</Box>
+  <Spacer width="10px" />
+  <Box width="flex">flex</Box>
+  <Spacer width="10px" />
+  <Box width="flex">flex</Box>
+  <Spacer width="10px" />
+  <Box width="25%">25%</Box>
+</HStack>
+```
+
+---
+
+### VStack
+
+This example uses `VStack` to arrange elements vertically. The `Box` components at the top
+and bottom occupy 25% of the height each, while the `Box` with height set to `flex` fills the remaining space,
+making it ideal for creating header-body-footer layouts.
+
+<StyleBox height="400px" padding="10px" border="1px solid #ccc">
+  <VStack height="100%">
+    <Rect height="25%" color="#abdef0">25%</Rect>
+    <Rect height="flex" color="#89d9c8">flex</Rect>
+    <Rect height="25%" color="#abdef0">25%</Rect>
+  </VStack>
+</StyleBox>
+
+```tsx
+<VStack height="100%">
+  <Box height="25%">25%</Box>
+  <Box height="flex">flex</Box>
+  <Box height="25%">25%</Box>
+</VStack>
+```
+
+---
+
+This layout creates a classic header-body-footer structure using `VStack`. We also use the `gap` 
+prop to create consistent gaps between the header, body, and footer sections.
+
+<StyleBox height="400px" width="100%" padding="10px" border="1px solid #ccc">
+  <VStack height="100%" gap="10px">
+    <Rect height="40px" color="#abdef0">Header</Rect>
+    <Rect height="flex" color="#ededed">Body</Rect>
+    <Rect height="40px" color="#abdef0">Footer</Rect>
+  </VStack>
+</StyleBox>
+
+```tsx
+<VStack height="100%" gap="10px">
+  <Box height="40px">Header</Box>
+  <Box height="flex">Body</Box>
+  <Box height="40px">Footer</Box>
+</VStack>
+```
+
+---
+
+This more advanced layout combines `HStack` and `VStack` to create a page with a resizable
+sidebar next to a body content area. We also use the `gap` prop to create consistent gaps 
+between the header, sidebar, and footer sections.
+
+<StyleBox height="400px" width="100%" padding="10px" border="1px solid #ccc">
+  <VStack height="100%" gap="10px">
+    <Rect height="40px" color="#abdef0">Header</Rect>
+    <HStack height="flex" gap="10px">
+      <Rect width="200px" minWidth="200px" height="100%" zIndex="1" enableResizeOnEnd color="#ededed">Sidebar</Rect>
+      <Rect width="flex" height="100%" color="#ededed">
+        <VStack width="100%" height="100%" overflowY="auto">
+          <Grid itemHeight={100} itemWidth={100} columnAmount={4} gap="10px" padding="10px">
+            <Rect width="100%" height="100%" color="#abdef0">1</Rect>
+            <Rect width="100%" height="100%" color="#89d9c8">2</Rect>
+            <Rect width="100%" height="100%" color="#abdef0">3</Rect>
+            <Rect width="100%" height="100%" color="#89d9c8">4</Rect>
+            <Rect width="100%" height="100%" color="#abdef0">5</Rect>
+            <Rect width="100%" height="100%" color="#89d9c8">6</Rect>
+            <Rect width="100%" height="100%" color="#abdef0">7</Rect>
+            <Rect width="100%" height="100%" color="#89d9c8">8</Rect>
+            <Rect width="100%" height="100%" color="#abdef0">9</Rect>
+            <Rect width="100%" height="100%" color="#89d9c8">10</Rect>
+          </Grid>
+        </VStack>
+      </Rect>
+    </HStack>
+    <Rect height="40px" color="#abdef0">Footer</Rect>
+  </VStack>
+</StyleBox>
+
+```tsx
+<VStack height="100%" gap="10px">
+    <Box height="40px">Header</Box>
+    <HStack height="flex" gap="10px">
+      <Box width="200px" minWidth="200px" height="100%" zIndex="1" enableResizeOnEnd>Sidebar</Box>
+      <VStack width="flex" height="100%" overflowY="auto">
+        <Grid itemHeight={100} itemWidth={100} columnAmount={4} gap="10px" padding="10px">
+          <Box width="100%" height="100%">1</Box>
+          <Box width="100%" height="100%">2</Box>
+          <Box width="100%" height="100%">3</Box>
+          <Box width="100%" height="100%">4</Box>
+          <Box width="100%" height="100%">5</Box> 
+          <Box width="100%" height="100%">6</Box>
+          <Box width="100%" height="100%">7</Box>
+          <Box width="100%" height="100%">8</Box>
+          <Box width="100%" height="100%">9</Box>
+          <Box width="100%" height="100%">10</Box>
+        </Grid>
+      </VStack>
+    </HStack>
+    <Box height="40px">Footer</Box>
+  </VStack>
+```

package/src/stacks/story_components/circle.module.css

@@ -0,0 +1,7 @@
+.circle {
+  border: 1px solid color-mix(in srgb, var(--color) 25%, rgba(0, 0, 0, 0.5));
+  color: color-mix(in srgb, var(--color) 15%, rgba(0, 0, 0, 0.8));
+  background-color: var(--color);
+  border-radius: 50%;
+  flex-shrink: 0;
+}

package/src/stacks/story_components/circle.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ZStack, ZStackProps } from '../z_stack.js';
+import styles from './circle.module.css';
+import classNames from 'classnames';
+
+export interface CircleProps extends ZStackProps {
+  color?: string;
+  size?: string;
+}
+
+export const Circle = React.forwardRef(function Circle(
+  { color = '#90d9c7', size = '150px', style, className, ...props }: CircleProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const finalStyle = {
+    ...style,
+    '--color': color,
+  };
+
+  return (
+    <ZStack
+      ref={ref}
+      style={finalStyle}
+      width={size}
+      height={size}
+      className={classNames(className, styles['circle'])}
+      {...props}
+    />
+  );
+});

package/src/stacks/story_components/horizontal_border.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyleBox } from './style_box.js';
+
+export function HorizontalBorder({ children }: { children: React.ReactNode }) {
+  return (
+    <StyleBox
+      borderTop="1px dashed #ccc"
+      height="auto"
+      width="auto"
+      borderBottom="1px dashed #ccc"
+    >
+      {children}
+    </StyleBox>
+  );
+}

package/src/stacks/story_components/picture_placeholder.module.css

@@ -0,0 +1,3 @@
+.picture-placeholder {
+  color: var(--color);
+}

package/src/stacks/story_components/picture_placeholder.tsx

@@ -0,0 +1,42 @@
+import React, { HTMLAttributes } from 'react';
+import styles from './picture_placeholder.module.css';
+import classNames from 'classnames';
+
+export interface PicturePlaceholderProps extends HTMLAttributes<SVGSVGElement> {
+  color?: string;
+  size?: string;
+}
+
+export const PicturePlaceholder = React.forwardRef(function PicturePlaceholder(
+  {
+    color = 'currentColor',
+    size = '150px',
+    style,
+    className,
+    ...props
+  }: PicturePlaceholderProps,
+  ref: React.Ref<SVGSVGElement>
+) {
+  const finalStyle = {
+    ...style,
+    '--color': color,
+  };
+
+  return (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classNames(className, styles['picture-placeholder'])}
+      style={finalStyle}
+      {...props}
+    >
+      <path
+        d="m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0"
+        fill="currentColor"
+      />
+    </svg>
+  );
+});

package/src/stacks/story_components/rect.module.css

@@ -0,0 +1,8 @@
+.rect {
+  display: grid;
+  place-items: center center;
+  border: 1px solid color-mix(in srgb, var(--color) 25%, rgba(0, 0, 0, 0.5));
+  color: color-mix(in srgb, var(--color) 15%, rgba(0, 0, 0, 0.8));
+  background-color: var(--color);
+  flex-shrink: 0;
+}

package/src/stacks/story_components/rect.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box, BoxProps } from '../box/box.js';
+import styles from './rect.module.css';
+import classNames from 'classnames';
+
+export interface RectProps extends BoxProps {
+  color?: string;
+}
+
+export const Rect = React.forwardRef(function Rect(
+  {
+    color = '#acdef0',
+    style,
+    className,
+    width = '100%',
+    height = 'auto',
+    ...props
+  }: RectProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const finalStyle = {
+    ...style,
+    '--color': color,
+  };
+
+  return (
+    <Box
+      ref={ref}
+      style={finalStyle}
+      className={classNames(className, styles['rect'])}
+      width={width}
+      height={height}
+      {...props}
+    />
+  );
+});

package/src/stacks/story_components/style_box.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BoxProps } from '../box/box.js';
+import { Box } from '../box/box.js';
+import { extractStyleProps } from '../utils/extract_style_props.js';
+
+export type StyleBoxProps = React.CSSProperties & Omit<BoxProps, 'style'>;
+
+export const StyleBox = React.forwardRef(function StyleBox(
+  { className, children, ...props }: StyleBoxProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const [styleProps, remainder] = extractStyleProps(props);
+
+  return (
+    <Box ref={ref} className={className} style={styleProps} {...remainder}>
+      {children}
+    </Box>
+  );
+});

package/src/stacks/types/alignment.ts

@@ -0,0 +1 @@
+export type Alignment = 'start' | 'center' | 'end';

package/src/stacks/types/as.tsx

@@ -0,0 +1,11 @@
+export type WithDetailedHTMLProps<
+  Props = any,
+  Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
+> = JSX.IntrinsicElements[Tag] & Props;
+
+export type AsWithDetailedHTMLProps<
+  Props = any,
+  Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
+> = WithDetailedHTMLProps<Props, Tag> & {
+  as?: Tag;
+};

package/src/stacks/types/common.ts

@@ -0,0 +1,4 @@
+export interface CommonProps {
+  style?: React.CSSProperties;
+  className?: string;
+}

package/src/stacks/types/styles.ts

@@ -0,0 +1,44 @@
+import { Alignment } from './alignment.js';
+
+export interface StackStyleProps {
+  hAlign?: Alignment;
+  vAlign?: Alignment;
+  width?: 'default' | 'flex' | 'auto' | string | number;
+  minWidth?: string | number;
+  maxWidth?: string | number;
+  height?: 'default' | 'flex' | 'auto' | string | number;
+  minHeight?: string | number;
+  maxHeight?: string | number;
+  growWeight?: number;
+  shrinkWeight?: number;
+  padding?: string;
+  paddingInline?: string;
+  paddingBlock?: string;
+  paddingInlineStart?: string;
+  paddingInlineEnd?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  margin?: string;
+  marginInline?: string;
+  marginBlock?: string;
+  marginInlineStart?: string;
+  marginInlineEnd?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  zIndex?: string | number;
+  gap?: string;
+  rowGap?: string;
+  columnGap?: string;
+  allowFlow?: boolean;
+  inline?: boolean;
+}
+
+export interface VerticalProps {
+  overflowX?: 'hidden' | 'visible';
+  overflowY?: 'hidden' | 'scroll' | 'auto' | 'visible';
+}
+
+export interface HorizontalProps {
+  overflowX?: 'hidden' | 'scroll' | 'auto' | 'visible';
+  overflowY?: 'hidden' | 'visible';
+}