payaza-storefront-layouts 1.0.0 → 1.0.1

package/README.md

@@ -1,15 +1,23 @@
-# storefront-layouts
+# @payaza/storefront-layouts
 
-Shared layout components package for StoreFront applications.
+A comprehensive package of shared layout components, utilities, and services for StoreFront applications. This package contains all layout components, UI components, hooks, contexts, and utility functions used across Payaza StoreFront applications.
 
 ## Overview
 
-This package contains all layout components used by both `storefront-app` and `storefront-admin`. The layouts are data-agnostic and accept `storeConfig` as props, allowing multiple stores to use the same layout instances with different data.
+This package provides a complete set of reusable layout components that are data-agnostic and accept `storeConfig` as props, allowing multiple stores to use the same layout instances with different data. It includes:
+
+- **9 Layout Types**: Food, Food Modern, Clothing, Clothing Minimal, Booking, Booking Agenda, Electronics, Electronics Grid, and Motivational Speaker
+- **Shared Components**: Base layouts, headers, footers, and common page components
+- **UI Components**: Buttons, modals, toasts, product cards, and more
+- **Learning Components**: Certificate templates, mentorship progress, and certificate viewer
+- **Services**: API services for checkout, payment, shipping, orders, and more
+- **Utilities**: Asset helpers, currency formatting, demo detection, and more
+- **Contexts**: Auth, Store, and Loading contexts
 
 ## Installation
 
 ```bash
-npm install storefront-layouts
+npm install @payaza/storefront-layouts
 ```
 
 Or using npm workspaces:
@@ -17,62 +25,374 @@ Or using npm workspaces:
 ```json
 {
   "dependencies": {
-    "storefront-layouts": "workspace:*"
+    "@payaza/storefront-layouts": "workspace:*"
   }
 }
 ```
 
+## Peer Dependencies
+
+This package requires the following peer dependencies (must be installed in your project):
+
+```json
+{
+  "framer-motion": "^12.0.0",
+  "next": "^16.0.3",
+  "react": "^19.2.0",
+  "react-dom": "^19.2.0"
+}
+```
+
 ## Usage
 
-### In storefront-app
+### Basic Layout Usage
 
 ```typescript
-import { FoodHomePage } from 'storefront-layouts';
+import { FoodHomePage, FoodProductsPage, FoodProductDetailPage } from '@payaza/storefront-layouts';
 
 export default function StorePage({ storeConfig }) {
   return <FoodHomePage storeConfig={storeConfig} />;
 }
 ```
 
-### In storefront-admin
+### Using Layout-Specific Pages
+
+```typescript
+import {
+  FoodProductsPage,
+  FoodProductDetailPage,
+  FoodCategoryPage,
+  FoodCategoriesPage,
+  FoodMenuPage,
+  FoodAboutPage,
+  FoodContactPage
+} from '@payaza/storefront-layouts';
+
+// Use layout-specific pages
+<FoodProductsPage storeConfig={storeConfig} />
+<FoodProductDetailPage storeConfig={storeConfig} productId="123" />
+```
+
+### Using Shared Components
+
+```typescript
+import {
+  BaseStoreLayout,
+  GenericPageWrapper,
+  StoreHeader,
+  StoreFooter,
+  AccountPage,
+  CartPage,
+  CheckoutPage
+} from '@payaza/storefront-layouts';
+
+<BaseStoreLayout storeConfig={storeConfig}>
+  {/* Your content */}
+</BaseStoreLayout>
+```
+
+### Using Learning Components
+
+```typescript
+import {
+  CertificateCard,
+  CertificateViewer,
+  MentorshipProgress
+} from '@payaza/storefront-layouts';
+
+<CertificateCard 
+  certificate={certificateData} 
+  onDownload={(id) => console.log('Download', id)} 
+/>
+```
+
+### Using Utilities
+
+```typescript
+import {
+  formatCurrency,
+  filterActiveServices,
+  getBannerImage,
+  getServiceImage,
+  getThemeColor,
+  isDemoStore,
+  shouldUseAPI
+} from '@payaza/storefront-layouts';
+
+const price = formatCurrency(1000, 'NGN'); // "₦1,000.00"
+const activeServices = filterActiveServices(services);
+const bannerUrl = getBannerImage(storeConfig);
+```
+
+### Using JSON Layout Data
 
 ```typescript
-import { getLayoutJSON } from 'storefront-layouts';
+import { getLayoutJSON, layoutJSONMap } from '@payaza/storefront-layouts/json';
 
 const layoutData = getLayoutJSON('food');
+// or
+const layoutData = layoutJSONMap.get('food');
 ```
 
 ## Available Layouts
 
