@dxos/react-ui-form 0.7.3-staging.cc8dd3e → 0.7.3

package/dist/types/src/components/Form/Form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAO,KAAK,UAAU,EAAU,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAK9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAaE,CAAC;AAEnB,KAAK,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAiB/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAQ/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,QAAQ,CAWnC,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,CAQ5C,CAAC;AAkBF,QAAA,MAAM,WAAW;;;;;;;;GAaC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAEnD,KAAK,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAgCzD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,4BAA4B,CAUrE,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAO,KAAK,UAAU,EAAU,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAY9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAME,CAAC;AAEnB,KAAK,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAiB/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAQ/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,QAAQ,CAWnC,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,CAQ5C,CAAC;AAkBF,QAAA,MAAM,WAAW;;;;;;;;GAaC,CAAC;AAEnB,KAAK,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAEnD,KAAK,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;AAgCzD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,4BAA4B,CAUrE,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;GAGA,CAAC;AAEnB,KAAK,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAiBrD,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAQlD,CAAC"}

package/dist/types/src/components/Form/Input.d.ts

@@ -1,17 +1,18 @@
 import React, { type FC, type PropsWithChildren } from 'react';
-import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
+import { type BaseObject, type FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
-import { type FormHandler } from '../../hooks';
+import { type FormPath, type FormHandler } from '../../hooks';
 /**
  * Props passed to input components.
  */
 export type InputProps<T extends BaseObject> = {
-    property: PropertyKey<T>;
+    property: FormPath<T>;
     type: SimpleType;
     format?: FormatEnum;
-    label: string;
+    label?: string;
     disabled?: boolean;
     placeholder?: string;
+    inputOnly?: boolean;
 } & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
 /**
  * Form input component.

package/dist/types/src/components/Form/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAC7C,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAC7C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}

package/dist/types/src/hooks/useForm.d.ts

@@ -3,22 +3,23 @@ import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType, type S } from '@dxos/effect';
 import { type ValidationError } from '@dxos/schema';
 import { type MaybePromise } from '@dxos/util';
+export type FormPath<T extends object = {}> = PropertyKey<T> | `${PropertyKey<T>}.${number}`;
 /**
  * Return type from `useForm` hook.
  */
 export type FormHandler<T extends BaseObject> = {
     values: T;
-    errors: Record<PropertyKey<T>, string>;
-    touched: Record<PropertyKey<T>, boolean>;
-    changed: Record<PropertyKey<T>, boolean>;
+    errors: Record<FormPath<T>, string>;
+    touched: Record<FormPath<T>, boolean>;
+    changed: Record<FormPath<T>, boolean>;
     canSave: boolean;
     handleSave: () => void;
-    getStatus: (property: PropertyKey<T>) => {
+    getStatus: (property: FormPath<T>) => {
         status?: 'error';
         error?: string;
     };
-    getValue: <V>(property: PropertyKey<T>) => V;
-    onValueChange: <V>(property: PropertyKey<T>, type: SimpleType, value: V) => void;
+    getValue: <V>(property: FormPath<T>) => V;
+    onValueChange: <V>(property: FormPath<T>, type: SimpleType, value: V) => void;
     onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 };
 /**

package/dist/types/src/hooks/useForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IAEH,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpB;;OAEG;IAEH,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,4EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAwIhC,CAAC"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,GAAG,EAAE,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC;AAE7F;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACtC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC1C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IAEH,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAEpB;;OAEG;IAEH,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,4EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAwIhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.3-staging.cc8dd3e",
+  "version": "0.7.3",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,20 +29,20 @@
     "date-fns": "^3.3.1",
     "effect": "^3.9.2",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.7.3-staging.cc8dd3e",
-    "@dxos/debug": "0.7.3-staging.cc8dd3e",
-    "@dxos/effect": "0.7.3-staging.cc8dd3e",
-    "@dxos/echo-db": "0.7.3-staging.cc8dd3e",
-    "@dxos/echo-schema": "0.7.3-staging.cc8dd3e",
-    "@dxos/invariant": "0.7.3-staging.cc8dd3e",
-    "@dxos/keys": "0.7.3-staging.cc8dd3e",
-    "@dxos/live-object": "0.7.3-staging.cc8dd3e",
-    "@dxos/react-client": "0.7.3-staging.cc8dd3e",
-    "@dxos/log": "0.7.3-staging.cc8dd3e",
-    "@dxos/react-ui-list": "0.7.3-staging.cc8dd3e",
-    "@dxos/react-ui-types": "0.7.3-staging.cc8dd3e",
-    "@dxos/util": "0.7.3-staging.cc8dd3e",
-    "@dxos/schema": "0.7.3-staging.cc8dd3e"
+    "@dxos/async": "0.7.3",
+    "@dxos/debug": "0.7.3",
+    "@dxos/echo-db": "0.7.3",
+    "@dxos/echo-schema": "0.7.3",
+    "@dxos/invariant": "0.7.3",
+    "@dxos/effect": "0.7.3",
+    "@dxos/keys": "0.7.3",
+    "@dxos/live-object": "0.7.3",
+    "@dxos/react-client": "0.7.3",
+    "@dxos/react-ui-list": "0.7.3",
+    "@dxos/log": "0.7.3",
+    "@dxos/react-ui-types": "0.7.3",
+    "@dxos/schema": "0.7.3",
+    "@dxos/util": "0.7.3"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -53,12 +53,12 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.3-staging.cc8dd3e",
-    "@dxos/random": "0.7.3-staging.cc8dd3e",
-    "@dxos/react-ui": "0.7.3-staging.cc8dd3e",
-    "@dxos/react-ui-syntax-highlighter": "0.7.3-staging.cc8dd3e",
-    "@dxos/react-ui-theme": "0.7.3-staging.cc8dd3e",
-    "@dxos/storybook-utils": "0.7.3-staging.cc8dd3e"
+    "@dxos/random": "0.7.3",
+    "@dxos/echo-signals": "0.7.3",
+    "@dxos/react-ui": "0.7.3",
+    "@dxos/react-ui-syntax-highlighter": "0.7.3",
+    "@dxos/react-ui-theme": "0.7.3",
+    "@dxos/storybook-utils": "0.7.3"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
@@ -66,8 +66,8 @@
     "effect": "^3.9.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.3-staging.cc8dd3e",
-    "@dxos/react-ui-theme": "0.7.3-staging.cc8dd3e"
+    "@dxos/react-ui-theme": "0.7.3",
+    "@dxos/react-ui": "0.7.3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form/Defaults.tsx

@@ -13,6 +13,7 @@ export const TextInput = <T extends BaseObject>({
   property,
   type,
   label,
+  inputOnly,
   disabled,
   placeholder,
   getStatus,
@@ -24,9 +25,11 @@ export const TextInput = <T extends BaseObject>({
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
       <Input.TextInput
         disabled={disabled}
         placeholder={placeholder}
@@ -34,6 +37,7 @@ export const TextInput = <T extends BaseObject>({
         onChange={(event) => onValueChange(property, type, event.target.value)}
         onBlur={onBlur}
       />
+      {inputOnly && <Input.Validation>{error}</Input.Validation>}
     </Input.Root>
   );
 };
@@ -42,6 +46,7 @@ export const NumberInput = <T extends BaseObject>({
   property,
   type,
   label,
+  inputOnly,
   disabled,
   placeholder,
   getStatus,
@@ -51,12 +56,13 @@ export const NumberInput = <T extends BaseObject>({
 }: InputProps<T>) => {
   const { status, error } = getStatus?.(property);
 
-  // TODO(burdon): Only show stepper if bounded integer.
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
       <Input.TextInput
         type='number'
         disabled={disabled}
@@ -65,6 +71,7 @@ export const NumberInput = <T extends BaseObject>({
         onChange={(event) => onValueChange(property, type, event.target.value)}
         onBlur={onBlur}
       />
+      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };
@@ -73,6 +80,7 @@ export const BooleanInput = <T extends BaseObject>({
   property,
   type,
   label,
+  inputOnly,
   getStatus,
   getValue,
   onValueChange,
@@ -81,13 +89,16 @@ export const BooleanInput = <T extends BaseObject>({
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
       <Input.Switch
         checked={getValue<boolean>(property)}
         onCheckedChange={(value) => onValueChange(property, type, value)}
       />
+      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };
@@ -100,6 +111,7 @@ export const SelectInput = <T extends BaseObject>({
   property,
   type,
   label,
+  inputOnly,
   disabled,
   placeholder,
   options,
@@ -111,9 +123,11 @@ export const SelectInput = <T extends BaseObject>({
 
   return (
     <Input.Root validationValence={status}>
-      <InputHeader error={error}>
-        <Input.Label>{label}</Input.Label>
-      </InputHeader>
+      {!inputOnly && (
+        <InputHeader error={error}>
+          <Input.Label>{label}</Input.Label>
+        </InputHeader>
+      )}
       <Select.Root value={getValue(property)} onValueChange={(value) => onValueChange(property, type, value)}>
         {/* TODO(burdon): Placeholder not working? */}
         <Select.TriggerButton classNames='is-full' disabled={disabled} placeholder={placeholder} />
@@ -130,6 +144,7 @@ export const SelectInput = <T extends BaseObject>({
           </Select.Content>
         </Select.Portal>
       </Select.Root>
+      {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };

package/src/components/Form/Form.stories.tsx

@@ -16,20 +16,20 @@ import { Form, type FormProps } from './Form';
 import translations from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
 
+const AddressSchema = S.Struct({
+  street: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Street' })),
+  city: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'City' })),
+  zip: S.optional(S.String.pipe(S.pattern(/^\d{5}(-\d{4})?$/)).annotations({ [AST.TitleAnnotationId]: 'ZIP' })),
+  location: S.optional(Format.GeoPoint.annotations({ [AST.TitleAnnotationId]: 'Location' })),
+}).annotations({ [AST.TitleAnnotationId]: 'Address' });
+
 // TODO(burdon): Translations?
 const TestSchema = S.Struct({
   name: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Name' })),
   active: S.optional(S.Boolean.annotations({ [AST.TitleAnnotationId]: 'Active' })),
   rank: S.optional(S.Number.annotations({ [AST.TitleAnnotationId]: 'Rank' })),
   website: S.optional(Format.URL.annotations({ [AST.TitleAnnotationId]: 'Website' })),
-  address: S.optional(
-    S.Struct({
-      street: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Street' })),
-      city: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'City' })),
-      zip: S.optional(S.String.pipe(S.pattern(/^\d{5}(-\d{4})?$/)).annotations({ [AST.TitleAnnotationId]: 'ZIP' })),
-      location: S.optional(Format.GeoPoint.annotations({ [AST.TitleAnnotationId]: 'Location' })),
-    }).annotations({ [AST.TitleAnnotationId]: 'Address' }),
-  ),
+  address: S.optional(AddressSchema),
 }).pipe(S.mutable);
 
 type TestType = S.Schema.Type<typeof TestSchema>;
