@tcn/ui 0.0.1

package/src/inputs/textarea/textarea.module.css

@@ -0,0 +1,66 @@
+:root {
+  --disabled-input-color: var(--status-disabled, rgba(0, 0, 0, 0.3));
+  --disabled-input-background-color: rgba(0, 0, 0, 0.05);
+}
+
+.textarea {
+  min-height: 100px;
+  height: calc(100px * var(--scalar, 1));
+  width: 100%;
+  background-color: #fff;
+  color: var(--font-color);
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  padding: 0;
+  padding-inline: 4px;
+  padding-block: 4px;
+  box-sizing: border-box;
+  font-family: Lato, Arial, Helvetica, sans-serif;
+  font-size: calc(14px * var(--scalar, 1));
+  resize: vertical;
+  cursor: text;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.textarea[data-is-disabled="false"]:hover {
+  border: 1px solid var(--accent-color);
+}
+
+.textarea:focus {
+  outline: none;
+  border: 1px solid var(--accent-color);
+}
+
+.textarea:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+}
+
+.textarea[data-is-disabled="true"] {
+  cursor: not-allowed;
+  color: var(--disabled-input-color);
+  background-color: var(--disabled-input-background-color);
+}
+
+.textarea[data-is-disabled="true"]::placeholder {
+  color: var(--disabled-input-color);
+}
+
+:global(.small-text) .textarea {
+  font-size: 12px;
+}
+
+:global(.medium-small-text) .textarea {
+  font-size: 14px;
+}
+
+:global(.medium-text) .textarea {
+  font-size: 16px;
+}
+
+:global(.medium-large-text) .textarea {
+  font-size: 18px;
+}
+
+:global(.large-text) .textarea {
+  font-size: 20px;
+}

