@tcn/ui 0.0.1

package/src/layouts/grid/grid.tsx

@@ -0,0 +1,120 @@
+import classNames from 'classnames';
+import React, { HTMLAttributes } from 'react';
+import { CommonProps } from '../../stacks/types/common.js';
+import styles from './grid.module.css';
+import { removeUndefinedProperties } from '../../stacks/utils/remove_undefined_properties.js';
+
+export interface GridProps extends CommonProps, HTMLAttributes<HTMLElement> {
+  itemHeight: number;
+  itemWidth: number;
+  as?: string;
+  columnAmount?: number;
+  children?: React.ReactNode;
+  gap?: string | number;
+  rowGap?: string | number;
+  columnGap?: string | 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;
+}
+
+export const Grid = React.forwardRef(function Grid(
+  {
+    as = 'div',
+    children,
+    style,
+    className,
+    itemHeight,
+    itemWidth,
+    columnAmount,
+    gap,
+    rowGap,
+    columnGap,
+    padding,
+    paddingInline,
+    paddingBlock,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingTop,
+    paddingBottom,
+    margin,
+    marginInline,
+    marginBlock,
+    marginInlineStart,
+    marginInlineEnd,
+    marginTop,
+    marginBottom,
+    zIndex,
+    ...attr
+  }: GridProps,
+  ref: React.Ref<HTMLElement>
+) {
+  const As = as as React.ElementType;
+  // Calculate the number of children
+  const childrenArray = React.Children.toArray(children);
+  const childrenCount = childrenArray.length;
+
+  const template = `repeat(auto-fill, ${itemWidth}px)`;
+  let maxWidth: string;
+
+  if (columnAmount) {
+    const amount = Math.min(columnAmount, childrenCount);
+    const columnWidth = String(amount * itemWidth) + 'px';
+
+    if (gap) {
+      maxWidth = `calc(${columnWidth} + ${gap} * ${amount - 1})`;
+    } else {
+      maxWidth = columnWidth;
+    }
+  } else {
+    maxWidth = '100%';
+  }
+
+  const gridStyles: any = removeUndefinedProperties({
+    gap,
+    rowGap,
+    columnGap,
+    '--item-height': itemHeight + 'px',
+    '--max-width': maxWidth,
+    '--template': template,
+    padding,
+    paddingInline,
+    paddingBlock,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingTop,
+    paddingBottom,
+    margin,
+    marginInline,
+    marginBlock,
+    marginInlineStart,
+    marginInlineEnd,
+    marginTop,
+    marginBottom,
+    zIndex,
+    ...style,
+  });
+
+  return (
+    <As
+      ref={ref}
+      className={classNames(styles.grid, className)}
+      style={gridStyles}
+      {...attr}
+    >
+      {children}
+    </As>
+  );
+});

package/src/layouts/header/header.module.css

@@ -0,0 +1,6 @@
+.header {
+  width: 100%;
+  min-height: 0;
+  padding: var(--padding) var(--padding-large);
+  gap: var(--gap);
+}

package/src/layouts/header/header.tsx

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

package/src/layouts/index.ts

@@ -0,0 +1,14 @@
+export * from './column/column.js';
+export * from './divider/divider.js';
+export * from './drawers/drawer_bottom/drawer_bottom.js';
+export * from './drawers/drawer_top/drawer_top.js';
+export * from './drawers/drawer_start/drawer_start.js';
+export * from './drawers/drawer_end/drawer_end.js';
+export * from './footer/footer.js';
+export * from './grid/grid.js';
+export * from './header/header.js';
+export * from './list/item.js';
+export * from './list/list.js';
+export * from './list/section_header.js';
+export * from './sidebar_end/sidebar_end.js';
+export * from './sidebar_start/sidebar_start.js';

