@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/components/dialog.js

@@ -1,18 +1,13 @@
-"use client";
+'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"];
+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 });
 }
@@ -26,54 +21,54 @@ 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) }));
+    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" }) }))] })] }));
+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",
+            defaultTagName: 'div',
             ref,
             render,
-            props: mergeProps({ "data-slot": slot, className: cn(base, className) }, props),
+            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");
+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");
+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 }) {
+export function DialogFooter({ className, render, ref, showCloseButton = false, closeLabel = 'Close', children, ...props }) {
     return useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         ref,
         render,
         props: mergeProps({
-            "data-slot": "dialog-footer",
-            className: cn("sprout-dialog-footer", className),
+            '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" },
+        state: { slot: 'dialog-footer' },
     });
 }
 export function DialogTitle({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", ...props, className: stateClassName("sprout-dialog-title", className) }));
+    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) }));
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", ...props, className: stateClassName('sprout-dialog-description', className) }));
 }

package/dist/components/direction.d.ts

@@ -3,4 +3,4 @@
  * 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";
+export { DirectionProvider, useDirection, type DirectionProviderProps, type TextDirection, } from '@base-ui/react/direction-provider';

package/dist/components/direction.js

@@ -3,4 +3,4 @@
  * 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";
+export { DirectionProvider, useDirection, } from '@base-ui/react/direction-provider';

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

@@ -1,5 +1,5 @@
-import type { ComponentProps } from "react";
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+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];
@@ -10,7 +10,7 @@ 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">;
+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
@@ -18,7 +18,7 @@ export interface DropdownMenuContentProps extends MenuPrimitive.Popup.Props, Pos
      */
     size?: DropdownMenuContentSize;
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: MenuPrimitive.Portal.Props["container"];
+    container?: MenuPrimitive.Portal.Props['container'];
 }
 /**
  * The menu surface. It renders its own portal and positioner, so place it
@@ -56,7 +56,7 @@ export interface DropdownMenuRadioItemProps extends MenuPrimitive.RadioItem.Prop
 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">;
+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

@@ -1,11 +1,11 @@
-"use client";
+'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"];
+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 });
 }
@@ -19,41 +19,41 @@ export function DropdownMenuTrigger(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 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) }));
+    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 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" })] }));
+    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 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] }));
+    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 }));
+    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] }));
+    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) }));
+    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) }));
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", ...props, className: cn('sprout-dropdown-menu-shortcut', className) }));
 }

package/dist/components/field.d.ts

@@ -1,5 +1,5 @@
-import { type AriaAttributes, type ReactElement, type ReactNode } from "react";
-import { type SeparatorLabelProps } from "./separator.js";
+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"];
@@ -24,11 +24,11 @@ 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;
+    '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
@@ -79,11 +79,11 @@ export type ChoiceGroupProps<V extends string> = Requirement & {
     id?: string | undefined;
     className?: string | undefined;
 } & ({
-    type: "checkbox";
+    type: 'checkbox';
     value: readonly V[];
     onValueChange: (value: V[]) => void;
 } | {
-    type: "radio";
+    type: 'radio';
     value: V;
     onValueChange: (value: V) => void;
 });
@@ -107,8 +107,8 @@ export interface CheckboxFieldProps {
 }
 /** 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"];
+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

package/dist/components/field.js

@@ -1,16 +1,16 @@
-"use client";
+'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"];
+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>`.
@@ -25,40 +25,34 @@ const FieldControlContext = createContext(null);
  */
 export function useFieldControl(props) {
     const field = useContext(FieldControlContext);
-    if (!field ||
-        props["aria-label"] !== undefined ||
-        props["aria-labelledby"] !== undefined)
+    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"],
+        '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;
+    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" }));
+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, }) {
+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 lineId = error ? `${controlId}-error` : helper ? `${controlId}-helper` : undefined;
     const markerId = required ? undefined : `${controlId}-requirement`;
     const counterId = counter ? `${controlId}-counter` : undefined;
     const control = {
@@ -68,23 +62,21 @@ export function Field({ label, labelVisibility = "visible", helper, error, count
         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] }));
+    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" }) }) }));
+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 { 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 radio = props.type === 'radio';
     const legendId = `${groupId}-legend`;
     const errorId = error ? `${groupId}-error` : undefined;
     const helperId = helper ? `${groupId}-helper` : undefined;
@@ -92,37 +84,29 @@ export function ChoiceGroup(props) {
     const markerId = radio && required ? undefined : `${groupId}-requirement`;
     const labelling = {
         id: groupId,
-        "aria-labelledby": legendId,
-        "aria-describedby": ids(errorId, helperId, markerId),
+        '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 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;
+        const descriptionId = option.description ? `${groupId}-option-${index}-description` : undefined;
         let control;
-        if (props.type === "checkbox") {
+        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)) }));
+            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 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);
+        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 }));
@@ -134,17 +118,13 @@ export function CheckboxField({ label, helper, error, checked, onCheckedChange,
     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] }));
+    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 }));
+    return (_jsx(Separator, { "data-slot": "field-separator", className: cn('sprout-field-separator', className), ...props, children: children }));
 }

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes } from 'react';
 export interface FileExplorerTextFile {
     /** A slash-separated path, such as `agents/scout/persona.md`. Folders come from the paths. */
     path: string;
@@ -10,7 +10,7 @@ export interface FileExplorerUnavailableFile {
     unavailable: string;
 }
 export type FileExplorerFile = FileExplorerTextFile | FileExplorerUnavailableFile;
-export interface FileExplorerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export interface FileExplorerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     files: FileExplorerFile[];
     /** Heads the sidebar and names the tree, such as “Soul”. */
     label?: string | undefined;