@skdx/react 0.27.0 → 0.29.0

package/dist/field/fieldControlId.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/** What {@link withFieldControlId} resolved for one render. */
+export interface FieldControlIdResult {
+    /** The children to render, with the generated id cloned onto the control when one was found. */
+    children: React.ReactNode;
+    /** The id the control carries in this render's markup, or `undefined` when none was recognisable. */
+    controlId: string | undefined;
+}
+/**
+ * Finds the Field's control in `children` and gives it `generatedId`, so the
+ * `for`/`id` pair exists in server markup instead of appearing only after
+ * hydration.
+ *
+ * @param children the Field's children, exactly as passed
+ * @param generatedId the Field's own generated control id
+ */
+export declare function withFieldControlId(children: React.ReactNode, generatedId: string): FieldControlIdResult;

package/dist/field/index.d.cts

@@ -1,7 +1,3 @@
 export { Field, Fieldset } from './Field.cjs';
-export { FieldLabel } from './FieldLabel.cjs';
-export { FieldDescription } from './FieldDescription.cjs';
-export { FieldError } from './FieldError.cjs';
-export { FieldCharacterCount } from './FieldCharacterCount.cjs';
-export type { FieldProps, FieldsetProps, FieldLabelProps, FieldDescriptionProps, FieldErrorProps, FieldCharacterCountProps, FieldOwnProps, FieldValidityDetail, FieldMode, FieldValidator, FieldValidationResult, FieldCharacterCountOptions, } from './types.cjs';
-export { CHARACTER_COUNT_ANNOUNCE_DELAY_MS, characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_CONTROL_ATTRIBUTE, FIELD_CONTROL_SELECTOR, FIELD_VALIDITY_CHANGE_EVENT, NATIVE_INVALID_FALLBACK_MESSAGE, findFieldControl, type FieldSnapshot, collectFieldErrors, errorSummaryScope, focusFieldTarget, type FieldErrorEntry, } from './fieldCore.cjs';
+export type { FieldProps, FieldsetProps, FieldsetHandle, FieldOwnProps, FieldValidityDetail, FieldValidateHandle, FieldHandle, FieldMode, FieldValidator, FieldValidationResult, } from './types.cjs';
+export { CHARACTER_COUNT_ANNOUNCE_DELAY_MS, characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_REQUIRED_INDICATOR_ATTRIBUTE, FIELD_CONTROL_ATTRIBUTE, FIELD_CONTROL_SELECTOR, FIELD_VALIDITY_CHANGE_EVENT, NATIVE_INVALID_FALLBACK_MESSAGE, findFieldControl, type FieldSnapshot, collectFieldErrors, ERROR_SUMMARY_RESCAN_EVENTS, errorSummaryScope, FORM_FIELD_ATTRIBUTE, FORM_MESSAGE_ATTRIBUTE, FIELD_NAME_ATTRIBUTE, focusFieldTarget, type FieldErrorEntry, resetFields, validateFields, } from '../utils/field-core.cjs';

package/dist/field/index.d.ts

@@ -1,7 +1,3 @@
 export { Field, Fieldset } from './Field.js';
-export { FieldLabel } from './FieldLabel.js';
-export { FieldDescription } from './FieldDescription.js';
-export { FieldError } from './FieldError.js';
-export { FieldCharacterCount } from './FieldCharacterCount.js';
-export type { FieldProps, FieldsetProps, FieldLabelProps, FieldDescriptionProps, FieldErrorProps, FieldCharacterCountProps, FieldOwnProps, FieldValidityDetail, FieldMode, FieldValidator, FieldValidationResult, FieldCharacterCountOptions, } from './types.js';
-export { CHARACTER_COUNT_ANNOUNCE_DELAY_MS, characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_CONTROL_ATTRIBUTE, FIELD_CONTROL_SELECTOR, FIELD_VALIDITY_CHANGE_EVENT, NATIVE_INVALID_FALLBACK_MESSAGE, findFieldControl, type FieldSnapshot, collectFieldErrors, errorSummaryScope, focusFieldTarget, type FieldErrorEntry, } from './fieldCore.js';
+export type { FieldProps, FieldsetProps, FieldsetHandle, FieldOwnProps, FieldValidityDetail, FieldValidateHandle, FieldHandle, FieldMode, FieldValidator, FieldValidationResult, } from './types.js';
+export { CHARACTER_COUNT_ANNOUNCE_DELAY_MS, characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_REQUIRED_INDICATOR_ATTRIBUTE, FIELD_CONTROL_ATTRIBUTE, FIELD_CONTROL_SELECTOR, FIELD_VALIDITY_CHANGE_EVENT, NATIVE_INVALID_FALLBACK_MESSAGE, findFieldControl, type FieldSnapshot, collectFieldErrors, ERROR_SUMMARY_RESCAN_EVENTS, errorSummaryScope, FORM_FIELD_ATTRIBUTE, FORM_MESSAGE_ATTRIBUTE, FIELD_NAME_ATTRIBUTE, focusFieldTarget, type FieldErrorEntry, resetFields, validateFields, } from '../utils/field-core.js';

package/dist/field/primitives.d.cts

@@ -0,0 +1,26 @@
+/**
+ * Primitives for `Field` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { FieldRoot, FieldLabel, FieldRequiredIndicator, FieldDescription, FieldCharacterCount, FieldError } from '@skdx/react/primitives/field';
+ *
+ * <FieldRoot>
+ *   <FieldLabel>
+ *     Why are you applying?
+ *     <FieldRequiredIndicator>(required)</FieldRequiredIndicator>
+ *   </FieldLabel>
+ *   <Textarea />
+ *   <FieldDescription>Keep it under 200 characters.</FieldDescription>
+ *   <FieldCharacterCount maxLength={200} threshold={75} />
+ *   <FieldError />
+ * </FieldRoot>
+ * ```
+ */
+export { FieldRoot, Fieldset } from './Field.cjs';
+export { FieldLabel } from './FieldLabel.cjs';
+export { FieldRequiredIndicator } from './FieldRequiredIndicator.cjs';
+export { FieldDescription } from './FieldDescription.cjs';
+export { FieldError } from './FieldError.cjs';
+export { FieldCharacterCount } from './FieldCharacterCount.cjs';
+export type { FieldRootProps, FieldsetProps, FieldsetHandle, FieldLabelProps, FieldRequiredIndicatorProps, FieldDescriptionProps, FieldErrorProps, FieldCharacterCountProps, FieldCharacterCountOptions, } from './types.cjs';

