@amsterdam/design-system-react 0.7.0 → 0.8.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.
Files changed (6) hide show
  1. package/dist/index.cjs.js +545 -332
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +276 -267
  4. package/dist/index.esm.js +539 -332
  5. package/dist/index.esm.js.map +1 -1
  6. package/package.json +15 -15
package/dist/index.d.ts CHANGED
@@ -1,5 +1,75 @@
1
1
  import * as react from 'react';
2
- import { PropsWithChildren, HTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes, ForwardRefExoticComponent, RefAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, TableHTMLAttributes, SVGProps, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, LabelHTMLAttributes } from 'react';
2
+ import { OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, SelectHTMLAttributes, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
3
+
4
+ type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
5
+
6
+ type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
7
+
8
+ type SelectProps = {
9
+ /** There is no native invalid attribute for select, but you can use this to get the same result as other form components */
10
+ invalid?: boolean;
11
+ } & PropsWithChildren<SelectHTMLAttributes<HTMLSelectElement>>;
12
+ declare const Select: react.ForwardRefExoticComponent<{
13
+ /** There is no native invalid attribute for select, but you can use this to get the same result as other form components */
14
+ invalid?: boolean | undefined;
15
+ } & SelectHTMLAttributes<HTMLSelectElement> & {
16
+ children?: react.ReactNode;
17
+ } & react.RefAttributes<HTMLSelectElement>> & {
18
+ Option: react.ForwardRefExoticComponent<SelectOptionProps & {
19
+ children?: react.ReactNode;
20
+ } & react.RefAttributes<HTMLOptionElement>>;
21
+ Group: react.ForwardRefExoticComponent<SelectOptionGroupProps & {
22
+ children?: react.ReactNode;
23
+ } & react.RefAttributes<HTMLOptGroupElement>>;
24
+ };
25
+
26
+ type TimeInputProps = InputHTMLAttributes<HTMLInputElement>;
27
+ declare const TimeInput: react.ForwardRefExoticComponent<TimeInputProps & react.RefAttributes<HTMLInputElement>>;
28
+
29
+ type DateInputProps = InputHTMLAttributes<HTMLInputElement>;
30
+ declare const DateInput: react.ForwardRefExoticComponent<DateInputProps & react.RefAttributes<HTMLInputElement>>;
31
+
32
+ declare const avatarColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "red", "yellow"];
33
+ type AvatarColor = (typeof avatarColors)[number];
34
+ type AvatarProps = {
35
+ color?: AvatarColor;
36
+ imageSrc?: string;
37
+ label: string;
38
+ } & HTMLAttributes<HTMLSpanElement>;
39
+ declare const Avatar: react.ForwardRefExoticComponent<{
40
+ color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "red" | "yellow" | undefined;
41
+ imageSrc?: string | undefined;
42
+ label: string;
43
+ } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
44
+
45
+ type FormFieldCharacterCounterProps = HTMLAttributes<HTMLDivElement> & {
46
+ length: number;
47
+ maxLength: number;
48
+ };
49
+ declare const FormFieldCharacterCounter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
50
+ length: number;
51
+ maxLength: number;
52
+ } & react.RefAttributes<HTMLDivElement>>;
53
+
54
+ type DescriptionListProps = {
55
+ inverseColor?: boolean;
56
+ } & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
57
+ declare const DescriptionList: react.ForwardRefExoticComponent<{
58
+ inverseColor?: boolean | undefined;
59
+ } & HTMLAttributes<HTMLDListElement> & {
60
+ children?: react.ReactNode;
61
+ } & react.RefAttributes<HTMLDListElement>> & {
62
+ Term: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
63
+ children?: react.ReactNode;
64
+ } & react.RefAttributes<HTMLElement>>;
65
+ Details: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
66
+ children?: react.ReactNode;
67
+ } & react.RefAttributes<HTMLElement>>;
68
+ };
69
+
70
+ type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
71
+
72
+ type DescriptionListDetailsProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
3
73
 
4
74
  declare const rowGapSizes: Array<string>;
5
75
  type RowTag = 'article' | 'div' | 'section';
