@salemcobalt/ui 0.2.0-rc.0 → 0.2.0-rc.1

package/dist/index.d.ts

@@ -4,6 +4,10 @@ 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';
@@ -63,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;
@@ -71,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;
@@ -369,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;
@@ -379,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;
 }
@@ -702,7 +706,7 @@ interface DialogRootProps {
     children?: ReactNode | undefined;
 }
 /** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */
-declare function Root$1({ 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;
@@ -733,7 +737,7 @@ 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$1;
+    Root: typeof Root$3;
     Trigger: Dialog$1.Trigger;
     Content: typeof Content$1;
     Title: typeof Title;
@@ -931,7 +935,7 @@ interface MenuRootProps {
     children?: ReactNode | undefined;
 }
 /** Owns the open state. Wrap a `Menu.Trigger` and a `Menu.Content`. */
-declare function Root({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
+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;
 }
@@ -1005,15 +1009,15 @@ interface MenuGroupProps extends Omit<Menu$1.Group.Props, 'className'> {
     className?: string | undefined;
 }
 /** Labels a run of items. */
-declare function Group({ label, className, children, ...rest }: MenuGroupProps): react.JSX.Element;
+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({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
+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;
+    Root: typeof Root$2;
     Trigger: typeof Trigger;
     Content: typeof Content;
     Item: typeof Item;
@@ -1021,11 +1025,593 @@ declare const Menu: {
     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 { ArchiveIcon, ArrowLeftIcon, ArrowRightIcon, Badge, BellIcon, BriefcaseIcon, Button, CalendarIcon, Card, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, DocumentIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, FilterIcon, FlagIcon, Icon, IconButton, InboxIcon, InfoIcon, Inline, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SettingsIcon, Stack, StarIcon, SunIcon, ThumbsDownIcon, ThumbsUpIcon, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, version };
-export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, SpacingSize, StackAlign, StackElement, StackJustify, StackProps, TooltipAlign, TooltipProps, TooltipSide };
+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 };