package/dist/field/primitives.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Primitives for `Field` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { FieldRoot, FieldLabel, FieldRequiredIndicator, FieldDescription, FieldCharacterCount, FieldError } from '@skdx/react/primitives/field';
+ *
+ * <FieldRoot>
+ *   <FieldLabel>
+ *     Why are you applying?
+ *     <FieldRequiredIndicator>(required)</FieldRequiredIndicator>
+ *   </FieldLabel>
+ *   <Textarea />
+ *   <FieldDescription>Keep it under 200 characters.</FieldDescription>
+ *   <FieldCharacterCount maxLength={200} threshold={75} />
+ *   <FieldError />
+ * </FieldRoot>
+ * ```
+ */
+export { FieldRoot, Fieldset } from './Field.js';
+export { FieldLabel } from './FieldLabel.js';
+export { FieldRequiredIndicator } from './FieldRequiredIndicator.js';
+export { FieldDescription } from './FieldDescription.js';
+export { FieldError } from './FieldError.js';
+export { FieldCharacterCount } from './FieldCharacterCount.js';
+export type { FieldRootProps, FieldsetProps, FieldsetHandle, FieldLabelProps, FieldRequiredIndicatorProps, FieldDescriptionProps, FieldErrorProps, FieldCharacterCountProps, FieldCharacterCountOptions, } from './types.js';

package/dist/field/types.d.cts

@@ -1,107 +1,151 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-import type { FieldCharacterCountOptions, FieldMode, FieldSnapshot, FieldValidator } from './fieldCore.cjs';
-export type { FieldCharacterCountOptions, FieldMode, FieldValidationResult, FieldValidator, } from './fieldCore.cjs';
+import type * as React from 'react';
+import type { FieldCharacterCountOptions, FieldMode, FieldSnapshot, FieldValidator } from '../utils/field-core.cjs';
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.cjs';
+export type { FieldCharacterCountOptions, FieldMode, FieldValidationResult, FieldValidator, } from '../utils/field-core.cjs';
 /** The state a `Field` reports through {@link FieldOwnProps.onValidityChange}. */
 export type FieldValidityDetail = Omit<FieldSnapshot, 'controlId'>;
+/** Imperative Field contract for programmatic validation and reset. */
+export interface FieldValidateHandle {
+    /** Runs validation now, covering server errors, custom validation, native constraints, and character count. */
+    checkValidity(): Promise<boolean>;
+    /** Clears messages and touched/dirty state, and re-derives filled/count from the control. */
+    reset(): void;
+}
+/** What {@link Field}'s forwarded ref carries: the root `<div>` plus the validate handle's methods. */
+export type FieldHandle = HTMLDivElement & FieldValidateHandle;
+/** What {@link Fieldset}'s forwarded ref carries: the `<fieldset>` plus the validate handle's methods. */
+export type FieldsetHandle = FieldValidateHandle & HTMLFieldSetElement;
 /** The validation-model props shared by {@link FieldProps} and {@link FieldsetProps}. */
 export interface FieldOwnProps {
     /**
-     * Validator for this field, returning one message, several, or
-     * `null`/`undefined` when the value is acceptable. May be async; a
-     * resolution from a superseded run is discarded.
+     * Validator for this field; may be async, returning a message (or none) for the current value.
      * @default undefined — only the `errors` prop and native constraint validation produce messages.
      */
-    validate?: FieldValidator;
+    validate?: FieldValidator | undefined;
     /**
-     * When validation first runs. Whatever the mode, a field that has already
-     * failed re-validates on every input, so the error clears as soon as the
-     * user fixes it.
+     * When validation first runs; a field that has already failed re-validates on every input.
      * @default 'blur'
      */
-    mode?: FieldMode;
+    mode?: FieldMode | undefined;
     /**
-     * Server-injected errors, always shown, listed before anything `validate`
-     * produces. Clearing the prop clears them.
+     * Server-injected errors, always shown and listed before anything `validate` produces.
      * @default undefined
      */
-    errors?: string | string[];
+    errors?: string | string[] | undefined;
     /**
-     * Value handed to `validate`. Omit and the Field reads the wrapped
-     * control's `checked` (checkbox/radio) or `value` property instead.
+     * Value handed to `validate`; omitted, the Field reads the wrapped control's `checked`/`value` instead.
      * @default undefined — read from the control.
      */
     value?: unknown;
     /**
-     * Field name, used as the `FormErrorSummary` link text when the field
-     * renders no `FieldError` of its own.
+     * Field name, used as the `FormErrorSummary` link text when no `FieldError` is rendered.
      * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
+    /**
+     * Whether an answer is mandatory, reflected as native `required` or `aria-required="true"` on the control.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the field is unavailable, applied as native `disabled` or `aria-disabled="true"` and mirrored as `data-disabled`.
+     * @default false
+     */
+    disabled?: boolean | undefined;
     /**
      * Fires whenever the field's validity or interaction state changes.
      * @default undefined
      */
-    onValidityChange?: (detail: FieldValidityDetail) => void;
+    onValidityChange?: ((detail: FieldValidityDetail) => void) | undefined;
     /**
-     * Words every piece of character-count copy this Field produces: the text
-     * `FieldCharacterCount` renders, the message announced a typing pause after
-     * the last keystroke, and the error raised once the value passes the soft
-     * limit. A negative `remaining` means over the limit.
-     *
-     * One prop for all three deliberately — the announced count and the rendered
-     * count saying different things is worse than either being in English.
-     * @default undefined — the built-in GOV.UK wording ("You have 12 characters remaining").
+     * Words all character-count copy: rendered text, announced message, and over-limit error.
+     * @default undefined
      */
-    getCharacterCountMessage?: (remaining: number) => string;
+    getCharacterCountMessage?: ((remaining: number) => string) | undefined;
     /**
-     * What the Field says when the wrapped control fails *native* constraint
-     * validation but the browser reports no message of its own. The browser's
-     * own messages are already localized; this fallback is the one the library
-     * supplies, so it is the one that needs translating.
+     * Message shown when the control fails native constraint validation with no message of its own.
      * @default undefined — 'This field is invalid.'
      */
-    invalidMessage?: string;
+    invalidMessage?: string | undefined;
+    /**
+     * Milliseconds `mode="change"` waits after the last keystroke before validating; a blur runs it immediately.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number | undefined;
+    /**
+     * Spacing rung the skin packs the field by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'compact' | (string & {}) | undefined;
 }
-/** Props for {@link Field}, which wires one control to its label, description, and error text. */
-export interface FieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'value'>, FieldOwnProps {
+/** Props for {@link FieldRoot}: {@link FieldProps} minus the derived-anatomy-only props. */
+export type FieldRootProps = Omit<FieldProps, 'label' | 'description'> & Pick<PrimitivePropsWithRef<'div'>, 'asChild'>;
+/** Props for {@link Field}, which wires one control to its label, description and error text. */
+export interface FieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'value' | 'asChild'>, FieldOwnProps {
+    /**
+     * The control's label, rendered into a derived `FieldLabel` whose `htmlFor` points at the found control.
+     * @default undefined — no label is rendered, and the control is unnamed.
+     */
+    label?: React.ReactNode | undefined;
+    /**
+     * Help text, rendered into a derived `FieldDescription` joined to the control's `aria-describedby`.
+     * @default undefined — no description is rendered.
+     */
+    description?: React.ReactNode | undefined;
 }
-/** Props for {@link Fieldset}, a {@link Field} that groups several controls under a `<legend>`. */
+/** Props for {@link Fieldset}, a {@link FieldRoot} that groups several controls under a `<legend>`. */
 export interface FieldsetProps extends Omit<PrimitivePropsWithRef<'fieldset'>, 'value' | 'name'>, FieldOwnProps {
 }
 /** Props for {@link FieldLabel}, which renders a `<label>` — or a `<legend>` inside a {@link Fieldset}. */
 export interface FieldLabelProps extends PrimitivePropsWithRef<'label'> {
 }
+/** Props for {@link FieldRequiredIndicator}, the "this one is mandatory" marker inside a {@link FieldLabel}. */
+export interface FieldRequiredIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Overrides the default `*` marker; rendered inside the accessible name, so words read better than a symbol.
+     * @default undefined — renders `*`.
+     */
+    children?: React.ReactNode | undefined;
+}
 /** Props for {@link FieldDescription}, help text announced with the control. */
 export interface FieldDescriptionProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element tag to render instead of the default, from the library's allowlist of tags.
+     * @default 'span'
+     */
+    as?: PolymorphicTag | undefined;
 }
 /** Props for {@link FieldError}, rendered only while the field is invalid. */
 export interface FieldErrorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element tag to render instead of the default, from the library's allowlist of tags.
+     * @default 'span'
+     */
+    as?: PolymorphicTag | undefined;
 }
 /** Props for {@link FieldCharacterCount}, the running "N characters remaining" count. */
 export interface FieldCharacterCountProps extends PrimitivePropsWithRef<'span'> {
-    /**
-     * The soft limit. Deliberately not the control's native `maxlength`, which
-     * silently truncates instead of telling the user they went over.
-     */
+    /** The soft limit; not the control's native `maxlength`, which truncates instead of warning. */
     maxLength: number;
     /**
-     * Percentage of `maxLength` that must be typed before the count appears at
-     * all — GOV.UK's way of keeping a long field quiet until it matters.
+     * Percentage of `maxLength` typed before the count appears.
      * @default 0 — visible from the first render.
      */
-    threshold?: number;
+    threshold?: number | undefined;
 }
-/** @internal Field identity and state distributed to the Label/Description/Error parts. Not part of the public API. */
+/** @internal Field identity and state distributed to the Label/Description/Error parts. */
 export interface FieldContextValue {
     labelId: string;
     descriptionId: string;
     errorId: string;
-    /** The id the control actually carries — `undefined` until the Field has connected to one, which no server render ever does. */
-    controlId?: string;
+    /** The id the control actually carries; `undefined` until the Field has connected to one. */
+    controlId?: string | undefined;
     errors: string[];
     grouped: boolean;
+    /** Whether the Field is required, so `FieldRequiredIndicator` knows whether to render at all. */
+    required: boolean;
     count: number;
     setCharacterCount: (options: FieldCharacterCountOptions | null) => void;
     /** The root's `getCharacterCountMessage`, so the rendered count uses the same wording as the announced one. */
-    getCharacterCountMessage?: (remaining: number) => string;
+    getCharacterCountMessage?: ((remaining: number) => string) | undefined;
 }

package/dist/field/types.d.ts

@@ -1,107 +1,151 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-import type { FieldCharacterCountOptions, FieldMode, FieldSnapshot, FieldValidator } from './fieldCore.js';
-export type { FieldCharacterCountOptions, FieldMode, FieldValidationResult, FieldValidator, } from './fieldCore.js';
+import type * as React from 'react';
+import type { FieldCharacterCountOptions, FieldMode, FieldSnapshot, FieldValidator } from '../utils/field-core.js';
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js';
+export type { FieldCharacterCountOptions, FieldMode, FieldValidationResult, FieldValidator, } from '../utils/field-core.js';
 /** The state a `Field` reports through {@link FieldOwnProps.onValidityChange}. */
 export type FieldValidityDetail = Omit<FieldSnapshot, 'controlId'>;
+/** Imperative Field contract for programmatic validation and reset. */
+export interface FieldValidateHandle {
+    /** Runs validation now, covering server errors, custom validation, native constraints, and character count. */
+    checkValidity(): Promise<boolean>;
+    /** Clears messages and touched/dirty state, and re-derives filled/count from the control. */
+    reset(): void;
+}
+/** What {@link Field}'s forwarded ref carries: the root `<div>` plus the validate handle's methods. */
+export type FieldHandle = HTMLDivElement & FieldValidateHandle;
+/** What {@link Fieldset}'s forwarded ref carries: the `<fieldset>` plus the validate handle's methods. */
+export type FieldsetHandle = FieldValidateHandle & HTMLFieldSetElement;
 /** The validation-model props shared by {@link FieldProps} and {@link FieldsetProps}. */
 export interface FieldOwnProps {
     /**
-     * Validator for this field, returning one message, several, or
-     * `null`/`undefined` when the value is acceptable. May be async; a
-     * resolution from a superseded run is discarded.
+     * Validator for this field; may be async, returning a message (or none) for the current value.
      * @default undefined — only the `errors` prop and native constraint validation produce messages.
      */
-    validate?: FieldValidator;
+    validate?: FieldValidator | undefined;
     /**
-     * When validation first runs. Whatever the mode, a field that has already
-     * failed re-validates on every input, so the error clears as soon as the
-     * user fixes it.
+     * When validation first runs; a field that has already failed re-validates on every input.
      * @default 'blur'
      */
-    mode?: FieldMode;
+    mode?: FieldMode | undefined;
     /**
-     * Server-injected errors, always shown, listed before anything `validate`
-     * produces. Clearing the prop clears them.
+     * Server-injected errors, always shown and listed before anything `validate` produces.
      * @default undefined
      */
-    errors?: string | string[];
+    errors?: string | string[] | undefined;
     /**
-     * Value handed to `validate`. Omit and the Field reads the wrapped
-     * control's `checked` (checkbox/radio) or `value` property instead.
+     * Value handed to `validate`; omitted, the Field reads the wrapped control's `checked`/`value` instead.
      * @default undefined — read from the control.
      */
     value?: unknown;
     /**
-     * Field name, used as the `FormErrorSummary` link text when the field
-     * renders no `FieldError` of its own.
+     * Field name, used as the `FormErrorSummary` link text when no `FieldError` is rendered.
      * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
+    /**
+     * Whether an answer is mandatory, reflected as native `required` or `aria-required="true"` on the control.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the field is unavailable, applied as native `disabled` or `aria-disabled="true"` and mirrored as `data-disabled`.
+     * @default false
+     */
+    disabled?: boolean | undefined;
     /**
      * Fires whenever the field's validity or interaction state changes.
      * @default undefined
      */
-    onValidityChange?: (detail: FieldValidityDetail) => void;
+    onValidityChange?: ((detail: FieldValidityDetail) => void) | undefined;
     /**
-     * Words every piece of character-count copy this Field produces: the text
-     * `FieldCharacterCount` renders, the message announced a typing pause after
-     * the last keystroke, and the error raised once the value passes the soft
-     * limit. A negative `remaining` means over the limit.
-     *
-     * One prop for all three deliberately — the announced count and the rendered
-     * count saying different things is worse than either being in English.
-     * @default undefined — the built-in GOV.UK wording ("You have 12 characters remaining").
+     * Words all character-count copy: rendered text, announced message, and over-limit error.
+     * @default undefined
      */
-    getCharacterCountMessage?: (remaining: number) => string;
+    getCharacterCountMessage?: ((remaining: number) => string) | undefined;
     /**
-     * What the Field says when the wrapped control fails *native* constraint
-     * validation but the browser reports no message of its own. The browser's
-     * own messages are already localized; this fallback is the one the library
-     * supplies, so it is the one that needs translating.
+     * Message shown when the control fails native constraint validation with no message of its own.
      * @default undefined — 'This field is invalid.'
      */
-    invalidMessage?: string;
+    invalidMessage?: string | undefined;
+    /**
+     * Milliseconds `mode="change"` waits after the last keystroke before validating; a blur runs it immediately.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number | undefined;
+    /**
+     * Spacing rung the skin packs the field by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'compact' | (string & {}) | undefined;
 }
-/** Props for {@link Field}, which wires one control to its label, description, and error text. */
-export interface FieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'value'>, FieldOwnProps {
+/** Props for {@link FieldRoot}: {@link FieldProps} minus the derived-anatomy-only props. */
+export type FieldRootProps = Omit<FieldProps, 'label' | 'description'> & Pick<PrimitivePropsWithRef<'div'>, 'asChild'>;
+/** Props for {@link Field}, which wires one control to its label, description and error text. */
+export interface FieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'value' | 'asChild'>, FieldOwnProps {
+    /**
+     * The control's label, rendered into a derived `FieldLabel` whose `htmlFor` points at the found control.
+     * @default undefined — no label is rendered, and the control is unnamed.
+     */
+    label?: React.ReactNode | undefined;
+    /**
+     * Help text, rendered into a derived `FieldDescription` joined to the control's `aria-describedby`.
+     * @default undefined — no description is rendered.
+     */
+    description?: React.ReactNode | undefined;
 }
-/** Props for {@link Fieldset}, a {@link Field} that groups several controls under a `<legend>`. */
+/** Props for {@link Fieldset}, a {@link FieldRoot} that groups several controls under a `<legend>`. */
 export interface FieldsetProps extends Omit<PrimitivePropsWithRef<'fieldset'>, 'value' | 'name'>, FieldOwnProps {
 }
 /** Props for {@link FieldLabel}, which renders a `<label>` — or a `<legend>` inside a {@link Fieldset}. */
 export interface FieldLabelProps extends PrimitivePropsWithRef<'label'> {
 }
+/** Props for {@link FieldRequiredIndicator}, the "this one is mandatory" marker inside a {@link FieldLabel}. */
+export interface FieldRequiredIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Overrides the default `*` marker; rendered inside the accessible name, so words read better than a symbol.
+     * @default undefined — renders `*`.
+     */
+    children?: React.ReactNode | undefined;
+}
 /** Props for {@link FieldDescription}, help text announced with the control. */
 export interface FieldDescriptionProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element tag to render instead of the default, from the library's allowlist of tags.
+     * @default 'span'
+     */
+    as?: PolymorphicTag | undefined;
 }
 /** Props for {@link FieldError}, rendered only while the field is invalid. */
 export interface FieldErrorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element tag to render instead of the default, from the library's allowlist of tags.
+     * @default 'span'
+     */
+    as?: PolymorphicTag | undefined;
 }
 /** Props for {@link FieldCharacterCount}, the running "N characters remaining" count. */
 export interface FieldCharacterCountProps extends PrimitivePropsWithRef<'span'> {
-    /**
-     * The soft limit. Deliberately not the control's native `maxlength`, which
-     * silently truncates instead of telling the user they went over.
-     */
+    /** The soft limit; not the control's native `maxlength`, which truncates instead of warning. */
     maxLength: number;
     /**
-     * Percentage of `maxLength` that must be typed before the count appears at
-     * all — GOV.UK's way of keeping a long field quiet until it matters.
+     * Percentage of `maxLength` typed before the count appears.
      * @default 0 — visible from the first render.
      */
-    threshold?: number;
+    threshold?: number | undefined;
 }
-/** @internal Field identity and state distributed to the Label/Description/Error parts. Not part of the public API. */
+/** @internal Field identity and state distributed to the Label/Description/Error parts. */
 export interface FieldContextValue {
     labelId: string;
     descriptionId: string;
     errorId: string;
-    /** The id the control actually carries — `undefined` until the Field has connected to one, which no server render ever does. */
-    controlId?: string;
+    /** The id the control actually carries; `undefined` until the Field has connected to one. */
+    controlId?: string | undefined;
     errors: string[];
     grouped: boolean;
+    /** Whether the Field is required, so `FieldRequiredIndicator` knows whether to render at all. */
+    required: boolean;
     count: number;
     setCharacterCount: (options: FieldCharacterCountOptions | null) => void;
     /** The root's `getCharacterCountMessage`, so the rendered count uses the same wording as the announced one. */
-    getCharacterCountMessage?: (remaining: number) => string;
+    getCharacterCountMessage?: ((remaining: number) => string) | undefined;
 }

package/dist/file-upload/FileUpload.cjs

@@ -1 +1,2 @@
-"use strict";var de=Object.create;var c=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},M=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of me(t))!ce.call(e,i)&&i!==o&&c(e,i,{get:()=>t[i],enumerable:!(r=se(t,i))||r.enumerable});return e};var s=(e,t,o)=>(o=e!=null?de(fe(e)):{},M(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e)),Fe=e=>M(c({},"__esModule",{value:!0}),e);var Pe={};ue(Pe,{FileUpload:()=>x,FileUploadDropzone:()=>R,FileUploadInput:()=>D,FileUploadItem:()=>v,FileUploadItemDelete:()=>C,FileUploadTrigger:()=>I});module.exports=Fe(Pe);var a=s(require("react"),1),S=require("../utils/createContext.cjs"),O=require("../utils/part.cjs"),V=require("../utils/primitive.cjs"),W=require("../utils/useControllableState.cjs"),b=require("react/jsx-runtime"),[Ue,n]=(0,S.createSafeContext)("FileUpload");function ge(e,t){if(!t)return!0;let o=t.split(",").map(l=>l.trim().toLowerCase()).filter(Boolean);if(o.length===0)return!0;let r=e.name.toLowerCase(),i=e.type.toLowerCase();return o.some(l=>l.startsWith(".")?r.endsWith(l):l.endsWith("/*")?i.startsWith(l.slice(0,-1)):i===l)}function ye(e,t){let o=[];return ge(e,t.accept)||o.push("file-invalid-type"),t.maxFileSize!==void 0&&e.size>t.maxFileSize&&o.push("file-too-large"),t.minFileSize!==void 0&&e.size<t.minFileSize&&o.push("file-too-small"),o.push(...t.validate?.(e)??[]),o}var x=a.forwardRef(({value:e,defaultValue:t=[],onValueChange:o,accept:r,multiple:i=!1,disabled:l=!1,maxFiles:k,maxFileSize:w,minFileSize:T,validate:E,onFileReject:L,...z},re)=>{let H=a.useRef(null),[g=[],m]=(0,W.useControllableState)({prop:e,defaultProp:t,onChange:o}),ae=a.useCallback(y=>{if(l)return;let f=i?g:[],N=(i?k??1/0:1)-f.length,d=[];for(let P of Array.from(y)){let h=ye(P,{accept:r,maxFileSize:w,minFileSize:T,validate:E});if(d.length>=N&&h.push("too-many-files"),h.length>0){L?.({file:P,errors:h});continue}d.push(P)}d.length!==0&&m([...f,...d])},[l,i,g,k,m,r,w,T,E,L]),ne=a.useCallback(y=>{m((f=[])=>f.filter((N,d)=>d!==y))},[m]),pe=a.useCallback(()=>{l||H.current?.click()},[l]);return(0,b.jsx)(Ue,{inputRef:H,files:g,disabled:l,accept:r,multiple:i,addFiles:ae,removeFile:ne,openPicker:pe,children:(0,b.jsx)(V.Primitive.div,{"data-disabled":l?"":void 0,...z,...(0,O.skdxPart)("file-upload","root",z.className),ref:re})})});x.displayName="FileUpload";var u=s(require("react"),1),B=require("../utils/part.cjs"),p=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),R=u.forwardRef((e,t)=>{let o=n("FileUploadDropzone"),[r,i]=u.useState(!1);return(0,A.jsx)(p.Primitive.div,{role:"button",tabIndex:o.disabled?-1:0,"aria-disabled":o.disabled||void 0,"data-disabled":o.disabled?"":void 0,"data-dragging":r?"":void 0,...e,...(0,B.skdxPart)("file-upload","dropzone",e.className),ref:t,onClick:(0,p.composeEventHandlers)(e.onClick,()=>o.openPicker()),onKeyDown:(0,p.composeEventHandlers)(e.onKeyDown,l=>{(l.key==="Enter"||l.key===" ")&&!o.disabled&&(l.preventDefault(),o.openPicker())}),onDragOver:(0,p.composeEventHandlers)(e.onDragOver,l=>{l.preventDefault(),o.disabled||i(!0)}),onDragLeave:(0,p.composeEventHandlers)(e.onDragLeave,()=>i(!1)),onDrop:(0,p.composeEventHandlers)(e.onDrop,l=>{l.preventDefault(),i(!1),o.disabled||o.addFiles(l.dataTransfer.files)})})});R.displayName="FileUploadDropzone";var K=s(require("react"),1),_=require("../utils/composeRefs.cjs"),q=require("../utils/hiddenInput.cjs"),G=require("../utils/part.cjs"),J=require("../utils/primitive.cjs");var Q=require("react/jsx-runtime"),D=K.forwardRef((e,t)=>{let o=n("FileUploadInput"),r=(0,_.useComposedRefs)(t,o.inputRef);return(0,Q.jsx)(q.HiddenInput,{type:"file",accept:o.accept,multiple:o.multiple,disabled:o.disabled,...e,...(0,G.skdxPart)("file-upload","input",e.className),ref:r,onChange:(0,J.composeEventHandlers)(e.onChange,i=>{i.target.files&&o.addFiles(i.target.files),i.target.value=""})})});D.displayName="FileUploadInput";var X=s(require("react"),1),Y=require("../utils/part.cjs"),Z=require("../utils/primitive.cjs"),$=require("react/jsx-runtime"),v=X.forwardRef(({index:e,status:t="idle",progress:o,...r},i)=>(0,$.jsx)(Z.Primitive.div,{"data-status":t,"data-progress":o,...r,...(0,Y.skdxPart)("file-upload","item",r.className),ref:i}));v.displayName="FileUploadItem";var j=s(require("react"),1),ee=require("../utils/part.cjs"),F=require("../utils/primitive.cjs");var oe=require("react/jsx-runtime"),C=j.forwardRef(({index:e,...t},o)=>{let r=n("FileUploadItemDelete");return(0,oe.jsx)(F.Primitive.button,{type:"button","aria-label":"Remove file",disabled:r.disabled,"data-disabled":r.disabled?"":void 0,...t,...(0,ee.skdxPart)("file-upload","item-delete",t.className),ref:o,onClick:(0,F.composeEventHandlers)(t.onClick,()=>{r.disabled||r.removeFile(e)})})});C.displayName="FileUploadItemDelete";var te=s(require("react"),1),ie=require("../utils/part.cjs"),U=require("../utils/primitive.cjs");var le=require("react/jsx-runtime"),I=te.forwardRef((e,t)=>{let o=n("FileUploadTrigger");return(0,le.jsx)(U.Primitive.button,{type:"button",disabled:o.disabled,"data-disabled":o.disabled?"":void 0,...e,...(0,ie.skdxPart)("file-upload","trigger",e.className),ref:t,onClick:(0,U.composeEventHandlers)(e.onClick,()=>o.openPicker())})});I.displayName="FileUploadTrigger";0&&(module.exports={FileUpload,FileUploadDropzone,FileUploadInput,FileUploadItem,FileUploadItemDelete,FileUploadTrigger});
+'use client';
+"use strict";var Ut=Object.create;var D=Object.defineProperty;var Rt=Object.getOwnPropertyDescriptor;var bt=Object.getOwnPropertyNames;var gt=Object.getPrototypeOf,vt=Object.prototype.hasOwnProperty;var It=(o,t)=>{for(var e in t)D(o,e,{get:t[e],enumerable:!0})},ee=(o,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of bt(t))!vt.call(o,i)&&i!==e&&D(o,i,{get:()=>t[i],enumerable:!(r=Rt(t,i))||r.enumerable});return o};var B=(o,t,e)=>(e=o!=null?Ut(gt(o)):{},ee(t||!o||!o.__esModule?D(e,"default",{value:o,enumerable:!0}):e,o)),Pt=o=>ee(D({},"__esModule",{value:!0}),o);var St={};It(St,{FileUpload:()=>K,FileUploadClear:()=>Xe,FileUploadDropzone:()=>L,FileUploadInput:()=>E,FileUploadItem:()=>w,FileUploadItemDelete:()=>H,FileUploadItemGroup:()=>z,FileUploadItemName:()=>S,FileUploadItemPreview:()=>O,FileUploadItemProvider:()=>fe,FileUploadItemSizeText:()=>V,FileUploadLabel:()=>We,FileUploadProvider:()=>$e,FileUploadTrigger:()=>M,useFileUploadContext:()=>s,useFileUploadItemContext:()=>U});module.exports=Pt(St);var a=B(require("react"),1),He=require("../utils/createContext.cjs"),ze=require("../utils/formControl.cjs"),J=require("../utils/hiddenInput.cjs"),$=require("../utils/liveAnnouncer.cjs"),Se=require("../utils/part.cjs"),Oe=require("../utils/primitive.cjs"),Ve=require("../utils/useCallbackRef.cjs"),Ae=require("../utils/useControllableState.cjs"),Me=require("../utils/visuallyHidden.cjs");var Ee=require("../utils/Glyph.cjs");var te=B(require("react"),1),oe=require("../utils/part.cjs"),b=require("../utils/primitive.cjs");var re=require("react/jsx-runtime"),L=({disableClick:o=!1,ref:t,...e})=>{let r=s("FileUploadDropzone"),[i,l]=te.useState(!1),u=[e["aria-describedby"],r.required?r.descriptionId:void 0].filter(Boolean).join(" ")||void 0;return(0,re.jsx)(b.Primitive.div,{role:"button","aria-labelledby":r.labelPresent?r.labelId:void 0,tabIndex:r.disabled?-1:0,"aria-disabled":r.disabled||r.readOnly||void 0,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,"data-dragging":i?"":void 0,"data-invalid":r.invalid?"":void 0,...e,...(0,oe.skdxPart)("file-upload","dropzone",e.className),"aria-describedby":u,ref:t,onClick:(0,b.composeEventHandlers)(e.onClick,()=>{o||r.openPicker()}),onKeyDown:(0,b.composeEventHandlers)(e.onKeyDown,n=>{(n.key==="Enter"||n.key===" ")&&!r.disabled&&!r.readOnly&&(n.preventDefault(),r.openPicker())}),onDragOver:(0,b.composeEventHandlers)(e.onDragOver,n=>{n.preventDefault(),!r.disabled&&!r.readOnly&&l(!0)}),onDragLeave:(0,b.composeEventHandlers)(e.onDragLeave,()=>l(!1)),onDrop:(0,b.composeEventHandlers)(e.onDrop,n=>{n.preventDefault(),l(!1),!r.disabled&&!r.readOnly&&r.addFiles(n.dataTransfer.files)})})};L.displayName="FileUploadDropzone";var ie=require("../utils/composeRefs.cjs"),le=require("../utils/hiddenInput.cjs"),ae=require("../utils/part.cjs"),ne=require("../utils/primitive.cjs");var de=require("react/jsx-runtime"),E=({ref:o,...t})=>{let e=s("FileUploadInput"),r=(0,ie.useComposedRefs)(o,e.inputRef);return(0,de.jsx)(le.HiddenInput,{type:"file",accept:e.accept,multiple:e.multiple,...e.directory?{webkitdirectory:""}:{},capture:e.capture,disabled:e.disabled||e.readOnly,...t,...(0,ae.skdxPart)("file-upload","input",t.className),ref:r,onChange:(0,ne.composeEventHandlers)(t.onChange,i=>{i.target.files&&e.addFiles(i.target.files),i.target.value=""})})};E.displayName="FileUploadInput";var se=require("../utils/createContext.cjs"),pe=require("../utils/part.cjs"),me=require("../utils/primitive.cjs"),W=require("react/jsx-runtime"),[fe,U]=(0,se.createSafeContext)("FileUploadItem"),w=({file:o,status:t="idle",progress:e,ref:r,...i})=>(0,W.jsx)(fe,{file:o,children:(0,W.jsx)(me.Primitive.div,{"data-state":t,"data-progress":e,...i,...(0,pe.skdxPart)("file-upload","item",i.className),ref:r})});w.displayName="FileUploadItem";var ue=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");function ce(o){let t=o.closest('[data-part="root"]');if(!t)return;let e=[...t.querySelectorAll('[data-part="item-delete"]')],r=e.indexOf(o);(e[r+1]??e[r-1]??t.querySelector('[data-part="dropzone"], [data-part="trigger"]'))?.focus()}var Fe=require("react/jsx-runtime"),H=({file:o,ref:t,...e})=>{let r=s("FileUploadItemDelete"),i=U("FileUploadItemDelete"),l=o??i.file;return(0,Fe.jsx)(T.Primitive.button,{type:"button","aria-label":r.removeLabel(l.name),disabled:r.disabled||r.readOnly,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,...e,...(0,ue.skdxPart)("file-upload","item-delete",e.className),ref:t,onClick:(0,T.composeEventHandlers)(e.onClick,u=>{r.disabled||r.readOnly||(ce(u.currentTarget),r.removeFile(l))})})};H.displayName="FileUploadItemDelete";var ye=require("../utils/part.cjs"),Ue=require("../utils/primitive.cjs"),Re=require("react/jsx-runtime"),z=({ref:o,...t})=>(0,Re.jsx)(Ue.Primitive.div,{...t,...(0,ye.skdxPart)("file-upload","item-group",t.className),ref:o});z.displayName="FileUploadItemGroup";var be=require("../utils/part.cjs"),ge=require("../utils/primitive.cjs");var ve=require("react/jsx-runtime"),S=({children:o,ref:t,...e})=>{let r=U("FileUploadItemName");return(0,ve.jsx)(ge.Primitive.span,{...e,...(0,be.skdxPart)("file-upload","item-name",e.className),ref:t,children:o??r.file.name})};S.displayName="FileUploadItemName";var Ie=require("../utils/part.cjs"),Pe=require("../utils/primitive.cjs");var xe=require("react/jsx-runtime"),O=({ref:o,...t})=>(U("FileUploadItemPreview"),(0,xe.jsx)(Pe.Primitive.div,{...t,...(0,Ie.skdxPart)("file-upload","item-preview",t.className),ref:o}));O.displayName="FileUploadItemPreview";var Ce=require("../utils/format-file-size.cjs"),he=require("../utils/part.cjs"),ke=require("../utils/primitive.cjs");var Ne=require("react/jsx-runtime"),V=({children:o,ref:t,...e})=>{let r=U("FileUploadItemSizeText");return(0,Ne.jsx)(ke.Primitive.span,{...e,...(0,he.skdxPart)("file-upload","item-size",e.className),ref:t,children:o??(0,Ce.formatFileSize)(r.file.size)})};V.displayName="FileUploadItemSizeText";var De=require("../utils/part.cjs"),A=require("../utils/primitive.cjs");var Le=require("react/jsx-runtime"),M=({ref:o,...t})=>{let e=s("FileUploadTrigger");return(0,Le.jsx)(A.Primitive.button,{type:"button",disabled:e.disabled||e.readOnly,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...(0,De.skdxPart)("file-upload","trigger",t.className),ref:o,onClick:(0,A.composeEventHandlers)(t.onClick,r=>{r.stopPropagation(),e.openPicker()})})};M.displayName="FileUploadTrigger";var d=require("react/jsx-runtime"),xt=()=>(0,d.jsx)(Ee.Glyph,{name:"close"}),we=({showList:o,showPreview:t,renderFile:e,fileStatus:r})=>{let i=s("FileUpload");return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(L,{children:"Drag files here"}),(0,d.jsx)(M,{children:"Browse"}),(0,d.jsx)(E,{}),o?(0,d.jsx)(z,{children:i.files.map(l=>(0,d.jsx)(w,{file:l,...r?.(l),children:e?e(l):(0,d.jsxs)(d.Fragment,{children:[t?(0,d.jsx)(O,{}):null,(0,d.jsx)(S,{}),(0,d.jsx)(V,{}),(0,d.jsx)(H,{children:(0,d.jsx)(xt,{})})]})},l.name))}):null]})};var c=require("react/jsx-runtime"),[$e,s]=(0,He.createSafeContext)("FileUpload");function Ct(o,t){if(!t)return!0;let e=t.split(",").map(l=>l.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let r=o.name.toLowerCase(),i=o.type.toLowerCase();return e.some(l=>l.startsWith(".")?r.endsWith(l):l.endsWith("/*")?i.startsWith(l.slice(0,-1)):i===l)}function ht(o){if(typeof DataTransfer>"u")return null;let t=new DataTransfer;for(let e of o)t.items.add(e);return t.files}var kt=o=>`Remove ${o}`;function Te(o){return o.length===0?"":o.length===1?`${o[0]} removed`:`${o.length} files removed`}function Nt(o){return o?"Required. No file selected":"Required"}function Dt(o,t){let e=[];if(o>0&&e.push(`${o} ${o===1?"file":"files"} added`),t.length>0){let r=[...new Set(t)].join(", "),i=t.length;e.push(`${i} ${i===1?"file":"files"} refused: ${r}`)}return e.join(". ")}function Lt(o,t){let e=[];return Ct(o,t.accept)||e.push("file-invalid-type"),t.maxFileSize!==void 0&&o.size>t.maxFileSize&&e.push("file-too-large"),t.minFileSize!==void 0&&o.size<t.minFileSize&&e.push("file-too-small"),e.push(...t.validator?.(o)??[]),e}function Et(o,t,e){return o||t&&e===0}function wt(o,t){return{"data-disabled":o?"":void 0,"data-readonly":t?"":void 0}}function Tt({forwardedRef:o,requiredMessage:t,required:e,files:r,setFiles:i,defaultValue:l,addFilesRef:u}){let n=a.useRef(null),y=a.useRef(null),g=a.useRef(""),R=(0,Ve.useCallbackRef)(()=>{let m=y.current;if(!m)return;let f=t&&e&&r.length===0?t:"";m.setCustomValidity(g.current||f)}),x=m=>{g.current=m,R()};a.useImperativeHandle(o,()=>{let m={checkValidity:()=>y.current?.checkValidity()??!0,reportValidity:()=>y.current?.reportValidity()??!0,setCustomValidity:x,addFiles:f=>u.current(f)};return n.current?Object.assign(n.current,m):m}),(0,ze.useFormReset)(n,()=>i(l));let h=a.useRef(null);return a.useEffect(()=>{let m=h.current;if(!m)return;let f=ht(r);f&&(m.files=f)},[r]),a.useEffect(()=>{R()},[R,t,e,r]),{rootRef:n,validityRef:y,formInputRef:h}}function Ht({name:o,form:t,multiple:e,accept:r,disabled:i,required:l,invalid:u,files:n,formInputRef:y,validityRef:g,descriptionId:R}){return(0,c.jsxs)(c.Fragment,{children:[o?(0,c.jsx)(J.HiddenInput,{ref:y,type:"file",name:o,multiple:e,accept:r,disabled:i,form:t}):null,(0,c.jsx)(J.HiddenInput,{ref:g,type:"text",required:l,disabled:i,form:t,value:n.map(x=>x.name).join(", ")}),l?(0,c.jsx)(Me.VisuallyHidden,{id:R,children:Nt(u)}):null]})}function zt(o){a.useEffect(()=>{if(!o)return;let t=e=>{let r=e.target;r instanceof Element&&r.closest('[data-part="dropzone"]')||e.preventDefault()};return document.addEventListener("dragover",t),document.addEventListener("drop",t),()=>{document.removeEventListener("dragover",t),document.removeEventListener("drop",t)}},[o])}var K=({value:o,defaultValue:t=[],onValueChange:e,accept:r,multiple:i=!1,disabled:l=!1,maxFiles:u,maxFileSize:n,minFileSize:y,validator:g,onFileReject:R,removeLabel:x=kt,name:h,form:m,required:f=!1,requiredMessage:Ye,readOnly:F=!1,invalid:Ze=!1,directory:_e=!1,capture:je,preventDocumentDrop:et=!0,showList:tt=!0,showPreview:ot=!1,fileStatus:rt,renderFile:it,children:lt,ref:at,...X})=>{let Q=a.useRef(null),nt=a.useId(),Y=a.useId(),[dt,st]=a.useState(!1),[p=[],v]=(0,Ae.useControllableState)({prop:o,defaultProp:t,onChange:e}),k=a.useCallback(I=>{if(l||F)return;let P=i?p:[],yt=(i?u??1/0:1)-P.length,C=[],j=[];for(let q of Array.from(I)){let N=Lt(q,{accept:r,maxFileSize:n,minFileSize:y,validator:g});if(C.length>=yt&&N.push("too-many-files"),N.length>0){j.push(N[0]),R?.({file:q,errors:N});continue}C.push(q)}(0,$.announce)(Dt(C.length,j)),C.length!==0&&v([...P,...C])},[l,F,i,p,u,v,r,n,y,g,R]),Z=a.useRef(k);a.useEffect(()=>{Z.current=k},[k]);let pt=a.useCallback(I=>{if(l||F)return;let P=p.indexOf(I);P!==-1&&((0,$.announce)(Te([I.name])),v([...p.slice(0,P),...p.slice(P+1)]))},[l,F,p,v]),mt=a.useCallback(()=>{l||F||p.length===0||((0,$.announce)(Te(p.map(I=>I.name))),v([]))},[l,F,p,v]),ft=a.useCallback(()=>{!l&&!F&&Q.current?.click()},[l,F]),{rootRef:ct,validityRef:ut,formInputRef:Ft}=Tt({forwardedRef:at,requiredMessage:Ye,required:f,files:p,setFiles:v,defaultValue:t,addFilesRef:Z}),_=Et(Ze,f,p.length);return zt(et),(0,c.jsxs)($e,{inputRef:Q,files:p,disabled:l,accept:r,multiple:i,addFiles:k,removeFile:pt,clearFiles:mt,openPicker:ft,removeLabel:x,readOnly:F,directory:_e,capture:je,labelId:nt,labelPresent:dt,setLabelPresent:st,descriptionId:Y,required:f,invalid:_,children:[(0,c.jsx)(Oe.Primitive.div,{...wt(l,F),...X,...(0,Se.skdxPart)("file-upload","root",X.className),ref:ct,children:lt??(0,c.jsx)(we,{showList:tt,showPreview:ot,renderFile:it,fileStatus:rt})}),Ht({name:h,form:m,multiple:i,accept:r,disabled:l,required:f,invalid:_,files:p,formInputRef:Ft,validityRef:ut,descriptionId:Y})]})};K.displayName="FileUpload";var Ge=B(require("react"),1),qe=require("../utils/part.cjs"),Be=require("../utils/primitive.cjs");var Je=require("react/jsx-runtime"),We=({ref:o,...t})=>{let e=s("FileUploadLabel"),{setLabelPresent:r}=e;return Ge.useEffect(()=>(r(!0),()=>r(!1)),[r]),(0,Je.jsx)(Be.Primitive.span,{id:e.labelId,...t,...(0,qe.skdxPart)("file-upload","label",t.className),ref:o})};We.displayName="FileUploadLabel";var Ke=require("../utils/part.cjs"),G=require("../utils/primitive.cjs");var Qe=require("react/jsx-runtime"),Xe=({ref:o,...t})=>{let e=s("FileUploadClear"),r=e.files.length===0;return(0,Qe.jsx)(G.Primitive.button,{type:"button",disabled:e.disabled||e.readOnly||r,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...(0,Ke.skdxPart)("file-upload","clear",t.className),ref:o,onClick:(0,G.composeEventHandlers)(t.onClick,()=>{e.clearFiles()})})};Xe.displayName="FileUploadClear";0&&(module.exports={FileUpload,FileUploadClear,FileUploadDropzone,FileUploadInput,FileUploadItem,FileUploadItemDelete,FileUploadItemGroup,FileUploadItemName,FileUploadItemPreview,FileUploadItemProvider,FileUploadItemSizeText,FileUploadLabel,FileUploadProvider,FileUploadTrigger,useFileUploadContext,useFileUploadItemContext});

package/dist/file-upload/FileUpload.d.cts

@@ -1,59 +1,26 @@
 import * as React from 'react';
-import type { FileUploadContextValue, FileUploadProps } from './types.cjs';
+import type { FileUploadContextValue, FileUploadHandle, FileUploadProps } from './types.cjs';
 /**
- * Controllable `File[]` list. `FileUploadDropzone`/`FileUploadTrigger` both
- * just proxy a click to a visually-hidden native `<input type="file">`
- * (`FileUploadInput`) — the OS file dialog and drag/drop are the platform's
- * job, this component only tracks the resulting file list.
+ * Controllable `File[]` list. Parts proxy to a visually-hidden native
+ * `<input type="file">` for the OS picker and drag/drop; this component
+ * tracks the resulting files, filtering through `accept` and `multiple`.
  */
+/** @internal State a {@link FileUpload} root shares with its parts: files, accept, multiple, disabled, refs, and imperative methods. */
+export declare const FileUploadProvider: React.FC<FileUploadContextValue & {
+    children: React.ReactNode;
+}>, useFileUploadContext: (consumerName: string) => FileUploadContextValue;
 /**
- * Reads the state a {@link FileUpload} root publishes to its parts:
- * the current `files`, the `accept`/`multiple`/`disabled` settings, the ref to
- * the visually-hidden native `<input type="file">`, and
- * `addFiles`/`removeFile`/`openPicker`.
- *
- * `FileUploadDropzone`, `FileUploadTrigger`, `FileUploadInput` and
- * `FileUploadItemDelete` each read it under their own name, which is the name
- * the hook puts in the error it throws when one of them is rendered outside a
- * `FileUpload` — every one of those parts is a proxy to the root's input, and a
- * proxy with no target silently does nothing. Not part of the public API.
- *
- * @internal
- */
-export declare const FileUploadProvider: {
-    (props: FileUploadContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFileUploadContext: (consumerName: string) => FileUploadContextValue;
-/**
- * Root of a file-selection widget: owns a controllable `File[]` list and
- * hands it down to `FileUploadDropzone` / `FileUploadTrigger` /
- * `FileUploadInput` / `FileUploadItem` / `FileUploadItemDelete` via context.
- * Sets `data-disabled` when `disabled`. Renders a plain `<div>`.
- *
- * The OS file dialog and drag-and-drop are the platform's job —
- * `FileUploadDropzone`/`FileUploadTrigger` both just proxy to a
- * visually-hidden native `<input type="file">` (`FileUploadInput`); this
- * component only tracks the resulting files, filtering both entry points
- * through `accept` (the native attribute alone only filters the picker, not
- * drag-and-drop) and applying `multiple`. Works controlled (`value` +
- * `onValueChange`) or uncontrolled (`defaultValue`).
+ * Controllable file-selection root that owns a `File[]` list and derives its
+ * own dropzone, trigger, and file list when given no children.
  *
  * @example
  * ```tsx
- * <FileUpload accept="image/*" multiple onValueChange={setFiles}>
- *   <FileUploadDropzone>
- *     Drag files here or <FileUploadTrigger>browse</FileUploadTrigger>
- *     <FileUploadInput />
- *   </FileUploadDropzone>
- *   {files.map((file, index) => (
- *     <FileUploadItem key={file.name} index={index}>
- *       {file.name}
- *       <FileUploadItemDelete index={index} />
- *     </FileUploadItem>
- *   ))}
- * </FileUpload>
+ * <FileUpload accept="image/*" multiple onValueChange={setFiles} />
  * ```
  */
-export declare const FileUpload: React.ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FileUpload: {
+    ({ value: valueProp, defaultValue, onValueChange, accept, multiple, disabled, maxFiles, maxFileSize, minFileSize, validator, onFileReject, removeLabel, name, form, required, requiredMessage, readOnly, invalid: invalidProp, directory, capture, preventDocumentDrop, showList, showPreview, fileStatus, renderFile, children, ref: forwardedRef, ...props }: Omit<FileUploadProps, "ref"> & {
+        ref?: React.Ref<FileUploadHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};