package/src/inputs/textarea/textarea.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Textarea as Component, TextareaProps } from './textarea.js';
+import styles from '../__storybook__/stories.module.css';
+
+function Base(props: TextareaProps) {
+  const [value, setValue] = React.useState('');
+
+  return <Component value={value} onChange={setValue} {...props} />;
+}
+
+export default {
+  title: 'Textarea',
+};
+
+export function Textarea() {
+  return (
+    <table className={styles.story}>
+      <colgroup>
+        <col style={{ width: 100 }} />
+        <col style={{ width: 400 }} />
+      </colgroup>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Component</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Baseline</td>
+          <td>
+            <Base />
+          </td>
+        </tr>
+        <tr>
+          <td>Disabled</td>
+          <td>
+            <Base disabled />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/src/inputs/textarea/textarea.tsx

@@ -0,0 +1,32 @@
+import classnames from 'classnames';
+import React from 'react';
+import { HTMLAttributes } from 'react';
+import styles from './textarea.module.css';
+
+export interface TextareaProps
+  extends Omit<HTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+  value?: string;
+  width?: string;
+  height?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export const Textarea = React.forwardRef(function Textarea(
+  { className, width, height, style, onChange, ...props }: TextareaProps,
+  ref: React.Ref<HTMLTextAreaElement>
+) {
+  return (
+    <textarea
+      style={{ width, height, ...style }}
+      className={classnames(className, styles.textarea, 'textarea')}
+      data-is-disabled={props.disabled || false}
+      ref={ref}
+      onChange={e => {
+        onChange && onChange(e.currentTarget.value, e);
+      }}
+      {...props}
+    />
+  );
+});

package/src/inputs/textarea/textarea_row.tsx

@@ -0,0 +1,24 @@
+import { useSignalValue } from '@tcn/state';
+import React from 'react';
+import { HField } from '../../form/field/h_field/h_field.js';
+import { FieldPresenter } from '../../form/field_presenters/field_presenter.js';
+import { Textarea, TextareaProps } from './textarea.js';
+
+export interface TextareaRowProps
+  extends Omit<
+    TextareaProps,
+    'onChange' | 'value' | 'label' | 'description' | 'errorMessage'
+  > {
+  presenter: FieldPresenter<string>;
+  id: string;
+}
+
+export function TextareaRow({ presenter, id, ...props }: TextareaRowProps) {
+  const { label, value, description, error } = useSignalValue(presenter.stateBroadcast);
+
+  return (
+    <HField id={id} label={label} description={description} errorMessage={error}>
+      <Textarea {...props} value={value} onChange={presenter.setValue} />
+    </HField>
+  );
+}

package/src/inputs/unit_input/unit_input.module.css

@@ -0,0 +1,23 @@
+.unit-input {
+  position: relative;
+  opacity: 1;
+}
+
+.unit-input-flex-box {
+  z-index: inherit;
+}
+
+.unit-input-number {
+  padding-inline-end: 8px;
+}
+
+.unit-input-number,
+.unit-input-select {
+  position: relative;
+  z-index: 1;
+}
+
+.unit-input-number:focus,
+.unit-input-select:focus {
+  z-index: 2;
+}

package/src/inputs/unit_input/unit_input.stories.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { UnitInput as Component, UnitInputProps } from './unit_input.js';
+import { Option } from '../options/option.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { Footnote, Headline } from '../../typography/index.js';
+
+export default {
+  title: 'Unit Input',
+};
+
+function Base(props: Omit<UnitInputProps, 'children' | 'onChange'>) {
+  const [unit, setUnit] = useState<{ value: number | null; unit: string }>({
+    value: 0,
+    unit: 'px',
+  });
+
+  function update(value: number | null, unit: string) {
+    setUnit({ value, unit });
+  }
+
+  return (
+    <Component onChange={update} value={unit.value} unit={unit.unit} {...props}>
+      <Option value="px" label="px" keywords={['pixel', 'px']}>
+        <HStack gap="8px" padding="4px" height="auto">
+          <ZStack minWidth="30px" width="auto">
+            <Headline>px</Headline>
+          </ZStack>
+          <VStack width="200px" hAlign="start" height="auto">
+            <Headline>Pixel</Headline>
+            <Footnote>A unit of length equal to 1/96th of an inch.</Footnote>
+          </VStack>
+        </HStack>
+      </Option>
+      <Option value="em" label="em" keywords={['em', 'relative']}>
+        <HStack gap="8px" padding="4px" height="auto">
+          <ZStack minWidth="30px" width="auto">
+            <Headline>em</Headline>
+          </ZStack>
+          <VStack width="200px" hAlign="start" height="auto">
+            <Headline>Relative Em</Headline>
+            <Footnote>
+              A unit of length equal to the width of the letter M in the current font.
+            </Footnote>
+          </VStack>
+        </HStack>
+      </Option>
+      <Option value="rem" label="rem" keywords={['rem', 'root', 'em']}>
+        <HStack gap="8px" padding="4px" height="auto">
+          <ZStack minWidth="30px" width="auto">
+            <Headline>rem</Headline>
+          </ZStack>
+          <VStack width="200px" hAlign="start" height="auto">
+            <Headline>Root Em</Headline>
+            <Footnote>
+              A unit of length equal to the width of the letter M in the root font.
+            </Footnote>
+          </VStack>
+        </HStack>
+      </Option>
+      <Option value="%" label="%" keywords={['percent', 'percentage']}>
+        <HStack gap="8px" padding="4px" height="auto">
+          <ZStack minWidth="30px" width="auto">
+            <Headline>%</Headline>
+          </ZStack>
+          <VStack width="200px" hAlign="start" height="auto">
+            <Headline>Percent</Headline>
+            <Footnote>
+              A unit of length equal to 1/100th of the width of the parent element.
+            </Footnote>
+          </VStack>
+        </HStack>
+      </Option>
+    </Component>
+  );
+}
+
+export function UnitInput() {
+  return (
+    <VStack height="auto" gap="16px">
+      <HStack height="auto" gap="16px">
+        <ZStack width="flex" height="auto">
+          <Headline>Component</Headline>
+        </ZStack>
+        <ZStack width="flex" height="auto">
+          <Headline>Disabled</Headline>
+        </ZStack>
+      </HStack>
+      <HStack height="auto" gap="16px">
+        <ZStack width="flex" height="auto">
+          <Base />
+        </ZStack>
+        <ZStack width="flex" height="auto">
+          <Base disabled />
+        </ZStack>
+      </HStack>
+    </VStack>
+  );
+}

package/src/inputs/unit_input/unit_input.tsx

@@ -0,0 +1,115 @@
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { useForkRef } from '../../utils/index.js';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import { Input } from '../input/input.js';
+import { Select } from '../select/select.js';
+import { OptionProps } from '../options/option.js';
+import styles from './unit_input.module.css';
+
+import { ZStack } from '../../stacks/z_stack.js';
+
+function getDisplayValue(value: string) {
+  return value
+    .replace(/[^.\d-]/g, '') // Remove invalid characters
+    .replace(/(?!^)-/g, '') // Ensure `-` only at the start
+    .replace(/(\..*?)\.+/g, '$1'); // Allow only one dot
+}
+
+export interface UnitInputProps extends Omit<HStackProps, 'onChange' | 'children'> {
+  value?: number | null;
+  unit?: string;
+  children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
+  onChange?: (value: number | null, unit: string) => void;
+  inputRef?: React.Ref<HTMLInputElement>;
+  unitRef?: React.Ref<HTMLButtonElement>;
+  disabled?: boolean;
+}
+
+export const UnitInput = React.forwardRef(function UnitInput(
+  {
+    value,
+    unit,
+    children,
+    onChange,
+    inputRef,
+    unitRef,
+    disabled,
+    ...props
+  }: UnitInputProps,
+  ref: React.Ref<HTMLElement>
+) {
+  const internalInputRef = useRef<HTMLInputElement>(null);
+  const forkedInputRef = useForkRef(inputRef, internalInputRef);
+
+  function valueHandler(value: string, event?: React.ChangeEvent<HTMLInputElement>) {
+    if (event == null) {
+      return;
+    }
+
+    const input = event.currentTarget;
+    const cursorPosition = input.selectionStart || 0;
+    const displayValue = getDisplayValue(value);
+    const potentialValue = Number(displayValue);
+
+    input.value = displayValue;
+
+    if (displayValue.length < value.length) {
+      input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);
+    }
+
+    if (displayValue === '') {
+      onChange && onChange(null, unit || '');
+    } else if (!isNaN(potentialValue)) {
+      onChange && onChange(potentialValue, unit || '');
+    }
+  }
+
+  function unitHandler(unit: string) {
+    const input = internalInputRef.current;
+    if (input == null) {
+      return;
+    }
+
+    const potentialValue = Number(input.value);
+    if (isNaN(potentialValue)) {
+      onChange && onChange(null, unit);
+    } else {
+      onChange && onChange(potentialValue, unit);
+    }
+  }
+
+  return (
+    <HStack
+      ref={ref}
+      className={classNames(styles['unit-input'], 'unit-input')}
+      height="auto"
+      {...props}
+    >
+      <ZStack width="flex">
+        <Input
+          className={classNames(styles['unit-input-number'], 'unit-input-number')}
+          ref={forkedInputRef}
+          onChange={valueHandler}
+          disabled={disabled}
+          style={{
+            borderEndEndRadius: 0,
+            borderStartEndRadius: 0,
+            textAlign: 'start',
+          }}
+        />
+      </ZStack>
+      <Select
+        className={classNames(styles['unit-input-select'], 'unit-input-select')}
+        ref={unitRef}
+        width="auto"
+        value={unit}
+        onChange={unitHandler}
+        disabled={disabled}
+        style={{ borderStartStartRadius: 0, borderEndStartRadius: 0 }}
+      >
+        {children}
+      </Select>
+    </HStack>
+  );
+});

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

@@ -0,0 +1,33 @@
+.column {
+  min-width: 250px;
+  height: 100%;
+  min-height: 100%;
+}
+
+.column-stack {
+  gap: 8px;
+  padding: 8px;
+  width: 100%;
+  height: 100%;
+}
+
+.column:after {
+  content: "";
+  position: absolute;
+  bottom: var(--padding);
+  top: var(--padding);
+  right: 0;
+  width: 1px;
+  background-color: rgb(221, 221, 221);
+}
+
+.column:last-child:after {
+  display: none;
+}
+
+:global(.h-stack) > .column[data-width="default"] {
+  width: auto;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/src/layouts/column/column.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import React from 'react';
+import styles from './column.module.css';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+import { Alignment } from '../../stacks/types/alignment.js';
+import { VStack } from '../../stacks/v_stack.js';
+
+export interface ColumnProps extends Omit<BoxProps, 'as' | 'children'> {
+  hAlign?: Alignment;
+  vAlign?: Alignment;
+  children?: React.ReactNode;
+}
+
+export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column(
+  {
+    children,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    hAlign,
+    vAlign = 'start',
+    className,
+    ...props
+  }: ColumnProps,
+  ref
+) {
+  return (
+    <Box
+      width={width}
+      height={height}
+      minWidth={minWidth}
+      maxWidth={maxWidth}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      className={classNames(className, styles['column'], 'column')}
+      {...props}
+    >
+      <VStack
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        hAlign={hAlign}
+        vAlign={vAlign}
+        ref={ref}
+        as="section"
+        className={classNames(styles['column-stack'], 'column-stack')}
+        zIndex={0}
+      >
+        {children}
+      </VStack>
+    </Box>
+  );
+});

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

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CSSProperties } from 'react';
+import React from 'react';
+import { Divider as DividerComponent } from '../divider.js';
+import type { Emphasis, Size } from '../../../utils/index.js';
+import { Box } from '../../../stacks/box/box.js';
+import { HStack } from '../../../stacks/h_stack.js';
+import { VStack } from '../../../stacks/v_stack.js';
+
+type DividerStoryProps = {
+  emphasis?: Emphasis;
+  thickness?: Size;
+  length?: Size | 'full';
+  height?: CSSProperties['height'];
+  width?: CSSProperties['width'];
+  squished?: boolean;
+};
+
+const meta: Meta<DividerStoryProps> = {
+  title: 'Divider',
+  component: DividerComponent as React.ComponentType<DividerStoryProps>,
+  parameters: {
+    controls: {
+      include: ['emphasis', 'thickness', 'length', 'height', 'width', 'squished'],
+    },
+  },
+  argTypes: {
+    emphasis: {
+      control: 'select',
+      options: ['strong', 'normal', 'faint'],
+    },
+    thickness: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    length: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'full'],
+    },
+    height: {
+      control: 'text',
+    },
+    width: {
+      control: 'text',
+    },
+    squished: {
+      control: 'boolean',
+    },
+  },
+};
+
+type Story = StoryObj<DividerStoryProps>;
+
+export const Vertical: Story = {
+  args: {
+    emphasis: 'normal',
+    thickness: 'md',
+    length: 'full',
+    squished: false,
+  },
+  render: args => (
+    <HStack hAlign="center" height="100%">
+      <VStack vAlign="center" height={args.squished ? '72px' : '100%'}>
+        <HStack style={{ gap: '16px' }}>
+          <Box width={'100px'} height={'100%'} className="bg-highlight-red-3" />
+          <DividerComponent vertical {...args} />
+          <Box width={'100px'} height={'100%'} className="bg-highlight-red-3" />
+          <DividerComponent vertical {...args} />
+          <Box width={'100px'} height={'100%'} className="bg-highlight-red-3" />
+          <DividerComponent vertical {...args} />
+          <Box width={'100px'} height={'100%'} className="bg-highlight-red-3" />
+        </HStack>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: {
+    emphasis: 'normal',
+    thickness: 'md',
+    length: 'full',
+    squished: false,
+  },
+  render: args => (
+    <HStack hAlign="center">
+      <VStack className="pad-md" vAlign="center" width={args.squished ? '72px' : '100%'}>
+        <VStack style={{ gap: '16px' }}>
+          <Box width={'100%'} height={'100px'} className="bg-highlight-red-3" />
+          <DividerComponent horizontal {...args} />
+          <Box width={'100%'} height={'100px'} className="bg-highlight-red-3" />
+          <DividerComponent horizontal {...args} />
+          <Box width={'100%'} height={'100px'} className="bg-highlight-red-3" />
+          <DividerComponent horizontal {...args} />
+          <Box width={'100%'} height={'100px'} className="bg-highlight-red-3" />
+        </VStack>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export default meta;