@coopdigital/react 0.31.0 → 0.33.0

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+export declare const Field: ({ children, className, ...props }: FieldProps) => JSX.Element;
+export default Field;

package/dist/components/Field/Field.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const Field = ({ children, className, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field ", className),
+        ...props,
+    };
+    return jsx("div", { ...componentProps, children: children });
+};
+
+export { Field, Field as default };

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

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

package/dist/components/FieldError/FieldError.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface FieldErrorProps extends HTMLAttributes<HTMLSpanElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+export declare const FieldError: ({ children, className, ...props }: FieldErrorProps) => JSX.Element;
+export default FieldError;

package/dist/components/FieldError/FieldError.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const FieldError = ({ children, className, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field-error ", className),
+        ...props,
+    };
+    return jsx("span", { ...componentProps, children: children });
+};
+
+export { FieldError, FieldError as default };

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

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

package/dist/components/FieldHint/FieldHint.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface FieldHintProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Main content inside the component. It can be any valid JSX or string. */
+    children: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+export declare const FieldHint: ({ children, className, ...props }: FieldHintProps) => JSX.Element | null;
+export default FieldHint;

package/dist/components/FieldHint/FieldHint.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const FieldHint = ({ children, className, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field-hint ", className),
+        ...props,
+    };
+    return children ? jsx("p", { ...componentProps, children: children }) : null;
+};
+
+export { FieldHint, FieldHint as default };

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

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

package/dist/components/FieldLabel/FieldLabel.d.ts

@@ -0,0 +1,13 @@
+import type { JSX, LabelHTMLAttributes, ReactNode } from "react";
+export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** Specify the field ID to connect FieldLabel to the field itself. */
+    htmlFor: string;
+    /** **(Optional)** Specify whether the FieldLabel is visible for humans or only for screen readers. */
+    isVisible?: boolean;
+}
+export declare const FieldLabel: ({ children, className, htmlFor, isVisible, ...props }: FieldLabelProps) => JSX.Element | null;
+export default FieldLabel;

package/dist/components/FieldLabel/FieldLabel.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const FieldLabel = ({ children, className, htmlFor, isVisible = true, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field-label ", isVisible ? "" : "sr-only", className),
+        htmlFor,
+        ...props,
+    };
+    return children && htmlFor ? jsx("label", { ...componentProps, children: children }) : null;
+};
+
+export { FieldLabel, FieldLabel as default };

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

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

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

@@ -0,0 +1,31 @@
+import type { InputHTMLAttributes, JSX } from "react";
+import { FormFieldError, StandardSizes } from "../../../src/types";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the Input error. */
+    error?: FormFieldError;
+    /** **(Optional)** Specify the Input 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. */
+    id?: string;
+    /** **(Optional)** Specify the Input 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. */
+    name: string;
+    /** **(Optional)** Specify the Input placeholder text. Do not use in place of a form label. */
+    placeholder?: string;
+    /** **(Optional)** Specify the Input size. */
+    size?: StandardSizes;
+    /** **(Optional)** Specify the Input 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;

package/dist/components/Input/Input.js

@@ -0,0 +1,26 @@
+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

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

package/dist/components/Input/index.js

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

package/dist/components/RootSVG/RootSVG.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const RootSVG = () => {
     return (jsx("svg", { height: "0", style: {
-            clip: "rect(0,0,0,0)}",
+            clip: "rect(0,0,0,0)",
             clipPath: "inset(50%)",
             overflow: "hidden",
             position: "absolute",

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

@@ -1,32 +1,32 @@
-import React, { HTMLAttributes } from "react";
-import { type JSX } from "react";
-import { StandardSizes } from "src/types";
+import type { InputHTMLAttributes, JSX } from "react";
+import React from "react";
+import { StandardSizes } from "../../../src/types";
 import { type ButtonProps } from "../Button";
-export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
+export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
     action?: string;
-    /** **(Optional)** Specify whether or not to enable autocomplete on the input field. Default: `off`. */
-    autoComplete?: "off" | "on";
     /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
     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. */
