@tcn/ui 0.11.0 → 0.12.1

package/src/stacks/box/types.ts

@@ -0,0 +1,44 @@
+import type { HandleProps } from './handle_props.js';
+
+export type WidthResizeOrigin = 'left' | 'right';
+export type HeightResizeOrigin = 'top' | 'bottom';
+
+export type OnWidthResize = (
+  // Newly calculated width
+  width: number,
+  // Origin of the resize - left or right of the box
+  origin: WidthResizeOrigin,
+  // Total delta of the resize (the sum of all deltas before end event)
+  totalDelta: number,
+  // Current delta of the resize (the delta of the current event)
+  currentDelta: number,
+  // Whether the resize is at the limit of the box, this includes min-content, max-content, and min-width/height
+  atLimit: boolean
+) => void;
+
+export type OnHeightResize = (
+  // Newly calculated height
+  height: number,
+  // Origin of the resize - top or bottom of the box
+  origin: HeightResizeOrigin,
+  // Total delta of the resize (the sum of all deltas before end event)
+  totalDelta: number,
+  // Current delta of the resize (the delta of the current event)
+  currentDelta: number,
+  // Whether the resize is at the limit of the box, this includes min-content, max-content, and min-width/height
+  atLimit: boolean
+) => void;
+
+export interface HorizontalResizeHandleProps {
+  targetRef: React.MutableRefObject<HTMLElement | null>;
+  handleProps?: HandleProps;
+  onWidthResize?: OnWidthResize;
+  onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void;
+}
+
+export interface VerticalResizeHandleProps {
+  targetRef: React.MutableRefObject<HTMLElement | null>;
+  handleProps?: HandleProps;
+  onHeightResize?: OnHeightResize;
+  onHeightResizeEnd?: (height: number, origin: HeightResizeOrigin) => void;
+}

package/src/stacks/h_collapsible_box.tsx

@@ -32,9 +32,9 @@ export const HCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="horizontal"
       data-is-resizing={resizing}
-      onWidthResize={(width, origin, totalDelta, currentDelta) => {
+      onWidthResize={(...args) => {
         setIsResizing(true);
-        props.onWidthResize?.(width, origin, totalDelta, currentDelta);
+        props.onWidthResize?.(...args);
       }}
       onWidthResizeEnd={(width, origin) => {
         setIsResizing(false);

package/src/stacks/index.ts

@@ -1,4 +1,5 @@
 export * from './box/box.js';
+export * from './box/types.js';
 export * from './types/alignment.js';
 export * from './types/as.js';
 export * from './types/common.js';

package/src/stacks/v_collapsible_box.tsx

@@ -32,9 +32,9 @@ export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
       data-is-collapsed={!open}
       data-collapse-orientation="vertical"
       data-is-resizing={resizing}
-      onHeightResize={(height, origin, totalDelta, currentDelta) => {
+      onHeightResize={(...args) => {
         setIsResizing(true);
-        props.onHeightResize?.(height, origin, totalDelta, currentDelta);
+        props.onHeightResize?.(...args);
       }}
       onHeightResizeEnd={(height, origin) => {
         setIsResizing(false);

package/src/surfaces/modal/modal.tsx

@@ -1,12 +1,12 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import { Frame, type FrameProps } from '../../overlay/frame/frame.js';
+import { Scaffold } from '../../layouts/scaffold/scaffold.js';
 
 // Styles
 import styles from './modal.module.css';
 
-export type ModalProps = FrameOwnProps & ScaffoldProps;
+export type ModalProps = FrameProps;
 
 export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
   { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
@@ -14,12 +14,14 @@ export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
 ) {
   return (
     <Frame
+      ref={ref}
       isOpen={isOpen}
       draggable={draggable}
       veil={veil}
       className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}
+      {...props}
     >
-      <Scaffold ref={ref} {...props}>
+      <Scaffold className={'tcn-modal-scaffold'} width="100%" height="100%">
         {children}
       </Scaffold>
     </Frame>

package/src/surfaces/pop_confirm/pop_confirm.tsx

@@ -11,13 +11,19 @@ export type PopConfirmProps = ElementPopperProps;
 
 export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
   function PopConfirm(
-    { children, className, dismissals = [PopperDismissal.CLICK_AWAY], ...props },
+    {
+      children,
+      className,
+      precision = 'low',
+      dismissals = [PopperDismissal.CLICK_AWAY],
+      ...props
+    },
     ref
   ) {
     return (
       <ElementPopper
         ref={ref}
-        precision="high"
+        precision={precision}
         className={clsx(className, 'tcn-pop-confirm')}
         dismissals={dismissals}
         {...props}

package/src/surfaces/tooltip/tooltip.tsx

@@ -22,6 +22,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
     verticalOrigin = 'bottom',
     horizontalAnchor = 'center',
     horizontalOrigin = 'center',
+    precision = 'low', // TODO: Fix caret styles and set to high
     label,
     ...props
   },
@@ -49,7 +50,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
         verticalOrigin={verticalOrigin}
         horizontalAnchor={horizontalAnchor}
         horizontalOrigin={horizontalOrigin}
-        precision="high"
+        precision={precision}
         className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}
         {...props}
       >

package/src/surfaces/window/window.stories.tsx

@@ -25,7 +25,15 @@ export const WindowStory = () => {
   return (
     <ZStack height="100%" width="100%" minHeight="600px">
       <Button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</Button>
-      <Window isOpen={isOpen} width="400px" height="500px">
+      <Window
+        isOpen={isOpen}
+        width="400px"
+        height="500px"
+        minWidth="min-content"
+        minHeight="300px"
+        maxWidth="600px"
+        maxHeight="600px"
+      >
         <DragHandle>
           <Header>
             <Title>Window Title</Title>

package/src/surfaces/window/window.tsx

@@ -1,12 +1,12 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
-import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
+import { Frame, type FrameProps } from '../../overlay/frame/frame.js';
+import { Scaffold } from '../../layouts/scaffold/scaffold.js';
 
 // Styles
 import styles from './window.module.css';
 
-export type WindowProps = FrameOwnProps & ScaffoldProps;
+export type WindowProps = FrameProps;
 
 export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(
   {
@@ -30,8 +30,10 @@ export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window
       className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
       width={width}
       height={height}
+      ref={ref}
+      {...props}
     >
-      <Scaffold ref={ref} {...props}>
+      <Scaffold width="100%" height="100%" className={'tcn-window-scaffold'}>
         {children}
       </Scaffold>
     </Frame>

package/src/themes/themes/ergo/ergo_theme.css

@@ -686,6 +686,7 @@
   /* MODAL: */
   .tcn-modal {
     --divide-header: 0;
+    box-shadow: 0px 4px 34px 0px #00000096;
 
     :where(.tcn-scaffold) {
       border-radius: var(--shape-radius-medium);
@@ -710,10 +711,11 @@
 
   /* WINDOW: */
   .tcn-window {
+    box-shadow: 0px 4px 34px 0px #00000096;
+
     --divide-header: 0;
 
     :where(.tcn-scaffold) {
-      box-shadow: 0px 4px 34px 0px #00000096;
       border-radius: var(--shape-radius-medium);
       background-color: var(--background-color-primary);
       overflow: hidden;