@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/brand-icon.d.ts

@@ -1,17 +1,17 @@
-import type { ComponentProps } from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { brandGlyphs } from "../internal/brand-glyphs.js";
+import type { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { brandGlyphs } from '../internal/brand-glyphs.js';
 export type Brand = keyof typeof brandGlyphs;
 export declare const brandNames: Record<Brand, string>;
 export declare const brandTileSizeNames: readonly ["sm", "md", "lg", "xl", "action"];
 export declare const brandIconSizeNames: readonly ["inline", "glyph", "fill", "sm", "md", "lg", "xl"];
 export type BrandTileSize = (typeof brandTileSizeNames)[number];
 export type BrandIconSize = (typeof brandIconSizeNames)[number];
-export type BrandTileProps = useRender.ComponentProps<"span"> & {
+export type BrandTileProps = useRender.ComponentProps<'span'> & {
     size?: BrandTileSize;
 };
 export declare function BrandTile({ size, render, ref, className, ...props }: BrandTileProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export interface BrandIconProps extends Omit<ComponentProps<"span">, "children"> {
+export interface BrandIconProps extends Omit<ComponentProps<'span'>, 'children'> {
     brand: Brand;
     size?: BrandIconSize;
 }
@@ -20,7 +20,7 @@ export interface BrandStackItem {
     brand: Brand;
     name: string;
 }
-export interface BrandStackProps extends Omit<ComponentProps<"span">, "children" | "role"> {
+export interface BrandStackProps extends Omit<ComponentProps<'span'>, 'children' | 'role'> {
     brands: readonly BrandStackItem[];
     /** Accessible name for the whole stack. Defaults to the brand names. */
     label?: string;

package/dist/components/brand-icon.js

@@ -1,82 +1,74 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { brandGlyphs } from "../internal/brand-glyphs.js";
-import { cn } from "../internal/classes.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip.js";
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { brandGlyphs } from '../internal/brand-glyphs.js';
+import { cn } from '../internal/classes.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
 export const brandNames = {
-    claude: "Claude",
-    openai: "OpenAI",
-    deepseek: "DeepSeek",
-    grok: "Grok",
-    kimi: "Kimi",
-    gemini: "Gemini",
-    mistral: "Mistral",
-    meta: "Meta",
-    qwen: "Qwen",
-    google: "Google Workspace",
-    gmail: "Gmail",
-    "google-calendar": "Google Calendar",
-    "google-drive": "Google Drive",
-    "google-sheets": "Google Sheets",
-    "google-docs": "Google Docs",
-    "google-slides": "Google Slides",
-    "google-forms": "Google Forms",
-    slack: "Slack",
-    github: "GitHub",
-    jira: "Jira",
-    confluence: "Confluence",
-    trello: "Trello",
-    notion: "Notion",
-    hubspot: "HubSpot",
-    figma: "Figma",
-    microsoft: "Microsoft",
-    linear: "Linear",
-    stripe: "Stripe",
-    airtable: "Airtable",
-    asana: "Asana",
-    clickup: "ClickUp",
-    discord: "Discord",
-    shopify: "Shopify",
-    zendesk: "Zendesk",
-    dropbox: "Dropbox",
-    gitlab: "GitLab",
-    calendly: "Calendly",
+    claude: 'Claude',
+    openai: 'OpenAI',
+    deepseek: 'DeepSeek',
+    grok: 'Grok',
+    kimi: 'Kimi',
+    gemini: 'Gemini',
+    mistral: 'Mistral',
+    meta: 'Meta',
+    qwen: 'Qwen',
+    google: 'Google Workspace',
+    gmail: 'Gmail',
+    'google-calendar': 'Google Calendar',
+    'google-drive': 'Google Drive',
+    'google-sheets': 'Google Sheets',
+    'google-docs': 'Google Docs',
+    'google-slides': 'Google Slides',
+    'google-forms': 'Google Forms',
+    slack: 'Slack',
+    github: 'GitHub',
+    jira: 'Jira',
+    confluence: 'Confluence',
+    trello: 'Trello',
+    notion: 'Notion',
+    hubspot: 'HubSpot',
+    figma: 'Figma',
+    microsoft: 'Microsoft',
+    linear: 'Linear',
+    stripe: 'Stripe',
+    airtable: 'Airtable',
+    asana: 'Asana',
+    clickup: 'ClickUp',
+    discord: 'Discord',
+    shopify: 'Shopify',
+    zendesk: 'Zendesk',
+    dropbox: 'Dropbox',
+    gitlab: 'GitLab',
+    calendly: 'Calendly',
 };
-export const brandTileSizeNames = ["sm", "md", "lg", "xl", "action"];
-export const brandIconSizeNames = [
-    "inline",
-    "glyph",
-    "fill",
-    "sm",
-    "md",
-    "lg",
-    "xl",
-];
+export const brandTileSizeNames = ['sm', 'md', 'lg', 'xl', 'action'];
+export const brandIconSizeNames = ['inline', 'glyph', 'fill', 'sm', 'md', 'lg', 'xl'];
 function Glyph({ brand }) {
     const glyph = brandGlyphs[brand];
-    return (_jsx("svg", { viewBox: glyph.viewBox, className: "sprout-brand-glyph", "aria-hidden": "true", focusable: "false", children: glyph.paths.map((path, index) => (_jsx("path", { d: path.d, fill: "fill" in path ? path.fill : "currentColor", fillRule: "evenOdd" in path ? "evenodd" : undefined, clipRule: "evenOdd" in path ? "evenodd" : undefined }, index))) }));
+    return (_jsx("svg", { viewBox: glyph.viewBox, className: "sprout-brand-glyph", "aria-hidden": "true", focusable: "false", children: glyph.paths.map((path, index) => (_jsx("path", { d: path.d, fill: 'fill' in path ? path.fill : 'currentColor', fillRule: 'evenOdd' in path ? 'evenodd' : undefined, clipRule: 'evenOdd' in path ? 'evenodd' : undefined }, index))) }));
 }
-export function BrandTile({ size = "md", render, ref, className, ...props }) {
+export function BrandTile({ size = 'md', render, ref, className, ...props }) {
     return useRender({
-        defaultTagName: "span",
+        defaultTagName: 'span',
         render,
         ref,
         props: mergeProps({
-            "data-slot": "brand-tile",
-            "data-size": size,
-            className: cn("sprout-brand-tile", className),
+            'data-slot': 'brand-tile',
+            'data-size': size,
+            className: cn('sprout-brand-tile', className),
         }, props),
     });
 }
-export function BrandIcon({ brand, size = "md", className, ...props }) {
-    if (size === "inline" || size === "glyph" || size === "fill")
-        return (_jsx("span", { "data-slot": "brand-icon", "data-brand": brand, "data-size": size, ...props, className: cn("sprout-brand-icon", className), children: _jsx(Glyph, { brand: brand }) }));
+export function BrandIcon({ brand, size = 'md', className, ...props }) {
+    if (size === 'inline' || size === 'glyph' || size === 'fill')
+        return (_jsx("span", { "data-slot": "brand-icon", "data-brand": brand, "data-size": size, ...props, className: cn('sprout-brand-icon', className), children: _jsx(Glyph, { brand: brand }) }));
     return (_jsx(BrandTile, { "data-brand": brand, size: size, ...props, className: className, children: _jsx(Glyph, { brand: brand }) }));
 }
 export function BrandStack({ brands, label, className, ...props }) {
     if (brands.length === 0)
         return null;
-    return (_jsx(TooltipProvider, { delay: 200, children: _jsx("span", { "data-slot": "brand-stack", ...props, role: "img", "aria-label": label ?? brands.map((item) => item.name).join(", "), className: cn("sprout-brand-stack", className), children: brands.map((item) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(BrandTile, { size: "sm", "data-brand": item.brand }), children: _jsx(Glyph, { brand: item.brand }) }), _jsx(TooltipContent, { sideOffset: 6, className: "sprout-brand-tooltip", children: item.name })] }, item.brand))) }) }));
+    return (_jsx(TooltipProvider, { delay: 200, children: _jsx("span", { "data-slot": "brand-stack", ...props, role: "img", "aria-label": label ?? brands.map(item => item.name).join(', '), className: cn('sprout-brand-stack', className), children: brands.map(item => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(BrandTile, { size: "sm", "data-brand": item.brand }), children: _jsx(Glyph, { brand: item.brand }) }), _jsx(TooltipContent, { sideOffset: 6, className: "sprout-brand-tooltip", children: item.name })] }, item.brand))) }) }));
 }

package/dist/components/breadcrumb.d.ts

@@ -1,29 +1,29 @@
-import type { ComponentProps } from "react";
-import { useRender } from "@base-ui/react/use-render";
-export type BreadcrumbProps = ComponentProps<"nav">;
-export declare function Breadcrumb({ className, "aria-label": label, ...props }: BreadcrumbProps): import("react").JSX.Element;
-export interface BreadcrumbListProps extends ComponentProps<"ol"> {
+import type { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+export type BreadcrumbProps = ComponentProps<'nav'>;
+export declare function Breadcrumb({ className, 'aria-label': label, ...props }: BreadcrumbProps): import("react").JSX.Element;
+export interface BreadcrumbListProps extends ComponentProps<'ol'> {
     /** Wrap long paths onto more lines. Set `false` to keep one line and let the current page shrink. */
     wrap?: boolean;
 }
 export declare function BreadcrumbList({ className, wrap, ...props }: BreadcrumbListProps): import("react").JSX.Element;
-export type BreadcrumbItemProps = ComponentProps<"li">;
+export type BreadcrumbItemProps = ComponentProps<'li'>;
 export declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
 export interface BreadcrumbLinkState extends Record<string, unknown> {
-    slot: "breadcrumb-link";
+    slot: 'breadcrumb-link';
 }
-export interface BreadcrumbLinkProps extends useRender.ComponentProps<"a", BreadcrumbLinkState> {
+export interface BreadcrumbLinkProps extends useRender.ComponentProps<'a', BreadcrumbLinkState> {
     /** Cut a long name to one line with an ellipsis. String names also get a `title`. */
     truncate?: boolean;
 }
 export declare function BreadcrumbLink({ className, render, ref, truncate, children, ...props }: BreadcrumbLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export interface BreadcrumbPageProps extends ComponentProps<"span"> {
+export interface BreadcrumbPageProps extends ComponentProps<'span'> {
     /** Cut a long name to one line with an ellipsis. String names also get a `title`. */
     truncate?: boolean;
 }
 export declare function BreadcrumbPage({ className, truncate, children, ...props }: BreadcrumbPageProps): import("react").JSX.Element;
-export type BreadcrumbSeparatorProps = ComponentProps<"li">;
+export type BreadcrumbSeparatorProps = ComponentProps<'li'>;
 export declare function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): import("react").JSX.Element;
-export type BreadcrumbEllipsisProps = ComponentProps<"span">;
+export type BreadcrumbEllipsisProps = ComponentProps<'span'>;
 /** Marks hidden folders. It is hidden from screen readers, so put the reason in a visually hidden sibling. */
 export declare function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): import("react").JSX.Element;

package/dist/components/breadcrumb.js

@@ -1,44 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { ChevronRight } from "reicon-react/icons/ChevronRight";
-import { MoreH } from "reicon-react/icons/MoreH";
-import { cn } from "../internal/classes.js";
-export function Breadcrumb({ className, "aria-label": label = "Breadcrumb", ...props }) {
-    return (_jsx("nav", { "aria-label": label, "data-slot": "breadcrumb", className: cn("sprout-breadcrumb", className), ...props }));
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { MoreH } from 'reicon-react/icons/MoreH';
+import { cn } from '../internal/classes.js';
+export function Breadcrumb({ className, 'aria-label': label = 'Breadcrumb', ...props }) {
+    return _jsx("nav", { "aria-label": label, "data-slot": "breadcrumb", className: cn('sprout-breadcrumb', className), ...props });
 }
 export function BreadcrumbList({ className, wrap = true, ...props }) {
-    return (_jsx("ol", { "data-slot": "breadcrumb-list", "data-wrap": wrap ? "true" : "false", className: cn("sprout-breadcrumb-list", className), ...props }));
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", "data-wrap": wrap ? 'true' : 'false', className: cn('sprout-breadcrumb-list', className), ...props }));
 }
 export function BreadcrumbItem({ className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("sprout-breadcrumb-item", className), ...props }));
+    return _jsx("li", { "data-slot": "breadcrumb-item", className: cn('sprout-breadcrumb-item', className), ...props });
 }
 function label(children, truncate) {
     if (!truncate)
         return children;
-    return (_jsx("span", { "data-slot": "breadcrumb-label", className: "sprout-breadcrumb-label", title: typeof children === "string" || typeof children === "number"
-            ? String(children)
-            : undefined, children: children }));
+    return (_jsx("span", { "data-slot": "breadcrumb-label", className: "sprout-breadcrumb-label", title: typeof children === 'string' || typeof children === 'number' ? String(children) : undefined, children: children }));
 }
 export function BreadcrumbLink({ className, render, ref, truncate, children, ...props }) {
     return useRender({
-        defaultTagName: "a",
+        defaultTagName: 'a',
         ref,
         render,
         props: mergeProps({
-            className: cn("sprout-breadcrumb-link", className),
+            className: cn('sprout-breadcrumb-link', className),
             children: label(children, truncate),
         }, props),
-        state: { slot: "breadcrumb-link" },
+        state: { slot: 'breadcrumb-link' },
     });
 }
 export function BreadcrumbPage({ className, truncate, children, ...props }) {
-    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("sprout-breadcrumb-page", className), ...props, children: label(children, truncate) }));
+    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('sprout-breadcrumb-page', className), ...props, children: label(children, truncate) }));
 }
 export function BreadcrumbSeparator({ children, className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("sprout-breadcrumb-separator", className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('sprout-breadcrumb-separator', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
 }
 /** Marks hidden folders. It is hidden from screen readers, so put the reason in a visually hidden sibling. */
 export function BreadcrumbEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("sprout-breadcrumb-ellipsis", className), ...props, children: [_jsx(MoreH, {}), _jsx("span", { className: "sprout-breadcrumb-sr-only", children: "More" })] }));
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('sprout-breadcrumb-ellipsis', className), ...props, children: [_jsx(MoreH, {}), _jsx("span", { className: "sprout-breadcrumb-sr-only", children: "More" })] }));
 }

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