@@ -9,15 +79,15 @@ type RowProps = {
9
79
  as?: RowTag;
10
80
  /** The amount of vertical space between the row’s children. */
11
81
  gap?: RowGap;
12
- } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
82
+ } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
13
83
  declare const Row: react.ForwardRefExoticComponent<{
14
84
  /** The element to render the row with. */
15
85
  as?: RowTag | undefined;
16
86
  /** The amount of vertical space between the row’s children. */
17
87
  gap?: string | undefined;
18
- } & HTMLAttributes<HTMLDivElement> & {
88
+ } & HTMLAttributes<HTMLElement> & {
19
89
  children?: react.ReactNode;
20
- } & react.RefAttributes<HTMLDivElement>>;
90
+ } & react.RefAttributes<unknown>>;
21
91
 
22
92
  type RadioProps = {
23
93
  invalid?: boolean;
@@ -28,44 +98,34 @@ declare const Radio: react.ForwardRefExoticComponent<{
28
98
  children?: react.ReactNode;
29
99
  } & react.RefAttributes<HTMLInputElement>>;
30
100
 
31
- type TabsButtonProps = {
32
- tab: number;
33
- } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
34
- declare const TabsButton: react.ForwardRefExoticComponent<{
35
- tab: number;
36
- } & ButtonHTMLAttributes<HTMLButtonElement> & {
37
- children?: react.ReactNode;
38
- } & react.RefAttributes<HTMLButtonElement>>;
39
-
40
- type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
41
- declare const TabsList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
42
- children?: react.ReactNode;
43
- } & react.RefAttributes<HTMLDivElement>>;
101
+ type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
102
+ declare const Tabs: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
103
+ children?: react.ReactNode;
104
+ } & react.RefAttributes<HTMLDivElement>> & {
105
+ Button: react.ForwardRefExoticComponent<{
106
+ tab: number;
107
+ } & react.ButtonHTMLAttributes<HTMLButtonElement> & {
108
+ children?: react.ReactNode;
109
+ } & react.RefAttributes<HTMLButtonElement>>;
110
+ List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
111
+ children?: react.ReactNode;
112
+ } & react.RefAttributes<HTMLDivElement>>;
113
+ Panel: react.ForwardRefExoticComponent<{
114
+ tab: number;
115
+ } & HTMLAttributes<HTMLDivElement> & {
116
+ children?: react.ReactNode;
117
+ } & react.RefAttributes<HTMLDivElement>>;
118
+ };
44
119
 
45
120
  type TabsPanelProps = {
46
121
  tab: number;
47
122
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
48
- declare const TabsPanel: react.ForwardRefExoticComponent<{
49
- tab: number;
50
- } & HTMLAttributes<HTMLDivElement> & {
51
- children?: react.ReactNode;
52
- } & react.RefAttributes<HTMLDivElement>>;
53
123
 
54
- /**
55
- * @license EUPL-1.2+
56
- * Copyright Gemeente Amsterdam
57
- */
124
+ type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
58
125
 
59
- type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
60
- type TabsComponent = {
61
- /** Always use a TabList to hold the Tab Buttons */
62
- List: typeof TabsList;
63
- /** Use a TabButton for each tab */
64
- Button: typeof TabsButton;
65
- /** A TabsPanel will only return its contents when the corresponding TabsButton is activated */
66
- Panel: typeof TabsPanel;
67
- } & ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
68
- declare const Tabs: TabsComponent;
126
+ type TabsButtonProps = {
127
+ tab: number;
128
+ } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
69
129
 
70
130
  type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
71
131
  resize?: 'none' | 'horizontal' | 'vertical';
@@ -82,15 +142,15 @@ type ColumnProps = {
82
142
  as?: ColumnTag;
83
143
  /** The amount of vertical space between the column’s children. */
84
144
  gap?: ColumnGap;
85
- } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
145
+ } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
86
146
  declare const Column: react.ForwardRefExoticComponent<{
87
147
  /** The element to render the column with. */
88
148
  as?: ColumnTag | undefined;
89
149
  /** The amount of vertical space between the column’s children. */
90
150
  gap?: string | undefined;
91
- } & HTMLAttributes<HTMLDivElement> & {
151
+ } & HTMLAttributes<HTMLElement> & {
92
152
  children?: react.ReactNode;
93
- } & react.RefAttributes<HTMLDivElement>>;
153
+ } & react.RefAttributes<unknown>>;
94
154
 
95
155
  type FieldsetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
96
156
  legend: string;
@@ -101,10 +161,19 @@ declare const Fieldset: react.ForwardRefExoticComponent<HTMLAttributes<HTMLField
101
161
  legend: string;
