storefront-layouts-staging 1.0.0-staging.0

package/README.md

@@ -0,0 +1,539 @@
+# @payaza/storefront-layouts
+
+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 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 @payaza/storefront-layouts
+```
+
+Or using npm workspaces:
+
+```json
+{
+  "dependencies": {
+    "@payaza/storefront-layouts": "workspace:*"
+  }
+}
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies (must be installed in your project):
+
+```json
+{
+  "@tailwindcss/postcss": "^4.0.0",
+  "framer-motion": "^12.0.0",
+  "next": "^16.0.3",
+  "postcss": "^8.0.0",
+  "react": "^19.2.0",
+  "react-dom": "^19.2.0",
+  "tailwindcss": "^4.0.0"
+}
+```
+
+## CSS Setup
+
+This package includes a complete CSS file with Tailwind CSS v4, custom utilities, and styles. To use the layouts, you need to:
+
+### 1. Install Peer Dependencies
+
+```bash
+npm install tailwindcss@^4.0.0 @tailwindcss/postcss@^4.0.0 postcss@^8.0.0
+```
+
+### 2. Configure PostCSS
+
+Create or update `postcss.config.mjs` in your project root:
+
+```javascript
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
+```
+
+### 3. CSS is Automatically Imported
+
+**No separate CSS import needed!** The styles are automatically imported when you import any component from the package:
+
+```typescript
+import { FoodHomePage } from '@payaza/storefront-layouts';
+// Styles are automatically loaded - no additional import needed
+```
+
+If you need to import styles separately (e.g., in a CSS file), you can still use:
+
+```css
+@import "@payaza/storefront-layouts/styles";
+```
+
+### 4. Configure Tailwind Content Paths
+
+If you're using a traditional Tailwind config, ensure it scans the package files:
+
+```typescript
+// tailwind.config.ts
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './node_modules/@payaza/storefront-layouts/dist/**/*.{js,jsx}',
+  ],
+  // ... rest of config
+};
+
+export default config;
+```
+
+**Note**: With Tailwind CSS v4, you typically don't need a `tailwind.config.ts` file. The `@import "tailwindcss"` directive in the CSS file handles everything automatically.
+
+### Alternative: Use Your Own Tailwind Setup
+
+If you prefer to use your own Tailwind configuration, you can:
+
+1. Skip importing the package CSS file
+2. Configure Tailwind to scan the package files as shown above
+3. Ensure you have the required custom utilities and CSS variables in your own CSS
+
+The package CSS includes:
+- Tailwind CSS v4 base styles
+- `tw-animate-css` animations
+- Custom utility classes (glassmorphism, animations, scroll utilities)
+- Custom NProgress styles
+- CSS variables for theming
+
+## Usage
+
+### Basic Layout Usage
+
+```typescript
+import { FoodHomePage, FoodProductsPage, FoodProductDetailPage } from '@payaza/storefront-layouts';
+
+export default function StorePage({ storeConfig }) {
+  return <FoodHomePage storeConfig={storeConfig} />;
+}
+```
+
+### 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, layoutJSONMap } from '@payaza/storefront-layouts/json';
+
+const layoutData = getLayoutJSON('food');
+// or
+const layoutData = layoutJSONMap.get('food');
+```
+
+## Available 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';
+
+const { storeConfig, updateStoreConfig } = useStore();
+```
+
+### Loading Context
+```typescript
+import { LoadingProvider, useLoading } from '@payaza/storefront-layouts';
+
+const { startBackendLoading, stopBackendLoading } = useLoading();
+```
+
+## Hooks
+
+### Analytics Hook
+```typescript
+import { useAnalytics } from '@payaza/storefront-layouts';
+
+const { trackEvent, trackPageView } = useAnalytics();
+```
+
+## TypeScript Configuration
+
+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": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
+
+## Next.js Configuration
+
+Add to `next.config.ts`:
+
+```typescript
+const nextConfig = {
+  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:
+
+- All layout components accept `storeConfig: StoreConfig` as props
+- 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
+
+## Features
+
+- ✅ **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** - Analytics and more
+- ✅ **Responsive Design** - All components are mobile-responsive
+- ✅ **Accessibility** - ARIA labels and keyboard navigation support
+
+## Version
+
+Current version: **1.0.0**
+
+## License
+
+ISC
+
+## Support
+
+For issues, questions, or contributions, please contact the Payaza development team.

package/dist/components/auth/LoginForm.d.ts

@@ -0,0 +1,9 @@
+export interface LoginFormProps {
+    callbackUrl?: string;
+    variant?: 'page' | 'sheet';
+    onSuccess?: () => void;
+    className?: string;
+}
+/** Full-page auth login only. Store sheets use BespokeStoreLoginSheet + LoginFormCore. */
+export declare function LoginForm({ callbackUrl, variant, onSuccess, className, }: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoginForm.d.ts.map

package/dist/components/auth/LoginForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginForm.d.ts","sourceRoot":"","sources":["../../../src/components/auth/LoginForm.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,EACxB,WAAiB,EACjB,OAAgB,EAChB,SAAS,EACT,SAAS,GACV,EAAE,cAAc,2CAsIhB"}

package/dist/components/auth/LoginForm.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from 'next/link';
+import { Eye, EyeOff, Loader2, ArrowRight } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { useLoginSubmit } from './use-login-submit.js';
+import { cn } from '../../lib/utils/index.js';
+/** Full-page auth login only. Store sheets use BespokeStoreLoginSheet + LoginFormCore. */
+export function LoginForm({ callbackUrl = '/', variant = 'page', onSuccess, className, }) {
+    const { email, setEmail, password, setPassword, showPassword, setShowPassword, emailError, setEmailError, isLoading, handleSubmit, signupHref, resetHref, } = useLoginSubmit({ callbackUrl, variant: 'page', onSuccess });
+    if (variant === 'sheet') {
+        return null;
+    }
+    return (_jsxs(motion.div, { initial: { opacity: 0, x: 20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.6 }, className: cn('w-full', className), children: [_jsxs("div", { className: "mb-6 text-center lg:text-left", children: [_jsx("h1", { id: "login-form-title", className: "text-3xl md:text-4xl font-display font-bold text-[#1b0029] tracking-tight mb-2", children: "Welcome back" }), _jsx("p", { className: "text-brand-text-muted text-base font-medium", children: "Enter your details to access your account." })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4.5", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-xs font-bold text-[#1b0029] ml-1", htmlFor: "login-email-page", children: "Email Address" }), _jsx("input", { id: "login-email-page", type: "email", value: email, onChange: (e) => {
+                                    setEmail(e.target.value);
+                                    if (emailError)
+                                        setEmailError('');
+                                }, placeholder: "hello@example.com", autoComplete: "email", className: cn('w-full h-12.5 bg-white border rounded-xl px-4 text-base text-[#1b0029] placeholder:text-brand-text-muted focus:outline-none focus:ring-2 focus:ring-offset-0 transition-all', emailError
+                                    ? 'border-brand-error focus:ring-brand-error/20'
+                                    : 'border-brand-border focus:ring-brand-terracotta/20 focus:border-brand-terracotta/70 focus:shadow-[0_0_0_3px_rgba(68,0,102,0.08)]'), required: true }), emailError && (_jsx("p", { className: "text-brand-error text-[10px] font-bold mt-0.5 ml-1", children: emailError }))] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between ml-1", children: [_jsx("label", { className: "text-xs font-bold text-[#1b0029]", htmlFor: "login-password-page", children: "Password" }), _jsx(Link, { href: resetHref, className: "text-xs font-bold text-brand-navy hover:underline underline-offset-4", children: "Forgot password?" })] }), _jsxs("div", { className: "relative", children: [_jsx("input", { id: "login-password-page", type: showPassword ? 'text' : 'password', value: password, onChange: (e) => setPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "current-password", className: "w-full h-12.5 bg-white border border-brand-border rounded-xl pl-4 pr-12 text-base text-[#1b0029] placeholder:text-brand-text-muted focus:outline-none focus:ring-2 focus:ring-brand-terracotta/20 focus:border-brand-terracotta/70 focus:shadow-[0_0_0_3px_rgba(68,0,102,0.08)] transition-all", required: true }), _jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "absolute right-4 top-1/2 -translate-y-1/2 text-brand-text-muted hover:text-[#1b0029] transition-colors p-1", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? _jsx(EyeOff, { className: "w-4 h-4" }) : _jsx(Eye, { className: "w-4 h-4" }) })] })] }), _jsx("p", { className: "text-[11px] text-brand-text-muted -mt-0.5 ml-1", children: "Use the email you registered with." }), _jsx("button", { type: "submit", disabled: isLoading, className: "mt-2 w-full bg-[#1b0029] text-white rounded-xl py-3.5 text-sm font-bold hover:bg-[#220033] hover:shadow-lg hover:shadow-[#1b0029]/20 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center gap-3 group", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), "Signing In..."] })) : (_jsxs(_Fragment, { children: ["Sign In", _jsx(ArrowRight, { className: "w-5 h-5 text-[#85E327] stroke-[3] group-hover:translate-x-1 transition-transform" })] })) })] }), _jsxs("p", { className: "mt-8 text-center text-sm text-brand-text-muted font-medium", children: ["Don't have an account?", ' ', _jsx(Link, { href: signupHref, className: "font-bold text-[#1b0029] hover:text-brand-terracotta transition-colors ml-1", children: "Sign up" })] })] }));
+}

package/dist/components/auth/LoginSheet.d.ts

@@ -0,0 +1,7 @@
+import type { StoreConfig } from '../../lib/store-types';
+interface LoginSheetProps {
+    storeConfig: StoreConfig;
+}
+export declare function LoginSheet({ storeConfig }: LoginSheetProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LoginSheet.d.ts.map

package/dist/components/auth/LoginSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginSheet.d.ts","sourceRoot":"","sources":["../../../src/components/auth/LoginSheet.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,UAAU,eAAe;IACvB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,EAAE,WAAW,EAAE,EAAE,eAAe,2CAY1D"}

package/dist/components/auth/LoginSheet.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from '../../lib/auth-context.js';
+import { BespokeStoreLoginSheet } from './login-sheet-registry.js';
+export function LoginSheet({ storeConfig }) {
+    const { isLoginOpen, loginCallbackUrl, loginOnSuccess, closeLogin } = useAuth();
+    return (_jsx(BespokeStoreLoginSheet, { storeConfig: storeConfig, isOpen: isLoginOpen, onClose: closeLogin, callbackUrl: loginCallbackUrl, onSuccess: loginOnSuccess }));
+}

package/dist/components/auth/login-form-core.d.ts

@@ -0,0 +1,11 @@
+import type { StoreConfig } from '../../lib/store-types';
+import type { LoginSheetTheme } from './login-sheet-theme.types';
+export interface LoginFormCoreProps {
+    storeConfig: StoreConfig;
+    theme: LoginSheetTheme;
+    callbackUrl?: string;
+    onSuccess?: () => void;
+    emailInputRef?: React.RefObject<HTMLInputElement | null>;
+}
+export declare function LoginFormCore({ storeConfig, theme, callbackUrl, onSuccess, emailInputRef, }: LoginFormCoreProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=login-form-core.d.ts.map

package/dist/components/auth/login-form-core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-form-core.d.ts","sourceRoot":"","sources":["../../../src/components/auth/login-form-core.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAKjE,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAW,EACX,KAAK,EACL,WAAiB,EACjB,SAAS,EACT,aAAa,GACd,EAAE,kBAAkB,2CA8HpB"}

package/dist/components/auth/login-form-core.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from 'next/link';
+import { Eye, EyeOff, Loader2, ArrowRight } from 'lucide-react';
+import { useLoginSubmit } from './use-login-submit.js';
+import { cn } from '../../lib/utils/index.js';
+import { loginSheetButtonTouch } from './login-sheet-themes/theme-input-baselines.js';
+export function LoginFormCore({ storeConfig, theme, callbackUrl = '/', onSuccess, emailInputRef, }) {
+    const { email, setEmail, password, setPassword, showPassword, setShowPassword, emailError, setEmailError, isLoading, isSheet, closeLogin, handleSubmit, signupHref, resetHref, } = useLoginSubmit({ callbackUrl, variant: 'sheet', onSuccess });
+    const primaryColor = storeConfig.branding.primaryColor || '#1b0029';
+    const isLightPanel = (theme.panelMode ?? 'light') === 'light';
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3.5 sm:gap-4 pb-1", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: cn('ml-0.5', theme.labelClassName), htmlFor: "login-email", children: "Email" }), _jsx("div", { className: "overflow-visible py-px", children: _jsx("input", { ref: emailInputRef, id: "login-email", type: "email", value: email, onChange: (e) => {
+                                setEmail(e.target.value);
+                                if (emailError)
+                                    setEmailError('');
+                            }, placeholder: "you@example.com", autoComplete: "email", className: cn(theme.inputClassName, emailError && theme.inputErrorBorderClassName), required: true }) }), emailError ? (_jsx("p", { className: "text-[10px] font-bold mt-0.5 ml-0.5 text-red-500", children: emailError })) : null] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1 ml-0.5", children: [_jsx("label", { className: cn('shrink-0', theme.labelClassName), htmlFor: "login-password", children: "Password" }), _jsx(Link, { href: resetHref, className: cn(theme.linkClassName, 'shrink-0 touch-manipulation py-1 -my-1', isLightPanel && 'system-dark:text-[#440066]'), onClick: () => isSheet && closeLogin?.(), children: "Forgot password?" })] }), _jsxs("div", { className: "relative overflow-visible py-px", children: [_jsx("input", { id: "login-password", type: showPassword ? 'text' : 'password', value: password, onChange: (e) => setPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "current-password", className: cn(theme.inputClassName, 'pr-14 sm:pr-12'), required: true }), _jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: cn('absolute right-1 top-1/2 -translate-y-1/2 opacity-60 hover:opacity-100 transition-opacity min-h-11 min-w-11 flex items-center justify-center touch-manipulation rounded-full', isLightPanel && 'system-dark:text-[#1b0029]'), "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? _jsx(EyeOff, { className: "w-4 h-4" }) : _jsx(Eye, { className: "w-4 h-4" }) })] })] }), _jsx("button", { type: "submit", disabled: isLoading, className: cn(theme.buttonClassName, loginSheetButtonTouch, 'disabled:opacity-50 w-full'), style: theme.useBrandPrimaryButton
+                    ? { backgroundColor: primaryColor, color: '#fff' }
+                    : undefined, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), "Signing in..."] })) : (_jsxs(_Fragment, { children: ["Sign in", theme.showArrowOnButton !== false ? (_jsx(ArrowRight, { className: "w-4 h-4 opacity-80" })) : null] })) }), _jsxs("p", { className: cn('text-center text-xs sm:text-sm pt-1 sm:pt-2 text-pretty px-1 leading-relaxed', isLightPanel && 'system-dark:text-[#5c4d68]', theme.footerClassName), children: ["Don't have a Shopaza account?", ' ', _jsx(Link, { href: signupHref, className: cn(theme.footerLinkClassName, 'touch-manipulation inline-block py-1 -my-1', isLightPanel && 'system-dark:text-[#1b0029]'), onClick: () => isSheet && closeLogin?.(), children: "Create one" })] })] }));
+}

package/dist/components/auth/login-sheet-header.d.ts

@@ -0,0 +1,10 @@
+import type { StoreConfig } from '../../lib/store-types';
+import type { LoginSheetTheme } from './login-sheet-theme.types';
+interface LoginSheetHeaderProps {
+    storeConfig: StoreConfig;
+    theme: LoginSheetTheme;
+    onClose: () => void;
+}
+export declare function LoginSheetHeader({ storeConfig, theme, onClose }: LoginSheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=login-sheet-header.d.ts.map

package/dist/components/auth/login-sheet-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-sheet-header.d.ts","sourceRoot":"","sources":["../../../src/components/auth/login-sheet-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAKjE,UAAU,qBAAqB;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CA6DtF"}

package/dist/components/auth/login-sheet-header.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { StoreLogo } from '../../components/ui/store-logos.js';
+import { Button } from '../../components/ui/button.js';
+import { cn } from '../../lib/utils/index.js';
+export function LoginSheetHeader({ storeConfig, theme, onClose }) {
+    const isLightPanel = (theme.panelMode ?? 'light') === 'light';
+    return (_jsxs("header", { className: cn('shrink-0', theme.headerClassName), children: [_jsxs("div", { className: "flex items-start justify-between gap-3 sm:gap-4 mb-4 sm:mb-5", children: [_jsxs("div", { className: "flex items-center gap-2.5 sm:gap-3 min-w-0 flex-1", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-9 w-9 sm:h-10 sm:w-10 shrink-0", alt: storeConfig.name }), _jsx("div", { className: "min-w-0", children: _jsx("p", { className: cn('text-[11px] sm:text-xs font-medium truncate', isLightPanel && 'system-dark:text-[#5c4d68]', theme.storeNameClassName ?? 'opacity-70'), children: storeConfig.name }) })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, className: cn('rounded-full shrink-0 -mr-1 h-11 w-11 min-h-11 min-w-11 touch-manipulation', isLightPanel && 'system-dark:text-[#1b0029] system-dark:hover:bg-black/5', theme.closeButtonClassName), "aria-label": "Close sign in", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("h1", { id: "login-form-title", className: cn('font-display font-bold tracking-tight text-xl sm:text-2xl leading-tight', isLightPanel && 'system-dark:text-[#1b0029]', theme.titleClassName ?? 'text-[#1b0029]'), children: "Sign in" }), _jsx("p", { className: cn('mt-1.5 sm:mt-2 text-[13px] sm:text-sm leading-snug', isLightPanel && 'system-dark:text-[#5c4d68]', theme.subtitleClassName), children: "Sign into your Shopaza account using your registered email address and password" })] }));
+}