@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/components/inputs/field/index.d.ts

@@ -0,0 +1,116 @@
+import { ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
+type SizeVariant = "default" | "compact";
+import { JSX as JSX_1kxb } from "react";
+/** When native validity is checked. */
+type FieldValidationMode = "onSubmit" | "onBlur" | "onChange";
+interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+	/** The field's parts: `Field.Label`, a control, `Field.Description`, `Field.Error`. */
+	children?: ReactNode;
+	/** Marks the value invalid: the label and the control turn destructive and the control sets `aria-invalid`. Set it from your validation (a form library's field state). Defaults to `false`. */
+	invalid?: boolean;
+	/** Disables the control and dims the field. Defaults to `false`. */
+	disabled?: boolean;
+	/** Shows the value without letting it change (Input, NumberInput and FileDropzone read it). Defaults to `false`. */
+	readOnly?: boolean;
+	/** Marks the control required and the label with an asterisk. Defaults to `false`. */
+	required?: boolean;
+	/** Names the value when the form is submitted; wins over the control's own `name`. */
+	name?: string;
+	/** Whether the value differs from its initial one, for a form library that tracks it (sets `data-dirty`). */
+	dirty?: boolean;
+	/** Whether the control has been visited, for a form library that tracks it (sets `data-touched`). */
+	touched?: boolean;
+	/** When Base UI checks the control's native validity (`required`, `pattern`, `type`): on form submit, on blur, or on every change. A failure turns the field destructive and an empty `Field.Error` shows the browser's message. Defaults to `"onSubmit"`. */
+	validationMode?: FieldValidationMode;
+	/** Pins the field and its control to one step of the size ladder (36px default, 28px compact). Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Classes for the root. */
+	className?: string;
+}
+interface FieldLabelProps {
+	/** Label text. */
+	children: ReactNode;
+	/** Keep the label for assistive tech but don't render it, for a field whose placeholder or context carries the meaning. Defaults to `false`. */
+	visuallyHidden?: boolean;
+	/** Classes for the label. */
+	className?: string;
+}
+type Element_12xgc = JSX_1kxb["Element"];
+declare function FieldLabel({ children, visuallyHidden, className }: FieldLabelProps): Element_12xgc;
+interface FieldDescriptionProps {
+	/** Help text under the control: a format, a limit, what the value is for. */
+	children: ReactNode;
+	/** Classes for the description. */
+	className?: string;
+}
+declare function FieldDescription({ children, className }: FieldDescriptionProps): Element_12xgc;
+/** Which native validity state shows the message (`"valueMissing"`, `"typeMismatch"`, …). */
+type FieldErrorMatch = boolean | keyof ValidityState;
+interface FieldErrorProps {
+	/** The message. While it has one, it shows; empty, it hides. */
+	children?: ReactNode;
+	/** Overrides when it shows: `true` always, `false` never, or a native validity state such as `"valueMissing"`. Defaults to showing while it has a message. */
+	match?: FieldErrorMatch;
+	/** Classes for the message. */
+	className?: string;
+}
+declare function FieldError({ children, match, className }: FieldErrorProps): Element_12xgc;
+interface FieldControlProps {
+	/** The element that becomes the control, e.g. a native `<select>` or a third-party input. */
+	render?: ReactElement;
+	/** Compose onto the single child instead. Defaults to `false`. */
+	asChild?: boolean;
+	/** The control, with `asChild`. */
+	children?: ReactNode;
+}
+declare function FieldControl({ render, asChild, children }: FieldControlProps): Element_12xgc;
+type FieldComponent = ForwardRefExoticComponent<FieldProps & RefAttributes<HTMLDivElement>> & {
+	Label: typeof FieldLabel;
+	Description: typeof FieldDescription;
+	Error: typeof FieldError;
+	Control: typeof FieldControl;
+};
+/**
+* A labelled form field: a label above the control, help text and an error
+* message below it, all linked for assistive tech.
+*
+* Put an Input, Textarea, NumberInput, FileDropzone, Select or any other
+* field control inside and it joins on its own: the label targets it, the
+* description and error are read with it, and the field hands it its
+* `invalid`, `disabled`, `readOnly` and `required` state, so the box turns
+* destructive with the label. The label and messages sit inset to line up
+* with the text in the box. The field holds no validation of its own:
+* `invalid` and the error's message come from yours (a form library's field
+* state, a server response), and `Field.Error` shows while it has a message.
+* A native failure (`required`, `pattern`, `type="email"`) caught by Base UI's
+* validation turns it destructive too, and an empty `Field.Error` then shows
+* the browser's message.
+* Behavior comes from Base UI's Field.
+*
+* `size` pins the field and its control to one step of the size ladder;
+* without it they follow the surrounding SizeProvider, which is how to set a
+* form's density when a control's own props keep the native `<input size>`
+* attribute (a character width, not a height). `Field.Control` passes a
+* native `size` through to the element untouched.
+*
+* InputGroup.Field is the preset for a group of text fields: a label and an
+* error string, and the group's hover gliding from field to field. Reach for
+* Field when a field stands alone, needs a description, or holds a control
+* other than a text input.
+*
+* Statics:
+* - `Field.Label` — the label, weight-stable and muted; destructive while
+*   the field is invalid, with an asterisk while it is required:
+*   `visuallyHidden`.
+* - `Field.Description` — muted help text under the control.
+* - `Field.Error` — the destructive message; it fades in while it has
+*   children: `match` (`true`, `false`, or a native validity state).
+* - `Field.Control` — wires a control that isn't a field control (a native
+*   element, a third-party input) with the field's id, `aria-describedby`
+*   and `aria-invalid`: `render={<select/>}` or `asChild`. Field controls
+*   (Input, NumberInput, …) need no wrapper.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Field: FieldComponent;
+export { Field, FieldControl, FieldControlProps, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorMatch, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, Field as default };

package/dist/components/inputs/field/index.js

@@ -0,0 +1,28 @@
+import {
+  FieldLabel2,
+  FieldDescription2,
+  FieldError2,
+  FieldControl2,
+  Field2,
+  field_default
+} from "../../../shared/components-jjrj6ymn.js";
+import"../../../shared/components-y1w3a6wx.js";
+import"../../../shared/components-adkarj8n.js";
+import"../../../shared/components-6zng858q.js";
+import"../../../shared/components-124epb7f.js";
+import"../../../shared/components-vfjc9jzz.js";
+import"../../../shared/components-yhgq0qxx.js";
+import"../../../shared/components-dcc02hs2.js";
+import"../../../shared/components-tz1fv35x.js";
+import"../../../shared/components-h83az0bz.js";
+import"../../../shared/components-34txk9rj.js";
+import"../../../shared/components-78x40gee.js";
+import"../../../shared/components-jcnjay5g.js";
+export {
+  Field2 as Field,
+  FieldControl2 as FieldControl,
+  FieldDescription2 as FieldDescription,
+  FieldError2 as FieldError,
+  FieldLabel2 as FieldLabel,
+  field_default as default
+};

package/dist/components/inputs/file-dropzone/index.d.ts

@@ -0,0 +1,165 @@
+import { ForwardRefExoticComponent, ReactNode as ReactNode3, RefAttributes } from "react";
+import { ComponentType } from "react";
+interface IconComponentProps {
+	size?: number | string;
+	strokeWidth?: number | string;
+	className?: string;
+}
+type IconComponent = ComponentType<IconComponentProps>;
+type SizeVariant = "default" | "compact";
+import { ReactNode as ReactNode2 } from "react";
+import { JSX as JSX_1kxb2 } from "react";
+/** Where a file is in its upload: `idle` (picked), `uploading`, `done` or `error`. */
+type FileRowStatus = "idle" | "uploading" | "done" | "error";
+interface FileRowProps {
+	/** The picked file: its name, size and type fill the row. */
+	file?: File;
+	/** File name, for a file you only know by its metadata (one already uploaded). Wins over `file`. */
+	name?: string;
+	/** File size in bytes. Wins over `file`. */
+	fileSize?: number;
+	/** MIME type; an image shows the image glyph. Wins over `file`. */
+	type?: string;
+	/** Image URL shown in place of the glyph, e.g. an object URL of the file or the server's preview. */
+	thumbnail?: string;
+	/** Glyph in place of the file or image one. */
+	icon?: IconComponent;
+	/** Where the file is in its upload; sets the status glyph and the progress bar. Defaults to `"idle"`. */
+	status?: FileRowStatus;
+	/** Upload progress from 0 to 100, shown as a bar while `status` is `"uploading"` (see Progress). Omitted, the bar sweeps. */
+	progress?: number;
+	/** Accessible name of the upload's bar. Defaults to `"Uploading"`. */
+	uploadingLabel?: string;
+	/** The line under the name in place of the size, e.g. "Uploaded 2 min ago". */
+	description?: ReactNode2;
+	/** An error message in place of the size line; the row reads as failed. */
+	error?: ReactNode2;
+	/** Shows a remove button and is called when it is pressed. */
+	onRemove?: () => void;
+	/** Accessible name of the remove button. Defaults to `"Remove file"`. */
+	removeLabel?: string;
+	/** More controls before the remove button, e.g. a download link or a menu. */
+	actions?: ReactNode2;
+	/** Locale for the size (`1,5 MB` in `"sk-SK"`). Defaults to the browser's. */
+	locale?: Intl.LocalesArgument;
+	/** Dims the row and its actions. Defaults to `false`. */
+	disabled?: boolean;
+	/** Pins the row to one step of the size ladder. Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Classes for the row. */
+	className?: string;
+}
+type Element_12xgc2 = JSX_1kxb2["Element"];
+/** One file in a list: its glyph or thumbnail, name, size or status, and a remove button. */
+declare function FileRow({ file, name: nameProp, fileSize: fileSizeProp, type: typeProp, thumbnail, icon, status, progress, description, error, onRemove, removeLabel, uploadingLabel, actions, locale, disabled, size: sizeProp, className }: FileRowProps): Element_12xgc2;
+/** A byte count as a short localized size: `512 B`, `1.5 MB` (decimal units, as file managers show them). */
+declare function formatFileSize(bytes: number, locale?: Intl.LocalesArgument): string;
+/** Why a file was turned away: its `type` is not in `accept`, its `size` is over `maxSize`, or it is past the `count` of `maxFiles`. */
+type FileRejectionReason = "type" | "size" | "count";
+/** A file the dropzone turned away, and why. */
+interface FileRejection {
+	file: File;
+	reason: FileRejectionReason;
+}
+/** Whether a file passes an `accept` list (`.pdf,image/*`), as the native file input reads it. */
+declare function acceptsFile(file: {
+	name: string;
+	type: string;
+}, accept?: string): boolean;
+/** What a drag over the zone will come to: every file taken, some taken and some turned away, or none taken. */
+type DragVerdict = "accept" | "partial" | "reject";
+/**
+* Judges dragged files while they are still in the air. A drag shows MIME
+* types but no names, so a type the drag leaves empty, or an `accept` list
+* with extensions, counts as passing until the drop sorts the files. `limit`
+* is how many one drop may add.
+*/
+declare function dragVerdict(types: string[], accept: string | undefined, limit: number): DragVerdict;
+interface SortOptions {
+	accept?: string;
+	maxSize?: number;
+	maxFiles?: number;
+	multiple?: boolean;
+}
+/** Splits picked or dropped files into the ones that pass `accept`, `maxSize` and the count, and the rest with a reason. */
+declare function sortFiles(files: File[], { accept, maxSize, maxFiles, multiple }: SortOptions): {
+	accepted: File[];
+	rejected: FileRejection[];
+};
+interface FileDropzoneProps {
+	/** Called with the files that pass `accept`, `maxSize` and the count, after a pick or a drop. */
+	onFilesChange?: (files: File[]) => void;
+	/** Called with the files turned away and why (`type`, `size`, `count`), after a pick or a drop. */
+	onFilesRejected?: (rejections: FileRejection[]) => void;
+	/** File types the zone takes, as the file input reads them: `.pdf,image/*`. Defaults to any. */
+	accept?: string;
+	/** Takes several files at once. Defaults to `false`. */
+	multiple?: boolean;
+	/** Most files one pick or drop may add; the rest are rejected as `count`. Pass what is left when you keep a list. */
+	maxFiles?: number;
+	/** Largest file in bytes; bigger ones are rejected as `size`. */
+	maxSize?: number;
+	/** The main line. Defaults to `"Drop a file here or click to browse"` (`"files"` with `multiple`). */
+	label?: ReactNode3;
+	/** The line under it: the types and sizes the zone takes, e.g. "PDF or PNG, up to 10 MB". */
+	description?: ReactNode3;
+	/** The main line while files the zone takes are dragged over it. Defaults to `"Drop to add"`. */
+	activeLabel?: ReactNode3;
+	/** The main line while some of the dragged files will be taken and the rest turned away (a wrong type, past `maxFiles`). Defaults to `"Some files will be skipped"`. */
+	partialLabel?: ReactNode3;
+	/** The main line while none of the dragged files can be taken; the drop is refused. Defaults to `"These files can't be added"`. */
+	rejectLabel?: ReactNode3;
+	/** Glyph above the labels. Defaults to the `upload` icon. */
+	icon?: IconComponent;
+	/** Content in place of the glyph and labels. */
+	children?: ReactNode3;
+	/** Id of the file input, for a `Label`'s `htmlFor`. Inside a Field it is wired for you. */
+	id?: string;
+	/** Tells assistive tech a file is required (`aria-required`). The zone keeps no files, so native validation never blocks a submit: check your own list. Defaults to the surrounding Field's `required`. */
+	required?: boolean;
+	/** Turns the zone destructive. Defaults to the surrounding Field's `invalid`. */
+	invalid?: boolean;
+	/** Dims the zone and turns files away. Defaults to the surrounding Field's `disabled`. */
+	disabled?: boolean;
+	/** Shows the zone without taking files: no browse, no drop, no hover. Defaults to the surrounding Field's `readOnly`. */
+	readOnly?: boolean;
+	/** Pins the zone to one step of the size ladder: compact tightens the padding and steps the text down. Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Classes for the zone. */
+	className?: string;
+}
+type FileDropzoneComponent = ForwardRefExoticComponent<FileDropzoneProps & RefAttributes<HTMLInputElement>> & {
+	Row: typeof FileRow;
+};
+/**
+* A zone to drop files on, or click to pick them.
+*
+* Drag files over it and it lights up; the line changes to say whether it
+* will take them, reading their types while they are still in the air: all
+* of them, some (the rest will be skipped), or none, when it turns
+* destructive and refuses the drop. Dropped or picked files are sorted
+* against `accept`, `maxSize` and `maxFiles`: the ones that pass go to
+* `onFilesChange`, the rest to `onFilesRejected` with a reason. The zone
+* keeps none (its input is cleared after every pick, so nothing submits with
+* a native form and `required` is only announced), so the list, the upload
+* and its errors stay yours. Show each
+* file in a `FileDropzone.Row`. Every line is a prop, for translation. The
+* zone is a label around a hidden file input, so a click or Enter opens the
+* picker, and inside a Field it is labelled and takes the field's state. The
+* ref reaches the input: `ref.current.click()` reopens the picker, e.g. to
+* replace a file.
+*
+* Statics:
+* - `FileDropzone.Row` (also `FileRow`) — one file: its glyph or
+*   `thumbnail`, name, size, and a remove button with `onRemove`: `file` (or
+*   `name` / `fileSize` / `type`), `status` (`idle`, `uploading`, `done`,
+*   `error`), `progress` (0–100), `error`, `description`, `actions`,
+*   `removeLabel`, `locale`.
+*
+* Also exported from this item: `formatFileSize(bytes, locale)`, `sortFiles`
+* and `acceptsFile`, plain functions a server can call too.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const FileDropzone: FileDropzoneComponent;
+export { DragVerdict, FileDropzone, FileDropzoneProps, FileRejection, FileRejectionReason, FileRow, FileRowProps, FileRowStatus, acceptsFile, FileDropzone as default, dragVerdict, formatFileSize, sortFiles };

package/dist/components/inputs/file-dropzone/index.js

@@ -0,0 +1,32 @@
+import {
+  FileRow2,
+  FileDropzone2,
+  file_dropzone_default
+} from "../../../shared/components-7ntvvegr.js";
+import {
+  formatFileSize2,
+  acceptsFile2,
+  dragVerdict2,
+  sortFiles2
+} from "../../../shared/components-f7h57m6t.js";
+import"../../../shared/components-6zng858q.js";
+import"../../../shared/components-124epb7f.js";
+import"../../../shared/components-d3shbwqq.js";
+import"../../../shared/components-jqpefjsn.js";
+import"../../../shared/components-7d4r7hh1.js";
+import"../../../shared/components-f0xfpkhh.js";
+import"../../../shared/components-de99ykt7.js";
+import"../../../shared/components-3ey0hzpb.js";
+import"../../../shared/components-h83az0bz.js";
+import"../../../shared/components-34txk9rj.js";
+import"../../../shared/components-78x40gee.js";
+import"../../../shared/components-jcnjay5g.js";
+export {
+  FileDropzone2 as FileDropzone,
+  FileRow2 as FileRow,
+  acceptsFile2 as acceptsFile,
+  file_dropzone_default as default,
+  dragVerdict2 as dragVerdict,
+  formatFileSize2 as formatFileSize,
+  sortFiles2 as sortFiles
+};

package/dist/components/inputs/file-dropzone/variants.d.ts

@@ -0,0 +1,35 @@
+/** A byte count as a short localized size: `512 B`, `1.5 MB` (decimal units, as file managers show them). */
+declare function formatFileSize(bytes: number, locale?: Intl.LocalesArgument): string;
+/** Why a file was turned away: its `type` is not in `accept`, its `size` is over `maxSize`, or it is past the `count` of `maxFiles`. */
+type FileRejectionReason = "type" | "size" | "count";
+/** A file the dropzone turned away, and why. */
+interface FileRejection {
+	file: File;
+	reason: FileRejectionReason;
+}
+/** Whether a file passes an `accept` list (`.pdf,image/*`), as the native file input reads it. */
+declare function acceptsFile(file: {
+	name: string;
+	type: string;
+}, accept?: string): boolean;
+/** What a drag over the zone will come to: every file taken, some taken and some turned away, or none taken. */
+type DragVerdict = "accept" | "partial" | "reject";
+/**
+* Judges dragged files while they are still in the air. A drag shows MIME
+* types but no names, so a type the drag leaves empty, or an `accept` list
+* with extensions, counts as passing until the drop sorts the files. `limit`
+* is how many one drop may add.
+*/
+declare function dragVerdict(types: string[], accept: string | undefined, limit: number): DragVerdict;
+interface SortOptions {
+	accept?: string;
+	maxSize?: number;
+	maxFiles?: number;
+	multiple?: boolean;
+}
+/** Splits picked or dropped files into the ones that pass `accept`, `maxSize` and the count, and the rest with a reason. */
+declare function sortFiles(files: File[], { accept, maxSize, maxFiles, multiple }: SortOptions): {
+	accepted: File[];
+	rejected: FileRejection[];
+};
+export { DragVerdict, FileRejection, FileRejectionReason, acceptsFile, dragVerdict, formatFileSize, sortFiles };

