@uktrade/react-component-library 0.10.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Department for Business and Trade
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Readme.md

@@ -0,0 +1,64 @@
+# React Design System
+
+A collection of reusable React components following GOV.UK design patterns.
+
+---
+
+## Table of Contents
+
+* [Installation](#installation)
+* [Usage](#usage)
+* [Development](#development)
+  * [Build](#build)
+  * [Playground](#playground)
+
+---
+
+## Installation WIP
+
+```bash
+npm install @uktrade/react-component-library
+```
+
+**Peer Dependencies:**
+
+* `react >= 19`
+* `react-dom >= 19`
+
+---
+
+## Usage
+
+Import components from the package:
+
+```tsx
+import { SummaryList, SummaryItem } from "react-component-library";
+```
+
+You can use them directly in your React applications.
+
+---
+
+## Development
+
+### Build
+
+```bash
+git clone https://github.com/uktrade/react-component-library.git
+cd react-component-library
+nvm use
+npm ci
+npm run build
+```
+
+Copies TypeScript output and `.css` files into `dist/`.
+
+### Playground
+
+```bash
+npm run build
+npm run docs:build
+npm run docs:start
+```
+
+This opens a Vite dev server with the playground for testing components.

package/dist/components/ApiBoundary/ApiBoundary.d.ts

@@ -0,0 +1,10 @@
+interface ApiBoundaryProps {
+    isLoading: boolean;
+    isError: boolean;
+    error?: unknown;
+    onRetry?: () => void;
+    children: React.ReactNode;
+}
+export declare const ApiBoundary: ({ isLoading, isError, error, onRetry, children, }: ApiBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ApiBoundary.d.ts.map

package/dist/components/ApiBoundary/ApiBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ApiBoundary/ApiBoundary.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,WAAW,GAAI,mDAMzB,gBAAgB,4CAuBlB,CAAC"}

package/dist/components/ApiBoundary/ApiBoundary.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// import { LoadingBox } from "govuk-react";
+import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner";
+import styles from "./ApiBoundary.module.css";
+import { Button } from "../Button";
+/* Boundary for API-related states: loading, success, and error */
+export const ApiBoundary = ({ isLoading, isError, error, onRetry, children, }) => (_jsxs("div", { className: styles.root, "aria-live": "polite", children: [isLoading && _jsx(LoadingSpinner, {}), !isLoading && !isError && children, isError && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.errorBackdrop }), _jsxs("section", { className: styles.error, children: [_jsx("h2", { className: "govuk-heading-m", children: "Error!" }), _jsx("pre", { className: styles.description, children: typeof error === "string" ? error : JSON.stringify(error, null, 2) }), _jsx(Button, { variant: "warning", onClick: onRetry, children: "Retry" })] })] }))] }));

package/dist/components/ApiBoundary/ApiBoundary.module.css

@@ -0,0 +1,30 @@
+.hods-loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 1rem;
+}
+
+.hods-loading-spinner__spinner {
+  width: 80px;
+  height: 80px;
+  border: 12px solid #dee0e2;
+  border-top-color: #1d70b8; /* GOV.UK blue */
+  border-radius: 50%;
+  animation: hods-loading-spinner-rotate 1.5s linear infinite;
+}
+
+.hods-loading-spinner__content {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+@keyframes hods-loading-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,3 @@
+import type { ClientOptions } from "openapi-fetch";
+export declare function createApiClient<Paths extends {}>(options?: ClientOptions): import("openapi-fetch").Client<Paths, `${string}/${string}`>;
+//# sourceMappingURL=ApiCreateClient.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiCreateClient.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiCreateClient.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,SAAS,EAAE,EAC9C,OAAO,CAAC,EAAE,aAAa,gEAWxB"}

package/dist/components/ApiQuery/ApiCreateClient.js

@@ -0,0 +1,11 @@
+import createClient from "openapi-fetch";
+// `extends {}` required to fix type error (Type 'Paths' does not satisfy the constraint '{}'.)
+export function createApiClient(options) {
+    const defaultOptions = {
+        baseUrl: "/api",
+        credentials: "include",
+    };
+    // Merge/Override user options with the defaults
+    const finalOptions = { ...defaultOptions, ...options };
+    return createClient(finalOptions);
+}

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

@@ -0,0 +1,25 @@
+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) => {
+        query: import("@tanstack/react-query").UseQueryResult<any, Error>;
+        state: {
+            data: any;
+            isLoading: boolean;
+            isError: boolean;
+            error: Error | null;
+            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) => {
+        query: import("@tanstack/react-query").UseQueryResult<any, Error>;
+        state: {
+            data: any;
+            isLoading: boolean;
+            isError: boolean;
+            error: Error | null;
+            refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<any, Error>>;
+        };
+    };
+};
+//# sourceMappingURL=ApiCreateHooks.d.ts.map

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

@@ -0,0 +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;UAMzC,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;;;;;;;;;;EA6CjB"}

package/dist/components/ApiQuery/ApiCreateHooks.js

@@ -0,0 +1,55 @@
+"use client";
+import { createApiClient } from "./ApiCreateClient";
+import { useApi } from "./ApiProvider";
+export function createApiHooks(client) {
+    // type GetParams<P extends PathsWithMethod<Paths, "get">> =
+    //   Parameters<typeof client.GET<P>>[1];
+    return {
+        get: (path, params // GetParams<P> More work to be done to fight openapi-fetch’s internal generics!!!!
+        ) => {
+            return useApi(["get", path, JSON.stringify(params ?? {})], async () => {
+                const res = await client.GET(path, params);
+                if (res.error)
+                    throw res.error;
+                return res.data;
+            });
+        },
+        post: (path, params // GetParams<P> More work to be done to fight openapi-fetch’s internal generics!!!!
+        ) => {
+            return useApi(["post", path, JSON.stringify(params ?? {})], async () => {
+                const res = await client.POST(path, params);
+                if (res.error)
+                    throw res.error;
+                return res.data;
+            });
+        },
+        // TODO: implement other methods (put, delete), furthermore generalize the mutation method
+        // for all methods (No GET) to avoid React Query’s useQuery from running automatically on mount
+        // Same here (params?: any)
+        // postMutation: <P extends PathsWithMethod<Paths, "post">>(path: P, params?: any) => {
+        //   return useApiMutation(async () => {
+        //     const res = await client.POST(path, params);
+        //     if (res.error) throw res.error;
+        //     return res.data;
+        //   });
+        // },
+        // mutation: <
+        //   M extends "post" | "put" | "patch" | "delete",
+        //   P extends PathsWithMethod<Paths, M>
+        // >(
+        //   method: M,
+        //   path: P,
+        //   params?: any
+        // ) => {
+        //   return useApiMutation(async () => {
+        //     const res = await client[method.toUpperCase() as "POST" | "PUT" | "PATCH" | "DELETE"](path, params);
+        //     if (res.error) throw res.error;
+        //     return res.data;
+        //   });
+        // }
+        // ToDo: Generalize this:
+        // const res = await client.POST(path, params);
+        // if (res.error) throw res.error;
+        // return res.data;
+    };
+}

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

@@ -0,0 +1,30 @@
+import { type QueryKey } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+export declare function ApiProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type ApiQueryState<T> = {
+    data?: T;
+    isLoading: boolean;
+    isError: boolean;
+    error?: unknown;
+    refetch: () => void;
+};
+export declare function useApi<T>(key: QueryKey, queryFn: () => Promise<T>): {
+    query: import("@tanstack/react-query").UseQueryResult<import("@tanstack/query-core").NoInfer<T>, Error>;
+    state: {
+        data: import("@tanstack/query-core").NoInfer<T> | undefined;
+        isLoading: boolean;
+        isError: boolean;
+        error: Error | null;
+        refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").NoInfer<T>, Error>>;
+    };
+};
+export declare function useApiMutation<T>(mutationFn: () => Promise<T>): {
+    data: T | undefined;
+    isLoading: boolean;
+    isError: boolean;
+    error: Error | null;
+    mutate: import("@tanstack/react-query").UseMutateFunction<T, Error, void, unknown>;
+};
+//# sourceMappingURL=ApiProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,QAAQ,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvC,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAOhE;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;;;;;;;;;EAgBjE;AAWD,wBAAgB,cAAc,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;;;;;;EAU7D"}

