@tcn/ui 0.9.0 → 0.10.0

package/src/layouts/body/body.tsx

@@ -1,23 +1,24 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import React from 'react';
 import { clsx } from 'clsx';
 import styles from './body.module.css';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
 
-export interface BodyProps extends Omit<VStackProps, 'as'> {}
+export interface BodyProps extends Omit<BoxProps, 'as'> {}
 
+// Under construction: although this component behaves correctly, a content/child component that manages scrolling is needed.
+// For now HBody and VBody are recommended.
 export const Body = React.forwardRef<HTMLElement, BodyProps>(function Body(
-  { children, className, overflowY = 'auto', ...props }: BodyProps,
+  { children, className, ...props }: BodyProps,
   ref
 ) {
   return (
-    <VStack
+    <Box
       ref={ref}
       as="div"
-      overflowY={overflowY}
       className={clsx(styles['body'], className, 'tcn-body')}
       {...props}
     >
       {children}
-    </VStack>
+    </Box>
   );
 });

package/src/layouts/body/h_body.module.css

@@ -2,7 +2,6 @@
   :where(.h-body) {
     min-width: 0;
     flex-grow: 1;
-    flex-grow: 1;
-    height: 100%;
+    height: auto;
   }
 }

package/src/layouts/body/h_body.tsx

@@ -1,20 +1,25 @@
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import React from 'react';
 import { clsx } from 'clsx';