package/src/layouts/list/item.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import classnames from 'classnames';
+
+export interface ItemProps extends Omit<HStackProps, 'as' | 'children'> {
+  children?: React.ReactNode;
+}
+
+export const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
+  { children, className, ...props }: ItemProps,
+  ref
+) {
+  return (
+    <HStack ref={ref} as="li" className={classnames('item', className)} {...props}>
+      {children}
+    </HStack>
+  );
+});

package/src/layouts/list/list.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import classnames from 'classnames';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+
+export interface ListProps extends Omit<VStackProps, 'as'> {
+  isOrdered?: boolean;
+}
+
+export const List = React.forwardRef<HTMLDivElement, ListProps>(function Item(
+  { children, className, isOrdered = false, ...props }: ListProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as={isOrdered ? 'ol' : 'ul'}
+      className={classnames('list', className)}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/list/section_header.module.css

@@ -0,0 +1,18 @@
+.section-header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.section-header[data-hierarchy="primary"] {
+  background-color: #f1f1f1;
+}
+
+.section-header[data-hierarchy="secondary"] {
+  background-color: #f1f1f1;
+}
+
+.section-header[data-hierarchy="tertiary"] {
+  background-color: #f1f1f1;
+}

package/src/layouts/list/section_header.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { HStack } from '../../stacks/h_stack.js';
+import type { HStackProps } from '../../stacks/h_stack.js';
+
+export interface SectionHeaderProps extends Omit<HStackProps, 'as'> {}
+
+export const SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(
+  function SectionHeader({ children, className, ...props }: SectionHeaderProps, ref) {
+    return (
+      <HStack ref={ref} as="li" className={className} {...props}>
+        {children}
+      </HStack>
+    );
+  }
+);

package/src/layouts/sidebar_end/sidebar_end.module.css

@@ -0,0 +1,31 @@
+.sidebarEndBox {
+  width: 250px;
+  height: 100%;
+  z-index: 2;
+}
+
+.sidebarEnd {
+  width: 100%;
+  height: 100%;
+}
+
+/* Primary hierarchy - main sidebar end */
+.sidebarEnd[data-hierarchy="primary"] {
+  background: #ffffff;
+  border-left: 1px solid #e0e0e0;
+  padding: 16px;
+}
+
+/* Secondary hierarchy - sub sidebar end */
+.sidebarEnd[data-hierarchy="secondary"] {
+  background: #f8f9fa;
+  border-left: 1px solid #e9ecef;
+  padding: 12px;
+}
+
+/* Tertiary hierarchy - minor sidebar end */
+.sidebarEnd[data-hierarchy="tertiary"] {
+  background: #f1f3f4;
+  border-left: 1px solid #dee2e6;
+  padding: 8px;
+}

package/src/layouts/sidebar_end/sidebar_end.tsx

@@ -0,0 +1,64 @@
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Alignment } from '../../stacks/types/alignment.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './sidebar_end.module.css';
+import type { Hierarchy } from '../../utils/index.js';
+
+export interface SidebarEndProps extends Omit<BoxProps, 'as'> {
+  hierarchy?: Hierarchy;
+  hAlign?: Alignment;
+  vAlign?: Alignment;
+}
+
+export const SidebarEnd = React.forwardRef<HTMLElement, SidebarEndProps>(
+  function SidebarEnd(
+    {
+      hierarchy = 'secondary',
+      children,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      hAlign,
+      vAlign = 'start',
+      className,
+      ...props
+    }: SidebarEndProps,
+    ref
+  ) {
+    return (
+      <Box
+        width={width}
+        height={height}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        className={styles.sidebarEndBox}
+        as={'section'}
+        {...props}
+      >
+        <VStack
+          width={width}
+          height={height}
+          minWidth={minWidth}
+          maxWidth={maxWidth}
+          minHeight={minHeight}
+          maxHeight={maxHeight}
+          hAlign={hAlign}
+          vAlign={vAlign}
+          ref={ref}
+          data-hierarchy={hierarchy}
+          className={classNames(styles.sidebarEnd, className, 'sidebar-end')}
+          zIndex={0}
+        >
+          {children}
+        </VStack>
+      </Box>
+    );
+  }
+);

package/src/layouts/sidebar_start/sidebar_start.module.css

@@ -0,0 +1,31 @@
+.sidebarStartBox {
+  width: 250px;
+  height: 100%;
+  z-index: 2;
+}
+
+.sidebarStart {
+  width: 100%;
+  height: 100%;
+}
+
+/* Primary hierarchy - main sidebar start */
+.sidebarStart[data-hierarchy="primary"] {
+  background: #ffffff;
+  border-right: 1px solid #e0e0e0;
+  padding: 16px;
+}
+
+/* Secondary hierarchy - sub sidebar start */
+.sidebarStart[data-hierarchy="secondary"] {
+  background: #f8f9fa;
+  border-right: 1px solid #e9ecef;
+  padding: 12px;
+}
+
+/* Tertiary hierarchy - minor sidebar start */
+.sidebarStart[data-hierarchy="tertiary"] {
+  background: #f1f3f4;
+  border-right: 1px solid #dee2e6;
+  padding: 8px;
+}

package/src/layouts/sidebar_start/sidebar_start.tsx

@@ -0,0 +1,61 @@
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Alignment } from '../../stacks/types/alignment.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './sidebar_start.module.css';
+import type { Hierarchy } from '../../utils/index.js';
+
+export interface SidebarStartProps extends Omit<BoxProps, 'as'> {
+  hierarchy?: Hierarchy;
+  hAlign?: Alignment;
+  vAlign?: Alignment;
+}
+
+export const SidebarStart = React.forwardRef<HTMLElement, SidebarStartProps>(
+  function SidebarStart(
+    {
+      hierarchy = 'secondary',
+      children,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      hAlign,
+      vAlign = 'start',
+      className,
+      ...props
+    }: SidebarStartProps,
+    ref
+  ) {
+    return (
+      <Box
+        width={width}
+        height={height}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        className={styles.sidebarStartBox}
+        {...props}
+      >
+        <VStack
+          minWidth={minWidth}
+          maxWidth={maxWidth}
+          minHeight={minHeight}
+          maxHeight={maxHeight}
+          hAlign={hAlign}
+          vAlign={vAlign}
+          ref={ref}
+          data-hierarchy={hierarchy}
+          className={classNames(styles.sidebarStart, className, 'sidebar-start')}
+          zIndex={0}
+        >
+          {children}
+        </VStack>
+      </Box>
+    );
+  }
+);