package/dist/components/inputs/file-dropzone/variants.js

@@ -0,0 +1,12 @@
+import {
+  formatFileSize2,
+  acceptsFile2,
+  dragVerdict2,
+  sortFiles2
+} from "../../../shared/components-f7h57m6t.js";
+export {
+  acceptsFile2 as acceptsFile,
+  dragVerdict2 as dragVerdict,
+  formatFileSize2 as formatFileSize,
+  sortFiles2 as sortFiles
+};

package/dist/components/inputs/input/index.d.ts

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactNode as ReactNode2, RefAttributes } from "react";
+import { ButtonHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, InputHTMLAttributes, ReactNode as ReactNode4, RefAttributes } from "react";
 type SizeVariant = "default" | "compact";
 /** Framed at rest (`bordered`), or invisible until hovered or focused (`borderless`). */
 type FieldVariant = "bordered" | "borderless";
@@ -9,11 +9,46 @@ interface IconComponentProps {
 	className?: string;
 }
 type IconComponent = ComponentType<IconComponentProps>;
+import { LabelHTMLAttributes, ReactNode as ReactNode3 } from "react";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+	/** Label text. */
+	children: ReactNode3;
+	/** The id of the control it names; a click on the label focuses or toggles that control. */
+	htmlFor?: string;
+	/** Turns the label destructive, matching an invalid Input. Defaults to `false`. */
+	invalid?: boolean;
+	/** Pins the label to one step of the size ladder (body text at default, compact body at compact). Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Classes for the `<label>`. */
+	className?: string;
+}
+/**
+* The label above or beside a field control.
+*
+* Muted body text inset to line up with the text inside a field box, so a
+* label over an Input starts where its value does. It reserves the width of
+* its semibold weight, so nothing moves if a wrapper restyles it. Pair it
+* with a control through `htmlFor` and the control's `id`; inside a Field,
+* `Field.Label` renders it for you and links it. `invalid` turns it
+* destructive with the field; a disabled Field dims it. It follows the size
+* ladder (see Sizes): `size` pins it, otherwise it reads the surrounding
+* SizeProvider. Also exported from `inputs/input`.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Label: ForwardRefExoticComponent_tcubfn<LabelProps & RefAttributes_miuf56<HTMLLabelElement>>;
+import { JSX as JSX_1kxb3 } from "react";
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "size"> {
 	/** Placeholder text. */
 	placeholder?: string;
 	/** Leading icon inside the input. */
 	icon?: IconComponent;
