@tcn/ui 0.12.3 → 0.12.5

package/dist/stacks/box/detect_resize_bounds.js

@@ -0,0 +1,49 @@
+const u = {
+  width: {
+    size: "width",
+    min: "minWidth",
+    max: "maxWidth"
+  },
+  height: {
+    size: "height",
+    min: "minHeight",
+    max: "maxHeight"
+  }
+};
+function l(e) {
+  const n = /^(-?\d+(?:\.\d+)?)px$/.exec(e.trim());
+  return n ? Number(n[1]) : null;
+}
+function x(e, n, i) {
+  const c = l(n), t = l(i), s = c !== null && e < c, o = t !== null && e > t;
+  return {
+    hitMin: s,
+    hitMax: o,
+    clamped: s || o
+  };
+}
+function z({
+  element: e,
+  axis: n,
+  nextSize: i,
+  epsilon: c = 0.5
+}) {
+  const t = u[n], s = getComputedStyle(e), o = x(i, s[t.min], s[t.max]);
+  if (o.clamped) return o;
+  const d = e.style, h = d[t.size];
+  try {
+    d[t.size] = `${i}px`;
+    const r = e.getBoundingClientRect()[t.size] - i, a = r > c, m = r < -c;
+    return {
+      hitMin: a,
+      hitMax: m,
+      clamped: a || m
+    };
+  } finally {
+    d[t.size] = h;
+  }
+}
+export {
+  z as detectResizeBounds
+};
+//# sourceMappingURL=detect_resize_bounds.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"detect_resize_bounds.js","sources":["../../../src/stacks/box/detect_resize_bounds.ts"],"sourcesContent":["type ConstraintAxis = 'width' | 'height';\n\nexport type DetectResizeBoundsParams = {\n  element: HTMLElement;\n  axis: ConstraintAxis;\n  nextSize: number;\n  epsilon?: number; // Tolerance for the constraint hit detection.\n};\n\nexport type DetectResizeBoundsResult = {\n  hitMin: boolean;\n  hitMax: boolean;\n  clamped: boolean;\n};\n\nconst styleKeys = {\n  width: {\n    size: 'width',\n    min: 'minWidth',\n    max: 'maxWidth',\n  },\n  height: {\n    size: 'height',\n    min: 'minHeight',\n    max: 'maxHeight',\n  },\n} as const;\n\nfunction parsePx(value: string): number | null {\n  const match = /^(-?\\d+(?:\\.\\d+)?)px$/.exec(value.trim());\n  return match ? Number(match[1]) : null;\n}\n\nfunction detectByPixelValue(nextSize: number, min: string, max: string) {\n  const minPx = parsePx(min);\n  const maxPx = parsePx(max);\n  const hitMin = minPx !== null && nextSize < minPx;\n  const hitMax = maxPx !== null && nextSize > maxPx;\n  return {\n    hitMin,\n    hitMax,\n    clamped: hitMin || hitMax,\n  };\n}\n\nexport function detectResizeBounds({\n  element,\n  axis,\n  nextSize,\n  epsilon = 0.5,\n}: DetectResizeBoundsParams): DetectResizeBoundsResult {\n  const keys = styleKeys[axis];\n\n  const computed = getComputedStyle(element);\n  const fastPath = detectByPixelValue(nextSize, computed[keys.min], computed[keys.max]);\n  if (fastPath.clamped) return fastPath;\n\n  const style = element.style;\n  const prevInlineSize = style[keys.size]; // Save the previous size to revert later.\n\n  try {\n    // Temporarily apply the new size to the element to offload bound test to browser.\n    style[keys.size] = `${nextSize}px`;\n\n    // Force layout so browser resolves min/max/intrinsic constraints.\n    const rect = element.getBoundingClientRect();\n    const renderedSize = rect[keys.size];\n\n    const delta = renderedSize - nextSize;\n\n    const hitMin = delta > epsilon;\n    const hitMax = delta < -epsilon;\n    const clamped = hitMin || hitMax;\n\n    return {\n      hitMin,\n      hitMax,\n      clamped,\n    };\n  } finally {\n    // revert the style change\n    style[keys.size] = prevInlineSize;\n  }\n}\n"],"names":["styleKeys","parsePx","value","match","detectByPixelValue","nextSize","min","max","minPx","maxPx","hitMin","hitMax","detectResizeBounds","element","axis","epsilon","keys","computed","fastPath","style","prevInlineSize","delta"],"mappings":"AAeA,MAAMA,IAAY;AAAA,EAChB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAET;AAEA,SAASC,EAAQC,GAA8B;AAC7C,QAAMC,IAAQ,wBAAwB,KAAKD,EAAM,MAAM;AACvD,SAAOC,IAAQ,OAAOA,EAAM,CAAC,CAAC,IAAI;AACpC;AAEA,SAASC,EAAmBC,GAAkBC,GAAaC,GAAa;AACtE,QAAMC,IAAQP,EAAQK,CAAG,GACnBG,IAAQR,EAAQM,CAAG,GACnBG,IAASF,MAAU,QAAQH,IAAWG,GACtCG,IAASF,MAAU,QAAQJ,IAAWI;AAC5C,SAAO;AAAA,IACL,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAASD,KAAUC;AAAA,EAAA;AAEvB;AAEO,SAASC,EAAmB;AAAA,EACjC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAT;AAAA,EACA,SAAAU,IAAU;AACZ,GAAuD;AACrD,QAAMC,IAAOhB,EAAUc,CAAI,GAErBG,IAAW,iBAAiBJ,CAAO,GACnCK,IAAWd,EAAmBC,GAAUY,EAASD,EAAK,GAAG,GAAGC,EAASD,EAAK,GAAG,CAAC;AACpF,MAAIE,EAAS,QAAS,QAAOA;AAE7B,QAAMC,IAAQN,EAAQ,OAChBO,IAAiBD,EAAMH,EAAK,IAAI;AAEtC,MAAI;AAEF,IAAAG,EAAMH,EAAK,IAAI,IAAI,GAAGX,CAAQ;AAM9B,UAAMgB,IAHOR,EAAQ,sBAAA,EACKG,EAAK,IAAI,IAENX,GAEvBK,IAASW,IAAQN,GACjBJ,IAASU,IAAQ,CAACN;AAGxB,WAAO;AAAA,MACL,QAAAL;AAAA,MACA,QAAAC;AAAA,MACA,SALcD,KAAUC;AAAA,IAKxB;AAAA,EAEJ,UAAA;AAEE,IAAAQ,EAAMH,EAAK,IAAI,IAAII;AAAA,EACrB;AACF;"}

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

