whitehall-ui 1.0.0

package/dist/chunk-7ZCZQN5N.js

@@ -0,0 +1,71 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var GenericHeader = ({
+  className,
+  fullWidth,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "header",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-header",
+      "border-b border-b-transparent",
+      "text-white bg-govuk-black",
+      className
+    ),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(GenericHeaderContainer, { fullWidth, children: /* @__PURE__ */ jsx(GenericHeaderLogo, {}) })
+  }
+);
+var GenericHeaderContainer = ({
+  className,
+  fullWidth,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      fullWidth ? "px-govuk-3" : "max-w-240 mx-auto px-govuk-3",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var GenericHeaderLogo = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex py-govuk-3", className), ...props, children });
+var GenericHeaderLink = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center gap-govuk-1",
+      "text-govuk-header-link",
+      "text-white no-underline",
+      "visited:text-white active:text-white",
+      "hover:underline hover:govuk-link-underline hover:govuk-link-underline-hover",
+      "focus:govuk-link-focus",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { GenericHeader, GenericHeaderContainer, GenericHeaderLink, GenericHeaderLogo };

package/dist/chunk-AO6HPG4R.js

@@ -0,0 +1,50 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var textareaVariants = cva(
+  [
+    "box-border w-full",
+    "p-govuk-1",
+    "border-2 border-govuk-black",
+    "rounded-none",
+    "appearance-none resize-y",
+    "text-govuk-body font-normal font-govuk",
+    "focus:outline-3 focus:outline-govuk-yellow focus:outline-offset-0",
+    "focus:inset-ring-2 focus:inset-ring-govuk-black",
+    "disabled:opacity-50 disabled:bg-transparent disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      error: {
+        true: "border-govuk-error focus:border-govuk-black",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      error: false
+    }
+  }
+);
+var Textarea = ({
+  className,
+  error = false,
+  rows = 5,
+  disabled = false,
+  "aria-describedby": ariaDescribedBy,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "textarea",
+  {
+    ref,
+    rows,
+    disabled,
+    "aria-invalid": error || void 0,
+    "aria-describedby": ariaDescribedBy || void 0,
+    className: cn(textareaVariants({ error }), className),
+    ...props
+  }
+);
+
+export { Textarea, textareaVariants };

package/dist/chunk-CEPBVMFU.js

@@ -0,0 +1,34 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var ErrorMessage = ({
+  className,
+  children,
+  visuallyHiddenText = "Error",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "p",
+  {
+    ref,
+    className: cn(
+      "block",
+      "mt-0 mb-govuk-3",
+      "clear-both",
+      "font-govuk text-govuk-body font-bold",
+      "text-govuk-error",
+      className
+    ),
+    ...props,
+    children: [
+      visuallyHiddenText && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        visuallyHiddenText,
+        ":"
+      ] }),
+      " ",
+      children
+    ]
+  }
+);
+
+export { ErrorMessage };

package/dist/chunk-G6T44BDV.js

