@usefidel/design-system 0.15.0 → 0.16.0

package/dist/index.css

@@ -165,6 +165,22 @@
   color: #a3a3a3;
   cursor: not-allowed;
 }
+.fds-button--dark {
+  background-color: var(--color-primary, #171717);
+  color: var(--color-primary-text, #ffffff);
+  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
+}
+.fds-button--dark:hover:not(:disabled) {
+  background-color: var(--color-primary-hover, #262626);
+}
+.fds-button--dark:active:not(:disabled) {
+  background-color: #000000;
+}
+.fds-button--dark:disabled {
+  background-color: var(--color-surface, #f5f5f5);
+  color: #a3a3a3;
+  cursor: not-allowed;
+}
 .fds-button--neutral {
   background-color: var(--color-surface-subtle, #fafafa);
   color: var(--color-text-on-neutral, #404040);
@@ -1421,3 +1437,518 @@
     position: static;
   }
 }
+
+/* src/components/Badge/badge.css */
+.fds-badge {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: var(--radius-pill, 9999px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  font-weight: var(--font-weight-medium, 500);
+  white-space: nowrap;
+}
+.fds-badge__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.fds-badge__icon > svg {
+  width: 12px;
+  height: 12px;
+}
+.fds-badge--neutral {
+  background: var(--color-surface, #f5f5f5);
+  color: var(--color-text-secondary, #525252);
+}
+.fds-badge--info {
+  background: var(--color-info-surface, #eff6ff);
+  color: var(--color-info-strong, #2563eb);
+}
+.fds-badge--success {
+  background: var(--color-success-bg, #f0fdf4);
+  color: var(--color-success-text, #15803d);
+}
+.fds-badge--warning {
+  background: var(--color-warning-bg, #fffbeb);
+  color: var(--color-warning-text, #92400e);
+}
+.fds-badge--danger {
+  background: var(--color-error-bg, #fef2f2);
+  color: var(--color-destructive, #eb2d2d);
+}
+
+/* src/components/Tag/tag.css */
+.fds-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: var(--color-surface-subtle, #fafafa);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-md, 6px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  color: var(--color-text-secondary, #525252);
+  white-space: nowrap;
+}
+.fds-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full, 9999px);
+}
+.fds-dot--neutral {
+  background: var(--color-text-tertiary, #737373);
+}
+.fds-dot--info {
+  background: var(--color-info-strong, #2563eb);
+}
+.fds-dot--success {
+  background: var(--color-success, #059669);
+}
+.fds-dot--warning {
+  background: var(--color-warning, #ca8a04);
+}
+.fds-dot--danger {
+  background: var(--color-destructive, #eb2d2d);
+}
+
+/* src/components/MultiSelect/multi-select.css */
+.fds-multiselect {
+  position: relative;
+  display: inline-block;
+}
+.fds-multiselect__trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  min-height: 44px;
+  padding: 10px 14px;
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-lg, 8px);
+  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-md, 16px);
+  line-height: 24px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
+}
+.fds-multiselect__trigger:focus-visible,
+.fds-multiselect__trigger--open {
+  outline: none;
+  border-color: var(--color-accent, #ea580c);
+  box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
+}
+.fds-multiselect__trigger:disabled {
+  background: var(--color-surface-subtle, #fafafa);
+  color: var(--color-text-muted, #a3a3a3);
+  cursor: not-allowed;
+}
+.fds-multiselect__count {
+  padding: 2px 6px;
+  border: 1px solid var(--color-border-light, #f5f5f5);
+  border-radius: var(--radius-sm, 4px);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: 18px;
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-multiselect__chevron {
+  display: inline-flex;
+  margin-left: var(--spacing-4, 16px);
+  color: var(--color-text-tertiary, #737373);
+  transition: transform var(--duration-instant, 80ms) ease;
+}
+.fds-multiselect__chevron--open {
+  transform: rotate(180deg);
+}
+.fds-multiselect__popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 50;
+  min-width: max(100%, 280px);
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-lg, 8px);
+  box-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.fds-multiselect__list {
+  padding: 4px 0;
+}
+.fds-multiselect__list:focus {
+  outline: none;
+}
+.fds-multiselect__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  padding: 10px 14px;
+  cursor: pointer;
+}
+.fds-multiselect__option--active {
+  background: var(--color-surface-subtle, #fafafa);
+}
+.fds-multiselect__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.fds-multiselect__box {
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-sm, 4px);
+  color: var(--color-text, #171717);
+}
+.fds-multiselect__box--checked {
+  border-color: var(--color-text-secondary, #525252);
+}
+.fds-multiselect__optLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-md, 16px);
+  line-height: 24px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-multiselect__optCount {
+  flex-shrink: 0;
+  margin-left: var(--spacing-2, 8px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: 18px;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-multiselect__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  border-top: 1px solid var(--color-border, #e5e5e5);
+}
+.fds-multiselect__action {
+  padding: 0;
+  background: none;
+  border: 0;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: 18px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-tertiary, #737373);
+  cursor: pointer;
+}
+.fds-multiselect__action:hover {
+  color: var(--color-text, #171717);
+}
+.fds-multiselect__action:focus-visible {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs, 2px);
+}
+
+/* src/components/SearchInput/search-input.css */
+.fds-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.fds-search__icon {
+  position: absolute;
+  left: 14px;
+  color: var(--color-text-tertiary, #737373);
+  pointer-events: none;
+}
+.fds-search__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 40px 10px 42px;
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-lg, 8px);
+  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-md, 16px);
+  line-height: 24px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+  transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
+}
+.fds-search__input::placeholder {
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-search__input:focus {
+  outline: none;
+  border-color: var(--color-accent, #ea580c);
+  box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
+}
+.fds-search__input::-webkit-search-cancel-button {
+  cursor: pointer;
+}
+.fds-search__kbd {
+  position: absolute;
+  right: 12px;
+  padding: 0 6px;
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-sm, 4px);
+  font-family: var(--font-mono, monospace);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: 18px;
+  color: var(--color-text-tertiary, #737373);
+  pointer-events: none;
+}
+
+/* src/components/Pagination/pagination.css */
+.fds-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4, 16px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-pagination--compact {
+  justify-content: center;
+}
+.fds-pagination__range {
+  margin: 0;
+}
+.fds-pagination__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1, 4px);
+}
+.fds-pagination__arrow,
+.fds-pagination__page {
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 8px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-lg, 8px);
+  font: inherit;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-secondary, #525252);
+  cursor: pointer;
+  transition: background var(--duration-instant, 80ms) ease;
+}
+.fds-pagination__arrow:hover:not(:disabled),
+.fds-pagination__page:hover {
+  background: var(--color-surface, #f5f5f5);
+}
+.fds-pagination__arrow:disabled {
+  color: var(--color-text-muted, #a3a3a3);
+  cursor: not-allowed;
+}
+.fds-pagination__arrow:focus-visible,
+.fds-pagination__page:focus-visible {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: 2px;
+}
+.fds-pagination__page--current {
+  border-color: var(--color-border, #e5e5e5);
+  background: var(--color-surface-raised, #ffffff);
+  color: var(--color-text, #171717);
+  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
+}
+.fds-pagination__gap {
+  min-width: 24px;
+  text-align: center;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-pagination__status {
+  padding: 0 var(--spacing-2, 8px);
+  white-space: nowrap;
+}
+
+/* src/components/EmptyState/empty-state.css */
+.fds-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-8, 32px);
+  padding: 64px 40px;
+  text-align: center;
+}
+.fds-empty__illustration {
+  display: grid;
+  place-items: center;
+  min-height: 180px;
+}
+.fds-empty__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+}
+.fds-empty__title {
+  margin: 0;
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-display-xs, 24px);
+  line-height: 32px;
+  font-weight: var(--font-weight-medium, 500);
+  letter-spacing: -0.18px;
+  color: var(--color-text, #171717);
+}
+.fds-empty__description {
+  margin: 0;
+  max-width: 380px;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-empty__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-6, 24px);
+}
+.fds-empty__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-stacked-cards {
+  position: relative;
+  width: 240px;
+  height: 160px;
+}
+.fds-stacked-cards__card {
+  box-sizing: border-box;
+  position: absolute;
+  width: 180px;
+  height: 116px;
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-stacked-cards__card--back {
+  left: 30px;
+  top: 27px;
+  transform: rotate(5deg);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
+}
+.fds-stacked-cards__card--front {
+  left: 19px;
+  top: 3px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 16px;
+  border-width: 1.5px;
+  transform: rotate(-4deg);
+  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.02));
+}
+.fds-stacked-cards__lines {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100px;
+}
+.fds-stacked-cards__lines > span {
+  height: 6px;
+  border-radius: 3px;
+}
+.fds-stacked-cards__lines > span:nth-child(1) {
+  width: 100%;
+  background: var(--color-border, #e5e5e5);
+}
+.fds-stacked-cards__lines > span:nth-child(2) {
+  width: 70px;
+  background: var(--color-surface, #f5f5f5);
+}
+.fds-stacked-cards__lines > span:nth-child(3) {
+  width: 45px;
+  background: var(--color-surface-subtle, #fafafa);
+}
+.fds-stacked-cards__status {
+  color: var(--color-border, #e5e5e5);
+}
+.fds-stacked-cards__statusDot {
+  fill: var(--color-text-tertiary, #737373);
+}
+.fds-stacked-cards__badge {
+  position: absolute;
+  left: 145px;
+  top: 75px;
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-primary, #171717);
+  color: var(--color-primary-text, #ffffff);
+  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.13));
+}
+
+/* src/components/Skeleton/skeleton.css */
+.fds-skeleton {
+  display: block;
+  flex-shrink: 0;
+  max-width: 100%;
+  height: 16px;
+  border-radius: var(--radius-sm, 4px);
+  background: var(--color-surface-hover, #ececec);
+  animation: fds-skeleton-pulse 1.4s ease-in-out infinite;
+}
+.fds-skeleton--text {
+  width: 100%;
+  height: 1em;
+  border-radius: var(--radius-xs, 2px);
+}
+.fds-skeleton--circle {
+  border-radius: var(--radius-full, 9999px);
+}
+.fds-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  width: 100%;
+}
+@keyframes fds-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-skeleton {
+    animation: none;
+  }
+}

package/dist/index.d.cts

@@ -2,6 +2,8 @@ import * as react from 'react';
 import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
+/** High-contrast near-black, for a page's main create action ("New comparison"). */
+ | 'dark'
 /** Final confirm of a destructive action ("Delete my account"). */
  | 'danger'
 /** Starts a destructive action ("Delete account", "Remove"). */
@@ -421,4 +423,143 @@ interface SplitProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function Split({ aside, children, asideWidth, sticky, collapseBelow, className, style, ...rest }: SplitProps): react.JSX.Element;
 
-export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Split, type SplitProps, TabNav, type TabNavProps, Toggle, type ToggleProps, type ToggleSize, breakpoints };
+/** Semantic colour roles shared by status components (Badge, Tag, MultiSelect dots). */
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour role. @default 'neutral' */
+    tone?: Tone;
+    /** Leading icon, drawn at 12px. */
+    icon?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Fidel design-system Badge: a tinted pill naming a state ("Checking",
+ * "Checked", "Failed to run"). Measured from Figma "✅Project" status-badge
+ * (node 231:59799).
+ */
+declare function Badge({ tone, icon, className, children, ...rest }: BadgeProps): react.JSX.Element;
+
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Colour of the leading dot. Leave out for no dot. */
+    dot?: Tone;
+    children: ReactNode;
+}
+/**
+ * Fidel design-system Tag: a quiet bordered label for a category, with an
+ * optional coloured dot. Measured from Figma "✅Project" comparison-type chip
+ * (node 231:59808).
+ */
+declare function Tag({ dot, className, children, ...rest }: TagProps): react.JSX.Element;
+
+interface MultiSelectOption {
+    value: string;
+    label: string;
+    /** Coloured dot before the label. */
+    dot?: Tone;
+    /** Trailing count, e.g. how many results the option would show. */
+    count?: number;
+    disabled?: boolean;
+}
+interface MultiSelectProps {
+    /** Trigger text, e.g. "Status". Also the list's accessible name. */
+    label: string;
+    options: MultiSelectOption[];
+    /** Selected values. An empty list means nothing is ticked. */
+    value: string[];
+    onChange: (value: string[]) => void;
+    disabled?: boolean;
+    selectAllLabel?: string;
+    clearLabel?: string;
+    id?: string;
+    className?: string;
+}
+/**
+ * Fidel design-system MultiSelect: a filter menu of checkbox options, each
+ * with an optional dot and count, and Select all / Clear in the footer. The
+ * trigger shows "n/m" once anything is ticked. Keyboard: Enter/Space/↓ open;
+ * ↑/↓/Home/End move; Enter/Space toggle; Esc closes. Measured from Figma
+ * "✅Project" filter Select (node 231:60682).
+ */
+declare function MultiSelect({ label, options, value, onChange, disabled, selectAllLabel, clearLabel, id, className, }: MultiSelectProps): react.JSX.Element;
+
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Keyboard hint shown at the end while the field is empty, e.g. "/". */
+    shortcut?: string;
+    /** Class for the wrapper; `className` goes on the input. */
+    containerClassName?: string;
+}
+/**
+ * Fidel design-system SearchInput: a 44px search field with a leading
+ * magnifier. Measured from Figma "✅Project" toolbar search (node 231:59687).
+ */
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface PaginationProps {
+    /** Current page, 1-based. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** With `pageSize`, adds "Showing 1–20 of 45" (full variant only). */
+    total?: number;
+    pageSize?: number;
+    /** full: range text + page numbers. compact: "Page 2 of 3" between arrows. @default 'full' */
+    variant?: 'full' | 'compact';
+    className?: string;
+}
+/**
+ * Fidel design-system Pagination. Renders nothing when there is one page.
+ */
+declare function Pagination({ page, pageCount, onPageChange, total, pageSize, variant, className }: PaginationProps): react.JSX.Element | null;
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Picture above the title, e.g. <StackedCardsIllustration />. */
+    illustration?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Primary action, usually a Button. */
+    action?: ReactNode;
+    /** Secondary line under the action, e.g. a help link. */
+    footer?: ReactNode;
+}
+/**
+ * Fidel design-system EmptyState: a centred illustration, title, description,
+ * 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, 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.
+ */
+declare function StackedCardsIllustration({ className }: {
+    className?: string;
+}): react.JSX.Element;
+
+type SkeletonShape = 'rect' | 'text' | 'circle';
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** rect: a block. text: line(s) at text height. circle: an avatar or icon. @default 'rect' */
+    shape?: SkeletonShape;
+    /** CSS width; a number is px. Text defaults to 100%, circle to its height. */
+    width?: number | string;
+    /** CSS height; a number is px. Text defaults to one line (1em). @default 16 for rect and circle */
+    height?: number | string;
+    /** Text only: how many lines. The last of several is shorter, as text usually is. @default 1 */
+    lines?: number;
+}
+/**
+ * Fidel design-system Skeleton: a placeholder shape that pulses while content
+ * loads. Pages compose these into the shape of what's coming (rows, cards,
+ * headers). Purely visual and hidden from assistive tech; wrap a layout in
+ * SkeletonGroup so it's announced once as loading.
+ */
+declare function Skeleton({ shape, width, height, lines, className, style, ...rest }: SkeletonProps): react.JSX.Element;
+interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** What's loading, for screen readers. @default 'Loading' */
+    label?: string;
+    children: ReactNode;
+}
+/** Wraps a skeleton layout and announces it once as loading (role="status"). */
+declare function SkeletonGroup({ label, className, children, ...rest }: SkeletonGroupProps): react.JSX.Element;
+
+export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, 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, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };