@danxbot/ui 1.0.0

package/dist/types/components/CodeEditor.d.ts

@@ -0,0 +1,86 @@
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
+import { type CodeEditorView } from "./code-editor/context";
+export type { CodeEditorView } from "./code-editor/context";
+export interface CodeEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title" | "onChange"> {
+    /** The text, when the consumer owns it. */
+    value?: string;
+    /** The starting text, when the component owns it. */
+    defaultValue?: string;
+    /** Called with the whole document after every edit. */
+    onValueChange?: (next: string) => void;
+    /**
+     * No textarea, no editing chrome — a viewer. Defaults to TRUE; see the banner
+     * for why that direction and not the other.
+     */
+    readOnly?: boolean;
+    /** Grammar to highlight with. Unknown or absent renders as plain text. */
+    language?: string;
+    /** Caption for the toolbar — a filename, usually. */
+    filename?: string;
+    /** Accessible name for the editable surface or the scrollable viewer. */
+    label?: string;
+    /**
+     * Number to print beside the FIRST line. Supplying one is what renders the
+     * gutter, so an excerpt lifted from the middle of a file numbers itself
+     * honestly and there is no second boolean to disagree with it.
+     */
+    startLine?: number;
+    /** Tallest the surface may grow, in lines, before it scrolls. */
+    maxLines?: number;
+    /**
+     * Start collapsed to this many lines, with a control to open it. Read-only
+     * only: collapsing a surface someone is typing into hides their own caret.
+     */
+    previewLines?: number;
+    /** Soft wrap, when the consumer owns it. */
+    wrap?: boolean;
+    /** Soft wrap at mount, when the component owns it. */
+    defaultWrap?: boolean;
+    onWrapChange?: (next: boolean) => void;
+    /** Presentation, when the consumer owns it. */
+    view?: CodeEditorView;
+    /** Presentation at mount, when the component owns it. */
+    defaultView?: CodeEditorView;
+    onViewChange?: (next: CodeEditorView) => void;
+    /** What Tab inserts and what auto-indent repeats. */
+    indent?: string;
+    /** Shown in an empty editable surface. */
+    placeholder?: string;
+    /**
+     * Replaces the default toolbar. Compose `CodeEditorCaption`,
+     * `CodeEditorViewSwitch`, `CodeEditorWrapToggle` and `CodeEditorCopyButton`
+     * inside a `CodeEditorToolbar` — they read the same context the default one
+     * does — or render anything else entirely.
+     */
+    toolbar?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function CodeEditor({ value, defaultValue, onValueChange, readOnly, language, filename, label, startLine, maxLines, previewLines, wrap, defaultWrap, onWrapChange, view, defaultView, onViewChange, indent, placeholder, toolbar, className, ref, ...props }: CodeEditorProps): import("react").JSX.Element;
+export interface CodeEditorToolbarProps {
+    children: ReactNode;
+    className?: string;
+}
+/** The bar itself. WRAPS rather than scrolls — at 375px the caption drops onto
+    its own line instead of pushing the copy button off the screen. */
+export declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): import("react").JSX.Element;
+/** Filename, or the language when there is no filename — whichever names it. */
+export declare function CodeEditorCaption({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CodeEditorCopyButton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CodeEditorWrapToggle({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Source / Preview / Split.
+ *
+ * RENDERS NOTHING when the instance has only one view. A switch with a single
+ * position is a control that teaches people it does not work — and that is the
+ * configuration being the switch, not a `showViewSwitch` prop.
+ */
+export declare function CodeEditorViewSwitch({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/types/components/Combobox.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode, type Ref } from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+export interface ComboboxProps<Value> extends Omit<BaseCombobox.Root.Props<Value, boolean>, "children"> {
+    placeholder?: string;
+    /** Shown when the filter matches nothing. */
+    emptyMessage?: ReactNode;
+    /** Accessible name, when there is no visible label. */
+    "aria-label"?: string;
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function Combobox<Value>({ placeholder, emptyMessage, className, children, ref, "aria-label": ariaLabel, onOpenChange, ...props }: ComboboxProps<Value>): import("react").JSX.Element;
+export interface ComboboxItemProps extends Omit<BaseCombobox.Item.Props, "className"> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ComboboxItem({ className, children, ref, ...props }: ComboboxItemProps): import("react").JSX.Element;
+export interface ComboboxGroupProps {
+    /** Prop, not a child component, so a label cannot be placed outside a group. */
+    label?: ReactNode;
+    children: ReactNode;
+}
+export declare function ComboboxGroup({ label, children }: ComboboxGroupProps): import("react").JSX.Element;
+export interface MultiComboboxProps<Value> extends ComboboxProps<Value> {
+    /** How each selected value should read on its chip. */
+    renderChip?: (value: Value) => ReactNode;
+}
+/**
+ * Multi-select, where the input becomes a chip container.
+ *
+ * Chips sit INSIDE the field rather than under it. Below the field they push
+ * every following control down as selections accumulate, so a form visibly
+ * reflows while someone is still choosing — and the chips stop looking like
+ * part of the input they belong to.
+ */
+export declare function MultiCombobox<Value>({ placeholder, emptyMessage, renderChip, className, children, ref, "aria-label": ariaLabel, onOpenChange, ...props }: MultiComboboxProps<Value>): import("react").JSX.Element;

package/dist/types/components/CommandPalette.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { type IconName } from "./Icon";
+export type CommandItem = {
+    id: string;
+    label: string;
+    /** Extra words to match against that are not shown — synonyms, old names. */
+    keywords?: string;
+    description?: string;
+    icon?: IconName;
+    /** Displayed on the right — "⌘K", "G then D". */
+    shortcut?: string;
+    group?: string;
+    onSelect: () => void;
+};
+export interface CommandPaletteProps {
+    items: CommandItem[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    placeholder?: string;
+    emptyMessage?: ReactNode;
+}
+export declare function CommandPalette({ items, open, onOpenChange, placeholder, emptyMessage, }: CommandPaletteProps): import("react").JSX.Element;
+/**
+ * Opens the palette on a keyboard shortcut.
+ *
+ * Bound to ⌘K / Ctrl-K, and deliberately NOT active while a text field has
+ * focus unless the modifier is held — a bare-key shortcut that fires mid-
+ * sentence is the fastest way to make people distrust an app.
+ */
+export declare function useCommandPalette(key?: string): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/types/components/DatePicker.d.ts

@@ -0,0 +1,20 @@
+export type DateRange = {
+    from: Date | null;
+    to: Date | null;
+};
+export interface DatePickerProps {
+    /** A single date, or a range when `range` is set. */
+    value?: Date | DateRange | null;
+    onValueChange?: (value: Date | DateRange | null) => void;
+    range?: boolean;
+    min?: Date;
+    max?: Date;
+    /** Disable specific days — weekends, holidays, taken slots. */
+    isDateDisabled?: (date: Date) => boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /** How the chosen date reads in the trigger. */
+    format?: (date: Date) => string;
+    className?: string;
+}
+export declare function DatePicker({ value, onValueChange, range, min, max, isDateDisabled, placeholder, disabled, format, className, }: DatePickerProps): import("react").JSX.Element;

package/dist/types/components/Dialog.d.ts

@@ -0,0 +1,117 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const dialog: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+        lg: {
+            popup: string;
+        };
+        xl: {
+            popup: string;
+        };
+    };
+}, {
+    backdrop: string[];
+    popup: string[];
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string[];
+}, undefined, {
+    size: {
+        sm: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+        lg: {
+            popup: string;
+        };
+        xl: {
+            popup: string;
+        };
+    };
+}, {
+    backdrop: string[];
+    popup: string[];
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+        lg: {
+            popup: string;
+        };
+        xl: {
+            popup: string;
+        };
+    };
+}, {
+    backdrop: string[];
+    popup: string[];
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string[];
+}>>;
+export interface DialogProps extends VariantProps<typeof dialog> {
+    /** The control that opens the dialog. Omit for a fully controlled dialog. */
+    trigger?: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Buttons for the footer. Omit to render no footer at all. */
+    actions?: ReactNode;
+    /** Hide the corner close button — for a dialog that must be answered. */
+    hideClose?: boolean;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Dialog({ trigger, open, onOpenChange, title, description, actions, hideClose, size, className, children, ref, }: DialogProps): import("react").JSX.Element;
+/** Closes the nearest Dialog. Wrap any button: `<DialogClose>{<Button/>}</DialogClose>`. */
+export declare function DialogClose({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface AlertDialogProps {
+    trigger?: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Styles the confirm button as destructive. */
+    destructive?: boolean;
+    loading?: boolean;
+    onConfirm?: () => void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A dialog that must be answered — no outside click, no Escape.
+ *
+ * The confirm button is the LAST in the footer and the cancel button comes
+ * first, which is the reverse of how people often write it. Cancel-first means
+ * the pointer travelling in from the panel's content reaches the safe option
+ * before the destructive one, and keyboard focus lands on cancel by default.
+ */
+export declare function AlertDialog({ trigger, open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, loading, onConfirm, className, ref, }: AlertDialogProps): import("react").JSX.Element;
+export {};

package/dist/types/components/DragDrop.d.ts

@@ -0,0 +1,60 @@
+import { type ReactNode } from "react";
+import { type AutoScrollOptions, type ContainerId, type DragAxis, type DragId, type DragSessionCallbacks, type DragStrings } from "../lib/dnd";
+export interface DragDropProps extends DragSessionCallbacks {
+    /** Override any subset of the announcement grammar — localisation, or a domain noun. */
+    strings?: Partial<DragStrings>;
+    /** Tune the edge auto-scroll. It cannot be turned off; see the banner. */
+    autoScroll?: AutoScrollOptions;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function DragDrop({ strings, autoScroll, className, children, ...callbacks }: DragDropProps): import("react").JSX.Element;
+export interface DragDropContainerProps {
+    id: ContainerId;
+    /**
+     * Human name for this container, spoken in every announcement about it —
+     * "position 3 of 7 in ToDo". Falls back to the id, which is at least
+     * speakable and never right.
+     */
+    label?: string;
+    /**
+     * Reorder axis. `"y"` is a column of rows, `"x"` a row of columns. It decides
+     * which arrow pair steps inside the container and which moves between
+     * containers, which way the siblings part, and which scroll direction the
+     * handle leaves alone for a finger.
+     *
+     * @default "y"
+     */
+    axis?: DragAxis;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function DragDropContainer({ id, label, axis, className, children, }: DragDropContainerProps): import("react").JSX.Element;
+export interface DragDropItemProps {
+    id: DragId;
+    /**
+     * Position in the consumer's data for this container. The engine
+     * re-registers on every change, so it must be the real index — never the
+     * render order of a filtered list.
+     */
+    index: number;
+    /** Human name, spoken in announcements and used to name the handle. */
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function DragDropItem({ id, index, label, className, children, }: DragDropItemProps): import("react").JSX.Element;
+export interface DragDropHandleProps {
+    /** Accessible name. Defaults to `Reorder <the item's label>`. */
+    label?: string;
+    className?: string;
+    /** Defaults to the grip. */
+    children?: ReactNode;
+}
+export declare function DragDropHandle({ label, className, children }: DragDropHandleProps): import("react").JSX.Element;
+export interface DragDropOverlayProps {
+    /** Renders the carried card. Called only while a card is being carried. */
+    children: (id: DragId) => ReactNode;
+    className?: string;
+}
+export declare function DragDropOverlay({ children, className }: DragDropOverlayProps): import("react").ReactPortal | null;

package/dist/types/components/ErrorBoundary.d.ts

@@ -0,0 +1,16 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+interface Props {
+    children: ReactNode;
+    /** Shown in the fallback so the failing region is identifiable at a glance. */
+    label?: string;
+}
+interface State {
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}
+export {};

package/dist/types/components/Field.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode, Ref } from "react";
+export interface FieldProps {
+    label?: ReactNode;
+    /** Helper text. Rendered under the label, and referenced by the control. */
+    description?: ReactNode;
+    /**
+     * An error message. Presence marks the field invalid — one prop rather than
+     * a separate `invalid` boolean, because a field that is invalid with no
+     * message tells the user nothing, and the two are never legitimately apart.
+     */
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    /** Identifies the field in a form submission. */
+    name?: string;
+    layout?: "stacked" | "inline";
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Field({ label, description, error, required, disabled, name, layout, className, children, ref, }: FieldProps): import("react").JSX.Element;
+export interface FieldSetProps {
+    legend?: ReactNode;
+    description?: ReactNode;
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLFieldSetElement>;
+}
+/**
+ * Groups related fields under a shared legend.
+ *
+ * A real `<fieldset>` / `<legend>` rather than a heading, because a screen
+ * reader announces the legend with EACH control inside it — which is the whole
+ * point for a group of radios or a set of related toggles, and is not something
+ * a heading can do.
+ */
+export declare function FieldSet({ legend, description, className, children, ref }: FieldSetProps): import("react").JSX.Element;

package/dist/types/components/FileUpload.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export type UploadFile = {
+    id: string;
+    file: File;
+    /** 0–100 while uploading; omit when the caller is not tracking it. */
+    progress?: number;
+    error?: string;
+};
+export interface FileUploadProps {
+    files?: UploadFile[];
+    onFilesAdded?: (files: File[]) => void;
+    onFileRemoved?: (id: string) => void;
+    accept?: string;
+    multiple?: boolean;
+    /** Bytes. Files over this are rejected with a message naming the limit. */
+    maxSize?: number;
+    disabled?: boolean;
+    label?: ReactNode;
+    hint?: ReactNode;
+    className?: string;
+}
+export declare function FileUpload({ files, onFilesAdded, onFileRemoved, accept, multiple, maxSize, disabled, label, hint, className, }: FileUploadProps): import("react").JSX.Element;

package/dist/types/components/Icon.d.ts

@@ -0,0 +1,40 @@
+import type { SVGProps } from "react";
+import { type IconNode } from "../lib/icons";
+import type { CoreIconName } from "../icons/data";
+export type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * `(string & {})` keeps the core names as autocomplete suggestions while still
+ * accepting anything a consumer registered. Plain `string` would collapse the
+ * union and lose the suggestions entirely.
+ */
+export type IconName = CoreIconName | (string & {});
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "name" | "ref"> {
+    /** A registered icon name. Ignored when `node` is given. */
+    name?: IconName;
+    /** Raw geometry, for an icon that is not worth registering. */
+    node?: IconNode;
+    size?: IconSize;
+    /**
+     * An accessible name. Supplying it makes the icon `role="img"`; omitting it
+     * marks the icon decorative and hides it from assistive tech.
+     *
+     * The DEFAULT IS DECORATIVE, and that is the right default: an icon almost
+     * always sits beside a label that already carries the meaning, and announcing
+     * both makes every button read twice. The exception — an icon that IS the
+     * only label — is the case worth typing a prop for.
+     */
+    label?: string;
+    ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * Renders registered icon geometry.
+ *
+ * Everything is `currentColor` and sized from CSS variables, so an icon inherits
+ * both the colour and the size scale of whatever it sits in — no per-call
+ * colour prop, and no icon left behind when the user changes the size toggle.
+ *
+ * `shrink-0` is not a detail: an icon inside a flex row with a long label will
+ * otherwise be squeezed into an oval, which is the single most common way icons
+ * break in a real layout.
+ */
+export declare function Icon({ name, node, size, label, className, style, ref, ...props }: IconProps): import("react").JSX.Element | null;

package/dist/types/components/Input.d.ts

@@ -0,0 +1,120 @@
+import type { ReactNode, Ref, TextareaHTMLAttributes } from "react";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { type VariantProps } from "tailwind-variants";
+declare const control: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+    hasLeading: {
+        true: "";
+        false: "";
+    };
+    hasTrailing: {
+        true: "";
+        false: "";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+    hasLeading: {
+        true: "";
+        false: "";
+    };
+    hasTrailing: {
+        true: "";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+    hasLeading: {
+        true: "";
+        false: "";
+    };
+    hasTrailing: {
+        true: "";
+        false: "";
+    };
+}, undefined>>;
+export interface InputProps extends Omit<BaseInput.Props, "className" | "render" | "size">, VariantProps<typeof control> {
+    className?: string;
+    /** Icon or text shown inside the field's leading edge. */
+    leading?: ReactNode;
+    /** Icon, unit or action shown inside the field's trailing edge. */
+    trailing?: ReactNode;
+    /**
+     * Replaces the trailing adornment with a spinner — for a field doing its own
+     * async work (an availability check, a lookup) rather than a form-wide submit.
+     */
+    loading?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function Input({ className, size, leading, trailing, loading, ref, ...props }: InputProps): import("react").JSX.Element;
+declare const textarea: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "rounded-md px-3 py-2 text-xs";
+        md: "rounded-md px-3.5 py-2.5 text-sm";
+        lg: "rounded-lg px-4 py-3 text-md";
+    };
+    /**
+     * `auto` uses field-sizing, which grows the box with its content with no
+     * JS, no hidden mirror element and no scroll-height measuring — the three
+     * things every auto-resize textarea implementation has needed until now.
+     * Engines without it simply keep the fixed height and a scrollbar, which
+     * is the correct graceful degradation.
+     */
+    resize: {
+        none: "resize-none";
+        vertical: "resize-y";
+        auto: "resize-none field-sizing-content";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "rounded-md px-3 py-2 text-xs";
+        md: "rounded-md px-3.5 py-2.5 text-sm";
+        lg: "rounded-lg px-4 py-3 text-md";
+    };
+    /**
+     * `auto` uses field-sizing, which grows the box with its content with no
+     * JS, no hidden mirror element and no scroll-height measuring — the three
+     * things every auto-resize textarea implementation has needed until now.
+     * Engines without it simply keep the fixed height and a scrollbar, which
+     * is the correct graceful degradation.
+     */
+    resize: {
+        none: "resize-none";
+        vertical: "resize-y";
+        auto: "resize-none field-sizing-content";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "rounded-md px-3 py-2 text-xs";
+        md: "rounded-md px-3.5 py-2.5 text-sm";
+        lg: "rounded-lg px-4 py-3 text-md";
+    };
+    /**
+     * `auto` uses field-sizing, which grows the box with its content with no
+     * JS, no hidden mirror element and no scroll-height measuring — the three
+     * things every auto-resize textarea implementation has needed until now.
+     * Engines without it simply keep the fixed height and a scrollbar, which
+     * is the correct graceful degradation.
+     */
+    resize: {
+        none: "resize-none";
+        vertical: "resize-y";
+        auto: "resize-none field-sizing-content";
+    };
+}, undefined>>;
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, VariantProps<typeof textarea> {
+    ref?: Ref<HTMLTextAreaElement>;
+}
+export declare function Textarea({ className, size, resize, rows, ref, ...props }: TextareaProps): import("react").JSX.Element;
+export {};

package/dist/types/components/Loading.d.ts

@@ -0,0 +1,83 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const skeleton: import("tailwind-variants").TVReturnType<{
+    shape: {
+        text: "h-[1em] rounded-sm";
+        block: "rounded-md";
+        circle: "aspect-square rounded-full";
+        pill: "rounded-full";
+    };
+    sweep: {
+        true: "dx-sweep animate-none";
+        false: "";
+    };
+}, undefined, string[], {
+    shape: {
+        text: "h-[1em] rounded-sm";
+        block: "rounded-md";
+        circle: "aspect-square rounded-full";
+        pill: "rounded-full";
+    };
+    sweep: {
+        true: "dx-sweep animate-none";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    shape: {
+        text: "h-[1em] rounded-sm";
+        block: "rounded-md";
+        circle: "aspect-square rounded-full";
+        pill: "rounded-full";
+    };
+    sweep: {
+        true: "dx-sweep animate-none";
+        false: "";
+    };
+}, undefined>>;
+export interface SkeletonProps extends VariantProps<typeof skeleton> {
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+    style?: CSSProperties;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function Skeleton({ shape, sweep, className, width, height, style, ref }: SkeletonProps): import("react").JSX.Element;
+export interface SkeletonTextProps {
+    /** How many lines to draw. */
+    lines?: number;
+    className?: string;
+}
+/**
+ * A paragraph-shaped skeleton.
+ *
+ * The last line is short. That single detail is what makes it read as text
+ * rather than as a stack of bars — every real paragraph ends mid-line, and a
+ * block of equal-length bars reads as a table.
+ */
+export declare function SkeletonText({ lines, className }: SkeletonTextProps): import("react").JSX.Element;
+export interface LoadingOverlayProps {
+    /** Whether the overlay is showing. */
+    active: boolean;
+    /** Text inside the card. Keep it short — it sits over content being read. */
+    message?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Dims existing content and floats a card over it while that content is being
+ * replaced.
+ *
+ * TWO DETAILS DO THE REAL WORK.
+ *
+ * The veil is `inert`, not `pointer-events: none`. Blocking the mouse alone
+ * leaves every control underneath reachable by Tab and clickable by Enter, so
+ * a keyboard user can act on data that is mid-replacement — which is exactly
+ * the race the overlay exists to prevent. `inert` removes the subtree from the
+ * tab order and the accessibility tree together.
+ *
+ * The card is OPAQUE while the veil is translucent. A translucent card over
+ * translucent content produces text over text, which is unreadable at
+ * precisely the moment someone is trying to work out what is happening.
+ */
+export declare function LoadingOverlay({ active, message, children, className }: LoadingOverlayProps): import("react").JSX.Element;
+export {};