package/dist/components/ApiQuery/ApiProvider.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider, useQuery, useMutation } from "@tanstack/react-query";
+// To avoid cache duplication bugs we make sure to have one single queryClient object
+// per app.
+let queryClient;
+function getQueryClient() {
+    if (!queryClient) {
+        // Stores all query state, retries, and caching 
+        queryClient = new QueryClient({
+            defaultOptions: {
+                queries: {
+                    retry: false,
+                    refetchOnWindowFocus: false,
+                },
+            },
+        });
+    }
+    return queryClient;
+}
+// Wrapper around `QueryClientProvider`  
+export function ApiProvider({ children }) {
+    return (
+    // Injects the client into React Query’s context
+    _jsx(QueryClientProvider, { client: getQueryClient(), children: children }));
+}
+export function useApi(key, queryFn) {
+    // From React Query queryKey and queryFn.
+    // `queryKey` is a unique identifier for this query (React Query uses it for caching and refetching).
+    // `queryFn` is the function that actually fetches the data, API call by using openapi-fetch module.
+    const query = useQuery({ queryKey: key, queryFn });
+    return {
+        query, // raw data to make sure you do not block full React Query object from propagating
+        state: {
+            data: query.data, // fetched data
+            isLoading: query.isFetching, // boolean for current fetch in progress
+            isError: query.isError, // boolean for error state
+            error: query.error, // error object if it failed
+            refetch: query.refetch, // function to manually re-run the query
+        },
+    };
+}
+// export function useApi<T>(key: QueryKey, queryFn: () => Promise<T>): ApiQueryState<T> {
+//   const { data, isFetching, isError, error, refetch } = useQuery({
+//     queryKey: key,
+//     queryFn,
+//   });
+//   return { data, isLoading: isFetching, isError, error, refetch };
+// }
+export function useApiMutation(mutationFn) {
+    const { data, isPending, isError, error, mutate } = useMutation({ mutationFn });
+    return {
+        data,
+        isLoading: isPending,
+        isError,
+        error,
+        mutate,
+    };
+}

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

@@ -0,0 +1,4 @@
+export * from "./ApiCreateClient";
+export * from "./ApiProvider";
+export * from "./ApiCreateHooks";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC"}

package/dist/components/ApiQuery/index.js

@@ -0,0 +1,3 @@
+export * from "./ApiCreateClient";
+export * from "./ApiProvider";
+export * from "./ApiCreateHooks";