+    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 name of the input element, also used as the URL search parameter. Defaults to `query`. */
+    /** **(Optional)** Specify the Input 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 placeholder text for the search field. Do not in place of a form label. */
+    /** **(Optional)** Specify the Input placeholder text Do not use in place of a form label. */
     placeholder?: string;
     /** **(Optional)** Specify the SearchBox size. */
     size?: StandardSizes;
     /** **(Optional)** Specify the SearchBox variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }
-export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
+export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -2,17 +2,21 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import React, { useState, useCallback, useId } from 'react';
+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';
 
 const defaultButtonProps = {
     label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
     loadingText: "",
 };
-const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
+const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
     var _a, _b;
     const [isPending, setIsPending] = useState(false);
+    const internalId = useId();
+    id = id !== null && id !== void 0 ? id : internalId;
     const handleSubmit = useCallback(async (event) => {
         event.preventDefault();
         if (isPending || !onSubmit)
@@ -25,11 +29,10 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
             setIsPending(false);
         }
     }, [onSubmit, isPending]);
-    const id = useId();
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
         className: clsx("coop-search-box", className),
-        "data-size": size.length && size !== "md" ? size : undefined,
+        //"data-size": size && size !== "md" ? size : undefined,
         "data-variant": variant.length && variant !== "green" ? variant : undefined,
         onSubmit: onSubmit ? handleSubmit : undefined,
     };
@@ -47,10 +50,11 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
         id,
         name,
         placeholder,
+        size: size,
         type: "search",
         ...props,
     };
-    return (jsxs("form", { ...formProps, children: [jsx("label", { className: labelVisible ? "" : "sr-only", htmlFor: id, 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(Input, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
 export { SearchBox, SearchBox as default };

package/dist/index.d.ts

@@ -3,8 +3,13 @@ export * from "./components/Author";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Expandable";
+export * from "./components/Field";
+export * from "./components/FieldError";
+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/RootSVG";
 export * from "./components/SearchBox";

package/dist/index.js

@@ -3,8 +3,13 @@ export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
 export { Card } from './components/Card/Card.js';
 export { Expandable } from './components/Expandable/Expandable.js';
+export { Field } from './components/Field/Field.js';
+export { FieldError } from './components/FieldError/FieldError.js';
+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 { RootSVG } from './components/RootSVG/RootSVG.js';
 export { SearchBox } from './components/SearchBox/SearchBox.js';

package/dist/types/index.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -56,20 +56,20 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@playwright/test": "^1.54.2",
-    "@storybook/addon-a11y": "^9.1.2",
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/addon-onboarding": "^9.1.2",
-    "@storybook/react-vite": "^9.1.2",
-    "@testing-library/jest-dom": "^6.7.0",
+    "@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",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.12",
+    "@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.2"
+    "storybook": "^9.1.3"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",
@@ -80,7 +80,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.27.0"
+    "@coopdigital/styles": "^0.29.0"
   },
-  "gitHead": "fce3f35446116384dabdd8553404d9e933261264"
+  "gitHead": "b7f3df204e1f4e38b3c978af0506243b30365b4a"
 }

package/src/components/Field/Field.tsx

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react"
+
+import clsx from "clsx"
+
+export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+export const Field = ({ children, className, ...props }: FieldProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-field ", className),
+    ...props,
+  }
+  return <div {...componentProps}>{children}</div>
+}
+
+export default Field

package/src/components/Field/index.ts

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

package/src/components/FieldError/FieldError.tsx

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react"
+
+import clsx from "clsx"
+
+export interface FieldErrorProps extends HTMLAttributes<HTMLSpanElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+export const FieldError = ({ children, className, ...props }: FieldErrorProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-field-error ", className),
+    ...props,
+  }
+  return <span {...componentProps}>{children}</span>
+}
+
+export default FieldError

package/src/components/FieldError/index.ts

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

package/src/components/FieldHint/FieldHint.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react"
+
+import clsx from "clsx"
+
+export interface FieldHintProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Main content inside the component. It can be any valid JSX or string. */
+  children: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+export const FieldHint = ({
+  children,
+  className,
+  ...props
+}: FieldHintProps): JSX.Element | null => {
+  const componentProps = {
+    className: clsx("coop-field-hint ", className),
+    ...props,
+  }
+
+  return children ? <p {...componentProps}>{children}</p> : null
+}
+
+export default FieldHint

package/src/components/FieldHint/index.ts

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

package/src/components/FieldLabel/FieldLabel.tsx

@@ -0,0 +1,31 @@
+import type { JSX, LabelHTMLAttributes, ReactNode } from "react"
+
+import clsx from "clsx"
+
+export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** Specify the field ID to connect FieldLabel to the field itself. */
+  htmlFor: string
+  /** **(Optional)** Specify whether the FieldLabel is visible for humans or only for screen readers. */
+  isVisible?: boolean
+}
+
+export const FieldLabel = ({
+  children,
+  className,
+  htmlFor,
+  isVisible = true,
+  ...props
+}: FieldLabelProps): JSX.Element | null => {
+  const componentProps = {
+    className: clsx("coop-field-label ", isVisible ? "" : "sr-only", className),
+    htmlFor,
+    ...props,
+  }
+  return children && htmlFor ? <label {...componentProps}>{children}</label> : null
+}
+
+export default FieldLabel

package/src/components/FieldLabel/index.ts

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

package/src/components/Input/Input.tsx

