@thangnqdev/ui 0.1.0

package/src/forms/NumberInput.tsx

@@ -0,0 +1,248 @@
+import React, { forwardRef, useState, useEffect } from 'react';
+import { Plus, Minus } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+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 [internalVal, setInternalVal] = useState<number>(defaultValue);
+    const value = controlledVal !== undefined ? controlledVal : internalVal;
+
+    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);
+      setInternalVal(next);
+      onChange?.(next);
+    };
+
+    const handleDecrement = () => {
+      if (disabled) return;
+      const next = clamp(value - step);
+      setInternalVal(next);
+      onChange?.(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);
+        setInternalVal(next);
+        onChange?.(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)]"
+          >
+            <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)]"
+          >
+            <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"
+          >
+            <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"
+          >
+            <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 [internalVal, setInternalVal] = useState<number>(defaultValue);
+    const value = controlledVal !== undefined ? controlledVal : internalVal;
+    const [displayVal, setDisplayVal] = useState<string>(formatCurrencyString(value));
+
+    useEffect(() => {
+      setDisplayVal(formatCurrencyString(value));
+    }, [value]);
+
+    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);
+    };
+
+    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

@@ -0,0 +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';

package/src/forms/PinInput.tsx

@@ -0,0 +1,125 @@
+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';

package/src/forms/Radio.tsx

