@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/glass-banner.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useImperativeHandle, useRef, } from "react";
+import { cn } from "../internal/classes.js";
+/**
+ * A frosted showcase banner with draggable glass chips. The bubble art is
+ * hidden from assistive technology; the chips are announced as a list named
+ * by the caption, or by the title when there is no caption.
+ */
+export function GlassBanner({ title, caption, className, children, ...props }) {
+    const id = useId();
+    const titleId = `${id}-title`;
+    const captionId = `${id}-caption`;
+    const hasCaption = caption !== undefined &&
+        caption !== null &&
+        caption !== false &&
+        caption !== "";
+    return (_jsxs("div", { "data-slot": "glass-banner", ...props, className: cn("sprout-glass-banner", className), children: [_jsx("div", { "data-slot": "glass-banner-art", className: "sprout-glass-banner-art", "aria-hidden": "true", children: Array.from({ length: 5 }, (_, index) => (_jsx("span", { "data-slot": "glass-bubble", className: "sprout-glass-bubble" }, index))) }), _jsxs("div", { "data-slot": "glass-banner-copy", className: "sprout-glass-banner-copy", children: [_jsx("p", { id: titleId, "data-slot": "glass-banner-title", className: "sprout-glass-banner-title", children: title }), hasCaption && (_jsx("p", { id: captionId, "data-slot": "glass-banner-caption", className: "sprout-glass-banner-caption", children: caption }))] }), _jsx("ul", { "data-slot": "glass-banner-chips", className: "sprout-glass-banner-chips", "aria-labelledby": hasCaption ? captionId : titleId, children: children })] }));
+}
+const clamp = (value, limit) => Math.max(-limit, Math.min(limit, value));
+const prefersReducedMotion = () => typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+ * A glass pill that can be dragged with a pointer and springs back on
+ * release, stretching with its speed. The drag is play only: chips are not
+ * controls and take no focus. With reduced motion the chip neither floats
+ * nor springs; it snaps home on release.
+ */
+export function GlassChip({ icon, className, children, ref, ...props }) {
+    const chip = useRef(null);
+    useImperativeHandle(ref, () => chip.current, []);
+    useEffect(() => {
+        const element = chip.current;
+        if (!element)
+            return;
+        let x = 0, y = 0, vx = 0, vy = 0, targetX = 0, targetY = 0;
+        let startX = 0, startY = 0, pointer = null, frame = 0;
+        const paint = () => {
+            const speed = Math.hypot(vx, vy);
+            const stretch = Math.min(speed / 70, 0.22);
+            const angle = Math.atan2(vy, vx);
+            element.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad) scale(${1 + stretch}, ${1 - stretch * 0.55}) rotate(${-angle}rad) rotate(${clamp(vx * 0.35, 10)}deg) skewX(${clamp(-vx * 0.25, 8)}deg)`;
+        };
+        const rest = () => {
+            x = y = vx = vy = 0;
+            element.style.transform = "";
+            element.removeAttribute("data-dragging");
+            frame = 0;
+        };
+        const tick = () => {
+            if (pointer !== null) {
+                vx = (targetX - x) * 0.28;
+                vy = (targetY - y) * 0.28;
+            }
+            else {
+                vx = (vx - x * 0.09) * 0.82;
+                vy = (vy - y * 0.09) * 0.82;
+                if (Math.abs(x) + Math.abs(y) + Math.abs(vx) + Math.abs(vy) < 0.05) {
+                    rest();
+                    return;
+                }
+            }
+            x += vx;
+            y += vy;
+            paint();
+            frame = requestAnimationFrame(tick);
+        };
+        const run = () => {
+            if (!frame)
+                frame = requestAnimationFrame(tick);
+        };
+        const down = (event) => {
+            if (event.button !== 0 || pointer !== null)
+                return;
+            pointer = event.pointerId;
+            element.setPointerCapture?.(pointer);
+            element.setAttribute("data-dragging", "");
+            startX = event.clientX - x;
+            startY = event.clientY - y;
+            targetX = x;
+            targetY = y;
+            run();
+        };
+        const move = (event) => {
+            if (event.pointerId !== pointer)
+                return;
+            targetX = event.clientX - startX;
+            targetY = event.clientY - startY;
+        };
+        const up = (event) => {
+            if (event.pointerId !== pointer)
+                return;
+            pointer = null;
+            if (prefersReducedMotion()) {
+                cancelAnimationFrame(frame);
+                rest();
+                return;
+            }
+            run();
+        };
+        element.addEventListener("pointerdown", down);
+        element.addEventListener("pointermove", move);
+        element.addEventListener("pointerup", up);
+        element.addEventListener("pointercancel", up);
+        element.addEventListener("lostpointercapture", up);
+        return () => {
+            cancelAnimationFrame(frame);
+            element.removeEventListener("pointerdown", down);
+            element.removeEventListener("pointermove", move);
+            element.removeEventListener("pointerup", up);
+            element.removeEventListener("pointercancel", up);
+            element.removeEventListener("lostpointercapture", up);
+        };
+    }, []);
+    return (_jsx("li", { ref: chip, "data-slot": "glass-chip", ...props, className: cn("sprout-glass-chip", className), children: _jsxs("span", { "data-slot": "glass-chip-surface", className: "sprout-glass-chip-surface", children: [icon && (_jsx("span", { "data-slot": "glass-chip-icon", className: "sprout-glass-chip-icon", children: icon })), _jsx("span", { "data-slot": "glass-chip-label", className: "sprout-glass-chip-label", children: children })] }) }));
+}

package/dist/components/gradient-banner.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentProps } from "react";
+export declare const gradientBannerVariantNames: readonly ["aurora", "citrus", "lagoon", "iris", "cobalt", "mint"];
+export declare const gradientBannerSizeNames: readonly ["sm", "md", "lg", "xl"];
+export declare const gradientBannerPanelToneNames: readonly ["light", "dark"];
+export type GradientBannerVariant = (typeof gradientBannerVariantNames)[number];
+export type GradientBannerSize = (typeof gradientBannerSizeNames)[number];
+export type GradientBannerPanelTone = (typeof gradientBannerPanelToneNames)[number];
+export interface GradientBannerProps extends ComponentProps<"div"> {
+    /** Color story of the art. Defaults to `"aurora"`. */
+    variant?: GradientBannerVariant | undefined;
+    /** `sm` 96px, `md` 160px, `lg` 240px (default), `xl` 360px minimum height. */
+    size?: GradientBannerSize | undefined;
+    /** Film grain over the art. Defaults to `true`. */
+    texture?: boolean | undefined;
+}
+/**
+ * Decorative gradient art with centered content on top. The art is hidden from
+ * assistive technology; only children are announced.
+ */
+export declare function GradientBanner({ variant, size, texture, className, children, ...props }: GradientBannerProps): import("react").JSX.Element;
+export interface GradientBannerPanelProps extends ComponentProps<"div"> {
+    /** `"light"` paper (default) or `"dark"` night surface. */
+    tone?: GradientBannerPanelTone | undefined;
+}
+/** A solid surface that keeps text readable on any banner variant. */
+export declare function GradientBannerPanel({ tone, className, ...props }: GradientBannerPanelProps): import("react").JSX.Element;
+/** A pill label that adapts to the panel tone around it. */
+export declare function GradientBannerBadge({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export interface GradientBannerProgressProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Percent complete. Values outside 0–100 are clamped. */
+    value: number;
+}
+/**
+ * A thin `progressbar` in the current text color. Name it with `aria-label`
+ * or `aria-labelledby`.
+ */
+export declare function GradientBannerProgress({ value, className, style, ...props }: GradientBannerProgressProps): import("react").JSX.Element;

package/dist/components/gradient-banner.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useId } from "react";
+import { cn } from "../internal/classes.js";
+export const gradientBannerVariantNames = [
+    "aurora",
+    "citrus",
+    "lagoon",
+    "iris",
+    "cobalt",
+    "mint",
+];
+export const gradientBannerSizeNames = ["sm", "md", "lg", "xl"];
+export const gradientBannerPanelToneNames = ["light", "dark"];
+/**
+ * Decorative gradient art with centered content on top. The art is hidden from
+ * assistive technology; only children are announced.
+ */
+export function GradientBanner({ variant = "aurora", size = "lg", texture = true, className, children, ...props }) {
+    const grainId = useId();
+    const hasContent = Children.toArray(children).length > 0;
+    return (_jsxs("div", { "data-slot": "gradient-banner", "data-variant": variant, "data-size": size, ...props, className: cn("sprout-gradient-banner", className), children: [_jsxs("div", { "data-slot": "gradient-banner-art", className: "sprout-gradient-banner-art", "aria-hidden": "true", children: [_jsx("span", { className: "sprout-gradient-banner-fold" }), _jsx("span", { className: "sprout-gradient-banner-light" }), texture && (_jsxs("svg", { "data-slot": "gradient-banner-texture", className: "sprout-gradient-banner-texture", "aria-hidden": "true", focusable: "false", children: [_jsxs("filter", { id: grainId, x: "0%", y: "0%", width: "100%", height: "100%", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.82", numOctaves: "3", stitchTiles: "stitch", seed: "17" }), _jsx("feColorMatrix", { type: "saturate", values: "0" })] }), _jsx("rect", { width: "100%", height: "100%", filter: `url(#${grainId})` })] }))] }), hasContent && (_jsx("div", { "data-slot": "gradient-banner-content", className: "sprout-gradient-banner-content", children: children }))] }));
+}
+/** A solid surface that keeps text readable on any banner variant. */
+export function GradientBannerPanel({ tone = "light", className, ...props }) {
+    return (_jsx("div", { "data-slot": "gradient-banner-panel", "data-tone": tone, ...props, className: cn("sprout-gradient-banner-panel", className) }));
+}
+/** A pill label that adapts to the panel tone around it. */
+export function GradientBannerBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "gradient-banner-badge", ...props, className: cn("sprout-gradient-banner-badge", className) }));
+}
+/**
+ * A thin `progressbar` in the current text color. Name it with `aria-label`
+ * or `aria-labelledby`.
+ */
+export function GradientBannerProgress({ value, className, style, ...props }) {
+    const percent = Number.isFinite(value)
+        ? Math.min(Math.max(value, 0), 100)
+        : 0;
+    return (_jsx("div", { "data-slot": "gradient-banner-progress", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(percent), ...props, style: {
+            ...style,
+            ["--sprout-gradient-banner-progress"]: percent / 100,
+        }, className: cn("sprout-gradient-banner-progress", className), children: _jsx("div", { className: "sprout-gradient-banner-progress-fill" }) }));
+}

package/dist/components/hover-card.d.ts

@@ -0,0 +1,27 @@
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+export type HoverCardProps = PreviewCardPrimitive.Root.Props;
+/**
+ * A card that previews what a link points to. It opens when the link is
+ * hovered or keyboard-focused and closes on Escape, blur, or pointer leave.
+ */
+export declare function HoverCard(props: HoverCardProps): import("react").JSX.Element;
+export type HoverCardTriggerProps = PreviewCardPrimitive.Trigger.Props;
+/**
+ * The link that opens the card. It renders an `a` by default; pass your own
+ * link or router link through `render`. Takes `delay` (600ms) and
+ * `closeDelay` (300ms).
+ */
+export declare function HoverCardTrigger({ className, ...props }: HoverCardTriggerProps): import("react").JSX.Element;
+type PositionerProps = Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface HoverCardContentProps extends PreviewCardPrimitive.Popup.Props, PositionerProps {
+    /** Keep the card in the DOM while closed. */
+    keepMounted?: PreviewCardPrimitive.Portal.Props["keepMounted"];
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: PreviewCardPrimitive.Portal.Props["container"];
+}
+/**
+ * The 16rem floating card. It renders its own portal and positioner, so place
+ * it directly inside `HoverCard`.
+ */
+export declare function HoverCardContent({ side, sideOffset, align, alignOffset, collisionPadding, collisionAvoidance, sticky, positionMethod, anchor, keepMounted, container, className, ...props }: HoverCardContentProps): import("react").JSX.Element;
+export {};

package/dist/components/hover-card.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import { stateClassName } from "../internal/classes.js";
+/**
+ * A card that previews what a link points to. It opens when the link is
+ * hovered or keyboard-focused and closes on Escape, blur, or pointer leave.
+ */
+export function HoverCard(props) {
+    return _jsx(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+/**
+ * The link that opens the card. It renders an `a` by default; pass your own
+ * link or router link through `render`. Takes `delay` (600ms) and
+ * `closeDelay` (300ms).
+ */
+export function HoverCardTrigger({ className, ...props }) {
+    return (_jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props, className: stateClassName("sprout-hover-card-trigger", className) }));
+}
+/**
+ * The 16rem floating card. It renders its own portal and positioner, so place
+ * it directly inside `HoverCard`.
+ */
+export function HoverCardContent({ side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, anchor, keepMounted = false, container, className, ...props }) {
+    return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", keepMounted: keepMounted, container: container, children: _jsx(PreviewCardPrimitive.Positioner, { className: "sprout-hover-card-positioner", anchor: anchor, align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", ...props, className: stateClassName("sprout-hover-card-content", className) }) }) }));
+}

package/dist/components/input-group.d.ts

@@ -0,0 +1,68 @@
+import type { ComponentProps } from "react";
+import { type ButtonProps } from "./button.js";
+import { type InputProps } from "./input.js";
+import { type TextareaProps } from "./textarea.js";
+export declare const inputGroupSizeNames: readonly ["default", "lg"];
+export declare const inputGroupVariantNames: readonly ["default", "composer", "question-composer"];
+export declare const inputGroupAddonAlignNames: readonly ["inline-start", "inline-end", "block-start", "block-end"];
+export declare const inputGroupButtonSizeNames: readonly ["xs", "sm", "icon-xs", "icon-sm"];
+export type InputGroupSize = (typeof inputGroupSizeNames)[number];
+export type InputGroupVariant = (typeof inputGroupVariantNames)[number];
+export type InputGroupAddonAlign = (typeof inputGroupAddonAlignNames)[number];
+export type InputGroupButtonSize = (typeof inputGroupButtonSizeNames)[number];
+export interface InputGroupProps extends ComponentProps<"div"> {
+    /** `default` is 32px tall with 14px text. `lg` is 44px with 16px text. */
+    size?: InputGroupSize | null;
+    /**
+     * `default` is a single field row. `composer` stacks a message box with
+     * block additions on a raised card. `question-composer` is the same box
+     * with a quieter border while an agent question waits for an answer.
+     */
+    variant?: InputGroupVariant | null;
+}
+/**
+ * One bordered field made of a control and its additions: icons, text,
+ * shortcuts, and buttons. The group draws the border, fill, focus ring, and
+ * invalid and disabled states for the control inside it. Any element marked
+ * `data-slot="input-group-control"`, such as `InputGroupInput`,
+ * `InputGroupTextarea`, or a rich text editor, drives those states.
+ */
+export declare function InputGroup({ size, variant, className, ...props }: InputGroupProps): import("react").JSX.Element;
+export interface InputGroupAddonProps extends ComponentProps<"div"> {
+    /** Inline additions sit beside the control; block additions span a row above or below it. */
+    align?: InputGroupAddonAlign | null;
+}
+/**
+ * An icon, text, shortcut, or button area inside an `InputGroup`. It may come
+ * before or after the control in markup; `align` places it. Clicking anywhere
+ * in it except a button focuses the control, like a label.
+ */
+export declare function InputGroupAddon({ align, className, onClick, ...props }: InputGroupAddonProps): import("react").JSX.Element;
+export interface InputGroupButtonProps extends Omit<ButtonProps, "size" | "type"> {
+    /** `xs` and `sm` fit a label; `icon-xs` (24px) and `icon-sm` (28px) are square. */
+    size?: InputGroupButtonSize | null;
+    type?: "button" | "submit" | "reset";
+}
+/**
+ * A compact Sprout `Button` sized to sit inside an `InputGroup` addon. It is
+ * `ghost` and `xs` by default, and a plain `type="button"` so it never
+ * submits a form by accident. Use `render` to make it a menu, popover, or
+ * combobox trigger.
+ */
+export declare function InputGroupButton({ size, variant, type, className, ...props }: InputGroupButtonProps): import("react").JSX.Element;
+export type InputGroupTextProps = ComponentProps<"span">;
+/** Muted text or an icon with text inside an addon, such as a URL prefix or a unit. */
+export declare function InputGroupText({ className, ...props }: InputGroupTextProps): import("react").JSX.Element;
+export type InputGroupInputProps = Omit<InputProps, "scale">;
+/**
+ * A Sprout `Input` without its own border, fill, or ring, so the group draws
+ * them. It reads a surrounding `Field` the same way `Input` does.
+ */
+export declare function InputGroupInput({ className, ...props }: InputGroupInputProps): import("react").JSX.Element;
+export type InputGroupTextareaProps = Omit<TextareaProps, "variant">;
+/**
+ * A Sprout `Textarea` without its own border, fill, or ring, so the group
+ * draws them. It grows with its content from a 96px floor and never resizes
+ * by hand.
+ */
+export declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): import("react").JSX.Element;

package/dist/components/input-group.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+export const inputGroupSizeNames = ["default", "lg"];
+export const inputGroupVariantNames = [
+    "default",
+    "composer",
+    "question-composer",
+];
+export const inputGroupAddonAlignNames = [
+    "inline-start",
+    "inline-end",
+    "block-start",
+    "block-end",
+];
+export const inputGroupButtonSizeNames = [
+    "xs",
+    "sm",
+    "icon-xs",
+    "icon-sm",
+];
+/**
+ * One bordered field made of a control and its additions: icons, text,
+ * shortcuts, and buttons. The group draws the border, fill, focus ring, and
+ * invalid and disabled states for the control inside it. Any element marked
+ * `data-slot="input-group-control"`, such as `InputGroupInput`,
+ * `InputGroupTextarea`, or a rich text editor, drives those states.
+ */
+export function InputGroup({ size, variant, className, ...props }) {
+    const scale = size ?? "default";
+    const kind = variant ?? "default";
+    return (_jsx("div", { "data-slot": "input-group", role: "group", "data-size": scale, "data-variant": kind, ...props, className: cn("sprout-input-group", `sprout-input-group-size-${scale}`, `sprout-input-group-variant-${kind}`, className) }));
+}
+const controlSelector = '[data-slot="input-group-control"], input, textarea, [contenteditable="true"]';
+/**
+ * An icon, text, shortcut, or button area inside an `InputGroup`. It may come
+ * before or after the control in markup; `align` places it. Clicking anywhere
+ * in it except a button focuses the control, like a label.
+ */
+export function InputGroupAddon({ align, className, onClick, ...props }) {
+    const side = align ?? "inline-start";
+    const focusControl = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        const target = event.target;
+        if (target.closest("button, a[href], [role='button'], input, textarea"))
+            return;
+        const control = event.currentTarget.parentElement?.querySelector(controlSelector);
+        if (!control || control.matches(":disabled"))
+            return;
+        control.focus();
+    };
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": side, ...props, onClick: focusControl, className: cn("sprout-input-group-addon", `sprout-input-group-addon-align-${side}`, className) }));
+}
+/**
+ * A compact Sprout `Button` sized to sit inside an `InputGroup` addon. It is
+ * `ghost` and `xs` by default, and a plain `type="button"` so it never
+ * submits a form by accident. Use `render` to make it a menu, popover, or
+ * combobox trigger.
+ */
+export function InputGroupButton({ size, variant, type = "button", className, ...props }) {
+    const scale = size ?? "xs";
+    const kind = variant ?? "ghost";
+    return (_jsx(Button, { type: type, variant: kind, "data-size": scale, "data-variant": kind, ...props, className: (state) => cn("sprout-input-group-button", `sprout-input-group-button-size-${scale}`, typeof className === "function" ? className(state) : className) }));
+}
+/** Muted text or an icon with text inside an addon, such as a URL prefix or a unit. */
+export function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "input-group-text", ...props, className: cn("sprout-input-group-text", className) }));
+}
+/**
+ * A Sprout `Input` without its own border, fill, or ring, so the group draws
+ * them. It reads a surrounding `Field` the same way `Input` does.
+ */
+export function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", ...props, className: (state) => cn("sprout-input-group-input", typeof className === "function" ? className(state) : className) }));
+}
+/**
+ * A Sprout `Textarea` without its own border, fill, or ring, so the group
+ * draws them. It grows with its content from a 96px floor and never resizes
+ * by hand.
+ */
+export function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { variant: "embedded", "data-slot": "input-group-control", ...props, className: cn("sprout-input-group-textarea", className) }));
+}