+	/** Content before the text, after `icon`: a prefix (`"https://"`), an icon element, an `InputAction`. Strings read as muted text; icons take the ladder's glyph size. */
+	startAdornment?: ReactNode4;
+	/** Content after the text: a unit (`"kg"`), a status icon, an `InputAction` such as a password reveal or a clear. */
+	endAdornment?: ReactNode4;
 	/** Controlled input value. */
 	value?: string;
 	/** Initial value when uncontrolled. Defaults to `''`. */
@@ -26,6 +61,12 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChan
 	invalid?: boolean;
 	/** Disables the input. Defaults to `false`. */
 	disabled?: boolean;
+	/** Shows the value without letting it change: it can be selected and copied, the ring answers hover and focus, the fill never lifts. Defaults to `false`. */
+	readOnly?: boolean;
+	/** Marks the input required. Defaults to the surrounding Field's `required`. */
+	required?: boolean;
+	/** The input's type. Swapping it (a password reveal) keeps the caret and the selection where they were. Defaults to `"text"`. */
+	type?: string;
 	/** Pins the input to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
 	size?: SizeVariant;
 	/** Classes for the ringed box around the input. */
@@ -38,11 +79,34 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChan
 * ground with a hairline ring, focus onto the card ground, and its leading
 * icon thickens. `invalid` turns it destructive. It is uncontrolled with
 * `defaultValue`, or controlled with `value` + `onChange`, and fills the width
-* of its container. Pair it with a `Label` through `htmlFor` / `id`.
+* of its container. Pair it with a `Label` through `htmlFor` / `id`, or put
+* it in a Field, which labels it and hands it its error, disabled,
+* read-only and required state.
+*
+* `startAdornment` and `endAdornment` hold what sits beside the text: a
+* prefix or a unit, an icon, or an `InputAction` (a password reveal, a
+* clear). They light with the field like its leading icon, and icons in
+* them take the ladder's glyph size. Swapping `type` keeps the caret and the
+* selection where they were, so a password reveal is just an `InputAction`
+* that flips `type` between `"password"` and `"text"`. `readOnly` keeps the
+* value selectable while the fill stays down.
+*
+* Its height is a step of the size ladder (see Sizes). `size` is that step
+* (`"default"` 36px, `"compact"` 28px), not the native `<input size>`
+* character width, which the Input doesn't take: its width comes from its
+* container. With no `size`, the surrounding SizeProvider sets the height,
+* so a host whose props keep the native `size` attribute strips it before
+* spreading them onto the Input and sets density with a SizeProvider (or a
+* Field's `size`) around the form instead.
 *
 * Also exported from this item:
+* - `InputAction` — a small icon button inside the field, 4px inside its
+*   ring: `label` (its accessible name), `icon`, `size`, plus button props.
+*   A press keeps the caret in the field.
+* - `InputAdornment` — the wrapper the adornments render in, for a field of
+*   your own built on the field box: `size`.
 * - `Label` — the field label, weight-stable and inset to line up with the
-*   input's text: `htmlFor`, `invalid`, `size`.
+*   input's text: `htmlFor`, `invalid`, `size` (see Label, its own page).
 * - `InputGroup` — stacks labelled fields and tracks the pointer across them,
 *   so the hover glides from field to field: `size` pins every field to one
 *   step of the ladder.
@@ -56,18 +120,36 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChan
 * @example {@include ./examples.mdx}
 */
 declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
-interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-	/** Label text. */
-	children: ReactNode2;
-	/** Turns the label destructive, matching an invalid Input. Defaults to `false`. */
-	invalid?: boolean;
-	/** Pins the label to one step of the size ladder. Defaults to the surrounding SizeProvider. */
+interface InputAdornmentProps {
+	/** What sits beside the text. Nothing renders when it is empty. */
+	children?: ReactNode4;
+	/** Pins the adornment, and an `InputAction` inside it, to one step of the size ladder. Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Classes for the wrapper. */
+	className?: string;
+}
+type Element_12xgc3 = JSX_1kxb3["Element"];
+/** Content beside a field's text, lit with the field: what `startAdornment` / `endAdornment` render in, for a field of your own on `useFieldBox`. */
+declare function InputAdornment({ children, size, className }: InputAdornmentProps): Element_12xgc3 | null;
+interface InputActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+	/** Names the action for assistive tech (its `aria-label`), e.g. "Show password". */
+	label: string;
+	/** The glyph. Pass an icon component, or an icon element as `children`. */
+	icon?: IconComponent;
+	/** An icon element, in place of `icon`. */
+	children?: ReactNode4;
+	/** Disables the action. Defaults to `false`. */
+	disabled?: boolean;
+	/** Pins the action to one step of the size ladder (28px in a default field, 20px in a compact one). Defaults to the surrounding SizeProvider. */
 	size?: SizeVariant;
+	/** Classes for the button. */
+	className?: string;
 }
-declare const Label: ForwardRefExoticComponent<LabelProps & RefAttributes<HTMLLabelElement>>;
+/** A small icon button inside a field box: a password reveal, a clear, a copy. */
+declare const InputAction: ForwardRefExoticComponent<InputActionProps & RefAttributes<HTMLButtonElement>>;
 interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
 	/** One or more InputGroup.Field children. */
-	children: ReactNode2;
+	children: ReactNode4;
 	/** Pins the group's fields to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
 	size?: SizeVariant;
 }
@@ -85,8 +167,8 @@ interface InputFieldProps extends Omit<InputProps, "invalid" | "size" | "classNa
 	/** Error message shown below the input. */
 	error?: string;
 	/** A control in place of the built-in Input, e.g. a Textarea: it joins the group's hover and takes the field's error and disabled state. Input's props then go on it, not on the field. */
-	children?: ReactNode2;
+	children?: ReactNode4;
 	className?: string;
 }
 declare const InputField: ForwardRefExoticComponent<InputFieldProps & RefAttributes<HTMLDivElement>>;
-export { Input, InputFieldProps, InputGroup, InputGroupProps, InputProps, Label, LabelProps, Input as default };
+export { Input, InputAction, InputActionProps, InputAdornment, InputAdornmentProps, InputFieldProps, InputGroup, InputGroupProps, InputProps, Label, LabelProps, Input as default };

package/dist/components/inputs/input/index.js

@@ -1,18 +1,26 @@
 import {
   Input2,
-  Label2,
+  InputAdornment2,
+  InputAction2,
   InputGroup2,
   input_default
-} from "../../../shared/components-h2ajmhwn.js";
-import"../../../shared/components-raknhppb.js";
-import"../../../shared/components-59efxjd9.js";
-import"../../../shared/components-jjw69c4c.js";
-import"../../../shared/components-n7mjr357.js";
-import"../../../shared/components-0sn7ypjw.js";
-import"../../../shared/components-cv16mryv.js";
-import"../../../shared/components-ezxhrmer.js";
+} from "../../../shared/components-y1w3a6wx.js";
+import {
+  Label2
+} from "../../../shared/components-adkarj8n.js";
+import"../../../shared/components-6zng858q.js";
+import"../../../shared/components-124epb7f.js";
+import"../../../shared/components-yhgq0qxx.js";
+import"../../../shared/components-dcc02hs2.js";
+import"../../../shared/components-tz1fv35x.js";
+import"../../../shared/components-h83az0bz.js";
+import"../../../shared/components-34txk9rj.js";
+import"../../../shared/components-78x40gee.js";
+import"../../../shared/components-jcnjay5g.js";
 export {
   Input2 as Input,
+  InputAction2 as InputAction,
+  InputAdornment2 as InputAdornment,
   InputGroup2 as InputGroup,
   Label2 as Label,
   input_default as default

package/dist/components/inputs/label/index.d.ts

@@ -0,0 +1,32 @@
+import { LabelHTMLAttributes, ReactNode } from "react";
+type SizeVariant = "default" | "compact";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+	/** Label text. */
+	children: ReactNode;
+	/** The id of the control it names; a click on the label focuses or toggles that control. */
+	htmlFor?: string;
+	/** Turns the label destructive, matching an invalid Input. Defaults to `false`. */
+	invalid?: boolean;
+	/** Pins the label to one step of the size ladder (body text at default, compact body at compact). Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Classes for the `<label>`. */
+	className?: string;
+}
+/**
+* The label above or beside a field control.
+*
+* Muted body text inset to line up with the text inside a field box, so a
+* label over an Input starts where its value does. It reserves the width of
+* its semibold weight, so nothing moves if a wrapper restyles it. Pair it
+* with a control through `htmlFor` and the control's `id`; inside a Field,
+* `Field.Label` renders it for you and links it. `invalid` turns it
+* destructive with the field; a disabled Field dims it. It follows the size
+* ladder (see Sizes): `size` pins it, otherwise it reads the surrounding
+* SizeProvider. Also exported from `inputs/input`.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Label: ForwardRefExoticComponent_tcubfn<LabelProps & RefAttributes_miuf56<HTMLLabelElement>>;
+export { Label, LabelProps, Label as default };

package/dist/components/inputs/label/index.js

@@ -0,0 +1,11 @@
+import {
+  Label2,
+  label_default
+} from "../../../shared/components-adkarj8n.js";
+import"../../../shared/components-h83az0bz.js";
+import"../../../shared/components-34txk9rj.js";
+import"../../../shared/components-jcnjay5g.js";
+export {
+  Label2 as Label,
+  label_default as default
+};