@_tc/template-core 0.0.1 → 0.0.2

package/fe/packages/ui/react/components/ImagePreview/ImagePreview.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, FlipHorizontal, FlipVertical, RefreshCw, RotateCcw, RotateCw, X, ZoomIn, ZoomOut, } from 'lucide-react';
+import { useI18n } from '../../i18n';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../Button';
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function PreviewCore({ images, initialIndex, onClose }) {
+    const t = useI18n();
+    const [index, setIndex] = useState(initialIndex);
+    const [scale, _setScale] = useState(1);
+    const scaleRef = useRef(scale);
+    const [rotation, setRotation] = useState(0);
+    const [flipX, setFlipX] = useState(false);
+    const [flipY, setFlipY] = useState(false);
+    const imgRef = useRef(null);
+    const lastScaleBeforeNatural = useRef(null);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStart = useRef({ x: 0, y: 0 });
+    const positionRef = useRef({ x: 0, y: 0 });
+    const setScale = useCallback((newValue) => {
+        let newState = newValue;
+        if (typeof newValue === 'function') {
+            newState = newValue(scaleRef.current || 1);
+        }
+        scaleRef.current = newState;
+        _setScale(newState);
+    }, []);
+    const hasImages = images.length > 0;
+    const currentIndex = useMemo(() => clamp(index, 0, Math.max(images.length - 1, 0)), [index, images.length]);
+    const currentImage = hasImages ? images[currentIndex] : '';
+    const reset = () => {
+        setScale(1);
+        setRotation(0);
+        setFlipX(false);
+        setFlipY(false);
+        setPosition({ x: 0, y: 0 });
+        positionRef.current = { x: 0, y: 0 };
+        lastScaleBeforeNatural.current = null;
+    };
+    const handleMouseDown = useCallback((e) => {
+        setIsDragging(true);
+        dragStart.current = { x: e.clientX - positionRef.current.x, y: e.clientY - positionRef.current.y };
+    }, []);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging)
+            return;
+        const newX = e.clientX - dragStart.current.x;
+        const newY = e.clientY - dragStart.current.y;
+        positionRef.current = { x: newX, y: newY };
+        setPosition({ x: newX, y: newY });
+    }, [isDragging]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    const toPrev = () => {
+        if (!hasImages)
+            return;
+        setIndex((prev) => (prev - 1 + images.length) % images.length);
+        reset();
+    };
+    const toNext = () => {
+        if (!hasImages)
+            return;
+        setIndex((prev) => (prev + 1) % images.length);
+        reset();
+    };
+    const zoomIn = () => setScale((prev) => clamp(prev + 0.2, 0.2, 5));
+    const zoomOut = () => setScale((prev) => clamp(prev - 0.2, 0.2, 5));
+    const rotateLeft = () => setRotation((prev) => prev - 90);
+    const rotateRight = () => setRotation((prev) => prev + 90);
+    useEffect(() => {
+        const handleKey = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+                return;
+            }
+            if (e.key === 'ArrowLeft') {
+                if (!hasImages)
+                    return;
+                setIndex((prev) => (prev - 1 + images.length) % images.length);
+                reset();
+                return;
+            }
+            if (e.key === 'ArrowRight') {
+                if (!hasImages)
+                    return;
+                setIndex((prev) => (prev + 1) % images.length);
+                reset();
+            }
+        };
+        document.addEventListener('keydown', handleKey);
+        return () => document.removeEventListener('keydown', handleKey);
+    }, [onClose, hasImages, images.length]);
+    useEffect(() => {
+        if (!imgRef.current)
+            return;
+        const transform = `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px)) rotate(${rotation}deg) scale(${flipX ? -scale : scale}, ${flipY ? -scale : scale})`;
+        imgRef.current.style.transform = transform;
+    }, [rotation, scale, flipX, flipY, position]);
+    if (!hasImages)
+        return null;
+    const content = (_jsxs("div", { className: "tc-ui-image-preview fixed inset-0 z-[1100] bg-black/40 text-white", onClick: onClose, children: [_jsx(Button, { variant: "text", type: "button", onClick: onClose, className: "absolute right-6 top-6 p-2 rounded-full bg-black/70 hover:bg-black/80 transition-colors z-10", "aria-label": t('components.imagePreview.closePreview'), children: _jsx(X, { size: 20 }) }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            toPrev();
+                        }, className: "absolute left-4 top-1/2 -translate-y-1/2 p-3 rounded-full bg-black/70 hover:bg-black/80 transition-colors z-10", "aria-label": t('components.imagePreview.previousImage'), children: _jsx(ArrowLeft, { size: 20 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            toNext();
+                        }, className: "absolute right-4 top-1/2 -translate-y-1/2 p-3 rounded-full bg-black/70 hover:bg-black/80 transition-colors z-10", "aria-label": t('components.imagePreview.nextImage'), children: _jsx(ArrowRight, { size: 20 }) })] })), _jsx("div", { className: "absolute inset-0 flex items-center justify-center overflow-hidden", onClick: (e) => e.stopPropagation(), onWheel: (e) => {
+                    e.preventDefault();
+                    if (e.deltaY < 0) {
+                        zoomIn();
+                    }
+                    else {
+                        zoomOut();
+                    }
+                }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, style: { cursor: isDragging ? 'grabbing' : scale > 1 ? 'grab' : 'default' }, children: _jsx("div", { className: "relative max-h-[85vh] max-w-[90vw]", children: _jsx("img", { ref: imgRef, src: currentImage, alt: "", draggable: false, className: " select-none max-h-[85vh] max-w-[90vw] absolute left-1/2 top-1/2 origin-center" }) }) }), _jsxs("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-black/70 backdrop-blur px-3 py-2 rounded-lg", children: [_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            zoomOut();
+                        }, className: "flex items-center gap-1 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.zoomOut'), children: _jsx(ZoomOut, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            zoomIn();
+                        }, className: "flex items-center gap-1 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.zoomIn'), children: _jsx(ZoomIn, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            if (!imgRef.current)
+                                return;
+                            const { naturalWidth, naturalHeight, clientWidth, clientHeight } = imgRef.current;
+                            // 如果 lastScaleBeforeNatural 无值
+                            //  第一次点击
+                            //  将 scaleRef 复制给 lastScaleBeforeNatural
+                            //  正常赋值
+                            // 如果 lastScaleBeforeNatural 有值
+                            //  则使用 lastScaleBeforeNatural
+                            //  再清除 lastScaleBeforeNatural
+                            if (lastScaleBeforeNatural.current === null) {
+                                const scaleToNatural = Math.max(naturalWidth / Math.max(clientWidth, 1), naturalHeight / Math.max(clientHeight, 1), 1);
+                                lastScaleBeforeNatural.current = scaleRef.current;
+                                setScale(scaleToNatural);
+                            }
+                            else {
+                                //
+                                setScale(lastScaleBeforeNatural.current);
+                                lastScaleBeforeNatural.current = null;
+                            }
+                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": "1:1", children: "1:1" }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            reset();
+                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.reset'), children: _jsx(RefreshCw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            rotateLeft();
+                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.rotateLeft'), children: _jsx(RotateCcw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            rotateRight();
+                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.rotateRight'), children: _jsx(RotateCw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            setFlipX((prev) => !prev);
+                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.flipHorizontal'), children: _jsx(FlipHorizontal, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            setFlipY((prev) => !prev);
+                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.flipVertical'), children: _jsx(FlipVertical, { size: 16 }) })] })] }));
+    return createPortal(content, document.body);
+}
+export function ImagePreviewController({ open, images, initialIndex = 0, onClose }) {
+    if (!open || images.length === 0)
+        return null;
+    const key = `${images.join('|')}-${initialIndex}`;
+    return _jsx(PreviewCore, { images: images, initialIndex: initialIndex, onClose: onClose }, key);
+}

package/fe/packages/ui/react/components/ImagePreview/PreviewImage.d.ts

@@ -0,0 +1,11 @@
+import type { MOmit } from '../../types';
+import { type ImagePreviewControllerProps } from './ImagePreview';
+export type PreviewImageProps = MOmit<ImagePreviewControllerProps, 'open' | 'onClose'> & Pick<Partial<ImagePreviewControllerProps>, 'onClose'> & {
+    /**
+     * 缩略图边长，默认 80px
+     */
+    thumbSize?: number | string;
+    direction?: 'horizontal' | 'vertical';
+};
+export declare function PreviewImage(props: PreviewImageProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PreviewImage.d.ts.map

package/fe/packages/ui/react/components/ImagePreview/PreviewImage.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
+import { useMemo, useState } from 'react';
+import { Button } from '../Button';
+import { ImagePreviewController } from './ImagePreview';
+export function PreviewImage(props) {
+    const t = useI18n();
+    const { onClose, images, thumbSize = 80, direction = 'horizontal', ...ext } = props;
+    const [open, setOpen] = useState(false);
+    const [currentIndex, setCurrentIndex] = useState(ext.initialIndex ?? 0);
+    const sizeClass = useMemo(() => {
+        const value = typeof thumbSize === 'number' ? `${thumbSize}px` : thumbSize;
+        return `w-[${value}] h-[${value}]`;
+    }, [thumbSize]);
+    const sizeStyle = useMemo(() => {
+        const value = typeof thumbSize === 'number' ? `${thumbSize}px` : thumbSize;
+        return { width: value, height: value };
+    }, [thumbSize]);
+    if (!images?.length)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `flex gap-2 ${direction === 'vertical' ? 'flex-col' : ''}`, children: images.map((src, idx) => (_jsx(Button, { variant: "text", type: "button", className: `relative aspect-square overflow-hidden rounded border border-border ${sizeClass}`, style: sizeStyle, onClick: () => {
+                        setCurrentIndex(idx);
+                        setOpen(true);
+                    }, "aria-label": t('components.imagePreview.previewImage', { index: idx + 1 }), children: _jsx("img", { src: src, alt: "", className: "h-full w-full object-cover" }) }, src + idx))) }), _jsx(ImagePreviewController, { ...ext, images: images, initialIndex: currentIndex, open: open, onClose: () => {
+                    setOpen(false);
+                    onClose?.();
+                } })] }));
+}

package/fe/packages/ui/react/components/ImagePreview/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ImagePreview';
+export * from './PreviewImage';
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/ImagePreview/index.js

@@ -0,0 +1,2 @@
+export * from './ImagePreview';
+export * from './PreviewImage';

package/fe/packages/ui/react/components/Input/Input.d.ts

@@ -0,0 +1,45 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> & {
+    value?: string;
+    /**
+     *
+     * @param v input value
+     * @param e changeEvent
+     */
+    onChange?: (v: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * 只有初始化时会使用
+     * 如果会改变请使用value
+     */
+    defaultValue?: string;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    /** 输入框内部右侧按钮 */
+    addonAfter?: ReactNode;
+    /** 原生 input 节点的自定义 className */
+    inputClassName?: string;
+};
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
+    value?: string;
+    /**
+     *
+     * @param v input value
+     * @param e changeEvent
+     */
+    onChange?: (v: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * 只有初始化时会使用
+     * 如果会改变请使用value
+     */
+    defaultValue?: string;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    /** 输入框内部右侧按钮 */
+    addonAfter?: ReactNode;
+    /** 原生 input 节点的自定义 className */
+    inputClassName?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=Input.d.ts.map

package/fe/packages/ui/react/components/Input/Input.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { X } from 'lucide-react';
+import { forwardRef, useCallback, useMemo } from 'react';
+import { useInputController } from '../hooks/useInputController';
+const Input = forwardRef(({ className, inputClassName, type, value: controlledValue, onChange, defaultValue, allowClear, disabled, addonAfter, ...props }, ref) => {
+    const { setInternalValue, setIsFocused, setRefs, controllerRef, isControlledRef, isFocused, value, hasValue, } = useInputController({
+        defaultValue,
+        controlledValue,
+        ref,
+    });
+    const isFileInput = type === 'file';
+    // 在change恒定时 不重复生成 fn
+    // isControlledRef setInternalValue 都是不会变的值
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        if (!isFileInput && !isControlledRef.current) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue, e);
+    }, [isFileInput, isControlledRef, onChange, setInternalValue]);
+    const handleClear = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // 非受控时更新内部状态
+        if (!isControlledRef.current) {
+            setInternalValue('');
+        }
+        const syntheticEvent = {
+            target: { value: '' },
+            currentTarget: { value: '' },
+        };
+        onChange?.('', syntheticEvent);
+        controllerRef.current?.focus();
+    }, [controllerRef, isControlledRef, onChange, setInternalValue]);
+    const clearIcon = useMemo(() => {
+        if (allowClear) {
+            if (typeof allowClear === 'boolean') {
+                return (_jsx("span", { className: cn('w-5 h-5 rounded-full', 'bg-muted hover:bg-muted/80', 'text-foreground', 'transition-colors', 'flex items-center justify-center', 'focus:outline-none'), children: _jsx(X, { size: 12 }) }));
+            }
+            else {
+                return allowClear.clearIcon;
+            }
+        }
+        return undefined;
+    }, [allowClear]);
+    const showClearIcon = hasValue && clearIcon && !disabled;
+    return (_jsxs("div", { className: cn('tc-ui-input relative w-full', className), children: [_jsx("input", { type: type, ref: setRefs, ...(!isFileInput && { value }), onChange: handleChange, className: cn('flex w-full rounded-lg px-4 py-3 text-sm', 'border transition-colors duration-200', 'placeholder:text-muted-foreground', 'focus:outline-none', showClearIcon && 'pr-10', addonAfter && 'pr-12', disabled ? 'cursor-not-allowed bg-muted border-border text-muted-foreground' : 'bg-background', !disabled && !hasValue && !isFocused && 'border-border', !disabled && (hasValue || isFocused) && 'border-theme', inputClassName), onFocus: (e) => {
+                    if (!disabled) {
+                        setIsFocused(true);
+                        props.onFocus?.(e);
+                    }
+                }, onBlur: (e) => {
+                    if (!disabled) {
+                        setIsFocused(false);
+                        props.onBlur?.(e);
+                    }
+                }, disabled: disabled, ...props }), showClearIcon && (_jsx("button", { type: "button", onClick: handleClear, className: cn('absolute right-3 top-1/2 -translate-y-1/2'), children: clearIcon })), addonAfter && _jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: addonAfter })] }));
+});
+Input.displayName = 'Input';
+export { Input };

package/fe/packages/ui/react/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Input';
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/Input/index.js

@@ -0,0 +1 @@
+export * from './Input';

package/fe/packages/ui/react/components/InputNumber/InputNumber.d.ts

@@ -0,0 +1,28 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { type InputNumberConstraints } from './inputNumberUtils';
+export type InputNumberProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'step' | 'type' | 'value'> & InputNumberConstraints & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number | undefined, e: ChangeEvent<HTMLInputElement>) => void;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    addonAfter?: ReactNode;
+    allowStep?: boolean;
+    /** 原生 input 节点的自定义 className */
+    inputClassName?: string;
+};
+declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue" | "onChange" | "step"> & InputNumberConstraints & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number | undefined, e: ChangeEvent<HTMLInputElement>) => void;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    addonAfter?: ReactNode;
+    allowStep?: boolean;
+    /** 原生 input 节点的自定义 className */
+    inputClassName?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export { InputNumber };
+//# sourceMappingURL=InputNumber.d.ts.map

package/fe/packages/ui/react/components/InputNumber/InputNumber.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { ChevronDown, ChevronUp, X } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { formatNumber, isValidNumberInput, normalizeNumber, parseInputNumber, shouldSyncDisplayValue, stepValue, } from './inputNumberUtils';
+const formatDisplayValue = (value, constraints) => typeof value === 'number' ? formatNumber(value, constraints) : '';
+const getBlurValue = (rawValue) => {
+    if (rawValue === '' || rawValue === '-' || rawValue === '.' || rawValue === '-.') {
+        return undefined;
+    }
+    const normalizedRawValue = rawValue.endsWith('.') ? rawValue.slice(0, -1) : rawValue;
+    const parsedValue = Number(normalizedRawValue);
+    return Number.isFinite(parsedValue) ? parsedValue : undefined;
+};
+const InputNumber = forwardRef(({ className, inputClassName, value: controlledValue, onChange, defaultValue, allowClear, addonAfter, allowStep = false, disabled, min, max, precision, step, inputMode = 'decimal', ...props }, ref) => {
+    const constraints = useMemo(() => ({
+        min,
+        max,
+        precision,
+        step,
+    }), [max, min, precision, step]);
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const [isFocused, setIsFocused] = useState(false);
+    const [displayValue, setDisplayValue] = useState(() => formatDisplayValue(currentValue, constraints));
+    const inputRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    useEffect(() => {
+        if (!shouldSyncDisplayValue({ isFocused, displayValue, currentValue })) {
+            return;
+        }
+        const nextDisplayValue = formatDisplayValue(currentValue, constraints);
+        if (nextDisplayValue !== displayValue) {
+            setDisplayValue(nextDisplayValue);
+        }
+    }, [constraints, currentValue, displayValue, isFocused]);
+    const emitChange = useCallback((nextValue, e, forceNotify = false) => {
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        if (forceNotify || !Object.is(currentValue, nextValue)) {
+            onChange?.(nextValue, e);
+        }
+    }, [currentValue, isControlled, onChange]);
+    const createSyntheticChangeEvent = useCallback((value) => {
+        const target = inputRef.current;
+        if (target) {
+            target.value = value;
+        }
+        return {
+            target: { value },
+            currentTarget: { value },
+        };
+    }, []);
+    const handleChange = useCallback((e) => {
+        const nextDisplayValue = e.target.value;
+        if (!isValidNumberInput(nextDisplayValue)) {
+            return;
+        }
+        setDisplayValue(nextDisplayValue);
+        const parsedValue = parseInputNumber(nextDisplayValue);
+        if (parsedValue.kind === 'empty') {
+            emitChange(undefined, e);
+            return;
+        }
+        if (parsedValue.kind === 'number') {
+            emitChange(parsedValue.value, e);
+        }
+    }, [emitChange]);
+    const handleBlur = useCallback((e) => {
+        setIsFocused(false);
+        const nextValue = getBlurValue(displayValue);
+        if (nextValue === undefined) {
+            const syntheticEvent = createSyntheticChangeEvent('');
+            setDisplayValue('');
+            emitChange(undefined, syntheticEvent);
+            props.onBlur?.(e);
+            return;
+        }
+        const normalizedValue = normalizeNumber(nextValue, constraints);
+        const nextDisplayValue = formatDisplayValue(normalizedValue, constraints);
+        const syntheticEvent = createSyntheticChangeEvent(nextDisplayValue);
+        setDisplayValue(nextDisplayValue);
+        emitChange(normalizedValue, syntheticEvent);
+        props.onBlur?.(e);
+    }, [constraints, createSyntheticChangeEvent, displayValue, emitChange, props]);
+    const handleFocus = useCallback((e) => {
+        if (disabled) {
+            return;
+        }
+        setIsFocused(true);
+        props.onFocus?.(e);
+    }, [disabled, props]);
+    const clearIcon = useMemo(() => {
+        if (!allowClear) {
+            return undefined;
+        }
+        if (typeof allowClear === 'boolean') {
+            return (_jsx("span", { className: cn('h-5 w-5 rounded-full', 'bg-muted text-foreground', 'flex items-center justify-center', 'transition-colors hover:bg-muted/80'), children: _jsx(X, { size: 12 }) }));
+        }
+        return allowClear.clearIcon;
+    }, [allowClear]);
+    const hasValue = displayValue.length > 0;
+    const showClearIcon = hasValue && clearIcon && !disabled;
+    const hasRightAccessories = showClearIcon || addonAfter || allowStep;
+    const currentParsedValue = parseInputNumber(displayValue);
+    const stepBaseValue = currentParsedValue.kind === 'number' ? currentParsedValue.value : currentValue;
+    const normalizedCurrentStepValue = typeof stepBaseValue === 'number' ? normalizeNumber(stepBaseValue, constraints) : undefined;
+    const canStep = useCallback((direction) => {
+        if (disabled) {
+            return false;
+        }
+        const nextValue = stepValue(stepBaseValue, direction, constraints);
+        return !Object.is(nextValue, normalizedCurrentStepValue);
+    }, [constraints, disabled, normalizedCurrentStepValue, stepBaseValue]);
+    const handleStep = useCallback((direction) => {
+        const nextValue = stepValue(stepBaseValue, direction, constraints);
+        const nextDisplayValue = formatDisplayValue(nextValue, constraints);
+        const syntheticEvent = createSyntheticChangeEvent(nextDisplayValue);
+        setDisplayValue(nextDisplayValue);
+        emitChange(nextValue, syntheticEvent, true);
+        inputRef.current?.focus();
+    }, [constraints, createSyntheticChangeEvent, emitChange, stepBaseValue]);
+    const handleClear = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const syntheticEvent = createSyntheticChangeEvent('');
+        setDisplayValue('');
+        emitChange(undefined, syntheticEvent, true);
+        inputRef.current?.focus();
+    }, [createSyntheticChangeEvent, emitChange]);
+    return (_jsxs("div", { className: cn('tc-ui-input-number relative w-full', className), children: [_jsx("input", { ref: setRefs, type: "text", value: displayValue, onChange: handleChange, inputMode: inputMode, className: cn('flex w-full rounded-lg px-4 py-3 text-sm', 'border transition-colors duration-200', 'placeholder:text-muted-foreground', 'focus:outline-none', showClearIcon && !allowStep && !addonAfter && 'pr-10', hasRightAccessories && 'pr-24', allowStep && addonAfter && 'pr-28', disabled ? 'cursor-not-allowed bg-muted border-border text-muted-foreground' : 'bg-background', !disabled && !hasValue && !isFocused && 'border-border', !disabled && (hasValue || isFocused) && 'border-theme', inputClassName), onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, ...props }), hasRightAccessories && (_jsxs("div", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1", children: [showClearIcon && (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: handleClear, children: clearIcon })), addonAfter && _jsx("div", { children: addonAfter }), allowStep && (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-md border border-border", children: [_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleStep('up'), disabled: !canStep('up'), className: cn('flex h-4 w-4 items-center justify-center bg-background text-foreground transition-colors', 'border-b border-border', 'disabled:cursor-not-allowed disabled:text-muted-foreground', !disabled && canStep('up') && 'hover:bg-muted'), children: _jsx(ChevronUp, { size: 12 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleStep('down'), disabled: !canStep('down'), className: cn('flex h-4 w-4 items-center justify-center bg-background text-foreground transition-colors', 'disabled:cursor-not-allowed disabled:text-muted-foreground', !disabled && canStep('down') && 'hover:bg-muted'), children: _jsx(ChevronDown, { size: 12 }) })] }))] }))] }));
+});
+InputNumber.displayName = 'InputNumber';
+export { InputNumber };

package/fe/packages/ui/react/components/InputNumber/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InputNumber';
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/InputNumber/index.js

@@ -0,0 +1 @@
+export * from './InputNumber';

package/fe/packages/ui/react/components/InputNumber/inputNumberUtils.d.ts

@@ -0,0 +1,30 @@
+export interface InputNumberConstraints {
+    min?: number;
+    max?: number;
+    precision?: number;
+    step?: number;
+}
+export type ParsedInputNumber = {
+    kind: 'empty';
+} | {
+    kind: 'incomplete';
+} | {
+    kind: 'invalid';
+} | {
+    kind: 'number';
+    value: number;
+};
+export type StepDirection = 'up' | 'down';
+export declare const isValidNumberInput: (value: string) => boolean;
+export declare const clampValue: (value: number, constraints: InputNumberConstraints) => number;
+export declare const applyPrecision: (value: number, precision?: number) => number;
+export declare const normalizeNumber: (value: number, constraints: InputNumberConstraints) => number;
+export declare const formatNumber: (value: number, constraints: InputNumberConstraints) => string;
+export declare const parseInputNumber: (value: string) => ParsedInputNumber;
+export declare const shouldSyncDisplayValue: ({ isFocused, displayValue, currentValue, }: {
+    isFocused: boolean;
+    displayValue: string;
+    currentValue: number | undefined;
+}) => boolean;
+export declare const stepValue: (currentValue: number | undefined, direction: StepDirection, constraints: InputNumberConstraints) => number;
+//# sourceMappingURL=inputNumberUtils.d.ts.map

package/fe/packages/ui/react/components/InputNumber/inputNumberUtils.js

@@ -0,0 +1,63 @@
+const isFiniteNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+export const isValidNumberInput = (value) => /^-?\d*(\.\d*)?$/.test(value);
+export const clampValue = (value, constraints) => {
+    let nextValue = value;
+    if (isFiniteNumber(constraints.min)) {
+        nextValue = Math.max(nextValue, constraints.min);
+    }
+    if (isFiniteNumber(constraints.max)) {
+        nextValue = Math.min(nextValue, constraints.max);
+    }
+    return nextValue;
+};
+export const applyPrecision = (value, precision) => {
+    if (typeof precision !== 'number' || precision < 0) {
+        return value;
+    }
+    return Number(value.toFixed(precision));
+};
+export const normalizeNumber = (value, constraints) => {
+    return clampValue(applyPrecision(value, constraints.precision), constraints);
+};
+export const formatNumber = (value, constraints) => {
+    const normalized = normalizeNumber(value, constraints);
+    if (typeof constraints.precision === 'number' && constraints.precision >= 0) {
+        return normalized.toFixed(constraints.precision);
+    }
+    return String(normalized);
+};
+export const parseInputNumber = (value) => {
+    if (value === '') {
+        return { kind: 'empty' };
+    }
+    if (value === '-' || value === '.' || value === '-.' || /^-?\d+\.$/.test(value)) {
+        return { kind: 'incomplete' };
+    }
+    if (!isValidNumberInput(value)) {
+        return { kind: 'invalid' };
+    }
+    const parsedValue = Number(value);
+    if (!Number.isFinite(parsedValue)) {
+        return { kind: 'invalid' };
+    }
+    return { kind: 'number', value: parsedValue };
+};
+export const shouldSyncDisplayValue = ({ isFocused, displayValue, currentValue, }) => {
+    if (!isFocused) {
+        return true;
+    }
+    const parsedDisplayValue = parseInputNumber(displayValue);
+    if (parsedDisplayValue.kind === 'incomplete' || parsedDisplayValue.kind === 'invalid') {
+        return false;
+    }
+    if (parsedDisplayValue.kind === 'empty') {
+        return currentValue !== undefined;
+    }
+    return !Object.is(parsedDisplayValue.value, currentValue);
+};
+export const stepValue = (currentValue, direction, constraints) => {
+    const step = constraints.step && constraints.step > 0 ? constraints.step : 1;
+    const baseValue = isFiniteNumber(currentValue) ? currentValue : 0;
+    const delta = direction === 'up' ? step : -step;
+    return normalizeNumber(baseValue + delta, constraints);
+};

package/fe/packages/ui/react/components/InputNumber/inputNumberUtils.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=inputNumberUtils.test.d.ts.map

package/fe/packages/ui/react/components/InputNumber/inputNumberUtils.test.js

@@ -0,0 +1,27 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { clampValue, formatNumber, parseInputNumber, shouldSyncDisplayValue, stepValue } from './inputNumberUtils';
+test('parseInputNumber keeps empty and transitional values unresolved', () => {
+    assert.deepEqual(parseInputNumber(''), { kind: 'empty' });
+    assert.deepEqual(parseInputNumber('-'), { kind: 'incomplete' });
+    assert.deepEqual(parseInputNumber('.'), { kind: 'incomplete' });
+    assert.deepEqual(parseInputNumber('1.'), { kind: 'incomplete' });
+    assert.deepEqual(parseInputNumber('-1.'), { kind: 'incomplete' });
+    assert.deepEqual(parseInputNumber('1.25'), { kind: 'number', value: 1.25 });
+});
+test('formatNumber applies precision and clamps boundaries', () => {
+    assert.equal(formatNumber(1.236, { precision: 2 }), '1.24');
+    assert.equal(formatNumber(12, { max: 10 }), '10');
+    assert.equal(clampValue(-3, { min: 0 }), 0);
+});
+test('stepValue respects min max precision and step', () => {
+    assert.equal(stepValue(undefined, 'up', { step: 0.25, precision: 2 }), 0.25);
+    assert.equal(stepValue(9.9, 'up', { step: 1, max: 10, precision: 1 }), 10);
+    assert.equal(stepValue(0.3, 'down', { step: 0.2, min: 0, precision: 1 }), 0.1);
+});
+test('shouldSyncDisplayValue preserves editable decimals while focused', () => {
+    assert.equal(shouldSyncDisplayValue({ isFocused: true, displayValue: '12.5', currentValue: 12.5 }), false);
+    assert.equal(shouldSyncDisplayValue({ isFocused: true, displayValue: '12.56', currentValue: 12.56 }), false);
+    assert.equal(shouldSyncDisplayValue({ isFocused: true, displayValue: '12.56', currentValue: 3.14 }), true);
+    assert.equal(shouldSyncDisplayValue({ isFocused: false, displayValue: '12.56', currentValue: 12.56 }), true);
+});