@bspk/ui 1.1.13 → 1.1.14

package/dist/index.d.ts

@@ -24,7 +24,7 @@ export type CallToActionButton = {
     /** The size of the call to action button. */
     size?: ButtonSize;
 };
-export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name', T> & Required<CommonProps<'value'>> & {
+export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'name', T> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
     /**
      * Marks the control as checked.
      *
@@ -40,6 +40,27 @@ export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label'
     onChange: (checked: boolean, event: ChangeEvent<T>) => void;
 };
 export type CommonProps<K extends keyof CommonPropsLibrary, T extends HTMLElement = HTMLElement> = Pick<CommonPropsLibrary<T>, K>;
+/**
+ * The props that are common to input elements.
+ *
+ * If an element is invalid it must have an errorMessage.
+ */
+export type InvalidPropsLibrary = {
+    /**
+     * Marks the element as invalid and displays error state theme.
+     *
+     * If the errorMessage is empty the error state theme will not appear.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the element as invalid and displays error message.
+     *
+     * When an element is invalid it must display an error message explaining why it is invalid.
+     */
+    errorMessage?: string;
+};
 export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
@@ -73,12 +94,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Marks the element as invalid and displays error state theme.
-     *
-     * @default false
-     */
-    invalid?: boolean;
     /**
      * Determines if the element is [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly).
      *
@@ -91,12 +106,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @required
      */
     name: string;
