@usefidel/design-system 0.24.0 → 0.25.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement, ElementType, ComponentPropsWithoutRef } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
 /** High-contrast near-black, for a page's main create action ("New comparison"). */
@@ -831,23 +831,57 @@ interface MenuItem {
     /** `danger` for destructive actions, e.g. "Sign out of this device". */
     tone?: 'default' | 'danger';
     icon?: ReactNode;
+    /** Square or round image before the label, e.g. a workspace avatar. */
+    avatar?: ReactNode;
+    /** Second line under the label. */
+    description?: ReactNode;
+    /** Shows a check at the end of the row, for the current choice. */
+    selected?: boolean;
+    /** Content at the end of the row, e.g. a Badge or a "Sign in" action. */
+    trailing?: ReactNode;
+    /** Text the search matches against. Defaults to the label when it is a string. */
+    keywords?: string;
     disabled?: boolean;
 }
+interface MenuLabel {
+    type: 'label';
+    label: ReactNode;
+}
+interface MenuDivider {
+    type: 'divider';
+}
+type MenuEntry = MenuItem | MenuLabel | MenuDivider;
+interface MenuSearch {
+    placeholder: string;
+    /** Shown when nothing matches. */
+    emptyLabel: string;
+    /** Shows the field but turns it off, e.g. when there is nothing to search yet. */
+    disabled?: boolean;
+}
+type MenuPlacement = 'bottom' | 'top' | 'right';
 interface MenuProps {
-    /** The button that opens the menu, usually an IconButton. It gets the click and ARIA wiring. */
+    /** The button that opens the menu. It gets the click and ARIA wiring. */
     trigger: ReactElement;
-    items: MenuItem[];
+    items: MenuEntry[];
     /** Which edge of the trigger the menu lines up with. @default 'end' */
     align?: 'start' | 'end';
+    /** Which side of the trigger the menu opens on. @default 'bottom' */
+    placement?: MenuPlacement;
+    /** Adds a search field that filters items by label or `keywords`. */
+    search?: MenuSearch;
+    /** `wide` is 304px, for menus with avatars and descriptions. @default 'auto' */
+    width?: 'auto' | 'wide';
+    /** Lets the trigger fill the width of its container. */
+    block?: boolean;
     className?: string;
 }
 /**
- * Fidel design-system Menu: a short list of actions opened from a button,
- * e.g. a row's "more" menu. Keyboard: Enter/Space/↓ on the trigger open it;
- * ↑/↓/Home/End move; Enter/Space choose; Esc and Tab close; clicking outside
- * closes.
+ * Fidel design-system Menu: a list of actions or choices opened from a button.
+ * Keyboard: Enter/Space/↓ on the trigger open it; ↑/↓/Home/End move; Enter
+ * chooses; Esc closes and returns focus to the trigger; Tab and clicking
+ * outside close it.
  */
