@thangnqdev/ui 0.1.0

package/src/forms/Select.tsx

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

package/src/forms/Slider.tsx

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

package/src/forms/Switch.tsx

@@ -0,0 +1,95 @@
+import React, { forwardRef, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useFormField } from './FormField';
+import { cn } from '../utils/cn';
+
+export const switchVariants = cva(
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-200 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#34c759]/30 disabled:cursor-not-allowed disabled:opacity-50 bg-[var(--ui-border-strong)] data-[state=checked]:bg-[#34c759] dark:data-[state=checked]:bg-[#30d158] shadow-inner',
+  {
+    variants: {
+      size: {
+        sm: 'h-5 w-9 p-0.5',
+        md: 'h-6.5 w-12 p-0.5',
+        lg: 'h-8 w-15 p-1',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export const switchThumbVariants = cva(
+  'pointer-events-none block rounded-full bg-white shadow-[0_2px_4px_rgba(0,0,0,0.25)] ring-0 transition-transform duration-200 ease-out data-[state=unchecked]:translate-x-0',
+  {
+    variants: {
+      size: {
+        sm: 'h-4 w-4 data-[state=checked]:translate-x-4',
+        md: 'h-5.5 w-5.5 data-[state=checked]:translate-x-5.5',
+        lg: 'h-6 w-6 data-[state=checked]:translate-x-7',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export interface SwitchProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof switchVariants> {
+  label?: React.ReactNode;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, size, label, checked, defaultChecked, onCheckedChange, disabled, id, onChange, ...props }, ref) => {
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+    const isChecked = isControlled ? checked : internalChecked;
+
+    const formField = useFormField();
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const switchId = id || formField?.id;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalChecked(e.target.checked);
+      }
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+
+    return (
+      <label className={cn('inline-flex items-center gap-3 select-none cursor-pointer', isDisabled && 'cursor-not-allowed opacity-50')}>
+        <div className="relative flex items-center">
+          <input
+            ref={ref}
+            type="checkbox"
+            role="switch"
+            id={switchId}
+            disabled={isDisabled}
+            checked={isChecked}
+            onChange={handleChange}
+            className="sr-only peer"
+            {...props}
+          />
+          <div
+            data-state={isChecked ? 'checked' : 'unchecked'}
+            className={cn(switchVariants({ size }), className)}
+          >
+            <span
+              data-state={isChecked ? 'checked' : 'unchecked'}
+              className={cn(switchThumbVariants({ size }))}
+            />
+          </div>
+        </div>
+        {label && <span className="text-sm font-medium text-[var(--ui-text-primary)]">{label}</span>}
+      </label>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';

package/src/forms/Textarea.tsx

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

package/src/forms/index.ts

@@ -0,0 +1,18 @@
+export * from './FormField';
+export * from './Input';
+export * from './SearchInput';
+export * from './PasswordInput';
+export * from './Textarea';
+export * from './Select';
+export * from './Checkbox';
+export * from './CheckboxGroup';
+export * from './Radio';
+export * from './Switch';
+export * from './Slider';
+export * from './RangeSlider';
+export * from './PinInput';
+export * from './DatePicker';
+export * from './Combobox';
+export * from './FileUpload';
+export * from './NumberInput';
+export * from './MaskedInput';

package/src/forms/tokens.css

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

package/src/glass/GlassBadge.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const glassBadgeVariants = cva(
+  'inline-flex items-center font-sans font-semibold tracking-tight rounded-full backdrop-blur-xl border transition-all select-none',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-[var(--ui-bg-secondary)]/80 text-[var(--ui-text-primary)] border-[var(--ui-border-default)] shadow-xs',
+        emerald:
+          'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/25 shadow-xs shadow-emerald-500/10',
+        cyan:
+          'bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/25 shadow-xs shadow-blue-500/10',
+        purple:
+          'bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-500/25 shadow-xs shadow-purple-500/10',
+        amber:
+          'bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/25 shadow-xs shadow-amber-500/10',
+        rose:
+          'bg-rose-500/15 text-rose-600 dark:text-rose-400 border-rose-500/25 shadow-xs shadow-rose-500/10',
+      },
+      size: {
+        sm: 'text-[10px] px-2 py-0.5 gap-1',
+        md: 'text-[11px] px-2.5 py-0.5 gap-1.5',
+        lg: 'text-xs px-3 py-1 gap-1.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export interface GlassBadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof glassBadgeVariants> {
+  dot?: boolean;
+}
+
+export const GlassBadge: React.FC<GlassBadgeProps> = ({
+  className,
+  variant,
+  size,
+  dot = false,
+  children,
+  ...props
+}) => {
+  return (
+    <span className={cn(glassBadgeVariants({ variant, size, className }))} {...props}>
+      {dot && (
+        <span
+          className="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-pulse shrink-0"
+          aria-hidden="true"
+        />
+      )}
+      <span>{children}</span>
+    </span>
+  );
+};

package/src/glass/GlassButton.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const glassButtonVariants = cva(
+  'group relative inline-flex items-center justify-center font-medium tracking-tight transition-all duration-300 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-40 overflow-hidden cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 dark:focus-visible:ring-white/90 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-focus-ring-offset)]',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-[var(--ui-glass-btn-default-bg)] hover:bg-[var(--ui-glass-btn-default-hover)] backdrop-blur-md border border-[var(--ui-glass-btn-default-border)] text-[var(--ui-glass-btn-default-text)] shadow-sm dark:shadow-[0_4px_24px_rgba(0,0,0,0.35)] hover:border-black/20 dark:hover:border-white/35',
+        primary:
+          'bg-slate-900 text-white dark:bg-white dark:text-slate-950 font-semibold shadow-md hover:bg-slate-800 dark:hover:bg-slate-100 border border-slate-700 dark:border-white shadow-[0_4px_20px_rgba(0,0,0,0.2)] dark:shadow-[0_0_24px_rgba(255,255,255,0.25)]',
+        luminescent:
+          'bg-gradient-to-r from-slate-800/80 to-slate-900/80 text-white dark:from-white/15 dark:to-white/5 dark:text-white backdrop-blur-xl border border-white/20 dark:border-white/30 shadow-[0_0_20px_-4px_rgba(255,255,255,0.15)] hover:border-white/50 hover:shadow-[0_0_30px_-4px_rgba(255,255,255,0.3)]',
+        ghost:
+          'bg-transparent hover:bg-black/5 dark:hover:bg-white/10 backdrop-blur-sm border border-transparent hover:border-black/10 dark:hover:border-white/15 text-[var(--ui-glass-text-secondary)] hover:text-[var(--ui-glass-text-primary)]',
+      },
+      size: {
+        sm: 'h-8 px-3.5 text-xs rounded-xl gap-1.5',
+        md: 'h-10 px-5 text-sm rounded-2xl gap-2',
+        lg: 'h-12 px-7 text-base rounded-2xl gap-2.5',
+        icon: 'h-10 w-10 rounded-2xl',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export interface GlassButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof glassButtonVariants> {
+  shimmer?: boolean;
+}
+
+export const GlassButton = forwardRef<HTMLButtonElement, GlassButtonProps>(
+  ({ className, variant, size, shimmer = true, children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(glassButtonVariants({ variant, size, className }))}
+        {...props}
+      >
+        {shimmer && (
+          <span
+            className="pointer-events-none absolute -inset-full top-0 block -rotate-45 bg-gradient-to-r from-transparent via-white/25 dark:via-white/15 to-transparent transition-all duration-700 motion-safe:group-hover:translate-x-full"
+            aria-hidden="true"
+          />
+        )}
+        <span className="relative z-10 inline-flex items-center gap-2">{children}</span>
+      </button>
+    );
+  }
+);
+
+GlassButton.displayName = 'GlassButton';

package/src/glass/GlassCard.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const glassCardVariants = cva(
+  'relative overflow-hidden transition-all duration-300 text-[var(--ui-glass-text-primary)]',
+  {
+    variants: {
+      intensity: {
+        subtle:
+          'bg-[var(--ui-glass-subtle-bg)] backdrop-blur-[var(--ui-glass-subtle-blur)] border border-[var(--ui-glass-subtle-border)]',
+        standard:
+          'bg-[var(--ui-glass-standard-bg)] backdrop-blur-[var(--ui-glass-standard-blur)] border border-[var(--ui-glass-standard-border)] shadow-[var(--ui-glass-standard-shadow)]',
+        frosted:
+          'bg-[var(--ui-glass-frosted-bg)] backdrop-blur-[var(--ui-glass-frosted-blur)] border border-[var(--ui-glass-frosted-border)] shadow-[var(--ui-glass-frosted-shadow)]',
+        acrylic:
+          'bg-[image:var(--ui-glass-acrylic-bg)] backdrop-blur-[var(--ui-glass-acrylic-blur)] border border-[var(--ui-glass-acrylic-border)] shadow-[var(--ui-glass-acrylic-shadow)]',
+      },
+      glow: {
+        none: '',
+        cyan: 'hover:shadow-[0_0_40px_-8px_rgba(56,189,248,0.3)] hover:border-sky-400/40',
+        purple: 'hover:shadow-[0_0_40px_-8px_rgba(192,132,252,0.3)] hover:border-purple-400/40',
+        white: 'hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.25)] hover:border-white/30',
+      },
+      radius: {
+        md: 'rounded-xl',
+        lg: 'rounded-2xl',
+        xl: 'rounded-3xl',
+      },
+      padding: {
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+      },
+    },
+    defaultVariants: {
+      intensity: 'standard',
+      glow: 'none',
+      radius: 'lg',
+      padding: 'md',
+    },
+  }
+);
+
+export interface GlassCardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof glassCardVariants> {
+  specularLight?: boolean;
+}
+
+export const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(
+  ({ className, intensity, glow, radius, padding, specularLight = true, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(glassCardVariants({ intensity, glow, radius, padding, className }))}
+        {...props}
+      >
+        {specularLight && (
+          <div
+            className="pointer-events-none absolute inset-x-0 top-0 h-px bg-[image:var(--ui-glass-specular-light)] opacity-80"
+            aria-hidden="true"
+          />
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+
+GlassCard.displayName = 'GlassCard';

package/src/glass/index.ts

@@ -0,0 +1,3 @@
+export * from './GlassCard';
+export * from './GlassButton';
+export * from './GlassBadge';