@snowcone-app/ui 0.1.43 → 0.2.0

package/src/lightbox/README.md

@@ -0,0 +1,77 @@
+# Lightbox Component
+
+A professional lightbox component for displaying images in full-screen with zoom functionality.
+
+## Features
+
+- Full-screen image display with white background
+- Click-to-zoom functionality with 2x magnification
+- Pan while zoomed by moving the mouse
+- Custom cursor indicators (+ for zoom in, - for zoom out)
+- Keyboard navigation (ESC to close or exit zoom)
+- Clean, minimal design with subtle shadows
+- Prevents text/image selection during interaction
+
+## Usage
+
+```tsx
+import { Lightbox } from '@yourorg/ui-react';
+
+function MyComponent() {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+  return (
+    <>
+      <button onClick={() => setImageUrl('/path/to/image.jpg')}>
+        Open Image
+      </button>
+      
+      {imageUrl && (
+        <Lightbox
+          imageUrl={imageUrl}
+          alt="Product image"
+          onClose={() => setImageUrl(null)}
+        />
+      )}
+    </>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `imageUrl` | `string` | Yes | URL of the image to display |
+| `alt` | `string` | No | Alt text for the image (default: "Lightbox image") |
+| `onClose` | `() => void` | Yes | Callback when lightbox is closed |
+| `className` | `string` | No | Additional CSS classes for the container |
+
+## Behavior
+
+### Zoom Controls
+- **Click on image**: Toggle between normal and 2x zoom
+- **Mouse movement when zoomed**: Pan around the image
+- **ESC key when zoomed**: Exit zoom mode
+- **ESC key when not zoomed**: Close lightbox
+- **Click outside image**: Close lightbox
+
+### Visual Indicators
+- Custom cursor shows + icon when hovering (can zoom in)
+- Custom cursor shows - icon when zoomed (can zoom out)
+- Close button in top-right corner with hover state
+
+## Styling
+
+The component uses Tailwind CSS classes and includes:
+- White background for clean presentation
+- Subtle shadows on interactive elements
+- Smooth transitions for zoom effects
+- Responsive sizing (max 95% viewport width/height)
+
+## Dependencies
+
+This component requires:
+- React 18 or 19
+- lucide-react for icons
+- Tailwind CSS for styling

package/src/next/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { UiRouterProvider, type UiRouter } from "../lib/router";
+
+/**
+ * Wire @snowcone-app/ui's navigation to Next's App Router so search-result
+ * clicks (and any other ui navigation) stay SPA-smooth. This is the ONLY ui
+ * module that imports next/navigation — it lives behind the `@snowcone-app/ui/next`
+ * subpath, so the main entry stays framework-agnostic. Wrap your app (or the
+ * search subtree) once:
+ *
+ *   import { UiNextRouterProvider } from "@snowcone-app/ui/next";
+ *   <UiNextRouterProvider>{children}</UiNextRouterProvider>
+ *
+ * Without it, ui falls back to History-based (full-page) navigation.
+ */
+export function UiNextRouterProvider({ children }: { children: ReactNode }) {
+  const router = useRouter();
+  const value: UiRouter = {
+    push: (url) => router.push(url),
+    replace: (url) => router.replace(url),
+  };
+  return <UiRouterProvider value={value}>{children}</UiRouterProvider>;
+}