@tcn/ui 0.0.2 → 0.0.3

package/src/stacks/stacks.mdx

@@ -34,14 +34,14 @@ Here is the list of components that you will use with stacks:
 ### HStack
 
 This example uses `HStack` to arrange elements horizontally. It places a `Box` on either
-side and a `Box` with width set to `flex` in the middle, creating a simple, evenly spaced layout. The `Box`
-components are set to occupy 25% of the width each, while the `Box` with width set to `flex` automatically
+side and a `Box` with width set to `fill` in the middle, creating a simple, evenly spaced layout. The `Box`
+components are set to occupy 25% of the width each, while the `Box` with width set to `fill` automatically
 takes up the remaining space.
 
 <StyleBox height="auto" padding="10px" border="1px solid #ccc">
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
 </StyleBox>
@@ -49,22 +49,22 @@ takes up the remaining space.
 ```tsx
 <HStack height="100px">
   <Box width="25%">25%</Box>
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Box width="25%">25%</Box>
 </HStack>
 ```
 
 ---
 
-Here, two `Box` components with width set to `flex` are placed between `Box` elements. Each `Box` will
-evenly share the available space between them, making it ideal for creating flexible
+Here, two `Box` components with width set to `fill` are placed between `Box` elements. Each `Box` will
+evenly share the available space between them, making it ideal for creating fillible
 layouts where multiple components need equal space.
 
 <StyleBox height="auto" padding="10px" border="1px solid #ccc">
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
 </StyleBox>
@@ -72,15 +72,15 @@ layouts where multiple components need equal space.
 ```tsx
 <HStack height="100px">
   <Box width="25%">25%</Box>
-  <Box width="flex">flex</Box>
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
+  <Box width="fill">fill</Box>
   <Box width="25%">25%</Box>
 </HStack>
 ```
 
 ---
 
-Using `Spacer` components between the `Box` components with width set to `flex` evenly distributes space
+Using `Spacer` components between the `Box` components with width set to `fill` evenly distributes space
 between the elements. This is useful when you want to create consistent gaps between
 components without needing to specify exact widths.
 
@@ -88,9 +88,9 @@ components without needing to specify exact widths.
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
     <Spacer />
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Spacer />
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Spacer />
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
@@ -100,9 +100,9 @@ components without needing to specify exact widths.
 <HStack height="100px">
   <Box width="25%">25%</Box>
   <Spacer />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer />
   <Box width="25%">25%</Box>
 </HStack>
@@ -118,9 +118,9 @@ automatically fill the available space.
   <HStack height="100px">
     <Rect width="25%" color="#abdef0">25%</Rect>
     <Spacer width="10px" />
-    <Rect width="flex" color="#89d9c8">flex</Rect>
+    <Rect width="fill" color="#89d9c8">fill</Rect>
     <Spacer width="10px" />
-    <Rect width="flex" color="#89d9c8">flex</Rect>
+    <Rect width="fill" color="#89d9c8">fill</Rect>
     <Spacer width="10px" />
     <Rect width="25%" color="#abdef0">25%</Rect>
   </HStack>
@@ -130,9 +130,9 @@ automatically fill the available space.
 <HStack height="100px">
   <Box width="25%">25%</Box>
   <Spacer width="10px" />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer width="10px" />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer width="10px" />
   <Box width="25%">25%</Box>
 </HStack>
@@ -143,13 +143,13 @@ automatically fill the available space.
 ### VStack
 
 This example uses `VStack` to arrange elements vertically. The `Box` components at the top
-and bottom occupy 25% of the height each, while the `Box` with height set to `flex` fills the remaining space,
+and bottom occupy 25% of the height each, while the `Box` with height set to `fill` fills the remaining space,
 making it ideal for creating header-body-footer layouts.
 
 <StyleBox height="400px" padding="10px" border="1px solid #ccc">
   <VStack height="100%">
     <Rect height="25%" color="#abdef0">25%</Rect>
