@tcn/ui 0.1.1 → 0.3.0

package/dist/overlay/tethered/element_tethered.js

@@ -0,0 +1,33 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as f, useState as w, useLayoutEffect as m } from "react";
+import { Tethered as h } from "./tethered.js";
+function v(n) {
+  if (!n) return null;
+  const e = n.getBoundingClientRect();
+  return {
+    position: { x: e.left, y: e.top },
+    dimensions: {
+      width: e.width,
+      height: e.height
+    }
+  };
+}
+const E = f(function({ anchorElement: e, children: i, ...s }, c) {
+  const [d, u] = w(null);
+  return m(() => {
+    const r = e.current;
+    if (!r) return;
+    const t = () => {
+      u(v(r));
+    };
+    t();
+    const o = new ResizeObserver(t);
+    return o.observe(r), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
+      o.disconnect(), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
+    };
+  }, [e]), /* @__PURE__ */ l(h, { ref: c, anchor: d, ...s, children: i });
+});
+export {
+  E as ElementTethered
+};
+//# sourceMappingURL=element_tethered.js.map

package/dist/overlay/tethered/element_tethered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element_tethered.js","sources":["../../../src/overlay/tethered/element_tethered.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useState, type PropsWithChildren } from 'react';\nimport { type Rectangle } from '../../utils/index.js';\nimport { Tethered, type TetheredProps } from './tethered.js';\n\nexport interface ElementTetheredProps extends Omit<TetheredProps, 'anchor'> {\n  anchorElement: React.RefObject<HTMLElement>;\n}\n\nfunction getElementRect(element: HTMLElement | null): Rectangle | null {\n  if (!element) return null;\n\n  const clientRect = element.getBoundingClientRect();\n\n  return {\n    position: { x: clientRect.left, y: clientRect.top },\n    dimensions: {\n      width: clientRect.width,\n      height: clientRect.height,\n    },\n  };\n}\n\nexport const ElementTethered = forwardRef<\n  HTMLElement,\n  PropsWithChildren<ElementTetheredProps>\n>(function ElementTether({ anchorElement, children, ...rest }, ref) {\n  const [rectangle, setRectangle] = useState<Rectangle | null>(null);\n\n  useLayoutEffect(() => {\n    const element = anchorElement.current;\n    if (!element) return;\n\n    const update = () => {\n      setRectangle(getElementRect(element));\n    };\n\n    update();\n\n    // Track size/position changes of the anchor element via ResizeObserver\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(element);\n\n    // Track scroll-induced position changes\n    // TODO: might need to bypass react state here (setRectangle on scroll event) - to an OV or setting css variables/attributes directly\n    // This is a slight lag - not a huge deal, but could be improved.\n    window.addEventListener('scroll', update, true);\n    // Track window resize-induced position changes\n    window.addEventListener('resize', update);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('scroll', update, true);\n      window.removeEventListener('resize', update);\n    };\n  }, [anchorElement]);\n\n  return (\n    <Tethered ref={ref} anchor={rectangle} {...rest}>\n      {children}\n    </Tethered>\n  );\n});\n"],"names":["getElementRect","element","clientRect","ElementTethered","forwardRef","anchorElement","children","rest","ref","rectangle","setRectangle","useState","useLayoutEffect","update","resizeObserver","Tethered"],"mappings":";;;AAQA,SAASA,EAAeC,GAA+C;AACrE,MAAI,CAACA,EAAS,QAAO;AAErB,QAAMC,IAAaD,EAAQ,sBAAA;AAE3B,SAAO;AAAA,IACL,UAAU,EAAE,GAAGC,EAAW,MAAM,GAAGA,EAAW,IAAA;AAAA,IAC9C,YAAY;AAAA,MACV,OAAOA,EAAW;AAAA,MAClB,QAAQA,EAAW;AAAA,IAAA;AAAA,EACrB;AAEJ;AAEO,MAAMC,IAAkBC,EAG7B,SAAuB,EAAE,eAAAC,GAAe,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAClE,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA2B,IAAI;AAEjE,SAAAC,EAAgB,MAAM;AACpB,UAAMX,IAAUI,EAAc;AAC9B,QAAI,CAACJ,EAAS;AAEd,UAAMY,IAAS,MAAM;AACnB,MAAAH,EAAaV,EAAeC,CAAO,CAAC;AAAA,IACtC;AAEA,IAAAY,EAAA;AAGA,UAAMC,IAAiB,IAAI,eAAeD,CAAM;AAChD,WAAAC,EAAe,QAAQb,CAAO,GAK9B,OAAO,iBAAiB,UAAUY,GAAQ,EAAI,GAE9C,OAAO,iBAAiB,UAAUA,CAAM,GAEjC,MAAM;AACX,MAAAC,EAAe,WAAA,GACf,OAAO,oBAAoB,UAAUD,GAAQ,EAAI,GACjD,OAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAACR,CAAa,CAAC,qBAGfU,GAAA,EAAS,KAAAP,GAAU,QAAQC,GAAY,GAAGF,GACxC,UAAAD,GACH;AAEJ,CAAC;"}

package/dist/overlay/tethered/hooks/calculate_position.d.ts

@@ -0,0 +1,19 @@
+import { HorizontalTether, VerticalTether } from '../types.js';
+import { Rectangle, Dimensions } from '../../../utils/index.js';
+export interface CalculateTetheredPositionParams {
+    anchor: Rectangle;
+    tether: Rectangle;
+    direction: 'ltr' | 'rtl';
+    verticalAnchor: VerticalTether;
+    verticalOrigin: VerticalTether;
+    horizontalAnchor: HorizontalTether;
+    horizontalOrigin: HorizontalTether;
+    verticalOffset: number;
+    horizontalOffset: number;
+    viewport: Dimensions;
+}
+export declare const calculateTetheredPosition: ({ anchor, tether, direction, verticalAnchor, verticalOrigin, horizontalAnchor, horizontalOrigin, verticalOffset, horizontalOffset, viewport, }: CalculateTetheredPositionParams) => {
+    top: number;
+    left: number;
+};
+//# sourceMappingURL=calculate_position.d.ts.map

package/dist/overlay/tethered/hooks/calculate_position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculate_position.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/calculate_position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,UAAU,CAAC;CACtB;AAED,eAAO,MAAM,yBAAyB,GAAI,gJAWvC,+BAA+B;;;CAiFjC,CAAC"}

package/dist/overlay/tethered/hooks/calculate_position.js

@@ -0,0 +1,43 @@
+const k = ({
+  anchor: d,
+  tether: e,
+  direction: a,
+  verticalAnchor: f,
+  verticalOrigin: h,
+  horizontalAnchor: b,
+  horizontalOrigin: w,
+  verticalOffset: g,
+  horizontalOffset: n,
+  viewport: m
+}) => {
+  const c = a === "rtl";
+  let i = d.position.y, s = d.position.x;
+  switch (f) {
+    case "top":
+      i += g;
+      break;
+    case "center":
+      i += d.dimensions.height / 2;
+      break;
+    case "bottom":
+      i += d.dimensions.height - g;
+      break;
+  }
+  switch (h) {
+    case "top":
+      break;
+    case "center":
+      i -= e.dimensions.height / 2;
+      break;
+    case "bottom":
+      i -= e.dimensions.height;
+      break;
+  }
+  b === "start" ? s += c ? d.dimensions.width + n : n : b === "center" ? s += d.dimensions.width / 2 : b === "end" && (s += c ? -n : d.dimensions.width + n);
+  let t = w;
+  return c && (w === "start" ? t = "end" : w === "end" && (t = "start")), t === "start" || (t === "center" ? s -= e.dimensions.width / 2 : t === "end" && (s -= e.dimensions.width)), s + e.dimensions.width > m.width && (s = m.width - e.dimensions.width), s < 0 && (s = 0), i + e.dimensions.height > m.height && (i = m.height - e.dimensions.height), i < 0 && (i = 0), { top: i, left: s };
+};
+export {
+  k as calculateTetheredPosition
+};
+//# sourceMappingURL=calculate_position.js.map

package/dist/overlay/tethered/hooks/calculate_position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculate_position.js","sources":["../../../../src/overlay/tethered/hooks/calculate_position.ts"],"sourcesContent":["import type { HorizontalTether, VerticalTether } from '../types.js';\nimport type { Rectangle } from '../../../utils/index.js';\nimport type { Dimensions } from '../../../utils/index.js';\n\nexport interface CalculateTetheredPositionParams {\n  anchor: Rectangle;\n  tether: Rectangle;\n  direction: 'ltr' | 'rtl';\n  verticalAnchor: VerticalTether;\n  verticalOrigin: VerticalTether;\n  horizontalAnchor: HorizontalTether;\n  horizontalOrigin: HorizontalTether;\n  verticalOffset: number;\n  horizontalOffset: number;\n  viewport: Dimensions;\n}\n\nexport const calculateTetheredPosition = ({\n  anchor,\n  tether,\n  direction,\n  verticalAnchor,\n  verticalOrigin,\n  horizontalAnchor,\n  horizontalOrigin,\n  verticalOffset,\n  horizontalOffset,\n  viewport,\n}: CalculateTetheredPositionParams) => {\n  const isRtl = direction === 'rtl';\n\n  let top = anchor.position.y;\n  let left = anchor.position.x;\n\n  // Calculate vertical position\n  switch (verticalAnchor) {\n    case 'top':\n      top += verticalOffset;\n      break;\n    case 'center':\n      top += anchor.dimensions.height / 2;\n      break;\n    case 'bottom':\n      top += anchor.dimensions.height - verticalOffset;\n      break;\n  }\n\n  switch (verticalOrigin) {\n    case 'top':\n      break;\n    case 'center':\n      top -= tether.dimensions.height / 2;\n      break;\n    case 'bottom':\n      top -= tether.dimensions.height;\n      break;\n  }\n\n  // Calculate horizontal position with direction sensitivity\n  if (horizontalAnchor === 'start') {\n    left += isRtl ? anchor.dimensions.width + horizontalOffset : horizontalOffset;\n  } else if (horizontalAnchor === 'center') {\n    left += anchor.dimensions.width / 2;\n  } else if (horizontalAnchor === 'end') {\n    left += isRtl ? -horizontalOffset : anchor.dimensions.width + horizontalOffset;\n  }\n\n  // Adjust the origin based on RTL direction\n  let adjustedHorizontalOrigin = horizontalOrigin;\n  if (isRtl) {\n    if (horizontalOrigin === 'start') {\n      adjustedHorizontalOrigin = 'end';\n    } else if (horizontalOrigin === 'end') {\n      adjustedHorizontalOrigin = 'start';\n    }\n  }\n\n  // Apply adjusted origin to the position calculation\n  if (adjustedHorizontalOrigin === 'start') {\n    // No adjustment needed\n  } else if (adjustedHorizontalOrigin === 'center') {\n    left -= tether.dimensions.width / 2;\n  } else if (adjustedHorizontalOrigin === 'end') {\n    left -= tether.dimensions.width;\n  }\n\n  // Ensure the popover stays within the viewport\n  // Prevent overflow to the right\n  if (left + tether.dimensions.width > viewport.width) {\n    left = viewport.width - tether.dimensions.width;\n  }\n\n  // Prevent overflow to the left\n  if (left < 0) {\n    left = 0;\n  }\n\n  // Prevent overflow to the bottom\n  // FIXME: doesn't account for padding.\n  if (top + tether.dimensions.height > viewport.height) {\n    top = viewport.height - tether.dimensions.height;\n  }\n\n  // Prevent overflow to the top\n  if (top < 0) {\n    top = 0;\n  }\n\n  return { top, left };\n};\n"],"names":["calculateTetheredPosition","anchor","tether","direction","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","viewport","isRtl","top","left","adjustedHorizontalOrigin"],"mappings":"AAiBO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AACF,MAAuC;AACrC,QAAMC,IAAQR,MAAc;AAE5B,MAAIS,IAAMX,EAAO,SAAS,GACtBY,IAAOZ,EAAO,SAAS;AAG3B,UAAQG,GAAA;AAAA,IACN,KAAK;AACH,MAAAQ,KAAOJ;AACP;AAAA,IACF,KAAK;AACH,MAAAI,KAAOX,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAW,KAAOX,EAAO,WAAW,SAASO;AAClC;AAAA,EAAA;AAGJ,UAAQH,GAAA;AAAA,IACN,KAAK;AACH;AAAA,IACF,KAAK;AACH,MAAAO,KAAOV,EAAO,WAAW,SAAS;AAClC;AAAA,IACF,KAAK;AACH,MAAAU,KAAOV,EAAO,WAAW;AACzB;AAAA,EAAA;AAIJ,EAAII,MAAqB,UACvBO,KAAQF,IAAQV,EAAO,WAAW,QAAQQ,IAAmBA,IACpDH,MAAqB,WAC9BO,KAAQZ,EAAO,WAAW,QAAQ,IACzBK,MAAqB,UAC9BO,KAAQF,IAAQ,CAACF,IAAmBR,EAAO,WAAW,QAAQQ;AAIhE,MAAIK,IAA2BP;AAC/B,SAAII,MACEJ,MAAqB,UACvBO,IAA2B,QAClBP,MAAqB,UAC9BO,IAA2B,WAK3BA,MAA6B,YAEtBA,MAA6B,WACtCD,KAAQX,EAAO,WAAW,QAAQ,IACzBY,MAA6B,UACtCD,KAAQX,EAAO,WAAW,SAKxBW,IAAOX,EAAO,WAAW,QAAQQ,EAAS,UAC5CG,IAAOH,EAAS,QAAQR,EAAO,WAAW,QAIxCW,IAAO,MACTA,IAAO,IAKLD,IAAMV,EAAO,WAAW,SAASQ,EAAS,WAC5CE,IAAMF,EAAS,SAASR,EAAO,WAAW,SAIxCU,IAAM,MACRA,IAAM,IAGD,EAAE,KAAAA,GAAK,MAAAC,EAAA;AAChB;"}

package/dist/overlay/tethered/hooks/useTether.d.ts

@@ -0,0 +1,19 @@
+import { HorizontalTether, VerticalTether } from '../types.js';
+import { Rectangle } from '../../../utils/index.js';
+export interface UseTetherParams {
+    anchor: Rectangle | null;
+    verticalAnchor?: VerticalTether;
+    verticalOrigin?: VerticalTether;
+    horizontalOrigin?: HorizontalTether;
+    horizontalAnchor?: HorizontalTether;
+    verticalOffset?: number;
+    horizontalOffset?: number;
+}
+export declare function useTether({ anchor, verticalAnchor, verticalOrigin, horizontalAnchor, horizontalOrigin, verticalOffset, horizontalOffset, }: UseTetherParams): {
+    position: {
+        top: number;
+        left: number;
+    };
+    tetherRef: import('react').RefObject<HTMLDivElement>;
+};
+//# sourceMappingURL=useTether.d.ts.map

package/dist/overlay/tethered/hooks/useTether.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTether.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGzD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,cAAyB,EACzB,cAAsB,EACtB,gBAA0B,EAC1B,gBAA0B,EAC1B,cAAkB,EAClB,gBAAoB,GACrB,EAAE,eAAe;;;;;;EA6DjB"}

package/dist/overlay/tethered/hooks/useTether.js

@@ -0,0 +1,61 @@
+import { useState as h, useRef as m, useCallback as l, useLayoutEffect as g } from "react";
+import { calculateTetheredPosition as y } from "./calculate_position.js";
+function E({
+  anchor: n,
+  verticalAnchor: r = "bottom",
+  verticalOrigin: s = "top",
+  horizontalAnchor: u = "start",
+  horizontalOrigin: d = "start",
+  verticalOffset: p = 0,
+  horizontalOffset: w = 0
+}) {
+  const [o, c] = h({ top: 0, left: 0 }), i = m(null), f = l(() => {
+    if (!n || !i.current) return;
+    const t = i.current.getBoundingClientRect(), e = getComputedStyle(i.current);
+    return y({
+      anchor: n,
+      tether: {
+        dimensions: {
+          width: t.width,
+          height: t.height
+        },
+        position: {
+          x: t.left,
+          y: t.top
+        }
+      },
+      direction: e.direction,
+      verticalAnchor: r,
+      verticalOrigin: s,
+      horizontalAnchor: u,
+      horizontalOrigin: d,
+      verticalOffset: p,
+      horizontalOffset: w,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight
+      }
+    });
+  }, [
+    n,
+    r,
+    s,
+    u,
+    d,
+    p,
+    w
+  ]);
+  return g(() => {
+    const t = () => {
+      const e = f();
+      e && (o.top !== e.top || o.left !== e.left) && c(e);
+    };
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
+    };
+  }), { position: o, tetherRef: i };
+}
+export {
+  E as useTether
+};
+//# sourceMappingURL=useTether.js.map

package/dist/overlay/tethered/hooks/useTether.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTether.js","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport { type Rectangle } from '../../../utils/index.js';\nimport { calculateTetheredPosition } from './calculate_position.js';\n\nexport interface UseTetherParams {\n  anchor: Rectangle | null;\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport function useTether({\n  anchor,\n  verticalAnchor = 'bottom',\n  verticalOrigin = 'top',\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  verticalOffset = 0,\n  horizontalOffset = 0,\n}: UseTetherParams) {\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const tetherRef = useRef<HTMLDivElement>(null);\n\n  const getPosition = useCallback(() => {\n    if (!anchor || !tetherRef.current) return;\n\n    const tether = tetherRef.current.getBoundingClientRect();\n    const computedStyle = getComputedStyle(tetherRef.current);\n\n    return calculateTetheredPosition({\n      anchor: anchor,\n      tether: {\n        dimensions: {\n          width: tether.width,\n          height: tether.height,\n        },\n        position: {\n          x: tether.left,\n          y: tether.top,\n        },\n      },\n      direction: computedStyle.direction as 'ltr' | 'rtl',\n      verticalAnchor: verticalAnchor,\n      verticalOrigin: verticalOrigin,\n      horizontalAnchor: horizontalAnchor,\n      horizontalOrigin: horizontalOrigin,\n      verticalOffset: verticalOffset,\n      horizontalOffset: horizontalOffset,\n      viewport: {\n        width: window.innerWidth,\n        height: window.innerHeight,\n      },\n    });\n  }, [\n    anchor,\n    verticalAnchor,\n    verticalOrigin,\n    horizontalAnchor,\n    horizontalOrigin,\n    verticalOffset,\n    horizontalOffset,\n  ]);\n\n  // Update the position when the window is resized\n  useLayoutEffect(() => {\n    const update = () => {\n      const newPosition = getPosition();\n      if (!newPosition) return;\n      if (position.top !== newPosition.top || position.left !== newPosition.left) {\n        setPosition(newPosition);\n      }\n    };\n    update();\n    window.addEventListener('resize', update);\n    return () => {\n      window.removeEventListener('resize', update);\n    };\n  });\n\n  return { position, tetherRef };\n}\n"],"names":["useTether","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","position","setPosition","useState","tetherRef","useRef","getPosition","useCallback","tether","computedStyle","calculateTetheredPosition","useLayoutEffect","update","newPosition"],"mappings":";;AAeO,SAASA,EAAU;AAAA,EACxB,QAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AACrB,GAAoB;AAClB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GACtDC,IAAYC,EAAuB,IAAI,GAEvCC,IAAcC,EAAY,MAAM;AACpC,QAAI,CAACb,KAAU,CAACU,EAAU,QAAS;AAEnC,UAAMI,IAASJ,EAAU,QAAQ,sBAAA,GAC3BK,IAAgB,iBAAiBL,EAAU,OAAO;AAExD,WAAOM,EAA0B;AAAA,MAC/B,QAAAhB;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,OAAOc,EAAO;AAAA,UACd,QAAQA,EAAO;AAAA,QAAA;AAAA,QAEjB,UAAU;AAAA,UACR,GAAGA,EAAO;AAAA,UACV,GAAGA,EAAO;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,WAAWC,EAAc;AAAA,MACzB,gBAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,UAAU;AAAA,QACR,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA;AAAA,IACjB,CACD;AAAA,EACH,GAAG;AAAA,IACDN;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,CACD;AAGD,SAAAW,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,YAAMC,IAAcP,EAAA;AACpB,MAAKO,MACDZ,EAAS,QAAQY,EAAY,OAAOZ,EAAS,SAASY,EAAY,SACpEX,EAAYW,CAAW;AAAA,IAE3B;AACA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAM,GACjC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,CAAC,GAEM,EAAE,UAAAX,GAAU,WAAAG,EAAA;AACrB;"}

package/dist/overlay/tethered/tethered.d.ts

@@ -0,0 +1,20 @@
+import { HorizontalTether, VerticalTether } from './types.js';
+import { ZStackProps } from '../../stacks/index.js';
+import { Rectangle } from '../../utils/index.js';
+export interface BaseTetheredOwnProps {
+    verticalAnchor?: VerticalTether;
+    verticalOrigin?: VerticalTether;
+    horizontalOrigin?: HorizontalTether;
+    horizontalAnchor?: HorizontalTether;
+    verticalOffset?: number;
+    horizontalOffset?: number;
+}
+export interface TetheredOwnProp extends BaseTetheredOwnProps {
+    anchor: Rectangle | null;
+}
+export interface TetheredProps extends TetheredOwnProp, ZStackProps {
+}
+export declare const Tethered: import('react').ForwardRefExoticComponent<TetheredProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+//# sourceMappingURL=tethered.d.ts.map

package/dist/overlay/tethered/tethered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/tethered.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAQlE,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;CAC1B;AACD,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,WAAW;CAAG;AAEtE,eAAO,MAAM,QAAQ;;+CA8CpB,CAAC"}

package/dist/overlay/tethered/tethered.js

@@ -0,0 +1,59 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as R } from "react";
+import "../../stacks/box/box.js";
+import "../../stacks/h_collapsible_box.js";
+import "../../stacks/h_stack.js";
+import "../../stacks/spacer.js";
+import "../../stacks/v_collapsible_box.js";
+import "../../stacks/v_stack.js";
+import { ZStack as b } from "../../stacks/z_stack.js";
+import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
+import "../../utils/scroll_away_listener.js";
+import { useForkRef as k } from "../../utils/hooks/use_fork_ref.js";
+import "../../utils/hooks/use_resize_observer.js";
+import { useTether as T } from "./hooks/useTether.js";
+import { clsx as y } from "clsx";
+import { Portal as _ } from "../portal/portal.js";
+import '../../tethered.css';const $ = "_tethered_44058d8", j = { tethered: $ }, I = R(
+  function({
+    anchor: r,
+    verticalAnchor: e = "bottom",
+    verticalOrigin: m = "top",
+    horizontalAnchor: p = "start",
+    horizontalOrigin: i = "start",
+    verticalOffset: s = 0,
+    horizontalOffset: f = 0,
+    children: c,
+    style: n,
+    className: d,
+    ...a
+  }, h) {
+    const { position: t, tetherRef: l } = T({
+      anchor: r,
+      verticalAnchor: e,
+      verticalOrigin: m,
+      horizontalAnchor: p,
+      horizontalOrigin: i,
+      verticalOffset: s,
+      horizontalOffset: f
+    }), u = k(h, l), x = {
+      "--tethered-top": `${t.top}px`,
+      "--tethered-left": `${t.left}px`
+    };
+    return /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(
+      b,
+      {
+        ref: u,
+        className: y(j.tethered, d),
+        style: { position: "absolute", ...x, ...n },
+        ...a,
+        children: c
+      }
+    ) });
+  }
+);
+export {
+  I as Tethered
+};
+//# sourceMappingURL=tethered.js.map

package/dist/overlay/tethered/tethered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tethered.js","sources":["../../../src/overlay/tethered/tethered.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport type { HorizontalTether, VerticalTether } from './types.js';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { useForkRef, type Rectangle } from '../../utils/index.js';\nimport { useTether } from './hooks/useTether.js';\nimport { clsx } from 'clsx';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './tethered.module.css';\n\nexport interface BaseTetheredOwnProps {\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport interface TetheredOwnProp extends BaseTetheredOwnProps {\n  anchor: Rectangle | null;\n}\nexport interface TetheredProps extends TetheredOwnProp, ZStackProps {}\n\nexport const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(\n  function Tethered(\n    {\n      anchor,\n      verticalAnchor = 'bottom',\n      verticalOrigin = 'top',\n      horizontalAnchor = 'start',\n      horizontalOrigin = 'start',\n      verticalOffset = 0,\n      horizontalOffset = 0,\n      children,\n      style,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    const { position, tetherRef } = useTether({\n      anchor,\n      verticalAnchor,\n      verticalOrigin,\n      horizontalAnchor,\n      horizontalOrigin,\n      verticalOffset,\n      horizontalOffset,\n    });\n    const forkedRef = useForkRef(ref, tetherRef);\n\n    const cssVariables = {\n      '--tethered-top': `${position.top}px`,\n      '--tethered-left': `${position.left}px`,\n    };\n\n    return (\n      <Portal>\n        <ZStack\n          ref={forkedRef}\n          className={clsx(styles.tethered, className)}\n          style={{ position: 'absolute', ...cssVariables, ...style }}\n          {...rest}\n        >\n          {children}\n        </ZStack>\n      </Portal>\n    );\n  }\n);\n"],"names":["Tethered","forwardRef","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","children","style","className","rest","ref","position","tetherRef","useTether","forkedRef","useForkRef","cssVariables","Portal","jsx","ZStack","clsx","styles"],"mappings":";;;;;;;;;;;;;;;;;oDAyBaA,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,QAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,EAAE,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACxC,QAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GACKS,IAAYC,EAAWL,GAAKE,CAAS,GAErCI,IAAe;AAAA,MACnB,kBAAkB,GAAGL,EAAS,GAAG;AAAA,MACjC,mBAAmB,GAAGA,EAAS,IAAI;AAAA,IAAA;AAGrC,6BACGM,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAUb,CAAS;AAAA,QAC1C,OAAO,EAAE,UAAU,YAAY,GAAGQ,GAAc,GAAGT,EAAA;AAAA,QAClD,GAAGE;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;"}

package/dist/overlay/tethered/types.d.ts

@@ -0,0 +1,3 @@
+export type VerticalTether = 'top' | 'center' | 'bottom';
+export type HorizontalTether = 'start' | 'center' | 'end';
+//# sourceMappingURL=types.d.ts.map

package/dist/overlay/tethered/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACzD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC"}

package/dist/overlay/tethered/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/overlay/tethered/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/popper.css

@@ -1 +1 @@
-._popover_069b323{display:inline-block;position:absolute}._popover-veil_2f5f985{position:fixed;inset:0;background-color:#0000}
+._popover_fcfb66a{display:inline-block;position:absolute}._popover-veil_c56df66{position:fixed;inset:0;background-color:#0000}

package/dist/scaffold.css

@@ -0,0 +1 @@
+._scaffold-stack_8f97a6a{width:100%;height:100%;overflow:auto}

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

@@ -34,7 +34,7 @@ export interface BoxProps extends HTMLAttributes<HTMLElement> {
     horizontalHandleProps?: HandleProps;
     verticalHandleProps?: HandleProps;
     onWidthResize?: (width: number) => void;
-    onHeightResize?: (width: number) => void;
+    onHeightResize?: (height: number) => void;
     onWidthResizeEnd?: (width: number) => void;
     onHeightResizeEnd?: (width: number) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,cAAc,EAAU,MAAM,OAAO,CAAC;AAWrE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,iBAAiB,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvD,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,GAAG,8EAsKd,CAAC"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,cAAc,EAAU,MAAM,OAAO,CAAC;AAWrE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,iBAAiB,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvD,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,MAAM,KAEV,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,MAAM,KAEX,IAAI,CAAC;IACV,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,GAAG,8EAsKd,CAAC"}

package/dist/stacks/box/box.js

@@ -1,6 +1,6 @@
 import { jsxs as h, jsx as a } from "react/jsx-runtime";
-import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import O, { useRef as oo } from "react";
 import { useForkRef as ro } from "../../utils/hooks/use_fork_ref.js";

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

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\nimport { clsx } from 'clsx';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport styles from '../stack.module.css';\nimport { HandleProps } from './handle_props.js';\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement> {\n  as?: string;\n  style?: React.CSSProperties;\n  className?: string;\n  children?: React.ReactNode;\n  width?: 'default' | 'flex' | 'auto' | string | number;\n  minWidth?: CSSProperties['minWidth'];\n  maxWidth?: CSSProperties['maxWidth'];\n  height?: 'default' | 'flex' | 'auto' | string | number;\n  minHeight?: CSSProperties['minHeight'];\n  maxHeight?: CSSProperties['maxHeight'];\n  zIndex?: number;\n  padding?: CSSProperties['padding'];\n  paddingInline?: CSSProperties['paddingInline'];\n  paddingBlock?: CSSProperties['paddingBlock'];\n  margin?: CSSProperties['margin'];\n  marginBlock?: CSSProperties['marginBlock'];\n  marginInline?: CSSProperties['marginInline'];\n  marginInlineStart?: CSSProperties['marginInlineStart'];\n  marginInlineEnd?: CSSProperties['marginInlineEnd'];\n  marginTop?: CSSProperties['marginTop'];\n  marginBottom?: CSSProperties['marginBottom'];\n  overflow?: React.CSSProperties['overflow'];\n  overflowX?: React.CSSProperties['overflowX'];\n  overflowY?: React.CSSProperties['overflowY'];\n  enableResizeOnTop?: boolean;\n  enableResizeOnEnd?: boolean;\n  enableResizeOnBottom?: boolean;\n  enableResizeOnStart?: boolean;\n  enableResizeOnLeft?: boolean;\n  enableResizeOnRight?: boolean;\n  horizontalHandleProps?: HandleProps;\n  verticalHandleProps?: HandleProps;\n  onWidthResize?: (width: number) => void;\n  onHeightResize?: (width: number) => void;\n  onWidthResizeEnd?: (width: number) => void;\n  onHeightResizeEnd?: (width: number) => void;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    style,\n    className,\n    as = 'div',\n    children,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    zIndex,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    enableResizeOnTop = false,\n    enableResizeOnEnd = false,\n    enableResizeOnBottom = false,\n    enableResizeOnStart = false,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    onWidthResize,\n    onHeightResize,\n    onWidthResizeEnd,\n    onHeightResizeEnd,\n    horizontalHandleProps,\n    verticalHandleProps,\n    ...otherProps\n  }: BoxProps,\n  ref\n) {\n  const As = as as React.ElementType;\n  const boxRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, boxRef);\n  const hasHorizontalResize =\n    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n  const cannotHorizontalFlex = hasHorizontalResize;\n  const cannotVerticalFlex = hasVerticalResize;\n  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n  const isFlexing =\n    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n  if (warnHorizontalFlex) {\n    width = '100%';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  if (warnVerticalFlex) {\n    height = 'auto';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  const propStyles = {\n    width: !isCustomSizeProp(width) ? width : undefined,\n    minWidth,\n    maxWidth,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    zIndex,\n  };\n\n  return (\n    <As\n      data-enabled-resize-on-start={String(enableResizeOnStart)}\n      data-enabled-resize-on-end={String(enableResizeOnEnd)}\n      data-enabled-resize-on-top={String(enableResizeOnTop)}\n      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n      data_enabled-resize-on-left={String(enableResizeOnLeft)}\n      data_enabled-resize-on-right={String(enableResizeOnRight)}\n      data-height={height}\n      data-width={width}\n      ref={forkedRef}\n      style={{\n        ...removeUndefinedProperties(propStyles),\n        ...style,\n      }}\n      className={clsx(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        'box'\n      )}\n      {...otherProps}\n    >\n      {children}\n      {enableResizeOnTop && (\n        <TopResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnBottom && (\n        <BottomResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnStart && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnEnd && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnLeft && (\n        <LeftResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnRight && (\n        <RightResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n    </As>\n  );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":"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"}
+{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\nimport { clsx } from 'clsx';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport styles from '../stack.module.css';\nimport { HandleProps } from './handle_props.js';\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement> {\n  as?: string;\n  style?: React.CSSProperties;\n  className?: string;\n  children?: React.ReactNode;\n  width?: 'default' | 'flex' | 'auto' | string | number;\n  minWidth?: CSSProperties['minWidth'];\n  maxWidth?: CSSProperties['maxWidth'];\n  height?: 'default' | 'flex' | 'auto' | string | number;\n  minHeight?: CSSProperties['minHeight'];\n  maxHeight?: CSSProperties['maxHeight'];\n  zIndex?: number;\n  padding?: CSSProperties['padding'];\n  paddingInline?: CSSProperties['paddingInline'];\n  paddingBlock?: CSSProperties['paddingBlock'];\n  margin?: CSSProperties['margin'];\n  marginBlock?: CSSProperties['marginBlock'];\n  marginInline?: CSSProperties['marginInline'];\n  marginInlineStart?: CSSProperties['marginInlineStart'];\n  marginInlineEnd?: CSSProperties['marginInlineEnd'];\n  marginTop?: CSSProperties['marginTop'];\n  marginBottom?: CSSProperties['marginBottom'];\n  overflow?: React.CSSProperties['overflow'];\n  overflowX?: React.CSSProperties['overflowX'];\n  overflowY?: React.CSSProperties['overflowY'];\n  enableResizeOnTop?: boolean;\n  enableResizeOnEnd?: boolean;\n  enableResizeOnBottom?: boolean;\n  enableResizeOnStart?: boolean;\n  enableResizeOnLeft?: boolean;\n  enableResizeOnRight?: boolean;\n  horizontalHandleProps?: HandleProps;\n  verticalHandleProps?: HandleProps;\n  onWidthResize?: (\n    width: number\n    // origin: 'left' | 'right'\n  ) => void;\n  onHeightResize?: (\n    height: number\n    // origin: 'top' | 'bottom'\n  ) => void;\n  onWidthResizeEnd?: (width: number) => void;\n  onHeightResizeEnd?: (width: number) => void;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    style,\n    className,\n    as = 'div',\n    children,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    zIndex,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    enableResizeOnTop = false,\n    enableResizeOnEnd = false,\n    enableResizeOnBottom = false,\n    enableResizeOnStart = false,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    onWidthResize,\n    onHeightResize,\n    onWidthResizeEnd,\n    onHeightResizeEnd,\n    horizontalHandleProps,\n    verticalHandleProps,\n    ...otherProps\n  }: BoxProps,\n  ref\n) {\n  const As = as as React.ElementType;\n  const boxRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, boxRef);\n  const hasHorizontalResize =\n    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n  const cannotHorizontalFlex = hasHorizontalResize;\n  const cannotVerticalFlex = hasVerticalResize;\n  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n  const isFlexing =\n    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n  if (warnHorizontalFlex) {\n    width = '100%';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  if (warnVerticalFlex) {\n    height = 'auto';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  const propStyles = {\n    width: !isCustomSizeProp(width) ? width : undefined,\n    minWidth,\n    maxWidth,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    zIndex,\n  };\n\n  return (\n    <As\n      data-enabled-resize-on-start={String(enableResizeOnStart)}\n      data-enabled-resize-on-end={String(enableResizeOnEnd)}\n      data-enabled-resize-on-top={String(enableResizeOnTop)}\n      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n      data_enabled-resize-on-left={String(enableResizeOnLeft)}\n      data_enabled-resize-on-right={String(enableResizeOnRight)}\n      data-height={height}\n      data-width={width}\n      ref={forkedRef}\n      style={{\n        ...removeUndefinedProperties(propStyles),\n        ...style,\n      }}\n      className={clsx(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        'box'\n      )}\n      {...otherProps}\n    >\n      {children}\n      {enableResizeOnTop && (\n        <TopResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnBottom && (\n        <BottomResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnStart && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnEnd && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnLeft && (\n        <LeftResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnRight && (\n        <RightResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n    </As>\n  );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":"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"}

package/dist/stacks/h_collapsible_box.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import t, { useLayoutEffect as p } from "react";
-import "../utils/focus_redirect.js";
 import "../utils/click_away_listener.js";
+import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
 import { useForkRef as d } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";

package/dist/stacks/v_collapsible_box.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import t, { useLayoutEffect as p } from "react";
-import "../utils/focus_redirect.js";
 import "../utils/click_away_listener.js";
+import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
 import { useForkRef as u } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";

package/dist/surfaces/card/card.d.ts

@@ -1,6 +1,6 @@
-import { VStackProps } from '../../stacks/v_stack.js';
 import { default as React } from 'react';
-export interface CardProps extends Omit<VStackProps, 'as' | 'children'> {
+import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+export interface CardProps extends Omit<ScaffoldProps, 'as' | 'children'> {
     children?: React.ReactNode;
 }
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/surfaces/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,+EASf,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/surfaces/card/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAElF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,UAAU,CAAC;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,+EASf,CAAC"}

package/dist/surfaces/card/card.js

@@ -1,11 +1,11 @@
-import { jsx as c } from "react/jsx-runtime";
-import { VStack as m } from "../../stacks/v_stack.js";
-import { clsx as f } from "clsx";
-import s from "react";
-const x = s.forwardRef(function({ children: r, className: o, ...t }, a) {
-  return /* @__PURE__ */ c(m, { ref: a, as: "section", className: f(o, "tcn-card"), ...t, children: r });
+import { jsx as f } from "react/jsx-runtime";
+import { clsx as a } from "clsx";
+import m from "react";
+import { Scaffold as e } from "../../layouts/scaffold/scaffold.js";
+const l = m.forwardRef(function({ children: r, className: o, ...t }, c) {
+  return /* @__PURE__ */ f(e, { ref: c, className: a(o, "tcn-surface", "tcn-card"), ...t, children: r });
 });
 export {
-  x as Card
+  l as Card
 };
 //# sourceMappingURL=card.js.map

package/dist/surfaces/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../src/surfaces/card/card.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface CardProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const Card = React.forwardRef<HTMLElement, CardProps>(function Card(\n  { children, className, ...props }: CardProps,\n  ref\n) {\n  return (\n    <VStack ref={ref} as=\"section\" className={clsx(className, 'tcn-card')} {...props}>\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Card","React","children","className","props","ref","jsx","VStack","clsx"],"mappings":";;;;AAQO,MAAMA,IAAOC,EAAM,WAAmC,SAC3D,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAO,KAAAF,GAAU,IAAG,WAAU,WAAWG,EAAKL,GAAW,UAAU,GAAI,GAAGC,GACxE,UAAAF,EAAA,CACH;AAEJ,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../../src/surfaces/card/card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\n\nexport interface CardProps extends Omit<ScaffoldProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const Card = React.forwardRef<HTMLElement, CardProps>(function Card(\n  { children, className, ...props }: CardProps,\n  ref\n) {\n  return (\n    <Scaffold ref={ref} className={clsx(className, 'tcn-surface', 'tcn-card')} {...props}>\n      {children}\n    </Scaffold>\n  );\n});\n"],"names":["Card","React","children","className","props","ref","jsx","Scaffold","clsx"],"mappings":";;;;AAQO,MAAMA,IAAOC,EAAM,WAAmC,SAC3D,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAS,KAAAF,GAAU,WAAWG,EAAKL,GAAW,eAAe,UAAU,GAAI,GAAGC,GAC5E,UAAAF,EAAA,CACH;AAEJ,CAAC;"}

package/dist/surfaces/index.d.ts

@@ -1,15 +1,17 @@
 export * from './alert/alert.js';
 export * from './card/card.js';
 export * from './confirm/confirm.js';
-export * from './modal/modal.js';
 export * from './page/h_page.js';
 export * from './page/v_page.js';
 export * from './panel/h_panel.js';
 export * from './panel/v_panel.js';
 export * from './popover/popover.js';
-export * from './window/window.js';
 export * from './drawers/drawer_bottom/drawer_bottom.js';
 export * from './drawers/drawer_top/drawer_top.js';
 export * from './drawers/drawer_start/drawer_start.js';
 export * from './drawers/drawer_end/drawer_end.js';
+export { Window, type WindowProps } from './window/window.js';
+export { Modal, type ModalProps } from './modal/modal.js';
+export { Tooltip, type TooltipProps } from './tooltip/tooltip.js';
+export { PopConfirm, type PopConfirmProps } from './pop_confirm/pop_confirm.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/surfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0CAA0C,CAAC;AACzD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/surfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0CAA0C,CAAC;AACzD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/surfaces/index.js

@@ -1,31 +1,35 @@
 import { Alert as e } from "./alert/alert.js";
-import { Card as m } from "./card/card.js";
+import { Card as p } from "./card/card.js";
 import { Confirm as f } from "./confirm/confirm.js";
-import { Modal as a } from "./modal/modal.js";
-import { HPage as w } from "./page/h_page.js";
-import { VPage as d } from "./page/v_page.js";
-import { HPanel as D } from "./panel/h_panel.js";
+import { HPage as a } from "./page/h_page.js";
+import { VPage as P } from "./page/v_page.js";
+import { HPanel as w } from "./panel/h_panel.js";
 import { VPanel as i } from "./panel/v_panel.js";
-import { Popover as H } from "./popover/popover.js";
-import { Window as v } from "./window/window.js";
-import { DrawerBottom as B } from "./drawers/drawer_bottom/drawer_bottom.js";
-import { DrawerTop as M } from "./drawers/drawer_top/drawer_top.js";
-import { DrawerStart as T } from "./drawers/drawer_start/drawer_start.js";
-import { DrawerEnd as b } from "./drawers/drawer_end/drawer_end.js";
+import { Popover as C } from "./popover/popover.js";
+import { DrawerBottom as H } from "./drawers/drawer_bottom/drawer_bottom.js";
+import { DrawerTop as V } from "./drawers/drawer_top/drawer_top.js";
+import { DrawerStart as A } from "./drawers/drawer_start/drawer_start.js";
+import { DrawerEnd as E } from "./drawers/drawer_end/drawer_end.js";
+import { Window as S } from "./window/window.js";
+import { Modal as b } from "./modal/modal.js";
+import { Tooltip as h } from "./tooltip/tooltip.js";
+import { PopConfirm as k } from "./pop_confirm/pop_confirm.js";
 export {
   e as Alert,
-  m as Card,
+  p as Card,
   f as Confirm,
-  B as DrawerBottom,
-  b as DrawerEnd,
-  T as DrawerStart,
-  M as DrawerTop,
-  w as HPage,
-  D as HPanel,
-  a as Modal,
-  H as Popover,
-  d as VPage,
+  H as DrawerBottom,
+  E as DrawerEnd,
+  A as DrawerStart,
+  V as DrawerTop,
+  a as HPage,
+  w as HPanel,
+  b as Modal,
+  k as PopConfirm,
+  C as Popover,
+  h as Tooltip,
+  P as VPage,
   i as VPanel,
-  v as Window
+  S as Window
 };
 //# sourceMappingURL=index.js.map

package/dist/surfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

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

@@ -1,5 +1,6 @@
-import { VStackProps } from '../../stacks/v_stack.js';
 import { default as React } from 'react';
-export type ModalProps = Omit<VStackProps<HTMLDialogElement>, 'as'>;
-export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDialogElement>>;
+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>>;
 //# 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":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,CAAC;AAEpE,eAAO,MAAM,KAAK,sFAchB,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,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"}