whitehall-ui 1.0.0

package/dist/chunk-LRNZYPC2.js

@@ -0,0 +1,107 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var TaskList = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-body text-govuk-black",
+      "mt-0 mb-govuk-6 p-0 list-none",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TaskListItem = ({
+  className,
+  hasLink,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    className: cn(
+      "table relative w-full mb-0",
+      "py-govuk-2",
+      "border-b border-govuk-mid-grey",
+      "first:border-t first:border-t-govuk-mid-grey",
+      hasLink && "hover:bg-govuk-light-grey",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TaskListNameAndHint = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("table-cell align-top text-govuk-black", className),
+    ...props,
+    children
+  }
+);
+var TaskListLink = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      "text-govuk-brand underline govuk-link-underline",
+      "hover:text-govuk-brand-hover hover:govuk-link-underline-hover",
+      "focus:govuk-link-focus",
+      'after:content-[""] after:block after:absolute after:inset-0',
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TaskListHint = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("mt-govuk-1 text-govuk-dark-grey", className),
+    ...props,
+    children
+  }
+);
+var TaskListStatus = ({
+  className,
+  cannotStartYet,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "table-cell pl-govuk-2 text-right align-top",
+      cannotStartYet ? "text-govuk-dark-grey" : "text-govuk-black",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { TaskList, TaskListHint, TaskListItem, TaskListLink, TaskListNameAndHint, TaskListStatus };

package/dist/chunk-M6CLPMRP.js

@@ -0,0 +1,227 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var PaginationBlockContext = createContext(false);
+var PrevArrow = () => {
+  const isBlock = useContext(PaginationBlockContext);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn(
+        "govuk-pagination-icon fill-current",
+        isBlock ? "govuk-pagination-block-arrow" : "mr-govuk-3"
+      ),
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "13",
+      width: "15",
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 15 13",
+      children: /* @__PURE__ */ jsx("path", { d: "m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z" })
+    }
+  );
+};
+var NextArrow = () => {
+  const isBlock = useContext(PaginationBlockContext);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn(
+        "govuk-pagination-icon fill-current",
+        isBlock ? "govuk-pagination-block-arrow" : "ml-govuk-3"
+      ),
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "13",
+      width: "15",
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 15 13",
+      children: /* @__PURE__ */ jsx("path", { d: "m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z" })
+    }
+  );
+};
+var Pagination = ({
+  className,
+  block,
+  children,
+  ref,
+  ...props
+}) => {
+  const blockValue = block ?? false;
+  return /* @__PURE__ */ jsx(PaginationBlockContext.Provider, { value: blockValue, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      className: cn(
+        "font-govuk mb-govuk-6",
+        block ? "govuk-pagination-block" : "flex flex-col flex-wrap items-center md:flex-row md:items-start",
+        className
+      ),
+      "aria-label": props["aria-label"] ?? "Pagination",
+      ...props,
+      children
+    }
+  ) });
+};
+var PaginationPrevious = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const isBlock = useContext(PaginationBlockContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "govuk-pagination-nav-item box-border relative",
+        "min-w-govuk-pagination-touch min-h-govuk-pagination-touch",
+        "py-govuk-2 pr-govuk-3 pl-0 font-bold text-govuk-body",
+        !isBlock && "govuk-pagination-nav-link float-left",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var PaginationNext = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const isBlock = useContext(PaginationBlockContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "govuk-pagination-nav-item box-border relative",
+        "min-w-govuk-pagination-touch min-h-govuk-pagination-touch",
+        "py-govuk-2 font-bold text-govuk-body",
+        isBlock ? "pl-0 pr-govuk-3" : "govuk-pagination-nav-link pl-govuk-3 pr-0 float-left",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var PaginationList = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("ul", { ref, className: cn("m-0 p-0 list-none", className), ...props, children });
+var PaginationItem = ({
+  className,
+  current,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    className: cn(
+      "box-border relative",
+      "min-w-govuk-pagination-touch min-h-govuk-pagination-touch",
+      "py-govuk-2 px-govuk-3 float-left text-center text-govuk-body",
+      "hidden first:block last:block md:block",
+      current ? "block font-bold govuk-pagination-item-current" : "hover:bg-govuk-light-grey",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var PaginationEllipsis = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    className: cn(
+      "box-border relative",
+      "min-w-govuk-pagination-touch min-h-govuk-pagination-touch",
+      "py-govuk-2 px-govuk-3 float-left text-center text-govuk-body",
+      "block font-bold text-govuk-dark-grey",
+      "hover:bg-transparent",
+      className
+    ),
+    ...props,
+    children: "\u22EF"
+  }
+);
+var PaginationLink = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const isBlock = useContext(PaginationBlockContext);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref,
+      className: cn(
+        "govuk-pagination-link min-w-govuk-3",
+        "text-govuk-brand underline govuk-link-underline",
+        "hover:text-govuk-brand-hover hover:govuk-link-underline-hover",
+        "visited:text-govuk-visited",
+        "focus:govuk-link-focus",
+        isBlock ? "inline-block pl-govuk-6 text-left govuk-pagination-block-link" : "block",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var PaginationLinkTitle = ({
+  className,
+  decorated,
+  children,
+  ref,
+  ...props
+}) => {
+  const isBlock = useContext(PaginationBlockContext);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "decoration-inherit",
+        decorated && "underline govuk-link-underline",
+        isBlock && "govuk-pagination-block-title",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var PaginationLinkLabel = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ref,
+    className: cn(
+      "font-normal underline govuk-link-underline inline-block",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { NextArrow, Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationLinkLabel, PaginationLinkTitle, PaginationList, PaginationNext, PaginationPrevious, PrevArrow };

package/dist/chunk-N67H5OUQ.js

@@ -0,0 +1,51 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var BackLink = ({
+  className,
+  inverse,
+  ref,
+  children = "Back",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "a",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-header leading-tight",
+      "inline-flex items-center gap-govuk-1",
+      "my-govuk-3",
+      "underline govuk-link-underline",
+      "hover:govuk-link-underline-hover",
+      "focus:govuk-link-focus",
+      inverse ? [
+        "text-white visited:text-white",
+        "hover:text-white active:text-white"
+      ] : [
+        "text-govuk-black visited:text-govuk-black",
+        "hover:text-govuk-black active:text-govuk-black"
+      ],
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "shrink-0",
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "7",
+          height: "11",
+          viewBox: "0 0 7 11",
+          fill: "none",
+          "aria-hidden": "true",
+          focusable: "false",
+          children: /* @__PURE__ */ jsx("path", { d: "M6 1L1.5 5.5L6 10", stroke: "currentColor", strokeWidth: "1.5" })
+        }
+      ),
+      children
+    ]
+  }
+);
+
+export { BackLink };

package/dist/chunk-NRXTKHI2.js

@@ -0,0 +1,169 @@
+import { buttonVariants } from './chunk-5PIQJ22R.js';
+import { cn } from './chunk-WONVZ7WK.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var REQUIRED_PRESSES = 3;
+var TIMEOUT_MS = 5e3;
+var indicatorStyles = [
+  "p-govuk-2 pb-0 pointer-events-none text-center"
+];
+var dotStyles = [
+  "inline-block box-border rounded-full",
+  "w-govuk-exit-page-dot h-govuk-exit-page-dot",
+  "mx-govuk-exit-page-dot-gap",
+  "border-2 border-solid border-current"
+];
+var ExitThisPage = ({
+  className,
+  redirectUrl = "https://www.bbc.co.uk/weather",
+  text = "Exit this page",
+  activatedText = "Loading.",
+  timedOutText = "Exit this page expired.",
+  pressTwoMoreTimesText = "Shift, press 2 more times to exit.",
+  pressOneMoreTimeText = "Shift, press 1 more time to exit.",
+  ref,
+  ...props
+}) => {
+  const [keypressCount, setKeypressCount] = useState(0);
+  const [announcement, setAnnouncement] = useState("");
+  const [activated, setActivated] = useState(false);
+  const countRef = useRef(0);
+  const lastKeyModifiedRef = useRef(false);
+  const keypressTimeoutRef = useRef(null);
+  const messageTimeoutRef = useRef(null);
+  const exitPage = () => {
+    setAnnouncement("");
+    setActivated(true);
+    globalThis.location.assign(redirectUrl);
+  };
+  const handleClick = (event) => {
+    event.preventDefault();
+    exitPage();
+  };
+  useEffect(() => {
+    const clearKeypressTimer = () => {
+      if (keypressTimeoutRef.current !== null) {
+        globalThis.clearTimeout(keypressTimeoutRef.current);
+        keypressTimeoutRef.current = null;
+      }
+    };
+    const resetKeypressTimer = () => {
+      clearKeypressTimer();
+      countRef.current = 0;
+      setKeypressCount(0);
+      setAnnouncement(timedOutText);
+      if (messageTimeoutRef.current !== null) {
+        globalThis.clearTimeout(messageTimeoutRef.current);
+      }
+      messageTimeoutRef.current = globalThis.setTimeout(() => {
+        setAnnouncement("");
+      }, TIMEOUT_MS);
+    };
+    const setKeypressTimer = () => {
+      clearKeypressTimer();
+      keypressTimeoutRef.current = globalThis.setTimeout(
+        resetKeypressTimer,
+        TIMEOUT_MS
+      );
+    };
+    const handleKeyup = (event) => {
+      if (event.key === "Shift" && !lastKeyModifiedRef.current) {
+        countRef.current += 1;
+        setKeypressCount(countRef.current);
+        if (messageTimeoutRef.current !== null) {
+          globalThis.clearTimeout(messageTimeoutRef.current);
+          messageTimeoutRef.current = null;
+        }
+        if (countRef.current >= REQUIRED_PRESSES) {
+          countRef.current = 0;
+          clearKeypressTimer();
+          exitPage();
+        } else {
+          setAnnouncement(
+            countRef.current === 1 ? pressTwoMoreTimesText : pressOneMoreTimeText
+          );
+          setKeypressTimer();
+        }
+      } else if (keypressTimeoutRef.current !== null) {
+        resetKeypressTimer();
+      }
+      lastKeyModifiedRef.current = event.shiftKey;
+    };
+    document.addEventListener("keyup", handleKeyup, true);
+    return () => {
+      document.removeEventListener("keyup", handleKeyup, true);
+      clearKeypressTimer();
+      if (messageTimeoutRef.current !== null) {
+        globalThis.clearTimeout(messageTimeoutRef.current);
+      }
+    };
+  }, [
+    redirectUrl,
+    timedOutText,
+    pressTwoMoreTimesText,
+    pressOneMoreTimeText
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "block sm:inline-block",
+        "sticky top-0 left-0 z-govuk-exit-page w-full",
+        "mb-govuk-8",
+        "sm:right-0 sm:left-auto sm:w-auto sm:float-right",
+        "print:hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: redirectUrl,
+            rel: "nofollow noreferrer",
+            onClick: handleClick,
+            className: cn(
+              buttonVariants({ variant: "warning" }),
+              "mb-0 max-sm:w-full"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Emergency" }),
+              " ",
+              text,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(indicatorStyles, keypressCount > 0 ? "block" : "hidden"),
+                  children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        dotStyles,
+                        index < keypressCount && "border-govuk-exit-page-dot"
+                      )
+                    },
+                    index
+                  ))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("output", { className: "sr-only", children: announcement }),
+        activated && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "alert",
+            className: "fixed inset-0 z-govuk-exit-page-overlay bg-govuk-canvas text-govuk-canvas-text",
+            children: activatedText
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { ExitThisPage };

package/dist/chunk-OP35ZJ4X.js

@@ -0,0 +1,46 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var WarningText = ({
+  className,
+  ref,
+  assistiveText = "Warning",
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-body font-bold",
+      "relative py-govuk-2 mb-govuk-6",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "box-border absolute left-0",
+            "flex items-center justify-center",
+            "min-w-govuk-warning-icon-size min-h-govuk-warning-icon-size",
+            "mt-govuk-warning-icon-mt",
+            "border-govuk-warning-icon-border border-solid border-govuk-black rounded-full",
+            "bg-govuk-black text-white",
+            "text-3xl",
+            "select-none"
+          ),
+          "aria-hidden": "true",
+          children: "!"
+        }
+      ),
+      /* @__PURE__ */ jsxs("strong", { className: cn("block pl-govuk-warning-text-pl font-inherit"), children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: assistiveText }),
+        children
+      ] })
+    ]
+  }
+);
+
+export { WarningText };