@@ -1,14 +1,14 @@
-import type { ComponentProps } from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { type SeparatorLineProps } from "./separator.js";
+import type { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type SeparatorLineProps } from './separator.js';
 export declare const buttonGroupOrientationNames: readonly ["horizontal", "vertical"];
 export type ButtonGroupOrientation = (typeof buttonGroupOrientationNames)[number];
 export interface ButtonGroupVariantOptions {
     orientation?: ButtonGroupOrientation | null;
     className?: string;
 }
-export declare function buttonGroupVariants({ orientation, className, }?: ButtonGroupVariantOptions): string;
-export interface ButtonGroupProps extends ComponentProps<"div"> {
+export declare function buttonGroupVariants({ orientation, className }?: ButtonGroupVariantOptions): string;
+export interface ButtonGroupProps extends ComponentProps<'div'> {
     /** `"vertical"` stacks the controls and joins them top to bottom. */
     orientation?: ButtonGroupOrientation | null;
 }
@@ -17,7 +17,7 @@ export interface ButtonGroupProps extends ComponentProps<"div"> {
  * `aria-label` that names what the buttons act on.
  */
 export declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): import("react").JSX.Element;
-export type ButtonGroupTextProps = useRender.ComponentProps<"div">;
+export type ButtonGroupTextProps = useRender.ComponentProps<'div'>;
 /** A muted, non-interactive cell for a label or value inside a group. */
 export declare function ButtonGroupText({ className, render, ref, ...props }: ButtonGroupTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type ButtonGroupSeparatorProps = SeparatorLineProps;

package/dist/components/button-group.js

@@ -1,29 +1,29 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { cn } from "../internal/classes.js";
-import { Separator } from "./separator.js";
-export const buttonGroupOrientationNames = ["horizontal", "vertical"];
-export function buttonGroupVariants({ orientation, className, } = {}) {
-    return cn("sprout-button-group", `sprout-button-group-${orientation ?? "horizontal"}`, className);
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cn } from '../internal/classes.js';
+import { Separator } from './separator.js';
+export const buttonGroupOrientationNames = ['horizontal', 'vertical'];
+export function buttonGroupVariants({ orientation, className } = {}) {
+    return cn('sprout-button-group', `sprout-button-group-${orientation ?? 'horizontal'}`, className);
 }
 /**
  * Joins buttons, text, and separators into one control. Give it an
  * `aria-label` that names what the buttons act on.
  */
 export function ButtonGroup({ className, orientation, ...props }) {
-    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation ?? "horizontal", className: buttonGroupVariants({ orientation, className }), ...props }));
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation ?? 'horizontal', className: buttonGroupVariants({ orientation, className }), ...props }));
 }
 /** A muted, non-interactive cell for a label or value inside a group. */
 export function ButtonGroupText({ className, render, ref, ...props }) {
     return useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         ref,
         render,
         props: mergeProps({
-            "data-slot": "button-group-text",
-            className: cn("sprout-button-group-text", className),
+            'data-slot': 'button-group-text',
+            className: cn('sprout-button-group-text', className),
         }, props),
     });
 }
