@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/components/dialog.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { X } from "reicon-react/icons/X";
+import { cn, stateClassName } from "../internal/classes.js";
+import { Button } from "./button.js";
+export const dialogSizeNames = [
+    "default",
+    "form",
+    "split",
+    "fullscreen",
+];
+export const dialogPlacementNames = ["center", "top"];
+export function Dialog(props) {
+    return _jsx(DialogPrimitive.Root, { ...props });
+}
+export function DialogTrigger(props) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+export function DialogPortal(props) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+export function DialogClose(props) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+export function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", ...props, className: stateClassName("sprout-dialog-overlay", className) }));
+}
+/**
+ * The dialog surface. It renders its own portal and overlay, so place it
+ * directly inside `Dialog`.
+ */
+export function DialogContent({ className, children, showCloseButton = true, closeLabel = "Close", size = "default", placement = "center", container, ...props }) {
+    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", "data-size": size, "data-placement": size === "fullscreen" ? undefined : placement, ...props, className: stateClassName(cn("sprout-dialog-content", `sprout-dialog-${size}`), className), children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "sprout-dialog-close", "aria-label": closeLabel, render: _jsx(Button, { variant: "ghost", size: "icon-sm" }), children: _jsx(X, { size: 16, "aria-hidden": "true" }) }))] })] }));
+}
+function part(slot, base) {
+    return function DialogPart({ className, render, ref, ...props }) {
+        return useRender({
+            defaultTagName: "div",
+            ref,
+            render,
+            props: mergeProps({ "data-slot": slot, className: cn(base, className) }, props),
+            state: { slot },
+        });
+    };
+}
+/** Stacks the title and description. */
+export const DialogHeader = part("dialog-header", "sprout-dialog-header");
+/**
+ * The scrolling middle of a `form` dialog. It bleeds to the dialog edges so
+ * scrollbars and focus rings are not clipped.
+ */
+export const DialogBody = part("dialog-body", "sprout-dialog-body");
+/**
+ * A tinted action bar pinned to the bottom edge. Actions stack in reverse
+ * order on narrow screens and align right from 640px. A leading `<p>` becomes
+ * a hint that sits at the start.
+ */
+export function DialogFooter({ className, render, ref, showCloseButton = false, closeLabel = "Close", children, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        ref,
+        render,
+        props: mergeProps({
+            "data-slot": "dialog-footer",
+            className: cn("sprout-dialog-footer", className),
+            children: (_jsxs(_Fragment, { children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: closeLabel }))] })),
+        }, props),
+        state: { slot: "dialog-footer" },
+    });
+}
+export function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", ...props, className: stateClassName("sprout-dialog-title", className) }));
+}
+export function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", ...props, className: stateClassName("sprout-dialog-description", className) }));
+}

package/dist/components/direction.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tells Sprout's Base UI parts which way text reads, so arrow keys, sliding
+ * indicators, and popup sides follow it. It does not set the `dir` attribute;
+ * set `dir` on a wrapping element so CSS and the browser follow the same way.
+ */
+export { DirectionProvider, useDirection, type DirectionProviderProps, type TextDirection, } from "@base-ui/react/direction-provider";

package/dist/components/direction.js

