@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/components/form.js

@@ -1,55 +1,51 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState, } from "react";
-import { cn } from "../internal/classes.js";
-import { Alert } from "./alert.js";
-import { Badge } from "./badge.js";
-import { Button, jumpTo, useActionControl, } from "./button.js";
-import { FieldsDisabled } from "./field.js";
-export const formFooterLayoutNames = ["bar", "stack", "compact"];
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../internal/classes.js';
+import { Alert } from './alert.js';
+import { Badge } from './badge.js';
+import { Button, jumpTo, useActionControl, } from './button.js';
+import { FieldsDisabled } from './field.js';
+export const formFooterLayoutNames = ['bar', 'stack', 'compact'];
 export const formSectionLevelNames = [2, 3];
 /**
  * A `noValidate` form that prevents the native submit, locks the fields inside
  * while `disabled`, and moves focus to the first invalid control after a
  * failed submit.
  */
-export function Form({ id, disabled = false, onSubmit, label, className, children, }) {
+export function Form({ id, disabled = false, onSubmit, label, className, children }) {
     const formRef = useRef(null);
     const [failedSubmits, setFailedSubmits] = useState(0);
     useEffect(() => {
-        const invalid = failedSubmits > 0
-            ? formRef.current?.querySelector('[aria-invalid="true"]')
-            : null;
+        const invalid = failedSubmits > 0 ? formRef.current?.querySelector('[aria-invalid="true"]') : null;
         if (invalid)
             jumpTo(invalid);
     }, [failedSubmits]);
-    return (_jsx(FieldsDisabled, { value: disabled, children: _jsx("form", { id: id, ref: formRef, "data-slot": "form", noValidate: true, "aria-label": label, className: cn("sprout-form", className), onSubmit: (event) => {
+    return (_jsx(FieldsDisabled, { value: disabled, children: _jsx("form", { id: id, ref: formRef, "data-slot": "form", noValidate: true, "aria-label": label, className: cn('sprout-form', className), onSubmit: event => {
                 event.preventDefault();
-                if (onSubmit() === "invalid")
-                    setFailedSubmits((count) => count + 1);
+                if (onSubmit() === 'invalid')
+                    setFailedSubmits(count => count + 1);
             }, children: children }) }));
 }
 /** A bordered, named region of a form with a title, description, and optional meta badge. */
-export function FormSection({ title, description, meta, label, id, level = 2, className, children, }) {
-    const Heading = level === 3 ? "h3" : "h2";
-    return (_jsxs("section", { id: id, "data-slot": "form-section", "aria-label": label ?? title, className: cn("sprout-form-section", className), children: [_jsxs("div", { className: "sprout-form-section-header", children: [_jsxs("div", { className: "sprout-form-section-text", children: [_jsx(Heading, { className: "sprout-form-section-title", children: title }), description && (_jsx("p", { className: "sprout-form-section-description", children: description }))] }), meta && _jsx(Badge, { variant: "secondary", children: meta })] }), _jsx("div", { className: "sprout-form-section-content", children: children })] }));
+export function FormSection({ title, description, meta, label, id, level = 2, className, children }) {
+    const Heading = level === 3 ? 'h3' : 'h2';
+    return (_jsxs("section", { id: id, "data-slot": "form-section", "aria-label": label ?? title, className: cn('sprout-form-section', className), children: [_jsxs("div", { className: "sprout-form-section-header", children: [_jsxs("div", { className: "sprout-form-section-text", children: [_jsx(Heading, { className: "sprout-form-section-title", children: title }), description && _jsx("p", { className: "sprout-form-section-description", children: description })] }), meta && _jsx(Badge, { variant: "secondary", children: meta })] }), _jsx("div", { className: "sprout-form-section-content", children: children })] }));
 }
 /**
  * The save area of a form: the submit with busy and blocked states, an
  * optional secondary submit and cancel, an unsaved-changes line, a note, and
  * an error alert.
  */
-export function FormFooter({ form, summary, submit, secondarySubmit, dirty, cancel, note, error, layout = "bar", className, children, }) {
+export function FormFooter({ form, summary, submit, secondarySubmit, dirty, cancel, note, error, layout = 'bar', className, children, }) {
     const action = useActionControl(submit.state);
-    const stack = layout === "stack";
-    const compact = layout === "compact";
-    const size = stack ? "lg" : "default";
-    const wide = stack ? "sprout-form-footer-wide" : undefined;
-    const save = (_jsx(Button, { type: "submit", form: form, size: size, className: wide, ...action.button, children: submit.state.kind === "busy" ? submit.pendingLabel : submit.label }));
+    const stack = layout === 'stack';
+    const compact = layout === 'compact';
+    const size = stack ? 'lg' : 'md';
+    const wide = stack ? 'sprout-form-footer-wide' : undefined;
+    const save = (_jsx(Button, { type: "submit", form: form, size: size, className: wide, ...action.button, children: submit.state.kind === 'busy' ? submit.pendingLabel : submit.label }));
     const secondary = secondarySubmit && (_jsx(Button, { type: "submit", form: form, size: size, variant: "outline", className: wide, disabled: secondarySubmit.disabled, onClick: secondarySubmit.onSelect, children: secondarySubmit.label }));
-    const cancelButton = !cancel ? null : cancel.kind === "leave" ? (_jsx(Button, { variant: "outline", size: size, className: wide, nativeButton: false, render: cancel.link, children: cancel.label })) : dirty && submit.state.kind !== "busy" ? (_jsx(Button, { variant: "outline", size: size, className: wide, onClick: cancel.onReset, children: cancel.label })) : null;
+    const cancelButton = !cancel ? null : cancel.kind === 'leave' ? (_jsx(Button, { variant: "outline", size: size, className: wide, nativeButton: false, render: cancel.link, children: cancel.label })) : dirty && submit.state.kind !== 'busy' ? (_jsx(Button, { variant: "outline", size: size, className: wide, onClick: cancel.onReset, children: cancel.label })) : null;
     const status = (_jsxs(_Fragment, { children: [dirty && (_jsxs("p", { className: "sprout-form-footer-dirty", children: [_jsx("span", { "aria-hidden": "true", className: "sprout-form-footer-dirty-dot" }), "Unsaved changes"] })), note && _jsx("p", { className: "sprout-form-footer-note", children: note })] }));
-    return (_jsxs("div", { "data-slot": "form-footer", "data-layout": layout, className: cn("sprout-form-footer", className), children: [stack ? (_jsxs(_Fragment, { children: [status, _jsxs("div", { className: "sprout-form-footer-stack", children: [save, secondary, cancelButton] })] })) : (_jsxs("div", { className: "sprout-form-footer-row", children: [_jsx("div", { className: compact && !summary
-                            ? "sprout-form-footer-sr-only"
-                            : "sprout-form-footer-status", children: summary ?? status }), _jsxs("div", { className: "sprout-form-footer-actions", children: [compact && children, cancelButton, secondary, save] })] })), action.reason, error && _jsx(Alert, { variant: "destructive", children: error }), !compact && children] }));
+    return (_jsxs("div", { "data-slot": "form-footer", "data-layout": layout, className: cn('sprout-form-footer', className), children: [stack ? (_jsxs(_Fragment, { children: [status, _jsxs("div", { className: "sprout-form-footer-stack", children: [save, secondary, cancelButton] })] })) : (_jsxs("div", { className: "sprout-form-footer-row", children: [_jsx("div", { className: compact && !summary ? 'sprout-form-footer-sr-only' : 'sprout-form-footer-status', children: summary ?? status }), _jsxs("div", { className: "sprout-form-footer-actions", children: [compact && children, cancelButton, secondary, save] })] })), action.reason, error && _jsx(Alert, { variant: "destructive", children: error }), !compact && children] }));
 }

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

@@ -1,5 +1,5 @@
-import { type ComponentProps, type ReactNode } from "react";
-export interface GlassBannerProps extends Omit<ComponentProps<"div">, "title" | "children"> {
+import { type ComponentProps, type ReactNode } from 'react';
+export interface GlassBannerProps extends Omit<ComponentProps<'div'>, 'title' | 'children'> {
     /** The headline on the glass. */
     title: ReactNode;
     /** A quieter line under the title. It also names the chip list. */
@@ -13,7 +13,7 @@ export interface GlassBannerProps extends Omit<ComponentProps<"div">, "title" |
  * by the caption, or by the title when there is no caption.
  */
 export declare function GlassBanner({ title, caption, className, children, ...props }: GlassBannerProps): import("react").JSX.Element;
-export interface GlassChipProps extends Omit<ComponentProps<"li">, "children"> {
+export interface GlassChipProps extends Omit<ComponentProps<'li'>, 'children'> {
     /** A 28px round badge before the text, such as a brand glyph or icon. */
     icon?: ReactNode;
     children: ReactNode;

package/dist/components/glass-banner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useImperativeHandle, useRef, } from "react";
-import { cn } from "../internal/classes.js";
+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
@@ -10,16 +10,13 @@ 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 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;
+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
@@ -43,8 +40,8 @@ export function GlassChip({ icon, className, children, ref, ...props }) {
         };
         const rest = () => {
             x = y = vx = vy = 0;
-            element.style.transform = "";
-            element.removeAttribute("data-dragging");
+            element.style.transform = '';
+            element.removeAttribute('data-dragging');
             frame = 0;
         };
         const tick = () => {
@@ -74,7 +71,7 @@ export function GlassChip({ icon, className, children, ref, ...props }) {
                 return;
             pointer = event.pointerId;
             element.setPointerCapture?.(pointer);
-            element.setAttribute("data-dragging", "");
+            element.setAttribute('data-dragging', '');
             startX = event.clientX - x;
             startY = event.clientY - y;
             targetX = x;
@@ -98,19 +95,19 @@ export function GlassChip({ icon, className, children, ref, ...props }) {
             }
             run();
         };
-        element.addEventListener("pointerdown", down);
-        element.addEventListener("pointermove", move);
-        element.addEventListener("pointerup", up);
-        element.addEventListener("pointercancel", up);
-        element.addEventListener("lostpointercapture", up);
+        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);
+            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 })] }) }));
+    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

@@ -1,14 +1,14 @@
-import { type ComponentProps } from "react";
+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 gradientBannerSizeNames: readonly ["sm", "md", "lg"];
 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"> {
+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. */
+    /** `sm` 96px, `md` 160px, `lg` 240px (default) minimum height. */
     size?: GradientBannerSize | undefined;
     /** Film grain over the art. Defaults to `true`. */
     texture?: boolean | undefined;
@@ -18,15 +18,15 @@ export interface GradientBannerProps extends ComponentProps<"div"> {
  * 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"> {
+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"> {
+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;
 }

package/dist/components/gradient-banner.js

@@ -1,43 +1,34 @@
 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"];
+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'];
+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 }) {
+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 }))] }));
+    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) }));
+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) }));
+    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;
+    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" }) }));
+            ['--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

@@ -1,4 +1,4 @@
-import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+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
@@ -12,12 +12,12 @@ export type HoverCardTriggerProps = PreviewCardPrimitive.Trigger.Props;
  * `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">;
+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"];
+    keepMounted?: PreviewCardPrimitive.Portal.Props['keepMounted'];
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: PreviewCardPrimitive.Portal.Props["container"];
+    container?: PreviewCardPrimitive.Portal.Props['container'];
 }
 /**
  * The 16rem floating card. It renders its own portal and positioner, so place

package/dist/components/hover-card.js

@@ -1,7 +1,7 @@
-"use client";
+'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";
+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.
@@ -15,12 +15,12 @@ export function HoverCard(props) {
  * `closeDelay` (300ms).
  */
 export function HoverCardTrigger({ className, ...props }) {
-    return (_jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props, className: stateClassName("sprout-hover-card-trigger", className) }));
+    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) }) }) }));
+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

@@ -1,17 +1,17 @@
-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"];
+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 ["md", "sm", "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 declare const inputGroupButtonSizeNames: readonly ["md", "icon"];
 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. */
+export interface InputGroupProps extends ComponentProps<'div'> {
+    /** `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
     size?: InputGroupSize | null;
     /**
      * `default` is a single field row. `composer` stacks a message box with
@@ -28,7 +28,7 @@ export interface InputGroupProps extends ComponentProps<"div"> {
  * `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"> {
+export interface InputGroupAddonProps extends ComponentProps<'div'> {
     /** Inline additions sit beside the control; block additions span a row above or below it. */
     align?: InputGroupAddonAlign | null;
 }
