@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/data/ecommerce-data.tsx

@@ -0,0 +1,1387 @@
+export const ecommerceComponents = [
+    {
+        name: "Category Filters",
+        value: "category-filters",
+        path: "/components/catalyst-ui/ecommerce/components/categoryFilters.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce", "filters", "search"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+export function CategoryFiltersDemo() {
+  const [filters, setFilters] = useState({});
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const demoFilters = [
+    {
+      key: 'category',
+      label: 'Category',
+      type: 'checkbox',
+      options: [
+        { value: 'electronics', label: 'Electronics', count: 124 },
+        { value: 'clothing', label: 'Clothing', count: 89 },
+        { value: 'books', label: 'Books', count: 45 },
+        { value: 'home', label: 'Home & Garden', count: 67 },
+      ]
+    },
+    {
+      key: 'price',
+      label: 'Price Range',
+      type: 'range',
+      minPlaceholder: '$0',
+      maxPlaceholder: '$1000'
+    },
+    {
+      key: 'brand',
+      label: 'Brand',
+      type: 'radio',
+      options: [
+        { value: 'apple', label: 'Apple', count: 23 },
+        { value: 'samsung', label: 'Samsung', count: 31 },
+        { value: 'nike', label: 'Nike', count: 18 },
+        { value: 'adidas', label: 'Adidas', count: 15 },
+      ]
+    },
+    {
+      key: 'color',
+      label: 'Color',
+      type: 'color',
+      options: [
+        { value: 'black', label: 'Black', color: '#000000' },
+        { value: 'white', label: 'White', color: '#FFFFFF' },
+        { value: 'red', label: 'Red', color: '#EF4444' },
+        { value: 'blue', label: 'Blue', color: '#3B82F6' },
+        { value: 'green', label: 'Green', color: '#10B981' },
+        { value: 'yellow', label: 'Yellow', color: '#F59E0B' },
+      ]
+    },
+    {
+      key: 'size',
+      label: 'Size',
+      type: 'checkbox',
+      options: [
+        { value: 'xs', label: 'XS', count: 12 },
+        { value: 's', label: 'S', count: 24 },
+        { value: 'm', label: 'M', count: 35 },
+        { value: 'l', label: 'L', count: 28 },
+        { value: 'xl', label: 'XL', count: 16 },
+      ]
+    }
+  ];
+
+  const handleFiltersChange = (newFilters) => {
+    setFilters(newFilters);
+    console.log('Active filters:', newFilters);
+  };
+
+  const handleSearchChange = (newSearchTerm) => {
+    setSearchTerm(newSearchTerm);
+    console.log('Search term:', newSearchTerm);
+  };
+
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-2xl font-bold text-foreground mb-8">Category Filters Demo</h1>
+        
+        {/* Default Style */}
+        <div className="mb-12">
+          <h2 className="text-xl font-semibold mb-4 text-foreground">Default Style</h2>
+          <div className="max-w-md">
+            <CategoryFilters
+              title="Filter Products"
+              description="Find exactly what you're looking for"
+              searchPlaceholder="Search products~/components/catalyst-ui."
+              filters={demoFilters}
+              onFiltersChange={handleFiltersChange}
+              onSearchChange={handleSearchChange}
+              style="default"
+            />
+          </div>
+        </div>
+
+        {/* Sidebar Style */}
+        <div className="mb-12">
+          <h2 className="text-xl font-semibold mb-4 text-foreground">Sidebar Style</h2>
+          <div className="flex gap-6">
+            <div className="w-80">
+              <CategoryFilters
+                title="Refine Search"
+                description="Use filters to narrow down results"
+                searchPlaceholder="Quick search~/components/catalyst-ui."
+                filters={demoFilters}
+                onFiltersChange={handleFiltersChange}
+                onSearchChange={handleSearchChange}
+                style="sidebar"
+              />
+            </div>
+            <div className="flex-1 p-6 bg-muted/20 rounded-lg border-2 border-dashed border-muted-foreground/20">
+              <div className="text-center text-muted-foreground">
+                <p className="text-lg mb-2">Product Results Would Appear Here</p>
+                <p className="text-sm">Current Search: "{searchTerm || 'None'}"</p>
+                <p className="text-sm">Active Filters: {Object.keys(filters).length}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile/Responsive Style */}
+        <div className="mb-12">
+          <h2 className="text-xl font-semibold mb-4 text-foreground">Mobile/Responsive Style</h2>
+          <div className="max-w-sm">
+            <CategoryFilters
+              title="Shop"
+              description="Browse our collection"
+              searchPlaceholder="What are you looking for?"
+              filters={demoFilters.slice(0, 3)}
+              onFiltersChange={handleFiltersChange}
+              onSearchChange={handleSearchChange}
+              style="mobile"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Category Previews",
+        value: "category-previews",
+        path: "/components/catalyst-ui/ecommerce/components/categoryPreviews.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+interface Product {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  originalPrice?: number;
+  rating: number;
+  reviewCount: number;
+  image: string;
+  tags: string[];
+  category: string;
+  inStock: boolean;
+  isNew?: boolean;
+  isFeatured?: boolean;
+}
+
+interface Category {
+  id: string;
+  name: string;
+  description: string;
+  image: string;
+  productCount: number;
+  featuredProducts: Product[];
+}
+
+export function CategoryPreviewsDemo() {
+  // Sample categories data
+  const sampleCategories: Category[] = [
+    {
+      id: "electronics",
+      name: "Electronics",
+      description: "Latest gadgets and devices",
+      image: "/placeholder-electronics.jpg",
+      productCount: 42,
+      featuredProducts: [
+        {
+          id: "1",
+          name: "Wireless Headphones",
+          description: "Noise-cancelling wireless headphones with exceptional sound quality.",
+          price: 299.99,
+          originalPrice: 349.99,
+          rating: 4.5,
+          reviewCount: 124,
+          image: "/placeholder-headphones.jpg",
+          tags: ["Wireless", "Noise-Cancelling", "Bluetooth"],
+          category: "electronics",
+          inStock: true,
+          isNew: true,
+          isFeatured: true
+        },
+        {
+          id: "2",
+          name: "Smart Watch",
+          description: "Advanced smartwatch with health monitoring and notifications.",
+          price: 249.99,
+          rating: 4.2,
+          reviewCount: 89,
+          image: "/placeholder-watch.jpg",
+          tags: ["Wearable", "Fitness", "Smart"],
+          category: "electronics",
+          inStock: true,
+          isFeatured: true
+        },
+        {
+          id: "3",
+          name: "Wireless Earbuds",
+          description: "Compact true wireless earbuds with charging case.",
+          price: 129.99,
+          originalPrice: 149.99,
+          rating: 4.3,
+          reviewCount: 67,
+          image: "/placeholder-earbuds.jpg",
+          tags: ["Wireless", "Bluetooth", "Portable"],
+          category: "electronics",
+          inStock: true,
+          isNew: true
+        },
+        {
+          id: "4",
+          name: "Bluetooth Speaker",
+          description: "Portable speaker with 24-hour battery life.",
+          price: 79.99,
+          rating: 4.4,
+          reviewCount: 92,
+          image: "/placeholder-speaker.jpg",
+          tags: ["Bluetooth", "Portable", "Waterproof"],
+          category: "electronics",
+          inStock: true
+        }
+      ]
+    },
+    {
+      id: "clothing",
+      name: "Clothing",
+      description: "Fashionable apparel for everyone",
+      image: "/placeholder-clothing.jpg",
+      productCount: 38,
+      featuredProducts: [
+        {
+          id: "5",
+          name: "Premium T-Shirt",
+          description: "100% cotton premium t-shirt with comfortable fit.",
+          price: 29.99,
+          originalPrice: 39.99,
+          rating: 4.7,
+          reviewCount: 156,
+          image: "/placeholder-tshirt.jpg",
+          tags: ["Cotton", "Comfort", "Casual"],
+          category: "clothing",
+          inStock: true,
+          isNew: true
+        },
+        {
+          id: "6",
+          name: "Denim Jeans",
+          description: "Classic denim jeans with modern fit.",
+          price: 59.99,
+          rating: 4.3,
+          reviewCount: 204,
+          image: "/placeholder-jeans.jpg",
+          tags: ["Denim", "Classic", "Comfort"],
+          category: "clothing",
+          inStock: true
+        },
+        {
+          id: "7",
+          name: "Winter Jacket",
+          description: "Warm winter jacket with water-resistant coating.",
+          price: 129.99,
+          rating: 4.6,
+          reviewCount: 78,
+          image: "/placeholder-jacket.jpg",
+          tags: ["Winter", "Warm", "Water-Resistant"],
+          category: "clothing",
+          inStock: false
+        },
+        {
+          id: "8",
+          name: "Running Shoes",
+          description: "Lightweight running shoes with extra cushioning.",
+          price: 89.99,
+          originalPrice: 109.99,
+          rating: 4.5,
+          reviewCount: 132,
+          image: "/placeholder-shoes.jpg",
+          tags: ["Running", "Comfort", "Lightweight"],
+          category: "clothing",
+          inStock: true,
+          isFeatured: true
+        }
+      ]
+    },
+    {
+      id: "home",
+      name: "Home & Kitchen",
+      description: "Everything for your home",
+      image: "/placeholder-home.jpg",
+      productCount: 27,
+      featuredProducts: [
+        {
+          id: "9",
+          name: "Coffee Maker",
+          description: "Programmable coffee maker with thermal carafe.",
+          price: 79.99,
+          rating: 4.4,
+          reviewCount: 187,
+          image: "/placeholder-coffeemaker.jpg",
+          tags: ["Coffee", "Kitchen", "Appliance"],
+          category: "home",
+          inStock: true
+        },
+        {
+          id: "10",
+          name: "Desk Lamp",
+          description: "Modern LED desk lamp with adjustable brightness.",
+          price: 39.99,
+          originalPrice: 49.99,
+          rating: 4.2,
+          reviewCount: 95,
+          image: "/placeholder-lamp.jpg",
+          tags: ["LED", "Adjustable", "Modern"],
+          category: "home",
+          inStock: true,
+          isNew: true
+        },
+        {
+          id: "11",
+          name: "Cutlery Set",
+          description: "18-piece stainless steel cutlery set.",
+          price: 49.99,
+          rating: 4.8,
+          reviewCount: 216,
+          image: "/placeholder-cutlery.jpg",
+          tags: ["Kitchen", "Stainless Steel", "Utensils"],
+          category: "home",
+          inStock: true,
+          isFeatured: true
+        },
+        {
+          id: "12",
+          name: "Throw Pillow",
+          description: "Decorative throw pillow with removable cover.",
+          price: 24.99,
+          rating: 4.1,
+          reviewCount: 63,
+          image: "/placeholder-pillow.jpg",
+          tags: ["Decor", "Comfort", "Home"],
+          category: "home",
+          inStock: true
+        }
+      ]
+    }
+  ];
+
+  const handleCategoryClick = (category: Category) => {
+    console.log('Category clicked:', category);
+    // Navigate to category page
+  };
+
+  const handleProductClick = (product: Product) => {
+    console.log('Product clicked:', product);
+    // Navigate to product detail page
+  };
+
+  const handleAddToCart = (product: Product) => {
+    console.log('Added to cart:', product);
+    // Add to cart logic
+  };
+
+  const handleAddToWishlist = (product: Product) => {
+    console.log('Added to wishlist:', product);
+    // Add to wishlist logic
+  };
+
+  return (
+    <CategoryPreviews
+      categories={sampleCategories}
+      title="Shop by Category"
+      description="Discover our curated collections"
+      showFilters={true}
+      showSearch={true}
+      onCategoryClick={handleCategoryClick}
+      onProductClick={handleProductClick}
+      onAddToCart={handleAddToCart}
+      onAddToWishlist={handleAddToWishlist}
+      viewAllText="Browse all categories"
+      viewAllUrl="/categories"
+    />
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Checkout Forms",
+        value: "checkout-forms",
+        path: "/components/catalyst-ui/ecommerce/components/checkoutForms.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+export type CartItem = {
+  id: string;
+  name: string;
+  price: number;
+  quantity: number;
+  image: string;
+  color?: string;
+  size?: string;
+};
+
+export type CheckoutFormProps = {
+  title?: string;
+  description?: string;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  primaryButtonUrl?: string;
+  secondaryButtonUrl?: string;
+  className?: string;
+  variant?: "default" | "simple" | "with-order-summary";
+  items?: CartItem[];
+  onUpdateQuantity?: (id: string, quantity: number) => void;
+  onRemoveItem?: (id: string) => void;
+};
+
+export function CheckoutFormDemo() {
+  const [cartItems, setCartItems] = useState([
+    {
+      id: "1",
+      name: "Basic Tee",
+      price: 32.00,
+      quantity: 1,
+      image: "https://tailwindui.com/img/ecommerce-images/shopping-cart-page-01-product-01.jpg",
+      color: "Sienna",
+      size: "M"
+    },
+    {
+      id: "2",
+      name: "Basic Bottle",
+      price: 25.00,
+      quantity: 1,
+      image: "https://tailwindui.com/img/ecommerce-images/shopping-cart-page-01-product-02.jpg",
+      color: "Clear"
+    }
+  ]);
+
+  const handleUpdateQuantity = (id: string, quantity: number) => {
+    setCartItems(prevItems => 
+      prevItems.map(item => 
+        item.id === id ? { ~/components/catalyst-ui.item, quantity } : item
+      )
+    );
+  };
+
+  const handleRemoveItem = (id: string) => {
+    setCartItems(prevItems => prevItems.filter(item => item.id !== id));
+  };
+
+  return (
+    <CheckoutForm
+      title="Checkout"
+      description="Complete your purchase by filling in the details below"
+      primaryButtonText="Complete Order"
+      secondaryButtonText="Continue Shopping"
+      primaryButtonUrl="/order-confirmation"
+      secondaryButtonUrl="/products"
+      variant="default"
+      items={cartItems}
+      onUpdateQuantity={handleUpdateQuantity}
+      onRemoveItem={handleRemoveItem}
+    />
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Incentives",
+        value: "incentives",
+        path: "/components/catalyst-ui/ecommerce/components/incentives.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+
+
+
+
+
+interface IncentiveItem {
+  id: string;
+  icon?: React.ReactNode;
+  title: string;
+  description: string;
+  value?: string;
+  badge?: string;
+  actionText?: string;
+  url?: string;
+}
+
+export function IncentivesDemo() {
+  const [showFloating, setShowFloating] = useState(true);
+  const [progressValue, setProgressValue] = useState(75);
+
+  const sampleIncentives: IncentiveItem[] = [
+    {
+      id: "1",
+      icon: <Truck className="w-6 h-6 text-primary" />,
+      title: "Free Shipping",
+      description: "On orders over $50",
+      value: "$0",
+      badge: "Popular"
+    },
+    {
+      id: "2",
+      icon: <RotateCcw className="w-6 h-6 text-primary" />,
+      title: "Easy Returns",
+      description: "30-day return policy",
+      actionText: "Learn more"
+    },
+    {
+      id: "3",
+      icon: <Shield className="w-6 h-6 text-primary" />,
+      title: "Secure Checkout",
+      description: "SSL encrypted payments",
+      badge: "Verified"
+    },
+    {
+      id: "4",
+      icon: <Star className="w-6 h-6 text-primary" />,
+      title: "Loyalty Rewards",
+      description: "Earn points on every purchase",
+      value: "2x Points",
+      actionText: "Join now"
+    }
+  ];
+
+  const countdownEnd = new Date(Date.now() + 2 * 60 * 60 * 1000); // 2 hours from now
+
+  return (
+    <div className="space-y-8 p-6">
+      {/* Default Variant */}
+      <Incentives
+        title="Why Shop With Us"
+        description="Discover the benefits of shopping with our store"
+        items={sampleIncentives}
+        onItemClick={(item) => console.log('Clicked:', item)}
+      />
+
+      {/* Banner Variant */}
+      <Incentives
+        title="Limited Time Offer!"
+        description="Get amazing deals on all products"
+        items={sampleIncentives.slice(0, 3)}
+        variant="banner"
+        promoCode="SAVE20"
+        discount={20}
+        showDismiss={true}
+        onDismiss={() => console.log('Dismissed')}
+      />
+
+      {/* Grid Variant */}
+      <Incentives
+        title="Our Guarantees"
+        items={sampleIncentives}
+        variant="grid"
+        onItemClick={(item) => console.log('Grid clicked:', item)}
+      />
+
+      {/* Cards Variant */}
+      <Incentives
+        title="Premium Benefits"
+        description="Enjoy these exclusive perks with every purchase"
+        items={sampleIncentives}
+        variant="cards"
+        onItemClick={(item) => console.log('Card clicked:', item)}
+      />
+
+      {/* Countdown Variant */}
+      <Incentives
+        title="Flash Sale Ends Soon!"
+        description="Don't miss out on these incredible savings"
+        items={sampleIncentives.slice(0, 3)}
+        variant="countdown"
+        countdownEnd={countdownEnd}
+        discount={30}
+        primaryButtonText="Shop Flash Sale"
+        onPrimaryClick={() => console.log('Flash sale clicked')}
+      />
+
+      {/* Progress Variant */}
+      <Incentives
+        title="Unlock Free Shipping"
+        description="You're almost there! Keep shopping to qualify."
+        variant="progress"
+        progressValue={progressValue}
+        progressGoal={100}
+        primaryButtonText="Continue Shopping"
+        onPrimaryClick={() => setProgressValue(Math.min(progressValue + 25, 100))}
+      />
+
+      {/* Minimal Variant */}
+      <div className="bg-muted/30 p-4 rounded-lg">
+        <Incentives
+          items={sampleIncentives.slice(0, 3)}
+          variant="minimal"
+        />
+      </div>
+
+      {/* Floating Variant */}
+      {showFloating && (
+        <Incentives
+          items={[
+            {
+              id: "float1",
+              icon: <Gift className="w-5 h-5 text-primary" />,
+              title: "Special Offer!",
+              description: "Get 15% off your first order"
+            },
+            {
+              id: "float2",
+              icon: <Heart className="w-5 h-5 text-primary" />,
+              title: "Join Newsletter",
+              description: "Get exclusive deals"
+            }
+          ]}
+          variant="floating"
+          showDismiss={true}
+          onDismiss={() => setShowFloating(false)}
+          onItemClick={(item) => console.log('Floating clicked:', item)}
+        />
+      )}
+    </div>
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Order History",
+        value: "order-history",
+        path: "/components/catalyst-ui/ecommerce/components/orderHistory.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+ 
+
+export interface Order {
+  id: string;
+  date: string;
+  status: "delivered" | "processing" | "cancelled";
+  total: string;
+  items: number;
+  customer?: string;
+  paymentMethod?: string;
+}
+
+export interface OrderHistoryProps {
+  title: string;
+  description: string;
+  orders: Order[];
+  primaryButtonText: string;
+  secondaryButtonText: string;
+  primaryButtonUrl: string;
+  secondaryButtonUrl: string;
+  variant?: "default" | "minimal" | "detailed";
+  className?: string;
+  searchPlaceholder?: string;
+  filterOptions?: string[];
+}
+
+export function OrderHistoryDemo() {
+  const sampleOrders: Order[] = [
+    {
+      id: "ORD-1234",
+      date: "Jan 15, 2023",
+      status: "delivered",
+      total: "$125.00",
+      items: 3,
+      customer: "John Doe",
+      paymentMethod: "Credit Card"
+    },
+    {
+      id: "ORD-1235",
+      date: "Feb 3, 2023",
+      status: "processing",
+      total: "$89.99",
+      items: 2,
+      customer: "Jane Smith",
+      paymentMethod: "PayPal"
+    },
+    {
+      id: "ORD-1236",
+      date: "Mar 28, 2023",
+      status: "cancelled",
+      total: "$245.50",
+      items: 5,
+      customer: "Robert Johnson",
+      paymentMethod: "Credit Card"
+    },
+    {
+      id: "ORD-1237",
+      date: "Apr 12, 2023",
+      status: "delivered",
+      total: "$72.25",
+      items: 1,
+      customer: "Sarah Williams",
+      paymentMethod: "Apple Pay"
+    }
+  ];
+
+  return (
+    <OrderHistory
+      title="Order History"
+      description="Check the status of recent orders, manage returns, and download invoices."
+      orders={sampleOrders}
+      primaryButtonText="Continue Shopping"
+      secondaryButtonText="Request Return"
+      primaryButtonUrl="/products"
+      secondaryButtonUrl="/returns"
+      variant="default"
+      searchPlaceholder="Search orders~/components/catalyst-ui."
+      filterOptions={["All", "Delivered", "Processing", "Cancelled"]}
+    />
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Order Summaries",
+        value: "order-summaries",
+        path: "/components/catalyst-ui/ecommerce/components/orderSummaries.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+export function OrderSummaryDemo() {
+  const [items, setItems] = useState<OrderItem[]>([
+    {
+      id: "1",
+      name: "Basic Tee 6-Pack",
+      image: "/api/placeholder/64/64",
+      price: 192,
+      quantity: 1,
+      variant: "White"
+    },
+    {
+      id: "2",
+      name: "Basic Tee",
+      image: "/api/placeholder/64/64",
+      price: 32,
+      quantity: 2,
+      variant: "Black"
+    }
+  ]);
+
+  const [discount, setDiscount] = useState(0);
+  const subtotal = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+  const shipping = 5.00;
+  const tax = subtotal * 0.08;
+  const total = subtotal + shipping + tax - discount;
+
+  const handleApplyDiscount = (code: string) => {
+    if (code.toLowerCase() === "save10") {
+      setDiscount(subtotal * 0.1);
+    }
+  };
+
+  const handleRemoveItem = (itemId: string) => {
+    setItems(items.filter(item => item.id !== itemId));
+  };
+
+  const handleUpdateQuantity = (itemId: string, quantity: number) => {
+    setItems(items.map(item => 
+      item.id === itemId ? { ~/components/catalyst-ui.item, quantity } : item
+    ));
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+      <OrderSummary
+        title="Order Summary"
+        description="Review your items before checkout"
+        items={items}
+        subtotal={subtotal}
+        shipping={shipping}
+        tax={tax}
+        discount={discount}
+        total={total}
+        onApplyDiscount={handleApplyDiscount}
+        onRemoveItem={handleRemoveItem}
+        onUpdateQuantity={handleUpdateQuantity}
+        variant="default"
+      />
+      
+      <OrderSummary
+        items={items}
+        subtotal={subtotal}
+        shipping={shipping}
+        tax={tax}
+        discount={discount}
+        total={total}
+        variant="compact"
+      />
+      
+      <OrderSummary
+        items={items}
+        total={total}
+        variant="minimal"
+      />
+      
+      <div className="md:col-span-2 lg:col-span-3">
+        <OrderSummary
+          title="Detailed Order Summary"
+          description="Complete breakdown of your purchase"
+          items={items}
+          subtotal={subtotal}
+          shipping={shipping}
+          tax={tax}
+          discount={discount}
+          total={total}
+          onApplyDiscount={handleApplyDiscount}
+          onRemoveItem={handleRemoveItem}
+          onUpdateQuantity={handleUpdateQuantity}
+          variant="card"
+        />
+      </div>
+    </div>
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Product Card",
+        value: "product-card",
+        path: "/components/catalyst-ui/ecommerce/components/productCard.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/demo/productCard.tsx",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Product Features",
+        value: "product-features",
+        path: "/components/catalyst-ui/ecommerce/components/productFeatures.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+
+
+export type Feature = {
+  name: string;
+  description: string;
+  icon: React.ComponentType<any>;
+};
+
+export type ProductFeature = {
+  title: string;
+  description: string;
+  features: string[];
+};
+
+export type ProductFeaturesProps = {
+  title?: string;
+  description?: string;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  primaryButtonUrl?: string;
+  secondaryButtonUrl?: string;
+  className?: string;
+  variant?: "default" | "with-image" | "split-with-image" | "centered" | "grid";
+  features?: Feature[];
+  productFeatures?: ProductFeature[];
+  imageUrl?: string;
+  rating?: number;
+  price?: string;
+  colors?: { name: string; class: string; selectedClass: string }[];
+  sizes?: { name: string; inStock: boolean }[];
+};
+
+export function ProductFeaturesDemo() {
+  return (
+    <ProductFeatures
+      title="Basic Tee"
+      description="The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: 'Black'. Need to add an extra pop of color to your outfit? Our white tee has you covered."
+      primaryButtonText="Add to bag"
+      secondaryButtonText="Continue Shopping"
+      primaryButtonUrl="/checkout"
+      secondaryButtonUrl="/products"
+      variant="with-image"
+    />
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Product Lists",
+        value: "product-lists",
+        path: "/components/catalyst-ui/ecommerce/components/productFeatures.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+interface Product {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  originalPrice?: number;
+  rating: number;
+  reviewCount: number;
+  image: string;
+  tags: string[];
+  category: string;
+  inStock: boolean;
+  isNew?: boolean;
+  isFeatured?: boolean;
+}
+
+export function ProductListDemo() {
+  // Sample products data
+  const sampleProducts: Product[] = [
+    {
+      id: "1",
+      name: "Premium Headphones",
+      description: "Noise-cancelling wireless headphones with exceptional sound quality.",
+      price: 299.99,
+      originalPrice: 349.99,
+      rating: 4.5,
+      reviewCount: 124,
+      image: "/placeholder-headphones.jpg",
+      tags: ["Wireless", "Noise-Cancelling", "Bluetooth"],
+      category: "Audio",
+      inStock: true,
+      isNew: true,
+      isFeatured: true
+    },
+    {
+      id: "2",
+      name: "Smart Watch",
+      description: "Advanced smartwatch with health monitoring and notifications.",
+      price: 249.99,
+      rating: 4.2,
+      reviewCount: 89,
+      image: "/placeholder-watch.jpg",
+      tags: ["Wearable", "Fitness", "Smart"],
+      category: "Wearables",
+      inStock: true,
+      isFeatured: true
+    },
+    {
+      id: "3",
+      name: "Wireless Earbuds",
+      description: "Compact true wireless earbuds with charging case.",
+      price: 129.99,
+      originalPrice: 149.99,
+      rating: 4.3,
+      reviewCount: 67,
+      image: "/placeholder-earbuds.jpg",
+      tags: ["Wireless", "Bluetooth", "Portable"],
+      category: "Audio",
+      inStock: false,
+      isNew: true
+    },
+    {
+      id: "4",
+      name: "Gaming Keyboard",
+      description: "Mechanical gaming keyboard with RGB lighting.",
+      price: 89.99,
+      rating: 4.7,
+      reviewCount: 156,
+      image: "/placeholder-keyboard.jpg",
+      tags: ["Gaming", "RGB", "Mechanical"],
+      category: "Accessories",
+      inStock: true
+    },
+    {
+      id: "5",
+      name: "Portable Speaker",
+      description: "Waterproof Bluetooth speaker with 24-hour battery life.",
+      price: 79.99,
+      rating: 4.4,
+      reviewCount: 92,
+      image: "/placeholder-speaker.jpg",
+      tags: ["Bluetooth", "Waterproof", "Portable"],
+      category: "Audio",
+      inStock: true
+    },
+    {
+      id: "6",
+      name: "Phone Case",
+      description: "Protective case with drop protection and sleek design.",
+      price: 39.99,
+      rating: 4.1,
+      reviewCount: 204,
+      image: "/placeholder-case.jpg",
+      tags: ["Protection", "Accessory", "Mobile"],
+      category: "Accessories",
+      inStock: true
+    }
+  ];
+
+  const handleProductClick = (product: Product) => {
+    console.log('Product clicked:', product);
+    // Navigate to product detail page
+  };
+
+  const handleAddToCart = (product: Product) => {
+    console.log('Added to cart:', product);
+    // Add to cart logic
+  };
+
+  const handleAddToWishlist = (product: Product) => {
+    console.log('Added to wishlist:', product);
+    // Add to wishlist logic
+  };
+
+  return (
+    <ProductList
+      products={sampleProducts}
+      title="Our Products"
+      description="Discover our latest collection of premium gadgets and accessories"
+      layout="grid"
+      showFilters={true}
+      showSort={true}
+      onProductClick={handleProductClick}
+      onAddToCart={handleAddToCart}
+      onAddToWishlist={handleAddToWishlist}
+    />
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Product Overview",
+        value: "product-overview",
+        path: "/components/catalyst-ui/ecommerce/components/productOverview.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/components/productOverview.tsx",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Product QuickViews",
+        value: "product-quick-views",
+        path: "/components/catalyst-ui/ecommerce/components/productQuickViews.tsx",
+        source: null,
+        premium: true,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/demo/productQuickViews.tsx",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Promo Sections",
+        value: "promo-sections",
+        path: "/components/catalyst-ui/ecommerce/components/promoSectionts.tsx",
+        source: null,
+        premium: true,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/demo/promoSectionts.tsx",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Reviews",
+        value: "reviews",
+        path: "/components/catalyst-ui/ecommerce/components/reviews.tsx",
+        source: null,
+        premium: true,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+export function ReviewsDemo() {
+  const sampleReviews: Review[] = [
+    {
+      id: "1",
+      author: "John Doe",
+      rating: 5,
+      content:
+        "This product has completely transformed my workflow. The quality is exceptional and it's incredibly easy to use. I would highly recommend it to anyone looking for a solution like this.",
+      date: "January 15, 2023",
+      avatar: "/avatars/john-doe.jpg", // This would be a real path in your app
+    },
+    {
+      id: "2",
+      author: "Jane Smith",
+      rating: 4,
+      content:
+        "Very impressed with the build quality and attention to detail. The only reason I'm not giving 5 stars is because the instructions could be a bit clearer for beginners.",
+      date: "February 3, 2023",
+    },
+    {
+      id: "3",
+      author: "Robert Johnson",
+      rating: 5,
+      content:
+        "I've tried many alternatives but this one stands out for its simplicity and effectiveness. The customer support team was also very helpful when I had questions.",
+      date: "March 28, 2023",
+    },
+  ];
+
+  return (
+    <ReviewsComponent
+      title="Customer Reviews"
+      description="See what our customers are saying about our products. We take pride in providing high-quality items and excellent customer service."
+      reviews={sampleReviews}
+      primaryButtonText="Write a Review"
+      secondaryButtonText="See All Reviews"
+      primaryButtonUrl="/write-review"
+      secondaryButtonUrl="/all-reviews"
+      variant="default"
+    />
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Shopping Carts",
+        value: "shopping-carts",
+        path: "/components/catalyst-ui/ecommerce/components/shoppingCarts.tsx",
+        source: null,
+        premium: true,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+// app/components/shopping-cart.tsx
+
+
+
+
+
+export type CartItem = {
+    id: string;
+    name: string;
+    price: number;
+    quantity: number;
+    image: string;
+    description?: string;
+};
+
+export type ShoppingCartProps = {
+    items: CartItem[];
+    title?: string;
+    description?: string;
+    url?: string;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+    className?: string;
+    variant?: "default" | "minimalist" | "sidebar" | "with-image";
+    onUpdateQuantity?: (id: string, quantity: number) => void;
+    onRemoveItem?: (id: string) => void;
+    onContinueShopping?: () => void;
+    onCheckout?: () => void;
+};
+
+// Example usage component
+export function ShoppingCartDemo() {
+    const [cartItems, setCartItems] = useState<CartItem[]>([
+        {
+            id: "1",
+            name: "Basic Tee",
+            price: 32.0,
+            quantity: 1,
+            image: "https://tailwindui.com/img/ecommerce-images/shopping-cart-page-01-product-01.jpg",
+            description: "Sienna",
+        },
+        {
+            id: "2",
+            name: "Basic Bottle",
+            price: 25.0,
+            quantity: 1,
+            image: "https://tailwindui.com/img/ecommerce-images/shopping-cart-page-01-product-02.jpg",
+            description: "Clear",
+        },
+    ]);
+
+    const handleUpdateQuantity = (id: string, quantity: number) => {
+        setCartItems((prevItems) => prevItems.map((item) => (item.id === id ? { ~/components/catalyst-ui.item, quantity } : item)));
+    };
+
+    const handleRemoveItem = (id: string) => {
+        setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
+    };
+
+    return (
+        <ShoppingCart
+            items={cartItems}
+            title="Your Cart"
+            description="Check your items and proceed to checkout"
+            url="/products"
+            primaryButtonText="Checkout"
+            secondaryButtonText="Continue Shopping"
+            variant="default"
+            onUpdateQuantity={handleUpdateQuantity}
+            onRemoveItem={handleRemoveItem}
+        />
+    );
+}
+`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Store Navigation",
+        value: "store-navigation",
+        path: "/components/catalyst-ui/ecommerce/components/storeNavigation.tsx",
+        source: null,
+        premium: true,
+        category: 'E-Commerce: Components',
+        tags: ["components", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/demo/storeNavigation.tsx",
+        desc: null,
+        customize: null
+    },
+];
+export const ecommerceModules = [
+    {
+        name: "Promotion Engine",
+        value: "promotion-engine",
+        path: "/components/catalyst-ui/ecommerce/modules/promotionEngine.ts",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Modules',
+        tags: ["modules", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/modules/promotionEngine.ts",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Promotions Manager",
+        value: "promotions-manager",
+        path: "/components/catalyst-ui/ecommerce/modules/promotionsManager.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Modules',
+        tags: ["modules", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/modules/promotionsManager.tsx",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Cash Till Manager",
+        value: "cash-till-manager",
+        path: "/components/catalyst-ui/ecommerce/modules/cash-till-manager.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Modules',
+        tags: ["modules", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/modules/cash-till-manager.tsx",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Cash Drawer Wizard",
+        value: "cash-drawer-wizard",
+        path: "/components/catalyst-ui/ecommerce/modules/cash-drawer-wizard.tsx",
+        premium: true,
+        source: null,
+        category: 'E-Commerce: Modules',
+        tags: ["modules", "e-commerce"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/ecommerce/modules/cash-drawer-wizard.tsx",
+        desc: null,
+        customize: null
+    },
+];
+export const combinedEcom = [
+    ...ecommerceComponents,
+    ...ecommerceModules,
+];