@@ -83,8 +83,8 @@ export const Org: Story<Testing.OrgSchemaType> = {
   args: {
     schema: Testing.OrgSchema,
     values: {
-      name: 'DXOS',
-      website: 'https://dxos.org',
+      // name: 'DXOS',
+      // website: 'https://dxos.org',
     },
   },
 };
@@ -165,3 +165,35 @@ export const DiscriminatedShape: StoryObj<DiscriminatedUnionStoryProps> = {
     },
   },
 };
+
+const ArraysSchema = S.Struct({
+  names: S.Array(S.String.pipe(S.nonEmptyString())),
+  addresses: S.Array(AddressSchema),
+}).pipe(S.mutable);
+
+type ArraysType = S.Schema.Type<typeof ArraysSchema>;
+
+const ArraysStory = ({ values: initialValues }: FormProps<ArraysType>) => {
+  const [values, setValues] = useState(initialValues);
+  const handleSave = useCallback<NonNullable<FormProps<ArraysType>['onSave']>>((values) => {
+    setValues(values);
+  }, []);
+
+  return (
+    <TestLayout json={{ values, schema: ArraysSchema.ast.toJSON() }}>
+      <TestPanel>
+        <Form<ArraysType> schema={ArraysSchema} values={values} onSave={handleSave} />
+      </TestPanel>
+    </TestLayout>
+  );
+};
+
+export const Arrays: StoryObj<FormProps<ArraysType>> = {
+  render: ArraysStory,
+  args: {
+    values: {
+      names: ['Alice', 'Bob'],
+      addresses: [],
+    },
+  },
+};

