whitehall-ui 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -0
- package/dist/chunk-2QKZ6DPC.js +27 -0
- package/dist/chunk-3INCIYDO.js +213 -0
- package/dist/chunk-3YIKJK6M.js +181 -0
- package/dist/chunk-4MXR4WNS.js +17 -0
- package/dist/chunk-5AKGRLG2.js +190 -0
- package/dist/chunk-5H55YDJS.js +69 -0
- package/dist/chunk-5PIQJ22R.js +106 -0
- package/dist/chunk-5TI2WXYU.js +64 -0
- package/dist/chunk-5XNKIBMP.js +21 -0
- package/dist/chunk-6VXVJERU.js +38 -0
- package/dist/chunk-72PH2FMG.js +180 -0
- package/dist/chunk-7ZCZQN5N.js +71 -0
- package/dist/chunk-AO6HPG4R.js +50 -0
- package/dist/chunk-CEPBVMFU.js +34 -0
- package/dist/chunk-G6T44BDV.js +75 -0
- package/dist/chunk-GUZIKVAE.js +119 -0
- package/dist/chunk-JESMK3XK.js +105 -0
- package/dist/chunk-JFZN5XP6.js +88 -0
- package/dist/chunk-KD4LPFIZ.js +67 -0
- package/dist/chunk-KWAC6IEK.js +95 -0
- package/dist/chunk-LRNZYPC2.js +107 -0
- package/dist/chunk-M6CLPMRP.js +227 -0
- package/dist/chunk-N67H5OUQ.js +51 -0
- package/dist/chunk-NRXTKHI2.js +169 -0
- package/dist/chunk-OP35ZJ4X.js +46 -0
- package/dist/chunk-P4GCF5FQ.js +62 -0
- package/dist/chunk-PGZHPAT5.js +183 -0
- package/dist/chunk-QTSEOPVX.js +94 -0
- package/dist/chunk-RPV43YDC.js +93 -0
- package/dist/chunk-SK27BMU5.js +140 -0
- package/dist/chunk-TXGBUZB4.js +44 -0
- package/dist/chunk-UWQFFFTB.js +136 -0
- package/dist/chunk-VB6V3PHD.js +67 -0
- package/dist/chunk-VQOCX44T.js +41 -0
- package/dist/chunk-WONVZ7WK.js +29 -0
- package/dist/chunk-WPPWPEFV.js +150 -0
- package/dist/chunk-XQOYWPKV.js +48 -0
- package/dist/chunk-YAKI4SI7.js +205 -0
- package/dist/chunk-YCLGXX3R.js +68 -0
- package/dist/index.d.ts +50 -0
- package/dist/index.js +39 -0
- package/dist/lib/utils.d.ts +5 -0
- package/dist/lib/utils.js +1 -0
- package/dist/ui/accordion.d.ts +27 -0
- package/dist/ui/accordion.js +2 -0
- package/dist/ui/back-link.d.ts +9 -0
- package/dist/ui/back-link.js +2 -0
- package/dist/ui/breadcrumbs.d.ts +22 -0
- package/dist/ui/breadcrumbs.js +2 -0
- package/dist/ui/button.d.ts +17 -0
- package/dist/ui/button.js +2 -0
- package/dist/ui/character-count.d.ts +27 -0
- package/dist/ui/character-count.js +3 -0
- package/dist/ui/checkboxes.d.ts +30 -0
- package/dist/ui/checkboxes.js +2 -0
- package/dist/ui/cookie-banner.d.ts +24 -0
- package/dist/ui/cookie-banner.js +2 -0
- package/dist/ui/date-input.d.ts +21 -0
- package/dist/ui/date-input.js +2 -0
- package/dist/ui/details.d.ts +20 -0
- package/dist/ui/details.js +2 -0
- package/dist/ui/error-message.d.ts +9 -0
- package/dist/ui/error-message.js +2 -0
- package/dist/ui/error-summary.d.ts +15 -0
- package/dist/ui/error-summary.js +2 -0
- package/dist/ui/exit-this-page.d.ts +14 -0
- package/dist/ui/exit-this-page.js +3 -0
- package/dist/ui/fieldset.d.ts +22 -0
- package/dist/ui/fieldset.js +2 -0
- package/dist/ui/file-upload.d.ts +19 -0
- package/dist/ui/file-upload.js +2 -0
- package/dist/ui/footer.d.ts +61 -0
- package/dist/ui/footer.js +2 -0
- package/dist/ui/generic-header.d.ts +22 -0
- package/dist/ui/generic-header.js +2 -0
- package/dist/ui/header.d.ts +39 -0
- package/dist/ui/header.js +2 -0
- package/dist/ui/hint.d.ts +8 -0
- package/dist/ui/hint.js +2 -0
- package/dist/ui/inset-text.d.ts +8 -0
- package/dist/ui/inset-text.js +2 -0
- package/dist/ui/label.d.ts +18 -0
- package/dist/ui/label.js +2 -0
- package/dist/ui/link.d.ts +16 -0
- package/dist/ui/link.js +2 -0
- package/dist/ui/notification-banner.d.ts +29 -0
- package/dist/ui/notification-banner.js +2 -0
- package/dist/ui/pagination.d.ts +45 -0
- package/dist/ui/pagination.js +2 -0
- package/dist/ui/panel.d.ts +16 -0
- package/dist/ui/panel.js +2 -0
- package/dist/ui/password-input.d.ts +16 -0
- package/dist/ui/password-input.js +4 -0
- package/dist/ui/phase-banner.d.ts +20 -0
- package/dist/ui/phase-banner.js +2 -0
- package/dist/ui/radios.d.ts +25 -0
- package/dist/ui/radios.js +2 -0
- package/dist/ui/select.d.ts +36 -0
- package/dist/ui/select.js +2 -0
- package/dist/ui/service-navigation.d.ts +30 -0
- package/dist/ui/service-navigation.js +2 -0
- package/dist/ui/skip-link.d.ts +8 -0
- package/dist/ui/skip-link.js +2 -0
- package/dist/ui/summary-list.d.ts +49 -0
- package/dist/ui/summary-list.js +2 -0
- package/dist/ui/table.d.ts +40 -0
- package/dist/ui/table.js +2 -0
- package/dist/ui/tabs.d.ts +25 -0
- package/dist/ui/tabs.js +2 -0
- package/dist/ui/tag.d.ts +15 -0
- package/dist/ui/tag.js +2 -0
- package/dist/ui/task-list.d.ts +30 -0
- package/dist/ui/task-list.js +2 -0
- package/dist/ui/text-input.d.ts +18 -0
- package/dist/ui/text-input.js +2 -0
- package/dist/ui/textarea.d.ts +14 -0
- package/dist/ui/textarea.js +2 -0
- package/dist/ui/warning-text.d.ts +9 -0
- package/dist/ui/warning-text.js +2 -0
- package/package.json +263 -0
- package/registry/default/theme/govuk-tokens.css +434 -0
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { cn } from './chunk-WONVZ7WK.js';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
var fieldsetLegendVariants = cva(
|
|
6
|
+
[
|
|
7
|
+
"box-border",
|
|
8
|
+
"table",
|
|
9
|
+
"max-w-full",
|
|
10
|
+
"p-0",
|
|
11
|
+
"font-govuk text-govuk-black",
|
|
12
|
+
"whitespace-normal"
|
|
13
|
+
],
|
|
14
|
+
{
|
|
15
|
+
variants: {
|
|
16
|
+
size: {
|
|
17
|
+
xl: "text-govuk-heading-xl font-bold mb-govuk-3",
|
|
18
|
+
l: "text-govuk-heading-l font-bold mb-govuk-3",
|
|
19
|
+
m: "text-govuk-heading-m font-bold mb-govuk-3",
|
|
20
|
+
s: "text-govuk-body font-bold mb-govuk-2"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
defaultVariants: {
|
|
24
|
+
size: void 0
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
var Fieldset = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
|
|
29
|
+
"fieldset",
|
|
30
|
+
{
|
|
31
|
+
ref,
|
|
32
|
+
className: cn("min-w-0 m-0 p-0 border-0", className),
|
|
33
|
+
...props
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
var FieldsetLegend = ({
|
|
37
|
+
className,
|
|
38
|
+
size,
|
|
39
|
+
ref,
|
|
40
|
+
...props
|
|
41
|
+
}) => /* @__PURE__ */ jsx(
|
|
42
|
+
"legend",
|
|
43
|
+
{
|
|
44
|
+
ref,
|
|
45
|
+
className: cn(
|
|
46
|
+
fieldsetLegendVariants({ size }),
|
|
47
|
+
!size && "text-govuk-body mb-govuk-2",
|
|
48
|
+
className
|
|
49
|
+
),
|
|
50
|
+
...props
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
var FieldsetHeading = ({
|
|
54
|
+
as: Tag = "h1",
|
|
55
|
+
className,
|
|
56
|
+
ref,
|
|
57
|
+
...props
|
|
58
|
+
}) => /* @__PURE__ */ jsx(
|
|
59
|
+
Tag,
|
|
60
|
+
{
|
|
61
|
+
ref,
|
|
62
|
+
className: cn("m-0 text-[length:inherit] font-[weight:inherit]", className),
|
|
63
|
+
...props
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
export { Fieldset, FieldsetHeading, FieldsetLegend, fieldsetLegendVariants };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { cn } from './chunk-WONVZ7WK.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var Panel = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx(
|
|
5
|
+
"div",
|
|
6
|
+
{
|
|
7
|
+
ref,
|
|
8
|
+
className: cn(
|
|
9
|
+
"font-govuk text-govuk-heading-l",
|
|
10
|
+
"box-border text-center",
|
|
11
|
+
"mb-govuk-3 p-govuk-7 max-sm:p-govuk-4",
|
|
12
|
+
"border-govuk-standard border-transparent",
|
|
13
|
+
"text-white bg-govuk-green",
|
|
14
|
+
"overflow-wrap-break-word",
|
|
15
|
+
className
|
|
16
|
+
),
|
|
17
|
+
...props,
|
|
18
|
+
children
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
var PanelTitle = ({
|
|
22
|
+
className,
|
|
23
|
+
ref,
|
|
24
|
+
children,
|
|
25
|
+
...props
|
|
26
|
+
}) => /* @__PURE__ */ jsx(
|
|
27
|
+
"h1",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
className: cn(
|
|
31
|
+
"text-govuk-heading-xl font-bold",
|
|
32
|
+
"mt-0 mb-govuk-6 last:mb-0",
|
|
33
|
+
className
|
|
34
|
+
),
|
|
35
|
+
...props,
|
|
36
|
+
children
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
var PanelBody = ({ className, ref, children, ...props }) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-govuk-heading-l", className), ...props, children });
|
|
40
|
+
|
|
41
|
+
export { Panel, PanelBody, PanelTitle };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
import { extendTailwindMerge } from 'tailwind-merge';
|
|
3
|
+
|
|
4
|
+
// registry/default/lib/utils.ts
|
|
5
|
+
var twMerge = extendTailwindMerge({
|
|
6
|
+
extend: {
|
|
7
|
+
classGroups: {
|
|
8
|
+
"font-size": [
|
|
9
|
+
{
|
|
10
|
+
text: [
|
|
11
|
+
"govuk-header",
|
|
12
|
+
"govuk-header-link",
|
|
13
|
+
"govuk-body",
|
|
14
|
+
"govuk-tag",
|
|
15
|
+
"govuk-start",
|
|
16
|
+
"govuk-heading-xl",
|
|
17
|
+
"govuk-heading-l",
|
|
18
|
+
"govuk-heading-m",
|
|
19
|
+
"govuk-warning-icon",
|
|
20
|
+
"govuk-phase-banner"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
var cn = (...inputs) => twMerge(clsx(inputs));
|
|
28
|
+
|
|
29
|
+
export { cn };
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { cn } from './chunk-WONVZ7WK.js';
|
|
2
|
+
import { Select as Select$1 } from '@base-ui/react/select';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var selectTriggerVariants = cva(
|
|
7
|
+
[
|
|
8
|
+
"box-border",
|
|
9
|
+
"w-full sm:w-auto max-w-full",
|
|
10
|
+
"h-10",
|
|
11
|
+
"py-1.25 pr-1.25 pl-2",
|
|
12
|
+
"border-2 border-govuk-black",
|
|
13
|
+
"rounded-none",
|
|
14
|
+
"appearance-none",
|
|
15
|
+
"text-govuk-body leading-tight font-normal font-govuk text-govuk-black",
|
|
16
|
+
"bg-white",
|
|
17
|
+
"inline-flex items-center",
|
|
18
|
+
"cursor-pointer",
|
|
19
|
+
"focus:outline-3 focus:outline-govuk-yellow focus:outline-offset-0",
|
|
20
|
+
"focus:inset-ring-2 focus:inset-ring-govuk-black",
|
|
21
|
+
"data-popup-open:outline-3 data-popup-open:outline-govuk-yellow data-popup-open:outline-offset-0",
|
|
22
|
+
"data-popup-open:inset-ring-2 data-popup-open:inset-ring-govuk-black",
|
|
23
|
+
"data-disabled:opacity-50 data-disabled:cursor-not-allowed"
|
|
24
|
+
],
|
|
25
|
+
{
|
|
26
|
+
variants: {
|
|
27
|
+
error: {
|
|
28
|
+
true: "border-govuk-error focus:border-govuk-black",
|
|
29
|
+
false: ""
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
defaultVariants: {
|
|
33
|
+
error: false
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
var Select = ({
|
|
38
|
+
children,
|
|
39
|
+
className,
|
|
40
|
+
error = false,
|
|
41
|
+
placeholder,
|
|
42
|
+
defaultValue,
|
|
43
|
+
value,
|
|
44
|
+
onValueChange,
|
|
45
|
+
disabled,
|
|
46
|
+
name,
|
|
47
|
+
required,
|
|
48
|
+
items,
|
|
49
|
+
"aria-label": ariaLabel,
|
|
50
|
+
"aria-labelledby": ariaLabelledBy
|
|
51
|
+
}) => /* @__PURE__ */ jsxs(
|
|
52
|
+
Select$1.Root,
|
|
53
|
+
{
|
|
54
|
+
defaultValue,
|
|
55
|
+
value,
|
|
56
|
+
onValueChange,
|
|
57
|
+
disabled,
|
|
58
|
+
name,
|
|
59
|
+
required,
|
|
60
|
+
items,
|
|
61
|
+
children: [
|
|
62
|
+
/* @__PURE__ */ jsxs(
|
|
63
|
+
Select$1.Trigger,
|
|
64
|
+
{
|
|
65
|
+
"aria-label": ariaLabel,
|
|
66
|
+
"aria-labelledby": ariaLabelledBy,
|
|
67
|
+
className: cn(selectTriggerVariants({ error }), className),
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ jsxs("span", { className: "relative flex-1 text-left", children: [
|
|
70
|
+
/* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
|
|
71
|
+
items && /* @__PURE__ */ jsx(
|
|
72
|
+
"span",
|
|
73
|
+
{
|
|
74
|
+
"aria-hidden": "true",
|
|
75
|
+
className: "invisible block h-0 overflow-hidden",
|
|
76
|
+
children: items.map((item) => /* @__PURE__ */ jsx("span", { className: "block whitespace-nowrap", children: item.label }, item.value))
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
] }),
|
|
80
|
+
/* @__PURE__ */ jsx(Select$1.Icon, { className: "ml-govuk-1 flex-none", children: /* @__PURE__ */ jsx(
|
|
81
|
+
"svg",
|
|
82
|
+
{
|
|
83
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
84
|
+
width: "16",
|
|
85
|
+
height: "16",
|
|
86
|
+
viewBox: "0 0 16 16",
|
|
87
|
+
fill: "none",
|
|
88
|
+
"aria-hidden": "true",
|
|
89
|
+
children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "2" })
|
|
90
|
+
}
|
|
91
|
+
) })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
|
|
96
|
+
Select$1.Positioner,
|
|
97
|
+
{
|
|
98
|
+
alignItemWithTrigger: false,
|
|
99
|
+
side: "bottom",
|
|
100
|
+
align: "start",
|
|
101
|
+
sideOffset: -2,
|
|
102
|
+
collisionPadding: 0,
|
|
103
|
+
positionMethod: "fixed",
|
|
104
|
+
className: "z-50",
|
|
105
|
+
children: /* @__PURE__ */ jsx(
|
|
106
|
+
Select$1.Popup,
|
|
107
|
+
{
|
|
108
|
+
className: cn(
|
|
109
|
+
"w-anchor box-border",
|
|
110
|
+
"border-2 border-govuk-black",
|
|
111
|
+
"max-h-60 overflow-y-auto",
|
|
112
|
+
"bg-white",
|
|
113
|
+
"outline-none"
|
|
114
|
+
),
|
|
115
|
+
children: /* @__PURE__ */ jsx(Select$1.List, { children })
|
|
116
|
+
}
|
|
117
|
+
)
|
|
118
|
+
}
|
|
119
|
+
) })
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
);
|
|
123
|
+
var SelectItem = ({
|
|
124
|
+
children,
|
|
125
|
+
className,
|
|
126
|
+
value,
|
|
127
|
+
label,
|
|
128
|
+
disabled,
|
|
129
|
+
...props
|
|
130
|
+
}) => /* @__PURE__ */ jsx(
|
|
131
|
+
Select$1.Item,
|
|
132
|
+
{
|
|
133
|
+
value,
|
|
134
|
+
label: label ?? (typeof children === "string" ? children : void 0),
|
|
135
|
+
disabled,
|
|
136
|
+
className: cn(
|
|
137
|
+
"py-govuk-1 pr-govuk-1 pl-2",
|
|
138
|
+
"text-govuk-body font-govuk text-govuk-black",
|
|
139
|
+
"cursor-pointer select-none",
|
|
140
|
+
"outline-none",
|
|
141
|
+
"data-highlighted:bg-govuk-brand data-highlighted:text-white",
|
|
142
|
+
"data-disabled:opacity-50 data-disabled:cursor-not-allowed",
|
|
143
|
+
className
|
|
144
|
+
),
|
|
145
|
+
...props,
|
|
146
|
+
children: /* @__PURE__ */ jsx(Select$1.ItemText, { children })
|
|
147
|
+
}
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
export { Select, SelectItem, selectTriggerVariants };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { cn } from './chunk-WONVZ7WK.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var PhaseBanner = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
|
|
5
|
+
"div",
|
|
6
|
+
{
|
|
7
|
+
ref,
|
|
8
|
+
className: cn("py-govuk-2 border-b border-govuk-mid-grey", className),
|
|
9
|
+
...props
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
var PhaseBannerContent = ({
|
|
13
|
+
className,
|
|
14
|
+
ref,
|
|
15
|
+
...props
|
|
16
|
+
}) => /* @__PURE__ */ jsx(
|
|
17
|
+
"p",
|
|
18
|
+
{
|
|
19
|
+
ref,
|
|
20
|
+
className: cn(
|
|
21
|
+
"table m-0 font-govuk text-govuk-phase-banner text-govuk-black",
|
|
22
|
+
className
|
|
23
|
+
),
|
|
24
|
+
...props
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
var PhaseBannerTag = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
|
|
28
|
+
"span",
|
|
29
|
+
{
|
|
30
|
+
ref,
|
|
31
|
+
className: cn("mr-govuk-3 sm:mr-govuk-2", className),
|
|
32
|
+
...props
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
var PhaseBannerText = ({
|
|
36
|
+
className,
|
|
37
|
+
ref,
|
|
38
|
+
...props
|
|
39
|
+
}) => /* @__PURE__ */ jsx(
|
|
40
|
+
"span",
|
|
41
|
+
{
|
|
42
|
+
ref,
|
|
43
|
+
className: cn("table-cell align-middle", className),
|
|
44
|
+
...props
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
export { PhaseBanner, PhaseBannerContent, PhaseBannerTag, PhaseBannerText };
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
import { cn } from './chunk-WONVZ7WK.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var footerLinkStyles = [
|
|
5
|
+
"underline govuk-link-underline",
|
|
6
|
+
"text-govuk-dark-grey visited:text-govuk-dark-grey",
|
|
7
|
+
"hover:govuk-link-underline-hover",
|
|
8
|
+
"focus:govuk-link-focus"
|
|
9
|
+
];
|
|
10
|
+
var Footer = ({ className, children, ref, ...props }) => /* @__PURE__ */ jsx(
|
|
11
|
+
"footer",
|
|
12
|
+
{
|
|
13
|
+
ref,
|
|
14
|
+
className: cn(
|
|
15
|
+
"font-govuk text-govuk-body text-govuk-dark-grey",
|
|
16
|
+
"border-t-govuk-wide border-t-govuk-brand",
|
|
17
|
+
"pt-govuk-7 sm:pt-govuk-8 pb-govuk-5 sm:pb-govuk-6",
|
|
18
|
+
"bg-govuk-light-grey",
|
|
19
|
+
className
|
|
20
|
+
),
|
|
21
|
+
...props,
|
|
22
|
+
children
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
var FooterContainer = ({
|
|
26
|
+
className,
|
|
27
|
+
fullWidth,
|
|
28
|
+
ref,
|
|
29
|
+
children,
|
|
30
|
+
...props
|
|
31
|
+
}) => /* @__PURE__ */ jsx(
|
|
32
|
+
"div",
|
|
33
|
+
{
|
|
34
|
+
ref,
|
|
35
|
+
className: cn(
|
|
36
|
+
fullWidth ? "px-govuk-3" : "max-w-240 mx-auto px-govuk-3",
|
|
37
|
+
className
|
|
38
|
+
),
|
|
39
|
+
...props,
|
|
40
|
+
children
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
var FooterNavigation = ({
|
|
44
|
+
className,
|
|
45
|
+
ref,
|
|
46
|
+
children,
|
|
47
|
+
...props
|
|
48
|
+
}) => /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...props, children });
|
|
49
|
+
var FooterSection = ({
|
|
50
|
+
className,
|
|
51
|
+
width = "full",
|
|
52
|
+
ref,
|
|
53
|
+
children,
|
|
54
|
+
...props
|
|
55
|
+
}) => {
|
|
56
|
+
const widthClasses = {
|
|
57
|
+
full: "w-full",
|
|
58
|
+
"one-half": "sm:inline-block sm:w-1/2 sm:align-top",
|
|
59
|
+
"one-third": "sm:inline-block sm:w-1/3 sm:align-top",
|
|
60
|
+
"two-thirds": "sm:inline-block sm:w-2/3 sm:align-top"
|
|
61
|
+
};
|
|
62
|
+
return /* @__PURE__ */ jsx(
|
|
63
|
+
"div",
|
|
64
|
+
{
|
|
65
|
+
ref,
|
|
66
|
+
className: cn(widthClasses[width], "mb-govuk-6", className),
|
|
67
|
+
...props,
|
|
68
|
+
children
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
var FooterHeading = ({
|
|
73
|
+
className,
|
|
74
|
+
ref,
|
|
75
|
+
children,
|
|
76
|
+
...props
|
|
77
|
+
}) => /* @__PURE__ */ jsx(
|
|
78
|
+
"h2",
|
|
79
|
+
{
|
|
80
|
+
ref,
|
|
81
|
+
className: cn(
|
|
82
|
+
"text-govuk-heading-m font-bold text-govuk-black",
|
|
83
|
+
"mb-govuk-6 pb-govuk-4 sm:pb-govuk-2",
|
|
84
|
+
"border-b border-govuk-mid-grey",
|
|
85
|
+
className
|
|
86
|
+
),
|
|
87
|
+
...props,
|
|
88
|
+
children
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
var FooterList = ({
|
|
92
|
+
className,
|
|
93
|
+
columns = 1,
|
|
94
|
+
ref,
|
|
95
|
+
children,
|
|
96
|
+
...props
|
|
97
|
+
}) => /* @__PURE__ */ jsx(
|
|
98
|
+
"ul",
|
|
99
|
+
{
|
|
100
|
+
ref,
|
|
101
|
+
className: cn(
|
|
102
|
+
"list-none m-0 p-0",
|
|
103
|
+
"gap-x-govuk-6",
|
|
104
|
+
columns === 2 && "sm:columns-2",
|
|
105
|
+
columns === 3 && "sm:columns-3",
|
|
106
|
+
className
|
|
107
|
+
),
|
|
108
|
+
...props,
|
|
109
|
+
children
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
var FooterListItem = ({
|
|
113
|
+
className,
|
|
114
|
+
ref,
|
|
115
|
+
children,
|
|
116
|
+
...props
|
|
117
|
+
}) => /* @__PURE__ */ jsx(
|
|
118
|
+
"li",
|
|
119
|
+
{
|
|
120
|
+
ref,
|
|
121
|
+
className: cn("mb-govuk-3 sm:mb-govuk-4", "last:mb-0", className),
|
|
122
|
+
...props,
|
|
123
|
+
children
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
var FooterLink = ({
|
|
127
|
+
className,
|
|
128
|
+
ref,
|
|
129
|
+
children,
|
|
130
|
+
...props
|
|
131
|
+
}) => /* @__PURE__ */ jsx("a", { ref, className: cn(footerLinkStyles, className), ...props, children });
|
|
132
|
+
var FooterSectionBreak = () => /* @__PURE__ */ jsx("hr", { className: "m-0 mb-govuk-6 sm:mb-govuk-8 border-0 border-b border-govuk-mid-grey" });
|
|
133
|
+
var FooterMeta = ({
|
|
134
|
+
className,
|
|
135
|
+
ref,
|
|
136
|
+
children,
|
|
137
|
+
...props
|
|
138
|
+
}) => /* @__PURE__ */ jsx(
|
|
139
|
+
"div",
|
|
140
|
+
{
|
|
141
|
+
ref,
|
|
142
|
+
className: cn("flex flex-wrap items-end justify-center", className),
|
|
143
|
+
...props,
|
|
144
|
+
children
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
var FooterMetaItem = ({
|
|
148
|
+
className,
|
|
149
|
+
grow,
|
|
150
|
+
ref,
|
|
151
|
+
children,
|
|
152
|
+
...props
|
|
153
|
+
}) => /* @__PURE__ */ jsx(
|
|
154
|
+
"div",
|
|
155
|
+
{
|
|
156
|
+
ref,
|
|
157
|
+
className: cn("mb-govuk-5", grow && "flex-1 max-sm:basis-80", className),
|
|
158
|
+
...props,
|
|
159
|
+
children
|
|
160
|
+
}
|
|
161
|
+
);
|
|
162
|
+
var FooterInlineList = ({
|
|
163
|
+
className,
|
|
164
|
+
ref,
|
|
165
|
+
children,
|
|
166
|
+
...props
|
|
167
|
+
}) => /* @__PURE__ */ jsx(
|
|
168
|
+
"ul",
|
|
169
|
+
{
|
|
170
|
+
ref,
|
|
171
|
+
className: cn("list-none m-0 mb-govuk-3 p-0", "last:mb-0", className),
|
|
172
|
+
...props,
|
|
173
|
+
children
|
|
174
|
+
}
|
|
175
|
+
);
|
|
176
|
+
var FooterInlineListItem = ({
|
|
177
|
+
className,
|
|
178
|
+
ref,
|
|
179
|
+
children,
|
|
180
|
+
...props
|
|
181
|
+
}) => /* @__PURE__ */ jsx(
|
|
182
|
+
"li",
|
|
183
|
+
{
|
|
184
|
+
ref,
|
|
185
|
+
className: cn("inline-block mr-govuk-3 mb-govuk-1", className),
|
|
186
|
+
...props,
|
|
187
|
+
children
|
|
188
|
+
}
|
|
189
|
+
);
|
|
190
|
+
var FooterContentLicence = ({
|
|
191
|
+
className,
|
|
192
|
+
ref,
|
|
193
|
+
children,
|
|
194
|
+
...props
|
|
195
|
+
}) => /* @__PURE__ */ jsx(
|
|
196
|
+
"span",
|
|
197
|
+
{
|
|
198
|
+
ref,
|
|
199
|
+
className: cn("inline-block text-balance", className),
|
|
200
|
+
...props,
|
|
201
|
+
children
|
|
202
|
+
}
|
|
203
|
+
);
|
|
204
|
+
|
|
205
|
+
export { Footer, FooterContainer, FooterContentLicence, FooterHeading, FooterInlineList, FooterInlineListItem, FooterLink, FooterList, FooterListItem, FooterMeta, FooterMetaItem, FooterNavigation, FooterSection, FooterSectionBreak };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { cn } from './chunk-WONVZ7WK.js';
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var ErrorSummary = ({
|
|
5
|
+
className,
|
|
6
|
+
titleText = "There is a problem",
|
|
7
|
+
descriptionText,
|
|
8
|
+
errorList,
|
|
9
|
+
ref,
|
|
10
|
+
...props
|
|
11
|
+
}) => /* @__PURE__ */ jsx(
|
|
12
|
+
"div",
|
|
13
|
+
{
|
|
14
|
+
ref,
|
|
15
|
+
tabIndex: -1,
|
|
16
|
+
className: cn(
|
|
17
|
+
"font-govuk text-govuk-body text-govuk-black",
|
|
18
|
+
"p-govuk-3 sm:p-govuk-4",
|
|
19
|
+
"mb-govuk-6 sm:mb-govuk-8",
|
|
20
|
+
"border-govuk-error-summary",
|
|
21
|
+
"focus:outline-3 focus:outline-govuk-yellow",
|
|
22
|
+
className
|
|
23
|
+
),
|
|
24
|
+
...props,
|
|
25
|
+
children: /* @__PURE__ */ jsxs("div", { role: "alert", children: [
|
|
26
|
+
/* @__PURE__ */ jsx(
|
|
27
|
+
"h2",
|
|
28
|
+
{
|
|
29
|
+
className: cn(
|
|
30
|
+
"text-govuk-heading-m font-bold",
|
|
31
|
+
"mt-0 mb-govuk-3 sm:mb-govuk-4"
|
|
32
|
+
),
|
|
33
|
+
children: titleText
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ jsxs(
|
|
37
|
+
"div",
|
|
38
|
+
{
|
|
39
|
+
className: cn(
|
|
40
|
+
"[&>p]:mb-0",
|
|
41
|
+
"[&>*+*]:mt-govuk-3 sm:[&>*+*]:mt-govuk-4",
|
|
42
|
+
"*:last:mb-govuk-1"
|
|
43
|
+
),
|
|
44
|
+
children: [
|
|
45
|
+
descriptionText && /* @__PURE__ */ jsx("p", { children: descriptionText }),
|
|
46
|
+
/* @__PURE__ */ jsx("ul", { className: "list-none p-0 m-0 [&>li]:mb-govuk-1 [&>li:last-child]:mb-0", children: errorList.map((item) => /* @__PURE__ */ jsx("li", { children: item.href ? /* @__PURE__ */ jsx(
|
|
47
|
+
"a",
|
|
48
|
+
{
|
|
49
|
+
href: item.href,
|
|
50
|
+
className: cn(
|
|
51
|
+
"font-bold",
|
|
52
|
+
"text-govuk-error visited:text-govuk-error",
|
|
53
|
+
"hover:text-govuk-error-hover",
|
|
54
|
+
"underline govuk-link-underline",
|
|
55
|
+
"hover:govuk-link-underline-hover",
|
|
56
|
+
"focus:govuk-link-focus"
|
|
57
|
+
),
|
|
58
|
+
children: item.text
|
|
59
|
+
}
|
|
60
|
+
) : /* @__PURE__ */ jsx("span", { className: "font-bold", children: item.text }) }, item.href ?? item.text)) })
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
)
|
|
64
|
+
] })
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
export { ErrorSummary };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export { cn } from './lib/utils.js';
|
|
2
|
+
export { Accordion, AccordionContent, AccordionContentProps, AccordionHeading, AccordionHeadingProps, AccordionProps, AccordionSection, AccordionSectionProps } from './ui/accordion.js';
|
|
3
|
+
export { BackLink, BackLinkProps } from './ui/back-link.js';
|
|
4
|
+
export { Breadcrumbs, BreadcrumbsLink, BreadcrumbsLinkProps, BreadcrumbsList, BreadcrumbsListItem, BreadcrumbsListItemProps, BreadcrumbsListProps, BreadcrumbsProps } from './ui/breadcrumbs.js';
|
|
5
|
+
export { Button, ButtonProps, ButtonVariant, buttonVariants } from './ui/button.js';
|
|
6
|
+
export { CharacterCount, CharacterCountMessage, CharacterCountMessageProps, CharacterCountProps } from './ui/character-count.js';
|
|
7
|
+
export { CookieBanner, CookieBannerActions, CookieBannerActionsProps, CookieBannerContent, CookieBannerContentProps, CookieBannerHeading, CookieBannerHeadingProps, CookieBannerMessage, CookieBannerMessageProps, CookieBannerProps } from './ui/cookie-banner.js';
|
|
8
|
+
export { Checkboxes, CheckboxesConditional, CheckboxesConditionalProps, CheckboxesDivider, CheckboxesDividerProps, CheckboxesHint, CheckboxesHintProps, CheckboxesItem, CheckboxesItemProps, CheckboxesProps } from './ui/checkboxes.js';
|
|
9
|
+
export { ErrorMessage, ErrorMessageProps } from './ui/error-message.js';
|
|
10
|
+
export { DateInput, DateInputInput, DateInputInputProps, DateInputItem, DateInputItemProps, DateInputLabel, DateInputLabelProps, DateInputProps } from './ui/date-input.js';
|
|
11
|
+
export { Details, DetailsProps, DetailsSummary, DetailsSummaryProps, DetailsText, DetailsTextProps } from './ui/details.js';
|
|
12
|
+
export { ErrorSummary, ErrorSummaryItem, ErrorSummaryProps } from './ui/error-summary.js';
|
|
13
|
+
export { ExitThisPage, ExitThisPageProps } from './ui/exit-this-page.js';
|
|
14
|
+
export { Fieldset, FieldsetHeading, FieldsetHeadingProps, FieldsetLegend, FieldsetLegendProps, FieldsetProps, fieldsetLegendVariants } from './ui/fieldset.js';
|
|
15
|
+
export { FileUpload, FileUploadProps } from './ui/file-upload.js';
|
|
16
|
+
export { Header, HeaderContainer, HeaderContainerProps, HeaderLink, HeaderLinkProps, HeaderLogo, HeaderLogoProps, HeaderNav, HeaderNavItem, HeaderNavItemProps, HeaderNavLink, HeaderNavLinkProps, HeaderNavProps, HeaderProps, HeaderServiceName, HeaderServiceNameProps } from './ui/header.js';
|
|
17
|
+
export { GenericHeader, GenericHeaderContainer, GenericHeaderContainerProps, GenericHeaderLink, GenericHeaderLinkProps, GenericHeaderLogo, GenericHeaderLogoProps, GenericHeaderProps } from './ui/generic-header.js';
|
|
18
|
+
export { Footer, FooterContainer, FooterContainerProps, FooterContentLicence, FooterContentLicenceProps, FooterHeading, FooterHeadingProps, FooterInlineList, FooterInlineListItem, FooterInlineListItemProps, FooterInlineListProps, FooterLink, FooterLinkProps, FooterList, FooterListItem, FooterListItemProps, FooterListProps, FooterMeta, FooterMetaItem, FooterMetaItemProps, FooterMetaProps, FooterNavigation, FooterNavigationProps, FooterProps, FooterSection, FooterSectionBreak, FooterSectionProps } from './ui/footer.js';
|
|
19
|
+
export { Hint, HintProps } from './ui/hint.js';
|
|
20
|
+
export { InsetText, InsetTextProps } from './ui/inset-text.js';
|
|
21
|
+
export { Label, LabelProps, LabelWrapper, LabelWrapperProps, labelVariants } from './ui/label.js';
|
|
22
|
+
export { Link, LinkProps, LinkVariant, linkVariants } from './ui/link.js';
|
|
23
|
+
export { NotificationBanner, NotificationBannerContent, NotificationBannerContentProps, NotificationBannerHeader, NotificationBannerHeaderProps, NotificationBannerHeading, NotificationBannerHeadingProps, NotificationBannerLink, NotificationBannerLinkProps, NotificationBannerProps, NotificationBannerTitle, NotificationBannerTitleProps } from './ui/notification-banner.js';
|
|
24
|
+
export { Panel, PanelBody, PanelBodyProps, PanelProps, PanelTitle, PanelTitleProps } from './ui/panel.js';
|
|
25
|
+
export { PasswordInput, PasswordInputProps } from './ui/password-input.js';
|
|
26
|
+
export { NextArrow, Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkLabel, PaginationLinkLabelProps, PaginationLinkProps, PaginationLinkTitle, PaginationLinkTitleProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationProps, PrevArrow } from './ui/pagination.js';
|
|
27
|
+
export { PhaseBanner, PhaseBannerContent, PhaseBannerContentProps, PhaseBannerProps, PhaseBannerTag, PhaseBannerTagProps, PhaseBannerText, PhaseBannerTextProps } from './ui/phase-banner.js';
|
|
28
|
+
export { Radios, RadiosDivider, RadiosDividerProps, RadiosHint, RadiosHintProps, RadiosItem, RadiosItemProps, RadiosProps } from './ui/radios.js';
|
|
29
|
+
export { Select, SelectItem, SelectItemProps, SelectProps, selectTriggerVariants } from './ui/select.js';
|
|
30
|
+
export { ServiceNavigation, ServiceNavigationContainer, ServiceNavigationContainerProps, ServiceNavigationItem, ServiceNavigationItemProps, ServiceNavigationLink, ServiceNavigationLinkProps, ServiceNavigationNav, ServiceNavigationNavProps, ServiceNavigationProps, ServiceNavigationServiceName, ServiceNavigationServiceNameProps } from './ui/service-navigation.js';
|
|
31
|
+
export { SkipLink, SkipLinkProps } from './ui/skip-link.js';
|
|
32
|
+
export { SummaryList, SummaryListActions, SummaryListActionsProps, SummaryListCard, SummaryListCardAction, SummaryListCardActionProps, SummaryListCardActions, SummaryListCardActionsProps, SummaryListCardContent, SummaryListCardHeader, SummaryListCardProps, SummaryListCardTitle, SummaryListCardTitleProps, SummaryListKey, SummaryListKeyProps, SummaryListProps, SummaryListRow, SummaryListRowProps, SummaryListValue, SummaryListValueProps } from './ui/summary-list.js';
|
|
33
|
+
export { Tag, TagColour, TagProps, tagVariants } from './ui/tag.js';
|
|
34
|
+
export { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCaptionSize, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, tableCaptionVariants } from './ui/table.js';
|
|
35
|
+
export { Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsProps, TabsTab, TabsTabProps } from './ui/tabs.js';
|
|
36
|
+
export { TaskList, TaskListHint, TaskListHintProps, TaskListItem, TaskListItemProps, TaskListLink, TaskListLinkProps, TaskListNameAndHint, TaskListNameAndHintProps, TaskListProps, TaskListStatus, TaskListStatusProps } from './ui/task-list.js';
|
|
37
|
+
export { TextInput, TextInputProps, textInputVariants } from './ui/text-input.js';
|
|
38
|
+
export { Textarea, TextareaProps, textareaVariants } from './ui/textarea.js';
|
|
39
|
+
export { WarningText, WarningTextProps } from './ui/warning-text.js';
|
|
40
|
+
import 'clsx';
|
|
41
|
+
import 'react';
|
|
42
|
+
import '@base-ui/react/accordion';
|
|
43
|
+
import 'class-variance-authority/types';
|
|
44
|
+
import 'class-variance-authority';
|
|
45
|
+
import '@base-ui/react/checkbox';
|
|
46
|
+
import '@base-ui/react/checkbox-group';
|
|
47
|
+
import '@base-ui/react/collapsible';
|
|
48
|
+
import '@base-ui/react/radio-group';
|
|
49
|
+
import '@base-ui/react/radio';
|
|
50
|
+
import '@base-ui/react/tabs';
|