themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/components/base/upload/file-upload.types.d.ts

@@ -0,0 +1,68 @@
+import type { InputHTMLAttributes } from 'react';
+import type { StringsProp } from '../../../lib/strings';
+import type { ComponentScale } from '../../../lib/ui-provider';
+import type { FileUploadStrings } from './file-upload.strings';
+export type FileUploadSelectionMode = 'append' | 'replace';
+/** Stable machine-readable reason returned for a rejected local file. */
+export type FileUploadRejectionCode = 'invalid-type' | 'too-small' | 'too-large' | 'too-many' | 'duplicate' | 'custom';
+export interface FileUploadRejection {
+    /** The browser File value that failed validation. */
+    file: File;
+    /** Stable rejection reason for consumer logic and analytics. */
+    code: FileUploadRejectionCode;
+    /** Localized, presentation-ready explanation resolved by FileUpload. */
+    message: string;
+}
+/** Return `true` to accept, `false` for the default error, or a localized error message. */
+export type FileUploadValidator = (file: File) => boolean | string;
+type NativeFileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'accept' | 'children' | 'className' | 'defaultValue' | 'disabled' | 'multiple' | 'onChange' | 'size' | 'type' | 'value'>;
+export interface FileUploadCommonProps extends NativeFileInputProps {
+    /** Native file accept filter, such as `.pdf,image/*`. */
+    accept?: string;
+    /** Disable browse, drop, replace, and remove interactions. */
+    disabled?: boolean;
+    /** Persist invalid styling independently of file validation results. */
+    invalid?: boolean;
+    /** Control scale. `sm` is the explicit compact `p-surface-xs` recipe. */
+    size?: ComponentScale;
+    /** Reject files smaller than this byte count. */
+    minSizeBytes?: number;
+    /** Reject files larger than this byte count. */
+    maxSizeBytes?: number;
+    /** Add consumer validation after type and size checks. */
+    validateFile?: FileUploadValidator;
+    /** Receives rejected files; rejected values never reach `onValueChange`. */
+    onRejectedFiles?: (rejections: FileUploadRejection[]) => void;
+    /** Class applied to the public component root. Native input attributes are otherwise forwarded. */
+    className?: string;
+    /** Override all visible and accessible validation copy. */
+    strings?: StringsProp<FileUploadStrings>;
+}
+export interface SingleFileUploadProps extends FileUploadCommonProps {
+    /** Single-file mode is the default. */
+    multiple?: false;
+    /** Controlled local File value. FileUpload does not transfer it. */
+    value?: File;
+    /** Initial local File value for uncontrolled usage. */
+    defaultValue?: File;
+    /** Called with the accepted local File, or `undefined` after removal. */
+    onValueChange?: (file: File | undefined) => void;
+    selectionMode?: never;
+    maxFiles?: never;
+}
+export interface MultipleFileUploadProps extends FileUploadCommonProps {
+    /** Enable multiple-file selection. */
+    multiple: true;
+    /** Controlled array of accepted local File values. */
+    value?: File[];
+    /** Initial local File values for uncontrolled usage. */
+    defaultValue?: File[];
+    /** Called with the complete accepted local selection. */
+    onValueChange?: (files: File[]) => void;
+    /** Whether each accepted selection adds to or replaces the current list. */
+    selectionMode?: FileUploadSelectionMode;
+    /** Maximum accepted file count across the resulting selection. */
+    maxFiles?: number;
+}
+export type FileUploadProps = SingleFileUploadProps | MultipleFileUploadProps;
+export {};

package/dist/components/base/upload/file-upload.validation.d.ts

@@ -0,0 +1,21 @@
+import type { FileUploadRejection, FileUploadValidator } from './file-upload.types';
+import type { FileUploadStrings } from './file-upload.strings';
+interface ValidateFileSelectionOptions {
+    incoming: File[];
+    current: File[];
+    accept?: string;
+    minSizeBytes?: number;
+    maxSizeBytes?: number;
+    maxFiles: number;
+    append: boolean;
+    validateFile?: FileUploadValidator;
+    formatSize: (bytes: number) => string;
+    strings: FileUploadStrings;
+}
+export interface FileSelectionResult {
+    accepted: File[];
+    nextFiles: File[];
+    rejections: FileUploadRejection[];
+}
+export declare function validateFileSelection({ incoming, current, accept, minSizeBytes, maxSizeBytes, maxFiles, append, validateFile, formatSize, strings, }: ValidateFileSelectionOptions): FileSelectionResult;
+export {};

