@tcn/ui 0.3.0 → 0.3.2

package/dist/stacks/h_stack.js

@@ -1,24 +1,24 @@
-import { jsx as K } from "react/jsx-runtime";
-import { clsx as L } from "clsx";
-import M from "react";
-import { removeUndefinedProperties as O } from "./utils/remove_undefined_properties.js";
-import { s as Q } from "../stack.module-CBV1f12Z.js";
+import { jsx as J } from "react/jsx-runtime";
+import { clsx as K } from "clsx";
+import L from "react";
+import { removeUndefinedProperties as M } from "./utils/remove_undefined_properties.js";
+import { s as O } from "../stack.module-CBV1f12Z.js";
 import { isCustomSizeProp as r } from "./utils/isCustomSizeProp.js";
-const tt = M.forwardRef(function({
+const tt = L.forwardRef(function({
   as: s = "div",
   children: i,
   style: n,
   className: l,
   hAlign: d = "start",
   vAlign: m = "center",
-  inline: f,
-  allowFlow: c,
+  inline: c,
+  allowFlow: f,
   width: t = "default",
   minWidth: p,
-  maxWidth: h,
+  maxWidth: u,
   height: a = "default",
-  growWeight: k,
-  shrinkWeight: u,
+  growWeight: h,
+  shrinkWeight: k,
   minHeight: g,
   maxHeight: v,
   padding: y,
@@ -30,29 +30,29 @@ const tt = M.forwardRef(function({
   paddingBottom: P,
   margin: R,
   marginBlock: W,
-  marginInline: j,
-  marginInlineStart: z,
-  marginInlineEnd: A,
-  marginTop: C,
-  marginBottom: N,
-  zIndex: U,
+  marginInline: _,
+  marginInlineStart: j,
+  marginInlineEnd: z,
+  marginTop: A,
+  marginBottom: C,
+  zIndex: N,
   overflowX: o,
   overflowY: e,
-  gap: b,
-  rowGap: q,
-  columnGap: D,
-  ...E
-}, F) {
-  const G = s, I = {
+  gap: U,
+  rowGap: b,
+  columnGap: q,
+  ...D
+}, E) {
+  const F = s, G = {
     minWidth: p,
     width: r(t) ? void 0 : t,
-    maxWidth: h,
+    maxWidth: u,
     minHeight: g,
     height: r(a) ? void 0 : a,
     maxHeight: v,
-    flexGrow: k,
-    flexShrink: u,
-    zIndex: U,
+    flexGrow: h,
+    flexShrink: k,
+    zIndex: N,
     overflowX: o,
     overflowY: e,
     padding: y,
@@ -64,33 +64,33 @@ const tt = M.forwardRef(function({
     paddingBottom: P,
     margin: R,
     marginBlock: W,
-    marginInline: j,
-    marginInlineStart: z,
-    marginInlineEnd: A,
-    marginTop: C,
-    marginBottom: N,
-    gap: b,
-    rowGap: q,
-    columnGap: D
-  }, J = {
-    ...O(I),
+    marginInline: _,
+    marginInlineStart: j,
+    marginInlineEnd: z,
+    marginTop: A,
+    marginBottom: C,
+    gap: U,
+    rowGap: b,
+    columnGap: q
+  }, I = {
+    ...M(G),
     ...n
   };
-  return /* @__PURE__ */ K(
-    G,
+  return /* @__PURE__ */ J(
+    F,
     {
-      ref: F,
-      className: L(Q["h-stack"], l, "h-stack", "stack"),
-      style: J,
-      "data-inline": !!f,
-      "data-allow-flow": !!c,
+      ref: E,
+      className: K(O["h-stack"], l, "tcn-h-stack", "tcn-stack"),
+      style: I,
+      "data-inline": !!c,
+      "data-allow-flow": !!f,
       "data-v-alignment": m,
       "data-h-alignment": d,
       "data-height": a,
       "data-width": t,
       "data-overflow-x": o,
       "data-overflow-y": e,
-      ...E,
+      ...D,
       children: i
     }
   );

package/dist/stacks/h_stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"h_stack.js","sources":["../../src/stacks/h_stack.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { removeUndefinedProperties } from './utils/remove_undefined_properties.js';\nimport { CommonProps } from './types/common.js';\nimport { HorizontalProps, StackStyleProps } from './types/styles.js';\nimport styles from './stack.module.css';\nimport { isCustomSizeProp } from './utils/isCustomSizeProp.js';\n\nexport type HStackOwnProps = CommonProps & StackStyleProps & HorizontalProps;\nexport interface HStackProps<T extends HTMLElement = HTMLElement>\n  extends HStackOwnProps,\n    HTMLAttributes<T> {\n  as?: string;\n  children?: React.ReactNode;\n}\n\nexport const HStack = React.forwardRef(function HStack<T extends HTMLElement>(\n  {\n    as = 'div',\n    children,\n    style,\n    className,\n    hAlign = 'start',\n    vAlign = 'center',\n    inline,\n    allowFlow,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    growWeight: flexGrow,\n    shrinkWeight: flexShrink,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    overflowX,\n    overflowY,\n    gap,\n    rowGap,\n    columnGap,\n    ...attr\n  }: HStackProps<T>,\n  ref: React.Ref<T>\n) {\n  const As = as as React.ElementType;\n  const defaultStyles: any = {\n    minWidth,\n    width: !isCustomSizeProp(width) ? width : undefined,\n    maxWidth,\n    minHeight,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    maxHeight,\n    flexGrow,\n    flexShrink,\n    zIndex,\n    overflowX,\n    overflowY,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    gap,\n    rowGap,\n    columnGap,\n  };\n\n  const finalStyles: any = {\n    ...removeUndefinedProperties(defaultStyles),\n    ...style,\n  };\n\n  return (\n    <As\n      ref={ref}\n      className={clsx(styles['h-stack'], className, 'h-stack', 'stack')}\n      style={finalStyles}\n      data-inline={Boolean(inline)}\n      data-allow-flow={Boolean(allowFlow)}\n      data-v-alignment={vAlign}\n      data-h-alignment={hAlign}\n      data-height={height}\n      data-width={width}\n      data-overflow-x={overflowX}\n      data-overflow-y={overflowY}\n      {...attr}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["HStack","React","as","children","style","className","hAlign","vAlign","inline","allowFlow","width","minWidth","maxWidth","height","flexGrow","flexShrink","minHeight","maxHeight","padding","paddingBlock","paddingInline","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","overflowX","overflowY","gap","rowGap","columnGap","attr","ref","As","defaultStyles","isCustomSizeProp","finalStyles","removeUndefinedProperties","jsx","clsx","styles"],"mappings":";;;;;;AAgBO,MAAMA,KAASC,EAAM,WAAW,SACrC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKtC,GACLuC,IAAqB;AAAA,IACzB,UAAA9B;AAAA,IACA,OAAQ+B,EAAiBhC,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAE;AAAA,IACA,WAAAI;AAAA,IACA,QAAS0B,EAAiB7B,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAI;AAAA,IACA,UAAAH;AAAA,IACA,YAAAC;AAAA,IACA,QAAAiB;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAhB;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAI;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAGIM,IAAmB;AAAA,IACvB,GAAGC,EAA0BH,CAAa;AAAA,IAC1C,GAAGrC;AAAA,EAAA;AAGL,SACE,gBAAAyC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWO,EAAKC,EAAO,SAAS,GAAG1C,GAAW,WAAW,OAAO;AAAA,MAChE,OAAOsC;AAAA,MACP,eAAa,EAAQnC;AAAA,MACrB,mBAAiB,EAAQC;AAAA,MACzB,oBAAkBF;AAAA,MAClB,oBAAkBD;AAAA,MAClB,eAAaO;AAAA,MACb,cAAYH;AAAA,MACZ,mBAAiBuB;AAAA,MACjB,mBAAiBC;AAAA,MAChB,GAAGI;AAAA,MAEH,UAAAnC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"h_stack.js","sources":["../../src/stacks/h_stack.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { removeUndefinedProperties } from './utils/remove_undefined_properties.js';\nimport { CommonProps } from './types/common.js';\nimport { HorizontalProps, StackStyleProps } from './types/styles.js';\nimport styles from './stack.module.css';\nimport { isCustomSizeProp } from './utils/isCustomSizeProp.js';\n\nexport type HStackOwnProps = CommonProps & StackStyleProps & HorizontalProps;\nexport interface HStackProps<T extends HTMLElement = HTMLElement>\n  extends HStackOwnProps,\n    HTMLAttributes<T> {\n  as?: string;\n  children?: React.ReactNode;\n}\n\nexport const HStack = React.forwardRef(function HStack<T extends HTMLElement>(\n  {\n    as = 'div',\n    children,\n    style,\n    className,\n    hAlign = 'start',\n    vAlign = 'center',\n    inline,\n    allowFlow,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    growWeight: flexGrow,\n    shrinkWeight: flexShrink,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    overflowX,\n    overflowY,\n    gap,\n    rowGap,\n    columnGap,\n    ...attr\n  }: HStackProps<T>,\n  ref: React.Ref<T>\n) {\n  const As = as as React.ElementType;\n  const defaultStyles: any = {\n    minWidth,\n    width: !isCustomSizeProp(width) ? width : undefined,\n    maxWidth,\n    minHeight,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    maxHeight,\n    flexGrow,\n    flexShrink,\n    zIndex,\n    overflowX,\n    overflowY,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    gap,\n    rowGap,\n    columnGap,\n  };\n\n  const finalStyles: any = {\n    ...removeUndefinedProperties(defaultStyles),\n    ...style,\n  };\n\n  return (\n    <As\n      ref={ref}\n      className={clsx(styles['h-stack'], className, 'tcn-h-stack', 'tcn-stack')}\n      style={finalStyles}\n      data-inline={Boolean(inline)}\n      data-allow-flow={Boolean(allowFlow)}\n      data-v-alignment={vAlign}\n      data-h-alignment={hAlign}\n      data-height={height}\n      data-width={width}\n      data-overflow-x={overflowX}\n      data-overflow-y={overflowY}\n      {...attr}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["HStack","React","as","children","style","className","hAlign","vAlign","inline","allowFlow","width","minWidth","maxWidth","height","flexGrow","flexShrink","minHeight","maxHeight","padding","paddingBlock","paddingInline","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","overflowX","overflowY","gap","rowGap","columnGap","attr","ref","As","defaultStyles","isCustomSizeProp","finalStyles","removeUndefinedProperties","jsx","clsx","styles"],"mappings":";;;;;;AAgBO,MAAMA,KAASC,EAAM,WAAW,SACrC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKtC,GACLuC,IAAqB;AAAA,IACzB,UAAA9B;AAAA,IACA,OAAQ+B,EAAiBhC,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAE;AAAA,IACA,WAAAI;AAAA,IACA,QAAS0B,EAAiB7B,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAI;AAAA,IACA,UAAAH;AAAA,IACA,YAAAC;AAAA,IACA,QAAAiB;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAhB;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAI;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAGIM,IAAmB;AAAA,IACvB,GAAGC,EAA0BH,CAAa;AAAA,IAC1C,GAAGrC;AAAA,EAAA;AAGL,SACE,gBAAAyC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWO,EAAKC,EAAO,SAAS,GAAG1C,GAAW,eAAe,WAAW;AAAA,MACxE,OAAOsC;AAAA,MACP,eAAa,EAAQnC;AAAA,MACrB,mBAAiB,EAAQC;AAAA,MACzB,oBAAkBF;AAAA,MAClB,oBAAkBD;AAAA,MAClB,eAAaO;AAAA,MACb,cAAYH;AAAA,MACZ,mBAAiBuB;AAAA,MACjB,mBAAiBC;AAAA,MAChB,GAAGI;AAAA,MAEH,UAAAnC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/stacks/spacer.js

@@ -1,25 +1,25 @@
-import { jsx as m } from "react/jsx-runtime";
-import { clsx as p } from "clsx";
-import d from "react";
-const g = d.forwardRef(function({
-  width: o = "auto",
-  height: t = "auto",
+import { jsx as p } from "react/jsx-runtime";
+import { clsx as d } from "clsx";
+import m from "react";
+const g = m.forwardRef(function({
+  width: t = "auto",
+  height: e = "auto",
   fullHeight: n = !1,
-  fullWidth: r = !1,
-  fillSpaceWeight: a = 1,
+  fullWidth: a = !1,
+  fillSpaceWeight: r = 1,
   style: s,
-  className: f
-}, c) {
-  const l = o === "auto" && t === "auto" ? a : void 0, e = r ? "100%" : o, i = n ? "100%" : t;
-  return /* @__PURE__ */ m(
+  className: c
+}, f) {
+  const l = t === "auto" && e === "auto" ? r : void 0, o = a ? "100%" : t, i = n ? "100%" : e;
+  return /* @__PURE__ */ p(
     "div",
     {
-      ref: c,
+      ref: f,
       style: {
         ...s,
         position: "relative",
-        width: e,
-        minWidth: e,
+        width: o,
+        minWidth: o,
         height: i,
         minHeight: i,
         overflow: "hidden",
@@ -27,7 +27,7 @@ const g = d.forwardRef(function({
         zIndex: 1,
         flex: l
       },
-      className: p("spacer", f)
+      className: d("spacer", c, "tcn-spacer")
     }
   );
 });

package/dist/stacks/spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacer.js","sources":["../../src/stacks/spacer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface SpacerProps {\n  width?: React.CSSProperties['width'];\n  height?: React.CSSProperties['height'];\n  fullHeight?: boolean;\n  fullWidth?: boolean;\n  fillSpaceWeight?: number;\n  style?: React.CSSProperties;\n  className?: string;\n}\n\nexport const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spacer(\n  {\n    width = 'auto',\n    height = 'auto',\n    fullHeight = false,\n    fullWidth = false,\n    fillSpaceWeight = 1,\n    style,\n    className,\n  }: SpacerProps,\n  ref\n) {\n  const flex = width === 'auto' && height === 'auto' ? fillSpaceWeight : undefined;\n  const finalWidth = fullWidth ? '100%' : width;\n  const finalHeight = fullHeight ? '100%' : height;\n  return (\n    <div\n      ref={ref}\n      style={{\n        ...style,\n        position: 'relative',\n        width: finalWidth,\n        minWidth: finalWidth,\n        height: finalHeight,\n        minHeight: finalHeight,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        zIndex: 1,\n        flex,\n      }}\n      className={clsx('spacer', className)}\n    ></div>\n  );\n});\n"],"names":["Spacer","React","width","height","fullHeight","fullWidth","fillSpaceWeight","style","className","ref","flex","finalWidth","finalHeight","jsx","clsx"],"mappings":";;;AAaO,MAAMA,IAASC,EAAM,WAAwC,SAClE;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,iBAAAC,IAAkB;AAAA,EAClB,OAAAC;AAAA,EACA,WAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAOR,MAAU,UAAUC,MAAW,SAASG,IAAkB,QACjEK,IAAaN,IAAY,SAASH,GAClCU,IAAcR,IAAa,SAASD;AAC1C,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,OAAO;AAAA,QACL,GAAGF;AAAA,QACH,UAAU;AAAA,QACV,OAAOI;AAAA,QACP,UAAUA;AAAA,QACV,QAAQC;AAAA,QACR,WAAWA;AAAA,QACX,UAAU;AAAA,QACV,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,MAAAF;AAAA,MAAA;AAAA,MAEF,WAAWI,EAAK,UAAUN,CAAS;AAAA,IAAA;AAAA,EAAA;AAGzC,CAAC;"}
+{"version":3,"file":"spacer.js","sources":["../../src/stacks/spacer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface SpacerProps {\n  width?: React.CSSProperties['width'];\n  height?: React.CSSProperties['height'];\n  fullHeight?: boolean;\n  fullWidth?: boolean;\n  fillSpaceWeight?: number;\n  style?: React.CSSProperties;\n  className?: string;\n}\n\nexport const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spacer(\n  {\n    width = 'auto',\n    height = 'auto',\n    fullHeight = false,\n    fullWidth = false,\n    fillSpaceWeight = 1,\n    style,\n    className,\n  }: SpacerProps,\n  ref\n) {\n  const flex = width === 'auto' && height === 'auto' ? fillSpaceWeight : undefined;\n  const finalWidth = fullWidth ? '100%' : width;\n  const finalHeight = fullHeight ? '100%' : height;\n  return (\n    <div\n      ref={ref}\n      style={{\n        ...style,\n        position: 'relative',\n        width: finalWidth,\n        minWidth: finalWidth,\n        height: finalHeight,\n        minHeight: finalHeight,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        zIndex: 1,\n        flex,\n      }}\n      className={clsx('spacer', className, 'tcn-spacer')}\n    ></div>\n  );\n});\n"],"names":["Spacer","React","width","height","fullHeight","fullWidth","fillSpaceWeight","style","className","ref","flex","finalWidth","finalHeight","jsx","clsx"],"mappings":";;;AAaO,MAAMA,IAASC,EAAM,WAAwC,SAClE;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,iBAAAC,IAAkB;AAAA,EAClB,OAAAC;AAAA,EACA,WAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAOR,MAAU,UAAUC,MAAW,SAASG,IAAkB,QACjEK,IAAaN,IAAY,SAASH,GAClCU,IAAcR,IAAa,SAASD;AAC1C,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,OAAO;AAAA,QACL,GAAGF;AAAA,QACH,UAAU;AAAA,QACV,OAAOI;AAAA,QACP,UAAUA;AAAA,QACV,QAAQC;AAAA,QACR,WAAWA;AAAA,QACX,UAAU;AAAA,QACV,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,MAAAF;AAAA,MAAA;AAAA,MAEF,WAAWI,EAAK,UAAUN,GAAW,YAAY;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}

package/dist/stacks/story_components/circle.js

@@ -1,25 +1,25 @@
-import { jsx as s } from "react/jsx-runtime";
-import f from "react";
+import { jsx as f } from "react/jsx-runtime";
+import s from "react";
 import { ZStack as m } from "../z_stack.js";
 import { clsx as n } from "clsx";
-import '../../circle.css';const a = "_circle_2f733a0", p = { circle: a }, w = f.forwardRef(function({ color: r = "#90d9c7", size: c = "150px", style: t, className: o, ...e }, i) {
-  const l = {
+import '../../circle.css';const a = "_circle_2f733a0", p = { circle: a }, y = s.forwardRef(function({ color: r = "#90d9c7", size: c = "150px", style: t, className: o, ...e }, l) {
+  const i = {
     ...t,
     "--color": r
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ f(
     m,
     {
-      ref: i,
-      style: l,
+      ref: l,
+      style: i,
       width: c,
       height: c,
-      className: n(o, p.circle),
+      className: n(o, p.circle, "tcn-circle"),
       ...e
     }
   );
 });
 export {
-  w as Circle
+  y as Circle
 };
 //# sourceMappingURL=circle.js.map

package/dist/stacks/story_components/circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"circle.js","sources":["../../../src/stacks/story_components/circle.tsx"],"sourcesContent":["import React from 'react';\nimport { ZStack, ZStackProps } from '../z_stack.js';\nimport styles from './circle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface CircleProps extends ZStackProps {\n  color?: string;\n  size?: string;\n}\n\nexport const Circle = React.forwardRef(function Circle(\n  { color = '#90d9c7', size = '150px', style, className, ...props }: CircleProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <ZStack\n      ref={ref}\n      style={finalStyle}\n      width={size}\n      height={size}\n      className={clsx(className, styles['circle'])}\n      {...props}\n    />\n  );\n});\n"],"names":["Circle","React","color","size","style","className","props","ref","finalStyle","jsx","ZStack","clsx","styles"],"mappings":";;;;gDAUaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,IAAQ,WAAW,MAAAC,IAAO,SAAS,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGJ;AAAA,IACH,WAAWF;AAAA,EAAA;AAGb,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,OAAOC;AAAA,MACP,OAAOL;AAAA,MACP,QAAQA;AAAA,MACR,WAAWQ,EAAKN,GAAWO,EAAO,MAAS;AAAA,MAC1C,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"circle.js","sources":["../../../src/stacks/story_components/circle.tsx"],"sourcesContent":["import React from 'react';\nimport { ZStack, ZStackProps } from '../z_stack.js';\nimport styles from './circle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface CircleProps extends ZStackProps {\n  color?: string;\n  size?: string;\n}\n\nexport const Circle = React.forwardRef(function Circle(\n  { color = '#90d9c7', size = '150px', style, className, ...props }: CircleProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <ZStack\n      ref={ref}\n      style={finalStyle}\n      width={size}\n      height={size}\n      className={clsx(className, styles['circle'], 'tcn-circle')}\n      {...props}\n    />\n  );\n});\n"],"names":["Circle","React","color","size","style","className","props","ref","finalStyle","jsx","ZStack","clsx","styles"],"mappings":";;;;gDAUaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,IAAQ,WAAW,MAAAC,IAAO,SAAS,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGJ;AAAA,IACH,WAAWF;AAAA,EAAA;AAGb,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,OAAOC;AAAA,MACP,OAAOL;AAAA,MACP,QAAQA;AAAA,MACR,WAAWQ,EAAKN,GAAWO,EAAO,QAAW,YAAY;AAAA,MACxD,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/stacks/story_components/picture_placeholder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"picture_placeholder.d.ts","sourceRoot":"","sources":["../../../src/stacks/story_components/picture_placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,+FAgC7B,CAAC"}
+{"version":3,"file":"picture_placeholder.d.ts","sourceRoot":"","sources":["../../../src/stacks/story_components/picture_placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,+FAoC7B,CAAC"}

package/dist/stacks/story_components/picture_placeholder.js

@@ -1,18 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import m from "react";
 import { clsx as s } from "clsx";
 import '../../picture_placeholder.css';const i = "_picture-placeholder_ec357fb", p = { "picture-placeholder": i }, f = m.forwardRef(function({
-  color: e = "currentColor",
+  color: r = "currentColor",
   size: c = "150px",
   style: l,
-  className: o,
-  ...t
+  className: t,
+  ...o
 }, h) {
   const v = {
     ...l,
-    "--color": e
+    "--color": r
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "svg",
     {
       ref: h,
@@ -20,10 +20,14 @@ import '../../picture_placeholder.css';const i = "_picture-placeholder_ec357fb",
       height: c,
       viewBox: "0 0 16 16",
       xmlns: "http://www.w3.org/2000/svg",
-      className: s(o, p["picture-placeholder"]),
+      className: s(
+        t,
+        p["picture-placeholder"],
+        "tcn-picture-placeholder"
+      ),
       style: v,
-      ...t,
-      children: /* @__PURE__ */ r(
+      ...o,
+      children: /* @__PURE__ */ e(
         "path",
         {
           d: "m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0",

package/dist/stacks/story_components/picture_placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"picture_placeholder.js","sources":["../../../src/stacks/story_components/picture_placeholder.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport styles from './picture_placeholder.module.css';\nimport { clsx } from 'clsx';\n\nexport interface PicturePlaceholderProps extends HTMLAttributes<SVGSVGElement> {\n  color?: string;\n  size?: string;\n}\n\nexport const PicturePlaceholder = React.forwardRef(function PicturePlaceholder(\n  {\n    color = 'currentColor',\n    size = '150px',\n    style,\n    className,\n    ...props\n  }: PicturePlaceholderProps,\n  ref: React.Ref<SVGSVGElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 16 16\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={clsx(className, styles['picture-placeholder'])}\n      style={finalStyle}\n      {...props}\n    >\n      <path\n        d=\"m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n});\n"],"names":["PicturePlaceholder","React","color","size","style","className","props","ref","finalStyle","jsx","clsx","styles"],"mappings":";;;4EASaA,IAAqBC,EAAM,WAAW,SACjD;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGJ;AAAA,IACH,WAAWF;AAAA,EAAA;AAGb,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,WAAWO,EAAKL,GAAWM,EAAO,qBAAqB,CAAC;AAAA,MACxD,OAAOH;AAAA,MACN,GAAGF;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"picture_placeholder.js","sources":["../../../src/stacks/story_components/picture_placeholder.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport styles from './picture_placeholder.module.css';\nimport { clsx } from 'clsx';\n\nexport interface PicturePlaceholderProps extends HTMLAttributes<SVGSVGElement> {\n  color?: string;\n  size?: string;\n}\n\nexport const PicturePlaceholder = React.forwardRef(function PicturePlaceholder(\n  {\n    color = 'currentColor',\n    size = '150px',\n    style,\n    className,\n    ...props\n  }: PicturePlaceholderProps,\n  ref: React.Ref<SVGSVGElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 16 16\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={clsx(\n        className,\n        styles['picture-placeholder'],\n        'tcn-picture-placeholder'\n      )}\n      style={finalStyle}\n      {...props}\n    >\n      <path\n        d=\"m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n});\n"],"names":["PicturePlaceholder","React","color","size","style","className","props","ref","finalStyle","jsx","clsx","styles"],"mappings":";;;4EASaA,IAAqBC,EAAM,WAAW,SACjD;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGJ;AAAA,IACH,WAAWF;AAAA,EAAA;AAGb,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,WAAWO;AAAA,QACTL;AAAA,QACAM,EAAO,qBAAqB;AAAA,QAC5B;AAAA,MAAA;AAAA,MAEF,OAAOH;AAAA,MACN,GAAGF;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AAGN,CAAC;"}

package/dist/stacks/story_components/rect.js

@@ -2,11 +2,11 @@ import { jsx as n } from "react/jsx-runtime";
 import a from "react";
 import { Box as l } from "../box/box.js";
 import { clsx as i } from "clsx";
-import '../../rect.css';const p = "_rect_60482cd", x = { rect: p }, j = a.forwardRef(function({
+import '../../rect.css';const p = "_rect_60482cd", d = { rect: p }, j = a.forwardRef(function({
   color: t = "#acdef0",
   style: o,
-  className: r,
-  width: c = "100%",
+  className: c,
+  width: r = "100%",
   height: e = "auto",
   ...s
 }, f) {
@@ -19,8 +19,8 @@ import '../../rect.css';const p = "_rect_60482cd", x = { rect: p }, j = a.forwar
     {
       ref: f,
       style: m,
-      className: i(r, x.rect),
-      width: c,
+      className: i(c, d.rect, "tcn-rect"),
+      width: r,
       height: e,
       ...s
     }

package/dist/stacks/story_components/rect.js.map

@@ -1 +1 @@
-{"version":3,"file":"rect.js","sources":["../../../src/stacks/story_components/rect.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, BoxProps } from '../box/box.js';\nimport styles from './rect.module.css';\nimport { clsx } from 'clsx';\n\nexport interface RectProps extends BoxProps {\n  color?: string;\n}\n\nexport const Rect = React.forwardRef(function Rect(\n  {\n    color = '#acdef0',\n    style,\n    className,\n    width = '100%',\n    height = 'auto',\n    ...props\n  }: RectProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <Box\n      ref={ref}\n      style={finalStyle}\n      className={clsx(className, styles['rect'])}\n      width={width}\n      height={height}\n      {...props}\n    />\n  );\n});\n"],"names":["Rect","React","color","style","className","width","height","props","ref","finalStyle","jsx","Box","clsx","styles"],"mappings":";;;;4CASaA,IAAOC,EAAM,WAAW,SACnC;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGN;AAAA,IACH,WAAWD;AAAA,EAAA;AAGb,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,OAAOC;AAAA,MACP,WAAWG,EAAKR,GAAWS,EAAO,IAAO;AAAA,MACzC,OAAAR;AAAA,MACA,QAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"rect.js","sources":["../../../src/stacks/story_components/rect.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, BoxProps } from '../box/box.js';\nimport styles from './rect.module.css';\nimport { clsx } from 'clsx';\n\nexport interface RectProps extends BoxProps {\n  color?: string;\n}\n\nexport const Rect = React.forwardRef(function Rect(\n  {\n    color = '#acdef0',\n    style,\n    className,\n    width = '100%',\n    height = 'auto',\n    ...props\n  }: RectProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <Box\n      ref={ref}\n      style={finalStyle}\n      className={clsx(className, styles['rect'], 'tcn-rect')}\n      width={width}\n      height={height}\n      {...props}\n    />\n  );\n});\n"],"names":["Rect","React","color","style","className","width","height","props","ref","finalStyle","jsx","Box","clsx","styles"],"mappings":";;;;4CASaA,IAAOC,EAAM,WAAW,SACnC;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGN;AAAA,IACH,WAAWD;AAAA,EAAA;AAGb,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,OAAOC;AAAA,MACP,WAAWG,EAAKR,GAAWS,EAAO,MAAS,UAAU;AAAA,MACrD,OAAAR;AAAA,MACA,QAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/stacks/story_components/style_box.js

@@ -1,12 +1,12 @@
 import { jsx as p } from "react/jsx-runtime";
 import s from "react";
 import { Box as i } from "../box/box.js";
-import { extractStyleProps as n } from "../utils/extract_style_props.js";
-const B = s.forwardRef(function({ className: o, children: r, ...t }, e) {
-  const [m, f] = n(t);
+import { extractStyleProps as l } from "../utils/extract_style_props.js";
+const d = s.forwardRef(function({ className: o, children: r, ...t }, e) {
+  const [m, f] = l(t);
   return /* @__PURE__ */ p(i, { ref: e, className: o, style: m, ...f, children: r });
 });
 export {
-  B as StyleBox
+  d as StyleBox
 };
 //# sourceMappingURL=style_box.js.map

package/dist/stacks/utils/use_is_collapsed.js

@@ -1,18 +1,18 @@
 import d, { useLayoutEffect as l } from "react";
-function c(a, s) {
-  const [i, n] = d.useState(!a);
+function c(r, s) {
+  const [i, n] = d.useState(!r);
   return l(() => {
     const t = s.current;
     if (!t) return;
-    const o = () => {
+    const a = () => {
       const { isCollapsed: e } = t.dataset;
       e === "false" && n(!1);
-    }, r = () => {
+    }, o = () => {
       const { isCollapsed: e } = t.dataset;
       e === "true" && n(!0);
     };
-    return t.addEventListener("transitionstart", o), t.addEventListener("transitionend", r), () => {
-      t.removeEventListener("transitionstart", o), t.removeEventListener("transitionend", r);
+    return t.addEventListener("transitionstart", a), t.addEventListener("transitionend", o), () => {
+      t.removeEventListener("transitionstart", a), t.removeEventListener("transitionend", o);
     };
   }, [s]), i;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"v_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/v_collapsible_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,6FAmC1B,CAAC"}
+{"version":3,"file":"v_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/v_collapsible_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,6FAuC1B,CAAC"}

package/dist/stacks/v_collapsible_box.js

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

package/dist/stacks/v_collapsible_box.js.map

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

package/dist/stacks/v_stack.js

@@ -1,23 +1,23 @@
-import { jsx as J } from "react/jsx-runtime";
-import { clsx as K } from "clsx";
-import L from "react";
-import { removeUndefinedProperties as M } from "./utils/remove_undefined_properties.js";
-import { s as O } from "../stack.module-CBV1f12Z.js";
+import { jsx as I } from "react/jsx-runtime";
+import { clsx as J } from "clsx";
+import K from "react";
+import { removeUndefinedProperties as L } from "./utils/remove_undefined_properties.js";
+import { s as M } from "../stack.module-CBV1f12Z.js";
 import { isCustomSizeProp as s } from "./utils/isCustomSizeProp.js";
-const tt = L.forwardRef(function({
-  as: i = "div",
-  children: l,
-  style: d,
-  className: n,
+const tt = K.forwardRef(function({
+  as: l = "div",
+  children: i,
+  style: n,
+  className: d,
   hAlign: f = "center",
   vAlign: m = "start",
   inline: t,
   allowFlow: c,
   width: a = "default",
   minWidth: p,
-  maxWidth: v,
+  maxWidth: u,
   height: o = "default",
-  minHeight: u,
+  minHeight: v,
   maxHeight: k,
   growWeight: x,
   shrinkWeight: y,
@@ -30,30 +30,30 @@ const tt = L.forwardRef(function({
   paddingBottom: R,
   margin: V,
   marginBlock: W,
-  marginInline: j,
-  marginInlineStart: z,
-  marginInlineEnd: A,
-  marginTop: C,
-  marginBottom: N,
-  zIndex: U,
+  marginInline: _,
+  marginInlineStart: j,
+  marginInlineEnd: z,
+  marginTop: A,
+  marginBottom: C,
+  zIndex: N,
   overflowY: e,
   overflowX: r,
-  gap: b,
-  rowGap: q,
-  columnGap: D,
-  ...E
-}, F) {
-  const G = i, H = {
+  gap: U,
+  rowGap: b,
+  columnGap: q,
+  ...D
+}, E) {
+  const F = l, G = {
     display: t == null ? void 0 : t ? "inline-flex" : "flex",
     minWidth: p,
     width: s(a) ? void 0 : a,
-    maxWidth: v,
-    minHeight: u,
+    maxWidth: u,
+    minHeight: v,
     height: s(o) ? void 0 : o,
     maxHeight: k,
     flexGrow: x,
     flexShrink: y,
-    zIndex: U,
+    zIndex: N,
     overflowX: r,
     overflowY: e,
     padding: g,
@@ -65,24 +65,24 @@ const tt = L.forwardRef(function({
     paddingBottom: R,
     margin: V,
     marginBlock: W,
-    marginInline: j,
-    marginInlineStart: z,
-    marginInlineEnd: A,
-    marginTop: C,
-    marginBottom: N,
-    gap: b,
-    rowGap: q,
-    columnGap: D
-  }, I = {
-    ...M(H),
-    ...d
+    marginInline: _,
+    marginInlineStart: j,
+    marginInlineEnd: z,
+    marginTop: A,
+    marginBottom: C,
+    gap: U,
+    rowGap: b,
+    columnGap: q
+  }, H = {
+    ...L(G),
+    ...n
   };
-  return /* @__PURE__ */ J(
-    G,
+  return /* @__PURE__ */ I(
+    F,
     {
-      ref: F,
-      className: K(O["v-stack"], n, "v-stack", "stack"),
-      style: I,
+      ref: E,
+      className: J(M["v-stack"], d, "tcn-v-stack", "tcn-stack"),
+      style: H,
       "data-inline": !!t,
       "data-allow-flow": !!c,
       "data-v-alignment": m,
@@ -91,8 +91,8 @@ const tt = L.forwardRef(function({
       "data-width": a,
       "data-overflow-y": e,
       "data-overflow-x": r,
-      ...E,
-      children: l
+      ...D,
+      children: i
     }
   );
 });