@@ -0,0 +1,6 @@
+/**
+ * Tells Sprout's Base UI parts which way text reads, so arrow keys, sliding
+ * indicators, and popup sides follow it. It does not set the `dir` attribute;
+ * set `dir` on a wrapping element so CSS and the browser follow the same way.
+ */
+export { DirectionProvider, useDirection, } from "@base-ui/react/direction-provider";

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,62 @@
+import type { ComponentProps } from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+export declare const dropdownMenuContentSizeNames: readonly ["anchor", "menu"];
+export declare const dropdownMenuItemVariantNames: readonly ["default", "destructive"];
+export type DropdownMenuContentSize = (typeof dropdownMenuContentSizeNames)[number];
+export type DropdownMenuItemVariant = (typeof dropdownMenuItemVariantNames)[number];
+export type DropdownMenuProps = MenuPrimitive.Root.Props;
+export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;
+export type DropdownMenuPortalProps = MenuPrimitive.Portal.Props;
+export declare function DropdownMenuPortal(props: DropdownMenuPortalProps): import("react").JSX.Element;
+export type DropdownMenuTriggerProps = MenuPrimitive.Trigger.Props;
+export declare function DropdownMenuTrigger(props: DropdownMenuTriggerProps): import("react").JSX.Element;
+type PositionerProps = Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface DropdownMenuContentProps extends MenuPrimitive.Popup.Props, PositionerProps {
+    /**
+     * `anchor` matches the trigger width (at least 8rem). `menu` is a fixed
+     * 16rem panel for icon triggers and longer labels.
+     */
+    size?: DropdownMenuContentSize;
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: MenuPrimitive.Portal.Props["container"];
+}
+/**
+ * The menu surface. It renders its own portal and positioner, so place it
+ * directly inside `DropdownMenu` or `DropdownMenuSub`.
+ */
+export declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, collisionPadding, collisionAvoidance, sticky, positionMethod, size, container, className, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
+export type DropdownMenuGroupProps = MenuPrimitive.Group.Props;
+export declare function DropdownMenuGroup(props: DropdownMenuGroupProps): import("react").JSX.Element;
+interface Inset {
+    /** Indents the text to line up with items that have a leading icon. */
+    inset?: boolean;
+}
+export interface DropdownMenuLabelProps extends MenuPrimitive.GroupLabel.Props, Inset {
+}
+export declare function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
+export interface DropdownMenuItemProps extends MenuPrimitive.Item.Props, Inset {
+    variant?: DropdownMenuItemVariant;
+}
+export declare function DropdownMenuItem({ className, inset, variant, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+export type DropdownMenuSubProps = MenuPrimitive.SubmenuRoot.Props;
+export declare function DropdownMenuSub(props: DropdownMenuSubProps): import("react").JSX.Element;
+export interface DropdownMenuSubTriggerProps extends MenuPrimitive.SubmenuTrigger.Props, Inset {
+}
+export declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: DropdownMenuSubTriggerProps): import("react").JSX.Element;
+export type DropdownMenuSubContentProps = DropdownMenuContentProps;
+/** A nested menu surface. It opens to the side and sizes to its content. */
+export declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: DropdownMenuSubContentProps): import("react").JSX.Element;
+export interface DropdownMenuCheckboxItemProps extends MenuPrimitive.CheckboxItem.Props, Inset {
+}
+export declare function DropdownMenuCheckboxItem({ className, inset, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+export type DropdownMenuRadioGroupProps = MenuPrimitive.RadioGroup.Props;
+export declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export interface DropdownMenuRadioItemProps extends MenuPrimitive.RadioItem.Props, Inset {
+}
+export declare function DropdownMenuRadioItem({ className, inset, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+export type DropdownMenuSeparatorProps = MenuPrimitive.Separator.Props;
+export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
+export type DropdownMenuShortcutProps = ComponentProps<"span">;
+/** Right-aligned hint text, such as a keyboard shortcut. It does not bind keys. */
+export declare function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): import("react").JSX.Element;
+export {};

package/dist/components/dropdown-menu.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { cn, stateClassName } from "../internal/classes.js";
+export const dropdownMenuContentSizeNames = ["anchor", "menu"];
+export const dropdownMenuItemVariantNames = ["default", "destructive"];
+export function DropdownMenu(props) {
+    return _jsx(MenuPrimitive.Root, { ...props });
+}
+export function DropdownMenuPortal(props) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+export function DropdownMenuTrigger(props) {
+    return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+/**
+ * The menu surface. It renders its own portal and positioner, so place it
+ * directly inside `DropdownMenu` or `DropdownMenuSub`.
+ */
+export function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, size = "anchor", container, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { container: container, children: _jsx(MenuPrimitive.Positioner, { className: "sprout-dropdown-menu-positioner", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", "data-size": size, ...props, className: stateClassName(cn("sprout-dropdown-menu-content", `sprout-dropdown-menu-${size}`), className) }) }) }));
+}
+export function DropdownMenuGroup(props) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+export function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-dropdown-menu-label", className) }));
+}
+export function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset || undefined, "data-variant": variant, ...props, className: stateClassName("sprout-dropdown-menu-item", className) }));
+}
+export function DropdownMenuSub(props) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { ...props });
+}
+export function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-dropdown-menu-item sprout-dropdown-menu-sub-trigger", className), children: [children, _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "sprout-dropdown-menu-sub-chevron" })] }));
+}
+/** A nested menu surface. It opens to the side and sizes to its content. */
+export function DropdownMenuSubContent({ align = "start", alignOffset = -5, side = "right", sideOffset = 0, className, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props, className: stateClassName("sprout-dropdown-menu-sub-content", className) }));
+}
+export function DropdownMenuCheckboxItem({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-dropdown-menu-item sprout-dropdown-menu-choice", className), children: [_jsx("span", { className: "sprout-dropdown-menu-indicator", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
+}
+export function DropdownMenuRadioGroup(props) {
+    return (_jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+export function DropdownMenuRadioItem({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-dropdown-menu-item sprout-dropdown-menu-choice", className), children: [_jsx("span", { className: "sprout-dropdown-menu-indicator", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
+}
+export function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", ...props, className: stateClassName("sprout-dropdown-menu-separator", className) }));
+}
+/** Right-aligned hint text, such as a keyboard shortcut. It does not bind keys. */
+export function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", ...props, className: cn("sprout-dropdown-menu-shortcut", className) }));
+}

package/dist/components/field.d.ts

@@ -0,0 +1,117 @@
+import { type AriaAttributes, type ReactElement, type ReactNode } from "react";
+import { type SeparatorLabelProps } from "./separator.js";
+export declare const fieldLabelVisibilityNames: readonly ["visible", "screen-reader"];
+export declare const choiceGroupTypeNames: readonly ["checkbox", "radio"];
+export declare const choiceGroupLayoutNames: readonly ["list", "columns"];
+export declare const checkboxFieldVariantNames: readonly ["default", "neutral"];
+export type FieldLabelVisibility = (typeof fieldLabelVisibilityNames)[number];
+export type ChoiceGroupType = (typeof choiceGroupTypeNames)[number];
+export type ChoiceGroupLayout = (typeof choiceGroupLayoutNames)[number];
+export type CheckboxFieldVariant = (typeof checkboxFieldVariantNames)[number];
+/** Every field states whether it is required or optional; there is no default. */
+export type Requirement = {
+    required: true;
+    optional?: never;
+} | {
+    optional: true;
+    required?: never;
+};
+/**
+ * Locks every Field, ChoiceGroup, and CheckboxField below it. Render it as a
+ * provider: `<FieldsDisabled value={saving}>…</FieldsDisabled>`.
+ */
+export declare const FieldsDisabled: import("react").Context<boolean>;
+export interface FieldControlProps {
+    id?: string | undefined;
+    disabled?: boolean | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+    "aria-required"?: AriaAttributes["aria-required"];
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+}
+/**
+ * Connects a control to the Field around it. Pass the control's props; it
+ * returns them with the field's id, disabled state, description ids, and
+ * invalid and required flags merged in. Outside a Field, or when the control
+ * names itself with `aria-label` or `aria-labelledby`, props pass through.
+ */
+export declare function useFieldControl<P extends FieldControlProps>(props: P): P;
+export type FieldProps = Requirement & {
+    label: string;
+    /** `screen-reader` keeps the label, marker, and counter for assistive tech only. */
+    labelVisibility?: FieldLabelVisibility | undefined;
+    helper?: ReactNode;
+    /** Replaces the helper line and marks the control invalid. */
+    error?: string | undefined;
+    /** Short status at the end of the label row, such as `120 / 8,000`. */
+    counter?: string | undefined;
+    /** The control id. Generated when omitted. */
+    id?: string | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    /** One control, or one element that contains it. The control reads the field with `useFieldControl`. */
+    children: ReactElement;
+};
+/**
+ * A labeled form row for one control: label, required or optional marker,
+ * optional counter, the control, and a helper or error line.
+ */
+export declare function Field({ label, labelVisibility, helper, error, counter, id, disabled, required, className, children, }: FieldProps): import("react").JSX.Element;
+export interface ChoiceOption<V extends string> {
+    value: V;
+    label: string;
+    description?: string | undefined;
+    disabled?: boolean | undefined;
+}
+export type ChoiceGroupProps<V extends string> = Requirement & {
+    legend: string;
+    legendVisibility?: FieldLabelVisibility | undefined;
+    helper?: ReactNode;
+    error?: string | undefined;
+    /** A warning badge after the legend, such as "Changes data". */
+    warning?: string | undefined;
+    options: readonly ChoiceOption<V>[];
+    /** `columns` splits options into two columns from 640px. */
+    layout?: ChoiceGroupLayout | undefined;
+    disabled?: boolean | undefined;
+    /** The group id. Generated when omitted. */
+    id?: string | undefined;
+    className?: string | undefined;
+} & ({
+    type: "checkbox";
+    value: readonly V[];
+    onValueChange: (value: V[]) => void;
+} | {
+    type: "radio";
+    value: V;
+    onValueChange: (value: V) => void;
+});
+/**
+ * A labeled set of checkboxes (many values) or radios (one value), with
+ * optional descriptions per option, a helper, a warning badge, and an error.
+ */
+export declare function ChoiceGroup<V extends string>(props: ChoiceGroupProps<V>): import("react").JSX.Element;
+export interface CheckboxFieldProps {
+    label: string;
+    helper?: ReactNode;
+    error?: string | undefined;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean | undefined;
+    /** `neutral` fills with the text color instead of the brand primary, for filter lists. */
+    variant?: CheckboxFieldVariant | undefined;
+    /** Placed on the wrapper, so focusing the first control inside it focuses the checkbox. */
+    id?: string | undefined;
+    className?: string | undefined;
+}
+/** One checkbox with its label and a helper or error line, for consent and on/off settings. */
+export declare function CheckboxField({ label, helper, error, checked, onCheckedChange, disabled, id, variant, className, }: CheckboxFieldProps): import("react").JSX.Element;
+export type FieldSeparatorProps = Omit<SeparatorLabelProps, "variant" | "children"> & {
+    children?: SeparatorLabelProps["children"];
+};
+/**
+ * A labeled separator sized for a field stack: it pulls in the stack gap so
+ * the line sits evenly between fields. Text such as "or" is optional.
+ */
+export declare function FieldSeparator({ className, children, ...props }: FieldSeparatorProps): import("react").JSX.Element;

package/dist/components/field.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useId, } from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Check } from "reicon-react/icons/Check";
+import { cn } from "../internal/classes.js";
+import { Badge } from "./badge.js";
+import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { Separator } from "./separator.js";
+export const fieldLabelVisibilityNames = ["visible", "screen-reader"];
+export const choiceGroupTypeNames = ["checkbox", "radio"];
+export const choiceGroupLayoutNames = ["list", "columns"];
+export const checkboxFieldVariantNames = ["default", "neutral"];
+/**
+ * Locks every Field, ChoiceGroup, and CheckboxField below it. Render it as a
+ * provider: `<FieldsDisabled value={saving}>…</FieldsDisabled>`.
+ */
+export const FieldsDisabled = createContext(false);
+const FieldControlContext = createContext(null);
+/**
+ * Connects a control to the Field around it. Pass the control's props; it
+ * returns them with the field's id, disabled state, description ids, and
+ * invalid and required flags merged in. Outside a Field, or when the control
+ * names itself with `aria-label` or `aria-labelledby`, props pass through.
+ */
+export function useFieldControl(props) {
+    const field = useContext(FieldControlContext);
+    if (!field ||
+        props["aria-label"] !== undefined ||
+        props["aria-labelledby"] !== undefined)
+        return props;
+    return {
+        ...props,
+        id: field.id,
+        disabled: field.disabled || props.disabled,
+        "aria-describedby": ids(field.describedBy, props["aria-describedby"]),
+        "aria-invalid": field.invalid || props["aria-invalid"],
+        "aria-required": field.required || props["aria-required"],
+    };
+}
+// Deduped so a control that applies useFieldControl twice keeps one copy of each id.
+function ids(...values) {
+    const tokens = values.flatMap((value) => (value ? value.split(/\s+/) : []));
+    return [...new Set(tokens.filter(Boolean))].join(" ") || undefined;
+}
+function RequirementMarker({ required, id, }) {
+    return (_jsx("span", { id: id, "aria-hidden": id ? undefined : true, "data-slot": "requirement", className: "sprout-field-requirement", children: required ? "Required" : "Optional" }));
+}
+/**
+ * A labeled form row for one control: label, required or optional marker,
+ * optional counter, the control, and a helper or error line.
+ */
+export function Field({ label, labelVisibility = "visible", helper, error, counter, id, disabled, required, className, children, }) {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    const locked = useContext(FieldsDisabled) || disabled === true;
+    const lineId = error
+        ? `${controlId}-error`
+        : helper
+            ? `${controlId}-helper`
+            : undefined;
+    const markerId = required ? undefined : `${controlId}-requirement`;
+    const counterId = counter ? `${controlId}-counter` : undefined;
+    const control = {
+        id: controlId,
+        describedBy: ids(lineId, markerId, counterId),
+        invalid: Boolean(error),
+        required: required === true,
+        disabled: locked,
+    };
+    return (_jsxs("div", { "data-slot": "field", "data-disabled": locked || undefined, "data-invalid": error ? true : undefined, className: cn("sprout-field", className), children: [_jsxs("div", { "data-slot": "field-header", className: labelVisibility === "screen-reader"
+                    ? "sprout-field-sr-only"
+                    : "sprout-field-header", children: [_jsxs("div", { className: "sprout-field-heading", children: [_jsx("label", { "data-slot": "label", htmlFor: controlId, className: "sprout-field-label", children: label }), _jsx(RequirementMarker, { required: required === true, id: markerId })] }), counter && (_jsx("p", { id: counterId, "data-slot": "field-counter", className: "sprout-field-counter", children: counter }))] }), _jsx(FieldControlContext, { value: control, children: children }), error ? (_jsx("p", { id: lineId, "data-slot": "field-error", className: "sprout-field-message sprout-field-error", children: error })) : helper ? (_jsx("p", { id: lineId, "data-slot": "field-helper", className: "sprout-field-message", children: helper })) : null] }));
+}
+function FieldCheckbox({ variant = "default", className, ...props }) {
+    return (_jsx(BaseCheckbox.Root, { "data-slot": "checkbox", "data-variant": variant, className: cn("sprout-field-checkbox", className), ...props, children: _jsx(BaseCheckbox.Indicator, { "data-slot": "checkbox-indicator", className: "sprout-field-checkbox-indicator", children: _jsx(Check, { "aria-hidden": "true" }) }) }));
+}
+/**
+ * A labeled set of checkboxes (many values) or radios (one value), with
+ * optional descriptions per option, a helper, a warning badge, and an error.
+ */
+export function ChoiceGroup(props) {
+    const { legend, legendVisibility = "visible", helper, error, warning, options, layout = "list", required, className, } = props;
+    const generatedId = useId();
+    const groupId = props.id ?? generatedId;
+    const locked = useContext(FieldsDisabled) || props.disabled === true;
+    const radio = props.type === "radio";
+    const legendId = `${groupId}-legend`;
+    const errorId = error ? `${groupId}-error` : undefined;
+    const helperId = helper ? `${groupId}-helper` : undefined;
+    // A radiogroup carries aria-required; a checkbox group cannot, so it describes its marker either way.
+    const markerId = radio && required ? undefined : `${groupId}-requirement`;
+    const labelling = {
+        id: groupId,
+        "aria-labelledby": legendId,
+        "aria-describedby": ids(errorId, helperId, markerId),
+    };
+    const rows = options.map((option, index) => {
+        const checked = props.type === "checkbox"
+            ? props.value.includes(option.value)
+            : props.value === option.value;
+        const disabled = locked || option.disabled === true;
+        const descriptionId = option.description
+            ? `${groupId}-option-${index}-description`
+            : undefined;
+        let control;
+        if (props.type === "checkbox") {
+            const { value, onValueChange } = props;
+            control = (_jsx(FieldCheckbox, { checked: checked, disabled: disabled, "aria-describedby": descriptionId, "aria-invalid": error ? true : undefined, onCheckedChange: (next) => onValueChange(next
+                    ? [...value, option.value]
+                    : value.filter((item) => item !== option.value)) }));
+        }
+        else {
+            control = (_jsx(RadioGroupItem, { className: "sprout-field-radio", value: option.value, disabled: disabled, "aria-describedby": descriptionId }));
+        }
+        return (_jsxs("div", { "data-slot": "choice-option", "data-checked": checked || undefined, "data-disabled": disabled || undefined, className: "sprout-choice-option", children: [_jsxs("label", { className: "sprout-choice-option-label", children: [control, _jsx("span", { className: "sprout-choice-option-text", children: option.label })] }), option.description && (_jsx("p", { id: descriptionId, className: "sprout-choice-option-description", children: option.description }))] }, option.value));
+    });
+    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: legendVisibility === "screen-reader"
+                    ? "sprout-field-sr-only"
+                    : "sprout-choice-group-legend", children: [_jsx("p", { id: legendId, className: "sprout-choice-group-legend-text", children: legend }), _jsx(RequirementMarker, { required: required === true, id: markerId }), warning && _jsx(Badge, { variant: "warning", children: warning })] }), helper && (_jsx("p", { id: helperId, className: "sprout-field-message", children: helper })), _jsx("div", { "data-slot": "choice-group-options", "data-layout": layout, className: "sprout-choice-group-options", children: rows }), error && (_jsx("p", { id: errorId, className: "sprout-field-message sprout-field-error", children: error }))] }));
+    const classes = cn("sprout-choice-group", className);
+    if (props.type === "radio") {
+        const { onValueChange } = props;
+        return (_jsx(RadioGroup, { "data-slot": "choice-group", "data-type": "radio", className: classes, value: props.value, disabled: locked, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, ...labelling, onValueChange: (next) => {
+                const option = options.find((item) => item.value === next);
+                if (option)
+                    onValueChange(option.value);
+            }, children: content }));
+    }
+    return (_jsx("div", { role: "group", "data-slot": "choice-group", "data-type": "checkbox", "data-disabled": locked || undefined, className: classes, ...labelling, children: content }));
+}
+/** One checkbox with its label and a helper or error line, for consent and on/off settings. */
+export function CheckboxField({ label, helper, error, checked, onCheckedChange, disabled, id, variant, className, }) {
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+    const locked = useContext(FieldsDisabled) || disabled === true;
+    const lineId = error
+        ? `${fieldId}-error`
+        : helper
+            ? `${fieldId}-helper`
+            : undefined;
+    return (_jsxs("div", { id: fieldId, "data-slot": "checkbox-field", "data-disabled": locked || undefined, className: cn("sprout-checkbox-field", className), children: [_jsxs("label", { className: "sprout-checkbox-field-label", children: [_jsx(FieldCheckbox, { variant: variant, checked: checked, disabled: locked, "aria-describedby": lineId, "aria-invalid": error ? true : undefined, onCheckedChange: (next) => onCheckedChange(next) }), _jsx("span", { className: "sprout-checkbox-field-text", children: label })] }), error ? (_jsx("p", { id: lineId, className: "sprout-field-message sprout-field-error sprout-checkbox-field-message", children: error })) : helper ? (_jsx("p", { id: lineId, className: "sprout-field-message sprout-checkbox-field-message", children: helper })) : null] }));
+}
+/**
+ * A labeled separator sized for a field stack: it pulls in the stack gap so
+ * the line sits evenly between fields. Text such as "or" is optional.
+ */
+export function FieldSeparator({ className, children = null, ...props }) {
+    return (_jsx(Separator, { "data-slot": "field-separator", className: cn("sprout-field-separator", className), ...props, children: children }));
+}

package/dist/components/file-viewer.d.ts

@@ -0,0 +1,120 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type FileKind } from "../internal/file-kind.js";
+import { type DialogContentProps } from "./dialog.js";
+export type ViewableFileSource = {
+    kind: "local";
+    file: File;
+} | {
+    kind: "remote";
+    url: string;
+};
+export interface ViewableFile {
+    name: string;
+    mediaType: string;
+    source: ViewableFileSource;
+}
+export type ViewableFileKind = FileKind;
+export interface FileSheetRendererProps {
+    name: string;
+    bytes: ArrayBuffer;
+    onRetry: () => void;
+}
+export interface FileOfficeRendererProps extends FileSheetRendererProps {
+    kind: "document" | "slides";
+}
+export interface FileMarkdownRendererProps {
+    text: string;
+}
+/**
+ * Renderers for formats that need a heavy parser. Without one, sheets and
+ * Office files show a download prompt and Markdown shows its plain text.
+ * Each renderer runs inside Suspense with `LoadingFile` as the fallback,
+ * so a lazy component works as is.
+ */
+export interface FileRenderers {
+    markdown?: ((props: FileMarkdownRendererProps) => ReactNode) | undefined;
+    sheet?: ((props: FileSheetRendererProps) => ReactNode) | undefined;
+    office?: ((props: FileOfficeRendererProps) => ReactNode) | undefined;
+}
+export interface FileRenderersProviderProps {
+    renderers: FileRenderers;
+    children?: ReactNode;
+}
+/** Registers file renderers once for every viewer below it. */
+export declare function FileRenderersProvider({ renderers, children, }: FileRenderersProviderProps): import("react").JSX.Element;
+export declare const maxViewableFileBytes: number;
+export declare function viewableFileKind(name: string, mediaType: string): ViewableFileKind;
+export interface GoogleDocumentLink {
+    url: string;
+    embedUrl: string;
+    mediaType: string;
+}
+/** Recognizes a docs.google.com Docs, Sheets, or Slides link. */
+export declare function googleDocument(url: string): GoogleDocumentLink | null;
+/** Reads the document link from a .gdoc, .gsheet, or .gslides shortcut. */
+export declare function googleShortcut(text: string): string;
+/**
+ * The type to give a same-origin blob URL. Stored media types are
+ * untrusted, so anything a browser could run as a document, including SVG,
+ * becomes `application/octet-stream`.
+ */
+export declare function renderableType(name: string, mediaType: string): string;
+interface FileViewerBaseProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    renderers?: FileRenderers | undefined;
+    /** Where focus goes on close. Defaults to the element that had focus when the viewer opened. */
+    finalFocus?: DialogContentProps["finalFocus"];
+}
+interface SingleFileProps {
+    file: ViewableFile | null;
+    files?: undefined;
+    index?: undefined;
+    onIndexChange?: undefined;
+}
+interface FileSetProps {
+    file?: undefined;
+    /** Files to step through with Previous, Next, and the arrow keys. */
+    files: readonly ViewableFile[];
+    index: number;
+    onIndexChange: (index: number) => void;
+}
+export type FileViewerProps = FileViewerBaseProps & (SingleFileProps | FileSetProps);
+/** A full-screen dialog that opens a local or linked file, or steps through several. */
+export declare function FileViewer({ file, files, index, onIndexChange, open, onOpenChange, renderers, finalFocus, }: FileViewerProps): import("react").JSX.Element;
+export interface ViewableFileContentProps extends HTMLAttributes<HTMLDivElement> {
+    file: ViewableFile;
+    renderers?: FileRenderers | undefined;
+}
+/** Loads a local or linked file and shows it inline, with reload and download. */
+export declare function ViewableFileContent({ file, renderers, className, ...props }: ViewableFileContentProps): import("react").JSX.Element;
+export interface FileContentProps {
+    name: string;
+    mediaType: string;
+    bytes: ArrayBuffer;
+    /** A blob URL for `bytes`, typed with `renderableType`. */
+    url: string;
+    onRetry: () => void;
+    renderers?: FileRenderers | undefined;
+}
+/** Shows bytes you already loaded: images, PDF, text, JSON, Markdown, Google shortcuts, and more. */
+export declare function FileContent({ name, mediaType, bytes, url, onRetry, renderers: own, }: FileContentProps): import("react").JSX.Element;
+export type LoadingFileProps = HTMLAttributes<HTMLDivElement>;
+export declare function LoadingFile({ className, ...props }: LoadingFileProps): import("react").JSX.Element;
+export interface FileErrorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    message: ReactNode;
+    onRetry: () => void;
+}
+export declare function FileError({ message, onRetry, className, ...props }: FileErrorProps): import("react").JSX.Element;
+/** Whether `FilePreview` can show this file: images, text, code, JSON, and Markdown, but not Google shortcuts. */
+export declare function isPreviewableFile(file: ViewableFile): boolean;
+export interface FilePreviewProps extends HTMLAttributes<HTMLDivElement> {
+    file: ViewableFile;
+}
+/**
+ * A small, non-interactive peek at a file: the image, or the first lines
+ * of text and code with syntax colors. Made for hover cards and thumbnails.
+ * Renders nothing for files `isPreviewableFile` rejects.
+ */
+export declare function FilePreview({ file, className, ...props }: FilePreviewProps): import("react").JSX.Element | null;
+export {};