-declare function Menu({ trigger, items, align, className }: MenuProps): react.JSX.Element;
+declare function Menu({ trigger, items, align, placement, search, width, block, className, }: MenuProps): react.JSX.Element;
 
 interface TableColumn<Row> {
     key: string;
@@ -907,4 +941,208 @@ interface PricingCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  */
 declare function PricingCard({ eyebrow, title, badge, price, period, description, action, featuresTitle, featuresIntro, features, highlighted, className, ...rest }: PricingCardProps): react.JSX.Element;
 
-export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+type StatusDotStatus = 'running' | 'idle' | 'failed' | 'passed';
+interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    status: StatusDotStatus;
+    /** Accessible name. Leave out when a visible label next to the dot already says it. */
+    label?: string;
+}
+/** Fidel design-system StatusDot: a small dot for the state of the latest run. `running` pulses. */
+declare function StatusDot({ status, label, className, ...rest }: StatusDotProps): react.JSX.Element;
+
+interface ListLabelProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Fidel design-system ListLabel: the small heading above a group of list or menu items. */
+declare function ListLabel({ className, children, ...rest }: ListLabelProps): react.JSX.Element;
+
+interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    /** @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Fidel design-system Divider: a 1px rule between groups. */
+declare function Divider({ orientation, className, ...rest }: DividerProps): react.JSX.Element;
+
+type TooltipSide = 'right' | 'top' | 'bottom' | 'left';
+interface TooltipProps {
+    content: ReactNode;
+    /** The element the tooltip describes. It must accept mouse and focus handlers. */
+    children: ReactElement;
+    /** @default 'right' */
+    side?: TooltipSide;
+    /** Hover delay in ms. Keyboard focus shows it at once. @default 400 */
+    delay?: number;
+    /** Turns the tooltip off without unmounting the child, e.g. when a visible label is shown. */
+    disabled?: boolean;
+}
+/** Fidel design-system Tooltip: a short label shown on hover (after `delay`) or keyboard focus. */
+declare function Tooltip({ content, children, side, delay, disabled }: TooltipProps): react.JSX.Element;
+
+interface BrandButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** The product mark shown at rest. */
+    mark: ReactNode;
+    /** Shown on hover and focus in place of the mark. @default PanelLeftOpen */
+    hoverIcon?: ReactNode;
+    'aria-label': string;
+}
+/** Fidel design-system BrandButton: the product mark that turns into an action icon on hover or focus. */
+declare function BrandButton({ mark, hoverIcon, type, className, ...rest }: BrandButtonProps): react.JSX.Element;
+
+type OwnProps<C extends ElementType> = {
+    /** Element or component to render, e.g. a router Link. @default 'a' */
+    as?: C;
+    /** 16px icon before the label. */
+    icon?: ReactNode;
+    /** Shown in place of the icon, e.g. a StatusDot. */
+    leading?: ReactNode;
+    /** The current page. Sets `aria-current="page"`. */
+    active?: boolean;
+    /** Hide the label and show it as a tooltip. Defaults to the surrounding Sidebar's collapsed state. */
+    iconOnly?: boolean;
+    children: ReactNode;
+};
+type SidebarItemProps<C extends ElementType = 'a'> = OwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps<C>>;
+/** Fidel design-system SidebarItem: one row in a side navigation. */
+declare function SidebarItem<C extends ElementType = 'a'>({ as, icon, leading, active, iconOnly, className, children, ...rest }: SidebarItemProps<C>): react.JSX.Element;
+
+interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    /** Starting state when uncontrolled. @default false */
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** ⌘\ / Ctrl+\ toggles the sidebar. @default true */
+    shortcut?: boolean;
+    children: ReactNode;
+}
+/**
+ * Fidel design-system Sidebar: the app's side navigation, 240px wide or a
+ * 60px rail. Compose it from Sidebar.Header, Sidebar.Brand, Sidebar.Action, Sidebar.Section, Sidebar.Item and
+ * Sidebar.Footer; parts read the collapsed state from context (`useSidebar`).
+ */
+declare function SidebarRoot({ collapsed: controlled, defaultCollapsed, onCollapsedChange, shortcut, className, children, 'aria-label': ariaLabel, ...rest }: SidebarProps): react.JSX.Element;
+interface SidebarBrandProps {
+    /** The full logo, shown when expanded. */
+    logo: ReactNode;
+    /** The compact mark, shown in the rail. */
+    mark: ReactNode;
+    /** @default 'Collapse sidebar' */
+    collapseLabel?: string;
+    /** @default 'Expand sidebar' */
+    expandLabel?: string;
+}
+/** The top row: logo and collapse button, crossfading to the mark that expands the rail. */
+declare function SidebarBrand({ logo, mark, collapseLabel, expandLabel, }: SidebarBrandProps): react.JSX.Element;
+interface SidebarActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon: ReactNode;
+    /** The visible label; in the rail it becomes the tooltip and accessible name. */
+    label: string;
+}
+/** The sidebar's main action, e.g. "New check": an outlined button that shrinks to its icon in the rail. */
+declare function SidebarAction({ icon, label, type, className, ...rest }: SidebarActionProps): react.JSX.Element;
+interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Leave the section out of the rail, e.g. a list of recent items. */
+    hideWhenCollapsed?: boolean;
+    children: ReactNode;
+}
+/** A vertical group of rows. */
+declare function SidebarSection({ hideWhenCollapsed, className, children, ...rest }: SidebarSectionProps): react.JSX.Element;
+/** The top block: brand row, workspace switcher and the main action, spaced tighter than sections. */
+declare function SidebarHeader({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** Rows pinned to the bottom of the sidebar. */
+declare function SidebarFooter({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare const Sidebar: typeof SidebarRoot & {
+    Header: typeof SidebarHeader;
+    Brand: typeof SidebarBrand;
+    Action: typeof SidebarAction;
+    Section: typeof SidebarSection;
+    Item: typeof SidebarItem;
+    Footer: typeof SidebarFooter;
+};
+
+interface SidebarState {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    toggle: () => void;
+}
+/** The surrounding Sidebar's collapsed state, or null outside a Sidebar. */
+declare function useSidebar(): SidebarState | null;
+
+interface WorkspaceSwitcherProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    name: string;
+    /** Plan name shown as a small tag, e.g. "Pro". */
+    plan?: string;
+    /** Replaces the default initial-on-dark square. */
+    avatar?: ReactNode;
+    /** Show only the avatar. Defaults to the surrounding Sidebar's collapsed state. */
+    compact?: boolean;
+}
+/** The square avatar used for a workspace: its first letter on the primary colour. */
+declare function WorkspaceAvatar({ name }: {
+    name: string;
+}): react.JSX.Element;
+/**
+ * Fidel design-system WorkspaceSwitcher: shows the active workspace and opens
+ * the workspace menu. Use it as a Menu trigger; `aria-expanded` drives the open state.
+ */
+declare const WorkspaceSwitcher: react.ForwardRefExoticComponent<WorkspaceSwitcherProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface AvatarLabelGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    name: string;
+    /** Second line, usually the email. */
+    detail?: string;
+    src?: string | null;
+    /** Show only the avatar. @default false */
+    compact?: boolean;
+}
+/**
+ * Fidel design-system AvatarLabelGroup: an avatar with a name and a second
+ * line, as a button (e.g. the trigger for an account menu).
+ */
+declare const AvatarLabelGroup: react.ForwardRefExoticComponent<AvatarLabelGroupProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Fidel design-system AppLayout: a full-height row holding a Sidebar and an AppLayout.Panel. */
+declare function AppLayoutRoot({ className, children, ...rest }: AppLayoutProps): react.JSX.Element;
+/** The content panel: inset from the window edges, rounded, and scrolls on its own. */
+declare function AppLayoutPanel({ className, children, ...rest }: HTMLAttributes<HTMLElement>): react.JSX.Element;
+declare const AppLayout: typeof AppLayoutRoot & {
+    Panel: typeof AppLayoutPanel;
+};
+
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Above the title, e.g. "Projects / Flow web app". */
+    breadcrumb?: ReactNode;
+    /** The page's one primary action, and any secondary ones. */
+    actions?: ReactNode;
+    /** Below the title row, e.g. a TabNav. */
+    children?: ReactNode;
+}
+/** Fidel design-system PageHeader: breadcrumb, title, description and actions at the top of a page. */
+declare function PageHeader({ title, description, breadcrumb, actions, className, children, ...rest }: PageHeaderProps): react.JSX.Element;
+
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    action?: ToastAction;
+    /** Shows a close button and is called when the toast should go away. */
+    onDismiss?: () => void;
+    /** Calls `onDismiss` after this many ms. Leave out to keep it until closed. */
+    duration?: number;
+}
+interface ToastRegionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Fixed stack in the top-right corner of the window that holds Toasts, newest on top. */
+declare function ToastRegion({ className, children, ...rest }: ToastRegionProps): react.JSX.Element;
+/** Fidel design-system Toast: a short status message with an optional action. Place it in a ToastRegion. */
+declare function Toast({ children, action, onDismiss, duration, className, ...rest }: ToastProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListLabel, type ListLabelProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, type Tone, Tooltip, type TooltipProps, type TooltipSide, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement, ElementType, ComponentPropsWithoutRef } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
 /** High-contrast near-black, for a page's main create action ("New comparison"). */
@@ -831,23 +831,57 @@ interface MenuItem {
     /** `danger` for destructive actions, e.g. "Sign out of this device". */
     tone?: 'default' | 'danger';
     icon?: ReactNode;
+    /** Square or round image before the label, e.g. a workspace avatar. */
+    avatar?: ReactNode;
+    /** Second line under the label. */
+    description?: ReactNode;
+    /** Shows a check at the end of the row, for the current choice. */
+    selected?: boolean;
+    /** Content at the end of the row, e.g. a Badge or a "Sign in" action. */
+    trailing?: ReactNode;
+    /** Text the search matches against. Defaults to the label when it is a string. */
+    keywords?: string;
     disabled?: boolean;
 }
+interface MenuLabel {
+    type: 'label';
+    label: ReactNode;
+}
+interface MenuDivider {
+    type: 'divider';
+}
+type MenuEntry = MenuItem | MenuLabel | MenuDivider;
+interface MenuSearch {
+    placeholder: string;
+    /** Shown when nothing matches. */
+    emptyLabel: string;
+    /** Shows the field but turns it off, e.g. when there is nothing to search yet. */
+    disabled?: boolean;
+}
+type MenuPlacement = 'bottom' | 'top' | 'right';
 interface MenuProps {
-    /** The button that opens the menu, usually an IconButton. It gets the click and ARIA wiring. */
+    /** The button that opens the menu. It gets the click and ARIA wiring. */
     trigger: ReactElement;
-    items: MenuItem[];
+    items: MenuEntry[];
     /** Which edge of the trigger the menu lines up with. @default 'end' */
     align?: 'start' | 'end';
+    /** Which side of the trigger the menu opens on. @default 'bottom' */
+    placement?: MenuPlacement;
+    /** Adds a search field that filters items by label or `keywords`. */
+    search?: MenuSearch;
+    /** `wide` is 304px, for menus with avatars and descriptions. @default 'auto' */
+    width?: 'auto' | 'wide';
+    /** Lets the trigger fill the width of its container. */
+    block?: boolean;
     className?: string;
 }
 /**
- * Fidel design-system Menu: a short list of actions opened from a button,
- * e.g. a row's "more" menu. Keyboard: Enter/Space/↓ on the trigger open it;
- * ↑/↓/Home/End move; Enter/Space choose; Esc and Tab close; clicking outside
- * closes.
+ * Fidel design-system Menu: a list of actions or choices opened from a button.
+ * Keyboard: Enter/Space/↓ on the trigger open it; ↑/↓/Home/End move; Enter
+ * chooses; Esc closes and returns focus to the trigger; Tab and clicking
+ * outside close it.
  */