package/dist/components/base/upload/image-upload.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { type StringsProp } from '../../../lib/strings';
+type ImageUploadAspectRatio = 'square' | 'standard' | 'widescreen' | 'portrait';
+type ImageUploadLayout = 'stacked' | 'inline';
+type ImageUploadFit = 'cover' | 'contain';
+export interface ImageUploadStrings {
+    select: string;
+    change: string;
+    remove: string;
+    noSelection: string;
+    keepCurrent: string;
+    /** Accessible description for an existing preview without a selected file name. */
+    previewAlt?: string;
+    /** Template for the supports-text. `{ext}` is the comma-separated allowed
+     *  extensions; `{size}` is the max-size MB number. */
+    supportsTemplate: string;
+    invalidType: (fileName: string, extension: string) => string;
+    tooSmall: (fileName: string, minimum: string) => string;
+    tooLarge: (fileName: string, maximum: string) => string;
+    tooMany: (fileName: string, maximum: number) => string;
+    duplicate: (fileName: string) => string;
+    customValidationFailed: (fileName: string) => string;
+    /** Summary line when `multiple` is set and more than one file is selected.
+     *  Receives the count of files beyond the displayed one — e.g. `count=3`
+     *  for "+ 3 more files". Override to swap the English plural-`s` rule
+     *  (`'+ ' + count + ' more file' + (count === 1 ? '' : 's')`) for the
+     *  consumer locale. */
+    moreFiles: (count: number) => string;
+}
+export declare const defaultImageUploadStrings: ImageUploadStrings;
+export interface ImageUploadProps {
+    /** Accepted MIME types or extensions, as the native `accept` attribute. */
+    accept?: string;
+    /** Allows more than one file to be chosen. */
+    multiple?: boolean;
+    /** Selected files. Controlled. */
+    value?: File;
+    onValueChange?: (file?: File) => void;
+    /** Disables the control and blocks drops. */
+    disabled?: boolean;
+    /** Image shown before anything is chosen — an existing upload. */
+    initialPreviewUrl?: string;
+    /** Aspect ratio the preview is cropped to. */
+    aspectRatio?: ImageUploadAspectRatio;
+    /** How the preview fills its frame — cover or contain. */
+    fit?: ImageUploadFit;
+    /** Caps the preview's width. */
+    maxWidth?: number | string;
+    /** Arrangement of the preview and drop target. */
+    layout?: ImageUploadLayout;
+    /** Applies the invalid styling. */
+    invalid?: boolean;
+    /** Override default strings (button labels, helper text, supports template). */
+    strings?: StringsProp<ImageUploadStrings>;
+}
+declare const ImageUpload: React.ForwardRefExoticComponent<ImageUploadProps & React.RefAttributes<HTMLInputElement>>;
+export { ImageUpload };

package/dist/components/base/upload/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * File and media upload surfaces.
+ *
+ * Every control here selects, validates, previews, or reports progress for
+ * files — none of them performs the transfer. The consumer owns the request,
+ * so these stay framework-agnostic and callback-driven.
+ *
+ * `FileUpload` is the form-shaped control for local `File` values. `Dropzone`
+ * is the bare drop target it composes, `ImageUpload` / `AvatarUpload` add
+ * image previews. Transfer-state surfaces and ordered media editing now have
+ * canonical `base/upload-queue` and `base/media-gallery` entrypoints; their
+ * 1.x compatibility exports remain below.
+ *
+ * `useFileDropTarget` and `FilePickerInput` stay internal — they are the
+ * shared drag/keyboard plumbing behind the public controls, not an API.
+ */
+export { Dropzone, defaultDropzoneStrings, type DropzoneProps, type DropzoneInputProps, type DropzoneStrings, type DropzoneSize, } from './dropzone';
+export { FileUpload, defaultFileUploadStrings, type FileUploadProps, type FileUploadCommonProps, type FileUploadRejection, type FileUploadRejectionCode, type FileUploadSelectionMode, type FileUploadStrings, type FileUploadValidator, type MultipleFileUploadProps, type SingleFileUploadProps, } from './file-upload';
+export { ImageUpload, defaultImageUploadStrings, type ImageUploadProps, type ImageUploadStrings, } from './image-upload';
+export { AvatarUpload, defaultAvatarUploadStrings, type AvatarUploadProps, type AvatarUploadStrings, type AvatarUploadSize, } from './avatar-upload';
+/** @deprecated Import from `themelia-react-ui/base/media-gallery`. Kept through 1.x. */
+export { MediaGallery, defaultMediaGalleryStrings, type MediaGalleryProps, type MediaGalleryStrings, } from '../media-gallery';
+/** @deprecated Import from `themelia-react-ui/base/upload-queue`. Kept through 1.x. */
+export { UploadProgressList, defaultUploadProgressListStrings, type UploadProgressListProps, type UploadProgressListStrings, type UploadItem, type UploadStatus, } from '../upload-queue';
+/** @deprecated Import from `themelia-react-ui/base/upload-queue`. Kept through 1.x. */
+export { UploadTray, defaultUploadTrayStrings, type UploadTrayProps, type UploadTrayStrings, } from '../upload-queue';

