@umituz/web-design-system 5.3.0 → 5.4.0

package/src/presentation/atoms/CopyButton.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Copy, Check } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+import { useClipboard } from '../hooks/useClipboard';
+
+export interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  label?: string;
+  copiedLabel?: string;
+  variant?: 'outline' | 'ghost' | 'secondary' | 'default';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+  onCopySuccess?: (text: string) => void;
+}
+
+const sizeStyles = {
+  xs: 'h-6 px-2 text-xs gap-1 [&_svg]:size-3',
+  sm: 'h-8 px-2.5 text-xs gap-1.5 [&_svg]:size-3.5',
+  md: 'h-9 px-3 text-sm gap-2 [&_svg]:size-4',
+  lg: 'h-10 px-4 text-sm gap-2 [&_svg]:size-4',
+};
+
+const iconOnlySizeStyles = {
+  xs: 'h-6 w-6 p-0 [&_svg]:size-3',
+  sm: 'h-8 w-8 p-0 [&_svg]:size-3.5',
+  md: 'h-9 w-9 p-0 [&_svg]:size-4',
+  lg: 'h-10 w-10 p-0 [&_svg]:size-4',
+};
+
+const variantStyles = {
+  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+  ghost: 'hover:bg-accent hover:text-accent-foreground',
+};
+
+export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (
+    {
+      text,
+      label = 'Kopyala',
+      copiedLabel = 'Kopyalandı',
+      variant = 'outline',
+      size = 'sm',
+      showLabel = false,
+      className,
+      onClick,
+      onCopySuccess,
+      ...props
+    },
+    ref
+  ) => {
+    const { copied, copy } = useClipboard();
+
+    const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(e);
+      if (e.defaultPrevented) return;
+      const success = await copy(text);
+      if (success) {
+        onCopySuccess?.(text);
+      }
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label={copied ? copiedLabel : label}
+        title={copied ? copiedLabel : label}
+        className={cn(
+          'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 shrink-0 select-none',
+          showLabel ? sizeStyles[size] : iconOnlySizeStyles[size],
+          variantStyles[variant],
+          copied && 'text-emerald-600 dark:text-emerald-400 border-emerald-500/40 bg-emerald-500/10 hover:bg-emerald-500/20',
+          className
+        )}
+        onClick={handleCopy}
+        {...props}
+      >
+        {copied ? (
+          <Check className="shrink-0 transition-transform duration-200 scale-110" />
+        ) : (
+          <Copy className="shrink-0" />
+        )}
+        {showLabel && (
+          <span>{copied ? copiedLabel : label}</span>
+        )}
+      </button>
+    );
+  }
+);
+
+CopyButton.displayName = 'CopyButton';

package/src/presentation/atoms/Divider.tsx

@@ -1,7 +1,3 @@
-/**
- * Divider Component (Atom)
- * @description Visual separator line
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/HeatmapStrip.tsx

@@ -1,28 +1,18 @@
-/**
- * HeatmapStrip Component (Atom)
- * @description Compact threshold-toned strip of cells — percent-driven color
- * and opacity ramps (skill coverage, streak calendars, activity strips).
- */
 
 import { forwardRef } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
 export interface HeatmapCell {
-  /** 0–100, or null for "no data". */
   percent: number | null;
-  /** Tooltip text for the cell. */
   label?: string;
 }
 
 export interface HeatmapStripProps extends BaseProps {
   cells: readonly HeatmapCell[];
-  /** >= goodAt renders success; >= lowAt renders primary; below renders destructive. */
   goodAt?: number;
   lowAt?: number;
-  /** Cell height in px. */
   height?: number;
-  /** Accessible name for the whole strip. */
   label?: string;
 }
 

package/src/presentation/atoms/Hide.tsx

@@ -1,7 +1,3 @@
-/**
- * Hide Component (Atom)
- * @description Conditionally hide content based on screen breakpoint
- */
 
 import { useBreakpoint } from '../hooks/useMediaQuery';
 import type { HideProps } from '../../domain/types/breakpoint.types';
@@ -11,29 +7,9 @@ export interface HideComponentProps extends BaseProps, HideProps {
   children: React.ReactNode;
 }
 