-declare function Menu({ trigger, items, align, className }: MenuProps): react.JSX.Element;
+declare function Menu({ trigger, items, align, placement, search, width, block, className, }: MenuProps): react.JSX.Element;
 
 interface TableColumn<Row> {
     key: string;
@@ -907,4 +941,208 @@ interface PricingCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  */
 declare function PricingCard({ eyebrow, title, badge, price, period, description, action, featuresTitle, featuresIntro, features, highlighted, className, ...rest }: PricingCardProps): react.JSX.Element;
 
-export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+type StatusDotStatus = 'running' | 'idle' | 'failed' | 'passed';
+interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    status: StatusDotStatus;
+    /** Accessible name. Leave out when a visible label next to the dot already says it. */
+    label?: string;
+}
+/** Fidel design-system StatusDot: a small dot for the state of the latest run. `running` pulses. */
+declare function StatusDot({ status, label, className, ...rest }: StatusDotProps): react.JSX.Element;
+
+interface ListLabelProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Fidel design-system ListLabel: the small heading above a group of list or menu items. */
+declare function ListLabel({ className, children, ...rest }: ListLabelProps): react.JSX.Element;
+
+interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    /** @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Fidel design-system Divider: a 1px rule between groups. */
+declare function Divider({ orientation, className, ...rest }: DividerProps): react.JSX.Element;
+
+type TooltipSide = 'right' | 'top' | 'bottom' | 'left';
+interface TooltipProps {
+    content: ReactNode;
+    /** The element the tooltip describes. It must accept mouse and focus handlers. */
+    children: ReactElement;
+    /** @default 'right' */
+    side?: TooltipSide;
+    /** Hover delay in ms. Keyboard focus shows it at once. @default 400 */
+    delay?: number;
+    /** Turns the tooltip off without unmounting the child, e.g. when a visible label is shown. */
+    disabled?: boolean;
+}
+/** Fidel design-system Tooltip: a short label shown on hover (after `delay`) or keyboard focus. */
+declare function Tooltip({ content, children, side, delay, disabled }: TooltipProps): react.JSX.Element;
+
+interface BrandButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** The product mark shown at rest. */
+    mark: ReactNode;
+    /** Shown on hover and focus in place of the mark. @default PanelLeftOpen */
+    hoverIcon?: ReactNode;
+    'aria-label': string;
+}
+/** Fidel design-system BrandButton: the product mark that turns into an action icon on hover or focus. */
+declare function BrandButton({ mark, hoverIcon, type, className, ...rest }: BrandButtonProps): react.JSX.Element;
+
+type OwnProps<C extends ElementType> = {
+    /** Element or component to render, e.g. a router Link. @default 'a' */
+    as?: C;
+    /** 16px icon before the label. */
+    icon?: ReactNode;
+    /** Shown in place of the icon, e.g. a StatusDot. */
+    leading?: ReactNode;
+    /** The current page. Sets `aria-current="page"`. */
+    active?: boolean;
+    /** Hide the label and show it as a tooltip. Defaults to the surrounding Sidebar's collapsed state. */
+    iconOnly?: boolean;
+    children: ReactNode;
+};
+type SidebarItemProps<C extends ElementType = 'a'> = OwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps<C>>;
+/** Fidel design-system SidebarItem: one row in a side navigation. */
+declare function SidebarItem<C extends ElementType = 'a'>({ as, icon, leading, active, iconOnly, className, children, ...rest }: SidebarItemProps<C>): react.JSX.Element;
+
+interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    /** Starting state when uncontrolled. @default false */
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** ⌘\ / Ctrl+\ toggles the sidebar. @default true */
+    shortcut?: boolean;
+    children: ReactNode;
+}
+/**
+ * Fidel design-system Sidebar: the app's side navigation, 240px wide or a
+ * 60px rail. Compose it from Sidebar.Header, Sidebar.Brand, Sidebar.Action, Sidebar.Section, Sidebar.Item and
+ * Sidebar.Footer; parts read the collapsed state from context (`useSidebar`).
+ */
+declare function SidebarRoot({ collapsed: controlled, defaultCollapsed, onCollapsedChange, shortcut, className, children, 'aria-label': ariaLabel, ...rest }: SidebarProps): react.JSX.Element;
+interface SidebarBrandProps {
+    /** The full logo, shown when expanded. */
+    logo: ReactNode;
+    /** The compact mark, shown in the rail. */
+    mark: ReactNode;
+    /** @default 'Collapse sidebar' */
+    collapseLabel?: string;
+    /** @default 'Expand sidebar' */
+    expandLabel?: string;
+}
+/** The top row: logo and collapse button, crossfading to the mark that expands the rail. */
+declare function SidebarBrand({ logo, mark, collapseLabel, expandLabel, }: SidebarBrandProps): react.JSX.Element;
+interface SidebarActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon: ReactNode;
+    /** The visible label; in the rail it becomes the tooltip and accessible name. */
+    label: string;
+}
+/** The sidebar's main action, e.g. "New check": an outlined button that shrinks to its icon in the rail. */
+declare function SidebarAction({ icon, label, type, className, ...rest }: SidebarActionProps): react.JSX.Element;
+interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Leave the section out of the rail, e.g. a list of recent items. */
+    hideWhenCollapsed?: boolean;
+    children: ReactNode;
+}
+/** A vertical group of rows. */
+declare function SidebarSection({ hideWhenCollapsed, className, children, ...rest }: SidebarSectionProps): react.JSX.Element;
+/** The top block: brand row, workspace switcher and the main action, spaced tighter than sections. */
+declare function SidebarHeader({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** Rows pinned to the bottom of the sidebar. */
+declare function SidebarFooter({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare const Sidebar: typeof SidebarRoot & {
+    Header: typeof SidebarHeader;
+    Brand: typeof SidebarBrand;
+    Action: typeof SidebarAction;
+    Section: typeof SidebarSection;
+    Item: typeof SidebarItem;
+    Footer: typeof SidebarFooter;
+};
+
+interface SidebarState {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    toggle: () => void;
+}
+/** The surrounding Sidebar's collapsed state, or null outside a Sidebar. */
+declare function useSidebar(): SidebarState | null;
+
+interface WorkspaceSwitcherProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    name: string;
+    /** Plan name shown as a small tag, e.g. "Pro". */
+    plan?: string;
+    /** Replaces the default initial-on-dark square. */
+    avatar?: ReactNode;
+    /** Show only the avatar. Defaults to the surrounding Sidebar's collapsed state. */
+    compact?: boolean;
+}
+/** The square avatar used for a workspace: its first letter on the primary colour. */
+declare function WorkspaceAvatar({ name }: {
+    name: string;
+}): react.JSX.Element;
+/**
+ * Fidel design-system WorkspaceSwitcher: shows the active workspace and opens
+ * the workspace menu. Use it as a Menu trigger; `aria-expanded` drives the open state.
+ */
+declare const WorkspaceSwitcher: react.ForwardRefExoticComponent<WorkspaceSwitcherProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface AvatarLabelGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    name: string;
+    /** Second line, usually the email. */
+    detail?: string;
+    src?: string | null;
+    /** Show only the avatar. @default false */
+    compact?: boolean;
+}
+/**
+ * Fidel design-system AvatarLabelGroup: an avatar with a name and a second
+ * line, as a button (e.g. the trigger for an account menu).
+ */
+declare const AvatarLabelGroup: react.ForwardRefExoticComponent<AvatarLabelGroupProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Fidel design-system AppLayout: a full-height row holding a Sidebar and an AppLayout.Panel. */
+declare function AppLayoutRoot({ className, children, ...rest }: AppLayoutProps): react.JSX.Element;
+/** The content panel: inset from the window edges, rounded, and scrolls on its own. */
+declare function AppLayoutPanel({ className, children, ...rest }: HTMLAttributes<HTMLElement>): react.JSX.Element;
+declare const AppLayout: typeof AppLayoutRoot & {
+    Panel: typeof AppLayoutPanel;
+};
+
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Above the title, e.g. "Projects / Flow web app". */
+    breadcrumb?: ReactNode;
+    /** The page's one primary action, and any secondary ones. */
+    actions?: ReactNode;
+    /** Below the title row, e.g. a TabNav. */
+    children?: ReactNode;
+}
+/** Fidel design-system PageHeader: breadcrumb, title, description and actions at the top of a page. */
+declare function PageHeader({ title, description, breadcrumb, actions, className, children, ...rest }: PageHeaderProps): react.JSX.Element;
+
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    action?: ToastAction;
+    /** Shows a close button and is called when the toast should go away. */
+    onDismiss?: () => void;
+    /** Calls `onDismiss` after this many ms. Leave out to keep it until closed. */
+    duration?: number;
+}
+interface ToastRegionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Fixed stack in the top-right corner of the window that holds Toasts, newest on top. */
+declare function ToastRegion({ className, children, ...rest }: ToastRegionProps): react.JSX.Element;
+/** Fidel design-system Toast: a short status message with an optional action. Place it in a ToastRegion. */
+declare function Toast({ children, action, onDismiss, duration, className, ...rest }: ToastProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListLabel, type ListLabelProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, type Tone, Tooltip, type TooltipProps, type TooltipSide, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };