@skdx/react 0.26.0 → 0.28.0

package/dist/tags-input/TagsInputItemInput.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { TagsInputItemInputProps } from './types.cjs';
+/**
+ * The field a committed tag becomes while being edited inside a {@link TagsInputItem}.
+ * Renders nothing unless root is `editable` and this exact tag is open for editing —
+ * lets `editable` default to `false` without changing anatomy; unopened editor costs no DOM/tab stop.
+ *
+ * Opened with `Enter` on focused tag. Mounts with tag's text selected (typing replaces it,
+ * arrows refine it); names itself `Edit <tag>` so screen-reader user hears which tag they're in.
+ *
+ * Three ways out, all put focus back on tag:
+ * - **`Enter`** commits via same refusal rules as new tag (`validate`, duplicate check).
+ * - **`Escape`** abandons edit.
+ * - **`blur`** (neither above) abandons it without moving focus.
+ *
+ * @example
+ * ```tsx
+ * <TagsInput editable defaultValue={['react']}>
+ *   <TagsInputItem index={0}>
+ *     react
+ *     <TagsInputItemDelete index={0}>×</TagsInputItemDelete>
+ *     <TagsInputItemInput index={0} />
+ *   </TagsInputItem>
+ *   <TagsInputInput placeholder="Add a tag…" />
+ * </TagsInput>
+ * ```
+ */
+export declare const TagsInputItemInput: React.ForwardRefExoticComponent<Omit<TagsInputItemInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/tags-input/TagsInputItemInput.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { TagsInputItemInputProps } from './types.js';
+/**
+ * The field a committed tag becomes while being edited inside a {@link TagsInputItem}.
+ * Renders nothing unless root is `editable` and this exact tag is open for editing —
+ * lets `editable` default to `false` without changing anatomy; unopened editor costs no DOM/tab stop.
+ *
+ * Opened with `Enter` on focused tag. Mounts with tag's text selected (typing replaces it,
+ * arrows refine it); names itself `Edit <tag>` so screen-reader user hears which tag they're in.
+ *
+ * Three ways out, all put focus back on tag:
+ * - **`Enter`** commits via same refusal rules as new tag (`validate`, duplicate check).
+ * - **`Escape`** abandons edit.
+ * - **`blur`** (neither above) abandons it without moving focus.
+ *
+ * @example
+ * ```tsx
+ * <TagsInput editable defaultValue={['react']}>
+ *   <TagsInputItem index={0}>
+ *     react
+ *     <TagsInputItemDelete index={0}>×</TagsInputItemDelete>
+ *     <TagsInputItemInput index={0} />
+ *   </TagsInputItem>
+ *   <TagsInputInput placeholder="Add a tag…" />
+ * </TagsInput>
+ * ```
+ */
+export declare const TagsInputItemInput: React.ForwardRefExoticComponent<Omit<TagsInputItemInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/tags-input/index.d.cts

@@ -1,5 +1,2 @@
-export { TAGS_INPUT_DELETE_SELECTOR, TAGS_INPUT_FIELD_SELECTOR, TAGS_INPUT_SELECTOR, TagsInput, focusDeleteNeighbor, } from './TagsInput.cjs';
-export { TagsInputInput } from './TagsInputInput.cjs';
-export { type TagsInputInputProps, type TagsInputItemDeleteProps, type TagsInputItemProps, type TagsInputProps, } from './types.cjs';
-export { TagsInputItem } from './TagsInputItem.cjs';
-export { TagsInputItemDelete } from './TagsInputItemDelete.cjs';
+export { TagsInput } from './TagsInput.cjs';
+export type { TagsInputHandle, TagsInputInvalidDetail, TagsInputProps } from './types.cjs';

package/dist/tags-input/index.d.ts

@@ -1,5 +1,2 @@
-export { TAGS_INPUT_DELETE_SELECTOR, TAGS_INPUT_FIELD_SELECTOR, TAGS_INPUT_SELECTOR, TagsInput, focusDeleteNeighbor, } from './TagsInput.js';
-export { TagsInputInput } from './TagsInputInput.js';
-export { type TagsInputInputProps, type TagsInputItemDeleteProps, type TagsInputItemProps, type TagsInputProps, } from './types.js';
-export { TagsInputItem } from './TagsInputItem.js';
-export { TagsInputItemDelete } from './TagsInputItemDelete.js';
+export { TagsInput } from './TagsInput.js';
+export type { TagsInputHandle, TagsInputInvalidDetail, TagsInputProps } from './types.js';

package/dist/tags-input/primitives.d.cts

