@tcn/ui 0.16.0 → 0.18.0

package/src/layouts/containers/rail.tsx

@@ -1,44 +1,20 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import type { Alignment } from '../../stacks/types/alignment.js';
-import { HStack } from '../../stacks/h_stack.js';
-
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import styles from './containers.module.css';
 
-export interface RailProps extends Omit<BoxProps, 'as'> {
-  vAlign?: Alignment;
-  hAlign?: Alignment;
-}
+export interface RailProps extends Omit<HStackProps, 'as'> {}
 
-// WIP: This component is not fully implemented.
 export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
-  {
-    children,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    hAlign = 'start',
-    vAlign = 'start',
-    className,
-    ...props
-  }: RailProps,
+  { children, className, vAlign = 'start', hAlign = 'start', ...props }: RailProps,
   ref
 ) {
   return (
-    <Box
+    <HStack
       ref={ref}
-      width={width}
-      height={height}
-      minWidth={minWidth}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      maxHeight={maxHeight}
-      data-h-alignment={hAlign}
-      data-v-alignment={vAlign}
+      as="section"
+      vAlign={vAlign}
+      hAlign={hAlign}
       className={clsx(
         className,
         styles['rail'],
@@ -48,25 +24,7 @@ export const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(
       )}
       {...props}
     >
-      <HStack
-        as="section"
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        hAlign={hAlign}
-        vAlign={vAlign}
-        ref={ref}
-        className={clsx(
-          styles['rail-stack'],
-          styles['container-stack'],
-          'tcn-container-stack',
-          'tcn-rail-stack'
-        )}
-        zIndex={0}
-      >
-        {children}
-      </HStack>
-    </Box>
+      {children}
+    </HStack>
   );
 });

package/src/layouts/containers/rows/index.ts

@@ -0,0 +1,2 @@
+export { Row, type RowProps } from './row.js';
+export { Rows, type RowsProps } from './rows.js';

package/src/layouts/containers/rows/row.module.css

@@ -0,0 +1,15 @@
+@layer tcn-system {
+  :where(.row) {
+    width: 100%;
+    min-width: 0;
+    height: var(--rows-height, auto);
+    min-height: var(--rows-min-height, 0);
+    max-height: var(--rows-max-height, none);
+    flex-grow: 0;
+  }
+
+  :where(.row[data-height="fill"]) {
+    flex-grow: 1;
+    height: 0; /* let flex-grow determine height, not content */
+  }
+}

package/src/layouts/containers/rows/row.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
+import styles from './row.module.css';
+
+export interface RowProps extends Omit<HStackProps, 'as'> {}
+
+export const Row = React.forwardRef<HTMLElement, RowProps>(function Row(
+  { children, className, ...props }: RowProps,
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      as="section"
+      className={clsx('tcn-row', styles['row'], className)}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/layouts/containers/rows/rows.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Scaffold, type ScaffoldProps } from '../scaffold.js';
+import { removeUndefinedProperties } from '../../../stacks/utils/remove_undefined_properties.js';
+
+export interface RowsOwnProps {
+  rowsMinHeight?: string | number;
+  rowsHeight?: string | number;
+  rowsMaxHeight?: string | number;
+}
+
+export interface RowsProps extends Omit<ScaffoldProps, 'as'>, RowsOwnProps {}
+
+export const Rows = React.forwardRef<HTMLElement, RowsProps>(function Rows(
+  {
+    children,
+    className,
+    rowsMinHeight,
+    rowsHeight,
+    rowsMaxHeight,
+    style,
+    ...props
+  }: RowsProps,
+  ref
+) {
+  const rowVars = removeUndefinedProperties({
+    '--rows-min-height': rowsMinHeight,
+    '--rows-height': rowsHeight,
+    '--rows-max-height': rowsMaxHeight,
+  });
+
+  return (
+    <Scaffold
+      ref={ref}
+      className={clsx('tcn-rows', className)}
+      style={{ ...rowVars, ...style }}
+      {...props}
+    >
+      {children}
+    </Scaffold>
+  );
+});

package/src/layouts/containers/scaffold.tsx

@@ -1,42 +1,20 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import type { Alignment } from '../../stacks/types/alignment.js';
-import { VStack } from '../../stacks/v_stack.js';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import styles from './containers.module.css';
 
-export interface ScaffoldProps extends Omit<BoxProps, 'as'> {
-  vAlign?: Alignment;
-  hAlign?: Alignment;
-}
+export interface ScaffoldProps extends Omit<VStackProps, 'as'> {}
 
 export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(
-  {
-    children,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    hAlign = 'start',
-    vAlign = 'start',
-    className,
-    ...props
-  }: ScaffoldProps,
+  { children, className, vAlign = 'start', hAlign = 'start', ...props }: ScaffoldProps,
   ref
 ) {
   return (
-    <Box
+    <VStack
       ref={ref}
-      width={width}
-      height={height}
-      minWidth={minWidth}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      maxHeight={maxHeight}
-      data-h-alignment={hAlign}
-      data-v-alignment={vAlign}
+      as="section"
+      vAlign={vAlign}
+      hAlign={hAlign}
       className={clsx(
         className,
         styles['scaffold'],
@@ -46,25 +24,7 @@ export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Sc
       )}
       {...props}
     >
-      <VStack
-        as="section"
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        hAlign={hAlign}
-        vAlign={vAlign}
-        ref={ref}
-        className={clsx(
-          styles['scaffold-stack'],
-          styles['container-stack'],
-          'tcn-container-stack',
-          'tcn-scaffold-stack'
-        )}
-        zIndex={0}
-      >
-        {children}
-      </VStack>
-    </Box>
+      {children}
+    </VStack>
   );
 });

