@tcn/ui 0.12.6 → 0.13.0

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

@@ -110,8 +110,8 @@
     --quaternary-color-strong: #008cff;
 
     --background-color-primary: #ffffff;
-    --background-color-secondary: #ffffff;
-    --background-color-tertiary: #ffffff;
+    --background-color-secondary: #fafafa;
+    --background-color-tertiary: #f1f1f1;
     --background-color-quaternary: #ffffff;
 
     --foreground-color-primary: #aaa;
@@ -716,14 +716,6 @@
     gap: var(--gap-medium);
   }
 
-  .tcn-rail {
-    :where(.tcn-rail-stack) {
-      gap: var(--gap-medium);
-    }
-    :where(.tcn-body) {
-      gap: var(--gap-medium);
-    }
-  }
   /* Scaffold: */
   .tcn-footer,
   .tcn-header,
@@ -758,27 +750,39 @@
       border-top: calc(var(--scaffold-divide-footer) * 1px) solid
         var(--foreground-color-primary);
     }
-
-    :where(.tcn-body) {
-      gap: var(--gap-medium);
-    }
   }
 
+  /* .tcn-body > .tcn-scaffold > .tcn-scaffold-stack,
+  .tcn-body > .tcn-rail > .tcn-rail-stack {
+    gap: var(--gap-medium);
+  } */
+
   .tcn-frame-veil[data-is-veil="true"] {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
+  /* PAGE: */
+  .tcn-page {
+    --divide-header: 0;
+    --divide-footer: 0;
+    --material: var(--background-color-tertiary);
+    background-color: var(--material);
+    padding: var(--padding-medium);
+  }
+
+  .tcn-body > .tcn-scaffold > .tcn-scaffold-stack,
+  .tcn-body > .tcn-rail > .tcn-rail-stack {
+    gap: var(--gap-medium);
+  }
+
   /* MODAL: */
   .tcn-modal {
     --divide-header: 0;
     box-shadow: 0px 4px 34px 0px #00000096;
-
-    :where(.tcn-scaffold) {
-      border-radius: var(--shape-radius-medium);
-      background-color: var(--background-color-primary);
-      overflow: hidden;
-      border: 1px solid var(--foreground-color-primary);
-    }
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 1px solid var(--foreground-color-primary);
 
     :where(.tcn-header) {
       --material: var(--ergo-secondary-dark);
@@ -798,11 +802,8 @@
   .tcn-drawer {
     --divide-header: 0;
     box-shadow: 0px 4px 34px 0px #00000096;
-
-    :where(.tcn-scaffold) {
-      background-color: var(--background-color-primary);
-      overflow: hidden;
-    }
+    background-color: var(--background-color-primary);
+    overflow: hidden;
 
     :where(.tcn-header) {
       --material: var(--ergo-secondary-dark);
@@ -821,15 +822,11 @@
   /* WINDOW: */
   .tcn-window {
     box-shadow: 0px 4px 34px 0px #00000096;
-
     --divide-header: 0;
-
-    :where(.tcn-scaffold) {
-      border-radius: var(--shape-radius-medium);
-      background-color: var(--background-color-primary);
-      overflow: hidden;
-      border: 2px solid white;
-    }
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 2px solid white;
 
     :where(.tcn-header) {
       --material: var(--ergo-secondary-dark);
@@ -848,6 +845,14 @@
   .tcn-pop-confirm {
     --divide-header: 0;
     --tether-pad-size: 16px;
+    --pad-inline: var(--padding-medium);
+
+    .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {
+      border-radius: var(--shape-radius-medium);
+      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
+      background-color: var(--background-color-primary);
+    }
+
     :where(.tcn-tethered-origin-indicator) {
       --material: var(--ergo-white);
     }
@@ -859,15 +864,6 @@
       }
     }
 
-    :where(.tcn-scaffold) {
-      --pad-inline: var(--padding-medium);
-
-      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
-      border-radius: var(--shape-radius-medium);
-      background-color: var(--background-color-primary);
-      overflow: hidden;
-    }
-
     :where(.tcn-header) {
       min-height: var(--bar-md);
 
@@ -885,7 +881,8 @@
   }
 
   .tcn-confirm {
-    background-color: var(--background-color-primary);
+    --material: var(--background-color-primary);
+    background-color: var(--material);
   }
 
   .tcn-bar {
@@ -905,15 +902,44 @@
 
   /* PANEL */
   .tcn-panel {
+    --divide-header: 1;
+    --divide-footer: 1;
     --material: var(--background-color-primary);
     background-color: var(--material);
     border-radius: var(--shape-radius-medium);
     overflow: hidden;
+
+    :where(.tcn-title) {
+      font-size: 18px;
+    }
+  }
+
+  /* Aside */
+  .tcn-aside {
+    --divide-header: 1;
+    --divide-footer: 1;
+
+    --material: var(--background-color-secondary);
+    background-color: var(--material);
+    overflow: hidden;
+
+    :where(.tcn-header) {
+      min-height: var(--bar-md);
+    }
+
+    :where(.tcn-footer) {
+      min-height: var(--bar-md);
+    }
+
+    :where(.tcn-title) {
+      font-size: 16px;
+    }
   }
 
   /* Card */
   .tcn-card {
     --divide-header: 0;
+    --divide-footer: 1;
 
     background-color: var(--background-color-primary);
     border-radius: var(--shape-radius-medium);
@@ -957,7 +983,7 @@
 
   .tcn-heading {
     background-color: #f1f1f1;
-    padding-inline-start: 8px;
+    padding-inline-start: var(--pad-inline, var(--padding-medium));
     height: 30px;
     z-index: 5;
   }

package/dist/body.module-BbFZ7KNP.js

@@ -1,5 +0,0 @@
-import './body.css';const o = "_body_42a1eac", d = "_h-body_cda9f1f", y = "_v-body_a12af62", s = { body: o, "h-body": d, "v-body": y };
-export {
-  s
-};
-//# sourceMappingURL=body.module-BbFZ7KNP.js.map

package/dist/body.module-BbFZ7KNP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"body.module-BbFZ7KNP.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/layouts/body/h_body.d.ts

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

package/dist/layouts/body/h_body.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"h_body.d.ts","sourceRoot":"","sources":["../../../src/layouts/body/h_body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAE9D,eAAO,MAAM,KAAK,gFAoBhB,CAAC"}

package/dist/layouts/body/h_body.js

@@ -1,27 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import { HStack as f } from "../../stacks/h_stack.js";
-import a from "react";
-import { clsx as c } from "clsx";
-import { s as o } from "../../body.module-BbFZ7KNP.js";
-const l = a.forwardRef(function({ children: r, className: t, ...m }, s) {
-  return /* @__PURE__ */ d(
-    f,
-    {
-      ref: s,
-      as: "div",
-      className: c(
-        o.body,
-        o["h-body"],
-        t,
-        "tcn-h-body",
-        "tcn-body"
-      ),
-      ...m,
-      children: r
-    }
-  );
-});
-export {
-  l as HBody
-};
-//# sourceMappingURL=h_body.js.map

package/dist/layouts/body/h_body.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"h_body.js","sources":["../../../src/layouts/body/h_body.tsx"],"sourcesContent":["import { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport React from 'react';\nimport { clsx } from 'clsx';\nimport styles from './body.module.css';\n\nexport interface HBodyProps extends Omit<HStackProps, 'as'> {}\n\nexport const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(\n  { children, className, ...props }: HBodyProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      className={clsx(\n        styles['body'],\n        styles['h-body'],\n        className,\n        'tcn-h-body',\n        'tcn-body'\n      )}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["HBody","React","children","className","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;;AAOO,MAAMA,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,IAAG;AAAA,MACH,WAAWG;AAAA,QACTC,EAAO;AAAA,QACPA,EAAO,QAAQ;AAAA,QACfN;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/body/v_body.d.ts

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

package/dist/layouts/body/v_body.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"v_body.d.ts","sourceRoot":"","sources":["../../../src/layouts/body/v_body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAE9D,eAAO,MAAM,KAAK,gFAoBhB,CAAC"}

package/dist/layouts/body/v_body.js

@@ -1,27 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import { VStack as f } from "../../stacks/v_stack.js";
-import a from "react";
-import { clsx as c } from "clsx";
-import { s as o } from "../../body.module-BbFZ7KNP.js";
-const l = a.forwardRef(function({ children: r, className: t, ...m }, s) {
-  return /* @__PURE__ */ d(
-    f,
-    {
-      ref: s,
-      as: "div",
-      className: c(
-        o.body,
-        o["v-body"],
-        t,
-        "tcn-body",
-        "tcn-v-body"
-      ),
-      ...m,
-      children: r
-    }
-  );
-});
-export {
-  l as VBody
-};
-//# sourceMappingURL=v_body.js.map

package/dist/layouts/body/v_body.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"v_body.js","sources":["../../../src/layouts/body/v_body.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport React from 'react';\nimport { clsx } from 'clsx';\nimport styles from './body.module.css';\n\nexport interface VBodyProps extends Omit<VStackProps, 'as'> {}\n\nexport const VBody = React.forwardRef<HTMLElement, VBodyProps>(function VBody(\n  { children, className, ...props }: VBodyProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"div\"\n      className={clsx(\n        styles['body'],\n        styles['v-body'],\n        className,\n        'tcn-body',\n        'tcn-v-body'\n      )}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["VBody","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;;AAOO,MAAMA,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,IAAG;AAAA,MACH,WAAWG;AAAA,QACTC,EAAO;AAAA,QACPA,EAAO,QAAQ;AAAA,QACfN;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/page.module-DXhph-u6.js

@@ -1,5 +0,0 @@
-import './page.css';const s = "_page_b219ddf", e = { page: s };
-export {
-  e as s
-};
-//# sourceMappingURL=page.module-DXhph-u6.js.map

package/dist/page.module-DXhph-u6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"page.module-DXhph-u6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/surfaces/page/h_page.d.ts

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

package/dist/surfaces/page/h_page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"h_page.d.ts","sourceRoot":"","sources":["../../../src/surfaces/page/h_page.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAE9D,eAAO,MAAM,KAAK,gFAehB,CAAC"}

package/dist/surfaces/page/h_page.js

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

package/dist/surfaces/page/h_page.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"h_page.js","sources":["../../../src/surfaces/page/h_page.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './page.module.css';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\n\nexport interface HPageProps extends Omit<HStackProps, 'as'> {}\n\nexport const HPage = React.forwardRef<HTMLElement, HPageProps>(function HPage(\n  { children, className, ...props }: HPageProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"main\"\n      className={clsx(styles.page, className, 'tcn-h-page')}\n      vAlign=\"start\"\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["HPage","React","children","className","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;;AAOO,MAAMA,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,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,MAAMN,GAAW,YAAY;AAAA,MACpD,QAAO;AAAA,MACN,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/surfaces/page/v_page.d.ts

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

package/dist/surfaces/page/v_page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"v_page.d.ts","sourceRoot":"","sources":["../../../src/surfaces/page/v_page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAE9D,eAAO,MAAM,KAAK,gFAchB,CAAC"}

package/dist/surfaces/page/v_page.js

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

package/dist/surfaces/page/v_page.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"v_page.js","sources":["../../../src/surfaces/page/v_page.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './page.module.css';\n\nexport interface VPageProps extends Omit<VStackProps, 'as'> {}\n\nexport const VPage = React.forwardRef<HTMLElement, VPageProps>(function VPage(\n  { children, className, ...props }: VPageProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"main\"\n      className={clsx(styles.page, className, 'tcn-v-page')}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["VPage","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;;AAOO,MAAMA,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,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,MAAMN,GAAW,YAAY;AAAA,MACnD,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/src/layouts/body/h_body.module.css

@@ -1,7 +0,0 @@
-@layer tcn-system {
-  :where(.h-body) {
-    min-width: 0;
-    flex-grow: 1;
-    height: auto;
-  }
-}

package/src/layouts/body/h_body.tsx

@@ -1,28 +0,0 @@
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import React from 'react';
-import { clsx } from 'clsx';
-import styles from './body.module.css';
-
-export interface HBodyProps extends Omit<HStackProps, 'as'> {}
-
-export const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(
-  { children, className, ...props }: HBodyProps,
-  ref
-) {
-  return (
-    <HStack
-      ref={ref}
-      as="div"
-      className={clsx(
-        styles['body'],
-        styles['h-body'],
-        className,
-        'tcn-h-body',
-        'tcn-body'
-      )}
-      {...props}
-    >
-      {children}
-    </HStack>
-  );
-});

package/src/layouts/body/v_body.module.css

@@ -1,7 +0,0 @@
-@layer tcn-system {
-  .v-body {
-    min-height: 0;
-    flex-grow: 1;
-    width: 100%;
-  }
-}

package/src/layouts/body/v_body.tsx

@@ -1,28 +0,0 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import React from 'react';
-import { clsx } from 'clsx';
-import styles from './body.module.css';
-
-export interface VBodyProps extends Omit<VStackProps, 'as'> {}
-
-export const VBody = React.forwardRef<HTMLElement, VBodyProps>(function VBody(
-  { children, className, ...props }: VBodyProps,
-  ref
-) {
-  return (
-    <VStack
-      ref={ref}
-      as="div"
-      className={clsx(
-        styles['body'],
-        styles['v-body'],
-        className,
-        'tcn-body',
-        'tcn-v-body'
-      )}
-      {...props}
-    >
-      {children}
-    </VStack>
-  );
-});

package/src/surfaces/page/h_page.tsx

@@ -1,23 +0,0 @@
-import { clsx } from 'clsx';
-import React from 'react';
-import styles from './page.module.css';
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-
-export interface HPageProps extends Omit<HStackProps, 'as'> {}
-
-export const HPage = React.forwardRef<HTMLElement, HPageProps>(function HPage(
-  { children, className, ...props }: HPageProps,
-  ref
-) {
-  return (
-    <HStack
-      ref={ref}
-      as="main"
-      className={clsx(styles.page, className, 'tcn-h-page')}
-      vAlign="start"
-      {...props}
-    >
-      {children}
-    </HStack>
-  );
-});

package/src/surfaces/page/v_page.tsx

@@ -1,22 +0,0 @@
-import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import { clsx } from 'clsx';
-import React from 'react';
-import styles from './page.module.css';
-
-export interface VPageProps extends Omit<VStackProps, 'as'> {}
-
-export const VPage = React.forwardRef<HTMLElement, VPageProps>(function VPage(
-  { children, className, ...props }: VPageProps,
-  ref
-) {
-  return (
-    <VStack
-      ref={ref}
-      as="main"
-      className={clsx(styles.page, className, 'tcn-v-page')}
-      {...props}
-    >
-      {children}
-    </VStack>
-  );
-});