@tcn/ui 0.0.1 → 0.0.3

package/src/surfaces/index.ts

@@ -8,3 +8,7 @@ export * from './panel/h_panel.js';
 export * from './panel/v_panel.js';
 export * from './popover/popover.js';
 export * from './window/window.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';

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/layouts/drawers/drawer_bottom/drawer_bottom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_bottom.d.ts","sourceRoot":"","sources":["../../../../src/layouts/drawers/drawer_bottom/drawer_bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,uFAaxB,CAAC"}

package/dist/layouts/drawers/drawer_bottom/drawer_bottom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_bottom.js","sources":["../../../../src/layouts/drawers/drawer_bottom/drawer_bottom.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport styles from './drawer_bottom.module.css';\n\nexport interface DrawerBottomProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const DrawerBottom = React.forwardRef<HTMLElement, DrawerBottomProps>(\n  function DrawerBottom({ children, className, ...props }: DrawerBottomProps, ref) {\n    return (\n      <VStack\n        ref={ref}\n        as=\"section\"\n        className={classNames(styles.drawerBottom, className, 'drawer-bottom')}\n        {...props}\n      >\n        {children}\n      </VStack>\n    );\n  }\n);\n"],"names":["DrawerBottom","React","children","className","props","ref","jsx","VStack","classNames","styles"],"mappings":";;;;4DASaA,IAAeC,EAAM;AAAA,EAChC,SAAsB,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAA4BC,GAAK;AAC/E,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG,EAAWC,EAAO,cAAcN,GAAW,eAAe;AAAA,QACpE,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/layouts/drawers/drawer_end/drawer_end.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_end.d.ts","sourceRoot":"","sources":["../../../../src/layouts/drawers/drawer_end/drawer_end.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,oFAcpB,CAAC"}

package/dist/layouts/drawers/drawer_end/drawer_end.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_end.js","sources":["../../../../src/layouts/drawers/drawer_end/drawer_end.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport styles from './drawer_end.module.css';\n\nexport interface DrawerEndProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const DrawerEnd = React.forwardRef<HTMLElement, DrawerEndProps>(function DrawerEnd(\n  { children, className, ...props }: DrawerEndProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"section\"\n      className={classNames(styles.drawerEnd, className, 'drawerEnd')}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["DrawerEnd","React","children","className","props","ref","jsx","VStack","classNames","styles"],"mappings":";;;;sDASaA,IAAYC,EAAM,WAAwC,SACrE,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,EAAWC,EAAO,WAAWN,GAAW,WAAW;AAAA,MAC7D,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/drawers/drawer_start/drawer_start.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_start.d.ts","sourceRoot":"","sources":["../../../../src/layouts/drawers/drawer_start/drawer_start.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,sFAavB,CAAC"}

package/dist/layouts/drawers/drawer_start/drawer_start.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_start.js","sources":["../../../../src/layouts/drawers/drawer_start/drawer_start.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport styles from './drawer_start.module.css';\n\nexport interface DrawerStartProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const DrawerStart = React.forwardRef<HTMLElement, DrawerStartProps>(\n  function DrawerStart({ children, className, ...props }: DrawerStartProps, ref) {\n    return (\n      <VStack\n        ref={ref}\n        as=\"section\"\n        className={classNames(styles.drawerStart, className, 'drawerStart')}\n        {...props}\n      >\n        {children}\n      </VStack>\n    );\n  }\n);\n"],"names":["DrawerStart","React","children","className","props","ref","jsx","VStack","classNames","styles"],"mappings":";;;;0DASaA,IAAcC,EAAM;AAAA,EAC/B,SAAqB,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAA2BC,GAAK;AAC7E,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG,EAAWC,EAAO,aAAaN,GAAW,aAAa;AAAA,QACjE,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/layouts/drawers/drawer_top/drawer_top.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_top.d.ts","sourceRoot":"","sources":["../../../../src/layouts/drawers/drawer_top/drawer_top.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,oFAcpB,CAAC"}

package/dist/layouts/drawers/drawer_top/drawer_top.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drawer_top.js","sources":["../../../../src/layouts/drawers/drawer_top/drawer_top.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../../stacks/v_stack.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport styles from './drawer_top.module.css';\n\nexport interface DrawerTopProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const DrawerTop = React.forwardRef<HTMLElement, DrawerTopProps>(function DrawerTop(\n  { children, className, ...props }: DrawerTopProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"section\"\n      className={classNames(styles.drawerTop, className, 'drawerTop')}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["DrawerTop","React","children","className","props","ref","jsx","VStack","classNames","styles"],"mappings":";;;;4DASaA,IAAYC,EAAM,WAAwC,SACrE,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,EAAWC,EAAO,WAAWN,GAAW,WAAW;AAAA,MAC7D,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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