@tcn/ui 0.15.0 → 0.16.0

package/src/themes/themes/ergo/ergo_theme.css

@@ -609,8 +609,7 @@
     min-width: var(--ergo-sizing-bar-md);
   }
 
-  .tcn-utility-strip,
-  .tcn-side {
+  .tcn-utility-strip {
     padding-block: var(--padding-medium);
     gap: var(--gap-medium);
   }
@@ -664,13 +663,6 @@
     --divide-footer: 0;
     --material: var(--background-color-tertiary);
     background-color: var(--material);
-    padding: var(--padding-medium);
-  }
-
-  /* TODO: remove - shim to replicate Column at Page level */
-  .tcn-page > .tcn-scaffold-stack > .tcn-scaffold > .tcn-scaffold-stack,
-  .tcn-page > .tcn-scaffold-stack > .tcn-rail > .tcn-rail-stack {
-    gap: var(--gap-medium);
   }
 
   /* MODAL: */
@@ -872,6 +864,32 @@
     }
   }
 
+  /* Columns: */
+  .tcn-panel {
+    :where(.tcn-columns) {
+      padding: var(--padding-large);
+
+      :where(.tcn-column) {
+        border-right: 1px solid var(--ergo-material-border);
+        padding-inline-end: var(--padding-medium);
+      }
+
+      :where(.tcn-column):not(:first-child) {
+        padding-inline-start: var(--padding-medium);
+      }
+    }
+  }
+
+  .tcn-page {
+    :where(.tcn-columns) {
+      padding: var(--padding-medium);
+
+      :where(.tcn-column):not(:last-child) {
+        padding-inline-end: var(--padding-medium);
+      }
+    }
+  }
+
   /* SECTION */
   .tcn-section {
     --max-section-depth: 4;

package/dist/layouts/column/column.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"column.d.ts","sourceRoot":"","sources":["../../../src/layouts/column/column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAG5D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,UAAU,CAAC;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iFA2CjB,CAAC"}

package/dist/layouts/column/column.js

@@ -1,52 +0,0 @@
-import { jsx as m } 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 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: t,
-  maxHeight: n,
-  hAlign: e,
-  vAlign: f = "start",
-  className: k,
-  ...p
-}, _) {
-  return /* @__PURE__ */ m(
-    b,
-    {
-      width: u,
-      height: a,
-      minWidth: o,
-      maxWidth: c,
-      minHeight: t,
-      maxHeight: n,
-      className: s(k, l.column, "tcn-column"),
-      ...p,
-      children: /* @__PURE__ */ m(
-        d,
-        {
-          minWidth: o,
-          maxWidth: c,
-          minHeight: t,
-          maxHeight: n,
-          hAlign: e,
-          vAlign: f,
-          ref: _,
-          as: "section",
-          className: s(l["column-stack"], "tcn-column-stack"),
-          zIndex: 0,
-          children: r
-        }
-      )
-    }
-  );
-});
-export {
-  z as Column
-};
-//# sourceMappingURL=column.js.map

package/dist/layouts/column/column.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"column.js","sources":["../../../src/layouts/column/column.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './column.module.css';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { Alignment } from '../../stacks/types/alignment.js';\nimport { VStack } from '../../stacks/v_stack.js';\n\nexport interface ColumnProps extends Omit<BoxProps, 'as' | 'children'> {\n  hAlign?: Alignment;\n  vAlign?: Alignment;\n  children?: React.ReactNode;\n}\n\nexport const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column(\n  {\n    children,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign,\n    vAlign = 'start',\n    className,\n    ...props\n  }: ColumnProps,\n  ref\n) {\n  return (\n    <Box\n      width={width}\n      height={height}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      className={clsx(className, styles['column'], 'tcn-column')}\n      {...props}\n    >\n      <VStack\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        hAlign={hAlign}\n        vAlign={vAlign}\n        ref={ref}\n        as=\"section\"\n        className={clsx(styles['column-stack'], 'tcn-column-stack')}\n        zIndex={0}\n      >\n        {children}\n      </VStack>\n    </Box>\n  );\n});\n"],"names":["Column","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","VStack"],"mappings":";;;;;gGAaaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAWQ,EAAKL,GAAWM,EAAO,QAAW,YAAY;AAAA,MACxD,GAAGL;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,IAAG;AAAA,UACH,WAAWG,EAAKC,EAAO,cAAc,GAAG,kBAAkB;AAAA,UAC1D,QAAQ;AAAA,UAEP,UAAAf;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/layouts/containers/side/side.d.ts

@@ -1,6 +0,0 @@
-import { default as React } from 'react';
-import { VStackProps } from '../../../stacks/v_stack.js';
-export interface SideProps extends Omit<VStackProps, 'as'> {
-}
-export declare const Side: React.ForwardRefExoticComponent<SideProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=side.d.ts.map

