@uktrade/react-component-library 0.12.0 → 0.14.0

package/dist/components/ApiQuery/ApiCreateHooks.d.ts

@@ -1,7 +1,7 @@
 import type { PathsWithMethod } from "openapi-typescript-helpers";
 import { createApiClient } from "./ApiCreateClient";
 export declare function createApiHooks<Paths extends {}>(client: ReturnType<typeof createApiClient<Paths>>): {
-    get: <P extends PathsWithMethod<Paths, "get">>(path: P, params?: any) => {
+    get: <P extends PathsWithMethod<Paths, "get">>(path: P, input?: any) => {
         query: import("@tanstack/react-query").UseQueryResult<any, Error>;
         state: {
             data: any;
@@ -11,7 +11,7 @@ export declare function createApiHooks<Paths extends {}>(client: ReturnType<type
             refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<any, Error>>;
         };
     };
-    post: <P extends PathsWithMethod<Paths, "post">>(path: P, params?: any) => {
+    post: <P extends PathsWithMethod<Paths, "post">>(path: P, input?: any) => {
         query: import("@tanstack/react-query").UseQueryResult<any, Error>;
         state: {
             data: any;

package/dist/components/ApiQuery/ApiCreateHooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiCreateHooks.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiCreateHooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,wBAAgB,cAAc,CAAC,KAAK,SAAS,EAAE,EAC7C,MAAM,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;UAOzC,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QACrC,CAAC,WACE,GAAG;;;;;;;;;;WAYP,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QACvC,CAAC,WACE,GAAG;;;;;;;;;;mBAYC,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;;;;;;;;;;kBAQlD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;oBAQ9C,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;;;;;;;;;;qBAQjD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC;;;;;;;;;;EAQvE"}
+{"version":3,"file":"ApiCreateHooks.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiCreateHooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,wBAAgB,cAAc,CAAC,KAAK,SAAS,EAAE,EAC7C,MAAM,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;UAQzC,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QACrC,CAAC,UACC,GAAG;;;;;;;;;;WAYN,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QACvC,CAAC,UACC,GAAG;;;;;;;;;;mBAaE,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;;;;;;;;;;kBAQlD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;oBAQ9C,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;;;;;;;;;;qBAQjD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC;;;;;;;;;;EAQvE"}

package/dist/components/ApiQuery/ApiCreateHooks.js

@@ -1,54 +1,58 @@
 "use client";
 import { createApiClient } from "./ApiCreateClient";
 import { useApi, useApiMutation } from "./ApiProvider";
+// API hook factory that converts a typed OpenAPI client into React hooks (`useApi` and `useApiMutation`) that the UI can use.
+// Provides a simple interface for making API calls and handling loading and error states in your React components.
 export function createApiHooks(client) {
     // ToDo: Generalize this (params?: any) and fight openapi-fetch’s internal generics to get correct types from PathsWithMethod. Same for the mutation methods.
     // type GetParams<P extends PathsWithMethod<Paths, "get">> =
     //   Parameters<typeof client.GET<P>>[1];
+    // Using useQuery
     return {
-        get: (path, params) => {
-            return useApi(["get", path, JSON.stringify(params ?? {})], async () => {
-                const res = await client.GET(path, params);
+        get: (path, input) => {
+            return useApi(["get", path, JSON.stringify(input ?? {})], async () => {
+                const res = await client.GET(path, input);
                 if (res.error)
                     throw res.error;
                 return res.data;
             });
         },
-        post: (path, params) => {
-            return useApi(["post", path, JSON.stringify(params ?? {})], async () => {
-                const res = await client.POST(path, params);
+        post: (path, input) => {
+            return useApi(["post", path, JSON.stringify(input ?? {})], async () => {
+                const res = await client.POST(path, input);
                 if (res.error)
                     throw res.error;
                 return res.data;
             });
         },
+        // Using useMutation
         postMutation: (path) => {
-            return useApiMutation(async (params) => {
-                const res = await client.POST(path, params);
+            return useApiMutation(async (input) => {
+                const res = await client.POST(path, input);
                 if (res.error)
                     throw res.error;
                 return res.data;
             });
         },
         putMutation: (path) => {
-            return useApiMutation(async (params) => {
-                const res = await client.PUT(path, params);
+            return useApiMutation(async (input) => {
+                const res = await client.PUT(path, input);
                 if (res.error)
                     throw res.error;
                 return res.data;
             });
         },
         patchMutation: (path) => {
-            return useApiMutation(async (params) => {
-                const res = await client.PATCH(path, params);
+            return useApiMutation(async (input) => {
+                const res = await client.PATCH(path, input);
                 if (res.error)
                     throw res.error;
                 return res.data;
             });
         },
         deleteMutation: (path) => {
-            return useApiMutation(async (params) => {
-                const res = await client.DELETE(path, params);
+            return useApiMutation(async (input) => {
+                const res = await client.DELETE(path, input);
                 if (res.error)
                     throw res.error;
                 return res.data;

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+type LegendAs = "h1" | "h2" | "h3" | "h4";
+type LegendSize = "s" | "m" | "l" | "xl";
+interface CheckboxOption {
+    id: string;
+    value: string;
+    label: ReactNode;
+    checked?: boolean;
+}
+interface CheckboxGroupProps {
+    legend: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    options: CheckboxOption[];
+    name: string;
+    legendAs?: LegendAs;
+    legendSize?: LegendSize;
+    checkboxSize?: "small" | "default";
+}
+export declare const CheckboxGroup: ({ legend, hint, error, options, name, legendAs, legendSize, checkboxSize }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CheckBoxGroupInput.d.ts.map

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoxGroupInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEzC,UAAU,cAAc;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,kBAAkB;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,GAAI,4EAS3B,kBAAkB,4CA+DpB,CAAC"}

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createElement } from "react";
+export const CheckboxGroup = ({ legend, hint, error, options, name, legendAs = "h4", legendSize = "m", checkboxSize = "default" }) => {
+    const hasError = Boolean(error);
+    const errorId = hasError ? `${name}-error` : undefined;
+    const legendHeading = createElement(legendAs, { className: "govuk-fieldset__heading" }, legend);
+    return (_jsx("div", { className: clsx("govuk-form-group", {
+            "govuk-form-group--error": hasError,
+        }), children: _jsxs("fieldset", { className: "govuk-fieldset", "aria-describedby": errorId, children: [_jsx("legend", { className: clsx("govuk-fieldset__legend", {
+                        [`govuk-fieldset__legend--${legendSize}`]: legendSize !== "m",
+                    }), children: legendHeading }), hint && _jsx("div", { className: "govuk-hint", children: hint }), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsx("div", { className: clsx("govuk-checkboxes", {
+                        "govuk-checkboxes--small": checkboxSize === "small",
+                    }), "data-module": "govuk-checkboxes", children: options.map((opt) => (_jsxs("div", { className: "govuk-checkboxes__item", children: [_jsx("input", { className: "govuk-checkboxes__input", id: opt.id, name: name, type: "checkbox", value: opt.value, defaultChecked: opt.checked }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label })] }, opt.id))) })] }) }));
+};

package/dist/components/Inputs/SelectInput/SelectInput.d.ts

@@ -0,0 +1,21 @@
+import type { JSX, ReactNode } from "react";
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type LabelSize = "s" | "m" | "l" | "xl";
+type SelectProps = Omit<JSX.IntrinsicElements["select"], "id">;
+interface SelectInputProps extends SelectProps {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: string;
+    labelAs?: LabelAs;
+    labelSize?: LabelSize;
+    className?: string;
+}
+export declare const SelectInput: ({ id, label, hint, error, options, placeholder, labelAs, labelSize, className, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectInput.d.ts.map

package/dist/components/Inputs/SelectInput/SelectInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACxC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AAE/D,UAAU,gBAAiB,SAAQ,WAAW;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,2FAWzB,gBAAgB,4CAoElB,CAAC"}

package/dist/components/Inputs/SelectInput/SelectInput.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createElement } from "react";
+export const SelectInput = ({ id, label, hint, error, options, placeholder, labelAs, labelSize = "m", className, ...props }) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const ariaDescribedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+    const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
+            [`govuk-label--${labelSize}`]: labelSize !== "m",
+        }), children: label }));
+    return (_jsxs("div", { className: clsx("govuk-form-group", {
+            "govuk-form-group--error": hasError,
+        }), children: [labelAs
+                ? createElement(labelAs, { className: "govuk-label-wrapper" }, labelElement)
+                : labelElement, hint && (_jsx("div", { id: hintId, className: "govuk-hint", children: hint })), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsxs("select", { id: id, className: clsx("govuk-select", { "govuk-select--error": hasError }, className), "aria-describedby": ariaDescribedBy, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, hidden: true, children: placeholder })), options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })] }));
+};

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

@@ -0,0 +1,17 @@
+import type { JSX, ReactNode } from "react";
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type InputProps = Omit<JSX.IntrinsicElements["input"], "id">;
+interface TextInputProps extends InputProps {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    width?: "10" | "20" | "30";
+    labelSize?: "s" | "m" | "l" | "xl";
+    labelAs?: LabelAs;
+    placeholder?: string;
+    suffix?: ReactNode;
+}
+export declare const TextInput: ({ id, label, hint, error, width, labelSize, labelAs, className, placeholder, suffix, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/Inputs/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;AAE7D,UAAU,cAAe,SAAQ,UAAU;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GAAI,iGAYvB,cAAc,4CAuEhB,CAAC"}

package/dist/components/Inputs/TextInput/TextInput.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createElement } from "react";
+export const TextInput = ({ id, label, hint, error, width = "20", labelSize = "m", labelAs, className, placeholder, suffix, ...props }) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+    const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
+            [`govuk-label--${labelSize}`]: labelSize !== "m",
+        }), children: label }));
+    const input = (_jsx("input", { id: id, className: clsx("govuk-input", `govuk-input--width-${width}`, className), "aria-invalid": hasError, "aria-describedby": describedBy, placeholder: placeholder, ...props }));
+    return (_jsxs("div", { className: clsx("govuk-form-group", {
+            "govuk-form-group--error": hasError,
+        }), children: [labelAs
+                ? createElement(labelAs, { className: "govuk-label-wrapper" }, labelElement)
+                : labelElement, hint && (_jsx("div", { id: hintId, className: "govuk-hint", children: hint })), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), suffix ? (_jsxs("div", { className: "govuk-input__wrapper", children: [input, _jsx("div", { className: "govuk-input__suffix", "aria-hidden": "true", children: suffix })] })) : (input)] }));
+};

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

@@ -0,0 +1,4 @@
+export * from "./TextInput/TextInput";
+export * from "./CheckBoxesInput/CheckBoxGroupInput";
+export * from "./SelectInput/SelectInput";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Inputs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sCAAsC,CAAC;AACrD,cAAc,2BAA2B,CAAC"}

package/dist/components/Inputs/index.js

@@ -0,0 +1,3 @@
+export * from "./TextInput/TextInput";
+export * from "./CheckBoxesInput/CheckBoxGroupInput";
+export * from "./SelectInput/SelectInput";

package/dist/index.d.ts

@@ -11,4 +11,5 @@ export * from "./components/BackLink";
 export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
+export * from "./components/Inputs";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -11,3 +11,4 @@ export * from "./components/BackLink";
 export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
+export * from "./components/Inputs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/ApiQuery/ApiCreateHooks.tsx

@@ -5,6 +5,8 @@ import type { PathsWithMethod } from "openapi-typescript-helpers";
 import { createApiClient } from "./ApiCreateClient";
 import { useApi, useApiMutation } from "./ApiProvider";
 
+// API hook factory that converts a typed OpenAPI client into React hooks (`useApi` and `useApiMutation`) that the UI can use.
+// Provides a simple interface for making API calls and handling loading and error states in your React components.
 export function createApiHooks<Paths extends {}>(
   client: ReturnType<typeof createApiClient<Paths>>
 ) {
@@ -12,15 +14,16 @@ export function createApiHooks<Paths extends {}>(
   // type GetParams<P extends PathsWithMethod<Paths, "get">> =
   //   Parameters<typeof client.GET<P>>[1];
 
+  // Using useQuery
   return {
     get: <P extends PathsWithMethod<Paths, "get">>(
       path: P,
-      params?: any
+      input?: any
     ) => {
       return useApi(
-        ["get", path, JSON.stringify(params ?? {})],
+        ["get", path, JSON.stringify(input ?? {})],
         async () => {
-          const res = await client.GET(path, params);
+          const res = await client.GET(path, input);
           if (res.error) throw res.error;
           return res.data;
         }
@@ -29,45 +32,46 @@ export function createApiHooks<Paths extends {}>(
 
     post: <P extends PathsWithMethod<Paths, "post">>(
       path: P,
-      params?: any
+      input?: any
     ) => {
       return useApi(
-        ["post", path, JSON.stringify(params ?? {})],
+        ["post", path, JSON.stringify(input ?? {})],
         async () => {
-          const res = await client.POST(path, params);
+          const res = await client.POST(path, input);
           if (res.error) throw res.error;
           return res.data;
         }
       );
     },
 
+    // Using useMutation
     postMutation: <P extends PathsWithMethod<Paths, "post">>(path: P) => {
-      return useApiMutation(async (params: any) => {
-        const res = await client.POST(path, params);
+      return useApiMutation(async (input: any) => {
+        const res = await client.POST(path, input);
         if (res.error) throw res.error;
         return res.data;
       });
     },
 
     putMutation: <P extends PathsWithMethod<Paths, "put">>(path: P) => {
-      return useApiMutation(async (params: any) => {
-        const res = await client.PUT(path, params);
+      return useApiMutation(async (input: any) => {
+        const res = await client.PUT(path, input);
         if (res.error) throw res.error;
         return res.data;
       });
     },
 
     patchMutation: <P extends PathsWithMethod<Paths, "patch">>(path: P) => {
-      return useApiMutation(async (params: any) => {
-        const res = await client.PATCH(path, params);
+      return useApiMutation(async (input: any) => {
+        const res = await client.PATCH(path, input);
         if (res.error) throw res.error;
         return res.data;
       });
     },
 
     deleteMutation: <P extends PathsWithMethod<Paths, "delete">>(path: P) => {
-      return useApiMutation(async (params: any) => {
-        const res = await client.DELETE(path, params);
+      return useApiMutation(async (input: any) => {
+        const res = await client.DELETE(path, input);
         if (res.error) throw res.error;
         return res.data;
       });

package/src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { createElement } from "react";
+
+type LegendAs = "h1" | "h2" | "h3" | "h4";
+type LegendSize = "s" | "m" | "l" | "xl";
+
+interface CheckboxOption {
+    id: string;
+    value: string;
+    label: ReactNode;
+    checked?: boolean;
+}
+
+interface CheckboxGroupProps {
+    legend: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    options: CheckboxOption[];
+    name: string;
+    legendAs?: LegendAs;
+    legendSize?: LegendSize;
+    checkboxSize?: "small" | "default";
+}
+
+export const CheckboxGroup = ({
+    legend,
+    hint,
+    error,
+    options,
+    name,
+    legendAs = "h4",
+    legendSize = "m",
+    checkboxSize = "default"
+}: CheckboxGroupProps) => {
+    const hasError = Boolean(error);
+    const errorId = hasError ? `${name}-error` : undefined;
+
+    const legendHeading = createElement(
+        legendAs,
+        { className: "govuk-fieldset__heading" },
+        legend
+    );
+
+    return (
+        <div
+            className={clsx("govuk-form-group", {
+                "govuk-form-group--error": hasError,
+            })}
+        >
+            <fieldset className="govuk-fieldset" aria-describedby={errorId}>
+                <legend
+                    className={clsx("govuk-fieldset__legend", {
+                        [`govuk-fieldset__legend--${legendSize}`]:
+                            legendSize !== "m",
+                    })}
+                >
+                    {legendHeading}
+                </legend>
+
+                {hint && <div className="govuk-hint">{hint}</div>}
+
+                {hasError && (
+                    <p id={errorId} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </p>
+                )}
+
+                <div
+                    className={clsx("govuk-checkboxes", {
+                        "govuk-checkboxes--small": checkboxSize === "small",
+                    })}
+                    data-module="govuk-checkboxes"
+                >
+                    {options.map((opt) => (
+                        <div key={opt.id} className="govuk-checkboxes__item">
+                            <input
+                                className="govuk-checkboxes__input"
+                                id={opt.id}
+                                name={name}
+                                type="checkbox"
+                                value={opt.value}
+                                defaultChecked={opt.checked}
+                            />
+                            <label
+                                className="govuk-label govuk-checkboxes__label"
+                                htmlFor={opt.id}
+                            >
+                                {opt.label}
+                            </label>
+                        </div>
+                    ))}
+                </div>
+            </fieldset>
+        </div>
+    );
+};

package/src/components/Inputs/SelectInput/SelectInput.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import clsx from "clsx";
+import type { JSX, ReactNode } from "react";
+import { createElement } from "react";
+
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type LabelSize = "s" | "m" | "l" | "xl";
+type SelectProps = Omit<JSX.IntrinsicElements["select"], "id">;
+
+interface SelectInputProps extends SelectProps {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    options: { value: string; label: string }[];
+    placeholder?: string;
+    labelAs?: LabelAs;
+    labelSize?: LabelSize;
+    className?: string;
+}
+
+export const SelectInput = ({
+    id,
+    label,
+    hint,
+    error,
+    options,
+    placeholder,
+    labelAs,
+    labelSize = "m",
+    className,
+    ...props
+}: SelectInputProps) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const ariaDescribedBy =
+        [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+    const labelElement = (
+        <label
+            htmlFor={id}
+            className={clsx("govuk-label", {
+                [`govuk-label--${labelSize}`]: labelSize !== "m",
+            })}
+        >
+            {label}
+        </label>
+    );
+
+    return (
+        <div
+            className={clsx("govuk-form-group", {
+                "govuk-form-group--error": hasError,
+            })}
+        >
+            {labelAs
+                ? createElement(
+                    labelAs,
+                    { className: "govuk-label-wrapper" },
+                    labelElement
+                )
+                : labelElement}
+
+            {hint && (
+                <div id={hintId} className="govuk-hint">
+                    {hint}
+                </div>
+            )}
+
+            {hasError && (
+                <p id={errorId} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span> {error}
+                </p>
+            )}
+
+            <select
+                id={id}
+                className={clsx(
+                    "govuk-select",
+                    { "govuk-select--error": hasError },
+                    className
+                )}
+                aria-describedby={ariaDescribedBy}
+                {...props}
+            >
+                {placeholder && (
+                    <option value="" disabled hidden>
+                        {placeholder}
+                    </option>
+                )}
+
+                {options.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+};

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import clsx from "clsx";
+import type { JSX, ReactNode } from "react";
+import { createElement } from "react";
+
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type InputProps = Omit<JSX.IntrinsicElements["input"], "id">;
+
+interface TextInputProps extends InputProps {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    width?: "10" | "20" | "30";
+    labelSize?: "s" | "m" | "l" | "xl";
+    labelAs?: LabelAs;
+    placeholder?: string;
+    suffix?: ReactNode;
+}
+
+export const TextInput = ({
+    id,
+    label,
+    hint,
+    error,
+    width = "20",
+    labelSize = "m",
+    labelAs,
+    className,
+    placeholder,
+    suffix,
+    ...props
+}: TextInputProps) => {
+    const hasError = Boolean(error);
+
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+    const labelElement = (
+        <label
+            htmlFor={id}
+            className={clsx("govuk-label", {
+                [`govuk-label--${labelSize}`]: labelSize !== "m",
+            })}
+        >
+            {label}
+        </label>
+    );
+
+    const input = (
+        <input
+            id={id}
+            className={clsx(
+                "govuk-input",
+                `govuk-input--width-${width}`,
+                className
+            )}
+            aria-invalid={hasError}
+            aria-describedby={describedBy}
+            placeholder={placeholder}
+            {...props}
+        />
+    );
+
+    return (
+        <div
+            className={clsx("govuk-form-group", {
+                "govuk-form-group--error": hasError,
+            })}
+        >
+            {labelAs
+                ? createElement(
+                    labelAs,
+                    { className: "govuk-label-wrapper" },
+                    labelElement
+                )
+                : labelElement}
+
+            {hint && (
+                <div id={hintId} className="govuk-hint">
+                    {hint}
+                </div>
+            )}
+
+            {hasError && (
+                <p id={errorId} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span> {error}
+                </p>
+            )}
+
+            {suffix ? (
+                <div className="govuk-input__wrapper">
+                    {input}
+                    <div className="govuk-input__suffix" aria-hidden="true">
+                        {suffix}
+                    </div>
+                </div>
+            ) : (
+                input
+            )}
+        </div>
+    );
+};

package/src/components/Inputs/index.ts

@@ -0,0 +1,3 @@
+export * from "./TextInput/TextInput";
+export * from "./CheckBoxesInput/CheckBoxGroupInput";
+export * from "./SelectInput/SelectInput";

package/src/index.ts

@@ -11,3 +11,4 @@ export * from "./components/BackLink";
 export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
+export * from "./components/Inputs";