-    <Rect height="flex" color="#89d9c8">flex</Rect>
+    <Rect height="fill" color="#89d9c8">fill</Rect>
     <Rect height="25%" color="#abdef0">25%</Rect>
   </VStack>
 </StyleBox>
@@ -157,7 +157,7 @@ making it ideal for creating header-body-footer layouts.
 ```tsx
 <VStack height="100%">
   <Box height="25%">25%</Box>
-  <Box height="flex">flex</Box>
+  <Box height="fill">fill</Box>
   <Box height="25%">25%</Box>
 </VStack>
 ```
@@ -170,7 +170,7 @@ prop to create consistent gaps between the header, body, and footer sections.
 <StyleBox height="400px" width="100%" padding="10px" border="1px solid #ccc">
   <VStack height="100%" gap="10px">
     <Rect height="40px" color="#abdef0">Header</Rect>
-    <Rect height="flex" color="#ededed">Body</Rect>
+    <Rect height="fill" color="#ededed">Body</Rect>
     <Rect height="40px" color="#abdef0">Footer</Rect>
   </VStack>
 </StyleBox>
@@ -178,7 +178,7 @@ prop to create consistent gaps between the header, body, and footer sections.
 ```tsx
 <VStack height="100%" gap="10px">
   <Box height="40px">Header</Box>
-  <Box height="flex">Body</Box>
+  <Box height="fill">Body</Box>
   <Box height="40px">Footer</Box>
 </VStack>
 ```
@@ -192,9 +192,9 @@ between the header, sidebar, and footer sections.
 <StyleBox height="400px" width="100%" padding="10px" border="1px solid #ccc">
   <VStack height="100%" gap="10px">
     <Rect height="40px" color="#abdef0">Header</Rect>
-    <HStack height="flex" gap="10px">
+    <HStack height="fill" gap="10px">
       <Rect width="200px" minWidth="200px" height="100%" zIndex="1" enableResizeOnEnd color="#ededed">Sidebar</Rect>
-      <Rect width="flex" height="100%" color="#ededed">
+      <Rect width="fill" height="100%" color="#ededed">
         <VStack width="100%" height="100%" overflowY="auto">
           <Grid itemHeight={100} itemWidth={100} columnAmount={4} gap="10px" padding="10px">
             <Rect width="100%" height="100%" color="#abdef0">1</Rect>
@@ -218,9 +218,9 @@ between the header, sidebar, and footer sections.
 ```tsx
 <VStack height="100%" gap="10px">
     <Box height="40px">Header</Box>
-    <HStack height="flex" gap="10px">
+    <HStack height="fill" gap="10px">
       <Box width="200px" minWidth="200px" height="100%" zIndex="1" enableResizeOnEnd>Sidebar</Box>
-      <VStack width="flex" height="100%" overflowY="auto">
+      <VStack width="fill" height="100%" overflowY="auto">
         <Grid itemHeight={100} itemWidth={100} columnAmount={4} gap="10px" padding="10px">
           <Box width="100%" height="100%">1</Box>
           <Box width="100%" height="100%">2</Box>

package/src/stacks/types/styles.ts

@@ -3,10 +3,10 @@ import { Alignment } from './alignment.js';
 export interface StackStyleProps {
   hAlign?: Alignment;
   vAlign?: Alignment;
-  width?: 'default' | 'flex' | 'auto' | string | number;
+  width?: 'default' | 'flex' | 'auto' | 'fill' | string | number;
   minWidth?: string | number;
   maxWidth?: string | number;
-  height?: 'default' | 'flex' | 'auto' | string | number;
+  height?: 'default' | 'flex' | 'auto' | 'fill' | string | number;
   minHeight?: string | number;
   maxHeight?: string | number;
   growWeight?: number;

package/src/surfaces/panel/__stories__/panel.stories.tsx

@@ -0,0 +1,68 @@
+import { BugIcon } from '@tcn/icons/bug_icon.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
+import { Button } from '../../../actions/button/button/button.js';
+import { Footer } from '../../../layouts/footer/footer.js';
+import { Header } from '../../../layouts/header/header.js';
+import { Divider, VBody } from '../../../layouts/index.js';
+import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
+import { Box, Spacer } from '../../../stacks/index.js';
+import { Title } from '../../../typography/title/title.js';
+import { VPanel } from '../v_panel.js';
+// Styles
+import styles from './panel_stories.module.css';
+
+export default {
+  title: 'Surfaces/Panel',
+  component: VPanel,
+  tags: ['autodocs'],
+};
+
+export const Default = () => {
+  return (
+    <div className={styles['stories-container']}>
+      <VPanel maxHeight="600px">
+        <Header>
+          <Title>Panel Primary Header</Title>
+          <Spacer />
+          <Button hierarchy="tertiary">
+            <GridOneIcon />
+          </Button>
+          <Divider length="md" vertical />
+          <Button hierarchy="tertiary">
+            <CrossIcon />
+          </Button>
+        </Header>
+        <UtilityBar>
+          <Title>Utility Bar</Title>
+          <Spacer />
+          <Button hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+        </UtilityBar>
+
+        <VBody>
+          <Box className={styles['content-box']} />
+          <Box className={styles['content-box']} />
+          <Box className={styles['content-box']} />
+          <Box className={styles['content-box']} />
+        </VBody>
+        <Footer>
+          <Title>Footer</Title>
+          <Spacer />
+          <Button hierarchy="secondary">Secondary</Button>
+          <Button hierarchy="primary">Primary</Button>
+        </Footer>
+      </VPanel>
+    </div>
+  );
+};

package/src/surfaces/panel/__stories__/panel_stories.module.css

@@ -0,0 +1,13 @@
+.content-box {
+  background: rgba(0, 128, 0, 0.5);
+  min-height: 200px;
+  width: 100%;
+}
+
+.stories-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background-color: #ccc;
+  overflow: auto;
+}

package/src/surfaces/panel/h_panel.tsx

@@ -1,9 +1,10 @@
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import { Alignment } from '../../stacks/types/alignment.js';
-import classNames from 'classnames';
 import React from 'react';
-import styles from './panel.module.css';
+import classNames from 'classnames';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
 import { HStack } from '../../stacks/h_stack.js';
+import type { Alignment } from '../../stacks/types/alignment.js';
+// Styles
+import styles from './panel.module.css';
 
 export interface HPanelProps extends Omit<BoxProps, 'as'> {
   vAlign?: Alignment;
@@ -37,7 +38,13 @@ export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={classNames(className, styles['panel'], 'panel')}
+      className={classNames(
+        styles['panel'],
+        className,
+        'panel',
+        'tcn-panel',
+        'tcn-h-panel'
+      )}
       {...props}
     >
       <HStack
@@ -49,7 +56,12 @@ export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel
         hAlign={hAlign}
         vAlign={vAlign}
         ref={ref}
-        className={classNames(styles['panel-stack'], className, 'panel-stack')}
+        className={classNames(
+          styles['panel-stack'],
+          className,
+          'panel-stack',
+          'tcn-panel-stack'
+        )}
         zIndex={0}
       >
         {children}

package/src/surfaces/panel/panel.module.css

@@ -1,14 +1,9 @@
-.panel {
-  background-color: #ffffff;
-  border-radius: 4px;
-}
-
 .panel-stack {
   width: 100%;
   height: 100%;
   overflow: auto;
 }
 
-.page-stack > :global(.stack) {
+/* .page-stack > :global(.stack) {
   gap: var(--gap);
-}
+} */

package/src/surfaces/panel/v_panel.tsx

@@ -1,8 +1,9 @@
+import React from 'react';
+import classNames from 'classnames';
 import { Box, type BoxProps } from '../../stacks/box/box.js';
+import type { Alignment } from '../../stacks/types/alignment.js';
 import { VStack } from '../../stacks/v_stack.js';
-import { Alignment } from '../../stacks/types/alignment.js';
-import classNames from 'classnames';
-import React from 'react';
+// Styles
 import styles from './panel.module.css';
 
 export interface VPanelProps extends Omit<BoxProps, 'as'> {
@@ -37,7 +38,7 @@ export const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={classNames(className, styles['panel'], 'panel')}
+      className={classNames(className, 'panel', 'tcn-panel', 'tcn-v-panel')}
       {...props}
     >
       <VStack
@@ -49,7 +50,12 @@ export const VPanel = React.forwardRef<HTMLElement, VPanelProps>(function VPanel
         hAlign={hAlign}
         vAlign={vAlign}
         ref={ref}
-        className={classNames(styles['panel-stack'], className, 'panel-stack')}
+        className={classNames(
+          styles['panel-stack'],
+          className,
+          'panel-stack',
+          'tcn-panel-stack'
+        )}
         zIndex={0}
       >
         {children}

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

@@ -136,13 +136,13 @@ legend {
 /* ===== CSS VARIABLES ===== */
 :root {
   --scalar: 1;
-  --gap-small: 2px;
-  --gap-medium: 4px;
-  --gap-large: 8px;
+  --gap-small: 4px;
+  --gap-medium: 8px;
+  --gap-large: 16px;
 
-  --padding-small: 2px;
-  --padding-medium: 4px;
-  --padding-large: 8px;
+  --padding-small: 4px;
+  --padding-medium: 8px;
+  --padding-large: 16px;
 
   --status-color-disabled: #7f7f7f;
   --status-color-info: #008cff;
@@ -170,9 +170,8 @@ legend {
   --quaternary-color: #008cff;
   --quaternary-color-strong: #008cff;
 
-  --font-color: #222222;
-  --font-family:
-    "Arial", "Helvetica Neue", Helvetica, "Liberation Sans", "Arimo", sans-serif;
+  --font-color: #395578;
+  --font-family: "Lato", sans-serif;
   --font-size: 12px;
 
   --background-color-primary: #ffffff;
@@ -180,15 +179,78 @@ legend {
   --background-color-tertiary: #ffffff;
   --background-color-quaternary: #ffffff;
 
-  --foreground-color-primary: #222222;
+  --foreground-color-primary: #aaa;
   --foreground-color-secondary: #222222;
   --foreground-color-tertiary: #222222;
   --foreground-color-quaternary: #222222;
 
   --accent-color: #008cff;
+
+  --shape-radius-small: 2px;
+  --shape-radius-medium: 4px;
+  --shape-radius-large: 8px;
 }
 
 * {
   position: relative;
   box-sizing: border-box;
 }
+
+/* ===== SURFACES ===== */
+
+/* PANEL */
+.tcn-panel {
+  --v-inset: var(--padding-large);
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+
+  :where(.tcn-header) {
+    min-height: 40px;
+    border-bottom: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+
+    :where(.tcn-title) {
+      font-weight: 700;
+    }
+
+    :where(.tcn-button) {
+      padding: 0;
+      min-width: 18px;
+      min-height: 18px;
+    }
+
+    :where(.tcn-divider) {
+      padding: 4px 0;
+      :where(.tcn-divider-line) {
+        width: 1.5px;
+        min-height: 18px;
+        height: auto;
+      }
+    }
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: 32px;
+    border-bottom: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+
+    :where(.tcn-button) {
+      padding: 0;
+      min-width: 18px;
+      min-height: 18px;
+    }
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: 40px;
+    border-top: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+  }
+}

package/src/typography/title/title.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import type { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import styles from './title.module.css';
 
 export interface TitleOwnProps {
@@ -78,7 +78,7 @@ export function Title({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['title'], 'title', className)}
+      className={classnames(styles['title'], 'title', 'tcn-title', className)}
       style={style}
       data-size={size}
     >

package/dist/form/field/form_field.d.ts

@@ -1,6 +0,0 @@
-import { FieldPresenter, FieldState } from '../field_presenters/field_presenter.js';
-export declare function FormField<T>({ field, children, }: {
-    field: FieldPresenter<T>;
-    children: (state: FieldState<T>, setValue: (value: T) => void, validate: () => Promise<void>) => React.ReactElement;
-}): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-//# sourceMappingURL=form_field.d.ts.map

package/dist/form/field/form_field.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form_field.d.ts","sourceRoot":"","sources":["../../../src/form/field/form_field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAEpF,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB,QAAQ,EAAE,CACR,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EAC5B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,KAC1B,KAAK,CAAC,YAAY,CAAC;CACzB,0FAcA"}

package/dist/form/field/form_field.js

@@ -1,18 +0,0 @@
-import { useCallback as a } from "react";
-import { useSignalValue as u } from "@tcn/state";
-function m({
-  field: t,
-  children: e
-}) {
-  const o = u(t.stateBroadcast), r = a(
-    (n) => {
-      t.setValue(n);
-    },
-    [t]
-  ), s = a(() => t.validate(), [t]);
-  return e(o, r, s);
-}
-export {
-  m as FormField
-};
-//# sourceMappingURL=form_field.js.map

package/dist/form/field/form_field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form_field.js","sources":["../../../src/form/field/form_field.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { FieldPresenter, FieldState } from '../field_presenters/field_presenter.js';\n\nexport function FormField<T>({\n  field,\n  children,\n}: {\n  field: FieldPresenter<T>;\n  children: (\n    state: FieldState<T>,\n    setValue: (value: T) => void,\n    validate: () => Promise<void>\n  ) => React.ReactElement;\n}) {\n  const state = useSignalValue(field.stateBroadcast);\n  const setValue = useCallback(\n    (value: T) => {\n      field.setValue(value);\n    },\n    [field]\n  );\n\n  const validate = useCallback(() => {\n    return field.validate();\n  }, [field]);\n\n  return children(state, setValue, validate);\n}\n"],"names":["FormField","field","children","state","useSignalValue","setValue","useCallback","value","validate"],"mappings":";;AAIO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,UAAAC;AACF,GAOG;AACD,QAAMC,IAAQC,EAAeH,EAAM,cAAc,GAC3CI,IAAWC;AAAA,IACf,CAACC,MAAa;AACZ,MAAAN,EAAM,SAASM,CAAK;AAAA,IACtB;AAAA,IACA,CAACN,CAAK;AAAA,EAAA,GAGFO,IAAWF,EAAY,MACpBL,EAAM,SAAA,GACZ,CAACA,CAAK,CAAC;AAEV,SAAOC,EAASC,GAAOE,GAAUG,CAAQ;AAC3C;"}

package/dist/panel.module-CtikcmYB.js

@@ -1,5 +0,0 @@
-import './panel.css';const a = "_panel_c1dbe05", s = "_panel-stack_f1896f3", t = "_page-stack_53ad282", c = { panel: a, "panel-stack": s, "page-stack": t };
-export {
-  c as s
-};
-//# sourceMappingURL=panel.module-CtikcmYB.js.map

package/dist/panel.module-CtikcmYB.js.map

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

package/src/form/field/form_field.tsx

@@ -1,29 +0,0 @@
-import { useCallback } from 'react';
-import { useSignalValue } from '@tcn/state';
-import { FieldPresenter, FieldState } from '../field_presenters/field_presenter.js';
-
-export function FormField<T>({
-  field,
-  children,
-}: {
-  field: FieldPresenter<T>;
-  children: (
-    state: FieldState<T>,
-    setValue: (value: T) => void,
-    validate: () => Promise<void>
-  ) => React.ReactElement;
-}) {
-  const state = useSignalValue(field.stateBroadcast);
-  const setValue = useCallback(
-    (value: T) => {
-      field.setValue(value);
-    },
-    [field]
-  );
-
-  const validate = useCallback(() => {
-    return field.validate();
-  }, [field]);
-
-  return children(state, setValue, validate);
-}