@tcn/ui 0.12.4 → 0.12.5

package/dist/stacks/box/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AACjD,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,CAE1B,KAAK,EAAE,MAAM,EAEb,MAAM,EAAE,iBAAiB,EAEzB,UAAU,EAAE,MAAM,EAElB,YAAY,EAAE,MAAM,EAEpB,OAAO,EAAE,OAAO,KACb,IAAI,CAAC;AAEV,MAAM,MAAM,cAAc,GAAG,CAE3B,MAAM,EAAE,MAAM,EAEd,MAAM,EAAE,kBAAkB,EAE1B,UAAU,EAAE,MAAM,EAElB,YAAY,EAAE,MAAM,EAEpB,OAAO,EAAE,OAAO,KACb,IAAI,CAAC;AAEV,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACvE;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC1E"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AACjD,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,mBAAmB,CAClC,MAAM,SAAS,iBAAiB,GAAG,kBAAkB;IAErD,MAAM,EAAE,MAAM,CAAC;IAEf,UAAU,EAAE,MAAM,CAAC;IAEnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAqB,SAAQ,mBAAmB,CAAC,iBAAiB,CAAC;IAClF,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB,CAAC,kBAAkB,CAAC;IACpF,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAClF,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAErF,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAC;AACpE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;AAEtE,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC"}

package/dist/surfaces/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/surfaces/modal/modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAMtE,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC;AAEpC,eAAO,MAAM,KAAK,+QAkBhB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/surfaces/modal/modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAMtE,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC;AAEpC,eAAO,MAAM,KAAK,+QA2BhB,CAAC"}

package/dist/surfaces/modal/modal.js

@@ -1,23 +1,32 @@
 import { jsx as o } from "react/jsx-runtime";
-import { clsx as e } from "clsx";
-import s from "react";
-import { Frame as d } from "../../overlay/frame/frame.js";
-import { Scaffold as n } from "../../layouts/scaffold/scaffold.js";
-import '../../modal.css';const i = "_modal_473c6ef", p = { modal: i }, N = s.forwardRef(function({ children: t, className: a, isOpen: r, draggable: m = !1, veil: c = !0, ...f }, l) {
+import { clsx as s } from "clsx";
+import d from "react";
+import { Frame as n } from "../../overlay/frame/frame.js";
+import { Scaffold as i } from "../../layouts/scaffold/scaffold.js";
+import '../../modal.css';const p = "_modal_473c6ef", u = { modal: p }, R = d.forwardRef(function({
+  children: a,
+  className: t,
+  isOpen: r,
+  veil: m = !0,
+  resizable: f = !1,
+  draggable: l = !1,
+  ...c
+}, e) {
   return /* @__PURE__ */ o(
-    d,
+    n,
     {
-      ref: l,
+      ref: e,
       isOpen: r,
-      draggable: m,
-      veil: c,
-      className: e(p.modal, "tcn-surface", "tcn-modal", a),
-      ...f,
-      children: /* @__PURE__ */ o(n, { className: "tcn-modal-scaffold", width: "100%", height: "100%", children: t })
+      veil: m,
+      draggable: l,
+      resizable: f,
+      className: s(u.modal, "tcn-surface", "tcn-modal", t),
+      ...c,
+      children: /* @__PURE__ */ o(i, { className: "tcn-modal-scaffold", width: "100%", height: "100%", children: a })
     }
   );
 });
 export {
-  N as Modal
+  R as Modal
 };
 //# sourceMappingURL=modal.js.map

package/dist/surfaces/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/surfaces/modal/modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Frame, type FrameProps } from '../../overlay/frame/frame.js';\nimport { Scaffold } from '../../layouts/scaffold/scaffold.js';\n\n// Styles\nimport styles from './modal.module.css';\n\nexport type ModalProps = FrameProps;\n\nexport const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(\n  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,\n  ref\n) {\n  return (\n    <Frame\n      ref={ref}\n      isOpen={isOpen}\n      draggable={draggable}\n      veil={veil}\n      className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}\n      {...props}\n    >\n      <Scaffold className={'tcn-modal-scaffold'} width=\"100%\" height=\"100%\">\n        {children}\n      </Scaffold>\n    </Frame>\n  );\n});\n"],"names":["Modal","React","children","className","isOpen","draggable","veil","props","ref","jsx","Frame","clsx","styles","Scaffold"],"mappings":";;;;;8CAUaA,IAAQC,EAAM,WAAoC,SAC7D,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,WAAAC,IAAY,IAAO,MAAAC,IAAO,IAAM,GAAGC,EAAA,GAClEC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,QAAAJ;AAAA,MACA,WAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAWK,EAAKC,EAAO,OAAU,eAAe,aAAaT,CAAS;AAAA,MACrE,GAAGI;AAAA,MAEJ,UAAA,gBAAAE,EAACI,KAAS,WAAW,sBAAsB,OAAM,QAAO,QAAO,QAC5D,UAAAX,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"modal.js","sources":["../../../src/surfaces/modal/modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Frame, type FrameProps } from '../../overlay/frame/frame.js';\nimport { Scaffold } from '../../layouts/scaffold/scaffold.js';\n\n// Styles\nimport styles from './modal.module.css';\n\nexport type ModalProps = FrameProps;\n\nexport const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(\n  {\n    children,\n    className,\n    isOpen,\n    veil = true,\n    resizable = false,\n    draggable = false,\n    ...props\n  }: ModalProps,\n  ref\n) {\n  return (\n    <Frame\n      ref={ref}\n      isOpen={isOpen}\n      veil={veil}\n      draggable={draggable}\n      resizable={resizable}\n      className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}\n      {...props}\n    >\n      <Scaffold className={'tcn-modal-scaffold'} width=\"100%\" height=\"100%\">\n        {children}\n      </Scaffold>\n    </Frame>\n  );\n});\n"],"names":["Modal","React","children","className","isOpen","veil","resizable","draggable","props","ref","jsx","Frame","clsx","styles","Scaffold"],"mappings":";;;;;8CAUaA,IAAQC,EAAM,WAAoC,SAC7D;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,QAAAL;AAAA,MACA,MAAAC;AAAA,MACA,WAAAE;AAAA,MACA,WAAAD;AAAA,MACA,WAAWM,EAAKC,EAAO,OAAU,eAAe,aAAaV,CAAS;AAAA,MACrE,GAAGK;AAAA,MAEJ,UAAA,gBAAAE,EAACI,KAAS,WAAW,sBAAsB,OAAM,QAAO,QAAO,QAC5D,UAAAZ,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/surfaces/window/window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/surfaces/window/window.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAMtE,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;AAErC,eAAO,MAAM,MAAM,+QA8BjB,CAAC"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/surfaces/window/window.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAMtE,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;AAErC,eAAO,MAAM,MAAM,+QA2BjB,CAAC"}

package/dist/surfaces/window/window.js

@@ -1,35 +1,32 @@
 import { jsx as o } from "react/jsx-runtime";
-import { clsx as w } from "clsx";
-import a from "react";
-import { Frame as m } from "../../overlay/frame/frame.js";
-import { Scaffold as l } from "../../layouts/scaffold/scaffold.js";
-import '../../window.css';const p = "_window_7610fdb", u = { window: p }, g = a.forwardRef(function({
-  children: r,
-  className: t,
-  isOpen: e,
-  draggable: i = !0,
-  resizable: _ = !0,
+import { clsx as d } from "clsx";
+import w from "react";
+import { Frame as a } from "../../overlay/frame/frame.js";
+import { Scaffold as m } from "../../layouts/scaffold/scaffold.js";
+import '../../window.css';const l = "_window_7610fdb", p = { window: l }, W = w.forwardRef(function({
+  children: t,
+  className: r,
+  isOpen: f,
   veil: n = !1,
-  width: f,
-  height: c,
-  ...s
-}, d) {
+  draggable: i = !0,
+  resizable: c = !1,
+  ...e
+}, s) {
   return /* @__PURE__ */ o(
-    m,
+    a,
     {
-      isOpen: e,
-      draggable: i,
+      ref: s,
+      isOpen: f,
       veil: n,
-      className: w(u.window, "tcn-surface", "tcn-window", t),
-      width: f,
-      height: c,
-      ref: d,
-      ...s,
-      children: /* @__PURE__ */ o(l, { width: "100%", height: "100%", className: "tcn-window-scaffold", children: r })
+      draggable: i,
+      resizable: c,
+      className: d(p.window, "tcn-surface", "tcn-window", r),
+      ...e,
+      children: /* @__PURE__ */ o(m, { className: "tcn-window-scaffold", width: "100%", height: "100%", children: t })
     }
   );
 });
 export {
-  g as Window
+  W as Window
 };
 //# sourceMappingURL=window.js.map

package/dist/surfaces/window/window.js.map

@@ -1 +1 @@
-{"version":3,"file":"window.js","sources":["../../../src/surfaces/window/window.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Frame, type FrameProps } from '../../overlay/frame/frame.js';\nimport { Scaffold } from '../../layouts/scaffold/scaffold.js';\n\n// Styles\nimport styles from './window.module.css';\n\nexport type WindowProps = FrameProps;\n\nexport const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(\n  {\n    children,\n    className,\n    isOpen,\n    draggable = true,\n    resizable = true,\n    veil = false,\n    width,\n    height,\n    ...props\n  }: WindowProps,\n  ref\n) {\n  return (\n    <Frame\n      isOpen={isOpen}\n      draggable={draggable}\n      veil={veil}\n      className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}\n      width={width}\n      height={height}\n      ref={ref}\n      {...props}\n    >\n      <Scaffold width=\"100%\" height=\"100%\" className={'tcn-window-scaffold'}>\n        {children}\n      </Scaffold>\n    </Frame>\n  );\n});\n"],"names":["Window","React","children","className","isOpen","draggable","resizable","veil","width","height","props","ref","jsx","Frame","clsx","styles","Scaffold"],"mappings":";;;;;gDAUaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAAT;AAAA,MACA,WAAAC;AAAA,MACA,MAAAE;AAAA,MACA,WAAWO,EAAKC,EAAO,QAAW,eAAe,cAAcZ,CAAS;AAAA,MACxE,OAAAK;AAAA,MACA,QAAAC;AAAA,MACA,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEJ,UAAA,gBAAAE,EAACI,KAAS,OAAM,QAAO,QAAO,QAAO,WAAW,uBAC7C,UAAAd,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"window.js","sources":["../../../src/surfaces/window/window.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Frame, type FrameProps } from '../../overlay/frame/frame.js';\nimport { Scaffold } from '../../layouts/scaffold/scaffold.js';\n\n// Styles\nimport styles from './window.module.css';\n\nexport type WindowProps = FrameProps;\n\nexport const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(\n  {\n    children,\n    className,\n    isOpen,\n    veil = false,\n    draggable = true,\n    resizable = false,\n    ...props\n  }: WindowProps,\n  ref\n) {\n  return (\n    <Frame\n      ref={ref}\n      isOpen={isOpen}\n      veil={veil}\n      draggable={draggable}\n      resizable={resizable}\n      className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}\n      {...props}\n    >\n      <Scaffold className={'tcn-window-scaffold'} width=\"100%\" height=\"100%\">\n        {children}\n      </Scaffold>\n    </Frame>\n  );\n});\n"],"names":["Window","React","children","className","isOpen","veil","draggable","resizable","props","ref","jsx","Frame","clsx","styles","Scaffold"],"mappings":";;;;;gDAUaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,QAAAL;AAAA,MACA,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAWK,EAAKC,EAAO,QAAW,eAAe,cAAcV,CAAS;AAAA,MACvE,GAAGK;AAAA,MAEJ,UAAA,gBAAAE,EAACI,KAAS,WAAW,uBAAuB,OAAM,QAAO,QAAO,QAC7D,UAAAZ,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -144,7 +144,7 @@
     "react-color": "^2.19.3",
     "react-phone-number-input": "^3.4.16",
     "@tcn/icons": "2.3.0",
-    "@tcn/state": "1.2.1"
+    "@tcn/state": "1.3.0"
   },
   "scripts": {
     "build": "vite build",

package/src/overlay/frame/frame.tsx

@@ -1,7 +1,13 @@
 import { clsx } from 'clsx';
 import React, { useCallback } from 'react';
 import { flushSync } from 'react-dom';
-import { Box, ZStack, type BoxProps } from '../../stacks/index.js';
+import {
+  Box,
+  ZStack,
+  type BoxProps,
+  type OnHeightResizePayload,
+  type OnWidthResizePayload,
+} from '../../stacks/index.js';
 import { useDragContainer } from '../../utils/dnd/context.js';
 import { Draggable } from '../../utils/dnd/draggable/draggable.js';
 import { Portal } from '../portal/portal.js';
@@ -48,6 +54,10 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
             enableResizeOnRight={resizable}
             enableResizeOnTop={resizable}
             enableResizeOnBottom={resizable}
+            // TODO: check to see if these should be enabled, and if so - if left/right should be disabled.
+            // Could add a "directional" prop and use that in conjunction with enableResizeOnStart/End and deprecate enableResizeOnLeft/Right.
+            // enableResizeOnStart={resizable}
+            // enableResizeOnEnd={resizable}
             draggable={draggable}
             {...rest}
           >
@@ -77,64 +87,37 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
     const drag = useDragContainer();
 
     const handleWidthResize = React.useCallback(
-      (
-        width: number,
-        origin: 'left' | 'right',
-        totalDelta: number,
-        currentDelta: number,
-        atLimit: boolean
-      ) => {
+      (payload: OnWidthResizePayload) => {
         if (!draggable) return;
-        if (atLimit) return;
-        if (origin === 'right') {
-          flushSync(() => {
-            drag.setPosition(prev => ({
-              x: prev.x + currentDelta / 2,
-              y: prev.y,
-            }));
-          });
-        }
-        if (origin === 'left') {
-          flushSync(() => {
-            drag.setPosition(prev => ({
-              x: prev.x - currentDelta / 2,
-              y: prev.y,
-            }));
-          });
-        }
+        if (payload.currentDelta === 0) return;
+        const sign = payload.origin === 'right' ? 1 : -1;
+        const dx = (payload.currentDelta / 2) * sign;
+        flushSync(() => {
+          drag.setPosition(prev => ({
+            x: prev.x + dx,
+            y: prev.y,
+          }));
+        });
 
-        onWidthResize?.(width, origin, totalDelta, currentDelta, atLimit);
+        onWidthResize?.(payload);
       },
       [onWidthResize, drag, draggable]
     );
 
     const handleHeightResize = useCallback(
-      (
-        height: number,
-        origin: 'top' | 'bottom',
-        totalDelta: number,
-        currentDelta: number,
-        atLimit: boolean
-      ) => {
+      (payload: OnHeightResizePayload) => {
         if (!draggable) return;
-        if (atLimit) return;
-        if (origin === 'bottom') {
-          flushSync(() => {
-            drag.setPosition(prev => ({
-              x: prev.x,
-              y: prev.y + currentDelta / 2,
-            }));
-          });
-        }
-        if (origin === 'top') {
-          flushSync(() => {
-            drag.setPosition(prev => ({
-              x: prev.x,
-              y: prev.y - currentDelta / 2,
-            }));
-          });
-        }
-        onHeightResize?.(height, origin, totalDelta, currentDelta, atLimit);
+        if (payload.currentDelta === 0) return;
+        const sign = payload.origin === 'bottom' ? 1 : -1;
+        const half = payload.currentDelta / 2;
+        const dy = half * sign;
+        flushSync(() => {
+          drag.setPosition(prev => ({
+            x: prev.x,
+            y: prev.y + dy,
+          }));
+        });
+        onHeightResize?.(payload);
       },
       [onHeightResize, drag, draggable]
     );

package/src/stacks/box/box.tsx

@@ -11,6 +11,12 @@ 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 {
+  OnHeightResize,
+  OnHeightResizeEnd,
+  OnWidthResize,
+  OnWidthResizeEnd,
+} from './types.js';
 
 export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {
   as?: string;
@@ -45,22 +51,10 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
   enableResizeOnRight?: boolean;
   horizontalHandleProps?: HandleProps;
   verticalHandleProps?: HandleProps;
-  onWidthResize?: (
-    width: number,
-    origin: 'left' | 'right',
-    totalDelta: number,
-    currentDelta: number,
-    atLimit: boolean
-  ) => void;
-  onHeightResize?: (
-    height: number,
-    origin: 'top' | 'bottom',
-    totalDelta: number,
-    currentDelta: number,
-    atLimit: boolean
-  ) => void;
-  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
+  onWidthResize?: OnWidthResize;
+  onHeightResize?: OnHeightResize;
+  onWidthResizeEnd?: OnWidthResizeEnd;
+  onHeightResizeEnd?: OnHeightResizeEnd;
 }
 
 export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(

package/src/stacks/box/detect_resize_bounds.ts

@@ -0,0 +1,84 @@
+type ConstraintAxis = 'width' | 'height';
+
+export type DetectResizeBoundsParams = {
+  element: HTMLElement;
+  axis: ConstraintAxis;
+  nextSize: number;
+  epsilon?: number; // Tolerance for the constraint hit detection.
+};
+
+export type DetectResizeBoundsResult = {
+  hitMin: boolean;
+  hitMax: boolean;
+  clamped: boolean;
+};
+
+const styleKeys = {
+  width: {
+    size: 'width',
+    min: 'minWidth',
+    max: 'maxWidth',
+  },
+  height: {
+    size: 'height',
+    min: 'minHeight',
+    max: 'maxHeight',
+  },
+} as const;
+
+function parsePx(value: string): number | null {
+  const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
+  return match ? Number(match[1]) : null;
+}
+
+function detectByPixelValue(nextSize: number, min: string, max: string) {
+  const minPx = parsePx(min);
+  const maxPx = parsePx(max);
+  const hitMin = minPx !== null && nextSize < minPx;
+  const hitMax = maxPx !== null && nextSize > maxPx;
+  return {
+    hitMin,
+    hitMax,
+    clamped: hitMin || hitMax,
+  };
+}
+
+export function detectResizeBounds({
+  element,
+  axis,
+  nextSize,
+  epsilon = 0.5,
+}: DetectResizeBoundsParams): DetectResizeBoundsResult {
+  const keys = styleKeys[axis];
+
+  const computed = getComputedStyle(element);
+  const fastPath = detectByPixelValue(nextSize, computed[keys.min], computed[keys.max]);
+  if (fastPath.clamped) return fastPath;
+
+  const style = element.style;
+  const prevInlineSize = style[keys.size]; // Save the previous size to revert later.
+
+  try {
+    // Temporarily apply the new size to the element to offload bound test to browser.
+    style[keys.size] = `${nextSize}px`;
+
+    // Force layout so browser resolves min/max/intrinsic constraints.
+    const rect = element.getBoundingClientRect();
+    const renderedSize = rect[keys.size];
+
+    const delta = renderedSize - nextSize;
+
+    const hitMin = delta > epsilon;
+    const hitMax = delta < -epsilon;
+    const clamped = hitMin || hitMax;
+
+    return {
+      hitMin,
+      hitMax,
+      clamped,
+    };
+  } finally {
+    // revert the style change
+    style[keys.size] = prevInlineSize;
+  }
+}

package/src/stacks/box/resize_handlers.ts

@@ -4,6 +4,7 @@ import {
   type OnHeightResize,
   type WidthResizeOrigin,
 } from './types';
+import { detectResizeBounds } from './detect_resize_bounds.js';
 
 function createVeil() {
   const veil = window.document.createElement('div');
@@ -25,9 +26,7 @@ export function createHorizontalResizeHandler(
   return function startHorizontalResize(event: React.MouseEvent) {
     const box = targetRef.current;
 
-    if (box == null) {
-      return;
-    }
+    if (box == null) return;
 
     const veil = createVeil();
     box.appendChild(veil);
@@ -42,18 +41,24 @@ export function createHorizontalResizeHandler(
     let width = startRect.width;
 
     const drag = (event: MouseEvent) => {
-      const beforeWidth = box.getBoundingClientRect().width;
       const totalDelta = direction * (event.clientX - startX);
       const newWidth = startRect.width + totalDelta;
+
+      const result = detectResizeBounds({
+        element: box,
+        axis: 'width',
+        nextSize: newWidth,
+      });
+
+      if (result.clamped) return;
+
       const currentDelta = newWidth - width;
 
+      // apply the new width
       width = newWidth;
-
       box.style.width = `${newWidth}px`;
 
-      const afterWidth = box.getBoundingClientRect().width;
-      const atLimit = afterWidth === beforeWidth;
-      onWidthResize?.(newWidth, origin, totalDelta, currentDelta, atLimit);
+      onWidthResize?.({ width: newWidth, origin, totalDelta, currentDelta });
       event.stopPropagation();
       event.preventDefault();
     };
@@ -95,9 +100,7 @@ export function createVerticalResizeHandler(
   return function startVerticalResize(event: React.MouseEvent) {
     const box = targetRef.current;
 
-    if (box == null) {
-      return;
-    }
+    if (box == null) return;
 
     const veil = createVeil();
     box.appendChild(veil);
@@ -107,15 +110,24 @@ export function createVerticalResizeHandler(
     let height = startRect.height;
 
     const drag = (event: MouseEvent) => {
-      const beforeHeight = box.getBoundingClientRect().height;
       const totalDelta = direction * (event.clientY - startY);
       const newHeight = startRect.height + totalDelta;
+
+      const result = detectResizeBounds({
+        element: box,
+        axis: 'height',
+        nextSize: newHeight,
+      });
+
+      if (result.clamped) return;
+
       const currentDelta = newHeight - height;
+
+      // apply the new height
       height = newHeight;
       box.style.height = `${newHeight}px`;
-      const afterHeight = box.getBoundingClientRect().height;
-      const atLimit = afterHeight === beforeHeight;
-      onHeightResize?.(newHeight, origin, totalDelta, currentDelta, atLimit);
+
+      onHeightResize?.({ height: newHeight, origin, totalDelta, currentDelta });
       event.stopPropagation();
       event.preventDefault();
     };

package/src/stacks/box/start_resize_handle.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './start_resize_handle.module.css';
 import type { HorizontalResizeHandleProps } from './types.js';
+import { CSSProperties } from 'react';
 
 export type StartResizeHandleProps = HorizontalResizeHandleProps;
 
@@ -15,15 +16,17 @@ export function StartResizeHandle({
     targetRef,
     onWidthResize,
     onWidthResizeEnd,
-    'left'
+    'left',
+    true
   );
+
   const offset = handleProps?.offset ? handleProps.offset : -8;
 
-  const startResizeHandleStyle: any = {
+  const startResizeHandleStyle = {
     ...handleProps?.style,
     '--resize-offset': `${offset}px`,
     width: handleProps?.size || '16px',
-  };
+  } as CSSProperties;
 
   return (
     <div

package/src/stacks/box/types.ts

@@ -3,42 +3,40 @@ 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,
+export interface BaseOnResizePayload<
+  Origin extends WidthResizeOrigin | HeightResizeOrigin,
+> {
+  origin: Origin;
   // Total delta of the resize (the sum of all deltas before end event)
-  totalDelta: number,
+  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;
+  currentDelta: number;
+}
+
+export interface OnWidthResizePayload extends BaseOnResizePayload<WidthResizeOrigin> {
+  width: number;
+}
+
+export interface OnHeightResizePayload extends BaseOnResizePayload<HeightResizeOrigin> {
+  height: number;
+}
+
+export type OnWidthResizeEnd = (width: number, origin: WidthResizeOrigin) => void;
+export type OnHeightResizeEnd = (height: number, origin: HeightResizeOrigin) => void;
+
+export type OnWidthResize = (payload: OnWidthResizePayload) => void;
+export type OnHeightResize = (payload: OnHeightResizePayload) => void;
 
 export interface HorizontalResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
   onWidthResize?: OnWidthResize;
-  onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void;
+  onWidthResizeEnd?: OnWidthResizeEnd;
 }
 
 export interface VerticalResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
   handleProps?: HandleProps;
   onHeightResize?: OnHeightResize;
-  onHeightResizeEnd?: (height: number, origin: HeightResizeOrigin) => void;
+  onHeightResizeEnd?: OnHeightResizeEnd;
 }