whitehall-ui 1.0.0

package/dist/chunk-5AKGRLG2.js

@@ -0,0 +1,190 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var headerLinkStyles = [
+  "no-underline text-white",
+  "visited:text-white active:text-white",
+  "hover:underline hover:govuk-link-underline hover:govuk-link-underline-hover",
+  "focus:govuk-link-focus",
+  "focus:not-focus:bg-govuk-brand"
+];
+var Header = ({
+  className,
+  children,
+  fullWidth,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "header",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-header",
+      "border-b border-b-transparent",
+      "text-white bg-govuk-brand",
+      className
+    ),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(HeaderContainer, { fullWidth, children: /* @__PURE__ */ jsx(HeaderLogo, {}) })
+  }
+);
+var HeaderContainer = ({
+  className,
+  fullWidth,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center flex-wrap",
+      fullWidth ? "px-govuk-3" : "max-w-240 mx-auto px-govuk-3",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var HeaderLogo = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("box-border py-govuk-2 mr-govuk-2", className),
+    ...props,
+    children
+  }
+);
+var HeaderLink = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center text-govuk-header-link",
+      headerLinkStyles,
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var HeaderServiceName = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center text-govuk-body font-bold",
+      "py-govuk-2 mr-govuk-2",
+      headerLinkStyles,
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var HeaderNav = ({ className, ref, children, ...props }) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref,
+      className: cn("ml-auto max-sm:w-full", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "sm:hidden flex items-center gap-govuk-1 ml-auto py-govuk-2",
+              "font-govuk text-govuk-body font-bold",
+              "bg-transparent border-0 text-white cursor-pointer",
+              "hover:underline focus:govuk-link-focus"
+            ),
+            onClick: () => setMenuOpen((prev) => !prev),
+            "aria-expanded": menuOpen,
+            "aria-label": "Show or hide navigation menu",
+            children: [
+              "Menu",
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 10 6",
+                  width: "10",
+                  height: "6",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  className: cn("transition-transform", menuOpen && "rotate-180"),
+                  children: /* @__PURE__ */ jsx("path", { d: "M0 0l5 6 5-6z" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: cn(
+              "list-none m-0 p-0",
+              "sm:flex sm:flex-wrap sm:items-center sm:gap-x-govuk-4 sm:gap-y-0",
+              menuOpen ? "max-sm:block" : "max-sm:hidden"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var HeaderNavItem = ({
+  className,
+  active,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    className: cn(
+      "py-govuk-2",
+      active && "border-b-govuk-standard border-b-white -mb-px",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var HeaderNavLink = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn("text-govuk-body font-bold", headerLinkStyles, className),
+    ...props,
+    children
+  }
+);
+
+export { Header, HeaderContainer, HeaderLink, HeaderLogo, HeaderNav, HeaderNavItem, HeaderNavLink, HeaderServiceName };

package/dist/chunk-5H55YDJS.js

@@ -0,0 +1,69 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { jsx } from 'react/jsx-runtime';
+
+var Tabs = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx(
+  Tabs$1.Root,
+  {
+    ref,
+    className: cn(
+      "mt-govuk-1 mb-govuk-6 font-govuk text-govuk-body text-govuk-black",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TabsList = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx(
+  Tabs$1.List,
+  {
+    ref,
+    activateOnFocus: true,
+    className: cn("flex m-0 p-0 border-b border-govuk-mid-grey", className),
+    ...props,
+    children
+  }
+);
+var TabsTab = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx(
+  Tabs$1.Tab,
+  {
+    ref,
+    className: cn(
+      "group relative cursor-pointer border-0 outline-none",
+      "mr-govuk-1 py-govuk-2 px-govuk-4",
+      "bg-govuk-light-grey text-center",
+      "govuk-tab",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-govuk-black underline govuk-link-underline",
+          "group-hover:govuk-link-underline-hover",
+          "group-focus-visible:govuk-link-focus group-focus-visible:no-underline",
+          "group-data-active:no-underline"
+        ),
+        children
+      }
+    )
+  }
+);
+var TabsPanel = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx(
+  Tabs$1.Panel,
+  {
+    ref,
+    tabIndex: -1,
+    className: cn(
+      "py-govuk-6 px-govuk-4",
+      "govuk-tab-panel-border",
+      "*:last:mb-0",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { Tabs, TabsList, TabsPanel, TabsTab };

package/dist/chunk-5PIQJ22R.js

@@ -0,0 +1,106 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var buttonVariants = cva(
+  [
+    "relative inline-block w-full sm:w-auto",
+    "border-2 border-transparent rounded-none",
+    "box-border",
+    "px-govuk-button-x pt-govuk-button-pt pb-govuk-button-pb",
+    "mb-govuk-button-bottom",
+    "text-govuk-body font-normal",
+    "font-govuk",
+    "text-center no-underline",
+    "cursor-pointer",
+    "appearance-none",
+    "active:top-govuk-button-press",
+    "focus:border-govuk-yellow focus:outline-3 focus:outline-transparent",
+    "focus:shadow-govuk-clear focus:inset-ring-1 focus:inset-ring-govuk-yellow",
+    "focus:not-[:active]:not-[:hover]:bg-govuk-yellow",
+    "focus:not-[:active]:not-[:hover]:text-govuk-black",
+    "focus:not-[:active]:not-[:hover]:shadow-govuk-yellow",
+    "focus:not-[:active]:not-[:hover]:inset-ring-0",
+    "focus:not-[:active]:not-[:hover]:border-govuk-yellow"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-govuk-green text-white",
+          "shadow-govuk-green",
+          "hover:not-data-[disabled]:bg-govuk-green-hover",
+          "visited:text-white active:text-white"
+        ],
+        secondary: [
+          "bg-govuk-light-grey text-govuk-black",
+          "shadow-govuk-light-grey",
+          "hover:not-data-[disabled]:bg-govuk-grey",
+          "visited:text-govuk-black active:text-govuk-black"
+        ],
+        warning: [
+          "bg-govuk-red text-white",
+          "shadow-govuk-red",
+          "hover:not-data-[disabled]:bg-govuk-red-hover",
+          "visited:text-white active:text-white"
+        ],
+        inverse: [
+          "bg-white text-govuk-brand",
+          "shadow-govuk-inverse",
+          "hover:not-data-[disabled]:bg-govuk-inverse-hover",
+          "visited:text-govuk-brand active:text-govuk-brand"
+        ],
+        start: [
+          "bg-govuk-green text-white",
+          "shadow-govuk-green",
+          "hover:not-data-[disabled]:bg-govuk-green-hover",
+          "visited:text-white active:text-white",
+          "font-bold text-govuk-start",
+          "inline-flex items-center justify-center"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var disabledStyles = "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:active:top-0";
+var StartIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "ml-govuk-1 sm:ml-govuk-2 align-middle shrink-0 self-center forced-color-adjust-auto",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "17.5",
+    height: "19",
+    viewBox: "0 0 33 40",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M0 0h13l20 20-20 20H0l20-20z" })
+  }
+);
+var Button = ({
+  className,
+  variant = "default",
+  disabled = false,
+  focusableWhenDisabled = false,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Button$1,
+  {
+    ref,
+    disabled,
+    focusableWhenDisabled,
+    className: cn(buttonVariants({ variant }), disabledStyles, className),
+    ...props,
+    children: [
+      children,
+      variant === "start" && /* @__PURE__ */ jsx(StartIcon, {})
+    ]
+  }
+);
+
+export { Button, buttonVariants };

package/dist/chunk-5TI2WXYU.js

@@ -0,0 +1,64 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var DateInput = ({ className, children, ref, ...props }) => /* @__PURE__ */ jsx("div", { ref, className: cn("govuk-date-input", className), ...props, children });
+var DateInputItem = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("inline-block mr-govuk-4 mb-0 align-bottom", className),
+    ...props,
+    children
+  }
+);
+var DateInputLabel = ({
+  className,
+  children,
+  htmlFor,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "label",
+  {
+    ref,
+    htmlFor,
+    className: cn(
+      "block font-govuk text-govuk-body text-govuk-black",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var DateInputInput = ({
+  className,
+  error = false,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    ref,
+    type: "text",
+    inputMode: "numeric",
+    className: cn(
+      "govuk-date-input-field box-border",
+      "p-govuk-1 h-10",
+      "border-2 border-govuk-black",
+      "rounded-none appearance-none",
+      "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",
+      error && "border-govuk-error focus:border-govuk-black",
+      className
+    ),
+    ...props
+  }
+);
+
+export { DateInput, DateInputInput, DateInputItem, DateInputLabel };

package/dist/chunk-5XNKIBMP.js

@@ -0,0 +1,21 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var InsetText = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "clear-both",
+      "p-govuk-3",
+      "my-govuk-4",
+      "border-l-govuk-inset",
+      "text-govuk-tag font-normal font-govuk text-govuk-black",
+      "*:first:mt-0 *:last:mb-0",
+      className
+    ),
+    ...props
+  }
+);
+
+export { InsetText };

package/dist/chunk-6VXVJERU.js

@@ -0,0 +1,38 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var labelVariants = cva(["block", "font-govuk text-govuk-black"], {
+  variants: {
+    size: {
+      xl: "text-govuk-heading-xl font-bold mb-govuk-3",
+      l: "text-govuk-heading-l font-bold mb-govuk-3",
+      m: "text-govuk-heading-m font-bold mb-govuk-3",
+      s: "text-govuk-body font-bold mb-govuk-1"
+    }
+  },
+  defaultVariants: {
+    size: void 0
+  }
+});
+var Label = ({ className, size, htmlFor, ref, ...props }) => /* @__PURE__ */ jsx(
+  "label",
+  {
+    ref,
+    htmlFor,
+    className: cn(
+      labelVariants({ size }),
+      !size && "text-govuk-body mb-govuk-1",
+      className
+    ),
+    ...props
+  }
+);
+var LabelWrapper = ({
+  as: Tag = "h1",
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(Tag, { ref, className: cn("m-0", className), ...props });
+
+export { Label, LabelWrapper, labelVariants };

package/dist/chunk-72PH2FMG.js

@@ -0,0 +1,180 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { useRef, useState, useId } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var fileUploadButtonVariants = cva(
+  [
+    "group block w-full text-left cursor-pointer appearance-none",
+    "font-govuk text-govuk-body text-govuk-black",
+    "p-govuk-file-upload sm:p-govuk-file-upload-lg",
+    "border-2 bg-white",
+    "focus:outline-3 focus:outline-govuk-yellow focus:outline-offset-0",
+    "focus:border-govuk-black focus:bg-govuk-light-grey",
+    "focus:inset-ring-2 focus:inset-ring-govuk-black",
+    "disabled:opacity-50 disabled:pointer-events-none"
+  ],
+  {
+    variants: {
+      empty: {
+        true: [
+          "border-dashed border-govuk-grey",
+          "hover:border-govuk-file-upload-hover-border hover:bg-govuk-light-grey"
+        ],
+        false: [
+          "border-solid border-govuk-mid-grey",
+          "hover:border-dashed hover:border-govuk-file-upload-hover-border"
+        ]
+      },
+      dragging: {
+        true: "border-solid border-govuk-black bg-govuk-light-grey",
+        false: ""
+      },
+      error: {
+        true: "border-govuk-error",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      empty: true,
+      dragging: false,
+      error: false
+    }
+  }
+);
+var statusStyles = [
+  "block mb-govuk-2 px-govuk-2 py-govuk-3",
+  "text-left wrap-break-word font-govuk text-govuk-body"
+];
+var pseudoButtonStyles = [
+  "inline-block leading-none",
+  "px-govuk-button-x pt-govuk-button-pt pb-govuk-button-pb",
+  "mr-govuk-2 mb-govuk-file-upload-pseudo-mb",
+  "border-2 border-transparent",
+  "font-govuk text-govuk-body",
+  "bg-govuk-light-grey text-govuk-black shadow-govuk-light-grey",
+  "group-hover:bg-govuk-mid-grey",
+  "group-focus:bg-govuk-yellow group-focus:shadow-govuk-yellow"
+];
+var instructionStyles = [
+  "inline-block mt-govuk-file-upload-instruction-mt mb-0",
+  "text-left font-govuk text-govuk-body text-govuk-black"
+];
+var FileUpload = ({
+  className,
+  id,
+  name,
+  disabled = false,
+  error = false,
+  multiple,
+  chooseFileButtonText = "Choose file",
+  dropInstructionText = "or drop file",
+  noFileChosenText = "No file chosen",
+  onChange,
+  ref,
+  ...props
+}) => {
+  const internalRef = useRef(null);
+  const [status, setStatus] = useState(noFileChosenText);
+  const [empty, setEmpty] = useState(true);
+  const [dragging, setDragging] = useState(false);
+  const generatedId = useId();
+  const buttonId = id ?? generatedId;
+  const inputId = `${buttonId}-input`;
+  const setRefs = (node) => {
+    internalRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  const updateFromFiles = (files) => {
+    if (!files || files.length === 0) {
+      setStatus(noFileChosenText);
+      setEmpty(true);
+    } else if (files.length === 1) {
+      setStatus(files[0].name);
+      setEmpty(false);
+    } else {
+      setStatus(`${files.length} files chosen`);
+      setEmpty(false);
+    }
+  };
+  const handleChange = (event) => {
+    updateFromFiles(event.target.files);
+    onChange?.(event);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setDragging(false);
+    if (disabled) {
+      return;
+    }
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles.length > 0 && internalRef.current) {
+      internalRef.current.files = droppedFiles;
+      updateFromFiles(droppedFiles);
+      internalRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative block",
+        disabled && "cursor-not-allowed",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: buttonId,
+            disabled,
+            onClick: () => internalRef.current?.click(),
+            onDragOver: (event) => event.preventDefault(),
+            onDragEnter: () => !disabled && setDragging(true),
+            onDragLeave: () => setDragging(false),
+            onDrop: handleDrop,
+            className: fileUploadButtonVariants({ empty, dragging, error }),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-live": "polite",
+                  className: cn(
+                    statusStyles,
+                    empty ? "bg-govuk-tag-blue-bg text-govuk-black" : "bg-govuk-brand text-white"
+                  ),
+                  children: status
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-baseline", children: [
+                /* @__PURE__ */ jsx("span", { className: cn(pseudoButtonStyles), children: chooseFileButtonText }),
+                /* @__PURE__ */ jsx("span", { className: cn(instructionStyles), children: dropInstructionText })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: setRefs,
+            id: inputId,
+            name,
+            type: "file",
+            multiple,
+            disabled,
+            hidden: true,
+            onChange: handleChange,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { FileUpload, fileUploadButtonVariants };