-/**
- * Conditionally hide content based on breakpoint
- * @param above - Hide on screens larger than this breakpoint
- * @param below - Hide on screens smaller than this breakpoint
- * @param at - Hide only on this specific breakpoint
- * @param children - Content to hide
- *
- * @example
- * ```tsx
- * // Hide on mobile (md and below)
- * <Hide below="md"><DesktopNav /></Hide>
- *
- * // Hide on desktop (lg and above)
- * <Hide above="lg"><MobileNav /></Hide>
- *
- * // Hide only on tablet
- * <Hide at="md"><TabletContent /></Hide>
- * ```
- */
 export const Hide = ({ above, below, at, children, className }: HideComponentProps) => {
   const { matches, isGreaterThan, isLessThan } = useBreakpoint();
 
-  // Determine if content should be hidden
   let shouldHide = false;
 
   if (above) {

package/src/presentation/atoms/Icon.tsx

@@ -1,7 +1,3 @@
-/**
- * Icon Component (Atom)
- * @description Wrapper for SVG icons
- */
 
 import { forwardRef, type SVGAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/IconButton.tsx

@@ -1,7 +1,3 @@
-/**
- * IconButton Component (Atom)
- * @description Round button optimized for icon-only usage with consistent sizing
- */
 
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Input.tsx

@@ -1,7 +1,3 @@
-/**
- * Input Component (Atom)
- * @description Text input field with optional label and helper text
- */
 
 import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Kbd.tsx

@@ -1,7 +1,3 @@
-/**
- * Kbd Component (Atom)
- * @description Keyboard key cap, e.g. for shortcut hints
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Label.tsx

@@ -1,7 +1,3 @@
-/**
- * Label Component (Atom)
- * @description Form label (Shadcn/ui compatible)
- */
 
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';

package/src/presentation/atoms/Link.tsx

@@ -1,7 +1,3 @@
-/**
- * Link Component (Atom)
- * @description Styled anchor/link element
- */
 
 import { forwardRef, type AnchorHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Money.tsx

@@ -1,7 +1,3 @@
-/**
- * Money Component (Atom)
- * @description Locale-aware currency amount from minor units, tabular digits
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { formatMoney } from '../../infrastructure/utils';
@@ -9,9 +5,7 @@ import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
 export interface MoneyProps extends HTMLAttributes<HTMLSpanElement>, BaseProps {
-  /** Integer amount in minor units (e.g. cents) — never floating point. */
   amountMinor: number;
-  /** ISO 4217 currency code; drives the fraction digits. */
   currency: string;
   locale?: string;
 }

package/src/presentation/atoms/Progress.tsx

@@ -1,8 +1,3 @@
-/**
- * Progress Component (Atom)
- * @description Progress indicator bar with optional percent readout and
- *   threshold-driven auto tone (>=95 success, >=70 primary, below muted)
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -15,7 +10,6 @@ export interface ProgressProps extends HTMLAttributes<HTMLDivElement>, BaseProps
   size?: 'sm' | 'md' | 'lg';
   tone?: 'primary' | 'success' | 'warning' | 'destructive' | 'info' | 'auto';
   label?: string;
-  /** Render the rounded percentage next to the bar. */
   showValue?: boolean;
 }
 

package/src/presentation/atoms/Radio.tsx

@@ -1,7 +1,3 @@
-/**
- * Radio Component (Atom)
- * @description Radio input element
- */
 
 import { forwardRef, type InputHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Separator.tsx

@@ -1,7 +1,3 @@
-/**
- * Separator Component (Atom) - Shadcn/ui format
- * @description Visual separator/divider component
- */
 
 import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';

package/src/presentation/atoms/Show.tsx

@@ -1,7 +1,3 @@
-/**
- * Show Component (Atom)
- * @description Conditionally render content based on screen breakpoint
- */
 
 import { useBreakpoint } from '../hooks/useMediaQuery';
 import type { ShowProps } from '../../domain/types/breakpoint.types';
@@ -11,29 +7,9 @@ export interface ShowComponentProps extends BaseProps, ShowProps {
   children: React.ReactNode;
 }
 
-/**
- * Conditionally show content based on breakpoint
- * @param above - Show on screens larger than this breakpoint
- * @param below - Show on screens smaller than this breakpoint
- * @param at - Show only on this specific breakpoint
- * @param children - Content to show
- *
- * @example
- * ```tsx
- * // Show on desktop (lg and above)
- * <Show above="lg"><DesktopNav /></Show>
- *
- * // Show on mobile (sm and below)
- * <Show below="md"><MobileNav /></Show>
- *
- * // Show only on tablet
- * <Show at="md"><TabletContent /></Show>
- * ```
- */
 export const Show = ({ above, below, at, children, className }: ShowComponentProps) => {
   const { matches, isGreaterThan, isLessThan } = useBreakpoint();
 
-  // Determine if content should be shown
   let shouldShow = true;
 
   if (above) {

package/src/presentation/atoms/Skeleton.tsx

@@ -1,7 +1,3 @@
-/**
- * Skeleton Component (Atom)
- * @description Loading placeholder
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Slider.tsx

@@ -1,7 +1,3 @@
-/**
- * Slider Component (Atom)
- * @description Range slider input
- */
 
 import { forwardRef, type InputHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Sparkline.tsx

@@ -1,7 +1,3 @@
-/**
- * Sparkline Component (Atom)
- * @description Minimal inline line chart for compact trends
- */
 
 import { forwardRef, type SVGAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Spinner.tsx

@@ -1,7 +1,3 @@
-/**
- * Spinner Component (Atom)
- * @description Loading indicator
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/StatusDot.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { cn } from '../../infrastructure/utils';
+
+export type StatusType =
+  | 'online'
+  | 'offline'
+  | 'busy'
+  | 'away'
+  | 'pending'
+  | 'success'
+  | 'warning'
+  | 'error';
+
+export interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
+  status: StatusType;
+  ping?: boolean;
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+
+const colorMap: Record<StatusType, { dot: string; ping: string }> = {
+  online: { dot: 'bg-emerald-500', ping: 'bg-emerald-400' },
+  success: { dot: 'bg-emerald-500', ping: 'bg-emerald-400' },
+  busy: { dot: 'bg-rose-500', ping: 'bg-rose-400' },
+  error: { dot: 'bg-rose-500', ping: 'bg-rose-400' },
+  away: { dot: 'bg-amber-500', ping: 'bg-amber-400' },
+  warning: { dot: 'bg-amber-500', ping: 'bg-amber-400' },
+  pending: { dot: 'bg-sky-500', ping: 'bg-sky-400' },
+  offline: { dot: 'bg-zinc-400 dark:bg-zinc-500', ping: 'bg-zinc-300' },
+};
+
+const dotSizeMap = {
+  xs: 'size-1.5',
+  sm: 'size-2',
+  md: 'size-2.5',
+  lg: 'size-3.5',
+};
+
+const textSizeMap = {
+  xs: 'text-xs',
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+export const StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(
+  ({ status, ping = false, label, size = 'sm', className, ...props }, ref) => {
+    const colors = colorMap[status] ?? colorMap.offline;
+
+    return (
+      <span
+        ref={ref}
+        className={cn('inline-flex items-center gap-2 select-none', textSizeMap[size], className)}
+        {...props}
+      >
+        <span className="relative flex shrink-0 items-center justify-center">
+          {ping && status !== 'offline' && (
+            <span
+              className={cn(
+                'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+                colors.ping
+              )}
+            />
+          )}
+          <span
+            className={cn(
+              'relative inline-flex rounded-full',
+              dotSizeMap[size],
+              colors.dot
+            )}
+          />
+        </span>
+        {label && <span className="text-foreground/90 font-medium">{label}</span>}
+      </span>
+    );
+  }
+);
+
+StatusDot.displayName = 'StatusDot';

package/src/presentation/atoms/Switch.tsx

@@ -1,7 +1,3 @@
-/**
- * Switch Component (Atom) - Shadcn/ui format
- * @description Toggle switch component using class-variance-authority
- */
 
 import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';

package/src/presentation/atoms/Text.tsx

@@ -1,7 +1,3 @@
-/**
- * Text Component (Atom)
- * @description Styled text element with polymorphic rendering
- */
 
 import { forwardRef, memo, type ElementType, type ComponentPropsWithoutRef } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Textarea.tsx

@@ -1,7 +1,3 @@
-/**
- * Textarea Component (Atom)
- * @description Multiline text field with optional label and helper text
- */
 
 import { forwardRef, useId, type ReactNode, type TextareaHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/Toggle.tsx

@@ -1,7 +1,3 @@
-/**
- * Toggle Component (Atom) - Shadcn/ui format
- * @description Toggle button component with variants
- */
 
 import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';

package/src/presentation/atoms/Tooltip.tsx

@@ -1,7 +1,3 @@
-/**
- * Tooltip Component (Atom)
- * @description Popup with additional information
- */
 
 import { forwardRef, type HTMLAttributes, type ReactNode, useState, useRef, useEffect } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/atoms/index.ts

@@ -1,10 +1,4 @@
-/**
- * Atoms Export
- * @description Atomic components - smallest UI elements
- * Subpath: @umituz/web-design-system/atoms
- */
-
-export { Button } from './Button';
+export { Button, buttonVariants } from './Button';
 export type { ButtonProps } from './Button';
 
 export { Badge } from './Badge';
@@ -65,7 +59,6 @@ export { Toggle, toggleVariants } from './Toggle';
 
 export { Show } from './Show';
 export type { ShowComponentProps } from './Show';
-
 export { Hide } from './Hide';
 export type { HideComponentProps } from './Hide';
 
@@ -73,9 +66,9 @@ export { IconButton } from './IconButton';
 export type { IconButtonProps } from './IconButton';
 
 export { Sparkline } from './Sparkline';
+export type { SparklineProps } from './Sparkline';
 export { HeatmapStrip } from './HeatmapStrip';
 export type { HeatmapStripProps, HeatmapCell } from './HeatmapStrip';
-export type { SparklineProps } from './Sparkline';
 
 export { NativeSelect } from './NativeSelect';
 export type { NativeSelectProps, NativeSelectOption } from './NativeSelect';
@@ -91,3 +84,10 @@ export type { KbdProps } from './Kbd';
 
 export { Money } from './Money';
 export type { MoneyProps } from './Money';
+
+// New Productivity Atoms
+export { CopyButton } from './CopyButton';
+export type { CopyButtonProps } from './CopyButton';
+
+export { StatusDot } from './StatusDot';
+export type { StatusDotProps, StatusType } from './StatusDot';

package/src/presentation/hooks/index.ts

@@ -1,8 +1,3 @@
-/**
- * Presentation Hooks Export
- * @description React hooks
- * Subpath: @umituz/web-design-system/hooks
- */
 
 export { useTheme } from './useTheme';
 export type { Theme, UseThemeReturn } from './useTheme';

package/src/presentation/hooks/useClickOutside.ts

@@ -1,7 +1,3 @@
-/**
- * useClickOutside Hook
- * @description Detect clicks outside an element
- */
 
 import { useEffect, useRef } from 'react';
 
@@ -10,8 +6,6 @@ export function useClickOutside<T extends HTMLElement>(
   enabled: boolean = true
 ) {
   const ref = useRef<T>(null);
-  // Use a ref to keep the latest callback without retriggering the effect
-  // on every render — callers commonly pass inline functions.
   const callbackRef = useRef(callback);
   useEffect(() => {
     callbackRef.current = callback;

package/src/presentation/hooks/useClipboard.ts

@@ -1,7 +1,3 @@
-/**
- * useClipboard Hook
- * @description Clipboard operations with proper cleanup
- */
 
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { TIMING } from '../../infrastructure/constants/timing.constants';

package/src/presentation/hooks/useDebounce.ts

@@ -1,7 +1,3 @@
-/**
- * useDebounce Hook
- * @description Debounce a value with optimized performance
- */
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { TIMING } from '../../infrastructure/constants/timing.constants';
@@ -30,10 +26,6 @@ export function useDebounce<T>(value: T, delay: number = TIMING.DEBOUNCE_DEFAULT
   return debouncedValue;
 }
 
-/**
- * useThrottle Hook
- * @description Throttle a function to limit execution rate
- */
 export function useThrottle<T extends (...args: unknown[]) => unknown>(
   func: T,
   delay: number = TIMING.THROTTLE_DEFAULT_MS

package/src/presentation/hooks/useKeyboard.ts

@@ -1,7 +1,3 @@
-/**
- * useKeyboard Hook
- * @description Keyboard event handling
- */
 
 import { useEffect, useCallback } from 'react';
 
@@ -16,7 +12,6 @@ export interface KeyboardOptions {
   enabled?: boolean;
 }
 
-// Helper function to check if modifiers match
 const checkModifiers = (event: KeyboardEvent, modifiers: KeyboardModifier[]): boolean => {
   return modifiers.every((mod) => {
     switch (mod) {
@@ -41,7 +36,6 @@ export function useKeyboard({
   onKeyUp,
   enabled = true,
 }: KeyboardOptions) {
-  // FIX: Create handlers once and reuse to prevent duplicate logic
   const handleKeyDown = useCallback((event: KeyboardEvent) => {
     const keyMatches = event.key.toLowerCase() === key.toLowerCase();
     const modifiersMatch = checkModifiers(event, modifiers);

package/src/presentation/hooks/useLocalStorage.ts

@@ -1,7 +1,3 @@
-/**
- * useLocalStorage Hook
- * @description LocalStorage state management with safe error surfacing
- */
 
 import { useCallback, useEffect, useState, useRef } from 'react';