package/dist/components/Arrow/Arrow.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+export type ArrowProps = React.JSX.IntrinsicElements["div"] & {
+    variant?: "start" | "middle" | "end";
+    height?: number;
+    active?: boolean;
+};
+export declare const Arrow: ({ className, variant, active, height, children, ...props }: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Arrow.d.ts.map

package/dist/components/Arrow/Arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/components/Arrow/Arrow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,4DAOnB,UAAU,4CAqBZ,CAAC"}

package/dist/components/Arrow/Arrow.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn";
+import styles from "./Arrow.module.css";
+export const Arrow = ({ className, variant = "middle", active = false, height = 40, children, ...props }) => {
+    const clipMap = {
+        start: "polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%)",
+        middle: "polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%)",
+        end: "polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 20px 50%)",
+    };
+    return (_jsx("div", { ...props, className: cn(styles.root, className), style: { height }, children: _jsx("div", { className: cn(styles.arrow, active && styles.active), style: { clipPath: clipMap[variant], height }, children: children }) }));
+};

package/dist/components/Arrow/Arrow.module.css

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.arrow {
+  background: #f3f2f1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 1rem;
+  font-weight: bold;
+  color: #333;
+  transition: background 0.2s ease;
+}
+
+.arrow.active {
+  background: #1d70b8;
+  color: white;
+}

package/dist/components/Arrows/Arrows.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+export type ArrowsProps = React.JSX.IntrinsicElements["div"] & {
+    arrows: string[];
+    activeIndex: number;
+};
+export declare const Arrows: ({ className, arrows, activeIndex }: ArrowsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Arrows.d.ts.map

package/dist/components/Arrows/Arrows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrows.d.ts","sourceRoot":"","sources":["../../../src/components/Arrows/Arrows.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC7D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,oCAAoC,WAAW,4CAarE,CAAC"}

package/dist/components/Arrows/Arrows.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Arrow } from "../Arrow/Arrow";
+import styles from "./Arrows.module.css";
+export const Arrows = ({ className, arrows, activeIndex }) => (_jsx("div", { className: clsx(styles.root, className), children: arrows.map((arrow, index) => (_jsx(Arrow, { className: clsx(index === activeIndex && styles.active), active: index === activeIndex, variant: index === 0 ? "start" : index === arrows.length - 1 ? "end" : "middle", children: arrow }, arrow))) }));

package/dist/components/Arrows/Arrows.module.css

@@ -0,0 +1,25 @@
+.root {
+  & > * {
+    display: none;
+  }
+
+  .active {
+    display: block;
+    + *,
+    + * + * {
+      display: block;
+    }
+  }
+
+  @media (min-width: 30rem) {
+    & {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 40rem) {
+    && > * {
+      display: block;
+    }
+  }
+}

package/dist/components/BackLink.d.ts

@@ -0,0 +1,9 @@
+import type { MouseEventHandler, ReactNode } from "react";
+export interface BackLinkProps {
+    text?: ReactNode;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    className?: string;
+}
+export declare function BackLink({ text, href, onClick, className, }: BackLinkProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BackLink.d.ts.map

package/dist/components/BackLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackLink.d.ts","sourceRoot":"","sources":["../../src/components/BackLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAa,EACb,IAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,aAAa,2CAUf"}

package/dist/components/BackLink.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+export function BackLink({ text = "Back", href = "/", onClick, className, }) {
+    return (_jsx("a", { href: href, onClick: onClick, className: clsx("govuk-back-link", className), children: text }));
+}

package/dist/components/Button.d.ts

@@ -0,0 +1,8 @@
+import type { JSX, ReactNode } from "react";
+type Props = JSX.IntrinsicElements["button"] & {
+    children: ReactNode;
+    variant?: "primary" | "secondary" | "warning";
+};
+export declare const Button: ({ variant, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,KAAK,GAAG,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GAAG;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kCAA8C,KAAK,4CAOzE,CAAC"}

package/dist/components/Button.js

@@ -0,0 +1,4 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+export const Button = ({ variant = "primary", className, ...props }) => (_jsx("button", { className: clsx("govuk-button", `govuk-button--${variant}`, className), "aria-disabled": props.disabled, "data-module": "govuk-button", ...props }));

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export type ButtonGroupProps = React.JSX.IntrinsicElements["div"] & {
+    children: ReactNode;
+};
+export declare const ButtonGroup: ({ className, children, ...props }: ButtonGroupProps) => React.JSX.Element;
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/components/ButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/components/ButtonGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAClE,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mCAAmC,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAM3F,CAAC"}

package/dist/components/ButtonGroup.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+export const ButtonGroup = ({ className, children, ...props }) => {
+    return (_jsx("div", { className: clsx("govuk-button-group", className), ...props, children: children }));
+};

package/dist/components/Colours.d.ts

@@ -0,0 +1,20 @@
+export declare enum TagColours {
+    Grey = "govuk-tag--grey",
+    Green = "govuk-tag--green",
+    Turquoise = "govuk-tag--turquoise",
+    Blue = "govuk-tag--blue",
+    LightBlue = "govuk-tag--light-blue",
+    Purple = "govuk-tag--purple",
+    Pink = "govuk-tag--pink",
+    Red = "govuk-tag--red",
+    Orange = "govuk-tag--orange",
+    Yellow = "govuk-tag--yellow"
+}
+export type BackgroundType = "default" | "light" | "muted" | "white";
+export declare enum BackgroundColours {
+    transparent = "transparent",
+    light = "#f8f8f8",
+    muted = "#eef1f5",
+    white = "#ffffff"
+}
+//# sourceMappingURL=Colours.d.ts.map

package/dist/components/Colours.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colours.d.ts","sourceRoot":"","sources":["../../src/components/Colours.tsx"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB,IAAI,oBAAoB;IACxB,KAAK,qBAAqB;IAC1B,SAAS,yBAAyB;IAClC,IAAI,oBAAoB;IACxB,SAAS,0BAA0B;IACnC,MAAM,sBAAsB;IAC5B,IAAI,oBAAoB;IACxB,GAAG,mBAAmB;IACtB,MAAM,sBAAsB;IAC5B,MAAM,sBAAsB;CAC7B;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AACrE,oBAAY,iBAAiB;IAC3B,WAAW,gBAAgB;IAC3B,KAAK,YAAY;IACjB,KAAK,YAAY;IACjB,KAAK,YAAY;CAClB"}

package/dist/components/Colours.js

@@ -0,0 +1,20 @@
+export var TagColours;
+(function (TagColours) {
+    TagColours["Grey"] = "govuk-tag--grey";
+    TagColours["Green"] = "govuk-tag--green";
+    TagColours["Turquoise"] = "govuk-tag--turquoise";
+    TagColours["Blue"] = "govuk-tag--blue";
+    TagColours["LightBlue"] = "govuk-tag--light-blue";
+    TagColours["Purple"] = "govuk-tag--purple";
+    TagColours["Pink"] = "govuk-tag--pink";
+    TagColours["Red"] = "govuk-tag--red";
+    TagColours["Orange"] = "govuk-tag--orange";
+    TagColours["Yellow"] = "govuk-tag--yellow";
+})(TagColours || (TagColours = {}));
+export var BackgroundColours;
+(function (BackgroundColours) {
+    BackgroundColours["transparent"] = "transparent";
+    BackgroundColours["light"] = "#f8f8f8";
+    BackgroundColours["muted"] = "#eef1f5";
+    BackgroundColours["white"] = "#ffffff";
+})(BackgroundColours || (BackgroundColours = {}));

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from "react";
+interface LoadingSpinnerProps {
+    children?: ReactNode;
+}
+export declare const LoadingSpinner: FC<LoadingSpinnerProps>;
+export default LoadingSpinner;
+//# sourceMappingURL=LoadingSpinner.d.ts.map

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAGD,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAKlD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./LoadingSpinner.module.css";
+// https://design.homeoffice.gov.uk/design-system/components?name=Loading%20spinner 
+export const LoadingSpinner = ({ children }) => (_jsxs("div", { className: styles["hods-loading-spinner"], role: "status", "aria-live": "polite", "aria-busy": "true", children: [_jsx("div", { className: styles["hods-loading-spinner__spinner"], "aria-hidden": "true" }), children && _jsx("div", { className: styles["hods-loading-spinner__text"], children: children })] }));
+export default LoadingSpinner;

package/dist/components/LoadingSpinner/LoadingSpinner.module.css

@@ -0,0 +1,33 @@
+.hods-loading-spinner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+}
+
+.hods-loading-spinner__spinner {
+  border: 8px solid #dee0e2;
+  border-top-color: #005ea5; /* govuk blue */
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  animation: hods-spin 1s linear infinite;
+}
+
+.hods-loading-spinner__text {
+  margin-top: 0.75rem;
+  font-size: 1rem;
+  color: #0b0c0c; /* govuk body text */
+  text-align: center;
+}
+
+@keyframes hods-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}