@lagroon/inkwell-design-system 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,728 @@
+import { ButtonHTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react';
+import { ReactNode } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+
+export declare type AlignItems = "start" | "center" | "end" | "stretch" | "baseline";
+
+/**
+ * A compact circular (or square) identity mark showing an image or an initials
+ * fallback. Seeded from the app's account avatar. When `decorative` isn't set it
+ * exposes an accessible name (the image `alt`/`name`, or `role="img"` +
+ * `aria-label` for the initials fallback).
+ */
+export declare function Avatar({ name, src, alt, size, shape, children, decorative, interactive, onClick, buttonLabel, id, className, }: AvatarProps): JSX.Element;
+
+export declare interface AvatarProps {
+    /** Person/entity name. Drives the initials fallback and the accessible label. */
+    name?: string;
+    /** Image URL. When set (and it loads), shows the image instead of initials. */
+    src?: string;
+    /** Alt text for the image. Defaults to `name`. */
+    alt?: string;
+    /** Size preset. Defaults to "md" (matches the app's 34px avatar). */
+    size?: AvatarSize;
+    /** Circle (default) or square with a soft corner. */
+    shape?: AvatarShape;
+    /** Custom fallback (e.g. an icon) shown when there's no image. Overrides initials. */
+    children?: ReactNode;
+    /** Hide from assistive tech — use when the name is already shown adjacently. */
+    decorative?: boolean;
+    /**
+     * Make the avatar a button. Wraps it in a `<button>` that brightens the ring
+     * on hover/focus, matching the app's account trigger. Provide `onClick`.
+     */
+    interactive?: boolean;
+    /** Click handler when `interactive` is set. */
+    onClick?: () => void;
+    /** Accessible label for the interactive button. Defaults to `name`. */
+    buttonLabel?: string;
+    id?: string;
+    className?: string;
+}
+
+export declare type AvatarShape = "circle" | "square";
+
+export declare type AvatarSize = "sm" | "md" | "lg";
+
+/**
+ * A compact count / notification indicator. Show a small count or short label,
+ * or set `dot` for a bare indicator. For inline status labels use `Pill`
+ * instead.
+ */
+export declare function Badge({ tone, dot, className, children, ...props }: BadgeProps): JSX.Element;
+
+export declare interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Color tone. Defaults to `brand` (the notification color). */
+    tone?: BadgeTone;
+    /**
+     * Render a bare dot with no content — a presence indicator (generalizes the
+     * app's nav notification dot). Provide an `aria-label` if it's meaningful, or
+     * `aria-hidden` if it's purely decorative.
+     */
+    dot?: boolean;
+    children?: ReactNode;
+}
+
+export declare type BadgeTone = "brand" | "neutral" | "danger";
+
+export declare function BrandIcon({ id }: {
+    id: any;
+}): JSX.Element;
+
+/**
+ * The primary action control. `variant` selects the visual role and `size`
+ * the density; extra `className` values are appended for composition.
+ */
+export declare function Button({ variant, size, type, className, children, ...props }: ButtonProps): JSX.Element;
+
+export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual role in the action hierarchy. */
+    variant?: ButtonVariant;
+    /** Control height/density. `md` is the default and adds no modifier. */
+    size?: ButtonSize;
+    children?: ReactNode;
+}
+
+export declare type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export declare type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+
+/**
+ * A padded content surface. Borderless and raised by default (a content-unit
+ * sibling to the section-level `Panel`). Compose it with `SectionHeading` for a
+ * header and `CardActions` for a footer row.
+ */
+export declare function Card({ variant, tone, className, children, ...props }: CardProps): JSX.Element;
+
+/** A footer row of actions inside a `Card` — a wrapping, gap-spaced flex row. */
+export declare function CardActions({ className, children, ...props }: CardActionsProps): JSX.Element;
+
+export declare interface CardActionsProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export declare interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Surface treatment. `plain` (default) is borderless on the raised surface —
+     * the app's common look. `outlined` adds a subtle border on the default
+     * surface for the rare case that needs a hard edge.
+     */
+    variant?: CardVariant;
+    /** `danger` flags a destructive zone with a danger-soft border. */
+    tone?: CardTone;
+    children?: ReactNode;
+}
+
+export declare type CardTone = "default" | "danger";
+
+export declare type CardVariant = "plain" | "outlined";
+
+/**
+ * Checkbox with an inline label. Unlike {@link TextInput}, the checkbox owns its
+ * own label rather than pairing with a stacked `FormField` label, so it stays
+ * self-contained.
+ */
+export declare function Checkbox({ id, label, invalid, className, ...props }: CheckboxProps): JSX.Element;
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Inline label text. */
+    label?: ReactNode;
+    /** Force the invalid state. */
+    invalid?: boolean;
+}
+
+/**
+ * A disclosure: the whole header is the toggle button, with a chevron that
+ * rotates when open. The chevron sits in a contained box that carries the
+ * hover/focus fill, so the affordance reads as a control even though the full
+ * row is clickable. Works controlled (`open` + `onOpenChange`) or uncontrolled
+ * (`defaultOpen`). The content stays mounted and is hidden via the `hidden`
+ * attribute so `aria-controls` always resolves.
+ */
+export declare function Collapsible({ title, description, meta, defaultOpen, open, onOpenChange, divided, children, id, className, }: CollapsibleProps): JSX.Element;
+
+export declare interface CollapsibleProps {
+    /** The trigger's main label. */
+    title: ReactNode;
+    /** Optional secondary line under the title. */
+    description?: ReactNode;
+    /** Optional trailing meta (e.g. a count), before the chevron. */
+    meta?: ReactNode;
+    /** Uncontrolled initial open state. Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called with the next open state when the trigger is activated. */
+    onOpenChange?: (open: boolean) => void;
+    /** Adds a hairline divider under the row — matches the app's stacked submission rows. */
+    divided?: boolean;
+    /** The revealed content. */
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}
+
+/**
+ * A thin rule that separates content. Horizontal by default (a native `<hr>`);
+ * pass `orientation="vertical"` for an inline rule, or `label` for a labeled
+ * separator with the text centered between two lines. Uses the app's hairline
+ * (`--line-soft`) and carries no margins — space it with layout primitives.
+ */
+export declare function Divider({ orientation, label, id, className }: DividerProps): JSX.Element;
+
+export declare interface DividerProps {
+    /** Direction of the rule. Vertical needs a flex/grid parent to take height. */
+    orientation?: "horizontal" | "vertical";
+    /** Optional centered label (horizontal only), e.g. "or". */
+    label?: ReactNode;
+    id?: string;
+    className?: string;
+}
+
+export declare function EmptyState({ children, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    className?: string | undefined;
+}): JSX.Element;
+
+/**
+ * Labelled field wrapper. Owns the control's id and forwards hint/error wiring
+ * to whichever Inkwell control it wraps.
+ */
+export declare function FormField({ label, hint, error, htmlFor, required, className, children, }: FormFieldProps): JSX.Element;
+
+export declare interface FormFieldProps {
+    /** Visible label text. */
+    label?: ReactNode;
+    /** Helper text shown below the control. */
+    hint?: ReactNode;
+    /** Error text; sets the field invalid and replaces the hint. */
+    error?: ReactNode;
+    /** Explicit control id. Auto-generated when omitted. */
+    htmlFor?: string;
+    /** Marks the field required (visual marker + inherited by the control). */
+    required?: boolean;
+    /** Extra class names on the field wrapper. */
+    className?: string;
+    /** The control (TextInput, Textarea, Select, …). */
+    children: ReactNode;
+}
+
+/** Equal-column grid using the app's `repeat(n, minmax(0, 1fr))` convention. */
+export declare function Grid({ gap, columns, align, className, style, children, ...props }: GridProps): JSX.Element;
+
+export declare interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Space between cells. Defaults to `md` (12px). */
+    gap?: SpaceScale;
+    /** Number of equal columns (`repeat(n, minmax(0, 1fr))`). Defaults to 2. */
+    columns?: number;
+    /** Cross-axis alignment (`align-items`). */
+    align?: AlignItems;
+    children?: ReactNode;
+}
+
+export declare function IconArrowDown(props: any): JSX.Element;
+
+export declare function IconAward(props: any): JSX.Element;
+
+/**
+ * A square, icon-only button. Provide an accessible name via `aria-label`.
+ */
+export declare function IconButton({ icon, size, className, type, ...props }: IconButtonProps): JSX.Element;
+
+export declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The icon element to render. */
+    icon?: ReactNode;
+    /** Control size. `md` is the default and adds no modifier. */
+    size?: IconButtonSize;
+}
+
+export declare type IconButtonSize = "sm" | "md" | "lg";
+
+export declare function IconCheck(props: any): JSX.Element;
+
+export declare function IconClose(props: any): JSX.Element;
+
+export declare function IconCopy(props: any): JSX.Element;
+
+export declare function IconDiscord(props: any): JSX.Element;
+
+export declare function IconDotsVertical({ style, ...rest }: {
+    [x: string]: any;
+    style: any;
+}): JSX.Element;
+
+export declare function IconEye(props: any): JSX.Element;
+
+export declare function IconGoogle(props: any): JSX.Element;
+
+export declare function IconList(props: any): JSX.Element;
+
+export declare function IconLogin(props: any): JSX.Element;
+
+export declare function IconLogout(props: any): JSX.Element;
+
+export declare function IconRestart(props: any): JSX.Element;
+
+export declare function IconSettings(props: any): JSX.Element;
+
+export declare function IconShirt(props: any): JSX.Element;
+
+export declare function IconTrophy(props: any): JSX.Element;
+
+export declare function IconUsers(props: any): JSX.Element;
+
+/** Horizontal flow with gap, wrapping, and alignment. */
+export declare function Inline({ gap, align, justify, wrap, className, style, children, ...props }: InlineProps): JSX.Element;
+
+export declare interface InlineProps extends HTMLAttributes<HTMLDivElement> {
+    /** Space between children. Defaults to `md` (12px). */
+    gap?: SpaceScale;
+    /** Cross-axis alignment (`align-items`). Defaults to `center`. */
+    align?: AlignItems;
+    /** Main-axis distribution (`justify-content`). */
+    justify?: JustifyContent;
+    /** Whether children wrap onto multiple rows. Defaults to `true`. */
+    wrap?: boolean;
+    children?: ReactNode;
+}
+
+export declare type JustifyContent = "start" | "center" | "end" | "between" | "around";
+
+/**
+ * A grid-based list of rows. Not a semantic table — use for content that reads
+ * tabularly but isn't structured data (e.g. the app's roster). Each row is a
+ * grid with the column template set on the parent via `columns`.
+ */
+export declare function List({ columns, density, bordered, children, id, className, }: ListProps): JSX.Element;
+
+export declare namespace List {
+    var Row: ({ children, id, className }: ListRowProps) => JSX.Element;
+}
+
+export declare type ListDensity = "comfortable" | "compact";
+
+export declare interface ListProps {
+    /**
+     * Grid template for row columns (e.g. `"1fr 1fr auto"`,
+     * `"minmax(0, 1.1fr) minmax(0, 1fr) auto"`). Applied to every child row via
+     * a CSS custom property, so all rows share the same column geometry.
+     */
+    columns: string;
+    /** Row padding preset. Defaults to "comfortable". */
+    density?: ListDensity;
+    /** Hide the hairline divider between rows. */
+    bordered?: boolean;
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}
+
+export declare interface ListRowProps {
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}
+
+/**
+ * A dialog surface with a titled header and close control. When `open` it:
+ * moves focus into the dialog, traps Tab within it, closes on Escape, locks
+ * background scroll, and restores focus to the previously focused element on
+ * close.
+ *
+ * Note: intentionally rendered in place (not portalled). `.modal` is
+ * `position: fixed`, and portalling to `document.body` would break Storybook's
+ * canvas rendering, which relies on the story container to scope fixed
+ * positioning. Consumers who need portal behavior can wrap it themselves.
+ */
+export declare function ModalFrame({ id, titleId, title, onClose, children, size, cardClassName, describedBy, open, className, }: ModalFrameProps): JSX.Element;
+
+export declare interface ModalFrameProps {
+    id?: string;
+    /** id of the element that labels the dialog (`aria-labelledby`). */
+    titleId?: string;
+    /** Heading rendered at the top of the modal card. */
+    title?: ReactNode;
+    /** Called when the backdrop, close button, or Escape is activated. */
+    onClose?: () => void;
+    children?: ReactNode;
+    /** Preset card sizing. */
+    size?: ModalSize;
+    /** Overrides the size preset's card class entirely. */
+    cardClassName?: string;
+    /** id of the element that describes the dialog (`aria-describedby`). */
+    describedBy?: string;
+    /** Whether the modal is visible. */
+    open?: boolean;
+    className?: string;
+}
+
+export declare type ModalSize = "default" | "compact" | "picker" | "settings";
+
+export declare function Panel({ children, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    className?: string | undefined;
+}): JSX.Element;
+
+/**
+ * A small status/label chip. Use `tone` to signal state; keep the label short.
+ */
+export declare function Pill({ tone, children, className, ...props }: PillProps): JSX.Element;
+
+export declare interface PillProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Semantic tone. `default` is neutral and adds no modifier. */
+    tone?: PillTone;
+    children?: ReactNode;
+}
+
+export declare type PillTone = "default" | "success" | "warning" | "danger";
+
+/**
+ * A trigger + popover surface. Fully keyboard operable: ArrowDown opens and
+ * focuses the first item; Up/Down and Home/End move between items; Escape
+ * closes and returns focus to the trigger; Tab closes.
+ */
+export declare function PopoverMenu({ trigger, children, menuClassName, popoverClassName, menuRole, menuLabel, }: PopoverMenuProps): JSX.Element;
+
+export declare interface PopoverMenuProps {
+    /** Render prop for the trigger; receives the open state and a toggle handler. */
+    trigger: (props: PopoverMenuTriggerProps) => ReactNode;
+    children?: ReactNode;
+    menuClassName?: string;
+    popoverClassName?: string;
+    menuRole?: string;
+    menuLabel?: string;
+}
+
+export declare interface PopoverMenuTriggerProps {
+    open: boolean;
+    onToggle: () => void;
+}
+
+/**
+ * A horizontal progress bar. Pass `value` for determinate progress; omit it for
+ * an indeterminate sliding-bar animation. Exposes `role="progressbar"` with
+ * `aria-valuemin/max/now` (or `aria-valuetext="indeterminate"` when unknown).
+ */
+export declare function Progress({ value, tone, size, label, valueFormatter, ariaLabel, id, className, }: ProgressProps): JSX.Element;
+
+export declare interface ProgressProps {
+    /** Current progress (0–100). Omit for an indeterminate bar. */
+    value?: number;
+    /** Fill color. Defaults to "brand". */
+    tone?: ProgressTone;
+    /** Track height. `md` (default) ≈ 6px; `sm` ≈ 3px. */
+    size?: ProgressSize;
+    /** Optional visible label rendered above the track. Also becomes the accessible name. */
+    label?: ReactNode;
+    /** Value formatter shown next to the label (determinate only). Defaults to `${value}%`. */
+    valueFormatter?: (value: number) => string;
+    /** Fallback accessible name when `label` isn't set. */
+    ariaLabel?: string;
+    id?: string;
+    className?: string;
+}
+
+export declare type ProgressSize = "sm" | "md";
+
+export declare type ProgressTone = "brand" | "success" | "danger";
+
+/**
+ * @param {Object} props
+ * @param {import("react").ReactNode} [props.eyebrow]
+ * @param {import("react").ReactNode} [props.title]
+ * @param {string} [props.titleId] id applied to the title heading (for `aria-labelledby`).
+ * @param {import("react").ReactNode} [props.copy]
+ * @param {boolean} [props.compact]
+ * @param {import("react").ReactNode} [props.children]
+ * @param {string} [props.className]
+ */
+export declare function SectionHeading({ eyebrow, title, titleId, copy, compact, children, className }: {
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    titleId?: string | undefined;
+    copy?: ReactNode;
+    compact?: boolean | undefined;
+    children?: ReactNode;
+    className?: string | undefined;
+}): JSX.Element;
+
+/**
+ * A custom listbox select. Fully keyboard operable: the trigger opens on
+ * Arrow/Enter/Space; the open list supports Up/Down, Home/End, type-ahead,
+ * Enter/Space to choose, and Escape to close (returning focus to the trigger).
+ */
+export declare function Select({ value, onChange, options, placeholder, variant, disabled, "aria-label": ariaLabel, id, }: SelectProps): JSX.Element;
+
+export declare interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface SelectProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    options?: SelectOption[];
+    placeholder?: string;
+    variant?: "form" | "control";
+    disabled?: boolean;
+    "aria-label"?: string;
+    id?: string;
+}
+
+/**
+ * A placeholder block that shimmers while content is loading. `text` reads as a
+ * single line (or `lines`-many); `circle` is a 1:1 avatar-style placeholder;
+ * `rect` is a generic block sized by width/height. Always decorative — a
+ * surrounding region should announce the loading state.
+ */
+export declare function Skeleton({ variant, width, height, size, lines, id, className }: SkeletonProps): JSX.Element;
+
+export declare interface SkeletonProps {
+    /** Shape preset. `text` is a single-line placeholder; `circle` is 1:1; `rect` is generic. Defaults to "text". */
+    variant?: SkeletonVariant;
+    /** CSS width. Defaults to `100%` for text/rect, or `size` for circles. */
+    width?: number | string;
+    /** CSS height. Defaults to `1em` for text, `size` for circle, and requires a value for rect. */
+    height?: number | string;
+    /** Convenience for circles — sets both width and height. Defaults to 40. */
+    size?: number | string;
+    /** Number of stacked text lines. Only applies to `variant="text"`. */
+    lines?: number;
+    id?: string;
+    className?: string;
+}
+
+export declare type SkeletonVariant = "text" | "rect" | "circle";
+
+/**
+ * Layout primitives for Inkwell.
+ *
+ * Stack / Inline / Grid arrange children with token-backed spacing so consumers
+ * stop hand-rolling flexbox and arbitrary gap values. The `gap` scale maps to
+ * the same spacing rhythm the source app used — `md` (12px / --space-3) is the
+ * default, matching the app's `.stacked-form` / `.grid` layout rhythm.
+ *
+ * Each primitive renders a `div` with a base class and sets CSS variables inline
+ * so the props drive the values while the rules live in the stylesheet.
+ */
+export declare type SpaceScale = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+/**
+ * A small rotating indeterminate loader. Use for short waits inside a control
+ * or beside a label. For loading larger regions of content, use `Skeleton`
+ * instead so the layout doesn't jump when data arrives.
+ */
+export declare function Spinner({ size, tone, label, decorative, id, className, }: SpinnerProps): JSX.Element;
+
+export declare interface SpinnerProps {
+    /** Diameter preset. Defaults to "md" (20px). */
+    size?: SpinnerSize;
+    /** Spinner color. `current` inherits `currentColor`. Defaults to "muted". */
+    tone?: SpinnerTone;
+    /** Announced by screen readers. Defaults to "Loading". */
+    label?: string;
+    /** Skip the announcement (use when a surrounding region already announces state). */
+    decorative?: boolean;
+    id?: string;
+    className?: string;
+}
+
+export declare type SpinnerSize = "sm" | "md" | "lg";
+
+export declare type SpinnerTone = "muted" | "brand" | "current";
+
+export declare function SplitButton({ primaryLabel, onPrimaryClick, items }: {
+    primaryLabel: any;
+    onPrimaryClick: any;
+    items?: never[] | undefined;
+}): JSX.Element;
+
+/** Vertical flow with a consistent, token-backed gap. */
+export declare function Stack({ gap, align, className, style, children, ...props }: StackProps): JSX.Element;
+
+export declare interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Space between children. Defaults to `md` (12px). */
+    gap?: SpaceScale;
+    /** Cross-axis alignment (`align-items`). */
+    align?: AlignItems;
+    children?: ReactNode;
+}
+
+/**
+ * An inline, persistent status message for a surface or form. Use for state
+ * that should stay visible (vs. a transient Toast).
+ */
+export declare function StatusBanner({ message, tone, onDismiss }: StatusBannerProps): JSX.Element | null;
+
+export declare interface StatusBannerProps {
+    /** Banner copy. When empty/falsy the banner renders nothing. */
+    message?: ReactNode;
+    /** Semantic tone. `success` uses the default styling (no modifier). */
+    tone?: StatusBannerTone;
+    /** When provided, renders a dismiss button that calls this handler. */
+    onDismiss?: () => void;
+}
+
+export declare type StatusBannerTone = "success" | "warning" | "error";
+
+export declare interface TabItem {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+
+/**
+ * A semantic HTML table with optional sortable columns, sticky header, row
+ * hover, and density presets. Sorting is caller-controlled: the component
+ * surfaces the click and shows the indicator, but the data must already be in
+ * the desired order (use `onSortChange` to react).
+ */
+export declare function Table<T>({ columns, data, getRowKey, sortBy, sortDirection, onSortChange, defaultSortBy, defaultSortDirection, density, stickyHeader, hoverable, caption, empty, id, className, }: TableProps<T>): JSX.Element;
+
+export declare type TableAlign = "start" | "center" | "end";
+
+export declare interface TableColumn<T> {
+    /** Stable id used for sort state and React keys. */
+    id: string;
+    /** Header cell content. */
+    header: ReactNode;
+    /** Renders the body cell for a row. */
+    render: (row: T) => ReactNode;
+    /** Show the sort affordance on the header; clicks call `onSortChange`. */
+    sortable?: boolean;
+    /** Text alignment for this column's cells and header. Defaults to "start". */
+    align?: TableAlign;
+    /** Optional width, applied via `<colgroup>` (e.g. "12ch", "20%"). */
+    width?: string;
+}
+
+export declare type TableDensity = "comfortable" | "compact";
+
+export declare interface TableProps<T> {
+    columns: TableColumn<T>[];
+    data: readonly T[];
+    /** Stable React key for each row. */
+    getRowKey: (row: T) => string | number;
+    /** Controlled sort column id. */
+    sortBy?: string;
+    /** Controlled sort direction. */
+    sortDirection?: TableSortDirection;
+    /** Called when a sortable header is activated. */
+    onSortChange?: (sortBy: string, direction: TableSortDirection) => void;
+    /** Uncontrolled starting sort column. */
+    defaultSortBy?: string;
+    /** Uncontrolled starting sort direction. Defaults to "asc". */
+    defaultSortDirection?: TableSortDirection;
+    /** Row height / padding. Defaults to "comfortable". */
+    density?: TableDensity;
+    /** Pin `<thead>` when the parent scrolls. */
+    stickyHeader?: boolean;
+    /** Subtle hover fill on rows. */
+    hoverable?: boolean;
+    /** Renders as `<caption>`. */
+    caption?: ReactNode;
+    /** Empty-state content shown when `data` is empty. */
+    empty?: ReactNode;
+    id?: string;
+    className?: string;
+}
+
+export declare type TableSortDirection = "asc" | "desc";
+
+/**
+ * A segmented tab bar with a sliding underline indicator. Controlled: it renders
+ * the tablist and reports selection via `onChange`; render the matching panel
+ * yourself. Fully keyboard operable (Left/Right/Up/Down move and activate,
+ * Home/End jump to the ends, disabled tabs are skipped).
+ */
+export declare function Tabs({ tabs, value, onChange, "aria-label": ariaLabel, id }: TabsProps): JSX.Element;
+
+export declare interface TabsProps {
+    /** The tabs to render, in order. */
+    tabs: TabItem[];
+    /** The selected tab's value (controlled). */
+    value: string;
+    /** Called with the new value when the selection changes. */
+    onChange: (value: string) => void;
+    /** Accessible name for the tablist. */
+    "aria-label"?: string;
+    /**
+     * Base id. When set, each tab gets `${id}-tab-${value}` and references its
+     * panel via `aria-controls="${id}-panel-${value}"` — give the matching panel
+     * that id, `role="tabpanel"`, and `aria-labelledby` the tab id.
+     */
+    id?: string;
+}
+
+/**
+ * Multi-line text input. Same field-wiring behaviour as {@link TextInput}.
+ */
+export declare function Textarea({ id, rows, invalid, describedBy, className, ...props }: TextareaProps): JSX.Element;
+
+export declare interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Force the invalid state when used outside a `FormField`. */
+    invalid?: boolean;
+    /** Explicit `aria-describedby`. Falls back to the FormField value. */
+    describedBy?: string;
+}
+
+/**
+ * Single-line text input. Inherits field wiring when rendered inside a
+ * `FormField`; all native input props pass through.
+ */
+export declare function TextInput({ id, type, invalid, describedBy, className, ...props }: TextInputProps): JSX.Element;
+
+export declare interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Force the invalid state when used outside a `FormField`. */
+    invalid?: boolean;
+    /** Explicit `aria-describedby`. Falls back to the FormField value. */
+    describedBy?: string;
+}
+
+export declare function Toast({ id, message, tone, onDismiss }: {
+    id: any;
+    message: any;
+    tone: any;
+    onDismiss: any;
+}): JSX.Element;
+
+export declare function ToastRegion({ toasts, onDismiss }: {
+    toasts?: never[] | undefined;
+    onDismiss: any;
+}): JSX.Element;
+
+/**
+ * A tooltip: a trigger paired with a popover shown above it on hover or focus.
+ * Seeded from the app's info tooltip. The reveal is CSS-driven (`:hover` /
+ * `:focus-within`), so it works for pointer and keyboard alike; `Escape`
+ * dismisses it while focused. The content carries `role="tooltip"` and is wired
+ * to the trigger with `aria-describedby`.
+ */
+export declare function Tooltip({ content, placement, trigger, triggerLabel, id, className, }: TooltipProps): JSX.Element;
+
+export declare type TooltipPlacement = "top" | "bottom" | "left" | "right";
+
+export declare interface TooltipProps {
+    /** The tooltip body, revealed on hover/focus. */
+    content: ReactNode;
+    /** Which side of the trigger the popover appears on. Defaults to "top". */
+    placement?: TooltipPlacement;
+    /**
+     * The trigger. Defaults to a small round "i" info button. Pass a custom
+     * element (it should be focusable so keyboard users can reveal the tooltip);
+     * it will be wired to the content via `aria-describedby`.
+     */
+    trigger?: ReactNode;
+    /** Accessible label for the default info trigger. Defaults to "More information". */
+    triggerLabel?: string;
+    id?: string;
+    className?: string;
+}
+
+export { }