@papernote/ui 1.3.1 → 1.6.0

package/src/components/BottomNavigation.tsx

@@ -0,0 +1,225 @@
+import React from 'react';
+
+/**
+ * Bottom navigation item configuration
+ */
+export interface BottomNavItem {
+  /** Unique identifier for the nav item */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Icon element (use lucide-react icons) */
+  icon: React.ReactNode;
+  /** Navigation URL (optional) */
+  href?: string;
+  /** Badge count for notifications */
+  badge?: number;
+  /** Click handler (alternative to href) */
+  onClick?: () => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+/**
+ * BottomNavigation component props
+ */
+export interface BottomNavigationProps {
+  /** Navigation items (max 5 recommended) */
+  items: BottomNavItem[];
+  /** Currently active item ID */
+  activeId?: string;
+  /** Navigation handler - receives item ID and href */
+  onNavigate?: (id: string, href?: string) => void;
+  /** Show labels below icons */
+  showLabels?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Safe area handling for notched devices */
+  safeArea?: boolean;
+}
+
+/**
+ * BottomNavigation - Mobile-style bottom tab bar
+ * 
+ * iOS/Android-style fixed bottom navigation with icons, labels, and badges.
+ * Handles safe area insets for notched devices automatically.
+ * 
+ * Best practices:
+ * - Use 3-5 items maximum
+ * - Keep labels short (1-2 words)
+ * - Use consistent icon style
+ * 
+ * @example Basic usage
+ * ```tsx
+ * import { BottomNavigation } from 'notebook-ui';
+ * import { Home, Search, Bell, User } from 'lucide-react';
+ * 
+ * const navItems = [
+ *   { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *   { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
+ *   { id: 'notifications', label: 'Alerts', icon: <Bell />, badge: 3 },
+ *   { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' },
+ * ];
+ * 
+ * <BottomNavigation
+ *   items={navItems}
+ *   activeId="home"
+ *   onNavigate={(id, href) => navigate(href)}
+ * />
+ * ```
+ * 
+ * @example With onClick handlers
+ * ```tsx
+ * const navItems = [
+ *   { id: 'home', label: 'Home', icon: <Home />, onClick: () => setTab('home') },
+ *   { id: 'add', label: 'Add', icon: <Plus />, onClick: openAddModal },
+ * ];
+ * 
+ * <BottomNavigation items={navItems} activeId={currentTab} />
+ * ```
+ */
+export default function BottomNavigation({
+  items,
+  activeId,
+  onNavigate,
+  showLabels = true,
+  className = '',
+  safeArea = true,
+}: BottomNavigationProps) {
+  const handleItemClick = (item: BottomNavItem) => {
+    if (item.disabled) return;
+    
+    if (item.onClick) {
+      item.onClick();
+    }
+    
+    if (onNavigate) {
+      onNavigate(item.id, item.href);
+    }
+  };
+
+  return (
+    <nav
+      className={`
+        fixed bottom-0 left-0 right-0 z-40
+        bg-white border-t border-paper-200 shadow-lg
+        ${safeArea ? 'pb-[env(safe-area-inset-bottom)]' : ''}
+        ${className}
+      `}
+      role="navigation"
+      aria-label="Bottom navigation"
+    >
+      <div className="flex items-center justify-around h-14 max-w-lg mx-auto px-2">
+        {items.map((item) => {
+          const isActive = item.id === activeId;
+          
+          return (
+            <button
+              key={item.id}
+              onClick={() => handleItemClick(item)}
+              disabled={item.disabled}
+              className={`
+                relative flex flex-col items-center justify-center
+                flex-1 h-full min-w-touch-sm
+                transition-colors duration-200
+                ${item.disabled 
+                  ? 'opacity-40 cursor-not-allowed' 
+                  : 'active:bg-paper-100'
+                }
+                ${isActive
+                  ? 'text-accent-600'
+                  : 'text-ink-500 hover:text-ink-700'
+                }
+              `}
+              aria-current={isActive ? 'page' : undefined}
+              aria-label={item.label}
+            >
+              {/* Icon container */}
+              <div className="relative">
+                {/* Icon */}
+                <div
+                  className={`
+                    w-6 h-6 flex items-center justify-center
+                    transition-transform duration-200
+                    ${isActive ? 'scale-110' : 'scale-100'}
+                  `}
+                >
+                  {React.isValidElement(item.icon)
+                    ? React.cloneElement(item.icon as React.ReactElement<any>, {
+                        className: 'w-6 h-6',
+                      })
+                    : item.icon}
+                </div>
+
+                {/* Badge */}
+                {item.badge !== undefined && item.badge > 0 && (
+                  <span
+                    className={`
+                      absolute -top-1 -right-2.5
+                      min-w-[18px] h-[18px] px-1
+                      flex items-center justify-center
+                      text-[10px] font-bold text-white
+                      bg-error-500 rounded-full
+                      ${item.badge > 99 ? 'text-[8px]' : ''}
+                    `}
+                  >
+                    {item.badge > 99 ? '99+' : item.badge}
+                  </span>
+                )}
+              </div>
+
+              {/* Label */}
+              {showLabels && (
+                <span
+                  className={`
+                    mt-1 text-[10px] font-medium leading-none
+                    transition-opacity duration-200
+                    truncate max-w-full px-1
+                    ${isActive ? 'opacity-100' : 'opacity-70'}
+                  `}
+                >
+                  {item.label}
+                </span>
+              )}
+
+              {/* Active indicator */}
+              {isActive && (
+                <div
+                  className="
+                    absolute top-0 left-1/2 -translate-x-1/2
+                    w-8 h-0.5 bg-accent-500 rounded-full
+                  "
+                />
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
+
+/**
+ * BottomNavigationSpacer - Spacer to prevent content from being hidden behind BottomNavigation
+ * 
+ * Place this at the bottom of your scrollable content when using BottomNavigation.
+ * 
+ * @example
+ * ```tsx
+ * <div className="flex flex-col h-screen">
+ *   <main className="flex-1 overflow-auto">
+ *     {/* Your content *\/}
+ *     <BottomNavigationSpacer />
+ *   </main>
+ *   <BottomNavigation items={navItems} />
+ * </div>
+ * ```
+ */
+export function BottomNavigationSpacer({ safeArea = true }: { safeArea?: boolean }) {
+  return (
+    <div
+      className={`h-14 ${safeArea ? 'pb-[env(safe-area-inset-bottom)]' : ''}`}
+      aria-hidden="true"
+    />
+  );
+}

package/src/components/Checkbox.stories.tsx

@@ -312,3 +312,165 @@ export const SelectAll: Story = {
     );
   },
 };
+
+// Mobile-optimized stories
+export const MobileLargeTouch: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Large size (lg) checkbox provides 44px minimum touch target height for mobile devices, meeting Apple HIG guidelines.',
+      },
+    },
+  },
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Checkbox
+        checked={checked}
+        onChange={setChecked}
+        size="lg"
+        label="Touch-friendly checkbox with 44px target"
+      />
+    );
+  },
+};
+
+export const MobilePreferencesList: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Mobile settings list with large touch targets and icons for easy interaction.',
+      },
+    },
+  },
+  render: () => {
+    const [prefs, setPrefs] = useState({
+      notifications: true,
+      sounds: false,
+      location: true,
+      analytics: false,
+    });
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '1rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 600, marginBottom: '0.75rem' }}>Settings</h3>
+        <Checkbox
+          checked={prefs.notifications}
+          onChange={(checked) => setPrefs({ ...prefs, notifications: checked })}
+          size="lg"
+          label="Push Notifications"
+        />
+        <Checkbox
+          checked={prefs.sounds}
+          onChange={(checked) => setPrefs({ ...prefs, sounds: checked })}
+          size="lg"
+          label="Sound Effects"
+        />
+        <Checkbox
+          checked={prefs.location}
+          onChange={(checked) => setPrefs({ ...prefs, location: checked })}
+          size="lg"
+          label="Location Services"
+        />
+        <Checkbox
+          checked={prefs.analytics}
+          onChange={(checked) => setPrefs({ ...prefs, analytics: checked })}
+          size="lg"
+          label="Analytics Sharing"
+        />
+      </div>
+    );
+  },
+};
+
+export const MobileFileTypeSelector: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Mobile file type selector with icons and large touch targets.',
+      },
+    },
+  },
+  render: () => {
+    const [selected, setSelected] = useState({
+      documents: true,
+      images: true,
+      audio: false,
+      video: false,
+    });
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '1rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 600, marginBottom: '0.75rem' }}>Include File Types</h3>
+        <Checkbox
+          checked={selected.documents}
+          onChange={(checked) => setSelected({ ...selected, documents: checked })}
+          size="lg"
+          label="Documents"
+          icon={<FileText className="h-5 w-5" />}
+        />
+        <Checkbox
+          checked={selected.images}
+          onChange={(checked) => setSelected({ ...selected, images: checked })}
+          size="lg"
+          label="Images"
+          icon={<Image className="h-5 w-5" />}
+        />
+        <Checkbox
+          checked={selected.audio}
+          onChange={(checked) => setSelected({ ...selected, audio: checked })}
+          size="lg"
+          label="Audio"
+          icon={<Music className="h-5 w-5" />}
+        />
+        <Checkbox
+          checked={selected.video}
+          onChange={(checked) => setSelected({ ...selected, video: checked })}
+          size="lg"
+          label="Video"
+          icon={<Video className="h-5 w-5" />}
+        />
+      </div>
+    );
+  },
+};
+
+export const MobileTermsAgreement: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Mobile terms agreement with easy-to-tap checkbox for form submissions.',
+      },
+    },
+  },
+  render: () => {
+    const [agreed, setAgreed] = useState(false);
+    const [newsletter, setNewsletter] = useState(false);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', padding: '1rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 600 }}>Complete Your Signup</h3>
+        <Checkbox
+          checked={agreed}
+          onChange={setAgreed}
+          size="lg"
+          label="I agree to the Terms of Service and Privacy Policy"
+          icon={<FileText className="h-5 w-5" />}
+        />
+        <Checkbox
+          checked={newsletter}
+          onChange={setNewsletter}
+          size="lg"
+          label="Subscribe to our newsletter for updates"
+        />
+        <p style={{ fontSize: '0.75rem', color: '#666' }}>
+          Large touch targets make it easy to check on mobile
+        </p>
+      </div>
+    );
+  },
+};

