@papernote/ui 1.3.1 → 1.6.0

package/src/components/SwipeActions.tsx

@@ -0,0 +1,387 @@
+// SwipeActions - Touch gesture-based swipe actions component
+// Provides left/right swipe actions commonly used in mobile list items
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+
+/**
+ * Single swipe action configuration
+ */
+export interface SwipeAction {
+  /** Unique identifier */
+  id: string;
+  /** Action label (shown on the button) */
+  label: string;
+  /** Icon to display */
+  icon?: React.ReactNode;
+  /** Background color class (Tailwind) */
+  color?: 'primary' | 'success' | 'warning' | 'error' | 'default';
+  /** Click handler */
+  onClick: () => void;
+  /** Whether this is the primary action (full swipe triggers it) */
+  primary?: boolean;
+}
+
+/**
+ * SwipeActions component props
+ */
+export interface SwipeActionsProps {
+  /** Content to wrap with swipe actions */
+  children: React.ReactNode;
+  /** Actions shown when swiping left (appears on right side) */
+  leftActions?: SwipeAction[];
+  /** Actions shown when swiping right (appears on left side) */
+  rightActions?: SwipeAction[];
+  /** Swipe threshold in pixels to reveal actions (default: 80) */
+  threshold?: number;
+  /** Full swipe threshold percentage to trigger primary action (default: 0.5) */
+  fullSwipeThreshold?: number;
+  /** Enable full swipe to trigger primary action */
+  fullSwipe?: boolean;
+  /** Disable swipe gestures */
+  disabled?: boolean;
+  /** Callback when actions are revealed/hidden */
+  onSwipeChange?: (direction: 'left' | 'right' | null) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Color mapping for action buttons
+const colorClasses = {
+  primary: 'bg-accent-500 text-white',
+  success: 'bg-success-500 text-white',
+  warning: 'bg-warning-500 text-white',
+  error: 'bg-error-500 text-white',
+  default: 'bg-paper-500 text-white',
+};
+
+/**
+ * SwipeActions - Touch-based swipe actions for list items
+ *
+ * Wraps any content with swipe-to-reveal actions, commonly used in mobile
+ * list items for quick actions like delete, archive, edit, etc.
+ *
+ * Features:
+ * - Left and right swipe actions
+ * - Full swipe to trigger primary action
+ * - Spring-back animation
+ * - Touch and mouse support
+ * - Customizable thresholds
+ *
+ * @example Basic delete action
+ * ```tsx
+ * <SwipeActions
+ *   leftActions={[
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: <Trash className="h-5 w-5" />,
+ *       color: 'error',
+ *       onClick: () => handleDelete(item),
+ *       primary: true,
+ *     },
+ *   ]}
+ * >
+ *   <div className="p-4 bg-white">
+ *     List item content
+ *   </div>
+ * </SwipeActions>
+ * ```
+ *
+ * @example Multiple actions on both sides
+ * ```tsx
+ * <SwipeActions
+ *   leftActions={[
+ *     { id: 'delete', label: 'Delete', icon: <Trash />, color: 'error', onClick: handleDelete },
+ *     { id: 'archive', label: 'Archive', icon: <Archive />, color: 'warning', onClick: handleArchive },
+ *   ]}
+ *   rightActions={[
+ *     { id: 'edit', label: 'Edit', icon: <Edit />, color: 'primary', onClick: handleEdit },
+ *   ]}
+ *   fullSwipe
+ * >
+ *   <ListItem />
+ * </SwipeActions>
+ * ```
+ */
+export function SwipeActions({
+  children,
+  leftActions = [],
+  rightActions = [],
+  threshold = 80,
+  fullSwipeThreshold = 0.5,
+  fullSwipe = false,
+  disabled = false,
+  onSwipeChange,
+  className = '',
+}: SwipeActionsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  
+  // Swipe state
+  const [translateX, setTranslateX] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [activeDirection, setActiveDirection] = useState<'left' | 'right' | null>(null);
+  
+  // Touch/mouse tracking
+  const startX = useRef(0);
+  const currentX = useRef(0);
+  const startTime = useRef(0);
+
+  // Calculate action widths
+  const leftActionsWidth = leftActions.length * 72; // 72px per action
+  const rightActionsWidth = rightActions.length * 72;
+
+  // Reset position
+  const resetPosition = useCallback(() => {
+    setTranslateX(0);
+    setActiveDirection(null);
+    onSwipeChange?.(null);
+  }, [onSwipeChange]);
+
+  // Handle touch/mouse start
+  const handleStart = useCallback((clientX: number) => {
+    if (disabled) return;
+    
+    startX.current = clientX;
+    currentX.current = clientX;
+    startTime.current = Date.now();
+    setIsDragging(true);
+  }, [disabled]);
+
+  // Handle touch/mouse move
+  const handleMove = useCallback((clientX: number) => {
+    if (!isDragging || disabled) return;
+
+    const deltaX = clientX - startX.current;
+    currentX.current = clientX;
+
+    // Determine direction and apply resistance at boundaries
+    let newTranslateX = deltaX;
+    
+    // Swiping left (reveals left actions on right side)
+    if (deltaX < 0) {
+      if (leftActions.length === 0) {
+        newTranslateX = deltaX * 0.2; // Heavy resistance if no actions
+      } else {
+        const maxSwipe = fullSwipe 
+          ? -(containerRef.current?.offsetWidth || 300) 
+          : -leftActionsWidth;
+        newTranslateX = Math.max(maxSwipe, deltaX);
+        
+        // Apply resistance past the action buttons
+        if (newTranslateX < -leftActionsWidth) {
+          const overSwipe = newTranslateX + leftActionsWidth;
+          newTranslateX = -leftActionsWidth + overSwipe * 0.3;
+        }
+      }
+      setActiveDirection('left');
+      onSwipeChange?.('left');
+    }
+    // Swiping right (reveals right actions on left side)
+    else if (deltaX > 0) {
+      if (rightActions.length === 0) {
+        newTranslateX = deltaX * 0.2; // Heavy resistance if no actions
+      } else {
+        const maxSwipe = fullSwipe 
+          ? (containerRef.current?.offsetWidth || 300) 
+          : rightActionsWidth;
+        newTranslateX = Math.min(maxSwipe, deltaX);
+        
+        // Apply resistance past the action buttons
+        if (newTranslateX > rightActionsWidth) {
+          const overSwipe = newTranslateX - rightActionsWidth;
+          newTranslateX = rightActionsWidth + overSwipe * 0.3;
+        }
+      }
+      setActiveDirection('right');
+      onSwipeChange?.('right');
+    }
+
+    setTranslateX(newTranslateX);
+  }, [isDragging, disabled, leftActions.length, rightActions.length, leftActionsWidth, rightActionsWidth, fullSwipe, onSwipeChange]);
+
+  // Handle touch/mouse end
+  const handleEnd = useCallback(() => {
+    if (!isDragging) return;
+    
+    setIsDragging(false);
+    
+    const deltaX = currentX.current - startX.current;
+    const velocity = Math.abs(deltaX) / (Date.now() - startTime.current);
+    const containerWidth = containerRef.current?.offsetWidth || 300;
+    
+    // Check for full swipe trigger
+    if (fullSwipe) {
+      const swipePercentage = Math.abs(translateX) / containerWidth;
+      
+      if (swipePercentage >= fullSwipeThreshold || velocity > 0.5) {
+        // Find primary action and trigger it
+        if (translateX < 0 && leftActions.length > 0) {
+          const primaryAction = leftActions.find(a => a.primary) || leftActions[0];
+          primaryAction.onClick();
+          resetPosition();
+          return;
+        } else if (translateX > 0 && rightActions.length > 0) {
+          const primaryAction = rightActions.find(a => a.primary) || rightActions[0];
+          primaryAction.onClick();
+          resetPosition();
+          return;
+        }
+      }
+    }
+
+    // Snap to open or closed position
+    if (Math.abs(translateX) >= threshold || velocity > 0.3) {
+      // Snap open
+      if (translateX < 0 && leftActions.length > 0) {
+        setTranslateX(-leftActionsWidth);
+        setActiveDirection('left');
+        onSwipeChange?.('left');
+      } else if (translateX > 0 && rightActions.length > 0) {
+        setTranslateX(rightActionsWidth);
+        setActiveDirection('right');
+        onSwipeChange?.('right');
+      } else {
+        resetPosition();
+      }
+    } else {
+      // Snap closed
+      resetPosition();
+    }
+  }, [isDragging, translateX, threshold, fullSwipe, fullSwipeThreshold, leftActions, rightActions, leftActionsWidth, rightActionsWidth, resetPosition, onSwipeChange]);
+
+  // Touch event handlers
+  const handleTouchStart = (e: React.TouchEvent) => {
+    handleStart(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    handleMove(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    handleEnd();
+  };
+
+  // Mouse event handlers (for testing/desktop)
+  const handleMouseDown = (e: React.MouseEvent) => {
+    handleStart(e.clientX);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    handleMove(e.clientX);
+  };
+
+  const handleMouseUp = () => {
+    handleEnd();
+  };
+
+  // Close on outside click
+  useEffect(() => {
+    if (activeDirection === null) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        resetPosition();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [activeDirection, resetPosition]);
+
+  // Handle mouse leave during drag
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseLeave = () => {
+      handleEnd();
+    };
+
+    document.addEventListener('mouseup', handleMouseLeave);
+    return () => document.removeEventListener('mouseup', handleMouseLeave);
+  }, [isDragging, handleEnd]);
+
+  // Render action button
+  const renderActionButton = (action: SwipeAction) => {
+    const colorClass = colorClasses[action.color || 'default'];
+    
+    return (
+      <button
+        key={action.id}
+        onClick={(e) => {
+          e.stopPropagation();
+          action.onClick();
+          resetPosition();
+        }}
+        className={`
+          flex flex-col items-center justify-center
+          w-18 h-full min-w-[72px]
+          ${colorClass}
+          transition-transform duration-150
+        `}
+        style={{
+          transform: isDragging ? 'scale(1)' : 'scale(1)',
+        }}
+      >
+        {action.icon && (
+          <div className="mb-1">
+            {action.icon}
+          </div>
+        )}
+        <span className="text-xs font-medium">{action.label}</span>
+      </button>
+    );
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`relative overflow-hidden ${className}`}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      onMouseDown={handleMouseDown}
+      onMouseMove={isDragging ? handleMouseMove : undefined}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={isDragging ? handleEnd : undefined}
+    >
+      {/* Right actions (revealed when swiping right) */}
+      {rightActions.length > 0 && (
+        <div
+          className="absolute left-0 top-0 bottom-0 flex"
+          style={{ width: rightActionsWidth }}
+        >
+          {rightActions.map((action) => renderActionButton(action))}
+        </div>
+      )}
+
+      {/* Left actions (revealed when swiping left) */}
+      {leftActions.length > 0 && (
+        <div
+          className="absolute right-0 top-0 bottom-0 flex"
+          style={{ width: leftActionsWidth }}
+        >
+          {leftActions.map((action) => renderActionButton(action))}
+        </div>
+      )}
+
+      {/* Main content */}
+      <div
+        ref={contentRef}
+        className={`
+          relative bg-white
+          ${isDragging ? '' : 'transition-transform duration-200 ease-out'}
+        `}
+        style={{
+          transform: `translateX(${translateX}px)`,
+          touchAction: 'pan-y', // Allow vertical scrolling
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default SwipeActions;

package/src/components/Switch.stories.tsx

@@ -266,3 +266,161 @@ export const SettingsGroup: Story = {
     );
   },
 };
+
+// Mobile-optimized stories
+export const MobileLargeTouch: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Large size (lg) switch provides larger touch target for mobile devices. On mobile, md automatically upgrades to lg.',
+      },
+    },
+  },
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Switch
+        checked={checked}
+        onChange={setChecked}
+        size="lg"
+        label="Touch-friendly switch"
+      />
+    );
+  },
+};
+
+export const MobileSettingsPage: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Mobile settings page with large switches optimized for touch interaction.',
+      },
+    },
+  },
+  render: () => {
+    const [settings, setSettings] = useState({
+      darkMode: false,
+      notifications: true,
+      sounds: true,
+      haptics: false,
+      location: true,
+      analytics: false,
+    });
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', width: '100%', padding: '1rem' }}>
+        <h2 style={{ fontSize: '1.25rem', fontWeight: 600, marginBottom: '1.5rem' }}>Settings</h2>
+        
+        <div style={{ borderBottom: '1px solid #e5e5e5', paddingBottom: '0.5rem', marginBottom: '0.75rem' }}>
+          <div style={{ fontSize: '0.75rem', fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+            Appearance
+          </div>
+        </div>
+        
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 0' }}>
+          <div>
+            <div style={{ fontWeight: 500 }}>Dark Mode</div>
+            <div style={{ fontSize: '0.75rem', color: '#666' }}>Use dark color scheme</div>
+          </div>
+          <Switch checked={settings.darkMode} onChange={(v) => setSettings({...settings, darkMode: v})} size="lg" />
+        </div>
+        
+        <div style={{ borderBottom: '1px solid #e5e5e5', paddingBottom: '0.5rem', marginBottom: '0.75rem', marginTop: '1rem' }}>
+          <div style={{ fontSize: '0.75rem', fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+            Notifications
+          </div>
+        </div>
+        
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 0' }}>
+          <div>
+            <div style={{ fontWeight: 500 }}>Push Notifications</div>
+            <div style={{ fontSize: '0.75rem', color: '#666' }}>Enable push alerts</div>
+          </div>
+          <Switch checked={settings.notifications} onChange={(v) => setSettings({...settings, notifications: v})} size="lg" />
+        </div>
+        
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 0' }}>
+          <div>
+            <div style={{ fontWeight: 500 }}>Sound Effects</div>
+            <div style={{ fontSize: '0.75rem', color: '#666' }}>Play sounds for actions</div>
+          </div>
+          <Switch checked={settings.sounds} onChange={(v) => setSettings({...settings, sounds: v})} size="lg" />
+        </div>
+        
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 0' }}>
+          <div>
+            <div style={{ fontWeight: 500 }}>Haptic Feedback</div>
+            <div style={{ fontSize: '0.75rem', color: '#666' }}>Vibration feedback</div>
+          </div>
+          <Switch checked={settings.haptics} onChange={(v) => setSettings({...settings, haptics: v})} size="lg" />
+        </div>
+        
+        <div style={{ borderBottom: '1px solid #e5e5e5', paddingBottom: '0.5rem', marginBottom: '0.75rem', marginTop: '1rem' }}>
+          <div style={{ fontSize: '0.75rem', fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+            Privacy
+          </div>
+        </div>
+        
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 0' }}>
+          <div>
+            <div style={{ fontWeight: 500 }}>Location Services</div>
+            <div style={{ fontSize: '0.75rem', color: '#666' }}>Share your location</div>
+          </div>
+          <Switch checked={settings.location} onChange={(v) => setSettings({...settings, location: v})} size="lg" />
+        </div>
+        
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 0' }}>
+          <div>
+            <div style={{ fontWeight: 500 }}>Analytics</div>
+            <div style={{ fontSize: '0.75rem', color: '#666' }}>Share usage data</div>
+          </div>
+          <Switch checked={settings.analytics} onChange={(v) => setSettings({...settings, analytics: v})} size="lg" />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const MobileAsyncToggle: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Async toggle with loading state on mobile, showing spinner during API call.',
+      },
+    },
+  },
+  render: () => {
+    const [enabled, setEnabled] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const handleChange = async (newValue: boolean) => {
+      setLoading(true);
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      setEnabled(newValue);
+      setLoading(false);
+    };
+
+    return (
+      <div style={{ padding: '1rem' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem 0' }}>
+          <div>
+            <div style={{ fontWeight: 500 }}>Premium Features</div>
+            <div style={{ fontSize: '0.75rem', color: '#666' }}>Enable premium subscription</div>
+          </div>
+          <Switch
+            checked={enabled}
+            onChange={handleChange}
+            loading={loading}
+            size="lg"
+          />
+        </div>
+        <p style={{ fontSize: '0.75rem', color: '#999', marginTop: '0.5rem' }}>
+          Toggle shows loading spinner during async operations
+        </p>
+      </div>
+    );
+  },
+};

package/src/components/Switch.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, useId } from 'react';
+import { useIsMobile } from '../hooks/useResponsive';
 import { Loader2 } from 'lucide-react';
 
 export interface SwitchProps {
@@ -7,6 +8,7 @@ export interface SwitchProps {
   label?: string;
   description?: string;
   disabled?: boolean;
+  /** Size variant - 'lg' provides better touch targets. On mobile, 'md' auto-upgrades to 'lg'. */
   size?: 'sm' | 'md' | 'lg';
   /** Show loading spinner (disables interaction) */
   loading?: boolean;
@@ -26,6 +28,10 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>(({
   const labelId = label ? `${switchId}-label` : undefined;
   const descId = description ? `${switchId}-desc` : undefined;
   
+  // Auto-size for mobile
+  const isMobile = useIsMobile();
+  const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
+
   const sizeStyles = {
     sm: {
       switch: 'w-9 h-5',
@@ -47,7 +53,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>(({
     },
   };
 
-  const styles = sizeStyles[size];
+  const styles = sizeStyles[effectiveSize];
   const isDisabled = disabled || loading;
 
   const handleChange = () => {
@@ -56,8 +62,11 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>(({
     }
   };
 
+  // Touch target padding for mobile
+  const touchTargetClass = effectiveSize === 'lg' ? 'min-h-touch py-1' : '';
+
   return (
-    <label htmlFor={switchId} className={`flex items-center gap-3 ${isDisabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}>
+    <label htmlFor={switchId} className={`flex items-center gap-3 ${touchTargetClass} ${isDisabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}>
       {/* Switch */}
       <div className="relative inline-block flex-shrink-0">
         <input
@@ -98,7 +107,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>(({
       {/* Label */}
       {(label || description) && (
         <div className="flex-1">
-          {label && <p id={labelId} className="text-sm font-medium text-ink-900">{label}</p>}
+          {label && <p id={labelId} className={`${effectiveSize === 'lg' ? 'text-base' : 'text-sm'} font-medium text-ink-900`}>{label}</p>}
           {description && <p id={descId} className="text-xs text-ink-600 mt-0.5">{description}</p>}
         </div>
       )}

package/src/components/Textarea.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, useEffect, useRef } from 'react';
+import { useIsMobile } from '../hooks/useResponsive';
 import { AlertCircle, CheckCircle, AlertTriangle, Loader2 } from 'lucide-react';
 
 export type ValidationState = 'error' | 'success' | 'warning' | null;
@@ -20,8 +21,30 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
   resize?: 'none' | 'vertical' | 'horizontal' | 'both';
   /** Show loading spinner (for async operations like auto-save) */
   loading?: boolean;
+  
+  // Mobile optimization props
+  /**
+   * Size variant - 'md' is default, 'lg' provides larger touch-friendly text and padding.
+   * On mobile, 'md' is automatically upgraded to 'lg' for better touch targets.
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Enter key hint for mobile keyboards.
+   * 'enter' - Standard enter key (newline)
+   * 'done' - Done action
+   * 'go' - Go/navigate action
+   * 'send' - Send action
+   */
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'send';
 }
 
+// Size classes for textarea
+const sizeClasses = {
+  sm: 'px-3 py-2 text-sm',
+  md: 'px-4 py-3 text-sm',
+  lg: 'px-4 py-3.5 text-base', // Larger padding and text for mobile
+};
+
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
@@ -36,6 +59,8 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       maxRows = 10,
       resize = 'vertical',
       loading = false,
+      size = 'md',
+      enterKeyHint,
       className = '',
       id,
       value,
@@ -44,6 +69,9 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     },
     ref
   ) => {
+    // Detect mobile and auto-size
+    const isMobile = useIsMobile();
+    const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
     const textareaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
     const currentLength = typeof value === 'string' ? value.length : 0;
     const internalRef = useRef<HTMLTextAreaElement>(null);
@@ -147,11 +175,13 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             value={value}
             maxLength={maxLength}
             rows={autoExpand ? minRows : rows}
+            enterKeyHint={enterKeyHint}
             className={`
-              block w-full px-4 py-3 border rounded-lg text-sm text-ink-800 placeholder-ink-400
+              block w-full border rounded-lg text-ink-800 placeholder-ink-400
               bg-white bg-subtle-grain transition-all duration-200
               focus:outline-none focus:ring-2 ${getResizeClass()}
               disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
+              ${sizeClasses[effectiveSize]}
               ${getValidationClasses()}
               ${loading ? 'pr-10' : ''}
               ${className}