@easygov/react-components 0.0.2 → 0.1.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.
@@ -7,15 +7,28 @@ import { Combobox } from '@base-ui/react/combobox';
7
7
  import * as React$1 from 'react';
8
8
  import React__default, { SVGProps } from 'react';
9
9
  import { Input as Input$1 } from '@base-ui/react/input';
10
+ import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
11
+ import { Select as Select$1 } from '@base-ui/react/select';
10
12
  export { Account, Add, AddAlt, AddComment, AddFilled, Alarm, AlarmAdd, AlarmSubtract, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Asleep, AsleepFilled, Attachment, Bookmark, BookmarkFilled, Box, Bullhorn, Calculation, CalculationAlt, Calculator, Calendar, CalendarAdd, CalendarAddAlt, Camera, CaretDown, CaretLeft, CaretRight, CaretSort, CaretSortDown, CaretSortUp, CaretUp, CharacterPatterns, Chat, ChatLaunch, Checkbox, CheckboxChecked, CheckboxCheckedFilled, CheckboxIndeterminate, CheckboxIndeterminateFilled, CheckboxUndeterminate, CheckboxUndeterminateFilled, Checkmark, CheckmarkFilled, CheckmarkOutline, CheckmarkOutlineWarning, ChevronDown, ChevronLeft, ChevronRight, ChevronSort, ChevronSortDown, ChevronSortUp, ChevronUp, Close, CloseFilled, CloseOutline, ClosedCaptionAlt, Copy, CopyFile, CopyLink, Data, Delete, Document, DocumentAdd, DocumentAttachment, DocumentBlank, DocumentDownload, DocumentEdit, DocumentExport, DocumentImport, DocumentPdf, DocumentSettings, DocumentSubtract, DocumentTasks, Download, Draggable, EarthEuropeAfricaFilled, Edit, Email, EmailNew, Enterprise, Error, ErrorFilled, ErrorOutline, Events, Filter, Finance, Flag, FlagFilled, Folder, FolderAdd, FolderMoveTo, Folders, Forum, Globe, GlobeAlt, Group, Help, HelpFilled, Home, IconBase, IconProps, IdManagement, Idea, Identification, Industry, Information, InformationFilled, InformationSquare, InformationSquareFilled, Launch, Light, LightFilled, Link, List, ListBoxes, ListBulleted, ListChecked, Location, Locked, Login, LogoFacebook, LogoInstagram, LogoLinkedin, LogoTwitter, LogoXing, LogoYoutube, Logout, ManageProtection, Menu, MessageQueue, Meter, MeterAlt, Misuse, MisuseOutline, Notification, NotificationFilled, NotificationNew, OverflowMenuHorizontal, OverflowMenuVertical, Password, PedestrianFamily, Pen, Pending, PendingFilled, Person, Phone, PhoneFilled, PhoneIp, Pin, Policy, PreviousFilled, PreviousOutline, Printer, RadioButton, RadioButtonChecked, Reminder, Renew, Reset, Restart, Restaurant, ResultNew, Review, Rocket, Rotate360, RuleFilled, Save, Search, SearchLocate, Security, Send, SendAlt, Settings, SettingsAdjust, Star, StarFilled, Subtract, SubtractFilled, Task, TaskSettings, TaskStar, Time, Timer, Unlocked, Upload, User, UserAdd, UserAvatar, UserAvatarFilled, UserAvatarFilledAlt, UserMultiple, UserProfile, UserSettings, View, ViewAltOff, ViewFilled, ViewOff, ViewOffFilled, Warning, WarningAlt, WarningAltFilled, WarningFilled, WorkflowAutomation, iconVariants } from './icons.mjs';
11
13
 
12
14
  declare const buttonVariants: (props?: ({
13
15
  variant?: "primary" | "secondary" | "critical" | "tertiary" | null | undefined;
14
- size?: "s" | "m" | "l" | null | undefined;
16
+ size?: "s" | "m" | "l" | "icon-s" | "icon-m" | "icon-l" | null | undefined;
15
17
  } & class_variance_authority_types.ClassProp) | undefined) => string;
