@tcn/ui 0.2.0 → 0.3.1

package/dist/layouts/column/column.js

@@ -1,46 +1,46 @@
-import { jsx as s } from "react/jsx-runtime";
-import { clsx as t } from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as s } from "clsx";
 import x from "react";
 import { Box as b } from "../../stacks/box/box.js";
-import { VStack as i } from "../../stacks/v_stack.js";
-import '../../column.css';const C = "_column_ce05462", N = "_column-stack_80b940b", r = { column: C, "column-stack": N }, z = x.forwardRef(function({
-  children: l,
+import { VStack as d } from "../../stacks/v_stack.js";
+import '../../column.css';const i = "_column_ce05462", C = "_column-stack_80b940b", l = { column: i, "column-stack": C }, z = x.forwardRef(function({
+  children: r,
   width: u,
   height: a,
   minWidth: o,
   maxWidth: c,
-  minHeight: m,
-  maxHeight: n,
+  minHeight: t,
+  maxHeight: m,
   hAlign: e,
   vAlign: f = "start",
   className: k,
   ...p
 }, _) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ n(
     b,
     {
       width: u,
       height: a,
       minWidth: o,
       maxWidth: c,
-      minHeight: m,
-      maxHeight: n,
-      className: t(k, r.column, "column"),
+      minHeight: t,
+      maxHeight: m,
+      className: s(k, l.column, "column"),
       ...p,
-      children: /* @__PURE__ */ s(
-        i,
+      children: /* @__PURE__ */ n(
+        d,
         {
           minWidth: o,
           maxWidth: c,
-          minHeight: m,
-          maxHeight: n,
+          minHeight: t,
+          maxHeight: m,
           hAlign: e,
           vAlign: f,
           ref: _,
           as: "section",
-          className: t(r["column-stack"], "column-stack"),
+          className: s(l["column-stack"], "column-stack"),
           zIndex: 0,
-          children: l
+          children: r
         }
       )
     }

package/dist/layouts/divider/divider.js

@@ -1,46 +1,47 @@
-import { jsxs as h, jsx as f } from "react/jsx-runtime";
+import { jsxs as h, jsx as p } from "react/jsx-runtime";
 import { clsx as r } from "clsx";
-import '../../divider.css';const p = "_divider_af0a0c6", x = "_divider-line_cae0189", n = { divider: p, "divider-line": x }, u = ({
+import { s } from "../../divider.module-FptFV0PX.js";
+const u = ({
   emphasis: i = "normal",
-  thickness: d = "sm",
-  length: e = "full",
-  style: _,
-  horizontal: s,
-  vertical: y,
-  width: l,
-  height: o,
-  className: t,
+  thickness: t = "sm",
+  length: a = "full",
+  style: f,
+  horizontal: n,
+  vertical: x,
+  width: o,
+  height: l,
+  className: e,
   children: v,
   ...c
 }) => {
-  const a = s ? "horizontal" : "vertical", m = {
-    "--divider-width": l,
-    "--divider-height": o
+  const d = n ? "horizontal" : "vertical", m = {
+    "--divider-width": o,
+    "--divider-height": l
   };
   return /* @__PURE__ */ h(
     "div",
     {
       "data-emphasis": i,
-      "data-thickness": d,
-      "data-length": e,
-      "data-orientation": a,
-      className: r(n.divider, "divider", "tcn-divider", t),
+      "data-thickness": t,
+      "data-length": a,
+      "data-orientation": d,
+      className: r(s.divider, "divider", "tcn-divider", e),
       ...c,
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ p(
           "div",
           {
             "data-emphasis": i,
-            "data-thickness": d,
-            "data-length": e,
-            "data-orientation": a,
+            "data-thickness": t,
+            "data-length": a,
+            "data-orientation": d,
             style: m,
             className: r(
-              n["divider-line"],
+              s["divider-line"],
               "divider-line",
               "tcn-divider-line",
               "material",
-              t
+              e
             )
           }
         ),

package/dist/layouts/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../../src/layouts/divider/divider.tsx"],"sourcesContent":["import React, { type CSSProperties } from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Size } from '../../utils/index.js';\nimport styles from './divider.module.css';\n\nexport type DividerOrientation =\n  | {\n      horizontal?: boolean;\n      vertical?: never;\n    }\n  | {\n      horizontal?: never;\n      vertical?: boolean;\n    };\n\nexport interface DividerClasses {\n  line?: string;\n}\n\nexport interface DividerProperties {\n  width?: CSSProperties['width'];\n  height?: CSSProperties['height'];\n}\n\nexport type DividerOwnProps = DividerOrientation &\n  DividerProperties & {\n    emphasis?: Emphasis;\n    thickness?: Size;\n    length?: Size | 'full';\n    classes?: Partial<DividerClasses>;\n  };\n\nexport type DividerProps = WithDetailedHTMLProps<DividerOwnProps, 'div'>;\n\nexport const Divider: React.FC<DividerProps> = ({\n  emphasis = 'normal',\n  thickness = 'sm',\n  length = 'full',\n  style,\n  horizontal,\n  vertical,\n  width,\n  height,\n  className,\n  children,\n  ...props\n}) => {\n  const orientation = horizontal ? 'horizontal' : 'vertical';\n\n  const cssVariables = {\n    '--divider-width': width,\n    '--divider-height': height,\n  } as CSSProperties;\n\n  return (\n    <div\n      data-emphasis={emphasis}\n      data-thickness={thickness}\n      data-length={length}\n      data-orientation={orientation}\n      className={clsx(styles[`divider`], 'divider', 'tcn-divider', className)}\n      {...props}\n    >\n      <div\n        data-emphasis={emphasis}\n        data-thickness={thickness}\n        data-length={length}\n        data-orientation={orientation}\n        style={cssVariables}\n        className={clsx(\n          styles[`divider-line`],\n          'divider-line',\n          'tcn-divider-line',\n          'material',\n          className\n        )}\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["Divider","emphasis","thickness","length","style","horizontal","vertical","width","height","className","children","props","orientation","cssVariables","jsxs","clsx","styles","jsx"],"mappings":";;kGAmCaA,IAAkC,CAAC;AAAA,EAC9C,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAcP,IAAa,eAAe,YAE1CQ,IAAe;AAAA,IACnB,mBAAmBN;AAAA,IACnB,oBAAoBC;AAAA,EAAA;AAGtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAeb;AAAA,MACf,kBAAgBC;AAAA,MAChB,eAAaC;AAAA,MACb,oBAAkBS;AAAA,MAClB,WAAWG,EAAKC,EAAO,SAAY,WAAW,eAAeP,CAAS;AAAA,MACrE,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,iBAAehB;AAAA,YACf,kBAAgBC;AAAA,YAChB,eAAaC;AAAA,YACb,oBAAkBS;AAAA,YAClB,OAAOC;AAAA,YACP,WAAWE;AAAA,cACTC,EAAO,cAAc;AAAA,cACrB;AAAA,cACA;AAAA,cACA;AAAA,cACAP;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEDC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"divider.js","sources":["../../../src/layouts/divider/divider.tsx"],"sourcesContent":["import React, { type CSSProperties } from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Size } from '../../utils/index.js';\nimport styles from './divider.module.css';\n\nexport type DividerOrientation =\n  | {\n      horizontal?: boolean;\n      vertical?: never;\n    }\n  | {\n      horizontal?: never;\n      vertical?: boolean;\n    };\n\nexport interface DividerClasses {\n  line?: string;\n}\n\nexport interface DividerProperties {\n  width?: CSSProperties['width'];\n  height?: CSSProperties['height'];\n}\n\nexport type DividerOwnProps = DividerOrientation &\n  DividerProperties & {\n    emphasis?: Emphasis;\n    thickness?: Size;\n    length?: Size | 'full';\n    classes?: Partial<DividerClasses>;\n  };\n\nexport type DividerProps = WithDetailedHTMLProps<DividerOwnProps, 'div'>;\n\nexport const Divider: React.FC<DividerProps> = ({\n  emphasis = 'normal',\n  thickness = 'sm',\n  length = 'full',\n  style,\n  horizontal,\n  vertical,\n  width,\n  height,\n  className,\n  children,\n  ...props\n}) => {\n  const orientation = horizontal ? 'horizontal' : 'vertical';\n\n  const cssVariables = {\n    '--divider-width': width,\n    '--divider-height': height,\n  } as CSSProperties;\n\n  return (\n    <div\n      data-emphasis={emphasis}\n      data-thickness={thickness}\n      data-length={length}\n      data-orientation={orientation}\n      className={clsx(styles[`divider`], 'divider', 'tcn-divider', className)}\n      {...props}\n    >\n      <div\n        data-emphasis={emphasis}\n        data-thickness={thickness}\n        data-length={length}\n        data-orientation={orientation}\n        style={cssVariables}\n        className={clsx(\n          styles[`divider-line`],\n          'divider-line',\n          'tcn-divider-line',\n          'material',\n          className\n        )}\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["Divider","emphasis","thickness","length","style","horizontal","vertical","width","height","className","children","props","orientation","cssVariables","jsxs","clsx","styles","jsx"],"mappings":";;;AAmCO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAcP,IAAa,eAAe,YAE1CQ,IAAe;AAAA,IACnB,mBAAmBN;AAAA,IACnB,oBAAoBC;AAAA,EAAA;AAGtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAeb;AAAA,MACf,kBAAgBC;AAAA,MAChB,eAAaC;AAAA,MACb,oBAAkBS;AAAA,MAClB,WAAWG,EAAKC,EAAO,SAAY,WAAW,eAAeP,CAAS;AAAA,MACrE,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,iBAAehB;AAAA,YACf,kBAAgBC;AAAA,YAChB,eAAaC;AAAA,YACb,oBAAkBS;AAAA,YAClB,OAAOC;AAAA,YACP,WAAWE;AAAA,cACTC,EAAO,cAAc;AAAA,cACrB;AAAA,cACA;AAAA,cACA;AAAA,cACAP;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEDC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/layouts/footer/footer.js

@@ -1,22 +1,22 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import s from "react";
 import { clsx as m } from "clsx";
 import { HStack as n } from "../../stacks/h_stack.js";
-import '../../footer.css';const i = "_footer_4a43c3e", d = { footer: i }, u = s.forwardRef(function({ hierarchy: o = "secondary", size: r = "md", children: t, className: e, ...a }, c) {
-  return /* @__PURE__ */ f(
+import '../../footer.css';const i = "_footer_4a43c3e", d = { footer: i }, y = s.forwardRef(function({ hierarchy: o = "secondary", size: t = "md", children: r, className: e, ...a }, f) {
+  return /* @__PURE__ */ c(
     n,
     {
-      ref: c,
+      ref: f,
       as: "footer",
       className: m(d.footer, e, "tcn-footer"),
       "data-hierarchy": o,
-      "data-size": r,
+      "data-size": t,
       ...a,
-      children: t
+      children: r
     }
   );
 });
 export {
-  u as Footer
+  y as Footer
 };
 //# sourceMappingURL=footer.js.map

package/dist/layouts/grid/grid.js

@@ -4,13 +4,13 @@ import c from "react";
 import { removeUndefinedProperties as z } from "../../stacks/utils/remove_undefined_properties.js";
 import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwardRef(function({
   as: l = "div",
-  children: e,
+  children: r,
   style: d,
   className: a,
   itemHeight: m,
   itemWidth: o,
   columnAmount: i,
-  gap: r,
+  gap: e,
   rowGap: f,
   columnGap: p,
   padding: h,
@@ -18,27 +18,27 @@ import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwar
   paddingBlock: y,
   paddingInlineStart: g,
   paddingInlineEnd: u,
-  paddingTop: $,
-  paddingBottom: A,
-  margin: v,
-  marginInline: w,
-  marginBlock: C,
-  marginInlineStart: G,
-  marginInlineEnd: R,
-  marginTop: S,
-  marginBottom: _,
+  paddingTop: _,
+  paddingBottom: $,
+  margin: A,
+  marginInline: v,
+  marginBlock: w,
+  marginInlineStart: C,
+  marginInlineEnd: G,
+  marginTop: R,
+  marginBottom: S,
   zIndex: j,
   ...M
 }, N) {
-  const P = l, U = c.Children.toArray(e).length, W = `repeat(auto-fill, ${o}px)`;
+  const P = l, U = c.Children.toArray(r).length, W = `repeat(auto-fill, ${o}px)`;
   let t;
   if (i) {
     const n = Math.min(i, U), s = String(n * o) + "px";
-    r ? t = `calc(${s} + ${r} * ${n - 1})` : t = s;
+    e ? t = `calc(${s} + ${e} * ${n - 1})` : t = s;
   } else
     t = "100%";
   const b = z({
-    gap: r,
+    gap: e,
     rowGap: f,
     columnGap: p,
     "--item-height": m + "px",
@@ -49,19 +49,19 @@ import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwar
     paddingBlock: y,
     paddingInlineStart: g,
     paddingInlineEnd: u,
-    paddingTop: $,
-    paddingBottom: A,
-    margin: v,
-    marginInline: w,
-    marginBlock: C,
-    marginInlineStart: G,
-    marginInlineEnd: R,
-    marginTop: S,
-    marginBottom: _,
+    paddingTop: _,
+    paddingBottom: $,
+    margin: A,
+    marginInline: v,
+    marginBlock: w,
+    marginInlineStart: C,
+    marginInlineEnd: G,
+    marginTop: R,
+    marginBottom: S,
     zIndex: j,
     ...d
   });
-  return /* @__PURE__ */ k(P, { ref: N, className: q(D.grid, a), style: b, ...M, children: e });
+  return /* @__PURE__ */ k(P, { ref: N, className: q(D.grid, a), style: b, ...M, children: r });
 });
 export {
   L as Grid

package/dist/layouts/header/header.js

@@ -2,7 +2,7 @@ import { jsx as c } from "react/jsx-runtime";
 import m from "react";
 import { clsx as f } from "clsx";
 import { HStack as h } from "../../stacks/h_stack.js";
-import '../../header.css';const n = "_header_3155fa4", i = { header: n }, H = m.forwardRef(function({
+import '../../header.css';const n = "_header_3155fa4", i = { header: n }, y = m.forwardRef(function({
   hierarchy: e = "secondary",
   height: r = "auto",
   children: a,
@@ -25,6 +25,6 @@ import '../../header.css';const n = "_header_3155fa4", i = { header: n }, H = m.
   );
 });
 export {
-  H as Header
+  y as Header
 };
 //# sourceMappingURL=header.js.map

package/dist/layouts/index.d.ts

@@ -1,14 +1,15 @@
-export * from './body/h_body.js';
-export * from './body/v_body.js';
 export * from './column/column.js';
 export * from './divider/divider.js';
-export * from './footer/footer.js';
 export * from './grid/grid.js';
-export * from './header/header.js';
 export * from './list/item.js';
 export * from './list/list.js';
 export * from './list/section_header.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
-export * from './utility_bar/utility_bar.js';
+export { Scaffold, type ScaffoldProps } from './scaffold/scaffold.js';
+export { HBody, type HBodyProps } from './body/h_body.js';
+export { VBody, type VBodyProps } from './body/v_body.js';
+export { Footer, type FooterProps } from './footer/footer.js';
+export { Header, type HeaderProps } from './header/header.js';
+export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/layouts/index.js

@@ -1,29 +1,31 @@
-import { HBody as e } from "./body/h_body.js";
-import { VBody as m } from "./body/v_body.js";
-import { Column as p } from "./column/column.js";
-import { Divider as d } from "./divider/divider.js";
-import { Footer as a } from "./footer/footer.js";
-import { Grid as n } from "./grid/grid.js";
-import { Header as B } from "./header/header.js";
-import { Item as b } from "./list/item.js";
-import { List as c } from "./list/list.js";
-import { SectionHeader as u } from "./list/section_header.js";
-import { SidebarEnd as C } from "./sidebar_end/sidebar_end.js";
-import { SidebarStart as E } from "./sidebar_start/sidebar_start.js";
-import { UtilityBar as G } from "./utility_bar/utility_bar.js";
+import { Column as e } from "./column/column.js";
+import { Divider as f } from "./divider/divider.js";
+import { Grid as p } from "./grid/grid.js";
+import { Item as d } from "./list/item.js";
+import { List as a } from "./list/list.js";
+import { SectionHeader as l } from "./list/section_header.js";
+import { SidebarEnd as y } from "./sidebar_end/sidebar_end.js";
+import { SidebarStart as H } from "./sidebar_start/sidebar_start.js";
+import { Scaffold as c } from "./scaffold/scaffold.js";
+import { HBody as u } from "./body/h_body.js";
+import { VBody as C } from "./body/v_body.js";
+import { Footer as E } from "./footer/footer.js";
+import { Header as G } from "./header/header.js";
+import { UtilityBar as L } from "./utility_bar/utility_bar.js";
 export {
-  p as Column,
-  d as Divider,
-  a as Footer,
-  n as Grid,
-  e as HBody,
-  B as Header,
-  b as Item,
-  c as List,
-  u as SectionHeader,
-  C as SidebarEnd,
-  E as SidebarStart,
-  G as UtilityBar,
-  m as VBody
+  e as Column,
+  f as Divider,
+  E as Footer,
+  p as Grid,
+  u as HBody,
+  G as Header,
+  d as Item,
+  a as List,
+  c as Scaffold,
+  l as SectionHeader,
+  y as SidebarEnd,
+  H as SidebarStart,
+  L as UtilityBar,
+  C as VBody
 };
 //# sourceMappingURL=index.js.map

package/dist/layouts/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/layouts/list/item.js

@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
 import o from "react";
 import { HStack as c } from "../../stacks/h_stack.js";
 import { clsx as f } from "clsx";
-const x = o.forwardRef(function({ children: r, className: a, selected: t = !1, ...e }, i) {
+const u = o.forwardRef(function({ children: r, className: a, selected: t = !1, ...e }, i) {
   return /* @__PURE__ */ m(
     c,
     {
@@ -17,6 +17,6 @@ const x = o.forwardRef(function({ children: r, className: a, selected: t = !1, .
   );
 });
 export {
-  x as Item
+  u as Item
 };
 //# sourceMappingURL=item.js.map

package/dist/layouts/list/list.js

@@ -1,14 +1,14 @@
-import { jsx as f } from "react/jsx-runtime";
-import i from "react";
-import { clsx as a } from "clsx";
+import { jsx as m } from "react/jsx-runtime";
+import a from "react";
+import { clsx as i } from "clsx";
 import { VStack as c } from "../../stacks/v_stack.js";
-const x = i.forwardRef(function({ children: t, className: o, isOrdered: r = !1, ...s }, m) {
-  return /* @__PURE__ */ f(
+const x = a.forwardRef(function({ children: t, className: o, isOrdered: r = !1, ...s }, f) {
+  return /* @__PURE__ */ m(
     c,
     {
-      ref: m,
+      ref: f,
       as: r ? "ol" : "ul",
-      className: a("tcn-list", o),
+      className: i("tcn-list", o),
       ...s,
       children: t
     }

package/dist/layouts/list/section_header.js

@@ -1,12 +1,12 @@
-import { jsx as i } from "react/jsx-runtime";
-import a from "react";
-import { HStack as c } from "../../stacks/h_stack.js";
-const d = a.forwardRef(
+import { jsx as a } from "react/jsx-runtime";
+import f from "react";
+import { HStack as i } from "../../stacks/h_stack.js";
+const p = f.forwardRef(
   function({ children: r, className: o, ...t }, e) {
-    return /* @__PURE__ */ i(c, { ref: e, as: "li", className: o, ...t, children: r });
+    return /* @__PURE__ */ a(i, { ref: e, as: "li", className: o, ...t, children: r });
   }
 );
 export {
-  d as SectionHeader
+  p as SectionHeader
 };
 //# sourceMappingURL=section_header.js.map

package/dist/layouts/scaffold/scaffold.d.ts

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

package/dist/layouts/scaffold/scaffold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../../../src/layouts/scaffold/scaffold.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,aAAc,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,mFA8CnB,CAAC"}

package/dist/layouts/scaffold/scaffold.js

@@ -0,0 +1,55 @@
+import { jsx as l } from "react/jsx-runtime";
+import S from "react";
+import { clsx as d } from "clsx";
+import { Box as _ } from "../../stacks/box/box.js";
+import { VStack as u } from "../../stacks/v_stack.js";
+import '../../scaffold.css';const x = "_scaffold-stack_8f97a6a", i = { "scaffold-stack": x }, B = S.forwardRef(function({
+  children: n,
+  width: e,
+  height: m = "100%",
+  minWidth: a,
+  maxWidth: c,
+  minHeight: o,
+  maxHeight: f,
+  hAlign: t,
+  vAlign: s = "start",
+  className: k,
+  ...p
+}, r) {
+  return /* @__PURE__ */ l(
+    _,
+    {
+      ref: r,
+      width: e,
+      height: m,
+      minWidth: a,
+      maxWidth: c,
+      minHeight: o,
+      maxHeight: f,
+      "data-h-alignment": t,
+      "data-v-alignment": s,
+      className: d(k, "tcn-scaffold"),
+      ...p,
+      children: /* @__PURE__ */ l(
+        u,
+        {
+          as: "section",
+          minWidth: a,
+          maxWidth: c,
+          minHeight: o,
+          maxHeight: f,
+          hAlign: t,
+          vAlign: s,
+          ref: r,
+          className: d(i["scaffold-stack"], "tcn-scaffold-stack"),
+          zIndex: 0,
+          children: n
+        }
+      )
+    }
+  );
+});
+export {
+  B as Scaffold
+};
+//# sourceMappingURL=scaffold.js.map

package/dist/layouts/scaffold/scaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold.js","sources":["../../../src/layouts/scaffold/scaffold.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\nimport { VStack } from '../../stacks/v_stack.js';\n// Styles\nimport styles from './scaffold.module.css';\n\nexport interface ScaffoldProps extends Omit<BoxProps, 'as'> {\n  vAlign?: Alignment;\n  hAlign?: Alignment;\n}\n\nexport const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(\n  {\n    children,\n    width,\n    height = '100%',\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign,\n    vAlign = 'start',\n    className,\n    ...props\n  }: ScaffoldProps,\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(className, 'tcn-scaffold')}\n      {...props}\n    >\n      <VStack\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(styles['scaffold-stack'], 'tcn-scaffold-stack')}\n        zIndex={0}\n      >\n        {children}\n      </VStack>\n    </Box>\n  );\n});\n"],"names":["Scaffold","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","VStack","styles"],"mappings":";;;;;kEAaaA,IAAWC,EAAM,WAAuC,SACnE;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,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,EAAKL,GAAW,cAAc;AAAA,MACxC,GAAGC;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAZ;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG,EAAKE,EAAO,gBAAgB,GAAG,oBAAoB;AAAA,UAC9D,QAAQ;AAAA,UAEP,UAAAhB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/layouts/sidebar_end/sidebar_end.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
-import { Box as x } from "../../stacks/box/box.js";
-import { VStack as l } from "../../stacks/v_stack.js";
-import { clsx as B } from "clsx";
-import _ from "react";
-import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebarEnd_cb253a2", c = { sidebarEndBox: y, sidebarEnd: S }, I = _.forwardRef(
+import { Box as p } from "../../stacks/box/box.js";
+import { VStack as x } from "../../stacks/v_stack.js";
+import { clsx as _ } from "clsx";
+import B from "react";
+import '../../sidebar_end.css';const u = "_sidebarEndBox_25f69cc", y = "_sidebarEnd_cb253a2", c = { sidebarEndBox: u, sidebarEnd: y }, I = B.forwardRef(
   function({
     hierarchy: t = "secondary",
     children: b,
@@ -13,13 +13,13 @@ import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebar
     maxWidth: a,
     minHeight: d,
     maxHeight: e,
-    hAlign: i,
-    vAlign: f = "start",
+    hAlign: f,
+    vAlign: i = "start",
     className: m,
     ...E
-  }, p) {
+  }, l) {
     return /* @__PURE__ */ n(
-      x,
+      p,
       {
         width: r,
         height: o,
@@ -31,7 +31,7 @@ import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebar
         as: "section",
         ...E,
         children: /* @__PURE__ */ n(
-          l,
+          x,
           {
             width: r,
             height: o,
@@ -39,11 +39,11 @@ import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebar
             maxWidth: a,
             minHeight: d,
             maxHeight: e,
-            hAlign: i,
-            vAlign: f,
-            ref: p,
+            hAlign: f,
+            vAlign: i,
+            ref: l,
             "data-hierarchy": t,
-            className: B(c.sidebarEnd, m, "sidebar-end"),
+            className: _(c.sidebarEnd, m, "sidebar-end"),
             zIndex: 0,
             children: b
           }

package/dist/layouts/sidebar_start/sidebar_start.js

@@ -1,9 +1,9 @@
 import { jsx as s } from "react/jsx-runtime";
-import { Box as x } from "../../stacks/box/box.js";
-import { VStack as l } from "../../stacks/v_stack.js";
-import { clsx as B } from "clsx";
-import _ from "react";
-import '../../sidebar_start.css';const y = "_sidebarStartBox_4353011", u = "_sidebarStart_5b1e45b", e = { sidebarStartBox: y, sidebarStart: u }, I = _.forwardRef(
+import { Box as p } from "../../stacks/box/box.js";
+import { VStack as x } from "../../stacks/v_stack.js";
+import { clsx as _ } from "clsx";
+import B from "react";
+import '../../sidebar_start.css';const u = "_sidebarStartBox_4353011", y = "_sidebarStart_5b1e45b", e = { sidebarStartBox: u, sidebarStart: y }, I = B.forwardRef(
   function({
     hierarchy: c = "secondary",
     children: d,
@@ -17,9 +17,9 @@ import '../../sidebar_start.css';const y = "_sidebarStartBox_4353011", u = "_sid
     vAlign: f = "start",
     className: m,
     ...n
-  }, p) {
+  }, l) {
     return /* @__PURE__ */ s(
-      x,
+      p,
       {
         width: b,
         height: i,
@@ -30,7 +30,7 @@ import '../../sidebar_start.css';const y = "_sidebarStartBox_4353011", u = "_sid
         className: e.sidebarStartBox,
         ...n,
         children: /* @__PURE__ */ s(
-          l,
+          x,
           {
             minWidth: r,
             maxWidth: t,
@@ -38,9 +38,9 @@ import '../../sidebar_start.css';const y = "_sidebarStartBox_4353011", u = "_sid
             maxHeight: o,
             hAlign: S,
             vAlign: f,
-            ref: p,
+            ref: l,
             "data-hierarchy": c,
-            className: B(e.sidebarStart, m, "sidebar-start"),
+            className: _(e.sidebarStart, m, "sidebar-start"),
             zIndex: 0,
             children: d
           }