package/dist/components/input-otp.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+export type InputOTPState = OTPField.Root.State;
+export type InputOTPSlotState = OTPField.Input.State;
+type Invalid = boolean | "true" | "false" | "grammar" | "spelling";
+export interface InputOTPProps extends Omit<OTPField.Root.Props, "length" | "aria-invalid" | "children"> {
+    /** Number of character slots. Matches the slot indexes you render. */
+    maxLength: number;
+    /** Called with the new code on every edit, paste, or autofill. */
+    onChange?: ((value: string) => void) | undefined;
+    /** Marks every slot invalid and draws the danger ring on its group. */
+    "aria-invalid"?: Invalid | undefined;
+    children?: ReactNode;
+}
+/**
+ * A one-time code field on Base UI `OTPField`. Each slot is a real input, so
+ * typing, paste, autofill (`autoComplete="one-time-code"`), arrow keys, Home,
+ * End, Backspace, and Delete all work. `aria-label` names the whole code and
+ * its first slot; later slots are announced as "Character 2 of 6".
+ */
+export declare function InputOTP({ maxLength, onChange, onValueChange, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, validationType, ...props }: InputOTPProps): import("react").JSX.Element;
+export type InputOTPGroupProps = ComponentProps<"div">;
+/** Joins adjacent slots into one bordered segment. */
+export declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): import("react").JSX.Element;
+export interface InputOTPSlotProps extends Omit<OTPField.Input.Props, "aria-invalid"> {
+    /** Zero-based position of this slot in the code. */
+    index: number;
+    "aria-invalid"?: Invalid | undefined;
+}
+/**
+ * One character of the code. Render slots in index order; Base UI tracks
+ * focus and value by their DOM order.
+ */
+export declare function InputOTPSlot({ index, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, ...props }: InputOTPSlotProps): import("react").JSX.Element;
+export type InputOTPSeparatorProps = ComponentProps<typeof OTPField.Separator>;
+/** A dash between slot groups, such as `123–456`. */
+export declare function InputOTPSeparator({ className, children, ...props }: InputOTPSeparatorProps): import("react").JSX.Element;
+export {};

package/dist/components/input-otp.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+import { Minus } from "reicon-react/icons/Minus";
+import { cn, stateClassName } from "../internal/classes.js";
+const InputOTPContext = createContext(null);
+const isInvalid = (value) => value === true || value === "true";
+/**
+ * A one-time code field on Base UI `OTPField`. Each slot is a real input, so
+ * typing, paste, autofill (`autoComplete="one-time-code"`), arrow keys, Home,
+ * End, Backspace, and Delete all work. `aria-label` names the whole code and
+ * its first slot; later slots are announced as "Character 2 of 6".
+ */
+export function InputOTP({ maxLength, onChange, onValueChange, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, validationType = "numeric", ...props }) {
+    const generated = useId();
+    const labelId = ariaLabelledBy ?? (ariaLabel ? `${generated}-label` : undefined);
+    const invalid = isInvalid(ariaInvalid);
+    return (_jsx(InputOTPContext.Provider, { value: { length: maxLength, labelId, invalid }, children: _jsxs(OTPField.Root, { "data-slot": "input-otp", "data-invalid": invalid ? "" : undefined, length: maxLength, validationType: validationType, "aria-labelledby": labelId, onValueChange: (value, details) => {
+                onValueChange?.(value, details);
+                onChange?.(value);
+            }, ...props, className: stateClassName("sprout-input-otp", className), children: [ariaLabel && !ariaLabelledBy ? (_jsx("span", { id: labelId, className: "sprout-input-otp-sr-only", children: ariaLabel })) : null, children] }) }));
+}
+/** Joins adjacent slots into one bordered segment. */
+export function InputOTPGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-otp-group", ...props, className: cn("sprout-input-otp-group", className) }));
+}
+/**
+ * One character of the code. Render slots in index order; Base UI tracks
+ * focus and value by their DOM order.
+ */
+export function InputOTPSlot({ index, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, ...props }) {
+    const context = useContext(InputOTPContext);
+    const length = context?.length ?? index + 1;
+    const invalid = ariaInvalid === undefined ? context?.invalid : isInvalid(ariaInvalid);
+    return (_jsx(OTPField.Input, { "data-slot": "input-otp-slot", "data-index": index, "aria-labelledby": ariaLabelledBy ?? (index === 0 ? context?.labelId : undefined), "aria-label": index === 0
+            ? undefined
+            : (ariaLabel ?? `Character ${index + 1} of ${length}`), "aria-invalid": invalid || undefined, ...props, className: stateClassName("sprout-input-otp-slot", className) }));
+}
+/** A dash between slot groups, such as `123–456`. */
+export function InputOTPSeparator({ className, children, ...props }) {
+    return (_jsx(OTPField.Separator, { "data-slot": "input-otp-separator", orientation: "vertical", ...props, className: stateClassName("sprout-input-otp-separator", className), children: children ?? _jsx(Minus, { "aria-hidden": "true" }) }));
+}

package/dist/components/input.d.ts

@@ -0,0 +1,16 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+export declare const inputScaleNames: readonly ["default", "lg"];
+export type InputScale = (typeof inputScaleNames)[number];
+export type InputState = BaseInput.State;
+export interface InputProps extends BaseInput.Props {
+    /** `default` is 32px tall with 14px text. `lg` is 44px with 16px text. */
+    scale?: InputScale | null;
+}
+/**
+ * A single-line text field on Base UI `Input`. It takes every native input
+ * prop, such as `type`, `value`, `required`, and `ref`. Inside a Base UI
+ * `Field.Root` it gets its id, label, description, and invalid and disabled
+ * states from the field. Inside a Sprout `Field` it reads the same from
+ * `useFieldControl`.
+ */
+export declare function Input({ scale, className, ...rest }: InputProps): import("react").JSX.Element;

package/dist/components/input.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { cn, stateClassName } from "../internal/classes.js";
+import { useFieldControl } from "./field.js";
+export const inputScaleNames = ["default", "lg"];
+/**
+ * A single-line text field on Base UI `Input`. It takes every native input
+ * prop, such as `type`, `value`, `required`, and `ref`. Inside a Base UI
+ * `Field.Root` it gets its id, label, description, and invalid and disabled
+ * states from the field. Inside a Sprout `Field` it reads the same from
+ * `useFieldControl`.
+ */
+export function Input({ scale, className, ...rest }) {
+    const props = useFieldControl(rest);
+    const size = scale ?? "default";
+    return (_jsx(BaseInput, { "data-slot": "input", "data-scale": size, ...props, className: stateClassName(cn("sprout-input", `sprout-input-scale-${size}`), className) }));
+}

package/dist/components/kbd.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "react";
+export declare const kbdVariantNames: readonly ["default", "outline"];
+export type KbdVariant = (typeof kbdVariantNames)[number];
+export interface KbdProps extends ComponentProps<"kbd"> {
+    /** `"outline"` adds a border on the surface color, for hints on tinted strips and selected rows. */
+    variant?: KbdVariant;
+}
+/** One keyboard key, such as `⌘`, `Enter`, or `Esc`. */
+export declare function Kbd({ variant, className, ...props }: KbdProps): import("react").JSX.Element;
+export type KbdGroupProps = ComponentProps<"kbd">;
+/** Keys pressed together, such as `⌘` `K`. */
+export declare function KbdGroup({ className, ...props }: KbdGroupProps): import("react").JSX.Element;

package/dist/components/kbd.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+export const kbdVariantNames = ["default", "outline"];
+/** One keyboard key, such as `⌘`, `Enter`, or `Esc`. */
+export function Kbd({ variant = "default", className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", "data-variant": variant, className: cn("sprout-kbd", className), ...props }));
+}
+/** Keys pressed together, such as `⌘` `K`. */
+export function KbdGroup({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd-group", className: cn("sprout-kbd-group", className), ...props }));
+}

package/dist/components/label.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+export type LabelProps = ComponentProps<"label">;
+/**
+ * Names one form control. Point `htmlFor` at a control's `id`, or wrap a
+ * checkbox, switch, or radio with its text. A label wrapping a text control,
+ * such as a textarea, stacks the text above it.
+ */
+export declare function Label({ className, ...props }: LabelProps): import("react").JSX.Element;

package/dist/components/label.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+/**
+ * Names one form control. Point `htmlFor` at a control's `id`, or wrap a
+ * checkbox, switch, or radio with its text. A label wrapping a text control,
+ * such as a textarea, stacks the text above it.
+ */
+export function Label({ className, ...props }) {
+    return (_jsx("label", { "data-slot": "label", className: cn("sprout-label", className), ...props }));
+}

package/dist/components/mention-list.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentProps, type ReactNode } from "react";
+export declare const mentionStatusToneNames: readonly ["loading", "empty", "error"];
+export type MentionStatusTone = (typeof mentionStatusToneNames)[number];
+export interface MentionListProps extends Omit<ComponentProps<"div">, "id" | "children"> {
+    /** The listbox id. Point the text field's `aria-controls` at it. */
+    id: string;
+    /** Names the listbox, such as “Files you can add”. */
+    label: string;
+    /** One or more `MentionStatus` rows shown under the options. */
+    status?: ReactNode;
+    /**
+     * Read by screen readers when it changes. A textarea keeps its textbox
+     * role, so this tells people the panel opened and how to use it.
+     */
+    announcement?: string | undefined;
+    /** `MentionOption` rows, or `MentionGroup`s of them. */
+    children?: ReactNode;
+}
+/**
+ * A suggestion panel for `@` and `/` triggers. The text field keeps focus and
+ * owns the arrow keys; it points `aria-activedescendant` at the active option.
+ */
+export declare function MentionList({ id, label, status, announcement, children, className, ...props }: MentionListProps): import("react").JSX.Element;
+export interface MentionOptionProps extends Omit<ComponentProps<"li">, "id" | "title" | "children" | "onSelect"> {
+    /** Unique id the text field uses in `aria-activedescendant`. */
+    id: string;
+    /** The keyboard-highlighted option. It scrolls into view when it becomes active. */
+    active: boolean;
+    onSelect: () => void;
+    /** A 16px icon, file icon, brand glyph, or small avatar. */
+    media?: ReactNode;
+    title: string;
+    description?: string | undefined;
+}
+export declare function MentionOption({ id, active, onSelect, media, title, description, className, ...props }: MentionOptionProps): import("react").JSX.Element;
+export interface MentionGroupProps {
+    /** The source, such as “Files” or “Google Drive”. */
+    label: string;
+    children: ReactNode;
+}
+/** A labelled run of options inside the same listbox, so arrow keys move across groups. */
+export declare function MentionGroup({ label, children }: MentionGroupProps): import("react").JSX.Element;
+export interface MentionStatusAction {
+    label: string;
+    onAction: () => void;
+}
+export interface MentionStatusProps {
+    /** `loading` adds a spinner; `error` is an alert in the danger color. */
+    tone: MentionStatusTone;
+    children: ReactNode;
+    /** A small outline button, usually Retry. */
+    action?: MentionStatusAction | undefined;
+}
+export declare function MentionStatus({ tone, children, action }: MentionStatusProps): import("react").JSX.Element;