@uisatin/ui 0.2.0 → 0.4.0

package/components/field-group.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+/**
+ * FieldGroup: fields or options that answer one question, under one legend: an address, a date
+ * range, "Notify me about" with a list of checkboxes. It is a `<fieldset>`, so the legend names
+ * the whole group for screen readers and `disabled` reaches every control in it.
+ *
+ * - `variant="fields"` (default) is a block of FormFields under a 16px heading; `columns` puts
+ *   them side by side (City | Postcode) from the `sm` breakpoint up.
+ * - `variant="choices"` is a list of Checkboxes, Switches or Radios under a label set like a
+ *   FormField's, 12px apart, with one description and one error for the whole list.
+ * - In a horizontal Form the legend takes the label column and the fields inside stack
+ *   vertically next to it.
+ * - `error` (or the Form's `errors[name]`) shows under the group and marks it invalid.
+ */
+export interface FieldGroupProps extends Omit<React.ComponentProps<'fieldset'>, 'children'> {
+    legend: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    /** Picks the group's message out of the Form's `errors`. */
+    name?: string;
+    required?: boolean;
+    variant?: 'fields' | 'choices';
+    columns?: 1 | 2 | 3;
+    layout?: 'vertical' | 'horizontal';
+    children: React.ReactNode;
+}
+export declare function FieldGroup({ legend, description, error: ownError, name, required, variant, columns, layout: ownLayout, disabled: ownDisabled, className, children, ...props }: FieldGroupProps): React.JSX.Element;

package/components/field-group.js

@@ -0,0 +1,3 @@
+'use client';export { FieldGroup } from '../chunk-RFSPJECL.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-EHEXE2UV.js';

package/components/file-upload.js

@@ -1,7 +1,7 @@
-'use client';export { FileUpload, FileUploadItem, fileIconFor, formatBytes } from '../chunk-GICKPMJU.js';
-import '../chunk-7TXHCRAG.js';
-import '../chunk-H4NU7NPO.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=file-upload.js.map
-//# sourceMappingURL=file-upload.js.map
+'use client';export { FileUpload, FileUploadItem, fileIconFor, formatBytes } from '../chunk-YXWXSRXG.js';
+import '../chunk-R3DTMBDT.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-LKSFTNPF.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/floating.js

@@ -1,3 +1 @@
-'use client';export { Floating } from '../chunk-Y5AYU7PK.js';
-//# sourceMappingURL=floating.js.map
-//# sourceMappingURL=floating.js.map
+'use client';export { Floating } from '../chunk-ZHFIWDGF.js';

package/components/form-field.d.ts

@@ -9,18 +9,41 @@ import * as React from 'react';
  * The control is wired through context: Input and Textarea pick up the field's id (so the
  * label points at them), `aria-describedby` (description or error), `aria-invalid` and
  * `disabled`. Any other control can read the same values with `useFormField()`.
+ *
+ * Inside a `Form` (form.tsx) a field takes the form's layout and disabled state, and with a
+ * `name` it shows the form's `errors[name]` and names its control, so the form's fields are
+ * set in one place. Its own props still win.
  */
 export interface FormFieldContextValue {
     id: string;
+    /** The field's `name`, given to Input, Textarea and Select for a native submit. */
+    name?: string;
     describedBy?: string;
     invalid: boolean;
     disabled: boolean;
     required: boolean;
 }
+/**
+ * What a Form (or a FieldGroup inside one) hands the fields in it. Defined here, not in form.tsx,
+ * so a FormField works on its own and the form only adds to it.
+ */
+export interface FormContextValue {
+    layout?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+    /** Error messages by field `name`. */
+    errors?: Partial<Record<string, React.ReactNode>>;
+}
+export declare const FormContext: React.Context<FormContextValue | null>;
+/** The size an InputGroup gives the fields in it (Input, Select), unless they set their own. */
+export declare const FieldSizeContext: React.Context<"lg" | "md" | "sm" | null>;
+/** The layout, disabled state and errors of the surrounding Form, if any. */
+export declare function useFormContext(): FormContextValue | null;
 /** The id, describedby, invalid, disabled and required of the surrounding FormField, if any. */
 export declare function useFormField(): FormFieldContextValue | null;
 export interface FormFieldProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     label: React.ReactNode;