@@ -1 +1 @@
-{"version":3,"file":"resize_handlers.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/resize_handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAWjB,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,aAAa,CAAC,EAAE,aAAa,EAC7B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,EACrE,MAAM,GAAE,iBAA2B,EACnC,MAAM,UAAQ,EACd,gBAAgB,UAAQ,IAEc,OAAO,KAAK,CAAC,UAAU,UA4D9D;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,cAAc,CAAC,EAAE,cAAc,EAC/B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,KAAK,IAAI,EACxE,MAAM,UAAQ,EACd,MAAM,GAAE,kBAA6B,IAGD,OAAO,KAAK,CAAC,UAAU,UAoD5D"}
+{"version":3,"file":"resize_handlers.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/resize_handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAYjB,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,aAAa,CAAC,EAAE,aAAa,EAC7B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,EACrE,MAAM,GAAE,iBAA2B,EACnC,MAAM,UAAQ,EACd,gBAAgB,UAAQ,IAEc,OAAO,KAAK,CAAC,UAAU,UAgE9D;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EACrD,cAAc,CAAC,EAAE,cAAc,EAC/B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,KAAK,IAAI,EACxE,MAAM,UAAQ,EACd,MAAM,GAAE,kBAA6B,IAGD,OAAO,KAAK,CAAC,UAAU,UA2D5D"}

package/dist/stacks/box/resize_handlers.js