-import styles from './h_body.module.css';
+import styles from './body.module.css';
 
 export interface HBodyProps extends Omit<HStackProps, 'as'> {}
 
 export const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(
-  { children, className, overflowX = 'auto', ...props }: HBodyProps,
+  { children, className, ...props }: HBodyProps,
   ref
 ) {
   return (
     <HStack
       ref={ref}
       as="div"
-      overflowX={overflowX}
-      className={clsx(styles['h-body'], className, 'tcn-h-body', 'tcn-body')}
+      className={clsx(
+        styles['body'],
+        styles['h-body'],
+        className,
+        'tcn-h-body',
+        'tcn-body'
+      )}
       {...props}
     >
       {children}

package/src/layouts/body/v_body.tsx

@@ -1,20 +1,25 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import React from 'react';
 import { clsx } from 'clsx';
-import styles from './v_body.module.css';
+import styles from './body.module.css';
 
 export interface VBodyProps extends Omit<VStackProps, 'as'> {}
 
 export const VBody = React.forwardRef<HTMLElement, VBodyProps>(function VBody(
-  { children, className, overflowY = 'auto', ...props }: VBodyProps,
+  { children, className, ...props }: VBodyProps,
   ref
 ) {
   return (
     <VStack
       ref={ref}
       as="div"
-      overflowY={overflowY}
-      className={clsx(styles['v-body'], className, 'tcn-body', 'tcn-v-body')}
+      className={clsx(
+        styles['body'],
+        styles['v-body'],
+        className,
+        'tcn-body',
+        'tcn-v-body'
+      )}
       {...props}
     >
       {children}

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

@@ -19,7 +19,7 @@
     background: #aaa;
   }
 
-  :where(.divider-line[data-emphasis="light"]) {
+  :where(.divider-line[data-emphasis="faint"]) {
     background: color-mix(in srgb, #aaa, white 20%);
   }
 

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

@@ -1,9 +1,6 @@
 @layer tcn-system {
   :where(.footer) {
-    width: 100%;
     min-height: 0;
-    padding: var(--padding) var(--padding-large);
-    gap: var(--gap);
   }
 
   /*

package/src/layouts/footer/footer.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
-import styles from './footer.module.css';
+import { Bar, type BarProps } from '../bar/bar.js';
 
-export interface FooterProps extends Omit<HStackProps, 'as' | 'children'> {
+import styles from './footer.module.css';
+export interface FooterProps extends Omit<BarProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;
-  children?: React.ReactNode;
 }
 
 export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer(
@@ -15,7 +14,7 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer
   ref
 ) {
   return (
-    <HStack
+    <Bar
       ref={ref}
       as="footer"
       className={clsx(styles.footer, className, 'tcn-footer')}
@@ -24,6 +23,6 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer
       {...props}
     >
       {children}
-    </HStack>
+    </Bar>
   );
 });

package/src/layouts/header/header.tsx

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

package/src/layouts/index.ts

@@ -21,7 +21,6 @@ export { Breakpoint, type BreakpointProps } from './responsive/breakpoint.js';
 export { TTable, THead, TBody, TFoot, TR, TH, TD } from './table/table.js';
 
 export { Rail, type RailProps } from './rail/rail.js';
-export { Main, type MainProps } from './rail/main/main.js';
 export { Side, type SideProps } from './rail/side/side.js';
 export {
   UtilityStrip,

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

@@ -1,10 +1,14 @@
 @layer tcn-system {
-  :where(.rail-stack) {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    :where(.tcn-body) {
+  .rail {
+    :where(.rail-stack) {
+      width: 100%;
       height: 100%;
+      overflow: auto;
+      > :global(.tcn-body) {
+        height: 100%;
+        width: auto;
+        overflow-x: auto;
+      }
     }
   }
 }

package/src/layouts/rail/rail.tsx

@@ -40,7 +40,7 @@ export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={clsx(className, 'tcn-rail')}
+      className={clsx(className, styles['rail'], 'tcn-rail')}
       {...props}
     >
       <HStack

package/src/layouts/rail/side/side.module.css

@@ -2,7 +2,6 @@
   :where(.side) {
     min-width: 0;
     height: 100%;
-    flex-grow: 0;
     width: auto;
   }
 }

package/src/layouts/rail/side/side.tsx

@@ -4,7 +4,6 @@ import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
 
 import styles from './side.module.css';
 
-// UtilityBar
 export interface SideProps extends Omit<VStackProps, 'as'> {}
 
 export const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(
@@ -14,9 +13,9 @@ export const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStr
   return (
     <VStack
       ref={ref}
+      width={width}
       className={clsx(styles['side'], 'tcn-side', className)}
       as="section"
-      width={width}
       {...props}
     >
       {children}

package/src/layouts/rail/utility_strip/utility_strip.module.css

@@ -2,5 +2,10 @@
   :where(.utility-strip) {
     height: 100%;
     min-width: 0;
+    /* WIP */
+    /* writing-mode: vertical-rl;
+    text-orientation: mixed;
+    align-items: start;
+    justify-content: center; */
   }
 }

package/src/layouts/rail/utility_strip/utility_strip.tsx

@@ -5,7 +5,6 @@ import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
 
 import styles from './utility_strip.module.css';
 
-// UtilityBar
 export interface UtilityStripProps extends Omit<VStackProps, 'as'> {
   hierarchy?: Hierarchy;
   size?: Size;
@@ -18,6 +17,8 @@ export const UtilityStrip = React.forwardRef<HTMLElement, UtilityStripProps>(
       className,
       width = 'auto',
       hierarchy = 'secondary',
+      vAlign = 'start',
+      hAlign = 'center',
       size = 'md',
       ...props
     }: UtilityStripProps,
@@ -27,6 +28,8 @@ export const UtilityStrip = React.forwardRef<HTMLElement, UtilityStripProps>(
       <VStack
         ref={ref}
         as="header"
+        vAlign={vAlign}
+        hAlign={hAlign}
         className={clsx(styles['utility-strip'], 'tcn-utility-strip', className)}
         data-hierarchy={hierarchy}
         data-size={size}

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

@@ -1,11 +1,14 @@
 @layer tcn-system {
-  :where(.scaffold-stack) {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    :where(.tcn-main) {
-      height: auto;
-      background: black !important;
+  .scaffold {
+    :where(.scaffold-stack) {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      > :global(.tcn-body) {
+        width: 100%;
+        height: auto;
+        overflow-y: auto;
+      }
     }
   }
 }

package/src/layouts/scaffold/scaffold.tsx

@@ -38,7 +38,7 @@ export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Sc
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={clsx(className, 'tcn-scaffold')}
+      className={clsx(className, styles['scaffold'], 'tcn-scaffold')}
       {...props}
     >
       <VStack

package/src/layouts/utility_bar/utility_bar.tsx

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

package/src/overlay/frame/frame.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ZStack, type ZStackProps } from '../../stacks/index.js';
-import { Portal } from '../portal/portal.js';
 import { Draggable } from '../../utils/dnd/draggable/draggable.js';
+import { Portal } from '../portal/portal.js';
 
 // Styles
-import styles from './frame.module.css';
 import { clsx } from 'clsx';
+import styles from './frame.module.css';
 
 export interface FrameOwnProps {
   isOpen?: boolean;

package/src/stacks/box/bottom_resize_handle.tsx

@@ -1,14 +1,14 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './bottom_resize_handle.module.css';
-import { createVerticalResizeHandler } from './resize_handlers.js';
-import { clsx } from 'clsx';
 import type { HandleProps } from './handle_props.js';
+import { createVerticalResizeHandler } from './resize_handlers.js';
 
 export interface BottomResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onHeightResize?: (value: number) => void;
-  onHeightResizeEnd?: (value: number) => void;
+  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 
 export function BottomResizeHandle({
@@ -20,7 +20,9 @@ export function BottomResizeHandle({
   const resizeHandler = createVerticalResizeHandler(
     targetRef,
     onHeightResize,
-    onHeightResizeEnd
+    onHeightResizeEnd,
+    false,
+    'bottom'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/box/box.tsx

@@ -1,16 +1,16 @@
-import { useForkRef } from '../../utils/index.js';
+import { clsx } from 'clsx';
 import React, { CSSProperties, HTMLAttributes, useRef } from 'react';
-import { LeftResizeHandle } from './left_resize_handle.js';
-import { RightResizeHandle } from './right_resize_handle.js';
+import { useForkRef } from '../../utils/index.js';
+import styles from '../stack.module.css';
+import { isCustomSizeProp } from '../utils/isCustomSizeProp.js';
+import { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';
 import { BottomResizeHandle } from './bottom_resize_handle.js';
 import { EndResizeHandle } from './end_resize_handle.js';
+import { HandleProps } from './handle_props.js';
+import { LeftResizeHandle } from './left_resize_handle.js';
+import { RightResizeHandle } from './right_resize_handle.js';
 import { StartResizeHandle } from './start_resize_handle.js';
 import { TopResizeHandle } from './top_resize_handle.js';
-import { clsx } from 'clsx';
-import { isCustomSizeProp } from '../utils/isCustomSizeProp.js';
-import { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';
-import styles from '../stack.module.css';
-import { HandleProps } from './handle_props.js';
 
 export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {
   as?: string;
@@ -45,16 +45,10 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
   enableResizeOnRight?: boolean;
   horizontalHandleProps?: HandleProps;
   verticalHandleProps?: HandleProps;
-  onWidthResize?: (
-    width: number
-    // origin: 'left' | 'right'
-  ) => void;
-  onHeightResize?: (
-    height: number
-    // origin: 'top' | 'bottom'
-  ) => void;
-  onWidthResizeEnd?: (width: number) => void;
-  onHeightResizeEnd?: (width: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 
 export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(

package/src/stacks/box/end_resize_handle.tsx

@@ -1,16 +1,15 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './end_resize_handle.module.css';
+import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
-import { clsx } from 'clsx';
-import type { HandleProps } from './handle_props.js';
 
 export interface EndResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
-
 export function EndResizeHandle({
   targetRef,
   handleProps,
@@ -20,7 +19,8 @@ export function EndResizeHandle({
   const resizeHandler = createHorizontalResizeHandler(
     targetRef,
     onWidthResize,
-    onWidthResizeEnd
+    onWidthResizeEnd,
+    'right'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/box/left_resize_handle.tsx

@@ -1,14 +1,14 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import { HandleProps } from './handle_props.js';
 import styles from './left_resize_handle.module.css';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
-import { clsx } from 'clsx';
 
 export interface LeftResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function LeftResizeHandle({
   targetRef,
@@ -20,6 +20,7 @@ export function LeftResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
+    'left',
     true,
     true
   );

package/src/stacks/box/resize_handlers.ts

@@ -9,8 +9,9 @@ function createVeil() {
 
 export function createHorizontalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onWidthResize?: (value: number) => void,
-  onWidthResizeEnd?: (value: number) => void,
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void,
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void,
+  origin: 'left' | 'right' = 'right',
   invert = false,
   disableDirection = false
 ) {
@@ -40,7 +41,7 @@ export function createHorizontalResizeHandler(
       width = newWidth;
 
       box.style.width = `${newWidth}px`;
-      onWidthResize && onWidthResize(newWidth);
+      onWidthResize?.(newWidth, origin, deltaX);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -60,7 +61,7 @@ export function createHorizontalResizeHandler(
       event.stopPropagation();
       event.preventDefault();
 
-      onWidthResizeEnd && onWidthResizeEnd(width);
+      onWidthResizeEnd?.(width, origin);
     };
 
     document.body.addEventListener('mousemove', drag);
@@ -73,9 +74,10 @@ export function createHorizontalResizeHandler(
 
 export function createVerticalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
-  onHeightResize?: (value: number) => void,
-  onHeightResizeEnd?: (value: number) => void,
-  invert = false
+  onHeightResize?: (height: number, origin: 'top' | 'bottom', delta: number) => void,
+  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void,
+  invert = false,
+  origin: 'top' | 'bottom' = 'bottom'
 ) {
   const direction = invert ? -1 : 1;
   return function startVerticalResize(event: React.MouseEvent) {
@@ -97,7 +99,7 @@ export function createVerticalResizeHandler(
       const newHeight = startRect.height + deltaY;
       height = newHeight;
       box.style.height = `${newHeight}px`;
-      onHeightResize && onHeightResize(newHeight);
+      onHeightResize?.(newHeight, origin, deltaY);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -117,7 +119,7 @@ export function createVerticalResizeHandler(
       event.stopPropagation();
       event.preventDefault();
 
-      onHeightResizeEnd && onHeightResizeEnd(height);
+      onHeightResizeEnd?.(height, origin);
     };
 
     document.body.addEventListener('mousemove', drag);

package/src/stacks/box/right_resize_handle.tsx

@@ -1,14 +1,14 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './right_resize_handle.module.css';
-import { clsx } from 'clsx';
 
 export interface RightResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function RightResizeHandle({
   targetRef,
@@ -20,6 +20,7 @@ export function RightResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
+    'right',
     false,
     true
   );

package/src/stacks/box/start_resize_handle.tsx

@@ -7,8 +7,8 @@ import { clsx } from 'clsx';
 export interface StartResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
-  onWidthResize?: (value: number) => void;
-  onWidthResizeEnd?: (value: number) => void;
+  onWidthResize?: (width: number, origin: 'left' | 'right', delta: number) => void;
+  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
 }
 export function StartResizeHandle({
   targetRef,
@@ -20,7 +20,7 @@ export function StartResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
-    true
+    'left'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;