package/dist/components/base/upload/use-file-drop-target.d.ts

@@ -0,0 +1,22 @@
+import { type DragEventHandler } from 'react';
+interface UseFileDropTargetOptions {
+    disabled?: boolean;
+    onFiles: (files: File[]) => void;
+}
+export interface FileDropTargetProps {
+    onDragEnter: DragEventHandler<HTMLDivElement>;
+    onDragOver: DragEventHandler<HTMLDivElement>;
+    onDragLeave: DragEventHandler<HTMLDivElement>;
+    onDrop: DragEventHandler<HTMLDivElement>;
+}
+/** Shared descendant-safe drag state for Dropzone and selected FileUpload rows. */
+export declare function useFileDropTarget({ disabled, onFiles, }: UseFileDropTargetOptions): {
+    isDragging: boolean;
+    dropTargetProps: {
+        onDragEnter: DragEventHandler<HTMLDivElement>;
+        onDragOver: DragEventHandler<HTMLDivElement>;
+        onDragLeave: DragEventHandler<HTMLDivElement>;
+        onDrop: DragEventHandler<HTMLDivElement>;
+    };
+};
+export {};

package/dist/components/base/upload-queue/index.d.ts

@@ -0,0 +1,3 @@
+/** Consumer-driven upload progress rows and drop-to-queue composition. */
+export { UploadProgressList, defaultUploadProgressListStrings, type UploadProgressListProps, type UploadProgressListStrings, type UploadItem, type UploadStatus, } from './upload-progress-list';
+export { UploadTray, defaultUploadTrayStrings, type UploadTrayProps, type UploadTrayStrings, } from './upload-tray';

package/dist/components/base/upload-queue/upload-progress-list.d.ts

@@ -0,0 +1,55 @@
+import { type AttachmentKind } from '../attachment';
+import { type StringsProp } from '../../../lib/strings';
+export type UploadStatus = 'queued' | 'uploading' | 'done' | 'error' | 'cancelled';
+export interface UploadItem {
+    /** Stable identity for this entry. */
+    id: string;
+    /** Displayed file name. */
+    name: string;
+    /** Pre-formatted size string (e.g. "2.4 MB"). */
+    size?: string;
+    /** Numeric file size used when the formatted size is absent. */
+    bytes?: number;
+    kind?: AttachmentKind;
+    /** Upload progress 0–100. Omit for an indeterminate transfer. Ignored when status is `done`/`error`/`cancelled`. */
+    progress?: number;
+    status: UploadStatus;
+    /** Error message rendered under the row when status is `error`. */
+    error?: string;
+    /**
+     * Optional thumbnail URL, shown in place of the status icon.
+     * The status remains visible beside the file name.
+     */
+    preview?: string;
+}
+export interface UploadProgressListStrings {
+    queued: string;
+    uploading: string;
+    done: string;
+    error: string;
+    cancelled: string;
+    cancel: string;
+    retry: string;
+    remove: string;
+    preview?: string;
+    download?: string;
+}
+export declare const defaultUploadProgressListStrings: UploadProgressListStrings;
+export interface UploadProgressListProps {
+    /** Entries to render, in order. */
+    items: UploadItem[];
+    /** File preview action; consumers own the effect. */
+    onPreview?: (id: string) => void;
+    /** Download action for completed files. Receives the stable item identity. */
+    onDownload?: (id: string) => void;
+    onCancel?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    onRemove?: (id: string) => void;
+    className?: string;
+    /** Overrides this surface's own copy. */
+    strings?: StringsProp<UploadProgressListStrings>;
+}
+export declare function UploadProgressList({ items, onPreview, onDownload, onCancel, onRetry, onRemove, className, strings: stringsProp, }: UploadProgressListProps): import("react").JSX.Element | null;
+export declare namespace UploadProgressList {
+    var displayName: string;
+}

