@snowcone-app/ui 0.1.42 → 0.2.0

package/src/composed/zoom/ZoomOverlay.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import React, { useState, useCallback, type ComponentType } from 'react';
+import { Plus as LucidePlus, Minus as LucideMinus } from 'lucide-react';
+
+// Cast to fix React 19 type compatibility with lucide-react
+type IconProps = { className?: string; size?: number; strokeWidth?: number; "aria-hidden"?: boolean | "true" | "false" };
+const PlusIcon = LucidePlus as ComponentType<IconProps>;
+const MinusIcon = LucideMinus as ComponentType<IconProps>;
+
+interface ZoomOverlayProps {
+  imageIndex: number;
+  isLargeTouchDevice: boolean;
+  isTouchDevice: boolean;
+  onEnhancedViewer?: (index: number) => void;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function ZoomOverlay({
+  imageIndex,
+  isLargeTouchDevice,
+  isTouchDevice,
+  onEnhancedViewer,
+  children,
+  className,
+  style,
+}: ZoomOverlayProps) {
+  const [zoomedImageIndex, setZoomedImageIndex] = useState<number | null>(null);
+  const [zoomOrigin, setZoomOrigin] = useState({ x: 50, y: 50 });
+  const [hoveredImageIndex, setHoveredImageIndex] = useState<number | null>(null);
+  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+  const [announcement, setAnnouncement] = useState('');
+  const [isZooming, setIsZooming] = useState(false);
+
+  const handleZoomClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+
+      // On large touch devices (tablets), use the enhanced viewer
+      if (isLargeTouchDevice && onEnhancedViewer) {
+        onEnhancedViewer(imageIndex);
+        return;
+      }
+
+      // Desktop behavior
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = ((e.clientX - rect.left) / rect.width) * 100;
+      const y = ((e.clientY - rect.top) / rect.height) * 100;
+
+      if (zoomedImageIndex === imageIndex) {
+        setIsZooming(true);
+        setZoomedImageIndex(null);
+        setAnnouncement('Zoomed out to 100%');
+        setTimeout(() => setIsZooming(false), 200);
+      } else {
+        setZoomOrigin({ x, y });
+        setIsZooming(true);
+        setZoomedImageIndex(imageIndex);
+        setAnnouncement('Zoomed in to 200%');
+        setTimeout(() => setIsZooming(false), 200);
+      }
+    },
+    [zoomedImageIndex, isLargeTouchDevice, onEnhancedViewer, imageIndex]
+  );
+
+  const handleZoomMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      // Always update cursor position for custom cursor
+      setCursorPos({ x: e.clientX, y: e.clientY });
+
+      // Only update zoom origin when zoomed
+      if (zoomedImageIndex === imageIndex) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = ((e.clientX - rect.left) / rect.width) * 100;
+        const y = ((e.clientY - rect.top) / rect.height) * 100;
+
+        // Don't clamp - allow full range for panning
+        setZoomOrigin({ x, y });
+
+        // Disable transition while panning
+        setIsZooming(false);
+      }
+    },
+    [zoomedImageIndex, imageIndex]
+  );
+
+  const isZoomed = zoomedImageIndex === imageIndex;
+  const isHovered = hoveredImageIndex === imageIndex;
+
+  const cursorStyle = isLargeTouchDevice
+    ? "pointer"
+    : isTouchDevice
+    ? "default"
+    : "none"; // Always hide default cursor on desktop since we show custom cursor
+
+  return (
+    <>
+      {/* Screen reader announcements */}
+      <div className="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        {announcement}
+      </div>
+
+      <div
+        className={className}
+        style={{
+          ...style,
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            cursor: cursorStyle,
+            overflow: 'hidden',
+            position: 'relative',
+            borderRadius: '0.5rem', // 8px - Tailwind's rounded-lg
+          }}
+          onClick={
+            !isTouchDevice || isLargeTouchDevice
+              ? handleZoomClick
+              : undefined
+          }
+          onMouseEnter={
+            !isTouchDevice
+              ? () => setHoveredImageIndex(imageIndex)
+              : undefined
+          }
+          onMouseLeave={
+            !isTouchDevice
+              ? () => setHoveredImageIndex(null)
+              : undefined
+          }
+          onMouseMove={
+            !isTouchDevice
+              ? handleZoomMouseMove
+              : undefined
+          }
+          role="button"
+          aria-label={isZoomed ? "Click to zoom out (currently at 200%)" : "Click to zoom in to 200%"}
+          tabIndex={!isTouchDevice || isLargeTouchDevice ? 0 : undefined}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleZoomClick(e as any);
+            }
+          }}
+        >
+          <div
+            style={{
+              transform: isZoomed ? "scale(2)" : "",
+              transformOrigin: `${zoomOrigin.x}% ${zoomOrigin.y}%`,
+              transition: isZooming ? "transform 0.2s ease-out" : "none",
+              willChange: isZoomed ? 'transform' : 'auto',
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+
+      {/* Custom cursor for desktop image hover - only on non-touch devices */}
+      {isHovered && !isTouchDevice && (
+        <div
+          className="fixed pointer-events-none z-50 hidden md:block"
+          style={{
+            left: cursorPos.x,
+            top: cursorPos.y,
+            transform: "translate(-50%, -50%)",
+          }}
+          aria-hidden="true"
+        >
+          <div className="bg-white dark:bg-gray-800 rounded-full p-2 shadow-sm dark:shadow-gray-950/50">
+            {isZoomed ? (
+              <MinusIcon
+                size={20}
+                className="text-gray-900 dark:text-gray-100"
+                strokeWidth={1.5}
+                aria-hidden="true"
+              />
+            ) : (
+              <PlusIcon
+                size={20}
+                className="text-gray-900 dark:text-gray-100"
+                strokeWidth={1.5}
+                aria-hidden="true"
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/composed/zoom/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Zoom Components - Responsive image zoom with device-adaptive behavior
+ *
+ * - Desktop: Inline 2x zoom with custom cursor (ZoomOverlay)
+ * - Mobile/Tablet: Fullscreen pinch-to-zoom viewer (EnhancedImageViewer)
+ * - ResponsiveZoom: Adaptive wrapper that selects the best experience per device
+ */
+
+export { ResponsiveZoom } from './ResponsiveZoom';
+export { ZoomOverlay } from './ZoomOverlay';
+export { EnhancedImageViewer } from './EnhancedImageViewer';
+export type { ZoomImage } from './types';

package/src/composed/zoom/types.ts

@@ -0,0 +1,12 @@
+/**
+ * Image interface for zoom components
+ */
+export interface ZoomImage {
+  src: string;
+  alt?: string;
+  naturalWidth?: number;
+  naturalHeight?: number;
+  isRealMockup?: boolean;
+  placement?: string;
+  mockupId?: string;
+}

package/src/design-system/ColorPalette.tsx

@@ -0,0 +1,126 @@
+/**
+ * ColorPalette - Displays all theme color tokens organized by category
+ */
+
+import { ColorTokenSwatch, ColorRow } from './ColorSwatch';
+
+const COLOR_GROUPS = [
+  {
+    name: 'Base',
+    description: 'Primary background and text colors',
+    colors: [
+      { name: 'Background', cssVar: '--background', description: 'Page background' },
+      { name: 'Foreground', cssVar: '--foreground', description: 'Primary text color' },
+      { name: 'Muted', cssVar: '--muted', description: 'Muted background' },
+      { name: 'Muted Foreground', cssVar: '--muted-foreground', description: 'Secondary text' },
+    ],
+  },
+  {
+    name: 'Cards & Surfaces',
+    description: 'Elevated surface colors',
+    colors: [
+      { name: 'Card', cssVar: '--color-card', description: 'Card background' },
+      { name: 'Card Foreground', cssVar: '--color-card-foreground', description: 'Card text' },
+      { name: 'Popover', cssVar: '--color-popover', description: 'Popover/dropdown background' },
+      { name: 'Popover Foreground', cssVar: '--color-popover-foreground', description: 'Popover text' },
+    ],
+  },
+  {
+    name: 'Primary & Accent',
+    description: 'Brand and accent colors',
+    colors: [
+      { name: 'Primary', cssVar: '--primary', description: 'Primary brand color' },
+      { name: 'Primary Foreground', cssVar: '--primary-foreground', description: 'Text on primary' },
+      { name: 'Accent', cssVar: '--accent', description: 'Accent highlights' },
+      { name: 'Accent Foreground', cssVar: '--accent-foreground', description: 'Text on accent' },
+    ],
+  },
+  {
+    name: 'Secondary',
+    description: 'Secondary action colors',
+    colors: [
+      { name: 'Secondary', cssVar: '--secondary', description: 'Secondary actions' },
+      { name: 'Secondary Foreground', cssVar: '--secondary-foreground', description: 'Text on secondary' },
+      { name: 'Default', cssVar: '--default', description: 'Default/neutral' },
+      { name: 'Default Foreground', cssVar: '--default-foreground', description: 'Text on default' },
+    ],
+  },
+  {
+    name: 'Surfaces (Semantic)',
+    description: 'OKLCH-generated surface hierarchy',
+    colors: [
+      { name: 'Surface', cssVar: '--color-surface', description: 'Cards, panels' },
+      { name: 'Surface Raised', cssVar: '--color-surface-raised', description: 'Popovers, dropdowns' },
+      { name: 'Muted', cssVar: '--color-muted', description: 'Muted backgrounds, tracks' },
+    ],
+  },
+  {
+    name: 'Borders & Dividers',
+    description: 'Separators and outlines',
+    colors: [
+      { name: 'Border', cssVar: '--border', description: 'Default border color' },
+      { name: 'Divider', cssVar: '--divider', description: 'Divider lines' },
+      { name: 'Ring', cssVar: '--color-ring', description: 'Focus ring color' },
+    ],
+  },
+  {
+    name: 'Form Fields (Semantic)',
+    description: 'Context-aware field backgrounds',
+    colors: [
+      { name: 'Field', cssVar: '--color-field', description: 'Field on page/transparent' },
+      { name: 'Field on Surface', cssVar: '--color-field-on-surface', description: 'Field inside Card/Surface' },
+      { name: 'Field Foreground', cssVar: '--color-foreground', description: 'Input text' },
+      { name: 'Focus Ring', cssVar: '--focus', description: 'Focus indicator' },
+    ],
+  },
+  {
+    name: 'Icons & Text Accents',
+    description: 'Decorative text and icon colors',
+    colors: [
+      { name: 'Icon', cssVar: '--color-icon', description: 'Default icon color' },
+      { name: 'Accent Text (Overlay)', cssVar: '--color-accent-text-overlay', description: 'Text on images' },
+      { name: 'Accent Text (Page)', cssVar: '--color-accent-text-page', description: 'Accent labels' },
+    ],
+  },
+];
+
+interface ColorPaletteProps {
+  layout?: 'grid' | 'list';
+  className?: string;
+}
+
+export function ColorPalette({ layout = 'list', className = '' }: ColorPaletteProps) {
+  return (
+    <div className={`space-y-8 ${className}`}>
+      {COLOR_GROUPS.map((group) => (
+        <section key={group.name}>
+          <h3 className="text-lg font-semibold text-foreground mb-1">{group.name}</h3>
+          <p className="text-sm text-muted-foreground mb-4">{group.description}</p>
+
+          {layout === 'grid' ? (
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+              {group.colors.map((color) => (
+                <ColorTokenSwatch
+                  key={color.cssVar}
+                  name={color.name}
+                  cssVar={color.cssVar}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="bg-card rounded-lg border border-border p-4 divide-y divide-border">
+              {group.colors.map((color) => (
+                <ColorRow
+                  key={color.cssVar}
+                  name={color.name}
+                  cssVar={color.cssVar}
+                  description={color.description}
+                />
+              ))}
+            </div>
+          )}
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/design-system/ColorSwatch.tsx

@@ -0,0 +1,49 @@
+/**
+ * ColorTokenSwatch - Displays a single color token with its value
+ * (For design system documentation, not the interactive product color selector)
+ */
+
+interface ColorTokenSwatchProps {
+  name: string;
+  cssVar: string;
+  className?: string;
+}
+
+export function ColorTokenSwatch({ name, cssVar, className = '' }: ColorTokenSwatchProps) {
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      <div
+        className="h-16 w-full rounded-lg border border-border shadow-sm"
+        style={{ backgroundColor: `var(${cssVar})` }}
+      />
+      <div className="text-sm font-medium text-foreground">{name}</div>
+      <code className="text-xs text-muted-foreground font-mono">{cssVar}</code>
+    </div>
+  );
+}
+
+interface ColorRowProps {
+  name: string;
+  cssVar: string;
+  description?: string;
+}
+
+export function ColorRow({ name, cssVar, description }: ColorRowProps) {
+  return (
+    <div className="flex items-center gap-4 py-2">
+      <div
+        className="h-10 w-10 rounded-lg border border-border shadow-sm flex-shrink-0"
+        style={{ backgroundColor: `var(${cssVar})` }}
+      />
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-foreground">{name}</div>
+        {description && (
+          <div className="text-xs text-muted-foreground">{description}</div>
+        )}
+      </div>
+      <code className="text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded">
+        {cssVar}
+      </code>
+    </div>
+  );
+}

package/src/design-system/DesignSystemPage.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+/**
+ * DesignSystemPage - A complete design system overview
+ *
+ * Import this component into any app to display the current theme's
+ * color palette, typography, and spacing tokens.
+ *
+ * @example
+ * ```tsx
+ * import { DesignSystemPage } from '@snowcone-app/ui';
+ *
+ * export default function DesignSystem() {
+ *   return <DesignSystemPage />;
+ * }
+ * ```
+ */
+
+import { ColorPalette } from './ColorPalette';
+import { TypographyScale, RadiusScale } from './TypographyScale';
+import { ThemeSwitcher } from './ThemeSwitcher';
+
+interface DesignSystemPageProps {
+  /** Show theme switcher at the top */
+  showThemeSwitcher?: boolean;
+  /** Show color palette section */
+  showColors?: boolean;
+  /** Show typography section */
+  showTypography?: boolean;
+  /** Show border radius section */
+  showRadius?: boolean;
+  /** Show spacing section */
+  showSpacing?: boolean;
+  /** Layout for color swatches */
+  colorLayout?: 'grid' | 'list';
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export function DesignSystemPage({
+  showThemeSwitcher = true,
+  showColors = true,
+  showTypography = true,
+  showRadius = true,
+  showSpacing = false,
+  colorLayout = 'list',
+  className = '',
+}: DesignSystemPageProps) {
+  return (
+    <div className={`max-w-4xl mx-auto px-4 py-8 ${className}`}>
+      <header className="mb-12">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
+          <div>
+            <h1 className="text-4xl font-bold text-foreground mb-2">Design System</h1>
+            <p className="text-lg text-muted-foreground">
+              Visual reference for theme tokens and styles
+            </p>
+          </div>
+          {showThemeSwitcher && <ThemeSwitcher />}
+        </div>
+      </header>
+
+      {showColors && (
+        <section className="mb-16">
+          <h2 className="text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border">
+            Color Palette
+          </h2>
+          <ColorPalette layout={colorLayout} />
+        </section>
+      )}
+
+      {showTypography && (
+        <section className="mb-16">
+          <h2 className="text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border">
+            Typography
+          </h2>
+          <TypographyScale />
+        </section>
+      )}
+
+      {showRadius && (
+        <section className="mb-16">
+          <h2 className="text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border">
+            Border Radius
+          </h2>
+          <RadiusScale />
+        </section>
+      )}
+
+      {showSpacing && (
+        <section className="mb-16">
+          <h2 className="text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border">
+            Spacing Scale
+          </h2>
+          <SpacingScale />
+        </section>
+      )}
+    </div>
+  );
+}
+
+function SpacingScale() {
+  const spaces = [
+    { name: '1', value: '0.25rem' },
+    { name: '2', value: '0.5rem' },
+    { name: '3', value: '0.75rem' },
+    { name: '4', value: '1rem' },
+    { name: '6', value: '1.5rem' },
+    { name: '8', value: '2rem' },
+    { name: '12', value: '3rem' },
+    { name: '16', value: '4rem' },
+  ];
+
+  return (
+    <div className="space-y-2">
+      {spaces.map((space) => (
+        <div key={space.name} className="flex items-center gap-4">
+          <code className="text-xs text-muted-foreground font-mono w-8">
+            {space.name}
+          </code>
+          <div
+            className="h-4 bg-primary rounded"
+            style={{ width: space.value }}
+          />
+          <span className="text-sm text-muted-foreground">{space.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}