@@ -0,0 +1,142 @@
+import React, { forwardRef, createContext, useContext } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+interface RadioGroupContextType {
+  name?: string;
+  value?: string;
+  onChange?: (val: string) => void;
+  disabled?: boolean;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextType | null>(null);
+
+export const radioVariants = cva(
+  'peer shrink-0 rounded-full border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 transition-all cursor-pointer flex items-center justify-center',
+  {
+    variants: {
+      size: {
+        sm: 'w-4 h-4',
+        md: 'w-5 h-5',
+        lg: 'w-6 h-6',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export interface RadioProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof radioVariants> {
+  label?: React.ReactNode;
+  value: string;
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ className, size, label, value, checked, disabled, id, onChange, ...props }, ref) => {
+    const group = useContext(RadioGroupContext);
+    const isChecked = checked ?? (group?.value !== undefined ? group.value === value : false);
+    const isDisabled = disabled ?? group?.disabled ?? false;
+    const name = props.name || group?.name;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e);
+      if (group?.onChange) {
+        group.onChange(value);
+      }
+    };
+
+    return (
+      <label className={cn('inline-flex items-center gap-2 select-none cursor-pointer', isDisabled && 'cursor-not-allowed opacity-50')}>
+        <div className="relative flex items-center justify-center">
+          <input
+            ref={ref}
+            type="radio"
+            name={name}
+            value={value}
+            id={id}
+            disabled={isDisabled}
+            checked={isChecked}
+            onChange={handleChange}
+            className="sr-only peer"
+            {...props}
+          />
+          <div
+            className={cn(
+              radioVariants({ size }),
+              isChecked && 'border-[var(--ui-primary)]',
+              className
+            )}
+          >
+            {isChecked && (
+              <span className="w-2.5 h-2.5 rounded-full bg-[var(--ui-primary)] animate-in zoom-in-75 duration-150" />
+            )}
+          </div>
+        </div>
+        {label && <span className="text-sm font-medium text-[var(--ui-text-primary)]">{label}</span>}
+      </label>
+    );
+  }
+);
+Radio.displayName = 'Radio';
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+}
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      className,
+      name,
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      orientation = 'vertical',
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [val, setVal] = React.useState(defaultValue || '');
+    const currentValue = controlledValue !== undefined ? controlledValue : val;
+
+    const handleChange = (newValue: string) => {
+      setVal(newValue);
+      onValueChange?.(newValue);
+    };
+
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          name,
+          value: currentValue,
+          onChange: handleChange,
+          disabled,
+        }}
+      >
+        <div
+          ref={ref}
+          role="radiogroup"
+          className={cn(
+            'flex gap-2',
+            orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap items-center',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+RadioGroup.displayName = 'RadioGroup';

package/src/forms/RangeSlider.tsx

@@ -0,0 +1,111 @@
+import React, { forwardRef, useState } from 'react';
+import { cn } from '../utils/cn';
+
+export interface RangeSliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: [number, number];
+  defaultValue?: [number, number];
+  onChange?: (val: [number, number]) => void;
+  showValue?: boolean;
+  formatValue?: (val: number) => string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
+  (
+    {
+      min = 0,
+      max = 100,
+      step = 1,
+      value: controlledValue,
+      defaultValue = [20, 80],
+      onChange,
+      showValue = false,
+      formatValue = (v) => `${v}`,
+      className,
+      disabled = false,
+    },
+    ref
+  ) => {
+    const [stateValue, setStateValue] = useState<[number, number]>(defaultValue);
+    const [minVal, maxVal] = controlledValue || stateValue;
+
+    const minPercentage = Math.min(100, Math.max(0, ((minVal - min) / (max - min)) * 100));
+    const maxPercentage = Math.min(100, Math.max(0, ((maxVal - min) / (max - min)) * 100));
+
+    const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = Math.min(Number(e.target.value), maxVal - step);
+      setStateValue([val, maxVal]);
+      onChange?.([val, maxVal]);
+    };
+
+    const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = Math.max(Number(e.target.value), minVal + step);
+      setStateValue([minVal, val]);
+      onChange?.([minVal, val]);
+    };
+
+    return (
+      <div ref={ref} className={cn('w-full flex items-center gap-4', className)}>
+        <div className="relative w-full flex items-center h-6 select-none touch-none">
+          {/* Base rail */}
+          <div className="w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative">
+            {/* Active Range Fill */}
+            <div
+              className="absolute h-full bg-[var(--ui-primary)]"
+              style={{
+                left: `${minPercentage}%`,
+                width: `${maxPercentage - minPercentage}%`,
+              }}
+            />
+          </div>
+
+          {/* Min thumb input */}
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={minVal}
+            disabled={disabled}
+            onChange={handleMinChange}
+            className="absolute inset-0 w-full h-full opacity-0 pointer-events-auto cursor-pointer z-20"
+          />
+
+          {/* Max thumb input */}
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={maxVal}
+            disabled={disabled}
+            onChange={handleMaxChange}
+            className="absolute inset-0 w-full h-full opacity-0 pointer-events-auto cursor-pointer z-30"
+          />
+
+          {/* Visual Thumbs */}
+          <div
+            className="absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none -translate-x-1/2 z-10"
+            style={{ left: `${minPercentage}%` }}
+          />
+          <div
+            className="absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none -translate-x-1/2 z-10"
+            style={{ left: `${maxPercentage}%` }}
+          />
+        </div>
+
+        {showValue && (
+          <span className="text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[5rem] text-right">
+            {formatValue(minVal)} - {formatValue(maxVal)}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+RangeSlider.displayName = 'RangeSlider';

package/src/forms/SearchInput.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import { Search } from 'lucide-react';
+import { Input, InputProps } from './Input';
+import { Kbd } from '../typography/Kbd';
+
+export interface SearchInputProps extends Omit<InputProps, 'type' | 'prefixIcon'> {
+  shortcut?: string;
+}
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ shortcut, clearable = true, suffixIcon, ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        type="search"
+        clearable={clearable}
+        prefixIcon={<Search className="w-4 h-4" />}
+        suffixIcon={
+          shortcut ? (
+            <div className="flex items-center gap-1">
+              <Kbd>{shortcut}</Kbd>
+              {suffixIcon}
+            </div>
+          ) : (
+            suffixIcon
+          )
+        }
+        {...props}
+      />
+    );
+  }
+);
+
+SearchInput.displayName = 'SearchInput';