@umituz/web-design-system 3.1.22 → 4.0.2

package/src/presentation/hooks/useScrollLock.ts

@@ -1,26 +1,54 @@
 /**
  * useScrollLock Hook
- * @description Lock/unlock body scroll
+ * @description Lock/unlock body scroll while preserving scrollbar gutter
  */
 
 import { useEffect } from 'react';
 
-export function useScrollLock(enabled: boolean = true) {
+/** 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);
+};
+
+const SCROLLBAR_GUTTER_STYLE_ID = 'use-scroll-lock-gutter-style';
+
+const ensureScrollbarGutterStyle = () => {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(SCROLLBAR_GUTTER_STYLE_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = SCROLLBAR_GUTTER_STYLE_ID;
+  style.textContent = `
+    html.use-scroll-lock-active body {
+      overflow: hidden;
+    }
+  `;
+  document.head.appendChild(style);
+};
+
+export const useScrollLock = (enabled: boolean = true): void => {
   useEffect(() => {
-    if (!enabled) return;
+    if (!enabled || typeof document === 'undefined') return;
 
-    const originalStyle = window.getComputedStyle(document.body).overflow;
-    const originalPaddingRight = window.getComputedStyle(document.body).paddingRight;
+    ensureScrollbarGutterStyle();
+    const html = document.documentElement;
+    const body = document.body;
 
-    // FIX: Ensure scrollbar width is never negative
-    const scrollbarWidth = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+    const previousOverflow = body.style.overflow;
+    const previousPaddingRight = body.style.paddingRight;
+    const scrollbarWidth = measureScrollbarWidth();
 
-    document.body.style.overflow = 'hidden';
-    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    body.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    html.classList.add('use-scroll-lock-active');
 
     return () => {
-      document.body.style.overflow = originalStyle;
-      document.body.style.paddingRight = originalPaddingRight;
+      body.style.overflow = previousOverflow;
+      body.style.paddingRight = previousPaddingRight;
+      html.classList.remove('use-scroll-lock-active');
     };
   }, [enabled]);
-}
+};

package/src/presentation/hooks/useToggle.ts

@@ -1,16 +1,18 @@
 /**
  * useToggle Hook
- * @description Toggle boolean state
+ * @description Toggle boolean state with explicit setValue
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useMemo } from 'react';
 
-export function useToggle(initialValue: boolean = false): [boolean, () => void, (value: boolean) => void] {
-  const [value, setValue] = useState(initialValue);
+export type UseToggleReturn = [boolean, () => void, (value: boolean) => void];
+
+export function useToggle(initialValue: boolean = false): UseToggleReturn {
+  const [value, setValue] = useState<boolean>(initialValue);
 
   const toggle = useCallback(() => {
-    setValue((v) => !v);
+    setValue((prev) => !prev);
   }, []);
 
-  return [value, toggle, setValue];
+  return useMemo<UseToggleReturn>(() => [value, toggle, setValue], [value, toggle]);
 }

package/src/presentation/molecules/ActiveFilterTags.tsx

@@ -3,6 +3,8 @@
  * @description Display active filters with remove buttons
  */
 
+import { X } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
 export interface ActiveFilterTagsProps extends BaseProps {
@@ -24,7 +26,7 @@ export const ActiveFilterTags = ({
   className,
 }: ActiveFilterTagsProps) => {
   const categoryName = selectedCategory
-    ? categories.find(c => c.id === selectedCategory)?.name
+    ? categories.find((c) => c.id === selectedCategory)?.name
     : null;
 
   if (!selectedCategory && selectedTags.length === 0) {
@@ -32,49 +34,48 @@ export const ActiveFilterTags = ({
   }
 
   return (
-    <div className={`hidden lg:flex flex-wrap items-center gap-2 mb-4 md:mb-6 ${className || ''}`}>
-      <span className="text-sm text-text-secondary">Active filters:</span>
+    <div
+      role="region"
+      aria-label="Active filters"
+      className={cn('mb-4 hidden flex-wrap items-center gap-2 md:mb-6 lg:flex', className)}
+    >
+      <span className="text-sm text-muted-foreground">Active filters:</span>
 
-      {/* Category Tag */}
       {categoryName && (
-        <span className="inline-flex items-center gap-1 px-3 py-1.5 bg-primary-light text-text-primary rounded-full text-xs font-medium">
+        <span className="inline-flex items-center gap-1 rounded-full bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground">
           {categoryName}
           <button
+            type="button"
             onClick={onCategoryRemove}
-            className="ml-1 hover:opacity-70 transition-opacity"
             aria-label={`Remove ${categoryName} filter`}
+            className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
+            <X className="h-3 w-3" aria-hidden="true" />
           </button>
         </span>
       )}
 
-      {/* Tag Buttons */}
       {selectedTags.map((tag) => (
         <span
           key={tag}
-          className="inline-flex items-center gap-1 px-3 py-1.5 bg-bg-secondary text-text-primary rounded-full text-xs font-medium border border-border"
+          className="inline-flex items-center gap-1 rounded-full border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground"
         >
           {tag}
           <button
+            type="button"
             onClick={() => onTagRemove(tag)}
-            className="ml-1 hover:opacity-70 transition-opacity"
             aria-label={`Remove ${tag} filter`}
+            className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
+            <X className="h-3 w-3" aria-hidden="true" />
           </button>
         </span>
       ))}
 
-      {/* Clear All Button */}
       <button
-        onClick={onClearAll}
-        className="px-3 py-1.5 text-primary-light hover:underline text-xs font-medium"
         type="button"
+        onClick={onClearAll}
+        className="px-3 py-1.5 text-xs font-medium text-primary underline-offset-4 transition-colors hover:underline"
       >
         Clear all
       </button>

package/src/presentation/molecules/Avatar.tsx

@@ -59,7 +59,7 @@ const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
 
 AvatarImage.displayName = 'AvatarImage';
 
-export interface AvatarFallbackProps extends HTMLAttributes<HTMLDivElement> {}
+export type AvatarFallbackProps = HTMLAttributes<HTMLDivElement>;
 
 const AvatarFallback = forwardRef<HTMLDivElement, AvatarFallbackProps>(
   ({ className, ...props }, ref) => {

package/src/presentation/molecules/CodeBlock.tsx

@@ -6,6 +6,8 @@
 import { useState, useEffect } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { ChevronDown, ChevronUp, Check, Copy } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
 export interface CodeBlockProps extends BaseProps {
@@ -13,106 +15,107 @@ export interface CodeBlockProps extends BaseProps {
   language?: string;
   filename?: string;
   showLineNumbers?: boolean;
+  /** Lines threshold to enable collapse/expand. */
+  collapseThreshold?: number;
 }
 
+const DEFAULT_LANGUAGE = 'javascript';
+const DEFAULT_COLLAPSE_THRESHOLD = 10;
+const COPY_RESET_MS = 2000;
+const COLLAPSED_MAX_HEIGHT = 'max-h-80';
+
 export const CodeBlock = ({
   children,
-  language = 'javascript',
+  language = DEFAULT_LANGUAGE,
   filename,
   showLineNumbers = false,
+  collapseThreshold = DEFAULT_COLLAPSE_THRESHOLD,
   className,
 }: CodeBlockProps) => {
   const [copied, setCopied] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
 
-  // Cleanup copy timeout
   useEffect(() => {
-    if (copied) {
-      const timeout = setTimeout(() => setCopied(false), 2000);
-      return () => clearTimeout(timeout);
-    }
+    if (!copied) return;
+    const timeout = setTimeout(() => setCopied(false), COPY_RESET_MS);
+    return () => clearTimeout(timeout);
   }, [copied]);
 
   const handleCopy = async () => {
+    if (typeof navigator === 'undefined' || !navigator.clipboard) {
+      console.error('[CodeBlock] Clipboard API not available');
+      return;
+    }
     try {
       await navigator.clipboard.writeText(children);
       setCopied(true);
     } catch (error) {
-      console.error('Failed to copy code:', error);
+      console.error('[CodeBlock] Failed to copy code:', error);
     }
   };
 
-  // Auto-detect language if not provided
-  const detectedLanguage = language || 'javascript';
-
-  // Check if code is long enough for collapse
   const lineCount = children.split('\n').length;
-  const isLongCode = lineCount > 10;
+  const isLongCode = lineCount > collapseThreshold;
 
   return (
-    <div className={`my-6 rounded-lg border border-border overflow-hidden bg-bg-card transition-theme ${className || ''}`}>
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2 bg-bg-tertiary border-b border-border">
+    <div
+      className={cn(
+        'my-6 overflow-hidden rounded-lg border border-border bg-card transition-colors',
+        className
+      )}
+    >
+      <div className="flex items-center justify-between border-b border-border bg-secondary px-4 py-2">
         <div className="flex items-center gap-2">
           {filename && (
-            <span className="text-xs font-medium text-text-secondary">{filename}</span>
+            <span className="text-xs font-medium text-muted-foreground">{filename}</span>
           )}
-          <span className="text-xs px-2 py-1 bg-bg-primary text-text-primary rounded-md font-medium">
-            {detectedLanguage}
+          <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-foreground">
+            {language}
           </span>
         </div>
 
         <div className="flex items-center gap-2">
           {isLongCode && (
             <button
-              onClick={() => setIsExpanded(!isExpanded)}
-              className="p-1 text-text-secondary hover:text-text-primary rounded transition-colors"
-              title={isExpanded ? 'Collapse' : 'Expand'}
               type="button"
+              onClick={() => setIsExpanded((prev) => !prev)}
               aria-label={isExpanded ? 'Collapse code' : 'Expand code'}
+              title={isExpanded ? 'Collapse' : 'Expand'}
+              className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
             >
               {isExpanded ? (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="18 15 12 9 6 15" />
-                </svg>
+                <ChevronUp className="h-4 w-4" aria-hidden="true" />
               ) : (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                <ChevronDown className="h-4 w-4" aria-hidden="true" />
               )}
             </button>
           )}
 
           <button
-            onClick={handleCopy}
-            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
-              copied
-                ? 'bg-green-500 text-white'
-                : 'bg-bg-secondary text-text-primary hover:bg-bg-tertiary border border-border'
-            }`}
-            title={copied ? 'Copied!' : 'Copy code'}
             type="button"
+            onClick={handleCopy}
             aria-label={copied ? 'Code copied' : 'Copy code'}
+            title={copied ? 'Copied!' : 'Copy code'}
+            className={cn(
+              'flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring',
+              copied
+                ? 'border-success bg-success text-success-foreground'
+                : 'border-border bg-secondary text-foreground hover:bg-muted'
+            )}
           >
             {copied ? (
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
+              <Check className="h-3.5 w-3.5" aria-hidden="true" />
             ) : (
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-              </svg>
+              <Copy className="h-3.5 w-3.5" aria-hidden="true" />
             )}
             <span className="hidden sm:inline">{copied ? 'Copied!' : 'Copy'}</span>
           </button>
         </div>
       </div>
 
-      {/* Code */}
-      <div className={isLongCode && !isExpanded ? 'max-h-80 overflow-hidden' : ''}>
+      <div className={cn(isLongCode && !isExpanded && COLLAPSED_MAX_HEIGHT, 'overflow-hidden')}>
         <SyntaxHighlighter
-          language={detectedLanguage}
+          language={language}
           style={vscDarkPlus}
           showLineNumbers={showLineNumbers}
           customStyle={{
@@ -126,14 +129,13 @@ export const CodeBlock = ({
         </SyntaxHighlighter>
       </div>
 
-      {/* Expand hint for collapsed code */}
       {isLongCode && !isExpanded && (
-        <div className="px-4 py-2 bg-bg-secondary text-center border-t border-border">
+        <div className="border-t border-border bg-secondary px-4 py-2 text-center">
           <button
-            onClick={() => setIsExpanded(true)}
-            className="text-sm text-primary-light hover:underline font-medium"
             type="button"
+            onClick={() => setIsExpanded(true)}
             aria-label={`Show all ${lineCount} lines`}
+            className="text-sm font-medium text-primary underline-offset-4 transition-colors hover:underline focus:outline-none focus:ring-2 focus:ring-ring"
           >
             Show all {lineCount} lines
           </button>

package/src/presentation/molecules/InputGroup.tsx

@@ -18,7 +18,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
     return (
       <div
         ref={ref}
-        className="relative"
+        className={cn('relative', className)}
         {...props}
       >
         {leftElement && (

package/src/presentation/molecules/ListItem.tsx

@@ -1,27 +1,25 @@
 /**
  * ListItem Component (Molecule)
  * @description Reusable list item with icon, content, and actions
- * Reduces boilerplate in list components throughout the app
  */
 
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, type ReactNode, type MouseEvent } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
-export interface ListItemProps extends BaseProps {
+export interface ListItemProps extends Omit<BaseProps, 'id'> {
   title: string;
   description?: string;
   icon?: ReactNode;
   actions?: ReactNode;
   leftContent?: ReactNode;
   rightContent?: ReactNode;
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
   href?: string;
   disabled?: boolean;
   selected?: boolean;
   size?: 'sm' | 'md' | 'lg';
   variant?: 'default' | 'bordered' | 'ghost';
-  className?: string;
   id?: string;
 }
 
@@ -29,27 +27,27 @@ const sizeStyles = {
   sm: 'p-3 gap-3',
   md: 'p-4 gap-4',
   lg: 'p-5 gap-5',
-};
+} as const;
 
 const titleSizeStyles = {
   sm: 'text-sm',
   md: 'text-base',
   lg: 'text-lg',
-};
+} as const;
 
 const descriptionSizeStyles = {
   sm: 'text-xs',
   md: 'text-sm',
   lg: 'text-base',
-};
+} as const;
 
 const iconSizeStyles = {
   sm: 'h-4 w-4',
   md: 'h-5 w-5',
   lg: 'h-6 w-6',
-};
+} as const;
 
-export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
+export const ListItem = forwardRef<HTMLElement, ListItemProps>(
   (
     {
       className,
@@ -70,46 +68,57 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
     ref
   ) => {
     const baseClasses = cn(
-      'flex items-center justify-between w-full transition-all duration-200',
+      'flex w-full items-center justify-between transition-all duration-200',
       sizeStyles[size],
       !disabled && onClick && 'cursor-pointer hover:bg-muted/50 active:scale-[0.98]',
-      selected && 'bg-muted/50 border-primary',
-      variant === 'bordered' && 'border border-border rounded-lg',
+      selected && 'border-primary bg-muted/50',
+      variant === 'bordered' && 'rounded-lg border border-border',
       variant === 'ghost' && 'hover:bg-muted/30',
-      disabled && 'opacity-50 cursor-not-allowed',
+      disabled && 'cursor-not-allowed opacity-50',
       className
     );
 
     const content = (
       <>
-        {leftContent || icon ? (
-          <div className="flex items-center gap-3 flex-shrink-0">
-            {icon && <div className={cn(iconSizeStyles[size], 'text-muted-foreground')}>{icon}</div>}
-            {!icon && leftContent}
+        {(leftContent || icon) && (
+          <div className="flex shrink-0 items-center gap-3">
+            {icon ? (
+              <div className={cn(iconSizeStyles[size], 'text-muted-foreground')}>{icon}</div>
+            ) : (
+              leftContent
+            )}
           </div>
-        ) : null}
+        )}
 
-        <div className="flex-1 min-w-0">
-          <p className={cn('font-medium text-foreground truncate', titleSizeStyles[size])}>{title}</p>
+        <div className="min-w-0 flex-1">
+          <p className={cn('truncate font-medium text-foreground', titleSizeStyles[size])}>
+            {title}
+          </p>
           {description && (
-            <p className={cn('text-muted-foreground truncate', descriptionSizeStyles[size])}>{description}</p>
+            <p className={cn('truncate text-muted-foreground', descriptionSizeStyles[size])}>
+              {description}
+            </p>
           )}
         </div>
 
-        {rightContent || actions ? (
-          <div className="flex items-center gap-2 flex-shrink-0">
+        {(rightContent || actions) && (
+          <div className="flex shrink-0 items-center gap-2">
             {rightContent}
             {actions}
           </div>
-        ) : null}
+        )}
       </>
     );
 
-    // NOTE: Polymorphic component - renders as anchor when href is provided
-    // "ref as any" is necessary due to TypeScript limitations with polymorphic refs
     if (href && !disabled) {
       return (
-        <a href={href} className={baseClasses} id={id} ref={ref as any}>
+        <a
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          href={href}
+          className={baseClasses}
+          id={id}
+          onClick={onClick}
+        >
           {content}
         </a>
       );
@@ -117,10 +126,12 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
 
     return (
       <div
-        ref={ref}
+        ref={ref as React.Ref<HTMLDivElement>}
         className={baseClasses}
         onClick={disabled ? undefined : onClick}
         id={id}
+        role={onClick && !disabled ? 'button' : undefined}
+        tabIndex={onClick && !disabled ? 0 : undefined}
       >
         {content}
       </div>

package/src/presentation/molecules/Select.tsx

@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:translate-y-1',
         className

package/src/presentation/molecules/Toggle.tsx

@@ -16,13 +16,13 @@ export interface ToggleProps extends ButtonHTMLAttributes<HTMLButtonElement>, Ba
 const sizeStyles = {
   sm: 'h-5 w-9',
   md: 'h-6 w-11',
-  lg: 'h-7 w-13',
+  lg: 'h-7 w-14',
 };
 
 const thumbSizeStyles = {
-  sm: 'h-4 w-4 data-[state=checked:translate-x-4',
-  md: 'h-5 w-5 data-[state=checked:translate-x-5',
-  lg: 'h-6 w-6 data-[state=checked:translate-x-6',
+  sm: 'h-4 w-4 data-[state=checked]:translate-x-4',
+  md: 'h-5 w-5 data-[state=checked]:translate-x-5',
+  lg: 'h-6 w-6 data-[state=checked]:translate-x-7',
 };
 
 export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(

package/src/presentation/molecules/index.ts

@@ -42,8 +42,5 @@ export type { ListItemProps } from './ListItem';
 export { ActiveFilterTags } from './ActiveFilterTags';
 export type { ActiveFilterTagsProps } from './ActiveFilterTags';
 
-export { Breadcrumb } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';
-
 export { CodeBlock } from './CodeBlock';
 export type { CodeBlockProps } from './CodeBlock';

package/src/presentation/organisms/Alert.tsx

@@ -16,7 +16,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       ref={ref}
       role="alert"
       className={cn(
-        'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+        'relative w-full rounded-lg border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
         variant === 'default' && 'bg-background text-foreground',
         variant === 'destructive' && 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
         className