@inkra/react 0.1.0 → 0.3.0

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

@@ -0,0 +1,69 @@
+import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+import type { FieldControlSize, FieldControlStateProps } from '../form/types.js';
+import { createDefaultTag, defaultTagInputDelimiters, defaultTagValueKey, hasTagValue, normalizeTagInputValue, splitTagInputValue } from './model.js';
+import type { TagInputIdentity } from './model.js';
+export interface TagInputTag extends TagInputIdentity {
+    label?: string;
+}
+export type TagInputVariant = 'underline' | 'outline' | 'soft';
+export type TagInputCommitReason = 'enter' | 'delimiter' | 'paste';
+export type TagInputChangeReason = 'add' | 'remove' | 'clear';
+export type TagInputValidationCode = 'duplicate' | 'max-tags' | 'invalid';
+export type TagInputValidationResult = boolean | string | null | undefined;
+export interface TagInputChangeDetails {
+    reason: TagInputChangeReason;
+    tags: readonly TagInputTag[];
+    inputReason?: TagInputCommitReason;
+}
+export interface TagInputDraftChangeDetails {
+    reason: 'input' | 'commit' | 'clear';
+}
+export interface TagInputValidationContext {
+    tags: readonly TagInputTag[];
+    reason: TagInputCommitReason;
+}
+export interface TagInputValidationDetails extends TagInputValidationContext {
+    candidate: string;
+    code: TagInputValidationCode;
+}
+export interface TagInputLabels {
+    tagList: string;
+    removeTag: (tag: TagInputTag) => string;
+    clearAll: string;
+    duplicate: (candidate: string) => string;
+    maxTags: (maximum: number) => string;
+    invalid: (candidate: string) => string;
+}
+export type TagInputClassNames = Partial<Record<'root' | 'control' | 'list' | 'tag' | 'input' | 'clear' | 'message', string>>;
+export interface TagInputCreateContext extends TagInputValidationContext {
+}
+export interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'>, FieldControlStateProps {
+    value?: readonly TagInputTag[];
+    defaultValue?: readonly TagInputTag[];
+    onValueChange?: (value: readonly TagInputTag[], details: TagInputChangeDetails) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (value: string, details: TagInputDraftChangeDetails) => void;
+    createTag?: (candidate: string, context: TagInputCreateContext) => TagInputTag | null | undefined;
+    validateTag?: (candidate: string, context: TagInputValidationContext) => TagInputValidationResult;
+    onValidationError?: (message: string, details: TagInputValidationDetails) => void;
+    validationMessage?: string;
+    getTagValueKey?: (value: string) => string;
+    delimiters?: readonly string[];
+    maxTags?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    name?: string;
+    form?: string;
+    placeholder?: string;
+    clearable?: boolean;
+    fullWidth?: boolean;
+    variant?: TagInputVariant;
+    labels?: Partial<TagInputLabels>;
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'disabled' | 'form' | 'id' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'value'>;
+    classNames?: TagInputClassNames;
+}
+export declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export { createDefaultTag, defaultTagInputDelimiters, defaultTagValueKey, hasTagValue, normalizeTagInputValue, splitTagInputValue, };
+export type { FieldControlSize, TagInputIdentity };

package/dist/tag-input/index.js

