whitehall-ui 1.0.0

package/README.md

@@ -0,0 +1,108 @@
+# Whitehall-UI
+
+GOV.UK Design System component library for **React 19** + **Tailwind CSS 4**.
+
+Distributed two ways:
+
+- **npm package** — install `whitehall-ui` and import components.
+- **shadcn registry** — copy component source straight into your project with the shadcn CLI.
+
+**Live Storybook & full component list:** https://dawidmakos.github.io/whitehall-ui/
+
+---
+
+## Requirements
+
+These are peer dependencies — install them in your app:
+
+```bash
+npm install react@^19 react-dom@^19 tailwindcss@^4 @base-ui/react
+```
+
+---
+
+## Option A — npm package
+
+### 1. Install
+
+```bash
+npm install whitehall-ui
+```
+
+### 2. Load the theme tokens
+
+Import the GOV.UK design tokens in your CSS entry point, **after** Tailwind:
+
+```css
+@import 'tailwindcss';
+@import 'whitehall-ui/tokens.css';
+```
+
+### 3. Use a component
+
+Import from the package root:
+
+```tsx
+import { Button, TextInput, Label } from 'whitehall-ui';
+
+export function Example() {
+  return (
+    <form>
+      <Label htmlFor='name'>Full name</Label>
+      <TextInput id='name' name='name' />
+      <Button>Continue</Button>
+    </form>
+  );
+}
+```
+
+Per-component subpath imports also work (better tree-shaking):
+
+```tsx
+import { Button } from 'whitehall-ui/button';
+```
+
+---
+
+## Option B — shadcn registry
+
+Copy the component source into your own codebase (fully editable, no runtime dependency on the package).
+
+### 1. Add the theme tokens (once)
+
+```bash
+npx shadcn@latest add https://dawidmakos.github.io/whitehall-ui/r/govuk-tokens.json
+```
+
+### 2. Add components
+
+```bash
+npx shadcn@latest add https://dawidmakos.github.io/whitehall-ui/r/button.json
+npx shadcn@latest add https://dawidmakos.github.io/whitehall-ui/r/text-input.json
+```
+
+Swap `button` / `text-input` for any component name below. The CLI resolves each component's dependencies (e.g. the `cn` util) automatically.
+
+### 3. Use it
+
+```tsx
+import { Button } from '@/components/ui/button';
+
+export function Example() {
+  return <Button>Continue</Button>;
+}
+```
+
+---
+
+## Available components
+
+`accordion` · `back-link` · `breadcrumbs` · `button` · `character-count` · `checkboxes` · `cookie-banner` · `date-input` · `details` · `error-message` · `error-summary` · `exit-this-page` · `fieldset` · `file-upload` · `footer` · `generic-header` · `header` · `hint` · `inset-text` · `label` · `link` · `notification-banner` · `pagination` · `panel` · `password-input` · `phase-banner` · `radios` · `select` · `service-navigation` · `skip-link` · `summary-list` · `table` · `tabs` · `tag` · `task-list` · `text-input` · `textarea` · `warning-text`
+
+See the [Storybook](https://dawidmakos.github.io/whitehall-ui/) for props and live examples.
+
+---
+
+## License
+
+MIT

package/dist/chunk-2QKZ6DPC.js

@@ -0,0 +1,27 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var SkipLink = ({
+  className,
+  ref,
+  children = "Skip to main content",
+  href = "#main-content",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    href,
+    className: cn(
+      "govuk-skip-link",
+      "font-govuk text-govuk-header leading-tight",
+      "block py-govuk-2 px-govuk-3",
+      "text-govuk-black no-underline",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { SkipLink };

package/dist/chunk-3INCIYDO.js

@@ -0,0 +1,213 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var SummaryList = ({
+  className,
+  noBorder,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "dl",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-body text-govuk-black",
+      "m-0 mb-govuk-6",
+      "sm:table sm:w-full sm:table-fixed sm:border-collapse",
+      noBorder && "[&_div]:border-0 sm:[&_dt]:pb-2.75 sm:[&_dd]:pb-2.75",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListRow = ({
+  className,
+  noBorder,
+  noActions,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "border-b border-govuk-mid-grey",
+      "max-sm:mb-govuk-3",
+      "sm:table-row",
+      noBorder && "border-0 sm:[&>dt]:pb-2.75 sm:[&>dd]:pb-2.75",
+      noActions && 'sm:after:content-[""] sm:after:table-cell sm:after:w-[20%]',
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListKey = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "dt",
+  {
+    ref,
+    className: cn(
+      "m-0 mb-govuk-1 font-bold",
+      "wrap-break-word",
+      "sm:table-cell sm:pt-govuk-2 sm:pr-govuk-4 sm:pb-govuk-2 sm:align-top sm:w-[30%]",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListValue = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "dd",
+  {
+    ref,
+    className: cn(
+      "m-0 max-sm:mb-govuk-3",
+      "wrap-break-word",
+      "sm:table-cell sm:pt-govuk-2 sm:pr-govuk-4 sm:pb-govuk-2 sm:align-top",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListActions = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "dd",
+  {
+    ref,
+    className: cn(
+      "m-0 mb-govuk-3",
+      "sm:table-cell sm:pt-govuk-2 sm:pb-govuk-2 sm:w-[20%] sm:text-right sm:align-top",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListCard = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("mb-govuk-6 border border-govuk-mid-grey", className),
+    ...props,
+    children
+  }
+);
+var SummaryListCardTitle = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h2",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-body font-bold text-govuk-black",
+      "m-0 mr-govuk-4 mb-govuk-1",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListCardHeader = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "p-govuk-3 sm:px-govuk-4",
+      "border-b border-transparent bg-govuk-light-grey",
+      "sm:flex sm:flex-nowrap sm:justify-between",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListCardActions = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-body font-bold",
+      "m-0 my-govuk-1 p-0 list-none",
+      "flex flex-wrap gap-y-govuk-2",
+      "sm:justify-end sm:text-right",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListCardAction = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    className: cn(
+      "inline",
+      "max-sm:mr-govuk-2 max-sm:pr-govuk-2 max-sm:border-r max-sm:border-govuk-mid-grey max-sm:last:mr-0 max-sm:last:pr-0 max-sm:last:border-0",
+      "sm:ml-govuk-2 sm:pl-govuk-2 sm:first:ml-0 sm:first:pl-0 sm:first:border-0 sm:not-first:border-l sm:not-first:border-govuk-mid-grey",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var SummaryListCardContent = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "pt-govuk-3 px-govuk-3 sm:px-govuk-4 sm:pb-govuk-3",
+      "[&_dl]:mb-0 [&_dl_div:last-of-type]:mb-0 [&_dl_div:last-of-type]:border-b-0",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { SummaryList, SummaryListActions, SummaryListCard, SummaryListCardAction, SummaryListCardActions, SummaryListCardContent, SummaryListCardHeader, SummaryListCardTitle, SummaryListKey, SummaryListRow, SummaryListValue };

package/dist/chunk-3YIKJK6M.js

@@ -0,0 +1,181 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { useState, useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var serviceNavigationLinkStyles = [
+  "font-govuk cursor-pointer",
+  "no-underline hover:underline",
+  "hover:govuk-link-underline hover:govuk-link-underline-hover",
+  "focus:govuk-link-focus"
+];
+var itemStyles = [
+  "relative my-govuk-2",
+  "sm:my-0 sm:inline-block sm:py-govuk-3",
+  "sm:not-last:mr-govuk-6"
+];
+var ServiceNavigation = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "section",
+  {
+    ref,
+    "aria-label": props["aria-label"] ?? "Service information",
+    className: cn(
+      "font-govuk text-govuk-body text-govuk-black",
+      "border-b border-b-govuk-mid-grey",
+      "bg-govuk-light-grey",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var ServiceNavigationContainer = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "max-w-240 mx-auto px-govuk-3",
+      "flex flex-col items-start",
+      "sm:flex-row sm:flex-wrap",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var ServiceNavigationServiceName = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      itemStyles,
+      "font-bold",
+      "text-govuk-black visited:text-govuk-black hover:text-govuk-black",
+      serviceNavigationLinkStyles,
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var ServiceNavigationNav = ({
+  className,
+  ref,
+  children,
+  menuButtonText = "Menu",
+  ...props
+}) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const listId = useId();
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref,
+      "aria-label": props["aria-label"] ?? menuButtonText,
+      className: cn("max-sm:w-full sm:grow", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "sm:hidden inline-flex items-center gap-govuk-1",
+              "my-govuk-2 p-0",
+              "font-govuk text-govuk-body font-bold",
+              "bg-transparent border-0 text-govuk-brand cursor-pointer",
+              "hover:underline focus:govuk-link-focus"
+            ),
+            onClick: () => setMenuOpen((prev) => !prev),
+            "aria-expanded": menuOpen,
+            "aria-controls": listId,
+            children: [
+              menuButtonText,
+              /* @__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",
+          {
+            id: listId,
+            className: cn(
+              "list-none m-0 mb-govuk-3 p-0",
+              "sm:flex sm:flex-wrap sm:mb-0",
+              menuOpen ? "max-sm:block" : "max-sm:hidden"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var ServiceNavigationItem = ({
+  className,
+  active,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    className: cn(
+      itemStyles,
+      "border-govuk-brand",
+      active && [
+        "max-sm:-ml-govuk-3 max-sm:pl-govuk-2 max-sm:border-l-govuk-standard",
+        "sm:border-b-govuk-standard sm:pb-govuk-2"
+      ],
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var ServiceNavigationLink = ({
+  className,
+  ref,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    ref,
+    className: cn(
+      "text-govuk-brand visited:text-govuk-brand hover:text-govuk-brand-hover",
+      serviceNavigationLinkStyles,
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { ServiceNavigation, ServiceNavigationContainer, ServiceNavigationItem, ServiceNavigationLink, ServiceNavigationNav, ServiceNavigationServiceName };

package/dist/chunk-4MXR4WNS.js

@@ -0,0 +1,17 @@
+import { cn } from './chunk-WONVZ7WK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var Hint = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "font-govuk text-govuk-body text-govuk-dark-grey",
+      "mb-govuk-3",
+      className
+    ),
+    ...props
+  }
+);
+
+export { Hint };