@lettuceai/crisp 1.0.0

package/dist/components/Menu.d.ts

@@ -0,0 +1,34 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface MenuProps {
+    children: ReactNode;
+}
+/**
+ * Dropdown menu. Compose: <Menu><MenuTrigger>…</MenuTrigger><MenuContent>…</MenuContent></Menu>
+ * Anchored to the trigger; use Sheet on touch when the list is long.
+ */
+export declare function Menu({ children }: MenuProps): import("react").JSX.Element;
+export declare function MenuTrigger({ children }: {
+    children: ReactElement<Record<string, unknown>>;
+}): ReactElement<Record<string, unknown>, string | import("react").JSXElementConstructor<any>>;
+export interface MenuContentProps {
+    align?: "start" | "end";
+    side?: "bottom" | "top";
+    className?: string;
+    children: ReactNode;
+}
+export declare function MenuContent({ align, side, className, children }: MenuContentProps): import("react").JSX.Element;
+export interface MenuItemProps {
+    icon?: ReactNode;
+    shortcut?: string;
+    /** Paint it as destructive. */
+    danger?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    onSelect?: () => void;
+    children: ReactNode;
+}
+export declare function MenuItem({ icon, shortcut, danger, disabled, selected, onSelect, children }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuSeparator(): import("react").JSX.Element;
+export declare function MenuLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Message.d.ts

@@ -0,0 +1,76 @@
+import { type ReactNode } from "react";
+export type MessageRole = "user" | "assistant" | "scene" | "system";
+export type MessageState = "idle" | "streaming" | "typing";
+/** User-facing chat appearance settings. Mirrors what the app already exposes. */
+export interface MessageAppearance {
+    fontSize?: "small" | "medium" | "large" | "xlarge";
+    lineSpacing?: "tight" | "normal" | "relaxed";
+    radius?: "sharp" | "rounded" | "pill";
+    maxWidth?: "compact" | "normal" | "wide";
+    padding?: "compact" | "normal" | "spacious";
+    /** `filled` is a tinted bubble, `bordered` adds a hairline, `minimal` drops the bubble entirely. */
+    style?: "filled" | "bordered" | "minimal";
+    avatar?: "circle" | "rounded" | "hidden";
+    avatarSize?: "small" | "medium" | "large";
+    /** Where the byline sits. `below` puts it under the bubble with the timestamp. */
+    headerPlacement?: "below" | "outside" | "inside";
+}
+export interface MessageVariants {
+    index: number;
+    total: number;
+    onPrev: () => void;
+    onNext: () => void;
+}
+export interface MessageProps {
+    role: MessageRole;
+    children?: ReactNode;
+    author?: {
+        name: string;
+        avatar?: string | null;
+    };
+    timestamp?: string;
+    state?: MessageState;
+    /** The model's visible reasoning, collapsed by default. */
+    reasoning?: {
+        text: ReactNode;
+        label?: string;
+    };
+    /** Images and files sent with the message. */
+    attachments?: ReactNode;
+    /** Regeneration variants. Swipe the bubble sideways to move between them. */
+    variants?: MessageVariants;
+    /**
+     * Where this message sits in a run from the same author.
+     * The avatar is drawn once at the top of the run, the byline once at the bottom —
+     * so a three-message reply reads as one block instead of three headed cards.
+     */
+    group?: "only" | "start" | "middle" | "end";
+    pinned?: boolean;
+    /**
+     * Everything a person can do to this message, shown in a bottom menu on long-press
+     * or right-click. It is the only path, so it is the same path on every platform —
+     * no row of icons that a phone can never reveal.
+     */
+    menu?: ReactNode;
+    /** Title for that menu. */
+    menuTitle?: ReactNode;
+    /**
+     * Take the gesture instead of the menu: long-press and right-click call this, and the
+     * message draws no sheet of its own. For a screen that keeps one menu for every
+     * message — richer than a list of rows, and closed from the screen's own state.
+     * Pair with `held` so the bubble shows which message it is for.
+     */
+    onMenu?: () => void;
+    /** Force the held look — for a menu you control yourself. */
+    held?: boolean;
+    appearance?: MessageAppearance;
+    className?: string;
+}
+export declare function Message({ role, children, author, timestamp, state, reasoning, attachments, variants, group, pinned, held, menu, menuTitle, onMenu, appearance, className, }: MessageProps): import("react").JSX.Element;
+export declare function TypingDots({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Date separator between days of conversation. */
+export declare function MessageDivider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Meter.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export interface MeterProps {
+    value: number;
+    max?: number;
+    label?: ReactNode;
+    /** Right of the label — "12.4k / 128k". */
+    valueLabel?: ReactNode;
+    /** Fractions where the bar changes tone. Default warns at 0.75, alarms at 0.9. */
+    thresholds?: {
+        warning: number;
+        danger: number;
+    };
+    size?: "sm" | "md";
+    className?: string;
+}
+/**
+ * A budget you are spending: context window, token allowance, disk quota.
+ * Progress says "how far along"; a Meter says "how much is left" and turns as it fills.
+ */
+export declare function Meter({ value, max, label, valueLabel, thresholds, size, className, }: MeterProps): import("react").JSX.Element;

package/dist/components/ModelSelect.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+export interface ModelOption {
+    id: string;
+    name: string;
+    /** Who runs it — the group heading. */
+    provider: string;
+    /** Runs on this device. */
+    local?: boolean;
+    vision?: boolean;
+    audio?: boolean;
+    /** Small text after the name — a size, a price. */
+    meta?: string;
+}
+export interface ModelSelectProps {
+    models: readonly ModelOption[];
+    value: string | null;
+    onChange: (id: string | null) => void;
+    /** Shown when nothing is picked. Default "Choose a model". */
+    placeholder?: string;
+    /** Which one the app falls back to; drawn as "Default" in the list. */
+    defaultId?: string | null;
+    /** A row at the end — "Add a model…". */
+    footer?: ReactNode;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * Picking a model, grouped by who runs it, with what it can do on the row. A menu on
+ * the desktop; the bottom menu on the phone, where a dropdown would be a thumb's
+ * width. The chat header, a character's settings and the default-model setting all
+ * ask the same question.
+ */
+export declare function ModelSelect({ models, value, onChange, placeholder, defaultId, footer, disabled, id, className, ...aria }: ModelSelectProps): import("react").JSX.Element;

package/dist/components/MultiItemDownloadCard.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { type DownloadStatus } from "./DownloadItem";
+export interface DownloadGroupItem {
+    id: string;
+    name: string;
+    detail?: ReactNode;
+    status: DownloadStatus;
+    /** 0–1. */
+    progress?: number;
+    /** Bytes. Needed for an honest overall percentage. */
+    size?: number;
+    speed?: number;
+    eta?: number;
+    error?: string;
+}
+export interface MultiItemDownloadCardProps {
+    title: string;
+    detail?: ReactNode;
+    items: readonly DownloadGroupItem[];
+    onPauseAll?: () => void;
+    onResumeAll?: () => void;
+    onCancelAll?: () => void;
+    onItemPause?: (id: string) => void;
+    onItemResume?: (id: string) => void;
+    onItemCancel?: (id: string) => void;
+    onItemRetry?: (id: string) => void;
+    defaultExpanded?: boolean;
+    className?: string;
+}
+/**
+ * One download made of several files — a model with its shards, tokenizer and config;
+ * a voice pack; an image-generation bundle. The parts are what actually transfer, but
+ * the bundle is what a person chose, so the card reports the bundle and keeps the parts
+ * a disclosure away.
+ *
+ * The overall figure is weighted by file size, not a mean of percentages: a 16 GB shard
+ * at 10% and a 2 KB config at 100% is not "55% done".
+ */
+export declare function MultiItemDownloadCard({ title, detail, items, onPauseAll, onResumeAll, onCancelAll, onItemPause, onItemResume, onItemCancel, onItemRetry, defaultExpanded, className, }: MultiItemDownloadCardProps): import("react").JSX.Element;

package/dist/components/NavRail.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+import type { NavProps } from "./nav";
+export interface NavRailProps<T extends string> extends NavProps<T> {
+    side?: "left" | "right";
+    /** `rail` is a 64px icon column; `sidebar` is 224px with labels. */
+    variant?: "rail" | "sidebar";
+    /** Detach from the edge and float as a rounded pill column. */
+    floating?: boolean;
+    align?: "start" | "center" | "end";
+    /**
+     * Content between the destinations and the footer — the recent chats, on a desktop.
+     * It takes the leftover height and scrolls on its own, so the destinations and the
+     * footer never move.
+     */
+    section?: ReactNode;
+    /** Show a button that switches between the labelled sidebar and the icon rail. */
+    onToggle?: () => void;
+}
+/** Whether the side navigation this sits in is open — for content passed as `section`. */
+export declare function useNavExpanded(): boolean;
+/**
+ * A label that is uncovered rather than moved. It never wraps — a line breaking while
+ * the width changes is exactly the shift to avoid — and it fades on the way out at once,
+ * and on the way in only once there is room for it.
+ */
+export declare function NavLabel({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Desktop navigation: an icon rail, or a labelled sidebar — the same element either
+ * way. Folding and unfolding animates the width and nothing else. Icons sit in one
+ * fixed slot in both states, so they never move; labels are revealed by the width, not
+ * laid out again; the section and the footer keep their rows. What changes is how much
+ * of each row you can see.
+ */
+export declare function NavRail<T extends string>(props: NavRailProps<T>): import("react").JSX.Element;

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,19 @@
+export interface NumberInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Decimal places to display. Inferred from `step` when omitted. */
+    precision?: number;
+    /** Shown after the number — "tokens", "×", "s". */
+    suffix?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+/**
+ * A number field with real steppers. Arrow keys step, Shift+Arrow steps by ten,
+ * and the value is clamped on commit rather than silently accepting nonsense.
+ */
+export declare function NumberInput({ value, onChange, min, max, step, precision, suffix, disabled, id, className, }: NumberInputProps): import("react").JSX.Element;

package/dist/components/Page.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, Ref } from "react";
+import { type AppBarProps } from "./AppBar";
+export interface PageProps extends AppBarProps {
+    /** Pinned under the content — an ActionBar, a composer. */
+    footer?: ReactNode;
+    /** The scrolling element, for AppBar's condensing title and scroll-to-top. */
+    mainRef?: Ref<HTMLElement>;
+    /** Padding around the content. `none` for lists that run edge to edge. */
+    padding?: "default" | "none";
+    contentClassName?: string;
+    children: ReactNode;
+}
+/**
+ * A screen of its own: the header, a scrolling body and, if there is one, a footer
+ * that stays put. On the desktop it sits inside AppShell like any page; on the phone
+ * it takes the whole screen — a sub-page has the back arrow, not the tab bar.
+ */
+export declare function Page({ footer, mainRef, padding, contentClassName, className, children, ...bar }: PageProps): import("react").JSX.Element;

package/dist/components/Pagination.d.ts

@@ -0,0 +1,10 @@
+export interface PaginationProps {
+    page: number;
+    pageCount: number;
+    onChange: (page: number) => void;
+    /** How many numbers to show around the current page. */
+    siblings?: number;
+    className?: string;
+}
+/** Numbered paging, for lists where "load more" loses your place — logs, search results. */
+export declare function Pagination({ page, pageCount, onChange, siblings, className }: PaginationProps): import("react").JSX.Element | null;

package/dist/components/Panel.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type PanelTone = "neutral" | "subtle" | "accent" | "info" | "warning" | "danger" | "secondary";
+export interface PanelProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    tone?: PanelTone;
+    /** Right of the title — a switch, a badge, a link. */
+    action?: ReactNode;
+    /** Raise contrast for use over a photo or gradient. */
+    onSurface?: boolean;
+    children?: ReactNode;
+}
+/**
+ * A titled container with a tone. Alert is a notice you read and dismiss; Panel is a
+ * region you put things in — the chat widgets, a grouped set of settings, a callout
+ * with controls inside.
+ */
+export declare function Panel({ title, description, tone, action, onSurface, className, children, ...rest }: PanelProps): import("react").JSX.Element;

package/dist/components/PartitionBar.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export type PartitionTone = "accent" | "info" | "secondary" | "warning" | "danger" | "neutral";
+export interface Partition {
+    id: string;
+    label: ReactNode;
+    value: number;
+    /** A semantic tone, or any CSS colour when the segment stands for something with its own. */
+    tone?: PartitionTone;
+    color?: string;
+}
+export interface PartitionBarProps {
+    segments: readonly Partition[];
+    /** Denominator. Defaults to the sum, making the bar a share-of-total. */
+    total?: number;
+    /** Format each value — bytes, tokens, a currency. Percentages by default. */
+    format?: (value: number, share: number) => string;
+    /** `below` labels each segment under the bar; `legend` wraps them into rows. */
+    labels?: "below" | "legend" | "none";
+    /**
+     * Under this share, a label is narrower than its own word. `below` falls back to
+     * `legend` for the whole row rather than truncating some labels and not others.
+     */
+    minLabelShare?: number;
+    size?: "sm" | "md" | "lg";
+    /** Leave the unused remainder visible as an empty track. */
+    showRemainder?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * A bar split into named parts: where storage went, which providers answered, how a
+ * context window is spent. Progress answers "how far"; a Meter answers "how much is
+ * left"; this answers "of what it is made".
+ *
+ * Segments are separated by a real gap rather than a border, so two adjacent colours
+ * never read as one — and each keeps its own rounded ends, which is what makes the
+ * parts legible at 6px tall.
+ */
+export declare function PartitionBar({ segments, total, format, labels, minLabelShare, size, showRemainder, className, ...aria }: PartitionBarProps): import("react").JSX.Element;

package/dist/components/Popover.d.ts

@@ -0,0 +1,45 @@
+import { type ReactElement, type ReactNode } from "react";
+export type PopoverSide = "top" | "bottom" | "left" | "right";
+export type PopoverAlign = "start" | "center" | "end";
+export interface PopoverProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * An anchored floating panel, portalled to the body so it is never clipped by an
+ * ancestor's overflow — which is why the app's own pickers live inside their scroll
+ * containers and get cut off. Combobox, DatePicker, ColorPicker and HoverCard build on it.
+ */
+export declare function Popover({ open: openProp, onOpenChange, children }: PopoverProps): import("react").JSX.Element;
+export declare function PopoverTrigger({ children }: {
+    children: ReactElement<Record<string, unknown>>;
+}): ReactElement<Record<string, unknown>, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The element the panel points at, when opening it is not that element's job — a
+ * hover card, or anything that opens on its own. Same anchoring, no click handler.
+ */
+export declare function PopoverAnchor({ children }: {
+    children: ReactElement<Record<string, unknown>>;
+}): ReactElement<Record<string, unknown>, string | import("react").JSXElementConstructor<any>>;
+/** Anchors to the trigger and flips to the other side when it would leave the viewport. */
+export declare function usePopoverPosition(anchorRef: React.MutableRefObject<HTMLElement | null>, panelRef: React.RefObject<HTMLElement | null>, { open, side, align, offset }: {
+    open: boolean;
+    side: PopoverSide;
+    align: PopoverAlign;
+    offset: number;
+}): {
+    top: number;
+    left: number;
+    minWidth?: number;
+};
+export interface PopoverContentProps {
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    offset?: number;
+    /** Stretch to the trigger's width — what a select-style dropdown wants. */
+    matchWidth?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare function PopoverContent({ side, align, offset, matchWidth, className, children }: PopoverContentProps): import("react").ReactPortal;

package/dist/components/Progress.d.ts

@@ -0,0 +1,9 @@
+export interface ProgressProps {
+    /** 0–100. Omit for indeterminate. */
+    value?: number;
+    size?: "sm" | "md";
+    tone?: "accent" | "info" | "warning" | "danger";
+    label?: string;
+    className?: string;
+}
+export declare function Progress({ value, size, tone, label, className }: ProgressProps): import("react").JSX.Element;

package/dist/components/Prose.d.ts

@@ -0,0 +1,13 @@
+export interface ProseProps {
+    children: string;
+    /** Message body vs. a full document (README, changelog). */
+    size?: "sm" | "md";
+    className?: string;
+}
+/**
+ * Markdown on our type scale. Replaces the app's MarkdownRenderer, HfReadmeRenderer and
+ * the ~90 lines of `.hf-html-block` CSS in App.css — three renderers with three scales.
+ *
+ * Raw HTML is not enabled: character definitions and remote READMEs are untrusted text.
+ */
+export declare function Prose({ children, size, className }: ProseProps): import("react").JSX.Element;

package/dist/components/Radio.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export interface RadioGroupProps<T extends string> {
+    value: T;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    orientation?: "vertical" | "horizontal";
+    "aria-label"?: string;
+    className?: string;
+    children: ReactNode;
+}
+export declare function RadioGroup<T extends string>({ value, onChange, disabled, orientation, className, children, ...aria }: RadioGroupProps<T>): import("react").JSX.Element;
+export interface RadioProps {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+/** Uses a real <input type="radio"> so arrow-key group navigation comes from the browser. */
+export declare function Radio({ value, label, description, disabled }: RadioProps): import("react").JSX.Element;

package/dist/components/ReorderableList.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export interface ReorderableListProps<T> {
+    items: readonly T[];
+    onReorder: (items: T[]) => void;
+    keyOf: (item: T) => string;
+    /** Draw one item. `handle` is the grab handle; put it where the row wants it. */
+    children: (item: T, handle: ReactNode, index: number) => ReactNode;
+    /** `y` (default) stacks; `x` lays the items in a row. */
+    axis?: "x" | "y";
+    /** Only the handle starts a drag. Off, the whole row does. Default on. */
+    handleOnly?: boolean;
+    "aria-label": string;
+    className?: string;
+    itemClassName?: string;
+}
+/**
+ * A list whose order is the point: lorebook entries, starting scenes, widgets.
+ * Drag by the handle (or the row), or focus the handle and press Alt+↑/↓. The item
+ * being dragged lifts; the others slide out of its way.
+ */
+export declare function ReorderableList<T>({ items, onReorder, keyOf, children, axis, handleOnly, className, itemClassName, ...aria }: ReorderableListProps<T>): import("react").JSX.Element;

package/dist/components/Resizable.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+export interface ResizableProps {
+    /** Fixed-size pane. */
+    panel: ReactNode;
+    /** Fills whatever is left. */
+    children: ReactNode;
+    side?: "left" | "right";
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    /** Persisted key, so a person's split survives a reload. */
+    storageKey?: string;
+    className?: string;
+}
+/**
+ * A draggable split, for desktop screens that pair a list with an inspector — the
+ * lorebook trigger preview does this with a hard-coded width. The handle is a real
+ * separator: arrow keys resize it, so it isn't mouse-only.
+ */
+export declare function Resizable({ panel, children, side, defaultSize, minSize, maxSize, storageKey, className, }: ResizableProps): import("react").JSX.Element;

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+export interface ScrollAreaProps {
+    /** Which way it scrolls. */
+    axis?: "y" | "x";
+    /** Fade the edge that has more content behind it. */
+    fade?: boolean;
+    /** Show a thin scrollbar instead of hiding it. */
+    bar?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A scroll container that says when there is more. The fade is a mask on the content,
+ * not a gradient overlay — an overlay would have to know the parent's background colour,
+ * and over a photo or a gradient it never does.
+ */
+export declare function ScrollArea({ axis, fade, bar, className, children }: ScrollAreaProps): import("react").JSX.Element;

package/dist/components/SearchField.d.ts

@@ -0,0 +1,14 @@
+import { type InputHTMLAttributes } from "react";
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type" | "size"> {
+    value: string;
+    onChange: (value: string) => void;
+    loading?: boolean;
+    /** Hint the keyboard shortcut that focuses this field. Hidden once there is text. */
+    shortcut?: string;
+    size?: "sm" | "md";
+}
+/**
+ * Search with a clear button and Escape-to-clear. The app repeats this markup in the
+ * page header, the library, discovery and the model browser.
+ */
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SecretInput.d.ts

@@ -0,0 +1,26 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export type SecretStatus = {
+    state: "idle";
+} | {
+    state: "checking";
+} | {
+    state: "ok";
+    message?: ReactNode;
+} | {
+    state: "error";
+    message: ReactNode;
+};
+export interface SecretInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
+    value: string;
+    onChange: (value: string) => void;
+    /** What a check of the key came back with — drawn under the field. */
+    status?: SecretStatus;
+    /** Offer a paste button (reads the clipboard on tap). Default on. */
+    paste?: boolean;
+}
+/**
+ * An API key or password: masked by default with a reveal toggle, a paste button
+ * where the clipboard is reachable, and room under it for what a connection test
+ * said. One field for onboarding, providers and settings alike.
+ */
+export declare const SecretInput: import("react").ForwardRefExoticComponent<SecretInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Segmented.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export interface SegmentedOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    icon?: ReactNode;
+}
+export interface SegmentedProps<T extends string> {
+    options: readonly SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: "sm" | "md";
+    block?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+export declare function Segmented<T extends string>({ options, value, onChange, size, block, className, ...aria }: SegmentedProps<T>): import("react").JSX.Element;

package/dist/components/Select.d.ts

@@ -0,0 +1,15 @@
+import { type SelectHTMLAttributes } from "react";
+export interface SelectOption<T extends string = string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    options: readonly SelectOption[];
+    placeholder?: string;
+}
+/**
+ * Native select with our surface. On phones this opens the OS picker, which beats any
+ * custom listbox for reach and accessibility. Use Menu for command-style lists.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/components/SelectMenu.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from "react";
+export interface SelectMenuOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** Second line under the label. */
+    description?: string;
+    icon?: ReactNode;
+    /** Right-aligned slot — a badge, a size, a shortcut. */
+    meta?: ReactNode;
+    group?: string;
+    disabled?: boolean;
+}
+interface BaseProps<T extends string> {
+    options: readonly SelectMenuOption<T>[];
+    placeholder?: string;
+    /** Show the chosen option's icon in the closed trigger. Default true. */
+    triggerIcon?: boolean;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    /** Width of the open list. Defaults to the trigger's width. */
+    menuClassName?: string;
+}
+export interface SingleSelectMenuProps<T extends string> extends BaseProps<T> {
+    multiple?: false;
+    value: T | null;
+    onChange: (value: T | null) => void;
+    clearable?: boolean;
+}
+export interface MultiSelectMenuProps<T extends string> extends BaseProps<T> {
+    multiple: true;
+    value: readonly T[];
+    onChange: (value: T[]) => void;
+    /** Collapse to "3 selected" past this many. Default 2. */
+    maxLabels?: number;
+}
+export type SelectMenuProps<T extends string> = SingleSelectMenuProps<T> | MultiSelectMenuProps<T>;
+/**
+ * Our own select. `Select` stays for the plain cases — it opens the OS picker on a
+ * phone, which nothing custom beats for reach. Use this one when the options need
+ * icons, descriptions, groups or multi-select.
+ *
+ * It keeps what a native select gives you for free: typeahead (type "ge" to jump to
+ * Gemma), Home/End, and the listbox pattern with aria-activedescendant, so focus never
+ * leaves the trigger and screen readers announce the active option.
+ */
+export declare function SelectMenu<T extends string>(props: SelectMenuProps<T>): import("react").JSX.Element;
+export {};