@usefidel/design-system 0.25.0 → 0.26.0

package/dist/index.d.cts

@@ -480,6 +480,10 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     dot?: Tone;
     /** Leading icon, drawn at 14px, e.g. a repository or branch mark. */
     icon?: ReactNode;
+    /** Shows a remove button at the end; its label is "Remove <removeLabel>". */
+    onRemove?: () => void;
+    /** Names the tag for the remove button. Defaults to the text when it is a string. */
+    removeLabel?: string;
     children: ReactNode;
 }
 /**
@@ -487,7 +491,7 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * optional coloured dot. Measured from Figma "✅Project" comparison-type chip
  * (node 231:59808).
  */
-declare function Tag({ dot, icon, className, children, ...rest }: TagProps): react.JSX.Element;
+declare function Tag({ dot, icon, onRemove, removeLabel, className, children, ...rest }: TagProps): react.JSX.Element;
 
 interface MultiSelectOption {
     value: string;
@@ -566,6 +570,8 @@ interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
     description?: ReactNode;
     /** Primary action, usually a Button. */
     action?: ReactNode;
+    /** Second button, shown on the same row after the primary one. */
+    secondaryAction?: ReactNode;
     /** Secondary line under the action, e.g. a help link. */
     footer?: ReactNode;
     /** `compact` for an empty list inside a card or table: smaller title and
@@ -577,7 +583,7 @@ interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
  * action and footer, for a list or page with nothing in it yet. Measured from
  * Figma "✅Project" Empty State Container (node 231:59661).
  */
-declare function EmptyState({ illustration, title, description, action, footer, size, className, ...rest }: EmptyStateProps): react.JSX.Element;
+declare function EmptyState({ illustration, title, description, action, secondaryAction, footer, size, className, ...rest }: EmptyStateProps): react.JSX.Element;
 /**
  * Two tilted cards with a search badge: "nothing found yet". Drawn from the
  * Figma "Stacked Cards" layers (node 80:49887), 240×160.
@@ -1145,4 +1151,160 @@ declare function ToastRegion({ className, children, ...rest }: ToastRegionProps)
 /** 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 };
+type StepperStepStatus = 'done' | 'current' | 'upcoming';
+interface StepperStepProps {
+    status: StepperStepStatus;
+    children: ReactNode;
+}
+declare function StepperStep(_: StepperStepProps): null;
+interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    /** Stepper.Step elements, in order. */
+    children: ReactNode;
+}
+/** Fidel design-system Stepper: a numbered row of steps joined by lines, for a multi-step form. */
+declare function StepperRoot({ className, children, ...rest }: StepperProps): react.JSX.Element;
+declare const Stepper: typeof StepperRoot & {
+    Step: typeof StepperStep;
+};
+
+interface NumberedStepsProps extends HTMLAttributes<HTMLOListElement> {
+    /** NumberedSteps.Item elements, in order. */
+    children: ReactNode;
+}
+declare function NumberedStepsRoot({ className, children, ...rest }: NumberedStepsProps): react.JSX.Element;
+declare function NumberedStepsItem({ className, children, ...rest }: HTMLAttributes<HTMLLIElement>): react.JSX.Element;
+/** Fidel design-system NumberedSteps: a form laid out as numbered steps joined by a line. */
+declare const NumberedSteps: typeof NumberedStepsRoot & {
+    Item: typeof NumberedStepsItem;
+};
+
+interface OptionListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function OptionListRoot({ className, children, ...rest }: OptionListProps): react.JSX.Element;
+declare function OptionListLabel({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+interface OptionRowProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'title'> {
+    /** @default 'radio' */
+    control?: 'radio' | 'checkbox';
+    title: ReactNode;
+    description?: ReactNode;
+    /** Quiet text or a Badge at the end of the row, e.g. "Recommended" or "main, 3d ago". */
+    meta?: ReactNode;
+}
+/** One choice in an OptionList: a radio or checkbox with a title, a second line and optional end content. */
+declare function OptionRow({ control, title, description, meta, className, checked, disabled, ...rest }: OptionRowProps): react.JSX.Element;
+/** Fidel design-system OptionList: radio or checkbox rows in one bordered group, with optional group labels. */
+declare const OptionList: typeof OptionListRoot & {
+    Label: typeof OptionListLabel;
+    Row: typeof OptionRow;
+};
+
+interface ChecklistProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    children: ReactNode;
+}
+declare function ChecklistRoot({ title, className, children, ...rest }: ChecklistProps): react.JSX.Element;
+interface ChecklistItemProps {
+    done: boolean;
+    label: ReactNode;
+    /** The chosen value under the label, or a placeholder such as "Not set yet". */
+    value: ReactNode;
+}
+declare function ChecklistItem({ done, label, value }: ChecklistItemProps): react.JSX.Element;
+/** Fidel design-system Checklist: a summary of choices so far, each ticked once set. */
+declare const Checklist: typeof ChecklistRoot & {
+    Item: typeof ChecklistItem;
+};
+
+interface DrawerProps {
+    open: boolean;
+    /** Called on Escape, the close button, or a click on the page behind. */
+    onClose: () => void;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Pinned to the bottom: a summary on the left and the buttons, primary last. */
+    footer?: ReactNode;
+    /** False blocks every way of closing, e.g. while saving. @default true */
+    dismissible?: boolean;
+}
+/**
+ * Fidel design-system Drawer: a floating panel that slides in from the right over the
+ * page, for picking or editing without leaving it. Traps focus, locks page
+ * scroll and returns focus on close, like Modal.
+ */
+declare function Drawer({ open, onClose, title, description, children, footer, dismissible }: DrawerProps): react.ReactPortal | null;
+
+interface ResourceCardStat {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface ResourceCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** 16px icon before the title, e.g. a repository mark. */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Beside the title, e.g. a Tag. */
+    badge?: ReactNode;
+    /** Small lines under the title. */
+    meta?: ReactNode[];
+    stats?: ResourceCardStat[];
+    /** At the end of the card, e.g. a "Manage" button. */
+    action?: ReactNode;
+    /** `add` is the dashed card that invites adding another resource. @default 'default' */
+    variant?: 'default' | 'add';
+}
+/** Fidel design-system ResourceCard: one linked thing (a repository, an account) with its numbers and an action. */
+declare function ResourceCard({ icon, title, badge, meta, stats, action, variant, className, ...rest }: ResourceCardProps): react.JSX.Element;
+
+interface PageSkeletonProps {
+    /** What's loading, for screen readers. @default 'Loading' */
+    label?: string;
+    children: ReactNode;
+}
+/** Fidel design-system PageSkeleton: a page's loading layout, composed from its parts so it matches the page. */
+declare function PageSkeletonRoot({ label, children }: PageSkeletonProps): react.JSX.Element;
+interface PageSkeletonHeaderProps {
+    /** Real text when the title is known before data loads, e.g. "Projects". */
+    title?: ReactNode;
+    description?: ReactNode | boolean;
+    breadcrumb?: boolean;
+    action?: boolean;
+    /** Number of tabs under the title. */
+    tabs?: number;
+}
+/** The PageHeader with bars where data-driven text will go. */
+declare function PageSkeletonHeader({ title, description, breadcrumb, action, tabs }: PageSkeletonHeaderProps): react.JSX.Element;
+/** A search field and filter buttons. */
+declare function PageSkeletonToolbar({ filters }: {
+    filters?: number;
+}): react.JSX.Element;
+/** A bordered table with a header row and `rows` rows of `columns` cells. */
+declare function PageSkeletonTable({ rows, columns }: {
+    rows?: number;
+    columns?: number;
+}): react.JSX.Element;
+/** A grid of cards. */
+declare function PageSkeletonCards({ count, height, columns }: {
+    count?: number;
+    height?: number;
+    columns?: number;
+}): react.JSX.Element;
+/** Labelled fields, one under the other. */
+declare function PageSkeletonForm({ fields }: {
+    fields?: number;
+}): react.JSX.Element;
+/** Main content beside a fixed-width aside, like a form with its summary. */
+declare function PageSkeletonSplit({ children, aside }: {
+    children: ReactNode;
+    aside: ReactNode;
+}): react.JSX.Element;
+declare const PageSkeleton: typeof PageSkeletonRoot & {
+    Header: typeof PageSkeletonHeader;
+    Toolbar: typeof PageSkeletonToolbar;
+    Table: typeof PageSkeletonTable;
+    Cards: typeof PageSkeletonCards;
+    Form: typeof PageSkeletonForm;
+    Split: typeof PageSkeletonSplit;
+};
+
+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, Checklist, type ChecklistItemProps, type ChecklistProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, 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, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, 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, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, 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

@@ -480,6 +480,10 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     dot?: Tone;
     /** Leading icon, drawn at 14px, e.g. a repository or branch mark. */
     icon?: ReactNode;
+    /** Shows a remove button at the end; its label is "Remove <removeLabel>". */
+    onRemove?: () => void;
+    /** Names the tag for the remove button. Defaults to the text when it is a string. */
+    removeLabel?: string;
     children: ReactNode;
 }
 /**
@@ -487,7 +491,7 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * optional coloured dot. Measured from Figma "✅Project" comparison-type chip
  * (node 231:59808).
  */
