WIP

src/internal/LibraryAPI/index.tsx

@@ -1,2 +1 @@
 export type {LibraryProps, DataAttributes} from './LibraryTypes';
-export {parseDataAttributes} from './parseDataAttributes';

src/internal/inputs/interactiveAPI.ts → src/internal/inputs/CallbackProps.ts

@@ -1,44 +1,53 @@
-import type {
-    InputHTMLAttributes,
-    ChangeEvent,
-    FocusEvent,
-    KeyboardEvent,
-    AriaAttributes
-} from 'react';
+import type {ChangeEvent, FocusEvent, InputHTMLAttributes, KeyboardEvent} from 'react';
 
-export type NativeProps = AriaAttributes & {
+export type CallbackPropsTextual<TElement = HTMLInputElement> = {
     /**
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+     * Provide value for controlled TextInput.
+     * Setting this prop enables controlled mode.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+     * @see https://naspersclassifieds.atlassian.net/wiki/spaces/NDS/pages/57169350329/RFC+Nexus+Input+API#Controllable-state
+     */
+    value?: InputHTMLAttributes<TElement>['value'];
+    /**
+     * Provide value for non-controlled TextInput.
+     * Setting this prop enables non-controlled mode.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+     * @see https://naspersclassifieds.atlassian.net/wiki/spaces/NDS/pages/57169350329/RFC+Nexus+Input+API#Uncontrolled-input
+     */
+    defaultValue?: InputHTMLAttributes<TElement>['defaultValue'];
+    /**
+     * Disable input.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled
+     */
+    disabled?: InputHTMLAttributes<TElement>['disabled'];
+    /**
+     * Set on change callback to get Event object.
+     * @see https://reactjs.org/docs/events.html#form-events
      */
-    name?: InputHTMLAttributes<HTMLInputElement>['name'];
-    /** Set input id attribute. */
-    id?: string;
+    onChange?: (event: ChangeEvent<TElement>) => void;
     /**
-     * Set native HTML `required` attribute.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+     * Set on focus callback to get Event object.
+     * @see https://reactjs.org/docs/events.html#onfocus
      */
-    required?: InputHTMLAttributes<HTMLInputElement>['required'];
+    onFocus?: (event: FocusEvent<TElement>) => void;
     /**
-     * Provides substitute for native autofocus functionality.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
-     * @see https://github.com/facebook/react/issues/11851#issuecomment-351672131
+     * Set on blur callback to get Event object.
+     * @see https://reactjs.org/docs/events.html#onblur
      */
-    autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
+    onBlur?: (event: FocusEvent<TElement>) => void;
     /**
-     * Set native HTML `autocomplete` attribute.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     * Set on key down callback to get Event object.
+     * @see https://reactjs.org/docs/events.html#keyboard-events
      */
-    autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
-    /** Set native HTML `form` attribute. */
-    form?: InputHTMLAttributes<HTMLInputElement>['form'];
+    onKeyDown?: (event: KeyboardEvent<TElement>) => void;
     /**
-     * Set native ARIA role attribute
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/input_role
+     * Set on key up callback to get Event object.
+     * @see https://reactjs.org/docs/events.html#keyboard-events
      */
-    role?: InputHTMLAttributes<HTMLInputElement>['role'];
+    onKeyUp?: (event: KeyboardEvent<TElement>) => void;
 };
 
-export type CallbackProps = {
+export type CallbackPropsInteractive = {
     /**
      * Provide value CheckboxInput.
      * NB! This prop is unlike TextInput and doesn't influence a state of input! Use `checked` prop for that.

src/internal/inputs/API.ts → src/internal/inputs/NativeProps.ts

@@ -1,6 +1,6 @@
-import type {InputHTMLAttributes, ChangeEvent, FocusEvent, KeyboardEvent} from 'react';
+import type {InputHTMLAttributes} from 'react';
 
-export type NativeProps = {
+export type NativePropsTextual = {
     /**
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
      */
@@ -69,49 +69,34 @@ export type NativeProps = {
     // min?: InputHTMLAttributes<HTMLInputElement>['min'];
 };
 
-export type CallbackProps<TElement = HTMLInputElement> = {
+export type NativePropsInteractive = {
     /**
-     * Provide value for controlled TextInput.
-     * Setting this prop enables controlled mode.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-     * @see https://naspersclassifieds.atlassian.net/wiki/spaces/NDS/pages/57169350329/RFC+Nexus+Input+API#Controllable-state
-     */
-    value?: InputHTMLAttributes<TElement>['value'];
-    /**
-     * Provide value for non-controlled TextInput.
-     * Setting this prop enables non-controlled mode.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-     * @see https://naspersclassifieds.atlassian.net/wiki/spaces/NDS/pages/57169350329/RFC+Nexus+Input+API#Uncontrolled-input
-     */
-    defaultValue?: InputHTMLAttributes<TElement>['defaultValue'];
-    /**
-     * Disable input.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled
-     */
-    disabled?: InputHTMLAttributes<TElement>['disabled'];
-    /**
-     * Set on change callback to get Event object.
-     * @see https://reactjs.org/docs/events.html#form-events
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
      */
-    onChange?: (event: ChangeEvent<TElement>) => void;
+    name?: InputHTMLAttributes<HTMLInputElement>['name'];
+    /** Set input id attribute. */
+    id?: string;
     /**
-     * Set on focus callback to get Event object.
-     * @see https://reactjs.org/docs/events.html#onfocus
+     * Set native HTML `required` attribute.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
      */
-    onFocus?: (event: FocusEvent<TElement>) => void;
+    required?: InputHTMLAttributes<HTMLInputElement>['required'];
     /**
-     * Set on blur callback to get Event object.
-     * @see https://reactjs.org/docs/events.html#onblur
+     * Provides substitute for native autofocus functionality.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+     * @see https://github.com/facebook/react/issues/11851#issuecomment-351672131
      */
-    onBlur?: (event: FocusEvent<TElement>) => void;
+    autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
     /**
-     * Set on key down callback to get Event object.
-     * @see https://reactjs.org/docs/events.html#keyboard-events
+     * Set native HTML `autocomplete` attribute.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
      */
-    onKeyDown?: (event: KeyboardEvent<TElement>) => void;
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
+    /** Set native HTML `form` attribute. */
+    form?: InputHTMLAttributes<HTMLInputElement>['form'];
     /**
-     * Set on key up callback to get Event object.
-     * @see https://reactjs.org/docs/events.html#keyboard-events
+     * Set native ARIA role attribute
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/input_role
      */
-    onKeyUp?: (event: KeyboardEvent<TElement>) => void;
+    role?: InputHTMLAttributes<HTMLInputElement>['role'];
 };

src/internal/inputs/Validation.ts

@@ -0,0 +1,5 @@
+export enum Validation {
+    error = 'error',
+    valid = 'valid',
+    inProgress = 'inProgress',
+}

src/internal/inputs/index.ts

@@ -0,0 +1,3 @@
+export type {NativePropsTextual, NativePropsInteractive} from './NativeProps.ts';
+export {Validation} from './Validation.ts';
+export type {CallbackPropsTextual, CallbackPropsInteractive} from './CallbackProps.ts';

src/lib/Form/Form.module.css

@@ -1,3 +1,5 @@
 .form {
-    color: red;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--sizeUnit) * 3);
 }

src/lib/Form/Form.stories.tsx

@@ -4,6 +4,9 @@ import {fn} from '@storybook/test';
 
 import {InputText} from '@/lib/InputText';
 import {FormField} from '@/lib/FormField';
+import {InputGroup} from '@/lib/InputGroup';
+import {InputCheckbox} from '@/lib/InputCheckbox';
+import {InputRadio} from '@/lib/InputRadio';
 
 import {Form} from './Form.tsx';
 
@@ -110,11 +113,23 @@ export const Example: Story = {
         children: (
             <Fragment>
                 <FormField label="foo">
-                    <InputText defaultValue="foo" name="foo" id="foo" required />
+                    <InputText defaultValue="foo" name="foo" id="qux" required />
                 </FormField>
-                <button type="submit">Submit</button>
-                <br />
-                <button type="reset">Reset</button>
+                <InputGroup name="radio-demo" label="Radio group">
+                    <InputRadio required id="foo" value="foo" label="This is a foo name" />
+                    <InputRadio disabled id="bar" value="bar" label="This is a bar name" />
+                    <InputRadio id="bazz" value="bazz" label="This is a bazz name" />
+                </InputGroup>
+                <InputGroup name="checkbox-demo" label="Radio group">
+                    <InputCheckbox id="zork" value="foo" label="This is a foo name" key="zork" required />
+                    <InputCheckbox required id="gork" value="bar" label="This is a bar name" key="gork" />
+                    <InputCheckbox disabled id="bork" value="bazz" label="This is a bazz name" key="bork" />
+                </InputGroup>
+                <div>
+                    <button type="submit">Submit</button>
+                    <br />
+                    <button type="reset">Reset</button>
+                </div>
             </Fragment>
         ),
     },

src/lib/InputCheckbox/InputCheckbox.module.css

@@ -63,3 +63,7 @@
     color: var(--gray200);
     cursor: not-allowed;
 }
+
+.input:invalid + label {
+    color: var(--errorColor);
+}

src/lib/InputCheckbox/InputCheckbox.tsx

@@ -2,16 +2,24 @@ import type {ChangeEvent} from 'react';
 import {forwardRef, useState, useCallback} from 'react';
 import classNames from 'classnames';
 
-// import {IconError, IconValid, IconLoader} from '@/lib/Icons';
+import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
+import {Validation} from '@/internal/inputs';
+import type {NativePropsInteractive, CallbackPropsInteractive} from '@/internal/inputs';
 
 import classes from './InputCheckbox.module.css';
-import {Validation} from './Types.ts';
-import type {Props} from './Types.ts';
+
+type Props = DataAttributes &
+    LibraryProps &
+    NativePropsInteractive &
+    CallbackPropsInteractive & {
+        validation?: keyof typeof Validation;
+        validator?: (event: ChangeEvent<HTMLInputElement>) => void;
+        label?: string;
+    };
 
 export const InputCheckbox = forwardRef<HTMLInputElement, Props>(
     (
         {
-            prefix: Prefix,
             className,
             validation,
             disabled,

src/lib/InputCheckbox/index.ts

@@ -1,2 +1 @@
 export {InputCheckbox} from './InputCheckbox.tsx';
-export type {Props} from './Types.ts';

src/lib/InputGroup/InputGroup.tsx

@@ -1,8 +1,38 @@
-import {forwardRef, Children, cloneElement, isValidElement} from 'react';
+import {
+    forwardRef,
+    Children,
+    cloneElement,
+    isValidElement,
+    type FC,
+    type ChangeEvent,
+    type ReactElement,
+    type FieldsetHTMLAttributes,
+} from 'react';
 import classNames from 'classnames';
 
+import type {LibraryProps, DataAttributes} from '@/internal/LibraryAPI';
+import type {Validation} from '@/internal/inputs';
+
 import classes from './InputGroup.module.css';
-import type {Props} from './Types.ts';
+
+type Props = DataAttributes &
+    LibraryProps & {
+        type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+        prefix?: FC;
+        validation?: keyof typeof Validation;
+        validator?: (event: ChangeEvent<HTMLInputElement>) => void;
+        label?: string;
+        children: ReactElement<
+            {name?: string; disabled?: FieldsetHTMLAttributes<HTMLFieldSetElement>['disabled']} & unknown
+        >[];
+        name: string;
+        /**
+         * Disable input.
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+         */
+        disabled?: FieldsetHTMLAttributes<HTMLFieldSetElement>['disabled'];
+        hint?: string;
+    };
 
 export const InputGroup = forwardRef<HTMLFieldSetElement, Props>(
     ({prefix: Prefix, className, validation, id, label, children, name, disabled, hint, ...nativeProps}, ref) => {
@@ -14,10 +44,17 @@ export const InputGroup = forwardRef<HTMLFieldSetElement, Props>(
                 <div className={classes.inputs}>
                     {Children.map(children, element => {
                         if (isValidElement(element)) {
-                            return cloneElement<{name?: Props['name']; disabled?: Props['disabled']}>(element, {
-                                name,
-                                disabled,
-                            });
+                            const nextProps =
+                                disabled !== undefined
+                                    ? {
+                                          name,
+                                          disabled,
+                                      }
+                                    : {name};
+                            return cloneElement<{name?: Props['name']; disabled?: Props['disabled']}>(
+                                element,
+                                nextProps
+                            );
                         }
                         return element;
                     })}

src/lib/InputGroup/index.ts

@@ -1,2 +1 @@
 export {InputGroup} from './InputGroup.tsx';
-export type {Props} from './Types.ts';