@@ -0,0 +1,325 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { useResolvedControlProps } from '../form/controlProps.js';
+import { createDefaultTag, defaultTagInputDelimiters, defaultTagValueKey, hasTagValue, normalizeTagInputValue, splitTagInputValue, } from './model.js';
+const removePaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];
+const clearPaths = [{ d: 'M4 7h16' }, { d: 'M9 7V4h6v3' }, { d: 'm7 7 1 13h8l1-13' }];
+const classes = (...values) => values.filter(Boolean).join(' ');
+const defaultLabels = {
+    tagList: 'Selected tags',
+    removeTag: tag => `Remove ${tag.label ?? tag.value}`,
+    clearAll: 'Clear all tags',
+    duplicate: candidate => `${candidate} is already added.`,
+    maxTags: maximum => `You can add up to ${maximum} tags.`,
+    invalid: candidate => `${candidate} is not a valid tag.`,
+};
+function joinAriaIds(...values) {
+    const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
+    return [...new Set(ids)].join(' ') || undefined;
+}
+function resolvedLabels(labels) {
+    return {
+        tagList: labels?.tagList ?? defaultLabels.tagList,
+        removeTag: labels?.removeTag ?? defaultLabels.removeTag,
+        clearAll: labels?.clearAll ?? defaultLabels.clearAll,
+        duplicate: labels?.duplicate ?? defaultLabels.duplicate,
+        maxTags: labels?.maxTags ?? defaultLabels.maxTags,
+        invalid: labels?.invalid ?? defaultLabels.invalid,
+    };
+}
+function validationText(result, fallback) {
+    if (typeof result === 'string')
+        return result || fallback;
+    if (result === false)
+        return fallback;
+    return undefined;
+}
+export const TagInput = forwardRef(function TagInput({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, classNames = {}, clearable = true, createTag, defaultInputValue = '', defaultValue = [], delimiters = defaultTagInputDelimiters, disabled, form, fullWidth = true, getTagValueKey = defaultTagValueKey, id, inputProps = {}, inputValue, invalid = false, labels, maxTags, name, onClick, onInputValueChange, onValidationError, onValueChange, placeholder, readOnly, required, seed, size = 'md', validationMessage, validateTag, value, variant = 'outline', ...rootProps }, forwardedRef) {
+    const generatedId = useId();
+    const inputRef = useRef(null);
+    const removeRefs = useRef(new Map());
+    const composingRef = useRef(false);
+    const defaultTagsRef = useRef(defaultValue);
+    const defaultDraftRef = useRef(defaultInputValue);
+    const [uncontrolledTags, setUncontrolledTags] = useState(() => [...defaultValue]);
+    const [uncontrolledDraft, setUncontrolledDraft] = useState(defaultInputValue);
+    const [localValidationMessage, setLocalValidationMessage] = useState();
+    const [focusWithin, setFocusWithin] = useState(false);
+    const [pendingFocus, setPendingFocus] = useState(null);
+    const tagsControlled = value !== undefined;
+    const draftControlled = inputValue !== undefined;
+    const currentTags = tagsControlled ? value : uncontrolledTags;
+    const currentDraft = draftControlled ? inputValue : uncontrolledDraft;
+    const copy = useMemo(() => resolvedLabels(labels), [labels]);
+    const activeValidationMessage = validationMessage ?? localValidationMessage;
+    const messageId = activeValidationMessage ? `inkra-tag-input-${generatedId}-message` : undefined;
+    const state = useResolvedControlProps({
+        id,
+        required,
+        disabled,
+        readOnly,
+        invalid: invalid || Boolean(activeValidationMessage),
+        'aria-describedby': joinAriaIds(ariaDescribedBy, messageId),
+        'aria-errormessage': activeValidationMessage ? messageId : ariaErrorMessage,
+        'aria-invalid': ariaInvalid,
+    });
+    const resolvedSeed = seed ?? `inkra-tag-input-${state.id ?? generatedId}`;
+    const limit = typeof maxTags === 'number' && Number.isFinite(maxTags)
+        ? Math.max(0, Math.floor(maxTags))
+        : Number.POSITIVE_INFINITY;
+    const atLimit = currentTags.length >= limit;
+    const canEdit = !state.disabled && !state.readOnly;
+    const surfaceVariant = state.invalid
+        ? 'danger'
+        : variant === 'soft'
+            ? 'quiet'
+            : variant === 'underline'
+                ? 'ghost'
+                : 'outline';
+    defaultTagsRef.current = defaultValue;
+    defaultDraftRef.current = defaultInputValue;
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    useEffect(() => {
+        if (!pendingFocus)
+            return;
+        const target = 'input' in pendingFocus
+            ? inputRef.current
+            : removeRefs.current.get(pendingFocus.tagId) ?? inputRef.current;
+        target?.focus({ preventScroll: true });
+        setPendingFocus(null);
+    }, [currentTags, pendingFocus]);
+    useEffect(() => {
+        const input = inputRef.current;
+        const ownerForm = input?.form;
+        if (!input || !ownerForm || (tagsControlled && draftControlled))
+            return;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                if (!tagsControlled)
+                    setUncontrolledTags([...defaultTagsRef.current]);
+                if (!draftControlled)
+                    setUncontrolledDraft(defaultDraftRef.current);
+                setLocalValidationMessage(undefined);
+            }, 0);
+        };
+        ownerForm.addEventListener('reset', reset);
+        return () => {
+            clearTimeout(timer);
+            ownerForm.removeEventListener('reset', reset);
+        };
+    }, [draftControlled, form, tagsControlled]);
+    const updateDraft = (next, details) => {
+        if (!draftControlled)
+            setUncontrolledDraft(next);
+        onInputValueChange?.(next, details);
+    };
+    const commitTags = (next, details) => {
+        if (!tagsControlled)
+            setUncontrolledTags([...next]);
+        onValueChange?.(next, details);
+    };
+    const reportValidation = (candidate, reason, code, message, tags) => {
+        setLocalValidationMessage(message);
+        onValidationError?.(message, { candidate, code, reason, tags });
+    };
+    const commitCandidates = (candidates, reason) => {
+        if (!canEdit)
+            return false;
+        const working = [...currentTags];
+        const added = [];
+        let rejected;
+        for (const rawCandidate of candidates) {
+            const candidate = normalizeTagInputValue(rawCandidate);
+            if (!candidate)
+                continue;
+            if (working.length >= limit) {
+                rejected = { candidate, code: 'max-tags', message: copy.maxTags(limit) };
+                break;
+            }
+            if (hasTagValue(working, candidate, getTagValueKey)) {
+                rejected = { candidate, code: 'duplicate', message: copy.duplicate(candidate) };
+                break;
+            }
+            const context = { tags: working, reason };
+            const message = validationText(validateTag?.(candidate, context), copy.invalid(candidate));
+            if (message) {
+                rejected = { candidate, code: 'invalid', message };
+                break;
+            }
+            const tag = createTag ? createTag(candidate, context) : createDefaultTag(candidate);
+            if (!tag || !tag.id || !normalizeTagInputValue(tag.value)) {
+                rejected = { candidate, code: 'invalid', message: copy.invalid(candidate) };
+                break;
+            }
+            if (working.some(current => current.id === tag.id) || hasTagValue(working, tag.value, getTagValueKey)) {
+                rejected = { candidate, code: 'duplicate', message: copy.duplicate(candidate) };
+                break;
+            }
+            working.push(tag);
+            added.push(tag);
+        }
+        if (added.length > 0)
+            commitTags(working, { reason: 'add', tags: added, inputReason: reason });
+        if (rejected) {
+            updateDraft(rejected.candidate, { reason: 'commit' });
+            reportValidation(rejected.candidate, reason, rejected.code, rejected.message, working);
+            inputRef.current?.focus({ preventScroll: true });
+            return false;
+        }
+        setLocalValidationMessage(undefined);
+        updateDraft('', { reason: 'commit' });
+        inputRef.current?.focus({ preventScroll: true });
+        return added.length > 0;
+    };
+    const commitDraft = (reason) => {
+        const parsed = splitTagInputValue(currentDraft, delimiters);
+        return commitCandidates(parsed.parts, reason);
+    };
+    const removeTag = (index, focus = null) => {
+        if (!canEdit)
+            return;
+        const tag = currentTags[index];
+        if (!tag)
+            return;
+        const next = currentTags.filter((_, tagIndex) => tagIndex !== index);
+        const nextFocus = focus ?? (currentTags[index + 1]
+            ? { tagId: currentTags[index + 1].id }
+            : currentTags[index - 1]
+                ? { tagId: currentTags[index - 1].id }
+                : { input: true });
+        setLocalValidationMessage(undefined);
+        commitTags(next, { reason: 'remove', tags: [tag] });
+        setPendingFocus(nextFocus);
+    };
+    const clearAll = () => {
+        if (!canEdit || currentTags.length === 0)
+            return;
+        const removed = [...currentTags];
+        setLocalValidationMessage(undefined);
+        commitTags([], { reason: 'clear', tags: removed });
+        updateDraft('', { reason: 'clear' });
+        setPendingFocus({ input: true });
+    };
+    const focusRemoveButton = (index) => {
+        const tag = currentTags[index];
+        if (tag)
+            removeRefs.current.get(tag.id)?.focus({ preventScroll: true });
+    };
+    const handleInputChange = (event) => {
+        inputProps.onChange?.(event);
+        if (event.defaultPrevented)
+            return;
+        setLocalValidationMessage(undefined);
+        updateDraft(event.currentTarget.value, { reason: 'input' });
+    };
+    const handleInputPaste = (event) => {
+        inputProps.onPaste?.(event);
+        if (event.defaultPrevented || !canEdit || composingRef.current)
+            return;
+        const pasted = event.clipboardData.getData('text');
+        const start = event.currentTarget.selectionStart ?? currentDraft.length;
+        const end = event.currentTarget.selectionEnd ?? start;
+        const combined = `${currentDraft.slice(0, start)}${pasted}${currentDraft.slice(end)}`;
+        const parsed = splitTagInputValue(combined, delimiters);
+        if (!parsed.hasDelimiter)
+            return;
+        event.preventDefault();
+        commitCandidates(parsed.parts, 'paste');
+    };
+    const handleInputKeyDown = (event) => {
+        inputProps.onKeyDown?.(event);
+        if (event.defaultPrevented || !canEdit)
+            return;
+        const nativeEvent = event.nativeEvent;
+        if (composingRef.current || nativeEvent.isComposing || nativeEvent.keyCode === 229)
+            return;
+        const direction = getComputedStyle(event.currentTarget).direction;
+        const previousKey = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        if (event.key === previousKey && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0) {
+            if (currentTags.length > 0 && !state.readOnly) {
+                event.preventDefault();
+                focusRemoveButton(currentTags.length - 1);
+            }
+            return;
+        }
+        if (event.key === 'Backspace' && currentDraft.length === 0 && currentTags.length > 0) {
+            event.preventDefault();
+            removeTag(currentTags.length - 1, { input: true });
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commitDraft('enter');
+            return;
+        }
+        if (delimiters.includes(event.key)) {
+            event.preventDefault();
+            commitDraft('delimiter');
+        }
+    };
+    const handleTagKeyDown = (event, index) => {
+        if (event.defaultPrevented || !canEdit)
+            return;
+        const direction = getComputedStyle(event.currentTarget).direction;
+        const previousKey = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        const nextKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+        if (event.key === previousKey) {
+            event.preventDefault();
+            focusRemoveButton(Math.max(0, index - 1));
+        }
+        else if (event.key === nextKey) {
+            event.preventDefault();
+            if (index >= currentTags.length - 1)
+                inputRef.current?.focus({ preventScroll: true });
+            else
+                focusRemoveButton(index + 1);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            focusRemoveButton(0);
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            inputRef.current?.focus({ preventScroll: true });
+        }
+        else if (event.key === 'Backspace' || event.key === 'Delete') {
+            event.preventDefault();
+            removeTag(index);
+        }
+    };
+    return (_jsxs("div", { ...rootProps, className: classes('inkra-field-control-hit', 'inkra-tag-input', className, classNames.root), "data-disabled": state.disabled || undefined, "data-focus-within": focusWithin || undefined, "data-full-width": fullWidth, "data-invalid": state.invalid || undefined, "data-max-reached": atLimit || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, "data-variant": variant, onBlurCapture: event => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setFocusWithin(false);
+            rootProps.onBlurCapture?.(event);
+        }, onClick: event => {
+            onClick?.(event);
+            if (event.defaultPrevented || state.disabled)
+                return;
+            const target = event.target;
+            if (!target.closest('button, input'))
+                inputRef.current?.focus({ preventScroll: true });
+        }, onFocusCapture: event => {
+            setFocusWithin(true);
+            rootProps.onFocusCapture?.(event);
+        }, children: [_jsxs(PencilSurface, { as: "div", className: classes('inkra-field-control', 'inkra-tag-input__control', classNames.control), radius: 8, seed: resolvedSeed, variant: surfaceVariant, children: [_jsx("ul", { "aria-label": copy.tagList, className: classes('inkra-tag-input__list', classNames.list), children: currentTags.map((tag, index) => (_jsxs(PencilSurface, { as: "li", className: classes('inkra-tag-input__tag', classNames.tag), clipContent: true, "data-tag-id": tag.id, radius: 6, seed: `${resolvedSeed}-tag-${tag.id}`, variant: "quiet", children: [_jsx("span", { className: "inkra-tag-input__tag-label", children: tag.label ?? tag.value }), !state.readOnly ? (_jsx("button", { "aria-label": copy.removeTag(tag), className: "inkra-tag-input__remove", disabled: state.disabled, onClick: () => removeTag(index), onKeyDown: event => handleTagKeyDown(event, index), ref: node => {
+                                        if (node)
+                                            removeRefs.current.set(tag.id, node);
+                                        else
+                                            removeRefs.current.delete(tag.id);
+                                    }, title: copy.removeTag(tag), type: "button", children: _jsx(PencilIcon, { decorative: true, paths: removePaths, seed: `${resolvedSeed}-remove-${tag.id}`, size: 18, sourceSize: 24 }) })) : null] }, `${tag.id}-${index}`))) }), _jsx("input", { ...inputProps, "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-readonly": state.readOnly || undefined, "aria-required": state.required || undefined, autoComplete: inputProps.autoComplete ?? 'off', className: classes('inkra-input', 'inkra-tag-input__input', inputProps.className, classNames.input), disabled: state.disabled, form: form, id: state.id, onChange: handleInputChange, onCompositionEnd: event => {
+                            composingRef.current = false;
+                            inputProps.onCompositionEnd?.(event);
+                        }, onCompositionStart: event => {
+                            composingRef.current = true;
+                            inputProps.onCompositionStart?.(event);
+                        }, onKeyDown: handleInputKeyDown, onPaste: handleInputPaste, placeholder: placeholder, readOnly: state.readOnly, ref: inputRef, required: state.required && currentTags.length === 0, spellCheck: inputProps.spellCheck ?? false, type: "text", value: currentDraft }), clearable && currentTags.length > 0 && !state.readOnly ? (_jsx("button", { "aria-label": copy.clearAll, className: classes('inkra-tag-input__clear', classNames.clear), disabled: state.disabled, onClick: clearAll, onPointerDown: (event) => event.preventDefault(), title: copy.clearAll, type: "button", children: _jsx(PencilIcon, { decorative: true, paths: clearPaths, seed: `${resolvedSeed}-clear`, size: 20, sourceSize: 24 }) })) : null, variant === 'underline' ? (_jsx(PencilLine, { className: "inkra-tag-input__underline", seed: `${resolvedSeed}-underline`, weight: (focusWithin ? 1.5 : 1) + (state.invalid ? 0.1 : 0) })) : null] }), name ? currentTags.map((tag, index) => (_jsx("input", { disabled: state.disabled, form: form, name: name, type: "hidden", value: tag.value }, `${tag.id}-${index}`))) : null, activeValidationMessage ? (_jsx(PencilText, { as: "span", className: classes('inkra-tag-input__message', classNames.message), id: messageId, role: "alert", seed: `${resolvedSeed}-message`, children: activeValidationMessage })) : null] }));
+});
+export { createDefaultTag, defaultTagInputDelimiters, defaultTagValueKey, hasTagValue, normalizeTagInputValue, splitTagInputValue, };

