@uisatin/ui 0.3.0 → 0.5.0

package/components/dialog.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Dialog as DialogPrimitive } from 'radix-ui';
+import { CloseIcon, StatusIcon } from './alert.js';
+export { CloseIcon, StatusIcon };
 /**
  * Dialog, 1:1 with the uiKit `Dialog` set (465:66873): variant default or destructive.
  * A 425px popover surface (min 360, max 560, never wider or taller than the screen less 16px a side; the body scrolls), radius-2xl, border/default, the shadcn `lg`
@@ -43,9 +45,6 @@ export interface DialogProps extends Omit<React.ComponentProps<typeof DialogPrim
     onOpenAutoFocus?: (event: Event) => void;
     className?: string;
 }
-/** The X from Figma's close button (`icon` 16px, 1.25 stroke). */
-/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
-export declare function CloseIcon(): React.JSX.Element;
 export declare function Dialog({ open, defaultOpen, onOpenChange, trigger, title, description, variant, alert, footer, footerStart, children, closeButton, modal, container, onOpenAutoFocus, className, ...props }: DialogProps): React.JSX.Element;
 /** Wrap a footer button in this to make it close the dialog: `<DialogClose asChild><Button…/></DialogClose>`. */
 export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
@@ -64,8 +63,4 @@ export interface DialogAlertProps extends Omit<React.ComponentProps<'div'>, 'tit
     /** Shows the close button; called when it is pressed. */
     onDismiss?: () => void;
 }
-/** The four status glyphs from Figma (16px, 1.25 stroke), drawn in currentColor. */
-export declare function StatusIcon({ intent }: {
-    intent: DialogAlertIntent;
-}): React.JSX.Element;
 export declare function DialogAlert({ intent, title, description, icon, onDismiss, className, ...props }: DialogAlertProps): React.JSX.Element;

package/components/dialog.js

@@ -1,4 +1,6 @@
-'use client';export { CloseIcon, Dialog, DialogAlert, DialogClose, StatusIcon } from '../chunk-AIMQNLPY.js';
-import '../chunk-T6L32XXH.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Dialog, DialogAlert, DialogClose } from '../chunk-WZSLDYUU.js';
+export { CloseIcon, StatusIcon } from '../chunk-RPL6FRVX.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/donut-chart.js

@@ -1,10 +1,10 @@
-'use client';export { DonutCard } from '../chunk-WLQD5BN2.js';
-import '../chunk-ZBZ3ZQRB.js';
+'use client';export { DonutCard } from '../chunk-PD2KD5OR.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/dot.js

@@ -1,2 +1,2 @@
-'use client';export { Dot, dotVariants } from '../chunk-5XTUFBZI.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Dot, dotVariants } from '../chunk-C6WRJ7DG.js';
+import '../chunk-EHEXE2UV.js';

package/components/dropdown.js

@@ -1,4 +1,4 @@
-'use client';export { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, MenuItemContent, menuGroupClass, menuGroupLabelClass, menuItemClass, menuSurfaceClass } from '../chunk-BR2B4OIT.js';
-import '../chunk-57QEOCDZ.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, MenuItemContent, menuGroupClass, menuGroupLabelClass, menuItemClass, menuSurfaceClass } from '../chunk-P36KBUYD.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/empty-state.js

@@ -1,2 +1,2 @@
-'use client';export { EmptyState, emptyStateVariants } from '../chunk-FAJ3OVL4.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { EmptyState, emptyStateVariants } from '../chunk-JR3VVDV6.js';
+import '../chunk-EHEXE2UV.js';

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,6 +1,7 @@
-'use client';export { FileUpload, FileUploadItem, fileIconFor, formatBytes } from '../chunk-73Z7NMQQ.js';
-import '../chunk-UUCVRIVP.js';
-import '../chunk-M2HEVFQ3.js';
-import '../chunk-T6L32XXH.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'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/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,2 +1,2 @@
-'use client';export { FormField, useFormField } from '../chunk-VUOAPWTF.js';
-import '../chunk-O46O6LFQ.js';
+'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.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;