102
162
  } & react.RefAttributes<HTMLFieldSetElement>>;
103
163
 
104
- /**
105
- * @license EUPL-1.2+
106
- * Copyright Gemeente Amsterdam
107
- */
164
+ type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
165
+ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
166
+ children?: react.ReactNode;
167
+ } & react.RefAttributes<HTMLUListElement>> & {
168
+ Link: react.ForwardRefExoticComponent<{
169
+ href: string;
170
+ icon?: Function | undefined;
171
+ onBackground?: ("default" | "light" | "dark") | undefined;
172
+ size?: "small" | "large" | undefined;
173
+ } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
174
+ children?: react.ReactNode;
175
+ } & react.RefAttributes<HTMLAnchorElement>>;
176
+ };
108
177
 
109
178
  type BackgroundName = 'default' | 'light' | 'dark';
110
179
  type LinkListLinkProps = {
@@ -123,21 +192,6 @@ type LinkListLinkProps = {
123
192
  */
124
193
  size?: 'small' | 'large';
125
194
  } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
126
- type LinkListLinkComponent = ForwardRefExoticComponent<LinkListLinkProps & RefAttributes<HTMLAnchorElement>>;
127
- /** One link with a Link List. */
128
- declare const LinkListLink: LinkListLinkComponent;
129
-
130
- /**
131
- * @license EUPL-1.2+
132
- * Copyright Gemeente Amsterdam
133
- */
134
-
135
- type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
136
- type LinkListComponent = {
137
- Link: typeof LinkListLink;
138
- } & ForwardRefExoticComponent<LinkListProps & RefAttributes<HTMLUListElement>>;
139
- /** A collection of related links. */
140
- declare const LinkList: LinkListComponent;
141
195
 
142
196
  declare const badgeColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
143
197
  type BadgeColor = (typeof badgeColors)[number];
@@ -150,66 +204,43 @@ declare const Badge: react.ForwardRefExoticComponent<{
150
204
  label: string | number;
151
205
  } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
152
206
 
153
- declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
154
- children?: react.ReactNode;
155
- } & react.RefAttributes<HTMLTableSectionElement>>;
156
-
157
- declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & {
158
- children?: react.ReactNode;
159
- } & react.RefAttributes<HTMLTableCaptionElement>>;
160
-
161
- declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & {
162
- children?: react.ReactNode;
163
- } & react.RefAttributes<HTMLTableCellElement>>;
164
-
165
- declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
166
- children?: react.ReactNode;
167
- } & react.RefAttributes<HTMLTableSectionElement>>;
168
-
169
- declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
170
- children?: react.ReactNode;
171
- } & react.RefAttributes<HTMLTableSectionElement>>;
172
-
173
- declare const TableHeaderCell: react.ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & {
174
- children?: react.ReactNode;
175
- } & react.RefAttributes<HTMLTableCellElement>>;
176
-
177
- declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
178
- children?: react.ReactNode;
179
- } & react.RefAttributes<HTMLTableRowElement>>;
180
-
181
- /**
182
- * @license EUPL-1.2+
183
- * Copyright Gemeente Amsterdam
184
- */
185
-
186
207
  type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>;
187
- type TableComponent = {
188
- Body: typeof TableBody;
189
- Caption: typeof TableCaption;
190
- Cell: typeof TableCell;
191
- Footer: typeof TableFooter;
192
- Header: typeof TableHeader;
193
- HeaderCell: typeof TableHeaderCell;
194
- Row: typeof TableRow;
195
- } & ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>>;
196
- declare const Table: TableComponent;
208
+ declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
209
+ children?: react.ReactNode;
210
+ } & react.RefAttributes<HTMLTableElement>> & {
211
+ Body: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
212
+ children?: react.ReactNode;
213
+ } & react.RefAttributes<HTMLTableSectionElement>>;
214
+ Caption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & {
215
+ children?: react.ReactNode;
216
+ } & react.RefAttributes<HTMLTableCaptionElement>>;
217
+ Cell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & {
218
+ children?: react.ReactNode;
219
+ } & react.RefAttributes<HTMLTableCellElement>>;
220
+ Footer: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
221
+ children?: react.ReactNode;
222
+ } & react.RefAttributes<HTMLTableSectionElement>>;
223
+ Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
224
+ children?: react.ReactNode;
225
+ } & react.RefAttributes<HTMLTableSectionElement>>;
226
+ HeaderCell: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & {
227
+ children?: react.ReactNode;
228
+ } & react.RefAttributes<HTMLTableCellElement>>;
229
+ Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & {
230
+ children?: react.ReactNode;
231
+ } & react.RefAttributes<HTMLTableRowElement>>;
232
+ };
197
233
 
