@tcn/ui 0.14.0 → 0.16.0

package/src/themes/themes/ergo/ergo_theme.ts

@@ -1,5 +1,7 @@
+import { buildStyleSheet } from '../../build_stylesheet';
+import tokensCss from './tokens/theme_tokens.css?raw';
+import systemTokensCss from './tokens/system_tokens.css?raw';
 import css from './ergo_theme.css?raw';
 import '@fontsource/lato';
 
-export const ergoStyleSheet = new CSSStyleSheet();
-ergoStyleSheet.replaceSync(css);
+export const ergoStyleSheet = buildStyleSheet([tokensCss, systemTokensCss, css]);

package/src/themes/themes/ergo/tokens/system_tokens.css

@@ -0,0 +1,68 @@
+@layer tcn-theme {
+  :root {
+    /* ========== Blackcat System Tokens ========== */
+    --scalar: 1;
+    --accent-color: var(--ergo-primary);
+
+    /* Typography */
+    --font-color: var(--ergo-text-color-primary);
+    --font-family: "Lato", sans-serif;
+    --font-size: var(--ergo-text-size-default);
+
+    /* Spacing */
+    --gap-small: var(--ergo-spacing-sm);
+    --gap-medium: var(--ergo-spacing-md);
+    --gap-large: var(--ergo-spacing-lg);
+
+    --padding-small: var(--ergo-spacing-sm);
+    --padding-medium: var(--ergo-spacing-md);
+    --padding-large: var(--ergo-spacing-lg);
+
+    /* Status Colors */
+    --status-color-disabled: var(--ergo-grey-light);
+    --status-color-info: var(--ergo-status-blue);
+    --status-color-warning: var(--ergo-status-yellow);
+    --status-color-positive: var(--ergo-status-green);
+    --status-color-error: var(--ergo-status-red);
+
+    --async-color-initial: var(--ergo-grey);
+    --async-color-pending: var(--ergo-status-blue);
+    --async-color-success: var(--ergo-status-green);
+    --async-color-failed: var(--ergo-status-red);
+
+    /* Action Severity */
+    --action-severity-dangerous: var(--ergo-status-red);
+    --action-severity-cautious: var(--ergo-status-yellow);
+    --action-severity-neutral: var(--ergo-primary);
+    --action-severity-suggested: var(--ergo-status-blue);
+    --action-severity-encouraged: var(--ergo-status-green);
+
+    /* Palette */
+    --primary-color-faint: var(--ergo-grey-light);
+    --primary-color: var(--ergo-primary);
+    --primary-color-strong: var(--ergo-primary-dark);
+
+    --secondary-color-faint: var(--ergo-secondary-light);
+    --secondary-color: var(--ergo-secondary);
+    --secondary-color-strong: var(--ergo-secondary-dark);
+
+    --tertiary-color-faint: var(--ergo-tertiary-light);
+    --tertiary-color: var(--ergo-tertiary);
+    --tertiary-color-strong: var(--ergo-tertiary-dark);
+
+    --quaternary-color-faint: var(--ergo-accent-blue-light);
+    --quaternary-color: var(--ergo-accent-blue);
+    --quaternary-color-strong: var(--ergo-accent-blue-dark);
+
+    --background-color-primary: var(--ergo-material-bg-primary);
+    --background-color-secondary: var(--ergo-material-bg-secondary);
+    --background-color-tertiary: var(--ergo-material-bg-tertiary);
+    --background-color-quaternary: var(--ergo-material-bg-quaternary);
+
+    /* Not sure what other text colors are needed */
+    --foreground-color-primary: var(--ergo-text-color-primary);
+    --foreground-color-secondary: var(--ergo-text-color-primary);
+    --foreground-color-tertiary: var(--ergo-text-color-primary);
+    --foreground-color-quaternary: var(--ergo-text-color-primary);
+  }
+}

package/src/themes/themes/ergo/tokens/theme_tokens.css

@@ -0,0 +1,99 @@
+@layer tcn-theme {
+  :root {
+    /* ========== Ergo  Palette ========== */
+    --ergo-white: #ffffff;
+
+    --ergo-primary: #ce6b2b;
+    --ergo-primary-light: #fff7f0;
+    --ergo-primary-dark: #b86128;
+
+    --ergo-secondary: #669eb4;
+    --ergo-secondary-light: #ecf4fb;
+    --ergo-secondary-dark: #497485;
+
+    --ergo-tertiary: #dfd7cd;
+    --ergo-tertiary-light: #f9f4ed;
+    --ergo-tertiary-dark: #7e6c5d;
+
+    --ergo-accent-blue: #395578;
+    --ergo-accent-blue-light: #f3f4f6;
+    --ergo-accent-blue-dark: #627083;
+
+    --ergo-accent-green: #97bba3;
+    --ergo-accent-green-light: #eef8ef;
+    --ergo-accent-green-dark: #4f785c;
+
+    --ergo-accent-yellow: #dbc97e;
+    --ergo-accent-yellow-light: #fef9e7;
+    --ergo-accent-yellow-dark: #82722b;
+
+    --ergo-grey: #aaaaaa;
+    --ergo-grey-light: #d3d3d3;
+    --ergo-grey-dark: #808080;
+
+    --ergo-status-red: #ff6565;
+    --ergo-status-red-dark: #c24848;
+    --ergo-status-red-light: #fff4f4;
+
+    --ergo-status-yellow: #ffd439;
+    --ergo-status-yellow-dark: #dbb735;
+    --ergo-status-yellow-light: #ffeca9;
+
+    --ergo-status-blue: var(--ergo-secondary);
+    --ergo-status-blue-dark: var(--ergo-secondary-dark);
+    --ergo-status-blue-light: var(--ergo-secondary-light);
+
+    --ergo-status-green: #3fbc6a;
+    --ergo-status-green-dark: #2d904f;
+    --ergo-status-green-light: #87e8a8;
+
+    --ergo-material-bg-primary: #ffffff;
+    --ergo-material-bg-secondary: #fafafa;
+    --ergo-material-bg-tertiary: #f1f1f1;
+    --ergo-material-bg-quaternary: #ffffff;
+
+    --ergo-material-overlay: var(--ergo-secondary-dark);
+    --ergo-material-border: var(--ergo-grey);
+    --ergo-material-divider: var(--ergo-grey);
+    --ergo-material-disabled-outline: var(--ergo-grey-light);
+    --ergo-material-disabled-fill: var(--ergo-grey);
+
+    /* ========== Ergo Text  ========== */
+    --ergo-text-size-input: 12px;
+    --ergo-text-size-default: 12px;
+    --ergo-text-color-primary: var(--ergo-accent-blue);
+    --ergo-text-color-inverse: var(--ergo-white);
+    --ergo-text-color-disabled-outline: var(--ergo-grey);
+    --ergo-text-color-disabled-fill: var(--ergo-white);
+
+    /* ========== Spacing  ========== */
+    --ergo-spacing-xs: 2px;
+    --ergo-spacing-sm: 4px;
+    --ergo-spacing-md: 8px;
+    --ergo-spacing-lg: 16px;
+    --ergo-spacing-xl: 32px;
+
+    /* ========== Sizing  ========== */
+    --ergo-sizing-bar-xs: 16px;
+    --ergo-sizing-bar-sm: 24px;
+    --ergo-sizing-bar-md: 32px;
+    --ergo-sizing-bar-lg: 40px;
+    --ergo-sizing-bar-xl: 48px;
+
+    --ergo-sizing-action-sm: 20px;
+    --ergo-sizing-action-md: 24px;
+    --ergo-sizing-action-lg: 32px;
+
+    /* ========== Shape  ========== */
+    --ergo-shape-radius-small: 2px;
+    --ergo-shape-radius-medium: 4px;
+    --ergo-shape-radius-large: 8px;
+    --ergo-shape-triangle-medium: 12px;
+
+    /* Default Material - TODO: move to system once blackcat support material */
+    --action: var(--ergo-primary);
+    --on-action: var(--ergo-white);
+    --material: var(--ergo-white);
+    --on-material: var(--ergo-accent-blue);
+  }
+}

package/src/tokens/index.ts

@@ -3,3 +3,4 @@ export * from './badge/badge.js';
 export * from './bubble/bubble.js';
 export * from './key/key.js';
 export * from './value/value.js';