16
- interface ButtonProps extends Omit<Button$1.Props, "className">, VariantProps<typeof buttonVariants> {
18
+ type IconSize = "icon-s" | "icon-m" | "icon-l";
19
+ type StandardSize = "s" | "m" | "l";
20
+ type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
21
+ type ButtonBase = Omit<Button$1.Props, "className"> & {
17
22
  className?: string;
18
- }
23
+ variant?: ButtonVariant;
24
+ };
25
+ type ButtonProps = (ButtonBase & {
26
+ size: IconSize;
27
+ "aria-label": string;
28
+ }) | (ButtonBase & {
29
+ size?: StandardSize;
30
+ "aria-label"?: string;
31
+ });
19
32
  declare function Button({ className, variant, size, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
20
33
 
21
34
  declare function Dropdown({ multiple, ...props }: React$1.ComponentProps<typeof Combobox.Root>): react_jsx_runtime.JSX.Element;
@@ -76,6 +89,50 @@ declare function DropdownEmpty({ className, ...props }: Combobox.Empty.Props): r
76
89
  declare function DropdownSeparator({ className, ...props }: Combobox.Separator.Props): react_jsx_runtime.JSX.Element;
77
90
  declare function DropdownCollection(props: Combobox.Collection.Props): react_jsx_runtime.JSX.Element;
78
91
 
92
+ type EasygovFooterProps = React__default.HTMLAttributes<HTMLElement>;
93
+ /**
94
+ * Maps to the Figma "Footer (Desktop)" frame. Compose it from
95
+ * `EasygovFooterColumns` (containing `EasygovFooterColumn`s) followed by
96
+ * `EasygovFooterLegal`. The partner logos band (Confederation, KdK,
97
+ * Städteverband, Gemeindeverband) and the Swiss shield are official
98
+ * government marks, not per-page content — they're fixed here rather than
99
+ * exposed as props.
100
+ */
101
+ declare function EasygovFooter({ className, children, ...props }: EasygovFooterProps): react_jsx_runtime.JSX.Element;
102
+ type EasygovFooterColumnsProps = React__default.HTMLAttributes<HTMLDivElement>;
103
+ /** The "Spalten" row of `EasygovFooterColumn`s, plus the fixed Swiss shield. */
104
+ declare function EasygovFooterColumns({ className, children, ...props }: EasygovFooterColumnsProps): react_jsx_runtime.JSX.Element;
105
+ type EasygovFooterColumnProps = React__default.HTMLAttributes<HTMLDivElement>;
106
+ /** One "Liste" column of stacked `TextLink`s inside `EasygovFooterColumns`. */
107
+ declare function EasygovFooterColumn({ className, ...props }: EasygovFooterColumnProps): react_jsx_runtime.JSX.Element;
108
+ type EasygovFooterSocialLinksProps = React__default.HTMLAttributes<HTMLDivElement>;
109
+ /** Row of social icon links ("soc-media"), placed inside an `EasygovFooterColumn`. */
110
+ declare function EasygovFooterSocialLinks({ className, ...props }: EasygovFooterSocialLinksProps): react_jsx_runtime.JSX.Element;
111
+ type EasygovFooterLegalProps = React__default.HTMLAttributes<HTMLDivElement>;
112
+ /** The bottom-right "Rechtliches" row of legal `TextLink`s. */
113
+ declare function EasygovFooterLegal({ className, ...props }: EasygovFooterLegalProps): react_jsx_runtime.JSX.Element;
114
+
115
+ type MobileSpan = 1 | 2 | 3 | 4;
116
+ type TabletSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
117
+ type DesktopSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
118
+ type GridProps = React$1.HTMLAttributes<HTMLDivElement>;
119
+ /**
120
+ * Responsive CSS Grid container: 4 columns (mobile), 8 (tablet), 12 (desktop).
121
+ * Rows are automatic — place `GridItem`s directly inside, no row wrapper needed.
122
+ */
123
+ declare function Grid({ className, children, ...props }: GridProps): react_jsx_runtime.JSX.Element;
124
+ interface GridItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
125
+ span?: MobileSpan;
126
+ spanTablet?: TabletSpan;
127
+ spanDesktop?: DesktopSpan;
128
+ }
129
+ /**
130
+ * Defaults to full width (4/8/12) at every breakpoint if a span isn't given,
131
+ * matching the classes a non-React consumer would apply by hand
132
+ * (`eg-grid__item--span-4 eg-grid__item--span-tablet-8 eg-grid__item--span-desktop-12`).
133
+ */
134
+ declare function GridItem({ span, spanTablet, spanDesktop, className, children, ...props }: GridItemProps): react_jsx_runtime.JSX.Element;
135
+
79
136
  declare const inputFieldVariants: (props?: ({
80
137
  size?: "s" | "m" | "l" | null | undefined;
81
138
  } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -99,6 +156,81 @@ interface TextLinkProps extends Omit<React__default.AnchorHTMLAttributes<HTMLAnc
99
156
  }
100
157
  declare function TextLink({ className, variant, size, disabled, children, onClick, tabIndex, ...props }: TextLinkProps): react_jsx_runtime.JSX.Element;
101
158
 
159
+ interface NavigationMenuProps extends NavigationMenu$1.Root.Props {
160
+ className?: string;
161
+ positionerProps?: Partial<NavigationMenu$1.Positioner.Props>;
162
+ container?: HTMLElement | ShadowRoot | null;
163
+ }
164
+ declare function NavigationMenu({ className, children, positionerProps, container, ...props }: NavigationMenuProps): react_jsx_runtime.JSX.Element;
165
+ interface NavigationMenuListProps extends NavigationMenu$1.List.Props {
166
+ className?: string;
167
+ }
168
+ declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): react_jsx_runtime.JSX.Element;
169
+ interface NavigationMenuItemProps extends NavigationMenu$1.Item.Props {
170
+ className?: string;
171
+ }
172
+ declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): react_jsx_runtime.JSX.Element;
173
+ interface NavigationMenuTriggerProps extends Omit<NavigationMenu$1.Trigger.Props, "className"> {
174
+ className?: string;
175
+ leadingIcon?: React$1.ReactNode;
176
+ badge?: number | string;
177
+ }
178
+ declare function NavigationMenuTrigger({ className, leadingIcon, badge, disabled, children, ...props }: NavigationMenuTriggerProps): react_jsx_runtime.JSX.Element;
179
+ interface NavigationMenuAnchorProps extends Omit<NavigationMenu$1.Link.Props, "className"> {
180
+ className?: string;
181
+ leadingIcon?: React$1.ReactNode;
182
+ }
183
+ declare function NavigationMenuAnchor({ className, leadingIcon, children, ...props }: NavigationMenuAnchorProps): react_jsx_runtime.JSX.Element;
184
+ interface NavigationMenuContentProps extends NavigationMenu$1.Content.Props {
185
+ className?: string;
186
+ }
187
+ declare function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps): react_jsx_runtime.JSX.Element;
188
+ interface NavigationMenuLinkProps extends Omit<NavigationMenu$1.Link.Props, "className"> {
189
+ className?: string;
190
+ leadingIcon?: React$1.ReactNode;
191
+ trailingIcon?: React$1.ReactNode;
192
+ active?: boolean;
193
+ }
194
+ declare function NavigationMenuLink({ className, leadingIcon, trailingIcon, active, children, ...props }: NavigationMenuLinkProps): react_jsx_runtime.JSX.Element;
195
+
196
+ declare function Select<Value = unknown, Multiple extends boolean | undefined = false>(props: Select$1.Root.Props<Value, Multiple>): React$1.JSX.Element;
197
+ interface SelectLabelProps extends Omit<React$1.LabelHTMLAttributes<HTMLLabelElement>, "className"> {
198
+ className?: string;
199
+ disabled?: boolean;
200
+ }
201
+ declare function SelectLabel({ className, disabled, ...props }: SelectLabelProps): react_jsx_runtime.JSX.Element;
202
+ interface SelectHelperTextProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "className"> {
203
+ className?: string;
204
+ }
205
+ declare function SelectHelperText({ className, ...props }: SelectHelperTextProps): react_jsx_runtime.JSX.Element;
206
+ interface SelectTriggerProps extends Omit<Select$1.Trigger.Props, "className"> {
207
+ className?: string;
208
+ placeholder?: string;
209
+ leadingIcon?: React$1.ReactNode;
210
+ }
211
+ declare function SelectTrigger({ className, placeholder, leadingIcon, ...props }: SelectTriggerProps): react_jsx_runtime.JSX.Element;
212
+ interface SelectContentProps extends Select$1.Popup.Props {
213
+ sideOffset?: number;
214
+ alignItemWithTrigger?: boolean;
215
+ className?: string;
216
+ container?: HTMLElement | ShadowRoot | null;
217
+ }
218
+ declare function SelectContent({ className, children, sideOffset, alignItemWithTrigger, container, ...props }: SelectContentProps): react_jsx_runtime.JSX.Element;
219
+ interface SelectItemProps extends Omit<Select$1.Item.Props, "className"> {
220
+ className?: string;
221
+ leadingIcon?: React$1.ReactNode;
222
+ }
223
+ declare function SelectItem({ className, children, leadingIcon, ...props }: SelectItemProps): react_jsx_runtime.JSX.Element;
224
+ declare function SelectGroup(props: Select$1.Group.Props): react_jsx_runtime.JSX.Element;
225
+ interface SelectGroupLabelProps extends Omit<Select$1.GroupLabel.Props, "className"> {
226
+ className?: string;
227
+ }
228
+ declare function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps): react_jsx_runtime.JSX.Element;
229
+ interface SelectSeparatorProps extends Omit<Select$1.Separator.Props, "className"> {
230
+ className?: string;
231
+ }
232
+ declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): react_jsx_runtime.JSX.Element;
233
+
102
234
  interface BrandProps extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
103
235
  /**
104
236
  * Height in pixels. Width scales automatically from the viewBox aspect ratio.
@@ -137,4 +269,67 @@ declare function BrandXing(props: BrandProps): react_jsx_runtime.JSX.Element;
137
269
 
138
270
  declare function BrandYoutube(props: BrandProps): react_jsx_runtime.JSX.Element;
139
271
 
140
- export { BrandBase, BrandEasygov, BrandFacebook, BrandKdk, BrandLinkedin, type BrandProps, BrandSeg, BrandSgv, BrandSsv, BrandSwiss, BrandXing, BrandYoutube, Button, type ButtonProps, Dropdown, DropdownChip, DropdownChipsOverflow, type DropdownChipsOverflowProps, DropdownChipsTrigger, type DropdownChipsTriggerProps, DropdownCollection, DropdownEmpty, DropdownGroup, DropdownGroupLabel, DropdownHelperText, type DropdownHelperTextProps, DropdownInput, DropdownItem, type DropdownItemProps, DropdownItemText, DropdownLabel, type DropdownLabelProps, DropdownList, DropdownPopup, type DropdownPopupProps, DropdownSeparator, DropdownToggle, DropdownTrigger, type DropdownTriggerProps, DropdownValue, Input, type InputProps, TextLink, type TextLinkProps, buttonVariants, textLinkVariants };
272
+ interface SessionUser {
273
+ sub: string;
274
+ name: string;
275
+ }
276
+
277
+ declare const dictionaries: {
278
+ de: {
279
+ readonly login: "Anmelden";
280
+ readonly logout: "Abmelden";
281
+ readonly dashboard: "Dashboard";
282
+ readonly selectLanguage: "Sprache wählen";
283
+ readonly loginSuccess: "Sie sind jetzt angemeldet.";
284
+ readonly logoutSuccess: "Sie wurden abgemeldet.";
285
+ readonly skipToMain: "Zum Hauptinhalt springen";
286
+ };
287
+ en: {
288
+ readonly login: "Sign In";
289
+ readonly logout: "Sign Out";
290
+ readonly dashboard: "Dashboard";
291
+ readonly selectLanguage: "Select language";
292
+ readonly loginSuccess: "You are now signed in.";
293
+ readonly logoutSuccess: "You have been signed out.";
294
+ readonly skipToMain: "Skip to main content";
295
+ };
296
+ fr: {
297
+ readonly login: "Se connecter";
298
+ readonly logout: "Se déconnecter";
299
+ readonly dashboard: "Tableau de bord";
300
+ readonly selectLanguage: "Choisir la langue";
301
+ readonly loginSuccess: "Vous êtes maintenant connecté.";
302
+ readonly logoutSuccess: "Vous avez été déconnecté.";
303
+ readonly skipToMain: "Aller au contenu principal";
304
+ };
305
+ it: {
306
+ readonly login: "Accedi";
307
+ readonly logout: "Esci";
308
+ readonly dashboard: "Dashboard";
309
+ readonly selectLanguage: "Seleziona la lingua";
310
+ readonly loginSuccess: "Hai effettuato l'accesso.";
311
+ readonly logoutSuccess: "Hai effettuato il logout.";
312
+ readonly skipToMain: "Vai al contenuto principale";
313
+ };
314
+ };
315
+ type Locale = keyof typeof dictionaries;
316
+
317
+ interface EasygovSession {
318
+ user: SessionUser | null;
319
+ accessToken: string | null;
320
+ }
321
+ declare function useEasygovSession(): EasygovSession;
322
+ interface EasygovHeaderProps {
323
+ readonly locale?: Locale;
324
+ readonly onLanguageChange?: (locale: Locale) => void;
325
+ readonly onNavigate?: (path: string) => void;
326
+ }
327
+ declare function EasygovHeader({ locale: localeProp, onLanguageChange, onNavigate, }: EasygovHeaderProps): React__default.JSX.Element;
328
+ interface RequireSessionProps {
329
+ readonly children: React__default.ReactNode;
330
+ readonly fallback?: React__default.ReactNode;
331
+ readonly loading?: React__default.ReactNode;
332
+ }
333
+ declare function RequireSession({ children, fallback, loading, }: RequireSessionProps): React__default.JSX.Element;
334
+
335
+ export { BrandBase, BrandEasygov, BrandFacebook, BrandKdk, BrandLinkedin, type BrandProps, BrandSeg, BrandSgv, BrandSsv, BrandSwiss, BrandXing, BrandYoutube, Button, type ButtonProps, type DesktopSpan, Dropdown, DropdownChip, DropdownChipsOverflow, type DropdownChipsOverflowProps, DropdownChipsTrigger, type DropdownChipsTriggerProps, DropdownCollection, DropdownEmpty, DropdownGroup, DropdownGroupLabel, DropdownHelperText, type DropdownHelperTextProps, DropdownInput, DropdownItem, type DropdownItemProps, DropdownItemText, DropdownLabel, type DropdownLabelProps, DropdownList, DropdownPopup, type DropdownPopupProps, DropdownSeparator, DropdownToggle, DropdownTrigger, type DropdownTriggerProps, DropdownValue, EasygovFooter, EasygovFooterColumn, type EasygovFooterColumnProps, EasygovFooterColumns, type EasygovFooterColumnsProps, EasygovFooterLegal, type EasygovFooterLegalProps, type EasygovFooterProps, EasygovFooterSocialLinks, type EasygovFooterSocialLinksProps, EasygovHeader, type EasygovHeaderProps, type EasygovSession, Grid, GridItem, type GridItemProps, type GridProps, Input, type InputProps, type Locale, type MobileSpan, NavigationMenu, NavigationMenuAnchor, type NavigationMenuAnchorProps, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, RequireSession, type RequireSessionProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, SelectHelperText, type SelectHelperTextProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SessionUser, type TabletSpan, TextLink, type TextLinkProps, buttonVariants, textLinkVariants, useEasygovSession };