@@ -1,54 +1,61 @@
-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;
+import { detectResizeBounds as D } from "./detect_resize_bounds.js";
+function w() {
+  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 x(o, h, f, m = "right", d = !1, v = !1) {
-  return function(e) {
-    const t = o.current;
-    if (t == null)
-      return;
-    const a = L();
-    t.appendChild(a);
-    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);
+function C(n, v, f, p = "right", c = !1, b = !1) {
+  return function(t) {
+    const e = n.current;
+    if (e == null) return;
+    const a = w();
+    e.appendChild(a);
+    const d = (window.getComputedStyle(e).direction === "rtl" && !b ? !c : c) ? -1 : 1, g = t.clientX, u = e.getBoundingClientRect();
+    let s = u.width;
+    const r = (i) => {
+      const h = d * (i.clientX - g), m = u.width + h;
+      if (D({
+        element: e,
+        axis: "width",
+        nextSize: m
+      }).clamped) return;
+      const x = m - s;
+      s = m, e.style.width = `${m}px`, v?.({ width: m, origin: p, totalDelta: h, currentDelta: x }), i.stopPropagation(), i.preventDefault();
+    }, l = (i) => {
+      i.buttons === 0 && o();
+    }, o = () => {
+      e.removeChild(a), document.body.removeEventListener("mousemove", r), document.body.removeEventListener("mouseup", o), document.body.removeEventListener("mouseenter", l), t.stopPropagation(), t.preventDefault(), f?.(s, p);
     };
-    document.body.addEventListener("mousemove", i), document.body.addEventListener("mouseup", s), document.body.addEventListener("mouseenter", p), e.stopPropagation(), e.preventDefault();
+    document.body.addEventListener("mousemove", r), document.body.addEventListener("mouseup", o), document.body.addEventListener("mouseenter", l), t.stopPropagation(), t.preventDefault();
   };
 }
-function z(o, h, f, m = !1, d = "bottom") {
-  const v = m ? -1 : 1;
-  return function(e) {
-    const t = o.current;
-    if (t == null)
-      return;
-    const a = L();
-    t.appendChild(a);
-    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);
+function P(n, v, f, p = !1, c = "bottom") {
+  const b = p ? -1 : 1;
+  return function(t) {
+    const e = n.current;
+    if (e == null) return;
+    const a = w();
+    e.appendChild(a);
+    const E = t.clientY, y = e.getBoundingClientRect();
+    let d = y.height;
+    const g = (r) => {
+      const l = b * (r.clientY - E), o = y.height + l;
+      if (D({
+        element: e,
+        axis: "height",
+        nextSize: o
+      }).clamped) return;
+      const h = o - d;
+      d = o, e.style.height = `${o}px`, v?.({ height: o, origin: c, totalDelta: l, currentDelta: h }), r.stopPropagation(), r.preventDefault();
+    }, u = (r) => {
+      r.buttons === 0 && s();
+    }, s = () => {
+      e.removeChild(a), document.body.removeEventListener("mousemove", g), document.body.removeEventListener("mouseup", s), document.body.removeEventListener("mouseenter", u), t.stopPropagation(), t.preventDefault(), f?.(d, c);
     };
-    document.body.addEventListener("mousemove", g), document.body.addEventListener("mouseup", r), document.body.addEventListener("mouseenter", l), e.stopPropagation(), e.preventDefault();
+    document.body.addEventListener("mousemove", g), document.body.addEventListener("mouseup", s), document.body.addEventListener("mouseenter", u), t.stopPropagation(), t.preventDefault();
   };
 }
 export {
-  x as createHorizontalResizeHandler,
-  z as createVerticalResizeHandler
+  C as createHorizontalResizeHandler,
+  P 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":["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":"AAOA,SAASA,IAAa;AACpB,QAAMC,IAAO,OAAO,SAAS,cAAc,KAAK;AAChD,SAAAA,EAAK,MAAM,WAAW,YACtBA,EAAK,MAAM,QAAQ,UACnBA,EAAK,MAAM,kBAAkB,eAC7BA,EAAK,MAAM,gBAAgB,QACpBA;AACT;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,IAA4B,SAC5BC,IAAS,IACTC,IAAmB,IACnB;AACA,SAAO,SAA+BC,GAAyB;AAC7D,UAAMC,IAAMP,EAAU;AAEtB,QAAIO,KAAO;AACT;AAGF,UAAMT,IAAOD,EAAA;AACb,IAAAU,EAAI,YAAYT,CAAI;AAKpB,UAAMU,KAHoB,OAAO,iBAAiBD,CAAG,EAAE,cAE/B,SAAS,CAACF,IAAmB,CAACD,IAASA,KAC/B,KAAK,GAE/BK,IAASH,EAAM,SACfI,IAAYH,EAAI,sBAAA;AACtB,QAAII,IAAQD,EAAU;AAEtB,UAAME,IAAO,CAACN,MAAsB;AAClC,YAAMO,IAAcN,EAAI,sBAAA,EAAwB,OAC1CO,IAAaN,KAAaF,EAAM,UAAUG,IAC1CM,IAAWL,EAAU,QAAQI,GAC7BE,IAAeD,IAAWJ;AAEhC,MAAAA,IAAQI,GAERR,EAAI,MAAM,QAAQ,GAAGQ,CAAQ;AAG7B,YAAME,IADaV,EAAI,sBAAA,EAAwB,UAChBM;AAC/B,MAAAZ,IAAgBc,GAAUZ,GAAQW,GAAYE,GAAcC,CAAO,GACnEX,EAAM,gBAAA,GACNA,EAAM,eAAA;AAAA,IACR,GAEMY,IAAa,CAACZ,MAAsB;AACxC,MAAIA,EAAM,YAAY,KACpBa,EAAA;AAAA,IAEJ,GAEMA,IAAU,MAAM;AACpB,MAAAZ,EAAI,YAAYT,CAAI,GAEpB,SAAS,KAAK,oBAAoB,aAAac,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWO,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcD,CAAU,GAC1DZ,EAAM,gBAAA,GACNA,EAAM,eAAA,GAENJ,IAAmBS,GAAOR,CAAM;AAAA,IAClC;AAEA,aAAS,KAAK,iBAAiB,aAAaS,CAAI,GAChD,SAAS,KAAK,iBAAiB,WAAWO,CAAO,GACjD,SAAS,KAAK,iBAAiB,cAAcD,CAAU,GACvDZ,EAAM,gBAAA,GACNA,EAAM,eAAA;AAAA,EACR;AACF;AAEO,SAASc,EACdpB,GACAqB,GACAC,GACAlB,IAAS,IACTD,IAA6B,UAC7B;AACA,QAAMK,IAAYJ,IAAS,KAAK;AAChC,SAAO,SAA6BE,GAAyB;AAC3D,UAAMC,IAAMP,EAAU;AAEtB,QAAIO,KAAO;AACT;AAGF,UAAMT,IAAOD,EAAA;AACb,IAAAU,EAAI,YAAYT,CAAI;AAEpB,UAAMyB,IAASjB,EAAM,SACfI,IAAYH,EAAI,sBAAA;AACtB,QAAIiB,IAASd,EAAU;AAEvB,UAAME,IAAO,CAACN,MAAsB;AAClC,YAAMmB,IAAelB,EAAI,sBAAA,EAAwB,QAC3CO,IAAaN,KAAaF,EAAM,UAAUiB,IAC1CG,IAAYhB,EAAU,SAASI,GAC/BE,IAAeU,IAAYF;AACjC,MAAAA,IAASE,GACTnB,EAAI,MAAM,SAAS,GAAGmB,CAAS;AAE/B,YAAMT,IADcV,EAAI,sBAAA,EAAwB,WAChBkB;AAChC,MAAAJ,IAAiBK,GAAWvB,GAAQW,GAAYE,GAAcC,CAAO,GACrEX,EAAM,gBAAA,GACNA,EAAM,eAAA;AAAA,IACR,GAEMY,IAAa,CAACZ,MAAsB;AACxC,MAAIA,EAAM,YAAY,KACpBa,EAAA;AAAA,IAEJ,GAEMA,IAAU,MAAM;AACpB,MAAAZ,EAAI,YAAYT,CAAI,GAEpB,SAAS,KAAK,oBAAoB,aAAac,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWO,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcD,CAAU,GAC1DZ,EAAM,gBAAA,GACNA,EAAM,eAAA,GAENgB,IAAoBE,GAAQrB,CAAM;AAAA,IACpC;AAEA,aAAS,KAAK,iBAAiB,aAAaS,CAAI,GAChD,SAAS,KAAK,iBAAiB,WAAWO,CAAO,GACjD,SAAS,KAAK,iBAAiB,cAAcD,CAAU,GACvDZ,EAAM,gBAAA,GACNA,EAAM,eAAA;AAAA,EACR;AACF;"}
+{"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';\nimport { detectResizeBounds } from './detect_resize_bounds.js';\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) return;\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\n      const result = detectResizeBounds({\n        element: box,\n        axis: 'width',\n        nextSize: newWidth,\n      });\n\n      if (result.clamped) return;\n\n      const currentDelta = newWidth - width;\n\n      // apply the new width\n      width = newWidth;\n      box.style.width = `${newWidth}px`;\n\n      onWidthResize?.({ width: 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?: 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) return;\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\n      const result = detectResizeBounds({\n        element: box,\n        axis: 'height',\n        nextSize: newHeight,\n      });\n\n      if (result.clamped) return;\n\n      const currentDelta = newHeight - height;\n\n      // apply the new height\n      height = newHeight;\n      box.style.height = `${newHeight}px`;\n\n      onHeightResize?.({ height: 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","detectResizeBounds","currentDelta","mouseEnter","endDrag","createVerticalResizeHandler","onHeightResize","onHeightResizeEnd","startY","height","newHeight"],"mappings":"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"}

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":"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"}
+{"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;AAG9D,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAC;AAEjE,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,EAAE,sBAAsB,2CA0BxB"}

package/dist/stacks/box/start_resize_handle.js

@@ -12,7 +12,8 @@ function x({
     t,
     s,
     r,
-    "left"
+    "left",
+    !0
   ), n = e?.offset ? e.offset : -8, a = {
     ...e?.style,
     "--resize-offset": `${n}px`,

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 { 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;"}
+{"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';\nimport { CSSProperties } from 'react';\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    true\n  );\n\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const startResizeHandleStyle = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  } as CSSProperties;\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":";;;;AAQO,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,EAAA,GAGIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAAyB;AAAA,IAC7B,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/types.d.ts

@@ -1,18 +1,31 @@
 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 BaseOnResizePayload<Origin extends WidthResizeOrigin | HeightResizeOrigin> {
+    origin: Origin;
+    totalDelta: number;
+    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;
 }
 //# sourceMappingURL=types.d.ts.map

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/alert/alert.d.ts

@@ -3,8 +3,6 @@ import { ConfirmProps } from '../confirm/confirm.js';
 export interface AlertProps extends Omit<ConfirmProps, 'actions'> {
     open?: boolean;
     graphic?: React.ReactNode;
-    title?: string;
-    description?: string;
     onAccept?: () => void;
 }
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/surfaces/alert/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAW,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,mFAgBhB,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/surfaces/alert/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAW,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,mFAgBhB,CAAC"}

package/dist/surfaces/alert/alert.js

@@ -1,26 +1,24 @@
 import { jsx as r } from "react/jsx-runtime";
-import { clsx as p } from "clsx";
-import e from "react";
+import { clsx as e } from "clsx";
+import p from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
 import { Button as c } from "../../actions/button/button/button.js";
-import "../../actions/button/select_group/select_group.js";
-import "../../actions/button/select_group/single_select_group.js";
 import "../../actions/toggle/toggle.js";
 import { Confirm as f } from "../confirm/confirm.js";
-const R = e.forwardRef(function({ className: t, onAccept: o, ...i }, m) {
+const A = p.forwardRef(function({ className: t, onAccept: o, ...i }, m) {
   return /* @__PURE__ */ r(
     f,
     {
       ref: m,
-      className: p(t, "tcn-alert"),
+      className: e(t, "tcn-alert"),
       ...i,
       actions: /* @__PURE__ */ r(c, { onClick: o, hierarchy: "primary", width: "100%", children: "OK" })
     }
   );
 });
 export {
-  R as Alert
+  A as Alert
 };
 //# sourceMappingURL=alert.js.map

package/dist/surfaces/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../src/surfaces/alert/alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../../actions/index.js';\nimport { Confirm, ConfirmProps } from '../confirm/confirm.js';\n\nexport interface AlertProps extends Omit<ConfirmProps, 'actions'> {\n  open?: boolean;\n  graphic?: React.ReactNode;\n  title?: string;\n  description?: string;\n  onAccept?: () => void;\n}\n\nexport const Alert = React.forwardRef(function Alert(\n  { className, onAccept, ...props }: AlertProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  return (\n    <Confirm\n      ref={ref}\n      className={clsx(className, 'tcn-alert')}\n      {...props}\n      actions={\n        <Button onClick={onAccept} hierarchy=\"primary\" width=\"100%\">\n          OK\n        </Button>\n      }\n    />\n  );\n});\n"],"names":["Alert","React","className","onAccept","props","ref","jsx","Confirm","clsx","Button"],"mappings":";;;;;;;;;;;AAaO,MAAMA,IAAQC,EAAM,WAAW,SACpC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAKN,GAAW,WAAW;AAAA,MACrC,GAAGE;AAAA,MACJ,2BACGK,GAAA,EAAO,SAASN,GAAU,WAAU,WAAU,OAAM,QAAO,UAAA,KAAA,CAE5D;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"alert.js","sources":["../../../src/surfaces/alert/alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../../actions/index.js';\nimport { Confirm, ConfirmProps } from '../confirm/confirm.js';\n\nexport interface AlertProps extends Omit<ConfirmProps, 'actions'> {\n  open?: boolean;\n  graphic?: React.ReactNode;\n  onAccept?: () => void;\n}\n\nexport const Alert = React.forwardRef(function Alert(\n  { className, onAccept, ...props }: AlertProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  return (\n    <Confirm\n      ref={ref}\n      className={clsx(className, 'tcn-alert')}\n      {...props}\n      actions={\n        <Button onClick={onAccept} hierarchy=\"primary\" width=\"100%\">\n          OK\n        </Button>\n      }\n    />\n  );\n});\n"],"names":["Alert","React","className","onAccept","props","ref","jsx","Confirm","clsx","Button"],"mappings":";;;;;;;;;AAWO,MAAMA,IAAQC,EAAM,WAAW,SACpC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAKN,GAAW,WAAW;AAAA,MACrC,GAAGE;AAAA,MACJ,2BACGK,GAAA,EAAO,SAASN,GAAU,WAAU,WAAU,OAAM,QAAO,UAAA,KAAA,CAE5D;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/surfaces/confirm/confirm.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 import { BoxProps } from '../../stacks/box/box.js';
-export interface ConfirmProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ConfirmProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     open?: boolean;
     graphic?: React.ReactNode;
-    title?: string;
-    description?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
     actions?: React.ReactNode;
     veilProps?: BoxProps;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/confirm/confirm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAQjE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,qFAuElB,CAAC"}
+{"version":3,"file":"confirm.d.ts","sourceRoot":"","sources":["../../../src/surfaces/confirm/confirm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAQjE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,qFAqFlB,CAAC"}

package/dist/surfaces/confirm/confirm.js

@@ -1,62 +1,63 @@
-import { jsx as t, Fragment as y, jsxs as i } from "react/jsx-runtime";
-import w, { useRef as S, useState as C, useLayoutEffect as n } from "react";
-import { clsx as c } from "clsx";
-import { Spacer as N } from "../../stacks/spacer.js";
-import { VStack as T } from "../../stacks/v_stack.js";
-import { ZStack as R } from "../../stacks/z_stack.js";
-import { Portal as j } from "../../overlay/portal/portal.js";
-import { BodyText as B } from "../../typography/body_text/body_text.js";
+import { jsx as t, Fragment as S, jsxs as c } from "react/jsx-runtime";
+import C, { useRef as N, useState as T, useLayoutEffect as s } from "react";
+import { clsx as m } from "clsx";
+import { Spacer as E } from "../../stacks/spacer.js";
+import { VStack as R } from "../../stacks/v_stack.js";
+import { ZStack as j } from "../../stacks/z_stack.js";
+import { Portal as B } from "../../overlay/portal/portal.js";
+import { BodyText as b } from "../../typography/body_text/body_text.js";
 import "../../typography/callout/callout.js";
 import "../../typography/caption/caption.js";
 import "../../typography/footnote/footnote.js";
 import "../../typography/headline/headline.js";
 import "../../typography/subheadline/subheadline.js";
-import { Title as b } from "../../typography/title/title.js";
-import { Box as s } from "../../stacks/box/box.js";
-import '../../confirm.css';const v = "_confirm_e53f865", z = "_shake_d5d9154", A = "_actions_b7ffee5", m = { confirm: v, shake: z, actions: A }, U = w.forwardRef(function({
-  open: a,
-  graphic: f,
-  title: h,
-  description: l,
-  actions: d,
-  veilProps: p,
+import { Title as v } from "../../typography/title/title.js";
+import { Box as a } from "../../stacks/box/box.js";
+import '../../confirm.css';const z = "_confirm_e53f865", A = "_shake_d5d9154", F = "_actions_b7ffee5", f = { confirm: z, shake: A, actions: F }, X = C.forwardRef(function({
+  open: l,
+  graphic: h,
+  title: e,
+  description: r,
+  actions: p,
+  veilProps: d,
   className: u,
-  ...k
-}, x) {
-  const r = S(!1), [e, o] = C(!1);
-  n(() => (r.current = !0, () => {
-    r.current = !1;
-  }), []), n(() => {
-    if (e && r.current) {
-      const g = window.setTimeout(() => {
-        o(!1);
+  ...g
+}, k) {
+  const o = N(!1), [i, n] = T(!1);
+  s(() => (o.current = !0, () => {
+    o.current = !1;
+  }), []), s(() => {
+    if (i && o.current) {
+      const w = window.setTimeout(() => {
+        n(!1);
       }, 600);
-      return () => window.clearTimeout(g);
+      return () => window.clearTimeout(w);
     }
-  }, [e]);
-  function _() {
-    o(!0);
+  }, [i]);
+  function x() {
+    n(!0);
   }
-  return /* @__PURE__ */ t(y, { children: a && /* @__PURE__ */ t(j, { children: /* @__PURE__ */ i(R, { height: "100%", style: { position: "fixed" }, children: [
-    /* @__PURE__ */ t(s, { onClick: _, ...p, height: "100%" }),
+  const y = typeof r == "string" ? /* @__PURE__ */ t(b, { className: "tcn-confirm-description", hierarchy: "tertiary", children: r }) : r, _ = typeof e == "string" ? /* @__PURE__ */ t(v, { className: "tcn-confirm-title", emphasis: "strong", size: "sm", children: e }) : e;
+  return /* @__PURE__ */ t(S, { children: l && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ c(j, { height: "100%", style: { position: "fixed" }, children: [
+    /* @__PURE__ */ t(a, { onClick: x, ...d, height: "100%" }),
     /* @__PURE__ */ t(
       "div",
       {
-        ref: x,
-        className: c(m.confirm, u, "tcn-confirm"),
-        "data-shake": e,
-        ...k,
-        children: /* @__PURE__ */ i(T, { hAlign: "center", children: [
-          f,
-          /* @__PURE__ */ t(b, { className: "tcn-confirm-title", emphasis: "strong", size: "sm", children: h }),
-          /* @__PURE__ */ t(B, { className: "tcn-confirm-description", hierarchy: "tertiary", children: l }),
-          /* @__PURE__ */ t(N, { height: "16px" }),
+        ref: k,
+        className: m(f.confirm, u, "tcn-confirm"),
+        "data-shake": i,
+        ...g,
+        children: /* @__PURE__ */ c(R, { hAlign: "center", children: [
+          h,
+          _,
+          y,
+          /* @__PURE__ */ t(E, { height: "16px" }),
           /* @__PURE__ */ t(
-            s,
+            a,
             {
-              className: c(m.actions, "tcn-confirm-actions"),
+              className: m(f.actions, "tcn-confirm-actions"),
               height: "auto",
-              children: d
+              children: p
             }
           )
         ] })
@@ -65,6 +66,6 @@ import '../../confirm.css';const v = "_confirm_e53f865", z = "_shake_d5d9154", A
   ] }) }) });
 });
 export {
-  U as Confirm
+  X as Confirm
 };
 //# sourceMappingURL=confirm.js.map

package/dist/surfaces/confirm/confirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirm.js","sources":["../../../src/surfaces/confirm/confirm.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Portal } from '../../overlay/portal/portal.js';\nimport { BodyText, Title } from '../../typography/index.js';\nimport styles from './confirm.module.css';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\n\nexport interface ConfirmProps extends React.HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  graphic?: React.ReactNode;\n  title?: string;\n  description?: string;\n  actions?: React.ReactNode;\n  veilProps?: BoxProps;\n}\n\nexport const Confirm = React.forwardRef(function Confirm(\n  {\n    open,\n    graphic,\n    title,\n    description,\n    actions,\n    veilProps,\n    className,\n    ...props\n  }: ConfirmProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const isMounted = useRef(false);\n  const [shake, setShake] = useState(false);\n\n  useLayoutEffect(() => {\n    isMounted.current = true;\n    return () => {\n      isMounted.current = false;\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    if (shake && isMounted.current) {\n      const id = window.setTimeout(() => {\n        setShake(false);\n      }, 600);\n\n      return () => window.clearTimeout(id);\n    }\n  }, [shake]);\n\n  function shakeConfirm() {\n    setShake(true);\n  }\n\n  return (\n    <>\n      {open && (\n        <Portal>\n          <ZStack height=\"100%\" style={{ position: 'fixed' }}>\n            <Box onClick={shakeConfirm} {...veilProps} height=\"100%\"></Box>\n            <div\n              ref={ref}\n              className={clsx(styles.confirm, className, 'tcn-confirm')}\n              data-shake={shake}\n              {...props}\n            >\n              <VStack hAlign=\"center\">\n                {graphic}\n                <Title className=\"tcn-confirm-title\" emphasis=\"strong\" size=\"sm\">\n                  {title}\n                </Title>\n                <BodyText className=\"tcn-confirm-description\" hierarchy=\"tertiary\">\n                  {description}\n                </BodyText>\n                <Spacer height=\"16px\" />\n                <Box\n                  className={clsx(styles.actions, 'tcn-confirm-actions')}\n                  height=\"auto\"\n                >\n                  {actions}\n                </Box>\n              </VStack>\n            </div>\n          </ZStack>\n        </Portal>\n      )}\n    </>\n  );\n});\n"],"names":["Confirm","React","open","graphic","title","description","actions","veilProps","className","props","ref","isMounted","useRef","shake","setShake","useState","useLayoutEffect","id","shakeConfirm","jsx","Fragment","Portal","jsxs","ZStack","Box","clsx","styles","VStack","Title","BodyText","Spacer"],"mappings":";;;;;;;;;;;;;;;sHAmBaA,IAAUC,EAAM,WAAW,SACtC;AAAA,EACE,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAO,EAAK,GACxB,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAExC,EAAAC,EAAgB,OACdL,EAAU,UAAU,IACb,MAAM;AACX,IAAAA,EAAU,UAAU;AAAA,EACtB,IACC,CAAA,CAAE,GAELK,EAAgB,MAAM;AACpB,QAAIH,KAASF,EAAU,SAAS;AAC9B,YAAMM,IAAK,OAAO,WAAW,MAAM;AACjC,QAAAH,EAAS,EAAK;AAAA,MAChB,GAAG,GAAG;AAEN,aAAO,MAAM,OAAO,aAAaG,CAAE;AAAA,IACrC;AAAA,EACF,GAAG,CAACJ,CAAK,CAAC;AAEV,WAASK,IAAe;AACtB,IAAAJ,EAAS,EAAI;AAAA,EACf;AAEA,SACE,gBAAAK,EAAAC,GAAA,EACG,UAAAlB,KACC,gBAAAiB,EAACE,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAAO,QAAO,QAAO,OAAO,EAAE,UAAU,QAAA,GACvC,UAAA;AAAA,IAAA,gBAAAJ,EAACK,KAAI,SAASN,GAAe,GAAGX,GAAW,QAAO,QAAO;AAAA,IACzD,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAT;AAAA,QACA,WAAWe,EAAKC,EAAO,SAASlB,GAAW,aAAa;AAAA,QACxD,cAAYK;AAAA,QACX,GAAGJ;AAAA,QAEJ,UAAA,gBAAAa,EAACK,GAAA,EAAO,QAAO,UACZ,UAAA;AAAA,UAAAxB;AAAA,UACD,gBAAAgB,EAACS,KAAM,WAAU,qBAAoB,UAAS,UAAS,MAAK,MACzD,UAAAxB,EAAA,CACH;AAAA,4BACCyB,GAAA,EAAS,WAAU,2BAA0B,WAAU,YACrD,UAAAxB,GACH;AAAA,UACA,gBAAAc,EAACW,GAAA,EAAO,QAAO,OAAA,CAAO;AAAA,UACtB,gBAAAX;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKC,EAAO,SAAS,qBAAqB;AAAA,cACrD,QAAO;AAAA,cAEN,UAAApB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,GACF,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"confirm.js","sources":["../../../src/surfaces/confirm/confirm.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Portal } from '../../overlay/portal/portal.js';\nimport { BodyText, Title } from '../../typography/index.js';\nimport styles from './confirm.module.css';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\n\nexport interface ConfirmProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  open?: boolean;\n  graphic?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  veilProps?: BoxProps;\n}\n\nexport const Confirm = React.forwardRef(function Confirm(\n  {\n    open,\n    graphic,\n    title,\n    description,\n    actions,\n    veilProps,\n    className,\n    ...props\n  }: ConfirmProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const isMounted = useRef(false);\n  const [shake, setShake] = useState(false);\n\n  useLayoutEffect(() => {\n    isMounted.current = true;\n    return () => {\n      isMounted.current = false;\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    if (shake && isMounted.current) {\n      const id = window.setTimeout(() => {\n        setShake(false);\n      }, 600);\n\n      return () => window.clearTimeout(id);\n    }\n  }, [shake]);\n\n  function shakeConfirm() {\n    setShake(true);\n  }\n\n  const descriptionElement =\n    typeof description === 'string' ? (\n      <BodyText className=\"tcn-confirm-description\" hierarchy=\"tertiary\">\n        {description}\n      </BodyText>\n    ) : (\n      description\n    );\n\n  const titleElement =\n    typeof title === 'string' ? (\n      <Title className=\"tcn-confirm-title\" emphasis=\"strong\" size=\"sm\">\n        {title}\n      </Title>\n    ) : (\n      title\n    );\n\n  return (\n    <>\n      {open && (\n        <Portal>\n          <ZStack height=\"100%\" style={{ position: 'fixed' }}>\n            <Box onClick={shakeConfirm} {...veilProps} height=\"100%\"></Box>\n            <div\n              ref={ref}\n              className={clsx(styles.confirm, className, 'tcn-confirm')}\n              data-shake={shake}\n              {...props}\n            >\n              <VStack hAlign=\"center\">\n                {graphic}\n                {titleElement}\n                {descriptionElement}\n                <Spacer height=\"16px\" />\n                <Box\n                  className={clsx(styles.actions, 'tcn-confirm-actions')}\n                  height=\"auto\"\n                >\n                  {actions}\n                </Box>\n              </VStack>\n            </div>\n          </ZStack>\n        </Portal>\n      )}\n    </>\n  );\n});\n"],"names":["Confirm","React","open","graphic","title","description","actions","veilProps","className","props","ref","isMounted","useRef","shake","setShake","useState","useLayoutEffect","id","shakeConfirm","descriptionElement","jsx","BodyText","titleElement","Title","Fragment","Portal","jsxs","ZStack","Box","clsx","styles","VStack","Spacer"],"mappings":";;;;;;;;;;;;;;;sHAoBaA,IAAUC,EAAM,WAAW,SACtC;AAAA,EACE,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAO,EAAK,GACxB,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAExC,EAAAC,EAAgB,OACdL,EAAU,UAAU,IACb,MAAM;AACX,IAAAA,EAAU,UAAU;AAAA,EACtB,IACC,CAAA,CAAE,GAELK,EAAgB,MAAM;AACpB,QAAIH,KAASF,EAAU,SAAS;AAC9B,YAAMM,IAAK,OAAO,WAAW,MAAM;AACjC,QAAAH,EAAS,EAAK;AAAA,MAChB,GAAG,GAAG;AAEN,aAAO,MAAM,OAAO,aAAaG,CAAE;AAAA,IACrC;AAAA,EACF,GAAG,CAACJ,CAAK,CAAC;AAEV,WAASK,IAAe;AACtB,IAAAJ,EAAS,EAAI;AAAA,EACf;AAEA,QAAMK,IACJ,OAAOd,KAAgB,WACrB,gBAAAe,EAACC,GAAA,EAAS,WAAU,2BAA0B,WAAU,YACrD,UAAAhB,EAAA,CACH,IAEAA,GAGEiB,IACJ,OAAOlB,KAAU,WACf,gBAAAgB,EAACG,GAAA,EAAM,WAAU,qBAAoB,UAAS,UAAS,MAAK,MACzD,aACH,IAEAnB;AAGJ,SACE,gBAAAgB,EAAAI,GAAA,EACG,UAAAtB,KACC,gBAAAkB,EAACK,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAAO,QAAO,QAAO,OAAO,EAAE,UAAU,QAAA,GACvC,UAAA;AAAA,IAAA,gBAAAP,EAACQ,KAAI,SAASV,GAAe,GAAGX,GAAW,QAAO,QAAO;AAAA,IACzD,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,WAAWmB,EAAKC,EAAO,SAAStB,GAAW,aAAa;AAAA,QACxD,cAAYK;AAAA,QACX,GAAGJ;AAAA,QAEJ,UAAA,gBAAAiB,EAACK,GAAA,EAAO,QAAO,UACZ,UAAA;AAAA,UAAA5B;AAAA,UACAmB;AAAA,UACAH;AAAA,UACD,gBAAAC,EAACY,GAAA,EAAO,QAAO,OAAA,CAAO;AAAA,UACtB,gBAAAZ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKC,EAAO,SAAS,qBAAqB;AAAA,cACrD,QAAO;AAAA,cAEN,UAAAxB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,GACF,GAEJ;AAEJ,CAAC;"}

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;"}