package/src/layouts/utility_bar/utility_bar.module.css

@@ -0,0 +1,7 @@
+.utility-bar {
+  width: 100%;
+  min-height: 0;
+  border-bottom: 1px solid rgb(221, 221, 221);
+  padding: var(--padding-medium);
+  gap: var(--gap-medium);
+}

package/src/layouts/utility_bar/utility_bar.tsx

@@ -0,0 +1,39 @@
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './utility_bar.module.css';
+import type { Hierarchy, Size } from '../../utils/index.js';
+
+// UtilityBar
+export interface UtilityBarProps extends Omit<HStackProps, 'as'> {
+  hierarchy?: Hierarchy;
+  size?: Size;
+}
+
+export const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(
+  function UtilityBar(
+    {
+      hierarchy = 'secondary',
+      height = 'auto',
+      children,
+      className,
+      size = 'md',
+      ...props
+    }: UtilityBarProps,
+    ref
+  ) {
+    return (
+      <HStack
+        ref={ref}
+        as="header"
+        className={classNames(styles['utility-bar'], className, 'utility-bar')}
+        data-hierarchy={hierarchy}
+        data-size={size}
+        height={height}
+        {...props}
+      >
+        {children}
+      </HStack>
+    );
+  }
+);

package/src/overlay/context_menu/context_menu.stories.tsx