-- `food` - Food/Restaurant layout
-- `food-modern` - Modern food layout
-- `clothing` - Clothing/Fashion layout
-- `clothing-minimal` - Minimal clothing layout
-- `booking` - Booking/Service layout
-- `booking-agenda` - Agenda-based booking layout
-- `electronics` - Electronics layout
-- `electronics-grid` - Grid-based electronics layout
-- `motivational-speaker` - Motivational speaker layout
-- `shared` - Shared components used across layouts
+### Food Layouts
+- `FoodHomePage` - Main homepage component
+- `FoodProductsPage` - Products listing page
+- `FoodProductDetailPage` - Product detail page
+- `FoodCategoryPage` - Category detail page
+- `FoodCategoriesPage` - Categories listing page
+- `FoodMenuPage` - Menu page
+- `FoodAboutPage` - About page
+- `FoodContactPage` - Contact page
+
+### Food Modern Layouts
+- `FoodHomePageModern` - Modern food homepage
+- `FoodModernProductsPage` - Modern products page
+- `FoodModernProductDetailPage` - Modern product detail
+- `FoodModernCategoryPage` - Modern category page
+- `FoodModernCategoriesPage` - Modern categories page
+- `FoodModernMenuPage` - Modern menu page
+- `FoodModernAboutPage` - Modern about page
+- `FoodModernContactPage` - Modern contact page
+
+### Clothing Layouts
+- `ClothingHomePage` - Clothing homepage
+- `ClothingProductsPage` - Products page
+- `ClothingProductDetailPage` - Product detail
+- `ClothingCategoryPage` - Category page
+- `ClothingCategoriesPage` - Categories page
+- `ClothingAboutPage` - About page
+- `ClothingContactPage` - Contact page
+
+### Clothing Minimal Layouts
+- `ClothingHomePageMinimal` - Minimal clothing homepage
+- `ClothingMinimalProductsPage` - Minimal products page
+- `ClothingMinimalProductDetailPage` - Minimal product detail
+- `ClothingMinimalCategoryPage` - Minimal category page
+- `ClothingMinimalCategoriesPage` - Minimal categories page
+- `ClothingMinimalAboutPage` - Minimal about page
+- `ClothingMinimalContactPage` - Minimal contact page
+
+### Booking Layouts
+- `BookingHomePage` - Booking homepage
+- `BookingBookPage` - Book appointment page
+- `BookingServicesPage` - Services listing page
+- `BookingProductDetailPage` - Service detail page
+- `BookingCategoryPage` - Category page
+- `BookingCategoriesPage` - Categories page
+- `BookingAboutPage` - About page
+- `BookingContactPage` - Contact page
+
+### Booking Agenda Layouts
+- `BookingHomePageAgenda` - Agenda-based booking homepage
+- `BookingAgendaBookPage` - Agenda book page
+- `BookingAgendaServicesPage` - Agenda services page
+- `BookingAgendaProductDetailPage` - Agenda service detail
+- `BookingAgendaCategoryPage` - Agenda category page
+- `BookingAgendaCategoriesPage` - Agenda categories page
+- `BookingAgendaAboutPage` - Agenda about page
+- `BookingAgendaContactPage` - Agenda contact page
+
+### Electronics Layouts
+- `ElectronicsHomePage` - Electronics homepage
+- `ElectronicsProductsPage` - Products page
+- `ElectronicsProductDetailPage` - Product detail
+- `ElectronicsCategoryPage` - Category page
+- `ElectronicsCategoriesPage` - Categories page
+- `ElectronicsAboutPage` - About page
+- `ElectronicsContactPage` - Contact page
+- `ElectronicsHelpCenterPage` - Help center page
+- `ElectronicsPrivacyPolicyPage` - Privacy policy page
+- `ElectronicsShippingReturnsPage` - Shipping & returns page
+- `ElectronicsTermsPage` - Terms page
+- `ElectronicsTrackOrderPage` - Track order page
+- `ElectronicsPageWrapper` - Page wrapper component
+- `ElectronicsStoreHeader` - Store header
+- `ElectronicsStoreFooter` - Store footer
+
+### Electronics Grid Layouts
+- `ElectronicsHomePageGrid` - Grid-based electronics homepage
+- `ElectronicsGridProductsPage` - Grid products page
+- `ElectronicsGridProductDetailPage` - Grid product detail
+- `ElectronicsGridCategoryPage` - Grid category page
+- `ElectronicsGridCategoriesPage` - Grid categories page
+- `ElectronicsGridAboutPage` - Grid about page
+- `ElectronicsGridContactPage` - Grid contact page
+- `ElectronicsGridHelpCenterPage` - Grid help center page
+- `ElectronicsGridPrivacyPolicyPage` - Grid privacy policy page
+- `ElectronicsGridShippingReturnsPage` - Grid shipping & returns page
+- `ElectronicsGridTermsPage` - Grid terms page
+- `ElectronicsGridTrackOrderPage` - Grid track order page
+
+### Motivational Speaker Layouts
+- `MotivationalHomePage` - Motivational speaker homepage
+- `MotivationalProductsPage` - Products page
+- `MotivationalCategoryPage` - Category page
+- `MotivationalServicesPage` - Services page
+- `MotivationalServiceDetailPage` - Service detail page
+- `MotivationalSubscriptionPage` - Subscription page
+- `MotivationalAboutPage` - About page
+- `MotivationalContactPage` - Contact page
+- `MotivationalPageWrapper` - Page wrapper component
+
+### Shared Components
+- `BaseStoreLayout` - Base layout wrapper for all stores
+- `GenericPageWrapper` - Generic page wrapper
+- `StoreHeader` - Store header component
+- `StoreFooter` - Store footer component
+- `PromoBanner` - Promotional banner component
+- `TestimonialCard` - Testimonial card component
+
+### Shared Pages
+- `AccountPage` - User account page with tabs (Profile, Orders, Bookings, Wishlist, Learning)
+- `CartPage` - Shopping cart page
+- `CheckoutPage` - Checkout page
+- `WishlistPage` - Wishlist page
+- `TeamPage` - Team members page
+- `PortfolioPage` - Portfolio page
+- `HelpCenterPage` - Help center page
+- `ShippingReturnsPage` - Shipping & returns page
+- `PrivacyPolicyPage` - Privacy policy page
+- `TermsPage` - Terms of service page
+- `CookiePolicyPage` - Cookie policy page
+- `SizeGuidePage` - Size guide page
+- `StyleGuidePage` - Style guide page
+- `TrackOrderPage` - Track order page
+- `MaintenancePage` - Maintenance mode page
+- `FeatureDisabledPage` - Feature disabled page
+
+### Learning Components
+- `CertificateCard` - Certificate card component
+- `CertificateViewer` - Certificate viewer component
+- `MentorshipProgress` - Mentorship progress component
+
+## Utilities
+
+### Asset Helpers
+```typescript
+import {
+  getBannerImage,
+  getServiceImage,
+  getTeamMemberImage,
+  getTextContent,
+  getLayoutText,
+  getThemeColor,
+  getLogoUrl
+} from '@payaza/storefront-layouts';
+```
+
+### Currency & Formatting
+```typescript
+import {
+  formatCurrency,
+  normalizePrice,
+  getCurrencySymbol,
+  getCurrencySymbolInfo
+} from '@payaza/storefront-layouts';
+```
+
+### Demo Detection
+```typescript
+import {
+  isDemoStore,
+  shouldUseAPI,
+  getBaseStoreSlug
+} from '@payaza/storefront-layouts';
+```
+
+### Filtering
+```typescript
+import {
+  filterActiveProducts,
+  filterActiveServices
+} from '@payaza/storefront-layouts';
+```
+
+### Store Configuration
+```typescript
+import {
+  getStoreConfigAsync,
+  transformProductToStoreProduct,
+  extractImageUrls
+} from '@payaza/storefront-layouts';
+```
+
+## Services
+
+The package includes service stubs for:
+- `checkoutService` - Checkout operations
+- `paymentService` - Payment processing
+- `shippingService` - Shipping operations
+- `orderService` - Order management
+- `wishlistService` - Wishlist operations
+- `customerService` - Customer management
+- `bookingService` - Booking operations
+- `cartService` - Cart operations
+- `productService` - Product operations
+- `categoryService` - Category operations
+- `reviewService` - Review operations
+- `analyticsService` - Analytics tracking
+
+## Contexts
+
+### Auth Context
+```typescript
+import { AuthProvider, useAuth } from '@payaza/storefront-layouts';
+
+<AuthProvider>
+  <YourApp />
+</AuthProvider>
+
+// In components
+const { user, isAuthenticated, login, logout } = useAuth();
+```
+
+### Store Context
+```typescript
+import { StoreProvider, useStore } from '@payaza/storefront-layouts';
 
-## Dependencies
+const { storeConfig, updateStoreConfig } = useStore();
+```
 