package/dist/tag-input/model.d.ts

@@ -0,0 +1,14 @@
+export interface TagInputIdentity {
+    id: string;
+    value: string;
+}
+export interface SplitTagInputResult {
+    parts: string[];
+    hasDelimiter: boolean;
+}
+export declare const defaultTagInputDelimiters: readonly [",", ";", "\n"];
+export declare function normalizeTagInputValue(value: string): string;
+export declare function defaultTagValueKey(value: string): string;
+export declare function splitTagInputValue(value: string, delimiters?: readonly string[]): SplitTagInputResult;
+export declare function hasTagValue(tags: readonly TagInputIdentity[], value: string, getTagValueKey?: (value: string) => string): boolean;
+export declare function createDefaultTag(value: string): TagInputIdentity;

package/dist/tag-input/model.js

@@ -0,0 +1,38 @@
+export const defaultTagInputDelimiters = [',', ';', '\n'];
+export function normalizeTagInputValue(value) {
+    return value.trim();
+}
+export function defaultTagValueKey(value) {
+    return normalizeTagInputValue(value).toLocaleLowerCase();
+}
+export function splitTagInputValue(value, delimiters = defaultTagInputDelimiters) {
+    const activeDelimiters = [...new Set(delimiters.filter(Boolean))]
+        .sort((left, right) => right.length - left.length);
+    if (activeDelimiters.length === 0)
+        return { parts: [value], hasDelimiter: false };
+    const parts = [];
+    let start = 0;
+    let index = 0;
+    let hasDelimiter = false;
+    while (index < value.length) {
+        const delimiter = activeDelimiters.find(candidate => value.startsWith(candidate, index));
+        if (!delimiter) {
+            index += 1;
+            continue;
+        }
+        parts.push(value.slice(start, index));
+        index += delimiter.length;
+        start = index;
+        hasDelimiter = true;
+    }
+    parts.push(value.slice(start));
+    return { parts, hasDelimiter };
+}
+export function hasTagValue(tags, value, getTagValueKey = defaultTagValueKey) {
+    const candidateKey = getTagValueKey(value);
+    return tags.some(tag => getTagValueKey(tag.value) === candidateKey);
+}
+export function createDefaultTag(value) {
+    const normalized = normalizeTagInputValue(value);
+    return { id: normalized, value: normalized };
+}

