@tcn/ui 0.12.5 → 0.13.0

package/dist/layouts/index.js

@@ -2,56 +2,54 @@ import { Column as e } from "./column/column.js";
 import { Divider as p } from "./divider/divider.js";
 import { Grid as m } from "./grid/grid.js";
 import { Item as i } from "./list/item.js";
-import { List as a } from "./list/list.js";
+import { List as d } from "./list/list.js";
 import { SidebarEnd as S } from "./sidebar_end/sidebar_end.js";
 import { SidebarStart as n } from "./sidebar_start/sidebar_start.js";
 import { Scaffold as y } from "./scaffold/scaffold.js";
-import { HBody as R } from "./body/h_body.js";
-import { VBody as s } from "./body/v_body.js";
-import { Footer as u } from "./footer/footer.js";
-import { Header as D } from "./header/header.js";
-import { UtilityBar as G } from "./utility_bar/utility_bar.js";
-import { Group as g } from "./group/group.js";
-import { Bar as w } from "./bar/bar.js";
-import { Row as E } from "./row/row.js";
-import { Section as L } from "./section/section.js";
-import { Heading as h } from "./section/heading.js";
-import { Responsive as q } from "./responsive/responsive.js";
-import { Breakpoint as A } from "./responsive/breakpoint.js";
-import { TBody as K, TD as M, TFoot as N, TH as O, THead as P, TR as Q, TTable as W } from "./table/table.js";
-import { Rail as Y } from "./rail/rail.js";
-import { Side as _ } from "./rail/side/side.js";
-import { UtilityStrip as oo } from "./rail/utility_strip/utility_strip.js";
+import { Body as R } from "./body/body.js";
+import { Footer as s } from "./footer/footer.js";
+import { Header as u } from "./header/header.js";
+import { UtilityBar as D } from "./utility_bar/utility_bar.js";
+import { Group as G } from "./group/group.js";
+import { Bar as g } from "./bar/bar.js";
+import { Row as w } from "./row/row.js";
+import { Section as E } from "./section/section.js";
+import { Heading as L } from "./section/heading.js";
+import { Responsive as j } from "./responsive/responsive.js";
+import { Breakpoint as z } from "./responsive/breakpoint.js";
+import { TBody as J, TD as K, TFoot as M, TH as N, THead as O, TR as P, TTable as Q } from "./table/table.js";
+import { Rail as W } from "./rail/rail.js";
+import { Side as Y } from "./rail/side/side.js";
+import { UtilityStrip as _ } from "./rail/utility_strip/utility_strip.js";
 export {
-  w as Bar,
-  A as Breakpoint,
+  g as Bar,
+  R as Body,
+  z as Breakpoint,
   e as Column,
   p as Divider,
-  u as Footer,
+  s as Footer,
   m as Grid,
-  g as Group,
-  R as HBody,
-  D as Header,
-  h as Heading,
+  G as Group,
+  u as Header,
+  L as Heading,
   i as Item,
-  a as List,
-  Y as Rail,
-  q as Responsive,
-  E as Row,
+  d as List,
+  W as Rail,
+  j as Responsive,
+  w as Row,
   y as Scaffold,
-  L as Section,
-  _ as Side,
+  E as Section,
+  Y as Side,
   S as SidebarEnd,
   n as SidebarStart,
-  K as TBody,
-  M as TD,
-  N as TFoot,
-  O as TH,
-  P as THead,
-  Q as TR,
-  W as TTable,
-  G as UtilityBar,
-  oo as UtilityStrip,
-  s as VBody
+  J as TBody,
+  K as TD,
+  M as TFoot,
+  N as TH,
+  O as THead,
+  P as TR,
+  Q as TTable,
+  D as UtilityBar,
+  _ as UtilityStrip
 };
 //# 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/scaffold/scaffold.js

@@ -11,7 +11,7 @@ import '../../scaffold.css';const b = "_scaffold_b13e64b", i = "_scaffold-stack_
   maxWidth: f,
   minHeight: c,
   maxHeight: o,
-  hAlign: s,
+  hAlign: s = "start",
   vAlign: t = "start",
   className: p,
   ..._

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

@@ -1 +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, styles['scaffold'], '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","styles","VStack"],"mappings":";;;;;wGAaaA,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,GAAWM,EAAO,UAAa,cAAc;AAAA,MAC5D,GAAGL;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,EAAKC,EAAO,gBAAgB,GAAG,oBAAoB;AAAA,UAC9D,QAAQ;AAAA,UAEP,UAAAf;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}
+{"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 = 'start',\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, styles['scaffold'], '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","styles","VStack"],"mappings":";;;;;wGAaaA,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,IAAS;AAAA,EACT,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,GAAWM,EAAO,UAAa,cAAc;AAAA,MAC5D,GAAGL;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,EAAKC,EAAO,gBAAgB,GAAG,oBAAoB;AAAA,UAC9D,QAAQ;AAAA,UAEP,UAAAf;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/layouts/section/section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGnE,eAAO,MAAM,OAAO,iGAelB,CAAC"}
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/layouts/section/section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGnE,eAAO,MAAM,OAAO,iGAgBlB,CAAC"}