-This package requires the following peer dependencies (provided by consuming apps):
+### Loading Context
+```typescript
+import { LoadingProvider, useLoading } from '@payaza/storefront-layouts';
 
-- `react` ^19.2.0
-- `react-dom` ^19.2.0
-- `next` ^16.0.3
+const { startBackendLoading, stopBackendLoading } = useLoading();
+```
+
+## Hooks
+
+### Payaza Checkout Hook
+```typescript
+import { usePayazaCheckout } from '@payaza/storefront-layouts';
+
+const { checkout, isLoading } = usePayazaCheckout({
+  publicKey: 'your-public-key',
+  onSuccess: () => console.log('Success'),
+  onError: (error) => console.error(error)
+});
+```
+
+### Analytics Hook
+```typescript
+import { useAnalytics } from '@payaza/storefront-layouts';
+
+const { trackEvent, trackPageView } = useAnalytics();
+```
 
 ## TypeScript Configuration
 
-Consuming apps need to configure TypeScript paths to resolve imports:
+Consuming apps need to configure TypeScript paths. The package uses relative imports internally, so no special path configuration is required for the package itself.
+
+For your app's internal `@/` aliases:
 
 ```json
 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./*"],
-      "storefront-layouts": ["../storefront-layouts/src"]
+      "@/*": ["./*"]
     }
   }
 }
@@ -84,10 +404,36 @@ Add to `next.config.ts`:
 
 ```typescript
 const nextConfig = {
-  transpilePackages: ['storefront-layouts'],
+  transpilePackages: ['@payaza/storefront-layouts'],
 };
 ```
 
+## Building
+
+```bash
+npm run build
+```
+
+This will:
+1. Clean the `dist/` directory
+2. Compile TypeScript to JavaScript
+3. Transform path aliases using `tsc-alias`
+4. Copy JSON files to the dist directory
+
+## Package Structure
+
+```
+@payaza/storefront-layouts/
+├── dist/                    # Compiled output
+│   ├── layouts/             # Layout components
+│   ├── components/          # UI components
+│   ├── lib/                 # Utilities, services, contexts
+│   ├── hooks/               # Custom hooks
+│   └── json/                # Layout JSON data
+├── src/                     # Source files
+└── package.json
+```
+
 ## Dynamic Data Support
 
 Layouts are designed to work with dynamic data:
@@ -96,13 +442,29 @@ Layouts are designed to work with dynamic data:
 - Layouts use hooks like `useStore()` from consuming apps
 - No hardcoded data - all data comes from consuming apps
 - Supports `preview_layout` query parameter for layout preview
+- Demo store detection for mock data vs API data
 
-## Building
+## Features
 
-```bash
-npm run build
-```
+- ✅ **9 Complete Layout Types** - Food, Clothing, Booking, Electronics, and more
+- ✅ **Shared Components** - Reusable components across all layouts
+- ✅ **Learning Components** - Certificate and mentorship features
+- ✅ **TypeScript Support** - Full type definitions included
+- ✅ **Utility Functions** - Currency formatting, asset helpers, filtering
+- ✅ **Service Stubs** - Ready-to-use service interfaces
+- ✅ **Context Providers** - Auth, Store, and Loading contexts
+- ✅ **Custom Hooks** - Payaza checkout, analytics, and more
+- ✅ **Responsive Design** - All components are mobile-responsive
+- ✅ **Accessibility** - ARIA labels and keyboard navigation support
+
+## Version
+
+Current version: **1.0.0**
+
+## License
 
-This compiles TypeScript to JavaScript in the `dist/` directory.
+ISC
 
+## Support
 
+For issues, questions, or contributions, please contact the Payaza development team.

package/dist/layouts/booking/components/BookingHomePage.js

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { formatCurrency, filterActiveServices } from '../../../lib/utils';
 import { getBannerImage, getServiceImage, getTeamMemberImage, getTextContent, getFeaturesList, getLayoutText } from '../../../lib/utils/asset-helpers';
-import { TestimonialCard } from '../../../layouts/shared/components/TestimonialCard';
+import { TestimonialCard } from '../../shared/components/TestimonialCard';
 export function BookingHomePage({ storeConfig }) {
     const services = filterActiveServices(storeConfig.services || []);
     const primaryColor = storeConfig.branding.primaryColor;

package/dist/layouts/booking-agenda/components/BookingHomePageAgenda.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookingHomePageAgenda.d.ts","sourceRoot":"","sources":["../../../../src/layouts/booking-agenda/components/BookingHomePageAgenda.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAehD,UAAU,0BAA0B;IAClC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,EAAE,WAAW,EAAE,EAAE,0BAA0B,2CA6oBhF"}
+{"version":3,"file":"BookingHomePageAgenda.d.ts","sourceRoot":"","sources":["../../../../src/layouts/booking-agenda/components/BookingHomePageAgenda.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAehD,UAAU,0BAA0B;IACjC,WAAW,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,qBAAqB,CAAC,EAAE,WAAW,EAAE,EAAE,0BAA0B,2CA4oBhF"}

package/dist/layouts/booking-agenda/components/BookingHomePageAgenda.js

@@ -12,7 +12,7 @@ import { formatCurrency, filterActiveServices } from '../../../lib/utils';
 import { useAuth } from '../../../lib/auth-context';
 import { getBannerImage, getServiceImage, getTeamMemberImage, getTextContent, getLayoutText, getThemeColor } from '../../../lib/utils/asset-helpers';
 import { isDemoStore, shouldUseAPI } from '../../../lib/utils/demo-detection';
-import { TestimonialCard } from '../../../layouts/shared/components/TestimonialCard';
+import { TestimonialCard } from '../../shared/components/TestimonialCard';
 export function BookingHomePageAgenda({ storeConfig }) {
     const layoutConfig = storeConfig.layoutConfig;
     const categories = storeConfig.categories || [];

package/dist/layouts/clothing/components/ClothingHomePage.js

@@ -10,7 +10,7 @@ import { useState, useEffect } from 'react';
 import { formatCurrency, filterActiveProducts } from '../../../lib/utils';
 import { getLayoutText, getBannerImage } from '../../../lib/utils/asset-helpers';
 import { shouldUseAPI } from '../../../lib/utils/demo-detection';
-import { PromoBanner } from '../../../layouts/shared/components/PromoBanner';
+import { PromoBanner } from '../../shared/components/PromoBanner';
 export function ClothingHomePage({ storeConfig }) {
     const layoutConfig = storeConfig.layoutConfig;
     const categories = storeConfig.categories || [];

package/dist/layouts/clothing-minimal/components/ClothingHomePageMinimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClothingHomePageMinimal.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/components/ClothingHomePageMinimal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAe9D,UAAU,4BAA4B;IACpC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,EAAE,WAAW,EAAE,EAAE,4BAA4B,2CAobpF"}
+{"version":3,"file":"ClothingHomePageMinimal.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/components/ClothingHomePageMinimal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAe9D,UAAU,4BAA4B;IACnC,WAAW,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,uBAAuB,CAAC,EAAE,WAAW,EAAE,EAAE,4BAA4B,2CAobpF"}

package/dist/layouts/clothing-minimal/components/ClothingHomePageMinimal.js

@@ -12,7 +12,7 @@ import { useState, useEffect } from 'react';
 import { formatCurrency, filterActiveProducts } from '../../../lib/utils';
 import { getLayoutText, getBannerImage, getTextContent, getLogoUrl } from '../../../lib/utils/asset-helpers';
 import { StoreLogo } from '../../../components/ui/store-logos';
-import { PromoBanner } from '../../../layouts/shared/components/PromoBanner';
+import { PromoBanner } from '../../shared/components/PromoBanner';
 export function ClothingHomePageMinimal({ storeConfig }) {
     const layoutConfig = storeConfig.layoutConfig;
     const categories = storeConfig.categories || [];

package/dist/layouts/electronics/components/ElectronicsHomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElectronicsHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAe9D,UAAU,wBAAwB;IAChC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,EAAE,wBAAwB,2CAiZ5E"}
+{"version":3,"file":"ElectronicsHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAe9D,UAAU,wBAAwB;IAC/B,WAAW,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,EAAE,wBAAwB,2CAiZ5E"}

package/dist/layouts/electronics/components/ElectronicsHomePage.js

@@ -12,7 +12,7 @@ import { useStore } from '../../../lib/store-context';
 import { useToast } from '../../../components/ui/toast';
 import { formatCurrency, filterActiveProducts } from '../../../lib/utils';
 import { getLayoutText } from '../../../lib/utils/asset-helpers';
-import { PromoBanner } from '../../../layouts/shared/components/PromoBanner';
+import { PromoBanner } from '../../shared/components/PromoBanner';
 export function ElectronicsHomePage({ storeConfig }) {
     const { addToCart } = useStore();
     const { addToast } = useToast();

package/dist/layouts/electronics-grid/components/ElectronicsHomePageGrid.js

@@ -14,7 +14,7 @@ import { useState } from 'react';
 import { formatCurrency, cn, filterActiveProducts } from '../../../lib/utils';
 import { getLayoutText, getBannerImage, getLogoUrl } from '../../../lib/utils/asset-helpers';
 import { StoreLogo } from '../../../components/ui/store-logos';
-import { PromoBanner } from '../../../layouts/shared/components/PromoBanner';
+import { PromoBanner } from '../../shared/components/PromoBanner';
 import { ElectronicsGridProductCard } from './ElectronicsGridProductCard';
 const ElectronicsFilterContent = ({ categories, storeSlug }) => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "bg-white border-b border-gray-100 overflow-hidden", children: [_jsxs("div", { className: "bg-white px-4 py-3 border-b border-gray-100 font-normal text-sm text-gray-900 flex justify-between items-center", children: ["Browse by ", _jsx(ChevronDown, { className: "h-4 w-4 text-gray-400" })] }), _jsx("div", { className: "py-2", children: _jsx(CategoryTree, { categories: categories, mode: "link", storeSlug: storeSlug, linkBasePath: "" }) })] }), _jsxs("div", { className: "bg-white p-6 space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400", defaultChecked: true }), "In Stock"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors mt-2", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400" }), "On Sale"] })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Price" }), _jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-2 top-1.5 text-gray-400 text-xs", children: "$" }), _jsx("input", { type: "number", className: "w-full pl-5 pr-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400", placeholder: "Min" })] }), _jsx("span", { className: "text-gray-400", children: "-" }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-2 top-1.5 text-gray-400 text-xs", children: "$" }), _jsx("input", { type: "number", className: "w-full pl-5 pr-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400", placeholder: "Max" })] })] }), _jsx(Button, { size: "sm", variant: "outline", className: "w-full text-xs font-normal border-gray-300 text-gray-700 hover:bg-gray-50", children: "Apply Price" })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Brands" }), _jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200", children: ['Apple'].map(brand => (_jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400", defaultChecked: true }), brand] }, brand))) })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Rating" }), [4, 3, 2].map(stars => (_jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors mb-1.5", children: [_jsx("input", { type: "radio", name: "rating", className: "border-gray-300 text-gray-900 focus:ring-gray-400" }), _jsx("div", { className: "flex text-yellow-400", children: [...Array(5)].map((_, i) => (_jsx(Star, { className: `h-3 w-3 ${i < stars ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-xs", children: "& Up" })] }, stars)))] })] })] }));
 export function ElectronicsHomePageGrid({ storeConfig }) {

package/dist/layouts/electronics-grid/pages/CategoriesPage.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ElectronicsGridCategoriesPage } from '../../../layouts/electronics-grid/pages/ElectronicsGridCategoriesPage';
+import { ElectronicsGridCategoriesPage } from './ElectronicsGridCategoriesPage';
 export function CategoriesPage({ storeConfig }) {
     return _jsx(ElectronicsGridCategoriesPage, { storeConfig: storeConfig });
 }

package/dist/layouts/food/components/FoodHomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FoodHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food/components/FoodHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAc/D,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,EAAE,iBAAiB,2CA49B9D"}
+{"version":3,"file":"FoodHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food/components/FoodHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAc/D,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,EAAE,iBAAiB,2CAw9B9D"}

package/dist/layouts/food/components/FoodHomePage.js

@@ -10,8 +10,8 @@ import { useState, useEffect } from 'react';
 import { formatCurrency } from '../../../lib/utils';
 import { getLayoutText, getBannerImage, getTextContent } from '../../../lib/utils/asset-helpers';
 import { shouldUseAPI } from '../../../lib/utils/demo-detection';
-import { TestimonialCard } from '../../../layouts/shared/components/TestimonialCard';
-import { PromoBanner } from '../../../layouts/shared/components/PromoBanner';
+import { TestimonialCard } from '../../shared/components/TestimonialCard';
+import { PromoBanner } from '../../shared/components/PromoBanner';
 export function FoodHomePage({ storeConfig }) {
     const categories = storeConfig.categories || [];
     const menuItems = storeConfig.menuItems || [];

package/dist/layouts/food-modern/components/FoodHomePageModern.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FoodHomePageModern.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/components/FoodHomePageModern.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAgB9D,UAAU,uBAAuB;IAC/B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,WAAW,EAAE,EAAE,uBAAuB,2CAgoB1E"}
+{"version":3,"file":"FoodHomePageModern.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/components/FoodHomePageModern.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAgB9D,UAAU,uBAAuB;IAC9B,WAAW,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,WAAW,EAAE,EAAE,uBAAuB,2CAgoB1E"}

package/dist/layouts/food-modern/components/FoodHomePageModern.js

@@ -13,7 +13,7 @@ import { getLayoutText, getBannerImage, getLogoUrl, getAssetUrl } from '../../..
 import { StoreLogo } from '../../../components/ui/store-logos';
 import { shouldUseAPI } from '../../../lib/utils/demo-detection';
 import { VideoPlayer } from '../../../components/ui/video-player';
-import { PromoBanner } from '../../../layouts/shared/components/PromoBanner';
+import { PromoBanner } from '../../shared/components/PromoBanner';
 export function FoodHomePageModern({ storeConfig }) {
     const categories = storeConfig.categories || [];
     const menuItems = storeConfig.menuItems || [];

package/dist/layouts/motivational-speaker/components/MotivationalHomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MotivationalHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/components/MotivationalHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWhD,UAAU,yBAAyB;IAC/B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,WAAW,EAAE,EAAE,yBAAyB,2CA4mB9E"}
+{"version":3,"file":"MotivationalHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/components/MotivationalHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWhD,UAAU,yBAAyB;IAC/B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,WAAW,EAAE,EAAE,yBAAyB,2CA2mB9E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payaza-storefront-layouts",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Shared layout components for StoreFront applications",
   "main": "dist/index.js",
   "module": "dist/index.js",