package/dist/time-picker/index.d.ts

@@ -0,0 +1,15 @@
+import type { MouseEvent, ReactNode } from 'react';
+import type { InputProps, InputValueChangeDetails } from '../form/Input.js';
+export type TimePickerHourCycle = 'h12' | 'h24';
+export type TimePickerChangeDetails = InputValueChangeDetails;
+export interface TimePickerProps extends Omit<InputProps, 'clearable' | 'clearButtonLabel' | 'onClear' | 'onValueChange' | 'type'> {
+    hourCycle?: TimePickerHourCycle;
+    locale?: string;
+    showSeconds?: boolean;
+    clearable?: boolean;
+    clearButtonLabel?: string;
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onValueChange?: (value: string, details: TimePickerChangeDetails) => void;
+    startIcon?: ReactNode;
+}
+export declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/time-picker/index.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { useResolvedControlProps } from '../form/controlProps.js';
+import { mergeAriaIds, useFieldContext } from '../form/context.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilText } from '../PencilText.js';
+import { PencilLine } from '../PencilLine.js';
+import { Popover } from '../overlay/Popover.js';
+import { RadioGroup, RadioGroupItem } from '../selection/RadioGroup.js';
+const clockPaths = [
+    { d: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z' },
+    { d: 'M12 6v6l4 2' },
+];
+const clearPaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];
+const pad = (value) => {
+    const [whole, fraction] = String(value).split('.');
+    return `${whole.padStart(2, '0')}${fraction ? `.${fraction}` : ''}`;
+};
+const times = (length, start = 0) => Array.from({ length }, (_, index) => index + start);
+function partsOf(value) {
+    if (!/^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d(?:\.\d{1,3})?)?$/.test(value))
+        return undefined;
+    const [hour, minute, second = 0] = value.split(':').map(Number);
+    return [hour, minute, second];
+}
+function TimeColumn({ name, label, value, options, onChange, format = pad }) {
+    return _jsx(RadioGroup, { name: name, label: label, value: String(value), variant: "segmented", className: "inkra-time-picker__column", onValueChange: next => onChange(Number(next)), children: options.map(option => _jsx(RadioGroupItem, { value: String(option), label: format(option) }, option)) });
+}
+export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef) {
+    const { value, defaultValue, onValueChange, onChange, onClear, clearable = true, clearButtonLabel, hourCycle = 'h24', locale, lang, showSeconds = false, step, min, max, name, form, id, disabled, readOnly, required, invalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, style, size = 'md', fullWidth = true, startIcon, endIcon, endAction, startAction, prefix, suffix, placeholder, seed, variant = 'outline', textAlign = 'start', loading, classNames, ...nativeProps } = allProps;
+    const generatedId = useId();
+    const field = useFieldContext();
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const initialValue = useRef(String(defaultValue ?? value ?? ''));
+    const controlled = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const [internalValue, setInternalValue] = useState(() => String(defaultValue ?? ''));
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState('00:00');
+    const [draftValid, setDraftValid] = useState(true);
+    const [constraintInvalid, setConstraintInvalid] = useState(false);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const state = useResolvedControlProps({
+        id: id ?? `inkra-time-picker-${generatedId}`, disabled, readOnly, required, invalid,
+        'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid,
+    });
+    const currentValue = controlled ? String(value ?? '') : internalValue;
+    const secondsVisible = showSeconds || (step !== undefined && step !== 'any' && Number(step) % 60 !== 0);
+    const resolvedStep = step ?? (secondsVisible ? 1 : 60);
+    const stepBase = String(defaultValue ?? initialValue.current);
+    const resolvedLocale = locale ?? lang ?? (hourCycle === 'h12' ? 'en-US' : 'en-GB');
+    const zh = resolvedLocale.toLowerCase().startsWith('zh');
+    const copy = zh
+        ? { title: '选择时间', hour: '时', minute: '分', second: '秒', period: '时段', am: '上午', pm: '下午',
+            done: '确定', cancel: '取消', clear: '清空时间', invalid: '请选择符合时间范围和步进的时间。' }
+        : { title: 'Choose time', hour: 'Hour', minute: 'Minute', second: 'Second', period: 'Period', am: 'AM', pm: 'PM',
+            done: 'Apply', cancel: 'Cancel', clear: 'Clear time', invalid: 'Choose a time within the allowed range and step.' };
+    const currentParts = partsOf(currentValue);
+    const displayValue = currentParts
+        ? new Intl.DateTimeFormat(resolvedLocale, {
+            hour: '2-digit', minute: '2-digit', ...(secondsVisible ? { second: '2-digit' } : {}),
+            hourCycle: hourCycle === 'h12' ? 'h12' : 'h23',
+        }).format(new Date(2000, 0, 1, ...currentParts))
+        : placeholder ?? copy.title;
+    const canClear = clearable && Boolean(currentValue) && !state.disabled && !state.readOnly;
+    const valueId = field ? `${state.id}-value` : undefined;
+    const [hour, minute, second] = partsOf(draft) ?? [0, 0, 0];
+    const validDraft = (candidate = draft) => {
+        // Native validation owns overnight ranges, fractional steps and step bases.
+        const input = document.createElement('input');
+        input.type = 'time';
+        if (min !== undefined)
+            input.min = String(min);
+        if (max !== undefined)
+            input.max = String(max);
+        input.step = String(resolvedStep);
+        input.defaultValue = stepBase;
+        input.required = true;
+        input.value = candidate;
+        return input.validity.valid;
+    };
+    const updateOpen = (next) => {
+        if (next && (state.disabled || state.readOnly))
+            return;
+        if (next) {
+            const initial = partsOf(currentValue) ? currentValue : partsOf(String(min)) ? String(min) : '00:00';
+            const nextDraft = secondsVisible && initial.length === 5 ? `${initial}:00` : initial;
+            setDraft(nextDraft);
+            setDraftValid(validDraft(nextDraft));
+        }
+        setOpen(next);
+    };
+    const updatePart = (part, next) => {
+        const values = [hour, minute, second];
+        values[part] = next;
+        const nextDraft = values.slice(0, secondsVisible ? 3 : 2).map(pad).join(':');
+        setDraft(nextDraft);
+        setDraftValid(validDraft(nextDraft));
+    };
+    const commit = (next, reason) => {
+        if (!controlled)
+            setInternalValue(next);
+        setConstraintInvalid(false);
+        onValueChange?.(next, { reason });
+        setOpen(false);
+    };
+    useEffect(() => { setDraftValid(validDraft()); }, [draft, min, max, resolvedStep, stepBase]);
+    useBrowserLayoutEffect(() => {
+        // React's controlled value attribute must not move the native step base on each edit.
+        if (inputRef.current)
+            inputRef.current.defaultValue = stepBase;
+    }, [currentValue, stepBase]);
+    useEffect(() => {
+        const input = inputRef.current;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                if (!controlled)
+                    setInternalValue(String(defaultValue ?? ''));
+                else if (input)
+                    input.value = currentValue;
+                setConstraintInvalid(false);
+                setOpen(false);
+            }, 0);
+        };
+        input?.form?.addEventListener('reset', reset);
+        return () => { clearTimeout(timer); input?.form?.removeEventListener('reset', reset); };
+    }, [controlled, currentValue, defaultValue, form]);
+    useEffect(() => { if (state.disabled || state.readOnly)
+        setOpen(false); }, [state.disabled, state.readOnly]);
+    return _jsxs(Popover.Root, { open: open, onOpenChange: updateOpen, children: [_jsxs("div", { className: ['inkra-time-picker', classNames?.root, className].filter(Boolean).join(' '), style: style, dir: nativeProps.dir, "data-full-width": fullWidth, "data-invalid": state.invalid || constraintInvalid || undefined, "data-readonly": state.readOnly || undefined, "data-disabled": state.disabled || undefined, children: [startAction, _jsx(Popover.Trigger, { asChild: true, children: _jsxs(Button, { className: ['inkra-time-picker__trigger', classNames?.control].filter(Boolean).join(' '), id: state.id, ref: triggerRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": mergeAriaIds(state.describedBy, valueId), "aria-invalid": constraintInvalid || state.ariaInvalid, "aria-errormessage": state.errorMessage, "aria-required": state.required || undefined, "aria-readonly": state.readOnly || undefined, disabled: state.disabled, fullWidth: true, align: textAlign, variant: variant === 'soft' ? 'secondary' : variant === 'underline' ? 'outline' : variant, size: size, seed: seed, loading: loading, autoFocus: nativeProps.autoFocus, startIcon: startIcon ?? _jsx(PencilIcon, { paths: clockPaths, sourceSize: 24, size: 22 }), endIcon: endIcon, children: [prefix, _jsx(PencilText, { children: displayValue }), suffix] }) }), valueId && _jsx("span", { className: "inkra-time-picker__accessible-value", id: valueId, children: displayValue }), clearable && _jsx(Button, { className: "inkra-time-picker__clear", "aria-label": clearButtonLabel ?? copy.clear, title: clearButtonLabel ?? copy.clear, "aria-hidden": !canClear || undefined, disabled: !canClear, tabIndex: canClear ? 0 : -1, variant: "outline", size: "icon", onClick: event => {
+                            commit('', 'clear');
+                            onClear?.(event);
+                            triggerRef.current?.focus({ preventScroll: true });
+                        }, children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 22 }) }), endAction, _jsx("input", { ...nativeProps, ref: inputRef, type: "time", className: "inkra-time-picker__native", id: `${state.id}-native`, "aria-hidden": "true", tabIndex: -1, name: name, form: form, value: currentValue, min: min, max: max, step: resolvedStep, lang: lang ?? resolvedLocale, "data-hour-cycle": hourCycle, disabled: state.disabled, readOnly: state.readOnly, required: state.required, onChange: event => {
+                            if (!controlled)
+                                setInternalValue(event.currentTarget.value);
+                            onChange?.(event);
+                            onValueChange?.(event.currentTarget.value, { reason: 'input' });
+                        }, onFocus: event => { nativeProps.onFocus?.(event); triggerRef.current?.focus({ preventScroll: true }); }, onInvalid: event => {
+                            event.preventDefault();
+                            setConstraintInvalid(true);
+                            triggerRef.current?.focus();
+                            nativeProps.onInvalid?.(event);
+                        } })] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { className: "inkra-time-picker__popover", ref: contentRef, align: "start", sideOffset: 8, collisionPadding: 12, "aria-label": copy.title, onOpenAutoFocus: event => {
+                        event.preventDefault();
+                        requestAnimationFrame(() => {
+                            const content = contentRef.current;
+                            content?.querySelectorAll('input:checked').forEach(input => {
+                                const scroll = input.closest('.inkra-radio-group__items');
+                                const item = input.closest('.inkra-radio-group__item');
+                                if (scroll && item)
+                                    scroll.scrollTop += item.getBoundingClientRect().top - scroll.getBoundingClientRect().top - 88;
+                            });
+                            (content?.querySelector('input:checked')
+                                ?? content?.querySelector('input'))?.focus({ preventScroll: true });
+                        });
+                    }, children: [_jsx(Popover.Title, { children: copy.title }), _jsx(PencilLine, {}), _jsxs("div", { className: "inkra-time-picker__columns", children: [_jsx(TimeColumn, { name: `${generatedId}-hour`, label: copy.hour, value: hourCycle === 'h12' ? hour % 12 || 12 : hour, options: hourCycle === 'h12' ? times(12, 1) : times(24), onChange: next => updatePart(0, hourCycle === 'h12' ? next % 12 + (hour >= 12 ? 12 : 0) : next) }), _jsx(TimeColumn, { name: `${generatedId}-minute`, label: copy.minute, value: minute, options: times(60), onChange: next => updatePart(1, next) }), secondsVisible && _jsx(TimeColumn, { name: `${generatedId}-second`, label: copy.second, value: Math.floor(second), options: times(60), onChange: next => updatePart(2, next) }), hourCycle === 'h12' && _jsx(TimeColumn, { name: `${generatedId}-period`, label: copy.period, value: hour >= 12 ? 1 : 0, options: [0, 1], format: next => next ? copy.pm : copy.am, onChange: next => updatePart(0, hour % 12 + next * 12) })] }), !draftValid && _jsx(PencilText, { as: "p", className: "inkra-time-picker__error", role: "status", children: copy.invalid }), _jsx(PencilLine, {}), _jsxs("div", { className: "inkra-time-picker__footer", children: [_jsx(Popover.Close, { asChild: true, children: _jsx(Button, { variant: "outline", children: copy.cancel }) }), _jsx(Button, { disabled: !draftValid || state.disabled || state.readOnly, onClick: () => {
+                                        if (validDraft())
+                                            commit(draft, 'input');
+                                    }, children: copy.done })] })] }) })] });
+});

package/dist/timeline/index.d.ts

@@ -0,0 +1,14 @@
+import { type OlHTMLAttributes, type ReactNode } from 'react';
+export interface TimelineItem {
+    id: string;
+    date: ReactNode;
+    dateTime?: string;
+    title: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+}
+export interface TimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'children'> {
+    items: readonly TimelineItem[];
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;