@usefidel/design-system 0.15.0 → 0.17.0

package/dist/index.d.cts

@@ -1,7 +1,9 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, 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"). */
@@ -24,6 +26,25 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare function Button({ variant, size, leftIcon, rightIcon, type, className, children, ...rest }: ButtonProps): react.JSX.Element;
 
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Where the link goes. */
+    href: string;
+    /** Visual style. @default 'primary' */
+    variant?: ButtonVariant;
+    /** Size step. @default 'medium' */
+    size?: ButtonSize;
+    /** Optional leading icon (rendered in a 20px slot). */
+    leftIcon?: ReactNode;
+    /** Optional trailing icon (rendered in a 20px slot). */
+    rightIcon?: ReactNode;
+}
+/**
+ * A link that looks like a Button. Use it when the action navigates (to a
+ * page or another site) rather than doing something on this page, so the
+ * browser keeps link behaviour: open in a new tab, copy link, status bar URL.
+ */
+declare function ButtonLink({ variant, size, leftIcon, rightIcon, className, children, ...rest }: ButtonLinkProps): react.JSX.Element;
+
 interface MismatchProperty {
     /** Property label, e.g. "color", "font-size". */
     label: string;
@@ -421,4 +442,165 @@ 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;
+
+/** Colour role. `accent` is the brand tint, for a prompt to act (an upgrade, a next step). */
+type CalloutTone = Tone | 'accent';
+interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Colour role. @default 'neutral' */
+    tone?: CalloutTone;
+    /** Leading icon, drawn at 16px in a 32px tile. */
+    icon?: ReactNode;
+    /** One-line heading. */
+    title: ReactNode;
+    /** Shown after the title, e.g. a Badge. */
+    titleAside?: ReactNode;
+    /** Supporting text under the title. */
+    children?: ReactNode;
+    /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
+    action?: ReactNode;
+}
+/**
+ * Fidel design-system Callout: a tinted row that tells the reader something
+ * about the page they are on and, optionally, what to do about it.
+ */
+declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): 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, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, 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 };

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, 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"). */
@@ -24,6 +26,25 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare function Button({ variant, size, leftIcon, rightIcon, type, className, children, ...rest }: ButtonProps): react.JSX.Element;
 
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Where the link goes. */
+    href: string;
+    /** Visual style. @default 'primary' */
+    variant?: ButtonVariant;
+    /** Size step. @default 'medium' */
+    size?: ButtonSize;
+    /** Optional leading icon (rendered in a 20px slot). */
+    leftIcon?: ReactNode;
+    /** Optional trailing icon (rendered in a 20px slot). */
+    rightIcon?: ReactNode;
+}
+/**
+ * A link that looks like a Button. Use it when the action navigates (to a
+ * page or another site) rather than doing something on this page, so the
+ * browser keeps link behaviour: open in a new tab, copy link, status bar URL.
+ */
+declare function ButtonLink({ variant, size, leftIcon, rightIcon, className, children, ...rest }: ButtonLinkProps): react.JSX.Element;
+
 interface MismatchProperty {
     /** Property label, e.g. "color", "font-size". */
     label: string;
@@ -421,4 +442,165 @@ 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;
+
+/** Colour role. `accent` is the brand tint, for a prompt to act (an upgrade, a next step). */
+type CalloutTone = Tone | 'accent';
+interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Colour role. @default 'neutral' */
+    tone?: CalloutTone;
+    /** Leading icon, drawn at 16px in a 32px tile. */
+    icon?: ReactNode;
+    /** One-line heading. */
+    title: ReactNode;
+    /** Shown after the title, e.g. a Badge. */
+    titleAside?: ReactNode;
+    /** Supporting text under the title. */
+    children?: ReactNode;
+    /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
+    action?: ReactNode;
+}
+/**
+ * Fidel design-system Callout: a tinted row that tells the reader something
+ * about the page they are on and, optionally, what to do about it.
+ */
+declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): 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, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, 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 };