@thangnqdev/ui 0.1.2 → 0.2.0

package/src/forms/NumberInput.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useState, useEffect } from 'react';
 import { Plus, Minus } from 'lucide-react';
 import { cn } from '../utils/cn';
+import { useControllableState } from '../utils/useControllableState';
 
 export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
   value?: number;
@@ -32,8 +33,12 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     },
     ref
   ) => {
-    const [internalVal, setInternalVal] = useState<number>(defaultValue);
-    const value = controlledVal !== undefined ? controlledVal : internalVal;
+    const [value, setValue] = useControllableState<number>({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: 'NumberInput',
+    });
 
     const clamp = (num: number) => {
       let clamped = Math.min(max, Math.max(min, num));
@@ -46,15 +51,13 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     const handleIncrement = () => {
       if (disabled) return;
       const next = clamp(value + step);
-      setInternalVal(next);
-      onChange?.(next);
+      setValue(next);
     };
 
     const handleDecrement = () => {
       if (disabled) return;
       const next = clamp(value - step);
-      setInternalVal(next);
-      onChange?.(next);
+      setValue(next);
     };
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -65,8 +68,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       const parsed = parseFloat(val);
       if (!isNaN(parsed)) {
         const next = clamp(parsed);
-        setInternalVal(next);
-        onChange?.(next);
+        setValue(next);
       }
     };
 
@@ -89,7 +91,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             type="button"
             disabled={disabled || value <= min}
             onClick={handleDecrement}
-            className="px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-r border-[var(--ui-border-subtle)]"
+            className="px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-r border-[var(--ui-border-subtle)] cursor-pointer"
           >
             <Minus className="w-3.5 h-3.5" />
           </button>
@@ -109,7 +111,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             type="button"
             disabled={disabled || value >= max}
             onClick={handleIncrement}
-            className="px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-l border-[var(--ui-border-subtle)]"
+            className="px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-l border-[var(--ui-border-subtle)] cursor-pointer"
           >
             <Plus className="w-3.5 h-3.5" />
           </button>
@@ -139,7 +141,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             type="button"
             disabled={disabled || value >= max}
             onClick={handleIncrement}
-            className="px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-t text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors"
+            className="px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-t text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors cursor-pointer"
           >
             <Plus className="w-3 h-3" />
           </button>
@@ -147,7 +149,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             type="button"
             disabled={disabled || value <= min}
             onClick={handleDecrement}
-            className="px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-b text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors"
+            className="px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-b text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors cursor-pointer"
           >
             <Minus className="w-3 h-3" />
           </button>
@@ -195,22 +197,34 @@ export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(
     const symbol = currencySymbol || (currency === 'VND' ? '₫' : currency === 'EUR' ? '€' : '$');
     const isSuffix = position === 'suffix' || currency === 'VND';
 
-    const [internalVal, setInternalVal] = useState<number>(defaultValue);
-    const value = controlledVal !== undefined ? controlledVal : internalVal;
-    const [displayVal, setDisplayVal] = useState<string>(formatCurrencyString(value));
+    const [value, setValue, isControlled] = useControllableState<number>({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: 'CurrencyInput',
+    });
+
+    const [internalInputString, setInternalInputString] = useState<string>(formatCurrencyString(value));
 
+    // When value changes, update internal display for uncontrolled mode
     useEffect(() => {
-      setDisplayVal(formatCurrencyString(value));
-    }, [value]);
+      if (!isControlled) {
+        setInternalInputString(formatCurrencyString(value));
+      }
+    }, [value, isControlled]);
+
+    // For controlled inputs, display value is ALWAYS pure derived from the source-of-truth prop
+    const displayVal = isControlled ? formatCurrencyString(value) : internalInputString;
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const raw = e.target.value.replace(/[^0-9.]/g, '');
       const parsed = parseFloat(raw);
       const num = isNaN(parsed) ? 0 : parsed;
 
-      setDisplayVal(raw ? formatCurrencyString(num) : '');
-      setInternalVal(num);
-      onChange?.(num);
+      if (!isControlled) {
+        setInternalInputString(raw ? formatCurrencyString(num) : '');
+      }
+      setValue(num);
     };
 
     return (

package/src/forms/PasswordInput.tsx

@@ -1,35 +1,35 @@
-import React, { forwardRef, useState } from 'react';
-import { Eye, EyeOff } from 'lucide-react';
-import { Input, InputProps } from './Input';
-
-export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffixIcon'> {
-  showToggle?: boolean;
-}
-
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  ({ showToggle = true, ...props }, ref) => {
-    const [showPassword, setShowPassword] = useState(false);
-
-    return (
-      <Input
-        ref={ref}
-        type={showPassword ? 'text' : 'password'}
-        suffixIcon={
-          showToggle ? (
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="p-1 rounded hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] pointer-events-auto transition-colors"
-              aria-label={showPassword ? 'Hide password' : 'Show password'}
-            >
-              {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-            </button>
-          ) : undefined
-        }
-        {...props}
-      />
-    );
-  }
-);
-
-PasswordInput.displayName = 'PasswordInput';
+import React, { forwardRef, useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { Input, InputProps } from './Input';
+
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffixIcon'> {
+  showToggle?: boolean;
+}
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ showToggle = true, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+      <Input
+        ref={ref}
+        type={showPassword ? 'text' : 'password'}
+        suffixIcon={
+          showToggle ? (
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="p-1 rounded hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] pointer-events-auto transition-colors"
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+            >
+              {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+            </button>
+          ) : undefined
+        }
+        {...props}
+      />
+    );
+  }
+);
+
+PasswordInput.displayName = 'PasswordInput';

package/src/forms/PinInput.tsx

@@ -1,125 +1,139 @@
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
-import { cn } from '../utils/cn';
-
-export interface PinInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  length?: number;
-  value?: string;
-  defaultValue?: string;
-  onChange?: (val: string) => void;
-  onComplete?: (val: string) => void;
-  mask?: boolean;
-  disabled?: boolean;
-  isInvalid?: boolean;
-  autoFocus?: boolean;
-}
-
-export const PinInput = forwardRef<HTMLDivElement, PinInputProps>(
-  (
-    {
-      className,
-      length = 4,
-      value: controlledValue,
-      defaultValue = '',
-      onChange,
-      onComplete,
-      mask = false,
-      disabled = false,
-      isInvalid = false,
-      autoFocus = false,
-      ...props
-    },
-    ref
-  ) => {
-    const [pins, setPins] = useState<string[]>(() => {
-      const initial = (controlledValue !== undefined ? controlledValue : defaultValue).slice(0, length);
-      return Array.from({ length }, (_, i) => initial[i] || '');
-    });
-
-    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
-
-    useEffect(() => {
-      if (controlledValue !== undefined) {
-        setPins(Array.from({ length }, (_, i) => controlledValue[i] || ''));
-      }
-    }, [controlledValue, length]);
-
-    useEffect(() => {
-      if (autoFocus && inputsRef.current[0]) {
-        inputsRef.current[0].focus();
-      }
-    }, [autoFocus]);
-
-    const handleDigitChange = (index: number, val: string) => {
-      const sanitized = val.replace(/[^0-9a-zA-Z]/g, '').slice(-1);
-      const newPins = [...pins];
-      newPins[index] = sanitized;
-      setPins(newPins);
-
-      const combined = newPins.join('');
-      onChange?.(combined);
-
-      if (sanitized && index < length - 1) {
-        inputsRef.current[index + 1]?.focus();
-      }
-
-      if (combined.length === length && !newPins.includes('')) {
-        onComplete?.(combined);
-      }
-    };
-
-    const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Backspace' && !pins[index] && index > 0) {
-        inputsRef.current[index - 1]?.focus();
-      }
-    };
-
-    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
-      e.preventDefault();
-      const pasted = e.clipboardData.getData('text').slice(0, length);
-      if (!pasted) return;
-
-      const newPins = Array.from({ length }, (_, i) => pasted[i] || '');
-      setPins(newPins);
-
-      const combined = newPins.join('');
-      onChange?.(combined);
-
-      const nextEmptyIndex = newPins.findIndex((p) => !p);
-      const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex;
-      inputsRef.current[focusIndex]?.focus();
-
-      if (combined.length === length && !newPins.includes('')) {
-        onComplete?.(combined);
-      }
-    };
-
-    return (
-      <div ref={ref} role="group" aria-label="PIN Code Input" className={cn('flex items-center gap-2', className)} {...props}>
-        {Array.from({ length }).map((_, index) => (
-          <input
-            key={index}
-            ref={(el) => {
-              inputsRef.current[index] = el;
-            }}
-            type={mask ? 'password' : 'text'}
-            inputMode="numeric"
-            maxLength={1}
-            disabled={disabled}
-            value={pins[index]}
-            onChange={(e) => handleDigitChange(index, e.target.value)}
-            onKeyDown={(e) => handleKeyDown(index, e)}
-            onPaste={handlePaste}
-            className={cn(
-              'w-11 h-12 text-center text-lg font-bold font-mono rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:opacity-50 disabled:cursor-not-allowed',
-              isInvalid
-                ? 'border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]'
-                : 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]'
-            )}
-          />
-        ))}
-      </div>
-    );
-  }
-);
-
-PinInput.displayName = 'PinInput';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import { cn } from '../utils/cn';
+
+export interface PinInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (val: string) => void;
+  onComplete?: (val: string) => void;
+  mask?: boolean;
+  disabled?: boolean;
+  isInvalid?: boolean;
+  autoFocus?: boolean;
+}
+
+export const PinInput = forwardRef<HTMLDivElement, PinInputProps>(
+  (
+    {
+      className,
+      length = 4,
+      value: controlledValue,
+      defaultValue = '',
+      onChange,
+      onComplete,
+      mask = false,
+      disabled = false,
+      isInvalid = false,
+      autoFocus = false,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internalPins, setInternalPins] = useState<string[]>(() => {
+      const initial = (controlledValue !== undefined ? controlledValue : defaultValue).slice(0, length);
+      return Array.from({ length }, (_, i) => initial[i] || '');
+    });
+
+    const pins = isControlled
+      ? Array.from({ length }, (_, i) => controlledValue[i] || '')
+      : internalPins;
+
+    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
+
+    useEffect(() => {
+      if (autoFocus && inputsRef.current[0]) {
+        inputsRef.current[0].focus();
+      }
+    }, [autoFocus]);
+
+    const handleDigitChange = (index: number, val: string) => {
+      const sanitized = val.replace(/[^0-9a-zA-Z]/g, '').slice(-1);
+      const newPins = [...pins];
+      newPins[index] = sanitized;
+      if (!isControlled) {
+        setInternalPins(newPins);
+      }
+
+      const combined = newPins.join('');
+      onChange?.(combined);
+
+      if (sanitized && index < length - 1) {
+        inputsRef.current[index + 1]?.focus();
+      }
+
+      if (combined.length === length && !newPins.includes('')) {
+        onComplete?.(combined);
+      }
+    };
+
+    const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Backspace') {
+        if (!pins[index] && index > 0) {
+          const newPins = [...pins];
+          newPins[index - 1] = '';
+          if (!isControlled) setInternalPins(newPins);
+          onChange?.(newPins.join(''));
+          inputsRef.current[index - 1]?.focus();
+        }
+      } else if (e.key === 'ArrowLeft' && index > 0) {
+        e.preventDefault();
+        inputsRef.current[index - 1]?.focus();
+      } else if (e.key === 'ArrowRight' && index < length - 1) {
+        e.preventDefault();
+        inputsRef.current[index + 1]?.focus();
+      }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData('text').replace(/[^0-9a-zA-Z]/g, '').slice(0, length);
+      if (!pasted) return;
+
+      const newPins = Array.from({ length }, (_, i) => pasted[i] || '');
+      if (!isControlled) setInternalPins(newPins);
+
+      const combined = newPins.join('');
+      onChange?.(combined);
+
+      const nextEmptyIndex = newPins.findIndex((p) => !p);
+      const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex;
+      inputsRef.current[focusIndex]?.focus();
+
+      if (combined.length === length && !newPins.includes('')) {
+        onComplete?.(combined);
+      }
+    };
+
+    return (
+      <div ref={ref} role="group" aria-label="PIN Code Input" className={cn('flex items-center gap-2', className)} {...props}>
+        {Array.from({ length }).map((_, index) => (
+          <input
+            key={index}
+            ref={(el) => {
+              inputsRef.current[index] = el;
+            }}
+            type={mask ? 'password' : 'text'}
+            inputMode="numeric"
+            maxLength={1}
+            disabled={disabled}
+            aria-label={`Digit ${index + 1} of ${length}`}
+            value={pins[index]}
+            onChange={(e) => handleDigitChange(index, e.target.value)}
+            onKeyDown={(e) => handleKeyDown(index, e)}
+            onPaste={handlePaste}
+            className={cn(
+              'w-11 h-12 text-center text-lg font-bold font-mono rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:opacity-50 disabled:cursor-not-allowed',
+              isInvalid
+                ? 'border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]'
+                : 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]'
+            )}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+
+PinInput.displayName = 'PinInput';