@tulipfarm/sprout 0.3.1 → 0.4.0

package/dist/components/sidebar.js

@@ -1,60 +1,60 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "reicon-react/icons/ChevronRight";
-import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore, } from "react";
-import { Button } from "@base-ui/react/button";
-import { Dialog } from "@base-ui/react/dialog";
-import { Collapsible } from "@base-ui/react/collapsible";
-import { cn, stateClassName } from "../internal/classes.js";
-import { Pressable } from "../internal/pressable.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip.js";
-import { Input } from "./input.js";
-import { Separator } from "./separator.js";
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore, } from 'react';
+import { Button } from '@base-ui/react/button';
+import { Dialog } from '@base-ui/react/dialog';
+import { Collapsible } from '@base-ui/react/collapsible';
+import { cn, stateClassName } from '../internal/classes.js';
+import { Pressable } from '../internal/pressable.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
+import { Input } from './input.js';
+import { Separator } from './separator.js';
 const SidebarContext = createContext(null);
 const PanelContext = createContext(null);
 export function useSidebar() {
     const context = useContext(SidebarContext);
     if (!context)
-        throw new Error("Sidebar parts must be inside SidebarProvider.");
+        throw new Error('Sidebar parts must be inside SidebarProvider.');
     return context;
 }
 function usePanel() {
     const context = useContext(PanelContext);
     if (!context)
-        throw new Error("Sidebar navigation parts must be inside Sidebar.");
+        throw new Error('Sidebar navigation parts must be inside Sidebar.');
     return context;
 }
 function subscribeMobile(callback) {
-    const media = window.matchMedia("(max-width: 767px)");
-    media.addEventListener("change", callback);
-    return () => media.removeEventListener("change", callback);
+    const media = window.matchMedia('(max-width: 767px)');
+    media.addEventListener('change', callback);
+    return () => media.removeEventListener('change', callback);
 }
 export function SidebarProvider({ defaultOpen = true, open: controlledOpen, onOpenChange, openMobile: controlledMobile, onOpenMobileChange, keyboardShortcut = true, className, children, ...props }) {
     const [localOpen, setLocalOpen] = useState(defaultOpen);
     const [localMobile, setLocalMobile] = useState(false);
-    const isMobile = useSyncExternalStore(subscribeMobile, () => window.matchMedia("(max-width: 767px)").matches, () => false);
+    const isMobile = useSyncExternalStore(subscribeMobile, () => window.matchMedia('(max-width: 767px)').matches, () => false);
     const open = controlledOpen ?? localOpen;
     const openMobile = controlledMobile ?? localMobile;
     const panelId = useId();
     const triggerRef = useRef(null);
     const wrapperRef = useRef(null);
     function setOpen(value) {
-        const next = typeof value === "function" ? value(open) : value;
+        const next = typeof value === 'function' ? value(open) : value;
         if (controlledOpen === undefined)
             setLocalOpen(next);
         onOpenChange?.(next);
     }
     function setOpenMobile(value) {
-        const next = typeof value === "function" ? value(openMobile) : value;
+        const next = typeof value === 'function' ? value(openMobile) : value;
         if (controlledMobile === undefined)
             setLocalMobile(next);
         onOpenMobileChange?.(next);
     }
     function toggleSidebar() {
         if (isMobile)
-            setOpenMobile((value) => !value);
+            setOpenMobile(value => !value);
         else
-            setOpen((value) => !value);
+            setOpen(value => !value);
     }
     useEffect(() => {
         if (!keyboardShortcut)
@@ -64,21 +64,21 @@ export function SidebarProvider({ defaultOpen = true, open: controlledOpen, onOp
                 event.repeat ||
                 event.altKey ||
                 !(event.metaKey || event.ctrlKey) ||
-                event.key.toLowerCase() !== "b")
+                event.key.toLowerCase() !== 'b')
                 return;
             const target = event.target;
             if (target instanceof Element) {
-                if (target.closest("input, textarea, select, [role=combobox], [role=listbox], [role=menu], [aria-haspopup=menu], [contenteditable]:not([contenteditable=false])"))
+                if (target.closest('input, textarea, select, [role=combobox], [role=listbox], [role=menu], [aria-haspopup=menu], [contenteditable]:not([contenteditable=false])'))
                     return;
-                const owner = target.closest("[data-sprout-sidebar-provider]");
+                const owner = target.closest('[data-sprout-sidebar-provider]');
                 if (owner && owner !== wrapperRef.current)
                     return;
             }
             event.preventDefault();
             toggleSidebar();
         }
-        document.addEventListener("keydown", onKeyDown);
-        return () => document.removeEventListener("keydown", onKeyDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
     });
     return (_jsx(SidebarContext.Provider, { value: {
             open,
@@ -86,26 +86,26 @@ export function SidebarProvider({ defaultOpen = true, open: controlledOpen, onOp
             openMobile,
             setOpenMobile,
             isMobile,
-            state: open ? "expanded" : "collapsed",
+            state: open ? 'expanded' : 'collapsed',
             toggleSidebar,
             panelId,
             triggerRef,
-        }, children: _jsx(TooltipProvider, { delay: 200, children: _jsx("div", { ...props, ref: wrapperRef, "data-sprout-sidebar-provider": "", className: cn("sprout-sidebar-layout font-sprout text-sprout-text", className), children: children }) }) }));
+        }, children: _jsx(TooltipProvider, { delay: 200, children: _jsx("div", { ...props, ref: wrapperRef, "data-sprout-sidebar-provider": "", className: cn('sprout-sidebar-layout font-sprout text-sprout-text', className), children: children }) }) }));
 }
-export function Sidebar({ side = "left", collapsible = "icon", label = "Navigation", portalContainer, className, children, ...props }) {
+export function Sidebar({ side = 'left', collapsible = 'icon', label = 'Navigation', portalContainer, className, children, ...props }) {
     const { open, openMobile, setOpenMobile, isMobile, panelId, triggerRef } = useSidebar();
-    const mobile = isMobile && collapsible !== "none";
-    const collapsed = !mobile && !open && collapsible === "icon";
-    const offcanvas = !open && collapsible === "offcanvas";
+    const mobile = isMobile && collapsible !== 'none';
+    const collapsed = !mobile && !open && collapsible === 'icon';
+    const offcanvas = !open && collapsible === 'offcanvas';
     const content = (_jsx(PanelContext.Provider, { value: { collapsed, side, portalContainer }, children: children }));
     if (mobile) {
-        return (_jsx(Dialog.Root, { open: openMobile, onOpenChange: setOpenMobile, children: _jsxs(Dialog.Portal, { container: portalContainer, children: [_jsx(Dialog.Backdrop, { className: "sprout-sidebar-backdrop" }), _jsxs(Dialog.Popup, { id: panelId, "data-side": side, className: "sprout-sidebar-drawer font-sprout text-sprout-text", finalFocus: triggerRef, children: [_jsxs("div", { className: "sprout-sidebar-drawer-heading", children: [_jsx(Dialog.Title, { children: label }), _jsx(Dialog.Close, { className: "sprout-sidebar-close", children: "Close" })] }), _jsx("aside", { ...props, "aria-label": label, "data-sprout-sidebar": "", "data-state": "expanded", className: cn("sprout-sidebar-panel sprout-sidebar-mobile bg-sprout-canvas", className), children: content })] })] }) }));
+        return (_jsx(Dialog.Root, { open: openMobile, onOpenChange: setOpenMobile, children: _jsxs(Dialog.Portal, { container: portalContainer, children: [_jsx(Dialog.Backdrop, { className: "sprout-sidebar-backdrop" }), _jsxs(Dialog.Popup, { id: panelId, "data-side": side, className: "sprout-sidebar-drawer font-sprout text-sprout-text", finalFocus: triggerRef, children: [_jsxs("div", { className: "sprout-sidebar-drawer-heading", children: [_jsx(Dialog.Title, { children: label }), _jsx(Dialog.Close, { className: "sprout-sidebar-close", children: "Close" })] }), _jsx("aside", { ...props, "aria-label": label, "data-sprout-sidebar": "", "data-state": "expanded", className: cn('sprout-sidebar-panel sprout-sidebar-mobile bg-sprout-canvas', className), children: content })] })] }) }));
     }
-    return (_jsx("aside", { ...props, id: panelId, "aria-label": label, "data-sprout-sidebar": "", "data-state": collapsed ? "collapsed" : "expanded", "data-side": side, "data-collapsible": collapsible, "data-offcanvas": offcanvas ? "" : undefined, "aria-hidden": offcanvas || undefined, inert: offcanvas, className: cn("sprout-sidebar-panel bg-sprout-canvas", className), children: content }));
+    return (_jsx("aside", { ...props, id: panelId, "aria-label": label, "data-sprout-sidebar": "", "data-state": collapsed ? 'collapsed' : 'expanded', "data-side": side, "data-collapsible": collapsible, "data-offcanvas": offcanvas ? '' : undefined, "aria-hidden": offcanvas || undefined, inert: offcanvas, className: cn('sprout-sidebar-panel bg-sprout-canvas', className), children: content }));
 }
-export function SidebarTrigger({ className, onClick, children = "Toggle sidebar", ...props }) {
+export function SidebarTrigger({ className, onClick, children = 'Toggle sidebar', ...props }) {
     const { isMobile, open, openMobile, toggleSidebar, panelId, triggerRef } = useSidebar();
-    return (_jsx(Button, { "aria-label": "Toggle sidebar", "aria-expanded": isMobile ? openMobile : open, "aria-controls": panelId, ...props, className: stateClassName("sprout-sidebar-trigger", className), onClick: (event) => {
+    return (_jsx(Button, { "aria-label": "Toggle sidebar", "aria-expanded": isMobile ? openMobile : open, "aria-controls": panelId, ...props, className: stateClassName('sprout-sidebar-trigger', className), onClick: event => {
             onClick?.(event);
             if (event.defaultPrevented)
                 return;
@@ -114,43 +114,42 @@ export function SidebarTrigger({ className, onClick, children = "Toggle sidebar"
         }, children: children }));
 }
 export function SidebarHeader({ className, ...props }) {
-    return _jsx("div", { ...props, className: cn("sprout-sidebar-header", className) });
+    return _jsx("div", { ...props, className: cn('sprout-sidebar-header', className) });
 }
 /** A 32px search or filter field for the sidebar header, on the canvas color. */
 export function SidebarInput({ className, ...props }) {
-    return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", ...props, className: stateClassName("sprout-sidebar-input", className) }));
+    return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", ...props, className: stateClassName('sprout-sidebar-input', className) }));
 }
 export function SidebarFooter({ className, ...props }) {
-    return _jsx("div", { ...props, className: cn("sprout-sidebar-footer", className) });
+    return _jsx("div", { ...props, className: cn('sprout-sidebar-footer', className) });
 }
 export function SidebarSeparator({ className, ...props }) {
-    return (_jsx(Separator, { "data-sidebar": "separator", ...props, className: stateClassName("sprout-sidebar-separator", className) }));
+    return (_jsx(Separator, { "data-sidebar": "separator", ...props, className: stateClassName('sprout-sidebar-separator', className) }));
 }
 export function SidebarContent({ className, ...props }) {
-    return _jsx("div", { ...props, className: cn("sprout-sidebar-content", className) });
+    return _jsx("div", { ...props, className: cn('sprout-sidebar-content', className) });
 }
 export function SidebarGroup({ className, ...props }) {
-    return _jsx("div", { ...props, className: cn("sprout-sidebar-group", className) });
+    return _jsx("div", { ...props, className: cn('sprout-sidebar-group', className) });
 }
 export function SidebarGroupLabel({ className, ...props }) {
-    return (_jsx("div", { ...props, className: cn("sprout-sidebar-group-label", className) }));
+    return _jsx("div", { ...props, className: cn('sprout-sidebar-group-label', className) });
 }
 export function SidebarMenu({ className, ...props }) {
-    return _jsx("ul", { ...props, className: cn("sprout-sidebar-menu", className) });
+    return _jsx("ul", { ...props, className: cn('sprout-sidebar-menu', className) });
 }
 export function SidebarMenuItem({ className, ...props }) {
-    return (_jsx("li", { ...props, className: cn("sprout-sidebar-menu-item", className) }));
+    return _jsx("li", { ...props, className: cn('sprout-sidebar-menu-item', className) });
 }
 export function SidebarMenuButton({ icon, badge, isActive = false, tooltip, className, children, onClick, ...props }) {
     const { collapsed, side, portalContainer } = usePanel();
     const { setOpenMobile } = useSidebar();
-    const content = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+    const content = typeof tooltip === 'string' ? { children: tooltip } : tooltip;
     const { hidden: hideTooltip = !collapsed, ...contentProps } = content ?? {};
-    const accessibleLabel = props["aria-label"] ??
-        (typeof content?.children === "string" ? content.children : undefined) ??
-        (typeof children === "string" ? children : undefined);
-    return (_jsxs(Tooltip, { disabled: hideTooltip || props.disabled, children: [_jsxs(TooltipTrigger, { render: _jsx(Pressable, { ...props, "aria-label": accessibleLabel, "aria-current": props["aria-current"] ??
-                        (isActive && props.nativeButton === false ? "page" : undefined), "data-active": isActive ? "" : undefined, className: stateClassName("sprout-sidebar-menu-button", className), onClick: (event) => {
+    const accessibleLabel = props['aria-label'] ??
+        (typeof content?.children === 'string' ? content.children : undefined) ??
+        (typeof children === 'string' ? children : undefined);
+    return (_jsxs(Tooltip, { disabled: hideTooltip || props.disabled, children: [_jsxs(TooltipTrigger, { render: _jsx(Pressable, { ...props, "aria-label": accessibleLabel, "aria-current": props['aria-current'] ?? (isActive && props.nativeButton === false ? 'page' : undefined), "data-active": isActive ? '' : undefined, className: stateClassName('sprout-sidebar-menu-button', className), onClick: event => {
                         onClick?.(event);
                         if (!event.defaultPrevented &&
                             props.nativeButton === false &&
@@ -159,29 +158,29 @@ export function SidebarMenuButton({ icon, badge, isActive = false, tooltip, clas
                             !event.shiftKey &&
                             !event.altKey)
                             setOpenMobile(false);
-                    } }), children: [icon && (_jsx("span", { className: "sprout-sidebar-icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "sprout-sidebar-label", children: children }), badge != null && _jsx("span", { className: "sprout-sidebar-badge", children: badge })] }), _jsx(TooltipContent, { side: side === "left" ? "right" : "left", sideOffset: 8, container: portalContainer, ...contentProps, className: stateClassName("sprout-sidebar-tooltip", contentProps.className), children: contentProps.children ?? children })] }));
+                    } }), children: [icon && (_jsx("span", { className: "sprout-sidebar-icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "sprout-sidebar-label", children: children }), badge != null && _jsx("span", { className: "sprout-sidebar-badge", children: badge })] }), _jsx(TooltipContent, { side: side === 'left' ? 'right' : 'left', sideOffset: 8, container: portalContainer, ...contentProps, className: stateClassName('sprout-sidebar-tooltip', contentProps.className), children: contentProps.children ?? children })] }));
 }
 export function SidebarMenuAction({ className, ...props }) {
     usePanel();
-    return (_jsx(Button, { ...props, className: stateClassName("sprout-sidebar-menu-action", className) }));
+    return _jsx(Button, { ...props, className: stateClassName('sprout-sidebar-menu-action', className) });
 }
 export function SidebarMenuSub({ className, ...props }) {
-    return (_jsx("ul", { ...props, className: cn("sprout-sidebar-menu sprout-sidebar-sub", className) }));
+    return _jsx("ul", { ...props, className: cn('sprout-sidebar-menu sprout-sidebar-sub', className) });
 }
 export const SidebarMenuSubItem = SidebarMenuItem;
 export function SidebarMenuSubButton({ className, ...props }) {
-    return (_jsx(SidebarMenuButton, { ...props, className: stateClassName("sprout-sidebar-sub-button", className) }));
+    return (_jsx(SidebarMenuButton, { ...props, className: stateClassName('sprout-sidebar-sub-button', className) }));
 }
 export function SidebarSection({ label, children, open: controlledOpen, defaultOpen = false, onOpenChange, ...props }) {
     const [localOpen, setLocalOpen] = useState(defaultOpen);
     const { collapsed } = usePanel();
     const open = !collapsed && (controlledOpen ?? localOpen);
-    return (_jsx(SidebarMenuItem, { children: _jsxs(Collapsible.Root, { open: open, onOpenChange: (value) => {
+    return (_jsx(SidebarMenuItem, { children: _jsxs(Collapsible.Root, { open: open, onOpenChange: value => {
                 if (controlledOpen === undefined)
                     setLocalOpen(value);
                 onOpenChange?.(value);
-            }, children: [_jsxs("div", { className: "sprout-sidebar-section-heading", children: [_jsx(SidebarMenuButton, { ...props, children: label }), _jsx(Collapsible.Trigger, { render: _jsx(SidebarMenuAction, { "aria-label": `${open ? "Collapse" : "Expand"} ${label}` }), children: _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "sprout-sidebar-chevron" }) })] }), _jsx(Collapsible.Panel, { className: "sprout-sidebar-section-content", inert: !open, children: _jsx(SidebarMenuSub, { children: children }) })] }) }));
+            }, children: [_jsxs("div", { className: "sprout-sidebar-section-heading", children: [_jsx(SidebarMenuButton, { ...props, children: label }), _jsx(Collapsible.Trigger, { render: _jsx(SidebarMenuAction, { "aria-label": `${open ? 'Collapse' : 'Expand'} ${label}` }), children: _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "sprout-sidebar-chevron" }) })] }), _jsx(Collapsible.Panel, { className: "sprout-sidebar-section-content", inert: !open, children: _jsx(SidebarMenuSub, { children: children }) })] }) }));
 }
 export function SidebarMenuSkeleton({ className, ...props }) {
-    return (_jsxs("div", { ...props, "aria-hidden": "true", className: cn("sprout-sidebar-skeleton", className), children: [_jsx("span", {}), _jsx("span", {})] }));
+    return (_jsxs("div", { ...props, "aria-hidden": "true", className: cn('sprout-sidebar-skeleton', className), children: [_jsx("span", {}), _jsx("span", {})] }));
 }

package/dist/components/skeleton.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentProps } from "react";
-import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
 export declare const skeletonShapeNames: readonly ["line", "title", "avatar", "panel", "checkbox", "action"];
 export type SkeletonShape = (typeof skeletonShapeNames)[number];
-export interface SkeletonProps extends ComponentProps<"div"> {
+export interface SkeletonProps extends ComponentProps<'div'> {
     /**
      * The placeholder footprint. `"line"` is a 16px text row, `"title"` a 24px
      * heading at two thirds width, `"avatar"` a 32px circle, `"panel"` a 128px
@@ -15,10 +15,10 @@ export declare function Skeleton({ shape, className, ...props }: SkeletonProps):
 export declare const skeletonGroupGapNames: readonly ["sm", "md", "lg"];
 export type SkeletonGroupGap = (typeof skeletonGroupGapNames)[number];
 export interface SkeletonGroupState extends Record<string, unknown> {
-    slot: "skeleton-group";
+    slot: 'skeleton-group';
     gap: SkeletonGroupGap;
 }
-export interface SkeletonGroupProps extends useRender.ComponentProps<"div", SkeletonGroupState> {
+export interface SkeletonGroupProps extends useRender.ComponentProps<'div', SkeletonGroupState> {
     /**
      * Names the loading region, such as `"Loading projects"`. It becomes the
      * accessible name and is also read as visually hidden text.

package/dist/components/skeleton.js

@@ -1,32 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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";
-export const skeletonShapeNames = [
-    "line",
-    "title",
-    "avatar",
-    "panel",
-    "checkbox",
-    "action",
-];
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cn } from '../internal/classes.js';
+export const skeletonShapeNames = ['line', 'title', 'avatar', 'panel', 'checkbox', 'action'];
 /** A pulsing placeholder that holds the space of content still loading. */
-export function Skeleton({ shape = "line", className, ...props }) {
-    return (_jsx("div", { "aria-hidden": "true", "data-slot": "skeleton", "data-shape": shape, className: cn("sprout-skeleton", className), ...props }));
+export function Skeleton({ shape = 'line', className, ...props }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "skeleton", "data-shape": shape, className: cn('sprout-skeleton', className), ...props }));
 }
-export const skeletonGroupGapNames = ["sm", "md", "lg"];
+export const skeletonGroupGapNames = ['sm', 'md', 'lg'];
 /** A `status` region that stacks skeletons and names what is loading. */
-export function SkeletonGroup({ label, gap = "md", className, children, render, ref, ...props }) {
+export function SkeletonGroup({ label, gap = 'md', className, children, render, ref, ...props }) {
     return useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         ref,
         render,
         props: mergeProps({
-            role: "status",
-            "aria-label": label,
-            className: cn("sprout-skeleton-group", className),
-            children: (_jsxs(_Fragment, { children: [children, label ? (_jsx("span", { className: "sprout-skeleton-group-label", children: `${label}…` })) : null] })),
+            role: 'status',
+            'aria-label': label,
+            className: cn('sprout-skeleton-group', className),
+            children: (_jsxs(_Fragment, { children: [children, label ? _jsx("span", { className: "sprout-skeleton-group-label", children: `${label}…` }) : null] })),
         }, props),
-        state: { slot: "skeleton-group", gap },
+        state: { slot: 'skeleton-group', gap },
     });
 }

package/dist/components/slider.d.ts

@@ -1,4 +1,4 @@
-import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { Slider as BaseSlider } from '@base-ui/react/slider';
 export type SliderValue = number | readonly number[];
 export interface SliderProps<Value extends SliderValue = SliderValue> extends BaseSlider.Root.Props<Value> {
     /**
@@ -14,4 +14,4 @@ export interface SliderProps<Value extends SliderValue = SliderValue> extends Ba
  * Pass a number or an array to `value` or `defaultValue`. Name it with
  * `aria-label`, `aria-labelledby`, or `getAriaLabel`.
  */
-export declare function Slider<Value extends SliderValue = SliderValue>({ className, defaultValue, value, min, max, getAriaLabel, getAriaValueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SliderProps<Value>): import("react").JSX.Element;
+export declare function Slider<Value extends SliderValue = SliderValue>({ className, defaultValue, value, min, max, getAriaLabel, getAriaValueText, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: SliderProps<Value>): import("react").JSX.Element;

package/dist/components/slider.js

@@ -1,14 +1,14 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Slider as BaseSlider } from "@base-ui/react/slider";
-import { stateClassName } from "../internal/classes.js";
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { stateClassName } from '../internal/classes.js';
 function thumbLabel(label, count) {
     if (!label)
         return undefined;
     if (count === 1)
         return () => label;
     if (count === 2)
-        return (index) => `${label} ${index === 0 ? "minimum" : "maximum"}`;
+        return (index) => `${label} ${index === 0 ? 'minimum' : 'maximum'}`;
     return (index) => `${label} ${index + 1}`;
 }
 /**
@@ -16,9 +16,9 @@ function thumbLabel(label, count) {
  * Pass a number or an array to `value` or `defaultValue`. Name it with
  * `aria-label`, `aria-labelledby`, or `getAriaLabel`.
  */
-export function Slider({ className, defaultValue, value, min = 0, max = 100, getAriaLabel, getAriaValueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+export function Slider({ className, defaultValue, value, min = 0, max = 100, getAriaLabel, getAriaValueText, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }) {
     const shape = value ?? defaultValue;
     const count = Array.isArray(shape) ? shape.length : 1;
     const label = getAriaLabel ?? (ariaLabelledBy ? undefined : thumbLabel(ariaLabel, count));
-    return (_jsx(BaseSlider.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props, className: stateClassName("sprout-slider", className), children: _jsxs(BaseSlider.Control, { "data-slot": "slider-control", className: "sprout-slider-control", children: [_jsx(BaseSlider.Track, { "data-slot": "slider-track", className: "sprout-slider-track", children: _jsx(BaseSlider.Indicator, { "data-slot": "slider-range", className: "sprout-slider-range" }) }), Array.from({ length: count }, (_, index) => (_jsx(BaseSlider.Thumb, { index: index, "data-slot": "slider-thumb", className: "sprout-slider-thumb", getAriaLabel: label, getAriaValueText: getAriaValueText }, index)))] }) }));
+    return (_jsx(BaseSlider.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props, className: stateClassName('sprout-slider', className), children: _jsxs(BaseSlider.Control, { "data-slot": "slider-control", className: "sprout-slider-control", children: [_jsx(BaseSlider.Track, { "data-slot": "slider-track", className: "sprout-slider-track", children: _jsx(BaseSlider.Indicator, { "data-slot": "slider-range", className: "sprout-slider-range" }) }), Array.from({ length: count }, (_, index) => (_jsx(BaseSlider.Thumb, { index: index, "data-slot": "slider-thumb", className: "sprout-slider-thumb", getAriaLabel: label, getAriaValueText: getAriaValueText }, index)))] }) }));
 }

package/dist/components/spinner.d.ts

@@ -1,12 +1,12 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps } from 'react';
 export declare const spinnerSizeNames: readonly ["sm", "default", "lg"];
 export type SpinnerSize = (typeof spinnerSizeNames)[number];
 export declare const thinkingSpinnerSizeNames: readonly ["lg", "xl"];
 export type ThinkingSpinnerSize = (typeof thinkingSpinnerSizeNames)[number];
 export declare const spinnerActivityNames: readonly ["working", "searching", "solving", "listening", "connecting", "weaving", "composing", "breathing", "shaping"];
 export type SpinnerActivity = (typeof spinnerActivityNames)[number];
-export interface LoaderSpinnerProps extends Omit<ComponentProps<"svg">, "children" | "color"> {
-    variant?: "default" | undefined;
+export interface LoaderSpinnerProps extends Omit<ComponentProps<'svg'>, 'children' | 'color'> {
+    variant?: 'default' | undefined;
     /**
      * `"sm"` is 12px, `"default"` 16px, and `"lg"` 20px. The size holds inside
      * buttons; badges shrink it to their 12px icon size.
@@ -14,9 +14,9 @@ export interface LoaderSpinnerProps extends Omit<ComponentProps<"svg">, "childre
     size?: SpinnerSize | undefined;
     activity?: never;
 }
-export interface ThinkingSpinnerProps extends Omit<ComponentProps<"span">, "children" | "color"> {
+export interface ThinkingSpinnerProps extends Omit<ComponentProps<'span'>, 'children' | 'color'> {
     /** A dotted thought orb for AI and agent work, in place of the spinning loader. */
-    variant: "thinking";
+    variant: 'thinking';
     /**
      * `"lg"` is 20px, for inline text. `"xl"` is 64px, for avatar-scale status.
      * Each is a separately tuned design, so no other sizes exist.

package/dist/components/spinner.js

@@ -1,23 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { lazy, Suspense } from "react";
-import { Loader } from "reicon-react/icons/Loader";
-import { cn } from "../internal/classes.js";
-export const spinnerSizeNames = ["sm", "default", "lg"];
-export const thinkingSpinnerSizeNames = ["lg", "xl"];
+import { lazy, Suspense } from 'react';
+import { Loader } from 'reicon-react/icons/Loader';
+import { cn } from '../internal/classes.js';
+export const spinnerSizeNames = ['sm', 'default', 'lg'];
+export const thinkingSpinnerSizeNames = ['lg', 'xl'];
 export const spinnerActivityNames = [
-    "working",
-    "searching",
-    "solving",
-    "listening",
-    "connecting",
-    "weaving",
-    "composing",
-    "breathing",
-    "shaping",
+    'working',
+    'searching',
+    'solving',
+    'listening',
+    'connecting',
+    'weaving',
+    'composing',
+    'breathing',
+    'shaping',
 ];
 const orbPixels = { lg: 20, xl: 64 };
 // Loaded on first thinking render, so apps showing only the loader never download the orb.
-const ThinkingOrb = lazy(() => import("thinking-orbs").then(({ ThinkingOrb }) => ({ default: ThinkingOrb })));
+const ThinkingOrb = lazy(() => import('thinking-orbs').then(({ ThinkingOrb }) => ({ default: ThinkingOrb })));
 /**
  * A loading indicator. By default it is a spinning loader that takes the
  * current text color; `variant="thinking"` shows a monochrome thought orb
@@ -27,17 +27,13 @@ const ThinkingOrb = lazy(() => import("thinking-orbs").then(({ ThinkingOrb }) =>
  * happening.
  */
 export function Spinner(props) {
-    if (props.variant === "thinking")
+    if (props.variant === 'thinking')
         return _jsx(ThinkingSpinner, { ...props });
-    const { variant: _variant, size = "default", className, role = "status", "aria-label": label = "Loading", "aria-hidden": hidden, ...rest } = props;
-    const decorative = hidden === true || hidden === "true";
-    return (_jsx(Loader, { "data-slot": "spinner", "data-variant": "default", "data-size": size, ...(decorative
-            ? { "aria-hidden": "true" }
-            : { role, "aria-label": label }), focusable: "false", className: cn("sprout-spinner", `sprout-spinner-size-${size}`, className), ...rest }));
+    const { variant: _variant, size = 'default', className, role = 'status', 'aria-label': label = 'Loading', 'aria-hidden': hidden, ...rest } = props;
+    const decorative = hidden === true || hidden === 'true';
+    return (_jsx(Loader, { "data-slot": "spinner", "data-variant": "default", "data-size": size, ...(decorative ? { 'aria-hidden': 'true' } : { role, 'aria-label': label }), focusable: "false", className: cn('sprout-spinner', `sprout-spinner-size-${size}`, className), ...rest }));
 }
-function ThinkingSpinner({ variant, size = "lg", activity = "working", className, role = "status", "aria-label": label = "Thinking", "aria-hidden": hidden, ...rest }) {
-    const decorative = hidden === true || hidden === "true";
-    return (_jsx("span", { "data-slot": "spinner", "data-variant": variant, "data-size": size, "data-activity": activity, ...(decorative
-            ? { "aria-hidden": "true" }
-            : { role, "aria-label": label }), className: cn("sprout-spinner", `sprout-spinner-size-${size}`, className), ...rest, children: _jsx(Suspense, { fallback: null, children: _jsx(ThinkingOrb, { state: activity, size: orbPixels[size], theme: "auto", role: "presentation", "aria-hidden": "true" }) }) }));
+function ThinkingSpinner({ variant, size = 'lg', activity = 'working', className, role = 'status', 'aria-label': label = 'Thinking', 'aria-hidden': hidden, ...rest }) {
+    const decorative = hidden === true || hidden === 'true';
+    return (_jsx("span", { "data-slot": "spinner", "data-variant": variant, "data-size": size, "data-activity": activity, ...(decorative ? { 'aria-hidden': 'true' } : { role, 'aria-label': label }), className: cn('sprout-spinner', `sprout-spinner-size-${size}`, className), ...rest, children: _jsx(Suspense, { fallback: null, children: _jsx(ThinkingOrb, { state: activity, size: orbPixels[size], theme: "auto", role: "presentation", "aria-hidden": "true" }) }) }));
 }

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

@@ -1,7 +1,7 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes } from 'react';
 export declare const sqlViewerLayoutNames: readonly ["auto", "horizontal", "vertical"];
 export type SqlViewerLayout = (typeof sqlViewerLayoutNames)[number];
-export type SqlViewerCardinality = "one" | "many";
+export type SqlViewerCardinality = 'one' | 'many';
 export interface SqlViewerOption {
     id: string;
     label: string;
@@ -13,24 +13,24 @@ export type SqlViewerField = {
     label: string;
     required: boolean;
 } & ({
-    kind: "text";
+    kind: 'text';
     maxLength: number;
 } | {
-    kind: "numeric";
+    kind: 'numeric';
     precision: number;
     scale: number;
 } | {
-    kind: "boolean";
+    kind: 'boolean';
 } | {
-    kind: "date";
+    kind: 'date';
 } | {
-    kind: "timestamp";
-    timezone?: "UTC";
+    kind: 'timestamp';
+    timezone?: 'UTC';
 } | {
-    kind: "single-select" | "multi-select";
+    kind: 'single-select' | 'multi-select';
     options: readonly SqlViewerOption[];
 } | {
-    kind: "relationship";
+    kind: 'relationship';
     /** A table name (format 3) or table UUID (format 2), matching a table's `id`. */
     targetTableId: string;
     cardinality: SqlViewerCardinality;
@@ -39,11 +39,11 @@ export type SqlViewerField = {
         fieldId: string;
         label: string;
     } | null;
-    onDelete?: "restrict";
+    onDelete?: 'restrict';
 } | {
-    kind: "file";
+    kind: 'file';
     cardinality: SqlViewerCardinality;
-    access?: "independent";
+    access?: 'independent';
 });
 export interface SqlViewerUniqueKey {
     id: string;
@@ -57,7 +57,7 @@ export interface SqlViewerTable {
     fields: readonly SqlViewerField[];
     uniqueKeys?: readonly SqlViewerUniqueKey[];
 }
-export interface SqlViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "children"> {
+export interface SqlViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
     /** TulipFarm table definitions or table documents, in display order. */
     tables: readonly SqlViewerTable[];
     /** Names the diagram for assistive tech, such as “Tables in Sales”. */