@crewlethq/ui 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,1217 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, LabelHTMLAttributes, ReactElement, CSSProperties } from 'react';
+
+type AccordionType = 'single' | 'multiple';
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** 'single' opens one item at a time; 'multiple' allows many. Defaults to 'single'. */
+    type?: AccordionType;
+    /** For type="single": allow closing the open item by activating it again. Defaults to true. */
+    collapsible?: boolean;
+    /** Uncontrolled initial open item(s). */
+    defaultValue?: string | string[];
+    /** Controlled open item(s). */
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+}
+interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Stable identifier for this item, used to track its open state. */
+    value: string;
+    /** The always-visible header content. */
+    title: ReactNode;
+    disabled?: boolean;
+}
+declare const AccordionItem: ({ value, title, disabled, className, children, ...rest }: AccordionItemProps) => react_jsx_runtime.JSX.Element;
+declare const Accordion: (({ type, collapsible, defaultValue, value, onValueChange, className, children, ...rest }: AccordionProps) => react_jsx_runtime.JSX.Element) & {
+    Item: ({ value, title, disabled, className, children, ...rest }: AccordionItemProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Sidebar slot. Rendered first; the slot's own CSS (typically
+     * `position: fixed; left: 0; top: 0; width: 280px`) drives its
+     * placement. AppShell reserves the matching horizontal gutter on
+     * the content column via `sidebarWidth`.
+     */
+    sidebar?: ReactNode;
+    /**
+     * Top bar slot. Rendered next; the slot's own CSS (typically
+     * `position: fixed; top: 0; left: 280px; right: 0`) drives its
+     * placement. AppShell reserves the matching vertical gutter on
+     * the content column via `topbarHeight`.
+     */
+    topbar?: ReactNode;
+    /** Footer slot. Rendered at the bottom of the content column. */
+    footer?: ReactNode;
+    /** Main scrollable content. */
+    children?: ReactNode;
+    /**
+     * Width reserved for a fixed-position sidebar, in pixels. The
+     * content column's left margin is set to this value. Defaults
+     * to 280, wide enough for a labelled navigation rail.
+     */
+    sidebarWidth?: number;
+    /**
+     * Height reserved for a fixed-position topbar, in pixels. The
+     * content column's top padding is set to this value. Defaults
+     * to 64, a single-row topbar.
+     */
+    topbarHeight?: number;
+}
+/**
+ * AppShell composes the three permanent regions of a console app.
+ *
+ * Layout pattern:
+ *   - Sidebar is rendered as the first child; its own CSS is
+ *     responsible for positioning (typically `position: fixed`).
+ *   - Topbar is rendered second; same deal.
+ *   - The Main + Footer column receives `margin-left` and
+ *     `padding-top` set to the sidebar width and topbar height,
+ *     reserving the gutters the fixed slots overlay.
+ *
+ * This passive composition means an existing app can drop its
+ * already-positioned Sidebar / Header into the slots without
+ * changing the Sidebar / Header CSS one line. Future apps that
+ * prefer flex/grid composition can build their own shell on top
+ * of the same slot props.
+ */
+declare const AppShell: ({ sidebar, topbar, footer, children, sidebarWidth, topbarHeight, className, style, ...rest }: AppShellProps) => react_jsx_runtime.JSX.Element;
+
+type AvatarShape = 'circle' | 'square';
+interface AvatarProps extends HTMLAttributes<HTMLElement> {
+    /** Image source. When set, the avatar renders the image; otherwise it falls back to initials. */
+    src?: string | undefined;
+    /** Display name used for the initials fallback and the image alt text. */
+    name?: string | undefined;
+    /** Rendered width and height in pixels. */
+    size?: number | undefined;
+    /** Outline shape: "circle" for a round badge, "square" for rounded corners. Defaults to "circle". */
+    shape?: AvatarShape | undefined;
+    /**
+     * Optional identity seed for the initials fallback. When set (and no image
+     * is shown), the badge background is a stable colour hashed from this value
+     * instead of the plain brand accent, so each identity keeps a distinct,
+     * consistent colour. Has no effect when an image renders.
+     */
+    colorSeed?: string | undefined;
+}
+/**
+ * Derive up to two uppercase initials from a name. Uses the first letter of
+ * the first two words (for example "Carlos Diaz" becomes "CD", "Acme" becomes
+ * "A"). Returns "?" when no usable name is provided.
+ */
+declare const getInitials: (name?: string) => string;
+/**
+ * Avatar, a round identity badge. Renders the supplied image cropped to a
+ * circle, or an initials fallback derived from the name when no image is set.
+ * If the image fails to load (for example a stale CDN URL), it degrades to the
+ * initials fallback.
+ */
+declare const Avatar: ({ src, name, size, shape, colorSeed, className, style, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'tertiary' | 'accent' | 'danger';
+type ButtonSize = 'small' | 'medium' | 'large';
+type ButtonShape = 'square' | 'pill';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    leadingIcon?: ReactNode;
+    /**
+     * When true, render the single child element with the Button's styling
+     * merged onto it instead of rendering a native <button>. Used to apply
+     * Button styling to a <Link> or <a> while keeping their routing or
+     * navigation semantics. Mirrors the Radix `asChild` API.
+     */
+    asChild?: boolean;
+    /**
+     * When true, replace the leading icon with a spinner and disable the
+     * button. The label stays put, so a button does not change width or
+     * lose its meaning mid-action.
+     *
+     * Ignored with `asChild`: a link has no pending state to show and
+     * cannot be disabled.
+     */
+    loading?: boolean;
+}
+declare const Button: ({ variant, size, shape, leadingIcon, className, type, asChild, loading, disabled, children, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
+interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    variant?: CalloutVariant;
+    /** Optional bold lead-in rendered before the message. */
+    title?: ReactNode;
+    /** Optional leading icon (Material symbol, Icon, or any node). */
+    icon?: ReactNode;
+}
+/**
+ * Callout, an inline status banner for page-level feedback: an
+ * unreachable backend, a permission gate, a destructive-action
+ * warning. Sits in the content flow (unlike Toaster, which is for
+ * transient notifications) and stays until the condition clears.
+ */
+declare const Callout: ({ variant, title, icon, className, children, ...rest }: CalloutProps) => react_jsx_runtime.JSX.Element;
+
+type CardVariant = 'default' | 'elevated' | 'outlined' | 'subtle';
+type CardPadding = 'sm' | 'md' | 'lg';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    /** Inner padding preset applied to the root surface (not header/body/footer slots). */
+    padding?: CardPadding;
+    /** Render as an interactive surface (hover state, pointer cursor, focus ring). */
+    interactive?: boolean;
+}
+interface CardSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional padding override; defaults to inherit the Card's surface padding. */
+    padding?: CardPadding;
+}
+interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    as?: 'h2' | 'h3' | 'h4';
+}
+declare const Card: (({ variant, padding, interactive, className, children, ...rest }: CardProps) => react_jsx_runtime.JSX.Element) & {
+    Header: ({ className, children, ...rest }: CardSectionProps) => react_jsx_runtime.JSX.Element;
+    Body: ({ className, children, ...rest }: CardSectionProps) => react_jsx_runtime.JSX.Element;
+    Footer: ({ className, children, ...rest }: CardSectionProps) => react_jsx_runtime.JSX.Element;
+    Title: ({ as: As, className, children, ...rest }: CardTitleProps) => react_jsx_runtime.JSX.Element;
+    Description: ({ className, children, ...rest }: HTMLAttributes<HTMLParagraphElement>) => react_jsx_runtime.JSX.Element;
+};
+
+interface CodeBlockProps {
+    /** The code to display and copy. Trailing newline is trimmed. */
+    code: string;
+    /** Language label shown in the header when no filename is given (also set as a data attribute). */
+    language?: string;
+    /** Optional filename shown on the left of the header. */
+    filename?: string;
+    showLineNumbers?: boolean;
+    /** Render the copy control. Defaults to true. */
+    copyable?: boolean;
+    /** Non-selectable per-line prompt prefix, e.g. "$" for shell commands. */
+    prompt?: string;
+    className?: string;
+}
+/**
+ * CodeBlock, a monospace command or config block. Preserves whitespace,
+ * scrolls horizontally rather than wrapping, and reuses Copyable for a
+ * one-click copy of the full snippet.
+ */
+declare const CodeBlock: ({ code, language, filename, showLineNumbers, copyable, prompt, className, }: CodeBlockProps) => react_jsx_runtime.JSX.Element;
+
+type ContainerSize = 'sm' | 'md' | 'lg' | 'xl';
+interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Max content width. sm 720, md 960, lg 1200, xl 1440 (px). */
+    size?: ContainerSize;
+}
+/**
+ * Container, the centered max-width wrapper that gives every page a
+ * consistent measure and horizontal gutter. Pair with Section for the
+ * vertical rhythm.
+ */
+declare const Container: ({ size, className, children, ...rest }: ContainerProps) => react_jsx_runtime.JSX.Element;
+
+type CopyableVariant = 'chip' | 'inline' | 'block';
+interface CopyableProps {
+    value: string | number | null | undefined;
+    display?: string;
+    variant?: CopyableVariant;
+    monospace?: boolean;
+    truncate?: boolean;
+    truncateLength?: number;
+    ariaLabel?: string;
+    className?: string;
+}
+declare const Copyable: ({ value, display, variant, monospace, truncate, truncateLength, ariaLabel, className, }: CopyableProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * DataTable, a feature-rich table primitive with two visual variants
+ * (default and compact) sharing one data, sort, pagination and
+ * persistence model.
+ *
+ * FEATURES:
+ * - Resizable columns (drag column edges)
+ * - Sortable columns (click headers)
+ * - Column reordering (drag & drop in settings)
+ * - Show/hide columns
+ * - Customizable items per page
+ * - localStorage persistence of all settings
+ * - Custom cell rendering
+ * - Row actions
+ * - Responsive design
+ * - Light/dark theme support
+ *
+ * BASIC USAGE:
+ *
+ *   const columns = {
+ *     name: { label: 'Name', defaultWidth: 150 },
+ *     email: { label: 'Email', defaultWidth: 200 },
+ *     role: { label: 'Role', defaultWidth: 120 }
+ *   };
+ *
+ *   <DataTable
+ *     data={users}
+ *     columns={columns}
+ *     storageKey="userTable"
+ *     onRowAction={(row) => handleDelete(row)}
+ *     getRowKey={(row) => row.id}
+ *   />
+ *
+ * CUSTOM RENDERING:
+ *
+ *   const columns = {
+ *     status: {
+ *       label: 'Status',
+ *       render: (row, value) => (
+ *         <span style={{ color: value === 'active' ? 'green' : 'red' }}>
+ *           {value}
+ *         </span>
+ *       )
+ *     }
+ *   };
+ *
+ * @param {Object} props - Component properties
+ * @param {Array} props.data - Array of data objects to display
+ * @param {Object} props.columns - Column configuration
+ *   Each key is a column ID, value is an object with:
+ *   - label: string (required) - Display name
+ *   - render: function(row, value) - Custom render function
+ *   - sortable: boolean - Enable sorting (default: true)
+ *   - defaultVisible: boolean - Initially visible (default: true)
+ *   - defaultWidth: number - Width in pixels (default: 120)
+ * @param {string} props.storageKey - Unique key for localStorage (required for persistence)
+ * @param {Array} props.defaultColumnOrder - Initial column order (default: Object.keys(columns))
+ * @param {number} props.defaultItemsPerPage - Initial items per page (default: 10)
+ * @param {Array} props.itemsPerPageOptions - Available page size options (default: [5,10,20,50,100])
+ * @param {function} props.onRowAction - Callback for action button (receives row data)
+ * @param {string} props.actionLabel - Action button tooltip (default: 'Delete')
+ * @param {string} props.actionIcon - Material icon name (default: 'delete')
+ * @param {function} props.getRowKey - Get unique row identifier (default: row => row.id)
+ * @param {string} props.emptyMessage - No data message (default: 'No data available')
+ * @param {boolean} props.showActions - Show action column (default: true)
+ * @param {string} props.className - Additional CSS class
+ */
+interface DataTableColumn {
+    label: ReactNode;
+    render?: (row: any, value: any) => ReactNode;
+    sortable?: boolean;
+    defaultVisible?: boolean;
+    defaultWidth?: number;
+    /** Override the value used when sorting this column (defaults to row[key]). */
+    sortValue?: (row: any) => any;
+    /**
+     * Cell alignment. Mostly used in the compact variant for numeric columns
+     * that should hug the right edge.
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Monospace cell content at a smaller font, suitable for opaque ids,
+     * timestamps, and similar fixed-pitch values. Compact variant only.
+     */
+    mono?: boolean;
+    /**
+     * When true, the cell value is wrapped in a hover-revealed copy
+     * affordance. The clipboard value defaults to String(row[key]) but
+     * can be overridden via copyValue. Compact variant only.
+     */
+    copyable?: boolean;
+    copyValue?: (row: any) => any;
+    /**
+     * Fixed pixel-or-string width applied directly to the <th>/<td>. A
+     * column with `width` is locked at exactly that width; `defaultWidth`
+     * is a starting width that resizing and the fit-to-container pass can
+     * change.
+     */
+    width?: string | number;
+    /**
+     * Pin the column to the right edge of the scroll container so it
+     * stays visible regardless of horizontal scroll or how the operator
+     * resizes the surrounding data columns. Typical use is a trailing
+     * row-action link or affordance that must always be reachable
+     * without scrolling. Compact variant only; the default variant
+     * already uses fixed widths that do not overflow.
+     */
+    sticky?: 'right';
+}
+interface DataTableSortState {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+/**
+ * Single action shown in the row-actions kebab menu. `rowActions` returns
+ * a list of these per row; falsy entries are dropped, so a caller can
+ * include an action conditionally with `condition && { ... }`.
+ */
+interface DataTableRowAction {
+    label: string;
+    onClick?: () => void;
+    icon?: string;
+    variant?: 'default' | 'primary' | 'danger';
+    disabled?: boolean;
+    visible?: boolean;
+    description?: string;
+    divider?: 'before' | 'after';
+}
+type DataTableVariant = 'default' | 'compact';
+/**
+ * Row density for the compact variant. The two presets cover the two
+ * places a compact table usually sits:
+ *
+ *   - 'compact'     13px font, 10/12px padding. For full-width list
+ *                   pages where density matters more than air.
+ *   - 'comfortable' 14px font, 12/14px padding with extra outer
+ *                   24px on first/last cells. For tables inside a
+ *                   section card, where the rows have to align with
+ *                   the card's 24px inner padding.
+ *
+ * Has no effect on variant="default" since the default variant uses
+ * its own resizable column widths.
+ */
+type DataTableDensity = 'compact' | 'comfortable';
+interface DataTableProps {
+    data?: any[];
+    columns?: Record<string, DataTableColumn>;
+    storageKey?: string;
+    defaultColumnOrder?: string[] | null;
+    defaultItemsPerPage?: number;
+    itemsPerPageOptions?: number[];
+    /**
+     * Minimum column width, in pixels, that the resize handle will
+     * honor. Operators can drag a column down to this width but no
+     * further; trying to shrink past it pins the column at the floor.
+     * Default 80px, which keeps short labels and the sort indicator
+     * legible without being chatty.
+     */
+    minColumnWidth?: number;
+    /**
+     * Enable the per-column drag-to-resize handle on every header.
+     * Defaults to true. Set to false on tables whose width should be
+     * controlled entirely by the fit-to-container pass (read-mostly
+     * lists, single-purpose tables that should not invite the
+     * operator to reflow the row). When off, no resize handles
+     * render anywhere on the table.
+     */
+    resizable?: boolean;
+    onRowAction?: ((row: any) => void) | null;
+    actionLabel?: string;
+    actionIcon?: string;
+    getRowKey?: (row: any) => string | number;
+    /** Pulls the row key from a fixed property (alternative to getRowKey). */
+    rowKey?: string;
+    emptyMessage?: ReactNode;
+    showActions?: boolean;
+    className?: string;
+    /**
+     * Visual treatment.
+     * - 'default': roomier cells with the settings cog in the Actions
+     *   column header; suited to directory-style tables an operator
+     *   reshapes and revisits.
+     * - 'compact': lighter chrome, tight padding, uppercase headers,
+     *   full-row loading and error states, and the settings cog in the
+     *   toolbar instead of the header row. Designed for dense list pages
+     *   where the table sits inside an external Toolbar + Footer.
+     * Both variants honour `resizable` and `settingsVariant`.
+     */
+    variant?: DataTableVariant;
+    /**
+     * Row density for the compact variant. Defaults to 'compact'.
+     * See the DataTableDensity docs for what each preset paints.
+     */
+    density?: DataTableDensity;
+    /**
+     * Controlled sort state. When provided, the table delegates sort to
+     * the caller (typical pairing: an external sort menu shares state
+     * with the column headers). When omitted, sort is internal.
+     */
+    sort?: DataTableSortState | null;
+    onSortChange?: (next: DataTableSortState | null) => void;
+    /**
+     * Multi-action menu per row. When supplied, an actions column is
+     * appended on the right that renders a kebab popover. Takes precedence
+     * over onRowAction (the single-button affordance).
+     */
+    rowActions?: (row: any) => Array<DataTableRowAction | null | undefined | false>;
+    /** Dim rows the predicate marks as archived, with a left edge accent. */
+    archivedPredicate?: (row: any) => boolean;
+    archivedLabel?: string;
+    /**
+     * Skeleton loading state. While true and no rows are present, the
+     * body renders shimmer bars inside the real table structure (one
+     * bar per visible column) so column alignment, paddings, and row
+     * heights match the data that replaces them, no layout shift when
+     * the fetch lands. Tables that already have rows keep showing them
+     * during a refresh.
+     */
+    loading?: boolean;
+    /** Number of shimmer rows painted while loading. Default 5. */
+    skeletonRows?: number;
+    /** Renders a single full-row error message when truthy. Wins over empty. */
+    error?: ReactNode;
+    /** When false, skip the built-in items-per-page slicing (caller paginates). */
+    paginated?: boolean;
+    /** When false, the settings cog and Actions column header are suppressed. */
+    showSettings?: boolean;
+    /**
+     * Fires when a row's surface is clicked. Used by click-to-detail tables
+     * (an order row opening its detail page, a log entry opening a drawer).
+     * The compact variant also flips the row's cursor to pointer when this
+     * prop is supplied. The row-actions kebab menu stops propagation so
+     * clicking the kebab does not also trigger the row navigation.
+     */
+    onRowClick?: (row: any) => void;
+    /**
+     * Optional secondary row rendered immediately below each main row,
+     * spanning the full column width. Returning null skips it for that
+     * row. Used by tree-like tables (for example API keys grouped under
+     * their owner) where each entity owns an attached detail strip that
+     * visually belongs to the main row but does not share its column
+     * layout.
+     */
+    renderAccessoryRow?: (row: any) => ReactNode | null | undefined;
+    /**
+     * Slot rendered above the table header (and inside the same root
+     * wrapper) for filter bars, search inputs, or batch-action toolbars.
+     * uilet is intentionally agnostic about what goes here, the caller
+     * composes whichever primitives match its domain (Select, Input,
+     * datetime-local, etc.). The slot is rendered exactly once per
+     * mount, regardless of pagination state.
+     */
+    renderToolbar?: ReactNode;
+    /**
+     * Clear-filters affordance for tables whose renderToolbar slot
+     * carries filter controls. When onClearFilters is supplied and
+     * filtersActive is true, a "Clear filters" link button renders at
+     * the end of the filter slot; clicking it fires the callback so
+     * the caller resets its own filter state. The button stays hidden
+     * while filtersActive is false so an untouched toolbar carries no
+     * dead control.
+     */
+    onClearFilters?: () => void;
+    filtersActive?: boolean;
+    /** Label override for the clear-filters button. */
+    clearFiltersLabel?: string;
+    /**
+     * When supplied, each row becomes expandable. Clicking the row (or
+     * its built-in chevron) toggles a detail panel rendered immediately
+     * below the row, spanning the full column width. Returning null
+     * from the function suppresses expansion for that row.
+     *
+     * Mutually exclusive with onRowClick (expansion takes the click);
+     * combine with rowActions freely since the kebab stops propagation.
+     * Single-row expansion only, opening one row closes the previous.
+     */
+    renderExpandedRow?: (row: any) => ReactNode | null | undefined;
+    /** Optional initial expanded row key (resolved via the row-key resolver). */
+    defaultExpandedKey?: string | number | null;
+    /**
+     * Cursor-pagination footer. When hasMore is true, the table renders
+     * a centered "Load more" button below the rows that fires onLoadMore.
+     * The button is disabled while loadingMore is true (label flips to
+     * "Loading…"). When hasMore is false, no footer is rendered; the
+     * terminal "End of feed" state is intentionally silent.
+     *
+     * Independent from the built-in client-side paginated prop: cursor
+     * pagination is server-driven (caller fetches and appends rows),
+     * client pagination slices a fully loaded dataset.
+     */
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    loadingMore?: boolean;
+    loadMoreLabel?: string;
+    /**
+     * Optional table header rendered above the toolbar. The title is the
+     * section name (e.g. "Projects"), the description is a one-line
+     * explanation of what the rows represent, and icon is an optional
+     * Material Symbols glyph name rendered to the left of the title
+     * (the same icon, title and description header a settings card uses). Folding
+     * them into the table primitive lets the entire surface, header +
+     * toolbar + table, share the same card boundary and spacing without
+     * each caller recomposing the `<header><h2/><p/></header>` pattern.
+     *
+     * When a header is present, the table's right-side controls
+     * (pagination chevrons + settings cog) move ONTO the header row so
+     * the section title and the controls share the same line. The
+     * caller-supplied filter slot (renderToolbar) renders on its own
+     * row below the header.
+     */
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: string;
+    /**
+     * Settings modal shape.
+     * - 'compact': page-size radio list + Wrap lines toggle, Cancel/Confirm
+     *   footer. Right for the card-style tables that carry their own
+     *   title + description in the header (clean surface, no filter row).
+     * - 'rich': items-per-page chip row + drag-to-reorder column list +
+     *   per-column visibility checkboxes. Right for tables that surface
+     *   filters in a toolbar and benefit from operator-driven layout
+     *   customisation (activity feeds, audit trails, access token lists).
+     *
+     * Default: when title / description / icon is set, the table uses
+     * the compact modal (card-style); otherwise the rich modal. Pass an
+     * explicit prop to override.
+     */
+    settingsVariant?: 'compact' | 'rich';
+    /**
+     * Initial value for the Wrap lines toggle (compact settings only).
+     * When true, cells wrap their content with overflow-wrap: anywhere.
+     * When false, cells stay on a single line and truncate with an
+     * ellipsis. Persisted under `${storageKey}_wrapLines` when a
+     * storageKey is provided.
+     */
+    defaultWrapLines?: boolean;
+}
+declare const DataTable: ({ data, columns, storageKey, defaultColumnOrder, defaultItemsPerPage, minColumnWidth, resizable, itemsPerPageOptions, onRowAction, actionLabel, actionIcon, getRowKey, rowKey, emptyMessage, showActions, className, variant, density, sort: sortProp, onSortChange, rowActions, archivedPredicate, archivedLabel, loading, skeletonRows, error, paginated, showSettings, onRowClick, renderAccessoryRow, renderToolbar, onClearFilters, filtersActive, clearFiltersLabel, renderExpandedRow, defaultExpandedKey, hasMore, onLoadMore, loadingMore, loadMoreLabel, title, description, icon, settingsVariant, defaultWrapLines, }: DataTableProps) => react_jsx_runtime.JSX.Element;
+
+interface CopyableCellProps {
+    value: string | number | null | undefined;
+    children?: ReactNode;
+    ariaLabel?: string;
+}
+declare const CopyableCell: ({ value, children, ariaLabel }: CopyableCellProps) => react_jsx_runtime.JSX.Element;
+
+interface DateTimePickerProps {
+    /** YYYY-MM-DDTHH:MM (matches <input type="datetime-local">). Empty string when unset. */
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    /** Show the hour / minute inputs below the calendar. Defaults to true. */
+    showTime?: boolean;
+    /** Inclusive lower bound for selectable days, as a YYYY-MM-DD or full datetime-local string. */
+    minDate?: string;
+    /** Inclusive upper bound for selectable days. */
+    maxDate?: string;
+    /**
+     * First day of the week in the calendar grid. 0 = Sunday (US default),
+     * 1 = Monday (ISO 8601). Defaults to 0.
+     */
+    firstDayOfWeek?: 0 | 1;
+    ariaLabel?: string;
+    className?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+}
+declare function DateTimePicker({ value, onChange, placeholder, showTime, minDate, maxDate, firstDayOfWeek, ariaLabel, className, disabled, size, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
+
+type EyebrowVariant = 'muted' | 'accent' | 'gradient';
+type EyebrowElement = 'span' | 'div' | 'p';
+interface EyebrowProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to an inline span. */
+    as?: EyebrowElement;
+    variant?: EyebrowVariant;
+}
+/**
+ * Eyebrow (kicker), the small uppercase label that sits above a section
+ * title to name the section. Monospace and tracked-out by default so it
+ * reads as metadata rather than a heading.
+ */
+declare const Eyebrow: ({ as: As, variant, className, children, ...rest }: EyebrowProps) => react_jsx_runtime.JSX.Element;
+
+type IconButtonSize = 'sm' | 'md';
+type IconButtonVariant = 'ghost' | 'ghost-brand' | 'ghost-danger' | 'soft-brand';
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: IconButtonSize;
+    variant?: IconButtonVariant;
+    /**
+     * Required: icon-only buttons have no visible text label, so screen
+     * readers need the aria-label to know what the button does.
+     */
+    'aria-label': string;
+    /**
+     * Radix-style asChild: render the single child element with IconButton
+     * classes merged in rather than wrapping in a native <button>. Useful
+     * when the underlying control must be a <Link> or <a>.
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+}
+/**
+ * IconButton: small square icon-only affordance. Distinct from
+ * <Button> (the text-CTA primitive); IconButton has no label slot,
+ * fixed-square dimensions (22 or 28 px), and is sized for a single
+ * Material Symbol or equivalent inline SVG inside.
+ *
+ * Typical use: row-action gears, copy icons, drag handles, the
+ * inline "+" / "×" affordances next to form labels.
+ */
+declare const IconButton: ({ size, variant, className, type, asChild, children, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface ImageUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Current image source. When set, the control shows the image and the overlay label reads "Change". */
+    src?: string | undefined;
+    /** Display name used for the initials fallback when no image is set. */
+    name?: string | undefined;
+    /** Rendered width and height in pixels. */
+    size?: number | undefined;
+    /** Outline shape passed through to the preview and fallback. Defaults to "circle". */
+    shape?: AvatarShape | undefined;
+    /** When true, the control is display only: no overlay, no remove button, no file picker. */
+    readOnly?: boolean | undefined;
+    /** When true, the control shows a spinner and ignores interaction while an upload is in flight. */
+    uploading?: boolean | undefined;
+    /** Accepted file types for the hidden file input. Defaults to "image/*". */
+    accept?: string | undefined;
+    /** Called with the raw selected File. The upload happens over the network, so no client-side encoding is performed. */
+    onSelect: (file: File) => void;
+    /** Called when the remove button is pressed. The button only renders when an image is set and the control is editable. */
+    onRemove?: (() => void) | undefined;
+}
+/**
+ * ImageUpload, a click-to-upload affordance built on top of Avatar. Shows the
+ * current image (or an initials fallback), an overlay with a camera icon and
+ * an "Upload" or "Change" label (shown on hover, or always while no image is
+ * set), a hidden file input, a remove button, and an uploading state. One
+ * primitive covers both square logos and round profile pictures.
+ *
+ * The selection callback hands back the raw File rather than a data URL because
+ * the upload now happens over the network.
+ */
+declare const ImageUpload: ({ src, name, size, shape, readOnly, uploading, accept, onSelect, onRemove, className, style, ...rest }: ImageUploadProps) => react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** The label beside the box. Always present: a checkbox without one
+     *  is only meaningful to somebody who can see what it sits next to. */
+    label: ReactNode;
+    /** A second line under the label, for the consequence of ticking it. */
+    description?: ReactNode;
+    /** Marks the choice as one that destroys something. */
+    tone?: 'default' | 'danger';
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type InputSize = 'sm' | 'md';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    inputSize?: InputSize;
+    error?: boolean;
+    containerClassName?: string;
+    /**
+     * Content drawn inside the field at its right edge, such as a keycap
+     * hinting that Enter adds the value. It does not take the pointer, so a
+     * click on it still focuses the field.
+     */
+    trailing?: ReactNode;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+    /**
+     * When true, the textarea height tracks its content. The element's
+     * `overflow` is hidden and the `rows` attribute is ignored.
+     */
+    autoResize?: boolean;
+    /**
+     * Content drawn inside the field at its top right, such as a keycap
+     * hinting that Enter adds the value. It does not take the pointer.
+     */
+    trailing?: ReactNode;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean | undefined;
+    /** Optional action node (button, link) rendered inline next to the label text. */
+    action?: ReactNode;
+}
+declare const Label: ({ required, action, className, children, ...rest }: LabelProps) => react_jsx_runtime.JSX.Element;
+
+interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    label?: ReactNode;
+    required?: boolean;
+    helper?: ReactNode;
+    error?: ReactNode;
+    /** Optional element rendered next to the label (e.g. an "Add" button). */
+    labelAction?: ReactNode;
+    /**
+     * Provide the rendered control as a function so FormField can pipe the
+     * generated id down to the control's `id` (and label's `htmlFor`) without
+     * the caller hand-wiring them.
+     */
+    children: ((ctx: {
+        id: string;
+        describedBy: string | undefined;
+    }) => ReactNode) | ReactNode;
+    htmlFor?: string;
+}
+declare const FormField: ({ label, required, helper, error, labelAction, htmlFor, className, children, ...rest }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+
+interface FormRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of columns at desktop width. Collapses to 1 on small screens. */
+    columns?: 1 | 2 | 3;
+}
+declare const FormRow: ({ columns, className, children, ...rest }: FormRowProps) => react_jsx_runtime.JSX.Element;
+
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** Draws the keycap quieter, for a hint that sits inside a field. */
+    subtle?: boolean | undefined;
+}
+/**
+ * Kbd, a keyboard key drawn as a keycap. Used for shortcut hints and, inside
+ * a field's trailing slot, to tell the operator that a key does something
+ * here: "Enter" beside a field that adds a value to a list, for example.
+ */
+declare const Kbd: ({ subtle, className, children, ...rest }: KbdProps) => react_jsx_runtime.JSX.Element;
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+interface ModalProps {
+    /** Controls visibility. When false the modal renders nothing. */
+    open: boolean;
+    /** Called when the user requests to close (backdrop click, escape, or X). */
+    onClose: () => void;
+    /** Title shown in the header. */
+    title?: ReactNode;
+    /** Optional subtitle line beneath the title. */
+    subtitle?: ReactNode;
+    /** Footer content (typically Cancel / Confirm buttons). */
+    footer?: ReactNode;
+    /** Body content. */
+    children?: ReactNode;
+    /** Max-width preset. Defaults to `sm` (480px). */
+    size?: ModalSize;
+    /** When true (default), clicking the backdrop closes the modal. */
+    closeOnBackdrop?: boolean;
+    /** When false, the close X is hidden. */
+    showCloseButton?: boolean;
+    /** Extra class on the dialog frame. */
+    className?: string;
+    /** ID hooks for label / description (aria-labelledby / aria-describedby). */
+    labelledBy?: string;
+    describedBy?: string;
+}
+declare const Modal: ({ open, onClose, title, subtitle, footer, children, size, closeOnBackdrop, showCloseButton, className, labelledBy, describedBy, }: ModalProps) => react.ReactPortal | null;
+
+interface ConfirmModalProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void | Promise<void>;
+    title: ReactNode;
+    message?: ReactNode;
+    /** Body content shown below the message (extra context, fields, etc.). */
+    children?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    /** When true, the confirm button uses the danger variant. */
+    destructive?: boolean;
+    confirmVariant?: ButtonVariant;
+    /** Disables the confirm button (e.g. while typing a confirmation phrase). */
+    confirmDisabled?: boolean;
+    /** Replaces the confirm label with a loading affordance and disables the modal. */
+    submitting?: boolean;
+    size?: ModalSize;
+}
+declare const ConfirmModal: ({ open, onClose, onConfirm, title, message, children, confirmLabel, cancelLabel, destructive, confirmVariant, confirmDisabled, submitting, size, }: ConfirmModalProps) => react_jsx_runtime.JSX.Element;
+
+type PopoverAlign = 'start' | 'end';
+type PopoverSide = 'top' | 'bottom';
+type PopoverWidth = 'auto' | 'match';
+interface PopoverProps {
+    trigger: (open: boolean, toggle: () => void) => ReactElement;
+    children: ReactNode | ((close: () => void) => ReactNode);
+    align?: PopoverAlign;
+    side?: PopoverSide;
+    width?: PopoverWidth;
+    className?: string;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function Popover({ trigger, children, align, side, width, className, defaultOpen, onOpenChange, }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+type PricingCardTagVariant = 'neutral' | 'top' | 'save' | 'pending';
+/**
+ * PricingCard is the canonical plan-tier card surface. It owns the
+ * outer container (the selected, pending, unavailable and disabled
+ * states, plus the interactive hover), and exposes compound parts
+ * (`PricingCard.Header / Name / Tag / Price / Amount / Cadence /
+ * PriceNote / Body / Footer`) so the caller composes the content.
+ *
+ * The card renders as a `<button>` by default so the entire surface
+ * is clickable in a picker context. Pass `interactive={false}` for
+ * a static display card (a pricing comparison) and the surface
+ * renders as a `<div>` instead.
+ */
+interface PricingCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+    selected?: boolean;
+    pending?: boolean;
+    /**
+     * Soft-disabled: the option is shown but cannot be chosen right now.
+     * Click is suppressed and the interactive card is announced as
+     * disabled through `aria-disabled` while staying focusable, so a
+     * keyboard or screen reader user can still reach it and read why.
+     * State that reason in the card content, since the dimmed surface
+     * alone does not explain it.
+     */
+    unavailable?: boolean;
+    /** Hard disabled. Click is suppressed. */
+    disabled?: boolean;
+    /** When false (default true), render a `<div>` instead of a `<button>`. */
+    interactive?: boolean;
+}
+interface PricingCardRootProps extends PricingCardProps {
+    children?: ReactNode;
+}
+interface TagProps$1 extends HTMLAttributes<HTMLSpanElement> {
+    variant?: PricingCardTagVariant;
+}
+interface AmountProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Strikethrough; used to show the pre-discount price. */
+    strike?: boolean;
+    /** Highlighted with the discounted accent colour. */
+    discounted?: boolean;
+}
+declare const PricingCard: react.ForwardRefExoticComponent<PricingCardRootProps & react.RefAttributes<HTMLButtonElement>> & {
+    Header: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    Name: ({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+    Tag: ({ variant, className, children, ...rest }: TagProps$1) => react_jsx_runtime.JSX.Element;
+    Price: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    Amount: ({ strike, discounted, className, children, ...rest }: AmountProps) => react_jsx_runtime.JSX.Element;
+    Cadence: ({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+    PriceNote: ({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+    Body: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    Footer: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    Grid: ({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+};
+
+type SectionSpacing = 'none' | 'sm' | 'md' | 'lg';
+type SectionElement = 'section' | 'div' | 'header' | 'footer' | 'article';
+interface SectionProps extends HTMLAttributes<HTMLElement> {
+    as?: SectionElement;
+    /** Vertical padding preset. Defaults to md. */
+    spacing?: SectionSpacing;
+}
+/**
+ * Section, a semantic band with token-driven vertical rhythm. It owns the
+ * spacing between page sections; pair with Container for the horizontal
+ * measure. It deliberately ships no scroll-reveal, so consumers keep that
+ * behavior local.
+ */
+declare const Section: ({ as: As, spacing, className, children, ...rest }: SectionProps) => react_jsx_runtime.JSX.Element;
+
+type SelectValue = string | number;
+interface SelectOption {
+    value: SelectValue;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+type SelectSize = 'sm' | 'md';
+type SelectAlign = 'left' | 'right';
+interface SelectProps {
+    id?: string;
+    /**
+     * Currently selected value(s). In single-select mode this is the
+     * option's primitive value; in multi-select mode (multiple={true})
+     * it is an array of selected values.
+     */
+    value: SelectValue | SelectValue[] | undefined;
+    /**
+     * Fired when the user picks (single-select) or toggles (multi-
+     * select) an option. The first argument carries the new resolved
+     * value: a scalar in single-select, an array in multi-select. The
+     * second argument is the option the user clicked, useful when the
+     * caller wants to log which one toggled.
+     */
+    onChange?: (value: SelectValue | SelectValue[], option: SelectOption) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    menuClassName?: string;
+    size?: SelectSize;
+    align?: SelectAlign;
+    renderTrigger?: (option: SelectOption | null, ctx: {
+        open: boolean;
+    }) => ReactNode;
+    renderOption?: (option: SelectOption, ctx: {
+        active: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    ariaLabel?: string;
+    name?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /**
+     * When true, the Select renders as a multi-select. The menu does
+     * not close on pick; the trigger shows the selected count (or the
+     * single label when only one is picked); the option list paints
+     * checked boxes on selected rows. value MUST be an array in this
+     * mode and onChange always receives an array.
+     */
+    multiple?: boolean;
+    /**
+     * Trigger-label override for multi-select. Receives the array of
+     * selected options. Defaults to the count rule below:
+     *   - 0 selected: placeholder
+     *   - 1 selected: the option's label
+     *   - N selected: "N selected"
+     */
+    renderMultiLabel?: (selected: SelectOption[]) => ReactNode;
+}
+declare function Select({ id, value, onChange, options, placeholder, disabled, className, menuClassName, size, align, renderTrigger, renderOption, ariaLabel, name, searchable, searchPlaceholder, multiple, renderMultiLabel, }: SelectProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonVariant = 'box' | 'text' | 'card' | 'grid' | 'list' | 'table' | 'info-grid' | 'pricing-card';
+type SkeletonGlow = 'blue' | 'green' | 'purple' | 'orange' | 'red';
+interface SkeletonProps {
+    variant?: SkeletonVariant;
+    /** Row count for `text`, `grid`, `list`, `table` and `info-grid`. */
+    rows?: number;
+    /** Column count for `table`, and for `grid` and `info-grid` (1 to 4). */
+    columns?: number;
+    /** Card count for `pricing-card`. */
+    count?: number;
+    /** Applied to the root element of every variant. */
+    className?: string;
+    /** Applied to the root element of every variant. */
+    style?: CSSProperties;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    glowColor?: SkeletonGlow;
+    animationDuration?: number;
+}
+/**
+ * Loading placeholder. Every variant renders one root element carrying
+ * `crewlet-skeleton`, a `crewlet-skeleton--<variant>` modifier, and the
+ * caller's `className` and `style`. The placeholder is decorative, so it
+ * is hidden from assistive technology; announce the loading state on the
+ * region that is loading (for example with `aria-busy`).
+ */
+declare const Skeleton: ({ variant, rows, columns, count, className, style, width, height, borderRadius, marginTop, marginBottom, glowColor, animationDuration, }: SkeletonProps) => react_jsx_runtime.JSX.Element;
+
+type StatCardTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Metric label, for example "Total Tokens". */
+    label: ReactNode;
+    /** The headline value, already formatted by the caller. */
+    value: ReactNode;
+    /** Optional secondary line under the label, for example "3 working, 4 idle". */
+    sub?: ReactNode;
+    /** Optional leading icon (Material symbol, Icon, or any node). */
+    icon?: ReactNode;
+    /** Tints the icon and value accent. Defaults to neutral. */
+    tone?: StatCardTone;
+    /** Renders a loading placeholder instead of the value. */
+    loading?: boolean;
+}
+/**
+ * StatCard, a compact key-metric tile for dashboards and rollup
+ * headers: one value, one label, an optional sub-line and icon.
+ */
+declare const StatCard: ({ label, value, sub, icon, tone, loading, className, ...rest }: StatCardProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Reusable Table Component
+ *
+ * @param {Array<string>} headers - Array of column header names
+ * @param {Array<Array<string|ReactNode>>} data - 2D array of table data. Each row is an array of cell values
+ * @param {string} emptyMessage - Message to display when data is empty (default: "No data available")
+ * @param {Object} actionButton - Optional action button config with { label: string, onClick: function }
+ * @param {string} className - Additional CSS classes to apply to the wrapper
+ *
+ * @example
+ * <Table
+ *   headers={['Name', 'Email', 'Role']}
+ *   data={[
+ *     ['John Doe', 'john@example.com', 'Admin'],
+ *     ['Jane Smith', 'jane@example.com', 'User']
+ *   ]}
+ *   emptyMessage="No users found"
+ *   actionButton={{
+ *     label: 'View all users →',
+ *     onClick: () => navigate('/users')
+ *   }}
+ * />
+ */
+interface TableActionButton {
+    label: ReactNode;
+    onClick: () => void;
+}
+interface TableProps {
+    headers: ReactNode[];
+    data: ReactNode[][];
+    emptyMessage?: ReactNode;
+    actionButton?: TableActionButton;
+    className?: string;
+}
+declare const Table: ({ headers, data, emptyMessage, actionButton, className, }: TableProps) => react_jsx_runtime.JSX.Element;
+
+type TabsVariant = 'pill' | 'underline';
+type TabsSize = 'sm' | 'md';
+interface TabsItem {
+    /** Stable identity used to compute the active class. */
+    value: string;
+    /** Visible label text or node. */
+    label: ReactNode;
+    /** Optional Material Symbols icon name. */
+    icon?: string;
+    disabled?: boolean;
+    /** Any extra props the consumer's renderItem needs to read. */
+    [key: string]: unknown;
+}
+interface TabsRenderItemProps {
+    item: TabsItem;
+    /**
+     * Base + state-modifier class for the tab. Apply this to the
+     * element you render so the variant chrome stays consistent.
+     * Already includes the is-active modifier when value + onValueChange
+     * are wired; in router mode the consumer appends its own is-active
+     * (NavLink's isActive callback) since URL-driven activeness is the
+     * source of truth and the primitive re-measures from whichever
+     * child carries .is-active.
+     */
+    className: string;
+    /** True when `value === item.value`. */
+    isActive: boolean;
+    /** Calls onValueChange?.(item.value) when invoked. */
+    onSelect: () => void;
+    /** Pre-rendered icon + label nodes for the tab body. */
+    children: ReactNode;
+}
+interface TabsProps {
+    items: TabsItem[];
+    variant?: TabsVariant;
+    size?: TabsSize;
+    /** Aria-label on the nav element wrapping the strip. */
+    ariaLabel?: string;
+    className?: string;
+    /** Currently active item value (controlled mode). */
+    value?: string;
+    /** Fires when a button-rendered tab is clicked. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Override the per-item element renderer. Receives the item, the
+     * resolved className, an isActive flag, an onSelect handler, and
+     * the icon + label children. Useful for plugging in a router
+     * link (NavLink, Next.js Link) so navigation stays client-side.
+     */
+    renderItem?: (props: TabsRenderItemProps) => ReactNode;
+}
+declare function Tabs({ items, variant, size, ariaLabel, className, value, onValueChange, renderItem, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+type TimeWindowMode = 'relative' | 'absolute';
+type TimeWindowTimezone = 'local' | 'utc';
+interface TimeWindowValue {
+    kind: TimeWindowMode;
+    /** Duration string for relative mode, e.g. '7d', '24h', '15m'. */
+    duration?: string;
+    /** Datetime-local string for absolute mode (YYYY-MM-DDTHH:MM:SS). */
+    from?: string;
+    to?: string;
+    /**
+     * How to interpret the absolute from/to strings when resolving
+     * to ISO 8601: 'local' (default) treats them as the operator's
+     * wall clock; 'utc' treats them as already-UTC. The selection
+     * persists with the value so a saved window round-trips cleanly.
+     */
+    timezone?: TimeWindowTimezone;
+}
+interface TimeWindowPickerProps {
+    value: TimeWindowValue;
+    onChange: (value: TimeWindowValue) => void;
+    /** Suppress the Relative tab. Defaults to true (shown). */
+    allowRelative?: boolean;
+    /** Suppress the Absolute tab. Defaults to true (shown). */
+    allowAbsolute?: boolean;
+    placeholder?: string;
+    ariaLabel?: string;
+    className?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+}
+declare function parseTimeWindowDuration(s: string): number;
+declare function resolveTimeWindow(value: TimeWindowValue): {
+    from: string | undefined;
+    to: string | undefined;
+};
+declare function TimeWindowPicker({ value, onChange, allowRelative, allowAbsolute, placeholder, ariaLabel, className, disabled, size, }: TimeWindowPickerProps): react_jsx_runtime.JSX.Element;
+
+type TagVariant = 'neutral' | 'info' | 'success' | 'warn' | 'danger' | 'brand';
+type TagSize = 'sm' | 'md';
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: TagVariant;
+    size?: TagSize;
+    /** Optional leading icon (Material symbol, Icon, or any node). */
+    leadingIcon?: ReactNode;
+    /** When set, renders a close button that fires this on click. Turns the Tag into a Chip. */
+    onRemove?: (() => void) | undefined;
+    /** ARIA label for the remove button. Defaults to "Remove tag". */
+    removeAriaLabel?: string;
+    /** Force a monospace font, for machine values such as IP addresses and CIDR ranges. */
+    monospace?: boolean;
+}
+declare const Tag: ({ variant, size, leadingIcon, onRemove, removeAriaLabel, monospace, className, children, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
+
+interface TagsInputProps {
+    /** Current list of tag values. */
+    value: string[];
+    /** Called with the next list when add / remove fires. */
+    onChange: (next: string[]) => void;
+    placeholder?: string;
+    /** Variant applied to each rendered Tag. */
+    tagVariant?: TagVariant;
+    /** Monospace flag forwarded to each Tag, for machine values such as IP addresses and CIDR ranges. */
+    monospace?: boolean;
+    /** Keys that submit the current input as a new tag. Defaults to Enter and comma. */
+    submitKeys?: string[];
+    /** Disable input + remove buttons. */
+    disabled?: boolean;
+    className?: string;
+    /** id forwarded to the underlying input (handy for `<label htmlFor>`). */
+    id?: string;
+    /** Reject duplicate values (case-insensitive). Defaults to true. */
+    dedupe?: boolean;
+}
+interface TagsInputHandle {
+    focus: () => void;
+}
+declare const TagsInput: react.ForwardRefExoticComponent<TagsInputProps & react.RefAttributes<TagsInputHandle>>;
+
+type ToastVariant = 'info' | 'success' | 'warn' | 'error';
+interface ToastAction {
+    label: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    /** Open external href in a new tab. */
+    external?: boolean;
+}
+interface Toast<TVariant extends string = string> {
+    /** Stable id used by the consumer to map dismiss requests. */
+    id: string | number;
+    /**
+     * Variant drives the icon and colour family. `info`, `success`, `warn` and
+     * `error` come with a default icon (and, except for `info`, a default
+     * title). Any other string, including `'quota'`, has no default icon or
+     * title, so pass `icon` and `title`, or `renderBody`. `'quota'` (a usage
+     * limit notice) is announced as an alert like `error`, and paints the icon
+     * the caller passes with the brand accent.
+     */
+    variant?: TVariant;
+    title?: ReactNode;
+    message?: ReactNode;
+    /** Milliseconds before auto-dismiss. 0 (or undefined → 0) means sticky. */
+    duration?: number;
+    /** Bump on dedup-replace to restart the progress bar animation. */
+    version?: number;
+    /** Standard inline action button. Can also be passed as a full ReactNode for full control. */
+    action?: ToastAction | ReactNode;
+    /** Optional icon name (Material symbol) or full ReactNode to override the variant icon. */
+    icon?: ReactNode;
+    /** Replace the standard body with a custom renderer, for a toast shape the standard layout does not cover (for example a limit notice with its own action). */
+    renderBody?: (ctx: {
+        onDismiss: () => void;
+        toast: Toast<TVariant>;
+    }) => ReactNode;
+}
+interface ToasterProps<TVariant extends string = string> {
+    toasts: Toast<TVariant>[];
+    onDismiss: (id: string | number) => void;
+    /** Override how an action with `href` renders, for apps that need a router-aware Link. */
+    renderAction?: (action: ToastAction, ctx: {
+        onDismiss: () => void;
+    }) => ReactNode;
+    /** Override the visible position. Defaults to bottom-right. */
+    position?: 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left';
+    className?: string;
+}
+declare const Toaster: <TVariant extends string = string>({ toasts, onDismiss, renderAction, position, className, }: ToasterProps<TVariant>) => react_jsx_runtime.JSX.Element | null;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionType, AppShell, type AppShellProps, Avatar, type AvatarProps, type AvatarShape, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutVariant, Card, type CardPadding, type CardProps, type CardSectionProps, type CardTitleProps, type CardVariant, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, ConfirmModal, type ConfirmModalProps, Container, type ContainerProps, type ContainerSize, Copyable, CopyableCell, type CopyableCellProps, type CopyableProps, type CopyableVariant, DataTable, type DataTableColumn, type DataTableDensity, type DataTableProps, type DataTableRowAction, type DataTableSortState, type DataTableVariant, DateTimePicker, type DateTimePickerProps, Eyebrow, type EyebrowElement, type EyebrowProps, type EyebrowVariant, FormField, type FormFieldProps, FormRow, type FormRowProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, ImageUpload, type ImageUploadProps, Input, type InputProps, type InputSize, Kbd, type KbdProps, Label, type LabelProps, Modal, type ModalProps, type ModalSize, Popover, type PopoverAlign, type PopoverProps, type PopoverSide, type PopoverWidth, PricingCard, type PricingCardProps, type PricingCardTagVariant, Section, type SectionElement, type SectionProps, type SectionSpacing, Select, type SelectAlign, type SelectOption, type SelectProps, type SelectSize, type SelectValue, Skeleton, type SkeletonGlow, type SkeletonProps, type SkeletonVariant, StatCard, type StatCardProps, type StatCardTone, Table, type TableActionButton, type TableProps, Tabs, type TabsItem, type TabsProps, type TabsRenderItemProps, type TabsSize, type TabsVariant, Tag, type TagProps, type TagSize, type TagVariant, TagsInput, type TagsInputHandle, type TagsInputProps, Textarea, type TextareaProps, type TimeWindowMode, TimeWindowPicker, type TimeWindowPickerProps, type TimeWindowValue, type Toast, type ToastAction, type ToastVariant, Toaster, type ToasterProps, getInitials, parseTimeWindowDuration, resolveTimeWindow };