@thangnqdev/ui 0.2.0 → 0.2.2

package/src/forms/FormField.tsx

@@ -1,115 +1,115 @@
-import React, { createContext, useContext, useId, forwardRef } from 'react';
-import { cn } from '../utils/cn';
-import { Label, LabelProps } from '../typography/Label';
-
-interface FormFieldContextValue {
-  id: string;
-  labelId: string;
-  descriptionId: string;
-  errorId: string;
-  isRequired?: boolean;
-  isInvalid?: boolean;
-  isDisabled?: boolean;
-}
-
-const FormFieldContext = createContext<FormFieldContextValue | null>(null);
-
-export function useFormField() {
-  const context = useContext(FormFieldContext);
-  return context;
-}
-
-export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
-  isRequired?: boolean;
-  isInvalid?: boolean;
-  isDisabled?: boolean;
-}
-
-export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
-  ({ className, isRequired, isInvalid, isDisabled, children, ...props }, ref) => {
-    const generatedId = useId();
-    const id = props.id || generatedId;
-    const labelId = `${id}-label`;
-    const descriptionId = `${id}-description`;
-    const errorId = `${id}-error`;
-
-    return (
-      <FormFieldContext.Provider
-        value={{
-          id,
-          labelId,
-          descriptionId,
-          errorId,
-          isRequired,
-          isInvalid,
-          isDisabled,
-        }}
-      >
-        <div ref={ref} className={cn('space-y-1.5 w-full', className)} {...props}>
-          {children}
-        </div>
-      </FormFieldContext.Provider>
-    );
-  }
-);
-FormField.displayName = 'FormField';
-
-export const FormLabel = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, required, children, ...props }, ref) => {
-    const context = useFormField();
-    const isRequired = required ?? context?.isRequired;
-    const isError = context?.isInvalid;
-
-    return (
-      <Label
-        ref={ref}
-        id={context?.labelId}
-        htmlFor={context?.id}
-        required={isRequired}
-        error={isError}
-        className={className}
-        {...props}
-      >
-        {children}
-      </Label>
-    );
-  }
-);
-FormLabel.displayName = 'FormLabel';
-
-export const FormHelperText = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, children, ...props }, ref) => {
-    const context = useFormField();
-    return (
-      <p
-        ref={ref}
-        id={context?.descriptionId}
-        className={cn('text-xs text-[var(--ui-text-muted)]', className)}
-        {...props}
-      >
-        {children}
-      </p>
-    );
-  }
-);
-FormHelperText.displayName = 'FormHelperText';
-
-export const FormErrorMessage = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, children, ...props }, ref) => {
-    const context = useFormField();
-    if (!context?.isInvalid && !children) return null;
-
-    return (
-      <p
-        ref={ref}
-        id={context?.errorId}
-        role="alert"
-        className={cn('text-xs font-medium text-[var(--ui-error)]', className)}
-        {...props}
-      >
-        {children}
-      </p>
-    );
-  }
-);
-FormErrorMessage.displayName = 'FormErrorMessage';
+import React, { createContext, useContext, useId, forwardRef } from 'react';
+import { cn } from '../utils/cn';
+import { Label, LabelProps } from '../typography/Label';
+
+interface FormFieldContextValue {
+  id: string;
+  labelId: string;
+  descriptionId: string;
+  errorId: string;
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+}
+
+const FormFieldContext = createContext<FormFieldContextValue | null>(null);
+
+export function useFormField() {
+  const context = useContext(FormFieldContext);
+  return context;
+}
+
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+}
+
+export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
+  ({ className, isRequired, isInvalid, isDisabled, children, ...props }, ref) => {
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const labelId = `${id}-label`;
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+
+    return (
+      <FormFieldContext.Provider
+        value={{
+          id,
+          labelId,
+          descriptionId,
+          errorId,
+          isRequired,
+          isInvalid,
+          isDisabled,
+        }}
+      >
+        <div ref={ref} className={cn('space-y-1.5 w-full', className)} {...props}>
+          {children}
+        </div>
+      </FormFieldContext.Provider>
+    );
+  }
+);
+FormField.displayName = 'FormField';
+
+export const FormLabel = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, required, children, ...props }, ref) => {
+    const context = useFormField();
+    const isRequired = required ?? context?.isRequired;
+    const isError = context?.isInvalid;
+
+    return (
+      <Label
+        ref={ref}
+        id={context?.labelId}
+        htmlFor={context?.id}
+        required={isRequired}
+        error={isError}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Label>
+    );
+  }
+);
+FormLabel.displayName = 'FormLabel';
+
+export const FormHelperText = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const context = useFormField();
+    return (
+      <p
+        ref={ref}
+        id={context?.descriptionId}
+        className={cn('text-xs text-[var(--ui-text-muted)]', className)}
+        {...props}
+      >
+        {children}
+      </p>
+    );
+  }
+);
+FormHelperText.displayName = 'FormHelperText';
+
+export const FormErrorMessage = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const context = useFormField();
+    if (!context?.isInvalid && !children) return null;
+
+    return (
+      <p
+        ref={ref}
+        id={context?.errorId}
+        role="alert"
+        className={cn('text-xs font-medium text-[var(--ui-error)]', className)}
+        {...props}
+      >
+        {children}
+      </p>
+    );
+  }
+);
+FormErrorMessage.displayName = 'FormErrorMessage';

