@umituz/web-design-system 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms) for React applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domain/tokens/animation.tokens.ts

@@ -0,0 +1,87 @@
+/**
+ * Animation Tokens
+ * @description Animation durations, easings, and keyframes
+ */
+
+export type DurationToken =
+  | 'instant'
+  | 'fast'
+  | 'normal'
+  | 'slow'
+  | 'slower';
+
+export type EasingToken =
+  | 'linear'
+  | 'ease'
+  | 'easeIn'
+  | 'easeOut'
+  | 'easeInOut'
+  | 'bounce'
+  | 'elastic';
+
+export const durations: Record<DurationToken, string> = {
+  instant: '150ms',
+  fast: '200ms',
+  normal: '300ms',
+  slow: '500ms',
+  slower: '700ms',
+};
+
+export const easings: Record<EasingToken, string> = {
+  linear: 'linear',
+  ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+  elastic: 'cubic-bezier(0.87, 0, 0.13, 1)',
+};
+
+export const animations = {
+  fade: 'fade 300ms ease-out',
+  slide: 'slide 300ms ease-out',
+  scale: 'scale 200ms ease-out',
+  spin: 'spin 1s linear infinite',
+  ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+  pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+  bounce: 'bounce 1s infinite',
+};
+
+export const keyframes = {
+  fade: {
+    from: { opacity: '0' },
+    to: { opacity: '1' },
+  },
+  slide: {
+    from: { transform: 'translateY(-10px)', opacity: '0' },
+    to: { transform: 'translateY(0)', opacity: '1' },
+  },
+  scale: {
+    from: { transform: 'scale(0.95)', opacity: '0' },
+    to: { transform: 'scale(1)', opacity: '1' },
+  },
+  spin: {
+    from: { transform: 'rotate(0deg)' },
+    to: { transform: 'rotate(360deg)' },
+  },
+  ping: {
+    '75%, 100%': {
+      transform: 'scale(2)',
+      opacity: '0',
+    },
+  },
+  pulse: {
+    '0%, 100%': { opacity: '1' },
+    '50%': { opacity: '0.5' },
+  },
+  bounce: {
+    '0%, 100%': {
+      transform: 'translateY(-25%)',
+      animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
+    },
+    '50%': {
+      transform: 'translateY(0)',
+      animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
+    },
+  },
+};

package/src/domain/tokens/index.ts

@@ -42,3 +42,14 @@ export type {
 export {
   shadows,
 } from './shadow.tokens';
+
+export type {
+  DurationToken,
+  EasingToken,
+} from './animation.tokens';
+export {
+  durations,
+  easings,
+  animations,
+  keyframes,
+} from './animation.tokens';

package/src/presentation/atoms/Checkbox.tsx

@@ -0,0 +1,50 @@
+/**
+ * Checkbox Component (Atom)
+ * @description Checkbox input element
+ */
+
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeStyles = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, checked, onCheckedChange, size = 'md', disabled, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onCheckedChange?.(e.target.checked);
+      props.onChange?.(e);
+    };
+
+    return (
+      <input
+        ref={ref}
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        disabled={disabled}
+        className={cn(
+          'shrink-0 rounded border border-primary ring-offset-background',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'accent-primary',
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/presentation/atoms/Divider.tsx

@@ -0,0 +1,34 @@
+/**
+ * Divider Component (Atom)
+ * @description Visual separator line
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+
+const orientationStyles = {
+  horizontal: 'h-px w-full',
+  vertical: 'h-full w-px',
+};
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  ({ className, orientation = 'horizontal', decorative = true, role = 'separator', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role={decorative ? 'none' : role}
+        aria-orientation={orientation}
+        className={cn('shrink-0 bg-border', orientationStyles[orientation], className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';

package/src/presentation/atoms/Link.tsx

@@ -0,0 +1,45 @@
+/**
+ * Link Component (Atom)
+ * @description Styled anchor/link element
+ */
+
+import { forwardRef, type AnchorHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, BaseProps {
+  variant?: 'default' | 'primary' | 'muted';
+  underline?: 'none' | 'hover' | 'always';
+}
+
+const variantStyles: Record<'default' | 'primary' | 'muted', string> = {
+  default: 'text-foreground',
+  primary: 'text-primary',
+  muted: 'text-muted-foreground',
+};
+
+const underlineStyles: Record<'none' | 'hover' | 'always', string> = {
+  none: '',
+  hover: 'hover:underline',
+  always: 'underline',
+};
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ className, variant = 'default', underline = 'hover', ...props }, ref) => {
+    return (
+      <a
+        ref={ref}
+        className={cn(
+          'inline-flex items-center gap-1 transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm',
+          variantStyles[variant],
+          underlineStyles[underline],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Link.displayName = 'Link';

package/src/presentation/atoms/Progress.tsx

@@ -0,0 +1,48 @@
+/**
+ * Progress Component (Atom)
+ * @description Progress indicator bar
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  value?: number;
+  max?: number;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeStyles: Record<'sm' | 'md' | 'lg', string> = {
+  sm: 'h-1',
+  md: 'h-2',
+  lg: 'h-3',
+};
+
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value = 0, max = 100, size = 'md', ...props }, ref) => {
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+    return (
+      <div
+        ref={ref}
+        role="progressbar"
+        aria-valuenow={value}
+        aria-valuemax={max}
+        className={cn(
+          'w-full bg-muted rounded-full overflow-hidden',
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        <div
+          className="h-full bg-primary transition-all duration-300 ease-in-out"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    );
+  }
+);
+
+Progress.displayName = 'Progress';

package/src/presentation/atoms/Radio.tsx

@@ -0,0 +1,42 @@
+/**
+ * Radio Component (Atom)
+ * @description Radio input element
+ */
+
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
+  value: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeStyles = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ className, size = 'md', disabled, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type="radio"
+        disabled={disabled}
+        className={cn(
+          'shrink-0 rounded-full border border-primary ring-offset-background',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'accent-primary',
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Radio.displayName = 'Radio';

package/src/presentation/atoms/Skeleton.tsx

@@ -0,0 +1,38 @@
+/**
+ * Skeleton Component (Atom)
+ * @description Loading placeholder
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  variant?: 'text' | 'circular' | 'rectangular';
+}
+
+const variantStyles: Record<'text' | 'circular' | 'rectangular', string> = {
+  text: 'h-4 w-full rounded',
+  circular: 'h-12 w-12 rounded-full',
+  rectangular: 'h-24 w-full rounded',
+};
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, variant = 'rectangular', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'animate-pulse bg-muted',
+          variantStyles[variant],
+          className
+        )}
+        role="status"
+        aria-label="Loading"
+        {...props}
+      />
+    );
+  }
+);
+
+Skeleton.displayName = 'Skeleton';

package/src/presentation/atoms/Slider.tsx

@@ -0,0 +1,49 @@
+/**
+ * Slider Component (Atom)
+ * @description Range slider input
+ */
+
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number[];
+  onValueChange?: (value: number[]) => void;
+}
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, min = 0, max = 100, step = 1, value = [0], onValueChange, disabled, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = [Number(e.target.value)];
+      onValueChange?.(newValue);
+      props.onChange?.(e);
+    };
+
+    return (
+      <input
+        ref={ref}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value[0]}
+        onChange={handleChange}
+        disabled={disabled}
+        className={cn(
+          'w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer',
+          'accent-primary',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Slider.displayName = 'Slider';

package/src/presentation/atoms/Tooltip.tsx

@@ -0,0 +1,76 @@
+/**
+ * Tooltip Component (Atom)
+ * @description Popup with additional information
+ */
+
+import { forwardRef, type HTMLAttributes, type ReactNode, useState, useRef, useEffect } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+  content: ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  delay?: number;
+}
+
+const placementStyles: Record<'top' | 'bottom' | 'left' | 'right', string> = {
+  top: 'bottom-full mb-2',
+  bottom: 'top-full mt-2',
+  left: 'right-full mr-2',
+  right: 'left-full ml-2',
+};
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  ({ className, children, content, placement = 'top', delay = 200, ...props }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const timeoutRef = useRef<NodeJS.Timeout>();
+
+    const handleMouseEnter = () => {
+      timeoutRef.current = setTimeout(() => {
+        setIsOpen(true);
+      }, delay);
+    };
+
+    const handleMouseLeave = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      setIsOpen(false);
+    };
+
+    useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+
+    return (
+      <div
+        ref={ref}
+        className="relative inline-block"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        {children}
+        {isOpen && (
+          <div
+            className={cn(
+              'absolute z-50 px-2 py-1 text-xs text-white bg-foreground rounded shadow-lg whitespace-nowrap',
+              placementStyles[placement],
+              'animate-in fade-in-0 zoom-in-95',
+              className
+            )}
+            role="tooltip"
+          >
+            {content}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';

package/src/presentation/atoms/index.ts

@@ -21,3 +21,27 @@ export type { IconProps } from './Icon';
 
 export { Spinner } from './Spinner';
 export type { SpinnerProps } from './Spinner';
+
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+
+export { Radio } from './Radio';
+export type { RadioProps } from './Radio';
+
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';
+
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';
+
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
+
+export { Link } from './Link';
+export type { LinkProps } from './Link';
+
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+
+export { Progress } from './Progress';
+export type { ProgressProps } from './Progress';

package/src/presentation/hooks/index.ts

@@ -11,3 +11,16 @@ export { useMediaQuery, useBreakpoint } from './useMediaQuery';
 export type { Breakpoint } from './useMediaQuery';
 
 export { useLocalStorage } from './useLocalStorage';
+
+export { useClickOutside } from './useClickOutside';
+
+export { useKeyboard, useEscape } from './useKeyboard';
+export type { KeyboardKey, KeyboardModifier, KeyboardOptions, UseClipboardReturn } from './useKeyboard';
+
+export { useDebounce } from './useDebounce';
+
+export { useClipboard } from './useClipboard';
+
+export { useToggle } from './useToggle';
+
+export { useScrollLock } from './useScrollLock';

package/src/presentation/hooks/useClickOutside.ts

@@ -0,0 +1,33 @@
+/**
+ * useClickOutside Hook
+ * @description Detect clicks outside an element
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function useClickOutside<T extends HTMLElement>(
+  callback: () => void,
+  enabled: boolean = true
+) {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleClick = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('touchstart', handleClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('touchstart', handleClick);
+    };
+  }, [callback, enabled]);
+
+  return ref;
+}

package/src/presentation/hooks/useClipboard.ts

@@ -0,0 +1,38 @@
+/**
+ * useClipboard Hook
+ * @description Clipboard operations
+ */
+
+import { useState, useCallback } from 'react';
+
+export interface UseClipboardReturn {
+  value: string;
+  copied: boolean;
+  copy: (text: string) => Promise<void>;
+}
+
+export function useClipboard(): UseClipboardReturn {
+  const [value, setValue] = useState<string>('');
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const copy = useCallback(async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setValue(text);
+      setCopied(true);
+
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+      setCopied(false);
+    }
+  }, []);
+
+  return {
+    value,
+    copied,
+    copy,
+  };
+}

package/src/presentation/hooks/useDebounce.ts

@@ -0,0 +1,22 @@
+/**
+ * useDebounce Hook
+ * @description Debounce a value
+ */
+
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}