@@ -0,0 +1,75 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var linkVariants = cva(
+  [
+    "font-govuk cursor-pointer",
+    "underline govuk-link-underline",
+    "hover:govuk-link-underline-hover",
+    "focus:govuk-link-focus"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "text-govuk-brand",
+          "hover:text-govuk-brand-hover",
+          "visited:text-govuk-visited",
+          "active:text-govuk-brand"
+        ],
+        muted: [
+          "text-govuk-dark-grey",
+          "hover:text-govuk-dark-grey",
+          "visited:text-govuk-dark-grey",
+          "active:text-govuk-dark-grey"
+        ],
+        inverse: [
+          "text-white",
+          "hover:text-white",
+          "visited:text-white",
+          "active:text-white",
+          "focus:not-focus:bg-transparent"
+        ]
+      },
+      noUnderline: {
+        true: "no-underline hover:underline hover:govuk-link-underline"
+      },
+      noVisitedState: {
+        true: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        noVisitedState: true,
+        className: "visited:text-govuk-brand"
+      }
+    ],
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Link = ({
+  className,
+  variant,
+  noUnderline,
+  noVisitedState,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      linkVariants({ variant, noUnderline, noVisitedState }),
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { Link, linkVariants };

package/dist/chunk-GUZIKVAE.js

@@ -0,0 +1,119 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var NotificationBanner = ({
+  className,
+  variant = "default",
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "section",
+  {
+    ref,
+    role: variant === "success" ? "alert" : void 0,
+    "aria-labelledby": props["aria-labelledby"] ?? "govuk-notification-banner-title",
+    className: cn(
+      "font-govuk text-govuk-body",
+      "mb-govuk-8",
+      variant === "success" ? "border-govuk-notification-banner-success bg-govuk-green" : "border-govuk-notification-banner bg-govuk-brand",
+      "focus:outline-3 focus:outline-govuk-yellow",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var NotificationBannerHeader = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "py-govuk-1 px-govuk-3 sm:px-govuk-4",
+      "border-b border-b-transparent",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var NotificationBannerTitle = ({
+  className,
+  ref,
+  children = "Important",
+  id = "govuk-notification-banner-title",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h2",
+  {
+    ref,
+    id,
+    className: cn("text-govuk-body font-bold m-0 p-0 text-white", className),
+    ...props,
+    children
+  }
+);
+var NotificationBannerContent = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "p-govuk-3 sm:p-govuk-4",
+      "text-govuk-black bg-white",
+      "*:last:mb-0",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var NotificationBannerHeading = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-govuk-heading-m font-bold m-0 mb-govuk-3 p-0",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var NotificationBannerLink = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-brand font-bold",
+      "underline govuk-link-underline",
+      "hover:govuk-link-underline-hover",
+      "focus:govuk-link-focus",
+      "visited:text-govuk-brand",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { NotificationBanner, NotificationBannerContent, NotificationBannerHeader, NotificationBannerHeading, NotificationBannerLink, NotificationBannerTitle };

package/dist/chunk-JESMK3XK.js

@@ -0,0 +1,105 @@
+import { Textarea } from './chunk-AO6HPG4R.js';
+import { cn } from './chunk-WONVZ7WK.js';
+import { useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var countWords = (text) => {
+  const trimmed = text.trim();
+  if (trimmed === "") return 0;
+  return trimmed.split(/\s+/).length;
+};
+var defaultFormatMessage = (remaining, mode) => {
+  const unit = mode === "words" ? "words" : "characters";
+  if (remaining >= 0) {
+    return `You have ${remaining} ${unit} remaining`;
+  }
+  const over = Math.abs(remaining);
+  return `You have ${over} ${unit} too many`;
+};
+var getCount = (text, mode) => {
+  if (mode === "words") return countWords(text);
+  return text.length;
+};
+var CharacterCount = ({
+  id,
+  maxCount,
+  mode = "characters",
+  threshold = 0,
+  rows = 5,
+  defaultValue = "",
+  value,
+  error = false,
+  disabled = false,
+  className,
+  textareaClassName,
+  onChange,
+  name,
+  ref,
+  formatMessage = defaultFormatMessage
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  const currentCount = getCount(currentValue, mode);
+  const remaining = maxCount - currentCount;
+  const isOverLimit = remaining < 0;
+  const thresholdValue = Math.ceil(maxCount * threshold / 100);
+  const showMessage = threshold === 0 || currentCount >= thresholdValue;
+  const message = formatMessage(remaining, mode);
+  const handleChange = useCallback(
+    (e) => {
+      if (value === void 0) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    },
+    [value, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("font-govuk mb-govuk-6", className), children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ref,
+        id,
+        name,
+        rows,
+        value: currentValue,
+        onChange: handleChange,
+        error: error || isOverLimit,
+        disabled,
+        "aria-describedby": `${id}-info`,
+        className: cn("mb-govuk-1", textareaClassName)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CharacterCountMessage,
+      {
+        id: `${id}-info`,
+        className: cn(
+          isOverLimit && "text-govuk-error font-bold",
+          !showMessage && "invisible"
+        ),
+        children: message
+      }
+    )
+  ] });
+};
+var CharacterCountMessage = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-body text-govuk-dark-grey",
+      "mt-0 mb-0 tabular-nums",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { CharacterCount, CharacterCountMessage };

package/dist/chunk-JFZN5XP6.js

@@ -0,0 +1,88 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var tableCaptionVariants = cva("font-bold table-caption text-left", {
+  variants: {
+    size: {
+      m: "text-govuk-heading-m mb-govuk-3",
+      l: "text-govuk-heading-l mb-govuk-3",
+      xl: "text-govuk-heading-xl mb-govuk-3"
+    }
+  }
+});
+var Table = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn(
+      "w-full mb-govuk-6 border-spacing-0 border-collapse",
+      "font-govuk text-govuk-body text-govuk-black",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TableCaption = ({
+  className,
+  ref,
+  children,
+  size,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn(
+      "font-govuk font-bold table-caption text-left",
+      tableCaptionVariants({ size }),
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TableHead = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx("thead", { ref, className: cn(className), ...props, children });
+var TableBody = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx("tbody", { ref, className: cn(className), ...props, children });
+var TableRow = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx("tr", { ref, className: cn(className), ...props, children });
+var TableHeader = ({
+  className,
+  ref,
+  children,
+  numeric,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "govuk-table-cell font-bold",
+      numeric && "text-right tabular-nums",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TableCell = ({
+  className,
+  ref,
+  children,
+  numeric,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "govuk-table-cell",
+      numeric && "text-right tabular-nums",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, tableCaptionVariants };

package/dist/chunk-KD4LPFIZ.js

@@ -0,0 +1,67 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { Collapsible } from '@base-ui/react/collapsible';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Details = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible.Root,
+  {
+    ref,
+    className: cn(
+      "mb-govuk-6 font-govuk text-govuk-body text-govuk-black",
+      className
+    ),
+    ...props
+  }
+);
+var DetailsSummary = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Collapsible.Trigger,
+  {
+    ref,
+    className: cn(
+      "group relative w-fit cursor-pointer",
+      "pl-govuk-4 border-none bg-transparent p-0",
+      "font-govuk text-govuk-body text-govuk-brand",
+      "underline govuk-link-underline",
+      "hover:text-govuk-brand-hover hover:govuk-link-underline-hover",
+      "focus:govuk-link-focus focus:no-underline",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "absolute left-0 top-0 bottom-0 my-auto shrink-0 transition-transform group-data-panel-open:rotate-90",
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "14",
+          height: "14",
+          viewBox: "0 0 14 14",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          focusable: "false",
+          children: /* @__PURE__ */ jsx("path", { d: "M3.5 1L10.5 7L3.5 13z" })
+        }
+      ),
+      children
+    ]
+  }
+);
+var DetailsText = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible.Panel,
+  {
+    ref,
+    className: cn(
+      "pt-govuk-3 pb-govuk-3 pl-govuk-4",
+      "border-l-govuk-inset",
+      className
+    ),
+    ...props
+  }
+);
+
+export { Details, DetailsSummary, DetailsText };

package/dist/chunk-KWAC6IEK.js

@@ -0,0 +1,95 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Breadcrumbs = ({
+  className,
+  collapseOnMobile,
+  inverse,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "nav",
+  {
+    ref,
+    "aria-label": "Breadcrumb",
+    className: cn(
+      "font-govuk text-govuk-header",
+      "mt-govuk-3 mb-govuk-2",
+      inverse ? "text-white" : "text-govuk-black",
+      collapseOnMobile && "[&_ol]:max-sm:flex [&_li]:max-sm:hidden [&_li:first-child]:max-sm:inline-block [&_li:last-child]:max-sm:inline-block",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var BreadcrumbsList = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("ol", { ref, className: cn("m-0 p-0 list-none", className), ...props, children });
+var BreadcrumbsListItem = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "li",
+  {
+    ref,
+    className: cn(
+      "inline-block mb-govuk-1",
+      "first:ml-0 first:pl-0 first:[&>svg]:hidden",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "inline-block align-middle mx-govuk-2 -mt-px",
+          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: "M1 1L5.5 5.5L1 10",
+              stroke: "currentColor",
+              strokeWidth: "1",
+              strokeOpacity: "0.65"
+            }
+          )
+        }
+      ),
+      children
+    ]
+  }
+);
+var BreadcrumbsLink = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      "text-govuk-black underline govuk-link-underline",
+      "hover:text-govuk-black hover:govuk-link-underline-hover",
+      "focus:govuk-link-focus",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { Breadcrumbs, BreadcrumbsLink, BreadcrumbsList, BreadcrumbsListItem };