package/src/forms/Input.tsx

@@ -1,151 +1,151 @@
-import React, { forwardRef, useState } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import { useFormField } from './FormField';
-import { cn } from '../utils/cn';
-
-export const inputVariants = cva(
-  'w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)]/70 backdrop-blur-md text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]/70 focus-visible:border-[var(--ui-primary)] focus-visible:shadow-[0_0_16px_rgba(99,102,241,0.2)] disabled:cursor-not-allowed disabled:opacity-50 shadow-inner',
-  {
-    variants: {
-      size: {
-        sm: 'h-8 px-2.5 text-xs',
-        md: 'h-10 px-3.5 text-sm',
-        lg: 'h-12 px-4 text-base',
-      },
-      variant: {
-        default: 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]',
-        filled: 'bg-[var(--ui-bg-secondary)] border-transparent hover:bg-[var(--ui-bg-tertiary)]',
-      },
-      isInvalid: {
-        true: 'border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]/70 focus-visible:shadow-[0_0_16px_rgba(244,63,94,0.25)]',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-      variant: 'default',
-      isInvalid: false,
-    },
-  }
-);
-
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
-    VariantProps<typeof inputVariants> {
-  prefixIcon?: React.ReactNode;
-  suffixIcon?: React.ReactNode;
-  clearable?: boolean;
-  onClear?: () => void;
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      type = 'text',
-      size,
-      variant,
-      isInvalid: customInvalid,
-      prefixIcon,
-      suffixIcon,
-      clearable,
-      onClear,
-      value,
-      onChange,
-      disabled,
-      id,
-      ...props
-    },
-    ref
-  ) => {
-    const formField = useFormField();
-    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
-    const isDisabled = disabled ?? formField?.isDisabled ?? false;
-    const inputId = id || formField?.id;
-
-    const isControlled = value !== undefined;
-    const [uncontrolledVal, setUncontrolledVal] = useState(
-      props.defaultValue !== undefined ? String(props.defaultValue) : ''
-    );
-    const innerRef = React.useRef<HTMLInputElement | null>(null);
-
-    const handleRef = (node: HTMLInputElement | null) => {
-      innerRef.current = node;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
-      }
-    };
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (!isControlled) {
-        setUncontrolledVal(e.target.value);
-      }
-      onChange?.(e);
-    };
-
-    const handleClear = () => {
-      if (!isControlled && innerRef.current) {
-        innerRef.current.value = '';
-        setUncontrolledVal('');
-        const event = new Event('input', { bubbles: true });
-        innerRef.current.dispatchEvent(event);
-      }
-      onClear?.();
-    };
-
-    const hasValue = isControlled
-      ? Boolean(value)
-      : Boolean(uncontrolledVal || innerRef.current?.value);
-
-    return (
-      <div className="relative w-full flex items-center">
-        {prefixIcon && (
-          <div className="absolute left-3 flex items-center pointer-events-none text-[var(--ui-text-muted)]">
-            {prefixIcon}
-          </div>
-        )}
-
-        <input
-          ref={handleRef}
-          id={inputId}
-          type={type}
-          disabled={isDisabled}
-          {...(isControlled ? { value } : {})}
-          onChange={handleChange}
-          aria-invalid={isInvalid}
-          aria-describedby={
-            isInvalid
-              ? formField?.errorId
-              : formField?.descriptionId || undefined
-          }
-          className={cn(
-            inputVariants({ size, variant, isInvalid }),
-            prefixIcon && 'pl-9',
-            (suffixIcon || (clearable && hasValue)) && 'pr-9',
-            className
-          )}
-          {...props}
-        />
-
-        <div className="absolute right-3 flex items-center gap-1 text-[var(--ui-text-muted)]">
-          {clearable && hasValue && !isDisabled && (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="p-0.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors"
-              aria-label="Clear input"
-            >
-              <X className="w-3.5 h-3.5" />
-            </button>
-          )}
-          {suffixIcon && <span className="pointer-events-none flex items-center">{suffixIcon}</span>}
-        </div>
-      </div>
-    );
-  }
-);
-
-Input.displayName = 'Input';
+import React, { forwardRef, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { useFormField } from './FormField';
+import { cn } from '../utils/cn';
+
+export const inputVariants = cva(
+  'w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)]/70 backdrop-blur-md text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]/70 focus-visible:border-[var(--ui-primary)] focus-visible:shadow-[0_0_16px_rgba(99,102,241,0.2)] disabled:cursor-not-allowed disabled:opacity-50 shadow-inner',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-2.5 text-xs',
+        md: 'h-10 px-3.5 text-sm',
+        lg: 'h-12 px-4 text-base',
+      },
+      variant: {
+        default: 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]',
+        filled: 'bg-[var(--ui-bg-secondary)] border-transparent hover:bg-[var(--ui-bg-tertiary)]',
+      },
+      isInvalid: {
+        true: 'border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]/70 focus-visible:shadow-[0_0_16px_rgba(244,63,94,0.25)]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'default',
+      isInvalid: false,
+    },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  prefixIcon?: React.ReactNode;
+  suffixIcon?: React.ReactNode;
+  clearable?: boolean;
+  onClear?: () => void;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type = 'text',
+      size,
+      variant,
+      isInvalid: customInvalid,
+      prefixIcon,
+      suffixIcon,
+      clearable,
+      onClear,
+      value,
+      onChange,
+      disabled,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const formField = useFormField();
+    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const inputId = id || formField?.id;
+
+    const isControlled = value !== undefined;
+    const [uncontrolledVal, setUncontrolledVal] = useState(
+      props.defaultValue !== undefined ? String(props.defaultValue) : ''
+    );
+    const innerRef = React.useRef<HTMLInputElement | null>(null);
+
+    const handleRef = (node: HTMLInputElement | null) => {
+      innerRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
+      }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setUncontrolledVal(e.target.value);
+      }
+      onChange?.(e);
+    };
+
+    const handleClear = () => {
+      if (!isControlled && innerRef.current) {
+        innerRef.current.value = '';
+        setUncontrolledVal('');
+        const event = new Event('input', { bubbles: true });
+        innerRef.current.dispatchEvent(event);
+      }
+      onClear?.();
+    };
+
+    const hasValue = isControlled
+      ? Boolean(value)
+      : Boolean(uncontrolledVal || innerRef.current?.value);
+
+    return (
+      <div className="relative w-full flex items-center">
+        {prefixIcon && (
+          <div className="absolute left-3 flex items-center pointer-events-none text-[var(--ui-text-muted)]">
+            {prefixIcon}
+          </div>
+        )}
+
+        <input
+          ref={handleRef}
+          id={inputId}
+          type={type}
+          disabled={isDisabled}
+          {...(isControlled ? { value } : {})}
+          onChange={handleChange}
+          aria-invalid={isInvalid}
+          aria-describedby={
+            isInvalid
+              ? formField?.errorId
+              : formField?.descriptionId || undefined
+          }
+          className={cn(
+            inputVariants({ size, variant, isInvalid }),
+            prefixIcon && 'pl-9',
+            (suffixIcon || (clearable && hasValue)) && 'pr-9',
+            className
+          )}
+          {...props}
+        />
+
+        <div className="absolute right-3 flex items-center gap-1 text-[var(--ui-text-muted)]">
+          {clearable && hasValue && !isDisabled && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="p-0.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors"
+              aria-label="Clear input"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          )}
+          {suffixIcon && <span className="pointer-events-none flex items-center">{suffixIcon}</span>}
+        </div>
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';