198
- type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
199
- declare const MegaMenuListCategory: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
234
+ type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
235
+ declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
200
236
  children?: react.ReactNode;
201
- } & react.RefAttributes<HTMLDivElement>>;
202
-
203
- /**
204
- * @license EUPL-1.2+
205
- * Copyright Gemeente Amsterdam
206
- */
237
+ } & react.RefAttributes<HTMLDivElement>> & {
238
+ ListCategory: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
239
+ children?: react.ReactNode;
240
+ } & react.RefAttributes<HTMLDivElement>>;
241
+ };
207
242
 
208
- type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
209
- type MegaMenuComponent = {
210
- ListCategory: typeof MegaMenuListCategory;
211
- } & ForwardRefExoticComponent<MegaMenuProps & RefAttributes<HTMLDivElement>>;
212
- declare const MegaMenu: MegaMenuComponent;
243
+ type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
213
244
 
214
245
  type IconButtonProps = {
215
246
  label: string;
@@ -270,24 +301,15 @@ declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
270
301
  type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
271
302
  declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
272
303
 
273
- type SearchFieldButtonProps = HTMLAttributes<HTMLButtonElement>;
274
- declare const SearchFieldButton: react.ForwardRefExoticComponent<SearchFieldButtonProps & react.RefAttributes<HTMLButtonElement>>;
275
-
276
- declare const SearchFieldInput: react.ForwardRefExoticComponent<{
277
- label?: string | undefined;
278
- } & InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
279
-
280
- /**
281
- * @license EUPL-1.2+
282
- * Copyright Gemeente Amsterdam
283
- */
284
-
285
304
  type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
286
- type SearchFieldComponent = {
287
- Input: typeof SearchFieldInput;
288
- Button: typeof SearchFieldButton;
289
- } & ForwardRefExoticComponent<SearchFieldProps & RefAttributes<HTMLFormElement>>;
290
- declare const SearchField: SearchFieldComponent;
305
+ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
306
+ children?: react.ReactNode;
307
+ } & react.RefAttributes<HTMLFormElement>> & {
308
+ Button: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
309
+ Input: react.ForwardRefExoticComponent<{
310
+ label?: string | undefined;
311
+ } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
312
+ };
291
313
 