@@ -0,0 +1,27 @@
+/**
+ * Primitives for `TagsInput` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { TagsInput, TagsInputItem, TagsInputItemDelete, TagsInputItemInput, TagsInputInput, TagsInputClear } from '@skdx/react/primitives/tags-input';
+ *
+ * <TagsInput defaultValue={['react', 'typescript']} editable>
+ *   {tags.map((tag, index) => (
+ *     <TagsInputItem key={tag} index={index}>
+ *       {tag}
+ *       <TagsInputItemDelete index={index}>×</TagsInputItemDelete>
+ *       <TagsInputItemInput index={index} />
+ *     </TagsInputItem>
+ *   ))}
+ *   <TagsInputInput placeholder="Add a tag…" />
+ *   <TagsInputClear>Clear</TagsInputClear>
+ * </TagsInput>
+ * ```
+ */
+export { TagsInput, TAGS_INPUT_DELETE_SELECTOR, TAGS_INPUT_FIELD_SELECTOR, TAGS_INPUT_ITEM_SELECTOR, TAGS_INPUT_SELECTOR, focusDeleteNeighbor, focusTagStep, } from './TagsInput.cjs';
+export { TagsInputItem } from './TagsInputItem.cjs';
+export { TagsInputItemDelete } from './TagsInputItemDelete.cjs';
+export { TagsInputItemInput } from './TagsInputItemInput.cjs';
+export { TagsInputInput } from './TagsInputInput.cjs';
+export { TagsInputClear } from './TagsInputClear.cjs';
+export type { TagsInputProps, TagsInputItemProps, TagsInputItemDeleteProps, TagsInputItemInputProps, TagsInputInputProps, TagsInputClearProps, } from './types.cjs';

package/dist/tags-input/primitives.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Primitives for `TagsInput` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { TagsInput, TagsInputItem, TagsInputItemDelete, TagsInputItemInput, TagsInputInput, TagsInputClear } from '@skdx/react/primitives/tags-input';
+ *
+ * <TagsInput defaultValue={['react', 'typescript']} editable>
+ *   {tags.map((tag, index) => (
+ *     <TagsInputItem key={tag} index={index}>
+ *       {tag}
+ *       <TagsInputItemDelete index={index}>×</TagsInputItemDelete>
+ *       <TagsInputItemInput index={index} />
+ *     </TagsInputItem>
+ *   ))}
+ *   <TagsInputInput placeholder="Add a tag…" />
+ *   <TagsInputClear>Clear</TagsInputClear>
+ * </TagsInput>
+ * ```
+ */
+export { TagsInput, TAGS_INPUT_DELETE_SELECTOR, TAGS_INPUT_FIELD_SELECTOR, TAGS_INPUT_ITEM_SELECTOR, TAGS_INPUT_SELECTOR, focusDeleteNeighbor, focusTagStep, } from './TagsInput.js';
+export { TagsInputItem } from './TagsInputItem.js';
+export { TagsInputItemDelete } from './TagsInputItemDelete.js';
+export { TagsInputItemInput } from './TagsInputItemInput.js';
+export { TagsInputInput } from './TagsInputInput.js';
+export { TagsInputClear } from './TagsInputClear.js';
+export type { TagsInputProps, TagsInputItemProps, TagsInputItemDeleteProps, TagsInputItemInputProps, TagsInputInputProps, TagsInputClearProps, } from './types.js';

package/dist/tags-input/types.d.cts

@@ -1,5 +1,22 @@
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal Shared state distributed from {@link TagsInput} to its parts via context. Not part of the public API. */
+/**
+ * Refusal detail: which validation rule rejected a candidate tag and the
+ * trimmed text that failed. Fired once per refused candidate via `onValueInvalid`.
+ */
+export interface TagsInputInvalidDetail {
+    /** The candidate, already trimmed — the same text that would have been committed. */
+    tag: string;
+    /**
+     * The rule that refused it, in the fixed order the contract's
+     * `validationBehavior` sets: `'empty'` (blank after trimming), `'max'` (the
+     * list is already full), `'validate'` (the consumer predicate returned
+     * `false`) and `'duplicate'` (the built-in rule `allowDuplicates` switches
+     * off).
+     */
+    reason: 'empty' | 'max' | 'validate' | 'duplicate';
+}
+/** @internal Context state distributed from TagsInput to its parts. */
 export interface TagsInputContextValue {
     value: string[];
     inputValue: string;
@@ -8,14 +25,63 @@ export interface TagsInputContextValue {
     invalid: boolean;
     readOnly: boolean;
     max?: number;
-    delimiter: string;
+    delimiter: string | string[];
     addOnPaste: boolean;
+    /** What an unfocused draft does with text the user typed but never committed. */
+    blurBehavior: 'keep' | 'clear' | 'commit';
+    /** Whether a committed tag may be opened for editing in a `TagsInputItemInput`. */
+    editable: boolean;
+    /**
+     * Which tag is currently open for editing, or `null`. Clamped against the tag
+     * count, so a tag removed while another was being edited cannot leave an
+     * editor open over an index that no longer exists.
+     */
+    editingIndex: number | null;
+    /** Opens (or, with `null`, closes) the editor over the tag at that index. */
+    setEditingIndex: (index: number | null) => void;
+    /**
+     * Writes `tag` back to the tag at `index`, through the same ordered refusal
+     * rules a new tag runs — minus `max`, which an edit cannot breach. The
+     * candidate is judged against the list *without* the edited tag in it, or
+     * re-committing a tag unchanged would be a duplicate of itself.
+     */
+    setTagAtIndex: (index: number, tag: string) => void;
+    /** Empties the whole list in one change. A no-op on an already-empty field. */
+    clearTags: () => void;
     addTag: (tag: string) => void;
     addTags: (tags: string[]) => void;
     removeTag: (index: number) => void;
+    /**
+     * Index of the tag currently owning the strip's single Tab stop. Clamped
+     * against the tag count, so removing the tag that held it never leaves the
+     * whole strip out of the tab order.
+     */
+    tabStopIndex: number;
+    /** Claims the Tab stop for the tag at `index` — called when one takes focus, and after a removal hands focus on. */
+    setActiveIndex: (index: number) => void;
 }
 /** Props for the {@link TagsInput} root. */
 export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    /**
+     * Placeholder for the derived draft field. Forwarded onto the `<input>`
+     * itself, never onto the root wrapper. Ignored when `children` is given,
+     * which switches to full manual composition.
+     * @default undefined — the draft field has no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Accessible name of the derived draft field, emitted as its `aria-label`.
+     * A placeholder is not a name, so this is what the field is announced as.
+     * Ignored when `children` is given.
+     * @default 'Add a tag'
+     */
+    inputLabel?: string;
+    /**
+     * Renders the derived `TagsInputClear` button, which empties the whole list in one
+     * press. Ignored when `children` is given.
+     * @default false
+     */
+    clearable?: boolean;
     /**
      * Current tags, for controlled usage. Pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own tag list internally.
@@ -55,11 +121,30 @@ export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      */
     max?: number;
     /**
-     * Character that commits the draft as a tag while typing, and that pasted
-     * text is split on.
-     * @default ','
+     * Characters that commit the draft as a tag while typing, and that pasted
+     * text is split on. Pasted text is split on every entry; the typed commit
+     * only ever fires for an entry that is a single character, since it is
+     * compared against a `KeyboardEvent.key`. The newline in the default is what
+     * makes a list pasted out of a spreadsheet or a textarea arrive as tags
+     * rather than as one tag holding the whole clipboard.
+     * @default [',', '\n']
+     */
+    delimiter?: string | string[];
+    /**
+     * What happens to typed but uncommitted draft text when `TagsInputInput`
+     * loses focus: `'keep'` leaves it in place, `'clear'` discards it, and
+     * `'commit'` adds it as a tag through the same ordered refusal rules a typed
+     * commit runs.
+     * @default 'keep'
      */
-    delimiter?: string;
+    blurBehavior?: 'keep' | 'clear' | 'commit';
+    /**
+     * Whether a committed tag can be edited in place rather than deleted and
+     * retyped. `Enter` on a focused tag opens its `TagsInputItemInput`, `Enter`
+     * commits the edit and `Escape` leaves the tag as it was.
+     * @default false
+     */
+    editable?: boolean;
     /**
      * Commit pasted text as tags (split on `delimiter`) instead of dropping it
      * into the draft field.
@@ -73,6 +158,17 @@ export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined — every non-empty, non-duplicate tag is accepted.
      */
     validate?: (tag: string, tags: string[]) => boolean;
+    /**
+     * Whether the same tag may appear more than once.
+     *
+     * The built-in rule is an exact match on the trimmed candidate, which is not
+     * everyone's idea of a duplicate — "React" and "react" are two tags here and
+     * one tag in most products. `validate` runs *before* it and a `true` return
+     * overrides it, so a caller can implement case-insensitive or normalised
+     * matching; set this when duplicates are simply allowed.
+     * @default false
+     */
+    allowDuplicates?: boolean;
     /**
      * Current draft text in `TagsInputInput`, for controlled usage. Pair with
      * `onInputValueChange`.
@@ -90,7 +186,43 @@ export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined — no-op.
      */
     onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Fires once for every candidate tag the field refuses, carrying the trimmed
+     * candidate and which rule refused it. A refused tag otherwise simply
+     * vanishes, so this is the only way an application can tell a rejected paste
+     * from an accepted one, or announce why nothing appeared.
+     * @default undefined — no-op.
+     */
+    onValueInvalid?: (detail: TagsInputInvalidDetail) => void;
+    /**
+     * Form field name. Every tag is submitted as its own entry under it — the
+     * shape a set of repeated same-named inputs produces — so
+     * `new FormData(form).getAll(name)` gives back the tags in order.
+     * @default undefined — the field submits nothing.
+     */
+    name?: string;
+    /**
+     * Marks the field required: `valueMissing` while there are no tags, reported
+     * through `checkValidity()`/`reportValidity()` on the ref. Only meaningful
+     * with `name`, since a field that submits nothing cannot be invalid.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Id of the `<form>` this field submits to, for a TagsInput rendered outside
+     * it — the native `form` attribute, set on every mirrored input.
+     * @default undefined — the enclosing `<form>`, if any.
+     */
+    form?: string;
 }
+/**
+ * What a `ref` on {@link TagsInput} gives you: the root `<div>` — still the
+ * node to focus, measure and `contains()` — with the constraint-validation
+ * methods assigned onto it, since a tags input has no native element of its
+ * own for them to be inherited from. Type the ref with it to reach them:
+ * `React.useRef<TagsInputHandle>(null)`.
+ */
+export type TagsInputHandle = HTMLDivElement & FormValidityHandle;
 /** Props for a single {@link TagsInputItem} — a rendered tag. */
 export interface TagsInputItemProps extends PrimitivePropsWithRef<'span'> {
     /** Position of this tag in the root's `value` array; passed through to `TagsInputItemDelete`. */
@@ -104,3 +236,14 @@ export interface TagsInputItemDeleteProps extends PrimitivePropsWithRef<'button'
 /** Props for {@link TagsInputInput}, the text field used to type and commit new tags. */
 export interface TagsInputInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
 }
+/**
+ * Props for {@link TagsInputItemInput}, the field a tag becomes while it is
+ * being edited.
+ */
+export interface TagsInputItemInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+    /** Position of the tag this editor edits, in the root's `value` array. */
+    index: number;
+}
+/** Props for {@link TagsInputClear}, the button that empties the whole tag list. */
+export interface TagsInputClearProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/tags-input/types.d.ts

@@ -1,5 +1,22 @@
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared state distributed from {@link TagsInput} to its parts via context. Not part of the public API. */
+/**
+ * Refusal detail: which validation rule rejected a candidate tag and the
+ * trimmed text that failed. Fired once per refused candidate via `onValueInvalid`.
+ */
+export interface TagsInputInvalidDetail {
+    /** The candidate, already trimmed — the same text that would have been committed. */
+    tag: string;
+    /**
+     * The rule that refused it, in the fixed order the contract's
+     * `validationBehavior` sets: `'empty'` (blank after trimming), `'max'` (the
+     * list is already full), `'validate'` (the consumer predicate returned
+     * `false`) and `'duplicate'` (the built-in rule `allowDuplicates` switches
+     * off).
+     */
+    reason: 'empty' | 'max' | 'validate' | 'duplicate';
+}
+/** @internal Context state distributed from TagsInput to its parts. */
 export interface TagsInputContextValue {
     value: string[];
     inputValue: string;
@@ -8,14 +25,63 @@ export interface TagsInputContextValue {
     invalid: boolean;
     readOnly: boolean;
     max?: number;
-    delimiter: string;
+    delimiter: string | string[];
     addOnPaste: boolean;
+    /** What an unfocused draft does with text the user typed but never committed. */
+    blurBehavior: 'keep' | 'clear' | 'commit';
+    /** Whether a committed tag may be opened for editing in a `TagsInputItemInput`. */
+    editable: boolean;
+    /**
+     * Which tag is currently open for editing, or `null`. Clamped against the tag
+     * count, so a tag removed while another was being edited cannot leave an
+     * editor open over an index that no longer exists.
+     */
+    editingIndex: number | null;
+    /** Opens (or, with `null`, closes) the editor over the tag at that index. */
+    setEditingIndex: (index: number | null) => void;
+    /**
+     * Writes `tag` back to the tag at `index`, through the same ordered refusal
+     * rules a new tag runs — minus `max`, which an edit cannot breach. The
+     * candidate is judged against the list *without* the edited tag in it, or
+     * re-committing a tag unchanged would be a duplicate of itself.
+     */
+    setTagAtIndex: (index: number, tag: string) => void;
+    /** Empties the whole list in one change. A no-op on an already-empty field. */
+    clearTags: () => void;
     addTag: (tag: string) => void;
     addTags: (tags: string[]) => void;
     removeTag: (index: number) => void;
+    /**
+     * Index of the tag currently owning the strip's single Tab stop. Clamped
+     * against the tag count, so removing the tag that held it never leaves the
+     * whole strip out of the tab order.
+     */
+    tabStopIndex: number;
+    /** Claims the Tab stop for the tag at `index` — called when one takes focus, and after a removal hands focus on. */
+    setActiveIndex: (index: number) => void;
 }
 /** Props for the {@link TagsInput} root. */
 export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    /**
+     * Placeholder for the derived draft field. Forwarded onto the `<input>`
+     * itself, never onto the root wrapper. Ignored when `children` is given,
+     * which switches to full manual composition.
+     * @default undefined — the draft field has no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Accessible name of the derived draft field, emitted as its `aria-label`.
+     * A placeholder is not a name, so this is what the field is announced as.
+     * Ignored when `children` is given.
+     * @default 'Add a tag'
+     */
+    inputLabel?: string;
+    /**
+     * Renders the derived `TagsInputClear` button, which empties the whole list in one
+     * press. Ignored when `children` is given.
+     * @default false
+     */
+    clearable?: boolean;
     /**
      * Current tags, for controlled usage. Pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own tag list internally.
@@ -55,11 +121,30 @@ export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      */
     max?: number;
     /**
-     * Character that commits the draft as a tag while typing, and that pasted
-     * text is split on.
-     * @default ','
+     * Characters that commit the draft as a tag while typing, and that pasted
+     * text is split on. Pasted text is split on every entry; the typed commit
+     * only ever fires for an entry that is a single character, since it is
+     * compared against a `KeyboardEvent.key`. The newline in the default is what
+     * makes a list pasted out of a spreadsheet or a textarea arrive as tags
+     * rather than as one tag holding the whole clipboard.
+     * @default [',', '\n']
+     */
+    delimiter?: string | string[];
+    /**
+     * What happens to typed but uncommitted draft text when `TagsInputInput`
+     * loses focus: `'keep'` leaves it in place, `'clear'` discards it, and
+     * `'commit'` adds it as a tag through the same ordered refusal rules a typed
+     * commit runs.
+     * @default 'keep'
      */
-    delimiter?: string;
+    blurBehavior?: 'keep' | 'clear' | 'commit';
+    /**
+     * Whether a committed tag can be edited in place rather than deleted and
+     * retyped. `Enter` on a focused tag opens its `TagsInputItemInput`, `Enter`
+     * commits the edit and `Escape` leaves the tag as it was.
+     * @default false
+     */
+    editable?: boolean;
     /**
      * Commit pasted text as tags (split on `delimiter`) instead of dropping it
      * into the draft field.
@@ -73,6 +158,17 @@ export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined — every non-empty, non-duplicate tag is accepted.
      */
     validate?: (tag: string, tags: string[]) => boolean;
+    /**
+     * Whether the same tag may appear more than once.
+     *
+     * The built-in rule is an exact match on the trimmed candidate, which is not
+     * everyone's idea of a duplicate — "React" and "react" are two tags here and
+     * one tag in most products. `validate` runs *before* it and a `true` return
+     * overrides it, so a caller can implement case-insensitive or normalised
+     * matching; set this when duplicates are simply allowed.
+     * @default false
+     */
+    allowDuplicates?: boolean;
     /**
      * Current draft text in `TagsInputInput`, for controlled usage. Pair with
      * `onInputValueChange`.
@@ -90,7 +186,43 @@ export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defa
      * @default undefined — no-op.
      */
     onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Fires once for every candidate tag the field refuses, carrying the trimmed
+     * candidate and which rule refused it. A refused tag otherwise simply
+     * vanishes, so this is the only way an application can tell a rejected paste
+     * from an accepted one, or announce why nothing appeared.
+     * @default undefined — no-op.
+     */
+    onValueInvalid?: (detail: TagsInputInvalidDetail) => void;
+    /**
+     * Form field name. Every tag is submitted as its own entry under it — the
+     * shape a set of repeated same-named inputs produces — so
+     * `new FormData(form).getAll(name)` gives back the tags in order.
+     * @default undefined — the field submits nothing.
+     */
+    name?: string;
+    /**
+     * Marks the field required: `valueMissing` while there are no tags, reported
+     * through `checkValidity()`/`reportValidity()` on the ref. Only meaningful
+     * with `name`, since a field that submits nothing cannot be invalid.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Id of the `<form>` this field submits to, for a TagsInput rendered outside
+     * it — the native `form` attribute, set on every mirrored input.
+     * @default undefined — the enclosing `<form>`, if any.
+     */
+    form?: string;
 }
+/**
+ * What a `ref` on {@link TagsInput} gives you: the root `<div>` — still the
+ * node to focus, measure and `contains()` — with the constraint-validation
+ * methods assigned onto it, since a tags input has no native element of its
+ * own for them to be inherited from. Type the ref with it to reach them:
+ * `React.useRef<TagsInputHandle>(null)`.
+ */
+export type TagsInputHandle = HTMLDivElement & FormValidityHandle;
 /** Props for a single {@link TagsInputItem} — a rendered tag. */
 export interface TagsInputItemProps extends PrimitivePropsWithRef<'span'> {
     /** Position of this tag in the root's `value` array; passed through to `TagsInputItemDelete`. */
@@ -104,3 +236,14 @@ export interface TagsInputItemDeleteProps extends PrimitivePropsWithRef<'button'
 /** Props for {@link TagsInputInput}, the text field used to type and commit new tags. */
 export interface TagsInputInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
 }
+/**
+ * Props for {@link TagsInputItemInput}, the field a tag becomes while it is
+ * being edited.
+ */
+export interface TagsInputItemInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+    /** Position of the tag this editor edits, in the root's `value` array. */
+    index: number;
+}
+/** Props for {@link TagsInputClear}, the button that empties the whole tag list. */
+export interface TagsInputClearProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/text/Text.cjs

@@ -0,0 +1 @@
+"use strict";var n=Object.create;var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var r in e)m(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of P(e))!l.call(t,o)&&o!==r&&m(t,o,{get:()=>e[o],enumerable:!(p=y(e,o))||p.enumerable});return t};var R=(t,e,r)=>(r=t!=null?n(c(t)):{},a(e||!t||!t.__esModule?m(r,"default",{value:t,enumerable:!0}):r,t)),v=t=>a(m({},"__esModule",{value:!0}),t);var E={};d(E,{Text:()=>s});module.exports=v(E);var f=R(require("react"),1),i=require("../utils/part.cjs"),x=require("../utils/primitive.cjs"),T=require("react/jsx-runtime"),s=f.forwardRef(({as:t="span",...e},r)=>{let p=x.Primitive[t];return(0,T.jsx)(p,{...e,...(0,i.skdxPart)("text","root",e.className),ref:r})});s.displayName="Text";0&&(module.exports={Text});

package/dist/text/Text.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { TextProps } from './types.cjs';
+/**
+ * A typographic primitive: one element with `.skdx-text`, tag chosen via `as`.
+ *
+ * Tone, weight, and scale are **attributes**, not props — `data-tone`,
+ * `data-variant`, `data-size` — because they're skin concerns and independent.
+ * `data-variant="numeric"` aligns tabular figures; `mono` is the monospace variant.
+ *
+ * @example
+ * ```tsx
+ * <Text as="p" data-tone="muted">Last synced 3 minutes ago</Text>
+ * <Text data-variant="numeric">1,284</Text>
+ * <Text as="code" data-variant="mono">--skdx-color-text-muted</Text>
+ * ```
+ */
+export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/text/Text.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { TextProps } from './types.js';
+/**
+ * A typographic primitive: one element with `.skdx-text`, tag chosen via `as`.
+ *
+ * Tone, weight, and scale are **attributes**, not props — `data-tone`,
+ * `data-variant`, `data-size` — because they're skin concerns and independent.
+ * `data-variant="numeric"` aligns tabular figures; `mono` is the monospace variant.
+ *
+ * @example
+ * ```tsx
+ * <Text as="p" data-tone="muted">Last synced 3 minutes ago</Text>
+ * <Text data-variant="numeric">1,284</Text>
+ * <Text as="code" data-variant="mono">--skdx-color-text-muted</Text>
+ * ```
+ */
+export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/text/Text.js

@@ -0,0 +1 @@
+import*as e from"react";import{skdxPart as s}from"../utils/part.js";import{Primitive as a}from"../utils/primitive.js";import{jsx as f}from"react/jsx-runtime";var r=e.forwardRef(({as:o="span",...t},p)=>{let m=a[o];return f(m,{...t,...s("text","root",t.className),ref:p})});r.displayName="Text";export{r as Text};

package/dist/text/index.d.cts

@@ -0,0 +1,2 @@
+export { Text } from './Text.cjs';
+export type { TextProps } from './types.cjs';

package/dist/text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text.js';
+export type { TextProps } from './types.js';

package/dist/text/types.d.cts

@@ -0,0 +1,11 @@
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for {@link Text}, the typographic primitive. */
+export interface TextProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element name to render, from the library's tag allowlist. The tag *is* the
+     * semantics — `<p>` for a paragraph, `<code>` for a code span, `<strong>` for
+     * importance — and this component supplies none of its own.
+     * @default 'span'
+     */
+    as?: PolymorphicTag;
+}

package/dist/text/types.d.ts

@@ -0,0 +1,11 @@
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for {@link Text}, the typographic primitive. */
+export interface TextProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element name to render, from the library's tag allowlist. The tag *is* the
+     * semantics — `<p>` for a paragraph, `<code>` for a code span, `<strong>` for
+     * importance — and this component supplies none of its own.
+     * @default 'span'
+     */
+    as?: PolymorphicTag;
+}

package/dist/text-field/TextField.cjs

@@ -1 +1 @@
-"use strict";var K=Object.create;var d=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(t,e)=>{for(var i in e)d(t,i,{get:e[i],enumerable:!0})},C=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Q(e))!W.call(t,r)&&r!==i&&d(t,r,{get:()=>e[r],enumerable:!(o=O(e,r))||o.enumerable});return t};var n=(t,e,i)=>(i=t!=null?K(U(t)):{},C(e||!t||!t.__esModule?d(i,"default",{value:t,enumerable:!0}):i,t)),Y=t=>C(d({},"__esModule",{value:!0}),t);var Z={};X(Z,{TextField:()=>k,TextFieldClearButton:()=>v,TextFieldInput:()=>c,TextFieldProvider:()=>S,TextFieldSlot:()=>F,useTextFieldContext:()=>a});module.exports=Y(Z);var l=n(require("react"),1),y=require("../utils/createContext.cjs"),s=require("../utils/formControl.cjs"),I=require("../utils/part.cjs"),b=require("../utils/primitive.cjs"),H=require("../utils/useControllableState.cjs"),T=require("react/jsx-runtime"),[S,a]=(0,y.createSafeContext)("TextField"),k=l.forwardRef(({disabled:t=!1,invalid:e=!1,required:i=!1,value:o,defaultValue:r,onValueChange:u,name:z,...f},A)=>{let G=l.useId(),R=l.useRef(null),x=l.useRef(null),[J="",P]=(0,H.useControllableState)({prop:o,defaultProp:r??"",onChange:u});return(0,s.useFormValidityHandle)(A,R,x),(0,s.useFormReset)(x,()=>P(r??"")),(0,T.jsx)(S,{inputId:G,disabled:t,invalid:e,required:i,value:J,setValue:P,name:z,inputRef:x,children:(0,T.jsx)(b.Primitive.div,{"data-disabled":t?"":void 0,"data-invalid":e?"":void 0,...f,...(0,I.skdxPart)("text-field","root",f.className,f["data-skdx-component"]),ref:R})})});k.displayName="TextField";var B=n(require("react"),1),E=require("../utils/composeRefs.cjs"),N=require("../utils/part.cjs"),p=require("../utils/primitive.cjs");var g=require("react/jsx-runtime"),c=B.forwardRef(({type:t="text",...e},i)=>{let o=a("TextFieldInput"),r=(0,E.useComposedRefs)(i,o.inputRef);return(0,g.jsx)(p.Primitive.input,{id:o.inputId,type:t,name:o.name,disabled:o.disabled,required:o.required,"aria-invalid":o.invalid||void 0,"data-disabled":o.disabled?"":void 0,"data-invalid":o.invalid?"":void 0,value:o.value,...e,...(0,N.skdxPart)("text-field","input",e.className),ref:r,onChange:(0,p.composeEventHandlers)(e.onChange,u=>{o.setValue(u.target.value)})})});c.displayName="TextFieldInput";var V=n(require("react"),1),L=require("../utils/part.cjs"),M=require("../utils/primitive.cjs"),h=require("react/jsx-runtime"),F=V.forwardRef(({side:t="start",...e},i)=>(0,h.jsx)(M.Primitive.span,{"data-side":t,...e,...(0,L.skdxPart)("text-field","slot",e.className),ref:i}));F.displayName="TextFieldSlot";var w=n(require("react"),1),q=require("../utils/part.cjs"),m=require("../utils/primitive.cjs");var D=require("react/jsx-runtime"),v=w.forwardRef(({forceMount:t,...e},i)=>{let o=a("TextFieldClearButton"),r=o.value!=="";return t||r?(0,D.jsx)(m.Primitive.button,{type:"button","aria-label":"Clear",...e,...(0,q.skdxPart)("text-field","clear-button",e.className),ref:i,onClick:(0,m.composeEventHandlers)(e.onClick,()=>{o.inputRef.current?.focus(),o.setValue("")})}):null});v.displayName="TextFieldClearButton";0&&(module.exports={TextField,TextFieldClearButton,TextFieldInput,TextFieldProvider,TextFieldSlot,useTextFieldContext});
+"use strict";var j=Object.create;var f=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var le=(e,t)=>{for(var o in t)f(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of te(t))!re.call(e,l)&&l!==o&&f(e,l,{get:()=>t[l],enumerable:!(r=ee(t,l))||r.enumerable});return e};var u=(e,t,o)=>(o=e!=null?j(oe(e)):{},g(t||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e)),ae=e=>g(f({},"__esModule",{value:!0}),e);var ie={};le(ie,{TextField:()=>y,TextFieldClearButton:()=>c,TextFieldInput:()=>F,TextFieldProvider:()=>z,TextFieldSlot:()=>m,useTextFieldContext:()=>s});module.exports=ae(ie);var n=u(require("react"),1),q=require("../utils/createContext.cjs"),d=require("../utils/formControl.cjs"),O=require("../utils/part.cjs"),A=require("../utils/primitive.cjs"),D=require("../utils/useControllableState.cjs");var I=u(require("react"),1),S=require("../utils/part.cjs"),x=require("../utils/primitive.cjs");var h=require("react/jsx-runtime"),c=I.forwardRef(({forceMount:e,label:t="Clear",...o},r)=>{let l=s("TextFieldClearButton"),i=l.value!=="";return e||i?(0,h.jsx)(x.Primitive.button,{type:"button","aria-label":t,...o,...(0,S.skdxPart)("text-field","clear-button",o.className),ref:r,onClick:(0,x.composeEventHandlers)(o.onClick,()=>{l.inputRef.current?.focus(),l.setValue("")})}):null});c.displayName="TextFieldClearButton";var H=u(require("react"),1),N=require("../utils/composeRefs.cjs"),V=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");var k=require("react/jsx-runtime"),F=H.forwardRef(({type:e="text",...t},o)=>{let r=s("TextFieldInput"),l=(0,N.useComposedRefs)(o,r.inputRef);return(0,k.jsx)(T.Primitive.input,{id:r.inputId,type:e,name:r.name,form:r.form,disabled:r.disabled,required:r.required,"aria-invalid":r.invalid||void 0,"data-disabled":r.disabled?"":void 0,"data-invalid":r.invalid?"":void 0,value:r.value,...t,...(0,V.skdxPart)("text-field","input",t.className),ref:l,onChange:(0,T.composeEventHandlers)(t.onChange,i=>{r.setValue(i.target.value)})})});F.displayName="TextFieldInput";var B=u(require("react"),1),E=require("../utils/part.cjs"),L=require("../utils/primitive.cjs"),w=require("react/jsx-runtime"),m=B.forwardRef(({side:e="start",...t},o)=>(0,w.jsx)(L.Primitive.span,{"data-side":e,...t,...(0,E.skdxPart)("text-field","slot",t.className),ref:o}));m.displayName="TextFieldSlot";var a=require("react/jsx-runtime");function M({clearable:e,clearLabel:t,leading:o,trailing:r,placeholder:l,readOnly:i}){return(0,a.jsxs)(a.Fragment,{children:[o?(0,a.jsx)(m,{side:"start",children:o}):null,(0,a.jsx)(F,{placeholder:l,readOnly:i}),e?(0,a.jsx)(c,{label:t}):null,r?(0,a.jsx)(m,{side:"end",children:r}):null]})}var R=require("react/jsx-runtime"),[z,s]=(0,q.createSafeContext)("TextField"),y=n.forwardRef(({disabled:e=!1,invalid:t=!1,required:o=!1,value:r,defaultValue:l,onValueChange:i,name:G,form:P,clearable:J=!1,clearLabel:K,leading:Q,trailing:U,placeholder:W,readOnly:X=!1,children:Y,...v},Z)=>{let _=n.useId(),C=n.useRef(null),p=n.useRef(null),[$="",b]=(0,D.useControllableState)({prop:r,defaultProp:l??"",onChange:i});return(0,d.useFormValidityHandle)(Z,C,p,(0,d.formValidityStateView)(p)),(0,d.useFormReset)(p,()=>b(l??""),P),(0,R.jsx)(z,{inputId:_,disabled:e,invalid:t,required:o,value:$,setValue:b,name:G,form:P,inputRef:p,children:(0,R.jsx)(A.Primitive.div,{"data-disabled":e?"":void 0,"data-invalid":t?"":void 0,...v,...(0,O.skdxPart)("text-field","root",v.className,v["data-skdx-component"]),ref:C,children:Y??(0,R.jsx)(M,{clearable:J,clearLabel:K,leading:Q,trailing:U,placeholder:W,readOnly:X})})})});y.displayName="TextField";0&&(module.exports={TextField,TextFieldClearButton,TextFieldInput,TextFieldProvider,TextFieldSlot,useTextFieldContext});