@inkra/react 0.0.0-stage → 0.2.0

package/dist/tabs/index.d.ts

@@ -0,0 +1,22 @@
+import * as Primitive from '@radix-ui/react-tabs';
+import { type ReactNode } from 'react';
+export interface TabsProps extends Primitive.TabsProps {
+    size?: 'sm' | 'md' | 'lg';
+    animated?: boolean;
+}
+export interface TabsListProps extends Primitive.TabsListProps {
+    align?: 'start' | 'center' | 'end';
+    fullWidth?: boolean;
+    divided?: boolean;
+}
+export interface TabsTriggerProps extends Omit<Primitive.TabsTriggerProps, 'asChild'> {
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+export type TabsContentProps = Primitive.TabsContentProps;
+export declare const Tabs: {
+    Root: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Primitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/tabs/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-tabs';
+import { createContext, forwardRef, useContext, useRef, useState } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PencilLine } from '../PencilLine.js';
+import { useSelectionDrawing } from '../internal/useSelectionDrawing.js';
+const ValueContext = createContext(undefined);
+const AnimatedContext = createContext(true);
+const OrientationContext = createContext('horizontal');
+const DividedContext = createContext(false);
+const Root = forwardRef(function TabsRoot({ value, defaultValue, onValueChange, className, size = 'md', animated = true, orientation = 'horizontal', ...props }, ref) {
+    const [internal, setInternal] = useState(defaultValue);
+    const current = value === undefined ? internal : value;
+    const lastChange = useRef(current);
+    lastChange.current = current;
+    return _jsx(ValueContext.Provider, { value: current, children: _jsx(AnimatedContext.Provider, { value: animated, children: _jsx(OrientationContext.Provider, { value: orientation, children: _jsx(Primitive.Root, { ...props, orientation: orientation, ref: ref, "data-size": size, className: ['inkra-tabs', className].filter(Boolean).join(' '), value: current ?? '', onValueChange: next => {
+                        // Pointer focus and pointer down can request the same tab before React renders.
+                        if (lastChange.current === next)
+                            return;
+                        lastChange.current = next;
+                        if (value === undefined)
+                            setInternal(next);
+                        onValueChange?.(next);
+                    } }) }) }) });
+});
+const List = forwardRef(function TabsList({ className, align = 'start', fullWidth = false, divided = false, ...props }, ref) {
+    return _jsx(DividedContext.Provider, { value: divided, children: _jsx(Primitive.List, { ...props, ref: ref, "data-align": align, "data-full-width": fullWidth || undefined, "data-divided": divided || undefined, className: ['inkra-tabs__list', className].filter(Boolean).join(' ') }) });
+});
+const Trigger = forwardRef(function TabsTrigger({ value, className, children, startIcon, endIcon, ...props }, ref) {
+    const current = useContext(ValueContext);
+    const divided = useContext(DividedContext);
+    const orientation = useContext(OrientationContext);
+    const surface = useRef(null);
+    useSelectionDrawing(surface, current === value, useContext(AnimatedContext));
+    return _jsxs(Primitive.Trigger, { ...props, value: value, ref: ref, className: ['inkra-tabs__trigger', className].filter(Boolean).join(' '), children: [divided && _jsx(PencilLine, { className: "inkra-tabs__divider", orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: `tab-divider-${value}` }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-tabs__selection", variant: "selection", seed: `tab-${value}`, ref: surface }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-tabs__focus-ring", variant: "outline", seed: `tab-${value}-focus` }), startIcon && _jsx("span", { className: "inkra-tabs__icon", "aria-hidden": "true", children: startIcon }), _jsx("span", { className: "inkra-tabs__label", children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children }), endIcon && _jsx("span", { className: "inkra-tabs__icon", "aria-hidden": "true", children: endIcon })] });
+});
+const Content = forwardRef(function TabsContent({ className, value, ...props }, ref) {
+    const current = useContext(ValueContext);
+    return _jsx(Primitive.Content, { ...props, value: value, ref: ref, hidden: current !== value, className: ['inkra-tabs__content', className].filter(Boolean).join(' ') });
+});
+export const Tabs = { Root, List, Trigger, Content };

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>>;