@thangnqdev/ui 0.2.0 → 0.2.2

package/src/forms/Select.tsx

@@ -1,103 +1,103 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { ChevronDown } from 'lucide-react';
-import { useFormField } from './FormField';
-import { cn } from '../utils/cn';
-
-export const selectVariants = cva(
-  'w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 appearance-none pr-10',
-  {
-    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)]',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-      variant: 'default',
-      isInvalid: false,
-    },
-  }
-);
-
-export interface SelectOption {
-  value: string | number;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface SelectProps
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>,
-    VariantProps<typeof selectVariants> {
-  options?: SelectOption[];
-  placeholder?: string;
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  (
-    {
-      className,
-      size,
-      variant,
-      isInvalid: customInvalid,
-      options,
-      placeholder,
-      disabled,
-      children,
-      id,
-      ...props
-    },
-    ref
-  ) => {
-    const formField = useFormField();
-    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
-    const isDisabled = disabled ?? formField?.isDisabled ?? false;
-    const inputId = id || formField?.id;
-
-    return (
-      <div className="relative w-full flex items-center">
-        <select
-          ref={ref}
-          id={inputId}
-          disabled={isDisabled}
-          aria-invalid={isInvalid}
-          aria-describedby={
-            isInvalid
-              ? formField?.errorId
-              : formField?.descriptionId || undefined
-          }
-          className={cn(selectVariants({ size, variant, isInvalid }), className)}
-          {...props}
-        >
-          {placeholder && (
-            <option value="" disabled hidden>
-              {placeholder}
-            </option>
-          )}
-          {options
-            ? options.map((opt) => (
-                <option key={opt.value} value={opt.value} disabled={opt.disabled}>
-                  {opt.label}
-                </option>
-              ))
-            : children}
-        </select>
-        <div className="absolute right-3 flex items-center pointer-events-none text-[var(--ui-text-muted)]">
-          <ChevronDown className="w-4 h-4" />
-        </div>
-      </div>
-    );
-  }
-);
-
-Select.displayName = 'Select';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+import { useFormField } from './FormField';
+import { cn } from '../utils/cn';
+
+export const selectVariants = cva(
+  'w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 appearance-none pr-10',
+  {
+    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)]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'default',
+      isInvalid: false,
+    },
+  }
+);
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>,
+    VariantProps<typeof selectVariants> {
+  options?: SelectOption[];
+  placeholder?: string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      className,
+      size,
+      variant,
+      isInvalid: customInvalid,
+      options,
+      placeholder,
+      disabled,
+      children,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const formField = useFormField();
+    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const inputId = id || formField?.id;
+
+    return (
+      <div className="relative w-full flex items-center">
+        <select
+          ref={ref}
+          id={inputId}
+          disabled={isDisabled}
+          aria-invalid={isInvalid}
+          aria-describedby={
+            isInvalid
+              ? formField?.errorId
+              : formField?.descriptionId || undefined
+          }
+          className={cn(selectVariants({ size, variant, isInvalid }), className)}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled hidden>
+              {placeholder}
+            </option>
+          )}
+          {options
+            ? options.map((opt) => (
+                <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                  {opt.label}
+                </option>
+              ))
+            : children}
+        </select>
+        <div className="absolute right-3 flex items-center pointer-events-none text-[var(--ui-text-muted)]">
+          <ChevronDown className="w-4 h-4" />
+        </div>
+      </div>
+    );
+  }
+);
+
+Select.displayName = 'Select';

package/src/forms/Slider.tsx

