@ansh-ui/react 0.2.0

package/dist/data.d.cts

@@ -0,0 +1,316 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+/**
+ * Tables.
+ *
+ * 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.
+ */
+type SortDirection = 'asc' | 'desc';
+interface SortState {
+    columnId: string;
+    direction: SortDirection;
+}
+interface Column<T> {
+    id: string;
+    header: ReactNode;
+    /** Render the cell. Receives the row and its index. */
+    cell: (row: T, index: number) => ReactNode;
+    /** 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;
+    selected?: readonly string[];
+    onSelectedChange?: (ids: readonly string[]) => void;
+    sort?: SortState | null;
+    defaultSort?: SortState | null;
+    onSortChange?: (sort: SortState | null) => void;
+    /** Rows per page. Omit to render everything. */
+    pageSize?: number;
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Show skeleton rows. */
+    loading?: boolean;
+    /** Rendered in place of the body when there are no rows. */
+    emptyState?: ReactNode;
+    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;
+    className?: string;
+    /** Per-row extra class, for status highlighting. */
+    rowClassName?: (row: T) => string | undefined;
+}
+declare function DataTable<T>({ data, columns, getRowId, caption, selectable, selected, onSelectedChange, sort, defaultSort, onSortChange, pageSize, page, onPageChange, loading, emptyState, onRowClick, stickyHeader, density, striped, className, rowClassName, }: DataTableProps<T>): react.JSX.Element;
+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;
+    className?: string;
+}
+/**
+ * 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.
+ */
+declare function Pagination({ page, pageCount, onPageChange, total, pageSize, siblings, className, }: PaginationProps): react.JSX.Element;
+/** A plain styled table, for content that isn't driven by data props. */
+declare function Table({ caption, density, striped, className, children, }: {
+    caption?: string;
+    density?: 'comfortable' | 'compact';
+    striped?: boolean;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+/**
+ * Small display components.
+ *
+ * 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';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    variant?: 'soft' | 'solid' | 'outline';
+    size?: 'sm' | 'md';
+    /** Leading dot. Useful for statuses where the label is short. */
+    dot?: boolean;
+    icon?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * 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.
+ */
+declare function Badge({ tone, variant, size, dot, icon, className, children, ...rest }: BadgeProps): react.JSX.Element;
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    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';
+}
+declare function Avatar({ src, name, size, shape, status, className, ...rest }: AvatarProps): react.JSX.Element;
+interface AvatarGroupProps {
+    /** Maximum shown before collapsing into a "+N" chip. Default `4`. */
+    max?: number;
+    size?: AvatarProps['size'];
+    className?: string;
+    children: ReactNode;
+}
+/** Overlapping avatars with an overflow count. */
+declare function AvatarGroup({ max, size, className, children }: AvatarGroupProps): react.JSX.Element;
+/**
+ * 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".
+ */
+declare function Kbd({ children, className }: {
+    children: string;
+    className?: string;
+}): react.JSX.Element;
+interface StatProps {
+    label: ReactNode;
+    value: ReactNode;
+    /** 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?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+}
+/**
+ * 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 function Stat({ label, value, delta, deltaLabel, invertDelta, hint, icon, className, }: StatProps): react.JSX.Element;
+interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** The action that resolves the emptiness — "Create your first invoice". */
+    action?: ReactNode;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * 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 function EmptyState({ title, description, icon, action, size, className, }: EmptyStateProps): react.JSX.Element;
+interface DescriptionListProps {
+    items: ReadonlyArray<{
+        term: ReactNode;
+        description: ReactNode;
+    }>;
+    /** Side-by-side rather than stacked. Default `'horizontal'` on wide screens. */
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+/**
+ * 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 function DescriptionList({ items, orientation, className, }: DescriptionListProps): react.JSX.Element;
+interface TimelineItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Rendered as-is; pass an already-formatted string or a `<time>` element. */
+    timestamp?: ReactNode;
+    icon?: ReactNode;
+    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 function Timeline({ items, className, }: {
+    items: readonly TimelineItem[];
+    className?: string;
+}): react.JSX.Element;
+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;
+    className?: string;
+}
+/**
+ * A code block with a copy button.
+ *
+ * No syntax highlighter. Shipping one means a tokeniser and a theme in the bundle of every app that
+ * displays a snippet — for a component library, that cost lands on consumers who may never render
+ * code at all. Highlighting is better done at build time, or with a highlighter the app already has.
+ */
+declare function CodeBlock({ code, language, copyable, lineNumbers, filename, className, }: CodeBlockProps): react.JSX.Element;
+
+/**
+ * Progress indicators.
+ *
+ * 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;
+    className?: string;
+}
+declare function Progress({ value, max, size, tone, label, showLabel, formatValue, className, }: ProgressProps): react.JSX.Element;
+interface CircularProgressProps extends Omit<ProgressProps, 'size'> {
+    /** Diameter in px. Default `48`. */
+    size?: number;
+    /** Ring thickness in px. Default `4`. */
+    thickness?: number;
+    /** Content in the middle — usually the percentage. */
+    children?: ReactNode;
+}
+/**
+ * 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.
+ */
+declare function CircularProgress({ value, max, size, thickness, tone, label, formatValue, className, children, }: CircularProgressProps): react.JSX.Element;
+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;
+    className?: 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 function Meter({ value, min, max, low, high, inverted, label, showValue, formatValue, className, }: MeterProps): react.JSX.Element;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, 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 };

package/dist/data.d.ts