@@ -31,6 +31,6 @@ export function ButtonGroupText({ className, render, ref, ...props }) {
  * A line between grouped controls. It runs across the group, so it is
  * `"vertical"` (the default) in a row and `"horizontal"` in a column.
  */
-export function ButtonGroupSeparator({ className, orientation = "vertical", tone = "input", ...props }) {
-    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, tone: tone, className: (state) => cn("sprout-button-group-separator", typeof className === "function" ? className(state) : className), ...props }));
+export function ButtonGroupSeparator({ className, orientation = 'vertical', tone = 'input', ...props }) {
+    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, tone: tone, className: state => cn('sprout-button-group-separator', typeof className === 'function' ? className(state) : className), ...props }));
 }

package/dist/components/button.d.ts

@@ -1,5 +1,5 @@
-import type { Button as BaseButton } from "@base-ui/react/button";
-import { type ReactElement } from "react";
+import type { Button as BaseButton } from '@base-ui/react/button';
+import { type ReactElement } from 'react';
 export declare const buttonVariantNames: readonly ["default", "outline", "secondary", "ghost", "destructive", "link", "scope"];
 export declare const buttonSizeNames: readonly ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg", "back", "onboarding", "bud", "bud-labeled", "chat-row", "task-link", "card-title", "result-card", "calendar-title", "calendar", "calendar-icon", "nav", "column-header", "column-header-end", "table-link", "badge"];
 export type ButtonVariant = (typeof buttonVariantNames)[number];
@@ -9,30 +9,30 @@ export interface ButtonVariantOptions {
     size?: ButtonSize | null;
     className?: string;
 }
-export declare function buttonVariants({ variant, size, className, }?: ButtonVariantOptions): string;
+export declare function buttonVariants({ variant, size, className }?: ButtonVariantOptions): string;
 export type ButtonBlockerFix = 
 /** An element id on this page; scrolled into view and focused (or, when it has no tabindex, its first focusable descendant). */
 {
-    kind: "jump";
+    kind: 'jump';
     label: string;
     target: string;
 }
 /** A link element, such as a router `<Link>`, rendered through Button `render`. */
  | {
-    kind: "link";
+    kind: 'link';
     label: string;
     link: ReactElement;
 } | {
-    kind: "action";
+    kind: 'action';
     label: string;
     onClick: () => void;
 };
 export type ButtonState = {
-    kind: "ready";
+    kind: 'ready';
 } | {
-    kind: "busy";
+    kind: 'busy';
 } | {
-    kind: "blocked";
+    kind: 'blocked';
     reason: string;
     fix?: ButtonBlockerFix | undefined;
 };
@@ -70,8 +70,8 @@ export declare function jumpTo(target: string | Element): void;
  */
 export declare function useActionControl(state: ButtonState): {
     button: {
-        "aria-describedby"?: string | undefined;
-        "aria-busy"?: true | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-busy'?: true | undefined;
         disabled: boolean;
         focusableWhenDisabled: boolean;
     };

package/dist/components/button.js

@@ -1,72 +1,62 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { cn, stateClassName } from "../internal/classes.js";
-import { Pressable } from "../internal/pressable.js";
-import { Spinner } from "./spinner.js";
-export const buttonVariantNames = [
-    "default",
-    "outline",
-    "secondary",
-    "ghost",
-    "destructive",
-    "link",
-    "scope",
-];
+import { useId } from 'react';
+import { cn, stateClassName } from '../internal/classes.js';
+import { Pressable } from '../internal/pressable.js';
+import { Spinner } from './spinner.js';
+export const buttonVariantNames = ['default', 'outline', 'secondary', 'ghost', 'destructive', 'link', 'scope'];
 export const buttonSizeNames = [
-    "default",
-    "xs",
-    "sm",
-    "lg",
-    "icon",
-    "icon-xs",
-    "icon-sm",
-    "icon-lg",
-    "back",
-    "onboarding",
-    "bud",
-    "bud-labeled",
-    "chat-row",
-    "task-link",
-    "card-title",
-    "result-card",
-    "calendar-title",
-    "calendar",
-    "calendar-icon",
-    "nav",
-    "column-header",
-    "column-header-end",
-    "table-link",
-    "badge",
+    'default',
+    'xs',
+    'sm',
+    'lg',
+    'icon',
+    'icon-xs',
+    'icon-sm',
+    'icon-lg',
+    'back',
+    'onboarding',
+    'bud',
+    'bud-labeled',
+    'chat-row',
+    'task-link',
+    'card-title',
+    'result-card',
+    'calendar-title',
+    'calendar',
+    'calendar-icon',
+    'nav',
+    'column-header',
+    'column-header-end',
+    'table-link',
+    'badge',
 ];
-export function buttonVariants({ variant, size, className, } = {}) {
-    return cn("sprout-button", `sprout-button-variant-${variant ?? "default"}`, `sprout-button-size-${size ?? "default"}`, className);
+export function buttonVariants({ variant, size, className } = {}) {
+    return cn('sprout-button', `sprout-button-variant-${variant ?? 'default'}`, `sprout-button-size-${size ?? 'default'}`, className);
 }
 export function Button({ state, pendingLabel, ...props }) {
-    return state ? (_jsx(StatefulButton, { state: state, pendingLabel: pendingLabel, ...props })) : (_jsx(ButtonElement, { ...props }));
+    return state ? _jsx(StatefulButton, { state: state, pendingLabel: pendingLabel, ...props }) : _jsx(ButtonElement, { ...props });
 }
 function ButtonElement({ variant, size, className, ...props }) {
-    return (_jsx(Pressable, { "data-slot": "button", "data-variant": variant ?? "default", "data-size": size ?? "default", ...props, className: stateClassName(buttonVariants({ variant, size }), className) }));
+    return (_jsx(Pressable, { "data-slot": "button", "data-variant": variant ?? 'default', "data-size": size ?? 'default', ...props, className: stateClassName(buttonVariants({ variant, size }), className) }));
 }
 function StatefulButton({ state, pendingLabel, className, children, ...props }) {
     const action = useActionControl(state);
-    const pending = state.kind === "busy" && pendingLabel;
-    return (_jsxs("div", { "data-slot": "button-action", "data-state": state.kind, className: cn("sprout-button-action", className), children: [_jsx(ButtonElement, { ...props, ...action.button, disabled: action.button.disabled || props.disabled, children: pending ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true" }), pendingLabel] })) : (children) }), action.reason] }));
+    const pending = state.kind === 'busy' && pendingLabel;
+    return (_jsxs("div", { "data-slot": "button-action", "data-state": state.kind, className: cn('sprout-button-action', className), children: [_jsx(ButtonElement, { ...props, ...action.button, disabled: action.button.disabled || props.disabled, children: pending ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true" }), pendingLabel] })) : (children) }), action.reason] }));
 }
 /** A row of actions that share one busy or blocked state and one reason. */
 export function ActionGroup({ state, actions, className }) {
     const action = useActionControl(state);
-    return (_jsxs("div", { "data-slot": "action-group", "data-state": state.kind, className: cn("sprout-action-group", className), children: [_jsx("div", { className: "sprout-action-group-row", children: actions.map((item) => (_jsx(Button, { variant: item.variant, onClick: item.onClick, ...action.button, children: item.label }, item.label))) }), action.reason] }));
+    return (_jsxs("div", { "data-slot": "action-group", "data-state": state.kind, className: cn('sprout-action-group', className), children: [_jsx("div", { className: "sprout-action-group-row", children: actions.map(item => (_jsx(Button, { variant: item.variant, onClick: item.onClick, ...action.button, children: item.label }, item.label))) }), action.reason] }));
 }
 const focusable = ':is(a[href], button, input, select, textarea, [tabindex]):not([disabled], [tabindex="-1"], [type="hidden"])';
 export function jumpTo(target) {
-    const element = typeof target === "string" ? document.getElementById(target) : target;
+    const element = typeof target === 'string' ? document.getElementById(target) : target;
     if (!element)
         return;
-    const control = element.matches(focusable) || element.hasAttribute("tabindex")
-        ? element
-        : element.querySelector(focusable);
-    (control ?? element).scrollIntoView({ block: "center" });
+    const control = element.matches(focusable) || element.hasAttribute('tabindex') ? element : element.querySelector(focusable);
+    (control ?? element).scrollIntoView({ block: 'center' });
     if (control instanceof HTMLElement)
         control.focus({ preventScroll: true });
 }
@@ -78,16 +68,16 @@ export function useActionControl(state) {
     const reasonId = useId();
     return {
         button: {
-            disabled: state.kind !== "ready",
+            disabled: state.kind !== 'ready',
             focusableWhenDisabled: true,
-            ...(state.kind === "busy" && { "aria-busy": true }),
-            ...(state.kind === "blocked" && { "aria-describedby": reasonId }),
+            ...(state.kind === 'busy' && { 'aria-busy': true }),
+            ...(state.kind === 'blocked' && { 'aria-describedby': reasonId }),
         },
-        reason: state.kind === "blocked" ? (_jsxs("p", { "data-slot": "action-reason", className: "sprout-action-reason", children: [_jsx("span", { id: reasonId, children: state.reason }), state.fix && _jsx(FixButton, { fix: state.fix })] })) : null,
+        reason: state.kind === 'blocked' ? (_jsxs("p", { "data-slot": "action-reason", className: "sprout-action-reason", children: [_jsx("span", { id: reasonId, children: state.reason }), state.fix && _jsx(FixButton, { fix: state.fix })] })) : null,
     };
 }
 function FixButton({ fix }) {
-    if (fix.kind === "link")
+    if (fix.kind === 'link')
         return (_jsx(Button, { variant: "link", size: "xs", nativeButton: false, render: fix.link, children: fix.label }));
-    return (_jsx(Button, { variant: "link", size: "xs", onClick: fix.kind === "jump" ? () => jumpTo(fix.target) : fix.onClick, children: fix.label }));
+    return (_jsx(Button, { variant: "link", size: "xs", onClick: fix.kind === 'jump' ? () => jumpTo(fix.target) : fix.onClick, children: fix.label }));
 }

package/dist/components/calendar.d.ts

@@ -1,14 +1,14 @@
-import { type ComponentProps } from "react";
-import { DayPicker, type DayButtonProps } from "react-day-picker";
-import { type ButtonVariant } from "./button.js";
-export type { DateRange, Matcher } from "react-day-picker";
+import { type ComponentProps } from 'react';
+import { DayPicker, type DayButtonProps } from 'react-day-picker';
+import { type ButtonVariant } from './button.js';
+export type { DateRange, Matcher } from 'react-day-picker';
 export declare const calendarCaptionLayoutNames: readonly ["label", "dropdown", "dropdown-months", "dropdown-years"];
 export type CalendarCaptionLayout = (typeof calendarCaptionLayoutNames)[number];
 export type CalendarProps = ComponentProps<typeof DayPicker> & {
     /** The Button variant for the previous and next month buttons. Defaults to `ghost`. */
     buttonVariant?: ButtonVariant;
 };
-type DayPickerLocale = ComponentProps<typeof DayPicker>["locale"];
+type DayPickerLocale = ComponentProps<typeof DayPicker>['locale'];
 /**
  * A month grid for picking one date, several dates, or a range. It takes every
  * React DayPicker prop, including `mode`, `selected`, `onSelect`,