@ntmats/hc-ui 0.1.1 → 0.3.0

package/dist/index.d.ts

@@ -1,10 +1,13 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
-export type SurfaceTone = 'page' | 'main' | 'content' | 'elevated' | 'overlay';
+import { type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref } from 'react';
+export type SurfaceTone = 'page' | 'main' | 'content' | 'elevated' | 'overlay' | 'card';
 export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
     tone?: SurfaceTone;
+    /** Corner radius of the rounded tones (`content`, `elevated`, `overlay`, `card`): 16, 20 or 24px.
+     * Defaults to `md` (16px), and to `lg` (20px) for `card`, as HCUI's `surface` mixin. */
+    radius?: 'md' | 'lg' | 'xl';
 }
 /** Semantic color role only; placement, elevation and overlay behavior stay local. */
-export declare function Surface({ tone, className, ...props }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function Surface({ tone, radius, className, ...props }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
 export interface SegmentedOption<T extends string> {
     value: T;
     label: string;
@@ -15,21 +18,34 @@ export interface SegmentedControlProps<T extends string> extends Omit<HTMLAttrib
     label: string;
     value: T;
     options: readonly SegmentedOption<T>[];
-    onChange: (value: T) => void;
+    /** NoInfer: `T` comes from `value` and `options`, so a state setter cannot widen it to string. */
+    onChange: (value: NoInfer<T>) => void;
     density?: 'comfortable' | 'compact';
     orientation?: 'horizontal' | 'vertical';
     /** Icon-only options: labels stay as accessible names and tooltips. */
     hideLabels?: boolean;
+    /** `static` (default): the chosen option is raised in place. `slide`: one knob slides
+     * under the options, as HCUI's point cost toggle; options are laid out at equal width. */
+    indicator?: 'static' | 'slide';
+    /** Every option as wide as the widest one (or as `optionWidth`). */
+    equalWidth?: boolean;
+    /** Fixed width of each option in px; implies `equalWidth`. */
+    optionWidth?: number;
 }
 /** Controlled, single-choice control with radio semantics and roving focus. */
-export declare function SegmentedControl<T extends string>({ label, value, options, onChange, density, orientation, hideLabels, className, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl<T extends string>({ label, value, options, onChange, density, orientation, hideLabels, indicator, equalWidth, optionWidth, className, style, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
 export type ButtonVariant = 'secondary' | 'primary' | 'outline' | 'danger';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
-    size?: 'md' | 'lg';
+    /** 36, 44 or 52px. */
+    size?: 'sm' | 'md' | 'lg';
     /** Decorative icon before the label; pass it already sized (18px in HCUI). */
     icon?: ReactNode;
+    /** Decorative icon after the label. */
+    iconEnd?: ReactNode;
     fullWidth?: boolean;
+    /** Busy state: keeps focus and label, shows a spinner and ignores clicks. */
+    loading?: boolean;
 }
 /** Pill button. The caller supplies the label text and handles the action. */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -40,16 +56,115 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     /** 36, 40 or 44px. The 36px size keeps a 44px touch target. */
     size?: 'sm' | 'md' | 'lg';
     tone?: 'primary' | 'secondary';
+    /** Fill: `muted` (default, HCUI `icon-button`), `surface` (surface with the card ring
+     * and shadow, HCUI's mobile theme button), `outline` (surface with a 1px border ring,
+     * HCUI's mobile sort button) or `ghost` (no fill until hover). */
+    variant?: 'muted' | 'surface' | 'outline' | 'ghost';
+    /** `circle` (default) or `rounded` (a 12px-radius square, HCUI's desktop utilities). */
+    shape?: 'circle' | 'rounded';
+    /** Toggle state (`aria-pressed`); omit for a plain action. */
+    selected?: boolean;
+    /** When set, the icon is keyed by it and enters with a short turn and fade each time it
+     * changes (and on first render), as HCUI's theme button swaps sun and moon. */
+    iconKey?: string | number;
 }
 /** Round icon-only button (back, close, options). */
 export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ChipBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Toggle state for filters; omit for a plain action chip. */
     selected?: boolean;
     icon?: ReactNode;
+    /**
+     * `md` (default): 36px, 13px text (HCUI `chip`). `sm`: 36px, 12px text and 12px padding (HCUI's
+     * desktop filter pills and sort trigger). `xs`: 26px, 11px text, muted fill without ring (HCUI's
+     * desktop quick filters and chosen-value tags); selected turns to the contrast fill.
+     */
+    size?: 'md' | 'sm' | 'xs';
+    /** `outline` (default), or `quiet`: lighter ring and secondary text, bolder once applied (HCUI's rule filter pills). */
+    variant?: 'outline' | 'quiet';
+    /** A filter with values applied: a 1.5px ring in the primary text color (and primary, bolder text when `quiet`). */
+    applied?: boolean;
+    /**
+     * Muted number after the label, such as how many results a quick filter keeps. A number
+     * shows as given, 0 included (HCUI's quick filters show "0"); hidden when `undefined`, `null`, `false` or `''`.
+     */
+    count?: ReactNode;
+    /**
+     * Filled badge after the label: how many values a filter has applied. Shows 0 too; pass
+     * `undefined` (e.g. `badge={n || undefined}`) to hide it when nothing is applied.
+     */
+    badge?: ReactNode;
+    /**
+     * Down chevron at the end. On by default when the chip opens a popup (`aria-haspopup`,
+     * which `Menu` and `Popover` give their trigger); `aria-expanded="true"` draws the ring.
+     */
+    chevron?: boolean;
+    /**
+     * Adds a separate remove button (×) after the text. The chip then renders as a `span`
+     * holding the main button (ref, `onClick`, `aria-pressed`; a plain `span` when there is
+     * no `onClick`, as a chosen-value tag) and the remove button. `className` and `style` go on the `span`.
+     * Requires `clearLabel`.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible name and tooltip of the remove button (e.g. "Remover Batman"); required with `onClear`. */
+    clearLabel?: string;
 }
-/** Filter or option chip. Selected chips are filled with the accent color. */
+/** `Chip` props: with `onClear`, `clearLabel` is required, so the remove button always has a name. */
+export type ChipProps = ChipBaseProps & ({
+    onClear?: undefined;
+    clearLabel?: string;
+} | {
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    clearLabel: string;
+});
+/**
+ * Filter or option chip. Selected chips are filled with the accent color. As a filter
+ * trigger it takes a `badge` with the number of values applied, `applied`, and the
+ * chevron and ring of an open popup; `onClear` adds a remove button.
+ */
 export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Accessible name of the group (e.g. "Filtros"). */
+    label: string;
+    /** Before the filters, on the same line (a search field, "Filtros avançados"). */
+    start?: ReactNode;
+    /** After the filters, at the end of the line (a sort menu, a view toggle). */
+    end?: ReactNode;
+    /** Under the line: chosen-value tags, "Limpar tudo". */
+    footer?: ReactNode;
+    /**
+     * `wrap`: the filters wrap onto more lines (desktop). `scroll`: one line that scrolls
+     * sideways with a hidden scrollbar (phones). `auto` (default): `scroll` below 960px and
+     * `wrap` from 960px, by a CSS media query (HCUI's cut).
+     */
+    layout?: 'wrap' | 'scroll' | 'auto';
+    /** Space between filters: 8px (`comfortable`, default) or 4px (`compact`, HCUI's desktop quick filters). */
+    density?: 'comfortable' | 'compact';
+    /** A band that sticks to the top of the scrolling panel, with the surface fill and 8px above and below (HCUI's desktop filter bar). The offset is `--hc-filter-bar-top`. */
+    sticky?: boolean;
+}
+/**
+ * Layout of a row of filters (`Chip`s) with optional `start`, `end` and `footer` slots.
+ * Presentation only: which filters exist, their values, the search rules and persistence
+ * are the caller's. A scrolling row bleeds into the page gutter by `--hc-filter-bar-bleed`.
+ */
+export declare const FilterBar: import("react").ForwardRefExoticComponent<FilterBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Accessible name. Visible above the field unless `hideLabel` is set. */
+    label: string;
+    hideLabel?: boolean;
+    /** 40 or 44px. */
+    density?: 'comfortable' | 'compact';
+    /** Decorative icon at the start of the field. */
+    icon?: ReactNode;
+    /** Slot at the end of the field, such as a clear button. */
+    end?: ReactNode;
+    hint?: ReactNode;
+    /** Error message; also marks the input as invalid. */
+    error?: ReactNode;
+}
+/** Filled pill text field. Value, validation and messages stay with the caller. */
+export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
     width?: string | number;
     height?: string | number;
@@ -60,3 +175,468 @@ export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
  * enclosing region announces loading once (role="status" + label).
  */
 export declare function Skeleton({ width, height, circle, className, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+interface MeterOwnProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role'> {
+    /** Current amount, such as a team's points. May exceed `max`. */
+    value: number;
+    /** The limit the value is measured against; the minimum is 0. */
+    max: number;
+    /** Spoken value (`aria-valuetext`); defaults to `"<value> / <max>"`. */
+    valueText?: string;
+    /** Bar height in px: 3 (HCUI's mobile team bar), 4 (desktop sidebar draft) or 5 (team rules bar). */
+    thickness?: 3 | 4 | 5;
+    /** Track behind the fill: `muted` (bg-muted), `border` (color-border) or `none` (fill only). */
+    track?: 'muted' | 'border' | 'none';
+    /** Leading end of the fill: rounded, or cut square against the track. */
+    cap?: 'round' | 'square';
+    /**
+     * Above the limit: `clamp` fills the whole bar; `mark` scales the bar to the value
+     * and draws a 2px line where the limit is, in the text color so it shows over the danger fill.
+     */
+    overflow?: 'clamp' | 'mark';
+    /** `auto` turns `over` (danger) when value > max; `default` and `over` force a tone. */
+    tone?: 'auto' | 'default' | 'over';
+    /** Transition the fill's width (none under reduced motion). */
+    animated?: boolean;
+}
+export type MeterProps = MeterOwnProps & (
+/** `label` is the accessible name; the visible text ("375 / 300 pts") stays with the caller. */
+{
+    label: string;
+    decorative?: false;
+}
+/** Hidden from assistive technology, for when the numbers are already next to it. */
+ | {
+    decorative: true;
+    label?: string;
+});
+/**
+ * Bar of a value against a limit (`role="meter"`), with an over-the-limit tone. It
+ * renders only spans, so it fits inside a button. Placement (absolute, grid) is the caller's.
+ */
+export declare const Meter: import("react").ForwardRefExoticComponent<MeterProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** 20px (touch lists, sheets) or 16px (dense desktop lists). */
+    size?: 'sm' | 'md';
+    /** Mixed state. Visual only: the value still comes from `checked`. */
+    indeterminate?: boolean;
+}
+/**
+ * Native checkbox laid transparently over a drawn box, so keyboard, focus, form
+ * and `<label>` behave as usual. Wrap it in a `<label>` (the whole row becomes the
+ * target) or pass `aria-label`; the caller supplies the text.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title' | 'open' | 'onClose' | 'onCancel'> {
+    /** Controlled: the dialog shows while `open` is true and plays its exit before unmounting. */
+    open: boolean;
+    /**
+     * Asked to close: Esc and a backdrop click (when `dismissible`) and the close
+     * button. The dialog stays open until the caller sets `open` to false.
+     */
+    onClose: () => void;
+    /** Visible heading; it names the dialog (`aria-labelledby`). */
+    title: ReactNode;
+    /** Short text under the title; it describes the dialog (`aria-describedby`). */
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Slot for the buttons (Cancel | Confirm). */
+    actions?: ReactNode;
+    /** Shows a close button with this accessible name. No close button by default. */
+    closeLabel?: string;
+    /** Icon for the close button; an inline X by default. */
+    closeIcon?: ReactNode;
+    /** `sm`: 400px confirmation (HCUI ConfirmDialog). `md`: 440px panel with header, scrolling body and footer (HCUI Sheet on desktop). */
+    size?: 'sm' | 'md';
+    /** Esc and a backdrop click ask to close. Default true. */
+    dismissible?: boolean;
+}
+/**
+ * Centered modal dialog on the native `<dialog>` and `showModal()`: the browser
+ * keeps it in the top layer, makes the rest of the page inert and traps Tab.
+ * The caller owns `open` and the texts; the dialog only asks to close.
+ */
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDialogElement>>;
+export type SheetPresentation = 'bottom' | 'center' | 'auto';
+export interface SheetProps extends Omit<DialogProps, 'size' | 'actions' | 'description' | 'closeLabel'> {
+    /** Accessible name of the close button, which every sheet shows. */
+    closeLabel: string;
+    /** Slot under the scrolling body, for the buttons (Clear | Done). */
+    footer?: ReactNode;
+    /**
+     * `bottom`: rises from the bottom edge, full width, with a grabber and drag to close.
+     * `center`: the centered panel (`Dialog size="md"`). `auto` (default): `bottom` below
+     * 960px and `center` from 960px, by a CSS media query (HCUI's cut).
+     */
+    presentation?: SheetPresentation;
+    /** Maximum width of the centered panel, in px. Default 440. */
+    width?: number;
+}
+/**
+ * Modal sheet on the `Dialog` base (native `<dialog>`, `showModal()`): the same focus,
+ * Tab trap, Esc, focus return, scroll lock, stacking and controlled `open`/`onClose`.
+ * At the bottom it has a grabber, drag to close (past 20% of its height or a quick
+ * flick) and drag up from the grabber or header to full height; content that has
+ * scrolled down scrolls back before the sheet moves.
+ */
+export declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<HTMLDialogElement>>;
+export interface SheetOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    /** Second line, in a muted color. */
+    hint?: ReactNode;
+    /** Decorative icon before the text; pass it already sized (18px in HCUI). */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface SheetChoiceProps<T extends string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'role'> {
+    /** Accessible name of the group. */
+    label: string;
+    /** The chosen value; one that matches no option leaves the group with none chosen. */
+    value: T;
+    /** NoInfer: `T` comes from `value` and `options`, so a state setter cannot widen it to string. */
+    onChange: (value: NoInfer<T>) => void;
+}
+export interface SheetOptionsProps<T extends string> extends SheetChoiceProps<T> {
+    options: readonly SheetOption<T>[];
+    /**
+     * `card` (default): rows on a `bg-muted-2` card, as HCUI's SheetOptions. `list`: plain
+     * 48px rows divided by a line, the chosen one bolder with a 20px check in the text color,
+     * as the list of HCUI's mobile sort sheet (`SortButton`).
+     */
+    variant?: 'card' | 'list';
+}
+/** Single-choice list of rows with a check (HCUI's SheetOptions), for inside a sheet. */
+export declare function SheetOptions<T extends string>({ label, options, value, onChange, variant, className, ...props }: SheetOptionsProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface SheetChipsProps<T extends string> extends SheetChoiceProps<T> {
+    options: readonly {
+        value: T;
+        label: ReactNode;
+        disabled?: boolean;
+    }[];
+}
+/** Single-choice group of `Chip`s that wrap (HCUI's SheetChips), for inside a sheet. */
+export declare function SheetChips<T extends string>({ label, options, value, onChange, className, ...props }: SheetChipsProps<T>): import("react/jsx-runtime").JSX.Element;
+export type PopupSide = 'bottom' | 'top';
+export type PopupAlign = 'start' | 'end';
+/** Props a trigger receives: spread them on the element that opens the popup. */
+export interface PopupTriggerProps {
+    ref: (node: HTMLElement | null) => void;
+    'aria-haspopup': 'menu' | 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string | undefined;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
+/** An element (it gets the props merged in) or a render function that spreads them. */
+export type PopupTrigger = ReactElement | ((props: PopupTriggerProps, state: {
+    open: boolean;
+}) => ReactNode);
+interface PopupBaseProps {
+    /** Controlled open state; omit it (and use `defaultOpen`) to let the popup own it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Preferred side; it flips when there is no room. Default `bottom`. */
+    side?: PopupSide;
+    /** Edge shared with the trigger; it flips when there is no room. Default `end`. */
+    align?: PopupAlign;
+    /**
+     * Render in a portal: `true` uses the trigger's open `<dialog>` (so it stays in the
+     * top layer) or `document.body`; an element is used as is. The portal keeps
+     * `data-hc-ds` and the trigger's `data-theme`. Default false: the popup is placed
+     * right after the trigger and inherits everything.
+     */
+    portal?: boolean | HTMLElement;
+    /** Theme for the portal; read from the trigger's scope by default. */
+    theme?: 'light' | 'dark';
+    /** Class of the wrapper around the trigger (the popup's positioning box). */
+    anchorClassName?: string;
+}
+type Rect = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+/** Keeps the preferred side and edge when the popup fits; otherwise flips to the roomier one. */
+export declare function placePopup(trigger: Rect, size: {
+    width: number;
+    height: number;
+}, boundary: Rect, side: PopupSide, align: PopupAlign): {
+    side: PopupSide;
+    align: PopupAlign;
+};
+export interface MenuProps extends PopupBaseProps, Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    /** Accessible name of the menu (`aria-label`). */
+    label: string;
+    /** The button that opens it. It gets `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` and the handlers. */
+    trigger: PopupTrigger;
+    children: ReactNode;
+}
+/**
+ * Menu button: actions (`MenuItem`), one choice (`MenuRadioGroup` + `MenuItemRadio`),
+ * toggles (`MenuItemCheckbox`), `MenuSeparator` and `MenuLabel`. Arrows, Home/End and
+ * typing move between items; Enter/Space choose; Esc closes and returns focus to the
+ * trigger; Tab closes and moves on; a press outside closes.
+ */
+export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuItemBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'role' | 'onSelect'> {
+    /** Decorative icon at the end of the row; pass it already sized (15px in HCUI). */
+    icon?: ReactNode;
+    /** Second line in muted, smaller text. */
+    hint?: ReactNode;
+    /** Destructive action: drawn in the danger color. */
+    danger?: boolean;
+}
+export interface MenuItemProps extends MenuItemBaseProps {
+    /** Runs the action. Call `event.preventDefault()` to keep the menu open. */
+    onSelect?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+/** An action (`menuitem`). It closes the menu; focus returns to the trigger unless the action moved it. */
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface MenuRadioGroupProps<T extends string> extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'onChange'> {
+    value: T;
+    onValueChange: (value: NoInfer<T>) => void;
+    /** Accessible name of the group, when the menu holds more than one. */
+    label?: string;
+}
+/** One choice among `MenuItemRadio`s, such as a sort order. */
+export declare function MenuRadioGroup<T extends string>({ value, onValueChange, label, className, children, ...props }: MenuRadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface MenuItemRadioProps extends MenuItemBaseProps {
+    value: string;
+}
+/** A `menuitemradio`: the chosen one is bold with a check. Choosing closes the menu and returns focus to the trigger. */
+export declare const MenuItemRadio: import("react").ForwardRefExoticComponent<MenuItemRadioProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface MenuItemCheckboxProps extends MenuItemBaseProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Close after toggling. Default false, so several toggles take one opening. */
+    closeOnSelect?: boolean;
+}
+/** A `menuitemcheckbox`: toggles in place, with a check while on. */
+export declare const MenuItemCheckbox: import("react").ForwardRefExoticComponent<MenuItemCheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A line between groups of items. */
+export declare function MenuSeparator({ className, ...props }: Omit<HTMLAttributes<HTMLDivElement>, 'role'>): import("react/jsx-runtime").JSX.Element;
+/** Plain text inside the menu, such as a question before a destructive choice. Not focusable. */
+export declare function MenuLabel({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export interface SortOption<T extends string> {
+    value: T;
+    label: string;
+    /** Second line in the menu. */
+    hint?: ReactNode;
+    disabled?: boolean;
+}
+export interface SortMenuProps<T extends string> extends Omit<MenuProps, 'label' | 'trigger' | 'children' | 'onChange'> {
+    /** Name of the menu, and of the trigger with the current choice ("Ordenar: A–Z"). */
+    label: string;
+    value: T;
+    options: readonly SortOption<T>[];
+    onChange: (value: NoInfer<T>) => void;
+    /** Marks the choice as a filter in effect (the ring of an applied filter). */
+    applied?: boolean;
+    /** Trigger size, as `Chip`. Default `sm` (HCUI's desktop sort trigger). */
+    size?: ChipProps['size'];
+    /** Class of the trigger `Chip`. */
+    triggerClassName?: string;
+}
+/**
+ * Sort control: a `Chip` showing the current choice that opens a `Menu` with a
+ * `MenuRadioGroup` (HCUI's `DesktopSortMenu`). Options and value come from the caller.
+ * On phones, compose `Sheet` with `SheetOptions` behind an `IconButton` instead.
+ */
+export declare function SortMenu<T extends string>({ label, value, options, onChange, applied, size, triggerClassName, ...props }: SortMenuProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface PopoverProps extends PopupBaseProps, Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    /** Accessible name of the dialog (`aria-label`). */
+    label: string;
+    /** The button that opens it. It gets `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls` and the click handler. */
+    trigger: PopupTrigger;
+    /** Free content; a function receives `close` (focus goes back to the trigger). */
+    children: ReactNode | ((api: {
+        close: () => void;
+    }) => ReactNode);
+    /** Move focus to the first focusable element inside when it opens. Default false: focus stays on the trigger. */
+    autoFocus?: boolean;
+}
+/**
+ * Non-modal dialog anchored to its trigger, with the same placement and dismissal as
+ * `Menu`: Esc closes and returns focus to the trigger, a press outside closes. Tab is
+ * not trapped. The caller supplies the content and its texts. Esc is taken before it
+ * reaches the content (so an enclosing Dialog stays open): a field inside cannot use it.
+ */
+export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export type TableSortDirection = 'ascending' | 'descending';
+export interface TableColumn<Row> {
+    /** Stable id of the column; it is what `sort.key` and `onSort` name. */
+    key: string;
+    /** Header text (or node). For a sortable column it is the name of the sort button. */
+    header: ReactNode;
+    /** What the column shows for a row: free content (an avatar and a name, a formatted number). */
+    cell: (row: Row, index: number) => ReactNode;
+    /** `start` (default), `center` or `end`. Numeric columns default to `end`. */
+    align?: 'start' | 'center' | 'end';
+    /** Figures line up: tabular numbers, aligned to the end unless `align` says otherwise. */
+    numeric?: boolean;
+    /** Column width (a number is px), set on the header cell. Cells are border-box. */
+    width?: number | string;
+    /** The cell names its row: rendered as `<th scope="row">`. With `onRowClick`, its content goes in the row button. */
+    rowHeader?: boolean;
+    /** The header becomes a button that calls `onSort(key)`, and the cell gets `aria-sort`. */
+    sortable?: boolean;
+    /** Text color of the header and the cells: `muted` (a rank) or `secondary` (a category). */
+    tone?: 'muted' | 'secondary';
+    /** Class for the header and every cell of the column (e.g. to hide it in a narrow container). */
+    className?: string;
+}
+export interface TableProps<Row> extends Omit<HTMLAttributes<HTMLTableElement>, 'children' | 'onClick'> {
+    columns: readonly TableColumn<Row>[];
+    rows: readonly Row[];
+    /** Stable key of a row. */
+    rowKey: (row: Row, index: number) => string;
+    /** The column the rows are sorted by, and in which direction. The order of `rows` is the caller's. */
+    sort?: {
+        key: string;
+        direction: TableSortDirection;
+    } | null;
+    /** A sortable header was pressed. The caller decides the new order (toggle, default direction). */
+    onSort?: (key: string) => void;
+    /** The header row sticks to the top of the scrolling ancestor, at `--hc-table-sticky-top` (0 by default). */
+    stickyHeader?: boolean;
+    /** Rows react to a press, and the `rowHeader` cell becomes a button for the keyboard. */
+    onRowClick?: (row: Row, index: number) => void;
+    /** Key of the selected row (the one open in a side panel): filled and marked `aria-current` on its row button. */
+    selectedKey?: string | null;
+}
+/**
+ * Dense data table: a semantic `<table>` whose columns come from props. Presentation only:
+ * the rows, their order and what a press does are the caller's. Sortable headers are buttons
+ * and carry `aria-sort`; `onSort` reports the press.
+ */
+export declare const Table: <Row>(props: TableProps<Row> & {
+    ref?: Ref<HTMLTableElement>;
+}) => ReactElement;
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Page title. */
+    title: ReactNode;
+    /** Heading level of the title: 1 (default), 2 or 3. The look does not change. */
+    level?: HeadingLevel;
+    /** Muted number after the title, inside the heading (e.g. how many teams). Hidden when 0, null or false. */
+    count?: ReactNode;
+    /** At the end of the line: buttons, a menu. */
+    actions?: ReactNode;
+    /** Keeps the heading for assistive technology only, where the page shows its own title. */
+    visuallyHidden?: boolean;
+}
+/** Desktop page header: one line with the title (22px, semibold) and actions at the end. */
+export declare const PageHeader: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HTMLElement>>;
+export interface PanelHeaderStep {
+    label: string;
+    /** Goes back to this step. The last step is the current one and is never a button. */
+    onSelect?: () => void;
+}
+export interface PanelHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Panel or section title. With `trail`, the last step is the title instead. */
+    title?: ReactNode;
+    /** Heading level of the title: 2 by default. The look does not change. */
+    level?: HeadingLevel;
+    /**
+     * `bar` (default): the header bar of a side panel (52px, a line under it, 13px text).
+     * `section`: a section title (17px, HCUI's `section-title`), with no bar.
+     */
+    variant?: 'bar' | 'section';
+    /** Small uppercase line above the title (HCUI's `eyebrow`). */
+    eyebrow?: ReactNode;
+    /** Muted line under the title. */
+    subtitle?: ReactNode;
+    /** The subtitle follows the title on the same line (baseline), cut with an ellipsis, instead of under it. */
+    subtitleInline?: boolean;
+    /** Decorative icon before the title, in a 36px muted circle (`section`); pass it sized (18px in HCUI). */
+    icon?: ReactNode;
+    /** Steps of a trail (breadcrumb): earlier steps go back with `onSelect`; the last is the title (`aria-current="location"`). */
+    trail?: readonly PanelHeaderStep[];
+    /** Accessible name of the trail's `nav` (e.g. "Trilha do painel"). */
+    trailLabel?: string;
+    /** At the end of the line, before the close button. */
+    actions?: ReactNode;
+    /** Shows a close button (an inline X, or `closeIcon`) that calls it. */
+    onClose?: () => void;
+    /** Accessible name of the close button; give it with `onClose` (e.g. "Fechar painel"). */
+    closeLabel?: string;
+    /** Tooltip of the close button, when it says more than the name (e.g. "Fechar painel (Esc)"). */
+    closeTitle?: string;
+    closeIcon?: ReactNode;
+}
+/** Header of a panel or section: title (or a trail), optional eyebrow, subtitle, icon, actions and close button. */
+export declare const PanelHeader: import("react").ForwardRefExoticComponent<PanelHeaderProps & import("react").RefAttributes<HTMLElement>>;
+export type ListRowProps = ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * A tappable list row (HCUI's `list-row` mixin): full width, at least 56px, 8px 16px of padding,
+ * a 12px gap between its children, a translucent veil on hover and press and the focus ring inside.
+ * The content and its semantics (`aria-pressed`, `role="option"`) are the caller's.
+ */
+export declare const ListRow: import("react").ForwardRefExoticComponent<ListRowProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface CommandPaletteItem {
+    /** Unique among all items. */
+    key: string;
+    label: ReactNode;
+    /** Second, muted line (code, points, a description), cut with an ellipsis. */
+    detail?: ReactNode;
+    /** Slot in a 32px box before the text: an avatar, an icon, a swatch. */
+    icon?: ReactNode;
+    /** Enter or a click. The palette does not close by itself: close it here when it should. */
+    onSelect: () => void;
+    /** ⌘Enter / Ctrl+Enter (HCUI: add the unit to the team). Without it, ⌘Enter selects. */
+    onAltSelect?: () => void;
+    /** Replaces the palette's `altHint` for this item. */
+    altHint?: ReactNode;
+}
+export interface CommandPaletteGroup {
+    key: string;
+    /** Small uppercase title above the group; it names the group. Without it the items follow the previous group. */
+    heading?: ReactNode;
+    items: readonly CommandPaletteItem[];
+}
+export interface CommandPaletteHint {
+    /** Each key is drawn in its own `<kbd>`. */
+    keys: readonly ReactNode[];
+    label: ReactNode;
+}
+export interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'open' | 'onClose' | 'onCancel' | 'children' | 'onChange'> {
+    /** Controlled: shown while true. Esc and a backdrop click call `onClose`. */
+    open: boolean;
+    onClose: () => void;
+    /** Accessible name of the dialog and of the list. */
+    label: string;
+    /** Accessible name of the search field; `label` by default. */
+    inputLabel?: string;
+    placeholder?: string;
+    /** The search text (controlled). A new query makes the first item active. */
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** Results already searched, filtered and capped by the caller, in order. */
+    groups: readonly CommandPaletteGroup[];
+    /** Icon at the start of the field; Iconoir's Search (20px) by default. */
+    searchIcon?: ReactNode;
+    /** While searching: this text shows at the end of the field and the list is `aria-busy`. */
+    loading?: ReactNode;
+    /** Message at the top of the list (nothing found); the caller decides when. */
+    empty?: ReactNode;
+    /** Key shown on the active item (HCUI: ↵). */
+    selectHint?: ReactNode;
+    /** Shown on the active item when it has `onAltSelect` (HCUI: ⌘↵ add). */
+    altHint?: ReactNode;
+    /** Keyboard hints in the footer; no footer without them. */
+    hints?: readonly CommandPaletteHint[];
+    /** Class for the scrolling list (HCUI reserves its scrollbar gutter there). */
+    listClassName?: string;
+}
+/**
+ * HCUI's desktop ⌘K palette: a modal `<dialog>` (`showModal()`, focus in the field,
+ * Esc and the backdrop ask to close, focus returns, page scroll locked) with a search
+ * field that is a combobox over a listbox of groups. Focus stays in the field; arrows
+ * (wrapping), Home and End move the active item (`aria-activedescendant`), which scrolls
+ * into view; Enter selects, ⌘/Ctrl+Enter takes the alternative; the pointer activates the
+ * item under it. Texts, results and actions come from the caller.
+ */
+export declare const CommandPalette: import("react").ForwardRefExoticComponent<CommandPaletteProps & import("react").RefAttributes<HTMLDialogElement>>;
+export {};