package/dist/components/base/upload-queue/upload-tray.d.ts

@@ -0,0 +1,46 @@
+import { type StringsProp } from '../../../lib/strings';
+import { type DropzoneProps } from '../upload/dropzone';
+import { type UploadItem, type UploadProgressListStrings } from './upload-progress-list';
+export interface UploadTrayStrings {
+    heading: string;
+    completedLabel: string;
+    failedLabel: string;
+    uploadingLabel: string;
+    queuedLabel: string;
+    clearAll: string;
+}
+export declare const defaultUploadTrayStrings: UploadTrayStrings;
+export interface UploadTrayProps {
+    /** Files currently in the tray (queued / uploading / done / error / cancelled). */
+    items: UploadItem[];
+    /**
+     * Fires when the user drops or browses files. The library does NOT
+     * write to the items array — the consumer turns these into queued
+     * `UploadItem`s, kicks off the actual transfer, and updates progress.
+     */
+    onAddFiles: (files: File[]) => void;
+    /** Preview callback forwarded with the item identity. */
+    onPreview?: (id: string) => void;
+    /** Download callback for completed files, forwarded with the item identity. */
+    onDownload?: (id: string) => void;
+    /** Per-row cancel handler (passed through to UploadProgressList). */
+    onCancel?: (id: string) => void;
+    /** Per-row retry handler. */
+    onRetry?: (id: string) => void;
+    /** Per-row remove handler. */
+    onRemove?: (id: string) => void;
+    /**
+     * Clears the entire tray. When omitted, the "Clear all" button is
+     * hidden — useful for surfaces where in-flight uploads can't be
+     * cancelled in bulk.
+     */
+    onClearAll?: () => void;
+    /** Forwarded to the inner `<Dropzone>`. Only the meaningful subset. */
+    dropzone?: Pick<DropzoneProps, 'accept' | 'multiple' | 'size' | 'disabled' | 'invalid' | 'strings'>;
+    className?: string;
+    /** Overrides this surface's own copy. */
+    strings?: StringsProp<UploadTrayStrings>;
+    /** Strings forwarded to the inner `<UploadProgressList>`. */
+    listStrings?: StringsProp<UploadProgressListStrings>;
+}
+export declare const UploadTray: import("react").ForwardRefExoticComponent<UploadTrayProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/base/value-inputs/color-input.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type StringsProp } from '../../../lib/strings';
+import { type InputProps, type InputStrings } from '../text-inputs';
+export interface ColorInputStrings {
+    /** Accessible label for the native color-picker trigger. */
+    chooseColor: string;
+}
+export declare const defaultColorInputStrings: ColorInputStrings;
+export interface ColorInputProps extends Omit<InputProps, 'type' | 'strings'> {
+    /** CSS color expression shown by the swatch. Defaults to the current value. */
+    previewValue?: string;
+    /** CSS-color callback. Text entry is preserved verbatim; native picker values are normalized to OKLCH. */
+    onValueChange?: (value: string) => void;
+    /** Accessible label for the native color picker. Defaults to the component strings. */
+    pickerAriaLabel?: string;
+    /** ColorInput-owned accessible copy. */
+    strings?: StringsProp<ColorInputStrings>;
+    /** Copy overrides forwarded to the underlying text Input. */
+    inputStrings?: StringsProp<InputStrings>;
+}
+/**
+ * CSS-color editor that pairs exact text entry with a native visual picker.
+ * The swatch accepts modern CSS colors and inherited `var(...)` expressions;
+ * the picker commits OKLCH values without narrowing text input.
+ */
+export declare const ColorInput: React.ForwardRefExoticComponent<Omit<ColorInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/base/value-inputs/date-time-input.d.ts