package/src/components/Form/Form.tsx

@@ -6,8 +6,8 @@ import { pipe } from 'effect';
 import { capitalize } from 'effect/String';
 import React, { useEffect, useMemo } from 'react';
 
-import { AST, type BaseObject, S, type PropertyKey } from '@dxos/echo-schema';
-import { findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
+import { AST, type BaseObject, S, type PropertyKey, type FormatEnum } from '@dxos/echo-schema';
+import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -15,9 +15,9 @@ import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
 import { SelectInput } from './Defaults';
-import { type InputComponent } from './Input';
+import { InputHeader, type InputComponent } from './Input';
 import { getInputComponent } from './factory';
-import { type FormOptions, useForm } from '../../hooks';
+import { type FormHandler, type FormOptions, useForm } from '../../hooks';
 import { translationKey } from '../../translations';
 
 // TODO(burdon): Rename package react-ui-form; delete react-ui-card.
@@ -71,7 +71,6 @@ export const Form = <T extends BaseObject>({
   onCancel,
   Custom,
 }: FormProps<T>) => {
-  const { t } = useTranslation(translationKey);
   const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
   const { canSave, values, errors, handleSave, ...inputProps } = useForm<T>({
     schema,
@@ -106,12 +105,13 @@ export const Form = <T extends BaseObject>({
     <div role='form' className={mx('flex flex-col w-full gap-2 py-2', classNames)} data-testid={testId}>
       {properties
         .map((property) => {
-          const { ast, name, type, format, title, description, examples, options } = property;
+          const { ast, name, type, format, title, description, examples, options, array } = property;
           const key = [...path, name];
           const label = title ?? pipe(name, capitalize);
           const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
 
           // Get generic input.
+          // TODO(ZaymonFC): We might need to switch this to using globs since we're now indexing into arrays.
           let InputComponent = Custom?.[key.join('.')];
           if (!InputComponent) {
             // Select.
@@ -133,6 +133,26 @@ export const Form = <T extends BaseObject>({
             }
 
             InputComponent = getInputComponent<T>(type, format);
+
+            // TODO(ZaymonFC): Array handling is inelegant. We need to push this complexity down into SDK/Schema.
+            if (array) {
+              return (
+                <ArrayField
+                  key={name}
+                  name={name}
+                  type={type}
+                  array={true}
+                  label={label}
+                  ast={ast}
+                  values={values}
+                  format={format}
+                  readonly={readonly}
+                  placeholder={placeholder}
+                  inputProps={inputProps}
+                  Custom={Custom}
+                />
+              );
+            }
           }
 
           if (!InputComponent) {
@@ -181,31 +201,187 @@ export const Form = <T extends BaseObject>({
           );
         })
         .filter(isNotFalsy)}
-
       {(onCancel || onSave) && !autoSave && (
-        <div role='none' className='flex justify-center'>
-          <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
-            {onCancel && !readonly && (
-              <IconButton
-                data-testid='cancel-button'
-                icon='ph--x--regular'
-                label={t('button cancel')}
-                onClick={onCancel}
-              />
-            )}
-            {onSave && (
-              <IconButton
-                type='submit'
-                data-testid='save-button'
-                disabled={!canSave}
-                icon='ph--check--regular'
-                label={t('button save')}
-                onClick={handleSave}
-              />
-            )}
+        <FormActions onCancel={onCancel} onSubmit={handleSave} canSubmit={canSave} readonly={readonly} />
+      )}
+    </div>
+  );
+};
+
+type ArrayFieldProps<T extends BaseObject> = {
+  name: PropertyKey<T>;
+  type: SimpleType;
+  array: true;
+  label: string;
+  ast: AST.AST;
+  values: Record<string, any>;
+  format?: FormatEnum;
+  readonly?: boolean;
+  placeholder?: string;
+  inputProps: Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
+  Custom?: Partial<Record<string, InputComponent<T>>>;
+};
+
+const ArrayField = <T extends BaseObject>({
+  name,
+  type,
+  label,
+  ast,
+  values,
+  format,
+  readonly,
+  placeholder,
+  inputProps,
+  Custom,
+}: ArrayFieldProps<T>) => {
+  const { t } = useTranslation(translationKey);
+  const arrayValues = (values[name] ?? []) as any[];
+  const key = [name];
+
+  // TODO(ZaymonFC): Should this unwrapping happen at a lower level?
+  const tupleType = findNode(ast, AST.isTupleType);
+  const elementType = (tupleType as AST.TupleType | undefined)?.rest[0]?.type;
+
+  if (type === 'object' && elementType) {
+    const baseNode = findNode(elementType, isDiscriminatedUnion);
+    const typeLiteral = baseNode
+      ? getDiscriminatedType(baseNode, values[name] as any)
+      : findNode(elementType, AST.isTypeLiteral);
+
+    if (typeLiteral) {
+      const schema = S.make(typeLiteral);
+
+      return (
+        <div key={name} role='none' className={mx(padding)}>
+          <InputHeader>{label}</InputHeader>
+          <div role='none' className='flex flex-col gap-1'>
+            {arrayValues.map((value, index) => {
+              return (
+                <div key={index} role='none' className='flex items-center gap-1'>
+                  <div role='none' className='flex-1'>
+                    <Form<any>
+                      schema={schema}
+                      path={[...key, index.toString()]}
+                      values={value}
+                      onValuesChanged={(childValues) => {
+                        const newValues = [...arrayValues];
+                        newValues[index] = childValues;
+                        inputProps.onValueChange(name, 'object', newValues);
+                      }}
+                      Custom={Custom as any}
+                    />
+                  </div>
+                  <IconButton
+                    icon='ph--trash--regular'
+                    iconOnly
+                    label={t('button remove')}
+                    onClick={() => {
+                      const newValues = arrayValues.filter((_, i) => i !== index);
+                      inputProps.onValueChange(name, type, newValues);
+                    }}
+                  />
+                </div>
+              );
+            })}
+          </div>
+          <div role='none' className='flex justify-between items-center plb-1'>
+            <IconButton
+              icon='ph--plus--regular'
+              iconOnly
+              label={t('button add')}
+              onClick={() => {
+                const newValues = [...arrayValues, {}];
+                inputProps.onValueChange(name, type, newValues);
+              }}
+            />
           </div>
         </div>
-      )}
+      );
+    }
+    return (
+      <div key={name} role='none'>
+        Nested form not supported in arrays, yet.
+      </div>
+    );
+  }
+
+  const InputComponent = getInputComponent<T>(type, format);
+  if (!InputComponent) {
+    return null;
+  }
+
+  return (
+    <div role='none' key='meta-input' className={mx(padding)}>
+      <InputHeader>{label}</InputHeader>
+      <div role='none' className='flex flex-col gap-1'>
+        {arrayValues.map((_, index) => (
+          <div key={index} role='none' className='flex items-start gap-1'>
+            <div role='none' className='flex-1'>
+              <InputComponent
+                type={type}
+                format={format}
+                label={label}
+                inputOnly
+                property={`${name}.${index}`}
+                disabled={readonly}
+                placeholder={placeholder}
+                {...inputProps}
+              />
+            </div>
+            <IconButton
+              icon='ph--trash--regular'
+              iconOnly
+              label={t('button remove')}
+              onClick={() => {
+                const newValues = arrayValues.filter((_, i) => i !== index);
+                inputProps.onValueChange(name, type, newValues);
+              }}
+            />
+          </div>
+        ))}
+      </div>
+      <div role='none' className='flex justify-between items-center plb-1'>
+        <IconButton
+          icon='ph--plus--regular'
+          iconOnly
+          label={t('button add')}
+          onClick={() => {
+            const newValues = [...arrayValues, SimpleType.getDefaultValue(type)];
+            inputProps.onValueChange(name, type, newValues);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+type FormActionsProps = {
+  readonly?: boolean;
+  canSubmit: boolean;
+  onCancel?: () => void;
+  onSubmit: () => void;
+};
+
+export const FormActions = ({ onCancel, onSubmit, canSubmit, readonly }: FormActionsProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <div role='none' className='flex justify-center'>
+      <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>
+        {onCancel && !readonly && (
+          <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
+        )}
+        {onSubmit && (
+          <IconButton
+            type='submit'
+            data-testid='save-button'
+            disabled={!canSubmit}
+            icon='ph--check--regular'
+            label={t('button save')}
+            onClick={onSubmit}
+          />
+        )}
+      </div>
     </div>
   );
 };

package/src/components/Form/Input.tsx

@@ -4,23 +4,24 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
+import { type BaseObject, type FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Tooltip } from '@dxos/react-ui';
 import { errorText } from '@dxos/react-ui-theme';
 
-import { type FormHandler } from '../../hooks';
+import { type FormPath, type FormHandler } from '../../hooks';
 
 /**
  * Props passed to input components.
  */
 export type InputProps<T extends BaseObject> = {
-  property: PropertyKey<T>;
+  property: FormPath<T>;
   type: SimpleType;
   format?: FormatEnum;
-  label: string;
+  label?: string;
   disabled?: boolean;
   placeholder?: string;
+  inputOnly?: boolean;
 } & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
 
 /**