@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TulipFarm
+
+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

@@ -1,3 +1,184 @@
-# Temporary Holding Version
+<div align="center">
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# 🌱 Sprõut
+
+**Thoughtful React controls, built with Base UI and Tailwind CSS.**
+
+Every state planted, every edge case tended.
+
+[![CI](https://github.com/TulipFarm/sprout/actions/workflows/ci.yml/badge.svg)](https://github.com/TulipFarm/sprout/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/@tulipfarm/sprout?color=188038)](https://www.npmjs.com/package/@tulipfarm/sprout)
+[![License: MIT](https://img.shields.io/badge/license-MIT-188038)](https://github.com/TulipFarm/sprout/blob/main/LICENSE)
+[![Conventional Commits](https://img.shields.io/badge/commits-conventional-188038)](https://www.conventionalcommits.org)
+
+[Install](#install) · [Components](#components) · [Theming](#theming) · [Develop](#develop) · [Contributing](#contributing)
+
+</div>
+
+---
+
+Sprõut is a general-purpose component library from
+[TulipFarm](https://tulipfarm.ai). It cares about the small things: busy,
+blocked, invalid, empty, and loading states, keyboard paths, and screen reader
+labels. The default theme is neutral, so it fits your product, not ours.
+
+- **Accessible by default.** Built on [Base UI](https://base-ui.com) primitives.
+- **Tailwind CSS 4 native.** One CSS import. No JavaScript theme object.
+- **Tree-shakable.** Every component has its own import path.
+- **Agent-ready.** Chat, plan, tool, and review components for AI products.
+- **Light and dark.** A neutral default and 15 more CSS theme presets.
+
+> [!NOTE]
+> Sprõut is pre-1.0. APIs can change between minor versions.
+
+## Install
+
+Sprõut needs React 19 and Tailwind CSS 4.
+
+```sh
+pnpm add @tulipfarm/sprout
+```
+
+<details>
+<summary>Install from GitHub instead of npm</summary>
+
+Each [GitHub release](https://github.com/TulipFarm/sprout/releases) has the
+package tarball attached. No login needed:
+
+```sh
+pnpm add https://github.com/TulipFarm/sprout/releases/download/v0.1.0/tulipfarm-sprout-0.1.0.tgz
+```
+
+The package is also on GitHub Packages. It needs a GitHub token with
+`read:packages`. Add this to `.npmrc`:
+
+```ini
+@tulipfarm:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+</details>
+
+Add the styles to your CSS entry:
+
+```css
+@import "tailwindcss";
+@import "@tulipfarm/sprout/styles.css";
+```
+
+Use a component:
+
+```tsx
+import { Button } from "@tulipfarm/sprout/button";
+import { Badge } from "@tulipfarm/sprout/badge";
+
+export function Status() {
+  return (
+    <>
+      <Badge variant="success">Connected</Badge>
+      <Button state={{ kind: "busy" }} pendingLabel="Saving…">
+        Save
+      </Button>
+    </>
+  );
+}
+```
+
+The CSS entry registers Sprõut's classes with Tailwind. It does not change your
+body styles or generic shadcn tokens. Tailwind utility prefixes are not
+supported yet.
+
+## Components
+
+Each component imports from `@tulipfarm/sprout/<name>`, for example
+`@tulipfarm/sprout/dialog`. See the [component reference](https://github.com/TulipFarm/sprout/blob/main/docs/components.md)
+for notes on each one.
+
+| Group                   | Components                                                                                                                                                                                                                                                     |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Actions**             | Button · Button Group · Toggle · Toggle Group · Toolbar Status · Kbd                                                                                                                                                                                           |
+| **Forms**               | Field · Form · Label · Input · Input Group · Input OTP · Textarea · Checkbox · Radio Group · Switch · Slider · Select · Combobox · Choice List · Calendar · Search Field · Rich Text Editor · Mention List · Questionnaire · Selection Slot · Reasoning Effort |
+| **Overlays**            | Dialog · Alert Dialog · Sheet · Popover · Hover Card · Tooltip · Dropdown Menu · Context Menu · Menubar · Command · Search Dialog · Toast                                                                                                                      |
+| **Layout & navigation** | Sidebar · Navigation Menu · Breadcrumb · Pagination · Tabs · Accordion · Collapsible · Page Header · Page Content · Settings List · Card · Carousel · Resizable · Scroll Area · Separator · Aspect Ratio · Direction · Canvas                                  |
+| **Feedback**            | Alert · Notice Banner · Badge · Progress · Spinner · Skeleton · State Panel · State Sample                                                                                                                                                                     |
+| **Data display**        | Table · Chart · Code Block · File Viewer · Schema Diagram · Avatar · Brand Icon · Attachment · Typed Text · Gradient Banner · Glass Banner                                                                                                                     |
+| **Agents & chat**       | Message · Message Actions · Message Response · Message Scroller · Chat Confirmation · Chat Plan · Chat Sources · Plan Outline · Prompt List · Result Card · Review Card · Tool Activity                                                                        |
+
+## Theming
+
+Themes are plain CSS. Override any `--sprout-*` token:
+
+```css
+:root {
+  --sprout-radius-control: 0.5rem;
+}
+```
+
+Presets live in `@tulipfarm/sprout/themes/*`: `neutral`, `tulipfarm`, `github`,
+`linear`, `vercel`, `stripe`, `notion`, and more.
+
+```css
+@import "@tulipfarm/sprout/themes/tulipfarm.css";
+```
+
+### shadcn
+
+A shadcn registry item is at `apps/docs/public/r/sprout.json`. It works with
+`shadcn add` (tested with shadcn 4.22.0). A public URL will come with the docs
+release.
+
+## Develop
+
+You need Node 22.22+ and pnpm 11.5.3.
+
+```sh
+pnpm install
+pnpm dev        # docs and live examples at http://localhost:4321
+```
+
+After you change package code, run `pnpm --filter @tulipfarm/sprout build`.
+
+```sh
+pnpm build
+pnpm typecheck
+pnpm format:check
+pnpm test
+pnpm exec playwright install chromium
+pnpm test:browser
+pnpm test:install   # packs the library and installs it in a fresh app
+```
+
+Run test commands one at a time.
+
+```
+sprout/
+├── packages/sprout   the published package and CSS themes
+├── apps/docs         Astro docs, live examples, shadcn registry
+├── tests             unit, browser, and packed-consumer tests
+└── docs              ADRs, plans, component reference
+```
+
+The docs deploy to Cloudflare Pages: build with `pnpm build` and serve
+`apps/docs/dist`.
+
+## Contributing
+
+Contributions are welcome. Read [CONTRIBUTING.md](https://github.com/TulipFarm/sprout/blob/main/CONTRIBUTING.md) and the
+[Code of Conduct](https://github.com/TulipFarm/sprout/blob/main/CODE_OF_CONDUCT.md). Report security problems privately, as
+described in [SECURITY.md](https://github.com/TulipFarm/sprout/blob/main/SECURITY.md).
+
+## License
+
+[MIT](https://github.com/TulipFarm/sprout/blob/main/LICENSE) © TulipFarm
+
+---
+
+<div align="center">
+  <a href="https://tulipfarm.ai">
+    <img src="https://tulipfarm.ai/brand/v1/mark-green.svg" alt="TulipFarm" width="40" height="40">
+  </a>
+  <p>
+    Grown at <a href="https://tulipfarm.ai"><b>TulipFarm</b></a>,<br>
+    one farm for every team's records, docs, agents, and workflows.
+  </p>
+</div>

package/dist/components/accordion.d.ts

@@ -0,0 +1,28 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+export declare const accordionTriggerVariantNames: readonly ["default", "quiet"];
+export type AccordionTriggerVariant = (typeof accordionTriggerVariantNames)[number];
+export type AccordionProps<Value = any> = BaseAccordion.Root.Props<Value>;
+/**
+ * A stack of sections that open in place. One section opens at a time unless
+ * you pass `multiple`. Pass `value` and `onValueChange` to control which
+ * sections are open, or `defaultValue` to let it manage itself.
+ */
+export declare function Accordion<Value = any>({ className, ...props }: AccordionProps<Value>): import("react").JSX.Element;
+export type AccordionItemProps = BaseAccordion.Item.Props;
+/** One section. Give it a `value` to open it by default or to control it. */
+export declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react").JSX.Element;
+export interface AccordionTriggerProps extends BaseAccordion.Trigger.Props {
+    /**
+     * `default` underlines its label on hover. `quiet` stays still, for
+     * triggers that hold a title and a summary line.
+     */
+    variant?: AccordionTriggerVariant;
+}
+/** The heading button that opens and closes its section. */
+export declare function AccordionTrigger({ className, children, variant, ...props }: AccordionTriggerProps): import("react").JSX.Element;
+export interface AccordionContentProps extends Omit<BaseAccordion.Panel.Props, "className"> {
+    /** Classes for the padded inner box that holds the content. */
+    className?: string;
+}
+/** The section body. It grows open and shrinks closed. */
+export declare function AccordionContent({ className, children, ...props }: AccordionContentProps): import("react").JSX.Element;

package/dist/components/accordion.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { cn, stateClassName } from "../internal/classes.js";
+export const accordionTriggerVariantNames = ["default", "quiet"];
+/**
+ * A stack of sections that open in place. One section opens at a time unless
+ * you pass `multiple`. Pass `value` and `onValueChange` to control which
+ * sections are open, or `defaultValue` to let it manage itself.
+ */
+export function Accordion({ className, ...props }) {
+    return (_jsx(BaseAccordion.Root, { "data-slot": "accordion", ...props, className: stateClassName("sprout-accordion", className) }));
+}
+/** One section. Give it a `value` to open it by default or to control it. */
+export function AccordionItem({ className, ...props }) {
+    return (_jsx(BaseAccordion.Item, { "data-slot": "accordion-item", ...props, className: stateClassName("sprout-accordion-item", className) }));
+}
+/** The heading button that opens and closes its section. */
+export function AccordionTrigger({ className, children, variant = "default", ...props }) {
+    return (_jsx(BaseAccordion.Header, { "data-slot": "accordion-header", className: "sprout-accordion-header", children: _jsxs(BaseAccordion.Trigger, { "data-slot": "accordion-trigger", "data-variant": variant, ...props, className: stateClassName(`sprout-accordion-trigger sprout-accordion-trigger-${variant}`, className), children: [children, _jsx(ChevronDown, { size: 16, "aria-hidden": "true", "data-slot": "accordion-trigger-icon", className: "sprout-accordion-trigger-icon" })] }) }));
+}
+/** The section body. It grows open and shrinks closed. */
+export function AccordionContent({ className, children, ...props }) {
+    return (_jsx(BaseAccordion.Panel, { "data-slot": "accordion-content", ...props, className: "sprout-accordion-content", children: _jsx("div", { className: cn("sprout-accordion-content-inner", className), children: children }) }));
+}

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,60 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { useRender } from "@base-ui/react/use-render";
+import { type ButtonProps, type ButtonSize, type ButtonVariant } from "./button.js";
+export declare const alertDialogSizeNames: readonly ["default", "sm"];
+export type AlertDialogSize = (typeof alertDialogSizeNames)[number];
+export type AlertDialogProps = AlertDialogPrimitive.Root.Props;
+export declare function AlertDialog(props: AlertDialogProps): import("react").JSX.Element;
+export type AlertDialogTriggerProps = AlertDialogPrimitive.Trigger.Props;
+export declare function AlertDialogTrigger(props: AlertDialogTriggerProps): import("react").JSX.Element;
+export type AlertDialogPortalProps = AlertDialogPrimitive.Portal.Props;
+export declare function AlertDialogPortal(props: AlertDialogPortalProps): import("react").JSX.Element;
+export type AlertDialogOverlayProps = AlertDialogPrimitive.Backdrop.Props;
+export declare function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps): import("react").JSX.Element;
+export interface AlertDialogContentProps extends AlertDialogPrimitive.Popup.Props {
+    /** `sm` centers the header and splits the footer into two equal buttons. */
+    size?: AlertDialogSize;
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: AlertDialogPrimitive.Portal.Props["container"];
+}
+/**
+ * The alert dialog surface. It renders its own portal and overlay, so place
+ * it directly inside `AlertDialog`.
+ */
+export declare function AlertDialogContent({ className, size, container, ...props }: AlertDialogContentProps): import("react").JSX.Element;
+type PartSlot = "alert-dialog-header" | "alert-dialog-footer" | "alert-dialog-media";
+export interface AlertDialogPartState extends Record<string, unknown> {
+    slot: PartSlot;
+}
+export type AlertDialogPartProps = useRender.ComponentProps<"div", AlertDialogPartState>;
+/**
+ * Groups media, title, and description. Centered on narrow screens and in
+ * `sm` dialogs; from 640px a `default` dialog aligns it to the start with the
+ * media beside the text.
+ */
+export declare const AlertDialogHeader: ({ className, render, ref, ...props }: AlertDialogPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A tinted action bar pinned to the bottom edge. Actions stack in reverse
+ * order on narrow screens and align right from 640px; `sm` dialogs always
+ * split it into two equal columns.
+ */
+export declare const AlertDialogFooter: ({ className, render, ref, ...props }: AlertDialogPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** A 40px tile for an icon above or beside the title. */
+export declare const AlertDialogMedia: ({ className, render, ref, ...props }: AlertDialogPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AlertDialogTitleProps = AlertDialogPrimitive.Title.Props;
+export declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): import("react").JSX.Element;
+export type AlertDialogDescriptionProps = AlertDialogPrimitive.Description.Props;
+export declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): import("react").JSX.Element;
+export type AlertDialogActionProps = ButtonProps;
+/**
+ * The confirming button. It does not close the dialog by itself, so the
+ * caller can keep it open while work is pending and close it on success.
+ */
+export declare function AlertDialogAction(props: AlertDialogActionProps): import("react").JSX.Element;
+export interface AlertDialogCancelProps extends AlertDialogPrimitive.Close.Props {
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+}
+/** Closes the dialog. An outline button unless `variant` says otherwise. */
+export declare function AlertDialogCancel({ variant, size, ...props }: AlertDialogCancelProps): import("react").JSX.Element;
+export {};

package/dist/components/alert-dialog.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn, stateClassName } from "../internal/classes.js";
+import { Button, } from "./button.js";
+export const alertDialogSizeNames = ["default", "sm"];
+export function AlertDialog(props) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+export function AlertDialogTrigger(props) {
+    return (_jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props }));
+}
+export function AlertDialogPortal(props) {
+    return (_jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props }));
+}
+export function AlertDialogOverlay({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", ...props, className: stateClassName("sprout-alert-dialog-overlay", className) }));
+}
+/**
+ * The alert dialog surface. It renders its own portal and overlay, so place
+ * it directly inside `AlertDialog`.
+ */
+export function AlertDialogContent({ className, size = "default", container, ...props }) {
+    return (_jsxs(AlertDialogPortal, { container: container, children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, ...props, className: stateClassName("sprout-alert-dialog-content", className) })] }));
+}
+function part(slot, base) {
+    return function AlertDialogPart({ className, render, ref, ...props }) {
+        return useRender({
+            defaultTagName: "div",
+            ref,
+            render,
+            props: mergeProps({ "data-slot": slot, className: cn(base, className) }, props),
+            state: { slot },
+        });
+    };
+}
+/**
+ * Groups media, title, and description. Centered on narrow screens and in
+ * `sm` dialogs; from 640px a `default` dialog aligns it to the start with the
+ * media beside the text.
+ */
+export const AlertDialogHeader = part("alert-dialog-header", "sprout-alert-dialog-header");
+/**
+ * A tinted action bar pinned to the bottom edge. Actions stack in reverse
+ * order on narrow screens and align right from 640px; `sm` dialogs always
+ * split it into two equal columns.
+ */
+export const AlertDialogFooter = part("alert-dialog-footer", "sprout-alert-dialog-footer");
+/** A 40px tile for an icon above or beside the title. */
+export const AlertDialogMedia = part("alert-dialog-media", "sprout-alert-dialog-media");
+export function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", ...props, className: stateClassName("sprout-alert-dialog-title", className) }));
+}
+export function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", ...props, className: stateClassName("sprout-alert-dialog-description", className) }));
+}
+/**
+ * The confirming button. It does not close the dialog by itself, so the
+ * caller can keep it open while work is pending and close it on success.
+ */
+export function AlertDialogAction(props) {
+    return _jsx(Button, { "data-slot": "alert-dialog-action", ...props });
+}
+/** Closes the dialog. An outline button unless `variant` says otherwise. */
+export function AlertDialogCancel({ variant = "outline", size = "default", ...props }) {
+    return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-cancel", render: _jsx(Button, { variant: variant, size: size }), ...props }));
+}

package/dist/components/alert.d.ts

@@ -0,0 +1,30 @@
+import { useRender } from "@base-ui/react/use-render";
+export declare const alertVariantNames: readonly ["default", "destructive"];
+export type AlertVariant = (typeof alertVariantNames)[number];
+export interface AlertVariantOptions {
+    variant?: AlertVariant | null;
+    className?: string;
+}
+export declare function alertVariants({ variant, className, }?: AlertVariantOptions): string;
+export interface AlertState extends Record<string, unknown> {
+    slot: "alert";
+    variant: AlertVariant;
+}
+export interface AlertProps extends useRender.ComponentProps<"div", AlertState> {
+    variant?: AlertVariant;
+}
+/**
+ * A static message block. It announces itself with `role="alert"` by default;
+ * pass `role="status"` or `role="note"` for messages that should not interrupt.
+ */
+export declare function Alert({ className, variant, render, ref, role, ...props }: AlertProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type PartSlot = "alert-title" | "alert-description" | "alert-action";
+export interface AlertPartState extends Record<string, unknown> {
+    slot: PartSlot;
+}
+export type AlertPartProps = useRender.ComponentProps<"div", AlertPartState>;
+export declare const AlertTitle: ({ className, render, ref, ...props }: AlertPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const AlertDescription: ({ className, render, ref, ...props }: AlertPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Pins a compact control, such as an Undo button, to the top-right corner. */
+export declare const AlertAction: ({ className, render, ref, ...props }: AlertPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/alert.js

@@ -0,0 +1,35 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../internal/classes.js";
+export const alertVariantNames = ["default", "destructive"];
+export function alertVariants({ variant, className, } = {}) {
+    return cn("sprout-alert", `sprout-alert-${variant ?? "default"}`, className);
+}
+/**
+ * A static message block. It announces itself with `role="alert"` by default;
+ * pass `role="status"` or `role="note"` for messages that should not interrupt.
+ */
+export function Alert({ className, variant = "default", render, ref, role = "alert", ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        ref,
+        render,
+        props: mergeProps({ role, className: alertVariants({ variant, className }) }, props),
+        state: { slot: "alert", variant },
+    });
+}
+function part(slot, base) {
+    return function AlertPart({ className, render, ref, ...props }) {
+        return useRender({
+            defaultTagName: "div",
+            ref,
+            render,
+            props: mergeProps({ className: cn(base, className) }, props),
+            state: { slot },
+        });
+    };
+}
+export const AlertTitle = part("alert-title", "sprout-alert-title");
+export const AlertDescription = part("alert-description", "sprout-alert-description");
+/** Pins a compact control, such as an Undo button, to the top-right corner. */
+export const AlertAction = part("alert-action", "sprout-alert-action");

package/dist/components/aspect-ratio.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+export interface AspectRatioProps extends ComponentProps<"div"> {
+    /** Width divided by height, such as `16 / 9`, `4 / 3`, or `1`. */
+    ratio: number;
+}
+/** Keeps its content at a fixed width-to-height ratio as its width changes. */
+export declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;

package/dist/components/aspect-ratio.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+/** Keeps its content at a fixed width-to-height ratio as its width changes. */
+export function AspectRatio({ ratio, className, style, ...props }) {
+    return (_jsx("div", { "data-slot": "aspect-ratio", className: cn("sprout-aspect-ratio", className), style: { ...style, "--sprout-aspect-ratio": ratio }, ...props }));
+}

package/dist/components/attachment.d.ts

@@ -0,0 +1,118 @@
+import { type ComponentProps, type ReactElement } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type FileKind } from "../internal/file-kind.js";
+import { type ButtonProps } from "./button.js";
+export declare const attachmentStateNames: readonly ["idle", "uploading", "processing", "error", "done"];
+export declare const attachmentSizeNames: readonly ["default", "sm", "xs"];
+export declare const attachmentOrientationNames: readonly ["horizontal", "vertical"];
+export declare const attachmentMediaVariantNames: readonly ["icon", "image"];
+export declare const attachmentGroupVariantNames: readonly ["carousel", "grid", "inline", "list"];
+export declare const fileAttachmentVariantNames: readonly ["list", "grid", "inline", "chip"];
+export declare const fileAttachmentStateNames: readonly ["ready", "uploading", "processing", "error"];
+export declare const fileTypeIconSizeNames: readonly ["sm", "lg"];
+export type AttachmentState = (typeof attachmentStateNames)[number];
+export type AttachmentSize = (typeof attachmentSizeNames)[number];
+export type AttachmentOrientation = (typeof attachmentOrientationNames)[number];
+export type AttachmentMediaVariant = (typeof attachmentMediaVariantNames)[number];
+export type AttachmentGroupVariant = (typeof attachmentGroupVariantNames)[number];
+export type FileAttachmentVariant = (typeof fileAttachmentVariantNames)[number];
+export type FileAttachmentState = (typeof fileAttachmentStateNames)[number];
+export type FileTypeIconSize = (typeof fileTypeIconSizeNames)[number];
+export type { FileKind };
+export interface AttachmentProps extends ComponentProps<"div"> {
+    /** `idle` dashes the border, `uploading` and `processing` shimmer the title and dim image media, `error` turns it red. */
+    state?: AttachmentState | undefined;
+    size?: AttachmentSize | undefined;
+    orientation?: AttachmentOrientation | undefined;
+}
+/** A file card built from media, content, and actions. */
+export declare function Attachment({ className, state, size, orientation, ...props }: AttachmentProps): import("react").JSX.Element;
+export interface AttachmentMediaProps extends ComponentProps<"div"> {
+    /** `icon` centers an icon or spinner; `image` crops an `img` to the square. */
+    variant?: AttachmentMediaVariant | undefined;
+}
+export declare function AttachmentMedia({ className, variant, ...props }: AttachmentMediaProps): import("react").JSX.Element;
+export declare function AttachmentContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** A single-line name. It shimmers while the attachment uploads or processes. */
+export declare function AttachmentTitle({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export declare function AttachmentDescription({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+/** Sits above the trigger. Vertical attachments float it over the media corner. */
+export declare function AttachmentActions({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** A ghost `icon-xs` Button. Give icon-only actions an `aria-label`. */
+export declare function AttachmentAction({ variant, size, ...props }: ButtonProps): import("react").JSX.Element;
+export type AttachmentTriggerProps = useRender.ComponentProps<"button">;
+/** Stretches over the whole attachment so a click anywhere opens it. Name it with `aria-label`. */
+export declare function AttachmentTrigger({ className, render, type, ...props }: AttachmentTriggerProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface AttachmentGroupProps extends ComponentProps<"div"> {
+    /**
+     * `carousel` scrolls one row sideways with edge arrows, `grid` makes two
+     * columns (three from 640px), `inline` wraps, and `list` stacks.
+     */
+    variant?: AttachmentGroupVariant | undefined;
+}
+export declare function AttachmentGroup(props: AttachmentGroupProps): import("react").JSX.Element;
+export interface FileTypeIconProps extends Omit<ComponentProps<"svg">, "children"> {
+    name: string;
+    mediaType: string;
+    /** `sm` is 20 × 24px for rows and chips; `lg` is 30 × 36px for grid previews. */
+    size?: FileTypeIconSize | undefined;
+}
+/** A paper glyph with a colored extension badge, such as PDF or XLSX. Decorative. */
+export declare function FileTypeIcon({ name, mediaType, size, className, ...props }: FileTypeIconProps): import("react").JSX.Element;
+export type AttachmentFileSource = {
+    kind: "local";
+    file: File;
+} | {
+    kind: "remote";
+    url: string;
+};
+export interface AttachmentFile {
+    id: string;
+    name: string;
+    mediaType: string;
+    /** A formatted size or a short source line, such as “48 KB” or “Google Drive”. */
+    size: string;
+    /** An image preview URL. */
+    url?: string | undefined;
+    source?: AttachmentFileSource | undefined;
+    state: FileAttachmentState;
+}
+export interface FileAttachmentProps {
+    file: AttachmentFile;
+    variant?: FileAttachmentVariant | undefined;
+    onRemove?: (() => void) | undefined;
+    onRetry?: (() => void) | undefined;
+    /** Opens the file your own way, instead of `viewable`. Disabled while the file uploads or processes. */
+    onOpen?: (() => void) | undefined;
+    /**
+     * Opens the file in the full-screen `FileViewer` on click. Needs a
+     * `source` or `url`. Wrap the app in `FileRenderersProvider` to view
+     * sheets, Office files, and formatted Markdown.
+     */
+    viewable?: boolean | undefined;
+    /** Peeks at images, text, code, JSON, and Markdown in a card on hover or focus. Needs a `source` or `url`. */
+    preview?: boolean | undefined;
+    /** The verb in the open button's name, such as “Download report.pdf”. */
+    actionLabel?: "Inspect" | "Download" | undefined;
+    className?: string | undefined;
+}
+/** A ready-made file row, card, inline mention, or chip with upload states, retry, and remove. */
+export declare function FileAttachment({ file, variant, onRemove, onRetry, onOpen, viewable, preview, actionLabel, className, }: FileAttachmentProps): import("react").JSX.Element;
+export interface AttachmentDropzoneProps {
+    onFiles: (files: File[]) => void;
+    disabled?: boolean | undefined;
+    /** File types the picker offers. Defaults to documents, sheets, slides, PDF, text, Google shortcuts, and images. */
+    accept?: string | undefined;
+    className?: string | undefined;
+}
+/** A dashed drop target with a “Choose files” button. Files are handed to `onFiles`; nothing is uploaded. */
+export declare function AttachmentDropzone({ onFiles, disabled, accept, className, }: AttachmentDropzoneProps): import("react").JSX.Element;
+export interface LocalFileAttachmentProps {
+    file: File;
+    onRemove?: (() => void) | undefined;
+    onOpen?: (() => void) | undefined;
+    viewable?: boolean | undefined;
+    preview?: boolean | undefined;
+}
+/** A chip for a `File` still in browser memory, with a live image preview. */
+export declare function LocalFileAttachment({ file, onRemove, onOpen, viewable, preview, }: LocalFileAttachmentProps): import("react").JSX.Element;