@dxos/react-ui-form 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/components/Form/Input.tsx

@@ -4,29 +4,30 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type FormatEnum } from '@dxos/echo-schema';
+import { type BaseObject, type FormatEnum, type PropertyKey } 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 FormInputStateProps } from './FormContext';
+import { type FormHandler } from '../../hooks';
 
 /**
  * Props passed to input components.
  */
-export type InputProps = {
+export type InputProps<T extends BaseObject> = {
+  property: PropertyKey<T>;
   type: SimpleType;
   format?: FormatEnum;
   label?: string;
   disabled?: boolean;
   placeholder?: string;
   inputOnly?: boolean;
-} & FormInputStateProps;
+} & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
 
 /**
  * Form input component.
  */
-export type InputComponent = FC<InputProps>;
+export type InputComponent<T extends BaseObject> = FC<InputProps<T>>;
 
 export type InputHeaderProps = PropsWithChildren<{
   error?: string;

package/src/components/Form/custom/GeoPointInput.tsx

@@ -4,17 +4,26 @@
 
 import React from 'react';
 
-import { type GeoPoint } from '@dxos/echo-schema';
+import { type BaseObject, type GeoPoint } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
 import { translationKey } from '../../../translations';
 import { InputHeader, type InputProps } from '../Input';
 
-export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onValueChange, onBlur }: InputProps) => {
+export const GeoPointInput = <T extends BaseObject>({
+  property,
+  type,
+  label,
+  disabled,
+  getStatus,
+  getValue,
+  onValueChange,
+  onBlur,
+}: InputProps<T>) => {
   const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
-  const [lng = 0, lat = 0] = getValue<GeoPoint>() ?? [];
+  const { status, error } = getStatus?.(property);
+  const [lng = 0, lat = 0] = getValue<GeoPoint>(property) ?? [];
 
   return (
     <Input.Root validationValence={status}>
@@ -27,7 +36,7 @@ export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onVa
           disabled={disabled}
           placeholder={t('placeholder longitude')}
           value={lng}
-          onChange={(event) => onValueChange(type, [lat, safeParseFloat(event.target.value, 0)])}
+          onChange={(event) => onValueChange(property, type, [lat, safeParseFloat(event.target.value, 0)])}
           onBlur={onBlur}
         />
         <Input.TextInput
@@ -35,7 +44,7 @@ export const GeoPointInput = ({ type, label, disabled, getStatus, getValue, onVa
           disabled={disabled}
           placeholder={t('placeholder latitude')}
           value={lat}
-          onChange={(event) => onValueChange(type, [safeParseFloat(event.target.value, 0), lng])}
+          onChange={(event) => onValueChange(property, type, [safeParseFloat(event.target.value, 0), lng])}
           onBlur={onBlur}
         />
       </div>

package/src/components/Form/custom/TupleInput.tsx

@@ -4,6 +4,7 @@
 
 import React from 'react';
 
+import { type BaseObject } from '@dxos/echo-schema';
 import { Input } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { safeParseFloat } from '@dxos/util';
@@ -12,8 +13,9 @@ import { InputHeader, type InputProps } from '../Input';
 
 const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4'];
 
-export const TupleInput = ({
+export const TupleInput = <T extends BaseObject>({
   binding,
+  property,
   type,
   label,
   disabled,
@@ -21,11 +23,11 @@ export const TupleInput = ({
   getValue,
   onValueChange,
   onBlur,
-}: InputProps & { binding: string[] }) => {
-  const { status, error } = getStatus();
+}: InputProps<T> & { binding: string[] }) => {
+  const { status, error } = getStatus?.(property);
 
   // TODO(burdon): Generalize number/float/string, etc.
-  const values: Record<string, number> = getValue<Record<string, number>>() ?? {};
+  const values: Record<string, number> = getValue<Record<string, number>>(property) ?? {};
 
   return (
     <Input.Root validationValence={status}>
@@ -39,7 +41,9 @@ export const TupleInput = ({
             type='number'
             disabled={disabled}
             value={values[prop]}
-            onChange={(event) => onValueChange(type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })}
+            onChange={(event) =>
+              onValueChange(property, type, { ...values, [prop]: safeParseFloat(event.target.value, 0) })
+            }
             onBlur={onBlur}
           />
         ))}

package/src/components/Form/custom/index.ts

@@ -3,5 +3,4 @@
 //
 
 export * from './GeoPointInput';
-export * from './SelectOptionsInput';
 export * from './TupleInput';

package/src/components/Form/factory.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum } from '@dxos/echo-schema';
+import { type BaseObject, FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
 import { BooleanInput, NumberInput, TextInput } from './Defaults';
@@ -12,7 +12,10 @@ import { GeoPointInput } from './custom';
 /**
  * Get property input component.
  */
-export const getInputComponent = (type: SimpleType, format?: FormatEnum): InputComponent | undefined => {
+export const getInputComponent = <T extends BaseObject>(
+  type: SimpleType,
+  format?: FormatEnum,
+): InputComponent<T> | undefined => {
   switch (format) {
     case FormatEnum.LatLng:
       return GeoPointInput;

package/src/components/ViewEditor/ViewEditor.tsx

@@ -10,6 +10,7 @@ import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui
 import { List } from '@dxos/react-ui-list';
 import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
 import { FieldSchema, type FieldType, type ViewType, ViewProjection, VIEW_FIELD_LIMIT } from '@dxos/schema';
+import { arrayMove } from '@dxos/util';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
@@ -90,11 +91,7 @@ export const ViewEditor = ({
 
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
-      // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-      const fields = [...view.fields];
-      const [moved] = fields.splice(fromIndex, 1);
-      fields.splice(toIndex, 0, moved);
-      view.fields = fields;
+      arrayMove(view.fields, fromIndex, toIndex);
     },
     [view.fields],
   );

package/src/components/deprecated/FormInput.tsx

@@ -4,21 +4,7 @@
 
 import React, { type JSX, type PropsWithChildren } from 'react';
 
-import { Input, type ThemedClassName } from '@dxos/react-ui';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
-
-/**
- * @deprecated
- */
-export const DeprecatedFormContainer = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => {
-  return (
-    <div role='none' className='w-full p-4 justify-center overflow-x-hidden overflow-y-auto'>
-      <div role='form' className={mx('flex flex-col', textBlockWidth, classNames)}>
-        {children}
-      </div>
-    </div>
-  );
-};
+import { Input } from '@dxos/react-ui';
 
 export type DeprecatedFormInputProps = {
   label: string;
@@ -29,6 +15,7 @@ export type DeprecatedFormInputProps = {
 /**
  * @deprecated
  */
+// TODO(burdon): Still used in ObservabilitySettings and all settings.
 export const DeprecatedFormInput = ({
   label,
   description,
@@ -39,9 +26,8 @@ export const DeprecatedFormInput = ({
     <div role='none' className='flex w-full gap-4 py-1'>
       <Input.Root>
         <div role='none' className='flex flex-col w-full'>
-          <Input.Label classNames='flex min-bs-[--rail-action] items-center' style={{ fontSize: 'unset' }}>
-            {label}
-          </Input.Label>
+          {/* TODO(burdon): Consistent height for controls (e.g., Select, Textbox, and Checkbox are all different). */}
+          <Input.Label classNames='flex min-h-[40px] items-center'>{label}</Input.Label>
           {description && (
             <Input.DescriptionAndValidation classNames='mbs-0.5'>
               <Input.Description>{description}</Input.Description>
@@ -50,7 +36,7 @@ export const DeprecatedFormInput = ({
         </div>
 
         <div role='none'>
-          <div role='none' className='flex min-bs-[--rail-action] items-center'>
+          <div role='none' className='flex min-h-[40px] items-center'>
             {children}
           </div>
         </div>
@@ -59,8 +45,9 @@ export const DeprecatedFormInput = ({
   );
 
   if (secondary) {
+    // console.log(secondary);
     return (
-      <div role='none'>
+      <div role='none' className='flex flex-col w-full'>
         {primary}
         {secondary}
       </div>

package/src/hooks/useForm.ts

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { type FocusEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type BaseObject, getValue, setValue } from '@dxos/echo-schema';
-import { AST, type S, type SimpleType, type JsonPath, createJsonPath, fromEffectValidationPath } from '@dxos/effect';
+import { type BaseObject, type PropertyKey, getValue, setValue } from '@dxos/echo-schema';
+import { type SimpleType, type S, type JsonPath } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { validateSchema, type ValidationError } from '@dxos/schema';
@@ -20,9 +20,9 @@ export type FormHandler<T extends BaseObject> = {
   //
 
   values: Partial<T>;
-  errors: Record<JsonPath, string>;
-  touched: Record<JsonPath, boolean>;
-  changed: Record<JsonPath, boolean>;
+  errors: Record<PropertyKey<T>, string>;
+  touched: Record<PropertyKey<T>, boolean>;
+  changed: Record<PropertyKey<T>, boolean>;
   canSave: boolean;
   handleSave: () => void;
 
@@ -30,10 +30,10 @@ export type FormHandler<T extends BaseObject> = {
   // Form input component helpers.
   //
 
-  getStatus: (path: string | (string | number)[]) => { status?: 'error'; error?: string };
-  getValue: <V>(path: (string | number)[]) => V | undefined;
-  onValueChange: <V>(path: (string | number)[], type: SimpleType, value: V) => void;
-  onTouched: (path: (string | number)[]) => void;
+  getStatus: (property: PropertyKey<T>) => { status?: 'error'; error?: string };
+  getValue: <V>(property: PropertyKey<T>) => V | undefined;
+  onValueChange: <V>(property: PropertyKey<T>, type: SimpleType, value: V) => void;
+  onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 };
 
 /**
@@ -41,8 +41,9 @@ export type FormHandler<T extends BaseObject> = {
  */
 export interface FormOptions<T extends BaseObject> {
   /**
-   * Effect schema (Type literal).
+   * Effect schema.
    */
+  // TODO(burdon): Change to S.Struct<T>?
   schema: S.Schema<T>;
 
   /**
@@ -88,22 +89,21 @@ export const useForm = <T extends BaseObject>({
   onValid,
   onSave,
 }: FormOptions<T>): FormHandler<T> => {
-  invariant(AST.isTypeLiteral(schema.ast));
-
   const [values, setValues] = useState<Partial<T>>(initialValues);
   useEffect(() => {
     setValues(initialValues);
   }, [initialValues]);
 
-  const [touched, setTouched] = useState<Record<JsonPath, boolean>>(createKeySet(initialValues, false));
-  const [changed, setChanged] = useState<Record<JsonPath, boolean>>(createKeySet(initialValues, false));
-  const [errors, setErrors] = useState<Record<JsonPath, string>>({});
+  const [touched, setTouched] = useState<Record<PropertyKey<T>, boolean>>(createKeySet(initialValues, false));
+  const [changed, setChanged] = useState<Record<PropertyKey<T>, boolean>>(createKeySet(initialValues, false));
+  const [errors, setErrors] = useState<Record<PropertyKey<T>, string>>({} as Record<PropertyKey<T>, string>);
   const [saving, setSaving] = useState(false);
 
   //
   // Validation.
   //
 
+  // TODO(burdon): Validate each property separately.
   const validate = useCallback(
     (values: Partial<T>): values is T => {
       let errors: ValidationError[] = validateSchema(schema, values) ?? [];
@@ -136,15 +136,8 @@ export const useForm = <T extends BaseObject>({
   const canSave = useMemo(
     () =>
       !saving &&
-      // Check if any error paths that are touched have errors
-      !Object.entries(touched).some(
-        ([path, isTouched]) =>
-          isTouched &&
-          Object.keys(errors).some(
-            (errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`),
-          ),
-      ),
-    [touched, errors, saving],
+      Object.keys(values).every((property) => touched[property as JsonPath] === false || !errors[property as JsonPath]),
+    [values, touched, errors, saving],
   );
 
   const handleSave = useCallback(async () => {
@@ -163,27 +156,19 @@ export const useForm = <T extends BaseObject>({
   //
 
   const getStatus = useCallback<FormHandler<T>['getStatus']>(
-    (path) => {
-      const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
-      const matchingError = Object.entries(errors).find(
-        ([errorPath]) =>
-          errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`),
-      );
-
-      return {
-        status: matchingError ? 'error' : undefined,
-        error: matchingError ? matchingError[1] : undefined,
-      };
-    },
-    [errors],
+    (property: PropertyKey<T>) => ({
+      status: errors[property] ? 'error' : undefined,
+      error: errors[property] ? errors[property] : undefined,
+    }),
+    [touched, errors],
   );
 
-  const getFormValue = <V>(path: (string | number)[]): V | undefined => {
-    return getValue(values, createJsonPath(path));
+  // TODO(burdon): Use path to extract hierarchical value.
+  const getFormValue = <V>(property: PropertyKey<T>): V | undefined => {
+    return getValue(values, property as any as JsonPath);
   };
 
-  const onValueChange = (path: (string | number)[], type: SimpleType, value: any) => {
-    const jsonPath = createJsonPath(path);
+  const onValueChange = (property: PropertyKey<T>, type: SimpleType, value: any) => {
     let parsedValue = value;
     try {
       if (type === 'number') {
@@ -194,9 +179,9 @@ export const useForm = <T extends BaseObject>({
       parsedValue = undefined;
     }
 
-    const newValues = { ...setValue(values, jsonPath, parsedValue) };
+    const newValues = { ...setValue(values, property as any as JsonPath, parsedValue) };
     setValues(newValues);
-    setChanged((prev) => ({ ...prev, [jsonPath]: true }));
+    setChanged((prev) => ({ ...prev, [property]: true }));
     onValuesChanged?.(newValues);
 
     const isValid = validate(newValues);
@@ -205,10 +190,19 @@ export const useForm = <T extends BaseObject>({
     }
   };
 
-  const onTouched = useCallback(
-    (path: (string | number)[]) => {
-      const jsonPath = createJsonPath(path);
-      setTouched((touched) => ({ ...touched, [jsonPath]: true }));
+  // TODO(burdon): This is a leaky abstraction: the hook ideally shouldn't get involved in UX.
+  const onBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const { name } = event.target;
+      setTouched((touched) => ({ ...touched, [name]: true }));
+
+      // TODO(Zan): This should be configurable behavior.
+      if (event.relatedTarget?.getAttribute('type') === 'submit') {
+        // NOTE: We do this here instead of onSave because the blur event is triggered before the submit event
+        //  and results in the submit button being disabled when the form is invalid.
+        setTouched(createKeySet(values, true));
+      }
+
       validate(values);
     },
     [validate, values],
@@ -227,25 +221,23 @@ export const useForm = <T extends BaseObject>({
     getStatus,
     getValue: getFormValue,
     onValueChange,
-    onTouched,
+    onBlur,
   } satisfies FormHandler<T>;
 };
 
-const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
+const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<PropertyKey<T>, V> => {
   invariant(obj);
-  return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<JsonPath, V>);
+  return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<PropertyKey<T>, V>);
 };
 
-const flatMap = (errors: ValidationError[]) => {
+const flatMap = <T extends BaseObject>(errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {
-      // Convert the validation error path format to our JsonPath format
-      const jsonPath = fromEffectValidationPath(path);
-      if (!(jsonPath in result)) {
-        result[jsonPath] = message;
+      if (!(path in result)) {
+        result[path as PropertyKey<T>] = message;
       }
       return result;
     },
-    {} as Record<JsonPath, string>,
+    {} as Record<PropertyKey<T>, string>,
   );
 };

package/src/translations.ts

@@ -42,7 +42,6 @@ export default [
         'format ref': 'Reference',
         'format regex': 'RegExp',
         'format string': 'String',
-        'format single-select': 'Select',
         'format text': 'Long text',
         'format time': 'Time',
         'format timestamp': 'Timestamp',
@@ -54,13 +53,6 @@ export default [
         // Placeholders
         'placeholder latitude': 'Latitude',
         'placeholder longitude': 'Longitude',
-
-        // SelectOptionsInput
-        'select option label': 'Label',
-        'select option label placeholder': 'Option label',
-        'select option color': 'Color',
-        'select option delete': 'Delete',
-        'select option add': 'Add option',
       },
     },
   },

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { type SchemaProperty } from '@dxos/schema';
-import { type ComponentLookup } from './Form';
-import { type FormInputStateProps } from './FormContext';
-import { type InputComponent } from './Input';
-type ArrayFieldProps = {
-    property: SchemaProperty<any>;
-    readonly?: boolean;
-    inputProps: FormInputStateProps;
-    path?: (string | number)[];
-    Custom?: Partial<Record<string, InputComponent>>;
-    lookupComponent?: ComponentLookup;
-};
-export declare const ArrayField: ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => React.JSX.Element | null;
-export {};
-//# sourceMappingURL=ArrayField.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/ArrayField.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAiB,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAK3D,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,sEAAuE,eAAe,6BA8E5G,CAAC"}

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

@@ -1,7 +0,0 @@
-import React from 'react';
-export type FormActionsProps = {
-    readonly?: boolean;
-    onCancel?: () => void;
-};
-export declare const FormActions: ({ onCancel, readonly }: FormActionsProps) => React.JSX.Element;
-//# sourceMappingURL=FormActions.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormActions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,gBAAgB,sBAuBnE,CAAC"}

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { S } from '@dxos/echo-schema';
-import { type SchemaProperty } from '@dxos/schema';
-import { type ComponentLookup } from './Form';
-import { type InputComponent } from './Input';
-export type FormContentProps = {
-    schema: S.Schema.All;
-    path?: (string | number)[];
-    filter?: (props: SchemaProperty<any>[]) => SchemaProperty<any>[];
-    sort?: string[];
-    readonly?: boolean;
-    lookupComponent?: ComponentLookup;
-    Custom?: Partial<Record<string, InputComponent>>;
-};
-export type FormFieldProps = {
-    property: SchemaProperty<any>;
-    path?: (string | number)[];
-    readonly?: boolean;
-    /** Used to indicate if input should be presented inline (e.g. for array items). */
-    inline?: boolean;
-    lookupComponent?: ComponentLookup;
-    Custom?: Partial<Record<string, InputComponent>>;
-};
-export declare const FormField: ({ property, path, readonly, inline, lookupComponent, Custom }: FormFieldProps) => React.JSX.Element | null;
-export declare const FormFields: ({ schema, path, filter, sort, readonly, lookupComponent, Custom }: FormContentProps) => React.JSX.Element;
-//# sourceMappingURL=FormContent.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAO,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAKxE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,EAAE,KAAK,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;IACjE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,SAAS,kEAAmE,cAAc,6BAqGtG,CAAC;AAEF,eAAO,MAAM,UAAU,sEAAuE,gBAAgB,sBA4B7G,CAAC"}

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

@@ -1,20 +0,0 @@
-import React, { type FocusEvent, type PropsWithChildren } from 'react';
-import { type BaseObject } from '@dxos/echo-schema';
-import { type SimpleType } from '@dxos/effect';
-import { type FormHandler, type FormOptions } from '../../hooks';
-type FormContextValue<T extends BaseObject> = FormHandler<T>;
-export declare const useFormContext: <T extends BaseObject>() => FormContextValue<T>;
-export declare const useFormValues: (path?: (string | number)[]) => any;
-export type FormInputStateProps = {
-    getStatus: () => {
-        status?: 'error';
-        error?: string;
-    };
-    getValue: <V>() => V | undefined;
-    onValueChange: (type: SimpleType, value: any) => void;
-    onBlur: (event: FocusEvent<HTMLElement>) => void;
-};
-export declare const useInputProps: (path?: (string | number)[]) => FormInputStateProps;
-export declare const FormProvider: ({ children, ...formOptions }: PropsWithChildren<FormOptions<any>>) => React.JSX.Element;
-export {};
-//# sourceMappingURL=FormContext.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormContext.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAA6B,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGlG,OAAO,EAAE,KAAK,UAAU,EAAY,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAE1E,KAAK,gBAAgB,CAAC,CAAC,SAAS,UAAU,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;AAI7D,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,OAAK,gBAAgB,CAAC,CAAC,CAEzE,CAAC;AAEF,eAAO,MAAM,aAAa,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAQ,GAI9D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACtD,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAQ,mBAS9D,CAAC;AAEF,eAAO,MAAM,YAAY,iCAAkC,iBAAiB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,sBAG7F,CAAC"}

package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type InputProps } from '../Input';
-export declare const SelectOptionInput: ({ type, label, disabled, getStatus, getValue, onValueChange }: InputProps) => React.JSX.Element;
-//# sourceMappingURL=SelectOptionsInput.d.ts.map

package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOptionsInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/SelectOptionsInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqE,MAAM,OAAO,CAAC;AAU1F,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGxD,eAAO,MAAM,iBAAiB,kEAAmE,UAAU,sBA8K1G,CAAC"}

package/dist/types/src/components/Form/custom/SelectOptionsInput.stories.d.ts

@@ -1,7 +0,0 @@
-import '@dxos-theme';
-import { type Meta, type StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-//# sourceMappingURL=SelectOptionsInput.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOptionsInput.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/SelectOptionsInput.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAuC5D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}