@catalystsoftware/ui 1.0.5 → 1.0.6

package/data/ecommerce-data.tsx

@@ -1,1387 +0,0 @@
-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,
-];