@snowcone-app/ui 0.1.42 → 0.2.0

package/src/composed/carousels/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Carousel Components
+ *
+ * Production-grade carousels for product image display.
+ *
+ * @module carousels
+ */
+
+export * from "./types";
+export * from "./MobileProductCarousel";
+export * from "./HeroCarousel";

package/src/composed/carousels/types.ts

@@ -0,0 +1,58 @@
+/**
+ * Carousel Types
+ *
+ * Shared interfaces for carousel components.
+ */
+
+/**
+ * Represents a single image in a carousel.
+ *
+ * This type supports both static images and dynamic mockups.
+ * For mockups, the `src` may be updated in real-time via the RealtimeProvider.
+ */
+export interface CarouselImage {
+  /** The image source URL */
+  src: string;
+
+  /** Natural width of the image in pixels */
+  naturalWidth: number;
+
+  /** Natural height of the image in pixels */
+  naturalHeight: number;
+
+  /**
+   * Anchor point for image positioning (0-1 range, vertical position).
+   * Used to determine which part of the image to show when cropped.
+   */
+  imageAnchor: number;
+
+  /** Accessible label for the image */
+  label: string;
+
+  /**
+   * Whether this is a real-time mockup that can be updated.
+   * When true, the carousel will integrate with RealtimeProvider
+   * to receive URL updates.
+   */
+  isRealMockup?: boolean;
+
+  /**
+   * Whether this is a placeholder waiting for content.
+   * Displays a loading skeleton when true.
+   */
+  isPlaceholder?: boolean;
+
+  /** Placement identifier for mockup generation */
+  placement?: string;
+
+  /** Mockup identifier for real-time updates */
+  mockupId?: string;
+
+  /** Aspect ratio of the mockup (e.g., 1.78 for 16:9) */
+  aspectRatio?: number;
+}
+
+/**
+ * Alias for CarouselImage - used in hero contexts for semantic clarity.
+ */
+export type HeroImage = CarouselImage;

