@ssa-ui-kit/core 3.24.1 → 3.25.0

package/dist/ai/source-map.md

@@ -4,7 +4,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
 
-190 components · 20 contexts · 23 hooks · 17 functions · 16 constants · 315 exported types
+192 components · 20 contexts · 23 hooks · 17 functions · 16 constants · 325 exported types
 
 ## Reading this file
 
@@ -16,13 +16,13 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 ## Component roster
 
-**Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptions
+**Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, FloatingActionButton, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptions
 
 **Form Structure** — Filters, FiltersMultiSelect, FiltersMultiSelectEmpty, FiltersMultiSelectOption, FiltersMultiSelectOptions, Form, FormAction, FormCheckbox, FormGroup, FormHelperText, FormRadioGroup
 
 **Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, Calendar, CalendarEventDetails, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, Carousel, ChartBackground, Chip, ColumnFreezeMenu, ColumnResizeHandle, Counter, FunnelChart, GaugeChart, ImageItem, Indicator, Label, NestedTable, NestedTableCell, NestedTableCellHeader, NestedTableCellSubHeader, NestedTableRow, PieChart, PieChartComponent, PieChartLegend, Progress, ProgressBar, ProgressCircle, ProgressInfo, ProgressInfoTotals, ProgressLegend, ProgressLegendItem, ProgressVertical, ResponsiveImage, SegmentedPieChart, SegmentedPieChartComponent, Table, TableBody, TableCell, TableCellHeader, TableContainer, TableFilterCheckbox, TableFilters, TableFiltersAccordion, TableFiltersAccordionContent, TableFiltersButtons, TableFiltersCancelButton, TableFiltersClearButton, TableFilterTrigger, TableFilterTriggerWithNotification, TableHead, TableRow, Tag, TreeMapChart, TreeMapChartComponent, TreeMapTooltipBase, Typography, WithNestedTableRow
 
-**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
+**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, Header, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
 
 **Overlay & Feedback** — Modal, ModalContent, ModalDialog, ModalDismissButton, ModalOpenButton, NotificationCard, NotificationMenu, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeading, PopoverTrigger, ProgressChartTooltip, SimpleChartTooltip, Tooltip, TooltipContent, TooltipContentBase, TooltipTrigger
 
@@ -326,6 +326,26 @@ File input component with optional drag-and-drop support
   - `onChange?: (files: File[]) => void`
   - `onFileRejected?: (file: File, reason: FileRejectionReason) => void`
 
