@lettuceai/crisp 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LettuceAI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,130 @@
+<p align="center"><img src=".github/banner.png" alt="Crisp — the design language behind LettuceAI" width="100%"></p>
+
+# Crisp
+
+Crisp is LettuceAI's React component library. It provides application layouts, form controls, navigation, overlays, and media components, with shared design tokens and motion presets.
+
+Components are written in TypeScript and styled with Tailwind CSS v4. Themes support light and dark palettes, custom colors, corner radii, and compact density.
+
+## Install
+
+```sh
+bun add @lettuceai/crisp
+```
+
+Your application must also provide these peer dependencies:
+
+| Package | Required version |
+| --- | --- |
+| `react`, `react-dom` | 19 or later |
+| `tailwindcss` | 4 or later |
+| `framer-motion` | 12 or later |
+| `lucide-react` | 1 or later |
+
+## Setup
+
+Crisp requires a working Tailwind CSS v4 build in your application. Import its stylesheet after Tailwind and include the package in Tailwind's source scanning:
+
+```css
+@import "tailwindcss";
+@import "@lettuceai/crisp/styles.css";
+
+@source "../node_modules/@lettuceai/crisp/dist";
+```
+
+The `@source` path is relative to your stylesheet; the example assumes it lives in `src/`. Crisp supplies tokens and CSS utilities, while your application's Tailwind build generates the component classes.
+
+The stylesheet also sets global typography, page colors, and focus styles. It uses Inter when available, with system font fallbacks; it does not load a font file.
+
+## Usage
+
+Import components from `@lettuceai/crisp`. This example opens a sheet containing a labeled input:
+
+```tsx
+import { useState } from "react";
+import { Button, Field, Input, Sheet, ThemeProvider } from "@lettuceai/crisp";
+
+export function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ThemeProvider>
+      <main className="p-6">
+        <Button variant="primary" onClick={() => setOpen(true)}>
+          Edit profile
+        </Button>
+        <Sheet open={open} onClose={() => setOpen(false)} title="Edit profile">
+          <Field label="Display name">
+            <Input name="displayName" autoComplete="nickname" />
+          </Field>
+        </Sheet>
+      </main>
+    </ThemeProvider>
+  );
+}
+```
+
+For notifications, mount `Toaster` once at the application root and call `toast.success()`, `toast.error()`, or the other toast helpers. To use `await confirm(...)`, mount `ConfirmHost` there as well. Both hosts are optional.
+
+## Components
+
+| Area | Examples |
+| --- | --- |
+| Layout | `Box`, `Stack`, `Flex`, `Grid`, `Container`, `AppShell` |
+| Navigation | `AppBar`, `NavRail`, `TabBar`, `Dock`, `Tabs`, `Breadcrumb` |
+| Forms | `Field`, `Input`, `Select`, `Combobox`, `Checkbox`, `Switch`, `DatePicker` |
+| Overlays | `Sheet`, `Dialog`, `Popover`, `Menu`, `CommandPalette` |
+| Feedback | `Alert`, `Banner`, `Toaster`, `Progress`, `Skeleton`, `EmptyState` |
+| Data and content | `Table`, `Tree`, `VirtualList`, `Chart`, `Prose`, `CodeBlock` |
+| Media and chat | `MediaCard`, `ImageViewer`, `AudioItem`, `Message`, `Composer`, `AvatarPicker` |
+| Flows and setup | `Wizard`, `ActionBar`, `Page`, `ChoiceCard`, `SecretInput`, `ModelSelect`, `ReorderableList` |
+
+See the [component exports](src/components/index.ts) and [layout exports](src/layout/index.ts) for the full list. Component source files include their TypeScript prop definitions.
+
+## Theming
+
+`ThemeProvider` applies theme variables to the document root and stores the selected theme in `localStorage` under `crisp.theme`. It restores the saved theme on startup, falling back to Midnight. Pass an `initial` theme to override that starting selection.
+
+Use `useTheme()` inside the provider to change colors, radius, or density:
+
+```tsx
+import { Button, useTheme } from "@lettuceai/crisp";
+
+export function AccentPicker() {
+  const { setColor } = useTheme();
+
+  return (
+    <Button onClick={() => setColor("accent", "#38bdf8")}>
+      Use blue accent
+    </Button>
+  );
+}
+```
+
+The provider exposes six presets through `presets`: Midnight, Ink, Vellum, Paper, Slate, and Ember. Select one with `setTheme()`. Radius options are `sharp`, `default`, and `round`; density options are `default` and `compact`.
+
+Text, fill, border, and elevated surface colors are derived from the theme palette. For custom integrations, `themeToVars()` returns the CSS variables and `applyTheme()` applies a theme to an HTML element. The [theme definitions](src/theme/theme.ts) document the available values.
+
+## Utilities
+
+- `cn()` merges conditional class names and resolves Tailwind class conflicts.
+- `icon` defines five icon sizes, from `icon.xs` (12px) to `icon.xl` (20px).
+- `motion` provides Framer Motion transition presets such as `motion.settle` and `motion.sheetIn`.
+- `relativeTime()`, `compactNumber()` and `fileSize()` format the numbers a list shows, one way everywhere.
+
+Hooks and color helpers are also available from the [package entry point](src/index.ts).
+
+## Development
+
+```sh
+bun install
+bun run typecheck
+bun run lint
+bun run build
+```
+
+The build writes an ES module, source map, and TypeScript declarations to `dist/`. Runtime dependencies remain external. The stylesheet is distributed separately as `@lettuceai/crisp/styles.css`.
+
+## License
+
+[MIT](LICENSE) © 2026 LettuceAI.

