@thangnqdev/ui 0.2.0 → 0.2.2

package/src/forms/RangeSlider.tsx

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

package/src/forms/SearchInput.tsx

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