@tcn/ui 0.0.1

package/dist/form/field/common/status_input/status_input.js

@@ -0,0 +1,56 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { AlertTriangleIcon as u } from "@tcn/icons/alert_triangle_icon.js";
+import { LockTwoIcon as f } from "@tcn/icons/lock_two_icon.js";
+import { HStack as m } from "../../../../stacks/h_stack.js";
+import p from "react";
+import { Loading as g } from "../../../../feedback/loading/loading.js";
+import "../../../../feedback/progress/progress_bar.js";
+import "@tcn/state";
+import "../../../../stacks/v_stack.js";
+import o from "classnames";
+import '../../../../status_input.css';const A = "_field-error_6d015c9", h = "_field-status-input_c30d6fb", n = { "field-error": A, "field-status-input": h }, k = () => /* @__PURE__ */ r(f, { className: "field-lock", size: "lg" }), x = () => /* @__PURE__ */ r(g, { size: "20px", className: "field-loader" }), I = () => /* @__PURE__ */ r(
+  u,
+  {
+    className: o(n["field-error"], "field-error"),
+    size: "lg"
+  }
+), N = ({ state: e }) => {
+  switch (e) {
+    case "locked":
+      return /* @__PURE__ */ r(k, {});
+    case "loading":
+      return /* @__PURE__ */ r(x, {});
+    case "error":
+      return /* @__PURE__ */ r(I, {});
+    default:
+      return null;
+  }
+}, v = p.forwardRef(function({ children: s, state: t = "default", className: i, ...l }, d) {
+  const a = t === "default" || t === "error";
+  return /* @__PURE__ */ c(
+    m,
+    {
+      ref: d,
+      "data-state": t,
+      className: o(
+        "field-status-input",
+        n["field-status-input"],
+        i,
+        "field-status-input"
+      ),
+      vAlign: "center",
+      hAlign: "end",
+      gap: "4px",
+      ...l,
+      children: [
+        a && s,
+        /* @__PURE__ */ r(N, { state: t })
+      ]
+    }
+  );
+});
+export {
+  N as AdornmentMap,
+  v as FieldStatusInput
+};
+//# sourceMappingURL=status_input.js.map

package/dist/form/field/common/status_input/status_input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status_input.js","sources":["../../../../../src/form/field/common/status_input/status_input.tsx"],"sourcesContent":["import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';\nimport { LockTwoIcon } from '@tcn/icons/lock_two_icon.js';\nimport { HStack } from '../../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';\nimport React from 'react';\nimport { Loading } from '../../../../feedback/index.js';\nimport classNames from 'classnames';\nimport styles from './status_input.module.css';\n\n/*\n TODO: I really want to make these themable.\n The way we do that is simply put a div placeholder with\n a class that the theme can override. They can use svgs as \n backgrounds for icons. This would make it so the component\n library doesn't dictate the icon set used. \n*/\nconst LockedAdornment: React.FC = () => {\n  return <LockTwoIcon className=\"field-lock\" size=\"lg\" />;\n};\n\nconst LoadingAdornment: React.FC = () => {\n  return <Loading size=\"20px\" className=\"field-loader\" />;\n};\n\nconst ErroredAdornment: React.FC = () => {\n  return (\n    <AlertTriangleIcon\n      className={classNames(styles['field-error'], 'field-error')}\n      size=\"lg\"\n    />\n  );\n};\n\nexport const AdornmentMap: React.FC<{ state: StatusInputState }> = ({ state }) => {\n  switch (state) {\n    case 'locked':\n      return <LockedAdornment />;\n    case 'loading':\n      return <LoadingAdornment />;\n    case 'error':\n      return <ErroredAdornment />;\n    default:\n      return null;\n  }\n};\n\nexport type StatusInputState = 'locked' | 'loading' | 'error' | 'default';\nexport interface StatusInputOwnProps {\n  children: React.ReactNode;\n  state?: StatusInputState;\n}\n\nexport type StatusInputProps = WithDetailedHTMLProps<\n  StatusInputOwnProps & HStackOwnProps,\n  'div'\n>;\n\nexport const FieldStatusInput = React.forwardRef(function StatusInput(\n  { children: Control, state = 'default', className, ...props }: StatusInputProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const showControl = state === 'default' || state === 'error';\n\n  return (\n    <HStack\n      ref={ref}\n      data-state={state}\n      className={classNames(\n        'field-status-input',\n        styles['field-status-input'],\n        className,\n        'field-status-input'\n      )}\n      vAlign=\"center\"\n      hAlign=\"end\"\n      gap=\"4px\"\n      {...props}\n    >\n      {showControl && Control}\n      <AdornmentMap state={state} />\n    </HStack>\n  );\n});\n"],"names":["LockedAdornment","jsx","LockTwoIcon","LoadingAdornment","Loading","ErroredAdornment","AlertTriangleIcon","classNames","styles","AdornmentMap","state","FieldStatusInput","React","Control","className","props","ref","showControl","jsxs","HStack"],"mappings":";;;;;;;;;;wHAiBMA,IAA4B,MACzB,gBAAAC,EAACC,GAAA,EAAY,WAAU,cAAa,MAAK,MAAK,GAGjDC,IAA6B,MAC1B,gBAAAF,EAACG,GAAA,EAAQ,MAAK,QAAO,WAAU,gBAAe,GAGjDC,IAA6B,MAE/B,gBAAAJ;AAAA,EAACK;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,aAAa,GAAG,aAAa;AAAA,IAC1D,MAAK;AAAA,EAAA;AAAA,GAKEC,IAAsD,CAAC,EAAE,OAAAC,QAAY;AAChF,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,+BAAQV,GAAA,EAAgB;AAAA,IAC1B,KAAK;AACH,+BAAQG,GAAA,EAAiB;AAAA,IAC3B,KAAK;AACH,+BAAQE,GAAA,EAAiB;AAAA,IAC3B;AACE,aAAO;AAAA,EAAA;AAEb,GAaaM,IAAmBC,EAAM,WAAW,SAC/C,EAAE,UAAUC,GAAS,OAAAH,IAAQ,WAAW,WAAAI,GAAW,GAAGC,EAAA,GACtDC,GACA;AACA,QAAMC,IAAcP,MAAU,aAAaA,MAAU;AAErD,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,cAAYN;AAAA,MACZ,WAAWH;AAAA,QACT;AAAA,QACAC,EAAO,oBAAoB;AAAA,QAC3BM;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeJ;AAAA,QAChB,gBAAAZ,EAACQ,KAAa,OAAAC,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC,CAAC;"}

package/dist/form/field/common/types.d.ts

@@ -0,0 +1,10 @@
+export interface FieldInput {
+    id?: string;
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    errorMessage?: string | React.ReactNode;
+    locked?: boolean;
+    loading?: boolean;
+    required?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/form/field/common/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/field/common/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/form/field/common/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/form/field/common/types.js.map

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

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { FieldInput } from './common/types.js';
+import { StackStyleProps } from '../../stacks/types/styles.js';
+export interface FieldProps extends FieldInput, StackStyleProps {
+    children: React.ReactNode;
+    breakpointPixels?: number;
+    labelWidth?: string;
+}
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/form/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAIpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,UAAU,EAAE,eAAe;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,mFAuBhB,CAAC"}

package/dist/form/field/field.js

@@ -0,0 +1,19 @@
+import { jsx as r, Fragment as a } from "react/jsx-runtime";
+import c, { useState as u } from "react";
+import { HField as F } from "./h_field/h_field.js";
+import { VField as R } from "./v_field/v_field.js";
+import "../../utils/focus_redirect.js";
+import "../../utils/click_away_listener.js";
+import "../../utils/scroll_away_listener.js";
+import { useForkRef as l } from "../../utils/hooks/use_fork_ref.js";
+import { useResizeObserver as p } from "../../utils/hooks/use_resize_observer.js";
+const H = c.forwardRef(function({ children: t, breakpointPixels: i = 500, ...e }, m) {
+  const [f, n] = u(!0), s = p((d) => {
+    n(d >= i);
+  }), o = l(m, s);
+  return /* @__PURE__ */ r(a, { children: f ? /* @__PURE__ */ r(F, { ...e, ref: o, ...e, children: t }) : /* @__PURE__ */ r(R, { ...e, ref: o, ...e, children: t }) });
+});
+export {
+  H as Field
+};
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sources":["../../../src/form/field/field.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { FieldInput } from './common/types.js';\nimport { HField } from './h_field/h_field.js';\nimport { VField } from './v_field/v_field.js';\nimport { useForkRef, useResizeObserver } from '../../utils/index.js';\nimport type { StackStyleProps } from '../../stacks/types/styles.js';\n\nexport interface FieldProps extends FieldInput, StackStyleProps {\n  children: React.ReactNode;\n  breakpointPixels?: number;\n  labelWidth?: string;\n}\n\nexport const Field = React.forwardRef(function Field(\n  { children, breakpointPixels = 500, ...props }: FieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [isWideContainer, setIsWideContainer] = useState(true);\n  const containerRef = useResizeObserver(newWidth => {\n    setIsWideContainer(newWidth >= breakpointPixels);\n  });\n  const forkedRef = useForkRef(ref, containerRef);\n\n  return (\n    <>\n      {isWideContainer ? (\n        <HField {...props} ref={forkedRef} {...props}>\n          {children}\n        </HField>\n      ) : (\n        <VField {...props} ref={forkedRef} {...props}>\n          {children}\n        </VField>\n      )}\n    </>\n  );\n});\n"],"names":["Field","React","children","breakpointPixels","props","ref","isWideContainer","setIsWideContainer","useState","containerRef","useResizeObserver","newWidth","forkedRef","useForkRef","jsx","Fragment","HField","VField"],"mappings":";;;;;;;;;AAaO,MAAMA,IAAQC,EAAM,WAAW,SACpC,EAAE,UAAAC,GAAU,kBAAAC,IAAmB,KAAK,GAAGC,EAAA,GACvCC,GACA;AACA,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAI,GACrDC,IAAeC,EAAkB,CAAAC,MAAY;AACjD,IAAAJ,EAAmBI,KAAYR,CAAgB;AAAA,EACjD,CAAC,GACKS,IAAYC,EAAWR,GAAKI,CAAY;AAE9C,SACE,gBAAAK,EAAAC,GAAA,EACG,cACC,gBAAAD,EAACE,GAAA,EAAQ,GAAGZ,GAAO,KAAKQ,GAAY,GAAGR,GACpC,UAAAF,GACH,IAEA,gBAAAY,EAACG,KAAQ,GAAGb,GAAO,KAAKQ,GAAY,GAAGR,GACpC,UAAAF,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC;"}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1 @@
+{"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/form/field/h_field/h_field.d.ts

@@ -0,0 +1,11 @@
+import { HStackOwnProps } from '../../../stacks/h_stack.js';
+import { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+import { default as React } from 'react';
+import { FieldInput } from '../common/types.js';
+export interface HFieldOwnProps extends FieldInput {
+    labelWidth?: string;
+    children: React.ReactNode;
+}
+export type HFieldProps = WithDetailedHTMLProps<HFieldOwnProps, 'div'> & HStackOwnProps;
+export declare const HField: React.ForwardRefExoticComponent<Omit<HFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=h_field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"h_field.d.ts","sourceRoot":"","sources":["../../../../src/form/field/h_field/h_field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAGxF,eAAO,MAAM,MAAM,iGAmDjB,CAAC"}

package/dist/form/field/h_field/h_field.js

@@ -0,0 +1,60 @@
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { HStack as I } from "../../../stacks/h_stack.js";
+import H from "classnames";
+import g, { useState as y } from "react";
+import { FieldHeader as S } from "../common/field_header.js";
+import { FieldControl as $ } from "../common/field_control/field_control.js";
+import { FieldStatusInput as j } from "../common/status_input/status_input.js";
+import '../../../h_field.css';const v = "_h-field_845b93f", w = { "h-field": v };
+let A = 0;
+const B = g.forwardRef(function({
+  label: o,
+  description: s,
+  errorMessage: d,
+  children: n,
+  labelWidth: a = "40%",
+  locked: t = !1,
+  loading: e = !1,
+  className: f,
+  id: c,
+  required: m,
+  ...h
+}, p) {
+  const [i] = y(() => c || `h-field-${A++}`), u = `${i}-label`, b = `${i}-description`, l = !!d, F = t ? "locked" : e ? "loading" : l ? "error" : "default";
+  return /* @__PURE__ */ x(
+    I,
+    {
+      ref: p,
+      as: "div",
+      "aria-labelledby": u,
+      "aria-describedby": b,
+      "data-locked": t,
+      "data-error": l,
+      "data-loading": e,
+      className: H("base-field", w["h-field"], "h-field", f),
+      vAlign: "start",
+      hAlign: "start",
+      height: "auto",
+      gap: "4px",
+      ...h,
+      children: [
+        /* @__PURE__ */ r(
+          S,
+          {
+            minWidth: a,
+            width: a,
+            id: i,
+            label: o,
+            description: s,
+            required: m
+          }
+        ),
+        /* @__PURE__ */ r($, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r(j, { state: F, children: n }) })
+      ]
+    }
+  );
+});
+export {
+  B as HField
+};
+//# sourceMappingURL=h_field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"h_field.js","sources":["../../../../src/form/field/h_field/h_field.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport classNames from 'classnames';\nimport React, { useState } from 'react';\nimport styles from './h_field.module.css';\nimport { FieldInput } from '../common/types.js';\nimport { FieldHeader } from '../common/field_header.js';\nimport { FieldControl } from '../common/field_control/field_control.js';\nimport { FieldStatusInput } from '../common/status_input/status_input.js';\n\nexport interface HFieldOwnProps extends FieldInput {\n  labelWidth?: string;\n  children: React.ReactNode;\n}\nexport type HFieldProps = WithDetailedHTMLProps<HFieldOwnProps, 'div'> & HStackOwnProps;\n\nlet idIndex = 0;\nexport const HField = React.forwardRef(function HField(\n  {\n    label,\n    description,\n    errorMessage,\n    children: Control,\n    labelWidth = '40%',\n    locked = false,\n    loading = false,\n    className,\n    id,\n    required,\n    ...props\n  }: HFieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [finalId] = useState(() => id || `h-field-${idIndex++}`);\n  const labelId = `${finalId}-label`;\n  const descriptionId = `${finalId}-description`;\n  const hasError = errorMessage ? true : false;\n  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={classNames('base-field', styles['h-field'], 'h-field', className)}\n      vAlign=\"start\"\n      hAlign=\"start\"\n      height=\"auto\"\n      gap=\"4px\"\n      {...props}\n    >\n      <FieldHeader\n        minWidth={labelWidth}\n        width={labelWidth}\n        id={finalId}\n        label={label}\n        description={description}\n        required={required}\n      />\n      <FieldControl errorMessage={errorMessage} loading={loading} locked={locked}>\n        <FieldStatusInput state={state}>{Control}</FieldStatusInput>\n      </FieldControl>\n    </HStack>\n  );\n});\n"],"names":["idIndex","HField","React","label","description","errorMessage","Control","labelWidth","locked","loading","className","id","required","props","ref","finalId","useState","labelId","descriptionId","hasError","state","jsxs","HStack","classNames","styles","jsx","FieldHeader","FieldControl","FieldStatusInput"],"mappings":";;;;;;;;AAiBA,IAAIA,IAAU;AACP,MAAMC,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,CAAO,IAAIC,EAAS,MAAML,KAAM,WAAWX,GAAS,EAAE,GACvDiB,IAAU,GAAGF,CAAO,UACpBG,IAAgB,GAAGH,CAAO,gBAC1BI,IAAW,EAAAd,GACXe,IAAQZ,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAE7E,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,mBAAiBG;AAAA,MACjB,oBAAkBC;AAAA,MAClB,eAAaV;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWc,EAAW,cAAcC,EAAO,SAAS,GAAG,WAAWd,CAAS;AAAA,MAC3E,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAUnB;AAAA,YACV,OAAOA;AAAA,YACP,IAAIQ;AAAA,YACJ,OAAAZ;AAAA,YACA,aAAAC;AAAA,YACA,UAAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAa,EAACE,KAAa,cAAAtB,GAA4B,SAAAI,GAAkB,QAAAD,GAC1D,UAAA,gBAAAiB,EAACG,GAAA,EAAiB,OAAAR,GAAe,UAAAd,EAAA,CAAQ,EAAA,CAC3C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,10 @@
+import { VStackOwnProps } from '../../../stacks/v_stack.js';
+import { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+import { default as React } from 'react';
+import { FieldInput } from '../common/types.js';
+export interface VFieldOwnProps extends FieldInput {
+    children: React.ReactNode;
+}
+export type VFieldProps = WithDetailedHTMLProps<VFieldOwnProps, 'div'> & VStackOwnProps;
+export declare const VField: React.ForwardRefExoticComponent<Omit<VFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=v_field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"v_field.d.ts","sourceRoot":"","sources":["../../../../src/form/field/v_field/v_field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAExF,eAAO,MAAM,MAAM,iGAwDjB,CAAC"}

package/dist/form/field/v_field/v_field.js

@@ -0,0 +1,68 @@
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import { VStack as g } from "../../../stacks/v_stack.js";
+import v from "classnames";
+import F, { useState as I } from "react";
+import { FieldControl as A } from "../common/field_control/field_control.js";
+import { FieldHeader as y } from "../common/field_header.js";
+import { FieldStatusInput as S } from "../common/status_input/status_input.js";
+import '../../../v_field.css';const V = {};
+let $ = 0;
+const z = F.forwardRef(function({
+  label: d,
+  description: o,
+  errorMessage: a,
+  children: s,
+  locked: t = !1,
+  loading: e = !1,
+  maxWidth: N,
+  minWidth: R,
+  className: n,
+  id: c,
+  required: f,
+  ...m
+}, p) {
+  const [r] = I(() => c || `v-field-${$++}`), l = !!a, h = `${r}-label`, u = `${r}-description`, b = t ? "locked" : e ? "loading" : l ? "error" : "default";
+  return /* @__PURE__ */ x(
+    g,
+    {
+      ref: p,
+      as: "div",
+      "aria-labelledby": h,
+      "aria-describedby": u,
+      "data-locked": t,
+      "data-error": l,
+      "data-loading": e,
+      className: v("base-field", V["v-field"], "v-field", n),
+      vAlign: "start",
+      hAlign: "start",
+      height: "auto",
+      gap: "4px",
+      ...m,
+      children: [
+        /* @__PURE__ */ i(
+          y,
+          {
+            id: r,
+            label: d,
+            description: o,
+            required: f
+          }
+        ),
+        /* @__PURE__ */ i(
+          A,
+          {
+            errorMessage: a,
+            loading: e,
+            locked: t,
+            hAlign: "start",
+            children: /* @__PURE__ */ i(S, { state: b, hAlign: "start", children: s })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  z as VField
+};
+//# sourceMappingURL=v_field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"v_field.js","sources":["../../../../src/form/field/v_field/v_field.tsx"],"sourcesContent":["import { VStack } from '../../../stacks/v_stack.js';\nimport type { VStackOwnProps } from '../../../stacks/v_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport classNames from 'classnames';\nimport React, { useState } from 'react';\nimport styles from './v_field.module.css';\nimport { FieldControl } from '../common/field_control/field_control.js';\nimport { FieldHeader } from '../common/field_header.js';\nimport { FieldStatusInput } from '../common/status_input/status_input.js';\nimport { FieldInput } from '../common/types.js';\n\nexport interface VFieldOwnProps extends FieldInput {\n  children: React.ReactNode;\n}\n\nexport type VFieldProps = WithDetailedHTMLProps<VFieldOwnProps, 'div'> & VStackOwnProps;\nlet idIndex = 0;\nexport const VField = React.forwardRef(function VField(\n  {\n    label,\n    description,\n    errorMessage,\n    children: Control,\n    locked = false,\n    loading = false,\n    maxWidth,\n    minWidth,\n    className,\n    id,\n    required,\n    ...props\n  }: VFieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [finalId] = useState(() => id || `v-field-${idIndex++}`);\n  const hasError = errorMessage ? true : false;\n  const labelId = `${finalId}-label`;\n  const descriptionId = `${finalId}-description`;\n  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n  return (\n    <VStack\n      ref={ref}\n      as=\"div\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={classNames('base-field', styles['v-field'], 'v-field', className)}\n      vAlign=\"start\"\n      hAlign=\"start\"\n      height=\"auto\"\n      gap=\"4px\"\n      {...props}\n    >\n      <FieldHeader\n        id={finalId}\n        label={label}\n        description={description}\n        required={required}\n      />\n      <FieldControl\n        errorMessage={errorMessage}\n        loading={loading}\n        locked={locked}\n        hAlign=\"start\"\n      >\n        <FieldStatusInput state={state} hAlign=\"start\">\n          {Control}\n        </FieldStatusInput>\n      </FieldControl>\n    </VStack>\n  );\n});\n"],"names":["idIndex","VField","React","label","description","errorMessage","Control","locked","loading","maxWidth","minWidth","className","id","required","props","ref","finalId","useState","hasError","labelId","descriptionId","state","jsxs","VStack","classNames","styles","jsx","FieldHeader","FieldControl","FieldStatusInput"],"mappings":";;;;;;;;AAgBA,IAAIA,IAAU;AACP,MAAMC,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,CAAO,IAAIC,EAAS,MAAML,KAAM,WAAWZ,GAAS,EAAE,GACvDkB,IAAW,EAAAb,GACXc,IAAU,GAAGH,CAAO,UACpBI,IAAgB,GAAGJ,CAAO,gBAC1BK,IAAQd,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAC7E,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,eAAab;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWgB,EAAW,cAAcC,EAAO,SAAS,GAAG,WAAWd,CAAS;AAAA,MAC3E,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIX;AAAA,YACJ,OAAAb;AAAA,YACA,aAAAC;AAAA,YACA,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAa;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,cAAAvB;AAAA,YACA,SAAAG;AAAA,YACA,QAAAD;AAAA,YACA,QAAO;AAAA,YAEP,UAAA,gBAAAmB,EAACG,GAAA,EAAiB,OAAAR,GAAc,QAAO,SACpC,UAAAf,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/form/field_presenters/field_presenter.d.ts

@@ -0,0 +1,39 @@
+import { Signal } from '@tcn/state';
+export interface FieldState<T> {
+    label: string;
+    value: T;
+    error: string | null;
+    hasError: boolean;
+    description?: string;
+    isDirty: boolean;
+}
+export interface FieldOptions<T> {
+    description?: string;
+    validate?: (value: T) => Promise<void> | void;
+    validateOnChange?: boolean;
+    equalityCheck?: (a: T, b: T) => boolean;
+    copyInitialValue?: (value: T) => T;
+}
+export declare class FieldPresenter<T> {
+    protected _state: Signal<FieldState<T>>;
+    private _initialValue;
+    private _equalityCheck;
+    private _cloneInitialValue;
+    private _validationRunner;
+    private _validate;
+    private _subscriptions;
+    private _validateOnChange;
+    private _cancelToken;
+    get stateBroadcast(): import('@tcn/state').IBroadcast<FieldState<T>>;
+    get state(): FieldState<T>;
+    constructor(label: string, value: T, options?: FieldOptions<T>);
+    setLabel: (label: string) => void;
+    setDescription: (description: string) => void;
+    setValue: (value: T) => void;
+    setError: (error: string | null) => void;
+    validate: () => Promise<void>;
+    upgrade: () => void;
+    clearError: () => void;
+    dispose(): void;
+}
+//# sourceMappingURL=field_presenter.d.ts.map

package/dist/form/field_presenters/field_presenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field_presenter.d.ts","sourceRoot":"","sources":["../../../src/form/field_presenters/field_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,MAAM,EAAe,MAAM,YAAY,CAAC;AAUxE,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;CACpC;AAKD,qBAAa,cAAc,CAAC,CAAC;IAC3B,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,aAAa,CAAI;IACzB,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,kBAAkB,CAAc;IAExC,OAAO,CAAC,iBAAiB,CAAe;IACxC,OAAO,CAAC,SAAS,CAAyD;IAC1E,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,iBAAiB,CAAU;IACnC,OAAO,CAAC,YAAY,CAA4B;IAEhD,IAAI,cAAc,mDAEjB;IAED,IAAI,KAAK,kBAER;gBAEW,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,GAAE,YAAY,CAAC,CAAC,CAAM;IAmBlE,QAAQ,GAAI,OAAO,MAAM,UAKvB;IAEF,cAAc,GAAI,aAAa,MAAM,UAKnC;IAEF,QAAQ,GAAI,OAAO,CAAC,UAmBlB;IAEF,QAAQ,GAAI,OAAO,MAAM,GAAG,IAAI,UAQ9B;IAEF,QAAQ,sBAyBN;IAEF,OAAO,aAUL;IAEF,UAAU,aAER;IAEF,OAAO;CAIR"}

package/dist/form/field_presenters/field_presenter.js

@@ -0,0 +1,71 @@
+import { Runner as s, Signal as l } from "@tcn/state";
+function h(a) {
+  return JSON.parse(JSON.stringify(a));
+}
+function u(a, t) {
+  return JSON.stringify(a) === JSON.stringify(t);
+}
+const o = () => {
+}, c = (a) => h(a);
+class f {
+  _state;
+  _initialValue;
+  _equalityCheck;
+  _cloneInitialValue;
+  _validationRunner;
+  _validate;
+  _subscriptions;
+  _validateOnChange;
+  _cancelToken = "field_presenter_cancel";
+  get stateBroadcast() {
+    return this._state.broadcast;
+  }
+  get state() {
+    return this._state.get();
+  }
+  constructor(t, e, i = {}) {
+    this._validate = i.validate || o, this._validationRunner = new s(void 0), this._subscriptions = [], this._cloneInitialValue = i.copyInitialValue || c, this._initialValue = this._cloneInitialValue(e), this._equalityCheck = i.equalityCheck || ((r, n) => u(r, n)), this._state = new l({
+      label: t,
+      value: e,
+      error: null,
+      hasError: !1,
+      description: i.description,
+      isDirty: !1
+    }), this._validateOnChange = i.validateOnChange ?? !1;
+  }
+  setLabel = (t) => {
+    this._state.transform((e) => (e.label = t, e));
+  };
+  setDescription = (t) => {
+    this._state.transform((e) => (e.description = t, e));
+  };
+  setValue = (t) => {
+    this._equalityCheck(this.state.value, t) || (this._state.transform((e) => (this._validateOnChange && (e.error = null, e.hasError = !1), e.value = t, e.isDirty = !this._equalityCheck(t, this._initialValue), e)), this._validateOnChange && this.validate());
+  };
+  setError = (t) => {
+    this._validationRunner.cancel(this._cancelToken), this._state.transform((e) => (e.error = t, e.hasError = t != null, e));
+  };
+  validate = async () => {
+    try {
+      this._validationRunner.cancel(this._cancelToken), await this._validationRunner.execute(() => this._validate(this.state.value)), this._state.transform((t) => (t.error = null, t.hasError = !1, t));
+    } catch (t) {
+      const e = t.message || t.toString();
+      if (e === this._cancelToken)
+        return;
+      throw this._state.transform((i) => (i.error = e, i.hasError = !0, i)), t;
+    }
+  };
+  upgrade = () => {
+    this._equalityCheck(this.state.value, this._initialValue) || (this._initialValue = this._cloneInitialValue(this.state.value), this._state.transform((t) => (t.isDirty = !1, t)));
+  };
+  clearError = () => {
+    this.setError(null);
+  };
+  dispose() {
+    this._validationRunner.cancel(this._cancelToken), this._subscriptions.forEach((t) => t.unsubscribe());
+  }
+}
+export {
+  f as FieldPresenter
+};
+//# sourceMappingURL=field_presenter.js.map

package/dist/form/field_presenters/field_presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field_presenter.js","sources":["../../../src/form/field_presenters/field_presenter.ts"],"sourcesContent":["import { ISubscription, Runner, Signal, WeakPromise } from '@tcn/state';\n\nfunction fastCopy<T>(value: T): T {\n  return JSON.parse(JSON.stringify(value));\n}\n\nfunction fastDeepEqual<T>(a: T, b: T): boolean {\n  return JSON.stringify(a) === JSON.stringify(b);\n}\n\nexport interface FieldState<T> {\n  label: string;\n  value: T;\n  error: string | null;\n  hasError: boolean;\n  description?: string;\n  isDirty: boolean;\n}\n\nexport interface FieldOptions<T> {\n  description?: string;\n  validate?: (value: T) => Promise<void> | void;\n  validateOnChange?: boolean;\n  equalityCheck?: (a: T, b: T) => boolean;\n  copyInitialValue?: (value: T) => T;\n}\n\nconst noop = () => {};\nconst defaultCopy = <T>(value: T): T => fastCopy(value);\n\nexport class FieldPresenter<T> {\n  protected _state: Signal<FieldState<T>>;\n  private _initialValue: T;\n  private _equalityCheck: (a: T, b: T) => boolean;\n  private _cloneInitialValue: (v: T) => T;\n\n  private _validationRunner: Runner<void>;\n  private _validate: (value: T) => Promise<void> | void | WeakPromise<void>;\n  private _subscriptions: ISubscription<any>[];\n  private _validateOnChange: boolean;\n  private _cancelToken = 'field_presenter_cancel';\n\n  get stateBroadcast() {\n    return this._state.broadcast;\n  }\n\n  get state() {\n    return this._state.get();\n  }\n\n  constructor(label: string, value: T, options: FieldOptions<T> = {}) {\n    this._validate = options.validate || noop;\n    this._validationRunner = new Runner<void>(undefined);\n    this._subscriptions = [];\n    this._cloneInitialValue = options.copyInitialValue || defaultCopy;\n    this._initialValue = this._cloneInitialValue(value);\n    this._equalityCheck = options.equalityCheck || ((a, b) => fastDeepEqual(a, b));\n    this._state = new Signal<FieldState<T>>({\n      label,\n      value,\n      error: null,\n      hasError: false,\n      description: options.description,\n      isDirty: false,\n    });\n\n    this._validateOnChange = options.validateOnChange ?? false;\n  }\n\n  setLabel = (label: string) => {\n    this._state.transform(s => {\n      s.label = label;\n      return s;\n    });\n  };\n\n  setDescription = (description: string) => {\n    this._state.transform(s => {\n      s.description = description;\n      return s;\n    });\n  };\n\n  setValue = (value: T) => {\n    if (this._equalityCheck(this.state.value, value)) {\n      return;\n    }\n\n    this._state.transform(s => {\n      if (this._validateOnChange) {\n        s.error = null;\n        s.hasError = false;\n      }\n\n      s.value = value;\n      s.isDirty = !this._equalityCheck(value, this._initialValue);\n      return s;\n    });\n\n    if (this._validateOnChange) {\n      this.validate();\n    }\n  };\n\n  setError = (error: string | null) => {\n    this._validationRunner.cancel(this._cancelToken);\n\n    this._state.transform(s => {\n      s.error = error;\n      s.hasError = error != null;\n      return s;\n    });\n  };\n\n  validate = async () => {\n    try {\n      this._validationRunner.cancel(this._cancelToken);\n      await this._validationRunner.execute(() => {\n        return this._validate(this.state.value);\n      });\n\n      this._state.transform(s => {\n        s.error = null;\n        s.hasError = false;\n        return s;\n      });\n    } catch (e: any) {\n      const message = e.message || e.toString();\n      if (message === this._cancelToken) {\n        return;\n      }\n\n      this._state.transform(s => {\n        s.error = message;\n        s.hasError = true;\n        return s;\n      });\n      throw e;\n    }\n  };\n\n  upgrade = () => {\n    if (this._equalityCheck(this.state.value, this._initialValue)) {\n      return;\n    }\n\n    this._initialValue = this._cloneInitialValue(this.state.value);\n    this._state.transform(s => {\n      s.isDirty = false;\n      return s;\n    });\n  };\n\n  clearError = () => {\n    this.setError(null);\n  };\n\n  dispose() {\n    this._validationRunner.cancel(this._cancelToken);\n    this._subscriptions.forEach(s => s.unsubscribe());\n  }\n}\n"],"names":["fastCopy","value","fastDeepEqual","b","noop","defaultCopy","FieldPresenter","label","options","Runner","a","Signal","s","description","error","e","message"],"mappings":"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"}

package/dist/form/field_presenters/options_field_presenter.d.ts

@@ -0,0 +1,15 @@
+import { Signal } from '@tcn/state';
+import { FieldOptions, FieldPresenter, FieldState } from './field_presenter.js';
+export interface OptionsFieldState<TValue = string, TOption = string> extends FieldState<TValue> {
+    options: TOption[];
+}
+export interface OptionsFieldOptions<TValue = string, TOption = string> extends FieldOptions<TValue> {
+    options?: TOption[];
+}
+export declare class OptionsFieldPresenter<TValue = string, TOption = TValue> extends FieldPresenter<TValue> {
+    protected _options: Signal<TOption[]>;
+    get optionsBroadcast(): import('@tcn/state').IBroadcast<TOption[]>;
+    constructor(label: string, value: TValue, options: OptionsFieldOptions<TValue, TOption>);
+    setOptions(options: TOption[]): void;
+}
+//# sourceMappingURL=options_field_presenter.d.ts.map

package/dist/form/field_presenters/options_field_presenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options_field_presenter.d.ts","sourceRoot":"","sources":["../../../src/form/field_presenters/options_field_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEhF,MAAM,WAAW,iBAAiB,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,GAAG,MAAM,CAClE,SAAQ,UAAU,CAAC,MAAM,CAAC;IAC1B,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,GAAG,MAAM,CACpE,SAAQ,YAAY,CAAC,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,qBAAa,qBAAqB,CAChC,MAAM,GAAG,MAAM,EACf,OAAO,GAAG,MAAM,CAChB,SAAQ,cAAc,CAAC,MAAM,CAAC;IAC9B,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;IAEtC,IAAI,gBAAgB,+CAEnB;gBAGC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,mBAAmB,CAAC,MAAM,EAAE,OAAO,CAAC;IAM/C,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE;CAG9B"}

package/dist/form/field_presenters/options_field_presenter.js

@@ -0,0 +1,18 @@
+import { Signal as e } from "@tcn/state";
+import { FieldPresenter as r } from "./field_presenter.js";
+class a extends r {
+  _options;
+  get optionsBroadcast() {
+    return this._options.broadcast;
+  }
+  constructor(t, s, o) {
+    super(t, s, o), this._options = new e(o.options || []);
+  }
+  setOptions(t) {
+    this._options.set(t);
+  }
+}
+export {
+  a as OptionsFieldPresenter
+};
+//# sourceMappingURL=options_field_presenter.js.map

package/dist/form/field_presenters/options_field_presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options_field_presenter.js","sources":["../../../src/form/field_presenters/options_field_presenter.ts"],"sourcesContent":["import { Signal } from '@tcn/state';\nimport { FieldOptions, FieldPresenter, FieldState } from './field_presenter.js';\n\nexport interface OptionsFieldState<TValue = string, TOption = string>\n  extends FieldState<TValue> {\n  options: TOption[];\n}\n\nexport interface OptionsFieldOptions<TValue = string, TOption = string>\n  extends FieldOptions<TValue> {\n  options?: TOption[];\n}\n\nexport class OptionsFieldPresenter<\n  TValue = string,\n  TOption = TValue,\n> extends FieldPresenter<TValue> {\n  protected _options: Signal<TOption[]>;\n\n  get optionsBroadcast() {\n    return this._options.broadcast;\n  }\n\n  constructor(\n    label: string,\n    value: TValue,\n    options: OptionsFieldOptions<TValue, TOption>\n  ) {\n    super(label, value, options);\n    this._options = new Signal(options.options || []);\n  }\n\n  setOptions(options: TOption[]) {\n    this._options.set(options);\n  }\n}\n"],"names":["OptionsFieldPresenter","FieldPresenter","label","value","options","Signal"],"mappings":";;AAaO,MAAMA,UAGHC,EAAuB;AAAA,EACrB;AAAA,EAEV,IAAI,mBAAmB;AACrB,WAAO,KAAK,SAAS;AAAA,EACvB;AAAA,EAEA,YACEC,GACAC,GACAC,GACA;AACA,UAAMF,GAAOC,GAAOC,CAAO,GAC3B,KAAK,WAAW,IAAIC,EAAOD,EAAQ,WAAW,CAAA,CAAE;AAAA,EAClD;AAAA,EAEA,WAAWA,GAAoB;AAC7B,SAAK,SAAS,IAAIA,CAAO;AAAA,EAC3B;AACF;"}

package/dist/form/field_set/field_set.d.ts

@@ -0,0 +1,13 @@
+import { VStackProps } from '../../stacks/v_stack.js';
+import { default as React } from 'react';
+export type FieldSetProps = VStackProps<HTMLFieldSetElement> & {
+    legend?: string;
+    startAdornments?: React.ReactNode;
+    endAdornments?: React.ReactNode;
+};
+export declare const FieldSet: React.ForwardRefExoticComponent<VStackProps<HTMLFieldSetElement> & {
+    legend?: string;
+    startAdornments?: React.ReactNode;
+    endAdornments?: React.ReactNode;
+} & React.RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=field_set.d.ts.map

package/dist/form/field_set/field_set.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field_set.d.ts","sourceRoot":"","sources":["../../../src/form/field_set/field_set.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,mBAAmB,CAAC,GAAG;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,QAAQ;aALV,MAAM;sBACG,KAAK,CAAC,SAAS;oBACjB,KAAK,CAAC,SAAS;6CAkD/B,CAAC"}

package/dist/form/field_set/field_set.js

@@ -0,0 +1,65 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import i from "classnames";
+import "../../body_text.module-h4XQE2pC.js";
+import "../../callout.module-D8ECmxpO.js";
+import "../../caption.module-DDq0H4xZ.js";
+import "../../footnote.module-DEyFuqOr.js";
+import "../../headline.module-BiwHBtGf.js";
+import "../../subheadline.module-C-v7zMkQ.js";
+import { Title as h } from "../../typography/title/title.js";
+import { HStack as b } from "../../stacks/h_stack.js";
+import { Spacer as f } from "../../stacks/spacer.js";
+import { VStack as m } from "../../stacks/v_stack.js";
+import y, { useMemo as S } from "react";
+import '../../field_set.css';const g = "_field-set_8e981d9", u = "_field-set-body_4cd3139", a = { "field-set": g, "field-set-body": u };
+let x = 0;
+const q = y.forwardRef(function({
+  legend: l,
+  startAdornments: d,
+  endAdornments: s,
+  className: c,
+  children: n,
+  ...t
+}, p) {
+  const o = `field-set-${S(() => x++, [])}`;
+  return /* @__PURE__ */ r(
+    m,
+    {
+      as: "fieldset",
+      "aria-labelledby": o,
+      ref: p,
+      className: i(a["field-set"], c, "field-set"),
+      ...t,
+      children: [
+        l && /* @__PURE__ */ r(
+          b,
+          {
+            id: o,
+            className: i("legend", "field-set-legend"),
+            hAlign: "start",
+            height: t.height,
+            children: [
+              d,
+              d && /* @__PURE__ */ e(f, { width: "8px" }),
+              /* @__PURE__ */ e(h, { className: "field-set-legend-text", children: l }),
+              s && /* @__PURE__ */ e(f, {}),
+              s
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            className: i("field-set-body", a["field-set-body"]),
+            ...t,
+            children: n
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  q as FieldSet
+};
+//# sourceMappingURL=field_set.js.map

package/dist/form/field_set/field_set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field_set.js","sources":["../../../src/form/field_set/field_set.tsx"],"sourcesContent":["import { Title } from '../../typography/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport styles from './field_set.module.css';\n\nlet fieldsetIdCount = 0;\n\nexport type FieldSetProps = VStackProps<HTMLFieldSetElement> & {\n  legend?: string;\n  startAdornments?: React.ReactNode;\n  endAdornments?: React.ReactNode;\n};\n\nexport const FieldSet = React.forwardRef(function FieldSet(\n  {\n    legend,\n    startAdornments,\n    endAdornments,\n    className,\n    children,\n    ...props\n  }: FieldSetProps,\n  ref: React.Ref<HTMLFieldSetElement>\n) {\n  const id = useMemo(() => {\n    return fieldsetIdCount++;\n  }, []);\n\n  const labelId = `field-set-${id}`;\n\n  return (\n    <VStack\n      as=\"fieldset\"\n      aria-labelledby={labelId}\n      ref={ref}\n      className={classnames(styles['field-set'], className, 'field-set')}\n      {...props}\n    >\n      {legend && (\n        <HStack\n          id={labelId}\n          className={classnames('legend', 'field-set-legend')}\n          hAlign=\"start\"\n          height={props.height}\n        >\n          {startAdornments}\n          {startAdornments && <Spacer width=\"8px\" />}\n          <Title className=\"field-set-legend-text\">{legend}</Title>\n          {endAdornments && <Spacer />}\n          {endAdornments}\n        </HStack>\n      )}\n      <VStack\n        className={classnames('field-set-body', styles['field-set-body'])}\n        {...props}\n      >\n        {children}\n      </VStack>\n    </VStack>\n  );\n});\n"],"names":["fieldsetIdCount","FieldSet","React","legend","startAdornments","endAdornments","className","children","props","ref","labelId","useMemo","jsxs","VStack","classnames","styles","HStack","jsx","Spacer","Title"],"mappings":";;;;;;;;;;;;;;AASA,IAAIA,IAAkB;AAQf,MAAMC,IAAWC,EAAM,WAAW,SACvC;AAAA,EACE,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAKA,QAAMC,IAAU,aAJLC,EAAQ,MACVX,KACN,CAAA,CAAE,CAE0B;AAE/B,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,mBAAiBH;AAAA,MACjB,KAAAD;AAAA,MACA,WAAWK,EAAWC,EAAO,WAAW,GAAGT,GAAW,WAAW;AAAA,MAChE,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAL,KACC,gBAAAS;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,IAAIN;AAAA,YACJ,WAAWI,EAAW,UAAU,kBAAkB;AAAA,YAClD,QAAO;AAAA,YACP,QAAQN,EAAM;AAAA,YAEb,UAAA;AAAA,cAAAJ;AAAA,cACAA,KAAmB,gBAAAa,EAACC,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,cACxC,gBAAAD,EAACE,GAAA,EAAM,WAAU,yBAAyB,UAAAhB,GAAO;AAAA,cAChDE,uBAAkBa,GAAA,EAAO;AAAA,cACzBb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAY;AAAA,UAACJ;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,kBAAkBC,EAAO,gBAAgB,CAAC;AAAA,YAC/D,GAAGP;AAAA,YAEH,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}