package/dist/chunk-P4GCF5FQ.js

@@ -0,0 +1,62 @@
+import { TextInput } from './chunk-QTSEOPVX.js';
+import { Button } from './chunk-5PIQJ22R.js';
+import { cn } from './chunk-WONVZ7WK.js';
+import { useId, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PasswordInput = ({
+  className,
+  id,
+  error = false,
+  disabled = false,
+  autoComplete = "current-password",
+  showPasswordText = "Show",
+  hidePasswordText = "Hide",
+  showPasswordAriaLabel = "Show password",
+  hidePasswordAriaLabel = "Hide password",
+  passwordShownAnnouncement = "Your password is shown",
+  passwordHiddenAnnouncement = "Your password is hidden",
+  ref,
+  ...props
+}) => {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [shown, setShown] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        ref,
+        id: inputId,
+        type: shown ? "text" : "password",
+        error,
+        disabled,
+        spellCheck: false,
+        autoCapitalize: "none",
+        autoComplete,
+        className: cn("flex-auto", className),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "secondary",
+        disabled,
+        "aria-controls": inputId,
+        "aria-label": shown ? hidePasswordAriaLabel : showPasswordAriaLabel,
+        onClick: () => setShown((prev) => !prev),
+        className: cn(
+          "mt-0 mb-0 ml-govuk-1",
+          "w-24 sm:w-24 shrink-0 grow-0",
+          "leading-none whitespace-nowrap"
+        ),
+        children: shown ? hidePasswordText : showPasswordText
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: shown ? passwordShownAnnouncement : passwordHiddenAnnouncement })
+  ] });
+};
+
+export { PasswordInput };