@amsterdam/design-system-react 0.6.1 → 0.7.1

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 +521 -446
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +201 -256
  4. package/dist/index.esm.js +520 -447
  5. package/dist/index.esm.js.map +1 -1
  6. package/package.json +13 -13
package/dist/index.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.d.ts CHANGED
@@ -1,5 +1,27 @@
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 { HTMLAttributes, PropsWithChildren, InputHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
3
+
4
+ declare const avatarColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "red", "yellow"];
5
+ type AvatarColor = (typeof avatarColors)[number];
6
+ type AvatarProps = {
7
+ color?: AvatarColor;
8
+ imageSrc?: string;
9
+ label: string;
10
+ } & HTMLAttributes<HTMLSpanElement>;
11
+ declare const Avatar: react.ForwardRefExoticComponent<{
12
+ color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "red" | "yellow" | undefined;
13
+ imageSrc?: string | undefined;
14
+ label: string;
15
+ } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
16
+
17
+ type FormFieldCharacterCounterProps = HTMLAttributes<HTMLDivElement> & {
18
+ length: number;
19
+ maxLength: number;
20
+ };
21
+ declare const FormFieldCharacterCounter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
22
+ length: number;
23
+ maxLength: number;
24
+ } & react.RefAttributes<HTMLDivElement>>;
3
25
 
4
26
  declare const rowGapSizes: Array<string>;
5
27
  type RowTag = 'article' | 'div' | 'section';
@@ -28,44 +50,34 @@ declare const Radio: react.ForwardRefExoticComponent<{
28
50
  children?: react.ReactNode;
29
51
  } & react.RefAttributes<HTMLInputElement>>;
30
52
 
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>>;
53
+ type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
54
+ declare const Tabs: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
55
+ children?: react.ReactNode;
56
+ } & react.RefAttributes<HTMLDivElement>> & {
57
+ Button: react.ForwardRefExoticComponent<{
58
+ tab: number;
59
+ } & react.ButtonHTMLAttributes<HTMLButtonElement> & {
60
+ children?: react.ReactNode;
61
+ } & react.RefAttributes<HTMLButtonElement>>;
62
+ List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
63
+ children?: react.ReactNode;
64
+ } & react.RefAttributes<HTMLDivElement>>;
65
+ Panel: react.ForwardRefExoticComponent<{
66
+ tab: number;
67
+ } & HTMLAttributes<HTMLDivElement> & {
68
+ children?: react.ReactNode;
69
+ } & react.RefAttributes<HTMLDivElement>>;
70
+ };
44
71
 
45
72
  type TabsPanelProps = {
46
73
  tab: number;
47
74
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
48
- declare const TabsPanel: react.ForwardRefExoticComponent<{
49
- tab: number;
50
- } & HTMLAttributes<HTMLDivElement> & {
51
- children?: react.ReactNode;
52
- } & react.RefAttributes<HTMLDivElement>>;
53
75
 
54
- /**
55
- * @license EUPL-1.2+
56
- * Copyright Gemeente Amsterdam
57
- */
76
+ type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
58
77
 
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;
78
+ type TabsButtonProps = {
79
+ tab: number;
80
+ } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
69
81
 
70
82
  type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
71
83
  resize?: 'none' | 'horizontal' | 'vertical';
@@ -101,10 +113,19 @@ declare const Fieldset: react.ForwardRefExoticComponent<HTMLAttributes<HTMLField
101
113
  legend: string;
102
114
  } & react.RefAttributes<HTMLFieldSetElement>>;
103
115
 
104
- /**
105
- * @license EUPL-1.2+
106
- * Copyright Gemeente Amsterdam
107
- */
116
+ type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
117
+ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
118
+ children?: react.ReactNode;
119
+ } & react.RefAttributes<HTMLUListElement>> & {
120
+ Link: react.ForwardRefExoticComponent<{
121
+ href: string;
122
+ icon?: Function | undefined;
123
+ onBackground?: ("default" | "light" | "dark") | undefined;
124
+ size?: "small" | "large" | undefined;
125
+ } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
126
+ children?: react.ReactNode;
127
+ } & react.RefAttributes<HTMLAnchorElement>>;
128
+ };
108
129
 