package/dist/components/Accordion.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export interface AccordionProps {
+    /** Allow several items open at once. */
+    multiple?: boolean;
+    defaultOpen?: string[];
+    className?: string;
+    children: ReactNode;
+}
+export declare function Accordion({ multiple, defaultOpen, className, children }: AccordionProps): import("react").JSX.Element;
+export declare function AccordionItem({ value, title, description, children }: {
+    value: string;
+    title: ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/ActionBar.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export interface ActionBarProps {
+    /** The one thing to do next. */
+    primary?: ReactNode;
+    /** Beside it — Skip, Save draft. */
+    secondary?: ReactNode;
+    /** A Back button on the left; pass the handler. */
+    onBack?: () => void;
+    backLabel?: string;
+    /** Anything else on the left — a count, a hint. */
+    leading?: ReactNode;
+    /**
+     * Pin to the bottom of the screen with the home indicator kept clear. Default: on
+     * compact layouts. Off, it is an ordinary row at the end of the content.
+     */
+    pinned?: boolean;
+    className?: string;
+}
+/**
+ * The row that moves a flow forward: Back on the left, the main action on the right,
+ * a secondary beside it if the screen offers one. On the phone it stays put above the
+ * home indicator; on the desktop it sits under the content. Every wizard, every
+ * multi-step form uses this, so the buttons are in the same place on every screen.
+ */
+export declare function ActionBar({ primary, secondary, onBack, backLabel, leading, pinned, className }: ActionBarProps): import("react").JSX.Element;

package/dist/components/Alert.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export type AlertTone = "info" | "success" | "warning" | "danger";
+export interface AlertProps {
+    tone?: AlertTone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Small tag next to the title — an HTTP status, a model name. */
+    meta?: ReactNode;
+    /** Collapsed by default; raw payloads, stack traces. */
+    details?: string;
+    action?: ReactNode;
+    onDismiss?: () => void;
+    className?: string;
+}
+/**
+ * Inline notice. Explains what happened and what to do next, in the interface's voice.
+ * Replaces the chat error banner; same information, one type scale.
+ */
+export declare function Alert({ tone: toneKey, title, description, meta, details, action, onDismiss, className }: AlertProps): import("react").JSX.Element;

package/dist/components/AppBar.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export interface AppBarProps {
+    title: ReactNode;
+    /** Small text after the title — a count, a status. */
+    meta?: ReactNode;
+    onBack?: () => void;
+    backLabel?: string;
+    /** Renders a search field on desktop and a search icon that expands on compact. */
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    actions?: ReactNode;
+    /** A filter row under the title. */
+    filters?: ReactNode;
+    /**
+     * Shrink the title when the page scrolls. Pass the scrolling element;
+     * defaults to the window.
+     */
+    scrollRef?: React.RefObject<HTMLElement | null>;
+    /** Desktop window chrome sits above; leave room for it. */
+    inset?: boolean;
+    className?: string;
+}
+/**
+ * The page header. One component for both platforms: on desktop the title is large
+ * and search is always visible; on compact it condenses on scroll and search expands
+ * from an icon, because a permanent search field costs a third of a phone's width.
+ */
+export declare function AppBar({ title, meta, onBack, backLabel, searchValue, onSearchChange, searchPlaceholder, actions, filters, scrollRef, inset, className, }: AppBarProps): import("react").JSX.Element;

package/dist/components/AppShell.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode, Ref } from "react";
+import type { NavDestination } from "./nav";
+export type NavStyle = "auto" | "tabs" | "tabsLabelled" | "rail" | "sidebar" | "floatingRail" | "dock" | "header";
+export interface AppShellProps<T extends string> {
+    items: readonly NavDestination<T>[];
+    value: T;
+    onChange: (id: T) => void;
+    onCreate?: () => void;
+    createLabel?: string;
+    footerItems?: readonly NavDestination<T>[];
+    /**
+     * `auto` picks tabs on touch/narrow and a rail on desktop. The others are the
+     * user's explicit choice — the app already lets people pick, and a phone-sized
+     * window still falls back to tabs so nothing becomes unreachable.
+     */
+    navStyle?: NavStyle;
+    side?: "left" | "right";
+    dockEdge?: "top" | "bottom";
+    /** Desktop window chrome, rendered above everything. */
+    titleBar?: ReactNode;
+    /** Header inside the content column. */
+    header?: ReactNode;
+    /** The scrolling content element — for a header that condenses on scroll, or for
+        resetting the scroll position when the page's content changes underneath it. */
+    mainRef?: Ref<HTMLElement>;
+    /** Content under the destinations — recent chats. Shown folded on the rail too, so
+        it does not appear and vanish as the sidebar opens and closes. */
+    navSection?: ReactNode;
+    /** Let the person switch the side navigation between sidebar and rail. */
+    onNavToggle?: () => void;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The application frame. Owns where navigation lives so pages never have to think
+ * about it: on a phone the bar is at the bottom, on desktop the rail is at the side,
+ * and the content column is the same component either way.
+ *
+ * It fills its parent (`h-full`). Mounted at the app root, give it a real height —
+ * `<AppShell className="h-dvh">` — since #root only sets a min-height.
+ */
+export declare function AppShell<T extends string>({ items, value, onChange, onCreate, createLabel, footerItems, navStyle, side, dockEdge, titleBar, header, mainRef, navSection, onNavToggle, children, className, }: AppShellProps<T>): import("react").JSX.Element;

package/dist/components/AudioItem.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { type BadgeTone } from "./Badge";
+export interface AudioItemProps {
+    title: string;
+    /** One line under the title when nothing is playing. */
+    description?: ReactNode;
+    src?: string | null;
+    /** Called the first time play is pressed, to fetch the data lazily. */
+    onLoadSrc?: () => Promise<string>;
+    badge?: {
+        label: string;
+        tone?: BadgeTone;
+    };
+    /** Trailing slot — an overflow menu. */
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * A clip in the audio library. The scrub bar is a real range input, so it is
+ * keyboard- and screen-reader-operable — the app's version is a div with onClick.
+ */
+export declare function AudioItem({ title, description, src: srcProp, onLoadSrc, badge, actions, className }: AudioItemProps): import("react").JSX.Element;

package/dist/components/Avatar.d.ts

@@ -0,0 +1,11 @@
+export interface AvatarProps {
+    src?: string | null;
+    name: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** Accent ring — the "active" / "speaking" state. */
+    ring?: boolean;
+    className?: string;
+    /** Used by AvatarGroup to cut the overlap notch. */
+    style?: React.CSSProperties;
+}
+export declare function Avatar({ src, name, size, ring, className, style }: AvatarProps): import("react").JSX.Element;

package/dist/components/AvatarGroup.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { type AvatarProps } from "./Avatar";
+export interface AvatarGroupProps {
+    people: readonly {
+        name: string;
+        src?: string | null;
+    }[];
+    /** Show at most this many, then a +N counter. Default 4. */
+    max?: number;
+    size?: AvatarProps["size"];
+    /** Hover/focus a face to bring it forward — desktop only, it's decoration. */
+    interactive?: boolean;
+    /** Replaces the +N chip. */
+    overflow?: ReactNode;
+    className?: string;
+}
+export declare function AvatarGroup({ people, max, size, interactive, overflow, className }: AvatarGroupProps): import("react").JSX.Element;

package/dist/components/AvatarPicker.d.ts

@@ -0,0 +1,20 @@
+import { type AvatarProps } from "./Avatar";
+export interface AvatarPickerProps {
+    value: string | null;
+    /** Called with a square data URL, or null when the picture is removed. */
+    onChange: (dataUrl: string | null) => void;
+    /** Initials when there's no picture. */
+    name?: string;
+    size?: AvatarProps["size"];
+    /** Pixel size of the square that comes out. Default 512. */
+    output?: number;
+    /** Skip the crop step and take the picture as it comes. */
+    crop?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * The avatar as a target: tap or drop to pick, then frame it — drag to move, slide to
+ * zoom — and out comes a square. Characters, personas and groups all start here.
+ */
+export declare function AvatarPicker({ value, onChange, name, size, output, crop, disabled, className }: AvatarPickerProps): import("react").JSX.Element;

package/dist/components/Badge.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react";
+export type BadgeTone = "neutral" | "accent" | "danger" | "warning" | "info" | "secondary";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    /** Leading status dot. */
+    dot?: boolean;
+}
+export declare function Badge({ tone, dot, className, children, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/components/Banner.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export type BannerTone = "info" | "warning" | "danger" | "offline";
+export interface BannerProps {
+    tone?: BannerTone;
+    children: ReactNode;
+    action?: ReactNode;
+    onDismiss?: () => void;
+    /** Stick to the top of the scroll container. */
+    sticky?: boolean;
+    className?: string;
+}
+/**
+ * A full-width notice about the whole app or page — you're offline, a migration is
+ * running, an update is ready. Alert is about one thing on the page; a Banner is about
+ * the page. One line only: if it needs a paragraph, it's an Alert.
+ */
+export declare function Banner({ tone, children, action, onDismiss, sticky, className }: BannerProps): import("react").JSX.Element;

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+export interface Crumb {
+    label: string;
+    icon?: ReactNode;
+    /** Omit on the last crumb — the page you are on is not a link. */
+    onClick?: () => void;
+    href?: string;
+}
+export interface BreadcrumbProps {
+    items: readonly Crumb[];
+    /**
+     * Keep the first crumb and the last `n`; everything between collapses into a menu.
+     * Deep settings paths would otherwise wrap or scroll on a phone. Default 1.
+     */
+    maxVisible?: number;
+    className?: string;
+}
+/**
+ * Where you are in a nested screen. Desktop shows the whole path; on a narrow
+ * viewport the middle collapses into a menu rather than wrapping to a second line.
+ * It complements the back button, it does not replace it.
+ */
+export declare function Breadcrumb({ items, maxVisible, className }: BreadcrumbProps): import("react").JSX.Element | null;

package/dist/components/Button.d.ts

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type ButtonVariant = "primary" | "tonal" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    /** Fill the width. For two buttons sharing a row, give each `className="flex-1"` instead. */
+    block?: boolean;
+    children?: ReactNode;
+}
+export declare const iconSize: Record<ButtonSize, number>;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type ButtonProps } from "./Button";
+export interface ButtonGroupProps {
+    /** Buttons joined into one control — the inner corners are squared off. */
+    attached?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare function ButtonGroup({ attached, className, children }: ButtonGroupProps): import("react").JSX.Element;
+export interface SplitButtonProps extends Omit<ButtonProps, "children"> {
+    children: ReactNode;
+    /** Menu items for the attached chevron. */
+    menu: ReactNode;
+    menuLabel?: string;
+}
+/**
+ * A primary action with alternatives behind a chevron. The composer already does this
+ * with hold-to-send-as-system — a gesture nobody discovers. On desktop this is the
+ * visible version of the same thing.
+ */
+export declare function SplitButton({ children, menu, menuLabel, variant, size, ...rest }: SplitButtonProps): import("react").JSX.Element;

package/dist/components/Card.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from "react";
+import { type HTMLMotionProps } from "framer-motion";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** `raised` sits on the page; `overlay` floats above everything. */
+    level?: "raised" | "overlay";
+    /** A hairline edge. Off by default — elevation already separates it. */
+    bordered?: boolean;
+    padding?: "none" | "sm" | "md";
+}
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A clickable card is a button, not a div with onClick. */
+export interface CardButtonProps extends HTMLMotionProps<"button"> {
+    selected?: boolean;
+    padding?: "none" | "sm" | "md";
+}
+export declare const CardButton: import("react").ForwardRefExoticComponent<Omit<CardButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Carousel.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export interface CarouselProps {
+    /** One node per slide. */
+    children: ReactNode[];
+    /** Dots and arrows. Arrows are hidden where there is no pointer. */
+    controls?: boolean;
+    "aria-label": string;
+    className?: string;
+    slideClassName?: string;
+}
+/**
+ * A horizontal pager built on native scroll-snap: swipe on touch, arrows and keys on
+ * desktop, and it keeps working with JavaScript busy. Onboarding, feature tours,
+ * image variants.
+ */
+export declare function Carousel({ children, controls, className, slideClassName, ...aria }: CarouselProps): import("react").JSX.Element;

package/dist/components/CharacterCard.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import { type HTMLMotionProps } from "framer-motion";
+export type CharacterCardVariant = "row" | "banner";
+export interface CharacterCardProps extends Omit<HTMLMotionProps<"button">, "title"> {
+    name: string;
+    description?: ReactNode;
+    avatar?: string | null;
+    /** CSS colour or gradient extracted from the avatar. Falls back to a tint from the name. */
+    gradient?: string | null;
+    /** Text colours that go with the gradient. */
+    fg?: string | null;
+    fgMuted?: string | null;
+    /** `row` is the horizontal list card; `banner` is the wide cover card. */
+    variant?: CharacterCardVariant;
+    /** Slot on the trailing edge — a badge, a menu. Replaces the chevron. */
+    trailing?: ReactNode;
+    selected?: boolean;
+}
+/**
+ * The home-screen character card, in the app's two shapes. When the avatar yields a
+ * gradient, the whole card becomes a Surface and every child re-colours itself —
+ * no per-element `style={{ color: textColor }}`.
+ *
+ * It grows with the column it sits in, not with the window: a container query, so a
+ * narrow pane on a wide monitor still gets the phone-sized card.
+ */
+export declare const CharacterCard: import("react").ForwardRefExoticComponent<Omit<CharacterCardProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function CharacterCardSkeleton({ variant }: {
+    variant?: CharacterCardVariant;
+}): import("react").JSX.Element;

package/dist/components/Chart.d.ts

@@ -0,0 +1,35 @@
+import { Cell } from "recharts";
+export declare const CHART_SERIES: readonly ["var(--color-accent)", "var(--color-info)", "var(--color-secondary)", "var(--color-warning)", "var(--color-danger)"];
+export interface ChartProps<Row extends Record<string, unknown>> {
+    data: readonly Row[];
+    /** Key holding the category or timestamp. */
+    x: string;
+    /** One entry per series. */
+    series: readonly {
+        key: string;
+        label: string;
+        color?: string;
+    }[];
+    kind?: "line" | "area" | "bar";
+    height?: number;
+    /** Formats values in the axis and tooltip. */
+    format?: (value: number) => string;
+    /** Hide the y axis for a sparkline-sized chart. */
+    minimal?: boolean;
+    className?: string;
+}
+/**
+ * Charts on the token palette, so they follow a custom accent and stay legible on the
+ * app's near-black surface. The app pulls in recharts already but styles each chart
+ * inline with hard-coded colours.
+ */
+export declare function Chart<Row extends Record<string, unknown>>({ data, x, series, kind, height, format, minimal, className, }: ChartProps<Row>): import("react").JSX.Element;
+export interface SparklineProps {
+    data: readonly number[];
+    color?: string;
+    height?: number;
+    className?: string;
+}
+/** A trend with no axes, sized to sit inside a StatTile. */
+export declare function Sparkline({ data, color, height, className }: SparklineProps): import("react").JSX.Element;
+export { Cell as ChartCell };

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** Partially selected (a parent of a mixed list). */
+    indeterminate?: boolean;
+    /** Inline label. For label + hint layouts wrap in <Field inline>. */
+    label?: ReactNode;
+    size?: "sm" | "md";
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Chip.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect"> {
+    /** Filter chip: toggles. Without `selected` it's a plain tag. */
+    selected?: boolean;
+    /** Removable tag: renders an × and calls this. */
+    onRemove?: () => void;
+    icon?: ReactNode;
+    children: ReactNode;
+}
+/** Tags and filters. Badge is read-only; Chip is something you tap. */
+export declare function Chip({ selected, onRemove, icon, className, children, ...rest }: ChipProps): import("react").JSX.Element;

package/dist/components/ChoiceCard.d.ts

@@ -0,0 +1,22 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface ChoiceCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+    selected: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Left of the title, in a tile. */
+    icon?: ReactNode;
+    /** Right of the title — a badge, a price. */
+    meta?: ReactNode;
+    /** The selection mark: a tick for one-of-many, a box for any-of-many, or none when the border says enough. */
+    indicator?: "radio" | "checkbox" | "none";
+    /** Below the description — bullet lists, a form that opens once chosen. */
+    children?: ReactNode;
+    /** `row` puts icon, text and mark on one line; `stack` puts the icon above the text, for grids of equal cards. */
+    layout?: "row" | "stack";
+}
+/**
+ * One option among a few: a provider, a plan, a memory mode, a character to add to a
+ * group. The selected border is the state, the mark confirms it, and every card in
+ * a grid is the same height so the row reads as a set.
+ */
+export declare const ChoiceCard: import("react").ForwardRefExoticComponent<ChoiceCardProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,16 @@
+export interface CodeBlockProps {
+    code: string;
+    /** Shown in the header — a filename, a language, "Response". */
+    label?: string;
+    /** Wrap long lines instead of scrolling. Good for prompts, bad for JSON. */
+    wrap?: boolean;
+    /** Adds a gutter of line numbers. */
+    lineNumbers?: boolean;
+    maxHeight?: number | string;
+    className?: string;
+}
+/**
+ * Monospace content with a copy button: prompt templates, raw payloads, error bodies.
+ * Long lines scroll inside the block, so the page never scrolls sideways because of it.
+ */
+export declare function CodeBlock({ code, label, wrap, lineNumbers, maxHeight, className }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/Collapsible.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+export interface CollapsibleProps {
+    title: ReactNode;
+    description?: ReactNode;
+    defaultOpen?: boolean;
+    /** Controlled mode. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Right of the title — a count, a badge, a switch. */
+    trailing?: ReactNode;
+    /** `panel` draws a bordered container; `plain` is just the toggle and its content. */
+    variant?: "panel" | "plain";
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A single disclosure. Accordion is for a set that share open/closed state; this is
+ * one section that stands alone — advanced settings, a long definition, a raw payload.
+ */
+export declare function Collapsible({ title, description, defaultOpen, open: openProp, onOpenChange, trailing, variant, className, children, }: CollapsibleProps): import("react").JSX.Element;