@tcn/ui 0.0.2 → 0.0.4

package/src/utils/responsive/responsive_renderer.stories.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Meta } from '@storybook/react-vite';
 import { BodyText } from '../../typography/index.js';
 import { StyleBox } from '../../stacks/story_components/style_box.js';
-import { ResponsiveRenderer } from './responsive_renderer.js';
+import { ResponsiveRenderer as ResponsiveRendererComponent } from './responsive_renderer.js';
 
-const meta: Meta<typeof ResponsiveRenderer> = {
-  title: 'ResponsiveRenderer',
-  component: ResponsiveRenderer,
+const meta: Meta<typeof ResponsiveRendererComponent> = {
+  title: 'Utils/Responsive Renderer',
+  component: ResponsiveRendererComponent,
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
@@ -15,9 +15,9 @@ const meta: Meta<typeof ResponsiveRenderer> = {
 
 export default meta;
 
-export function Default() {
+export function ResponsiveRenderer() {
   return (
-    <ResponsiveRenderer
+    <ResponsiveRendererComponent
       mobile={
         <StyleBox
           className="surface-primary"
@@ -47,7 +47,7 @@ export function Default() {
 
 export function CustomBreakpoint() {
   return (
-    <ResponsiveRenderer
+    <ResponsiveRendererComponent
       breakpoint={1024}
       mobile={
         <StyleBox

package/src/utils/scroll_away_listener.stories.tsx

@@ -2,7 +2,17 @@ import React, { useState } from 'react';
 import { ScrollAwayListener } from './scroll_away_listener.js';
 
 export default {
-  title: 'Scroll Away Listener',
+  title: 'Utils/Scroll Away Listener',
+  component: ScrollAwayListener,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A utility component that can be used to listen for scroll away events.',
+      },
+    },
+  },
 };
 
 export function Baseline() {

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

package/src/surfaces/modal/modal.stories.tsx

@@ -1,15 +0,0 @@
-import { Modal } from './modal.js';
-
-export default {
-  title: 'Frame / Modal',
-  component: Modal,
-  tags: ['autodocs'],
-};
-
-export const ModalStory = () => {
-  return (
-    <Modal>
-      <>modal</>
-    </Modal>
-  );
-};