@ansh-ui/vue 0.2.0

package/dist/data.d.cts

@@ -0,0 +1,963 @@
+import * as vue from 'vue';
+import { VNodeChild, PropType, VNode } from 'vue';
+import { S as SlotContent } from './utils-IKPG3zcC.cjs';
+
+/**
+ * Tables — the Vue counterpart of `@ansh-ui/react`'s `Table`/`DataTable`.
+ *
+ * A real `<table>` with `<th scope>`, not a grid of divs. The semantics are the entire point: a
+ * screen reader announces "Column 3 of 7, Status, row 12" only if the markup says so. Every
+ * div-based table reimplements navigation badly or not at all, and the CSS argument for divs
+ * disappeared when `display: contents` and `position: sticky` landed.
+ *
+ * `DataTable` adds sorting, selection and pagination on top. It stays deliberately short of a full
+ * data grid — no virtualisation, no column resizing, no pinned regions. Those need a different
+ * architecture (windowing, measured columns), and half-implementing them produces a component that
+ * breaks at exactly the scale it was added for.
+ *
+ * `DataTable` is generic over the row type `T`, which Vue only supports for a plain (non-SFC)
+ * component through `defineComponent`'s "generic setup function" overload — the setup function
+ * itself stays generic (`<T,>(props: DataTableProps<T>, ctx) => …`) while the runtime `props` list
+ * is a plain array of keys. That trade means no per-prop runtime validation or default-value
+ * coercion (booleans aren't coerced from attribute presence, defaults are applied by hand inside
+ * `setup`, mirroring the destructured defaults the React version uses) — acceptable here because the
+ * real contract for a data-shaped component like this is the TypeScript signature, not template
+ * shorthand.
+ */
+type SortDirection = 'asc' | 'desc';
+interface SortState {
+    columnId: string;
+    direction: SortDirection;
+}
+interface Column<T> {
+    id: string;
+    header: SlotContent;
+    /** Render the cell. Receives the row and its index. */
+    cell: (row: T, index: number) => VNodeChild;
+    /** Allow sorting by this column. */
+    sortable?: boolean;
+    /**
+     * Value used for the default comparator. Without it a sortable column falls back to comparing
+     * rendered output, which sorts "10" before "9".
+     */
+    sortValue?: (row: T) => string | number | Date | null | undefined;
+    align?: 'start' | 'center' | 'end';
+    /** Any CSS width — `'12rem'`, `'25%'`, `'minmax(8rem, 1fr)'`. */
+    width?: string;
+    /** Hide below this breakpoint. Uses the token breakpoints. */
+    hideBelow?: 'sm' | 'md' | 'lg';
+    /** Short label announced instead of a complex header. */
+    ariaLabel?: string;
+}
+interface DataTableProps<T> {
+    data: readonly T[];
+    columns: ReadonlyArray<Column<T>>;
+    /** Stable row identity. Required — array index breaks selection the moment rows reorder. */
+    getRowId: (row: T) => string;
+    /** Describes the table for screen readers. Rendered as a visually hidden `<caption>`. */
+    caption: string;
+    /** Row checkboxes plus a header select-all. */
+    selectable?: boolean;
+    /** `v-model:selected` — omit for an uncontrolled table that owns its own selection. */
+    selected?: readonly string[];
+    /** `v-model:sort` — omit for an uncontrolled table that owns its own sort state. */
+    sort?: SortState | null;
+    defaultSort?: SortState | null;
+    /** Rows per page. Omit to render everything. */
+    pageSize?: number;
+    /** `v-model:page` — omit for an uncontrolled table that owns its own page. */
+    page?: number;
+    /** Show skeleton rows. */
+    loading?: boolean;
+    /** Rendered in place of the body when there are no rows. */
+    emptyState?: SlotContent;
+    onRowClick?: (row: T) => void;
+    /** Keep the header visible while the body scrolls. */
+    stickyHeader?: boolean;
+    density?: 'comfortable' | 'compact';
+    /** Zebra striping. Off by default — borders read as cleaner at density. */
+    striped?: boolean;
+    /** Per-row extra class, for status highlighting. */
+    rowClassName?: (row: T) => string | undefined;
+}
+declare const DataTable: new <T>(props: DataTableProps<T> & {
+    "onUpdate:sort"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
+} & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps) => vue.CreateComponentPublicInstanceWithMixins<DataTableProps<T> & {
+    "onUpdate:sort"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
+}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:sort" | "update:selected" | "update:page")[], vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, vue.ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, DataTableProps<T> & {
+    "onUpdate:sort"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
+}, {}, {}, {}, {}, {}>;
+interface PaginationProps {
+    /** Zero-based. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** Total row count, for the "1–20 of 340" summary. */
+    total?: number;
+    pageSize?: number;
+    /** Page buttons either side of the current one. Default `1`. */
+    siblings?: number;
+}
+/**
+ * Page navigation.
+ *
+ * `<nav>` with an ordered list, because that is what a pager is — a list of links to positions in a
+ * sequence. The current page is marked `aria-current="page"`, which is how a screen reader user
+ * knows where they are without counting buttons.
+ *
+ * The ellipsis is `aria-hidden`; announcing "ellipsis" between page 3 and page 12 conveys nothing
+ * that the numbers don't already.
+ *
+ * Fully controlled, same as the React version — there is no internal page state to fall back to, so
+ * `onPageChange` stays a plain callback prop rather than a `v-model`-style emit.
+ */
+declare const Pagination: vue.DefineComponent<vue.ExtractPropTypes<{
+    page: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageCount: {
+        type: NumberConstructor;
+        required: true;
+    };
+    onPageChange: {
+        type: PropType<(page: number) => void>;
+        required: true;
+    };
+    total: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    siblings: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    page: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageCount: {
+        type: NumberConstructor;
+        required: true;
+    };
+    onPageChange: {
+        type: PropType<(page: number) => void>;
+        required: true;
+    };
+    total: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    siblings: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    pageSize: number;
+    total: number;
+    siblings: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/** A plain styled table, for content that isn't driven by data props. */
+declare const Table: vue.DefineComponent<vue.ExtractPropTypes<{
+    caption: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    density: {
+        type: PropType<"comfortable" | "compact">;
+        default: string;
+    };
+    striped: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    caption: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    density: {
+        type: PropType<"comfortable" | "compact">;
+        default: string;
+    };
+    striped: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    caption: string;
+    density: "comfortable" | "compact";
+    striped: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Small display components — the Vue counterpart of `@ansh-ui/react`'s data-display primitives.
+ *
+ * Individually trivial, collectively most of what an application screen is made of. The care here
+ * goes into the details that get skipped: a badge whose meaning isn't carried by colour alone, an
+ * avatar whose fallback initials are readable against a generated background, an empty state that
+ * says what to do next rather than just "no data".
+ */
+type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * A status label.
+ *
+ * Every badge carries its meaning in **text**, not just colour. A red badge reading "Failed" works
+ * for everyone; a red dot alone works for nobody using a screen reader and for the ~4% of the
+ * population with a colour vision deficiency. The `dot` is decorative reinforcement.
+ *
+ * `children` in the React version becomes the default slot here. Badge extends `HTMLAttributes` in
+ * React, so — unlike the rest of this file — arbitrary native attributes fall through, not just
+ * `class`.
+ */
+declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
+    tone: {
+        type: PropType<BadgeTone>;
+        default: string;
+    };
+    variant: {
+        type: PropType<"soft" | "solid" | "outline">;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm" | "md">;
+        default: string;
+    };
+    /** Leading dot. Useful for statuses where the label is short. */
+    dot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    tone: {
+        type: PropType<BadgeTone>;
+        default: string;
+    };
+    variant: {
+        type: PropType<"soft" | "solid" | "outline">;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm" | "md">;
+        default: string;
+    };
+    /** Leading dot. Useful for statuses where the label is short. */
+    dot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: "sm" | "md";
+    icon: SlotContent;
+    variant: "soft" | "outline" | "solid";
+    tone: BadgeTone;
+    dot: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface AvatarProps {
+    src?: string;
+    /** The person's name. Used for the alt text and to derive the fallback initials. */
+    name: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'square';
+    /** Presence indicator. */
+    status?: 'online' | 'offline' | 'busy' | 'away';
+}
+/**
+ * Avatar extends `HTMLAttributes` in React too, so arbitrary attributes fall through here as well.
+ *
+ * The fallback colour is derived from the name via `@ansh-ui/core`'s colour engine, then the *text*
+ * colour is chosen for contrast against it with `pickReadable` — reused rather than reimplemented, as
+ * required. Picking a random background and hardcoding white text is how you get illegible initials
+ * on a pale hue, and it is the most common avatar bug there is.
+ */
+declare const Avatar: vue.DefineComponent<vue.ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+        default: string;
+    };
+    shape: {
+        type: PropType<"circle" | "square">;
+        default: string;
+    };
+    status: {
+        type: PropType<"online" | "offline" | "busy" | "away">;
+        default: undefined;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+        default: string;
+    };
+    shape: {
+        type: PropType<"circle" | "square">;
+        default: string;
+    };
+    status: {
+        type: PropType<"online" | "offline" | "busy" | "away">;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl" | "xs";
+    src: string;
+    status: "offline" | "online" | "busy" | "away";
+    shape: "circle" | "square";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/** Overlapping avatars with an overflow count. */
+declare const AvatarGroup: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Maximum shown before collapsing into a "+N" chip. Default `4`. */
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: PropType<AvatarProps["size"]>;
+        default: undefined;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Maximum shown before collapsing into a "+N" chip. Default `4`. */
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: PropType<AvatarProps["size"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    max: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * A keyboard key.
+ *
+ * Splits on `+` so `<Kbd>⌘+K</Kbd>` renders two keys with a separator, and the separator is
+ * `aria-hidden` — a screen reader should say "command K", not "command plus K".
+ *
+ * The React version types its children as a plain `string` rather than a general `ReactNode`, since
+ * the split only makes sense on literal text. The default slot is kept here (matching the React
+ * call site, `<Kbd>⌘+K</Kbd>`) rather than switching to a string prop, and the text is recovered from
+ * the rendered slot nodes — which is exactly what that slot is expected to contain.
+ */
+declare const Kbd: vue.DefineComponent<{}, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface StatProps {
+    label: SlotContent;
+    value: SlotContent;
+    /** Change since the previous period. Sign decides the direction and colour. */
+    delta?: number;
+    /** How the delta reads — `'2.4%'` or `'+18 users'`. Defaults to the number with a sign. */
+    deltaLabel?: string;
+    /** For metrics where down is good, like churn or latency. */
+    invertDelta?: boolean;
+    hint?: SlotContent;
+    icon?: SlotContent;
+}
+/**
+ * A single metric — the building block of every dashboard.
+ *
+ * The delta's direction is shown by an arrow *and* a sign *and* a colour. Three redundant signals
+ * because this is the number people scan fastest and misreading it has consequences.
+ */
+declare const Stat: vue.DefineComponent<vue.ExtractPropTypes<{
+    label: {
+        type: PropType<SlotContent>;
+        required: true;
+    };
+    value: {
+        type: PropType<SlotContent>;
+        required: true;
+    };
+    delta: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    deltaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invertDelta: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hint: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    label: {
+        type: PropType<SlotContent>;
+        required: true;
+    };
+    value: {
+        type: PropType<SlotContent>;
+        required: true;
+    };
+    delta: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    deltaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invertDelta: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hint: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    delta: number;
+    icon: SlotContent;
+    hint: SlotContent;
+    deltaLabel: string;
+    invertDelta: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface EmptyStateProps {
+    title: SlotContent;
+    description?: SlotContent;
+    icon?: SlotContent;
+    /** The action that resolves the emptiness — "Create your first invoice". */
+    action?: SlotContent;
+    size?: 'sm' | 'md';
+}
+/**
+ * The "nothing here yet" panel.
+ *
+ * Always offers the next step. An empty state that only says "No results" leaves the user to work
+ * out whether the filter is wrong, the data hasn't loaded, or they need to create something — and
+ * that ambiguity is where people abandon a screen.
+ */
+declare const EmptyState: vue.DefineComponent<vue.ExtractPropTypes<{
+    title: {
+        type: PropType<SlotContent>;
+        required: true;
+    };
+    description: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    action: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    size: {
+        type: PropType<"sm" | "md">;
+        default: string;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    title: {
+        type: PropType<SlotContent>;
+        required: true;
+    };
+    description: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    action: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+    size: {
+        type: PropType<"sm" | "md">;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: "sm" | "md";
+    description: SlotContent;
+    icon: SlotContent;
+    action: SlotContent;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface DescriptionListProps {
+    items: ReadonlyArray<{
+        term: SlotContent;
+        description: SlotContent;
+    }>;
+    /** Side-by-side rather than stacked. Default `'horizontal'` on wide screens. */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * Key–value pairs — the detail panel of every record in a CRM.
+ *
+ * A real `<dl>`/`<dt>`/`<dd>`, which is what makes a screen reader pair each label with its value
+ * instead of reading twenty unconnected strings.
+ */
+declare const DescriptionList: vue.DefineComponent<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<DescriptionListProps["items"]>;
+        required: true;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<DescriptionListProps["items"]>;
+        required: true;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface TimelineItem {
+    id: string;
+    title: SlotContent;
+    description?: SlotContent;
+    /** Rendered as-is; pass an already-formatted string or a `<time>` VNode. */
+    timestamp?: SlotContent;
+    icon?: SlotContent;
+    tone?: BadgeTone;
+}
+/**
+ * A chronological feed — audit logs, order history, activity streams.
+ *
+ * An ordered list, because the order carries meaning. The connecting line is drawn with a
+ * pseudo-element on the list item rather than a real element, so it can't be selected, read, or land
+ * in a copy-paste of the page.
+ */
+declare const Timeline: vue.DefineComponent<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly TimelineItem[]>;
+        required: true;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly TimelineItem[]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    /** Show a copy button. Default `true`. */
+    copyable?: boolean;
+    /** Show line numbers. */
+    lineNumbers?: boolean;
+    /** Filename or title shown in the header bar. */
+    filename?: string;
+}
+/**
+ * A code block with a copy button.
+ *
+ * No syntax highlighter, matching the React version — shipping one means a tokeniser and a theme in
+ * the bundle of every app that displays a snippet, for a cost that lands on consumers who may never
+ * render code at all.
+ */
+declare const CodeBlock: vue.DefineComponent<vue.ExtractPropTypes<{
+    code: {
+        type: StringConstructor;
+        required: true;
+    };
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    copyable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lineNumbers: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filename: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    code: {
+        type: StringConstructor;
+        required: true;
+    };
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    copyable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lineNumbers: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filename: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    language: string;
+    copyable: boolean;
+    lineNumbers: boolean;
+    filename: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Progress indicators — the Vue counterpart of `@ansh-ui/react`'s `Progress`/`CircularProgress`/
+ * `Meter`.
+ *
+ * The distinction that matters and is usually missed: **progress** is work advancing toward
+ * completion (`role="progressbar"`), a **meter** is a static measurement within a range
+ * (`role="meter"` — disk usage, a score, a quota). Announcing a disk-usage bar as progress tells a
+ * screen-reader user that something is loading, which it isn't.
+ */
+interface ProgressProps {
+    /** `0`–`max`. Omit for an indeterminate bar. */
+    value?: number;
+    max?: number;
+    size?: 'sm' | 'md' | 'lg';
+    tone?: 'accent' | 'success' | 'warning' | 'danger';
+    /** Accessible name — "Upload progress", not "Progress". */
+    label: string;
+    /** Show the label and percentage above the bar. */
+    showLabel?: boolean;
+    /** Override the announced/displayed text. */
+    formatValue?: (value: number, max: number) => string;
+}
+declare const Progress: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+    tone: {
+        type: PropType<"accent" | "success" | "warning" | "danger">;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    showLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formatValue: {
+        type: PropType<(value: number, max: number) => string>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+    tone: {
+        type: PropType<"accent" | "success" | "warning" | "danger">;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    showLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formatValue: {
+        type: PropType<(value: number, max: number) => string>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    value: number;
+    size: "sm" | "md" | "lg";
+    max: number;
+    formatValue: (value: number, max: number) => string;
+    tone: "danger" | "accent" | "success" | "warning";
+    showLabel: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface CircularProgressProps extends Omit<ProgressProps, 'size'> {
+    /** Diameter in px. Default `48`. */
+    size?: number;
+    /** Ring thickness in px. Default `4`. */
+    thickness?: number;
+}
+/**
+ * A ring progress indicator.
+ *
+ * Drawn with `stroke-dasharray` on an SVG circle rather than with conic gradients, so the ends can
+ * be rounded and the ring animates smoothly at any size. The circle is rotated -90° so 0% starts at
+ * the top, which is where everyone expects it.
+ *
+ * `children` in the React version — content in the middle, usually the percentage — becomes the
+ * default slot here.
+ */
+declare const CircularProgress: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    thickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tone: {
+        type: PropType<"accent" | "success" | "warning" | "danger">;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    formatValue: {
+        type: PropType<(value: number, max: number) => string>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    thickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tone: {
+        type: PropType<"accent" | "success" | "warning" | "danger">;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    formatValue: {
+        type: PropType<(value: number, max: number) => string>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    value: number;
+    size: number;
+    thickness: number;
+    max: number;
+    formatValue: (value: number, max: number) => string;
+    tone: "danger" | "accent" | "success" | "warning";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface MeterProps {
+    value: number;
+    min?: number;
+    max?: number;
+    /** Thresholds that colour the bar — below `low` is danger, above `high` is success. */
+    low?: number;
+    high?: number;
+    /** Flip the colours, for metrics where high is bad (disk usage, error rate). */
+    inverted?: boolean;
+    label: string;
+    showValue?: boolean;
+    formatValue?: (value: number) => string;
+}
+/**
+ * A measurement within a known range — quota, score, capacity.
+ *
+ * `role="meter"`, not `progressbar`. Colour follows the thresholds, but the numeric value is always
+ * rendered too, so the state is never conveyed by colour alone.
+ */
+declare const Meter: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    low: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    high: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    inverted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    showValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formatValue: {
+        type: PropType<(value: number) => string>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    low: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    high: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    inverted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    showValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formatValue: {
+        type: PropType<(value: number) => string>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    high: number;
+    low: number;
+    max: number;
+    min: number;
+    showValue: boolean;
+    formatValue: (value: number) => string;
+    inverted: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Avatar, AvatarGroup, type AvatarProps, Badge, type BadgeTone, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockProps, type Column, DataTable, type DataTableProps, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, Kbd, Meter, type MeterProps, Pagination, type PaginationProps, Progress, type ProgressProps, type SortDirection, type SortState, Stat, type StatProps, Table, Timeline, type TimelineItem };