package/dist/layouts/section/section.js

@@ -1,22 +1,23 @@
-import { jsx as i } from "react/jsx-runtime";
-import m from "react";
-import { clsx as n } from "clsx";
-import { VStack as f } from "../../stacks/v_stack.js";
-import { s as a } from "../../section.module-0wyGkhDg.js";
-const R = m.forwardRef(function({ children: t, className: o, as: r = "section", style: c, ...e }, s) {
-  return /* @__PURE__ */ i(
-    f,
+import { jsx as m } from "react/jsx-runtime";
+import n from "react";
+import { clsx as f } from "clsx";
+import { VStack as a } from "../../stacks/v_stack.js";
+import { s as p } from "../../section.module-0wyGkhDg.js";
+const _ = n.forwardRef(function({ children: t, className: o, hAlign: r = "start", as: c = "section", style: s, ...e }, i) {
+  return /* @__PURE__ */ m(
+    a,
     {
-      as: r,
-      ref: s,
-      className: n(o, "tcn-surface", a.section, "tcn-section"),
-      style: c,
+      as: c,
+      ref: i,
+      hAlign: r,
+      className: f(o, "tcn-surface", p.section, "tcn-section"),
+      style: s,
       ...e,
       children: t
     }
   );
 });
 export {
-  R as Section
+  _ as Section
 };
 //# sourceMappingURL=section.js.map

package/dist/layouts/section/section.js.map

@@ -1 +1 @@
-{"version":3,"file":"section.js","sources":["../../../src/layouts/section/section.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport styles from './section.module.css';\n\nexport const Section = React.forwardRef<HTMLDivElement, VStackProps>(function Section(\n  { children, className, as = 'section', style, ...props },\n  ref\n) {\n  return (\n    <VStack\n      as={as}\n      ref={ref}\n      className={clsx(className, 'tcn-surface', styles.section, 'tcn-section')}\n      style={style}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Section","React","children","className","as","style","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;;AAKO,MAAMA,IAAUC,EAAM,WAAwC,SACnE,EAAE,UAAAC,GAAU,WAAAC,GAAW,IAAAC,IAAK,WAAW,OAAAC,GAAO,GAAGC,EAAA,GACjDC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAL;AAAA,MACA,KAAAG;AAAA,MACA,WAAWG,EAAKP,GAAW,eAAeQ,EAAO,SAAS,aAAa;AAAA,MACvE,OAAAN;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"section.js","sources":["../../../src/layouts/section/section.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport styles from './section.module.css';\n\nexport const Section = React.forwardRef<HTMLDivElement, VStackProps>(function Section(\n  { children, className, hAlign = 'start', as = 'section', style, ...props },\n  ref\n) {\n  return (\n    <VStack\n      as={as}\n      ref={ref}\n      hAlign={hAlign}\n      className={clsx(className, 'tcn-surface', styles.section, 'tcn-section')}\n      style={style}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Section","React","children","className","hAlign","as","style","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;;AAKO,MAAMA,IAAUC,EAAM,WAAwC,SACnE,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,IAAAC,IAAK,WAAW,OAAAC,GAAO,GAAGC,EAAA,GACnEC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAL;AAAA,MACA,KAAAG;AAAA,MACA,QAAAJ;AAAA,MACA,WAAWO,EAAKR,GAAW,eAAeS,EAAO,SAAS,aAAa;AAAA,MACvE,OAAAN;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/overlay/frame/frame.d.ts

@@ -6,8 +6,8 @@ export interface FrameOwnProps {
     veil?: boolean;
     resizable?: boolean;
 }
-export type FrameProps = Omit<BoxProps, 'enableResizeOnLeft' | 'enableResizeOnRight' | 'enableResizeOnTop' | 'enableResizeOnBottom'> & FrameOwnProps;
-export declare const Frame: React.ForwardRefExoticComponent<Omit<BoxProps<HTMLElement>, "enableResizeOnTop" | "enableResizeOnBottom" | "enableResizeOnLeft" | "enableResizeOnRight"> & FrameOwnProps & React.RefAttributes<HTMLElement>>;
+export type FrameProps = BoxProps & FrameOwnProps;
+export declare const Frame: React.ForwardRefExoticComponent<BoxProps<HTMLElement> & FrameOwnProps & React.RefAttributes<HTMLElement>>;
 interface FrameDialogProps extends BoxProps {
 }
 export declare const FrameDialog: React.ForwardRefExoticComponent<FrameDialogProps & React.RefAttributes<HTMLElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/overlay/frame/frame.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,QAAQ,EACN,oBAAoB,GACpB,qBAAqB,GACrB,mBAAmB,GACnB,sBAAsB,CACzB,GACC,aAAa,CAAC;AAEhB,eAAO,MAAM,KAAK,8MAqChB,CAAC;AACH,UAAU,gBAAiB,SAAQ,QAAQ;CAAG;AAE9C,eAAO,MAAM,WAAW,sFAkEvB,CAAC"}
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/overlay/frame/frame.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC;AAElD,eAAO,MAAM,KAAK,2GAyChB,CAAC;AACH,UAAU,gBAAiB,SAAQ,QAAQ;CAAG;AAE9C,eAAO,MAAM,WAAW,sFAkEvB,CAAC"}

package/dist/overlay/frame/frame.js

@@ -1,7 +1,7 @@
-import { jsx as e } from "react/jsx-runtime";
-import { clsx as O } from "clsx";
-import h, { useCallback as _ } from "react";
-import { flushSync as R } from "react-dom";
+import { jsx as i } from "react/jsx-runtime";
+import { clsx as F } from "clsx";
+import R, { useCallback as _ } from "react";
+import { flushSync as p } from "react-dom";
 import { Box as k } from "../../stacks/box/box.js";
 import "../../stacks/h_collapsible_box.js";
 import "../../stacks/h_stack.js";
@@ -12,82 +12,90 @@ import { ZStack as w } from "../../stacks/z_stack.js";
 import { useDragContainer as z } from "../../utils/dnd/context.js";
 import { Draggable as C } from "../../utils/dnd/draggable/draggable.js";
 import { Portal as P } from "../portal/portal.js";
-import '../../frame.css';const B = "_frame-dialog_2a77c1d", N = { "frame-dialog": B }, J = h.forwardRef(function({
-  children: f,
+import '../../frame.css';const S = "_frame-dialog_2a77c1d", B = { "frame-dialog": S }, J = R.forwardRef(function({
+  children: a,
   isOpen: c = !1,
-  draggable: i = !0,
-  veil: a = !1,
+  draggable: o = !0,
+  veil: l = !1,
   resizable: t = !0,
-  className: o,
-  ...n
-}, l) {
-  return c ? /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(w, { width: "100%", height: "100%", "data-is-veil": a, className: "tcn-frame-veil", children: /* @__PURE__ */ e(C, { draggable: i, children: /* @__PURE__ */ e(
-    S,
+  className: s,
+  enableResizeOnTop: m = !0,
+  enableResizeOnBottom: u = !0,
+  enableResizeOnStart: h = !0,
+  enableResizeOnEnd: r = !0,
+  enableResizeOnLeft: d = !1,
+  enableResizeOnRight: g = !1,
+  ...e
+}, n) {
+  return c ? /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(w, { width: "100%", height: "100%", "data-is-veil": l, className: "tcn-frame-veil", children: /* @__PURE__ */ i(C, { draggable: o, children: /* @__PURE__ */ i(
+    N,
     {
-      className: o,
-      ref: l,
-      enableResizeOnLeft: t,
-      enableResizeOnRight: t,
-      enableResizeOnTop: t,
-      enableResizeOnBottom: t,
-      draggable: i,
-      ...n,
-      children: f
+      className: s,
+      ref: n,
+      enableResizeOnStart: t && h,
+      enableResizeOnEnd: t && r,
+      enableResizeOnTop: t && m,
+      enableResizeOnBottom: t && u,
+      enableResizeOnRight: t && g,
+      enableResizeOnLeft: t && d,
+      draggable: o,
+      ...e,
+      children: a
     }
   ) }) }) }) : null;
-}), S = h.forwardRef(
+}), N = R.forwardRef(
   function({
-    as: f = "div",
+    as: a = "div",
     role: c = "dialog",
-    children: i,
-    className: a,
+    children: o,
+    className: l,
     draggable: t,
-    onWidthResize: o,
-    onHeightResize: n,
-    ...l
-  }, D) {
-    const m = z(), p = h.useCallback(
-      (r) => {
-        if (!t || r.currentDelta === 0) return;
-        const u = r.origin === "right" ? 1 : -1, g = r.currentDelta / 2 * u;
-        R(() => {
-          m.setPosition((s) => ({
-            x: s.x + g,
-            y: s.y
+    onWidthResize: s,
+    onHeightResize: m,
+    ...u
+  }, h) {
+    const r = z(), d = R.useCallback(
+      (e) => {
+        if (!t || e.currentDelta === 0) return;
+        const n = e.origin === "right" ? 1 : -1, x = e.currentDelta / 2 * n;
+        p(() => {
+          r.setPosition((f) => ({
+            x: f.x + x,
+            y: f.y
           }));
-        }), o?.(r);
+        }), s?.(e);
       },
-      [o, m, t]
-    ), F = _(
-      (r) => {
-        if (!t || r.currentDelta === 0) return;
-        const u = r.origin === "bottom" ? 1 : -1, s = r.currentDelta / 2 * u;
-        R(() => {
-          m.setPosition((d) => ({
-            x: d.x,
-            y: d.y + s
+      [s, r, t]
+    ), g = _(
+      (e) => {
+        if (!t || e.currentDelta === 0) return;
+        const n = e.origin === "bottom" ? 1 : -1, f = e.currentDelta / 2 * n;
+        p(() => {
+          r.setPosition((D) => ({
+            x: D.x,
+            y: D.y + f
           }));
-        }), n?.(r);
+        }), m?.(e);
       },
-      [n, m, t]
+      [m, r, t]
     );
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ i(
       k,
       {
-        className: O(N["frame-dialog"], "tcn-frame-dialog", a),
-        ref: D,
-        onWidthResize: p,
-        onHeightResize: F,
-        as: f,
+        className: F(B["frame-dialog"], "tcn-frame-dialog", l),
+        ref: h,
+        onWidthResize: d,
+        onHeightResize: g,
+        as: a,
         role: c,
-        ...l,
-        children: i
+        ...u,
+        children: o
       }
     );
   }
 );
 export {
   J as Frame,
-  S as FrameDialog
+  N as FrameDialog
 };
 //# sourceMappingURL=frame.js.map

package/dist/overlay/frame/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Box,\n  ZStack,\n  type BoxProps,\n  type OnHeightResizePayload,\n  type OnWidthResizePayload,\n} from '../../stacks/index.js';\nimport { useDragContainer } from '../../utils/dnd/context.js';\nimport { Draggable } from '../../utils/dnd/draggable/draggable.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './frame.module.css';\nexport interface FrameOwnProps {\n  isOpen?: boolean;\n  draggable?: boolean;\n  veil?: boolean;\n  resizable?: boolean;\n}\n\nexport type FrameProps = Omit<\n  BoxProps,\n  | 'enableResizeOnLeft'\n  | 'enableResizeOnRight'\n  | 'enableResizeOnTop'\n  | 'enableResizeOnBottom'\n> &\n  FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(\n  {\n    children,\n    isOpen = false,\n    draggable = true,\n    veil = false,\n    resizable = true,\n    className,\n    ...rest\n  }: FrameProps,\n  ref\n) {\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n        <Draggable draggable={draggable}>\n          <FrameDialog\n            className={className}\n            ref={ref}\n            enableResizeOnLeft={resizable}\n            enableResizeOnRight={resizable}\n            enableResizeOnTop={resizable}\n            enableResizeOnBottom={resizable}\n            // TODO: check to see if these should be enabled, and if so - if left/right should be disabled.\n            // Could add a \"directional\" prop and use that in conjunction with enableResizeOnStart/End and deprecate enableResizeOnLeft/Right.\n            // enableResizeOnStart={resizable}\n            // enableResizeOnEnd={resizable}\n            draggable={draggable}\n            {...rest}\n          >\n            {children}\n          </FrameDialog>\n        </Draggable>\n      </ZStack>\n    </Portal>\n  );\n});\ninterface FrameDialogProps extends BoxProps {}\n\nexport const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(\n  function FrameDialog(\n    {\n      as = 'div',\n      role = 'dialog',\n      children,\n      className,\n      draggable,\n      onWidthResize,\n      onHeightResize,\n      ...rest\n    }: FrameDialogProps,\n    ref: React.Ref<HTMLElement>\n  ) {\n    const drag = useDragContainer();\n\n    const handleWidthResize = React.useCallback(\n      (payload: OnWidthResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'right' ? 1 : -1;\n        const dx = (payload.currentDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x + dx,\n            y: prev.y,\n          }));\n        });\n\n        onWidthResize?.(payload);\n      },\n      [onWidthResize, drag, draggable]\n    );\n\n    const handleHeightResize = useCallback(\n      (payload: OnHeightResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'bottom' ? 1 : -1;\n        const half = payload.currentDelta / 2;\n        const dy = half * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x,\n            y: prev.y + dy,\n          }));\n        });\n        onHeightResize?.(payload);\n      },\n      [onHeightResize, drag, draggable]\n    );\n\n    return (\n      <Box\n        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}\n        ref={ref}\n        onWidthResize={handleWidthResize}\n        onHeightResize={handleHeightResize}\n        as={as}\n        role={role}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["Frame","React","children","isOpen","draggable","veil","resizable","className","rest","ref","jsx","Portal","ZStack","Draggable","FrameDialog","as","role","onWidthResize","onHeightResize","drag","useDragContainer","handleWidthResize","payload","sign","dx","flushSync","prev","handleHeightResize","useCallback","dy","Box","clsx","styles"],"mappings":";;;;;;;;;;;;;;8DAgCaA,IAAQC,EAAM,WAAoC,SAC7D;AAAA,EACE,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SAAKN,IAEH,gBAAAO,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAO,OAAM,QAAO,QAAO,QAAO,gBAAcP,GAAM,WAAU,kBAC/D,UAAA,gBAAAK,EAACG,KAAU,WAAAT,GACT,UAAA,gBAAAM;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAAP;AAAA,MACA,KAAAE;AAAA,MACA,oBAAoBH;AAAA,MACpB,qBAAqBA;AAAA,MACrB,mBAAmBA;AAAA,MACnB,sBAAsBA;AAAA,MAKtB,WAAAF;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAN;AAAA,IAAA;AAAA,EAAA,EACH,CACF,GACF,GACF,IAvBkB;AAyBtB,CAAC,GAGYY,IAAcb,EAAM;AAAA,EAC/B,SACE;AAAA,IACE,IAAAc,IAAK;AAAA,IACL,MAAAC,IAAO;AAAA,IACP,UAAAd;AAAA,IACA,WAAAK;AAAA,IACA,WAAAH;AAAA,IACA,eAAAa;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,GAELC,GACA;AACA,UAAMU,IAAOC,EAAA,GAEPC,IAAoBpB,EAAM;AAAA,MAC9B,CAACqB,MAAkC;AAEjC,YADI,CAAClB,KACDkB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,UAAU,IAAI,IACxCE,IAAMF,EAAQ,eAAe,IAAKC;AACxC,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK,IAAIF;AAAA,YACZ,GAAGE,EAAK;AAAA,UAAA,EACR;AAAA,QACJ,CAAC,GAEDT,IAAgBK,CAAO;AAAA,MACzB;AAAA,MACA,CAACL,GAAeE,GAAMf,CAAS;AAAA,IAAA,GAG3BuB,IAAqBC;AAAA,MACzB,CAACN,MAAmC;AAElC,YADI,CAAClB,KACDkB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,WAAW,IAAI,IAEzCO,IADOP,EAAQ,eAAe,IAClBC;AAClB,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK;AAAA,YACR,GAAGA,EAAK,IAAIG;AAAA,UAAA,EACZ;AAAA,QACJ,CAAC,GACDX,IAAiBI,CAAO;AAAA,MAC1B;AAAA,MACA,CAACJ,GAAgBC,GAAMf,CAAS;AAAA,IAAA;AAGlC,WACE,gBAAAM;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,cAAc,GAAG,oBAAoBzB,CAAS;AAAA,QACrE,KAAAE;AAAA,QACA,eAAeY;AAAA,QACf,gBAAgBM;AAAA,QAChB,IAAAZ;AAAA,QACA,MAAAC;AAAA,QACC,GAAGR;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Box,\n  ZStack,\n  type BoxProps,\n  type OnHeightResizePayload,\n  type OnWidthResizePayload,\n} from '../../stacks/index.js';\nimport { useDragContainer } from '../../utils/dnd/context.js';\nimport { Draggable } from '../../utils/dnd/draggable/draggable.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './frame.module.css';\nexport interface FrameOwnProps {\n  isOpen?: boolean;\n  draggable?: boolean;\n  veil?: boolean;\n  resizable?: boolean;\n}\n\nexport type FrameProps = BoxProps & FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(\n  {\n    children,\n    isOpen = false,\n    draggable = true,\n    veil = false,\n    resizable = true,\n    className,\n    enableResizeOnTop = true,\n    enableResizeOnBottom = true,\n    enableResizeOnStart = true,\n    enableResizeOnEnd = true,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    ...rest\n  }: FrameProps,\n  ref\n) {\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n        <Draggable draggable={draggable}>\n          <FrameDialog\n            className={className}\n            ref={ref}\n            enableResizeOnStart={resizable && enableResizeOnStart}\n            enableResizeOnEnd={resizable && enableResizeOnEnd}\n            enableResizeOnTop={resizable && enableResizeOnTop}\n            enableResizeOnBottom={resizable && enableResizeOnBottom}\n            enableResizeOnRight={resizable && enableResizeOnRight}\n            enableResizeOnLeft={resizable && enableResizeOnLeft}\n            draggable={draggable}\n            {...rest}\n          >\n            {children}\n          </FrameDialog>\n        </Draggable>\n      </ZStack>\n    </Portal>\n  );\n});\ninterface FrameDialogProps extends BoxProps {}\n\nexport const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(\n  function FrameDialog(\n    {\n      as = 'div',\n      role = 'dialog',\n      children,\n      className,\n      draggable,\n      onWidthResize,\n      onHeightResize,\n      ...rest\n    }: FrameDialogProps,\n    ref: React.Ref<HTMLElement>\n  ) {\n    const drag = useDragContainer();\n\n    const handleWidthResize = React.useCallback(\n      (payload: OnWidthResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'right' ? 1 : -1;\n        const dx = (payload.currentDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x + dx,\n            y: prev.y,\n          }));\n        });\n\n        onWidthResize?.(payload);\n      },\n      [onWidthResize, drag, draggable]\n    );\n\n    const handleHeightResize = useCallback(\n      (payload: OnHeightResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'bottom' ? 1 : -1;\n        const half = payload.currentDelta / 2;\n        const dy = half * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x,\n            y: prev.y + dy,\n          }));\n        });\n        onHeightResize?.(payload);\n      },\n      [onHeightResize, drag, draggable]\n    );\n\n    return (\n      <Box\n        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}\n        ref={ref}\n        onWidthResize={handleWidthResize}\n        onHeightResize={handleHeightResize}\n        as={as}\n        role={role}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["Frame","React","children","isOpen","draggable","veil","resizable","className","enableResizeOnTop","enableResizeOnBottom","enableResizeOnStart","enableResizeOnEnd","enableResizeOnLeft","enableResizeOnRight","rest","ref","jsx","Portal","ZStack","Draggable","FrameDialog","as","role","onWidthResize","onHeightResize","drag","useDragContainer","handleWidthResize","payload","sign","dx","flushSync","prev","handleHeightResize","useCallback","dy","Box","clsx","styles"],"mappings":";;;;;;;;;;;;;;8DAyBaA,IAAQC,EAAM,WAAoC,SAC7D;AAAA,EACE,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,sBAAAC,IAAuB;AAAA,EACvB,qBAAAC,IAAsB;AAAA,EACtB,mBAAAC,IAAoB;AAAA,EACpB,oBAAAC,IAAqB;AAAA,EACrB,qBAAAC,IAAsB;AAAA,EACtB,GAAGC;AACL,GACAC,GACA;AACA,SAAKZ,IAEH,gBAAAa,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAO,OAAM,QAAO,QAAO,QAAO,gBAAcb,GAAM,WAAU,kBAC/D,UAAA,gBAAAW,EAACG,KAAU,WAAAf,GACT,UAAA,gBAAAY;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAAb;AAAA,MACA,KAAAQ;AAAA,MACA,qBAAqBT,KAAaI;AAAA,MAClC,mBAAmBJ,KAAaK;AAAA,MAChC,mBAAmBL,KAAaE;AAAA,MAChC,sBAAsBF,KAAaG;AAAA,MACnC,qBAAqBH,KAAaO;AAAA,MAClC,oBAAoBP,KAAaM;AAAA,MACjC,WAAAR;AAAA,MACC,GAAGU;AAAA,MAEH,UAAAZ;AAAA,IAAA;AAAA,EAAA,EACH,CACF,GACF,GACF,IArBkB;AAuBtB,CAAC,GAGYkB,IAAcnB,EAAM;AAAA,EAC/B,SACE;AAAA,IACE,IAAAoB,IAAK;AAAA,IACL,MAAAC,IAAO;AAAA,IACP,UAAApB;AAAA,IACA,WAAAK;AAAA,IACA,WAAAH;AAAA,IACA,eAAAmB;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,GAELC,GACA;AACA,UAAMU,IAAOC,EAAA,GAEPC,IAAoB1B,EAAM;AAAA,MAC9B,CAAC2B,MAAkC;AAEjC,YADI,CAACxB,KACDwB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,UAAU,IAAI,IACxCE,IAAMF,EAAQ,eAAe,IAAKC;AACxC,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK,IAAIF;AAAA,YACZ,GAAGE,EAAK;AAAA,UAAA,EACR;AAAA,QACJ,CAAC,GAEDT,IAAgBK,CAAO;AAAA,MACzB;AAAA,MACA,CAACL,GAAeE,GAAMrB,CAAS;AAAA,IAAA,GAG3B6B,IAAqBC;AAAA,MACzB,CAACN,MAAmC;AAElC,YADI,CAACxB,KACDwB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,WAAW,IAAI,IAEzCO,IADOP,EAAQ,eAAe,IAClBC;AAClB,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK;AAAA,YACR,GAAGA,EAAK,IAAIG;AAAA,UAAA,EACZ;AAAA,QACJ,CAAC,GACDX,IAAiBI,CAAO;AAAA,MAC1B;AAAA,MACA,CAACJ,GAAgBC,GAAMrB,CAAS;AAAA,IAAA;AAGlC,WACE,gBAAAY;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,cAAc,GAAG,oBAAoB/B,CAAS;AAAA,QACrE,KAAAQ;AAAA,QACA,eAAeY;AAAA,QACf,gBAAgBM;AAAA,QAChB,IAAAZ;AAAA,QACA,MAAAC;AAAA,QACC,GAAGR;AAAA,QAEH,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/overlay/slide/slide.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { FrameProps } from '../frame/frame.js';
+export type SlideSide = 'top' | 'bottom' | 'start' | 'end';
+export interface SlideOwnProps {
+    side: SlideSide;
+}
+export type SlideProps = Omit<FrameProps, 'draggable' | 'enableResizeOnLeft' | 'enableResizeOnRight' | 'enableResizeOnTop' | 'enableResizeOnBottom' | 'enableResizeOnStart' | 'enableResizeOnEnd'> & SlideOwnProps;
+export declare const Slide: React.ForwardRefExoticComponent<Omit<FrameProps, "draggable" | "enableResizeOnTop" | "enableResizeOnEnd" | "enableResizeOnBottom" | "enableResizeOnStart" | "enableResizeOnLeft" | "enableResizeOnRight"> & SlideOwnProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=slide.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slide.d.ts","sourceRoot":"","sources":["../../../src/overlay/slide/slide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAM3D,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,UAAU,EACR,WAAW,GACX,oBAAoB,GACpB,qBAAqB,GACrB,mBAAmB,GACnB,sBAAsB,GACtB,qBAAqB,GACrB,mBAAmB,CACtB,GACC,aAAa,CAAC;AAGhB,eAAO,MAAM,KAAK,+PAwBhB,CAAC"}

package/dist/overlay/slide/slide.js

@@ -0,0 +1,29 @@
+import { jsx as s } from "react/jsx-runtime";
+import i from "react";
+import { Frame as m } from "../frame/frame.js";
+import { clsx as c } from "clsx";
+import '../../slide.css';const f = "_slide_d303bac", d = { slide: f }, _ = i.forwardRef(function({ children: a, side: t, resizable: o = !1, className: r, ...l }, n) {
+  const e = t === "top" || t === "bottom";
+  return /* @__PURE__ */ s(
+    m,
+    {
+      "data-side": t,
+      className: c(d.slide, r),
+      draggable: !1,
+      ref: n,
+      "data-is-vertical": e,
+      "data-is-horizontal": !e,
+      resizable: o,
+      enableResizeOnTop: t === "bottom",
+      enableResizeOnBottom: t === "top",
+      enableResizeOnStart: t === "end",
+      enableResizeOnEnd: t === "start",
+      ...l,
+      children: a
+    }
+  );
+});
+export {
+  _ as Slide
+};
+//# sourceMappingURL=slide.js.map

package/dist/overlay/slide/slide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide.js","sources":["../../../src/overlay/slide/slide.tsx"],"sourcesContent":["import React from 'react';\nimport { Frame, type FrameProps } from '../frame/frame.js';\nimport { clsx } from 'clsx';\n\n// Styles\nimport styles from './slide.module.css';\n\nexport type SlideSide = 'top' | 'bottom' | 'start' | 'end';\n\nexport interface SlideOwnProps {\n  side: SlideSide;\n}\n\nexport type SlideProps = Omit<\n  FrameProps,\n  | 'draggable'\n  | 'enableResizeOnLeft'\n  | 'enableResizeOnRight'\n  | 'enableResizeOnTop'\n  | 'enableResizeOnBottom'\n  | 'enableResizeOnStart'\n  | 'enableResizeOnEnd'\n> &\n  SlideOwnProps;\n\n// A Frame fixed to a side of a container (top, bottom, start, end) - disables dragging - and limits resizing to one side\nexport const Slide = React.forwardRef<HTMLElement, SlideProps>(function Slide(\n  { children, side, resizable = false, className, ...rest },\n  ref\n) {\n  const isVertical = side === 'top' || side === 'bottom';\n\n  return (\n    <Frame\n      data-side={side}\n      className={clsx(styles['slide'], className)}\n      draggable={false}\n      ref={ref}\n      data-is-vertical={isVertical}\n      data-is-horizontal={!isVertical}\n      resizable={resizable}\n      enableResizeOnTop={side === 'bottom'}\n      enableResizeOnBottom={side === 'top'}\n      enableResizeOnStart={side === 'end'}\n      enableResizeOnEnd={side === 'start'}\n      {...rest}\n    >\n      {children}\n    </Frame>\n  );\n});\n"],"names":["Slide","React","children","side","resizable","className","rest","ref","isVertical","jsx","Frame","clsx","styles"],"mappings":";;;;8CA0BaA,IAAQC,EAAM,WAAoC,SAC7D,EAAE,UAAAC,GAAU,MAAAC,GAAM,WAAAC,IAAY,IAAO,WAAAC,GAAW,GAAGC,EAAA,GACnDC,GACA;AACA,QAAMC,IAAaL,MAAS,SAASA,MAAS;AAE9C,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAWP;AAAA,MACX,WAAWQ,EAAKC,EAAO,OAAUP,CAAS;AAAA,MAC1C,WAAW;AAAA,MACX,KAAAE;AAAA,MACA,oBAAkBC;AAAA,MAClB,sBAAoB,CAACA;AAAA,MACrB,WAAAJ;AAAA,MACA,mBAAmBD,MAAS;AAAA,MAC5B,sBAAsBA,MAAS;AAAA,MAC/B,qBAAqBA,MAAS;AAAA,MAC9B,mBAAmBA,MAAS;AAAA,MAC3B,GAAGG;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/page.css

@@ -1 +1 @@
-@layer tcn-system{:where(._page_b219ddf){width:100%;height:100%;overflow:auto;z-index:1;gap:var(--gap);padding:var(--padding)}:where(._page_b219ddf>.stack){gap:var(--gap)}}
+@layer tcn-system{:where(._page_b219ddf){width:100%;height:100%;overflow:auto;z-index:1}}

package/dist/slide.css

@@ -0,0 +1 @@
+@layer tcn-system{:where(._slide_d303bac){position:absolute}:where(._slide_d303bac)[data-side=top],:where(._slide_d303bac)[data-side=bottom]{width:100%}:where(._slide_d303bac)[data-side=start],:where(._slide_d303bac)[data-side=end]{height:100%}:where(._slide_d303bac)[data-side=top]{top:0}:where(._slide_d303bac)[data-side=bottom]{bottom:0}:where(._slide_d303bac)[data-side=start]{left:0}:where(._slide_d303bac)[data-side=end]{right:0}}

package/dist/surfaces/aside/aside.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+export type AsideProps = ScaffoldProps;
+export declare const Aside: React.ForwardRefExoticComponent<ScaffoldProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=aside.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"aside.d.ts","sourceRoot":"","sources":["../../../src/surfaces/aside/aside.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAKlF,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC,eAAO,MAAM,KAAK,mFAahB,CAAC"}

package/dist/surfaces/aside/aside.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import a from "react";
+import { Scaffold as c } from "../../layouts/scaffold/scaffold.js";
+import f from "clsx";
+import '../../aside.css';const i = "_aside_e8b6b1e", d = { aside: i }, _ = a.forwardRef(function({ children: e, className: s, ...o }, t) {
+  return /* @__PURE__ */ r(
+    c,
+    {
+      ref: t,
+      className: f(d.aside, "tcn-surface", "tcn-aside", s),
+      ...o,
+      children: e
+    }
+  );
+});
+export {
+  _ as Aside
+};
+//# sourceMappingURL=aside.js.map

package/dist/surfaces/aside/aside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aside.js","sources":["../../../src/surfaces/aside/aside.tsx"],"sourcesContent":["import React from 'react';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\nimport clsx from 'clsx';\n\nimport styles from './aside.module.css';\n\nexport type AsideProps = ScaffoldProps;\n\nexport const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(\n  { children, className, ...props }: AsideProps,\n  ref\n) {\n  return (\n    <Scaffold\n      ref={ref}\n      className={clsx(styles['aside'], 'tcn-surface', 'tcn-aside', className)}\n      {...props}\n    >\n      {children}\n    </Scaffold>\n  );\n});\n"],"names":["Aside","React","children","className","props","ref","jsx","Scaffold","clsx","styles"],"mappings":";;;;8CAQaA,IAAQC,EAAM,WAAoC,SAC7D,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAKC,EAAO,OAAU,eAAe,aAAaN,CAAS;AAAA,MACrE,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/surfaces/drawers/drawer.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { SlideProps } from '../../overlay/slide/slide.js';
+export type DrawerProps = SlideProps;
+export declare const Drawer: React.ForwardRefExoticComponent<Omit<import('../../overlay/index.js').FrameProps, "draggable" | "enableResizeOnTop" | "enableResizeOnEnd" | "enableResizeOnBottom" | "enableResizeOnStart" | "enableResizeOnLeft" | "enableResizeOnRight"> & import('../../overlay/slide/slide.js').SlideOwnProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=drawer.d.ts.map

package/dist/surfaces/drawers/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/surfaces/drawers/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;AAErC,eAAO,MAAM,MAAM,uUAsBjB,CAAC"}

package/dist/surfaces/drawers/drawer.js

@@ -0,0 +1,31 @@
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as l } from "clsx";
+import n from "react";
+import { Scaffold as s } from "../../layouts/scaffold/scaffold.js";
+import { Slide as i } from "../../overlay/slide/slide.js";
+const D = n.forwardRef(function({ children: e, className: t, isOpen: o, veil: a = !1, resizable: f = !1, ...c }, m) {
+  return /* @__PURE__ */ r(
+    i,
+    {
+      ref: m,
+      isOpen: o,
+      veil: a,
+      resizable: f,
+      className: l("tcn-surface", "tcn-drawer", t),
+      ...c,
+      children: /* @__PURE__ */ r(
+        s,
+        {
+          className: "tcn-overlay-content tcn-drawer-scaffold",
+          width: "100%",
+          height: "100%",
+          children: e
+        }
+      )
+    }
+  );
+});
+export {
+  D as Drawer
+};
+//# sourceMappingURL=drawer.js.map

package/dist/surfaces/drawers/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sources":["../../../src/surfaces/drawers/drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/scaffold/scaffold.js';\nimport { Slide, type SlideProps } from '../../overlay/slide/slide.js';\n\nexport type DrawerProps = SlideProps;\n\nexport const Drawer = React.forwardRef<HTMLElement, DrawerProps>(function Drawer(\n  { children, className, isOpen, veil = false, resizable = false, ...props }: DrawerProps,\n  ref\n) {\n  return (\n    <Slide\n      ref={ref}\n      isOpen={isOpen}\n      veil={veil}\n      resizable={resizable}\n      className={clsx('tcn-surface', 'tcn-drawer', className)}\n      {...props}\n    >\n      <Scaffold\n        className={'tcn-overlay-content tcn-drawer-scaffold'}\n        width=\"100%\"\n        height=\"100%\"\n      >\n        {children}\n      </Scaffold>\n    </Slide>\n  );\n});\n"],"names":["Drawer","React","children","className","isOpen","veil","resizable","props","ref","jsx","Slide","clsx","Scaffold"],"mappings":";;;;;AAOO,MAAMA,IAASC,EAAM,WAAqC,SAC/D,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,IAAO,IAAO,WAAAC,IAAY,IAAO,GAAGC,EAAA,GACnEC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,QAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAWK,EAAK,eAAe,cAAcR,CAAS;AAAA,MACrD,GAAGI;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,UACX,OAAM;AAAA,UACN,QAAO;AAAA,UAEN,UAAAV;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/surfaces/index.d.ts

@@ -1,14 +1,11 @@
 export * from './alert/alert.js';
 export * from './card/card.js';
 export * from './confirm/confirm.js';
-export * from './page/h_page.js';
-export * from './page/v_page.js';
+export * from './page/page.js';
 export * from './panel/panel.js';
+export * from './aside/aside.js';
 export * from './popover/popover.js';
-export * from './drawers/drawer_bottom/drawer_bottom.js';
-export * from './drawers/drawer_top/drawer_top.js';
-export * from './drawers/drawer_start/drawer_start.js';
-export * from './drawers/drawer_end/drawer_end.js';
+export { Drawer, type DrawerProps } from './drawers/drawer.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';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/surfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,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"}
+{"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,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,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"}