@@ -38,28 +38,28 @@ export interface InputGroupAddonProps extends ComponentProps<"div"> {
  * 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. */
+export interface InputGroupButtonProps extends Omit<ButtonProps, 'size' | 'type'> {
+    /** `md` fits a label; `icon` is square. Both follow the group height. */
     size?: InputGroupButtonSize | null;
-    type?: "button" | "submit" | "reset";
+    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
+ * A compact Sprout `Button` sized to sit inside an `InputGroup` addon. Its
+ * height follows the group, 4px in from each edge. It is `ghost` and a plain
+ * `type="button"` by default, 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">;
+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">;
+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">;
+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

package/dist/components/input-group.js

@@ -1,27 +1,13 @@
-"use client";
+'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",
-];
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Textarea } from './textarea.js';
+export const inputGroupSizeNames = ['md', 'sm', 'lg'];
+export const inputGroupVariantNames = ['default', 'composer', 'question-composer'];
+export const inputGroupAddonAlignNames = ['inline-start', 'inline-end', 'block-start', 'block-end'];
+export const inputGroupButtonSizeNames = ['md', 'icon'];
 /**
  * One bordered field made of a control and its additions: icons, text,
  * shortcuts, and buttons. The group draws the border, fill, focus ring, and
@@ -30,9 +16,9 @@ export const inputGroupButtonSizeNames = [
  * `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 scale = size ?? 'md';
+    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"]';
 /**
@@ -41,7 +27,7 @@ const controlSelector = '[data-slot="input-group-control"], input, textarea, [co
  * in it except a button focuses the control, like a label.
  */
 export function InputGroupAddon({ align, className, onClick, ...props }) {
-    const side = align ?? "inline-start";
+    const side = align ?? 'inline-start';
     const focusControl = (event) => {
         onClick?.(event);
         if (event.defaultPrevented)
@@ -50,33 +36,33 @@ export function InputGroupAddon({ align, className, onClick, ...props }) {
         if (target.closest("button, a[href], [role='button'], input, textarea"))
             return;
         const control = event.currentTarget.parentElement?.querySelector(controlSelector);
-        if (!control || control.matches(":disabled"))
+        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) }));
+    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
+ * A compact Sprout `Button` sized to sit inside an `InputGroup` addon. Its
+ * height follows the group, 4px in from each edge. It is `ghost` and a plain
+ * `type="button"` by default, 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) }));
+export function InputGroupButton({ size, variant, type = 'button', className, ...props }) {
+    const scale = size ?? 'md';
+    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) }));
+    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) }));
+    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
@@ -84,5 +70,5 @@ export function InputGroupInput({ className, ...props }) {
  * 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) }));
+    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

@@ -1,15 +1,19 @@
-import { type ComponentProps, type ReactNode } from "react";
-import { OTPField } from "@base-ui/react/otp-field";
+import { type ComponentProps, type ReactNode } from 'react';
+import { OTPField } from '@base-ui/react/otp-field';
+export declare const inputOTPSizeNames: readonly ["md", "sm", "lg"];
+export type InputOTPSize = (typeof inputOTPSizeNames)[number];
 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"> {
+type Invalid = boolean | 'true' | 'false' | 'grammar' | 'spelling';
+export interface InputOTPProps extends Omit<OTPField.Root.Props, 'length' | 'aria-invalid' | 'children' | 'size'> {
     /** Number of character slots. Matches the slot indexes you render. */
     maxLength: number;
+    /** Square slots: `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
+    size?: InputOTPSize | null;
     /** 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;
+    'aria-invalid'?: Invalid | undefined;
     children?: ReactNode;
 }
 /**
@@ -18,20 +22,20 @@ export interface InputOTPProps extends Omit<OTPField.Root.Props, "length" | "ari
  * 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">;
+export declare function InputOTP({ maxLength, size, 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"> {
+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;
+    '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 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;