@papernote/ui 1.3.1 → 1.6.0

package/src/components/Input.tsx

@@ -9,7 +9,7 @@ export type ValidationState = 'error' | 'success' | 'warning' | null;
 /**
  * Input component props
  */
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /** Input label text */
   label?: string;
   /** Helper text displayed below input */
@@ -40,6 +40,33 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   onClear?: () => void;
   /** Show loading spinner in input */
   loading?: boolean;
+  
+  // Mobile optimization props
+  /** 
+   * Input mode hint for mobile keyboards.
+   * 'none' - No virtual keyboard
+   * 'text' - Standard text keyboard (default)
+   * 'decimal' - Decimal number keyboard
+   * 'numeric' - Numeric keyboard
+   * 'tel' - Telephone keypad
+   * 'search' - Search optimized keyboard
+   * 'email' - Email optimized keyboard
+   * 'url' - URL optimized keyboard
+   */
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  /**
+   * Enter key hint for mobile keyboards.
+   * 'enter' - Standard enter key
+   * 'done' - Done action
+   * 'go' - Go/navigate action
+   * 'next' - Move to next field
+   * 'previous' - Move to previous field
+   * 'search' - Search action
+   * 'send' - Send action
+   */
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+  /** Size variant - 'md' is default, 'lg' provides larger touch target (44px min) */
+  size?: 'sm' | 'md' | 'lg';
 }
 
 /**
@@ -47,6 +74,11 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
  *
  * A feature-rich text input with support for validation states, character counting,
  * password visibility toggle, prefix/suffix text and icons, and clearable functionality.
+ * 
+ * Mobile optimizations:
+ * - inputMode prop for appropriate mobile keyboard
+ * - enterKeyHint prop for mobile keyboard action button
+ * - Size variants with touch-friendly targets (44px for 'lg')
  *
  * @example Basic input with label
  * ```tsx
@@ -54,6 +86,8 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
  *   label="Email" 
  *   type="email" 
  *   placeholder="Enter your email"
+ *   inputMode="email"
+ *   enterKeyHint="next"
  * />
  * ```
  *
@@ -79,11 +113,23 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
  * />
  * ```
  *
+ * @example Mobile-optimized phone input
+ * ```tsx
+ * <Input
+ *   label="Phone Number"
+ *   type="tel"
+ *   inputMode="tel"
+ *   enterKeyHint="done"
+ *   size="lg"
+ * />
+ * ```
+ *
  * @example With prefix/suffix
  * ```tsx
  * <Input
  *   label="Amount"
  *   type="number"
+ *   inputMode="decimal"
  *   prefixIcon={<DollarSign />}
  *   suffix="USD"
  *   clearable
@@ -113,6 +159,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       type = 'text',
       value,
       maxLength,
+      inputMode,
+      enterKeyHint,
+      size = 'md',
       ...props
     },
     ref
@@ -144,6 +193,31 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const currentLength = value ? String(value).length : 0;
     const showCounter = showCount && maxLength;
 
+    // Auto-detect inputMode based on type if not specified
+    const effectiveInputMode = inputMode || (() => {
+      switch (type) {
+        case 'email': return 'email';
+        case 'tel': return 'tel';
+        case 'url': return 'url';
+        case 'number': return 'decimal';
+        case 'search': return 'search';
+        default: return undefined;
+      }
+    })();
+
+    // Size classes
+    const sizeClasses = {
+      sm: 'h-8 text-sm',
+      md: 'h-10 text-base',
+      lg: 'h-12 text-base min-h-touch', // 44px touch target
+    };
+
+    const buttonSizeClasses = {
+      sm: 'p-1',
+      md: 'p-1.5',
+      lg: 'p-2 min-w-touch-sm min-h-touch-sm', // 36px touch target for buttons
+    };
+
     const getValidationIcon = () => {
       switch (validationState) {
         case 'error':
@@ -223,8 +297,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             type={actualType}
             value={value}
             maxLength={maxLength}
+            inputMode={effectiveInputMode}
+            enterKeyHint={enterKeyHint}
             className={`
               input
+              ${sizeClasses[size]}
               ${getValidationClasses()}
               ${prefix ? 'pl-' + (prefix.length * 8 + 12) : ''}
               ${prefixIcon && !prefix ? 'pl-10' : ''}
@@ -247,7 +324,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           )}
 
           {/* Right Icon, Validation Icon, Clear Button, or Password Toggle */}