-    /**
-     * Marks the element as invalid and displays error message.
-     *
-     * When an element is invalid it must display an error message explaining why it is invalid.
-     */
-    errorMessage?: string;
     /**
      * The value of the control.
      *

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+IH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0JH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}

package/dist/inline-alert.css

@@ -1 +1 @@
-[data-bspk=inline-alert]{display:flex;align-items:start;justify-content:center;flex-direction:row;gap:var(--spacing-sizing-02)}[data-bspk=inline-alert] [data-txt]{flex:1}[data-bspk=inline-alert][data-variant=error]{color:var(--status-error);--first-tone: var(--status-error);--second-tone: var(--status-on-information)}[data-bspk=inline-alert][data-variant=success]{color:var(--status-success);--first-tone: var(--status-success);--second-tone: var(--status-on-success)}[data-bspk=inline-alert][data-variant=warning]{color:var(--foreground-neutral-on-surface);--first-tone: var(--status-warning);--second-tone: var(--status-on-warning)}[data-bspk=inline-alert][data-variant=informational]{color:var(--status-information);--first-tone: var(--status-information);--second-tone: var(--status-on-information)}[data-bspk=inline-alert] svg{color:var(--first-tone);width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=inline-alert] svg [data-second-tone]{fill:var(--second-tone)}
+[data-bspk=inline-alert]{display:flex;align-items:start;justify-content:start;flex-direction:row;gap:var(--spacing-sizing-02)}[data-bspk=inline-alert] [data-txt]{flex:1}[data-bspk=inline-alert][data-variant=error]{color:var(--status-error);--first-tone: var(--status-error);--second-tone: var(--status-on-information)}[data-bspk=inline-alert][data-variant=success]{color:var(--status-success);--first-tone: var(--status-success);--second-tone: var(--status-on-success)}[data-bspk=inline-alert][data-variant=warning]{color:var(--foreground-neutral-on-surface);--first-tone: var(--status-warning);--second-tone: var(--status-on-warning)}[data-bspk=inline-alert][data-variant=informational]{color:var(--status-information);--first-tone: var(--status-information);--second-tone: var(--status-on-information)}[data-bspk=inline-alert] svg{color:var(--first-tone);width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=inline-alert] svg [data-second-tone]{fill:var(--second-tone)}

package/dist/number-input.css

@@ -1 +1 @@
-[data-bspk=number-input]{--font: var(--body-base);--height: var(--spacing-sizing-10);--svg-width: var(--spacing-sizing-05);--color: var(--foreground-neutral-on-surface);width:100%;display:flex;flex-flow:row nowrap;font:var(--font);height:var(--height);border:1px solid var(--stroke-neutral-base);border-radius:var(--radius-small);background:var(--surface-neutral-t1-base)}[data-bspk=number-input]:focus-within{border-color:var(--stroke-brand-primary);outline:1px solid var(--stroke-brand-primary)}[data-bspk=number-input] [data-divider]{width:4px;border-right:1px solid var(--stroke-neutral-base);height:calc(var(--height) - 8px);margin:3px 0}[data-bspk=number-input] button{min-width:var(--height);background:none;border:none;cursor:pointer;font:var(--font);display:flex;justify-content:center;align-items:center;color:var(--color)}[data-bspk=number-input] button svg{width:var(--svg-width)}[data-bspk=number-input] button:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=number-input] input{color:var(--color);min-width:0;display:block;font:var(--font);text-align:center;padding:0 var(--spacing-sizing-03);background:rgba(0,0,0,0);border:none}[data-bspk=number-input] input:focus{outline:none}[data-bspk=number-input] input::-webkit-outer-spin-button,[data-bspk=number-input] input::-webkit-inner-spin-button{appearance:none;margin:0}[data-bspk=number-input] input[type=number]{appearance:textfield}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:hover,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):hover{background-color:var(--interactions-hover-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:active,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):active{background-color:var(--interactions-press-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly])[data-invalid]{border-color:var(--status-error);outline-color:var(--status-error)}[data-bspk=number-input][data-disabled],[data-bspk=number-input][data-readonly]{--color: var(--foreground-neutral-disabled-on-surface);border-color:var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=number-input][data-disabled] [data-divider],[data-bspk=number-input][data-readonly] [data-divider]{border-color:var(--stroke-neutral-disabled-light)}[data-bspk=number-input][data-readonly] input{color:var(--foreground-neutral-on-surface) !important}[data-bspk=number-input][data-size=small]{--font: var(--body-small);--height: var(--spacing-sizing-08)}[data-bspk=number-input][data-size=large]{--font: var(--body-large);--height: var(--spacing-sizing-12);--svg-width: var(--spacing-sizing-06)}
+[data-bspk=number-input]{--font: var(--body-base);--height: var(--spacing-sizing-10);--svg-width: var(--spacing-sizing-05);--color: var(--foreground-neutral-on-surface);width:100%;display:flex;flex-flow:row nowrap;font:var(--font);height:var(--height);border:1px solid var(--stroke-neutral-base);border-radius:var(--radius-small);background:var(--surface-neutral-t1-base);max-width:280px}[data-bspk=number-input]:focus-within{border-color:var(--stroke-brand-primary)}[data-bspk=number-input] [data-divider]{width:4px;border-right:1px solid var(--stroke-neutral-base);height:calc(var(--height) - 8px);margin:3px 0}[data-bspk=number-input] button{width:var(--height);height:var(--height);background:none;border:none;cursor:pointer;font:var(--font);flex-shrink:0;display:flex;justify-content:center;align-items:center;color:var(--color)}[data-bspk=number-input] button svg{width:var(--svg-width)}[data-bspk=number-input] button:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=number-input] input{color:var(--color);min-width:0;display:block;font:var(--font);text-align:center;padding:0 var(--spacing-sizing-03);background:rgba(0,0,0,0);border:none;flex-grow:1}[data-bspk=number-input] input:focus{outline:none}[data-bspk=number-input] input::-webkit-outer-spin-button,[data-bspk=number-input] input::-webkit-inner-spin-button{appearance:none;margin:0}[data-bspk=number-input] input[type=number]{appearance:textfield}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:hover,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):hover{background-color:var(--interactions-hover-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:active,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):active{background-color:var(--interactions-press-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly])[data-invalid]{border-color:var(--status-error);outline-color:var(--status-error)}[data-bspk=number-input][data-disabled],[data-bspk=number-input][data-readonly]{--color: var(--foreground-neutral-disabled-on-surface);border-color:var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=number-input][data-disabled] [data-divider],[data-bspk=number-input][data-readonly] [data-divider]{border-color:var(--stroke-neutral-disabled-light)}[data-bspk=number-input][data-readonly] input{color:var(--foreground-neutral-on-surface) !important}[data-bspk=number-input][data-size=small]{--font: var(--body-small);--height: var(--spacing-sizing-08)}[data-bspk=number-input][data-size=large]{--font: var(--body-large);--height: var(--spacing-sizing-12);--svg-width: var(--spacing-sizing-06)}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.13",
+    "version": "1.1.14",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -19,7 +19,7 @@
         "sass": "sass --style=compressed --no-source-map src:dist",
         "build": "tsx build.ts",
         "lint:css": "npx stylelint '**/*.scss'",
