@uisatin/ui 0.2.0 → 0.4.0

package/components/popover.d.ts

@@ -8,8 +8,10 @@ import { Popover as PopoverPrimitive } from 'radix-ui';
  *
  * Built on the Radix Popover. `children` is the trigger (rendered with `asChild`, so pass a
  * Button); `body` fills the body slot. Pass `container` to portal it into the docs stage.
+ *
+ * Other props, `ref` included, go to the popover's panel (the Radix Content).
  */
-export interface PopoverProps {
+export interface PopoverProps extends Omit<React.ComponentProps<typeof PopoverPrimitive.Content>, 'title' | 'children' | 'asChild' | 'side' | 'align' | 'sideOffset' | 'onOpenAutoFocus' | 'onInteractOutside'> {
     title: React.ReactNode;
     description?: React.ReactNode;
     /** The trigger. Rendered with `asChild`. */
@@ -32,13 +34,17 @@ export interface PopoverProps {
     onInteractOutside?: (event: Event) => void;
     className?: string;
 }
-export declare function Popover({ title, description, children, body, open, defaultOpen, onOpenChange, side, align, sideOffset, closeButton, container, onOpenAutoFocus, onInteractOutside, className, }: PopoverProps): React.JSX.Element;
+export declare function Popover({ title, description, children, body, open, defaultOpen, onOpenChange, side, align, sideOffset, closeButton, container, onOpenAutoFocus, onInteractOutside, className, ...props }: PopoverProps): React.JSX.Element;
+export interface PopoverPanelProps extends Omit<React.ComponentProps<'div'>, 'title' | 'children'>, Pick<PopoverProps, 'title' | 'description' | 'body' | 'closeButton'> {
+    /** Called when the close button is pressed. */
+    onClose?: () => void;
+}
 /**
  * The popover's panel on its own, in place: no trigger, no positioning. For docs, previews
  * and layers you anchor yourself. The close button calls `onClose`.
+ *
+ * Other props, `ref` included, go to the panel's root `div`.
  */
-export declare function PopoverPanel({ title, description, body, closeButton, onClose, className, }: Pick<PopoverProps, 'title' | 'description' | 'body' | 'closeButton' | 'className'> & {
-    onClose?: () => void;
-}): React.JSX.Element;
+export declare function PopoverPanel({ title, description, body, closeButton, onClose, className, ...props }: PopoverPanelProps): React.JSX.Element;
 /** Wrap a body button in this to make it close the popover: `<PopoverClose asChild><Button…/></PopoverClose>`. */
 export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;

package/components/popover.js

@@ -1,4 +1,3 @@
-'use client';export { Popover, PopoverClose, PopoverPanel } from '../chunk-BNZVTLHV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=popover.js.map
-//# sourceMappingURL=popover.js.map
+'use client';export { Popover, PopoverClose, PopoverPanel } from '../chunk-7SVMERPH.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/progress.js

@@ -1,4 +1,2 @@
-'use client';export { Progress } from '../chunk-7TXHCRAG.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=progress.js.map
-//# sourceMappingURL=progress.js.map
+'use client';export { Progress } from '../chunk-LKSFTNPF.js';
+import '../chunk-EHEXE2UV.js';

package/components/prompt-bar.js

@@ -1,6 +1,6 @@
-'use client';export { PromptBar, defaultActions } from '../chunk-6YXUBP27.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=prompt-bar.js.map
-//# sourceMappingURL=prompt-bar.js.map
+'use client';export { PromptBar, defaultActions } from '../chunk-JCR5TWTF.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/radio.js

@@ -1,4 +1,2 @@
-'use client';export { Radio, RadioGroup } from '../chunk-LLHTVIM3.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=radio.js.map
-//# sourceMappingURL=radio.js.map
+'use client';export { Radio, RadioGroup } from '../chunk-EXKSKYG3.js';
+import '../chunk-EHEXE2UV.js';

package/components/search-bar.js

@@ -1,5 +1,3 @@
-'use client';export { SearchBar } from '../chunk-UGRSWP6U.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=search-bar.js.map
-//# sourceMappingURL=search-bar.js.map
+'use client';export { SearchBar } from '../chunk-K5G5OEV5.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-EHEXE2UV.js';

package/components/segmented-control.d.ts

@@ -5,6 +5,8 @@ import * as React from 'react';
  * the labels to the new segment, as in Tabs and Pagination (sliding-indicator.tsx: 300 ms,
  * the leading edge first): a white card with Shadow/sm in Light. Arrow keys move between segments.
  * Values 1:1 with the uiKit `_segmentedControl/item` (3080:20278) and `SegmentedControl` (3080:21247) sets.
+ *
+ * Other props, `ref` included, go to the track (the Radix ToggleGroup root, a `group`).
  */
 type Size = 'xs' | 'md' | 'lg';
 type Shape = 'default' | 'rounded';
@@ -14,7 +16,7 @@ export interface SegmentedControlItem {
     icon?: React.ReactNode;
     disabled?: boolean;
 }
-export interface SegmentedControlProps {
+export interface SegmentedControlProps extends Omit<React.ComponentProps<'div'>, 'defaultValue' | 'dir' | 'children'> {
     items: SegmentedControlItem[];
     value?: string;
     defaultValue?: string;
@@ -28,5 +30,5 @@ export interface SegmentedControlProps {
     'aria-label'?: string;
     className?: string;
 }
-export declare function SegmentedControl({ items, value: valueProp, defaultValue, onValueChange, size, shape, border, fullWidth, className, ...aria }: SegmentedControlProps): React.JSX.Element;
+export declare function SegmentedControl({ items, value: valueProp, defaultValue, onValueChange, size, shape, border, fullWidth, className, ref, ...props }: SegmentedControlProps): React.JSX.Element;
 export {};

package/components/segmented-control.js

@@ -1,5 +1,3 @@
-'use client';export { SegmentedControl } from '../chunk-WTMZT3IT.js';
-import '../chunk-J3NSDRVH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=segmented-control.js.map
-//# sourceMappingURL=segmented-control.js.map
+'use client';export { SegmentedControl } from '../chunk-JYGCZWET.js';
+import '../chunk-XETMIETJ.js';
+import '../chunk-EHEXE2UV.js';

package/components/select.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Select as SelectPrimitive } from 'radix-ui';
 import { type MenuItemContentProps } from './dropdown.js';
 /**
  * Select, 1:1 with the uiKit `Select` set (4022:3531): the field around it is Input's (a 13px
@@ -15,6 +16,8 @@ import { type MenuItemContentProps } from './dropdown.js';
  * Built on the Radix Select: arrow keys, typeahead, Home/End, Escape, a native form value
  * (`name`), and focus back on the trigger. Inside a FormField, leave out `label`, `hint` and
  * `error`.
+ *
+ * Other props, `ref` included, go to the trigger button.
  */
 export interface SelectOption extends Omit<MenuItemContentProps, 'label' | 'selected' | 'renderLabel' | 'layout' | 'iconSize'> {
     value: string;
@@ -25,12 +28,13 @@ export interface SelectGroup {
     label?: React.ReactNode;
     options: SelectOption[];
 }
-export interface SelectProps {
+export interface SelectProps extends Omit<React.ComponentProps<typeof SelectPrimitive.Trigger>, 'value' | 'defaultValue' | 'disabled' | 'name' | 'children' | 'asChild'> {
     /** Options, or titled groups of options. */
     options: SelectOption[] | SelectGroup[];
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /** Shown while nothing is picked. Defaults to the `select` label ("Select…"). */
     placeholder?: string;
     label?: React.ReactNode;
     hint?: React.ReactNode;
@@ -60,12 +64,14 @@ export interface SelectProps {
     /** Show a state without interacting, for state sheets. */
     'data-force'?: 'hover' | 'focus';
 }
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
 export declare const isOptionGroups: <T>(o: T[] | {
     options: T[];
 }[]) => o is {
     options: T[];
 }[];
 /** Ids and state for a field with a label, a hint or an error, inside or outside a FormField. */
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
 export declare function useFieldChrome({ id, disabled, error, hint, }: {
     id?: string;
     disabled?: boolean;
@@ -76,12 +82,14 @@ export declare function useFieldChrome({ id, disabled, error, hint, }: {
     disabled: boolean;
     invalid: boolean;
     required: boolean | undefined;
+    name: string | undefined;
     describedBy: string | undefined;
     message: React.ReactNode;
     messageId: string | undefined;
     isError: boolean;
 };
 /** Label 8px above the control, hint or error 8px under it: Input's field, for Select and Combobox. */
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
 export declare function FieldChrome({ label, action, chrome, className, children, }: {
     label?: React.ReactNode;
     /** On the label's line, at the field's right edge: the smallest button, e.g. Clear. */
@@ -91,7 +99,8 @@ export declare function FieldChrome({ label, action, chrome, className, children
     children: React.ReactNode;
 }): React.JSX.Element;
 /** The trigger's chevron, 16px in the icon colour. */
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
 export declare function SelectChevron({ className }: {
     className?: string;
 }): React.JSX.Element;
-export declare function Select({ options, value, defaultValue, onValueChange, placeholder, label, hint, error, size, leadingIcon, layout, iconSize, disabled, required, name, id, open, defaultOpen, onOpenChange, container, wrapperClassName, className, 'data-force': force, ...props }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, placeholder, label, hint, error, size: ownSize, leadingIcon, layout, iconSize, disabled, required, name, id, open, defaultOpen, onOpenChange, container, wrapperClassName, className, 'data-force': force, 'aria-describedby': describedBy, ...props }: SelectProps): React.JSX.Element;

package/components/select.js

@@ -1,7 +1,6 @@
-'use client';export { FieldChrome, Select, SelectChevron, isOptionGroups, useFieldChrome } from '../chunk-72OCFAPT.js';
-import '../chunk-UBNHSZSE.js';
-import '../chunk-3DINAQLL.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=select.js.map
-//# sourceMappingURL=select.js.map
+'use client';export { FieldChrome, Select, SelectChevron, isOptionGroups, useFieldChrome } from '../chunk-EQAFDIPE.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-P36KBUYD.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/selectable-card.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/**
+ * SelectableCard: what SelectableRadio and SelectableCheckbox share. A card with an optional
+ * icon and a title over a description; the card's border shows the state
+ * (styles/components.css): border/default, border/strong on hover, an action/primary border
+ * with a 1px ring of the same when selected, the focus ring around the whole card.
+ *
+ * `icon` is a 16px glyph in a square muted tile as tall as the title and description; it takes
+ * the text colour once the card is selected. `children` go under the description (a price,
+ * Badges). Two sizes, the padding even on every side, every size on the scale:
+ *
+ * - `md` (default): 12px padding, radius-xl, 12px gap. Title 14/18 medium as in Banner, 2px,
+ *   description in the theme's body size on a 20px line, muted: 40px of text, a 40px tile.
+ * - `sm`: 8px padding, radius-lg, 10px gap. Title 13/18 medium over a 13/18 description:
+ *   36px of text, a 36px tile.
+ * - A title alone is one 20px line next to a 20px tile.
+ */
+export interface SelectableCardBaseProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** A 16px glyph, shown in a tile as tall as the title and description. */
+    icon?: React.ReactNode;
+    size?: 'sm' | 'md';
+    className?: string;
+    /** Extra content under the description. */
+    children?: React.ReactNode;
+}
+/** @internal The icon tile and the text of a selectable card. */
+export declare function SelectableCardBody({ id, title, description, icon, size, children, }: Omit<SelectableCardBaseProps, 'className'> & {
+    id: string;
+}): React.JSX.Element;
+/** The ids SelectableRadio and SelectableCheckbox give the control, title and description. */
+export declare function useSelectableIds(id: string | undefined, description: React.ReactNode): {
+    controlId: string;
+    'aria-labelledby': string;
+    'aria-describedby': string | undefined;
+};

package/components/selectable-card.js

@@ -0,0 +1,2 @@
+'use client';export { SelectableCardBody, useSelectableIds } from '../chunk-EBZHGRM5.js';
+import '../chunk-EHEXE2UV.js';

package/components/selectable-checkbox.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type CheckboxProps } from './checkbox.js';
+import { type SelectableCardBaseProps } from './selectable-card.js';
+/**
+ * SelectableCheckbox: a Checkbox as a whole card, for picking several options that each need a
+ * line of explanation or an icon: integrations to connect, tools an agent may use, add-ons.
+ * The card is the checkbox's `<label>`, so a click anywhere on it toggles the box, which sits
+ * at the card's right edge, on the middle of the title's first line. Checked cards take the
+ * action/primary border. Lay them out in a grid, or a FieldGroup with `variant="choices"` for
+ * one legend and one error.
+ */
+export interface SelectableCheckboxProps extends Omit<CheckboxProps, 'label' | 'description' | 'placement' | 'title' | 'children'>, SelectableCardBaseProps {
+}
+export declare function SelectableCheckbox({ title, description, icon, size, className, children, id, ...props }: SelectableCheckboxProps): React.JSX.Element;

package/components/selectable-checkbox.js

@@ -0,0 +1,4 @@
+'use client';export { SelectableCheckbox } from '../chunk-6RLSRMB5.js';
+import '../chunk-EBZHGRM5.js';
+import '../chunk-W2QQQWNE.js';
+import '../chunk-EHEXE2UV.js';

package/components/selectable-radio.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import { type SelectableCardBaseProps } from './selectable-card.js';
+/**
+ * SelectableRadio: one option of a RadioGroup drawn as a whole card, with no radio circle: the
+ * card itself is the radio (`role="radio"`), and the selected one is the card with the
+ * action/primary border. For choices that need a line of explanation or an icon: plans,
+ * roles, the mode an agent runs in.
+ *
+ * Put the cards in a `RadioGroup`, which owns the value: a click or Space picks a card, arrow
+ * keys move between them, Tab enters and leaves the group. `icon` adds a 16px glyph in a tile
+ * as tall as the title and description.
+ */
+export interface SelectableRadioProps extends Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, 'title' | 'children' | 'asChild'>, SelectableCardBaseProps {
+}
+export declare function SelectableRadio({ title, description, icon, size, className, children, id, ...props }: SelectableRadioProps): React.JSX.Element;

package/components/selectable-radio.js

@@ -0,0 +1,3 @@
+'use client';export { SelectableRadio } from '../chunk-A52HUWVM.js';
+import '../chunk-EBZHGRM5.js';
+import '../chunk-EHEXE2UV.js';

package/components/separator.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Separator: a 1px rule in border/default between blocks of content, across (horizontal) or
+ * down (vertical, as tall as its row).
+ *
+ * With a `label` it becomes a rule with a word in the middle ("or" between sign-in options,
+ * "Today" in a feed), 13px muted, 12px from the lines on either side.
+ *
+ * Most rules are only visual, so it is `decorative` by default and screen readers skip it;
+ * set `decorative={false}` when it really splits the content into parts (`role="separator"`).
+ */
+export interface SeparatorProps extends React.ComponentProps<'div'> {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+    /** A word in the middle of a horizontal rule. */
+    label?: React.ReactNode;
+}
+export declare function Separator({ orientation, decorative, label, className, ...props }: SeparatorProps): React.JSX.Element;

package/components/separator.js

@@ -0,0 +1,2 @@
+'use client';export { Separator } from '../chunk-LLW3X4ZJ.js';
+import '../chunk-EHEXE2UV.js';

package/components/sheet.d.ts

@@ -12,8 +12,10 @@ import { Dialog as DialogPrimitive } from 'radix-ui';
  *
  * Built on the Radix Dialog: focus moves in on open and back to the trigger on close; Escape,
  * the backdrop or the handle closes it. It slides in over 250 ms on ease-out and out over 200.
+ *
+ * Other props, `ref` included, go to the sheet's panel.
  */
-export interface SheetProps {
+export interface SheetProps extends Omit<React.ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'children' | 'asChild' | 'onOpenAutoFocus'> {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -32,6 +34,6 @@ export interface SheetProps {
     onOpenAutoFocus?: (event: Event) => void;
     className?: string;
 }
-export declare function Sheet({ open, defaultOpen, onOpenChange, trigger, side, title, description, footer, children, modal, container, onOpenAutoFocus, className, }: SheetProps): React.JSX.Element;
+export declare function Sheet({ open, defaultOpen, onOpenChange, trigger, side, title, description, footer, children, modal, container, onOpenAutoFocus, className, ...props }: SheetProps): React.JSX.Element;
 /** Wrap a footer button in this to make it close the sheet: `<SheetClose asChild><Button…/></SheetClose>`. */
 export declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;

package/components/sheet.js

@@ -1,6 +1,7 @@
-'use client';export { Sheet, SheetClose } from '../chunk-TKO44NDI.js';
-import '../chunk-JPNWHWAQ.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=sheet.js.map
-//# sourceMappingURL=sheet.js.map
+'use client';export { Sheet, SheetClose } from '../chunk-DAKVTPYZ.js';
+import '../chunk-WZSLDYUU.js';
+import '../chunk-RPL6FRVX.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/sidebar.js

@@ -1,4 +1,2 @@
-'use client';export { Sidebar, SidebarGroup, SidebarItem, SidebarSubGroup, SidebarSubItem } from '../chunk-BNTPPZCK.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=sidebar.js.map
-//# sourceMappingURL=sidebar.js.map
+'use client';export { Sidebar, SidebarGroup, SidebarItem, SidebarSubGroup, SidebarSubItem } from '../chunk-WJYJMX5S.js';
+import '../chunk-EHEXE2UV.js';

package/components/skeleton.js

@@ -1,4 +1,2 @@
-'use client';export { Skeleton } from '../chunk-YG7JOOLJ.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=skeleton.js.map
-//# sourceMappingURL=skeleton.js.map
+'use client';export { Skeleton } from '../chunk-GKDMCY2S.js';
+import '../chunk-EHEXE2UV.js';

package/components/slider.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Slider as SliderPrimitive } from 'radix-ui';
 /**
  * Slider, 1:1 with the uiKit `Slider` set (4025:3621): a 4px bg/muted track with the picked
  * part in action/primary/bg, and 16px bg/popover thumbs with a border/strong ring and the
@@ -21,8 +22,11 @@ import * as React from 'react';
  *
  * Built on the Radix Slider: arrow keys, Page Up/Down, Home/End, a native form value (`name`)
  * and a `slider` role per thumb, with `formatValue` as its spoken value.
+ *
+ * Other props, `ref` included, go to the Radix Slider root (the track and thumbs);
+ * `className` styles the wrapper around it with the label and fields.
  */
-export interface SliderProps {
+export interface SliderProps extends Omit<React.ComponentProps<typeof SliderPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs' | 'orientation' | 'disabled' | 'name' | 'children' | 'asChild'> {
     /** A number, or a `[from, to]` pair for a range. */
     value?: number | [number, number];
     defaultValue?: number | [number, number];
@@ -54,4 +58,4 @@ export interface SliderProps {
     /** Classes for the outer wrapper. */
     className?: string;
 }
-export declare function Slider({ value: valueProp, defaultValue, onValueChange, onValueCommit, min, max, step, minStepsBetweenThumbs, label, showValue, inputs, tooltip, orientation, formatValue, disabled, name, id, 'aria-label': ariaLabel, className, }: SliderProps): React.JSX.Element;
+export declare function Slider({ value: valueProp, defaultValue, onValueChange, onValueCommit, min, max, step, minStepsBetweenThumbs, label, showValue, inputs, tooltip, orientation, formatValue, disabled, name, id, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, className, onPointerDown, ...props }: SliderProps): React.JSX.Element;

package/components/slider.js

@@ -1,8 +1,7 @@
-'use client';export { Slider } from '../chunk-L6NCCSIP.js';
-import '../chunk-YPNKBE5X.js';
-import '../chunk-B6V4VSGH.js';
-import '../chunk-UBNHSZSE.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=slider.js.map
-//# sourceMappingURL=slider.js.map
+'use client';export { Slider } from '../chunk-PTK4QAOQ.js';
+import '../chunk-L5PPN42A.js';
+import '../chunk-KDU7AT2T.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/sliding-indicator.js

@@ -1,3 +1 @@
-'use client';export { SLIDE_MS, useSlidingIndicator } from '../chunk-J3NSDRVH.js';
-//# sourceMappingURL=sliding-indicator.js.map
-//# sourceMappingURL=sliding-indicator.js.map
+'use client';export { SLIDE_MS, useSlidingIndicator } from '../chunk-XETMIETJ.js';

package/components/spinner.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Spinner: something is on its way and there's no telling how far along it is (for that, use
+ * Progress). A 1.5px ring at 20% under a quarter arc in the current colour, so it takes the
+ * colour of the text or button it sits in. Sizes follow the icon scale: xs 12, sm 14, md 16,
+ * lg 20. It turns once every 800ms, and still turns (at half speed) under reduced motion, since
+ * a stopped arc reads as stuck.
+ *
+ * On its own it is a `role="status"` named "Loading" (or `label`). Inside something that
+ * already says it's busy (a loading Button, a row with its own text) pass `label={null}` and it
+ * is hidden from screen readers.
+ */
+export interface SpinnerProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** What's loading, for screen readers. `null` hides the spinner from them. */
+    label?: string | null;
+}
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): React.JSX.Element;

package/components/spinner.js

@@ -0,0 +1,3 @@
+'use client';export { Spinner } from '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/split-button.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type ButtonProps } from './button.js';
+import { type DropdownMenuProps } from './dropdown.js';
+/**
+ * SplitButton: the main action and, joined to it, an arrow that opens the related ones
+ * ("Publish" ▾ Schedule, Save as draft). Built from an attached ButtonGroup, two Buttons and a
+ * DropdownMenu, so it takes every Button variant, size and shape, and the menu takes
+ * `DropdownMenuItem`s (`label`, `icon`, `shortcut`…) and groups like any other.
+ *
+ * Use it when one action is the usual one and the others are its variations; when the actions
+ * are equals, use a DropdownMenu on its own. The arrow is named "More options" (`menuLabel`, or
+ * `moreOptions` in SatinLabels) and disabling the button disables both halves.
+ */
+export interface SplitButtonProps extends Omit<ButtonProps, 'iconOnly' | 'asChild'> {
+    /** The related actions: `DropdownMenuItem`s, optionally in `DropdownMenuGroup`s. */
+    menu: React.ReactNode;
+    /** Accessible name of the arrow. */
+    menuLabel?: string;
+    /** Passed to the DropdownMenu: `align` (default `end`), `side`, `open`, `onOpenChange`… */
+    menuProps?: Omit<DropdownMenuProps, 'trigger' | 'children'>;
+    /** Class names for the group around both halves. */
+    groupClassName?: string;
+}
+export declare function SplitButton({ menu, menuLabel, menuProps, groupClassName, variant, size, shape, disabled, children, ...props }: SplitButtonProps): React.JSX.Element;

package/components/split-button.js

@@ -0,0 +1,8 @@
+'use client';export { SplitButton } from '../chunk-FB6DG3LR.js';
+import '../chunk-GH2DEOGO.js';
+import '../chunk-P36KBUYD.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/streaming-text.js

@@ -1,4 +1,2 @@
-'use client';export { StreamingText } from '../chunk-RTJ76X5U.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=streaming-text.js.map
-//# sourceMappingURL=streaming-text.js.map
+'use client';export { StreamingText } from '../chunk-LWRB4DED.js';
+import '../chunk-EHEXE2UV.js';

package/components/switch.js

@@ -1,4 +1,2 @@
-'use client';export { Switch } from '../chunk-SH6NG6VN.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=switch.js.map
-//# sourceMappingURL=switch.js.map
+'use client';export { Switch } from '../chunk-APRVUOD6.js';
+import '../chunk-EHEXE2UV.js';

package/components/table.d.ts

@@ -25,19 +25,29 @@ export type Sort = {
     key: string;
     direction: 'asc' | 'desc';
 } | null;
+/** A row: any object with a string `id`. Interfaces work too; no index signature needed. */
 export type Row = {
     id: string;
-} & Record<string, unknown>;
-export interface Column<R extends Row = Row> {
-    key: string;
+};
+interface ColumnBase<R extends Row> {
     header: React.ReactNode;
     /** fr weight with overflow="fit" (default 1), pixels with overflow="scroll" (default 160). */
     width?: number;
     sortable?: boolean;
-    /** Renders the cell; defaults to the row's value at `key`. */
-    cell?: (row: R) => React.ReactNode;
     align?: 'left' | 'right';
 }
+/**
+ * A column. Its `key` names a field of the row and the cell shows that field, so a typo in `key`
+ * is a type error. A computed column (a field the row doesn't have) gives its own `cell`.
+ */
+export type Column<R extends Row = Row> = (ColumnBase<R> & {
+    key: keyof R & string;
+    /** Renders the cell; defaults to the row's value at `key`. */
+    cell?: (row: R) => React.ReactNode;
+}) | (ColumnBase<R> & {
+    key: string;
+    cell: (row: R) => React.ReactNode;
+});
 export interface TableProps<R extends Row = Row> extends Omit<React.ComponentProps<'div'>, 'children'> {
     columns: Column<R>[];
     rows: R[];
@@ -55,3 +65,4 @@ export interface TableProps<R extends Row = Row> extends Omit<React.ComponentPro
     label?: string;
 }
 export declare function Table<R extends Row = Row>({ columns, rows, selectable, zebra, overflow, onSortChange, defaultSort, manualSort, selected: selectedProp, onSelectedChange, label, className, ...props }: TableProps<R>): React.JSX.Element;
+export {};

package/components/table.js

@@ -1,5 +1,4 @@
-'use client';export { Table } from '../chunk-X3PQANZO.js';
-import '../chunk-FDKIX4DC.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=table.js.map
-//# sourceMappingURL=table.js.map
+'use client';export { Table } from '../chunk-SVUWR3HD.js';
+import '../chunk-W2QQQWNE.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/tabs.d.ts

@@ -17,6 +17,8 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
  * Labels are text/muted, text/default on hover, focus and selected; disabled is 50%. Optional
  * 16px leading icon, 6px from the label. Built on the Radix Tabs (arrow keys move between tabs).
  * States answer to `data-force="hover" | "focus"` for state sheets.
+ *
+ * Other props, `ref` included, go to the Radix Tabs root (`aria-label` names the tab list instead).
  */
 export type TabItem = string | {
     value: string;
@@ -25,7 +27,7 @@ export type TabItem = string | {
     icon?: React.ReactNode;
     disabled?: boolean;
 };
-export interface TabsProps {
+export interface TabsProps extends Omit<React.ComponentProps<typeof TabsPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'children' | 'asChild' | 'aria-label'> {
     items: TabItem[];
     value?: string;
     defaultValue?: string;
@@ -40,6 +42,6 @@ export interface TabsProps {
     children?: React.ReactNode;
     className?: string;
 }
-export declare function Tabs({ items, value, defaultValue, onValueChange, variant, size, disabled, children, className, ...props }: TabsProps): React.JSX.Element;
+export declare function Tabs({ items, value, defaultValue, onValueChange, variant, size, disabled, children, className, 'aria-label': ariaLabel, ...props }: TabsProps): React.JSX.Element;
 /** The panel for one tab value. */
 export declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;

package/components/tabs.js

@@ -1,5 +1,3 @@
-'use client';export { Tabs, TabsContent } from '../chunk-DETGJAIC.js';
-import '../chunk-J3NSDRVH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=tabs.js.map
-//# sourceMappingURL=tabs.js.map
+'use client';export { Tabs, TabsContent } from '../chunk-P6RHT2VM.js';
+import '../chunk-XETMIETJ.js';
+import '../chunk-EHEXE2UV.js';

package/components/textarea.js

@@ -1,5 +1,3 @@
-'use client';export { Textarea } from '../chunk-QUF2IPOZ.js';
-import '../chunk-UBNHSZSE.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=textarea.js.map
-//# sourceMappingURL=textarea.js.map
+'use client';export { Textarea } from '../chunk-C435UD7V.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-EHEXE2UV.js';

package/components/thinking.js

@@ -1,5 +1,3 @@
-'use client';export { Thinking } from '../chunk-ESC5JCVQ.js';
-import '../chunk-KNUWZNFV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=thinking.js.map
-//# sourceMappingURL=thinking.js.map
+'use client';export { Thinking } from '../chunk-WCUR44O6.js';
+import '../chunk-R4KPFBMK.js';
+import '../chunk-EHEXE2UV.js';

package/components/toast.js

@@ -1,5 +1,5 @@
-'use client';export { Toast, Toaster, toast } from '../chunk-2HKBZFIK.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=toast.js.map
-//# sourceMappingURL=toast.js.map
+'use client';export { Toast, Toaster, toast } from '../chunk-YY236ZSJ.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';