292
314
  type DialogProps = {
293
315
  actions?: ReactNode;
@@ -299,10 +321,10 @@ declare const Dialog: react.ForwardRefExoticComponent<{
299
321
  } & react.RefAttributes<HTMLDialogElement>>;
300
322
 
301
323
  type ImageProps = {
302
- cover?: Boolean;
324
+ cover?: boolean;
303
325
  } & ImgHTMLAttributes<HTMLImageElement>;
304
326
  declare const Image: react.ForwardRefExoticComponent<{
305
- cover?: Boolean | undefined;
327
+ cover?: boolean | undefined;
306
328
  } & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
307
329
 
308
330
  type PaginationProps = {
@@ -344,9 +366,15 @@ declare const Pagination: react.ForwardRefExoticComponent<{
344
366
 
345
367
  type ScreenMaxWidth = 'wide' | 'x-wide';
346
368
  type ScreenProps = {
369
+ /** Whether the screen should stretch to the full height of the viewport. */
370
+ fullHeight?: boolean;
371
+ /** The maximum width of the screen. */
347
372
  maxWidth?: ScreenMaxWidth;
348
373
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
349
374
  declare const Screen: react.ForwardRefExoticComponent<{
375
+ /** Whether the screen should stretch to the full height of the viewport. */
376
+ fullHeight?: boolean | undefined;
377
+ /** The maximum width of the screen. */
350
378
  maxWidth?: ScreenMaxWidth | undefined;
351
379
  } & HTMLAttributes<HTMLDivElement> & {
352
380
  children?: react.ReactNode;
@@ -368,33 +396,27 @@ declare const Spotlight: react.ForwardRefExoticComponent<{
368
396
  color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
369
397
  } & HTMLAttributes<HTMLElement> & {
370
398
  children?: react.ReactNode;
371
- } & react.RefAttributes<HTMLDivElement>>;
399
+ } & react.RefAttributes<unknown>>;
400
+
401
+ type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
402
+ declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
403
+ children?: react.ReactNode;
404
+ } & react.RefAttributes<HTMLElement>> & {
405
+ HeadingGroup: react.ForwardRefExoticComponent<{
406
+ tagline: string;
407
+ } & HTMLAttributes<HTMLElement> & {
408
+ children?: react.ReactNode;
409
+ } & react.RefAttributes<HTMLElement>>;
410
+ Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
411
+ children?: react.ReactNode;
412
+ } & react.RefAttributes<HTMLAnchorElement>>;
413
+ };
372
414
 
373
415
  type CardHeadingGroupProps = {
374
416
  tagline: string;
375
417
  } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
376
- declare const CardHeadingGroup: react.ForwardRefExoticComponent<{
377
- tagline: string;
378
- } & HTMLAttributes<HTMLElement> & {
379
- children?: react.ReactNode;
380
- } & react.RefAttributes<HTMLElement>>;
381
418
 
382
419
  type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
383
- declare const CardLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
384
- children?: react.ReactNode;
385
- } & react.RefAttributes<HTMLAnchorElement>>;
386
-
387
- /**
388
- * @license EUPL-1.2+
389
- * Copyright Gemeente Amsterdam
390
- */
391
-
392
- type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
393
- type CardComponent = {
394
- HeadingGroup: typeof CardHeadingGroup;
395
- Link: typeof CardLink;
396
- } & ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>>;
397
- declare const Card: CardComponent;
398
420
 
399
421
  type HeadingLevel = 1 | 2 | 3 | 4;
400
422
  type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
@@ -480,41 +502,21 @@ declare const VisuallyHidden: react.ForwardRefExoticComponent<HTMLAttributes<HTM
480
502
  children?: react.ReactNode;
481
503
  } & react.RefAttributes<HTMLElement>>;
482
504
 
483
- type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
484
- declare const FooterBottom: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
485
- children?: react.ReactNode;
486
- } & react.RefAttributes<HTMLDivElement>>;
487
-
488
- type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
489
- declare const FooterTop: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
490
- children?: react.ReactNode;
491
- } & react.RefAttributes<HTMLDivElement>>;
492
-
493
- /**
494
- * @license EUPL-1.2+
495
- * Copyright Gemeente Amsterdam
496
- */
497
-
498
505
  type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
499
- type FooterComponent = {
500
- Top: typeof FooterTop;
501
- Bottom: typeof FooterBottom;
502
- } & ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>>;
503
- declare const Footer: FooterComponent;
506
+ declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
507
+ children?: react.ReactNode;
508
+ } & react.RefAttributes<HTMLElement>> & {
509
+ Bottom: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
510
+ children?: react.ReactNode;
511
+ } & react.RefAttributes<HTMLDivElement>>;
512
+ Top: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
513
+ children?: react.ReactNode;
514
+ } & react.RefAttributes<HTMLDivElement>>;
515
+ };
504
516
 
505
- type PageMenuLinkProps = {
506
- icon?: Function;
507
- } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
508
- declare const PageMenuLink: react.ForwardRefExoticComponent<{
509
- icon?: Function | undefined;
510
- } & AnchorHTMLAttributes<HTMLAnchorElement> & {
511
- children?: react.ReactNode;
512
- } & react.RefAttributes<HTMLAnchorElement>>;
517
+ type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
513
518
 
514
- /**
515
- * @license EUPL-1.2+
516
- * Copyright Gemeente Amsterdam
517
- */
519
+ type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
518
520
 
519
521
  type PageMenuProps = {
520
522
  /**
@@ -522,11 +524,34 @@ type PageMenuProps = {
522
524
  * If the menu itself aligns to the end of its container, you should set this to `true`.
523
525
  */
524
526
  alignEnd?: boolean;
527
+ /**
528
+ * Whether menu items should wrap if they don’t fit on a single row.
529
+ */
530
+ wrap?: boolean;
525
531
  } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