package/src/composed/grids/MasonryGrid.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+/**
+ * MasonryGrid - Responsive masonry layout primitive
+ *
+ * A pure layout component for creating masonry-style grids.
+ * No business logic - just handles responsive column calculation
+ * and distributing items across columns.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with fixed columns
+ * <MasonryGrid
+ *   items={artworks}
+ *   columns={3}
+ *   gap={8}
+ *   renderItem={(artwork, index) => (
+ *     <ArtworkCard key={artwork.id} artwork={artwork} />
+ *   )}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Responsive columns
+ * <MasonryGrid
+ *   items={products}
+ *   columns={{ sm: 2, md: 3, lg: 4, xl: 5 }}
+ *   gap={16}
+ *   renderItem={(product, index) => (
+ *     <ProductCard key={product.id} product={product} />
+ *   )}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom breakpoints
+ * <MasonryGrid
+ *   items={images}
+ *   columns={{ base: 2, sm: 3, md: 4, lg: 5, xl: 6, "2xl": 7 }}
+ *   renderItem={(image, index) => (
+ *     <img key={index} src={image.src} alt={image.alt} />
+ *   )}
+ * />
+ * ```
+ */
+
+import React, { useState, useEffect, useMemo } from "react";
+
+/**
+ * Responsive column configuration.
+ * Keys are Tailwind-style breakpoint names, values are column counts.
+ */
+export interface ResponsiveColumns {
+  /** Default/base columns (< 640px) */
+  base?: number;
+  /** sm: >= 640px */
+  sm?: number;
+  /** md: >= 768px */
+  md?: number;
+  /** lg: >= 1024px */
+  lg?: number;
+  /** xl: >= 1280px */
+  xl?: number;
+  /** 2xl: >= 1536px */
+  "2xl"?: number;
+}
+
+export interface MasonryGridProps<T> {
+  /** Array of items to display */
+  items: T[];
+
+  /**
+   * Render function for each item.
+   * @param item The item to render
+   * @param index The index of the item in the original array
+   */
+  renderItem: (item: T, index: number) => React.ReactNode;
+
+  /**
+   * Number of columns or responsive column configuration.
+   * @default { base: 2, sm: 3, md: 4, lg: 5, xl: 6 }
+   */
+  columns?: number | ResponsiveColumns;
+
+  /**
+   * Gap between items in pixels.
+   * @default 8
+   */
+  gap?: number;
+
+  /** Additional CSS classes for the container */
+  className?: string;
+
+  /** Empty state content */
+  emptyContent?: React.ReactNode;
+}
+
+// Tailwind-style breakpoints in pixels
+const BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};
+
+/**
+ * Default responsive column configuration
+ */
+const DEFAULT_COLUMNS: ResponsiveColumns = {
+  base: 2,
+  sm: 3,
+  md: 4,
+  lg: 5,
+  xl: 6,
+};
+
+/**
+ * Get the column count for a given viewport width
+ */
+function getColumnCount(
+  width: number,
+  columns: number | ResponsiveColumns
+): number {
+  if (typeof columns === "number") {
+    return columns;
+  }
+
+  // Find the appropriate column count based on viewport width
+  // Check from largest to smallest breakpoint
+  if (width >= BREAKPOINTS["2xl"] && columns["2xl"] !== undefined) {
+    return columns["2xl"];
+  }
+  if (width >= BREAKPOINTS.xl && columns.xl !== undefined) {
+    return columns.xl;
+  }
+  if (width >= BREAKPOINTS.lg && columns.lg !== undefined) {
+    return columns.lg;
+  }
+  if (width >= BREAKPOINTS.md && columns.md !== undefined) {
+    return columns.md;
+  }
+  if (width >= BREAKPOINTS.sm && columns.sm !== undefined) {
+    return columns.sm;
+  }
+
+  return columns.base ?? 2;
+}
+
+/**
+ * Distribute items into columns for masonry layout.
+ * Items are distributed round-robin style to maintain visual order.
+ */
+function distributeItems<T>(items: T[], columnCount: number): T[][] {
+  const columns: T[][] = Array.from({ length: columnCount }, () => []);
+
+  items.forEach((item, index) => {
+    const columnIndex = index % columnCount;
+    columns[columnIndex].push(item);
+  });
+
+  return columns;
+}
+
+export function MasonryGrid<T>({
+  items,
+  renderItem,
+  columns = DEFAULT_COLUMNS,
+  gap = 8,
+  className = "",
+  emptyContent,
+}: MasonryGridProps<T>) {
+  const [columnCount, setColumnCount] = useState(() =>
+    typeof columns === "number"
+      ? columns
+      : getColumnCount(
+          typeof window !== "undefined" ? window.innerWidth : 1024,
+          columns
+        )
+  );
+
+  // Update column count on resize
+  useEffect(() => {
+    const updateColumnCount = () => {
+      setColumnCount(getColumnCount(window.innerWidth, columns));
+    };
+
+    // Initial update
+    updateColumnCount();
+
+    window.addEventListener("resize", updateColumnCount);
+    return () => window.removeEventListener("resize", updateColumnCount);
+  }, [columns]);
+
+  // Distribute items into columns
+  const distributedColumns = useMemo(
+    () => distributeItems(items, columnCount),
+    [items, columnCount]
+  );
+
+  // Handle empty state
+  if (items.length === 0) {
+    if (emptyContent) {
+      return <>{emptyContent}</>;
+    }
+    return null;
+  }
+
+  return (
+    <div
+      className={`flex ${className}`}
+      style={{ gap: `${gap}px` }}
+      role="list"
+    >
+      {distributedColumns.map((columnItems, columnIndex) => (
+        <div
+          key={columnIndex}
+          className="flex-1 flex flex-col"
+          style={{ gap: `${gap}px` }}
+        >
+          {columnItems.map((item, itemIndex) => {
+            // Calculate original index for the render function
+            const originalIndex = itemIndex * columnCount + columnIndex;
+            return (
+              <div key={originalIndex} role="listitem">
+                {renderItem(item, originalIndex)}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default MasonryGrid;

package/src/composed/grids/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Grid Components
+ *
+ * Layout primitives for grid-based displays.
+ *
+ * @module grids
+ */
+
+export * from "./MasonryGrid";

package/src/composed/search/CurrentRefinements.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useCurrentRefinements } from "react-instantsearch";
+import { X as LucideX } from "lucide-react";
+import type { ComponentType } from "react";
+
+// Cast to fix React 19 type compatibility with lucide-react
+type IconProps = { className?: string; size?: number };
+const XIcon = LucideX as ComponentType<IconProps>;
+
+export function CurrentRefinements() {
+  const { items, refine } = useCurrentRefinements();
+
+  const formatPriceValue = (priceInCents: number): string => {
+    const priceInDollars = priceInCents / 100;
+    if (priceInDollars >= 100) {
+      return `$${(priceInDollars / 1000).toFixed(1)}k`;
+    } else if (priceInDollars >= 10) {
+      return `$${priceInDollars.toFixed(0)}`;
+    } else {
+      return `$${priceInDollars.toFixed(2)}`;
+    }
+  };
+
+  const formatRefinementLabel = (attribute: string, label: string) => {
+    if (attribute === "price") {
+      // Handle price range format like "100 <= price <= 5000"
+      const rangeMatch = label.match(/(\d+)\s*<=\s*price\s*<=\s*(\d+)/);
+      if (rangeMatch) {
+        const min = parseInt(rangeMatch[1]);
+        const max = parseInt(rangeMatch[2]);
+        return `${formatPriceValue(min)} - ${formatPriceValue(max)}`;
+      }
+
+      // Handle >= format like "price >= 3434" or "≥ 3434"
+      const minMatch = label.match(/[≥>=]+\s*(\d+)/);
+      if (minMatch) {
+        const min = parseInt(minMatch[1]);
+        return `Min ${formatPriceValue(min)}`;
+      }
+
+      // Handle <= format like "price <= 1000" or "≤ 1000"
+      const maxMatch = label.match(/[≤<=]+\s*(\d+)/);
+      if (maxMatch) {
+        const max = parseInt(maxMatch[1]);
+        return `Max ${formatPriceValue(max)}`;
+      }
+    }
+    return label;
+  };
+
+  const allRefinements = items.flatMap((item) =>
+    item.refinements.map((refinement) => ({
+      ...refinement,
+      refine: () => refine(refinement),
+      attribute: item.attribute,
+      displayLabel: formatRefinementLabel(item.attribute, refinement.label),
+    }))
+  );
+
+  if (allRefinements.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 mb-4 -mt-1" role="group" aria-label="Active filters">
+      {allRefinements.map((refinement, index) => (
+        <button
+          key={`${refinement.attribute}-${refinement.value}-${index}`}
+          className="bg-primary text-on-primary hover:bg-primary/90 inline-flex h-7 items-center gap-1.5 rounded-full px-3 text-sm transition-colors"
+          onClick={() => refinement.refine()}
+          aria-label={`Remove filter: ${refinement.displayLabel}`}
+        >
+          <span className="truncate">{refinement.displayLabel}</span>
+          <XIcon className="w-3 h-3" />
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/composed/search/Filters.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { FiltersButton } from "./FiltersButton";
+import { FiltersDrawer } from "./FiltersDrawer";
+
+export interface FiltersProps {
+  /**
+   * Optional className for the trigger button
+   */
+  buttonClassName?: string;
+
+  /**
+   * Optional button text
+   */
+  buttonText?: React.ReactNode;
+}
+
+/**
+ * Filters - Self-contained filters with button and drawer
+ *
+ * Manages its own open/close state internally so you don't need to set up useState.
+ *
+ * @example
+ * ```tsx
+ * <Filters />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Filters buttonText="Show Filters" buttonClassName="custom-class" />
+ * ```
+ */
+export function Filters({ buttonClassName, buttonText }: FiltersProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <FiltersButton
+        onClick={() => setIsOpen(true)}
+        className={buttonClassName}
+      >
+        {buttonText}
+      </FiltersButton>
+
+      <FiltersDrawer isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
+  );
+}

package/src/composed/search/FiltersButton.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { SlidersHorizontal as LucideSlidersHorizontal } from "lucide-react";
+import type { ComponentType } from "react";
+import { Button } from "../../primitives/Button";
+
+// Cast to fix React 19 type compatibility with lucide-react
+type IconProps = { className?: string; size?: number };
+const SlidersHorizontalIcon = LucideSlidersHorizontal as ComponentType<IconProps>;
+
+export interface FiltersButtonProps {
+  /**
+   * Click handler to open filters drawer
+   */
+  onClick: () => void;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+
+  /**
+   * Button text
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * FiltersButton - Button to open the filters drawer
+ *
+ * Uses Button field variant to match Input styling.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <FiltersButton onClick={() => setIsOpen(true)} />
+ * <FiltersDrawer isOpen={isOpen} onClose={() => setIsOpen(false)} />
+ * ```
+ */
+export function FiltersButton({
+  onClick,
+  className = "",
+  children = "Filters",
+}: FiltersButtonProps) {
+  return (
+    <Button
+      variant="field"
+      onClick={onClick}
+      className={className}
+      aria-label="Open filters"
+    >
+      <SlidersHorizontalIcon className="w-4 h-4" />
+      <span>{children}</span>
+    </Button>
+  );
+}