@salemcobalt/ui 0.1.1 → 0.2.0-rc.1

package/dist/index.d.ts

@@ -1,7 +1,13 @@
 import * as react from 'react';
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode, ReactElement } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import * as _base_ui_react from '@base-ui/react';
+import { Menu as Menu$1 } from '@base-ui/react/menu';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { Toolbar as Toolbar$1 } from '@base-ui/react/toolbar';
 
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg';
@@ -61,7 +67,7 @@ type SpacingSize = 'none' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '
 
 type StackAlign = 'stretch' | 'start' | 'center' | 'end';
 type StackJustify = 'start' | 'center' | 'end' | 'between';
-type StackElement = 'div' | 'section' | 'ul' | 'ol' | 'nav' | 'form';
+type StackElement = 'div' | 'section' | 'article' | 'ul' | 'ol' | 'li' | 'nav' | 'form' | 'fieldset' | 'header' | 'footer' | 'main' | 'aside' | 'dl';
 interface StackProps extends ComponentPropsWithRef<'div'> {
     /** Gap from the spacing scale. Default `sm` (12px). */
     gap?: SpacingSize | undefined;
@@ -69,7 +75,7 @@ interface StackProps extends ComponentPropsWithRef<'div'> {
     align?: StackAlign | undefined;
     /** Main-axis distribution. Default `start`. */
     justify?: StackJustify | undefined;
-    /** Element to render. Use `ul`/`ol` for lists so semantics survive the layout. */
+    /** Element to render. Use `ul`/`ol` for lists and `li` for an item that stacks its own content, so semantics survive the layout. */
     as?: StackElement | undefined;
     /** Lays out as `inline-flex`. */
     inline?: boolean | undefined;
@@ -367,7 +373,7 @@ declare function Stack({ gap, align, justify, as, inline, className, ...rest }:
 
 type InlineAlign = 'center' | 'start' | 'end' | 'baseline' | 'stretch';
 type InlineJustify = 'start' | 'center' | 'end' | 'between';
-type InlineElement = 'div' | 'span' | 'ul' | 'nav';
+type InlineElement = 'div' | 'span' | 'ul' | 'ol' | 'li' | 'nav' | 'header' | 'footer' | 'p' | 'label' | 'dd';
 interface InlineProps extends ComponentPropsWithRef<'div'> {
     /** Gap from the spacing scale. Default `xs` (8px). */
     gap?: SpacingSize | undefined;
@@ -377,7 +383,7 @@ interface InlineProps extends ComponentPropsWithRef<'div'> {
     justify?: InlineJustify | undefined;
     /** Wraps by default; `false` for toolbars that scroll. */
     wrap?: boolean | undefined;
-    /** Element to render. */
+    /** Element to render. Use `ul`/`ol` for a row of items and `li` for an item laid out as a row. */
     as?: InlineElement | undefined;
     children?: ReactNode | undefined;
 }
@@ -700,14 +706,14 @@ interface DialogRootProps {
     children?: ReactNode | undefined;
 }
 /** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */
-declare function Root({ dismissible, onOpenChange, open, defaultOpen, children }: DialogRootProps): react.JSX.Element;
+declare function Root$3({ dismissible, onOpenChange, open, defaultOpen, children }: DialogRootProps): react.JSX.Element;
 interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
     /** `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely. */
     size?: DialogSize | undefined;
     className?: string | undefined;
 }
 /** Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. */
-declare function Content({ size, className, children, ...rest }: DialogContentProps): react.JSX.Element;
+declare function Content$1({ size, className, children, ...rest }: DialogContentProps): react.JSX.Element;
 interface DialogTitleProps extends Omit<Dialog$1.Title.Props, 'className'> {
     className?: string | undefined;
 }
@@ -731,9 +737,9 @@ interface DialogCloseProps extends Omit<Dialog$1.Close.Props, 'className'> {
 declare function Close({ className, children, render, ...rest }: DialogCloseProps): react.JSX.Element;
 /** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */
 declare const Dialog: {
-    Root: typeof Root;
+    Root: typeof Root$3;
     Trigger: Dialog$1.Trigger;
-    Content: typeof Content;
+    Content: typeof Content$1;
     Title: typeof Title;
     Description: typeof Description;
     Body: typeof Body;
@@ -741,7 +747,871 @@ declare const Dialog: {
     Close: typeof Close;
 };
 
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'em';
+interface IconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'> {
+    /** `xs` 12, `sm` 14, `md` 16 (default), `lg` 20, `xl` 24, or `em` to follow the surrounding font size. */
+    size?: IconSize | undefined;
+    /** Gives the icon an accessible name (`role="img"`). Without it the icon is decorative and hidden from assistive tech. */
+    title?: string | undefined;
+    /** The glyph: `<path>`, `<circle>` … on a 16×16 grid, stroke `currentColor`. */
+    children: ReactNode;
+}
+/** Props of a shipped icon such as `PlayIcon`: everything `Icon` takes except the glyph. */
+type IconGlyphProps = Omit<IconProps, 'children'>;
+/**
+ * The frame every icon renders in: a 16×16 outline in `currentColor`, sized by `size`, decorative unless
+ * `title` is given. Use the shipped `<Name>Icon` components, or wrap your own paths.
+ */
+declare function Icon({ size, title, className, children, ...rest }: IconProps): react.JSX.Element;
+
+/** `archive` */
+declare function ArchiveIcon(props: IconGlyphProps): react.JSX.Element;
+/** `arrow-left` */
+declare function ArrowLeftIcon(props: IconGlyphProps): react.JSX.Element;
+/** `arrow-right` */
+declare function ArrowRightIcon(props: IconGlyphProps): react.JSX.Element;
+/** `bell` */
+declare function BellIcon(props: IconGlyphProps): react.JSX.Element;
+/** `briefcase` */
+declare function BriefcaseIcon(props: IconGlyphProps): react.JSX.Element;
+/** `calendar` */
+declare function CalendarIcon(props: IconGlyphProps): react.JSX.Element;
+/** `check` */
+declare function CheckIcon(props: IconGlyphProps): react.JSX.Element;
+/** `chevron-down` */
+declare function ChevronDownIcon(props: IconGlyphProps): react.JSX.Element;
+/** `chevron-left` */
+declare function ChevronLeftIcon(props: IconGlyphProps): react.JSX.Element;
+/** `chevron-right` */
+declare function ChevronRightIcon(props: IconGlyphProps): react.JSX.Element;
+/** `chevron-up` */
+declare function ChevronUpIcon(props: IconGlyphProps): react.JSX.Element;
+/** `circle-check` */
+declare function CircleCheckIcon(props: IconGlyphProps): react.JSX.Element;
+/** `circle-x` */
+declare function CircleXIcon(props: IconGlyphProps): react.JSX.Element;
+/** `clock` */
+declare function ClockIcon(props: IconGlyphProps): react.JSX.Element;
+/** `copy` */
+declare function CopyIcon(props: IconGlyphProps): react.JSX.Element;
+/** `document` */
+declare function DocumentIcon(props: IconGlyphProps): react.JSX.Element;
+/** `download` */
+declare function DownloadIcon(props: IconGlyphProps): react.JSX.Element;
+/** `edit` */
+declare function EditIcon(props: IconGlyphProps): react.JSX.Element;
+/** `external-link` */
+declare function ExternalLinkIcon(props: IconGlyphProps): react.JSX.Element;
+/** `eye` */
+declare function EyeIcon(props: IconGlyphProps): react.JSX.Element;
+/** `filter` */
+declare function FilterIcon(props: IconGlyphProps): react.JSX.Element;
+/** `flag` */
+declare function FlagIcon(props: IconGlyphProps): react.JSX.Element;
+/** `inbox` */
+declare function InboxIcon(props: IconGlyphProps): react.JSX.Element;
+/** `info` */
+declare function InfoIcon(props: IconGlyphProps): react.JSX.Element;
+/** `link` */
+declare function LinkIcon(props: IconGlyphProps): react.JSX.Element;
+/** `mail` */
+declare function MailIcon(props: IconGlyphProps): react.JSX.Element;
+/** `map-pin` */
+declare function MapPinIcon(props: IconGlyphProps): react.JSX.Element;
+/** `menu` */
+declare function MenuIcon(props: IconGlyphProps): react.JSX.Element;
+/** `minus` */
+declare function MinusIcon(props: IconGlyphProps): react.JSX.Element;
+/** `moon` */
+declare function MoonIcon(props: IconGlyphProps): react.JSX.Element;
+/** `more-horizontal` */
+declare function MoreHorizontalIcon(props: IconGlyphProps): react.JSX.Element;
+/** `more-vertical` */
+declare function MoreVerticalIcon(props: IconGlyphProps): react.JSX.Element;
+/** `pause` */
+declare function PauseIcon(props: IconGlyphProps): react.JSX.Element;
+/** `play` */
+declare function PlayIcon(props: IconGlyphProps): react.JSX.Element;
+/** `plus` */
+declare function PlusIcon(props: IconGlyphProps): react.JSX.Element;
+/** `refresh` */
+declare function RefreshIcon(props: IconGlyphProps): react.JSX.Element;
+/** `search` */
+declare function SearchIcon(props: IconGlyphProps): react.JSX.Element;
+/** `settings` */
+declare function SettingsIcon(props: IconGlyphProps): react.JSX.Element;
+/** `star` */
+declare function StarIcon(props: IconGlyphProps): react.JSX.Element;
+/** `sun` */
+declare function SunIcon(props: IconGlyphProps): react.JSX.Element;
+/** `thumbs-down` */
+declare function ThumbsDownIcon(props: IconGlyphProps): react.JSX.Element;
+/** `thumbs-up` */
+declare function ThumbsUpIcon(props: IconGlyphProps): react.JSX.Element;
+/** `trash` */
+declare function TrashIcon(props: IconGlyphProps): react.JSX.Element;
+/** `undo` */
+declare function UndoIcon(props: IconGlyphProps): react.JSX.Element;
+/** `user` */
+declare function UserIcon(props: IconGlyphProps): react.JSX.Element;
+/** `warning` */
+declare function WarningIcon(props: IconGlyphProps): react.JSX.Element;
+/** `x` */
+declare function XIcon(props: IconGlyphProps): react.JSX.Element;
+
+/** Every icon shipped by this package, as `<Name>Icon` components. */
+declare const iconNames: readonly ["archive", "arrow-left", "arrow-right", "bell", "briefcase", "calendar", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-x", "clock", "copy", "document", "download", "edit", "external-link", "eye", "filter", "flag", "inbox", "info", "link", "mail", "map-pin", "menu", "minus", "moon", "more-horizontal", "more-vertical", "pause", "play", "plus", "refresh", "search", "settings", "star", "sun", "thumbs-down", "thumbs-up", "trash", "undo", "user", "warning", "x"];
+type IconName = (typeof iconNames)[number];
+
+type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+type TooltipAlign = 'start' | 'center' | 'end';
+interface TooltipProps {
+    /** The hint. Short text; never anything the user cannot do without. */
+    content: ReactNode;
+    /** The trigger: one element that takes a ref and spreads props, such as `IconButton`, `Button` or `Badge`. */
+    children: ReactElement;
+    /** Which side of the trigger the hint opens on; flips when there is no room. Default `top`. */
+    side?: TooltipSide | undefined;
+    /** Alignment along that side. Default `center`. */
+    align?: TooltipAlign | undefined;
+    /** Hover delay in ms before opening. Default 300; inside `Tooltip.Provider` sibling tooltips open instantly once one is open. */
+    delay?: number | undefined;
+    /** Delay in ms before closing. Default 0. */
+    closeDelay?: number | undefined;
+    /** Controlled open state. */
+    open?: boolean | undefined;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean | undefined;
+    /** Called when the hint opens or closes. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Never opens. */
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * A hint that opens on hover and keyboard focus. Supplementary only: touch devices never see it and
+ * screen readers hear the trigger's own name, so the trigger must already be labelled.
+ */
+declare function TooltipBase({ content, children, side, align, delay, closeDelay, open, defaultOpen, onOpenChange, disabled, className, }: TooltipProps): react.JSX.Element;
+declare const Tooltip: typeof TooltipBase & {
+    Provider: react.FC<_base_ui_react.TooltipProviderProps>;
+};
+
+interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'aria-label'> {
+    /** Required. The accessible name, and the tooltip text when `tooltip` is `true`. */
+    label: string;
+    /** The icon, usually a shipped `<Name>Icon`. It is decorative; `label` names the button. Optional only so a popup trigger can supply it through `render`. */
+    children?: ReactNode | undefined;
+    /** `ghost` (default) in toolbars and rows, `secondary` when it must read as a button, `primary` and `danger` rarely. */
+    variant?: ButtonVariant | undefined;
+    /** Square: 32, 40 or 48px. Compact density shrinks each by one step. */
+    size?: ButtonSize | undefined;
+    /** `true` shows `label` as a tooltip on hover and focus; a string shows that text instead. */
+    tooltip?: boolean | string | undefined;
+    /** Side the tooltip opens on. Default `top`. */
+    tooltipSide?: TooltipSide | undefined;
+    /** Fully round, for avatars and floating actions. */
+    round?: boolean | undefined;
+    /** Shows a spinner, sets `aria-busy` and ignores clicks. */
+    loading?: boolean | undefined;
+}
+/** A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover. */
+declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, type, className, onClick, ...rest }: IconButtonProps): react.JSX.Element;
+
+type MenuSide = 'top' | 'bottom' | 'left' | 'right';
+type MenuAlign = 'start' | 'center' | 'end';
+type MenuItemTone = 'default' | 'danger';
+interface MenuRootProps {
+    /** Controlled open state. */
+    open?: boolean | undefined;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean | undefined;
+    /** Called when the menu opens or closes. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Disables the trigger. */
+    disabled?: boolean | undefined;
+    /** Default `true`: the page behind the menu is inert until it closes. */
+    modal?: boolean | undefined;
+    children?: ReactNode | undefined;
+}
+/** Owns the open state. Wrap a `Menu.Trigger` and a `Menu.Content`. */
+declare function Root$2({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
+interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
+    className?: string | undefined;
+}
+/**
+ * Opens the menu. With no `render` it is a secondary Button with a chevron; pass any Button or
+ * IconButton through `render`: `<Menu.Trigger render={<IconButton label="More" />}><MoreHorizontalIcon /></Menu.Trigger>`.
+ */
+declare function Trigger({ render, className, children, ...rest }: MenuTriggerProps): react.JSX.Element;
+interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
+    /** Side of the trigger the menu opens on; flips when there is no room. Default `bottom`. */
+    side?: MenuSide | undefined;
+    /** Alignment along that side. Default `start`. */
+    align?: MenuAlign | undefined;
+    /** Distance from the trigger in px. Default 4. */
+    sideOffset?: number | undefined;
+    className?: string | undefined;
+}
+/** Portal, positioner and the popup. Items go inside. */
+declare function Content({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
+interface ItemSlots {
+    /** A 16px icon before the label. */
+    icon?: ReactNode | undefined;
+    /** Muted text at the end: a shortcut (`<Kbd>`) or a count. */
+    trailing?: ReactNode | undefined;
+    /** `danger` for destructive actions; put them last, after a separator. */
+    tone?: MenuItemTone | undefined;
+}
+interface MenuItemProps extends Omit<Menu$1.Item.Props, 'className'>, ItemSlots {
+    className?: string | undefined;
+}
+/** One action. Closes the menu when activated. */
+declare function Item({ icon, trailing, tone, className, children, ...rest }: MenuItemProps): react.JSX.Element;
+interface MenuLinkItemProps extends Omit<Menu$1.LinkItem.Props, 'className'>, ItemSlots {
+    className?: string | undefined;
+}
+/** An item that navigates: renders an `<a href>`. */
+declare function LinkItem({ icon, trailing, tone, className, children, ...rest }: MenuLinkItemProps): react.JSX.Element;
+interface MenuCheckboxItemProps extends Omit<Menu$1.CheckboxItem.Props, 'className' | 'onCheckedChange'> {
+    /** Called with the next checked state. */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /** Muted text at the end. */
+    trailing?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** A toggle. Stays open when activated so several can be flipped at once; pass `closeOnClick` to close. */
+declare function CheckboxItem({ trailing, onCheckedChange, className, children, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
+interface MenuRadioGroupProps<Value extends string = string> extends Omit<Menu$1.RadioGroup.Props, 'className' | 'value' | 'defaultValue' | 'onValueChange'> {
+    /** Controlled selected value. */
+    value?: Value | undefined;
+    /** Initial value when uncontrolled. */
+    defaultValue?: Value | undefined;
+    /** Called with the next selected value. */
+    onValueChange?: ((value: Value) => void) | undefined;
+    /** A heading for the group, rendered above the items. */
+    label?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** A set of `Menu.RadioItem`s where exactly one is selected. */
+declare function RadioGroup<Value extends string = string>({ label, onValueChange, className, children, ...rest }: MenuRadioGroupProps<Value>): react.JSX.Element;
+interface MenuRadioItemProps extends Omit<Menu$1.RadioItem.Props, 'className' | 'value'> {
+    value: string;
+    /** Muted text at the end. */
+    trailing?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** One choice in a `Menu.RadioGroup`. Stays open when chosen; pass `closeOnClick` to close. */
+declare function RadioItem({ trailing, className, children, ...rest }: MenuRadioItemProps): react.JSX.Element;
+interface MenuGroupProps extends Omit<Menu$1.Group.Props, 'className'> {
+    /** A heading for the group, rendered above the items. */
+    label?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** Labels a run of items. */
+declare function Group$1({ label, className, children, ...rest }: MenuGroupProps): react.JSX.Element;
+interface MenuSeparatorProps extends Omit<Menu$1.Separator.Props, 'className'> {
+    className?: string | undefined;
+}
+/** A hairline between runs of items. */
+declare function Separator$1({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
+/** A dropdown of actions on a trigger, with full keyboard support. Built on Base UI's Menu. */
+declare const Menu: {
+    Root: typeof Root$2;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Item: typeof Item;
+    LinkItem: typeof LinkItem;
+    CheckboxItem: typeof CheckboxItem;
+    RadioGroup: typeof RadioGroup;
+    RadioItem: typeof RadioItem;
+    Group: typeof Group$1;
+    Separator: typeof Separator$1;
+};
+
+type ControlSize = 'sm' | 'md' | 'lg';
+/** Props shared by every labelled form control: Input, Textarea, Select. */
+interface FieldProps {
+    /** Required. The visible label; use `hideLabel` to keep it for assistive tech only. */
+    label: ReactNode;
+    /** Visually hides the label (a search box with an icon, a table filter). */
+    hideLabel?: boolean | undefined;
+    /** Help text under the control, wired with `aria-describedby`. */
+    description?: ReactNode | undefined;
+    /** The error message. When given the control is invalid and the message is announced. */
+    error?: ReactNode | undefined;
+    /** Marks the control invalid without a message. */
+    invalid?: boolean | undefined;
+    /** Shows a mark after the label and sets the native `required`. */
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    /** Identifies the value when a form is submitted. */
+    name?: string | undefined;
+    /** Control height: 32, 40 (default) or 48px. Compact density shrinks each by one step. */
+    size?: ControlSize | undefined;
+    /** Class on the wrapper, not the control. */
+    className?: string | undefined;
+}
+
+interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'name' | 'disabled' | 'required' | 'className'>, FieldProps {
+    /** A 16px icon inside the start edge, for search and URL fields. Decorative. */
+    iconStart?: ReactNode | undefined;
+    /** A 16px icon inside the end edge. Decorative; use an `IconButton` outside the field for an action. */
+    iconEnd?: ReactNode | undefined;
+    /** Called with the string value on every change, beside the native `onChange`. */
+    onValueChange?: ((value: string) => void) | undefined;
+}
+/** A labelled single-line text field. Renders a native `<input>` inside Base UI's Field. */
+declare function Input({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, iconStart, iconEnd, onValueChange, ...rest }: InputProps): react.JSX.Element;
+
+interface TextareaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'name' | 'disabled' | 'required' | 'className'>, Omit<FieldProps, 'size'> {
+    /** Visible lines. Default 3. */
+    rows?: number | undefined;
+    /** `vertical` (default) lets the user drag it taller; `none` fixes the height. */
+    resize?: 'vertical' | 'none' | undefined;
+    /** Called with the string value on every change, beside the native `onChange`. */
+    onValueChange?: ((value: string) => void) | undefined;
+}
+/** A labelled multi-line text field. Renders a native `<textarea>` inside Base UI's Field. */
+declare function Textarea({ label, hideLabel, description, error, invalid, required, disabled, name, className, rows, resize, onValueChange, ...rest }: TextareaProps): react.JSX.Element;
+
+interface SelectOption<Value extends string = string> {
+    value: Value;
+    label: ReactNode;
+    disabled?: boolean | undefined;
+}
+interface SelectGroup<Value extends string = string> {
+    /** Heading shown above the group's options. */
+    label: ReactNode;
+    options: SelectOption<Value>[];
+}
+interface SelectProps<Value extends string = string> extends FieldProps {
+    /** Flat options, or groups of options with a heading. */
+    options: Array<SelectOption<Value> | SelectGroup<Value>>;
+    /** Controlled value; `null` for none. */
+    value?: Value | null | undefined;
+    /** Initial value when uncontrolled. */
+    defaultValue?: Value | null | undefined;
+    /** Called with the chosen value. */
+    onValueChange?: ((value: Value | null) => void) | undefined;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: ReactNode | undefined;
+    /** Prevents choosing a different option. */
+    readOnly?: boolean | undefined;
+    /** Stretches the trigger to the container. */
+    fullWidth?: boolean | undefined;
+    id?: string | undefined;
+}
+/**
+ * A labelled single-choice dropdown. Built on Base UI's Select so the list is styled and keyboard
+ * complete; submits like a native select through `name`.
+ */
+declare function Select<Value extends string = string>({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, options, value, defaultValue, onValueChange, placeholder, readOnly, fullWidth, id, }: SelectProps<Value>): react.JSX.Element;
+
+interface CheckboxProps extends Omit<Checkbox$1.Root.Props, 'className' | 'onCheckedChange' | 'render' | 'children'> {
+    /** Required. The visible label; clicking it toggles the box. */
+    label: ReactNode;
+    /** Help text under the label, wired with `aria-describedby`. */
+    description?: ReactNode | undefined;
+    /** Called with the next checked state. */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    className?: string | undefined;
+}
+/** A labelled checkbox. `indeterminate` shows a dash for "some of these". Built on Base UI's Checkbox. */
+declare function Checkbox({ label, description, onCheckedChange, className, disabled, ...rest }: CheckboxProps): react.JSX.Element;
+
+interface SwitchProps extends Omit<Switch$1.Root.Props, 'className' | 'onCheckedChange' | 'render' | 'children'> {
+    /** Required. The visible label; clicking it flips the switch. */
+    label: ReactNode;
+    /** Help text under the label, wired with `aria-describedby`. */
+    description?: ReactNode | undefined;
+    /** Called with the next checked state. */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /** `end` (default) puts the switch before the label; `start` puts the label first and the switch at the row's end. */
+    labelPosition?: 'start' | 'end' | undefined;
+    className?: string | undefined;
+}
+/** A labelled on/off switch for settings that apply at once. Built on Base UI's Switch. */
+declare function Switch({ label, description, onCheckedChange, labelPosition, className, disabled, ...rest }: SwitchProps): react.JSX.Element;
+
+interface TabsRootProps extends Omit<Tabs$1.Root.Props, 'className' | 'value' | 'defaultValue' | 'onValueChange'> {
+    /** Controlled active tab. */
+    value?: string | undefined;
+    /** Initial active tab when uncontrolled. Defaults to the first enabled tab. */
+    defaultValue?: string | undefined;
+    /** Called with the value of the newly active tab. */
+    onValueChange?: ((value: string) => void) | undefined;
+    className?: string | undefined;
+}
+/** Owns the active tab. Wrap a `Tabs.List` and one `Tabs.Panel` per tab. */
+declare function Root$1({ className, onValueChange, ...rest }: TabsRootProps): react.JSX.Element;
+interface TabsListProps extends Omit<Tabs$1.List.Props, 'className'> {
+    /** Names the set of tabs for assistive tech: "Inbox sections". */
+    'aria-label': string;
+    /** Tabs share the width equally instead of sizing to their labels. */
+    fill?: boolean | undefined;
+    className?: string | undefined;
+}
+/** The row of tabs with the sliding indicator. Arrow keys move between tabs; Enter or Space activates. */
+declare function List({ fill, className, children, ...rest }: TabsListProps): react.JSX.Element;
+interface TabsTabProps extends Omit<Tabs$1.Tab.Props, 'className' | 'value'> {
+    value: string;
+    /** A 16px icon before the label. */
+    icon?: ReactNode | undefined;
+    /** A count after the label, muted: `12`. */
+    count?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** One tab. */
+declare function Tab({ icon, count, className, children, ...rest }: TabsTabProps): react.JSX.Element;
+interface TabsPanelProps extends Omit<Tabs$1.Panel.Props, 'className' | 'value'> {
+    value: string;
+    className?: string | undefined;
+}
+/** The content of one tab. Unmounted while hidden unless `keepMounted`. */
+declare function Panel({ className, ...rest }: TabsPanelProps): react.JSX.Element;
+/** Switches between sections of one view. Built on Base UI's Tabs. */
+declare const Tabs: {
+    Root: typeof Root$1;
+    List: typeof List;
+    Tab: typeof Tab;
+    Panel: typeof Panel;
+};
+
+interface ToolbarRootProps extends Omit<Toolbar$1.Root.Props, 'className'> {
+    /** Required. Names the toolbar for assistive tech: "Inbox actions". */
+    'aria-label': string;
+    /** Wraps onto new lines on narrow widths (default). `false` keeps one line that overflows. */
+    wrap?: boolean | undefined;
+    /** Gap between items and groups. Default `xs`. */
+    gap?: SpacingSize | undefined;
+    className?: string | undefined;
+}
+/**
+ * A row of controls with one tab stop: Tab enters, arrow keys move between items, Tab leaves. Put every
+ * control through `Toolbar.Button` (`render={<IconButton … />}`) so it joins the roving focus.
+ */
+declare function Root({ wrap, gap, className, ...rest }: ToolbarRootProps): react.JSX.Element;
+interface ToolbarGroupProps extends Omit<Toolbar$1.Group.Props, 'className'> {
+    /** Names the group: "Playback". */
+    'aria-label'?: string | undefined;
+    /** Gap inside the group. Default `2xs`. */
+    gap?: SpacingSize | undefined;
+    className?: string | undefined;
+}
+/** Keeps related controls together with a tighter gap. */
+declare function Group({ gap, className, ...rest }: ToolbarGroupProps): react.JSX.Element;
+interface ToolbarSeparatorProps extends Omit<Toolbar$1.Separator.Props, 'className'> {
+    className?: string | undefined;
+}
+/** A hairline between groups. */
+declare function Separator({ className, ...rest }: ToolbarSeparatorProps): react.JSX.Element;
+interface ToolbarButtonProps extends Omit<Toolbar$1.Button.Props, 'className'> {
+    className?: string | undefined;
+}
+interface ToolbarSpacerProps {
+    className?: string | undefined;
+}
+/** Pushes what follows to the far end. */
+declare function Spacer({ className }: ToolbarSpacerProps): react.JSX.Element;
+/** A horizontal container of controls. Built on Base UI's Toolbar. */
+declare const Toolbar: {
+    Root: typeof Root;
+    Group: typeof Group;
+    Separator: typeof Separator;
+    Button: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Spacer: typeof Spacer;
+};
+
+type BannerTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+interface BannerProps extends ComponentPropsWithRef<'div'> {
+    /** Colour and default icon. `warning` and `danger` are announced as alerts; the rest as status. */
+    tone?: BannerTone | undefined;
+    /** Replaces the tone's icon; `false` removes it. */
+    icon?: ReactNode | false | undefined;
+    /** One Button, usually `variant="ghost" size="sm"`, at the end of the strip. */
+    action?: ReactNode | undefined;
+    /** Shows a close button that hides the banner. */
+    dismissible?: boolean | undefined;
+    /** Called when the close button is pressed. */
+    onDismiss?: (() => void) | undefined;
+    /** Controlled visibility when dismissible. */
+    open?: boolean | undefined;
+    /** Accessible name of the close button. Default "Dismiss". */
+    dismissLabel?: string | undefined;
+}
+/** A single-line status strip across the top of a view: paused, offline, "3 new since you looked". */
+declare function Banner({ tone, icon, action, dismissible, onDismiss, open, dismissLabel, role, className, children, ...rest }: BannerProps): react.JSX.Element | null;
+
+interface SpinnerProps extends ComponentPropsWithRef<'span'> {
+    /** `xs` 12, `sm` 14, `md` 16 (default), `lg` 20, `xl` 24, or `em` to follow the font size. */
+    size?: IconSize | undefined;
+    /** What is happening, announced once as a status. Default "Loading". */
+    label?: string | undefined;
+    /** Hides it from assistive tech when the text beside it already says what is happening. */
+    decorative?: boolean | undefined;
+}
+/** An indeterminate activity indicator in `currentColor`. Slows down, never stops, under reduced motion. */
+declare function Spinner({ size, label, decorative, className, ...rest }: SpinnerProps): react.JSX.Element;
+
+type ProgressTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+type ProgressSize = 'sm' | 'md';
+type ProgressVariant = 'bar' | 'inline';
+interface ProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    /** Current value. Omit or pass `null` while the amount of work is unknown (indeterminate). */
+    value?: number | null | undefined;
+    /** Default 100. Pass the total so `value` can be a count: `value={460} max={859}`. */
+    max?: number | undefined;
+    /** Default 0. */
+    min?: number | undefined;
+    /** What is happening: "Verifying". Visible, and names the bar for assistive tech. */
+    label?: ReactNode | undefined;
+    /** Detail at the end: "460 of 859 · 3 min elapsed". A string also becomes `aria-valuetext`. */
+    valueText?: ReactNode | undefined;
+    /** Shows the percentage when `valueText` is not given. */
+    showValue?: boolean | undefined;
+    /** Fill colour. Default `accent`; `success` when done, `danger` when it failed. */
+    tone?: ProgressTone | undefined;
+    /** Bar thickness: `sm` 4px, `md` 8px (default). Inline uses the text size. */
+    size?: ProgressSize | undefined;
+    /** `bar` (default) is label, value and a track; `inline` is a Spinner beside the text for toolbars and buttons. */
+    variant?: ProgressVariant | undefined;
+    /** Names the bar when there is no `label`. */
+    'aria-label'?: string | undefined;
+}
+/**
+ * Says that something is processing and, when known, how far along it is. Built on Base UI's Progress:
+ * `role="progressbar"` with the aria value attributes, or none while indeterminate.
+ */
+declare function Progress({ value, max, min, label, valueText, showValue, tone, size, variant, className, ...rest }: ProgressProps): react.JSX.Element;
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span' | 'p';
+type TextTone = 'default' | 'muted' | 'subtle' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+interface HeadingProps extends ComponentPropsWithRef<'h2'> {
+    /** The outline level, rendered as `h1`–`h6`. Default 2. */
+    level?: HeadingLevel | undefined;
+    /** Visual size from the type scale, independent of the level. Defaults by level: 3xl, 2xl, xl, lg, md, sm. */
+    size?: HeadingSize | undefined;
+    /** Render a different element and keep the look; `div`/`span` for a card title that is not an outline entry. */
+    as?: HeadingElement | undefined;
+    /** Colour. Default is the text colour. */
+    tone?: TextTone | undefined;
+    /** One line with an ellipsis. */
+    truncate?: boolean | undefined;
+}
+/** A heading from the type scale. `level` is the semantics, `size` the look; they are set separately on purpose. */
+declare function Heading({ level, size, as, tone, truncate, className, ...rest }: HeadingProps): react.DetailedReactHTMLElement<{
+    ref?: react.Ref<HTMLHeadingElement> | undefined;
+    key?: react.Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: react.CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: react.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    children?: react.ReactNode | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLHeadingElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLHeadingElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLHeadingElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLHeadingElement> | undefined;
+    onChange?: react.ChangeEventHandler<HTMLHeadingElement, Element> | undefined;
+    onChangeCapture?: react.ChangeEventHandler<HTMLHeadingElement, Element> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLHeadingElement> | undefined;
+    onBeforeInputCapture?: react.InputEventHandler<HTMLHeadingElement> | undefined;
+    onInput?: react.InputEventHandler<HTMLHeadingElement> | undefined;
+    onInputCapture?: react.InputEventHandler<HTMLHeadingElement> | undefined;
+    onReset?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onResetCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSubmit?: react.SubmitEventHandler<HTMLHeadingElement> | undefined;
+    onSubmitCapture?: react.SubmitEventHandler<HTMLHeadingElement> | undefined;
+    onInvalid?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onInvalidCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLHeadingElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLHeadingElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLHeadingElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLHeadingElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLHeadingElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLHeadingElement> | undefined;
+    onScrollEnd?: react.UIEventHandler<HTMLHeadingElement> | undefined;
+    onScrollEndCapture?: react.UIEventHandler<HTMLHeadingElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLHeadingElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onToggle?: react.ToggleEventHandler<HTMLHeadingElement> | undefined;
+    onBeforeToggle?: react.ToggleEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionCancel?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionCancelCapture?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionRun?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionRunCapture?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionStart?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionStartCapture?: react.TransitionEventHandler<HTMLHeadingElement> | undefined;
+    className: string;
+    'data-size': HeadingSize;
+    'data-tone': TextTone;
+    'data-truncate': true | undefined;
+}, HTMLHeadingElement>;
+
+type TextSize = 'xs' | 'sm' | 'md' | 'lg';
+type TextWeight = 'regular' | 'medium' | 'semibold';
+type TextAlign = 'start' | 'center' | 'end';
+type TextElement = 'p' | 'span' | 'div' | 'label' | 'li' | 'dt' | 'dd' | 'strong' | 'em' | 'small' | 'time' | 'figcaption' | 'legend';
+interface TextProps extends ComponentPropsWithRef<'p'> {
+    /** Element to render. Default `p`; `span` inside other text. */
+    as?: TextElement | undefined;
+    /** `xs` 12 captions, `sm` 14 UI text (default), `md` body copy, `lg` lede. */
+    size?: TextSize | undefined;
+    /** Colour. `muted` for metadata, `subtle` for placeholders, status tones for inline status. */
+    tone?: TextTone | undefined;
+    weight?: TextWeight | undefined;
+    align?: TextAlign | undefined;
+    /** `true` keeps one line with an ellipsis; a number clamps to that many lines. */
+    truncate?: boolean | number | undefined;
+    /** Tabular figures, for numbers that line up in columns. */
+    numeric?: boolean | undefined;
+}
+/** Running text and labels from the type scale. Parents own spacing: Text has no margins. */
+declare function Text({ as, size, tone, weight, align, truncate, numeric, className, style, ...rest }: TextProps): ReactElement;
+
 declare const version = "0.1.1";
 
-export { Badge, Button, Card, Dialog, Inline, Kbd, Stack, version };
-export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, InlineAlign, InlineElement, InlineJustify, InlineProps, KbdGroupProps, KbdProps, SpacingSize, StackAlign, StackElement, StackJustify, StackProps };
+export { ArchiveIcon, ArrowLeftIcon, ArrowRightIcon, Badge, Banner, BellIcon, BriefcaseIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, DocumentIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, FilterIcon, FlagIcon, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Progress, RefreshIcon, SearchIcon, Select, SettingsIcon, Spinner, Stack, StarIcon, SunIcon, Switch, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, version };
+export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, FieldProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, SelectGroup, SelectOption, SelectProps, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, SwitchProps, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };