@umituz/web-design-system 5.3.0 → 6.0.0

package/src/presentation/hooks/useMediaQuery.ts

@@ -1,7 +1,3 @@
-/**
- * useMediaQuery & useBreakpoint Hooks
- * @description Enhanced responsive breakpoint detection with helper functions
- */
 
 import { useEffect, useState, useCallback, useRef, useMemo, useSyncExternalStore } from 'react';
 import type {
@@ -16,16 +12,6 @@ import {
 } from '../../infrastructure/constants/breakpoint.constants';
 import { TIMING } from '../../infrastructure/constants/timing.constants';
 
-/**
- * Simple media query hook for a single breakpoint
- * @param breakpoint - The breakpoint to check
- * @returns Whether the media query matches
- *
- * @example
- * ```tsx
- * const isDesktop = useMediaQuery('lg') // true on lg screens and above
- * ```
- */
 export function useMediaQuery(breakpoint: Breakpoint): boolean {
   const query = useMemo(() => createMediaQuery(breakpoint), [breakpoint]);
 
@@ -49,24 +35,7 @@ export function useMediaQuery(breakpoint: Breakpoint): boolean {
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
-/**
- * Enhanced breakpoint hook with helper functions
- * @returns Object containing current breakpoint and helper functions
- *
- * @example
- * ```tsx
- * const { currentBreakpoint, isMobile, isDesktop } = useBreakpoint()
- *
- * return (
- *   <div>
- *     {isMobile && <MobileNav />}
- *     {isDesktop && <DesktopNav />}
- *   </div>
- * )
- * ```
- */
 export function useBreakpoint(): UseBreakpointReturn {
-  // FIX: Sort breakpoints once and memoize
   const sortedBreakpoints = useMemo(() => {
     return Object.entries(BREAKPOINTS).sort(
       ([, a], [, b]) => b.min - a.min
@@ -74,7 +43,6 @@ export function useBreakpoint(): UseBreakpointReturn {
   }, []);
 
   const [currentBreakpoint, setCurrentBreakpoint] = useState<Breakpoint>(() => {
-    // FIX: SSR-safe initialization
     if (typeof window === 'undefined') return 'lg';
 
     const width = window.innerWidth;
@@ -84,7 +52,6 @@ export function useBreakpoint(): UseBreakpointReturn {
     return 'xs';
   });
 
-  // FIX: Use useRef for resize timer to prevent timer issues
   const resizeTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   useEffect(() => {
@@ -99,10 +66,8 @@ export function useBreakpoint(): UseBreakpointReturn {
       }
     };
 
-    // Initial check
     updateBreakpoint();
 
-    // Debounced resize listener
     const handleResize = () => {
       if (resizeTimerRef.current) {
         clearTimeout(resizeTimerRef.current);
@@ -120,7 +85,6 @@ export function useBreakpoint(): UseBreakpointReturn {
     };
   }, [sortedBreakpoints]);
 
-  // Helper functions
   const matches = useCallback(
     (breakpoint: Breakpoint | Breakpoint[]): boolean => {
       if (Array.isArray(breakpoint)) {
@@ -145,7 +109,6 @@ export function useBreakpoint(): UseBreakpointReturn {
     [currentBreakpoint]
   );
 
-  // Computed values
   const isXs = currentBreakpoint === 'xs';
   const isSm = currentBreakpoint === 'sm';
   const isMd = currentBreakpoint === 'md';

package/src/presentation/hooks/useScrollLock.ts

@@ -1,11 +1,6 @@
-/**
- * useScrollLock Hook
- * @description Lock/unlock body scroll while preserving scrollbar gutter
- */
 
 import { useEffect } from 'react';
 
-/** Width of the vertical scrollbar, so locking scroll doesn't shift layout. */
 const measureScrollbarWidth = (): number => {
   if (typeof window === 'undefined' || typeof document === 'undefined') return 0;
   return Math.max(0, window.innerWidth - document.documentElement.clientWidth);

package/src/presentation/hooks/useTheme.ts

@@ -1,7 +1,3 @@
-/**
- * useTheme Hook
- * @description Theme toggle functionality with SSR support and system preference detection
- */
 
 import { useEffect, useState, useCallback } from 'react';
 
@@ -25,9 +21,16 @@ const getSystemTheme = (): 'light' | 'dark' => {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 };
 
+const writeThemeStorage = (theme: Theme): void => {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+  } catch {
+    return;
+  }
+};
+
 export function useTheme(): UseThemeReturn {
   const [theme, setThemeState] = useState<Theme>(() => {
-    // FIX: SSR-safe initialization
     if (typeof window === 'undefined') return 'system';
 
     try {
@@ -47,7 +50,6 @@ export function useTheme(): UseThemeReturn {
     return theme;
   });
 
-  // Listen for system theme changes
   useEffect(() => {
     if (theme !== 'system') return;
 
@@ -66,15 +68,9 @@ export function useTheme(): UseThemeReturn {
 
     root.classList.remove('light', 'dark');
     root.classList.add(themeToApply);
-
-    try {
-      localStorage.setItem(THEME_STORAGE_KEY, theme);
-    } catch {
-      // Ignore storage errors
-    }
+    writeThemeStorage(theme);
   }, [theme]);
 
-  // FIX: Memoize callbacks to prevent unnecessary re-renders
   const toggleTheme = useCallback(() => {
     setThemeState((prev) => {
       if (prev === 'light') return 'dark';

package/src/presentation/hooks/useToggle.ts

@@ -1,7 +1,3 @@
-/**
- * useToggle Hook
- * @description Toggle boolean state with explicit setValue
- */
 
 import { useCallback, useState, useMemo } from 'react';
 

package/src/presentation/molecules/ActiveFilterTags.tsx

@@ -1,7 +1,3 @@
-/**
- * ActiveFilterTags Component (Molecule)
- * @description Display active filters with remove buttons
- */
 
 import { X } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/molecules/Avatar.tsx

@@ -1,7 +1,3 @@
-/**
- * Avatar Component (Molecule)
- * @description User avatar with image and fallback (shadcn/ui compatible)
- */
 
 import { forwardRef, type HTMLAttributes, type ComponentPropsWithoutRef } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -11,7 +7,6 @@ import type { ExtendedSizes } from '../../infrastructure/constants';
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
   name?: string;
   size?: ExtendedSizes;
-  /** Accent hue (0-360) for the initials fallback, overriding the name-hash tone. */
   hue?: number;
 }
 

package/src/presentation/molecules/BookmarkButton.tsx

@@ -1,8 +1,3 @@
-/**
- * BookmarkButton Component (Molecule)
- * @description Accessible toggleable button for saving, bookmarking, or favoriting items.
- * Supports pill (icon + label) and icon-only variants, multiple sizes, semantic tones, and custom icons.
- */
 
 import React, { forwardRef } from 'react';
 import { Star } from 'lucide-react';
@@ -15,25 +10,15 @@ export type BookmarkTone = 'warning' | 'primary' | 'success' | 'default';
 export interface BookmarkButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange' | 'onToggle'>,
     BaseProps {
-  /** Whether the item is currently saved / bookmarked / active. */
   active?: boolean;
-  /** Callback fired when clicked or toggled. Passes the inverted active state. */
   onToggle?: (nextActive: boolean) => void;
-  /** Display variant: 'pill' shows icon + label, 'icon' renders a square/round icon-only button. */
   variant?: 'pill' | 'icon';
-  /** Size variant */
   size?: 'xs' | 'sm' | 'md' | 'lg';
-  /** Inactive label (default: "Save"). Used as text in pill mode and aria-label in icon mode. */
   label?: string;
-  /** Active label (default: "Saved"). */
   activeLabel?: string;
-  /** Custom icon when inactive. Defaults to a Star outline. */
   icon?: React.ReactNode;
-  /** Custom icon when active. Defaults to a filled Star. */
   activeIcon?: React.ReactNode;
-  /** Color theme tone when active (default: 'warning' for warm bookmark gold). */
   tone?: BookmarkTone;
-  /** Loading indicator */
   loading?: boolean;
 }
 

package/src/presentation/molecules/CheckboxGroup.tsx

@@ -1,7 +1,3 @@
-/**
- * CheckboxGroup Component (Molecule)
- * @description Group of checkboxes
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/molecules/Chip.tsx

@@ -1,7 +1,3 @@
-/**
- * Chip Component (Molecule)
- * @description Selectable/removable tag
- */
 
 import { forwardRef } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -15,7 +11,6 @@ export interface ChipProps extends BaseProps {
   onRemove?: () => void;
   onClick?: () => void;
   removable?: boolean;
-  /** Toggle state for filter chips — renders as a pressed button when set. */
   selected?: boolean;
 }
 

package/src/presentation/molecules/CodeBlock.tsx

@@ -1,7 +1,3 @@
-/**
- * CodeBlock Component (Molecule)
- * @description Syntax-highlighted code block with copy button and expand/collapse
- */
 
 import { useState, useEffect } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -15,7 +11,6 @@ export interface CodeBlockProps extends BaseProps {
   language?: string;
   filename?: string;
   showLineNumbers?: boolean;
-  /** Lines threshold to enable collapse/expand. */
   collapseThreshold?: number;
 }
 

package/src/presentation/molecules/ConfirmButton.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Button, type ButtonProps } from '../atoms/Button';
+import { Check, X } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+
+export interface ConfirmButtonProps extends Omit<ButtonProps, 'onConfirm'> {
+  onConfirm: () => void | Promise<void>;
+  confirmText?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  timeoutMs?: number;
+}
+
+export const ConfirmButton = React.forwardRef<HTMLButtonElement, ConfirmButtonProps>(
+  (
+    {
+      onConfirm,
+      confirmText = 'Emin misiniz?',
+      confirmLabel = 'Evet',
+      cancelLabel = 'İptal',
+      timeoutMs = 4000,
+      children,
+      variant = 'destructive',
+      size = 'default',
+      className,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [isConfirming, setIsConfirming] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
+    }, []);
+
+    const resetConfirmation = () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      setIsConfirming(false);
+    };
+
+    const handleInitialClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsConfirming(true);
+
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        setIsConfirming(false);
+      }, timeoutMs);
+    };
+
+    const handleConfirm = async (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+      try {
+        setIsLoading(true);
+        await onConfirm();
+      } finally {
+        setIsLoading(false);
+        setIsConfirming(false);
+      }
+    };
+
+    const handleCancel = (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      resetConfirmation();
+    };
+
+    if (isConfirming) {
+      return (
+        <div className={cn('inline-flex items-center gap-1.5 animate-in fade-in zoom-in-95 duration-150', className)}>
+          <span className="text-xs font-semibold text-destructive px-1 select-none">
+            {confirmText}
+          </span>
+          <Button
+            type="button"
+            size="xs"
+            variant="destructive"
+            loading={isLoading}
+            onClick={handleConfirm}
+            className="gap-1 h-7 px-2"
+          >
+            <Check className="size-3" />
+            <span>{confirmLabel}</span>
+          </Button>
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            disabled={isLoading}
+            onClick={handleCancel}
+            className="h-7 px-1.5 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-3" />
+            <span className="sr-only">{cancelLabel}</span>
+          </Button>
+        </div>
+      );
+    }
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        disabled={disabled || isLoading}
+        onClick={handleInitialClick}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+
+ConfirmButton.displayName = 'ConfirmButton';

package/src/presentation/molecules/Field.tsx

@@ -13,18 +13,11 @@ export interface FieldProps {
   error?: ReactNode;
   required?: boolean;
   htmlFor?: string;
-  /** Keep the label in the accessibility tree while hiding it visually. */
   hideLabel?: boolean;
   className?: string;
   children: ReactNode;
 }
 
-/**
- * Label + hint/error wrapper for a single form control. When the child is a
- * valid element, the control id (existing id wins, then htmlFor, then a
- * generated one) and the aria wiring for hint/error are injected into it so
- * the label association is automatic.
- */
 export function Field({ label, hint, error, required, htmlFor, hideLabel = false, className, children }: FieldProps) {
   const autoId = useId();
   const childId = isValidElement(children) ? (children as ReactElement<FieldControlProps>).props.id : undefined;

package/src/presentation/molecules/FormField.tsx

@@ -1,7 +1,3 @@
-/**
- * FormField Component (Molecule)
- * @description Label + Input combination (Responsive)
- */
 
 import { forwardRef, useId } from 'react';
 import { cn, getSpaceY } from '../../infrastructure/utils';
@@ -16,7 +12,7 @@ export interface FormFieldProps extends BaseProps {
   required?: boolean;
   id?: string;
   inputProps?: React.ComponentProps<typeof Input>;
-  fullWidth?: boolean; // Enable responsive full width
+  fullWidth?: boolean;
 }
 
 export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(

package/src/presentation/molecules/InputGroup.tsx

@@ -1,7 +1,3 @@
-/**
- * InputGroup Component (Molecule)
- * @description Input with prefix/suffix elements
- */
 
 import { forwardRef, type ReactNode, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/molecules/ListItem.tsx

@@ -1,7 +1,3 @@
-/**
- * ListItem Component (Molecule)
- * @description Reusable list item with icon, content, and actions
- */
 
 import { forwardRef, type ReactNode, type MouseEvent } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/molecules/OptionTile.tsx

@@ -1,9 +1,3 @@
-/**
- * OptionTile Component (Molecule)
- * @description Graded answer tile for exercises — a native input (radio or
- * checkbox) wrapped in its label, with an optional A/B/C/D key badge and
- * reveal states (correct / wrong / missed) for post-submission feedback.
- */
 
 import { forwardRef } from 'react';
 import { Check, X } from 'lucide-react';
@@ -14,15 +8,11 @@ export type OptionTileState = 'correct' | 'wrong' | 'missed';
 
 export interface OptionTileProps extends BaseProps {
   label: React.ReactNode;
-  /** Key badge rendered before the label (A, B, C…). */
   keyBadge?: string;
-  /** Native input type — radio (single) or checkbox (multi-select). */
   type?: 'radio' | 'checkbox';
   checked?: boolean;
-  /** Reveal semantics — overrides selection styling after grading. */
   state?: OptionTileState;
   disabled?: boolean;
-  /** Group name for radio inputs. */
   name?: string;
   onChange: (checked: boolean) => void;
 }

package/src/presentation/molecules/PasswordInput.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { Input, type InputProps } from '../atoms/Input';
+import { cn } from '../../infrastructure/utils';
+
+export interface PasswordInputProps extends Omit<InputProps, 'type'> {
+  showToggle?: boolean;
+}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ showToggle = true, className, ...props }, ref) => {
+    const [visible, setVisible] = React.useState(false);
+
+    const toggleVisibility = (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setVisible((prev) => !prev);
+    };
+
+    return (
+      <div className={cn('relative flex items-center w-full', className)}>
+        <Input
+          ref={ref}
+          type={visible ? 'text' : 'password'}
+          className="pr-10"
+          {...props}
+        />
+        {showToggle && (
+          <button
+            type="button"
+            onClick={toggleVisibility}
+            aria-label={visible ? 'Şifreyi gizle' : 'Şifreyi göster'}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground focus:outline-none transition-colors p-1"
+          >
+            {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+PasswordInput.displayName = 'PasswordInput';

package/src/presentation/molecules/RadioGroup.tsx

@@ -1,7 +1,3 @@
-/**
- * RadioGroup Component (Molecule)
- * @description Group of radio buttons
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/molecules/RatingStars.tsx

@@ -1,18 +1,10 @@
-/**
- * RatingStars Component (Molecule)
- * @description 0–5 rating with visual half-star precision, numeric value and
- *   optional review count
- */
 
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
 export interface RatingStarsProps extends BaseProps {
-  /** 0–5 rating; halves render as partial star fills. */
   value: number;
-  /** Optional review count rendered in parentheses. */
   count?: number;
-  /** Locale-formatted count override (e.g. 1,204). */
   formatCount?: (count: number) => string;
   size?: 'sm' | 'md';
 }

package/src/presentation/molecules/ScrollArea.tsx

@@ -1,7 +1,3 @@
-/**
- * ScrollArea Component (Molecule)
- * @description Custom scrollable area (Shadcn/ui compatible)
- */
 
 import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';

package/src/presentation/molecules/SearchBox.tsx

@@ -1,7 +1,3 @@
-/**
- * SearchBox Component (Molecule)
- * @description Input with search icon
- */
 
 import { forwardRef } from 'react';
 import { X } from 'lucide-react';

package/src/presentation/molecules/SearchInput.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { Search, X } from 'lucide-react';
+import { Input, type InputProps } from '../atoms/Input';
+import { Spinner } from '../atoms/Spinner';
+import { cn } from '../../infrastructure/utils';
+
+export interface SearchInputProps extends Omit<InputProps, 'onChange' | 'value' | 'defaultValue'> {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onSearch?: (value: string) => void;
+  onClear?: () => void;
+  debounceMs?: number;
+  loading?: boolean;
+  clearable?: boolean;
+}
+
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue = '',
+      onChange,
+      onSearch,
+      onClear,
+      debounceMs = 0,
+      loading = false,
+      clearable = true,
+      placeholder = 'Ara...',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+
+    const debounceTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    React.useEffect(() => {
+      return () => {
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      };
+    }, []);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const nextVal = e.target.value;
+      if (!isControlled) {
+        setInternalValue(nextVal);
+      }
+      onChange?.(nextVal);
+
+      if (debounceMs > 0 && onSearch) {
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(() => {
+          onSearch(nextVal);
+        }, debounceMs);
+      }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+        onSearch?.(currentValue);
+      }
+    };
+
+    const handleClear = () => {
+      if (!isControlled) {
+        setInternalValue('');
+      }
+      onChange?.('');
+      onClear?.();
+      onSearch?.('');
+    };
+
+    return (
+      <div className={cn('relative flex items-center w-full', className)}>
+        <Search className="absolute left-3 size-4 text-muted-foreground pointer-events-none shrink-0" />
+        <Input
+          ref={ref}
+          type="text"
+          value={currentValue}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="pl-9 pr-9"
+          {...props}
+        />
+        <div className="absolute right-2.5 flex items-center">
+          {loading ? (
+            <Spinner size="sm" />
+          ) : clearable && currentValue ? (
+            <button
+              type="button"
+              aria-label="Aramayı temizle"
+              onClick={handleClear}
+              className="text-muted-foreground hover:text-foreground transition-colors p-1"
+            >
+              <X className="size-3.5" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+);
+
+SearchInput.displayName = 'SearchInput';

package/src/presentation/molecules/Select.tsx

@@ -1,7 +1,3 @@
-/**
- * Select Component (Molecule)
- * @description Dropdown select (Shadcn/Radix UI compatible)
- */
 
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';