@coopdigital/react 0.34.0 → 0.36.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,30 @@
+import type { InputHTMLAttributes, JSX } from "react";
+import { FormFieldError, StandardSizes } from "../../../src/types";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the Checkbox error state.
+     *
+     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+     */
+    error?: FormFieldError;
+    /** **(Optional)** Specify the Checkbox hint.
+     *
+     * This text is rendered under the label to provide further guidance for users.
+     */
+    hint?: string;
+    /** **(Optional)** Specify the Checkbox id. Will be auto-generated if not set. */
+    id?: string;
+    /** **(Optional)** Specify the Checkbox label.
+     *
+     * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
+    label: string;
+    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+    labelVisible?: boolean;
+    /** Specify the Checkbox name. */
+    name: string;
+    /** **(Optional)** Specify the Checkbox size. */
+    size?: StandardSizes;
+}
+export declare const Checkbox: ({ className, error, hint, id, label, labelVisible, name, size, ...props }: CheckboxProps) => JSX.Element;
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { useId } from 'react';
+import { FieldError } from '../FieldError/FieldError.js';
+import { FieldHint } from '../FieldHint/FieldHint.js';
+import { FieldLabel } from '../FieldLabel/FieldLabel.js';
+
+const Checkbox = ({ className, error = false, hint, id, label, labelVisible = true, name, size = "md", ...props }) => {
+    const internalId = useId();
+    id = id !== null && id !== void 0 ? id : internalId;
+    const componentProps = {
+        className: clsx("coop-checkbox", className),
+        "data-error": error ? "" : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        id,
+        name,
+        type: "checkbox",
+        ...props,
+    };
+    return (jsxs("div", { className: "coop-form-item", children: [jsxs("div", { className: "coop-checkbox-wrapper", children: [jsx("input", { ...componentProps }), label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
+};
+
+export { Checkbox, Checkbox as default };

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,26 @@
+import type { FieldsetHTMLAttributes, JSX } from "react";
+import { FormFieldError, StandardSizes } from "../../../src/types";
+export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the CheckboxGroup error state.
+     *
+     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+     */
+    error?: FormFieldError;
+    /** **(Optional)** Specify the CheckboxGroup hint.
+     *
+     * This text is rendered under the label to provide further guidance for users.
+     */
+    hint?: string;
+    /** **(Optional)** Specify the label for the CheckboxGroup. This will be rendered as a fieldset legend. */
+    label?: string;
+    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+    labelVisible?: boolean;
+    /** **(Optional)** Specify the CheckboxGroup size. */
+    size?: StandardSizes;
+}
+export declare const CheckboxGroup: ({ children, className, error, hint, label, labelVisible, size, ...props }: CheckboxGroupProps) => JSX.Element;
+export default CheckboxGroup;

package/dist/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { FieldError } from '../FieldError/FieldError.js';
+import { FieldHint } from '../FieldHint/FieldHint.js';
+
+const CheckboxGroup = ({ children, className, error = false, hint, label, labelVisible = true, size = "md", ...props }) => {
+    const componentProps = {
+        className: clsx("coop-fieldset", "coop-checkbox-group", className),
+        "data-error": error ? "" : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        ...props,
+    };
+    const legendProps = {
+        className: clsx("coop-field-label", !labelVisible && "sr-only"),
+    };
+    return (jsxs("fieldset", { ...componentProps, children: [label && jsx("legend", { ...legendProps, children: label }), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), children] }));
+};
+
+export { CheckboxGroup, CheckboxGroup as default };

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,5 @@
+import Checkbox from "./Checkbox";
+import CheckboxGroup from "./CheckboxGroup";
+export default Checkbox;
+export { Checkbox, CheckboxGroup };
+export * from "./Checkbox";

package/dist/components/Field/Field.js

@@ -3,7 +3,7 @@ import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 
 const Field = ({ children, className, ...props }) => {
     const componentProps = {
-        className: clsx("coop-field ", className),
+        className: clsx("coop-form-item ", className),
         ...props,
     };
     return jsx("div", { ...componentProps, children: children });

package/dist/components/FieldHint/FieldHint.js

@@ -6,7 +6,7 @@ const FieldHint = ({ children, className, ...props }) => {
         className: clsx("coop-field-hint ", className),
         ...props,
     };
-    return children ? jsx("p", { ...componentProps, children: children }) : null;
+    return children ? jsx("div", { ...componentProps, children: children }) : null;
 };
 
 export { FieldHint, FieldHint as default };

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,30 @@
+import { type InputHTMLAttributes, type JSX } from "react";
+import { FormFieldError, StandardSizes } from "src/types";
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the RadioButton error state.
+     *
+     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+     */
+    error?: FormFieldError;
+    /** **(Optional)** Specify the RadioButton hint.
+     *
+     * This text is rendered under the label to provide further guidance for users.
+     */
+    hint?: string;
+    /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
+    id?: string;
+    /** **(Optional)** Specify the RadioButton label.
+     *
+     * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
+    label: string;
+    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+    labelVisible?: boolean;
+    /** Specify the RadioButton name. */
+    name: string;
+    /** **(Optional)** Specify the RadioButton size. */
+    size?: StandardSizes;
+}
+export declare const RadioButton: ({ className, error, hint, id, label, labelVisible, name, size, ...props }: RadioButtonProps) => JSX.Element;
+export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { useId } from 'react';
+import { FieldError } from '../FieldError/FieldError.js';
+import { FieldHint } from '../FieldHint/FieldHint.js';
+import { FieldLabel } from '../FieldLabel/FieldLabel.js';
+
+const RadioButton = ({ className, error = false, hint, id, label, labelVisible = true, name, size = "md", ...props }) => {
+    const internalId = useId();
+    id = id !== null && id !== void 0 ? id : internalId;
+    const componentProps = {
+        className: clsx("coop-radio-button", className),
+        "data-error": error ? "" : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        id,
+        name,
+        type: "radio",
+        ...props,
+    };
+    return (jsxs("div", { className: "coop-form-item", children: [jsxs("div", { className: "coop-radio-button-wrapper", children: [jsx("input", { ...componentProps }), label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
+};
+
+export { RadioButton, RadioButton as default };

package/dist/components/RadioButton/RadioButtonGroup.d.ts

@@ -0,0 +1,26 @@
+import type { FieldsetHTMLAttributes, JSX } from "react";
+import { FormFieldError, StandardSizes } from "../../types";
+export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the RadioButtonGroup error state.
+     *
+     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+     */
+    error?: FormFieldError;
+    /** **(Optional)** Specify the RadioButtonGroup hint.
+     *
+     * This text is rendered under the label to provide further guidance for users.
+     */
+    hint?: string;
+    /** **(Optional)** Specify the label for the RadioButtonGroup. This will be rendered as a fieldset legend. */
+    label?: string;
+    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+    labelVisible?: boolean;
+    /** **(Optional)** Specify the RadioButtonGroup size. */
+    size?: StandardSizes;
+}
+export declare const RadioButtonGroup: ({ children, className, error, hint, label, labelVisible, size, ...props }: RadioButtonGroupProps) => JSX.Element;
+export default RadioButtonGroup;

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { FieldError } from '../FieldError/FieldError.js';
+import { FieldHint } from '../FieldHint/FieldHint.js';
+
+const RadioButtonGroup = ({ children, className, error = false, hint, label, labelVisible = true, size = "md", ...props }) => {
+    const componentProps = {
+        className: clsx("coop-fieldset", "coop-radio-button-group", className),
+        "data-error": error ? "" : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        ...props,
+    };
+    const legendProps = {
+        className: clsx("coop-field-label", !labelVisible && "sr-only"),
+    };
+    return (jsxs("fieldset", { ...componentProps, children: [label && jsx("legend", { ...legendProps, children: label }), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), children] }));
+};
+
+export { RadioButtonGroup, RadioButtonGroup as default };

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1,5 @@
+import RadioButton from "./RadioButton";
+import RadioButtonGroup from "./RadioButtonGroup";
+export default RadioButton;
+export { RadioButton, RadioButtonGroup };
+export * from "./RadioButton";

package/dist/components/SearchBox/SearchBox.d.ts

@@ -11,17 +11,17 @@ export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     };
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** **(Optional)** Specify the Input id. Will be auto-generated if not set. */
+    /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
     id?: string;
     /** Specify the label displayed above the search field. Hidden by default, but visible to screen readers. */
     label: string;
     /** **(Optional)** Specify whether the label should be visible to humans or screenreaders. */
     labelVisible?: boolean;
-    /** **(Optional)** Specify the Input name, also used as the URL search parameter. Defaults to `query`. */
+    /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
     name?: string;
     /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
     onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
-    /** **(Optional)** Specify the Input placeholder text Do not use in place of a form label. */
+    /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
     placeholder?: string;
     /** **(Optional)** Specify the SearchBox size. */
     size?: StandardSizes;

package/dist/components/SearchBox/SearchBox.js

@@ -6,7 +6,7 @@ import React, { useState, useId, useCallback } from 'react';
 import { Button } from '../Button/Button.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 import { SearchIcon } from '../Icon/SearchIcon.js';
-import { Input } from '../Input/Input.js';
+import { TextInput } from '../TextInput/TextInput.js';
 
 const defaultButtonProps = {
     label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
@@ -54,7 +54,7 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
         type: "search",
         ...props,
     };
-    return (jsxs("form", { ...formProps, children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), jsxs("div", { className: "coop-search-box--inner", children: [jsx(Input, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    return (jsxs("form", { ...formProps, children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), jsxs("div", { className: "coop-search-box--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
 export { SearchBox, SearchBox as default };

package/dist/components/{Input/Input.d.ts → TextInput/TextInput.d.ts}

@@ -1,34 +1,38 @@
 import type { InputHTMLAttributes, JSX } from "react";
 import { FormFieldError, StandardSizes } from "../../../src/types";
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** **(Optional)** Specify the Input error state.
+    /** **(Optional)** Specify the TextInput error state.
      *
      * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
      */
     error?: FormFieldError;
-    /** **(Optional)** Specify the Input hint.
+    /** **(Optional)** Specify the TextInput hint.
      *
      * This text is rendered under the label to provide further guidance for users.
      */
     hint?: string;
-    /** **(Optional)** Specify the Input id. Will be auto-generated if not set. */
+    /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
     id?: string;
-    /** **(Optional)** Specify the Input label.
+    /** **(Optional)** Specify the TextInput label.
      *
      * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
     label?: string;
     /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
     labelVisible?: boolean;
-    /** Specify the Input name. */
+    /** Specify the TextInput name. */
     name: string;
-    /** **(Optional)** Specify the Input placeholder text. Do not use in place of a form label. */
+    /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
     placeholder?: string;
-    /** **(Optional)** Specify the Input size. */
+    /** **(Optional)** Specify the prefix. */
+    prefix?: string;
+    /** **(Optional)** Specify the TextInput size. */
     size?: StandardSizes;
-    /** **(Optional)** Specify the Input type. */
+    /** **(Optional)** Specify the suffix. */
+    suffix?: string;
+    /** **(Optional)** Specify the TextInput type. */
     type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
 }
-export declare const Input: ({ "aria-placeholder": ariaPlaceholder, className, error, hint, id, label, labelVisible, name, placeholder, size, type, ...props }: InputProps) => JSX.Element;
-export default Input;
+export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, error, hint, id, label, labelVisible, name, placeholder, prefix, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
+export default TextInput;

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { useId } from 'react';
+import { FieldError } from '../FieldError/FieldError.js';
+import { FieldHint } from '../FieldHint/FieldHint.js';
+import { FieldLabel } from '../FieldLabel/FieldLabel.js';
+
+const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, error = false, hint, id, label, labelVisible = true, name, placeholder, prefix, size = "md", suffix, type = "text", ...props }) => {
+    var _a;
+    const internalId = useId();
+    id = id !== null && id !== void 0 ? id : internalId;
+    const componentProps = {
+        "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
+        className: clsx("coop-text-input", className),
+        "data-error": error ? "" : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        id,
+        name,
+        placeholder,
+        type,
+        ...props,
+    };
+    return (jsxs("div", { className: "coop-form-item", children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] })] }));
+};
+
+export { TextInput, TextInput as default };

package/dist/components/TextInput/index.d.ts

@@ -0,0 +1,4 @@
+import TextInput from "./TextInput";
+export default TextInput;
+export { TextInput };
+export * from "./TextInput";

package/dist/components/TextInput/index.js

@@ -0,0 +1,5 @@
+import { TextInput } from './TextInput.js';
+
+
+
+export { TextInput, TextInput as default };

package/dist/components/Textarea/Textarea.d.ts

@@ -5,6 +5,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     className?: string;
     /** Specify the number of columns (characters per row) in the Textarea. Defaults to `30`. */
     cols?: number;
+    /** **(Optional)** Specify whether to show the character counter underneath the Textarea. */
+    counter?: boolean;
     /** **(Optional)** Specify whether the Textarea should allow more characters than its `maxLength` value.
      *
      * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit. When set to `true`, users will be blocked from typing once they hit the character limit. This can be an accessiblity anti-pattern, so only use this option when absolutely necessary.
@@ -38,10 +40,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     placeholder?: string;
     /** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
     rows?: number;
-    /** **(Optional)** Specify whether to show the remaining character count underneath the Textarea. */
-    showRemaining?: boolean;
     /** **(Optional)** Specify the Textarea size. */
     size?: StandardSizes;
 }
-export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, cutoff, error, hint, id, label, labelVisible, maxLength, name, onChange: userOnChange, placeholder, rows, showRemaining, size, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, error, hint, id, label, labelVisible, maxLength, name, onChange: userOnChange, placeholder, rows, size, ...props }: TextareaProps) => JSX.Element;
 export default Textarea;

package/dist/components/Textarea/Textarea.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId, useState } from 'react';
 import { useDebounce } from '../../hooks/useDebounce.js';
@@ -8,9 +8,9 @@ import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 
 const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
-    return `You have ${Math.abs(remaining)} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
+    return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, cutoff = false, error = false, hint, id, label, labelVisible = true, maxLength, name, onChange: userOnChange = undefined, placeholder, rows = 4, showRemaining = false, size = "md", ...props }) => {
+const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, error = false, hint, id, label, labelVisible = true, maxLength, name, onChange: userOnChange = undefined, placeholder, rows = 4, size = "md", ...props }) => {
     var _a;
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
@@ -32,10 +32,10 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
     const handleChange = (e) => {
         maxLength && e.target && setRemaining(maxLength - e.target.value.length);
     };
-    return (jsxs(Fragment, { children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("div", { className: "coop-field-control", children: jsx("textarea", { ...componentProps, onChange: (e) => {
-                        userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
-                        handleChange(e);
-                    } }) }), showRemaining && maxLength && remaining != null && debouncedRemaining != null && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": "" }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
+    return (jsxs("div", { className: "coop-form-item", children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("textarea", { ...componentProps, onChange: (e) => {
+                    userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
+                    handleChange(e);
+                } }), counter && maxLength && remaining != null && debouncedRemaining != null && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": "" }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
 };
 
 export { Textarea, Textarea as default };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from "./components/AlertBanner";
 export * from "./components/Author";
 export * from "./components/Button";
 export * from "./components/Card";
+export * from "./components/Checkbox";
 export * from "./components/Expandable";
 export * from "./components/Field";
 export * from "./components/FieldError";
@@ -9,8 +10,8 @@ export * from "./components/FieldHint";
 export * from "./components/FieldLabel";
 export * from "./components/Flourish";
 export * from "./components/Image";
-export * from "./components/Input";
 export * from "./components/Pill";
+export * from "./components/RadioButton";
 export * from "./components/RootSVG";
 export * from "./components/SearchBox";
 export * from "./components/Signpost";
@@ -18,3 +19,4 @@ export * from "./components/SkipNav";
 export * from "./components/Squircle";
 export * from "./components/Tag";
 export * from "./components/Textarea";
+export * from "./components/TextInput";

package/dist/index.js

@@ -2,6 +2,8 @@ export { AlertBanner } from './components/AlertBanner/AlertBanner.js';
 export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
 export { Card } from './components/Card/Card.js';
+export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { CheckboxGroup } from './components/Checkbox/CheckboxGroup.js';
 export { Expandable } from './components/Expandable/Expandable.js';
 export { Field } from './components/Field/Field.js';
 export { FieldError } from './components/FieldError/FieldError.js';
@@ -9,8 +11,9 @@ export { FieldHint } from './components/FieldHint/FieldHint.js';
 export { FieldLabel } from './components/FieldLabel/FieldLabel.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Image } from './components/Image/Image.js';
-export { Input } from './components/Input/Input.js';
 export { Pill } from './components/Pill/Pill.js';
+export { RadioButton } from './components/RadioButton/RadioButton.js';
+export { RadioButtonGroup } from './components/RadioButton/RadioButtonGroup.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
 export { SearchBox } from './components/SearchBox/SearchBox.js';
 export { Signpost } from './components/Signpost/Signpost.js';
@@ -18,3 +21,4 @@ export { SkipNav } from './components/SkipNav/SkipNav.js';
 export { Squircle } from './components/Squircle/Squircle.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Textarea } from './components/Textarea/Textarea.js';
+export { TextInput } from './components/TextInput/TextInput.js';

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export type StandardSizes = "sm" | "md" | "lg";
 export type FormFieldError = {
-    message: string;
+    message?: string;
     type?: string;
 } | boolean | null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -57,19 +57,19 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
     "@playwright/test": "^1.55.0",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-onboarding": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
+    "@storybook/addon-a11y": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-onboarding": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.12",
+    "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "clsx": "^2.1.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "serve": "^14.2.4",
-    "storybook": "^9.1.3"
+    "serve": "^14.2.5",
+    "storybook": "^9.1.5"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",
@@ -80,7 +80,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.30.0"
+    "@coopdigital/styles": "^0.31.1"
   },
-  "gitHead": "858102db210474fc31e01a2f4dc97551af2621d3"
+  "gitHead": "a88bc2694b91f0c180f02d39786a1323e6632254"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,81 @@
+import type { InputHTMLAttributes, JSX } from "react"
+
+import clsx from "clsx"
+import { useId } from "react"
+
+import { FormFieldError, StandardSizes } from "../../../src/types"
+import { FieldError } from "../FieldError"
+import { FieldHint } from "../FieldHint"
+import { FieldLabel } from "../FieldLabel"
+
+export interface CheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the Checkbox error state.
+   *
+   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+   */
+  error?: FormFieldError
+  /** **(Optional)** Specify the Checkbox hint.
+   *
+   * This text is rendered under the label to provide further guidance for users.
+   */
+  hint?: string
+  /** **(Optional)** Specify the Checkbox id. Will be auto-generated if not set. */
+  id?: string
+  /** **(Optional)** Specify the Checkbox label.
+   *
+   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
+  label: string
+  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+  labelVisible?: boolean
+  /** Specify the Checkbox name. */
+  name: string
+  /** **(Optional)** Specify the Checkbox size. */
+  size?: StandardSizes
+}
+
+export const Checkbox = ({
+  className,
+  error = false,
+  hint,
+  id,
+  label,
+  labelVisible = true,
+  name,
+  size = "md",
+  ...props
+}: CheckboxProps): JSX.Element => {
+  const internalId = useId()
+
+  id = id ?? internalId
+
+  const componentProps = {
+    className: clsx("coop-checkbox", className),
+    "data-error": error ? "" : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    id,
+    name,
+    type: "checkbox",
+    ...props,
+  }
+
+  return (
+    <div className="coop-form-item">
+      <div className="coop-checkbox-wrapper">
+        <input {...componentProps} />
+
+        {label && (
+          <FieldLabel htmlFor={id} isVisible={labelVisible}>
+            {label}
+          </FieldLabel>
+        )}
+        {hint && <FieldHint>{hint}</FieldHint>}
+      </div>
+      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
+    </div>
+  )
+}
+
+export default Checkbox

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,63 @@
+import type { FieldsetHTMLAttributes, JSX } from "react"
+
+import clsx from "clsx"
+
+import { FormFieldError, StandardSizes } from "../../../src/types"
+import { FieldError } from "../FieldError"
+import { FieldHint } from "../FieldHint"
+
+export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the CheckboxGroup error state.
+   *
+   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+   */
+  error?: FormFieldError
+  /** **(Optional)** Specify the CheckboxGroup hint.
+   *
+   * This text is rendered under the label to provide further guidance for users.
+   */
+  hint?: string
+  /** **(Optional)** Specify the label for the CheckboxGroup. This will be rendered as a fieldset legend. */
+  label?: string
+  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+  labelVisible?: boolean
+  /** **(Optional)** Specify the CheckboxGroup size. */
+  size?: StandardSizes
+}
+
+export const CheckboxGroup = ({
+  children,
+  className,
+  error = false,
+  hint,
+  label,
+  labelVisible = true,
+  size = "md",
+  ...props
+}: CheckboxGroupProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-fieldset", "coop-checkbox-group", className),
+    "data-error": error ? "" : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    ...props,
+  }
+
+  const legendProps = {
+    className: clsx("coop-field-label", !labelVisible && "sr-only"),
+  }
+
+  return (
+    <fieldset {...componentProps}>
+      {label && <legend {...legendProps}>{label}</legend>}
+      {hint && <FieldHint>{hint}</FieldHint>}
+      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
+      {children}
+    </fieldset>
+  )
+}
+
+export default CheckboxGroup

package/src/components/Checkbox/index.ts

@@ -0,0 +1,6 @@
+import Checkbox from "./Checkbox"
+import CheckboxGroup from "./CheckboxGroup"
+
+export default Checkbox
+export { Checkbox, CheckboxGroup }
+export * from "./Checkbox"

package/src/components/Field/Field.tsx

@@ -11,7 +11,7 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
 
 export const Field = ({ children, className, ...props }: FieldProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-field ", className),
+    className: clsx("coop-form-item ", className),
     ...props,
   }
   return <div {...componentProps}>{children}</div>

package/src/components/FieldHint/FieldHint.tsx

@@ -19,7 +19,7 @@ export const FieldHint = ({
     ...props,
   }
 
-  return children ? <p {...componentProps}>{children}</p> : null
+  return children ? <div {...componentProps}>{children}</div> : null
 }
 
 export default FieldHint

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,79 @@
+import clsx from "clsx"
+import { type InputHTMLAttributes, type JSX, useId } from "react"
+import { FormFieldError, StandardSizes } from "src/types"
+
+import { FieldError } from "../FieldError"
+import { FieldHint } from "../FieldHint"
+import { FieldLabel } from "../FieldLabel"
+
+export interface RadioButtonProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the RadioButton error state.
+   *
+   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+   */
+  error?: FormFieldError
+  /** **(Optional)** Specify the RadioButton hint.
+   *
+   * This text is rendered under the label to provide further guidance for users.
+   */
+  hint?: string
+  /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
+  id?: string
+  /** **(Optional)** Specify the RadioButton label.
+   *
+   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
+  label: string
+  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+  labelVisible?: boolean
+  /** Specify the RadioButton name. */
+  name: string
+  /** **(Optional)** Specify the RadioButton size. */
+  size?: StandardSizes
+}
+
+export const RadioButton = ({
+  className,
+  error = false,
+  hint,
+  id,
+  label,
+  labelVisible = true,
+  name,
+  size = "md",
+  ...props
+}: RadioButtonProps): JSX.Element => {
+  const internalId = useId()
+
+  id = id ?? internalId
+
+  const componentProps = {
+    className: clsx("coop-radio-button", className),
+    "data-error": error ? "" : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    id,
+    name,
+    type: "radio",
+    ...props,
+  }
+
+  return (
+    <div className="coop-form-item">
+      <div className="coop-radio-button-wrapper">
+        <input {...componentProps} />
+
+        {label && (
+          <FieldLabel htmlFor={id} isVisible={labelVisible}>
+            {label}
+          </FieldLabel>
+        )}
+        {hint && <FieldHint>{hint}</FieldHint>}
+      </div>
+      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
+    </div>
+  )
+}
+
+export default RadioButton

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -0,0 +1,63 @@
+import type { FieldsetHTMLAttributes, JSX } from "react"
+
+import clsx from "clsx"
+
+import { FormFieldError, StandardSizes } from "../../types"
+import { FieldError } from "../FieldError"
+import { FieldHint } from "../FieldHint"
+
+export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the RadioButtonGroup error state.
+   *
+   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+   */
+  error?: FormFieldError
+  /** **(Optional)** Specify the RadioButtonGroup hint.
+   *
+   * This text is rendered under the label to provide further guidance for users.
+   */
+  hint?: string
+  /** **(Optional)** Specify the label for the RadioButtonGroup. This will be rendered as a fieldset legend. */
+  label?: string
+  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+  labelVisible?: boolean
+  /** **(Optional)** Specify the RadioButtonGroup size. */
+  size?: StandardSizes
+}
+
+export const RadioButtonGroup = ({
+  children,
+  className,
+  error = false,
+  hint,
+  label,
+  labelVisible = true,
+  size = "md",
+  ...props
+}: RadioButtonGroupProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-fieldset", "coop-radio-button-group", className),
+    "data-error": error ? "" : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    ...props,
+  }
+
+  const legendProps = {
+    className: clsx("coop-field-label", !labelVisible && "sr-only"),
+  }
+
+  return (
+    <fieldset {...componentProps}>
+      {label && <legend {...legendProps}>{label}</legend>}
+      {hint && <FieldHint>{hint}</FieldHint>}
+      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
+      {children}
+    </fieldset>
+  )
+}
+
+export default RadioButtonGroup

package/src/components/RadioButton/index.ts

@@ -0,0 +1,6 @@
+import RadioButton from "./RadioButton"
+import RadioButtonGroup from "./RadioButtonGroup"
+
+export default RadioButton
+export { RadioButton, RadioButtonGroup }
+export * from "./RadioButton"

package/src/components/SearchBox/SearchBox.tsx

@@ -9,7 +9,7 @@ import { StandardSizes } from "../../../src/types"
 import { Button, type ButtonProps } from "../Button"
 import { FieldLabel } from "../FieldLabel"
 import { SearchIcon } from "../Icon"
-import Input, { InputProps } from "../Input"
+import TextInput, { TextInputProps } from "../TextInput"
 
 export interface SearchBoxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
@@ -19,17 +19,17 @@ export interface SearchBoxProps
   button?: Pick<ButtonProps, "className" | "loadingText"> & { label?: React.ReactNode }
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specify the Input id. Will be auto-generated if not set. */
+  /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
   id?: string
   /** Specify the label displayed above the search field. Hidden by default, but visible to screen readers. */
   label: string
   /** **(Optional)** Specify whether the label should be visible to humans or screenreaders. */
   labelVisible?: boolean
-  /** **(Optional)** Specify the Input name, also used as the URL search parameter. Defaults to `query`. */
+  /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
   name?: string
   /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
   onSubmit?: React.FormEventHandler<HTMLElement> | undefined
-  /** **(Optional)** Specify the Input placeholder text Do not use in place of a form label. */
+  /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
   placeholder?: string
   /** **(Optional)** Specify the SearchBox size. */
   size?: StandardSizes
@@ -112,8 +112,8 @@ export const SearchBox = ({
     id,
     name,
     placeholder,
-    size: size as keyof InputProps["size"],
-    type: "search" as keyof InputProps["type"],
+    size: size as keyof TextInputProps["size"],
+    type: "search" as keyof TextInputProps["type"],
     ...props,
   }
 
@@ -125,7 +125,7 @@ export const SearchBox = ({
         </FieldLabel>
       )}
       <div className="coop-search-box--inner">
-        <Input {...inputProps} />
+        <TextInput {...inputProps} />
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>

package/src/components/{Input/Input.tsx → TextInput/TextInput.tsx}

@@ -8,38 +8,43 @@ import { FieldError } from "../FieldError"
 import { FieldHint } from "../FieldHint"
 import { FieldLabel } from "../FieldLabel"
 
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+export interface TextInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specify the Input error state.
+  /** **(Optional)** Specify the TextInput error state.
    *
    * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
    */
   error?: FormFieldError
-  /** **(Optional)** Specify the Input hint.
+  /** **(Optional)** Specify the TextInput hint.
    *
    * This text is rendered under the label to provide further guidance for users.
    */
   hint?: string
-  /** **(Optional)** Specify the Input id. Will be auto-generated if not set. */
+  /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the Input label.
+  /** **(Optional)** Specify the TextInput label.
    *
    * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
   label?: string
   /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
   labelVisible?: boolean
-  /** Specify the Input name. */
+  /** Specify the TextInput name. */
   name: string
-  /** **(Optional)** Specify the Input placeholder text. Do not use in place of a form label. */
+  /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
   placeholder?: string
-  /** **(Optional)** Specify the Input size. */
+  /** **(Optional)** Specify the prefix. */
+  prefix?: string
+  /** **(Optional)** Specify the TextInput size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the Input type. */
+  /** **(Optional)** Specify the suffix. */
+  suffix?: string
+  /** **(Optional)** Specify the TextInput type. */
   type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url"
 }
 
-export const Input = ({
+export const TextInput = ({
   "aria-placeholder": ariaPlaceholder,
   className,
   error = false,
@@ -49,17 +54,19 @@ export const Input = ({
   labelVisible = true,
   name,
   placeholder,
+  prefix,
   size = "md",
+  suffix,
   type = "text",
   ...props
-}: InputProps): JSX.Element => {
+}: TextInputProps): JSX.Element => {
   const internalId = useId()
 
   id = id ?? internalId
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    className: clsx("coop-input", className),
+    className: clsx("coop-text-input", className),
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     id,
@@ -70,7 +77,7 @@ export const Input = ({
   }
 
   return (
-    <>
+    <div className="coop-form-item">
       {label && (
         <FieldLabel htmlFor={id} isVisible={labelVisible}>
           {label}
@@ -80,11 +87,13 @@ export const Input = ({
       {hint && <FieldHint>{hint}</FieldHint>}
 
       {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-      <div className="coop-field-control">
+      <div className="coop-text-input-wrapper">
+        {prefix && <span className="coop-text-input--prefix">{prefix}</span>}
         <input {...componentProps} />
+        {suffix && <span className="coop-text-input--suffix">{suffix}</span>}
       </div>
-    </>
+    </div>
   )
 }
 
-export default Input
+export default TextInput

package/src/components/TextInput/index.ts

@@ -0,0 +1,5 @@
+import TextInput from "./TextInput"
+
+export default TextInput
+export { TextInput }
+export * from "./TextInput"

package/src/components/Textarea/Textarea.tsx

@@ -12,7 +12,7 @@ import { FieldLabel } from "../FieldLabel"
 const DEBOUNCE_DELAY = 750
 
 const charCountMessage = (remaining: number) => {
-  return `You have ${Math.abs(remaining)} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`
+  return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`
 }
 
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -20,6 +20,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   className?: string
   /** Specify the number of columns (characters per row) in the Textarea. Defaults to `30`. */
   cols?: number
+  /** **(Optional)** Specify whether to show the character counter underneath the Textarea. */
+  counter?: boolean
   /** **(Optional)** Specify whether the Textarea should allow more characters than its `maxLength` value.
    *
    * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit. When set to `true`, users will be blocked from typing once they hit the character limit. This can be an accessiblity anti-pattern, so only use this option when absolutely necessary.
@@ -53,8 +55,6 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   placeholder?: string
   /** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
   rows?: number
-  /** **(Optional)** Specify whether to show the remaining character count underneath the Textarea. */
-  showRemaining?: boolean
   /** **(Optional)** Specify the Textarea size. */
   size?: StandardSizes
 }
@@ -63,6 +63,7 @@ export const Textarea = ({
   "aria-placeholder": ariaPlaceholder,
   className,
   cols = 30,
+  counter = false,
   cutoff = false,
   error = false,
   hint,
@@ -74,7 +75,6 @@ export const Textarea = ({
   onChange: userOnChange = undefined,
   placeholder,
   rows = 4,
-  showRemaining = false,
   size = "md",
   ...props
 }: TextareaProps): JSX.Element => {
@@ -104,7 +104,7 @@ export const Textarea = ({
   }
 
   return (
-    <>
+    <div className="coop-form-item">
       {label && (
         <FieldLabel htmlFor={id} isVisible={labelVisible}>
           {label}
@@ -114,17 +114,16 @@ export const Textarea = ({
       {hint && <FieldHint>{hint}</FieldHint>}
 
       {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-      <div className="coop-field-control">
-        <textarea
-          {...componentProps}
-          onChange={(e) => {
-            userOnChange?.(e)
-            handleChange(e)
-          }}
-        ></textarea>
-      </div>
-
-      {showRemaining && maxLength && remaining != null && debouncedRemaining != null && (
+
+      <textarea
+        {...componentProps}
+        onChange={(e) => {
+          userOnChange?.(e)
+          handleChange(e)
+        }}
+      ></textarea>
+
+      {counter && maxLength && remaining != null && debouncedRemaining != null && (
         <>
           <small
             aria-hidden="true"
@@ -138,7 +137,7 @@ export const Textarea = ({
           </span>
         </>
       )}
-    </>
+    </div>
   )
 }
 

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "./components/AlertBanner"
 export * from "./components/Author"
 export * from "./components/Button"
 export * from "./components/Card"
+export * from "./components/Checkbox"
 export * from "./components/Expandable"
 export * from "./components/Field"
 export * from "./components/FieldError"
@@ -9,8 +10,8 @@ export * from "./components/FieldHint"
 export * from "./components/FieldLabel"
 export * from "./components/Flourish"
 export * from "./components/Image"
-export * from "./components/Input"
 export * from "./components/Pill"
+export * from "./components/RadioButton"
 export * from "./components/RootSVG"
 export * from "./components/SearchBox"
 export * from "./components/Signpost"
@@ -18,3 +19,4 @@ export * from "./components/SkipNav"
 export * from "./components/Squircle"
 export * from "./components/Tag"
 export * from "./components/Textarea"
+export * from "./components/TextInput"

package/src/types/index.ts

@@ -1,3 +1,3 @@
 export type StandardSizes = "sm" | "md" | "lg"
 
-export type FormFieldError = { message: string; type?: string } | boolean | null | undefined
+export type FormFieldError = { message?: string; type?: string } | boolean | null | undefined

package/dist/components/Input/Input.js

@@ -1,26 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import { useId } from 'react';
-import { FieldError } from '../FieldError/FieldError.js';
-import { FieldHint } from '../FieldHint/FieldHint.js';
-import { FieldLabel } from '../FieldLabel/FieldLabel.js';
-
-const Input = ({ "aria-placeholder": ariaPlaceholder, className, error = false, hint, id, label, labelVisible = true, name, placeholder, size = "md", type = "text", ...props }) => {
-    var _a;
-    const internalId = useId();
-    id = id !== null && id !== void 0 ? id : internalId;
-    const componentProps = {
-        "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
-        className: clsx("coop-input", className),
-        "data-error": error ? "" : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
-        id,
-        name,
-        placeholder,
-        type,
-        ...props,
-    };
-    return (jsxs(Fragment, { children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("div", { className: "coop-field-control", children: jsx("input", { ...componentProps }) })] }));
-};
-
-export { Input, Input as default };

package/dist/components/Input/index.d.ts

@@ -1,4 +0,0 @@
-import Input from "./Input";
-export default Input;
-export { Input };
-export * from "./Input";

package/dist/components/Input/index.js

@@ -1,5 +0,0 @@
-import { Input } from './Input.js';
-
-
-
-export { Input, Input as default };

package/src/components/Input/index.ts

@@ -1,5 +0,0 @@
-import Input from "./Input"
-
-export default Input
-export { Input }
-export * from "./Input"