@fluentui/react-field 0.0.0-nightly-20221007-1237.1

package/Spec.md

@@ -0,0 +1,354 @@
+# @fluentui/react-field Spec
+
+## Background
+
+Field adds a label, validation text, and hint text to form input components. The existing input components (such as `Input` and `Combobox`) are wrapped to create field versions of them (such as `InputField` and `ComboboxField`).
+
+Epic issue tracking implementation: https://github.com/microsoft/fluentui/issues/19627
+
+## Prior Art
+
+Existing libraries tend to take one of the following approaches to field.
+
+1. Include support for label, error text, etc. in the base input component. Libraries using this approach include:
+   - **FluentUI v8** - [`TextField`](https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield), [`Dropdown`](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown), [`ChoiceGroup`](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup), etc.
+   - **Spectrum** - [`TextField`](https://react-spectrum.adobe.com/react-spectrum/TextField.html), [`Slider`](https://react-spectrum.adobe.com/react-spectrum/Slider.html), [`RadioGroup`](https://react-spectrum.adobe.com/react-spectrum/RadioGroup.html), etc.
+2. Provide a set of components that are manually constructed into a field. This requires manually hooking up the components using props like `htmlFor` and `aria-describedby`. Libraries using this approach include:
+   - **FluentUI v0** - [`FormField`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-field), [`FormLabel`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-label), [`FormMessage`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-message)
+   - **Ant** - [`Form.Item`](https://ant.design/components/form/#Form.Item) (uses context to do some of the hooking up between the item and the field component).
+3. Provide base components without a label or descriptive text, and then Field versions of those controls. Libraries using this approach include:
+   - **FluentUI v0** - [`Input`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/input/props) and [`FormInput`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-input), for example.
+   - **Evergreen UI** - [`TextInput`](https://evergreen.segment.com/components/text-input) and [`TextInputField`](https://evergreen.segment.com/components/text-input#textinputfield), for example.
+
+The Field implementation in this spec follows pattern (3). There are Field versions of all components that can be used as form inputs. There are several reasons, including:
+
+- **Accessibility**: By combining a base component with the field props into a single component, all of the accessibility props like `htmlFor` and `aria-describedby` are set correctly for "free".
+- **Simplicity**: All props related to the component (such as `label`, `id`, `validationState="error"`, etc.) are on the same component, rather than split between multiple components (like separate `Field` and `Input` components).
+- **Consistency**: All of the Field components share a common set of props for the label, validationState, hint, etc.
+- **Bundle size**: When the label and other field functionality is not needed, it is still possible to use the base components without pulling in unnecessary dependencies (like `Label` and the field styling).
+
+## Sample Code
+
+Each input component has a field version (such as `InputField`, `ComboboxField`, etc.) that includes the features of Field added to that component.
+
+```jsx
+<>
+  <InputField
+    // Field-specific props
+    label="This is the field label"
+    orientation="horizontal"
+    validationState="error"
+    validationMessage="This is error text"
+    // All props and slots of the underlying Input component are supported
+    required
+    size="small"
+    contentBefore="$"
+    contentAfter=".00"
+  />
+  <RadioGroupField label="Radio group field">
+    <Radio value="one" label="Option one" />
+    <Radio value="two" label="Option two" />
+    <Radio value="three" label="Option three" />
+  </RadioGroupField>
+  <ComboboxField label="Combobox field" validationState="success" validationMessage="Success text">
+    <Option value="one">Option one</Option>
+    <Option value="two">Option two</Option>
+    <Option value="three">Option three</Option>
+  </ComboboxField>
+  <SliderField label="Slider field" validationState="warning" validationMessage="Warning text" />
+  <SpinButtonField label="Spin button field" hint="Hint text" />
+</>
+```
+
+These field versions of the components use a common set of Field hooks, and can be defined using very little code.
+
+```ts
+export type InputFieldProps = FieldProps<typeof Input>;
+
+export const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {
+  const state = useField_unstable(props, ref, Input);
+  useFieldStyles_unstable(state);
+  return renderField_unstable(state);
+});
+
+InputField.displayName = 'InputField';
+```
+
+## Components
+
+The following field components will be defined. If more form components are added in the future, they should also include a Field version.
+
+- `CheckboxField`
+- `ComboboxField`
+- `DropdownField`
+- `InputField`
+- `RadioGroupField`
+- `SelectField`
+- `SliderField`
+- `SpinButtonField`
+- `SwitchField`
+- `TextareaField`
+
+## Variants
+
+- **Orientation**: The `orientation` prop affects the layout of the label and field component:
+  - `'vertical'` (default) - label is above the field component
+  - `'horizontal'` - label is to the left of the field component, and is 33% the width of the field (this allows multiple stacked fields to all align their labels)
+- **Validation state**: The `validationState` prop affects the icon and color used by the `validationMessage`:
+  - `'error'` - Red x icon, red text color
+  - `'warning'` - Yellow exclamation icon, neutral color text
+  - `'success'` - Green check icon, neutral color text
+  - `undefined` (default): No validation message icon, neutral color text
+- **Error**: Some control types (like `Input` and `Combobox`) have a prop that makes the border red. This prop will be set `validationState="error"`.
+
+Field also forwards some props from the wrapped component to the label as well:
+
+- **Size**: If the wrapped component supports a `size` prop, it will also be applied to the field's label.
+- **Required**: If set, the Label will get a required asterisk: `*`
+
+## API
+
+### FieldComponent
+
+The `FieldComponent` type defines the minimum set of props that the wrapped component must support. This is used for the generic types as the requirement for the type parameter: `FieldProps<T extends FieldComponent>`
+
+```ts
+/**
+ * The minimum requirement for a component used by Field.
+ *
+ * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,
+ * but it is still allowed to have a children prop.
+ */
+export type FieldComponent = React.VoidFunctionComponent<
+  Pick<
+    React.HTMLAttributes<HTMLElement>,
+    'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'
+  >
+>;
+```
+
+### Slots
+
+_Note: TypeScript crashes if the `Slot` type is used with a template type parameter. The `SlotComponent` type is a simplified version of that type, which only supports `React.ComponentType`/`React.VoidFunctionComponent`._
+
+```ts
+export type FieldSlots<T extends FieldComponent> = {
+  root: NonNullable<Slot<'div'>>;
+
+  /**
+   * The underlying component wrapped by this field.
+   *
+   * This is the PRIMARY slot: all intrinsic HTML properties will be applied to this slot,
+   * except `className` and `style`, which remain on the root slot.
+   */
+  control: SlotComponent<T>;
+
+  /**
+   * The label associated with the field.
+   */
+  label?: Slot<typeof Label>;
+
+  /**
+   * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.
+   */
+  validationMessage?: Slot<'span'>;
+
+  /**
+   * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an
+   * icon corresponding to that state.
+   *
+   * This will only be displayed if `validationMessage` is set.
+   */
+  validationMessageIcon?: Slot<'span'>;
+
+  /**
+   * Additional hint text below the field.
+   */
+  hint?: Slot<'span'>;
+};
+```
+
+### Props
+
+```ts
+export type FieldProps<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {
+  /**
+   * The orientation of the label relative to the field component.
+   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).
+   *
+   * @default vertical
+   */
+  orientation?: 'vertical' | 'horizontal';
+
+  /**
+   * The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`, and for some
+   * field components, an `validationState="error"` causes the border to become red.
+   *
+   * @default undefined
+   */
+  validationState?: 'error' | 'warning' | 'success';
+};
+```
+
+Field also reads some props from the underlying component. These are not part of `FieldProps` because they are not added to the components that don't support them. However, they are accepted by `useField`:
+
+```ts
+/**
+ * Props that are supported by Field, but not required to be supported by the component that implements field.
+ */
+export type OptionalFieldComponentProps = {
+  /**
+   * Whether the field label should be marked as required.
+   */
+  required?: boolean;
+
+  /**
+   * Size of the field label.
+   *
+   * Number sizes will be ignored, but are allowed because the HTML <input> element has a `size` prop of type `number`.
+   */
+  size?: 'small' | 'medium' | 'large' | number;
+};
+```
+
+### State
+
+```ts
+export type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> &
+  Pick<FieldProps<T>, 'orientation' | 'validationState'> & {
+    classNames: SlotClassNames<FieldSlots<T>>;
+  };
+```
+
+### Label for Checkbox and Switch
+
+The Checkbox and Switch components already have a `label` prop, which conflicts with the Field's `label`.
+
+#### `CheckboxField`
+
+- The `label` prop will go to the Checkbox and NOT the Field
+- New `fieldLabel` prop for the label of the Field
+
+#### `SwitchField`
+
+- The `label` prop will go to the Field and NOT the Switch
+- The Switch's `labelPosition` prop is therefore not supported, and is omitted from SwitchField.
+
+## Structure
+
+### Public API
+
+```jsx
+<InputField
+  label="This is the field label"
+  orientation="horizontal"
+  validationState="error"
+  validationMessage="This is a validation message"
+  hint="This is a hint message"
+/>
+```
+
+(similar API for other Field components)
+
+### Slot structure
+
+```jsx
+<slots.root>
+  <slots.label {...slotProps.label} />
+  <slots.control {...slotProps.control} />
+  <slots.validationMessage {...slotProps.validationMessage}>
+    <slots.validationMessageIcon {...slotProps.validationMessageIcon} />
+    {slotProps.validationMessage.children}
+  </slots.validationMessage>
+  <slots.hint {...slotProps.hint} />
+</slots.root>
+```
+
+### DOM structure
+
+```html
+<div className="fui-Field">
+  <label className="fui-Field__label fui-Label">This is the field label</label>
+  <!-- wrapped field component goes here -->
+  <span className="fui-Field__validationMessage">
+    <span className="fui-Field__validationMessageIcon"><svg>...</svg></span>
+    This is a validation message
+  </span>
+  <span className="fui-Field__hint">This is a hint message</span>
+</div>
+```
+
+## Migration
+
+### Migration from v8
+
+Migration from v8 will require picking between the normal and `Field` version of an input control, depending on whether the field-specific features are required: (`label`, `validationState="error"`, `validationMessage`, `hint`)
+
+See individual input components for more detailed migration guides.
+
+| v8 Control    | v9 Base control       | v9 Field control                | Notes                                                                                        |
+| ------------- | --------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- |
+| `Checkbox`    | `Checkbox`            | `CheckboxField`                 | Only use `CheckboxField` if an error message is needed, or if required for layout in a form. |
+| `ChoiceGroup` | `RadioGroup`          | `RadioGroupField`               |                                                                                              |
+| `ComboBox`    | `Combobox`            | `ComboboxField`                 | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."`        |
+| `Dropdown`    | `Dropdown`            | `DropdownField`                 | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."`        |
+| `Slider`      | `Slider`              | `SliderField`                   |                                                                                              |
+| `SpinButton`  | `SpinButton`          | `SpinButtonField`               |                                                                                              |
+| `TextField`   | `Input` OR `Textarea` | `InputField` OR `TextareaField` | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."`        |
+| `Toggle`      | `Switch`              | `SwitchField`                   |                                                                                              |
+
+### Migration from v0
+
+Many components in v0 have `Form___` versions (such as `FormInput`). Those are replaced by the `___Field` equivalent. See the underlying component's migration guides for more detailed migration information.
+
+Component mapping:
+
+- `FormButton` => Not supported
+- `FormCheckbox` => `CheckboxField` OR `SwitchField`
+- `FormDatepicker` => _(Not yet implemented)_
+- `FormDropdown` => `DropdownField`
+- `FormField` => Not supported
+- `FormFieldCustom` => Not supported
+- `FormLabel` => The `label` prop of the field component
+- `FormMessage` => Either the `validationMessage` or `hint` prop of the field component
+- `FormRadioGroup` => `RadioGroupField`
+- `FormSlider` => `SliderField`
+- `FormTextArea` => `TextareaField`
+
+The following props are common to each of the `Form___` components:
+
+- `label` => `label`
+- `message` => either `validationMessage` or `hint`
+- `errorMessage` => `validationMessage` with `validationState="error"`
+
+## Behaviors
+
+### Form validation
+
+Field has no logic to perform input validation. It is expected that the validation will be done externally (possibly using a third party form validation library like Formik).
+
+### Interaction
+
+The Field itself is not interactive. The wrapped component has the same interactions as it does outside of a field.
+
+## Accessibility
+
+- **ARIA pattern**
+  - Field itself does not implement a defined ARIA pattern. It has no role applied to the root element.
+- **Attributes**
+  - The following are applied on the wrapped component:
+    - `aria-labelledby={label.id}`, if the label is present.
+    - `aria-describedby` is set to one of:
+      - `aria-describedby={validationMessage.id}`, if validationMessage is present, and _only if_ `validationState !== 'error'`
+      - `aria-describedby={hint.id}`, if hint is present
+      - `aria-describedby={validationMessage.id + ' ' + hint.id}`, if both conditions above apply
+    - `aria-errormessage={validationMessage.id}`, if validationMessage is present, and _only if_ `validationState === 'error'`
+    - `aria-invalid={true}`, _only if_ `validationState === 'error'`
+  - On the `label` slot:
+    - `htmlFor={control.id}` - the wrapped component's `id` (an ID is generated if not supplied via props).
+- **Live regions** (state change announcements)
+  - TBD: Need to determine if the validation message should be an aria live region.
+- **UI parts appearing on hover or focus**
+  - None.
+- **Focus behavior**
+  - No special focus behavior: no focus trapping or programmatic focus moving.

package/dist/index.d.ts

@@ -0,0 +1,243 @@
+/// <reference types="react" />
+
+import { Checkbox } from '@fluentui/react-checkbox';
+import type { CheckboxProps } from '@fluentui/react-checkbox';
+import { Combobox } from '@fluentui/react-combobox';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Input } from '@fluentui/react-input';
+import { Label } from '@fluentui/react-label';
+import { Progress } from '@fluentui/react-progress';
+import { RadioGroup } from '@fluentui/react-radio';
+import * as React_2 from 'react';
+import { Select } from '@fluentui/react-select';
+import { Slider } from '@fluentui/react-slider';
+import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotRenderFunction } from '@fluentui/react-utilities';
+import type { SlotShorthandValue } from '@fluentui/react-utilities';
+import { SpinButton } from '@fluentui/react-spinbutton';
+import { Switch } from '@fluentui/react-switch';
+import { Textarea } from '@fluentui/react-textarea';
+
+export declare const CheckboxField: ForwardRefComponent<CheckboxFieldProps>;
+
+export declare const checkboxFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {
+    /**
+     * The Checkbox's label.
+     */
+    label?: CheckboxProps['label'];
+    /**
+     * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.
+     * It is recommended to only set the `label` prop, and not `fieldLabel`.
+     */
+    fieldLabel?: FieldProps<typeof Checkbox>['label'];
+};
+
+export declare const ComboboxField: ForwardRefComponent<ComboboxFieldProps>;
+
+export declare const comboboxFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type ComboboxFieldProps = FieldProps<typeof Combobox>;
+
+/**
+ * The minimum requirement for a component used by Field.
+ *
+ * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,
+ * but it is still allowed to have a children prop.
+ */
+declare type FieldComponent = React_2.VoidFunctionComponent<Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'>>;
+
+/**
+ * Configuration parameters for a Field class, passed to useField_unstable
+ */
+export declare type FieldConfig<T extends FieldComponent> = {
+    /**
+     * The underlying input component that this field is wrapping.
+     */
+    component: T;
+    /**
+     * Class names for this component, created by `getFieldClassNames`.
+     */
+    classNames: SlotClassNames<FieldSlots<T>>;
+    /**
+     * How the label be connected to the control.
+     * * htmlFor - Set the Label's htmlFor prop to the component's ID (and generate an ID if not provided).
+     *   This is the preferred method for components that use the underlying <input> tag.
+     * * aria-labelledby - Set the component's aria-labelledby prop to the Label's ID. Use this for components
+     *   that are not directly <input> elements (such as RadioGroup).
+     *
+     * @default htmlFor
+     */
+    labelConnection?: 'htmlFor' | 'aria-labelledby';
+};
+
+/**
+ * Field Props
+ */
+export declare type FieldProps<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {
+    /**
+     * The orientation of the label relative to the field component.
+     * This only affects the label, and not the validationMessage or hint (which always appear below the field component).
+     *
+     * @default vertical
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`, and for some
+     * field components, an `validationState="error"` causes the border to become red.
+     *
+     * @default undefined
+     */
+    validationState?: 'error' | 'warning' | 'success';
+};
+
+/**
+ * FieldProps plus extra optional props that are supported by useField_unstable, but not required to be part of the
+ * API of every Field component.
+ *
+ * This allows Field to forward the required and size props to the label if the underlying component supports them,
+ * but doesn't add them to the public API of fields that don't support them.
+ */
+declare type FieldPropsWithOptionalComponentProps<T extends FieldComponent> = FieldProps<T> & {
+    /**
+     * Whether the field label should be marked as required.
+     */
+    required?: boolean;
+    /**
+     * Size of the field label.
+     *
+     * Number sizes will be ignored, but are allowed because the HTML `<input>` element has a prop `size?: number`.
+     */
+    size?: 'small' | 'medium' | 'large' | number;
+};
+
+/**
+ * Slots added by Field
+ */
+export declare type FieldSlots<T extends FieldComponent> = {
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * The underlying component wrapped by this field.
+     */
+    control: SlotComponent<T>;
+    /**
+     * The label associated with the field.
+     */
+    label?: Slot<typeof Label>;
+    /**
+     * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.
+     */
+    validationMessage?: Slot<'span'>;
+    /**
+     * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an
+     * icon corresponding to that state.
+     *
+     * This will only be displayed if `validationMessage` is set.
+     */
+    validationMessageIcon?: Slot<'span'>;
+    /**
+     * Additional hint text below the field.
+     */
+    hint?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering Field
+ */
+export declare type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> & Pick<FieldProps<T>, 'orientation' | 'validationState'> & {
+    classNames: SlotClassNames<FieldSlots<T>>;
+};
+
+export declare const getFieldClassNames: (name: string) => SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare const InputField: ForwardRefComponent<InputFieldProps>;
+
+export declare const inputFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type InputFieldProps = FieldProps<typeof Input>;
+
+export declare const ProgressField: ForwardRefComponent<ProgressFieldProps>;
+
+export declare const progressFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type ProgressFieldProps = FieldProps<typeof Progress>;
+
+export declare const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps>;
+
+export declare const radioGroupFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;
+
+/**
+ * Render the final JSX of Field
+ */
+export declare const renderField_unstable: <T extends FieldComponent>(state: FieldState<T>) => JSX.Element;
+
+export declare const SelectField: ForwardRefComponent<SelectFieldProps>;
+
+export declare const selectFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type SelectFieldProps = FieldProps<typeof Select>;
+
+export declare const SliderField: ForwardRefComponent<SliderFieldProps>;
+
+export declare const sliderFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type SliderFieldProps = FieldProps<typeof Slider>;
+
+declare type SlotComponent<Type extends React_2.ComponentType | React_2.VoidFunctionComponent> = WithSlotShorthandValue<Type extends React_2.ComponentType<infer Props> ? WithSlotRenderFunction<Props extends {
+    children?: unknown;
+} ? Props : Props & {
+    children?: never;
+}> : never>;
+
+export declare const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps>;
+
+export declare const spinButtonFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type SpinButtonFieldProps = FieldProps<typeof SpinButton>;
+
+export declare const SwitchField: ForwardRefComponent<SwitchFieldProps>;
+
+export declare const switchFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type SwitchFieldProps = Omit<FieldProps<typeof Switch>, 'labelPosition'>;
+
+export declare const TextareaField: ForwardRefComponent<TextareaFieldProps>;
+
+export declare const textareaFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+export declare type TextareaFieldProps = FieldProps<typeof Textarea>;
+
+/**
+ * Create the state required to render Field.
+ *
+ * The returned state can be modified with hooks such as useFieldStyles_unstable,
+ * before being passed to renderField_unstable.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the control slot (primary slot)
+ * @param params - Configuration parameters for this Field
+ */
+export declare const useField_unstable: <T extends FieldComponent>(props: FieldPropsWithOptionalComponentProps<T>, ref: React_2.Ref<HTMLElement>, params: FieldConfig<T>) => FieldState<T>;
+
+/**
+ * Apply styling to the Field slots based on the state
+ */
+export declare const useFieldStyles_unstable: <T extends FieldComponent>(state: FieldState<T>) => void;
+
+declare type WithSlotRenderFunction<Props extends {
+    children?: unknown;
+}> = Props & {
+    children?: Props['children'] | SlotRenderFunction<Props>;
+};
+
+declare type WithSlotShorthandValue<Props extends {
+    children?: unknown;
+}> = Props | Extract<SlotShorthandValue, Props['children']>;
+
+export { }

package/lib/CheckboxField.js

@@ -0,0 +1,2 @@
+export * from './components/CheckboxField/index';
+//# sourceMappingURL=CheckboxField.js.map

package/lib/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../src/CheckboxField.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/CheckboxField/index';\n"]}

package/lib/ComboboxField.js

@@ -0,0 +1,2 @@
+export * from './components/ComboboxField/index';
+//# sourceMappingURL=ComboboxField.js.map

package/lib/ComboboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxField.js","sourceRoot":"","sources":["../src/ComboboxField.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/ComboboxField/index';\n"]}

package/lib/Field.js

@@ -0,0 +1,2 @@
+export * from './components/Field/index';
+//# sourceMappingURL=Field.js.map

package/lib/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Field/index';\n"]}

package/lib/InputField.js

@@ -0,0 +1,2 @@
+export * from './components/InputField/index';
+//# sourceMappingURL=InputField.js.map

package/lib/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../src/InputField.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/InputField/index';\n"]}

package/lib/ProgressField.js

@@ -0,0 +1,2 @@
+export * from './components/ProgressField/index';
+//# sourceMappingURL=ProgressField.js.map

package/lib/ProgressField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressField.js","sourceRoot":"","sources":["../src/ProgressField.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/ProgressField/index';\n"]}

package/lib/RadioGroupField.js

@@ -0,0 +1,2 @@
+export * from './components/RadioGroupField/index';
+//# sourceMappingURL=RadioGroupField.js.map

package/lib/RadioGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.js","sourceRoot":"","sources":["../src/RadioGroupField.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/RadioGroupField/index';\n"]}

package/lib/SelectField.js

@@ -0,0 +1,2 @@
+export * from './components/SelectField/index';
+//# sourceMappingURL=SelectField.js.map

package/lib/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../src/SelectField.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/SelectField/index';\n"]}

package/lib/SliderField.js

@@ -0,0 +1,2 @@
+export * from './components/SliderField/index';
+//# sourceMappingURL=SliderField.js.map

package/lib/SliderField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.js","sourceRoot":"","sources":["../src/SliderField.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/SliderField/index';\n"]}

package/lib/SpinButtonField.js

@@ -0,0 +1,2 @@
+export * from './components/SpinButtonField/index';
+//# sourceMappingURL=SpinButtonField.js.map

package/lib/SpinButtonField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinButtonField.js","sourceRoot":"","sources":["../src/SpinButtonField.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/SpinButtonField/index';\n"]}