package/dist/layouts/containers/side/side.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../../src/layouts/containers/side/side.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAE7D,eAAO,MAAM,IAAI,+EAgBf,CAAC"}

package/dist/layouts/containers/side/side.js

@@ -1,22 +0,0 @@
-import { jsx as c } from "react/jsx-runtime";
-import m from "react";
-import { clsx as a } from "clsx";
-import { VStack as d } from "../../../stacks/v_stack.js";
-import '../../../side.css';const f = "_side_02cc81d", n = { side: f }, S = m.forwardRef(function({ children: t, className: o, height: s = "100%", width: i = "auto", ...r }, e) {
-  return /* @__PURE__ */ c(
-    d,
-    {
-      ref: e,
-      width: i,
-      height: s,
-      className: a(n.side, "tcn-side", o),
-      as: "section",
-      ...r,
-      children: t
-    }
-  );
-});
-export {
-  S as Side
-};
-//# sourceMappingURL=side.js.map

package/dist/layouts/containers/side/side.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"side.js","sources":["../../../../src/layouts/containers/side/side.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../../stacks/v_stack.js';\n\nimport styles from './side.module.css';\n\nexport interface SideProps extends Omit<VStackProps, 'as'> {}\n\nexport const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(\n  { children, className, height = '100%', width = 'auto', ...props }: SideProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      width={width}\n      height={height}\n      className={clsx(styles['side'], 'tcn-side', className)}\n      as=\"section\"\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Side","React","children","className","height","width","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;4CAQaA,IAAOC,EAAM,WAAmC,SAC3D,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,QAAQ,OAAAC,IAAQ,QAAQ,GAAGC,EAAA,GAC3DC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAF;AAAA,MACA,QAAAD;AAAA,MACA,WAAWM,EAAKC,EAAO,MAAS,YAAYR,CAAS;AAAA,MACrD,IAAG;AAAA,MACF,GAAGG;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/side.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._side_02cc81d){min-width:0;height:100%;width:auto}}

package/src/layouts/column/column.module.css

@@ -1,35 +0,0 @@
-@layer tcn-system {
-  :where(.column) {
-    min-width: 250px;
-    height: 100%;
-    min-height: 100%;
-  }
-
-  :where(.column-stack) {
-    gap: 8px;
-    padding: 8px;
-    width: 100%;
-    height: 100%;
-  }
-
-  :where(.column:after) {
-    content: "";
-    position: absolute;
-    bottom: var(--padding);
-    top: var(--padding);
-    right: 0;
-    width: 1px;
-    background-color: rgb(221, 221, 221);
-  }
-
-  :where(.column:last-child:after) {
-    display: none;
-  }
-
-  :where(:global(.h-stack) > .column[data-width="default"]) {
-    width: auto;
-    flex-basis: auto;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}

package/src/layouts/column/column.tsx

@@ -1,57 +0,0 @@
-import { clsx } from 'clsx';
-import React from 'react';
-import styles from './column.module.css';
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import { Alignment } from '../../stacks/types/alignment.js';
-import { VStack } from '../../stacks/v_stack.js';
-
-export interface ColumnProps extends Omit<BoxProps, 'as' | 'children'> {
-  hAlign?: Alignment;
-  vAlign?: Alignment;
-  children?: React.ReactNode;
-}
-
-export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column(
-  {
-    children,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    hAlign,
-    vAlign = 'start',
-    className,
-    ...props
-  }: ColumnProps,
-  ref
-) {
-  return (
-    <Box
-      width={width}
-      height={height}
-      minWidth={minWidth}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      maxHeight={maxHeight}
-      className={clsx(className, styles['column'], 'tcn-column')}
-      {...props}
-    >
-      <VStack
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        hAlign={hAlign}
-        vAlign={vAlign}
-        ref={ref}
-        as="section"
-        className={clsx(styles['column-stack'], 'tcn-column-stack')}
-        zIndex={0}
-      >
-        {children}
-      </VStack>
-    </Box>
-  );
-});

package/src/layouts/containers/side/side.module.css

@@ -1,7 +0,0 @@
-@layer tcn-system {
-  :where(.side) {
-    min-width: 0;
-    height: 100%;
-    width: auto;
-  }
-}

package/src/layouts/containers/side/side.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { clsx } from 'clsx';
-import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-
-import styles from './side.module.css';
-
-export interface SideProps extends Omit<VStackProps, 'as'> {}
-
-export const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(
-  { children, className, height = '100%', width = 'auto', ...props }: SideProps,
-  ref
-) {
-  return (
-    <VStack
-      ref={ref}
-      width={width}
-      height={height}
-      className={clsx(styles['side'], 'tcn-side', className)}
-      as="section"
-      {...props}
-    >
-      {children}
-    </VStack>
-  );
-});