-        "lint": "eslint",
+        "lint": "eslint && tsc --noEmit && stylelint '**/*.scss'",
         "lint:fix": "eslint --fix",
         "semantic-release": "semantic-release",
         "test": "jest",

package/src/Checkbox.tsx

@@ -27,6 +27,8 @@ function Checkbox({
     indeterminate: indeterminateProp,
     invalid,
     disabled,
+    errorMessage,
+
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
     const indeterminate = !!indeterminateProp;
@@ -46,6 +48,7 @@ function Checkbox({
         >
             <input
                 {...props}
+                aria-errormessage={errorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 checked={checked}
                 disabled={disabled || undefined}

package/src/CheckboxOption.tsx

@@ -1,10 +1,10 @@
 import { CheckboxProps, Checkbox } from './Checkbox';
 import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
-export type CheckboxOptionProps = Pick<
-    CheckboxProps,
-    'checked' | 'disabled' | 'indeterminate' | 'invalid' | 'name' | 'onChange' | 'value'
-> &
+import { InvalidPropsLibrary } from '.';
+
+export type CheckboxOptionProps = InvalidPropsLibrary &
+    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'onChange' | 'value'> &
     Pick<ToggleOptionProps, 'description' | 'label'>;
 
 /**

package/src/Dropdown.tsx

@@ -8,7 +8,7 @@ import { Placement } from './hooks/useFloating';
 import { useFloatingMenu } from './hooks/useFloatingMenu';
 import { useId } from './hooks/useId';
 
-import { CommonProps } from './';
+import { CommonProps, InvalidPropsLibrary } from './';
 
 export type DropdownOption = {
     /** The value of the option. */
@@ -18,8 +18,9 @@ export type DropdownOption = {
 };
 
 export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'
+    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'
 > &
+    InvalidPropsLibrary &
     Pick<MenuProps<O>, 'isMulti' | 'itemCount' | 'onChange' | 'renderListItem'> & {
         /**
          * Array of options to display in the dropdown
@@ -66,6 +67,7 @@ function Dropdown<O extends DropdownOption = DropdownOption>({
     disabled,
     id: propId,
     invalid,
+    errorMessage,
     readOnly,
     placement = 'bottom',
     name,
@@ -81,6 +83,7 @@ function Dropdown<O extends DropdownOption = DropdownOption>({
             disabled,
             invalid,
             readOnly,
+            errorMessage,
         },
     });
 

package/src/FormField.tsx

@@ -3,7 +3,7 @@ import { InlineAlert } from './InlineAlert';
 import { Layout } from './Layout';
 import { Txt } from './Txt';
 
-import { CommonProps } from './';
+import { CommonProps, InvalidPropsLibrary } from './';
 
 export type FieldControlProps = {
     /**
@@ -18,27 +18,29 @@ export type FieldControlProps = {
     'aria-errormessage'?: string;
 };
 
-export type FormFieldProps = CommonProps<'errorMessage' | 'required'> & {
-    /**
-     * The label of the field.
-     *
-     * @required
-     */
-    label: string;
-    /** The id of the control. */
-    controlId: string;
-    /**
-     * The children of the form field. This should be a control such as TextInput, Dropdown, DatePicker, or TimePicker.
-     *
-     * @type (childProps: FieldControlProps) => JSX.Element
-     * @required
-     */
-    children: (childProps: FieldControlProps) => JSX.Element;
-    /** The helperText of the field. */
-    helperText?: string;
-    /** The trailing element of the label. */
-    labelTrailing?: React.ReactNode;
-};
+export type FormFieldProps = CommonProps<'required'> &
+    InvalidPropsLibrary & {
+        /**
+         * The label of the field.
+         *
+         * @required
+         */
+        label: string;
+        /** The id of the control. */
+        controlId: string;
+        /**
+         * The children of the form field. This should be a control such as TextInput, Dropdown, DatePicker, or
+         * TimePicker.
+         *
+         * @type (childProps: FieldControlProps) => JSX.Element
+         * @required
+         */
+        children: (childProps: FieldControlProps) => JSX.Element;
+        /** The helperText of the field. */
+        helperText?: string;
+        /** The trailing element of the label. */
+        labelTrailing?: React.ReactNode;
+    };
 
 /**
  * Wrapper component for form controls.
@@ -47,14 +49,23 @@ export type FormFieldProps = CommonProps<'errorMessage' | 'required'> & {
  *
  * @name FormField
  */
-function FormField({ label, errorMessage, helperText, children, labelTrailing, controlId, required }: FormFieldProps) {
+function FormField({
+    label,
+    invalid,
+    errorMessage,
+    helperText,
+    children,
+    labelTrailing,
+    controlId,
+    required,
+}: FormFieldProps) {
     const errorMessageId = errorMessage && `${controlId}-error-message`;
     const helperTextId = helperText && `${controlId}-helper-text`;
 
     if (typeof children !== 'function') return null;
 
     return (
-        <div data-bspk="form-field">
+        <div data-bspk="form-field" data-invalid={invalid || undefined}>
             <Layout as="header">
                 <label htmlFor={controlId}>
                     <Txt as="span" variant="labels-small">

package/src/ListItem.tsx

@@ -81,6 +81,7 @@ function ListItem<As extends ElementType = 'div'>({
     subText,
     active,
     readOnly,
+    errorMessage,
     ...props
 }: ElementProps<ListItemProps<As>, As>) {
     let As: ElementType = as || 'div';
@@ -120,6 +121,7 @@ function ListItem<As extends ElementType = 'div'>({
         <As
             {...props}
             aria-disabled={disabled || undefined}
+            aria-errormessage={errorMessage || undefined}
             aria-invalid={invalid || undefined}
             data-action={actionable || undefined}
             data-active={active || undefined}

package/src/NumberField.tsx

@@ -1,11 +1,11 @@
 import { FormFieldProps, FormField } from './FormField';
 import { NumberInputProps, NumberInput } from './NumberInput';
 
-export type NumberFieldProps = Pick<
-    NumberInputProps,
-    'centered' | 'disabled' | 'id' | 'invalid' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'
-> &
-    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+import { InvalidPropsLibrary } from '.';
+
+export type NumberFieldProps = InvalidPropsLibrary &
+    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'> &
+    Pick<NumberInputProps, 'align' | 'disabled' | 'id' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'>;
 
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by

package/src/NumberInput.tsx

@@ -5,7 +5,7 @@ import './number-input.scss';
 import { useId } from './hooks/useId';
 import { useLongPress } from './hooks/useLongPress';
 
-import { CommonProps } from '.';
+import { CommonProps, InvalidPropsLibrary } from '.';
 
 function isNumber(value: unknown): number | undefined {
     if (typeof value === 'number') return value;
@@ -14,40 +14,53 @@ function isNumber(value: unknown): number | undefined {
     return isNaN(num) ? undefined : num;
 }
 
-export type NumberInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'
-> & {
-    /**
-     * The value of the control.
-     *
-     * @required
-     */
-    value?: number;
-    /** Callback when the value changes. */
-    onChange: (value: number) => void;
-    /**
-     * If the value should be centered between the up & down buttons.
-     *
-     * @default false
-     */
-    centered?: boolean;
-    /** Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is accepted. */
-    max?: number;
-    /** Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is accepted. */
-    min?: number;
-};
+export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> &
+    InvalidPropsLibrary & {
+        /**
+         * The value of the control.
+         *
+         * @required
+         */
+        value?: number;
+        /** Callback when the value changes. */
+        onChange: (value: number) => void;
+        /**
+         * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.
+         *
+         * @default center
+         */
+        align?: 'center' | 'left';
+        /**
+         * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
+         * accepted.
+         *
+         * @default 99
+         * @maximum 99
+         * @minimum 1
+         */
+        max?: number;
+        /**
+         * Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is
+         * accepted.
+         *
+         * @minimum 0
+         */
+        min?: number;
+    };
 
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
  * pressing the (+) or (-).
  *
+ * The value of the input is a number. The value is clamped to the min and max values if they are provided.
+ *
  * @name NumberInput
  */
 function NumberInput({
     //
     value = 1,
     onChange,
-    centered = false,
+    align = 'center',
     size = 'medium',
     disabled = false,
     readOnly = false,
@@ -58,6 +71,7 @@ function NumberInput({
     max: maxProp,
     min: minProp,
 }: NumberInputProps) {
+    const centered = align !== 'left';
     const inputId = useId(inputIdProp);
     const max = isNumber(maxProp);
     const min = isNumber(minProp);

package/src/Radio.tsx

@@ -1,10 +1,8 @@
 import './radio.scss';
-import { ToggleControlProps, ElementProps } from './';
+import { ToggleControlProps, ElementProps, InvalidPropsLibrary } from './';
 
-export type RadioProps = Pick<
-    ToggleControlProps<HTMLInputElement>,
-    'aria-label' | 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'
->;
+export type RadioProps = InvalidPropsLibrary &
+    Pick<ToggleControlProps<HTMLInputElement>, 'aria-label' | 'checked' | 'disabled' | 'name' | 'onChange' | 'value'>;
 
 /**
  * A round control that allows user to choose one option from a set. This is the base element and if used directly you

package/src/RadioOption.tsx

@@ -1,7 +1,10 @@
 import { RadioProps, Radio } from './Radio';
 import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
-export type RadioOptionProps = Pick<RadioProps, 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'> &
+import { InvalidPropsLibrary } from '.';
+
+export type RadioOptionProps = InvalidPropsLibrary &
+    Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'onChange' | 'value'> &
     Pick<ToggleOptionProps, 'description' | 'label'>;
 
 /**

package/src/TextField.tsx

@@ -1,23 +1,25 @@
 import { FormFieldProps, FormField } from './FormField';
 import { TextInputProps, TextInput } from './TextInput';
 
-export type TextFieldProps = Pick<
-    TextInputProps,
-    | 'autoComplete'
-    | 'disabled'
-    | 'inputRef'
-    | 'invalid'
-    | 'leading'
-    | 'name'
-    | 'onChange'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'size'
-    | 'trailing'
-    | 'type'
-    | 'value'
-> &
+import { InvalidPropsLibrary } from '.';
+
+export type TextFieldProps = InvalidPropsLibrary &
+    Pick<
+        TextInputProps,
+        | 'autoComplete'
+        | 'disabled'
+        | 'inputRef'
+        | 'leading'
+        | 'name'
+        | 'onChange'
+        | 'placeholder'
+        | 'readOnly'
+        | 'required'
+        | 'size'
+        | 'trailing'
+        | 'type'
+        | 'value'
+    > &
     Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'>;
 
 /**

package/src/TextInput.tsx

@@ -4,38 +4,39 @@ import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, Re
 
 import { useId } from './hooks/useId';
 
-import { ElementProps, CommonProps } from '.';
+import { ElementProps, CommonProps, InvalidPropsLibrary } from '.';
 
 export type TextInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
-> & {
-    /**
-     * Callback when the value of the field changes.
-     *
-     * @type (next: String, Event) => void
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
-    /** The ref of the container. */
-    containerRef?: (node: HTMLElement | null) => void;
-    /** The ref of the input. */
-    inputRef?: (node: HTMLElement | null) => void;
-    /** The trailing element to display in the field. */
-    trailing?: ReactNode;
-    /** The leading element to display in the field. */
-    leading?: ReactNode;
-    /** The placeholder of the field. */
-    placeholder?: string;
-    /** The type of the input. */
-    type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
-    /**
-     * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-     *
-     * @default off
-     */
-    autoComplete?: HTMLInputAutoCompleteAttribute;
-};
+    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
+> &
+    InvalidPropsLibrary & {
+        /**
+         * Callback when the value of the field changes.
+         *
+         * @type (next: String, Event) => void
+         * @required
+         */
+        onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
+        /** The ref of the container. */
+        containerRef?: (node: HTMLElement | null) => void;
+        /** The ref of the input. */
+        inputRef?: (node: HTMLElement | null) => void;
+        /** The trailing element to display in the field. */
+        trailing?: ReactNode;
+        /** The leading element to display in the field. */
+        leading?: ReactNode;
+        /** The placeholder of the field. */
+        placeholder?: string;
+        /** The type of the input. */
+        type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
+        /**
+         * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+         *
+         * @default off
+         */
+        autoComplete?: HTMLInputAutoCompleteAttribute;
+    };
 
 /**
  * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
@@ -63,6 +64,7 @@ function TextInput({
     disabled,
     autoComplete = 'off',
     containerRef,
+    errorMessage,
     ...otherProps
 }: ElementProps<TextInputProps, 'div'>) {
     const id = useId(idProp);
@@ -82,6 +84,7 @@ function TextInput({
         >
             {leading && <span data-leading>{leading}</span>}
             <input
+                aria-errormessage={errorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 autoComplete={autoComplete}