@@ -0,0 +1,87 @@
+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 InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the Input error. */
+  error?: FormFieldError
+  /** **(Optional)** Specify the Input 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. */
+  id?: string
+  /** **(Optional)** Specify the Input 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. */
+  name: string
+  /** **(Optional)** Specify the Input placeholder text. Do not use in place of a form label. */
+  placeholder?: string
+  /** **(Optional)** Specify the Input size. */
+  size?: StandardSizes
+  /** **(Optional)** Specify the Input type. */
+  type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url"
+}
+
+export const Input = ({
+  "aria-placeholder": ariaPlaceholder,
+  className,
+  error = false,
+  hint,
+  id,
+  label,
+  labelVisible = true,
+  name,
+  placeholder,
+  size = "md",
+  type = "text",
+  ...props
+}: InputProps): JSX.Element => {
+  const internalId = useId()
+
+  id = id ?? internalId
+
+  const componentProps = {
+    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
+    className: clsx("coop-input", className),
+    "data-error": error ? "" : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    id,
+    name,
+    placeholder,
+    type,
+    ...props,
+  }
+
+  return (
+    <>
+      {label && (
+        <FieldLabel htmlFor={id} isVisible={labelVisible}>
+          {label}
+        </FieldLabel>
+      )}
+
+      {hint && <FieldHint>{hint}</FieldHint>}
+
+      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
+      <div className="coop-field-control">
+        <input {...componentProps} />
+      </div>
+    </>
+  )
+}
+
+export default Input

package/src/components/Input/index.ts

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

package/src/components/RootSVG/RootSVG.tsx

@@ -3,7 +3,7 @@ export const RootSVG = () => {
     <svg
       height="0"
       style={{
-        clip: "rect(0,0,0,0)}",
+        clip: "rect(0,0,0,0)",
         clipPath: "inset(50%)",
         overflow: "hidden",
         position: "absolute",

package/src/components/SearchBox/SearchBox.tsx

@@ -1,31 +1,35 @@
 "use client"
 
+import type { InputHTMLAttributes, JSX } from "react"
+
 import clsx from "clsx"
-import React, { HTMLAttributes, useCallback, useId, useState } from "react"
-import { type JSX } from "react"
-import { StandardSizes } from "src/types"
+import React, { useCallback, useId, useState } from "react"
 
+import { StandardSizes } from "../../../src/types"
 import { Button, type ButtonProps } from "../Button"
+import { FieldLabel } from "../FieldLabel"
 import { SearchIcon } from "../Icon"
+import Input, { InputProps } from "../Input"
 
-export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
+export interface SearchBoxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
-  /** **(Optional)** Specify whether or not to enable autocomplete on the input field. Default: `off`. */
-  autoComplete?: "off" | "on"
   /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
   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. */
+  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 name of the input element, also used as the URL search parameter. Defaults to `query`. */
+  /** **(Optional)** Specify the Input 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 placeholder text for the search field. Do not in place of a form label. */
+  /** **(Optional)** Specify the Input placeholder text Do not use in place of a form label. */
   placeholder?: string
   /** **(Optional)** Specify the SearchBox size. */
   size?: StandardSizes
@@ -53,6 +57,7 @@ export const SearchBox = ({
   autoComplete = "off",
   button = defaultButtonProps,
   className,
+  id,
   label,
   labelVisible = false,
   name = "query",
@@ -63,6 +68,9 @@ export const SearchBox = ({
   ...props
 }: SearchBoxProps): JSX.Element => {
   const [isPending, setIsPending] = useState(false)
+  const internalId = useId()
+
+  id = id ?? internalId
 
   const handleSubmit = useCallback(
     async (event: React.FormEvent<HTMLFormElement>) => {
@@ -81,12 +89,10 @@ export const SearchBox = ({
     [onSubmit, isPending]
   )
 
-  const id = useId()
-
   const formProps = {
     action: action ?? undefined,
     className: clsx("coop-search-box", className),
-    "data-size": size.length && size !== "md" ? size : undefined,
+    //"data-size": size && size !== "md" ? size : undefined,
     "data-variant": variant.length && variant !== "green" ? variant : undefined,
     onSubmit: onSubmit ? handleSubmit : undefined,
   }
@@ -106,17 +112,20 @@ export const SearchBox = ({
     id,
     name,
     placeholder,
-    type: "search",
+    size: size as keyof InputProps["size"],
+    type: "search" as keyof InputProps["type"],
     ...props,
   }
 
   return (
     <form {...formProps}>
-      <label className={labelVisible ? "" : "sr-only"} htmlFor={id}>
-        {label}
-      </label>
+      {label && (
+        <FieldLabel htmlFor={id} isVisible={labelVisible}>
+          {label}
+        </FieldLabel>
+      )}
       <div className="coop-search-box--inner">
-        <input {...inputProps}></input>
+        <Input {...inputProps} />
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>

package/src/index.ts

@@ -3,8 +3,13 @@ export * from "./components/Author"
 export * from "./components/Button"
 export * from "./components/Card"
 export * from "./components/Expandable"
+export * from "./components/Field"
+export * from "./components/FieldError"
+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/RootSVG"
 export * from "./components/SearchBox"

package/src/types/index.ts

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