526
- type PageMenuComponent = {
527
- Link: typeof PageMenuLink;
528
- } & ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLUListElement>>;
529
- declare const PageMenu: PageMenuComponent;
532
+ declare const PageMenu: react.ForwardRefExoticComponent<{
533
+ /**
534
+ * Whether the page menu’s items align to its end.
535
+ * If the menu itself aligns to the end of its container, you should set this to `true`.
536
+ */
537
+ alignEnd?: boolean | undefined;
538
+ /**
539
+ * Whether menu items should wrap if they don’t fit on a single row.
540
+ */
541
+ wrap?: boolean | undefined;
542
+ } & HTMLAttributes<HTMLUListElement> & {
543
+ children?: react.ReactNode;
544
+ } & react.RefAttributes<HTMLUListElement>> & {
545
+ Link: react.ForwardRefExoticComponent<{
546
+ icon?: Function | undefined;
547
+ } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
548
+ children?: react.ReactNode;
549
+ } & react.RefAttributes<HTMLAnchorElement>>;
550
+ };
551
+
552
+ type PageMenuLinkProps = {
553
+ icon?: Function;
554
+ } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
530
555
 
531
556
  declare const TopTaskLink: react.ForwardRefExoticComponent<{
532
557
  label: string;
@@ -578,44 +603,37 @@ declare const PageHeading: react.ForwardRefExoticComponent<{
578
603
  children?: react.ReactNode;
579
604
  } & react.RefAttributes<HTMLHeadingElement>>;
580
605
 
581
- type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
582
- declare const OrderedListItem: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & {
583
- children?: react.ReactNode;
584
- } & react.RefAttributes<HTMLLIElement>>;
585
-
586
- /**
587
- * @license EUPL-1.2+
588
- * Copyright Gemeente Amsterdam
589
- */
590
-
591
606
  type OrderedListProps = {
592
607
  markers?: boolean;
593
608
  inverseColor?: boolean;
594
609
  } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
595
- type OrderedListComponent = {
596
- Item: typeof OrderedListItem;
597
- } & ForwardRefExoticComponent<OrderedListProps & RefAttributes<HTMLOListElement>>;
598
- declare const OrderedList: OrderedListComponent;
599
-
600
- type BreadcrumbItemProps = {
601
- href: string;
602
- } & PropsWithChildren<HTMLAttributes<HTMLLIElement>>;
603
- declare const BreadcrumbItem: react.ForwardRefExoticComponent<{
604
- href: string;
605
- } & HTMLAttributes<HTMLLIElement> & {
610
+ declare const OrderedList: react.ForwardRefExoticComponent<{
611
+ markers?: boolean | undefined;
612
+ inverseColor?: boolean | undefined;
613
+ } & OlHTMLAttributes<HTMLOListElement> & {
606
614
  children?: react.ReactNode;
607
- } & react.RefAttributes<HTMLLIElement>>;
615
+ } & react.RefAttributes<HTMLOListElement>> & {
616
+ Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
617
+ children?: react.ReactNode;
618
+ } & react.RefAttributes<HTMLLIElement>>;
619
+ };
608
620
 
609
- /**
610
- * @license EUPL-1.2+
611
- * Copyright Gemeente Amsterdam
612
- */
621
+ type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
613
622
 
614
623
  type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
615
- type BreadcrumbComponent = {
616
- Item: typeof BreadcrumbItem;
617
- } & ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>;
618
- declare const Breadcrumb: BreadcrumbComponent;
624
+ declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
625
+ children?: react.ReactNode;
626
+ } & react.RefAttributes<HTMLElement>> & {
627
+ Item: react.ForwardRefExoticComponent<{
628
+ href: string;
629
+ } & HTMLAttributes<HTMLLIElement> & {
630
+ children?: react.ReactNode;
631
+ } & react.RefAttributes<HTMLLIElement>>;
632
+ };
633
+
634
+ type BreadcrumbItemProps = {
635
+ href: string;
636
+ } & PropsWithChildren<HTMLAttributes<HTMLLIElement>>;
619
637
 
620
638
  type LinkOnBackground = 'default' | 'light' | 'dark';
621
639
  type LinkVariant = 'standalone' | 'inline';
@@ -656,28 +674,26 @@ declare const Paragraph: react.ForwardRefExoticComponent<{
656
674
  children?: react.ReactNode;
657
675
  } & react.RefAttributes<HTMLParagraphElement>>;
658
676
 
659
- declare const FormLabel: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
677
+ declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
660
678
  children?: react.ReactNode;
661
679
  } & react.RefAttributes<HTMLLabelElement>>;
662
680
 