@@ -0,0 +1,316 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+/**
+ * Tables.
+ *
+ * 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.
+ */
+type SortDirection = 'asc' | 'desc';
+interface SortState {
+    columnId: string;
+    direction: SortDirection;
+}
+interface Column<T> {
+    id: string;
+    header: ReactNode;
+    /** Render the cell. Receives the row and its index. */
+    cell: (row: T, index: number) => ReactNode;
+    /** 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;
+    selected?: readonly string[];
+    onSelectedChange?: (ids: readonly string[]) => void;
+    sort?: SortState | null;
+    defaultSort?: SortState | null;
+    onSortChange?: (sort: SortState | null) => void;
+    /** Rows per page. Omit to render everything. */
+    pageSize?: number;
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Show skeleton rows. */
+    loading?: boolean;
+    /** Rendered in place of the body when there are no rows. */
+    emptyState?: ReactNode;
+    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;
+    className?: string;
+    /** Per-row extra class, for status highlighting. */
+    rowClassName?: (row: T) => string | undefined;
+}
+declare function DataTable<T>({ data, columns, getRowId, caption, selectable, selected, onSelectedChange, sort, defaultSort, onSortChange, pageSize, page, onPageChange, loading, emptyState, onRowClick, stickyHeader, density, striped, className, rowClassName, }: DataTableProps<T>): react.JSX.Element;
+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;
+    className?: string;
+}
+/**
+ * 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.
+ */
+declare function Pagination({ page, pageCount, onPageChange, total, pageSize, siblings, className, }: PaginationProps): react.JSX.Element;
+/** A plain styled table, for content that isn't driven by data props. */
+declare function Table({ caption, density, striped, className, children, }: {
+    caption?: string;
+    density?: 'comfortable' | 'compact';
+    striped?: boolean;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+/**
+ * Small display components.
+ *
+ * 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';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    variant?: 'soft' | 'solid' | 'outline';
+    size?: 'sm' | 'md';
+    /** Leading dot. Useful for statuses where the label is short. */
+    dot?: boolean;
+    icon?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * 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.
+ */
+declare function Badge({ tone, variant, size, dot, icon, className, children, ...rest }: BadgeProps): react.JSX.Element;
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    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';
+}
+declare function Avatar({ src, name, size, shape, status, className, ...rest }: AvatarProps): react.JSX.Element;
+interface AvatarGroupProps {
+    /** Maximum shown before collapsing into a "+N" chip. Default `4`. */
+    max?: number;
+    size?: AvatarProps['size'];
+    className?: string;
+    children: ReactNode;
+}
+/** Overlapping avatars with an overflow count. */
+declare function AvatarGroup({ max, size, className, children }: AvatarGroupProps): react.JSX.Element;
+/**
+ * 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".
+ */
+declare function Kbd({ children, className }: {
+    children: string;
+    className?: string;
+}): react.JSX.Element;
+interface StatProps {
+    label: ReactNode;
+    value: ReactNode;
+    /** 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?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+}
+/**
+ * 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 function Stat({ label, value, delta, deltaLabel, invertDelta, hint, icon, className, }: StatProps): react.JSX.Element;
+interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** The action that resolves the emptiness — "Create your first invoice". */
+    action?: ReactNode;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * 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 function EmptyState({ title, description, icon, action, size, className, }: EmptyStateProps): react.JSX.Element;
+interface DescriptionListProps {
+    items: ReadonlyArray<{
+        term: ReactNode;
+        description: ReactNode;
+    }>;
+    /** Side-by-side rather than stacked. Default `'horizontal'` on wide screens. */
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+/**
+ * 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 function DescriptionList({ items, orientation, className, }: DescriptionListProps): react.JSX.Element;
+interface TimelineItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Rendered as-is; pass an already-formatted string or a `<time>` element. */
+    timestamp?: ReactNode;
+    icon?: ReactNode;
+    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 function Timeline({ items, className, }: {
+    items: readonly TimelineItem[];
+    className?: string;
+}): react.JSX.Element;
+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;
+    className?: string;
+}
+/**
+ * A code block with a copy button.
+ *
+ * No syntax highlighter. Shipping one means a tokeniser and a theme in the bundle of every app that
+ * displays a snippet — for a component library, that cost lands on consumers who may never render
+ * code at all. Highlighting is better done at build time, or with a highlighter the app already has.
+ */
+declare function CodeBlock({ code, language, copyable, lineNumbers, filename, className, }: CodeBlockProps): react.JSX.Element;
+
+/**
+ * Progress indicators.
+ *
+ * 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;
+    className?: string;
+}
+declare function Progress({ value, max, size, tone, label, showLabel, formatValue, className, }: ProgressProps): react.JSX.Element;
+interface CircularProgressProps extends Omit<ProgressProps, 'size'> {
+    /** Diameter in px. Default `48`. */
+    size?: number;
+    /** Ring thickness in px. Default `4`. */
+    thickness?: number;
+    /** Content in the middle — usually the percentage. */
+    children?: ReactNode;
+}
+/**
+ * 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.
+ */
+declare function CircularProgress({ value, max, size, thickness, tone, label, formatValue, className, children, }: CircularProgressProps): react.JSX.Element;
+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;
+    className?: 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 function Meter({ value, min, max, low, high, inverted, label, showValue, formatValue, className, }: MeterProps): react.JSX.Element;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, 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 };

package/dist/data.js

@@ -0,0 +1,6 @@
+'use client';
+export { Avatar, AvatarGroup, Badge, CircularProgress, CodeBlock, DataTable, DescriptionList, EmptyState, Kbd, Meter, Pagination, Progress, Stat, Table, Timeline } from './chunk-HPGCILO4.js';
+import './chunk-LXCIXR5T.js';
+import './chunk-H34OXXJU.js';
+//# sourceMappingURL=data.js.map
+//# sourceMappingURL=data.js.map

package/dist/data.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"data.js"}