+#### FloatingActionButton
+A button fixed to a corner of the viewport for the page's primary action, optionally opening a speed-dial menu of related actions.
+
+  - `icon?: FloatingActionButtonIcon` `= 'plus'` — Icon of the button (of the menu trigger while the menu is closed).
+  - `label?: string` — Text shown next to the icon (the "extended" FAB). Without it the FAB is icon-only and needs an `aria-label`.
+  - `color?: FloatingActionButtonColor` `= 'primary'` — Background color. Pre-defined `primary` / `secondary`, a theme color key or any CSS color; custom colors get…
+  - `shadow?: boolean` `= true` — Draws the elevation shadow under the button.
+  - `shape?: 'square' | 'round'` `= 'square'` — Corner shape: `square` keeps the 8px radius, `round` is fully rounded (a circle when icon-only, a pill when…
+  - `size?: FloatingActionButtonSize` `= 'medium'` — Size of the button and of its menu items.
+  - `disabled?: boolean` `= false` — Disables the button (and, in menu mode, opening the menu).
+  - `onClick?: MouseEventHandler<HTMLButtonElement>` — Click handler. In menu mode it also runs, before the menu toggles.
+  - `actions?: FloatingActionButtonAction[]` — Items of the speed-dial menu. When given, the button toggles a stack of secondary FABs above it (below it for…
+  - `showActionLabels?: boolean` `= true` — Shows each action's `label` next to its icon. When `false` the items are icon-only and the label stays as…
+  - `open?: boolean` — Controlled open state of the menu.
+  - `defaultOpen?: boolean` `= false` — Initial open state of the menu when uncontrolled.
+  - `onOpenChange?: (open: boolean) => void` — Called when the menu opens or closes.
+  - `openIcon?: FloatingActionButtonIcon` `= 'cross'` — Icon of the trigger while the menu is open.
+  - `position?: FloatingActionButtonPosition` `= 'bottom-right'` — Viewport corner the FAB is fixed to.
+  - `offset?: number | { x: number; y: number; }` `= 24` — Distance from the corner in px — one value for both axes, or `{ x, y }`.
+
 #### IconButton
 Square icon-only button for icon actions
 
@@ -1543,6 +1563,17 @@ The app sidebar: a logo, a menu, and three layouts.
   _No library-specific props._
   - _plus native element attributes_
 
+#### Header
+The application's top bar: logo, main navigation and a free slot on the right for the user profile, notifications or log out.
+
+  - `logo?: ReactNode` — Project logo, placed in a box of fixed height. Leave it out and the box stays empty, so the layout does not…
+  - `items?: HeaderNavItem[]` — Navigation items. Rendered centred; scrolls sideways when it overflows.
+  - `rightSide?: ReactNode` — Right-hand content — user profile, notifications, log out, whatever the app needs. Rendered as-is on every…
+  - `size?: HeaderSize` `= 'small'` — Bar height and logo size
+  - `navLabel?: string` `= 'Main'` — Accessible name of the navigation landmark
+  - `menuButtonLabel?: string` `= 'Open menu'` — Accessible name of the burger button shown below 900px
+  - _plus native element attributes_
+
 #### History
 Vertical timeline component for chronological events.
 
@@ -2375,45 +2406,48 @@ _Names only — read the `.d.ts` for their shape._
 `FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
 `FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
 `FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
-`FiltersMultiSelectProps` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`
+`FiltersMultiSelectProps` · `FloatingActionButtonAction` · `FloatingActionButtonColor`
+`FloatingActionButtonIcon` · `FloatingActionButtonPosition` · `FloatingActionButtonProps`
+`FloatingActionButtonSize` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`
 `FrozenColumns` · `FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps`
 `FunnelChartRender` · `FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold`
-`GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps` · `HistoryItemType`
-`HistoryProps` · `IFormCheckboxProps` · `IconButtonProps` · `IconProps` · `ImageItemProps`
-`IndicatorProps` · `InputColors` · `InputProps` · `InputStatusColors` · `InteractionsEnabled`
-`Item` · `LabelProps` · `LargeTabProps` · `LastFocusedElement` · `LinkProps` · `LinksTabBarProps`
-`MainColors` · `MainSizes` · `MapIconsType` · `ModalContextProps` · `ModalDialogProps`
-`ModalProps` · `ModalRootProps` · `MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup`
-`NavBarExtendedItem` · `NavBarExtendedProps` · `NavBarExtendedSubItem` · `NavBarProps`
-`NestedTableCellHeaderProps` · `NestedTableContextType` · `NestedTableContextValue`
-`NestedTableProps` · `NestedTableRowContextType` · `NotificationCardProps`
-`NotificationDynamicProps` · `NotificationGlobalSharedProps` · `NotificationMenuProps`
-`NotificationPositions` · `NotificationProps` · `NotificationSharedProps` · `NotificationSizes`
-`NotificationStyleOverrides` · `NotificationType` · `NotificationVariants` · `NumberFieldProps`
-`OpenStateProps` · `OpenedAccordion` · `PageButtonProps` · `PaginationButtonsProps`
-`PaginationContextProps` · `PaginationContextProviderProps` · `PaginationProps` · `PaletteColor`
-`Palette` · `PeriodOption` · `Period` · `PersonInfoAvatarProps` · `PersonInfoCounterProps`
-`PersonInfoCounterTooltipUser` · `PersonInfoCounterTooltip` · `PersonInfoLinkAttributes`
-`PersonInfoProps` · `PersonInfoStyles` · `PersonInfoValueProps` · `PickerType` · `PieChartFeatures`
-`PieChartLegendItem` · `PieChartLegendProps` · `PieChartProps` · `PieChartTooltipProps`
-`PieChartTooltipViewProps` · `PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions`
-`PopoverTriggerProps` · `ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps`
-`ProgressInfoItemProps` · `ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps`
-`ProgressProps` · `RGBString` · `RadioGroupProps` · `RadioProps` · `RangePickerType`
-`RenderContentProps` · `ResizeHandleProps` · `ResolveDeprecatedPropOptions` · `ResolvedOpenState`
-`ResponsiveImageProps` · `SVGProps` · `SearchBoxProps` · `SelectedFilter` · `SetIDs`
-`SimpleChartTooltipProps` · `SizeStyles` · `SliderMark` · `SliderProps` · `SliderSize`
-`SmallTabProps` · `StepperContextType` · `StepperProps` · `SwitchContext` · `SwitchProps`
-`TabBarContextProps` · `TabBarLink` · `TabBarProps` · `TabBaseProps` · `TabProps`
-`TableContainerProps` · `TableProps` · `TagsProps` · `TextFieldProps` · `TextareaProps` · `Theme`
-`ToastProps` · `ToastVariants` · `TooltipArrowProps` · `TooltipColor` · `TooltipContentProps`
-`TooltipContentSizes` · `TooltipContextType` · `TooltipProps` · `TooltipSize`
-`TooltipTriggerProps` · `TranslationContextContent` · `TreeItemBase` · `TreeItemLevel2`
-`TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem` · `TreeLevel` · `TreeMapChartFeature`
-`TreeMapChartProps` · `TreeNode` · `TreeViewProps` · `TypeaheadItemProps`
-`TypeaheadItemsListProps` · `TypeaheadOptionProps` · `TypeaheadProps` · `TypeaheadValue`
-`TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo` · `UseColumnResizeOptions`
-`UseDrawerOptions` · `UseFiltersMultiSelectOptions` · `UseFiltersMultiSelectStore` · `UsePopover`
-`UseTooltipArgs` · `UseTooltipContext` · `UseTooltip` · `UseTypeaheadProps` · `UserProfileProps`
-`ValueLabelDisplay` · `VariantStyle` · `WidgetCardProps` · `WithNestedTableRowProps`
-`WithWidgetCardProps` · `WrapperAlignItems` · `WrapperDirection` · `WrapperJustifyContent`
+`GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps` · `HeaderNavItem` · `HeaderProps`
+`HeaderSize` · `HeaderTheme` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps`
+`IconButtonProps` · `IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
+`InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelProps` · `LargeTabProps`
+`LastFocusedElement` · `LinkProps` · `LinksTabBarProps` · `MainColors` · `MainSizes`
+`MapIconsType` · `ModalContextProps` · `ModalDialogProps` · `ModalProps` · `ModalRootProps`
+`MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup` · `NavBarExtendedItem`
+`NavBarExtendedProps` · `NavBarExtendedSubItem` · `NavBarProps` · `NestedTableCellHeaderProps`
+`NestedTableContextType` · `NestedTableContextValue` · `NestedTableProps`
+`NestedTableRowContextType` · `NotificationCardProps` · `NotificationDynamicProps`
+`NotificationGlobalSharedProps` · `NotificationMenuProps` · `NotificationPositions`
+`NotificationProps` · `NotificationSharedProps` · `NotificationSizes` · `NotificationStyleOverrides`
+`NotificationType` · `NotificationVariants` · `NumberFieldProps` · `OpenStateProps`
+`OpenedAccordion` · `PageButtonProps` · `PaginationButtonsProps` · `PaginationContextProps`
+`PaginationContextProviderProps` · `PaginationProps` · `PaletteColor` · `Palette` · `PeriodOption`
+`Period` · `PersonInfoAvatarProps` · `PersonInfoCounterProps` · `PersonInfoCounterTooltipUser`
+`PersonInfoCounterTooltip` · `PersonInfoLinkAttributes` · `PersonInfoProps` · `PersonInfoStyles`
+`PersonInfoValueProps` · `PickerType` · `PieChartFeatures` · `PieChartLegendItem`
+`PieChartLegendProps` · `PieChartProps` · `PieChartTooltipProps` · `PieChartTooltipViewProps`
+`PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions` · `PopoverTriggerProps`
+`ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps` · `ProgressInfoItemProps`
+`ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps` · `ProgressProps` · `RGBString`
+`RadioGroupProps` · `RadioProps` · `RangePickerType` · `RenderContentProps` · `ResizeHandleProps`
+`ResolveDeprecatedPropOptions` · `ResolvedOpenState` · `ResponsiveImageProps` · `SVGProps`
+`SearchBoxProps` · `SelectedFilter` · `SetIDs` · `SimpleChartTooltipProps` · `SizeStyles`
+`SliderMark` · `SliderProps` · `SliderSize` · `SmallTabProps` · `StepperContextType`
+`StepperProps` · `SwitchContext` · `SwitchProps` · `TabBarContextProps` · `TabBarLink`
+`TabBarProps` · `TabBaseProps` · `TabProps` · `TableContainerProps` · `TableProps` · `TagsProps`
+`TextFieldProps` · `TextareaProps` · `Theme` · `ToastProps` · `ToastVariants` · `TooltipArrowProps`
+`TooltipColor` · `TooltipContentProps` · `TooltipContentSizes` · `TooltipContextType`
+`TooltipProps` · `TooltipSize` · `TooltipTriggerProps` · `TranslationContextContent`
+`TreeItemBase` · `TreeItemLevel2` · `TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem`
+`TreeLevel` · `TreeMapChartFeature` · `TreeMapChartProps` · `TreeNode` · `TreeViewProps`
+`TypeaheadItemProps` · `TypeaheadItemsListProps` · `TypeaheadOptionProps` · `TypeaheadProps`
+`TypeaheadValue` · `TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo`
+`UseColumnResizeOptions` · `UseDrawerOptions` · `UseFiltersMultiSelectOptions`
+`UseFiltersMultiSelectStore` · `UsePopover` · `UseTooltipArgs` · `UseTooltipContext` · `UseTooltip`
+`UseTypeaheadProps` · `UserProfileProps` · `ValueLabelDisplay` · `VariantStyle` · `WidgetCardProps`
+`WithNestedTableRowProps` · `WithWidgetCardProps` · `WrapperAlignItems` · `WrapperDirection`
+`WrapperJustifyContent`

package/dist/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -0,0 +1,79 @@
+import { FloatingActionButtonIcon, FloatingActionButtonSize } from './types';
+/**
+ * FloatingActionButton - A button fixed to a corner of the viewport for the
+ * page's primary action, optionally opening a speed-dial menu of related
+ * actions.
+ *
+ * ### Look
+ * Icon-only by default; pass `label` for the extended (icon + text) FAB.
+ * `color` takes the design's `primary` / `secondary`, a theme color key or
+ * any CSS color — for custom colors the icon and label color is chosen for
+ * contrast. `shadow` and `shape` are independent of the color.
+ *
+ * ### Menu
+ * Pass `actions` to turn the button into a menu trigger. The items stack
+ * away from the corner as secondary FABs of the same size; the trigger
+ * switches to `openIcon` while open. Choosing an item, Escape, a click
+ * outside or tabbing away closes the menu. Control it with `open` +
+ * `onOpenChange`, or leave it uncontrolled (`defaultOpen`).
+ *
+ * ### Icons
+ * A kit icon name is sized for the FAB and painted with its foreground color.
+ * Any other node is rendered as-is.
+ *
+ * @category Components
+ * @subcategory Buttons
+ *
+ * @example
+ * ```tsx
+ * <FloatingActionButton aria-label="Add member" onClick={addMember} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Extended, secondary, bottom-left
+ * <FloatingActionButton label="New report" color="secondary" position="bottom-left" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Speed-dial menu
+ * <FloatingActionButton
+ *   aria-label="Create"
+ *   actions={[
+ *     { id: 'task', icon: 'plus', label: 'Task', onClick: createTask },
+ *     { id: 'note', icon: 'edit', label: 'Note', onClick: createNote },
+ *   ]}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Icon-only FABs need an `aria-label` (a dev warning fires without one)
+ * - In menu mode the trigger has `aria-haspopup="menu"` and `aria-expanded`;
+ *   the items are `menuitem`s
+ * - Opening the menu from the keyboard focuses its first item; ↑/↓, Home and
+ *   End move between items (and from the trigger into the menu while it is
+ *   open); Escape closes it and returns focus to the trigger
+ */
+export declare const FloatingActionButton: import("react").ForwardRefExoticComponent<Pick<import("react").AriaAttributes, "aria-label" | "aria-describedby"> & {
+    icon?: FloatingActionButtonIcon;
+    label?: string;
+    color?: import("./types").FloatingActionButtonColor;
+    shadow?: boolean;
+    shape?: "square" | "round";
+    size?: FloatingActionButtonSize;
+    disabled?: boolean;
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement>;
+    actions?: import("./types").FloatingActionButtonAction[];
+    showActionLabels?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    openIcon?: FloatingActionButtonIcon;
+    position?: import("./types").FloatingActionButtonPosition;
+    offset?: number | {
+        x: number;
+        y: number;
+    };
+    className?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/FloatingActionButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FloatingActionButton';

package/dist/components/FloatingActionButton/styles.d.ts

@@ -0,0 +1,42 @@
+import { Theme } from '@emotion/react';
+import { FloatingActionButtonColor, FloatingActionButtonPosition, FloatingActionButtonSize } from './types';
+type SizeTokens = {
+    /** Height, and width when icon-only. */
+    box: number;
+    /** Glyph size when icon-only. */
+    iconOnly: number;
+    /** Glyph size next to a label. */
+    iconLabelled: number;
+    paddingLeft: number;
+    paddingRight: number;
+    gap: number;
+    fontSize: number;
+    lineHeight: number;
+};
+/**
+ * Figma draws labelled FABs 4px taller than icon-only ones of the same size;
+ * that is a design bug, so both use the icon-only height here.
+ */
+export declare const SIZES: Record<FloatingActionButtonSize, SizeTokens>;
+export type ColorTokens = {
+    background: string;
+    hover: string;
+    active: string;
+    foreground: string;
+};
+/**
+ * Resolves `color` to the four colors a FAB paints with. The two named
+ * colors follow the design tokens; anything else is a theme key or CSS
+ * color whose foreground is picked for contrast.
+ */
+export declare const resolveColors: (theme: Theme, color: FloatingActionButtonColor) => ColorTokens;
+export declare const container: (position: FloatingActionButtonPosition, x: number, y: number) => import("@emotion/react").SerializedStyles;
+export declare const menu: (position: FloatingActionButtonPosition) => import("@emotion/react").SerializedStyles;
+export declare const button: (theme: Theme, { size, colors, shadow, round, labelled, }: {
+    size: FloatingActionButtonSize;
+    colors: ColorTokens;
+    shadow: boolean;
+    round: boolean;
+    labelled: boolean;
+}) => import("@emotion/react").SerializedStyles;
+export {};

package/dist/components/FloatingActionButton/types.d.ts

@@ -0,0 +1,129 @@
+import { AriaAttributes, MouseEventHandler, ReactNode } from 'react';
+import { ColorsKeys } from '../../types/emotion';
+import { IconProps } from '../Icon/types';
+/**
+ * Size scale of a {@link FloatingActionButton}. Icon-only and labelled FABs
+ * share one height per size: 32 / 36 / 40 / 44px.
+ */
+export type FloatingActionButtonSize = 'extraSmall' | 'small' | 'medium' | 'large';
+/**
+ * Corner of the viewport the {@link FloatingActionButton} is fixed to.
+ */
+export type FloatingActionButtonPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+/**
+ * Background color of a {@link FloatingActionButton}.
+ * - `primary`: theme blue with a white icon (design default)
+ * - `secondary`: light grey with a dark icon
+ * - any theme color key (e.g. `'green'`) or CSS color string — the icon and
+ *   label color is picked automatically for contrast
+ */
+export type FloatingActionButtonColor = 'primary' | 'secondary' | ColorsKeys | (string & {});
+/**
+ * Icon of a FAB or of a menu action: a kit icon name, sized and colored by
+ * the FAB, or any node — which then brings its own size and color.
+ */
+export type FloatingActionButtonIcon = IconProps['name'] | ReactNode;
+/**
+ * A single item of a {@link FloatingActionButton} menu.
+ */
+export type FloatingActionButtonAction = {
+    /** Stable key for the item. */
+    id: string;
+    /** Icon of the item. */
+    icon: FloatingActionButtonIcon;
+    /**
+     * Text of the item. Always its accessible name; shown next to the icon
+     * unless `showActionLabels` is `false`.
+     */
+    label: string;
+    /** Called when the item is chosen. The menu then closes. */
+    onClick: () => void;
+    /** Disables the item. */
+    disabled?: boolean;
+};
+/**
+ * Props of the {@link FloatingActionButton} component.
+ */
+export type FloatingActionButtonProps = Pick<AriaAttributes, 'aria-label' | 'aria-describedby'> & {
+    /**
+     * Icon of the button (of the menu trigger while the menu is closed).
+     * @default 'plus'
+     */
+    icon?: FloatingActionButtonIcon;
+    /**
+     * Text shown next to the icon (the "extended" FAB). Without it the FAB is
+     * icon-only and needs an `aria-label`.
+     */
+    label?: string;
+    /**
+     * Background color. Pre-defined `primary` / `secondary`, a theme color key
+     * or any CSS color; custom colors get an auto-contrast icon and label.
+     * @default 'primary'
+     */
+    color?: FloatingActionButtonColor;
+    /**
+     * Draws the elevation shadow under the button.
+     * @default true
+     */
+    shadow?: boolean;
+    /**
+     * Corner shape: `square` keeps the 8px radius, `round` is fully rounded
+     * (a circle when icon-only, a pill when labelled).
+     * @default 'square'
+     */
+    shape?: 'square' | 'round';
+    /**
+     * Size of the button and of its menu items.
+     * @default 'medium'
+     */
+    size?: FloatingActionButtonSize;
+    /**
+     * Disables the button (and, in menu mode, opening the menu).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click handler. In menu mode it also runs, before the menu toggles.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Items of the speed-dial menu. When given, the button toggles a stack of
+     * secondary FABs above it (below it for `top-*` positions).
+     */
+    actions?: FloatingActionButtonAction[];
+    /**
+     * Shows each action's `label` next to its icon. When `false` the items are
+     * icon-only and the label stays as their accessible name.
+     * @default true
+     */
+    showActionLabels?: boolean;
+    /** Controlled open state of the menu. */
+    open?: boolean;
+    /**
+     * Initial open state of the menu when uncontrolled.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Icon of the trigger while the menu is open.
+     * @default 'cross'
+     */
+    openIcon?: FloatingActionButtonIcon;
+    /**
+     * Viewport corner the FAB is fixed to.
+     * @default 'bottom-right'
+     */
+    position?: FloatingActionButtonPosition;
+    /**
+     * Distance from the corner in px — one value for both axes, or `{ x, y }`.
+     * @default 24
+     */
+    offset?: number | {
+        x: number;
+        y: number;
+    };
+    /** Class name of the fixed container. */
+    className?: string;
+};

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,43 @@
+import { HeaderProps } from './types';
+/**
+ * Header - The application's top bar: logo, main navigation and a free slot
+ * on the right for the user profile, notifications or log out.
+ *
+ * ### Navigation
+ * `items` render as react-router links, so the Header must sit inside a
+ * router. The item matching the current location is highlighted, and so is
+ * every group above it. Groups open a dropdown — on hover with a mouse, on
+ * tap on touch screens — and a dropdown item can open a flyout one level
+ * further. Following a link closes them.
+ *
+ * ### Layout
+ * From 900px the navigation is centred between the logo and the right side,
+ * and scrolls sideways when it does not fit. Below 900px it moves into a
+ * drawer opened by a burger button, the logo is centred and `rightSide`
+ * stays as it is.
+ *
+ * ### Selected state
+ * The design sets the selected item in bold. The kit marks it by color
+ * only: a heavier face widens the item and shifts the whole bar whenever the
+ * route changes.
+ *
+ * @category Navigation
+ * @example
+ * ```tsx
+ * <Header
+ *   logo={<img src="/logo.svg" alt="Acme" height={38} />}
+ *   items={[
+ *     { id: 'home', label: 'Home', path: '/' },
+ *     {
+ *       id: 'people',
+ *       label: 'People',
+ *       children: [
+ *         { id: 'employees', label: 'Employees', path: '/people/employees' },
+ *       ],
+ *     },
+ *   ]}
+ *   rightSide={<UserProfile {...profile} />}
+ * />
+ * ```
+ */
+export declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Header/HeaderMobileMenu.d.ts

@@ -0,0 +1,18 @@
+import { UseDrawerStore } from '../Drawer/useDrawer';
+import { HeaderNavItem, HeaderTheme } from './types';
+import * as S from './styles';
+interface HeaderMobileMenuProps {
+    store: UseDrawerStore;
+    items: HeaderNavItem[];
+    headerTheme: HeaderTheme;
+    palette: S.HeaderPalette;
+    pathname: string;
+    navLabel: string;
+}
+/**
+ * The navigation below 900px: a full-width drawer holding a `TreeView`, the
+ * same engine as CollapsibleNavBar's menu. The tree owns expansion and opens
+ * the group holding the current page; this module owns the routing.
+ */
+export declare const HeaderMobileMenu: ({ store, items, headerTheme, palette, pathname, navLabel, }: HeaderMobileMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Header/HeaderNavMenu.d.ts

@@ -0,0 +1,17 @@
+import { HeaderNavItem } from './types';
+import * as S from './styles';
+interface NavEntryProps {
+    item: HeaderNavItem;
+    /** 0 — the bar itself, 1 — dropdown, 2 — flyout */
+    depth: number;
+    palette: S.HeaderPalette;
+    pathname: string;
+    /** Closes every menu above this one once a link is followed */
+    onNavigate?: () => void;
+}
+/**
+ * Top-level entry. Each group roots its own floating tree, so a flyout's
+ * hover and dismiss events reach the dropdown that opened it.
+ */
+export declare const HeaderNavEntry: (props: NavEntryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Header/helpers.d.ts

@@ -0,0 +1,13 @@
+import { HeaderNavItem } from './types';
+/** Submenus nest this deep at most: top level → dropdown → flyout. */
+export declare const MAX_DEPTH = 2;
+/**
+ * Same rule as react-router's `NavLink` without `end`: the path itself or
+ * anything below it, matched on whole segments — `/people` covers
+ * `/people/42` but not `/peoples`. `/` only matches itself, as with NavLink.
+ */
+export declare const isPathActive: (pathname: string, path: string) => boolean;
+/** Leaf: its own path. Group: any descendant up to `MAX_DEPTH`. */
+export declare const isItemActive: (item: HeaderNavItem, pathname: string, depth?: number) => boolean;
+export declare const hasSubmenu: (item: HeaderNavItem, depth: number) => boolean;
+export declare const renderItemIcon: (icon: HeaderNavItem["icon"], size: number) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/Header/index.d.ts

@@ -0,0 +1 @@
+export * from './Header';

package/dist/components/Header/styles.d.ts

@@ -0,0 +1,63 @@
+import { Theme } from '@emotion/react';
+import { HeaderSize, HeaderTheme } from './types';
+export declare const SIZES: Record<HeaderSize, {
+    height: number;
+    logo: number;
+}>;
+export declare const MENU_WIDTH = 164;
+/** Design: dropdowns sit 6px below their trigger and flyouts 6px aside. */
+export declare const MENU_OFFSET = 6;
+export declare const resolvePalette: (theme: Theme, headerTheme: HeaderTheme) => {
+    background: string;
+    text: `rgb${string}` | undefined;
+    accent: `rgb${string}` | undefined;
+    disabled: `rgb${string}` | undefined;
+    menuBackground: `rgb${string}` | undefined;
+    menuItem: `rgb${string}` | undefined;
+    menuItemHover: `rgb${string}` | undefined;
+    menuItemOpen: `rgb${string}` | undefined;
+    menuText: `rgb${string}` | undefined;
+    menuDisabled: `rgb${string}` | undefined;
+    drawerBackground: `rgb${string}` | undefined;
+} | {
+    background: `rgb${string}` | undefined;
+    text: `rgb${string}` | undefined;
+    accent: `rgb${string}` | "transparent";
+    disabled: `rgb${string}` | undefined;
+    menuBackground: `rgb${string}` | undefined;
+    menuItem: `rgb${string}` | undefined;
+    menuItemHover: `rgb${string}` | undefined;
+    menuItemOpen: `rgb${string}` | undefined;
+    menuText: `rgb${string}` | undefined;
+    menuDisabled: `rgb${string}` | undefined;
+    drawerBackground: `rgb${string}` | "transparent";
+};
+export type HeaderPalette = ReturnType<typeof resolvePalette>;
+export declare const root: (theme: Theme, palette: HeaderPalette, size: HeaderSize) => import("@emotion/react").SerializedStyles;
+export declare const burger: (theme: Theme, palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
+/** Holds the burger's column when there is no menu, so the logo stays centred. */
+export declare const burgerPlaceholder: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/**
+ * Fixed height from the size; width follows the logo so wordmarks fit, but
+ * never drops below a square, so an empty box still holds its place.
+ */
+export declare const logo: (size: HeaderSize) => import("@emotion/react").SerializedStyles;
+/**
+ * The scroll container. Dropdowns are portalled, so the overflow here does
+ * not clip them.
+ */
+export declare const nav: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/** `margin: auto` centres the list while it fits and lets it scroll after. */
+export declare const navList: import("@emotion/react").SerializedStyles;
+export declare const rightSide: import("@emotion/react").SerializedStyles;
+/**
+ * Selected keeps the regular weight: the design's bold resizes the item and
+ * shifts the whole bar as the route changes, so the state is marked by color
+ * alone.
+ */
+export declare const navItem: (theme: Theme, palette: HeaderPalette, active: boolean) => import("@emotion/react").SerializedStyles;
+export declare const menu: (theme: Theme, palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
+export declare const menuItem: (theme: Theme, palette: HeaderPalette, active: boolean) => import("@emotion/react").SerializedStyles;
+export declare const drawerContent: (palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
+/** Chevron of a mobile group row; flips while the group is open. */
+export declare const mobileToggle: (expanded: boolean) => import("@emotion/react").SerializedStyles;