@salemcobalt/ui 0.2.0-rc.3 → 0.2.0-rc.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithRef, ReactNode, ReactElement, CSSProperties } from 'react';
+import { ComponentPropsWithRef, ReactNode, ReactElement, CSSProperties, MouseEvent } 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';
@@ -694,6 +694,7 @@ declare const Kbd: typeof KbdBase & {
 };
 
 type DialogSize = 'sm' | 'md' | 'lg';
+type DialogVariant = 'dialog' | 'sheet';
 interface DialogRootProps {
     /** Controlled open state. */
     open?: boolean | undefined;
@@ -708,12 +709,24 @@ interface DialogRootProps {
 /** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */
 declare function Root$4({ 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. */
+    /**
+     * Maximum width: `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely.
+     * Every size clamps to the viewport minus a 16px gutter, so a 390px phone gets a 358px dialog.
+     */
     size?: DialogSize | undefined;
+    /**
+     * `dialog` (default) centres the popup. `sheet` is the same on wide viewports but below 640px it
+     * becomes a bottom sheet: full width, rounded top, title and actions pinned while `Dialog.Body`
+     * scrolls, padding that clears the home indicator. Use it for forms and pickers opened from a list.
+     */
+    variant?: DialogVariant | undefined;
     className?: string | undefined;
 }
-/** Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. */
-declare function Content$1({ size, className, children, ...rest }: DialogContentProps): react.JSX.Element;
+/**
+ * Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close.
+ * Menus, selects and tooltips opened from inside render above it (`--sc-z-dropdown` > `--sc-z-dialog`).
+ */
+declare function Content$1({ size, variant, className, children, ...rest }: DialogContentProps): react.JSX.Element;
 interface DialogTitleProps extends Omit<Dialog$1.Title.Props, 'className'> {
     className?: string | undefined;
 }
@@ -725,7 +738,7 @@ interface DialogDescriptionProps extends Omit<Dialog$1.Description.Props, 'class
 /** Optional, muted. Says what will happen. */
 declare function Description({ className, ...rest }: DialogDescriptionProps): react.JSX.Element;
 type DialogBodyProps = ComponentPropsWithRef<'div'>;
-/** Free content between the description and the actions. */
+/** Free content between the description and the actions. In a `sheet` it is the part that scrolls. */
 declare function Body$1({ className, ...rest }: DialogBodyProps): react.JSX.Element;
 type DialogActionsProps = Omit<InlineProps, 'justify'>;
 /** Right-aligned row of Buttons. Put the confirming action last. */
@@ -901,7 +914,7 @@ declare const Tooltip: typeof TooltipBase & {
     Provider: react.FC<_base_ui_react.TooltipProviderProps>;
 };
 
-interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'aria-label'> {
+interface IconButtonProps extends Omit<useRender.ComponentProps<'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`. */
@@ -919,8 +932,12 @@ interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
     /** 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;
+/**
+ * A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover.
+ * Renders a `<button>` unless `render` gives another element: `render={<a href="/settings" />}` or a
+ * Next.js `<Link href="/settings" />` makes it a link with the same look and name.
+ */
+declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, type, className, onClick, render, ref, ...rest }: IconButtonProps): react.JSX.Element;
 
 type MenuSide = 'top' | 'bottom' | 'left' | 'right';
 type MenuAlign = 'start' | 'center' | 'end';
@@ -1065,19 +1082,30 @@ interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'name
     /** 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. */
+/**
+ * A labelled single-line text field. Renders a native `<input>` inside Base UI's Field, so every native
+ * attribute passes through: `type="date" | "time" | "number" | "url" | …` keep the same height and
+ * `iconStart` slot; `list="id"` with a `<datalist>` beside it gives native suggestions. Date and time
+ * fields show the browser's picker at the end edge, so leave `iconEnd` off those.
+ */
 declare function Input({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, iconStart, iconEnd, onValueChange, ...rest }: InputProps): react.JSX.Element;
 
+type TextareaVariant = 'default' | 'code';
 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;
+    /**
+     * `code` for Markdown, JSON and other source: monospace, `tab-size: 2`, spellcheck, autocorrect and
+     * autocapitalize off. Add the native `wrap="off"` to keep long lines on one line and scroll sideways.
+     */
+    variant?: TextareaVariant | 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;
+declare function Textarea({ label, hideLabel, description, error, invalid, required, disabled, name, className, rows, resize, variant, onValueChange, spellCheck, autoCorrect, autoCapitalize, ...rest }: TextareaProps): react.JSX.Element;
 
 interface SelectOption<Value extends string = string> {
     value: Value;
@@ -1092,14 +1120,21 @@ interface SelectGroup<Value extends string = string> {
 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. */
+    /** Controlled value; `null` for none, which shows `placeholder`. No sentinel option needed. */
     value?: Value | null | undefined;
-    /** Initial value when uncontrolled. */
+    /** Initial value when uncontrolled; `null` (default) for none. */
     defaultValue?: Value | null | undefined;
-    /** Called with the chosen value. */
+    /** Called with the chosen value, or `null` when the field is cleared. */
     onValueChange?: ((value: Value | null) => void) | undefined;
     /** Shown in the trigger while nothing is chosen. */
     placeholder?: ReactNode | undefined;
+    /**
+     * Shows an × beside the chevron while a value is chosen; pressing it, or Backspace/Delete on the
+     * focused trigger, sets the value to `null` and calls `onValueChange(null)`.
+     */
+    clearable?: boolean | undefined;
+    /** Accessible name of the clear button. Default "Clear". */
+    clearLabel?: string | undefined;
     /** Prevents choosing a different option. */
     readOnly?: boolean | undefined;
     /** Stretches the trigger to the container. */
@@ -1110,7 +1145,7 @@ interface SelectProps<Value extends string = string> extends FieldProps {
  * 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;
+declare function Select<Value extends string = string>({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, options, value, defaultValue, onValueChange, placeholder, clearable, clearLabel, 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. */
@@ -1213,6 +1248,9 @@ declare function Separator({ className, ...rest }: ToolbarSeparatorProps): react
 interface ToolbarButtonProps extends Omit<Toolbar$1.Button.Props, 'className'> {
     className?: string | undefined;
 }
+interface ToolbarLinkProps extends Omit<Toolbar$1.Link.Props, 'className'> {
+    className?: string | undefined;
+}
 interface ToolbarSpacerProps {
     className?: string | undefined;
 }
@@ -1224,6 +1262,7 @@ declare const Toolbar: {
     Group: typeof Group;
     Separator: typeof Separator;
     Button: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Link: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarLinkProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
     Spacer: typeof Spacer;
 };
 
@@ -2004,7 +2043,388 @@ declare function Stat({ label, value, delta, deltaTone, trend, hint, icon, varia
     'data-size': StatSize;
 }, HTMLDivElement>;
 
+type ChipTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+type ChipSize = 'sm' | 'md';
+interface ChipProps extends Omit<ComponentPropsWithRef<'span'>, 'onClick' | 'onRemove'> {
+    /** The chip text. Keep it to a word or three. */
+    children: ReactNode;
+    /** A 14px icon before the text. Decorative. */
+    icon?: ReactNode | undefined;
+    /** Colour. `neutral` (default) for filters, a status tone when the chip is the status. */
+    tone?: ChipTone | undefined;
+    /** `md` 32px (default) or `sm` 24px inside table rows and Card headers. */
+    size?: ChipSize | undefined;
+    /** Filled and `aria-pressed`. Use with `onClick` for a toggling filter chip. */
+    selected?: boolean | undefined;
+    /** Makes the chip a `<button>` that toggles; `selected` is reflected as `aria-pressed`. */
+    onClick?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Adds a labelled × that calls this. Backspace or Delete on the focused chip (or on the ×) removes it
+     * too. Focus is yours to manage after removal: move it to the next chip or the filter input.
+     */
+    onRemove?: (() => void) | undefined;
+    /** Accessible name of the ×. Default "Remove" followed by the chip text when that text is a string. */
+    removeLabel?: string | undefined;
+    disabled?: boolean | undefined;
+}
+/**
+ * A small pill: an applied filter, a tag, a selectable option in a row of a few. `onClick` makes it a
+ * toggle button, `onRemove` adds the ×, and the two combine. Plain text otherwise.
+ */
+declare function Chip({ children, icon, tone, size, selected, onClick, onRemove, removeLabel, disabled, className, ...rest }: ChipProps): react.JSX.Element;
+
+interface DisclosureProps extends Omit<ComponentPropsWithRef<'details'>, 'open' | 'onToggle'> {
+    /** Required. The summary line, a verb phrase: "Show full description". */
+    summary: ReactNode;
+    /** Replaces `summary` while open: "Show less". */
+    summaryOpen?: ReactNode | undefined;
+    /** Controlled open state. */
+    open?: boolean | undefined;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean | undefined;
+    /** Called when the user toggles it. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * While closed, shows this many lines of the content fading out, so a long description still reads
+     * as a teaser. Puts the summary line under the preview. Needs `::details-content` (2025 browsers);
+     * older ones show the summary alone.
+     */
+    previewLines?: number | undefined;
+    /** Puts the summary line above (default) or below the content. Defaults to `end` with `previewLines`. */
+    summaryPosition?: 'start' | 'end' | undefined;
+    children?: ReactNode | undefined;
+}
+/**
+ * A native `<details>` collapse with a styled summary. Works without JavaScript, is announced as a
+ * disclosure, and shares `name` with siblings for an exclusive group.
+ */
+declare function Disclosure({ summary, summaryOpen, open, defaultOpen, onOpenChange, previewLines, summaryPosition, className, style, children, ref, ...rest }: DisclosureProps): react.JSX.Element;
+
+type EmptyStateSize = 'sm' | 'md';
+type EmptyStateElement = 'div' | 'section' | 'li';
+interface EmptyStateProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /** Required. What is empty, as a short statement: "No applications yet". */
+    title: ReactNode;
+    /** One sentence on why, or what to do: "Postings you apply to show up here." */
+    description?: ReactNode | undefined;
+    /** A 24px icon in a muted circle above the title. Decorative. */
+    icon?: ReactNode | undefined;
+    /** The actions, usually one primary Button and at most one secondary. Rendered in an Inline. */
+    children?: ReactNode | undefined;
+    /** `md` (default) for a whole view or panel, `sm` inside a Card or a table body. */
+    size?: EmptyStateSize | undefined;
+    /** Element to render. Default `div`. */
+    as?: EmptyStateElement | undefined;
+}
+/**
+ * Centred placeholder for a view with nothing in it: an icon, a title, a sentence and the action that
+ * fills it. Say what is missing and the next step; never apologise.
+ */
+declare function EmptyState({ title, description, icon, children, size, as, className, ...rest }: EmptyStateProps): react.DetailedReactHTMLElement<{
+    slot?: string | undefined | undefined;
+    style?: react.CSSProperties | undefined;
+    ref?: react.Ref<HTMLDivElement> | undefined;
+    key?: react.Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: react.AriaRole | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | 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 | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: react.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: react.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: react.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEnd?: react.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEndCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
+    onToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
+    onBeforeToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancel?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancelCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRun?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+    className: string;
+    'data-size': EmptyStateSize;
+}, HTMLDivElement>;
+
+type SkeletonVariant = 'text' | 'rect' | 'circle';
+interface SkeletonProps extends ComponentPropsWithRef<'span'> {
+    /** `text` (default) is one line of the current font size; `rect` a block; `circle` an avatar. */
+    variant?: SkeletonVariant | undefined;
+    /** Any CSS length. Default: text `100%`, rect `100%`, circle `40px`. */
+    width?: string | number | undefined;
+    /** Any CSS length. Default: text `1em` (one line), rect `80px`, circle = `width`. */
+    height?: string | number | undefined;
+    /** For `text`: how many lines; the last is shorter. Default 1. */
+    lines?: number | undefined;
+    /** Hides the shimmer. Default `false`; reduced motion hides it anyway. */
+    still?: boolean | undefined;
+}
+/**
+ * A placeholder shape shown while real content loads. It is hidden from assistive tech: put
+ * `aria-busy="true"` on the region being filled, or a `Spinner` with a label beside it, so the loading
+ * state is announced once instead of per block.
+ */
+declare function Skeleton({ variant, width, height, lines, still, className, style, ...rest }: SkeletonProps): react.JSX.Element;
+
 declare const version = "0.1.1";
 
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, 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, Stat, SunIcon, Switch, Table, 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, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSortDirection, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, 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, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, 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, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, 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, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSortDirection, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };