@thangnqdev/ui 0.2.1 → 0.2.2

package/src/forms/NumberInput.tsx

@@ -1,262 +1,262 @@
-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;
-  defaultValue?: number;
-  onChange?: (val: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  precision?: number;
-  size?: 'sm' | 'md' | 'lg';
-  stepperPosition?: 'right' | 'split';
-}
-
-export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  (
-    {
-      value: controlledVal,
-      defaultValue = 0,
-      onChange,
-      min = -Infinity,
-      max = Infinity,
-      step = 1,
-      precision = 0,
-      size = 'md',
-      stepperPosition = 'right',
-      disabled = false,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const [value, setValue] = useControllableState<number>({
-      value: controlledVal,
-      defaultValue,
-      onChange,
-      name: 'NumberInput',
-    });
-
-    const clamp = (num: number) => {
-      let clamped = Math.min(max, Math.max(min, num));
-      if (precision > 0) {
-        clamped = parseFloat(clamped.toFixed(precision));
-      }
-      return clamped;
-    };
-
-    const handleIncrement = () => {
-      if (disabled) return;
-      const next = clamp(value + step);
-      setValue(next);
-    };
-
-    const handleDecrement = () => {
-      if (disabled) return;
-      const next = clamp(value - step);
-      setValue(next);
-    };
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const val = e.target.value;
-      if (val === '' || val === '-') {
-        return;
-      }
-      const parsed = parseFloat(val);
-      if (!isNaN(parsed)) {
-        const next = clamp(parsed);
-        setValue(next);
-      }
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        handleIncrement();
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        handleDecrement();
-      }
-    };
-
-    const heightClass = size === 'sm' ? 'h-8 text-xs' : size === 'lg' ? 'h-12 text-base' : 'h-10 text-sm';
-
-    if (stepperPosition === 'split') {
-      return (
-        <div className={cn('inline-flex items-center rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] overflow-hidden shadow-inner', className)}>
-          <button
-            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)] cursor-pointer"
-          >
-            <Minus className="w-3.5 h-3.5" />
-          </button>
-
-          <input
-            ref={ref}
-            type="number"
-            value={value}
-            disabled={disabled}
-            onChange={handleInputChange}
-            onKeyDown={handleKeyDown}
-            className={cn('w-20 text-center font-mono font-semibold bg-transparent text-[var(--ui-text-primary)] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', heightClass)}
-            {...props}
-          />
-
-          <button
-            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)] cursor-pointer"
-          >
-            <Plus className="w-3.5 h-3.5" />
-          </button>
-        </div>
-      );
-    }
-
-    return (
-      <div className={cn('relative w-full inline-flex items-center', className)}>
-        <input
-          ref={ref}
-          type="number"
-          value={value}
-          disabled={disabled}
-          onChange={handleInputChange}
-          onKeyDown={handleKeyDown}
-          className={cn(
-            'w-full rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] px-3.5 pr-10 font-mono font-semibold text-[var(--ui-text-primary)] transition-all shadow-inner focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/50 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-            heightClass,
-            disabled && 'opacity-50 cursor-not-allowed'
-          )}
-          {...props}
-        />
-
-        <div className="absolute right-1 top-1 bottom-1 flex flex-col justify-center border-l border-[var(--ui-border-subtle)] pl-1 pr-1">
-          <button
-            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 cursor-pointer"
-          >
-            <Plus className="w-3 h-3" />
-          </button>
-          <button
-            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 cursor-pointer"
-          >
-            <Minus className="w-3 h-3" />
-          </button>
-        </div>
-      </div>
-    );
-  }
-);
-NumberInput.displayName = 'NumberInput';
-
-/* -------------------------------------------------------------------------------------------------
- * CurrencyInput Component
- * -----------------------------------------------------------------------------------------------*/
-export interface CurrencyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> {
-  value?: number;
-  defaultValue?: number;
-  onChange?: (val: number) => void;
-  currency?: 'USD' | 'VND' | 'EUR' | string;
-  currencySymbol?: string;
-  position?: 'prefix' | 'suffix';
-}
-
-export function formatCurrencyString(val: number, separator = ','): string {
-  if (isNaN(val)) return '0';
-  const parts = val.toString().split('.');
-  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
-  return parts.join('.');
-}
-
-export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(
-  (
-    {
-      value: controlledVal,
-      defaultValue = 0,
-      onChange,
-      currency = 'USD',
-      currencySymbol,
-      position = 'prefix',
-      disabled = false,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const symbol = currencySymbol || (currency === 'VND' ? '₫' : currency === 'EUR' ? '€' : '$');
-    const isSuffix = position === 'suffix' || currency === 'VND';
-
-    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(() => {
-      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;
-
-      if (!isControlled) {
-        setInternalInputString(raw ? formatCurrencyString(num) : '');
-      }
-      setValue(num);
-    };
-
-    return (
-      <div className={cn('relative w-full flex items-center', className)}>
-        {!isSuffix && (
-          <span className="absolute left-3.5 text-sm font-bold text-[var(--ui-text-muted)] pointer-events-none font-mono">
-            {symbol}
-          </span>
-        )}
-
-        <input
-          ref={ref}
-          type="text"
-          value={displayVal}
-          disabled={disabled}
-          onChange={handleInputChange}
-          className={cn(
-            'w-full h-10 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] px-3.5 font-mono font-bold text-sm text-[var(--ui-text-primary)] transition-all shadow-inner focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/50',
-            !isSuffix && 'pl-8',
-            isSuffix && 'pr-12',
-            disabled && 'opacity-50 cursor-not-allowed'
-          )}
-          {...props}
-        />
-
-        {isSuffix && (
-          <span className="absolute right-3.5 text-xs font-bold text-[var(--ui-text-muted)] pointer-events-none font-mono uppercase">
-            {currency}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
-CurrencyInput.displayName = 'CurrencyInput';
+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;
+  defaultValue?: number;
+  onChange?: (val: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+  size?: 'sm' | 'md' | 'lg';
+  stepperPosition?: 'right' | 'split';
+}
+
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      value: controlledVal,
+      defaultValue = 0,
+      onChange,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      precision = 0,
+      size = 'md',
+      stepperPosition = 'right',
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useControllableState<number>({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: 'NumberInput',
+    });
+
+    const clamp = (num: number) => {
+      let clamped = Math.min(max, Math.max(min, num));
+      if (precision > 0) {
+        clamped = parseFloat(clamped.toFixed(precision));
+      }
+      return clamped;
+    };
+
+    const handleIncrement = () => {
+      if (disabled) return;
+      const next = clamp(value + step);
+      setValue(next);
+    };
+
+    const handleDecrement = () => {
+      if (disabled) return;
+      const next = clamp(value - step);
+      setValue(next);
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value;
+      if (val === '' || val === '-') {
+        return;
+      }
+      const parsed = parseFloat(val);
+      if (!isNaN(parsed)) {
+        const next = clamp(parsed);
+        setValue(next);
+      }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        handleIncrement();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        handleDecrement();
+      }
+    };
+
+    const heightClass = size === 'sm' ? 'h-8 text-xs' : size === 'lg' ? 'h-12 text-base' : 'h-10 text-sm';
+
+    if (stepperPosition === 'split') {
+      return (
+        <div className={cn('inline-flex items-center rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] overflow-hidden shadow-inner', className)}>
+          <button
+            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)] cursor-pointer"
+          >
+            <Minus className="w-3.5 h-3.5" />
+          </button>
+
+          <input
+            ref={ref}
+            type="number"
+            value={value}
+            disabled={disabled}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            className={cn('w-20 text-center font-mono font-semibold bg-transparent text-[var(--ui-text-primary)] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', heightClass)}
+            {...props}
+          />
+
+          <button
+            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)] cursor-pointer"
+          >
+            <Plus className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <div className={cn('relative w-full inline-flex items-center', className)}>
+        <input
+          ref={ref}
+          type="number"
+          value={value}
+          disabled={disabled}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          className={cn(
+            'w-full rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] px-3.5 pr-10 font-mono font-semibold text-[var(--ui-text-primary)] transition-all shadow-inner focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/50 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+            heightClass,
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+          {...props}
+        />
+
+        <div className="absolute right-1 top-1 bottom-1 flex flex-col justify-center border-l border-[var(--ui-border-subtle)] pl-1 pr-1">
+          <button
+            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 cursor-pointer"
+          >
+            <Plus className="w-3 h-3" />
+          </button>
+          <button
+            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 cursor-pointer"
+          >
+            <Minus className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+NumberInput.displayName = 'NumberInput';
+
+/* -------------------------------------------------------------------------------------------------
+ * CurrencyInput Component
+ * -----------------------------------------------------------------------------------------------*/
+export interface CurrencyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> {
+  value?: number;
+  defaultValue?: number;
+  onChange?: (val: number) => void;
+  currency?: 'USD' | 'VND' | 'EUR' | string;
+  currencySymbol?: string;
+  position?: 'prefix' | 'suffix';
+}
+
+export function formatCurrencyString(val: number, separator = ','): string {
+  if (isNaN(val)) return '0';
+  const parts = val.toString().split('.');
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+  return parts.join('.');
+}
+
+export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(
+  (
+    {
+      value: controlledVal,
+      defaultValue = 0,
+      onChange,
+      currency = 'USD',
+      currencySymbol,
+      position = 'prefix',
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const symbol = currencySymbol || (currency === 'VND' ? '₫' : currency === 'EUR' ? '€' : '$');
+    const isSuffix = position === 'suffix' || currency === 'VND';
+
+    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(() => {
+      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;
+
+      if (!isControlled) {
+        setInternalInputString(raw ? formatCurrencyString(num) : '');
+      }
+      setValue(num);
+    };
+
+    return (
+      <div className={cn('relative w-full flex items-center', className)}>
+        {!isSuffix && (
+          <span className="absolute left-3.5 text-sm font-bold text-[var(--ui-text-muted)] pointer-events-none font-mono">
+            {symbol}
+          </span>
+        )}
+
+        <input
+          ref={ref}
+          type="text"
+          value={displayVal}
+          disabled={disabled}
+          onChange={handleInputChange}
+          className={cn(
+            'w-full h-10 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] px-3.5 font-mono font-bold text-sm text-[var(--ui-text-primary)] transition-all shadow-inner focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/50',
+            !isSuffix && 'pl-8',
+            isSuffix && 'pr-12',
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+          {...props}
+        />
+
+        {isSuffix && (
+          <span className="absolute right-3.5 text-xs font-bold text-[var(--ui-text-muted)] pointer-events-none font-mono uppercase">
+            {currency}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+CurrencyInput.displayName = 'CurrencyInput';

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