@thangnqdev/ui 0.2.1 → 0.2.3

package/src/forms/PinInput.tsx

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

package/src/forms/Radio.tsx

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