+export * from './term/term.js';

package/src/tokens/key/key.tsx

@@ -1,9 +1,30 @@
 import clsx from 'clsx';
 import { HStack, HStackProps } from '../../stacks/h_stack.js';
+import type { Emphasis, Severity } from '../../utils/index.js';
 
-export const Key = ({ children, className, hAlign = 'start', ...props }: HStackProps) => {
+export interface KeyOwnProps {
+  emphasis?: Emphasis;
+  severity?: Severity;
+}
+
+export interface KeyProps extends HStackProps, KeyOwnProps {}
+
+export const Key = ({
+  children,
+  className,
+  hAlign = 'start',
+  emphasis = 'normal',
+  severity = 'neutral',
+  ...props
+}: KeyProps) => {
   return (
-    <HStack className={clsx(className, 'tcn-key')} hAlign={hAlign} {...props}>
+    <HStack
+      data-emphasis={emphasis}
+      data-severity={severity}
+      className={clsx(className, 'tcn-datum', 'tcn-key')}
+      hAlign={hAlign}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/tokens/term/term.module.css

@@ -0,0 +1,14 @@
+@layer tcn-system {
+  :where(.term) {
+    padding-block: 4px;
+  }
+
+  :where(.term) > :where(.tcn-key) {
+    flex-shrink: 0;
+  }
+
+  :where(.term) > :where(.tcn-value) {
+    flex: 1;
+    min-width: 0;
+  }
+}

package/src/tokens/term/term.stories.tsx

@@ -0,0 +1,84 @@
+import { Term } from './term.js';
+import { Key } from '../key/key.js';
+import { Value } from '../value/value.js';
+import { Chip } from '../chip/chip.js';
+import { VStack } from '../../stacks/v_stack.js';
+
+export default {
+  title: 'Tokens/Term',
+  component: Term,
+  tags: ['autodocs'],
+};
+
+export const Default = () => (
+  <Term maxWidth="300px">
+    <Key>Status:</Key>
+    <Value>Active</Value>
+  </Term>
+);
+
+export const WithChipValue = () => (
+  <Term maxWidth="300px">
+    <Key>Category:</Key>
+    <Value>
+      <Chip>Engineering</Chip>
+    </Value>
+  </Term>
+);
+
+export const WithLongText = () => (
+  <Term maxWidth="300px">
+    <Key>Description:</Key>
+    <Value>This is a long value that will wrap across multiple lines</Value>
+  </Term>
+);
+
+export const Severity = () => (
+  <VStack maxWidth="300px">
+    <Term>
+      <Key>Neutral:</Key>
+      <Value severity="neutral">Default</Value>
+    </Term>
+    <Term>
+      <Key>Dangerous:</Key>
+      <Value severity="dangerous">Deleted</Value>
+    </Term>
+    <Term>
+      <Key>Cautious:</Key>
+      <Value severity="cautious">Pending Review</Value>
+    </Term>
+    <Term>
+      <Key>Suggested:</Key>
+      <Value severity="suggested">Recommended</Value>
+    </Term>
+    <Term>
+      <Key>Encouraged:</Key>
+      <Value severity="encouraged">Verified</Value>
+    </Term>
+  </VStack>
+);
+
+export const MultipleTerms = () => (
+  <VStack maxWidth="300px">
+    <Term>
+      <Key>Name:</Key>
+      <Value>Jane Smith</Value>
+    </Term>
+    <Term>
+      <Key>Role:</Key>
+      <Value>
+        <Chip>Admin</Chip>
+      </Value>
+    </Term>
+    <Term>
+      <Key emphasis="strong">Status (Strong):</Key>
+      <Value>
+        <Chip>Active</Chip>
+      </Value>
+    </Term>
+    <Term>
+      <Key emphasis="faint">Department (Faint):</Key>
+      <Value>Engineering</Value>
+    </Term>
+  </VStack>
+);

package/src/tokens/term/term.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { HStackProps, HStack } from '../../stacks/h_stack.js';
+import { clsx } from 'clsx';
+import styles from './term.module.css';
+
+export const Term = React.forwardRef<HTMLDivElement, HStackProps>(function Term(
+  { children, className, vAlign = 'start', as = 'div', ...props },
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      vAlign={vAlign}
+      className={clsx(className, styles.term, 'tcn-term')}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/tokens/value/value.module.css

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  :where(.value) {
+    text-align: end;
+  }
+}

package/src/tokens/value/value.tsx

@@ -1,9 +1,31 @@
 import clsx from 'clsx';
 import { HStack, HStackProps } from '../../stacks/h_stack.js';
+import type { Emphasis, Severity } from '../../utils/index.js';
+import styles from './value.module.css';
 
-export const Value = ({ children, className, hAlign = 'end', ...props }: HStackProps) => {
+export interface ValueOwnProps {
+  emphasis?: Emphasis;
+  severity?: Severity;
+}
+
+export interface ValueProps extends HStackProps, ValueOwnProps {}
+
+export const Value = ({
+  children,
+  className,
+  hAlign = 'end',
+  emphasis = 'normal',
+  severity = 'neutral',
+  ...props
+}: ValueProps) => {
   return (
-    <HStack className={clsx(className, 'tcn-value')} hAlign={hAlign} {...props}>
+    <HStack
+      data-emphasis={emphasis}
+      data-severity={severity}
+      className={clsx(className, styles.value, 'tcn-datum', 'tcn-value')}
+      hAlign={hAlign}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/utils/types/variations.ts

@@ -2,3 +2,4 @@ export type Size = 'sm' | 'md' | 'lg';
 export type ExpandedSize = Size | 'xs' | 'xl';
 export type Hierarchy = 'primary' | 'secondary' | 'tertiary';
 export type Emphasis = 'strong' | 'normal' | 'faint';
+export type Severity = 'dangerous' | 'cautious' | 'neutral' | 'suggested' | 'encouraged';

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/layouts/row/row.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { HStackProps } from '../../stacks/h_stack.js';
-export declare const Row: React.ForwardRefExoticComponent<HStackProps<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=row.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/layouts/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAU,MAAM,yBAAyB,CAAC;AAI9D,eAAO,MAAM,GAAG,iGASd,CAAC"}

package/dist/layouts/row/row.js

@@ -1,11 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import m from "react";
-import { HStack as f } from "../../stacks/h_stack.js";
-import { clsx as a } from "clsx";
-import '../../row.css';const e = "_row_59c35b2", n = { row: e }, d = m.forwardRef(function({ children: o, className: r, as: i = "div", ...t }, c) {
-  return /* @__PURE__ */ s(f, { ref: c, className: a(r, n.row, "tcn-row"), ...t, children: o });
-});
-export {
-  d as Row
-};
-//# sourceMappingURL=row.js.map

package/dist/layouts/row/row.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"row.js","sources":["../../../src/layouts/row/row.tsx"],"sourcesContent":["import React from 'react';\nimport { HStackProps, HStack } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport styles from './row.module.css';\n\nexport const Row = React.forwardRef<HTMLDivElement, HStackProps>(function Row(\n  { children, className, as = 'div', ...props },\n  ref\n) {\n  return (\n    <HStack ref={ref} className={clsx(className, styles.row, 'tcn-row')} {...props}>\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Row","React","children","className","as","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;0CAKaA,IAAMC,EAAM,WAAwC,SAC/D,EAAE,UAAAC,GAAU,WAAAC,GAAW,IAAAC,IAAK,OAAO,GAAGC,EAAA,GACtCC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAO,KAAAF,GAAU,WAAWG,EAAKN,GAAWO,EAAO,KAAK,SAAS,GAAI,GAAGL,GACtE,UAAAH,EAAA,CACH;AAEJ,CAAC;"}

package/dist/row.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._row_59c35b2){padding-block:4px}}

package/dist/section.module-0wyGkhDg.js

@@ -1,5 +0,0 @@
-import './section.css';const s = "_section_0d82329", e = "_heading_7bf5e47", n = { section: s, heading: e };
-export {
-  n as s
-};
-//# sourceMappingURL=section.module-0wyGkhDg.js.map

package/dist/section.module-0wyGkhDg.js.map

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

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;
-  }
-}