@@ -0,0 +1,19 @@
+export interface DateTimeInputProps {
+    /** Controlled value (ISO string) */
+    value?: string;
+    /** Change handler */
+    onValueChange?: (value: string | undefined) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Display format for the date */
+    readableFormat?: string;
+    /** Step for time selection in minutes */
+    stepMinutes?: number;
+    /** Use modal for picker */
+    modal?: boolean;
+    /** Error state for styling (passed from FormField) */
+    invalid?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+}
+export declare const DateTimeInput: import("react").ForwardRefExoticComponent<DateTimeInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/base/value-inputs/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * value-inputs — controls that edit one structured value through a bespoke UI.
+ *
+ * Split out of `base/forms`. Each of these parses, validates and formats a
+ * specific kind of value — a tag list, an international phone number, a colour,
+ * a number within a range, a date and time — so each ships its own affordance
+ * (chips, country prefix menu, swatch and picker, track, calendar) rather than
+ * a text box.
+ *
+ * This family composes the other two: the phone, colour and tags controls all
+ * render `Input` from `base/text-inputs`, and the phone control renders the
+ * shared `SelectPopup*` parts from `base/choice-inputs`. The dependency runs
+ * one way only.
+ *
+ * Related families:
+ *   - `themelia-react-ui/base/text-inputs` — free-form text entry
+ *   - `themelia-react-ui/base/choice-inputs` — picking from a known set
+ *   - `themelia-react-ui/base/forms-numeric` — money, weight, dimensions
+ *   - `themelia-react-ui/base/date-pickers` — calendars and time pickers
+ */
+export { TagsInput, type TagsInputProps } from './tags-input';
+export { PhoneInput, defaultPhoneInputStrings, DEFAULT_COUNTRY_PREFIXES, COUNTRY_PREFIX_MAP, type PhoneInputProps, type PhoneInputStrings, type CountryPrefixOption, type CountryPrefixInput, } from './phone-input';
+export { ColorInput, defaultColorInputStrings, type ColorInputProps, type ColorInputStrings, } from './color-input';
+export { SliderField, defaultSliderStrings, type SliderProps, type SliderStrings, type SliderImitationEvent, } from './slider';
+export { DateTimeInput, type DateTimeInputProps } from './date-time-input';