package/src/layouts/index.ts

@@ -21,6 +21,8 @@ export { TTable, THead, TBody, TFoot, TR, TH, TD } from './table/table.js';
 
 export { Rail, type RailProps } from './containers/rail.js';
 export { Columns, type ColumnsProps } from './containers/columns/columns.js';
+export { Row, type RowProps } from './containers/rows/row.js';
+export { Rows, type RowsProps } from './containers/rows/rows.js';
 export {
   UtilityStrip,
   type UtilityStripProps,

package/src/overlay/frame/frame.stories.tsx

@@ -2,7 +2,7 @@ import { Header, Scaffold } from '../../layouts/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { BodyText } from '../../typography/index.js';
 import { Title } from '../../typography/title/title.js';
-import { DragHandle } from '../../utils/dnd/handle.js';
+import { DragHandle } from '../../utils/decorators/draggable/drag_handle.js';
 import { Frame, type FrameOwnProps } from './frame.js';
 import styles from './frame_stories.module.css';
 export default {
@@ -24,6 +24,7 @@ export const FrameStory = (args: Omit<FrameOwnProps, 'children'>) => {
       <Frame
         width="300px"
         height="300px"
+        minWidth="100px"
         className={styles['sb-frame-container']}
         {...args}
       >

package/src/overlay/frame/frame.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { flushSync } from 'react-dom';
 import {
   Box,
@@ -8,12 +8,14 @@ import {
   type OnHeightResizePayload,
   type OnWidthResizePayload,
 } from '../../stacks/index.js';
-import { useDragContainer } from '../../utils/dnd/context.js';
-import { Draggable } from '../../utils/dnd/draggable/draggable.js';
+import { useDragContainer } from '../../utils/decorators/draggable/context.js';
+import { Draggable } from '../../utils/decorators/draggable/draggable.js';
+import { Resizable } from '../../utils/decorators/resizable/resizable.js';
+import { ResizeHandle } from '../../utils/decorators/resizable/resize_handle.js';
 import { Portal } from '../portal/portal.js';
 
 // Styles
-import styles from './frame.module.css';
+
 export interface FrameOwnProps {
   isOpen?: boolean;
   draggable?: boolean;
@@ -37,6 +39,8 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
     enableResizeOnEnd = true,
     enableResizeOnLeft = false,
     enableResizeOnRight = false,
+    minWidth = 1,
+    minHeight = 1,
     ...rest
   }: FrameProps,
   ref
@@ -56,6 +60,8 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
             enableResizeOnRight={resizable && enableResizeOnRight}
             enableResizeOnLeft={resizable && enableResizeOnLeft}
             draggable={draggable}
+            minWidth={minWidth}
+            minHeight={minHeight}
             {...rest}
           >
             {children}
@@ -77,18 +83,36 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
       draggable,
       onWidthResize,
       onHeightResize,
+      onWidthResizeEnd,
+      onHeightResizeEnd,
+      enableResizeOnTop,
+      enableResizeOnBottom,
+      enableResizeOnStart,
+      enableResizeOnEnd,
+      enableResizeOnLeft,
+      enableResizeOnRight,
       ...rest
     }: FrameDialogProps,
     ref: React.Ref<HTMLElement>
   ) {
     const drag = useDragContainer();
+    const prevWidthRef = useRef<number | null>(null);
+    const prevHeightRef = useRef<number | null>(null);
 
     const handleWidthResize = React.useCallback(
       (payload: OnWidthResizePayload) => {
-        if (!draggable) return;
-        if (payload.currentDelta === 0) return;
-        const sign = payload.origin === 'right' ? 1 : -1;
-        const dx = (payload.currentDelta / 2) * sign;
+        const actualDelta =
+          prevWidthRef.current !== null
+            ? payload.width - prevWidthRef.current
+            : payload.currentDelta;
+        prevWidthRef.current = payload.width;
+
+        if (!draggable || actualDelta === 0) {
+          onWidthResize?.(payload);
+          return;
+        }
+        const sign = payload.origin === 'end' ? 1 : -1;
+        const dx = (actualDelta / 2) * sign;
         flushSync(() => {
           drag.setPosition(prev => ({
             x: prev.x + dx,
@@ -103,11 +127,18 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
 
     const handleHeightResize = useCallback(
       (payload: OnHeightResizePayload) => {
-        if (!draggable) return;
-        if (payload.currentDelta === 0) return;
+        const actualDelta =
+          prevHeightRef.current !== null
+            ? payload.height - prevHeightRef.current
+            : payload.currentDelta;
+        prevHeightRef.current = payload.height;
+
+        if (!draggable || actualDelta === 0) {
+          onHeightResize?.(payload);
+          return;
+        }
         const sign = payload.origin === 'bottom' ? 1 : -1;
-        const half = payload.currentDelta / 2;
-        const dy = half * sign;
+        const dy = (actualDelta / 2) * sign;
         flushSync(() => {
           drag.setPosition(prev => ({
             x: prev.x,
@@ -120,17 +151,34 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
     );
 
     return (
-      <Box
-        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}
-        ref={ref}
+      <Resizable
         onWidthResize={handleWidthResize}
         onHeightResize={handleHeightResize}
-        as={as}
-        role={role}
-        {...rest}
+        onWidthResizeEnd={(width, origin) => {
+          prevWidthRef.current = null;
+          onWidthResizeEnd?.(width, origin);
+        }}
+        onHeightResizeEnd={(height, origin) => {
+          prevHeightRef.current = null;
+          onHeightResizeEnd?.(height, origin);
+        }}
       >
-        {children}
-      </Box>
+        <Box
+          className={clsx('tcn-frame', 'tcn-frame-dialog', className)}
+          ref={ref}
+          as={as}
+          role={role}
+          {...rest}
+        >
+          {children}
+        </Box>
+        {enableResizeOnTop && <ResizeHandle position="top" />}
+        {enableResizeOnBottom && <ResizeHandle position="bottom" />}
+        {enableResizeOnStart && <ResizeHandle position="start" />}
+        {enableResizeOnEnd && <ResizeHandle position="end" />}
+        {enableResizeOnLeft && <ResizeHandle position="start" />}
+        {enableResizeOnRight && <ResizeHandle position="end" />}
+      </Resizable>
     );
   }
 );

package/src/overlay/popper/base/dismissal_decorator.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, type PropsWithChildren } from 'react';
-import { ClickAwayListener } from '../../../utils/click_away_listener.js';
-import { ScrollAwayListener } from '../../../utils/scroll_away_listener.js';
-import { MouseLeaveRegion } from '../../../utils/mouse_leave_region.js';
+import { ClickAwayListener } from '../../../utils/listeners/click_away_listener.js';
+import { ScrollAwayListener } from '../../../utils/listeners/scroll_away_listener.js';
+import { MouseLeaveRegion } from '../../../utils/listeners/mouse_leave_region.js';
 
 export enum PopperDismissal {
   CLICK_AWAY = 'clickAway',

package/src/overlay/slide/slide.stories.tsx

@@ -3,7 +3,7 @@ import { ZStack } from '../../stacks/z_stack.js';
 import { BodyText } from '../../typography/index.js';
 import { Title } from '../../typography/title/title.js';
 import { Slide, type SlideProps } from './slide.js';
-import { DragHandle } from '../../utils/dnd/handle.js';
+import { DragHandle } from '../../utils/decorators/draggable/drag_handle.js';
 
 export default {
   title: 'Overlays/Floating/Slide',

package/src/stacks/box/box.tsx

@@ -7,8 +7,6 @@ import { removeUndefinedProperties } from '../utils/remove_undefined_properties.
 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 type {
@@ -43,20 +41,47 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
   overflow?: React.CSSProperties['overflow'];
   overflowX?: React.CSSProperties['overflowX'];
   overflowY?: React.CSSProperties['overflowY'];
+  /** @deprecated Use Resizable + ResizeHandle instead */
   enableResizeOnTop?: boolean;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   enableResizeOnEnd?: boolean;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   enableResizeOnBottom?: boolean;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   enableResizeOnStart?: boolean;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   enableResizeOnLeft?: boolean;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   enableResizeOnRight?: boolean;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   horizontalHandleProps?: HandleProps;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   verticalHandleProps?: HandleProps;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   onWidthResize?: OnWidthResize;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   onHeightResize?: OnHeightResize;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   onWidthResizeEnd?: OnWidthResizeEnd;
+  /** @deprecated Use Resizable + ResizeHandle instead */
   onHeightResizeEnd?: OnHeightResizeEnd;
 }
 
+/** Union of deprecated resize-related prop names on BoxProps. Useful for Omit<BoxProps, DeprecatedBoxResizeProps>. */
+export type DeprecatedBoxResizeProps =
+  | 'enableResizeOnTop'
+  | 'enableResizeOnEnd'
+  | 'enableResizeOnBottom'
+  | 'enableResizeOnStart'
+  | 'enableResizeOnLeft'
+  | 'enableResizeOnRight'
+  | 'horizontalHandleProps'
+  | 'verticalHandleProps'
+  | 'onWidthResize'
+  | 'onHeightResize'
+  | 'onWidthResizeEnd'
+  | 'onHeightResizeEnd';
+
 export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(
   {
     style,
@@ -206,7 +231,7 @@ export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(
         />
       )}
       {enableResizeOnLeft && (
-        <LeftResizeHandle
+        <StartResizeHandle
           onWidthResize={onWidthResize}
           onWidthResizeEnd={onWidthResizeEnd}
           targetRef={boxRef}
@@ -214,7 +239,7 @@ export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(
         />
       )}
       {enableResizeOnRight && (
-        <RightResizeHandle
+        <EndResizeHandle
           onWidthResize={onWidthResize}
           onWidthResizeEnd={onWidthResizeEnd}
           targetRef={boxRef}

package/src/stacks/box/detect_resize_bounds.ts

@@ -11,6 +11,7 @@ export type DetectResizeBoundsResult = {
   hitMin: boolean;
   hitMax: boolean;
   clamped: boolean;
+  clampedSize: number | null;
 };
 
 const styleKeys = {
@@ -36,10 +37,12 @@ function detectByPixelValue(nextSize: number, min: string, max: string) {
   const maxPx = parsePx(max);
   const hitMin = minPx !== null && nextSize < minPx;
   const hitMax = maxPx !== null && nextSize > maxPx;
+  const clamped = hitMin || hitMax;
   return {
     hitMin,
     hitMax,
-    clamped: hitMin || hitMax,
+    clamped,
+    clampedSize: clamped ? (hitMin ? minPx : maxPx) : null,
   };
 }
 
@@ -76,6 +79,7 @@ export function detectResizeBounds({
       hitMin,
       hitMax,
       clamped,
+      clampedSize: clamped ? renderedSize : null,
     };
   } finally {
     // revert the style change

package/src/stacks/box/end_resize_handle.tsx

@@ -15,7 +15,7 @@ export function EndResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
-    'right'
+    'end'
   );
   const offset = handleProps?.offset ? handleProps.offset : -8;
 

package/src/stacks/box/resize_handlers.ts

@@ -19,7 +19,7 @@ export function createHorizontalResizeHandler(
   targetRef: React.MutableRefObject<HTMLElement | null>,
   onWidthResize?: OnWidthResize,
   onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void,
-  origin: WidthResizeOrigin = 'right',
+  origin: WidthResizeOrigin = 'end',
   invert = false,
   disableDirection = false
 ) {

package/src/stacks/box/start_resize_handle.tsx

@@ -16,7 +16,7 @@ export function StartResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
-    'left',
+    'start',
     true
   );
 

package/src/stacks/box/types.ts

@@ -1,7 +1,8 @@
 import type { HandleProps } from './handle_props.js';
+import type { HorizontalSide, VerticalSide } from '../../utils/types/sides.js';
 
-export type WidthResizeOrigin = 'left' | 'right';
-export type HeightResizeOrigin = 'top' | 'bottom';
+export type WidthResizeOrigin = HorizontalSide;
+export type HeightResizeOrigin = VerticalSide;
 
 export interface BaseOnResizePayload<
   Origin extends WidthResizeOrigin | HeightResizeOrigin,

package/src/stacks/collapsible_box.stories.tsx

@@ -1,7 +1,7 @@
 import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js';
 import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
 import React from 'react';
-import { Button, SlimButton } from '../actions/index.js';
+import { Button } from '../actions/index.js';
 import { Title } from '../typography/index.js';
 import { HCollapsibleBox } from './h_collapsible_box.js';
 import { HStack } from './h_stack.js';
@@ -26,14 +26,14 @@ function MyPanel() {
   return (
     <VStack height="100%" vAlign="start" style={{ backgroundColor: 'white' }}>
       <HStack padding="8px">
-        <SlimButton hierarchy="tertiary">
+        <Button utility hierarchy="tertiary">
           <ChevronLeft size="lg" />
-        </SlimButton>
+        </Button>
         <Title emphasis="strong">Foo</Title>
         <Spacer />
-        <SlimButton size="md" hierarchy="primary">
+        <Button utility size="md" hierarchy="primary">
           <Plus />
-        </SlimButton>
+        </Button>
       </HStack>
     </VStack>
   );

package/src/stacks/demo.stories.tsx

@@ -6,7 +6,7 @@ import { BodyText, Headline, Subheadline, Title } from '../typography/index.js';
 import { MoreHorizontalIcon } from '@tcn/icons/more_horizontal_icon.js';
 import { PlayFilledIcon } from '@tcn/icons/play_filled_icon.js';
 import { ShuffleIcon } from '@tcn/icons/shuffle_icon.js';
-import { Button, SlimButton } from '../actions/index.js';
+import { Button } from '../actions/index.js';
 import { CloudDownloadIcon } from '@tcn/icons/cloud_download_icon.js';
 import { Spacer } from './spacer.js';
 import styles from './demo.module.css';
@@ -28,9 +28,9 @@ export function Track() {
       </HStack>
       <HStack width="auto" gap="8px">
         <BodyText>2:00</BodyText>
-        <SlimButton hierarchy="tertiary" gap="4px">
+        <Button utility hierarchy="tertiary" gap="4px">
           <MoreHorizontalIcon size="lg" />
-        </SlimButton>
+        </Button>
       </HStack>
     </HStack>
   );
@@ -83,12 +83,12 @@ export function Playing() {
             </Button>
             <Spacer />
             <HStack width="auto" gap="8px">
-              <SlimButton hierarchy="secondary" gap="4px">
+              <Button utility hierarchy="secondary" gap="4px">
                 <CloudDownloadIcon size="lg" />
-              </SlimButton>
-              <SlimButton hierarchy="secondary" gap="4px">
+              </Button>
+              <Button utility hierarchy="secondary" gap="4px">
                 <MoreHorizontalIcon size="lg" />
-              </SlimButton>
+              </Button>
             </HStack>
           </HStack>
         </VStack>

package/src/surfaces/card/card.module.css

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  .card {
+    height: auto;
+  }
+}