-          <div className="absolute inset-y-0 right-0 pr-3 flex items-center gap-2">
+          <div className="absolute inset-y-0 right-0 pr-3 flex items-center gap-1">
             {/* Loading Spinner */}
             {loading && (
               <div className="pointer-events-none text-ink-400">
@@ -267,7 +344,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               <button
                 type="button"
                 onClick={handleClear}
-                className="text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto"
+                className={`text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto rounded-full hover:bg-paper-100 flex items-center justify-center ${buttonSizeClasses[size]}`}
                 aria-label="Clear input"
               >
                 <X className="h-4 w-4" />
@@ -279,7 +356,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto"
+                className={`text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto rounded-full hover:bg-paper-100 flex items-center justify-center ${buttonSizeClasses[size]}`}
                 aria-label={showPassword ? 'Hide password' : 'Show password'}
               >
                 {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}

package/src/components/MobileHeader.stories.tsx

@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu, Search, MoreVertical, Share, Heart, Check, Bell } from 'lucide-react';
+import MobileHeader, { MobileHeaderSpacer } from './MobileHeader';
+import Button from './Button';
+
+const meta: Meta<typeof MobileHeader> = {
+  title: 'Mobile/MobileHeader',
+  component: MobileHeader,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+    docs: {
+      description: {
+        component: 'Mobile app header with navigation controls (menu, back, close) and optional right actions.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ minHeight: '100vh', background: '#f5f5f4' }}>
+        <Story />
+        <div style={{ padding: '16px' }}>
+          {Array.from({ length: 15 }).map((_, i) => (
+            <div key={i} style={{ padding: '16px', margin: '8px 0', background: 'white', borderRadius: '8px' }}>
+              Content Item {i + 1}
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MobileHeader>;
+
+export const WithMenuButton: Story = {
+  args: {
+    title: 'Dashboard',
+    onMenuClick: () => console.log('Menu clicked'),
+  },
+};
+
+export const WithSubtitle: Story = {
+  args: {
+    title: 'User Details',
+    subtitle: 'Profile',
+    onMenuClick: () => console.log('Menu clicked'),
+  },
+};
+
+export const WithBackButton: Story = {
+  args: {
+    title: 'Settings',
+    subtitle: 'Account',
+    onBackClick: () => console.log('Back clicked'),
+  },
+};
+
+export const WithCloseButton: Story = {
+  args: {
+    title: 'New Message',
+    onCloseClick: () => console.log('Close clicked'),
+  },
+};
+
+export const WithRightAction: Story = {
+  args: {
+    title: 'Search',
+    onMenuClick: () => console.log('Menu clicked'),
+    rightAction: (
+      <Button variant="ghost" iconOnly onClick={() => console.log('Search')}>
+        <Search className="w-5 h-5" />
+      </Button>
+    ),
+  },
+};
+
+export const WithMultipleActions: Story = {
+  args: {
+    title: 'Photo',
+    onBackClick: () => console.log('Back'),
+    rightAction: (
+      <div style={{ display: 'flex', gap: '4px' }}>
+        <Button variant="ghost" iconOnly onClick={() => console.log('Like')}>
+          <Heart className="w-5 h-5" />
+        </Button>
+        <Button variant="ghost" iconOnly onClick={() => console.log('Share')}>
+          <Share className="w-5 h-5" />
+        </Button>
+        <Button variant="ghost" iconOnly onClick={() => console.log('More')}>
+          <MoreVertical className="w-5 h-5" />
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const WithPrimaryAction: Story = {
+  args: {
+    title: 'Edit Profile',
+    onCloseClick: () => console.log('Cancel'),
+    rightAction: (
+      <Button variant="ghost" iconOnly onClick={() => console.log('Save')}>
+        <Check className="w-5 h-5 text-accent-600" />
+      </Button>
+    ),
+  },
+};
+
+export const TransparentVariant: Story = {
+  args: {
+    title: 'Photo Gallery',
+    onBackClick: () => console.log('Back'),
+    variant: 'transparent',
+    bordered: false,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ minHeight: '100vh', background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)' }}>
+        <Story />
+        <div style={{ padding: '16px', color: 'white' }}>
+          <p>Content with transparent header</p>
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export const BlurVariant: Story = {
+  args: {
+    title: 'Messages',
+    onBackClick: () => console.log('Back'),
+    variant: 'blur',
+    rightAction: (
+      <Button variant="ghost" iconOnly>
+        <Bell className="w-5 h-5" />
+      </Button>
+    ),
+  },
+};
+
+export const NotSticky: Story = {
+  args: {
+    title: 'Non-Sticky Header',
+    subtitle: 'Scrolls with content',
+    onMenuClick: () => console.log('Menu'),
+    sticky: false,
+  },
+};
+
+export const NoBorder: Story = {
+  args: {
+    title: 'No Border',
+    onMenuClick: () => console.log('Menu'),
+    bordered: false,
+  },
+};
+
+export const CustomLeftAction: Story = {
+  args: {
+    title: 'Custom Actions',
+    leftAction: (
+      <Button variant="ghost" size="sm" onClick={() => console.log('Cancel')}>
+        Cancel
+      </Button>
+    ),
+    rightAction: (
+      <Button variant="primary" size="sm" onClick={() => console.log('Save')}>
+        Save
+      </Button>
+    ),
+  },
+};
+
+export const LongTitle: Story = {
+  args: {
+    title: 'This is a very long title that should be truncated',
+    subtitle: 'And this is also a long subtitle text',
+    onBackClick: () => console.log('Back'),
+    rightAction: (
+      <Button variant="ghost" iconOnly>
+        <MoreVertical className="w-5 h-5" />
+      </Button>
+    ),
+  },
+};
+
+export const SpacerExample: Story = {
+  render: () => (
+    <div style={{ minHeight: '100vh', background: '#f5f5f4' }}>
+      <MobileHeader
+        title="With Spacer"
+        onMenuClick={() => console.log('Menu')}
+        sticky={false}
+      />
+      <MobileHeaderSpacer />
+      <div style={{ padding: '16px' }}>
+        <p>The spacer maintains consistent spacing when header is not sticky.</p>
+      </div>
+    </div>
+  ),
+};

package/src/components/MobileHeader.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { Menu, ChevronLeft, X } from 'lucide-react';
+
+/**
+ * MobileHeader component props
+ */
+export interface MobileHeaderProps {
+  /** Page/section title */
+  title: string;
+  /** Subtitle or breadcrumb text */
+  subtitle?: string;
+  /** Handler for menu button click (hamburger) */
+  onMenuClick?: () => void;
+  /** Handler for back button click - shows back arrow instead of menu */
+  onBackClick?: () => void;
+  /** Handler for close button click - shows X instead of menu */
+  onCloseClick?: () => void;
+  /** Right side action element (button, icon, etc.) */
+  rightAction?: React.ReactNode;
+  /** Left side action element (overrides menu/back/close buttons) */
+  leftAction?: React.ReactNode;
+  /** Make header sticky at top */
+  sticky?: boolean;
+  /** Show border at bottom */
+  bordered?: boolean;
+  /** Background style */
+  variant?: 'solid' | 'transparent' | 'blur';
+  /** Additional CSS classes */
+  className?: string;
+  /** Safe area handling for notched devices */
+  safeArea?: boolean;
+}
+
+/**
+ * MobileHeader - Mobile app header with navigation controls
+ * 
+ * A flexible mobile header component with support for:
+ * - Hamburger menu button (default)
+ * - Back navigation arrow
+ * - Close button (X)
+ * - Custom left/right actions
+ * - Sticky positioning
+ * - Blur/transparent variants
+ * 
+ * @example Basic with menu button
+ * ```tsx
+ * <MobileHeader
+ *   title="Dashboard"
+ *   onMenuClick={() => setDrawerOpen(true)}
+ * />
+ * ```
+ * 
+ * @example With back button
+ * ```tsx
+ * <MobileHeader
+ *   title="User Details"
+ *   subtitle="Profile"
+ *   onBackClick={() => navigate(-1)}
+ * />
+ * ```
+ * 
+ * @example With right action
+ * ```tsx
+ * <MobileHeader
+ *   title="Settings"
+ *   onMenuClick={openMenu}
+ *   rightAction={
+ *     <Button variant="ghost" iconOnly onClick={save}>
+ *       <Check className="w-5 h-5" />
+ *     </Button>
+ *   }
+ * />
+ * ```
+ * 
+ * @example Transparent with blur
+ * ```tsx
+ * <MobileHeader
+ *   title="Photo Gallery"
+ *   variant="blur"
+ *   onBackClick={goBack}
+ * />
+ * ```
+ */
+export default function MobileHeader({
+  title,
+  subtitle,
+  onMenuClick,
+  onBackClick,
+  onCloseClick,
+  rightAction,
+  leftAction,
+  sticky = true,
+  bordered = true,
+  variant = 'solid',
+  className = '',
+  safeArea = true,
+}: MobileHeaderProps) {
+  // Determine which left button to show
+  const renderLeftButton = () => {
+    // Custom left action takes priority
+    if (leftAction) {
+      return leftAction;
+    }
+
+    // Close button
+    if (onCloseClick) {
+      return (
+        <button
+          onClick={onCloseClick}
+          className="
+            flex items-center justify-center
+            w-10 h-10 -ml-2
+            text-ink-600 hover:text-ink-900
+            hover:bg-paper-100 rounded-full
+            transition-colors duration-200
+            active:bg-paper-200
+          "
+          aria-label="Close"
+        >
+          <X className="w-6 h-6" />
+        </button>
+      );
+    }
+
+    // Back button
+    if (onBackClick) {
+      return (
+        <button
+          onClick={onBackClick}
+          className="
+            flex items-center justify-center
+            w-10 h-10 -ml-2
+            text-ink-600 hover:text-ink-900
+            hover:bg-paper-100 rounded-full
+            transition-colors duration-200
+            active:bg-paper-200
+          "
+          aria-label="Go back"
+        >
+          <ChevronLeft className="w-6 h-6" />
+        </button>
+      );
+    }
+
+    // Menu button (default)
+    if (onMenuClick) {
+      return (
+        <button
+          onClick={onMenuClick}
+          className="
+            flex items-center justify-center
+            w-10 h-10 -ml-2
+            text-ink-600 hover:text-ink-900
+            hover:bg-paper-100 rounded-full
+            transition-colors duration-200
+            active:bg-paper-200
+          "
+          aria-label="Open menu"
+        >
+          <Menu className="w-6 h-6" />
+        </button>
+      );
+    }
+
+    // No left button
+    return <div className="w-10 h-10" />;
+  };
+
+  // Background variant styles
+  const variantStyles = {
+    solid: 'bg-white',
+    transparent: 'bg-transparent',
+    blur: 'bg-white/80 backdrop-blur-md',
+  };
+
+  return (
+    <header
+      className={`
+        ${sticky ? 'sticky top-0 z-30' : ''}
+        ${safeArea ? 'pt-[env(safe-area-inset-top)]' : ''}
+        ${variantStyles[variant]}
+        ${bordered ? 'border-b border-paper-200' : ''}
+        ${className}
+      `}
+    >
+      <div className="flex items-center justify-between h-14 px-4">
+        {/* Left section */}
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          {renderLeftButton()}
+
+          {/* Title area */}
+          <div className="flex flex-col min-w-0 flex-1">
+            {subtitle && (
+              <span className="text-xs text-ink-500 truncate">
+                {subtitle}
+              </span>
+            )}
+            <h1 className="text-lg font-semibold text-ink-900 truncate leading-tight">
+              {title}
+            </h1>
+          </div>
+        </div>
+
+        {/* Right section */}
+        <div className="flex items-center gap-1 ml-2 flex-shrink-0">
+          {rightAction}
+        </div>
+      </div>
+    </header>
+  );
+}
+
+/**
+ * MobileHeaderSpacer - Spacer to prevent content from being hidden behind sticky MobileHeader
+ * 
+ * Place this at the top of your content when NOT using sticky header
+ * to maintain consistent spacing.
+ * 
+ * @example
+ * ```tsx
+ * <MobileHeader title="Page" sticky={false} />
+ * <MobileHeaderSpacer />
+ * <main>Content here</main>
+ * ```
+ */
+export function MobileHeaderSpacer({ safeArea = true }: { safeArea?: boolean }) {
+  return (
+    <div
+      className={`h-14 ${safeArea ? 'pt-[env(safe-area-inset-top)]' : ''}`}
+      aria-hidden="true"
+    />
+  );
+}