package/dist/components/base/value-inputs/phone-input.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { type StringsProp } from '../../../lib/strings';
+import { type InputProps } from '../text-inputs';
+export interface PhoneInputStrings {
+    prefixPlaceholder: string;
+    /** Accessible name for the country-prefix selector. */
+    prefixAriaLabel: string;
+}
+export declare const defaultPhoneInputStrings: PhoneInputStrings;
+export interface CountryPrefixOption {
+    /** Country code value (e.g., '+1') */
+    value: string;
+    /** Display label (e.g., 'Bulgaria') */
+    label: string;
+    /** ISO country code (e.g., 'US') */
+    iso: string;
+}
+/** Country data mapped by ISO code */
+export declare const COUNTRY_PREFIX_MAP: Record<string, CountryPrefixOption>;
+/** Type for prefix input - either ISO code string or full option object */
+export type CountryPrefixInput = string | CountryPrefixOption;
+/** Default country prefixes - commonly used codes */
+export declare const DEFAULT_COUNTRY_PREFIXES: CountryPrefixInput[];
+export interface PhoneInputProps extends Omit<InputProps, 'type' | 'startAddon' | 'strings'> {
+    /** Normalize phone number on blur. Defaults to true */
+    normalizeOnBlur?: boolean;
+    /** Current country prefix value (dial code like '+1' or ISO code like 'US') */
+    prefix?: string;
+    /** Default prefix if uncontrolled (dial code like '+1' or ISO code like 'US') */
+    defaultPrefix?: string;
+    /** List of available country prefixes - ISO codes ('US', 'GR') or full objects */
+    prefixes?: CountryPrefixInput[];
+    /** Callback when prefix changes - returns dial code (e.g., '+1') */
+    onPrefixChange?: (prefix: string) => void;
+    /** Disable prefix selection */
+    disablePrefixSelector?: boolean;
+    /** Placeholder for prefix dropdown */
+    prefixPlaceholder?: string;
+    /** Width of the prefix dropdown */
+    prefixWidth?: string;
+    /** Show country name in dropdown. Defaults to true */
+    showCountryName?: boolean;
+    /** Show prefix in dropdown items. Defaults to true */
+    showPrefixInDropdown?: boolean;
+    /** String overrides (e.g. prefix dropdown placeholder). */
+    strings?: StringsProp<PhoneInputStrings>;
+}
+export declare const PhoneInput: React.NamedExoticComponent<Omit<PhoneInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/base/value-inputs/slider.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { type StringsProp } from '../../../lib/strings';
+export interface SliderStrings {
+    /** Accessible fallback name for the native range input. */
+    ariaLabel: string;
+}
+export declare const defaultSliderStrings: SliderStrings;
+export interface SliderImitationEvent {
+    target: {
+        name: string;
+        value: number;
+    };
+}
+export interface SliderProps {
+    /** Field name for form integration */
+    name?: string;
+    /** Element id */
+    id?: string;
+    /** Accessible name when a visible label is not associated with the slider. */
+    'aria-label'?: string;
+    /** Id of the visible label associated with the slider. */
+    'aria-labelledby'?: string;
+    /** Id of supporting or validation copy associated with the slider. */
+    'aria-describedby'?: string;
+    /** Localizes the fallback native-range name. */
+    strings?: StringsProp<SliderStrings>;
+    /** Current value (single thumb) */
+    value?: number;
+    /** Default value when uncontrolled */
+    defaultValue?: number;
+    /** Minimum value. Defaults to 0 */
+    min?: number;
+    /** Maximum value. Defaults to 100 */
+    max?: number;
+    /** Step increment. Defaults to 1 */
+    step?: number;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Error state for styling (passed from FormField) */
+    invalid?: boolean;
+    /** Event-style change handler for react-hook-form compatibility */
+    onChange?: (event: SliderImitationEvent) => void;
+    /** Raw value change handler (alternative to onChange) */
+    onValueChange?: (value: number) => void;
+    /** Fires on pointer up / keyboard commit */
+    onValueCommitted?: (value: number) => void;
+    /** Show the current value next to the slider */
+    showValue?: boolean;
+    /** Format the displayed value */
+    formatValue?: (value: number) => string;
+    /** Unit suffix displayed after the value (e.g. "px", "%", "mm") */
+    unit?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Orientation */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const SliderField: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+export { SliderField };

package/dist/components/base/value-inputs/tags-input.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { type StringsProp } from '../../../lib/strings';
+export interface TagsInputStrings {
+    placeholder: string;
+    emptyRecommendations: string;
+    clearAll: string;
+    /** Summary line shown when `maxTags` + `showMaxTags` are set. Receives
+     *  `current` (number of tags entered) and `max` (the limit). The
+     *  default is English `"{current} / {max} tags"` — override for i18n. */
+    summary: (current: number, max: number) => string;
+}
+export declare const defaultTagsInputStrings: TagsInputStrings;
+export interface TagsInputProps<T = string> {
+    /** ID of the editable input, for an external field label. */
+    id?: string;
+    /** Additional supporting/error descriptions associated with the editable control. */
+    'aria-describedby'?: string;
+    /** Current value (array of T) */
+    value?: T[];
+    /** Callback when value changes */
+    onValueChange?: (value: T[]) => void;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Array of recommendations to suggest */
+    recommendations?: Array<T | {
+        value: T;
+        label: string;
+    }>;
+    /** Maximum number of tags allowed */
+    maxTags?: number;
+    /** Show the label for the maximum tags */
+    showMaxTags?: boolean;
+    /** Whether duplicate tags are allowed */
+    allowDuplicates?: boolean;
+    /** Custom validation function */
+    validate?: (value: T) => boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether to show the clear all button */
+    showClearAll?: boolean;
+    /** Custom tag component */
+    renderTag?: (tag: T, index: number, onRemove: (index: number) => void) => React.ReactNode;
+    /** Delimiter for separating tags when pasting */
+    delimiter?: string | RegExp;
+    /** Whether to trigger add on blur */
+    addOnBlur?: boolean;
+    /** Minimum length for a tag */
+    minLength?: number;
+    /** Maximum length for a tag */
+    maxLength?: number;
+    /** Override default English strings (placeholder, empty list, clear-all). */
+    strings?: StringsProp<TagsInputStrings>;
+    /** Whether tags should be sorted */
+    sortTags?: boolean;
+    /** Case sensitivity for duplicate checking */
+    caseSensitive?: boolean;
+    /** Field to extract display value from an object (required when T is not string) */
+    field?: T extends string ? never : keyof T;
+    /** Error state for styling (passed from FormField) */
+    invalid?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+export declare function TagsInput<T = string>({ id, 'aria-describedby': ariaDescribedBy, value, onValueChange, placeholder, recommendations, maxTags, showMaxTags, allowDuplicates, validate, disabled, showClearAll, renderTag, delimiter, addOnBlur, minLength, maxLength, sortTags, caseSensitive, field, invalid, className, strings: stringsProp, }: TagsInputProps<T>): React.JSX.Element;
+export declare namespace TagsInput {
+    var displayName: string;
+}