@thangnqdev/ui 0.1.2 → 0.2.0

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

package/src/forms/RangeSlider.tsx

@@ -1,111 +1,237 @@
-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';
+import React, { forwardRef, useState, useRef, useCallback, useEffect } 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;
+  name?: string;
+  'aria-label'?: string;
+}
+
+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,
+      name,
+      'aria-label': ariaLabel = 'Range slider',
+    },
+    ref
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState<[number, number]>(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+
+    const [minVal, maxVal] = [
+      Math.max(min, Math.min(currentValue[0], currentValue[1])),
+      Math.min(max, Math.max(currentValue[0], currentValue[1])),
+    ];
+
+    const trackRef = useRef<HTMLDivElement>(null);
+    const draggingThumbRef = useRef<'min' | 'max' | null>(null);
+
+    const updateValues = useCallback(
+      (newMin: number, newMax: number) => {
+        const clampedMin = Math.max(min, Math.min(newMin, newMax));
+        const clampedMax = Math.min(max, Math.max(clampedMin, newMax));
+        const next: [number, number] = [clampedMin, clampedMax];
+
+        if (!isControlled) {
+          setInternalValue(next);
+        }
+        onChange?.(next);
+      },
+      [min, max, isControlled, onChange]
+    );
+
+    const getValueFromPointer = useCallback(
+      (clientX: number): number => {
+        if (!trackRef.current) return min;
+        const rect = trackRef.current.getBoundingClientRect();
+        const percent = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+        const rawValue = min + percent * (max - min);
+        const steppedValue = Math.round((rawValue - min) / step) * step + min;
+        return Math.min(max, Math.max(min, Number(steppedValue.toFixed(4))));
+      },
+      [min, max, step]
+    );
+
+    const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+      if (disabled) return;
+      const clickedVal = getValueFromPointer(e.clientX);
+      const distToMin = Math.abs(clickedVal - minVal);
+      const distToMax = Math.abs(clickedVal - maxVal);
+
+      const targetThumb = distToMin <= distToMax ? 'min' : 'max';
+      draggingThumbRef.current = targetThumb;
+
+      if (targetThumb === 'min') {
+        updateValues(Math.min(clickedVal, maxVal), maxVal);
+      } else {
+        updateValues(minVal, Math.max(clickedVal, minVal));
+      }
+
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    };
+
+    const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+      if (disabled || !draggingThumbRef.current) return;
+      const moveVal = getValueFromPointer(e.clientX);
+
+      if (draggingThumbRef.current === 'min') {
+        updateValues(Math.min(moveVal, maxVal), maxVal);
+      } else {
+        updateValues(minVal, Math.max(moveVal, minVal));
+      }
+    };
+
+    const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+      if (draggingThumbRef.current) {
+        draggingThumbRef.current = null;
+        try {
+          (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+        } catch {
+          // ignore
+        }
+      }
+    };
+
+    const handleKeyDownMin = (e: React.KeyboardEvent) => {
+      if (disabled) return;
+      let nextMin = minVal;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        nextMin = Math.min(minVal + step, maxVal);
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        nextMin = Math.max(minVal - step, min);
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        nextMin = min;
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        nextMin = maxVal;
+      }
+      if (nextMin !== minVal) {
+        updateValues(nextMin, maxVal);
+      }
+    };
+
+    const handleKeyDownMax = (e: React.KeyboardEvent) => {
+      if (disabled) return;
+      let nextMax = maxVal;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        nextMax = Math.min(maxVal + step, max);
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        nextMax = Math.max(maxVal - step, minVal);
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        nextMax = minVal;
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        nextMax = max;
+      }
+      if (nextMax !== maxVal) {
+        updateValues(minVal, nextMax);
+      }
+    };
+
+    const minPercentage = Math.min(100, Math.max(0, ((minVal - min) / (max - min || 1)) * 100));
+    const maxPercentage = Math.min(100, Math.max(0, ((maxVal - min) / (max - min || 1)) * 100));
+
+    return (
+      <div
+        ref={ref}
+        className={cn('w-full flex items-center gap-4', disabled && 'opacity-50 cursor-not-allowed', className)}
+      >
+        <div
+          ref={trackRef}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          className="relative w-full flex items-center h-7 select-none touch-none cursor-pointer"
+        >
+          {/* 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: `${Math.max(0, maxPercentage - minPercentage)}%`,
+              }}
+            />
+          </div>
+
+          {/* Hidden inputs for form submission if name provided */}
+          {name && (
+            <>
+              <input type="hidden" name={`${name}_min`} value={minVal} />
+              <input type="hidden" name={`${name}_max`} value={maxVal} />
+            </>
+          )}
+
+          {/* Min thumb */}
+          <div
+            role="slider"
+            tabIndex={disabled ? -1 : 0}
+            aria-label={`${ariaLabel} minimum`}
+            aria-valuemin={min}
+            aria-valuemax={maxVal}
+            aria-valuenow={minVal}
+            aria-disabled={disabled}
+            onKeyDown={handleKeyDownMin}
+            className={cn(
+              'absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md -translate-x-1/2 z-20 cursor-grab active:cursor-grabbing transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2',
+              disabled && 'pointer-events-none'
+            )}
+            style={{ left: `${minPercentage}%` }}
+          />
+
+          {/* Max thumb */}
+          <div
+            role="slider"
+            tabIndex={disabled ? -1 : 0}
+            aria-label={`${ariaLabel} maximum`}
+            aria-valuemin={minVal}
+            aria-valuemax={max}
+            aria-valuenow={maxVal}
+            aria-disabled={disabled}
+            onKeyDown={handleKeyDownMax}
+            className={cn(
+              'absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md -translate-x-1/2 z-20 cursor-grab active:cursor-grabbing transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2',
+              disabled && 'pointer-events-none'
+            )}
+            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';