whitehall-ui 1.0.0

package/dist/chunk-PGZHPAT5.js

@@ -0,0 +1,183 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+import { useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Accordion = ({
+  className,
+  ref,
+  children,
+  showAllSections,
+  defaultValue,
+  ...props
+}) => {
+  const [openSections, setOpenSections] = useState(
+    defaultValue ?? []
+  );
+  const allOpen = showAllSections !== void 0 && showAllSections.length > 0 && showAllSections.every((v) => openSections.includes(v));
+  const handleToggleAll = useCallback(() => {
+    if (allOpen) {
+      setOpenSections([]);
+    } else {
+      setOpenSections(showAllSections ?? []);
+    }
+  }, [allOpen, showAllSections]);
+  return /* @__PURE__ */ jsxs(
+    Accordion$1.Root,
+    {
+      ref,
+      multiple: true,
+      value: openSections,
+      onValueChange: setOpenSections,
+      className: cn(
+        "mb-govuk-6 font-govuk text-govuk-body text-govuk-black",
+        "border-b border-govuk-mid-grey",
+        className
+      ),
+      ...props,
+      children: [
+        showAllSections && /* @__PURE__ */ jsx("div", { className: "pb-govuk-1", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleToggleAll,
+            "aria-expanded": allOpen,
+            className: cn(
+              "group inline-flex items-center",
+              "py-govuk-1 border-0 bg-transparent cursor-pointer",
+              "font-govuk text-govuk-body text-govuk-brand",
+              "hover:text-govuk-black hover:bg-govuk-light-grey",
+              "focus-visible:govuk-link-focus focus-visible:outline-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: cn(
+                    "transition-transform",
+                    allOpen ? "" : "rotate-180"
+                  ),
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "18",
+                  height: "18",
+                  viewBox: "0 0 20 20",
+                  "aria-hidden": "true",
+                  focusable: "false",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "fill-none stroke-current group-hover:fill-govuk-black group-hover:stroke-govuk-black",
+                        cx: "10",
+                        cy: "10",
+                        r: "9",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "polyline",
+                      {
+                        className: "fill-none stroke-current group-hover:stroke-govuk-light-grey",
+                        points: "6.5 8.5 10 12 13.5 8.5",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ml-govuk-1", children: allOpen ? "Hide all sections" : "Show all sections" })
+            ]
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+};
+var AccordionSection = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(Accordion$1.Item, { ref, className: cn(className), ...props, children });
+var AccordionHeading = ({
+  className,
+  ref,
+  children,
+  summary,
+  ...props
+}) => /* @__PURE__ */ jsx(Accordion$1.Header, { render: /* @__PURE__ */ jsx("h2", {}), className: "m-0 p-0", children: /* @__PURE__ */ jsxs(
+  Accordion$1.Trigger,
+  {
+    ref,
+    className: cn(
+      "group w-full",
+      "pt-govuk-2 pb-govuk-2 govuk-accordion-button-border",
+      "bg-transparent cursor-pointer text-left",
+      "hover:bg-govuk-light-grey",
+      "focus-visible:outline-none",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "block mb-govuk-2", children: /* @__PURE__ */ jsx("span", { className: "text-govuk-heading-m font-bold text-govuk-black group-focus-visible:govuk-link-focus", children }) }),
+      summary && /* @__PURE__ */ jsx("span", { className: "block mb-govuk-2", children: /* @__PURE__ */ jsx("span", { className: "text-govuk-body text-govuk-dark-grey group-focus-visible:govuk-link-focus", children: summary }) }),
+      /* @__PURE__ */ jsx("span", { className: "block mb-govuk-2", children: /* @__PURE__ */ jsxs("span", { className: "group-focus-visible:govuk-link-focus inline-flex items-center text-govuk-body text-govuk-brand group-hover:text-govuk-black", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "govuk-accordion-chevron transition-transform group-data-panel-open:rotate-180",
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "18",
+            height: "18",
+            viewBox: "0 0 20 20",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "fill-none stroke-current group-hover:fill-govuk-black group-hover:stroke-govuk-black",
+                  cx: "10",
+                  cy: "10",
+                  r: "9",
+                  strokeWidth: "1"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "polyline",
+                {
+                  className: "fill-none stroke-current group-hover:stroke-govuk-light-grey",
+                  points: "6.5 8.5 10 12 13.5 8.5",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ml-govuk-1 group-data-panel-open:hidden", children: "Show" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-govuk-1 hidden group-data-panel-open:inline", children: "Hide" })
+      ] }) })
+    ]
+  }
+) });
+var AccordionContent = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Accordion$1.Panel,
+  {
+    ref,
+    className: cn("pt-govuk-3 pb-govuk-8 *:last:mb-0", className),
+    ...props,
+    children
+  }
+);
+
+export { Accordion, AccordionContent, AccordionHeading, AccordionSection };

package/dist/chunk-QTSEOPVX.js

@@ -0,0 +1,94 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { Input } from '@base-ui/react/input';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var textInputVariants = cva(
+  [
+    "box-border w-full",
+    "h-10",
+    "p-govuk-1",
+    "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",
+    "data-[disabled]:opacity-50 data-[disabled]:bg-transparent data-[disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      width: {
+        full: "",
+        30: "max-w-govuk-input-width-30",
+        20: "max-w-govuk-input-width-20",
+        10: "max-w-govuk-input-width-10",
+        5: "max-w-govuk-input-width-5",
+        4: "max-w-govuk-input-width-4",
+        3: "max-w-govuk-input-width-3",
+        2: "max-w-govuk-input-width-2"
+      },
+      error: {
+        true: "border-govuk-error focus:border-govuk-black",
+        false: ""
+      },
+      extraLetterSpacing: {
+        true: "tracking-govuk-code tabular-nums",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      width: "full",
+      error: false,
+      extraLetterSpacing: false
+    }
+  }
+);
+var affixStyles = [
+  "box-border flex items-center justify-center",
+  "min-w-10 h-10",
+  "p-govuk-1",
+  "border-2 border-govuk-black",
+  "bg-govuk-light-grey",
+  "text-govuk-body font-normal font-govuk",
+  "text-center whitespace-nowrap",
+  "cursor-default flex-none",
+  "max-sm:block max-sm:h-auto max-sm:whitespace-normal"
+].join(" ");
+var prefixStyles = cn(affixStyles, "sm:border-r-0", "max-sm:border-b-0");
+var suffixStyles = cn(affixStyles, "sm:border-l-0", "max-sm:border-t-0");
+var TextInput = ({
+  className,
+  width = "full",
+  error = false,
+  extraLetterSpacing = false,
+  type = "text",
+  disabled = false,
+  prefix,
+  suffix,
+  ref,
+  ...props
+}) => {
+  const input = /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      type,
+      disabled,
+      className: cn(
+        textInputVariants({ width, error, extraLetterSpacing }),
+        (prefix || suffix) && "flex-auto focus:z-10 max-sm:max-w-full",
+        className
+      ),
+      ...props
+    }
+  );
+  if (!prefix && !suffix) return input;
+  return /* @__PURE__ */ jsxs("div", { className: "flex max-sm:block", children: [
+    prefix && /* @__PURE__ */ jsx("span", { className: prefixStyles, "aria-hidden": "true", children: prefix }),
+    input,
+    suffix && /* @__PURE__ */ jsx("span", { className: suffixStyles, "aria-hidden": "true", children: suffix })
+  ] });
+};
+
+export { TextInput, textInputVariants };

package/dist/chunk-RPV43YDC.js

@@ -0,0 +1,93 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var CookieBanner = ({
+  className,
+  ref,
+  children,
+  role = "region",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role,
+    "data-nosnippet": true,
+    className: cn(
+      "font-govuk text-govuk-body",
+      "pt-govuk-4",
+      "border-b-govuk-wide border-b-transparent",
+      "bg-govuk-light-grey",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CookieBannerMessage = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("max-w-240 mx-auto px-govuk-3", "-mb-govuk-2", className),
+    ...props,
+    children
+  }
+);
+var CookieBannerContent = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("sm:w-2/3", "mb-govuk-3", "*:last:mb-0", className),
+    ...props,
+    children
+  }
+);
+var CookieBannerHeading = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h2",
+  {
+    ref,
+    className: cn(
+      "text-govuk-heading-m font-bold text-govuk-black",
+      "m-0 mb-govuk-3",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CookieBannerActions = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col items-start",
+      "sm:flex-row sm:flex-wrap sm:items-baseline",
+      "gap-govuk-3",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { CookieBanner, CookieBannerActions, CookieBannerContent, CookieBannerHeading, CookieBannerMessage };

package/dist/chunk-SK27BMU5.js

@@ -0,0 +1,140 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { useId } from 'react';
+import { RadioGroup } from '@base-ui/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Radios = ({
+  className,
+  inline = false,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  RadioGroup,
+  {
+    className: cn(
+      inline && "sm:flex sm:flex-wrap sm:items-start sm:gap-x-5",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var RadiosItem = ({
+  className,
+  children,
+  value,
+  ...props
+}) => {
+  const labelId = useId();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "flex flex-wrap items-start",
+        "relative",
+        "mb-2.5 last:mb-0",
+        "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Radio.Root,
+          {
+            value,
+            "aria-labelledby": labelId,
+            className: cn(
+              "group/radio",
+              "relative flex-none",
+              "w-govuk-radio-touch-target h-govuk-radio-touch-target",
+              "cursor-pointer outline-none",
+              "data-disabled:cursor-not-allowed data-disabled:opacity-50"
+            ),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "absolute box-border",
+                    "top-[calc(var(--spacing-govuk-radio-gutter)/2)] left-[calc(var(--spacing-govuk-radio-gutter)/2)]",
+                    "w-govuk-radio-size h-govuk-radio-size",
+                    "rounded-full",
+                    "border-2 border-current bg-transparent",
+                    "group-focus/radio:border-4",
+                    "group-focus/radio:shadow-[0_0_0_var(--spacing-govuk-radio-focus-width)_var(--color-govuk-yellow)]",
+                    "group-focus/radio:outline-govuk-radio-focus-width group-focus/radio:outline-transparent group-focus/radio:outline-offset-1"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Radio.Indicator,
+                {
+                  keepMounted: true,
+                  className: cn(
+                    "absolute",
+                    "top-[calc(var(--spacing-govuk-radio-touch-target)/2-var(--spacing-govuk-radio-dot))]",
+                    "left-[calc(var(--spacing-govuk-radio-touch-target)/2-var(--spacing-govuk-radio-dot))]",
+                    "w-0 h-0",
+                    "rounded-full",
+                    "border-(length:--spacing-govuk-radio-dot) border-current",
+                    "bg-current",
+                    "opacity-0 data-checked:opacity-100"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: labelId,
+            className: cn(
+              "self-center",
+              "py-govuk-button-pb px-govuk-radio-label-padding-x",
+              "text-govuk-tag font-normal font-govuk",
+              "cursor-pointer"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var RadiosHint = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "block w-full",
+      "-mt-govuk-1",
+      "pr-govuk-radio-label-padding-x",
+      "pl-[calc(var(--spacing-govuk-radio-label-padding-x)+var(--spacing-govuk-radio-touch-target))]",
+      "text-govuk-tag font-normal font-govuk text-govuk-dark-grey",
+      className
+    ),
+    ...props
+  }
+);
+var RadiosDivider = ({
+  className,
+  children = "or",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "w-govuk-radio-size",
+      "mb-2.5",
+      "text-govuk-tag font-normal font-govuk text-govuk-black",
+      "text-center",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { Radios, RadiosDivider, RadiosHint, RadiosItem };

package/dist/chunk-TXGBUZB4.js

@@ -0,0 +1,44 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var tagVariants = cva(
+  [
+    "inline-block",
+    "px-govuk-tag-x pt-govuk-tag-pt pb-govuk-tag-pb",
+    "mt-govuk-tag-mt mb-govuk-tag-mb",
+    "rounded-govuk-tag",
+    "text-govuk-tag font-normal font-govuk",
+    "no-underline break-words",
+    "max-w-govuk-tag-max-width",
+    "forced-colors:font-bold"
+  ],
+  {
+    variants: {
+      colour: {
+        blue: "text-govuk-tag-blue bg-govuk-tag-blue-bg",
+        green: "text-govuk-tag-green bg-govuk-tag-green-bg",
+        teal: "text-govuk-tag-teal bg-govuk-tag-teal-bg",
+        purple: "text-govuk-tag-purple bg-govuk-tag-purple-bg",
+        magenta: "text-govuk-tag-magenta bg-govuk-tag-magenta-bg",
+        red: "text-govuk-tag-red bg-govuk-tag-red-bg",
+        orange: "text-govuk-tag-orange bg-govuk-tag-orange-bg",
+        yellow: "text-govuk-tag-yellow bg-govuk-tag-yellow-bg",
+        grey: "text-govuk-black bg-govuk-grey"
+      }
+    },
+    defaultVariants: {
+      colour: "blue"
+    }
+  }
+);
+var Tag = ({ className, colour = "blue", ref, ...props }) => /* @__PURE__ */ jsx(
+  "strong",
+  {
+    ref,
+    className: cn(tagVariants({ colour }), className),
+    ...props
+  }
+);
+
+export { Tag, tagVariants };

package/dist/chunk-UWQFFFTB.js

@@ -0,0 +1,136 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { useId } from 'react';
+import { Checkbox } from '@base-ui/react/checkbox';
+import { CheckboxGroup } from '@base-ui/react/checkbox-group';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Checkboxes = ({ className, children, ...props }) => /* @__PURE__ */ jsx(CheckboxGroup, { className: cn(className), ...props, children });
+var CheckboxesItem = ({
+  className,
+  children,
+  value,
+  small = false,
+  ...props
+}) => {
+  const labelId = useId();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "flex flex-wrap items-start",
+        "relative",
+        small ? "group/item mb-0" : "mb-2.5 last:mb-0",
+        "cursor-pointer touch-action-manipulation",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Checkbox.Root,
+          {
+            value,
+            "aria-labelledby": labelId,
+            className: cn(
+              "group/checkbox",
+              "relative flex-none",
+              "w-govuk-checkbox-touch-target h-govuk-checkbox-touch-target",
+              "cursor-pointer outline-none"
+            ),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "absolute box-border",
+                    small ? "top-govuk-checkbox-small-box-offset left-govuk-checkbox-small-box-offset w-govuk-checkbox-small-size h-govuk-checkbox-small-size" : "top-[calc(var(--spacing-govuk-checkbox-gutter)/2)] left-[calc(var(--spacing-govuk-checkbox-gutter)/2)] w-govuk-checkbox-size h-govuk-checkbox-size",
+                    "border-2 border-current bg-transparent",
+                    "govuk-checkbox-composed-shadow",
+                    "group-focus/checkbox:border-4",
+                    "group-focus/checkbox:govuk-checkbox-focus-shadow",
+                    "group-focus/checkbox:outline-3 group-focus/checkbox:outline-transparent group-focus/checkbox:outline-offset-1",
+                    small && "group-hover/item:govuk-checkbox-small-hover"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Checkbox.Indicator,
+                {
+                  keepMounted: true,
+                  className: cn(
+                    "absolute box-border",
+                    small ? "top-govuk-checkbox-small-check-top left-govuk-checkbox-small-check-left w-govuk-checkbox-small-check-width h-govuk-checkbox-small-check-height govuk-checkmark-small" : "top-govuk-checkbox-check-top left-govuk-checkbox-check-left w-govuk-checkbox-check-width h-govuk-checkbox-check-height govuk-checkmark",
+                    "opacity-0 data-checked:opacity-100"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: labelId,
+            className: cn(
+              "self-center",
+              "py-govuk-checkbox-label-padding-y px-govuk-checkbox-label-padding-x",
+              "text-govuk-tag font-normal font-govuk",
+              "cursor-pointer"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var CheckboxesHint = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "block w-full",
+      "-mt-govuk-1",
+      "pr-govuk-checkbox-label-padding-x",
+      "pl-[calc(var(--spacing-govuk-checkbox-label-padding-x)+var(--spacing-govuk-checkbox-touch-target))]",
+      "text-govuk-tag font-normal font-govuk text-govuk-dark-grey",
+      className
+    ),
+    ...props
+  }
+);
+var CheckboxesDivider = ({
+  className,
+  children = "or",
+  small = false,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      small ? "w-govuk-checkbox-small-size mb-govuk-1" : "w-govuk-checkbox-size mb-govuk-2",
+      "text-govuk-tag font-normal font-govuk text-govuk-black",
+      "text-center",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CheckboxesConditional = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "ml-govuk-checkbox-conditional-ml pl-govuk-checkbox-conditional-pl",
+      "mb-5",
+      "border-l-2 border-govuk-grey",
+      "*:last:mb-0",
+      className
+    ),
+    ...props
+  }
+);
+
+export { Checkboxes, CheckboxesConditional, CheckboxesDivider, CheckboxesHint, CheckboxesItem };