@@ -1,85 +1,85 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> {
-  value?: number;
-  defaultValue?: number;
-  min?: number;
-  max?: number;
-  step?: number;
-  showValue?: boolean;
-  formatValue?: (val: number) => string;
-  onChange?: (val: number) => void;
-}
-
-export const Slider = forwardRef<HTMLInputElement, SliderProps>(
-  (
-    {
-      className,
-      value: controlledValue,
-      defaultValue = 0,
-      min = 0,
-      max = 100,
-      step = 1,
-      showValue = false,
-      formatValue = (v) => `${v}`,
-      onChange,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    const [val, setVal] = React.useState<number>(defaultValue);
-    const currentValue = controlledValue !== undefined ? controlledValue : val;
-
-    const percentage = Math.min(100, Math.max(0, ((currentValue - min) / (max - min)) * 100));
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const num = Number(e.target.value);
-      setVal(num);
-      onChange?.(num);
-    };
-
-    return (
-      <div className={cn('w-full flex items-center gap-4', className)}>
-        <div className="relative w-full flex items-center h-6 select-none touch-none">
-          {/* Rail */}
-          <div className="w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative">
-            {/* Fill Track */}
-            <div
-              className="h-full bg-[var(--ui-primary)] transition-all duration-75"
-              style={{ width: `${percentage}%` }}
-            />
-          </div>
-
-          <input
-            ref={ref}
-            type="range"
-            min={min}
-            max={max}
-            step={step}
-            value={currentValue}
-            disabled={disabled}
-            onChange={handleChange}
-            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
-            {...props}
-          />
-
-          {/* Thumb visual */}
-          <div
-            className="absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none transition-transform duration-75 -translate-x-1/2"
-            style={{ left: `${percentage}%` }}
-          />
-        </div>
-
-        {showValue && (
-          <span className="text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[2.5rem] text-right">
-            {formatValue(currentValue)}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
-
-Slider.displayName = 'Slider';
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  showValue?: boolean;
+  formatValue?: (val: number) => string;
+  onChange?: (val: number) => void;
+}
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  (
+    {
+      className,
+      value: controlledValue,
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      showValue = false,
+      formatValue = (v) => `${v}`,
+      onChange,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [val, setVal] = React.useState<number>(defaultValue);
+    const currentValue = controlledValue !== undefined ? controlledValue : val;
+
+    const percentage = Math.min(100, Math.max(0, ((currentValue - min) / (max - min)) * 100));
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const num = Number(e.target.value);
+      setVal(num);
+      onChange?.(num);
+    };
+
+    return (
+      <div className={cn('w-full flex items-center gap-4', className)}>
+        <div className="relative w-full flex items-center h-6 select-none touch-none">
+          {/* Rail */}
+          <div className="w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative">
+            {/* Fill Track */}
+            <div
+              className="h-full bg-[var(--ui-primary)] transition-all duration-75"
+              style={{ width: `${percentage}%` }}
+            />
+          </div>
+
+          <input
+            ref={ref}
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={currentValue}
+            disabled={disabled}
+            onChange={handleChange}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+            {...props}
+          />
+
+          {/* Thumb visual */}
+          <div
+            className="absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none transition-transform duration-75 -translate-x-1/2"
+            style={{ left: `${percentage}%` }}
+          />
+        </div>
+
+        {showValue && (
+          <span className="text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[2.5rem] text-right">
+            {formatValue(currentValue)}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+Slider.displayName = 'Slider';

package/src/forms/Textarea.tsx

@@ -1,114 +1,114 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { useFormField } from './FormField';
-import { cn } from '../utils/cn';
-
-export const textareaVariants = cva(
-  'w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] p-3 text-sm text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]',
-  {
-    variants: {
-      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)]',
-        false: '',
-      },
-      resize: {
-        none: 'resize-none',
-        vertical: 'resize-y',
-        horizontal: 'resize-x',
-        both: 'resize',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      isInvalid: false,
-      resize: 'vertical',
-    },
-  }
-);
-
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    VariantProps<typeof textareaVariants> {
-  autoResize?: boolean;
-}
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      className,
-      variant,
-      isInvalid: customInvalid,
-      resize,
-      autoResize = false,
-      disabled,
-      value,
-      onChange,
-      id,
-      ...props
-    },
-    ref
-  ) => {
-    const formField = useFormField();
-    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
-    const isDisabled = disabled ?? formField?.isDisabled ?? false;
-    const inputId = id || formField?.id;
-
-    const innerRef = useRef<HTMLTextAreaElement | null>(null);
-
-    const setMergedRef = (element: HTMLTextAreaElement | null) => {
-      innerRef.current = element;
-      if (typeof ref === 'function') {
-        ref(element);
-      } else if (ref) {
-        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = element;
-      }
-    };
-
-    const handleInput = () => {
-      if (autoResize && innerRef.current) {
-        innerRef.current.style.height = 'auto';
-        innerRef.current.style.height = `${innerRef.current.scrollHeight}px`;
-      }
-    };
-
-    useEffect(() => {
-      if (autoResize && innerRef.current) {
-        handleInput();
-      }
-    }, [value, autoResize]);
-
-    return (
-      <textarea
-        ref={setMergedRef}
-        id={inputId}
-        disabled={isDisabled}
-        value={value}
-        onChange={(e) => {
-          handleInput();
-          onChange?.(e);
-        }}
-        aria-invalid={isInvalid}
-        aria-describedby={
-          isInvalid
-            ? formField?.errorId
-            : formField?.descriptionId || undefined
-        }
-        className={cn(
-          textareaVariants({
-            variant,
-            isInvalid,
-            resize: autoResize ? 'none' : resize,
-          }),
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-);
-
-Textarea.displayName = 'Textarea';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useFormField } from './FormField';
+import { cn } from '../utils/cn';
+
+export const textareaVariants = cva(
+  'w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] p-3 text-sm text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]',
+  {
+    variants: {
+      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)]',
+        false: '',
+      },
+      resize: {
+        none: 'resize-none',
+        vertical: 'resize-y',
+        horizontal: 'resize-x',
+        both: 'resize',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      isInvalid: false,
+      resize: 'vertical',
+    },
+  }
+);
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    VariantProps<typeof textareaVariants> {
+  autoResize?: boolean;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      className,
+      variant,
+      isInvalid: customInvalid,
+      resize,
+      autoResize = false,
+      disabled,
+      value,
+      onChange,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const formField = useFormField();
+    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const inputId = id || formField?.id;
+
+    const innerRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const setMergedRef = (element: HTMLTextAreaElement | null) => {
+      innerRef.current = element;
+      if (typeof ref === 'function') {
+        ref(element);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = element;
+      }
+    };
+
+    const handleInput = () => {
+      if (autoResize && innerRef.current) {
+        innerRef.current.style.height = 'auto';
+        innerRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+      }
+    };
+
+    useEffect(() => {
+      if (autoResize && innerRef.current) {
+        handleInput();
+      }
+    }, [value, autoResize]);
+
+    return (
+      <textarea
+        ref={setMergedRef}
+        id={inputId}
+        disabled={isDisabled}
+        value={value}
+        onChange={(e) => {
+          handleInput();
+          onChange?.(e);
+        }}
+        aria-invalid={isInvalid}
+        aria-describedby={
+          isInvalid
+            ? formField?.errorId
+            : formField?.descriptionId || undefined
+        }
+        className={cn(
+          textareaVariants({
+            variant,
+            isInvalid,
+            resize: autoResize ? 'none' : resize,
+          }),
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';

package/src/forms/tokens.css

@@ -1,6 +1,6 @@
-/* Forms Tokens */
-:root {
-  --ui-input-height-sm: 2rem;
-  --ui-input-height-md: 2.5rem;
-  --ui-input-height-lg: 3rem;
-}
+/* Forms Tokens */
+:root {
+  --ui-input-height-sm: 2rem;
+  --ui-input-height-md: 2.5rem;
+  --ui-input-height-lg: 3rem;
+}