@tcn/ui 0.8.1 → 0.10.0

package/src/layouts/{utility_bar/utility_bar.module.css → bar/bar.module.css}

@@ -1,6 +1,7 @@
 @layer tcn-system {
-  :where(.utility-bar) {
+  :where(.bar) {
     width: 100%;
+    height: auto;
     min-height: 0;
   }
 }

package/src/layouts/bar/bar.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+
+import styles from './bar.module.css';
+
+export type BarProps = HStackProps;
+
+export const Bar = React.forwardRef<HTMLElement, BarProps>(function Bar(
+  { children, className, ...props }: BarProps,
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      as="header"
+      className={clsx(className, styles['bar'], 'tcn-bar')}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

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

@@ -1,11 +1,16 @@
 @layer tcn-system {
   .body {
     min-height: 0;
+    min-width: 0;
     flex-grow: 1;
-    width: 100%;
-    height: 100%;
+    flex-shrink: unset;
   }
-  :where(.tcn-main) {
-    height: auto;
+
+  .h-body {
+    overflow-x: auto;
+  }
+
+  .v-body {
+    overflow-y: auto;
   }
 }

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

@@ -15,11 +15,12 @@ export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
 export { Row } from './row/row.js';
 export { Section } from './section/section.js';
 export { Heading, type HeadingOwnProps } from './section/heading.js';
+export { Responsive, type ResponsiveProps } from './responsive/responsive.js';
+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/responsive/breakpoint.tsx

@@ -0,0 +1,29 @@
+export interface BreakpointProps {
+  from?: number | string;
+  to?: number | string;
+  children: React.ReactNode;
+}
+
+export interface InternalBreakpointProps extends BreakpointProps {
+  width: number;
+}
+
+function toNumber(value: number | string) {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  return parseFloat(value);
+}
+
+export function Breakpoint(_: BreakpointProps) {
+  return null;
+}
+
+export function InternalBreakpoint(props: InternalBreakpointProps) {
+  const from = toNumber(props.from ?? 0);
+  const to = toNumber(props.to ?? Infinity);
+  const isWithinRange = props.width >= from && props.width < to;
+
+  return isWithinRange ? props.children : null;
+}

package/src/layouts/responsive/responsive.stories.tsx

@@ -0,0 +1,37 @@
+import { HStack } from '../../stacks/h_stack.js';
+import { Breakpoint } from './breakpoint.js';
+import { Responsive } from './responsive.js';
+
+export default {
+  title: 'Layouts/Responsive',
+  component: Responsive,
+  tags: ['autodocs'],
+};
+
+export function Container() {
+  return (
+    <HStack width="100%" hAlign="center">
+      <Responsive>
+        <Breakpoint to={200}>Small</Breakpoint>
+        <Breakpoint from={200} to={800}>
+          Medium
+        </Breakpoint>
+        <Breakpoint from={800}>Large</Breakpoint>
+      </Responsive>
+    </HStack>
+  );
+}
+
+export function Viewport() {
+  return (
+    <HStack width="100%" hAlign="center">
+      <Responsive on="viewport">
+        <Breakpoint to={200}>Small</Breakpoint>
+        <Breakpoint from={200} to={800}>
+          Medium
+        </Breakpoint>
+        <Breakpoint from={800}>Large</Breakpoint>
+      </Responsive>
+    </HStack>
+  );
+}

package/src/layouts/responsive/responsive.tsx

@@ -0,0 +1,18 @@
+import type { BreakpointProps } from './breakpoint.js';
+import { ResponsiveContainer } from './responsive_container.js';
+import { ResponsiveViewport } from './responsive_viewport.js';
+
+export interface ResponsiveProps {
+  on?: 'viewport' | 'container';
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function Responsive(props: ResponsiveProps) {
+  const { on = 'container', children } = props;
+
+  if (on === 'viewport') {
+    return <ResponsiveViewport>{children}</ResponsiveViewport>;
+  }
+
+  return <ResponsiveContainer>{children}</ResponsiveContainer>;
+}

package/src/layouts/responsive/responsive_container.tsx

@@ -0,0 +1,51 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { useForkRef } from '../../utils/hooks/use_fork_ref.js';
+import { useResizeObserver } from '../../utils/hooks/use_resize_observer.js';
+import { InternalBreakpoint, BreakpointProps } from './breakpoint.js';
+
+export interface ResponsiveContainerProps {
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function ResponsiveContainer(props: ResponsiveContainerProps) {
+  const [parent, setParent] = useState<Element | null>(null);
+  const [width, setWidth] = useState(0);
+
+  const resizeRef = useResizeObserver(width => {
+    setWidth(width);
+  });
+
+  const forkedRef = useForkRef((element: any) => {
+    if (element == null || element.parentElement == null) {
+      return;
+    }
+    resizeRef(element.parentElement);
+    setParent(element.parentElement);
+  });
+
+  const hiddenChild = (
+    <div
+      ref={forkedRef}
+      style={{
+        display: 'none',
+      }}
+    ></div>
+  );
+
+  const internalBreakpoints = React.Children.toArray(props.children).map((child: any) => {
+    return <InternalBreakpoint key={child.key} {...child.props} width={width} />;
+  });
+
+  useLayoutEffect(() => {
+    return () => {
+      setParent(null);
+    };
+  }, []);
+
+  return (
+    <>
+      {parent == null ? hiddenChild : null}
+      {internalBreakpoints}
+    </>
+  );
+}

package/src/layouts/responsive/responsive_viewport.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InternalBreakpoint, BreakpointProps } from './breakpoint.js';
+import { useMediaQuery } from '../../utils/hooks/use_media_query.js';
+
+export interface ResponsiveViewportProps {
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function ResponsiveViewport(props: ResponsiveViewportProps) {
+  const { width } = useMediaQuery();
+
+  const internalBreakpoints = React.Children.toArray(props.children).map((child: any) => {
+    return <InternalBreakpoint key={child.key} {...child.props} width={width} />;
+  });
+
+  return <>{internalBreakpoints}</>;
+}

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;