663
- type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
664
- declare const UnorderedListItem: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & {
665
- children?: react.ReactNode;
666
- } & react.RefAttributes<HTMLLIElement>>;
667
-
668
- /**
669
- * @license EUPL-1.2+
670
- * Copyright Gemeente Amsterdam
671
- */
672
-
673
681
  type UnorderedListProps = {
674
682
  inverseColor?: boolean;
675
683
  markers?: boolean;
676
684
  } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
677
- type UnorderedListComponent = {
678
- Item: typeof UnorderedListItem;
679
- } & ForwardRefExoticComponent<UnorderedListProps & RefAttributes<HTMLUListElement>>;
680
- declare const UnorderedList: UnorderedListComponent;
685
+ declare const UnorderedList: react.ForwardRefExoticComponent<{
686
+ inverseColor?: boolean | undefined;
687
+ markers?: boolean | undefined;
688
+ } & HTMLAttributes<HTMLUListElement> & {
689
+ children?: react.ReactNode;
690
+ } & react.RefAttributes<HTMLUListElement>> & {
691
+ Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
692
+ children?: react.ReactNode;
693
+ } & react.RefAttributes<HTMLLIElement>>;
694
+ };
695
+
696
+ type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
681
697
 
682
698
  type IconProps = {
683
699
  size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
@@ -690,30 +706,30 @@ declare const Icon: react.ForwardRefExoticComponent<{
690
706
  svg: Function;
691
707
  } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
692
708
 
693
- type AccordionSectionProps = {
694
- label: string;
695
- expanded?: boolean;
696
- } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
697
- declare const AccordionSection: react.ForwardRefExoticComponent<{
698
- label: string;
699
- expanded?: boolean | undefined;
700
- } & HTMLAttributes<HTMLElement> & {
701
- children?: react.ReactNode;
702
- } & react.RefAttributes<HTMLDivElement>>;
703
-
704
- /**
705
- * @license EUPL-1.2+
706
- * Copyright Gemeente Amsterdam
707
- */
708
-
709
709
  type AccordionProps = {
710
+ /** The hierarchical level of the accordion title within the document. */
710
711
  headingLevel: HeadingLevel;
711
712
  section?: boolean;
712
713
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
713
- type AccordionComponent = {
714
- Section: typeof AccordionSection;
715
- } & ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
716
- declare const Accordion: AccordionComponent;
714
+ declare const Accordion: react.ForwardRefExoticComponent<{
715
+ /** The hierarchical level of the accordion title within the document. */
716
+ headingLevel: HeadingLevel;
717
+ section?: boolean | undefined;
718
+ } & HTMLAttributes<HTMLDivElement> & {
719
+ children?: react.ReactNode;
720
+ } & react.RefAttributes<HTMLDivElement>> & {
721
+ Section: react.ForwardRefExoticComponent<{
722
+ label: string;
723
+ expanded?: boolean | undefined;
724
+ } & HTMLAttributes<HTMLElement> & {
725
+ children?: react.ReactNode;
726
+ } & react.RefAttributes<HTMLDivElement>>;
727
+ };
728
+
729
+ type AccordionSectionProps = {
730
+ label: string;
731
+ expanded?: boolean;
732
+ } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
717
733
 
718
734
  type GridCellSpanAllProp = {
719
735
  /** Lets the cell span the full width of all grid variants. */
@@ -728,13 +744,7 @@ type GridCellSpanAndStartProps = {
728
744
  };
729
745
  type GridCellProps = {
730
746
  as?: 'article' | 'div' | 'section';
731
- } & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
732
- declare const GridCell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLDivElement>>;
733
-
734
- /**
735
- * @license EUPL-1.2+
736
- * Copyright Gemeente Amsterdam
737
- */
747
+ } & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
738
748
 
739
749
  type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
740
750
  type GridColumnNumbers = {
@@ -760,9 +770,8 @@ type GridProps = {
760
770
  /** The amount of vertical white space between rows of the grid. */
761
771
  gapVertical?: 'none' | 'small' | 'large';
762
772
  } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
763
- type GridComponent = {
764
- Cell: typeof GridCell;
765
- } & ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
766
- declare const Grid: GridComponent;
773
+ declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
774
+ Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
775
+ };
767
776
 
768
- export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, Dialog, type DialogProps, Fieldset, type FieldsetProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormLabel, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };
777
+ export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, Fieldset, type FieldsetProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };