@payez/next-mvp 4.0.1 → 4.0.2

package/dist/pages/security/page.js

@@ -0,0 +1,212 @@
+"use strict";
+/**
+ * Themed Security Page for @payez/next-mvp
+ *
+ * DEPENDENCIES: Only React, Next.js, next-auth, React Query, and Tailwind CSS
+ * NO shadcn/ui or other UI library required!
+ *
+ * FEATURES:
+ * - Security summary (2FA status, email status, phone status)
+ * - Change password form with policy validation
+ * - Themeable styling via ThemeProvider
+ * - Uses React Query for data fetching (matches website-membership pattern)
+ *
+ * USAGE:
+ * 1. Import from @payez/next-mvp/pages/security
+ * 2. Wrap your app with ThemeProvider to customize branding
+ * 3. Create API routes at:
+ *    - src/app/api/account/profile/route.ts
+ *    - src/app/api/account/change-password/route.ts
+ *    - src/app/api/account/validate-password/route.ts
+ */
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SecurityPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const useProfile_1 = require("../../hooks/useProfile");
+const usePasswordValidation_1 = require("../../hooks/usePasswordValidation");
+const useTheme_1 = require("../../theme/useTheme");
+// Inline PasswordStrengthMeter component
+function PasswordStrengthMeter({ score, failedRequirements, tip, isDarkMode = false, }) {
+    const getStrengthColor = (s) => {
+        if (s >= 4)
+            return 'bg-green-500';
+        if (s >= 3)
+            return 'bg-yellow-500';
+        if (s >= 2)
+            return 'bg-orange-500';
+        return 'bg-red-500';
+    };
+    const getStrengthLabel = (s) => {
+        if (s >= 4)
+            return 'Strong';
+        if (s >= 3)
+            return 'Good';
+        if (s >= 2)
+            return 'Fair';
+        if (s >= 1)
+            return 'Weak';
+        return 'Very Weak';
+    };
+    const mutedTextClass = isDarkMode ? 'text-slate-400' : 'text-gray-500';
+    const barBgClass = isDarkMode ? 'bg-slate-600' : 'bg-gray-200';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: `flex-1 h-2 rounded-full overflow-hidden ${barBgClass}`, children: (0, jsx_runtime_1.jsx)("div", { className: `h-full transition-all duration-300 ${getStrengthColor(score)}`, style: { width: `${Math.min(score * 20, 100)}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs w-16 ${mutedTextClass}`, children: getStrengthLabel(score) })] }), failedRequirements.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: `text-xs space-y-1 ${mutedTextClass}`, children: failedRequirements.map((req, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-red-400", children: "\u00D7" }), " ", req] }, i))) })), tip && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-blue-400", children: tip }))] }));
+}
+// Inline PasswordPolicyChecklist component
+function PasswordPolicyChecklist({ policy, password, isDarkMode = false, }) {
+    const checks = react_1.default.useMemo(() => {
+        const list = [];
+        const minLen = typeof policy?.min_length === 'number' && policy.min_length > 0 ? policy.min_length : 8;
+        list.push({ label: `At least ${minLen} characters`, ok: (password?.length || 0) >= minLen });
+        if (policy?.require_uppercase)
+            list.push({ label: 'One uppercase letter (A-Z)', ok: /[A-Z]/.test(password || '') });
+        if (policy?.require_lowercase)
+            list.push({ label: 'One lowercase letter (a-z)', ok: /[a-z]/.test(password || '') });
+        if (policy?.require_digit)
+            list.push({ label: 'One digit (0-9)', ok: /\d/.test(password || '') });
+        if (policy?.require_special)
+            list.push({ label: 'One special character (!@#$% etc.)', ok: /[^A-Za-z0-9]/.test(password || '') });
+        return list;
+    }, [policy, password]);
+    const mutedTextClass = isDarkMode ? 'text-slate-400' : 'text-gray-500';
+    const successTextClass = 'text-green-400';
+    return ((0, jsx_runtime_1.jsx)("div", { className: "space-y-1 text-xs", children: checks.map((c, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [c.ok ? ((0, jsx_runtime_1.jsx)("span", { className: successTextClass, children: "\u2713" })) : ((0, jsx_runtime_1.jsx)("span", { className: mutedTextClass, children: "\u25CB" })), (0, jsx_runtime_1.jsx)("span", { className: c.ok ? successTextClass : mutedTextClass, children: c.label })] }, i))) }));
+}
+function SecurityPage() {
+    const { data: profileData, isLoading: isProfileLoading } = (0, useProfile_1.useProfile)();
+    const layout = (0, useTheme_1.useLayout)();
+    const colors = (0, useTheme_1.useColors)();
+    // Determine if dark mode based on background color
+    const isDarkMode = colors?.background?.includes('slate-9') ||
+        colors?.background?.includes('gray-9') ||
+        colors?.background?.includes('dark') ||
+        colors?.card?.includes('slate-8') ||
+        colors?.card?.includes('gray-8');
+    // Password form state
+    const [formData, setFormData] = (0, react_1.useState)({
+        current_password: '',
+        new_password: '',
+        confirm_password: '',
+    });
+    const [showPasswords, setShowPasswords] = (0, react_1.useState)({
+        current: false,
+        new: false,
+        confirm: false,
+    });
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)('');
+    const [success, setSuccess] = (0, react_1.useState)('');
+    // Password validation
+    const { setPassword: validateNewPassword, isValid: newPasswordIsValid, score: newPasswordScore, failedRequirements, tip, policy, } = (0, usePasswordValidation_1.usePasswordValidation)({ debounceMs: 250 });
+    // Validate new password on change
+    (0, react_1.useEffect)(() => {
+        validateNewPassword(formData.new_password);
+    }, [formData.new_password, validateNewPassword]);
+    const passwordsMatch = formData.confirm_password.length > 0 && formData.new_password === formData.confirm_password;
+    const canSubmit = !submitting && newPasswordIsValid && passwordsMatch && formData.current_password.length > 0;
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError('');
+        setSuccess('');
+        if (!formData.current_password || !formData.new_password || !formData.confirm_password) {
+            setError('All fields are required');
+            return;
+        }
+        if (formData.new_password !== formData.confirm_password) {
+            setError('New password and confirmation do not match');
+            return;
+        }
+        if (!newPasswordIsValid) {
+            setError('Please meet the password requirements before submitting');
+            return;
+        }
+        try {
+            setSubmitting(true);
+            const response = await fetch('/api/account/change-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    current_password: formData.current_password,
+                    new_password: formData.new_password,
+                    confirm_password: formData.confirm_password,
+                }),
+            });
+            const result = await response.json();
+            if (!response.ok || !result.success) {
+                // Extract error message
+                let errorMsg = result.message || 'Failed to change password';
+                if (result.details?.value && Array.isArray(result.details.value) && result.details.value.length > 0) {
+                    errorMsg = result.details.value[0].message || errorMsg;
+                }
+                else if (result.details?.message) {
+                    errorMsg = result.details.message;
+                }
+                setError(errorMsg);
+                return;
+            }
+            // Success
+            setSuccess(result.message || 'Password changed successfully');
+            setFormData({ current_password: '', new_password: '', confirm_password: '' });
+        }
+        catch (err) {
+            setError(err.message || 'Failed to change password');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    // Determine loading state colors before any early returns
+    const loadingTextClass = isDarkMode ? 'text-slate-400' : 'text-gray-500';
+    // Loading state
+    if (isProfileLoading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "min-h-screen", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center min-h-[400px]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center space-y-4", children: [(0, jsx_runtime_1.jsxs)("svg", { className: `animate-spin h-8 w-8 ${loadingTextClass}`, viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12 a 8 8 0 0 1 8 -8 v 4 a 4 4 0 0 0 -4 4 H4 z" })] }), (0, jsx_runtime_1.jsx)("p", { className: loadingTextClass, children: "Loading security settings..." })] }) }) }));
+    }
+    // Theme-aware styling using colors from ThemeProvider
+    const cardBgClass = colors?.card || 'bg-white';
+    const borderClass = colors?.border || 'border-gray-200';
+    // Text colors based on dark/light mode
+    const textPrimaryClass = isDarkMode ? 'text-white' : 'text-gray-900';
+    const textSecondaryClass = isDarkMode ? 'text-slate-300' : 'text-gray-600';
+    const textMutedClass = isDarkMode ? 'text-slate-400' : 'text-gray-500';
+    // Input styling
+    const inputBgClass = isDarkMode ? 'bg-slate-800' : 'bg-white';
+    const inputBorderClass = isDarkMode ? 'border-slate-600' : 'border-gray-300';
+    const inputTextClass = isDarkMode ? 'text-white placeholder-slate-400' : 'text-gray-900 placeholder-gray-400';
+    // Elevated surfaces (status boxes)
+    const elevatedBgClass = isDarkMode ? 'bg-slate-700' : 'bg-gray-100';
+    return ((0, jsx_runtime_1.jsx)("div", { className: "min-h-screen", children: (0, jsx_runtime_1.jsxs)("div", { className: `${layout?.spacing || 'space-y-6'} ${layout?.maxWidth || 'max-w-4xl'} mx-auto ${layout?.padding || 'p-6'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsx)("h1", { className: `text-3xl font-bold ${textPrimaryClass}`, children: "Security" }) }), (0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg shadow-sm border p-6 ${cardBgClass} ${borderClass}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: `text-xl font-semibold mb-4 ${textPrimaryClass}`, children: "Security Summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${elevatedBgClass}`, children: [(0, jsx_runtime_1.jsx)("p", { className: `text-sm font-medium mb-2 ${textSecondaryClass}`, children: "2FA Status" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center space-x-2", children: (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${profileData?.two_factor_enabled ? 'bg-green-600 text-white' : 'bg-yellow-600 text-white'}`, children: profileData?.two_factor_enabled ? 'Enabled' : 'Not Active' }) }), !profileData?.two_factor_enabled && ((0, jsx_runtime_1.jsx)("p", { className: `text-xs mt-2 ${textMutedClass}`, children: "Self-service 2FA enrollment coming soon" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${elevatedBgClass}`, children: [(0, jsx_runtime_1.jsx)("p", { className: `text-sm font-medium mb-2 ${textSecondaryClass}`, children: "Email Status" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center space-x-2", children: (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${profileData?.email_confirmed ? 'bg-green-600 text-white' : 'bg-yellow-600 text-white'}`, children: profileData?.email_confirmed ? 'Verified' : 'Not Verified' }) }), (0, jsx_runtime_1.jsx)("p", { className: `text-xs mt-2 ${textPrimaryClass}`, children: profileData?.email })] }), (0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${elevatedBgClass}`, children: [(0, jsx_runtime_1.jsx)("p", { className: `text-sm font-medium mb-2 ${textSecondaryClass}`, children: "Phone Status" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center space-x-2", children: (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${profileData?.phone_confirmed ? 'bg-green-600 text-white' : 'bg-yellow-600 text-white'}`, children: profileData?.phone_confirmed ? 'Verified' : 'Not Verified' }) }), profileData?.phone_number && ((0, jsx_runtime_1.jsx)("p", { className: `text-xs mt-2 ${textPrimaryClass}`, children: profileData.phone_number }))] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg shadow-sm border p-6 ${cardBgClass} ${borderClass}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: `text-xl font-semibold mb-4 ${textPrimaryClass}`, children: "Change Password" }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium mb-2 ${textSecondaryClass}`, children: "Current Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: showPasswords.current ? 'text' : 'password', value: formData.current_password, onChange: e => setFormData({ ...formData, current_password: e.target.value }), className: `w-full px-3 py-2 rounded-md shadow-sm border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${inputBgClass} ${inputBorderClass} ${inputTextClass}`, placeholder: "Enter current password", disabled: submitting, required: true }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowPasswords(p => ({ ...p, current: !p.current })), className: `absolute inset-y-0 right-2 flex items-center ${textMutedClass}`, children: showPasswords.current ? '👁️' : '👁️‍🗨️' })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium mb-2 ${textSecondaryClass}`, children: "New Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: showPasswords.new ? 'text' : 'password', value: formData.new_password, onChange: e => setFormData({ ...formData, new_password: e.target.value }), className: `w-full px-3 py-2 rounded-md shadow-sm border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${inputBgClass} ${inputBorderClass} ${inputTextClass}`, placeholder: "Enter new password", disabled: submitting, required: true }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowPasswords(p => ({ ...p, new: !p.new })), className: `absolute inset-y-0 right-2 flex items-center ${textMutedClass}`, children: showPasswords.new ? '👁️' : '👁️‍🗨️' })] }), formData.new_password && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: (0, jsx_runtime_1.jsx)(PasswordStrengthMeter, { score: newPasswordScore, failedRequirements: failedRequirements, tip: tip, isDarkMode: isDarkMode }) })), policy && formData.new_password && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)(PasswordPolicyChecklist, { policy: policy, password: formData.new_password, isDarkMode: isDarkMode }) }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium mb-2 ${textSecondaryClass}`, children: "Confirm New Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: showPasswords.confirm ? 'text' : 'password', value: formData.confirm_password, onChange: e => setFormData({ ...formData, confirm_password: e.target.value }), className: `w-full px-3 py-2 rounded-md shadow-sm border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${inputBgClass} ${inputBorderClass} ${inputTextClass}`, placeholder: "Confirm new password", disabled: submitting, required: true }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowPasswords(p => ({ ...p, confirm: !p.confirm })), className: `absolute inset-y-0 right-2 flex items-center ${textMutedClass}`, children: showPasswords.confirm ? '👁️' : '👁️‍🗨️' })] }), formData.confirm_password && !passwordsMatch && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-red-400", children: "Passwords do not match" })), formData.confirm_password && passwordsMatch && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-green-400", children: "Passwords match" }))] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "bg-red-900/30 border border-red-600 rounded-lg p-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-red-400 text-sm", children: error }) })), success && ((0, jsx_runtime_1.jsx)("div", { className: "bg-green-900/30 border border-green-600 rounded-lg p-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-green-400 text-sm", children: success }) })), (0, jsx_runtime_1.jsx)("div", { className: "pt-2", children: (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !canSubmit, className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed", children: submitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12 a 8 8 0 0 1 8 -8 v 4 a 4 4 0 0 0 -4 4 H4 z" })] }), "Changing..."] })) : ('Change Password') }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg shadow-sm border p-6 ${cardBgClass} ${borderClass}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: `text-xl font-semibold mb-4 ${textPrimaryClass}`, children: "Additional Security Features" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center justify-between p-4 rounded-lg opacity-60 ${elevatedBgClass}`, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `text-sm font-medium ${textPrimaryClass}`, children: "Active Sessions" }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMutedClass}`, children: "View and manage your active login sessions" })] }), (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${isDarkMode ? 'bg-slate-600 text-slate-300' : 'bg-gray-200 text-gray-600'}`, children: "Coming Soon" })] }), (0, jsx_runtime_1.jsxs)("div", { className: `flex items-center justify-between p-4 rounded-lg opacity-60 ${elevatedBgClass}`, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `text-sm font-medium ${textPrimaryClass}`, children: "2FA Management" }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMutedClass}`, children: "Enable or configure two-factor authentication" })] }), (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${isDarkMode ? 'bg-slate-600 text-slate-300' : 'bg-gray-200 text-gray-600'}`, children: "Coming Soon" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("a", { href: "/account/profile", className: `text-sm hover:underline ${textMutedClass}`, children: "\u2190 Back to Profile" }) })] }) }));
+}

package/dist/pages/settings/EnhancedSettingsPage.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Enhanced Settings Page for @payez/next-mvp
+ *
+ * Implements BAPert's Member Self-Service spec with:
+ * - Appearance section (theme, compact mode)
+ * - Localization section (language, timezone, date format)
+ * - Notifications section (email and SMS preferences)
+ * - Privacy section (profile visibility, activity status)
+ *
+ * @see docs/specs/MEMBER_SELF_SERVICE_SPEC.md
+ */
+interface PreferencesData {
+    appearance?: {
+        theme?: 'light' | 'dark' | 'system';
+        compact_mode?: boolean;
+    };
+    localization?: {
+        language?: string;
+        timezone?: string;
+        timezone_display?: string;
+        date_format?: string;
+    };
+    notifications?: {
+        email_enabled?: boolean;
+        email_security_alerts?: boolean;
+        email_account_updates?: boolean;
+        email_product_news?: boolean;
+        email_marketing?: boolean;
+        sms_enabled?: boolean;
+        sms_security_alerts?: boolean;
+    };
+    privacy?: {
+        profile_visibility?: 'private' | 'team' | 'public';
+        show_activity_status?: boolean;
+    };
+}
+interface EnhancedSettingsPageProps {
+    initialPreferences?: PreferencesData;
+    preferencesEndpoint?: string;
+    languagesEndpoint?: string;
+    timezonesEndpoint?: string;
+    onSave?: (preferences: PreferencesData) => Promise<void>;
+    onThemeChange?: (theme: 'light' | 'dark' | 'system') => void;
+}
+export default function EnhancedSettingsPage({ initialPreferences, preferencesEndpoint, languagesEndpoint, timezonesEndpoint, onSave, onThemeChange, }: EnhancedSettingsPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/settings/EnhancedSettingsPage.js

@@ -0,0 +1,231 @@
+"use strict";
+/**
+ * Enhanced Settings Page for @payez/next-mvp
+ *
+ * Implements BAPert's Member Self-Service spec with:
+ * - Appearance section (theme, compact mode)
+ * - Localization section (language, timezone, date format)
+ * - Notifications section (email and SMS preferences)
+ * - Privacy section (profile visibility, activity status)
+ *
+ * @see docs/specs/MEMBER_SELF_SERVICE_SPEC.md
+ */
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = EnhancedSettingsPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useTheme_1 = require("../../theme/useTheme");
+// Common languages for fallback
+const DEFAULT_LANGUAGES = [
+    { code: 'en', name: 'English (US)' },
+    { code: 'en-GB', name: 'English (UK)' },
+    { code: 'es', name: 'Spanish' },
+    { code: 'fr', name: 'French' },
+    { code: 'de', name: 'German' },
+    { code: 'ja', name: 'Japanese' },
+    { code: 'zh', name: 'Chinese (Simplified)' },
+];
+// Common timezones for fallback
+const DEFAULT_TIMEZONES = [
+    { id: 'America/Los_Angeles', display: 'Pacific Time (US)', offset: '-08:00' },
+    { id: 'America/Denver', display: 'Mountain Time (US)', offset: '-07:00' },
+    { id: 'America/Chicago', display: 'Central Time (US)', offset: '-06:00' },
+    { id: 'America/New_York', display: 'Eastern Time (US)', offset: '-05:00' },
+    { id: 'Europe/London', display: 'London', offset: '+00:00' },
+    { id: 'Europe/Paris', display: 'Paris', offset: '+01:00' },
+    { id: 'Europe/Berlin', display: 'Berlin', offset: '+01:00' },
+    { id: 'Asia/Tokyo', display: 'Tokyo', offset: '+09:00' },
+    { id: 'Asia/Shanghai', display: 'Shanghai', offset: '+08:00' },
+    { id: 'Australia/Sydney', display: 'Sydney', offset: '+11:00' },
+];
+// Date format options
+const DATE_FORMATS = [
+    { value: 'MM/DD/YYYY', label: 'MM/DD/YYYY', example: '01/09/2026' },
+    { value: 'DD/MM/YYYY', label: 'DD/MM/YYYY', example: '09/01/2026' },
+    { value: 'YYYY-MM-DD', label: 'YYYY-MM-DD', example: '2026-01-09' },
+];
+// Toggle component
+function Toggle({ enabled, onChange, disabled = false, isDark = true, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => !disabled && onChange(!enabled), disabled: disabled, className: `
+        relative inline-flex h-6 w-11 items-center rounded-full transition-colors
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+        ${enabled ? 'bg-blue-600' : isDark ? 'bg-slate-600' : 'bg-gray-300'}
+      `, children: (0, jsx_runtime_1.jsx)("span", { className: `
+          inline-block h-4 w-4 transform rounded-full bg-white transition-transform
+          ${enabled ? 'translate-x-6' : 'translate-x-1'}
+        ` }) }));
+}
+// Section wrapper component
+function SettingsSection({ title, children, isDark, }) {
+    const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+    const titleColor = isDark ? 'text-gray-400' : 'text-gray-500';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `border-b ${borderColor} pb-6 mb-6 last:border-b-0`, children: [(0, jsx_runtime_1.jsx)("h2", { className: `text-sm font-semibold uppercase tracking-wider ${titleColor} mb-4`, children: title }), children] }));
+}
+// Setting row component
+function SettingRow({ label, description, children, isDark, }) {
+    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+    const textMuted = isDark ? 'text-gray-400' : 'text-gray-500';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: `font-medium ${textPrimary}`, children: label }), description && (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: description })] }), (0, jsx_runtime_1.jsx)("div", { className: "ml-4", children: children })] }));
+}
+// Select dropdown component
+function Select({ value, onChange, options, isDark, }) {
+    const bgColor = isDark ? 'bg-slate-700' : 'bg-white';
+    const borderColor = isDark ? 'border-slate-600' : 'border-gray-300';
+    const textColor = isDark ? 'text-white' : 'text-gray-900';
+    return ((0, jsx_runtime_1.jsx)("select", { value: value, onChange: (e) => onChange(e.target.value), className: `
+        px-3 py-2 rounded-md border ${borderColor} ${bgColor} ${textColor}
+        focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[200px]
+      `, children: options.map((opt) => ((0, jsx_runtime_1.jsx)("option", { value: opt.value, children: opt.label }, opt.value))) }));
+}
+function EnhancedSettingsPage({ initialPreferences, preferencesEndpoint = '/api/v1/user/preferences', languagesEndpoint = '/api/v1/lookup/languages', timezonesEndpoint = '/api/v1/lookup/timezones', onSave, onThemeChange, }) {
+    const layout = (0, useTheme_1.useLayout)();
+    const colors = (0, useTheme_1.useColors)();
+    // Determine dark mode from theme colors
+    const isDark = colors?.background?.includes('slate-9') ||
+        colors?.background?.includes('gray-9') ||
+        colors?.card?.includes('slate-8');
+    // State
+    const [preferences, setPreferences] = (0, react_1.useState)(initialPreferences || {});
+    const [languages, setLanguages] = (0, react_1.useState)(DEFAULT_LANGUAGES);
+    const [timezones, setTimezones] = (0, react_1.useState)(DEFAULT_TIMEZONES);
+    const [loading, setLoading] = (0, react_1.useState)(!initialPreferences);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [successMessage, setSuccessMessage] = (0, react_1.useState)(null);
+    // Theme colors
+    const bgColor = isDark ? 'bg-slate-900' : 'bg-gray-50';
+    const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
+    const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+    const textMuted = isDark ? 'text-gray-400' : 'text-gray-500';
+    // Fetch preferences and lookups
+    (0, react_1.useEffect)(() => {
+        async function fetchData() {
+            try {
+                setLoading(true);
+                setError(null);
+                // Fetch preferences
+                const prefResponse = await fetch(preferencesEndpoint, { credentials: 'include' });
+                if (prefResponse.ok) {
+                    const prefData = await prefResponse.json();
+                    setPreferences(prefData);
+                }
+                // Fetch languages (optional)
+                try {
+                    const langResponse = await fetch(languagesEndpoint, { credentials: 'include' });
+                    if (langResponse.ok) {
+                        const langData = await langResponse.json();
+                        if (langData.languages)
+                            setLanguages(langData.languages);
+                    }
+                }
+                catch {
+                    // Use defaults
+                }
+                // Fetch timezones (optional)
+                try {
+                    const tzResponse = await fetch(timezonesEndpoint, { credentials: 'include' });
+                    if (tzResponse.ok) {
+                        const tzData = await tzResponse.json();
+                        if (tzData.timezones)
+                            setTimezones(tzData.timezones);
+                    }
+                }
+                catch {
+                    // Use defaults
+                }
+            }
+            catch (err) {
+                setError('Failed to load settings');
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        if (!initialPreferences) {
+            fetchData();
+        }
+    }, [preferencesEndpoint, languagesEndpoint, timezonesEndpoint, initialPreferences]);
+    // Update preference value
+    const updatePreference = (0, react_1.useCallback)((section, key, value) => {
+        setPreferences((prev) => ({
+            ...prev,
+            [section]: {
+                ...prev[section],
+                [key]: value,
+            },
+        }));
+    }, []);
+    // Save preferences
+    const handleSave = (0, react_1.useCallback)(async () => {
+        try {
+            setSaving(true);
+            setError(null);
+            setSuccessMessage(null);
+            if (onSave) {
+                await onSave(preferences);
+            }
+            else {
+                const response = await fetch(preferencesEndpoint, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'include',
+                    body: JSON.stringify(preferences),
+                });
+                if (!response.ok) {
+                    const data = await response.json();
+                    throw new Error(data.message || 'Failed to save settings');
+                }
+            }
+            setSuccessMessage('Settings saved successfully');
+            setTimeout(() => setSuccessMessage(null), 3000);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to save settings');
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [preferences, preferencesEndpoint, onSave]);
+    // Handle theme change
+    const handleThemeChange = (0, react_1.useCallback)((theme) => {
+        updatePreference('appearance', 'theme', theme);
+        onThemeChange?.(theme);
+    }, [updatePreference, onThemeChange]);
+    // Loading state
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor} flex items-center justify-center`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center space-y-4", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-8 w-8 text-blue-500", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })] }), (0, jsx_runtime_1.jsx)("p", { className: textMuted, children: "Loading settings..." })] }) }));
+    }
+    const currentTheme = preferences.appearance?.theme || 'system';
+    const compactMode = preferences.appearance?.compact_mode || false;
+    const currentLanguage = preferences.localization?.language || 'en';
+    const currentTimezone = preferences.localization?.timezone || 'America/Los_Angeles';
+    const currentDateFormat = preferences.localization?.date_format || 'MM/DD/YYYY';
+    const emailEnabled = preferences.notifications?.email_enabled ?? true;
+    const smsEnabled = preferences.notifications?.sms_enabled ?? false;
+    const profileVisibility = preferences.privacy?.profile_visibility || 'team';
+    const showActivityStatus = preferences.privacy?.show_activity_status ?? true;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `max-w-2xl mx-auto ${layout?.padding || 'p-6'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-6", children: [(0, jsx_runtime_1.jsx)("h1", { className: `text-3xl font-bold ${textPrimary}`, children: "Settings" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleSave, disabled: saving, className: `
+              px-4 py-2 rounded-md font-medium transition-colors
+              ${saving ? 'opacity-50 cursor-not-allowed' : ''}
+              bg-blue-600 text-white hover:bg-blue-700
+            `, children: saving ? 'Saving...' : 'Save Changes' })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 p-3 rounded-md bg-red-500/10 border border-red-500/50 text-red-500", children: error })), successMessage && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 p-3 rounded-md bg-green-500/10 border border-green-500/50 text-green-500", children: successMessage })), (0, jsx_runtime_1.jsxs)("div", { className: `${cardBg} rounded-lg shadow-lg border ${borderColor} p-6`, children: [(0, jsx_runtime_1.jsxs)(SettingsSection, { title: "Appearance", isDark: isDark, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Theme" }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2", children: ['light', 'dark', 'system'].map((theme) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleThemeChange(theme), className: `
+                      px-4 py-2 rounded-md capitalize transition-colors
+                      ${currentTheme === theme
+                                                    ? 'bg-blue-600 text-white'
+                                                    : isDark
+                                                        ? 'bg-slate-700 text-gray-300 hover:bg-slate-600'
+                                                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}
+                    `, children: theme }, theme))) })] }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Compact Mode", description: "Reduce spacing and padding for denser layouts", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: compactMode, onChange: (value) => updatePreference('appearance', 'compact_mode', value), isDark: isDark }) })] }), (0, jsx_runtime_1.jsx)(SettingsSection, { title: "Localization", isDark: isDark, children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Language" }), (0, jsx_runtime_1.jsx)(Select, { value: currentLanguage, onChange: (value) => updatePreference('localization', 'language', value), options: languages.map((l) => ({ value: l.code, label: l.name })), isDark: isDark })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Timezone" }), (0, jsx_runtime_1.jsx)(Select, { value: currentTimezone, onChange: (value) => updatePreference('localization', 'timezone', value), options: timezones.map((tz) => ({ value: tz.id, label: `${tz.display} (${tz.offset})` })), isDark: isDark }), preferences.localization?.timezone_display && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-1 text-sm ${textMuted}`, children: ["Currently: ", preferences.localization.timezone_display] }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Date Format" }), (0, jsx_runtime_1.jsx)(Select, { value: currentDateFormat, onChange: (value) => updatePreference('localization', 'date_format', value), options: DATE_FORMATS.map((df) => ({ value: df.value, label: df.label })), isDark: isDark }), (0, jsx_runtime_1.jsxs)("p", { className: `mt-1 text-sm ${textMuted}`, children: ["Example: ", DATE_FORMATS.find((df) => df.value === currentDateFormat)?.example] })] })] }) }), (0, jsx_runtime_1.jsxs)(SettingsSection, { title: "Notifications", isDark: isDark, children: [(0, jsx_runtime_1.jsx)(SettingRow, { label: "Email Notifications", description: "Receive updates and alerts via email", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: emailEnabled, onChange: (value) => updatePreference('notifications', 'email_enabled', value), isDark: isDark }) }), emailEnabled && ((0, jsx_runtime_1.jsxs)("div", { className: `ml-6 border-l-2 ${borderColor} pl-4 space-y-2`, children: [(0, jsx_runtime_1.jsx)(SettingRow, { label: "Security alerts", description: "Login from new device, etc.", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.email_security_alerts ?? true, onChange: (value) => updatePreference('notifications', 'email_security_alerts', value), isDark: isDark }) }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Account updates", description: "Password expiry, etc.", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.email_account_updates ?? true, onChange: (value) => updatePreference('notifications', 'email_account_updates', value), isDark: isDark }) }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Product news and tips", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.email_product_news ?? false, onChange: (value) => updatePreference('notifications', 'email_product_news', value), isDark: isDark }) }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Marketing and promotions", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.email_marketing ?? false, onChange: (value) => updatePreference('notifications', 'email_marketing', value), isDark: isDark }) })] })), (0, jsx_runtime_1.jsx)(SettingRow, { label: "SMS Notifications", description: "Receive urgent alerts via text message", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: smsEnabled, onChange: (value) => updatePreference('notifications', 'sms_enabled', value), isDark: isDark }) }), smsEnabled && ((0, jsx_runtime_1.jsx)("div", { className: `ml-6 border-l-2 ${borderColor} pl-4`, children: (0, jsx_runtime_1.jsx)(SettingRow, { label: "Security alerts only", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.sms_security_alerts ?? true, onChange: (value) => updatePreference('notifications', 'sms_security_alerts', value), isDark: isDark }) }) }))] }), (0, jsx_runtime_1.jsxs)(SettingsSection, { title: "Privacy", isDark: isDark, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Profile Visibility" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: [
+                                                { value: 'private', label: 'Private', description: 'Only you can see your profile' },
+                                                { value: 'team', label: 'Team', description: 'Team members can see your profile' },
+                                                { value: 'public', label: 'Public', description: 'Anyone can see your profile' },
+                                            ].map((option) => ((0, jsx_runtime_1.jsxs)("label", { className: `flex items-center p-3 rounded-md cursor-pointer transition-colors ${profileVisibility === option.value
+                                                    ? isDark
+                                                        ? 'bg-blue-600/20 border border-blue-500'
+                                                        : 'bg-blue-50 border border-blue-500'
+                                                    : isDark
+                                                        ? 'bg-slate-700 hover:bg-slate-600'
+                                                        : 'bg-gray-50 hover:bg-gray-100'}`, children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "profileVisibility", value: option.value, checked: profileVisibility === option.value, onChange: (e) => updatePreference('privacy', 'profile_visibility', e.target.value), className: "mr-3" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `font-medium ${textPrimary}`, children: option.label }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: option.description })] })] }, option.value))) })] }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Activity Status", description: "Show when you're active to team members", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: showActivityStatus, onChange: (value) => updatePreference('privacy', 'show_activity_status', value), isDark: isDark }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 flex justify-between", children: [(0, jsx_runtime_1.jsx)("a", { href: "/account/security", className: `text-sm hover:underline ${textMuted}`, children: "\u2190 Security Settings" }), (0, jsx_runtime_1.jsx)("a", { href: "/account/profile", className: `text-sm hover:underline ${textMuted}`, children: "Back to Profile \u2192" })] })] }) }));
+}

package/dist/pages/settings/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Settings Page exports
+ *
+ * - SettingsPage: Basic settings display (legacy)
+ * - EnhancedSettingsPage: Full-featured settings with appearance, localization, notifications, privacy
+ */
+export { default as SettingsPage } from './page';
+export { default as EnhancedSettingsPage } from './EnhancedSettingsPage';

package/dist/pages/settings/index.js

@@ -0,0 +1,16 @@
+"use strict";
+/**
+ * Settings Page exports
+ *
+ * - SettingsPage: Basic settings display (legacy)
+ * - EnhancedSettingsPage: Full-featured settings with appearance, localization, notifications, privacy
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnhancedSettingsPage = exports.SettingsPage = void 0;
+var page_1 = require("./page");
+Object.defineProperty(exports, "SettingsPage", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
+var EnhancedSettingsPage_1 = require("./EnhancedSettingsPage");
+Object.defineProperty(exports, "EnhancedSettingsPage", { enumerable: true, get: function () { return __importDefault(EnhancedSettingsPage_1).default; } });

package/dist/pages/settings/page.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Basic Settings Page
+ *
+ * A simpler settings page that can be customized.
+ * For the full-featured version, use EnhancedSettingsPage.
+ */
+export default function SettingsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/pages/settings/page.js

@@ -0,0 +1,26 @@
+"use strict";
+/**
+ * Basic Settings Page
+ *
+ * A simpler settings page that can be customized.
+ * For the full-featured version, use EnhancedSettingsPage.
+ */
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SettingsPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useTheme_1 = require("../../theme/useTheme");
+function SettingsPage() {
+    const layout = (0, useTheme_1.useLayout)();
+    const colors = (0, useTheme_1.useColors)();
+    // Determine dark mode from theme colors
+    const isDark = colors?.background?.includes('slate-9') ||
+        colors?.background?.includes('gray-9') ||
+        colors?.card?.includes('slate-8');
+    const bgColor = isDark ? 'bg-slate-900' : 'bg-gray-50';
+    const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
+    const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+    const textMuted = isDark ? 'text-gray-400' : 'text-gray-500';
+    return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `max-w-2xl mx-auto ${layout?.padding || 'p-6'}`, children: [(0, jsx_runtime_1.jsx)("h1", { className: `text-3xl font-bold ${textPrimary} mb-6`, children: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: `${cardBg} rounded-lg shadow-lg border ${borderColor} p-6`, children: (0, jsx_runtime_1.jsx)("p", { className: textMuted, children: "Settings page content goes here. Use EnhancedSettingsPage for a full-featured implementation." }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 text-center", children: (0, jsx_runtime_1.jsx)("a", { href: "/account/profile", className: `text-sm hover:underline ${textMuted}`, children: "Back to Profile" }) })] }) }));
+}

package/dist/pages/showcase/ShowcasePage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Feature Showcase Page
+ *
+ * Demonstrates MVP capabilities with interactive examples.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * // app/showcase/page.tsx
+ * export { ShowcasePage as default } from '@payez/next-mvp/pages/showcase';
+ * ```
+ */
+export declare function ShowcasePage(): import("react/jsx-runtime").JSX.Element;
+export default ShowcasePage;