package/src/components/Checkbox.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, useId } from 'react';
+import { useIsMobile } from '../hooks/useResponsive';
 import { Check, Minus } from 'lucide-react';
 
 export interface CheckboxProps {
@@ -13,8 +14,17 @@ export interface CheckboxProps {
   name?: string;
   /** Optional icon to display next to label */
   icon?: React.ReactNode;
+  /** Size variant - 'lg' provides 44px touch-friendly targets. On mobile, 'md' auto-upgrades to 'lg'. */
+  size?: 'sm' | 'md' | 'lg';
 }
 
+// Size classes for checkbox box and touch target
+const sizeConfig = {
+  sm: { box: 'w-4 h-4', icon: 'h-3 w-3', text: 'text-sm', gap: 'gap-2' },
+  md: { box: 'w-4 h-4', icon: 'h-3 w-3', text: 'text-sm', gap: 'gap-3' },
+  lg: { box: 'w-5 h-5', icon: 'h-4 w-4', text: 'text-base', gap: 'gap-3', touchTarget: 'min-h-touch py-2' }, // 44px touch target
+};
+
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
   checked,
   onChange,
@@ -26,10 +36,16 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
   id,
   name,
   icon,
+  size = 'md',
 }, ref) => {
   const generatedId = useId();
   const checkboxId = id || generatedId;
   const descId = description ? `${checkboxId}-desc` : undefined;
+  
+  // Auto-size for mobile
+  const isMobile = useIsMobile();
+  const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
+  const config = sizeConfig[effectiveSize];
 
   const handleChange = () => {
     if (!disabled) {
@@ -47,9 +63,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
   return (
     <label
       htmlFor={checkboxId}
-      className={`flex items-start gap-3 ${
+      className={`flex items-start ${config.gap} ${
         disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'
-      } ${className}`}
+      } ${'touchTarget' in config ? config.touchTarget : ''} ${className}`}
     >
       {/* Checkbox */}
       <div className="relative inline-block flex-shrink-0 mt-0.5">
@@ -69,7 +85,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
         />
         <div
           className={`
-            w-4 h-4 rounded border transition-all duration-200
+            ${config.box} rounded border transition-all duration-200
             flex items-center justify-center
             ${
               checked || indeterminate
@@ -80,9 +96,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
           `}
         >
           {indeterminate ? (
-            <Minus className="h-3 w-3 text-white" />
+            <Minus className={`${config.icon} text-white`} />
           ) : checked ? (
-            <Check className="h-3 w-3 text-white" />
+            <Check className={`${config.icon} text-white`} />
           ) : null}
         </div>
       </div>
@@ -93,7 +109,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
           {label && (
             <div className="flex items-center gap-2">
               {icon && <span className="text-ink-700">{icon}</span>}
-              <p className="text-sm font-medium text-ink-900">{label}</p>
+              <p className={`${config.text} font-medium text-ink-900`}>{label}</p>
             </div>
           )}
           {description && (