-declare function Tag({ dot, icon, className, children, ...rest }: TagProps): react.JSX.Element;
+declare function Tag({ dot, icon, onRemove, removeLabel, className, children, ...rest }: TagProps): react.JSX.Element;
 
 interface MultiSelectOption {
     value: string;
@@ -566,6 +570,8 @@ interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
     description?: ReactNode;
     /** Primary action, usually a Button. */
     action?: ReactNode;
+    /** Second button, shown on the same row after the primary one. */
+    secondaryAction?: ReactNode;
     /** Secondary line under the action, e.g. a help link. */
     footer?: ReactNode;
     /** `compact` for an empty list inside a card or table: smaller title and
@@ -577,7 +583,7 @@ interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
  * action and footer, for a list or page with nothing in it yet. Measured from
  * Figma "✅Project" Empty State Container (node 231:59661).
  */
-declare function EmptyState({ illustration, title, description, action, footer, size, className, ...rest }: EmptyStateProps): react.JSX.Element;
+declare function EmptyState({ illustration, title, description, action, secondaryAction, footer, size, className, ...rest }: EmptyStateProps): react.JSX.Element;
 /**
  * Two tilted cards with a search badge: "nothing found yet". Drawn from the
  * Figma "Stacked Cards" layers (node 80:49887), 240×160.
@@ -1145,4 +1151,160 @@ declare function ToastRegion({ className, children, ...rest }: ToastRegionProps)
 /** 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 };
+type StepperStepStatus = 'done' | 'current' | 'upcoming';
+interface StepperStepProps {
+    status: StepperStepStatus;
+    children: ReactNode;
+}
+declare function StepperStep(_: StepperStepProps): null;
+interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    /** Stepper.Step elements, in order. */
+    children: ReactNode;
+}
+/** Fidel design-system Stepper: a numbered row of steps joined by lines, for a multi-step form. */
+declare function StepperRoot({ className, children, ...rest }: StepperProps): react.JSX.Element;
+declare const Stepper: typeof StepperRoot & {
+    Step: typeof StepperStep;
+};
+
+interface NumberedStepsProps extends HTMLAttributes<HTMLOListElement> {
+    /** NumberedSteps.Item elements, in order. */
+    children: ReactNode;
+}
+declare function NumberedStepsRoot({ className, children, ...rest }: NumberedStepsProps): react.JSX.Element;
+declare function NumberedStepsItem({ className, children, ...rest }: HTMLAttributes<HTMLLIElement>): react.JSX.Element;
+/** Fidel design-system NumberedSteps: a form laid out as numbered steps joined by a line. */
+declare const NumberedSteps: typeof NumberedStepsRoot & {
+    Item: typeof NumberedStepsItem;
+};
+
+interface OptionListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function OptionListRoot({ className, children, ...rest }: OptionListProps): react.JSX.Element;
+declare function OptionListLabel({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+interface OptionRowProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'title'> {
+    /** @default 'radio' */
+    control?: 'radio' | 'checkbox';
+    title: ReactNode;
+    description?: ReactNode;
+    /** Quiet text or a Badge at the end of the row, e.g. "Recommended" or "main, 3d ago". */
+    meta?: ReactNode;
+}
+/** One choice in an OptionList: a radio or checkbox with a title, a second line and optional end content. */
+declare function OptionRow({ control, title, description, meta, className, checked, disabled, ...rest }: OptionRowProps): react.JSX.Element;
+/** Fidel design-system OptionList: radio or checkbox rows in one bordered group, with optional group labels. */
+declare const OptionList: typeof OptionListRoot & {
+    Label: typeof OptionListLabel;
+    Row: typeof OptionRow;
+};
+
+interface ChecklistProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    children: ReactNode;
+}
+declare function ChecklistRoot({ title, className, children, ...rest }: ChecklistProps): react.JSX.Element;
+interface ChecklistItemProps {
+    done: boolean;
+    label: ReactNode;
+    /** The chosen value under the label, or a placeholder such as "Not set yet". */
+    value: ReactNode;
+}
+declare function ChecklistItem({ done, label, value }: ChecklistItemProps): react.JSX.Element;
+/** Fidel design-system Checklist: a summary of choices so far, each ticked once set. */
+declare const Checklist: typeof ChecklistRoot & {
+    Item: typeof ChecklistItem;
+};
+
+interface DrawerProps {
+    open: boolean;
+    /** Called on Escape, the close button, or a click on the page behind. */
+    onClose: () => void;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Pinned to the bottom: a summary on the left and the buttons, primary last. */
+    footer?: ReactNode;
+    /** False blocks every way of closing, e.g. while saving. @default true */
+    dismissible?: boolean;
+}
+/**
+ * Fidel design-system Drawer: a floating panel that slides in from the right over the
+ * page, for picking or editing without leaving it. Traps focus, locks page
+ * scroll and returns focus on close, like Modal.
+ */
+declare function Drawer({ open, onClose, title, description, children, footer, dismissible }: DrawerProps): react.ReactPortal | null;
+
+interface ResourceCardStat {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface ResourceCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** 16px icon before the title, e.g. a repository mark. */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Beside the title, e.g. a Tag. */
+    badge?: ReactNode;
+    /** Small lines under the title. */
+    meta?: ReactNode[];
+    stats?: ResourceCardStat[];
+    /** At the end of the card, e.g. a "Manage" button. */
+    action?: ReactNode;
+    /** `add` is the dashed card that invites adding another resource. @default 'default' */
+    variant?: 'default' | 'add';
+}
+/** Fidel design-system ResourceCard: one linked thing (a repository, an account) with its numbers and an action. */
+declare function ResourceCard({ icon, title, badge, meta, stats, action, variant, className, ...rest }: ResourceCardProps): react.JSX.Element;
+
+interface PageSkeletonProps {
+    /** What's loading, for screen readers. @default 'Loading' */
+    label?: string;
+    children: ReactNode;
+}
+/** Fidel design-system PageSkeleton: a page's loading layout, composed from its parts so it matches the page. */
+declare function PageSkeletonRoot({ label, children }: PageSkeletonProps): react.JSX.Element;
+interface PageSkeletonHeaderProps {
+    /** Real text when the title is known before data loads, e.g. "Projects". */
+    title?: ReactNode;
+    description?: ReactNode | boolean;
+    breadcrumb?: boolean;
+    action?: boolean;
+    /** Number of tabs under the title. */
+    tabs?: number;
+}
+/** The PageHeader with bars where data-driven text will go. */
+declare function PageSkeletonHeader({ title, description, breadcrumb, action, tabs }: PageSkeletonHeaderProps): react.JSX.Element;
+/** A search field and filter buttons. */
+declare function PageSkeletonToolbar({ filters }: {
+    filters?: number;
+}): react.JSX.Element;
+/** A bordered table with a header row and `rows` rows of `columns` cells. */
+declare function PageSkeletonTable({ rows, columns }: {
+    rows?: number;
+    columns?: number;
+}): react.JSX.Element;
+/** A grid of cards. */
+declare function PageSkeletonCards({ count, height, columns }: {
+    count?: number;
+    height?: number;
+    columns?: number;
+}): react.JSX.Element;
+/** Labelled fields, one under the other. */
+declare function PageSkeletonForm({ fields }: {
+    fields?: number;
+}): react.JSX.Element;
+/** Main content beside a fixed-width aside, like a form with its summary. */
+declare function PageSkeletonSplit({ children, aside }: {
+    children: ReactNode;
+    aside: ReactNode;
+}): react.JSX.Element;
+declare const PageSkeleton: typeof PageSkeletonRoot & {
+    Header: typeof PageSkeletonHeader;
+    Toolbar: typeof PageSkeletonToolbar;
+    Table: typeof PageSkeletonTable;
+    Cards: typeof PageSkeletonCards;
+    Form: typeof PageSkeletonForm;
+    Split: typeof PageSkeletonSplit;
+};
+
+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, Checklist, type ChecklistItemProps, type ChecklistProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, 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, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, 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, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, 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 };