+    /** Names the control and picks this field's message out of the Form's `errors`. */
+    name?: string;
     description?: React.ReactNode;
     /** An error message. It replaces the description and marks the control invalid. */
     error?: React.ReactNode;
@@ -32,4 +55,18 @@ export interface FormFieldProps extends Omit<React.ComponentProps<'div'>, 'child
     htmlFor?: string;
     children: React.ReactNode;
 }
-export declare function FormField({ label, description, error, layout, disabled, required, htmlFor, className, children, ...props }: FormFieldProps): React.JSX.Element;
+export declare function FormField({ label, description, name, error: ownError, layout: ownLayout, disabled: ownDisabled, required, htmlFor, className, children, ...props }: FormFieldProps): React.JSX.Element;
+/** @internal The required mark from Figma (the `sparkle 2` glyph in _label), 6px, in the label colour. */
+export declare function RequiredMark(): React.JSX.Element;
+/** @internal A field's or a group's error: Figma's 14px warning circle and the message, in red. */
+export declare function FieldError({ id, children, className }: {
+    id?: string;
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** @internal A field's or a group's description, muted. */
+export declare function FieldDescription({ id, children, className }: {
+    id?: string;
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/components/form-field.js

@@ -1,4 +1,2 @@
-'use client';export { FormField, useFormField } from '../chunk-UBNHSZSE.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=form-field.js.map
-//# sourceMappingURL=form-field.js.map
+'use client';export { FieldDescription, FieldError, FieldSizeContext, FormContext, FormField, RequiredMark, useFormContext, useFormField } from '../chunk-KITXKIYW.js';
+import '../chunk-EHEXE2UV.js';

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.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
 /**
  * HoverCard, 1:1 with the uiKit design (🆕 context menu & hover card): a preview of a person,
  * place or file over its link — the Popover surface (bg/popover, border/default, radius-xl, the
@@ -8,8 +9,10 @@ import * as React from 'react';
  *
  * Only for extra context the page works without: anything someone needs to act on belongs in a
  * Popover they open on purpose.
+ *
+ * Other props, `ref` included, go to the card itself (the Radix Content).
  */
-export interface HoverCardProps {
+export interface HoverCardProps extends Omit<React.ComponentProps<typeof HoverCardPrimitive.Content>, 'children' | 'asChild' | 'side' | 'align'> {
     /** The link or name it previews. Rendered with `asChild`. */
     trigger: React.ReactNode;
     children: React.ReactNode;
@@ -25,6 +28,6 @@ export interface HoverCardProps {
     container?: HTMLElement | null;
     className?: string;
 }
-export declare function HoverCard({ trigger, children, side, align, openDelay, closeDelay, open, defaultOpen, onOpenChange, container, className, }: HoverCardProps): React.JSX.Element;
+export declare function HoverCard({ trigger, children, side, align, openDelay, closeDelay, open, defaultOpen, onOpenChange, container, className, ...props }: HoverCardProps): React.JSX.Element;
 /** The hover card's surface, for previews you place yourself. */
 export declare const hoverCardClass: string;

package/components/hover-card.js

@@ -1,4 +1,2 @@
-'use client';export { HoverCard, hoverCardClass } from '../chunk-HRKPV66B.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=hover-card.js.map
-//# sourceMappingURL=hover-card.js.map
+'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.d.ts

@@ -20,8 +20,10 @@ import * as React from 'react';
  * and the browser's SMS autofill (`autocomplete="one-time-code"`) all work as in any field, and
  * screen readers hear one text box. Only digits by default (`pattern`); `onComplete` fires when
  * every cell is filled.
+ *
+ * Other props, `ref` included, go to that <input>; `className` styles the field around it.
  */
-export interface InputOTPProps {
+export interface InputOTPProps extends Omit<React.ComponentProps<'input'>, 'value' | 'defaultValue' | 'pattern' | 'type' | 'maxLength' | 'children'> {
     /** How many characters. */
     length?: number;
     /** Cells per group; groups are split by a dash. 0 for one group. */
@@ -46,4 +48,4 @@ export interface InputOTPProps {
     'aria-label'?: string;
     className?: string;
 }
-export declare function InputOTP({ length, groupSize, value: valueProp, defaultValue, onValueChange, onComplete, pattern, label, hint, error, success, disabled, autoFocus, id, name, className, ...props }: InputOTPProps): React.JSX.Element;
+export declare function InputOTP({ length, groupSize, value: valueProp, defaultValue, onValueChange, onComplete, pattern, label, hint, error, success, disabled, autoFocus, id, name, className, 'aria-describedby': describedByProp, ref, onChange, onFocus, onBlur, onSelect, ...props }: InputOTPProps): React.JSX.Element;

package/components/input-otp.js

@@ -1,8 +1,7 @@
-'use client';export { InputOTP } from '../chunk-XL75JRUA.js';
-import '../chunk-72OCFAPT.js';
-import '../chunk-UBNHSZSE.js';
-import '../chunk-3DINAQLL.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=input-otp.js.map
-//# sourceMappingURL=input-otp.js.map
+'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,5 +1,3 @@
-'use client';export { Input } from '../chunk-YPNKBE5X.js';
-import '../chunk-UBNHSZSE.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=input.js.map
-//# sourceMappingURL=input.js.map
+'use client';export { Input } from '../chunk-L5PPN42A.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-EHEXE2UV.js';

package/components/kbd.js

@@ -1,4 +1,2 @@
-'use client';export { Kbd, KbdArrowDown, KbdArrowUp, KbdGroup, KbdHint, KbdReturn, keysOf } from '../chunk-BKZBWPUH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=kbd.js.map
-//# sourceMappingURL=kbd.js.map
+'use client';export { Kbd, KbdArrowDown, KbdArrowUp, KbdGroup, KbdHint, KbdReturn, keysOf } from '../chunk-XWPH7C2W.js';
+import '../chunk-EHEXE2UV.js';

package/components/labels.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+/**
+ * The words Satin's components say on their own: accessible names of icon buttons (Close,
+ * Increase), lists and regions screen readers announce, and a few visible defaults. English by
+ * default; wrap the app (or any part of it) in `SatinLabels` to translate or reword them:
+ *
+ *   <SatinLabels labels={{ close: 'Zamknij', dismiss: 'Odrzuć' }}>…</SatinLabels>
+ *
+ * Anything left out keeps its English default. A component's own prop (Select's `placeholder`)
+ * still wins over these.
+ */
+export declare const defaultLabels: {
+    close: string;
+    dismiss: string;
+    announcement: string;
+    increase: string;
+    decrease: string;
+    previous: string;
+    next: string;
+    previousSection: string;
+    nextSection: string;
+    previousQuestion: string;
+    nextQuestion: string;
+    previousMonth: string;
+    nextMonth: string;
+    year: string;
+    month: string;
+    sheets: string;
+    hiddenPages: string;
+    period: string;
+    commandMenu: string;
+    searchCommands: string;
+    commands: string;
+    draft: string;
+    files: string;
+    attachedFiles: string;
+    goodResponse: string;
+    badResponse: string;
+    copy: string;
+    attachments: string;
+    addToConversation: string;
+    message: string;
+    send: string;
+    stop: string;
+    searchAgentsAndTools: string;
+    addAgent: string;
+    agentsAndTools: string;
+    model: string;
+    agent: string;
+    remove: string;
+    add: string;
+    selectAllRows: string;
+    selectRow: string;
+    select: string;
+    search: string;
+    noResults: string;
+    clear: string;
+    apply: string;
+    cancel: string;
+    pickDate: string;
+    pickDates: string;
+    from: string;
+    to: string;
+    value: string;
+    selected: string;
+    commandPlaceholder: string;
+    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 {
+    /** The words to change; the rest stay as they are (from a parent SatinLabels, or English). */
+    labels: Partial<SatinLabelSet>;
+    children: React.ReactNode;
+}
+export declare function SatinLabels({ labels, children }: SatinLabelsProps): React.JSX.Element;
+/** The labels in effect here: English, or what a SatinLabels above has set. */
+export declare function useSatinLabels(): SatinLabelSet;

package/components/labels.js

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

package/components/line-chart.js

@@ -1,12 +1,11 @@
-'use client';export { AreaCard, LineCard } from '../chunk-SHDFUXYV.js';
-import '../chunk-DO3TBNSC.js';
-import '../chunk-YPJYW624.js';
-import '../chunk-Y5AYU7PK.js';
-import '../chunk-72OCFAPT.js';
-import '../chunk-UBNHSZSE.js';
-import '../chunk-3DINAQLL.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-O7F3CIDV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=line-chart.js.map
-//# sourceMappingURL=line-chart.js.map
+'use client';export { AreaCard, LineCard } from '../chunk-5663JVE5.js';
+import '../chunk-INJWE2LD.js';
+import '../chunk-LI5VYDLN.js';
+import '../chunk-ZHFIWDGF.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,5 +1,5 @@
-'use client';export { MessageActions } from '../chunk-AN2RNJLR.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=message-actions.js.map
-//# sourceMappingURL=message-actions.js.map
+'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,8 +1,8 @@
-'use client';export { Message } from '../chunk-PVOLDO4G.js';
-import '../chunk-ESC5JCVQ.js';
-import '../chunk-AN2RNJLR.js';
-import '../chunk-KNUWZNFV.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=message.js.map
-//# sourceMappingURL=message.js.map
+'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.d.ts

@@ -8,8 +8,10 @@ import * as React from 'react';
  * It's a spinbutton: ArrowUp / ArrowDown step, PageUp / PageDown step ten times, Home / End jump
  * to `min` / `max`. Typing is free while focused; Enter or leaving the field clamps it, snaps it to
  * `step` and commits; Escape puts the last value back.
+ *
+ * Other props, `ref` included, go to the <input>; `className` styles the field around it.
  */
-export interface NumberInputProps {
+export interface NumberInputProps extends Omit<React.ComponentProps<'input'>, 'value' | 'defaultValue' | 'size' | 'min' | 'max' | 'step' | 'type' | 'children'> {
     value?: number;
     defaultValue?: number;
     onValueChange?: (value: number) => void;
@@ -30,4 +32,4 @@ export interface NumberInputProps {
     wrapperClassName?: string;
     className?: string;
 }
-export declare function NumberInput({ value: valueProp, defaultValue, onValueChange, min, max, step, size, formatValue, label, hint, error, disabled, id, name, wrapperClassName, className, ...props }: NumberInputProps): React.JSX.Element;
+export declare function NumberInput({ value: valueProp, defaultValue, onValueChange, min, max, step, size, formatValue, label, hint, error, disabled, id, name, wrapperClassName, className, 'aria-describedby': describedBy, onChange, onBlur, onKeyDown, ...props }: NumberInputProps): React.JSX.Element;

package/components/number-input.js

@@ -1,8 +1,7 @@
-'use client';export { NumberInput } from '../chunk-LW3TRU5W.js';
-import '../chunk-72OCFAPT.js';
-import '../chunk-UBNHSZSE.js';
-import '../chunk-3DINAQLL.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=number-input.js.map
-//# sourceMappingURL=number-input.js.map
+'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,6 +1,6 @@
-'use client';export { Pagination, paginationRange } from '../chunk-QS4N4MNP.js';
-import '../chunk-J3NSDRVH.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=pagination.js.map
-//# sourceMappingURL=pagination.js.map
+'use client';export { Pagination, paginationRange } from '../chunk-TB3ZRV3Y.js';
+import '../chunk-XETMIETJ.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';