@papernote/ui 1.7.7 → 1.8.0

package/src/components/HorizontalScroll.tsx

@@ -0,0 +1,275 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+type GapSize = 'none' | 'sm' | 'md' | 'lg' | number;
+
+export interface HorizontalScrollProps {
+  /** Items to display in horizontal scroll */
+  children: React.ReactNode;
+  /** Gap between items */
+  gap?: GapSize;
+  /** Pixels of next item visible as hint that more content exists */
+  peekAmount?: number;
+  /** Show dot indicators below */
+  showIndicators?: boolean;
+  /** Snap scroll to item boundaries */
+  snapToItem?: boolean;
+  /** When to show navigation arrows */
+  showArrows?: 'hover' | 'always' | 'never';
+  /** Scroll behavior */
+  scrollBehavior?: 'smooth' | 'auto';
+  /** Additional class name for container */
+  className?: string;
+  /** Additional class name for scroll container */
+  scrollClassName?: string;
+}
+
+/**
+ * HorizontalScroll - Horizontally scrollable container with peek indicators
+ *
+ * Designed for mobile carousels of cards with:
+ * - Touch-friendly momentum scrolling
+ * - Peek hint showing more items exist
+ * - Optional snap scrolling
+ * - Navigation arrows for desktop
+ *
+ * @example
+ * ```tsx
+ * <HorizontalScroll gap="md" peekAmount={24} showIndicators>
+ *   <Card>Bill 1</Card>
+ *   <Card>Bill 2</Card>
+ *   <Card>Bill 3</Card>
+ * </HorizontalScroll>
+ * ```
+ */
+export function HorizontalScroll({
+  children,
+  gap = 'md',
+  peekAmount = 24,
+  showIndicators = false,
+  snapToItem = true,
+  showArrows = 'hover',
+  scrollBehavior = 'smooth',
+  className = '',
+  scrollClassName = '',
+}: HorizontalScrollProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [itemCount, setItemCount] = useState(0);
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Gap classes
+  const gapClasses: Record<string, string> = {
+    none: 'gap-0',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+  };
+
+  const gapStyle = typeof gap === 'number' ? { gap: `${gap}px` } : {};
+  const gapClass = typeof gap === 'string' ? gapClasses[gap] : '';
+
+  // Check scroll position and update state
+  const checkScrollPosition = useCallback(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+    
+    setCanScrollLeft(scrollLeft > 0);
+    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
+
+    // Calculate active index based on scroll position
+    if (showIndicators && container.children.length > 0) {
+      const children = Array.from(container.children) as HTMLElement[];
+      const containerRect = container.getBoundingClientRect();
+      const containerCenter = containerRect.left + containerRect.width / 2;
+
+      let closestIndex = 0;
+      let closestDistance = Infinity;
+
+      children.forEach((child, index) => {
+        const childRect = child.getBoundingClientRect();
+        const childCenter = childRect.left + childRect.width / 2;
+        const distance = Math.abs(childCenter - containerCenter);
+
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closestIndex = index;
+        }
+      });
+
+      setActiveIndex(closestIndex);
+    }
+  }, [showIndicators]);
+
+  // Initialize and handle resize
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    setItemCount(React.Children.count(children));
+    checkScrollPosition();
+
+    const resizeObserver = new ResizeObserver(() => {
+      checkScrollPosition();
+    });
+
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [children, checkScrollPosition]);
+
+  // Handle scroll event
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      checkScrollPosition();
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [checkScrollPosition]);
+
+  // Scroll by one item
+  const scrollByItem = (direction: 'left' | 'right') => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const children = Array.from(container.children) as HTMLElement[];
+    if (children.length === 0) return;
+
+    const firstChild = children[0];
+    const itemWidth = firstChild.offsetWidth;
+    const gapValue = typeof gap === 'number' ? gap : 
+      gap === 'sm' ? 8 : gap === 'md' ? 16 : gap === 'lg' ? 24 : 0;
+
+    const scrollAmount = itemWidth + gapValue;
+
+    container.scrollBy({
+      left: direction === 'left' ? -scrollAmount : scrollAmount,
+      behavior: scrollBehavior,
+    });
+  };
+
+  // Scroll to specific index
+  const scrollToIndex = (index: number) => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const children = Array.from(container.children) as HTMLElement[];
+    if (index < 0 || index >= children.length) return;
+
+    const child = children[index];
+    child.scrollIntoView({
+      behavior: scrollBehavior,
+      block: 'nearest',
+      inline: 'center',
+    });
+  };
+
+  const showLeftArrow = showArrows === 'always' || (showArrows === 'hover' && isHovered);
+  const showRightArrow = showArrows === 'always' || (showArrows === 'hover' && isHovered);
+
+  return (
+    <div 
+      className={`relative ${className}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Left Arrow */}
+      {showLeftArrow && canScrollLeft && (
+        <button
+          onClick={() => scrollByItem('left')}
+          className="
+            absolute left-0 top-1/2 -translate-y-1/2 z-10
+            w-10 h-10 flex items-center justify-center
+            bg-white/90 backdrop-blur-sm rounded-full shadow-lg
+            text-ink-600 hover:text-ink-900 hover:bg-white
+            transition-all duration-200
+            -ml-2
+          "
+          aria-label="Scroll left"
+        >
+          <ChevronLeft className="h-5 w-5" />
+        </button>
+      )}
+
+      {/* Scroll Container */}
+      <div
+        ref={scrollRef}
+        className={`
+          flex overflow-x-auto scrollbar-hide
+          ${gapClass}
+          ${snapToItem ? 'snap-x snap-mandatory' : ''}
+          ${scrollClassName}
+        `}
+        style={{
+          ...gapStyle,
+          paddingRight: peekAmount > 0 ? `${peekAmount}px` : undefined,
+          scrollPaddingLeft: '0px',
+          scrollPaddingRight: `${peekAmount}px`,
+        }}
+      >
+        {React.Children.map(children, (child, index) => (
+          <div
+            key={index}
+            className={`flex-shrink-0 ${snapToItem ? 'snap-start' : ''}`}
+          >
+            {child}
+          </div>
+        ))}
+      </div>
+
+      {/* Right Arrow */}
+      {showRightArrow && canScrollRight && (
+        <button
+          onClick={() => scrollByItem('right')}
+          className="
+            absolute right-0 top-1/2 -translate-y-1/2 z-10
+            w-10 h-10 flex items-center justify-center
+            bg-white/90 backdrop-blur-sm rounded-full shadow-lg
+            text-ink-600 hover:text-ink-900 hover:bg-white
+            transition-all duration-200
+            -mr-2
+          "
+          aria-label="Scroll right"
+        >
+          <ChevronRight className="h-5 w-5" />
+        </button>
+      )}
+
+      {/* Dot Indicators */}
+      {showIndicators && itemCount > 1 && (
+        <div className="flex justify-center gap-1.5 mt-3">
+          {Array.from({ length: itemCount }).map((_, index) => (
+            <button
+              key={index}
+              onClick={() => scrollToIndex(index)}
+              className={`
+                w-2 h-2 rounded-full transition-all duration-200
+                ${index === activeIndex
+                  ? 'bg-accent-500 w-4'
+                  : 'bg-paper-300 hover:bg-paper-400'
+                }
+              `}
+              aria-label={`Go to item ${index + 1}`}
+              aria-current={index === activeIndex ? 'true' : 'false'}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default HorizontalScroll;

package/src/components/NotificationBanner.tsx

@@ -0,0 +1,238 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { X, Info, CheckCircle, AlertTriangle, AlertCircle } from 'lucide-react';
+
+export interface NotificationBannerAction {
+  /** Button label */
+  label: string;
+  /** Click handler */
+  onClick: () => void;
+}
+
+export interface NotificationBannerProps {
+  /** Banner variant determining color scheme */
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  /** Custom icon (defaults based on variant) */
+  icon?: React.ReactNode;
+  /** Primary message/title */
+  title: string;
+  /** Optional secondary description text */
+  description?: string;
+  /** Optional action button */
+  action?: NotificationBannerAction;
+  /** Callback when dismissed - if provided, shows dismiss button */
+  onDismiss?: () => void;
+  /** Can be swiped away on mobile */
+  dismissible?: boolean;
+  /** Stick to top of container on scroll */
+  sticky?: boolean;
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * NotificationBanner - Dismissible banner for important alerts
+ *
+ * Displays at top of screen for alerts that need attention but aren't blocking:
+ * - Money Found alerts
+ * - System messages
+ * - Promotional info
+ *
+ * @example
+ * ```tsx
+ * <NotificationBanner
+ *   variant="warning"
+ *   icon={<DollarSign />}
+ *   title="Found $33.98 in potential savings"
+ *   description="Tap to review"
+ *   action={{
+ *     label: "Review",
+ *     onClick: handleReview
+ *   }}
+ *   onDismiss={() => setShowBanner(false)}
+ * />
+ * ```
+ */
+export function NotificationBanner({
+  variant = 'info',
+  icon,
+  title,
+  description,
+  action,
+  onDismiss,
+  dismissible = true,
+  sticky = false,
+  className = '',
+}: NotificationBannerProps) {
+  const bannerRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [offsetX, setOffsetX] = useState(0);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const startX = useRef(0);
+
+  // Default icons based on variant
+  const defaultIcons: Record<typeof variant, React.ReactNode> = {
+    info: <Info className="h-5 w-5" />,
+    success: <CheckCircle className="h-5 w-5" />,
+    warning: <AlertTriangle className="h-5 w-5" />,
+    error: <AlertCircle className="h-5 w-5" />,
+  };
+
+  // Color classes
+  const variantClasses: Record<typeof variant, string> = {
+    info: 'bg-gradient-to-r from-primary-50 to-primary-100 border-primary-200 text-primary-900',
+    success: 'bg-gradient-to-r from-success-50 to-success-100 border-success-200 text-success-900',
+    warning: 'bg-gradient-to-r from-warning-50 to-warning-100 border-warning-200 text-warning-900',
+    error: 'bg-gradient-to-r from-error-50 to-error-100 border-error-200 text-error-900',
+  };
+
+  const iconColorClasses: Record<typeof variant, string> = {
+    info: 'text-primary-600',
+    success: 'text-success-600',
+    warning: 'text-warning-600',
+    error: 'text-error-600',
+  };
+
+  const buttonClasses: Record<typeof variant, string> = {
+    info: 'bg-primary-600 hover:bg-primary-700 text-white',
+    success: 'bg-success-600 hover:bg-success-700 text-white',
+    warning: 'bg-warning-600 hover:bg-warning-700 text-white',
+    error: 'bg-error-600 hover:bg-error-700 text-white',
+  };
+
+  // Handle swipe dismiss
+  const handleDragStart = useCallback((clientX: number) => {
+    if (!dismissible) return;
+    setIsDragging(true);
+    startX.current = clientX;
+  }, [dismissible]);
+
+  const handleDragMove = useCallback((clientX: number) => {
+    if (!isDragging) return;
+    const delta = clientX - startX.current;
+    setOffsetX(delta);
+  }, [isDragging]);
+
+  const handleDragEnd = useCallback(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+
+    const threshold = 100;
+    if (Math.abs(offsetX) > threshold) {
+      // Animate out
+      setOffsetX(offsetX > 0 ? window.innerWidth : -window.innerWidth);
+      setIsDismissed(true);
+      setTimeout(() => {
+        onDismiss?.();
+      }, 200);
+    } else {
+      // Snap back
+      setOffsetX(0);
+    }
+  }, [isDragging, offsetX, onDismiss]);
+
+  // Touch handlers
+  const handleTouchStart = (e: React.TouchEvent) => {
+    handleDragStart(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    handleDragMove(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    handleDragEnd();
+  };
+
+  // Mouse handlers for desktop testing
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (dismissible) {
+      handleDragStart(e.clientX);
+    }
+  };
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      handleDragMove(e.clientX);
+    };
+
+    const handleMouseUp = () => {
+      handleDragEnd();
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, handleDragMove, handleDragEnd]);
+
+  if (isDismissed) return null;
+
+  return (
+    <div
+      ref={bannerRef}
+      className={`
+        w-full border-b
+        ${variantClasses[variant]}
+        ${sticky ? 'sticky top-0 z-40' : ''}
+        ${isDragging ? '' : 'transition-transform duration-200 ease-out'}
+        ${className}
+      `}
+      style={{
+        transform: `translateX(${offsetX}px)`,
+        opacity: Math.max(0, 1 - Math.abs(offsetX) / 200),
+      }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      onMouseDown={handleMouseDown}
+      role="alert"
+    >
+      <div className="flex items-center gap-3 px-4 py-3">
+        {/* Icon */}
+        <div className={`flex-shrink-0 ${iconColorClasses[variant]}`}>
+          {icon || defaultIcons[variant]}
+        </div>
+
+        {/* Text content */}
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium truncate">{title}</p>
+          {description && (
+            <p className="text-xs opacity-80 truncate">{description}</p>
+          )}
+        </div>
+
+        {/* Action button */}
+        {action && (
+          <button
+            onClick={action.onClick}
+            className={`
+              flex-shrink-0 px-3 py-1.5 text-xs font-medium rounded-md
+              transition-colors duration-200
+              ${buttonClasses[variant]}
+            `}
+          >
+            {action.label}
+          </button>
+        )}
+
+        {/* Dismiss button */}
+        {onDismiss && (
+          <button
+            onClick={onDismiss}
+            className="flex-shrink-0 p-1 rounded-full hover:bg-black/10 transition-colors duration-200"
+            aria-label="Dismiss notification"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default NotificationBanner;

package/src/components/Progress.tsx

@@ -2,8 +2,8 @@
 export interface ProgressProps{
   /** Progress value (0-100) */
   value: number;
-  /** Progress variant */
-  variant?: 'linear' | 'circular';
+  /** Progress variant ('ring' is alias for 'circular') */
+  variant?: 'linear' | 'circular' | 'ring';
   /** Size variant */
   size?: 'sm' | 'md' | 'lg';
   /** Color variant */
@@ -48,8 +48,11 @@ export default function Progress({
     error: 'bg-error-100',
   };
 
+  // Normalize 'ring' to 'circular'
+  const normalizedVariant = variant === 'ring' ? 'circular' : variant;
+
   // Linear progress
-  if (variant === 'linear') {
+  if (normalizedVariant === 'linear') {
     const heightClasses = {
       sm: 'h-1',
       md: 'h-2',