@uisatin/ui 0.3.0 → 0.4.0

package/components/form.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type FormContextValue } from './form-field.js';
+/**
+ * Form: a `<form>` that lays out FormFields, FieldGroups and FormSections and sets them once.
+ *
+ * - `layout` places every field's label above its control (vertical) or in a 160px column to the
+ *   left (horizontal, for settings pages); a field's own `layout` still wins.
+ * - `errors` holds messages by field `name` (`{ email: 'Enter an email' }`); each FormField or
+ *   FieldGroup with that `name` shows its message and marks its control invalid. Feed it from
+ *   your own validation, a server response, or a form library (`errors.email?.message`).
+ * - After a submit, and whenever errors appear where there were none, focus moves to the first
+ *   invalid control, so a screen reader and the keyboard land on what needs fixing.
+ * - `disabled` greys out and disables every field and button inside (a native fieldset), for a
+ *   form that is saving or read-only.
+ * - `onSubmitValues` hands over the values as an object (repeated names become arrays) and
+ *   prevents the page reload; plain `onSubmit` works as usual.
+ */
+export type FormValues = Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+export interface FormProps extends React.ComponentProps<'form'> {
+    layout?: 'vertical' | 'horizontal';
+    /** Error messages by field `name`. */
+    errors?: FormContextValue['errors'];
+    disabled?: boolean;
+    /** Called on submit with the form's values; the default submit (a page load) is prevented. */
+    onSubmitValues?: (values: FormValues, event: React.FormEvent<HTMLFormElement>) => void;
+}
+/** The form's values as an object; a name that appears more than once (checkboxes) becomes an array. */
+export declare function formValues(form: HTMLFormElement): FormValues;
+export declare function Form({ layout, errors, disabled, onSubmit, onSubmitValues, noValidate, className, children, ref, ...props }: FormProps): React.JSX.Element;
+/**
+ * A titled part of a longer form (Profile, Notifications): a 16px title, an optional
+ * description, then its fields. Sections after the first are set off by a rule.
+ */
+export interface FormSectionProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+}
+export declare function FormSection({ title, description, className, children, ...props }: FormSectionProps): React.JSX.Element;
+/**
+ * The form's buttons, usually a ButtonGroup or a Cancel + Submit pair. `align="end"` (default)
+ * puts them on the right; `start` lines them up with the controls, past the label column in a
+ * horizontal form; `between` pushes the first child left (Delete) and the rest right.
+ */
+export interface FormActionsProps extends React.ComponentProps<'div'> {
+    align?: 'start' | 'end' | 'between';
+}
+export declare function FormActions({ align, className, ...props }: FormActionsProps): React.JSX.Element;

package/components/form.js

@@ -0,0 +1,3 @@
+'use client';export { Form, FormActions, FormSection, formValues } from '../chunk-NCIRJ5V2.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-EHEXE2UV.js';

package/components/hover-card.js

@@ -1,2 +1,2 @@
-'use client';export { HoverCard, hoverCardClass } from '../chunk-PD6YPFYN.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { HoverCard, hoverCardClass } from '../chunk-W2EH6RY5.js';
+import '../chunk-EHEXE2UV.js';

package/components/input-group.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/**
+ * InputGroup: a field joined with what belongs to it, in one block: an addon before or after
+ * (`https://`, `.satin.dev`, a currency), a Select (country code, unit), or a Button (Copy,
+ * Send, Subscribe). The inner corners go square and neighbours share one 1px border; the
+ * focused field comes to the front so its ring is whole.
+ *
+ * `size` sizes every part to the same height: Inputs and Selects take it, Buttons take the
+ * matching button size (sm 28 → md, md 32 → lg, lg 36 → xl) and secondary by default. In a
+ * group a button draws its outline as a border, like the field, so both read the same height.
+ *
+ * Text that sits inside the field belongs on the Input itself (`leadingText`, `trailingText`,
+ * icons); an addon is for a separate, boxed segment. Wrap the group in a FormField for the
+ * label, description and error: the field inside picks them up.
+ */
+export interface InputGroupProps extends React.ComponentProps<'div'> {
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function InputGroup({ size, className, ...props }: InputGroupProps): React.JSX.Element;
+/** A boxed segment of an InputGroup: text (`https://`, `€`), an icon, or a Kbd. */
+export declare function InputGroupAddon({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/components/input-group.js

@@ -0,0 +1,6 @@
+'use client';export { InputGroup, InputGroupAddon } from '../chunk-JKOBDLP3.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/input-otp.js

@@ -1,7 +1,7 @@
-'use client';export { InputOTP } from '../chunk-OVKPPXK5.js';
-import '../chunk-UCCNXGLG.js';
-import '../chunk-VUOAPWTF.js';
-import '../chunk-BR2B4OIT.js';
-import '../chunk-57QEOCDZ.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { InputOTP } from '../chunk-PP46SY7M.js';
+import '../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/input.d.ts

@@ -20,9 +20,13 @@ export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'>
     size?: 'sm' | 'md' | 'lg';
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
+    /** Muted text inside the field before the value: `$`, `https://`. */
+    leadingText?: React.ReactNode;
+    /** Muted text inside the field after the value: `USD`, `.satin.dev`, a counter. */
+    trailingText?: React.ReactNode;
     /** Classes for the outer wrapper (label + field + hint). `className` styles the field. */
     wrapperClassName?: string;
     /** Show a state without interacting, for state sheets. */
     'data-force'?: 'hover' | 'focus';
 }
-export declare function Input({ label, hint, error, size, leadingIcon, trailingIcon, className, wrapperClassName, id, disabled, required, value, defaultValue, onChange, 'aria-describedby': ariaDescribedBy, 'data-force': force, ...props }: InputProps): React.JSX.Element;
+export declare function Input({ label, hint, error, size: ownSize, leadingIcon, trailingIcon, leadingText, trailingText, className, wrapperClassName, id, disabled, required, value, defaultValue, onChange, 'aria-describedby': ariaDescribedBy, 'data-force': force, ...props }: InputProps): React.JSX.Element;

package/components/input.js

@@ -1,3 +1,3 @@
-'use client';export { Input } from '../chunk-OURZQM27.js';
-import '../chunk-VUOAPWTF.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Input } from '../chunk-L5PPN42A.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-EHEXE2UV.js';

package/components/kbd.js

@@ -1,2 +1,2 @@
-'use client';export { Kbd, KbdArrowDown, KbdArrowUp, KbdGroup, KbdHint, KbdReturn, keysOf } from '../chunk-57QEOCDZ.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Kbd, KbdArrowDown, KbdArrowUp, KbdGroup, KbdHint, KbdReturn, keysOf } from '../chunk-XWPH7C2W.js';
+import '../chunk-EHEXE2UV.js';

package/components/labels.d.ts

@@ -67,6 +67,13 @@ export declare const defaultLabels: {
     navigate: string;
     openItem: string;
     source: string;
+    moreOptions: string;
+    loading: string;
+    submit: string;
+    done: string;
+    opensInNewTab: string;
+    showPassword: string;
+    hidePassword: string;
 };
 export type SatinLabelSet = typeof defaultLabels;
 export interface SatinLabelsProps {

package/components/labels.js

@@ -1 +1 @@
-'use client';export { SatinLabels, defaultLabels, useSatinLabels } from '../chunk-SSOFFQ5T.js';
+'use client';export { SatinLabels, defaultLabels, useSatinLabels } from '../chunk-NTSU44FY.js';

package/components/line-chart.js

@@ -1,11 +1,11 @@
-'use client';export { AreaCard, LineCard } from '../chunk-JBKBRAC4.js';
-import '../chunk-ISYKZCPJ.js';
-import '../chunk-ZBZ3ZQRB.js';
+'use client';export { AreaCard, LineCard } from '../chunk-5663JVE5.js';
+import '../chunk-INJWE2LD.js';
+import '../chunk-LI5VYDLN.js';
 import '../chunk-ZHFIWDGF.js';
-import '../chunk-UCCNXGLG.js';
-import '../chunk-VUOAPWTF.js';
-import '../chunk-BR2B4OIT.js';
-import '../chunk-57QEOCDZ.js';
-import '../chunk-XUOSJMEJ.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+import '../chunk-EQAFDIPE.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-P36KBUYD.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-7NV53EL5.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/link.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+/**
+ * Link: text that goes somewhere. Calm by default: the text colour with a border/strong
+ * underline that takes the text colour on hover, so a paragraph full of links stays readable.
+ * `brand` colours it for the one link that should stand out; `muted` is for footers and meta
+ * lines and only underlines on hover. Focus draws the 2px focus ring around it.
+ *
+ * `external` (on by itself with `target="_blank"`) adds a 12px ↗ after the text, says
+ * "(opens in a new tab)" to screen readers and sets `rel="noopener noreferrer"`.
+ *
+ * For a router's link (Next.js, React Router) pass `asChild` and put it inside: it gets the
+ * styles, the router keeps the navigation.
+ */
+export interface LinkProps extends React.ComponentProps<'a'> {
+    variant?: 'default' | 'brand' | 'muted';
+    underline?: 'always' | 'hover' | 'none';
+    external?: boolean;
+    asChild?: boolean;
+}
+export declare function Link({ variant, underline, external, asChild, target, rel, className, children, ...props }: LinkProps): React.JSX.Element;

package/components/link.js

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

package/components/list.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+/**
+ * Item: one row of a list. The thing almost every screen repeats: a person, a file, a project,
+ * a setting, a search result, a notification. Left to right:
+ *
+ * - `icon` in a 32px muted tile (28 at sm), or `media` as it is (an Avatar, a thumbnail);
+ * - `title` (13px medium) over `description` (13px muted), each on one line, cut with an ellipsis;
+ *   `children` go under them for anything longer (Chips, a Progress);
+ * - `meta` on the right in muted 13px: a time, a size, a Badge, a Kbd;
+ * - `actions` at the far right: Buttons, a Switch, a DropdownMenu `⋯`.
+ *
+ * With `href` (or `onClick`) the row is a link (or a button) and the whole row is its target,
+ * with a hover and a focus ring; `actions` stay their own controls on top of it. `selected`
+ * marks the current row. Rows go in a `List`, or stand alone with `variant="outline"`.
+ */
+export interface ItemProps extends Omit<React.ComponentProps<'div'>, 'title' | 'onClick'> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** A glyph shown in a muted tile. */
+    icon?: React.ReactNode;
+    /** Shown as is, in place of the tile: an Avatar, an image. */
+    media?: React.ReactNode;
+    meta?: React.ReactNode;
+    actions?: React.ReactNode;
+    href?: string;
+    /** Link target, e.g. `_blank`. */
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    selected?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    /** `outline` draws a card border, for a row on its own. Rows in a List take the List's look. */
+    variant?: 'plain' | 'outline';
+}
+export declare function Item({ title, description, icon, media, meta, actions, href, target, onClick, selected, disabled, size: ownSize, variant, className, children, ...props }: ItemProps): React.JSX.Element;
+/**
+ * List: Items under each other. `plain` (default) keeps them apart by 2px with rounded hovers,
+ * for menus of links and search results; `divided` runs a rule between rows, edge to edge, for
+ * feeds and settings; `card` puts the divided rows in a bordered card. `size` is passed to every
+ * Item. It's a `ul`; give it an `aria-label` when the heading above doesn't name it.
+ */
+export interface ListProps extends React.ComponentProps<'ul'> {
+    variant?: 'plain' | 'divided' | 'card';
+    size?: 'sm' | 'md';
+}
+export declare function List({ variant, size, className, ...props }: ListProps): React.JSX.Element;

package/components/list.js

@@ -0,0 +1,2 @@
+'use client';export { Item, List } from '../chunk-67CBFB6Y.js';
+import '../chunk-EHEXE2UV.js';

package/components/message-actions.js

@@ -1,4 +1,5 @@
-'use client';export { MessageActions } from '../chunk-SZJIVBOD.js';
-import '../chunk-T6L32XXH.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { MessageActions } from '../chunk-STYOBAC7.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/message.js

@@ -1,7 +1,8 @@
-'use client';export { Message } from '../chunk-S7QHBVPX.js';
-import '../chunk-NL574STL.js';
-import '../chunk-SZJIVBOD.js';
-import '../chunk-UGIVCXGN.js';
-import '../chunk-T6L32XXH.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Message } from '../chunk-6GNMUJQ4.js';
+import '../chunk-WCUR44O6.js';
+import '../chunk-STYOBAC7.js';
+import '../chunk-R4KPFBMK.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/number-input.js

@@ -1,7 +1,7 @@
-'use client';export { NumberInput } from '../chunk-674SRBZK.js';
-import '../chunk-UCCNXGLG.js';
-import '../chunk-VUOAPWTF.js';
-import '../chunk-BR2B4OIT.js';
-import '../chunk-57QEOCDZ.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { NumberInput } from '../chunk-MOGWOUCN.js';
+import '../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/pagination.js

@@ -1,4 +1,6 @@
-'use client';export { Pagination, paginationRange } from '../chunk-TT2N5752.js';
+'use client';export { Pagination, paginationRange } from '../chunk-TB3ZRV3Y.js';
 import '../chunk-XETMIETJ.js';
-import '../chunk-T6L32XXH.js';
-import '../chunk-O46O6LFQ.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/password-input.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type InputProps } from './input.js';
+/**
+ * PasswordInput: an Input of type password with a show / hide button in the trailing slot.
+ * The button is an xs tertiary icon button named "Show password" / "Hide password" (from
+ * SatinLabels) with `aria-pressed`, and showing the password never moves the caret or the
+ * focus. `autoComplete` defaults to `current-password`; pass `new-password` on sign-up.
+ *
+ * Everything else is Input: sizes, `leadingIcon`, `hint`, `error`, and FormField wiring.
+ */
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'trailingIcon' | 'trailingText'> {
+    /** Show the password; leave out to let the button control it. */
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+}
+export declare function PasswordInput({ visible, onVisibleChange, autoComplete, disabled, ...props }: PasswordInputProps): React.JSX.Element;

package/components/password-input.js

@@ -0,0 +1,7 @@
+'use client';export { PasswordInput } from '../chunk-GTFUAA6H.js';
+import '../chunk-L5PPN42A.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/popover.js

@@ -1,3 +1,3 @@
-'use client';export { Popover, PopoverClose, PopoverPanel } from '../chunk-LFGUJHFF.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Popover, PopoverClose, PopoverPanel } from '../chunk-7SVMERPH.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/progress.js

@@ -1,2 +1,2 @@
-'use client';export { Progress } from '../chunk-M2HEVFQ3.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Progress } from '../chunk-LKSFTNPF.js';
+import '../chunk-EHEXE2UV.js';

package/components/prompt-bar.js

@@ -1,5 +1,6 @@
-'use client';export { PromptBar, defaultActions } from '../chunk-5725MFGQ.js';
-import '../chunk-57QEOCDZ.js';
-import '../chunk-T6L32XXH.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'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,2 +1,2 @@
-'use client';export { Radio, RadioGroup } from '../chunk-LB37KTJH.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Radio, RadioGroup } from '../chunk-EXKSKYG3.js';
+import '../chunk-EHEXE2UV.js';

package/components/search-bar.js

@@ -1,3 +1,3 @@
-'use client';export { SearchBar } from '../chunk-SPGUZMCC.js';
-import '../chunk-57QEOCDZ.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { SearchBar } from '../chunk-K5G5OEV5.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-EHEXE2UV.js';

package/components/segmented-control.js

@@ -1,3 +1,3 @@
-'use client';export { SegmentedControl } from '../chunk-CVNRZ2YV.js';
+'use client';export { SegmentedControl } from '../chunk-JYGCZWET.js';
 import '../chunk-XETMIETJ.js';
-import '../chunk-O46O6LFQ.js';
+import '../chunk-EHEXE2UV.js';

package/components/select.d.ts

@@ -82,6 +82,7 @@ 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;
@@ -102,4 +103,4 @@ export declare function FieldChrome({ label, action, chrome, className, children
 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, 'aria-describedby': describedBy, ...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,6 +1,6 @@
-'use client';export { FieldChrome, Select, SelectChevron, isOptionGroups, useFieldChrome } from '../chunk-UCCNXGLG.js';
-import '../chunk-VUOAPWTF.js';
-import '../chunk-BR2B4OIT.js';
-import '../chunk-57QEOCDZ.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'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.js

@@ -1,5 +1,7 @@
-'use client';export { Sheet, SheetClose } from '../chunk-YJK4MGSI.js';
-import '../chunk-AIMQNLPY.js';
-import '../chunk-T6L32XXH.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'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,2 +1,2 @@
-'use client';export { Sidebar, SidebarGroup, SidebarItem, SidebarSubGroup, SidebarSubItem } from '../chunk-PUWSL5XW.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Sidebar, SidebarGroup, SidebarItem, SidebarSubGroup, SidebarSubItem } from '../chunk-WJYJMX5S.js';
+import '../chunk-EHEXE2UV.js';

package/components/skeleton.js

@@ -1,2 +1,2 @@
-'use client';export { Skeleton } from '../chunk-J7RMFN54.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Skeleton } from '../chunk-GKDMCY2S.js';
+import '../chunk-EHEXE2UV.js';

package/components/slider.js

@@ -1,7 +1,7 @@
-'use client';export { Slider } from '../chunk-FB5HTCO2.js';
-import '../chunk-OURZQM27.js';
-import '../chunk-GMETYACH.js';
-import '../chunk-VUOAPWTF.js';
-import '../chunk-57QEOCDZ.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'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/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';