109
130
  type BackgroundName = 'default' | 'light' | 'dark';
110
131
  type LinkListLinkProps = {
@@ -123,21 +144,6 @@ type LinkListLinkProps = {
123
144
  */
124
145
  size?: 'small' | 'large';
125
146
  } & 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
147
 
142
148
  declare const badgeColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
143
149
  type BadgeColor = (typeof badgeColors)[number];
@@ -150,66 +156,43 @@ declare const Badge: react.ForwardRefExoticComponent<{
150
156
  label: string | number;
151
157
  } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
152
158
 
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
159
  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;
160
+ declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
161
+ children?: react.ReactNode;
162
+ } & react.RefAttributes<HTMLTableElement>> & {
163
+ Body: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
164
+ children?: react.ReactNode;
165
+ } & react.RefAttributes<HTMLTableSectionElement>>;
166
+ Caption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & {
167
+ children?: react.ReactNode;
168
+ } & react.RefAttributes<HTMLTableCaptionElement>>;
169
+ Cell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & {
170
+ children?: react.ReactNode;
171
+ } & react.RefAttributes<HTMLTableCellElement>>;
172
+ Footer: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
173
+ children?: react.ReactNode;
174
+ } & react.RefAttributes<HTMLTableSectionElement>>;
175
+ Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
176
+ children?: react.ReactNode;
177
+ } & react.RefAttributes<HTMLTableSectionElement>>;
178
+ HeaderCell: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & {
179
+ children?: react.ReactNode;
180
+ } & react.RefAttributes<HTMLTableCellElement>>;
181
+ Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & {
182
+ children?: react.ReactNode;
183
+ } & react.RefAttributes<HTMLTableRowElement>>;
184
+ };
197
185
 
198
- type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
199
- declare const MegaMenuListCategory: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
186
+ type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
187
+ declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
200
188
  children?: react.ReactNode;
201
- } & react.RefAttributes<HTMLDivElement>>;
202
-
203
- /**
204
- * @license EUPL-1.2+
205
- * Copyright Gemeente Amsterdam
206
- */
189
+ } & react.RefAttributes<HTMLDivElement>> & {
190
+ ListCategory: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
191
+ children?: react.ReactNode;
192
+ } & react.RefAttributes<HTMLDivElement>>;
193
+ };
207
194
 
208
- type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
209
- type MegaMenuComponent = {
210
- ListCategory: typeof MegaMenuListCategory;
211
- } & ForwardRefExoticComponent<MegaMenuProps & RefAttributes<HTMLDivElement>>;
212
- declare const MegaMenu: MegaMenuComponent;
195
+ type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
213
196
 
214
197
  type IconButtonProps = {
215
198
  label: string;
@@ -270,24 +253,15 @@ declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
270
253
  type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
271
254
  declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
272
255
 
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
256
  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;
257
+ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
258
+ children?: react.ReactNode;
259
+ } & react.RefAttributes<HTMLFormElement>> & {
260
+ Button: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
261
+ Input: react.ForwardRefExoticComponent<{
262
+ label?: string | undefined;
263
+ } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
264
+ };
291
265
 
292
266
  type DialogProps = {
293
267
  actions?: ReactNode;
@@ -370,31 +344,25 @@ declare const Spotlight: react.ForwardRefExoticComponent<{
370
344
  children?: react.ReactNode;
371
345
  } & react.RefAttributes<HTMLDivElement>>;
372
346
 
347
+ type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
348
+ declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
349
+ children?: react.ReactNode;
350
+ } & react.RefAttributes<HTMLElement>> & {
351
+ HeadingGroup: react.ForwardRefExoticComponent<{
352
+ tagline: string;
353
+ } & HTMLAttributes<HTMLElement> & {
354
+ children?: react.ReactNode;
355
+ } & react.RefAttributes<HTMLElement>>;
356
+ Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
357
+ children?: react.ReactNode;
358
+ } & react.RefAttributes<HTMLAnchorElement>>;
359
+ };
360
+
373
361
  type CardHeadingGroupProps = {
374
362
  tagline: string;
375
363
  } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
376
- declare const CardHeadingGroup: react.ForwardRefExoticComponent<{
377
- tagline: string;
378
- } & HTMLAttributes<HTMLElement> & {
379
- children?: react.ReactNode;
380
- } & react.RefAttributes<HTMLElement>>;
381
364
 
382
365
  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
366
 
399
367
  type HeadingLevel = 1 | 2 | 3 | 4;
400
368
  type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
@@ -480,41 +448,21 @@ declare const VisuallyHidden: react.ForwardRefExoticComponent<HTMLAttributes<HTM
480
448
  children?: react.ReactNode;
481
449
  } & react.RefAttributes<HTMLElement>>;
482
450
 
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
451
  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;
452
+ declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
453
+ children?: react.ReactNode;
454
+ } & react.RefAttributes<HTMLElement>> & {
455
+ Bottom: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
456
+ children?: react.ReactNode;
457
+ } & react.RefAttributes<HTMLDivElement>>;
458
+ Top: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
459
+ children?: react.ReactNode;
460
+ } & react.RefAttributes<HTMLDivElement>>;
461
+ };
504
462
 
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>>;
463
+ type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
513
464
 
514
- /**
515
- * @license EUPL-1.2+
516
- * Copyright Gemeente Amsterdam
517
- */
465
+ type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
518
466
 
519
467
  type PageMenuProps = {
520
468
  /**
@@ -523,10 +471,25 @@ type PageMenuProps = {
523
471
  */
524
472
  alignEnd?: boolean;
525
473
  } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
526
- type PageMenuComponent = {
527
- Link: typeof PageMenuLink;
528
- } & ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLUListElement>>;
529
- declare const PageMenu: PageMenuComponent;
474
+ declare const PageMenu: react.ForwardRefExoticComponent<{
475
+ /**
476
+ * Whether the page menu’s items align to its end.
477
+ * If the menu itself aligns to the end of its container, you should set this to `true`.
478
+ */
479
+ alignEnd?: boolean | undefined;
480
+ } & HTMLAttributes<HTMLUListElement> & {
481
+ children?: react.ReactNode;
482
+ } & react.RefAttributes<HTMLUListElement>> & {
483
+ Link: react.ForwardRefExoticComponent<{
484
+ icon?: Function | undefined;
485
+ } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
486
+ children?: react.ReactNode;
487
+ } & react.RefAttributes<HTMLAnchorElement>>;
488
+ };
489
+
490
+ type PageMenuLinkProps = {
491
+ icon?: Function;
492
+ } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
530
493
 
531
494
  declare const TopTaskLink: react.ForwardRefExoticComponent<{
532
495
  label: string;
@@ -578,44 +541,37 @@ declare const PageHeading: react.ForwardRefExoticComponent<{
578
541
  children?: react.ReactNode;
579
542
  } & react.RefAttributes<HTMLHeadingElement>>;
580
543
 
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
544
  type OrderedListProps = {
592
545
  markers?: boolean;
593
546
  inverseColor?: boolean;
594
547
  } & 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> & {
548
+ declare const OrderedList: react.ForwardRefExoticComponent<{
549
+ markers?: boolean | undefined;
550
+ inverseColor?: boolean | undefined;
551
+ } & OlHTMLAttributes<HTMLOListElement> & {
606
552
  children?: react.ReactNode;
607
- } & react.RefAttributes<HTMLLIElement>>;
553
+ } & react.RefAttributes<HTMLOListElement>> & {
554
+ Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
555
+ children?: react.ReactNode;
556
+ } & react.RefAttributes<HTMLLIElement>>;
557
+ };
608
558
 
609
- /**
610
- * @license EUPL-1.2+
611
- * Copyright Gemeente Amsterdam
612
- */
559
+ type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
613
560
 
614
561
  type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
615
- type BreadcrumbComponent = {
616
- Item: typeof BreadcrumbItem;
617
- } & ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>;
618
- declare const Breadcrumb: BreadcrumbComponent;
562
+ declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
563
+ children?: react.ReactNode;
564
+ } & react.RefAttributes<HTMLElement>> & {
565
+ Item: react.ForwardRefExoticComponent<{
566
+ href: string;
567
+ } & HTMLAttributes<HTMLLIElement> & {
568
+ children?: react.ReactNode;
569
+ } & react.RefAttributes<HTMLLIElement>>;
570
+ };
571
+
572
+ type BreadcrumbItemProps = {
573
+ href: string;
574
+ } & PropsWithChildren<HTMLAttributes<HTMLLIElement>>;
619
575
 
620
576
  type LinkOnBackground = 'default' | 'light' | 'dark';
621
577
  type LinkVariant = 'standalone' | 'inline';
@@ -660,24 +616,22 @@ declare const FormLabel: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTM
660
616
  children?: react.ReactNode;
661
617
  } & react.RefAttributes<HTMLLabelElement>>;
662
618
 
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
619
  type UnorderedListProps = {
674
620
  inverseColor?: boolean;
675
621
  markers?: boolean;
676
622
  } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
677
- type UnorderedListComponent = {
678
- Item: typeof UnorderedListItem;
679
- } & ForwardRefExoticComponent<UnorderedListProps & RefAttributes<HTMLUListElement>>;
680
- declare const UnorderedList: UnorderedListComponent;
623
+ declare const UnorderedList: react.ForwardRefExoticComponent<{
624
+ inverseColor?: boolean | undefined;
625
+ markers?: boolean | undefined;
626
+ } & HTMLAttributes<HTMLUListElement> & {
627
+ children?: react.ReactNode;
628
+ } & react.RefAttributes<HTMLUListElement>> & {
629
+ Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
630
+ children?: react.ReactNode;
631
+ } & react.RefAttributes<HTMLLIElement>>;
632
+ };
633
+
634
+ type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
681
635
 
682
636
  type IconProps = {
683
637
  size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
@@ -690,30 +644,28 @@ declare const Icon: react.ForwardRefExoticComponent<{
690
644
  svg: Function;
691
645
  } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
692
646
 
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
647
  type AccordionProps = {
710
648
  headingLevel: HeadingLevel;
711
649
  section?: boolean;
712
650
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
713
- type AccordionComponent = {
714
- Section: typeof AccordionSection;
715
- } & ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
716
- declare const Accordion: AccordionComponent;
651
+ declare const Accordion: react.ForwardRefExoticComponent<{
652
+ headingLevel: HeadingLevel;
653
+ section?: boolean | undefined;
654
+ } & HTMLAttributes<HTMLDivElement> & {
655
+ children?: react.ReactNode;
656
+ } & react.RefAttributes<HTMLDivElement>> & {
657
+ Section: react.ForwardRefExoticComponent<{
658
+ label: string;
659
+ expanded?: boolean | undefined;
660
+ } & HTMLAttributes<HTMLElement> & {
661
+ children?: react.ReactNode;
662
+ } & react.RefAttributes<HTMLDivElement>>;
663
+ };
664
+
665
+ type AccordionSectionProps = {
666
+ label: string;
667
+ expanded?: boolean;
668
+ } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
717
669
 
718
670
  type GridCellSpanAllProp = {
719
671
  /** Lets the cell span the full width of all grid variants. */
@@ -729,12 +681,6 @@ type GridCellSpanAndStartProps = {
729
681
  type GridCellProps = {
730
682
  as?: 'article' | 'div' | 'section';
731
683
  } & (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
- */
738
684
 
739
685
  type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
740
686
  type GridColumnNumbers = {
@@ -760,9 +706,8 @@ type GridProps = {
760
706
  /** The amount of vertical white space between rows of the grid. */
761
707
  gapVertical?: 'none' | 'small' | 'large';
762
708
  } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
763
- type GridComponent = {
764
- Cell: typeof GridCell;
765
- } & ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
766
- declare const Grid: GridComponent;
709
+ declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
710
+ Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLDivElement>>;
711
+ };
767
712
 
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 };
713
+ 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, Dialog, type DialogProps, Fieldset, type FieldsetProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, 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 };