@tcn/ui 0.11.0 → 0.12.1

package/dist/stacks/box/resize_handlers.js

@@ -1,50 +1,54 @@
-function D() {
-  const n = window.document.createElement("div");
-  return n.style.position = "absolute", n.style.inset = "-500px", n.style.backgroundColor = "transparent", n.style.pointerEvents = "auto", n;
+function L() {
+  const o = window.document.createElement("div");
+  return o.style.position = "absolute", o.style.inset = "-500px", o.style.backgroundColor = "transparent", o.style.pointerEvents = "auto", o;
 }
-function C(n, v, f, m = "right", c = !1, b = !1) {
+function x(o, h, f, m = "right", d = !1, v = !1) {
   return function(e) {
-    const t = n.current;
+    const t = o.current;
     if (t == null)
       return;
-    const a = D();
+    const a = L();
     t.appendChild(a);
-    const d = (window.getComputedStyle(t).direction === "rtl" && !b ? !c : c) ? -1 : 1, p = e.clientX, u = t.getBoundingClientRect();
-    let s = u.width;
-    const o = (i) => {
-      const E = d * (i.clientX - p), g = u.width + E, w = g - s;
-      s = g, t.style.width = `${g}px`, v?.(g, m, E, w), i.stopPropagation(), i.preventDefault();
-    }, l = (i) => {
-      i.buttons === 0 && r();
-    }, r = () => {
-      t.removeChild(a), document.body.removeEventListener("mousemove", o), document.body.removeEventListener("mouseup", r), document.body.removeEventListener("mouseenter", l), e.stopPropagation(), e.preventDefault(), f?.(s, m);
+    const u = (window.getComputedStyle(t).direction === "rtl" && !v ? !d : d) ? -1 : 1, g = e.clientX, l = t.getBoundingClientRect();
+    let r = l.width;
+    const i = (n) => {
+      const y = t.getBoundingClientRect().width, E = u * (n.clientX - g), c = l.width + E, C = c - r;
+      r = c, t.style.width = `${c}px`;
+      const R = t.getBoundingClientRect().width === y;
+      h?.(c, m, E, C, R), n.stopPropagation(), n.preventDefault();
+    }, p = (n) => {
+      n.buttons === 0 && s();
+    }, s = () => {
+      t.removeChild(a), document.body.removeEventListener("mousemove", i), document.body.removeEventListener("mouseup", s), document.body.removeEventListener("mouseenter", p), e.stopPropagation(), e.preventDefault(), f?.(r, m);
     };
-    document.body.addEventListener("mousemove", o), document.body.addEventListener("mouseup", r), document.body.addEventListener("mouseenter", l), e.stopPropagation(), e.preventDefault();
+    document.body.addEventListener("mousemove", i), document.body.addEventListener("mouseup", s), document.body.addEventListener("mouseenter", p), e.stopPropagation(), e.preventDefault();
   };
 }
-function R(n, v, f, m = !1, c = "bottom") {
-  const b = m ? -1 : 1;
+function z(o, h, f, m = !1, d = "bottom") {
+  const v = m ? -1 : 1;
   return function(e) {
-    const t = n.current;
+    const t = o.current;
     if (t == null)
       return;
-    const a = D();
+    const a = L();
     t.appendChild(a);
-    const y = e.clientY, h = t.getBoundingClientRect();
-    let d = h.height;
-    const p = (o) => {
-      const l = b * (o.clientY - y), r = h.height + l, i = r - d;
-      d = r, t.style.height = `${r}px`, v?.(r, c, l, i), o.stopPropagation(), o.preventDefault();
-    }, u = (o) => {
-      o.buttons === 0 && s();
-    }, s = () => {
-      t.removeChild(a), document.body.removeEventListener("mousemove", p), document.body.removeEventListener("mouseup", s), document.body.removeEventListener("mouseenter", u), e.stopPropagation(), e.preventDefault(), f?.(d, c);
+    const D = e.clientY, b = t.getBoundingClientRect();
+    let u = b.height;
+    const g = (i) => {
+      const p = t.getBoundingClientRect().height, s = v * (i.clientY - D), n = b.height + s, y = n - u;
+      u = n, t.style.height = `${n}px`;
+      const c = t.getBoundingClientRect().height === p;
+      h?.(n, d, s, y, c), i.stopPropagation(), i.preventDefault();
+    }, l = (i) => {
+      i.buttons === 0 && r();
+    }, r = () => {
+      t.removeChild(a), document.body.removeEventListener("mousemove", g), document.body.removeEventListener("mouseup", r), document.body.removeEventListener("mouseenter", l), e.stopPropagation(), e.preventDefault(), f?.(u, d);
     };
-    document.body.addEventListener("mousemove", p), document.body.addEventListener("mouseup", s), document.body.addEventListener("mouseenter", u), e.stopPropagation(), e.preventDefault();
+    document.body.addEventListener("mousemove", g), document.body.addEventListener("mouseup", r), document.body.addEventListener("mouseenter", l), e.stopPropagation(), e.preventDefault();
   };
 }
 export {
-  C as createHorizontalResizeHandler,
-  R as createVerticalResizeHandler
+  x as createHorizontalResizeHandler,
+  z as createVerticalResizeHandler
 };
 //# sourceMappingURL=resize_handlers.js.map

package/dist/stacks/box/resize_handlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize_handlers.js","sources":["../../../src/stacks/box/resize_handlers.ts"],"sourcesContent":["function createVeil() {\n  const veil = window.document.createElement('div');\n  veil.style.position = 'absolute';\n  veil.style.inset = '-500px';\n  veil.style.backgroundColor = 'transparent';\n  veil.style.pointerEvents = 'auto';\n  return veil;\n}\n\nexport function createHorizontalResizeHandler(\n  targetRef: React.MutableRefObject<HTMLElement | null>,\n  onWidthResize?: (\n    width: number,\n    origin: 'left' | 'right',\n    totalDelta: number,\n    currentDelta: number\n  ) => void,\n  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void,\n  origin: 'left' | 'right' = 'right',\n  invert = false,\n  disableDirection = false\n) {\n  return function startHorizontalResize(event: React.MouseEvent) {\n    const box = targetRef.current;\n\n    if (box == null) {\n      return;\n    }\n\n    const veil = createVeil();\n    box.appendChild(veil);\n\n    const languageDirection = window.getComputedStyle(box).direction;\n    const finalInvert =\n      languageDirection === 'rtl' && !disableDirection ? !invert : invert;\n    const direction = finalInvert ? -1 : 1;\n\n    const startX = event.clientX;\n    const startRect = box.getBoundingClientRect();\n    let width = startRect.width;\n\n    const drag = (event: MouseEvent) => {\n      const totalDelta = direction * (event.clientX - startX);\n      const newWidth = startRect.width + totalDelta;\n      const currentDelta = newWidth - width;\n\n      width = newWidth;\n\n      box.style.width = `${newWidth}px`;\n      onWidthResize?.(newWidth, origin, totalDelta, currentDelta);\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    const mouseEnter = (event: MouseEvent) => {\n      if (event.buttons === 0) {\n        endDrag();\n      }\n    };\n\n    const endDrag = () => {\n      box.removeChild(veil);\n\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseenter', mouseEnter);\n      event.stopPropagation();\n      event.preventDefault();\n\n      onWidthResizeEnd?.(width, origin);\n    };\n\n    document.body.addEventListener('mousemove', drag);\n    document.body.addEventListener('mouseup', endDrag);\n    document.body.addEventListener('mouseenter', mouseEnter);\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n\nexport function createVerticalResizeHandler(\n  targetRef: React.MutableRefObject<HTMLElement | null>,\n  onHeightResize?: (\n    height: number,\n    origin: 'top' | 'bottom',\n    totalDelta: number,\n    currentDelta: number\n  ) => void,\n  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void,\n  invert = false,\n  origin: 'top' | 'bottom' = 'bottom'\n) {\n  const direction = invert ? -1 : 1;\n  return function startVerticalResize(event: React.MouseEvent) {\n    const box = targetRef.current;\n\n    if (box == null) {\n      return;\n    }\n\n    const veil = createVeil();\n    box.appendChild(veil);\n\n    const startY = event.clientY;\n    const startRect = box.getBoundingClientRect();\n    let height = startRect.height;\n\n    const drag = (event: MouseEvent) => {\n      const totalDelta = direction * (event.clientY - startY);\n      const newHeight = startRect.height + totalDelta;\n      const currentDelta = newHeight - height;\n      height = newHeight;\n      box.style.height = `${newHeight}px`;\n      onHeightResize?.(newHeight, origin, totalDelta, currentDelta);\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    const mouseEnter = (event: MouseEvent) => {\n      if (event.buttons === 0) {\n        endDrag();\n      }\n    };\n\n    const endDrag = () => {\n      box.removeChild(veil);\n\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseenter', mouseEnter);\n      event.stopPropagation();\n      event.preventDefault();\n\n      onHeightResizeEnd?.(height, origin);\n    };\n\n    document.body.addEventListener('mousemove', drag);\n    document.body.addEventListener('mouseup', endDrag);\n    document.body.addEventListener('mouseenter', mouseEnter);\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n"],"names":["createVeil","veil","createHorizontalResizeHandler","targetRef","onWidthResize","onWidthResizeEnd","origin","invert","disableDirection","event","box","direction","startX","startRect","width","drag","totalDelta","newWidth","currentDelta","mouseEnter","endDrag","createVerticalResizeHandler","onHeightResize","onHeightResizeEnd","startY","height","newHeight"],"mappings":"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"}
+{"version":3,"file":"resize_handlers.js","sources":["../../../src/stacks/box/resize_handlers.ts"],"sourcesContent":["import {\n  OnWidthResize,\n  type HeightResizeOrigin,\n  type OnHeightResize,\n  type WidthResizeOrigin,\n} from './types';\n\nfunction createVeil() {\n  const veil = window.document.createElement('div');\n  veil.style.position = 'absolute';\n  veil.style.inset = '-500px';\n  veil.style.backgroundColor = 'transparent';\n  veil.style.pointerEvents = 'auto';\n  return veil;\n}\n\nexport function createHorizontalResizeHandler(\n  targetRef: React.MutableRefObject<HTMLElement | null>,\n  onWidthResize?: OnWidthResize,\n  onWidthResizeEnd?: (width: number, origin: WidthResizeOrigin) => void,\n  origin: WidthResizeOrigin = 'right',\n  invert = false,\n  disableDirection = false\n) {\n  return function startHorizontalResize(event: React.MouseEvent) {\n    const box = targetRef.current;\n\n    if (box == null) {\n      return;\n    }\n\n    const veil = createVeil();\n    box.appendChild(veil);\n\n    const languageDirection = window.getComputedStyle(box).direction;\n    const finalInvert =\n      languageDirection === 'rtl' && !disableDirection ? !invert : invert;\n    const direction = finalInvert ? -1 : 1;\n\n    const startX = event.clientX;\n    const startRect = box.getBoundingClientRect();\n    let width = startRect.width;\n\n    const drag = (event: MouseEvent) => {\n      const beforeWidth = box.getBoundingClientRect().width;\n      const totalDelta = direction * (event.clientX - startX);\n      const newWidth = startRect.width + totalDelta;\n      const currentDelta = newWidth - width;\n\n      width = newWidth;\n\n      box.style.width = `${newWidth}px`;\n\n      const afterWidth = box.getBoundingClientRect().width;\n      const atLimit = afterWidth === beforeWidth;\n      onWidthResize?.(newWidth, origin, totalDelta, currentDelta, atLimit);\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    const mouseEnter = (event: MouseEvent) => {\n      if (event.buttons === 0) {\n        endDrag();\n      }\n    };\n\n    const endDrag = () => {\n      box.removeChild(veil);\n\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseenter', mouseEnter);\n      event.stopPropagation();\n      event.preventDefault();\n\n      onWidthResizeEnd?.(width, origin);\n    };\n\n    document.body.addEventListener('mousemove', drag);\n    document.body.addEventListener('mouseup', endDrag);\n    document.body.addEventListener('mouseenter', mouseEnter);\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n\nexport function createVerticalResizeHandler(\n  targetRef: React.MutableRefObject<HTMLElement | null>,\n  onHeightResize?: OnHeightResize,\n  onHeightResizeEnd?: (height: number, origin: HeightResizeOrigin) => void,\n  invert = false,\n  origin: HeightResizeOrigin = 'bottom'\n) {\n  const direction = invert ? -1 : 1;\n  return function startVerticalResize(event: React.MouseEvent) {\n    const box = targetRef.current;\n\n    if (box == null) {\n      return;\n    }\n\n    const veil = createVeil();\n    box.appendChild(veil);\n\n    const startY = event.clientY;\n    const startRect = box.getBoundingClientRect();\n    let height = startRect.height;\n\n    const drag = (event: MouseEvent) => {\n      const beforeHeight = box.getBoundingClientRect().height;\n      const totalDelta = direction * (event.clientY - startY);\n      const newHeight = startRect.height + totalDelta;\n      const currentDelta = newHeight - height;\n      height = newHeight;\n      box.style.height = `${newHeight}px`;\n      const afterHeight = box.getBoundingClientRect().height;\n      const atLimit = afterHeight === beforeHeight;\n      onHeightResize?.(newHeight, origin, totalDelta, currentDelta, atLimit);\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    const mouseEnter = (event: MouseEvent) => {\n      if (event.buttons === 0) {\n        endDrag();\n      }\n    };\n\n    const endDrag = () => {\n      box.removeChild(veil);\n\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseenter', mouseEnter);\n      event.stopPropagation();\n      event.preventDefault();\n\n      onHeightResizeEnd?.(height, origin);\n    };\n\n    document.body.addEventListener('mousemove', drag);\n    document.body.addEventListener('mouseup', endDrag);\n    document.body.addEventListener('mouseenter', mouseEnter);\n    event.stopPropagation();\n    event.preventDefault();\n  };\n}\n"],"names":["createVeil","veil","createHorizontalResizeHandler","targetRef","onWidthResize","onWidthResizeEnd","origin","invert","disableDirection","event","box","direction","startX","startRect","width","drag","beforeWidth","totalDelta","newWidth","currentDelta","atLimit","mouseEnter","endDrag","createVerticalResizeHandler","onHeightResize","onHeightResizeEnd","startY","height","beforeHeight","newHeight"],"mappings":"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"}

package/dist/stacks/box/right_resize_handle.d.ts

@@ -1,10 +1,4 @@
-import { default as React } from 'react';
-import { HandleProps } from './handle_props.js';
-export interface RightResizeHandleProps {
-    targetRef: React.MutableRefObject<HTMLElement | null>;
-    handleProps?: HandleProps;
-    onWidthResize?: (width: number, origin: 'left' | 'right', totalDelta: number, currentDelta: number) => void;
-    onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-}
+import { HorizontalResizeHandleProps } from './types.js';
+export type RightResizeHandleProps = HorizontalResizeHandleProps;
 export declare function RightResizeHandle({ targetRef, handleProps, onWidthResize, onWidthResizeEnd, }: RightResizeHandleProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=right_resize_handle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"right_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GAAG,OAAO,EACxB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;IACV,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtE;AACD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CA0BxB"}
+{"version":3,"file":"right_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,YAAY,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAC;AACjE,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CA0BxB"}

package/dist/stacks/box/right_resize_handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"right_resize_handle.js","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './right_resize_handle.module.css';\n\nexport interface RightResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (\n    width: number,\n    origin: 'left' | 'right',\n    totalDelta: number,\n    currentDelta: number\n  ) => void;\n  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;\n}\nexport function RightResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: RightResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    'right',\n    false,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const rightResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['right-resize-handle'], 'tcn-right-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={rightResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["RightResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","rightResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAiBO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"right_resize_handle.js","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './right_resize_handle.module.css';\nimport type { HorizontalResizeHandleProps } from './types.js';\n\nexport type RightResizeHandleProps = HorizontalResizeHandleProps;\nexport function RightResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: RightResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    'right',\n    false,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const rightResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['right-resize-handle'], 'tcn-right-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={rightResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["RightResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","rightResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAMO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/box/start_resize_handle.d.ts

@@ -1,10 +1,4 @@
-import { default as React } from 'react';
-import { HandleProps } from './handle_props.js';
-export interface StartResizeHandleProps {
-    targetRef: React.MutableRefObject<HTMLElement | null>;
-    handleProps?: HandleProps;
-    onWidthResize?: (width: number, origin: 'left' | 'right', totalDelta: number, currentDelta: number) => void;
-    onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-}
+import { HorizontalResizeHandleProps } from './types.js';
+export type StartResizeHandleProps = HorizontalResizeHandleProps;
 export declare function StartResizeHandle({ targetRef, handleProps, onWidthResize, onWidthResizeEnd, }: StartResizeHandleProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=start_resize_handle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"start_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GAAG,OAAO,EACxB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;IACV,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtE;AACD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CAwBxB"}
+{"version":3,"file":"start_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,YAAY,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAC;AAEjE,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CAwBxB"}

package/dist/stacks/box/start_resize_handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"start_resize_handle.js","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './start_resize_handle.module.css';\n\nexport interface StartResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (\n    width: number,\n    origin: 'left' | 'right',\n    totalDelta: number,\n    currentDelta: number\n  ) => void;\n  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;\n}\nexport function StartResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: StartResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    'left'\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const startResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['start-resize-handle'], 'tcn-start-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={startResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["StartResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","startResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAiBO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"start_resize_handle.js","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './start_resize_handle.module.css';\nimport type { HorizontalResizeHandleProps } from './types.js';\n\nexport type StartResizeHandleProps = HorizontalResizeHandleProps;\n\nexport function StartResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: StartResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    'left'\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const startResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['start-resize-handle'], 'tcn-start-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={startResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["StartResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","startResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAOO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/box/top_resize_handle.d.ts

@@ -1,10 +1,4 @@
-import { default as React } from 'react';
-import { HandleProps } from './handle_props.js';
-export interface TopResizeHandleProps {
-    targetRef: React.MutableRefObject<HTMLElement | null>;
-    handleProps?: HandleProps;
-    onHeightResize?: (height: number, origin: 'top' | 'bottom', totalDelta: number, currentDelta: number) => void;
-    onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
-}
+import { VerticalResizeHandleProps } from './types.js';
+export type TopResizeHandleProps = VerticalResizeHandleProps;
 export declare function TopResizeHandle({ targetRef, handleProps, onHeightResize, onHeightResizeEnd, }: TopResizeHandleProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=top_resize_handle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"top_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,KAAK,GAAG,QAAQ,EACxB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAC;CACxE;AACD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,EAAE,oBAAoB,2CAwBtB"}
+{"version":3,"file":"top_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAE5D,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC;AAE7D,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,EAAE,oBAAoB,2CAwBtB"}

package/dist/stacks/box/top_resize_handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"top_resize_handle.js","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport styles from './top_resize_handle.module.css';\n\nexport interface TopResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onHeightResize?: (\n    height: number,\n    origin: 'top' | 'bottom',\n    totalDelta: number,\n    currentDelta: number\n  ) => void;\n  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;\n}\nexport function TopResizeHandle({\n  targetRef,\n  handleProps,\n  onHeightResize,\n  onHeightResizeEnd,\n}: TopResizeHandleProps) {\n  const resizeHandler = createVerticalResizeHandler(\n    targetRef,\n    onHeightResize,\n    onHeightResizeEnd,\n    true,\n    'top'\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const topResizeHandleStyle: React.CSSProperties = {\n    ...handleProps?.style,\n    top: `${offset}px`,\n    height: handleProps?.size || '16px',\n  };\n  return (\n    <div\n      className={clsx(styles['top-resize-handle'], 'tcn-top-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={topResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["TopResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","topResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAiBO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4C;AAAA,IAChD,GAAGN,GAAa;AAAA,IAChB,KAAK,GAAGK,CAAM;AAAA,IACd,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAE/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"top_resize_handle.js","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport styles from './top_resize_handle.module.css';\nimport type { VerticalResizeHandleProps } from './types.js';\n\nexport type TopResizeHandleProps = VerticalResizeHandleProps;\n\nexport function TopResizeHandle({\n  targetRef,\n  handleProps,\n  onHeightResize,\n  onHeightResizeEnd,\n}: TopResizeHandleProps) {\n  const resizeHandler = createVerticalResizeHandler(\n    targetRef,\n    onHeightResize,\n    onHeightResizeEnd,\n    true,\n    'top'\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const topResizeHandleStyle: React.CSSProperties = {\n    ...handleProps?.style,\n    top: `${offset}px`,\n    height: handleProps?.size || '16px',\n  };\n  return (\n    <div\n      className={clsx(styles['top-resize-handle'], 'tcn-top-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={topResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["TopResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","topResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAQO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4C;AAAA,IAChD,GAAGN,GAAa;AAAA,IAChB,KAAK,GAAGK,CAAM;AAAA,IACd,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAE/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

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

@@ -0,0 +1,18 @@
+import { HandleProps } from './handle_props.js';
+export type WidthResizeOrigin = 'left' | 'right';
+export type HeightResizeOrigin = 'top' | 'bottom';
+export type OnWidthResize = (width: number, origin: WidthResizeOrigin, totalDelta: number, currentDelta: number, atLimit: boolean) => void;
+export type OnHeightResize = (height: number, origin: HeightResizeOrigin, totalDelta: number, currentDelta: number, 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;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/stacks/h_collapsible_box.js

@@ -1,46 +1,46 @@
-import { jsx as u } from "react/jsx-runtime";
-import { clsx as R } from "clsx";
-import i, { useLayoutEffect as x } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import { clsx as d } from "clsx";
+import t, { useLayoutEffect as u } from "react";
 import "../utils/click_away_listener.js";
 import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
-import { useForkRef as z } from "../utils/hooks/use_fork_ref.js";
+import { useForkRef as R } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
 import "../utils/dnd/context.js";
 import "../draggable.module-BgelQsuJ.js";
-import { Box as b } from "./box/box.js";
-import { s as h } from "../collapsible_box.module-BiS98xXA.js";
-import { useIsCollapsed as y } from "./utils/use_is_collapsed.js";
-const $ = i.forwardRef(function({ open: l = !1, defaultWidth: r = "400px", ...e }, n) {
-  const o = i.useRef(null), c = z(n, o), [m, a] = i.useState(!1);
-  x(() => {
-    o.current?.style.setProperty("--collapsible-size", r);
-  }, [r]);
-  const f = y(l, o) && !l ? null : e.children;
-  return /* @__PURE__ */ u(
-    b,
+import { Box as x } from "./box/box.js";
+import { s as z } from "../collapsible_box.module-BiS98xXA.js";
+import { useIsCollapsed as b } from "./utils/use_is_collapsed.js";
+const L = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e }, a) {
+  const o = t.useRef(null), n = R(a, o), [c, r] = t.useState(!1);
+  u(() => {
+    o.current?.style.setProperty("--collapsible-size", i);
+  }, [i]);
+  const m = b(l, o) && !l ? null : e.children;
+  return /* @__PURE__ */ p(
+    x,
     {
-      ref: c,
+      ref: n,
       ...e,
       "data-is-collapsed": !l,
       "data-collapse-orientation": "horizontal",
-      "data-is-resizing": m,
-      onWidthResize: (s, t, p, d) => {
-        a(!0), e.onWidthResize?.(s, t, p, d);
+      "data-is-resizing": c,
+      onWidthResize: (...s) => {
+        r(!0), e.onWidthResize?.(...s);
       },
-      onWidthResizeEnd: (s, t) => {
-        a(!1), e.onWidthResizeEnd?.(s, t), o.current?.style.setProperty("--collapsible-size", `${s}px`);
+      onWidthResizeEnd: (s, f) => {
+        r(!1), e.onWidthResizeEnd?.(s, f), o.current?.style.setProperty("--collapsible-size", `${s}px`);
       },
-      className: R(
+      className: d(
         e.className,
-        h["collapsible-box"],
+        z["collapsible-box"],
         "tcn-h-collapsible-box"
       ),
-      children: f
+      children: m
     }
   );
 });
 export {
-  $ as HCollapsibleBox
+  L as HCollapsibleBox
 };
 //# sourceMappingURL=h_collapsible_box.js.map

package/dist/stacks/h_collapsible_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface HCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultWidth?: string;\n}\n\nexport const HCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);\n  }, [defaultWidth]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"horizontal\"\n      data-is-resizing={resizing}\n      onWidthResize={(width, origin, totalDelta, currentDelta) => {\n        setIsResizing(true);\n        props.onWidthResize?.(width, origin, totalDelta, currentDelta);\n      }}\n      onWidthResizeEnd={(width, origin) => {\n        setIsResizing(false);\n        props.onWidthResizeEnd?.(width, origin);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-h-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["HCollapsibleBox","React","open","defaultWidth","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","width","origin","totalDelta","currentDelta","clsx","styles"],"mappings":";;;;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,cAAAC,IAAe,SAAS,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAY;AAAA,EAC9E,GAAG,CAACA,CAAY,CAAC;AAGjB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,eAAe,CAACO,GAAOC,GAAQC,GAAYC,MAAiB;AAC1D,QAAAT,EAAc,EAAI,GAClBN,EAAM,gBAAgBY,GAAOC,GAAQC,GAAYC,CAAY;AAAA,MAC/D;AAAA,MACA,kBAAkB,CAACH,GAAOC,MAAW;AACnC,QAAAP,EAAc,EAAK,GACnBN,EAAM,mBAAmBY,GAAOC,CAAM,GACtCX,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWI;AAAA,QACThB,EAAM;AAAA,QACNiB,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface HCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultWidth?: string;\n}\n\nexport const HCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);\n  }, [defaultWidth]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"horizontal\"\n      data-is-resizing={resizing}\n      onWidthResize={(...args) => {\n        setIsResizing(true);\n        props.onWidthResize?.(...args);\n      }}\n      onWidthResizeEnd={(width, origin) => {\n        setIsResizing(false);\n        props.onWidthResizeEnd?.(width, origin);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-h-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["HCollapsibleBox","React","open","defaultWidth","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","args","width","origin","clsx","styles"],"mappings":";;;;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,cAAAC,IAAe,SAAS,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAY;AAAA,EAC9E,GAAG,CAACA,CAAY,CAAC;AAGjB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,eAAe,IAAIO,MAAS;AAC1B,QAAAN,EAAc,EAAI,GAClBN,EAAM,gBAAgB,GAAGY,CAAI;AAAA,MAC/B;AAAA,MACA,kBAAkB,CAACC,GAAOC,MAAW;AACnC,QAAAR,EAAc,EAAK,GACnBN,EAAM,mBAAmBa,GAAOC,CAAM,GACtCZ,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGW,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWE;AAAA,QACTf,EAAM;AAAA,QACNgB,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/stacks/index.d.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/dist/stacks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stacks/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stacks/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/dist/stacks/v_collapsible_box.js

@@ -1,46 +1,46 @@
-import { jsx as d } from "react/jsx-runtime";
-import i, { useLayoutEffect as R } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import t, { useLayoutEffect as u } from "react";
 import "../utils/click_away_listener.js";
 import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
-import { useForkRef as x } from "../utils/hooks/use_fork_ref.js";
+import { useForkRef as d } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
 import "../utils/dnd/context.js";
-import { clsx as b } from "clsx";
+import { clsx as R } from "clsx";
 import "../draggable.module-BgelQsuJ.js";
-import { Box as z } from "./box/box.js";
-import { s as y } from "../collapsible_box.module-BiS98xXA.js";
-import { useIsCollapsed as g } from "./utils/use_is_collapsed.js";
-const S = i.forwardRef(function({ open: l = !1, defaultHeight: r = "400px", ...e }, c) {
-  const s = i.useRef(null), n = x(c, s), [m, a] = i.useState(!1);
-  R(() => {
-    s.current?.style.setProperty("--collapsible-size", r);
-  }, [r]);
-  const f = g(l, s) && !l ? null : e.children;
-  return /* @__PURE__ */ d(
-    z,
+import { Box as x } from "./box/box.js";
+import { s as b } from "../collapsible_box.module-BiS98xXA.js";
+import { useIsCollapsed as z } from "./utils/use_is_collapsed.js";
+const F = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e }, a) {
+  const s = t.useRef(null), c = d(a, s), [n, r] = t.useState(!1);
+  u(() => {
+    s.current?.style.setProperty("--collapsible-size", i);
+  }, [i]);
+  const m = z(l, s) && !l ? null : e.children;
+  return /* @__PURE__ */ p(
+    x,
     {
-      ref: n,
+      ref: c,
       ...e,
       "data-is-collapsed": !l,
       "data-collapse-orientation": "vertical",
-      "data-is-resizing": m,
-      onHeightResize: (o, t, p, u) => {
-        a(!0), e.onHeightResize?.(o, t, p, u);
+      "data-is-resizing": n,
+      onHeightResize: (...o) => {
+        r(!0), e.onHeightResize?.(...o);
       },
-      onHeightResizeEnd: (o, t) => {
-        a(!1), s.current?.style.setProperty("--collapsible-size", `${o}px`), e.onHeightResizeEnd?.(o, t);
+      onHeightResizeEnd: (o, f) => {
+        r(!1), s.current?.style.setProperty("--collapsible-size", `${o}px`), e.onHeightResizeEnd?.(o, f);
       },
-      className: b(
+      className: R(
         e.className,
-        y["collapsible-box"],
+        b["collapsible-box"],
         "tcn-v-collapsible-box"
       ),
-      children: f
+      children: m
     }
   );
 });
 export {
-  S as VCollapsibleBox
+  F as VCollapsibleBox
 };
 //# sourceMappingURL=v_collapsible_box.js.map

package/dist/stacks/v_collapsible_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"v_collapsible_box.js","sources":["../../src/stacks/v_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface VCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultHeight?: string;\n}\n\nexport const VCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultHeight = '400px', ...props }: VCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultHeight);\n  }, [defaultHeight]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"vertical\"\n      data-is-resizing={resizing}\n      onHeightResize={(height, origin, totalDelta, currentDelta) => {\n        setIsResizing(true);\n        props.onHeightResize?.(height, origin, totalDelta, currentDelta);\n      }}\n      onHeightResizeEnd={(height, origin) => {\n        setIsResizing(false);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);\n        props.onHeightResizeEnd?.(height, origin);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-v-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["VCollapsibleBox","React","open","defaultHeight","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","height","origin","totalDelta","currentDelta","clsx","styles"],"mappings":";;;;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,eAAAC,IAAgB,SAAS,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAa;AAAA,EAC/E,GAAG,CAACA,CAAa,CAAC;AAGlB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,gBAAgB,CAACO,GAAQC,GAAQC,GAAYC,MAAiB;AAC5D,QAAAT,EAAc,EAAI,GAClBN,EAAM,iBAAiBY,GAAQC,GAAQC,GAAYC,CAAY;AAAA,MACjE;AAAA,MACA,mBAAmB,CAACH,GAAQC,MAAW;AACrC,QAAAP,EAAc,EAAK,GACnBJ,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAM,IAAI,GAC7EZ,EAAM,oBAAoBY,GAAQC,CAAM;AAAA,MAC1C;AAAA,MACA,WAAWG;AAAA,QACThB,EAAM;AAAA,QACNiB,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"v_collapsible_box.js","sources":["../../src/stacks/v_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface VCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultHeight?: string;\n}\n\nexport const VCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultHeight = '400px', ...props }: VCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultHeight);\n  }, [defaultHeight]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"vertical\"\n      data-is-resizing={resizing}\n      onHeightResize={(...args) => {\n        setIsResizing(true);\n        props.onHeightResize?.(...args);\n      }}\n      onHeightResizeEnd={(height, origin) => {\n        setIsResizing(false);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);\n        props.onHeightResizeEnd?.(height, origin);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-v-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["VCollapsibleBox","React","open","defaultHeight","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","args","height","origin","clsx","styles"],"mappings":";;;;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,eAAAC,IAAgB,SAAS,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAa;AAAA,EAC/E,GAAG,CAACA,CAAa,CAAC;AAGlB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,gBAAgB,IAAIO,MAAS;AAC3B,QAAAN,EAAc,EAAI,GAClBN,EAAM,iBAAiB,GAAGY,CAAI;AAAA,MAChC;AAAA,MACA,mBAAmB,CAACC,GAAQC,MAAW;AACrC,QAAAR,EAAc,EAAK,GACnBJ,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGW,CAAM,IAAI,GAC7Eb,EAAM,oBAAoBa,GAAQC,CAAM;AAAA,MAC1C;AAAA,MACA,WAAWC;AAAA,QACTf,EAAM;AAAA,QACNgB,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-import { FrameOwnProps } from '../../overlay/frame/frame.js';
-import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
-export type ModalProps = FrameOwnProps & ScaffoldProps;
-export declare const Modal: React.ForwardRefExoticComponent<FrameOwnProps & ScaffoldProps & React.RefAttributes<HTMLElement>>;
+import { FrameProps } from '../../overlay/frame/frame.js';
+export type ModalProps = FrameProps;
+export declare const Modal: React.ForwardRefExoticComponent<Omit<import('../../stacks/index.js').BoxProps<HTMLElement>, "enableResizeOnTop" | "enableResizeOnBottom" | "enableResizeOnLeft" | "enableResizeOnRight"> & import('../../overlay/index.js').FrameOwnProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=modal.d.ts.map

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,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAKlF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC;AAEvD,eAAO,MAAM,KAAK,mGAgBhB,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,+QAkBhB,CAAC"}

package/dist/surfaces/modal/modal.js

@@ -1,21 +1,23 @@
 import { jsx as o } from "react/jsx-runtime";
-import { clsx as l } from "clsx";
+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 }, j = s.forwardRef(function({ children: r, className: t, isOpen: m, draggable: a = !1, veil: f = !0, ...c }, e) {
+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) {
   return /* @__PURE__ */ o(
     d,
     {
-      isOpen: m,
-      draggable: a,
-      veil: f,
-      className: l(p.modal, "tcn-surface", "tcn-modal", t),
-      children: /* @__PURE__ */ o(n, { ref: e, ...c, children: r })
+      ref: l,
+      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 })
     }
   );
 });
 export {
-  j as Modal
+  N 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 FrameOwnProps } from '../../overlay/frame/frame.js';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\n\n// Styles\nimport styles from './modal.module.css';\n\nexport type ModalProps = FrameOwnProps & ScaffoldProps;\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      isOpen={isOpen}\n      draggable={draggable}\n      veil={veil}\n      className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}\n    >\n      <Scaffold ref={ref} {...props}>\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,QAAAN;AAAA,MACA,WAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAWK,EAAKC,EAAO,OAAU,eAAe,aAAaT,CAAS;AAAA,MAEtE,UAAA,gBAAAM,EAACI,GAAA,EAAS,KAAAL,GAAW,GAAGD,GACrB,UAAAL,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  { 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;"}

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

@@ -1 +1 @@
-{"version":3,"file":"pop_confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,iLAmBtB,CAAC"}
+{"version":3,"file":"pop_confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,iLAyBtB,CAAC"}

package/dist/surfaces/pop_confirm/pop_confirm.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { clsx as f } from "clsx";
-import e from "react";
+import { clsx as e } from "clsx";
+import n from "react";
 import "../../layouts/column/column.js";
 import "../../divider.module-FptFV0PX.js";
 import "../../layouts/grid/grid.js";
@@ -8,7 +8,7 @@ import "../../layouts/list/item.js";
 import "../../layouts/list/list.js";
 import "../../layouts/sidebar_end/sidebar_end.js";
 import "../../layouts/sidebar_start/sidebar_start.js";
-import { Scaffold as n } from "../../layouts/scaffold/scaffold.js";
+import { Scaffold as c } from "../../layouts/scaffold/scaffold.js";
 import "../../layouts/body/h_body.js";
 import "../../layouts/body/v_body.js";
 import "../../layouts/footer/footer.js";
@@ -29,24 +29,30 @@ import "../../stacks/z_stack.js";
 import "../../layouts/rail/rail.js";
 import "../../layouts/rail/side/side.js";
 import "../../layouts/rail/utility_strip/utility_strip.js";
-import { PopperDismissal as c } from "../../overlay/popper/base/dismissal_decorator.js";
+import { PopperDismissal as l } from "../../overlay/popper/base/dismissal_decorator.js";
 import { ElementPopper as s } from "../../overlay/popper/element_popper.js";
-const M = e.forwardRef(
-  function({ children: r, className: i, dismissals: m = [c.CLICK_AWAY], ...p }, t) {
+const O = n.forwardRef(
+  function({
+    children: r,
+    className: m,
+    precision: t = "low",
+    dismissals: i = [l.CLICK_AWAY],
+    ...p
+  }, f) {
     return /* @__PURE__ */ o(
       s,
       {
-        ref: t,
-        precision: "high",
-        className: f(i, "tcn-pop-confirm"),
-        dismissals: m,
+        ref: f,
+        precision: t,
+        className: e(m, "tcn-pop-confirm"),
+        dismissals: i,
         ...p,
-        children: /* @__PURE__ */ o(n, { width: "100%", height: "100%", children: r })
+        children: /* @__PURE__ */ o(c, { width: "100%", height: "100%", children: r })
       }
     );
   }
 );
 export {
-  M as PopConfirm
+  O as PopConfirm
 };
 //# sourceMappingURL=pop_confirm.js.map