@@ -0,0 +1,79 @@
+/** biome-ignore-all lint/suspicious/noConsole: Stories are fine to console */
+import { Position } from '../../utils/types/dimensions.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import React from 'react';
+import { useState } from 'react';
+import { ContextMenu } from './context_menu.js';
+import { MenuItem } from '../menu/menu.js';
+
+export default {
+  title: 'Context Menu',
+};
+
+function Example() {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<Position | null>(null);
+
+  function close() {
+    setOpen(false);
+  }
+
+  function placeMenu(event: React.MouseEvent<HTMLElement>) {
+    setPosition({ x: event.clientX, y: event.clientY });
+    setOpen(true);
+    event.preventDefault();
+  }
+
+  return (
+    <>
+      <ZStack
+        width="100px"
+        height="100px"
+        onContextMenu={placeMenu}
+        style={{
+          backgroundColor: 'red',
+          boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+          borderRadius: '8px',
+        }}
+      >
+        Right Click Me
+      </ZStack>
+
+      <ContextMenu open={open} position={position} onClose={close}>
+        <MenuItem label="Option 1" />
+        <MenuItem
+          label="Option 2"
+          onClick={() => {
+            console.log('HEY');
+          }}
+        />
+        <MenuItem label="Option 3" />
+        <MenuItem label="Option 4" />
+        <MenuItem label="Nested Options">
+          <MenuItem label="Option 1" />
+          <MenuItem label="Option 2" />
+          <MenuItem label="Option 3" />
+          <MenuItem label="Option 4" />
+          <MenuItem label="Nested Options">
+            <MenuItem label="Option 1" />
+            <MenuItem label="Option 2" />
+            <MenuItem label="Option 3" />
+            <MenuItem label="Option 4" />
+          </MenuItem>
+        </MenuItem>
+      </ContextMenu>
+    </>
+  );
+}
+
+export function Baseline() {
+  return (
+    <VStack height="100%">
+      <Example />
+      <Spacer />
+      <Example />
+    </VStack>
+  );
+}

package/src/overlay/context_menu/context_menu.tsx

@@ -0,0 +1,55 @@
+import { Position } from '../../utils/index.js';
+import { Portal } from '../portal/portal.js';
+import React, { useState } from 'react';
+import { Menu } from '../menu/menu.js';
+
+export interface ContextMenuProps {
+  open: boolean;
+  onClose: () => void;
+  position?: Position | null;
+  children?: React.ReactNode;
+}
+
+export function ContextMenu({ open, position, children, onClose }: ContextMenuProps) {
+  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
+
+  if (!open || position == null) {
+    return null;
+  }
+
+  return (
+    <>
+      <Portal>
+        <div style={{ position: 'fixed', inset: 0 }}>
+          <div
+            ref={element => {
+              setAnchorElement(element);
+            }}
+            style={{
+              position: 'absolute',
+              top: position.y,
+              left: position.x,
+              width: '1px',
+              height: '1px',
+              opacity: 0,
+            }}
+          ></div>
+        </div>
+      </Portal>
+      <Menu
+        veil
+        horizontalAnchor="start"
+        verticalAnchor="top"
+        horizontalOrigin="start"
+        verticalOrigin="top"
+        anchorElement={anchorElement}
+        open={open}
+        onClose={onClose}
+        minWidth="150px"
+        className="context-menu"
+      >
+        {children}
+      </Menu>
+    </>
+  );
+}

package/src/overlay/menu/menu.module.css

@@ -0,0 +1,33 @@
+.menu {
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+  background-color: rgb(255, 255, 255);
+  padding: 8px;
+}
+
+.menu-item {
+  border-radius: 4px;
+  padding: 4px;
+  padding-inline: 8px;
+  height: auto;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.menu-item:active {
+  opacity: 0.75;
+}
+
+.menu-item:hover,
+.menu-item[data-is-open="true"] {
+  background-color: var(--accent-color);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.menu-item:focus {
+  background-color: var(--accent-color);
+  color: rgba(255, 255, 255, 0.9);
+}