@tcn/ui 0.2.0 → 0.3.1

package/dist/stacks/z_stack.js

@@ -1,10 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { clsx as E } from "clsx";
-import F from "react";
-import { removeUndefinedProperties as G } from "./utils/remove_undefined_properties.js";
-import { s as H } from "../stack.module-CBV1f12Z.js";
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as D } from "clsx";
+import E from "react";
+import { removeUndefinedProperties as F } from "./utils/remove_undefined_properties.js";
+import { s as G } from "../stack.module-CBV1f12Z.js";
 import { isCustomSizeProp as r } from "./utils/isCustomSizeProp.js";
-const T = F.forwardRef(function({
+const Q = E.forwardRef(function({
   as: s = "div",
   children: t,
   style: i,
@@ -12,14 +12,14 @@ const T = F.forwardRef(function({
   vAlign: m = "center",
   inline: f,
   width: e = "default",
-  minWidth: c,
-  maxWidth: d,
-  height: o = "default",
+  minWidth: d,
+  maxWidth: c,
+  height: a = "default",
   minHeight: l,
   maxHeight: p,
-  growWeight: g,
-  shrinkWeight: k,
-  padding: u,
+  growWeight: u,
+  shrinkWeight: g,
+  padding: k,
   paddingBlock: v,
   paddingInline: y,
   paddingInlineStart: S,
@@ -31,25 +31,25 @@ const T = F.forwardRef(function({
   marginInline: R,
   marginInlineStart: W,
   marginInlineEnd: Z,
-  marginTop: j,
-  marginBottom: A,
-  zIndex: B,
-  className: C,
-  overflow: N,
-  ...U
-}, b) {
-  const q = s, D = {
-    minWidth: c,
+  marginTop: _,
+  marginBottom: j,
+  zIndex: A,
+  className: B,
+  overflow: C,
+  ...N
+}, U) {
+  const b = s, q = {
+    minWidth: d,
     width: r(e) ? void 0 : e,
-    maxWidth: d,
+    maxWidth: c,
     minHeight: l,
-    height: r(o) ? void 0 : o,
+    height: r(a) ? void 0 : a,
     maxHeight: p,
-    flexGrow: g,
-    flexShrink: k,
-    zIndex: B,
-    overflow: N,
-    padding: u,
+    flexGrow: u,
+    flexShrink: g,
+    zIndex: A,
+    overflow: C,
+    padding: k,
     paddingBlock: v,
     paddingInline: y,
     paddingInlineStart: S,
@@ -61,29 +61,29 @@ const T = F.forwardRef(function({
     marginInline: R,
     marginInlineStart: W,
     marginInlineEnd: Z,
-    marginTop: j,
-    marginBottom: A
+    marginTop: _,
+    marginBottom: j
   };
-  return /* @__PURE__ */ a(
-    q,
+  return /* @__PURE__ */ o(
+    b,
     {
-      ref: b,
+      ref: U,
       style: {
-        ...G(D),
+        ...F(q),
         ...i
       },
-      className: E(H["z-stack"], C, "z-stack", "stack"),
+      className: D(G["z-stack"], B, "z-stack", "stack"),
       "data-inline": !!f,
       "data-v-alignment": m,
       "data-h-alignment": n,
-      "data-height": o,
+      "data-height": a,
       "data-width": e,
-      ...U,
-      children: typeof t == "string" ? /* @__PURE__ */ a("span", { children: t }) : t
+      ...N,
+      children: typeof t == "string" ? /* @__PURE__ */ o("span", { children: t }) : t
     }
   );
 });
 export {
-  T as ZStack
+  Q as ZStack
 };
 //# sourceMappingURL=z_stack.js.map

package/dist/surfaces/alert/alert.js

@@ -4,18 +4,18 @@ import e 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 { Button as f } from "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
-import { Confirm as f } from "../confirm/confirm.js";
+import { Confirm as a } from "../confirm/confirm.js";
 const C = e.forwardRef(function({ className: o, onAccept: t, ...i }, m) {
   return /* @__PURE__ */ r(
-    f,
+    a,
     {
       ref: m,
       className: p(o, "alert"),
       ...i,
-      actions: /* @__PURE__ */ r(c, { onClick: t, hierarchy: "primary", width: "100%", children: "OK" })
+      actions: /* @__PURE__ */ r(f, { onClick: t, hierarchy: "primary", width: "100%", children: "OK" })
     }
   );
 });

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 a } from "react/jsx-runtime";
+import { clsx as c } 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 }, f) {
+  return /* @__PURE__ */ a(e, { ref: f, className: c(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/confirm/confirm.js

@@ -1,4 +1,4 @@
-import { jsx as r, Fragment as _, jsxs as i } from "react/jsx-runtime";
+import { jsx as r, 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 s } from "clsx";
 import { Spacer as N } from "../../stacks/spacer.js";
@@ -18,8 +18,8 @@ import '../../confirm.css';const v = "_confirm_e53f865", z = "_shake_d5d9154", A
   graphic: f,
   title: h,
   description: l,
-  actions: p,
-  veilProps: d,
+  actions: d,
+  veilProps: p,
   className: u,
   ...k
 }, x) {
@@ -28,17 +28,17 @@ import '../../confirm.css';const v = "_confirm_e53f865", z = "_shake_d5d9154", A
     t.current = !1;
   }), []), n(() => {
     if (e && t.current) {
-      const y = window.setTimeout(() => {
+      const g = window.setTimeout(() => {
         o(!1);
       }, 600);
-      return () => window.clearTimeout(y);
+      return () => window.clearTimeout(g);
     }
   }, [e]);
-  function g() {
+  function _() {
     o(!0);
   }
-  return /* @__PURE__ */ r(_, { children: a && /* @__PURE__ */ r(j, { children: /* @__PURE__ */ i(R, { height: "100%", style: { position: "fixed" }, children: [
-    /* @__PURE__ */ r(c, { onClick: g, ...d, height: "100%" }),
+  return /* @__PURE__ */ r(y, { children: a && /* @__PURE__ */ r(j, { children: /* @__PURE__ */ i(R, { height: "100%", style: { position: "fixed" }, children: [
+    /* @__PURE__ */ r(c, { onClick: _, ...p, height: "100%" }),
     /* @__PURE__ */ r(
       "div",
       {
@@ -51,7 +51,7 @@ import '../../confirm.css';const v = "_confirm_e53f865", z = "_shake_d5d9154", A
           /* @__PURE__ */ r(b, { className: "confirm-title", emphasis: "strong", size: "sm", children: h }),
           /* @__PURE__ */ r(B, { className: "confirm-description", hierarchy: "tertiary", children: l }),
           /* @__PURE__ */ r(N, { height: "16px" }),
-          /* @__PURE__ */ r(c, { className: s(m.actions, "confirm-actions"), height: "auto", children: p })
+          /* @__PURE__ */ r(c, { className: s(m.actions, "confirm-actions"), height: "auto", children: d })
         ] })
       }
     )

package/dist/surfaces/drawers/drawer_start/drawer_start.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { VStack as s } from "../../../stacks/v_stack.js";
 import { clsx as c } from "clsx";
-import m from "react";
-import '../../../drawer_start.css';const f = "_drawerStart_3abbf56", n = { drawerStart: f }, l = m.forwardRef(
+import f from "react";
+import '../../../drawer_start.css';const m = "_drawerStart_3abbf56", n = { drawerStart: m }, l = f.forwardRef(
   function({ children: r, className: t, ...a }, o) {
     return /* @__PURE__ */ e(
       s,

package/dist/surfaces/drawers/drawer_top/drawer_top.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import { VStack as m } from "../../../stacks/v_stack.js";
 import { clsx as s } from "clsx";
 import c from "react";
-import '../../../drawer_top.css';const p = "_drawerBottom_7a0635a", f = { drawerBottom: p }, l = c.forwardRef(function({ children: r, className: o, ...t }, a) {
+import '../../../drawer_top.css';const p = "_drawerBottom_7a0635a", f = { drawerBottom: p }, T = c.forwardRef(function({ children: r, className: o, ...t }, a) {
   return /* @__PURE__ */ e(
     m,
     {
@@ -15,6 +15,6 @@ import '../../../drawer_top.css';const p = "_drawerBottom_7a0635a", f = { drawer
   );
 });
 export {
-  l as DrawerTop
+  T as DrawerTop
 };
 //# sourceMappingURL=drawer_top.js.map

package/dist/surfaces/index.d.ts

@@ -12,4 +12,6 @@ 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,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"}
+{"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 { HPage as a } from "./page/h_page.js";
-import { VPage as w } from "./page/v_page.js";
-import { HPanel as d } from "./panel/h_panel.js";
-import { VPanel as D } from "./panel/v_panel.js";
-import { Popover as i } from "./popover/popover.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 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 B } from "./drawers/drawer_start/drawer_start.js";
-import { DrawerEnd as M } from "./drawers/drawer_end/drawer_end.js";
-import { Window as T } from "./window/window.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,
   H as DrawerBottom,
-  M as DrawerEnd,
-  B as DrawerStart,
-  v as DrawerTop,
+  E as DrawerEnd,
+  A as DrawerStart,
+  V as DrawerTop,
   a as HPage,
-  d as HPanel,
+  w as HPanel,
   b as Modal,
-  i as Popover,
-  w as VPage,
-  D as VPanel,
-  T as Window
+  k as PopConfirm,
+  C as Popover,
+  h as Tooltip,
+  P as VPage,
+  i as VPanel,
+  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,6 +1,6 @@
-import { VStackProps } from '../../stacks/v_stack.js';
 import { default as React } from 'react';
 import { FrameOwnProps } from '../../overlay/frame/frame.js';
-export type ModalProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;
-export declare const Modal: React.ForwardRefExoticComponent<FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, "as"> & React.RefAttributes<HTMLDialogElement>>;
+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;AAE1B,OAAO,EAAS,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAEzE,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,CAAC;AAEpF,eAAO,MAAM,KAAK,sIAgBhB,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"}

package/dist/surfaces/modal/modal.js

@@ -1,21 +1,21 @@
 import { jsx as o } from "react/jsx-runtime";
-import { VStack as s } from "../../stacks/v_stack.js";
-import { clsx as f } from "clsx";
-import d from "react";
-import { Frame as i } from "../../overlay/frame/frame.js";
-import '../../modal.css';const n = "_modal_473c6ef", p = { modal: n }, h = d.forwardRef(function({ children: r, className: m, isOpen: t, draggable: a = !1, veil: l = !0, ...c }, e) {
-  return /* @__PURE__ */ o(i, { isOpen: t, draggable: a, veil: l, children: /* @__PURE__ */ o(
-    s,
+import { clsx as l } from "clsx";
+import s from "react";
+import { Frame as d } from "../../overlay/frame/frame.js";
+import { Scaffold as n } from "../../layouts/scaffold/scaffold.js";
+import '../../modal.css';const i = "_modal_473c6ef", p = { modal: i }, j = s.forwardRef(function({ children: r, className: t, isOpen: m, draggable: a = !1, veil: f = !0, ...c }, e) {
+  return /* @__PURE__ */ o(
+    d,
     {
-      ref: e,
-      className: f(p.modal, "tcn-modal", m),
-      as: "dialog",
-      ...c,
-      children: r
+      isOpen: m,
+      draggable: a,
+      veil: f,
+      className: l(p.modal, "tcn-surface", "tcn-modal", t),
+      children: /* @__PURE__ */ o(n, { ref: e, ...c, children: r })
     }
-  ) });
+  );
 });
 export {
-  h as Modal
+  j 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 { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './modal.module.css';\nimport { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';\n\nexport type ModalProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;\n\nexport const Modal = React.forwardRef<HTMLDialogElement, ModalProps>(function Modal(\n  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,\n  ref\n) {\n  return (\n    <Frame isOpen={isOpen} draggable={draggable} veil={veil}>\n      <VStack\n        ref={ref}\n        className={clsx(styles['modal'], 'tcn-modal', className)}\n        as=\"dialog\"\n        {...props}\n      >\n        {children}\n      </VStack>\n    </Frame>\n  );\n});\n"],"names":["Modal","React","children","className","isOpen","draggable","veil","props","ref","jsx","Frame","VStack","clsx","styles"],"mappings":";;;;;8CAQaA,IAAQC,EAAM,WAA0C,SACnE,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,WAAAC,IAAY,IAAO,MAAAC,IAAO,IAAM,GAAGC,EAAA,GAClEC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAM,QAAAN,GAAgB,WAAAC,GAAsB,MAAAC,GAC3C,UAAA,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWI,EAAKC,EAAO,OAAU,aAAaV,CAAS;AAAA,MACvD,IAAG;AAAA,MACF,GAAGI;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;"}
+{"version":3,"file":"modal.js","sources":["../../../src/surfaces/modal/modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\n\n// Styles\nimport styles from './modal.module.css';\n\nexport type ModalProps = FrameOwnProps & ScaffoldProps;\n\nexport const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(\n  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,\n  ref\n) {\n  return (\n    <Frame\n      isOpen={isOpen}\n      draggable={draggable}\n      veil={veil}\n      className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}\n    >\n      <Scaffold ref={ref} {...props}>\n        {children}\n      </Scaffold>\n    </Frame>\n  );\n});\n"],"names":["Modal","React","children","className","isOpen","draggable","veil","props","ref","jsx","Frame","clsx","styles","Scaffold"],"mappings":";;;;;8CAUaA,IAAQC,EAAM,WAAoC,SAC7D,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,WAAAC,IAAY,IAAO,MAAAC,IAAO,IAAM,GAAGC,EAAA,GAClEC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAAN;AAAA,MACA,WAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAWK,EAAKC,EAAO,OAAU,eAAe,aAAaT,CAAS;AAAA,MAEtE,UAAA,gBAAAM,EAACI,GAAA,EAAS,KAAAL,GAAW,GAAGD,GACrB,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/surfaces/page/h_page.js

@@ -1,22 +1,22 @@
 import { jsx as m } from "react/jsx-runtime";
-import { clsx as s } from "clsx";
-import e from "react";
+import { clsx as e } from "clsx";
+import s from "react";
 import { s as f } from "../../page.module-DXhph-u6.js";
 import { HStack as i } from "../../stacks/h_stack.js";
-const H = e.forwardRef(function({ children: r, className: o, ...t }, a) {
+const x = s.forwardRef(function({ children: r, className: t, ...a }, o) {
   return /* @__PURE__ */ m(
     i,
     {
-      ref: a,
+      ref: o,
       as: "main",
-      className: s(f.page, o, "page"),
+      className: e(f.page, t, "page"),
       vAlign: "start",
-      ...t,
+      ...a,
       children: r
     }
   );
 });
 export {
-  H as HPage
+  x as HPage
 };
 //# sourceMappingURL=h_page.js.map

package/dist/surfaces/page/v_page.js

@@ -1,13 +1,13 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import { VStack as e } from "../../stacks/v_stack.js";
 import { clsx as s } from "clsx";
 import f from "react";
 import { s as p } from "../../page.module-DXhph-u6.js";
-const V = f.forwardRef(function({ children: r, className: o, ...a }, m) {
-  return /* @__PURE__ */ t(
+const x = f.forwardRef(function({ children: r, className: o, ...a }, t) {
+  return /* @__PURE__ */ m(
     e,
     {
-      ref: m,
+      ref: t,
       as: "main",
       className: s(p.page, o, "page"),
       ...a,
@@ -16,6 +16,6 @@ const V = f.forwardRef(function({ children: r, className: o, ...a }, m) {
   );
 });
 export {
-  V as VPage
+  x as VPage
 };
 //# sourceMappingURL=v_page.js.map

package/dist/surfaces/panel/h_panel.js

@@ -1,61 +1,60 @@
 import { jsx as p } from "react/jsx-runtime";
-import x from "react";
-import { clsx as l } from "clsx";
-import { Box as u } from "../../stacks/box/box.js";
-import { HStack as P } from "../../stacks/h_stack.js";
-import { s as m } from "../../panel.module-DwGKncon.js";
-const I = x.forwardRef(function({
-  children: f,
+import u from "react";
+import { clsx as r } from "clsx";
+import { Box as x } from "../../stacks/box/box.js";
+import { HStack as i } from "../../stacks/h_stack.js";
+import '../../h_panel.css';const P = "_panel-stack_f1896f3", f = { "panel-stack": P }, B = u.forwardRef(function({
+  children: m,
   width: k,
   height: d,
   minWidth: a,
   maxWidth: t,
   minHeight: n,
-  maxHeight: o,
-  hAlign: r,
-  vAlign: e = "start",
-  className: s,
-  ...i
-}, c) {
+  maxHeight: e,
+  hAlign: c,
+  vAlign: o = "start",
+  className: l,
+  ..._
+}, s) {
   return /* @__PURE__ */ p(
-    u,
+    x,
     {
-      ref: c,
+      ref: s,
       width: k,
       height: d,
       minWidth: a,
       maxWidth: t,
       minHeight: n,
-      maxHeight: o,
-      "data-h-alignment": r,
-      "data-v-alignment": e,
-      className: l(m.panel, s, "panel", "tcn-panel", "tcn-h-panel"),
-      ...i,
+      maxHeight: e,
+      "data-h-alignment": c,
+      "data-v-alignment": o,
+      className: r(f.panel, l, "panel", "tcn-panel", "tcn-h-panel"),
+      ..._,
       children: /* @__PURE__ */ p(
-        P,
+        i,
         {
           as: "section",
           minWidth: a,
           maxWidth: t,
           minHeight: n,
-          maxHeight: o,
-          hAlign: r,
-          vAlign: e,
-          ref: c,
-          className: l(
-            m["panel-stack"],
-            s,
+          maxHeight: e,
+          hAlign: c,
+          vAlign: o,
+          ref: s,
+          className: r(
+            f["panel-stack"],
+            l,
             "panel-stack",
             "tcn-panel-stack"
           ),
           zIndex: 0,
-          children: f
+          children: m
         }
       )
     }
   );
 });
 export {
-  I as HPanel
+  B as HPanel
 };
 //# sourceMappingURL=h_panel.js.map

package/dist/surfaces/panel/h_panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"h_panel.js","sources":["../../../src/surfaces/panel/h_panel.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\n// Styles\nimport styles from './panel.module.css';\n\nexport interface HPanelProps extends Omit<BoxProps, 'as'> {\n  vAlign?: Alignment;\n  hAlign?: Alignment;\n}\n\nexport const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel(\n  {\n    children,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign,\n    vAlign = 'start',\n    className,\n    ...props\n  }: HPanelProps,\n  ref\n) {\n  return (\n    <Box\n      ref={ref}\n      width={width}\n      height={height}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      data-h-alignment={hAlign}\n      data-v-alignment={vAlign}\n      className={clsx(styles['panel'], className, 'panel', 'tcn-panel', 'tcn-h-panel')}\n      {...props}\n    >\n      <HStack\n        as=\"section\"\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        hAlign={hAlign}\n        vAlign={vAlign}\n        ref={ref}\n        className={clsx(\n          styles['panel-stack'],\n          className,\n          'panel-stack',\n          'tcn-panel-stack'\n        )}\n        zIndex={0}\n      >\n        {children}\n      </HStack>\n    </Box>\n  );\n});\n"],"names":["HPanel","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","HStack"],"mappings":";;;;;;AAaO,MAAMA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAV;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBC;AAAA,MAClB,oBAAkBC;AAAA,MAClB,WAAWM,EAAKC,EAAO,OAAUN,GAAW,SAAS,aAAa,aAAa;AAAA,MAC9E,GAAGC;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG;AAAA,YACTC,EAAO,aAAa;AAAA,YACpBN;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,QAAQ;AAAA,UAEP,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"h_panel.js","sources":["../../../src/surfaces/panel/h_panel.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\n// Styles\nimport styles from './panel.module.css';\n\nexport interface HPanelProps extends Omit<BoxProps, 'as'> {\n  vAlign?: Alignment;\n  hAlign?: Alignment;\n}\n\nexport const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel(\n  {\n    children,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign,\n    vAlign = 'start',\n    className,\n    ...props\n  }: HPanelProps,\n  ref\n) {\n  return (\n    <Box\n      ref={ref}\n      width={width}\n      height={height}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      data-h-alignment={hAlign}\n      data-v-alignment={vAlign}\n      className={clsx(styles['panel'], className, 'panel', 'tcn-panel', 'tcn-h-panel')}\n      {...props}\n    >\n      <HStack\n        as=\"section\"\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        hAlign={hAlign}\n        vAlign={vAlign}\n        ref={ref}\n        className={clsx(\n          styles['panel-stack'],\n          className,\n          'panel-stack',\n          'tcn-panel-stack'\n        )}\n        zIndex={0}\n      >\n        {children}\n      </HStack>\n    </Box>\n  );\n});\n"],"names":["HPanel","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","HStack"],"mappings":";;;;;4DAaaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAV;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBC;AAAA,MAClB,oBAAkBC;AAAA,MAClB,WAAWM,EAAKC,EAAO,OAAUN,GAAW,SAAS,aAAa,aAAa;AAAA,MAC9E,GAAGC;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG;AAAA,YACTC,EAAO,aAAa;AAAA,YACpBN;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,QAAQ;AAAA,UAEP,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/surfaces/panel/v_panel.d.ts

@@ -1,9 +1,5 @@
 import { default as React } from 'react';
-import { BoxProps } from '../../stacks/box/box.js';
-import { Alignment } from '../../stacks/types/alignment.js';
-export interface VPanelProps extends Omit<BoxProps, 'as'> {
-    vAlign?: Alignment;
-    hAlign?: Alignment;
-}
-export declare const VPanel: React.ForwardRefExoticComponent<VPanelProps & React.RefAttributes<HTMLElement>>;
+import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+export type VPanelProps = ScaffoldProps;
+export declare const VPanel: React.ForwardRefExoticComponent<ScaffoldProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=v_panel.d.ts.map

package/dist/surfaces/panel/v_panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v_panel.d.ts","sourceRoot":"","sources":["../../../src/surfaces/panel/v_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAKjE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,iFAmDjB,CAAC"}
+{"version":3,"file":"v_panel.d.ts","sourceRoot":"","sources":["../../../src/surfaces/panel/v_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGlF,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC;AAExC,eAAO,MAAM,MAAM,mFAajB,CAAC"}