@mdxui/cockpit 0.2.0 → 2.1.1

package/README.md

@@ -13,21 +13,169 @@ pnpm add @mdxui/cockpit @mdxui/primitives @mdxui/themes mdxui
 ## Quick Start
 
 ```tsx
-import { App, DeveloperDashboard } from '@mdxui/cockpit'
+import { DeveloperDashboard } from '@mdxui/cockpit'
 
 export default function Dashboard() {
   return (
-    <App
-      branding={{
-        name: 'My App',
-        logo: <Logo />,
-      }}
+    <DeveloperDashboard
+      branding={{ name: 'My App', logo: <Logo /> }}
       theme="default"
     />
   )
 }
 ```
 
+## Composability
+
+DeveloperDashboard is fully composable - you can add custom routes, hide built-in routes, and customize branding.
+
+### Adding Custom Routes
+
+```tsx
+<DeveloperDashboard
+  customRoutes={[
+    {
+      path: '/analytics',
+      label: 'Analytics',
+      icon: 'BarChart3',  // Lucide icon name
+      element: <AnalyticsPage />,
+      group: 'main',
+    },
+    {
+      path: '/integrations',
+      label: 'Integrations',
+      icon: 'Plug',
+      element: <IntegrationsPage />,
+      group: 'settings',
+    },
+  ]}
+/>
+```
+
+### Hiding Built-in Routes
+
+```tsx
+<DeveloperDashboard
+  routes={{
+    overview: true,
+    apiKeys: true,
+    webhooks: true,
+    usage: false,      // Hide usage page
+    billing: false,    // Hide billing page
+    team: true,
+    settings: true,
+  }}
+/>
+```
+
+### Full Configuration
+
+```tsx
+<DeveloperDashboard
+  // Branding
+  branding={{
+    name: 'Acme API',
+    logo: <AcmeLogo />,
+  }}
+
+  // Theme
+  theme="stripe"
+
+  // Route visibility
+  routes={{
+    overview: true,
+    apiKeys: true,
+    webhooks: true,
+    usage: true,
+    billing: true,
+    team: true,
+    settings: true,
+  }}
+
+  // Custom pages
+  customRoutes={[
+    { path: '/logs', label: 'Logs', icon: 'ScrollText', element: <LogsPage /> },
+  ]}
+
+  // Auth integration (WorkOS)
+  identity={{
+    provider: 'workos',
+    clientId: process.env.WORKOS_CLIENT_ID,
+  }}
+/>
+```
+
+## Standalone Components
+
+Use standalone components to embed individual pages in your own app shell without the full dashboard.
+
+```tsx
+import {
+  StandaloneProvider,
+  StandaloneAPIKeys,
+  StandaloneWebhooks,
+  StandaloneBilling,
+  StandaloneTeam,
+} from '@mdxui/cockpit'
+
+function MySettings() {
+  return (
+    <StandaloneProvider config={{ theme: { preset: 'stripe' } }}>
+      <Tabs>
+        <TabsContent value="keys">
+          <StandaloneAPIKeys />
+        </TabsContent>
+        <TabsContent value="webhooks">
+          <StandaloneWebhooks />
+        </TabsContent>
+      </Tabs>
+    </StandaloneProvider>
+  )
+}
+```
+
+### With Backend Integration
+
+Standalone components accept data and callbacks for real backend integration:
+
+```tsx
+import { StandaloneAPIKeys, type ApiKey } from '@mdxui/cockpit'
+
+function APIKeysSettings() {
+  const [keys, setKeys] = useState<ApiKey[]>([])
+
+  return (
+    <StandaloneAPIKeys
+      keys={keys}
+      onCreateKey={async (name) => {
+        const result = await api.createKey(name)
+        setKeys([...keys, result])
+        return { id: result.id, key: result.key }
+      }}
+      onRevokeKey={async (id) => {
+        await api.revokeKey(id)
+        setKeys(keys.filter(k => k.id !== id))
+      }}
+      onRenameKey={async (id, name) => {
+        await api.renameKey(id, name)
+        setKeys(keys.map(k => k.id === id ? { ...k, name } : k))
+      }}
+    />
+  )
+}
+```
+
+### Available Standalone Components
+
+| Component | Data Prop | Callbacks |
+|-----------|-----------|-----------|
+| `StandaloneAPIKeys` | `keys: ApiKey[]` | `onCreateKey`, `onRevokeKey`, `onRenameKey` |
+| `StandaloneWebhooks` | `endpoints: WebhookEndpoint[]` | `onCreateEndpoint`, `onUpdateEndpoint`, `onDeleteEndpoint` |
+| `StandaloneBilling` | `billingData: BillingData` | `onManagePlan`, `onUpdatePaymentMethod`, `onDownloadInvoice`, `onToggleAlerts` |
+| `StandaloneTeam` | — | `useMockWidgets` (uses WorkOS widgets) |
+
+All standalone components support `hideHeader` (default: true) and `className` props.
+
 ## Auth Pages
 
 ```tsx
@@ -50,7 +198,7 @@ import { LoginPage, SignupPage, OTPPage } from '@mdxui/cockpit/auth'
 // OTP verification
 <OTPPage
   logo={<Logo />}
-  email="user@example.com"
+  email="user@example.com.ai"
   onVerify={handleVerify}
 />
 ```
@@ -106,7 +254,19 @@ const { theme, setTheme } = useThemeStore()
 
 ```tsx
 // Main export
-import { App, DeveloperDashboard } from '@mdxui/cockpit'
+import { DeveloperDashboard } from '@mdxui/cockpit'
+
+// Standalone components (embed in your own shell)
+import {
+  StandaloneProvider,
+  StandaloneAPIKeys,
+  StandaloneWebhooks,
+  StandaloneBilling,
+  StandaloneTeam,
+  type ApiKey,
+  type WebhookEndpoint,
+  type BillingData,
+} from '@mdxui/cockpit'
 
 // Developer components
 import { KPICard, DataTable } from '@mdxui/cockpit/developer'
@@ -131,6 +291,45 @@ import { useThemeStore, ThemeScript } from '@mdxui/cockpit/themes'
 - [GitHub](https://github.com/dot-do/ui)
 - [npm](https://www.npmjs.com/package/@mdxui/cockpit)
 
+## Architecture
+
+@mdxui/cockpit sits at the **template layer** - implementing the `AppComponents` interface from mdxui for developer dashboards and SaaS apps.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                      mdxui (interfaces)                          │
+│   AppComponents interface defines: Dashboard, APIKeys, Billing   │
+└─────────────────────────────────────────────────────────────────┘
+                              ↓ implements
+┌─────────────────────────────────────────────────────────────────┐
+│                  @mdxui/primitives (raw UI)                      │
+│   Button, Card, Dialog - base building blocks                    │
+└─────────────────────────────────────────────────────────────────┘
+                              ↓ uses
+┌─────────────────────────────────────────────────────────────────┐
+│            ★ @mdxui/cockpit (app templates) ← YOU ARE HERE       │
+│   DeveloperDashboard, APIKeys, Webhooks, Billing, Team...        │
+│   Implements AppComponents for end-user apps                     │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Relationship to Other Packages
+
+| Package | Relationship |
+|---------|--------------|
+| `mdxui` | Implements `AppComponents` interface |
+| `@mdxui/primitives` | Uses for base UI components |
+| `@mdxui/themes` | Uses for theming |
+| `@mdxui/admin` | Admin-focused components (operators) |
+| `saaskit` | Generates apps using cockpit components |
+
+### Key Distinction: cockpit vs admin
+
+| Package | For | Focus |
+|---------|-----|-------|
+| `@mdxui/cockpit` | End users, customers | Product experience, developer tools |
+| `@mdxui/admin` | Operators, admins | CRUD, data management, internal tools |
+
 ## License
 
 MIT

package/dist/auth/auth-layout.js

@@ -1,60 +1,20 @@
 "use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 
 // src/auth/auth-layout.tsx
 import { cn } from "@mdxui/primitives/lib/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-function AuthLayout(_a) {
-  var _b = _a, {
-    className,
-    children,
-    title,
-    subtitle,
-    logo,
-    backgroundImage,
-    showTestimonial = false,
-    testimonial
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "title",
-    "subtitle",
-    "logo",
-    "backgroundImage",
-    "showTestimonial",
-    "testimonial"
-  ]);
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ className: cn("min-h-screen w-full lg:grid lg:grid-cols-2", className) }, props), { children: [
+function AuthLayout({
+  className,
+  children,
+  title,
+  subtitle,
+  logo,
+  backgroundImage,
+  showTestimonial = false,
+  testimonial,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen w-full lg:grid lg:grid-cols-2", className), ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[400px] space-y-8 px-4", children: [
       logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: logo }),
       (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
@@ -95,7 +55,7 @@ function AuthLayout(_a) {
         ] }) }) })
       }
     )
-  ] }));
+  ] });
 }
 export {
   AuthLayout

package/dist/auth/auth-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/auth/auth-layout.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@mdxui/primitives/lib/utils\"\n\nexport interface AuthLayoutProps extends React.ComponentProps<\"div\"> {\n  children: React.ReactNode\n  title?: string\n  subtitle?: string\n  logo?: React.ReactNode\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction AuthLayout({\n  className,\n  children,\n  title,\n  subtitle,\n  logo,\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n  ...props\n}: AuthLayoutProps) {\n  return (\n    <div className={cn(\"min-h-screen w-full lg:grid lg:grid-cols-2\", className)} {...props}>\n      {/* Left side - Form */}\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto w-full max-w-[400px] space-y-8 px-4\">\n          {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n          {(title || subtitle) && (\n            <div className=\"space-y-2 text-center\">\n              {title && (\n                <h1 className=\"text-3xl font-bold tracking-tight\">{title}</h1>\n              )}\n              {subtitle && (\n                <p className=\"text-muted-foreground text-sm\">{subtitle}</p>\n              )}\n            </div>\n          )}\n\n          <div>{children}</div>\n        </div>\n      </div>\n\n      {/* Right side - Visual/Testimonial */}\n      <div\n        className=\"bg-muted hidden lg:block\"\n        style={\n          backgroundImage\n            ? {\n                backgroundImage: `url(${backgroundImage})`,\n                backgroundSize: \"cover\",\n                backgroundPosition: \"center\",\n              }\n            : undefined\n        }\n      >\n        {showTestimonial && testimonial && !backgroundImage && (\n          <div className=\"flex h-full items-center justify-center p-12\">\n            <div className=\"max-w-md space-y-6\">\n              <blockquote className=\"space-y-4\">\n                <p className=\"text-lg font-medium leading-relaxed\">\n                  \"{testimonial.quote}\"\n                </p>\n                <footer className=\"flex items-center gap-3\">\n                  {testimonial.avatar && (\n                    <img\n                      src={testimonial.avatar}\n                      alt={testimonial.author}\n                      className=\"size-10 rounded-full\"\n                    />\n                  )}\n                  <div>\n                    <div className=\"font-semibold\">{testimonial.author}</div>\n                    <div className=\"text-muted-foreground text-sm\">\n                      {testimonial.role}\n                    </div>\n                  </div>\n                </footer>\n              </blockquote>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { AuthLayout }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,UAAU;AAiCA,cAGP,YAHO;AAhBnB,SAAS,WAAW,IAUA;AAVA,eAClB;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,EA5BF,IAoBoB,IASf,kBATe,IASf;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,qBAAC,sCAAI,WAAW,GAAG,8CAA8C,SAAS,KAAO,QAAhF,EAEC;AAAA,wBAAC,SAAI,WAAU,0CACb,+BAAC,SAAI,WAAU,+CACZ;AAAA,cAAQ,oBAAC,SAAI,WAAU,uBAAuB,gBAAK;AAAA,OAElD,SAAS,aACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,iBACC,oBAAC,QAAG,WAAU,qCAAqC,iBAAM;AAAA,QAE1D,YACC,oBAAC,OAAE,WAAU,iCAAiC,oBAAS;AAAA,SAE3D;AAAA,MAGF,oBAAC,SAAK,UAAS;AAAA,OACjB,GACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,kBACI;AAAA,UACE,iBAAiB,OAAO,eAAe;AAAA,UACvC,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,QACtB,IACA;AAAA,QAGL,6BAAmB,eAAe,CAAC,mBAClC,oBAAC,SAAI,WAAU,gDACb,8BAAC,SAAI,WAAU,sBACb,+BAAC,gBAAW,WAAU,aACpB;AAAA,+BAAC,OAAE,WAAU,uCAAsC;AAAA;AAAA,YAC/C,YAAY;AAAA,YAAM;AAAA,aACtB;AAAA,UACA,qBAAC,YAAO,WAAU,2BACf;AAAA,wBAAY,UACX;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,YAAY;AAAA,gBACjB,KAAK,YAAY;AAAA,gBACjB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEF,qBAAC,SACC;AAAA,kCAAC,SAAI,WAAU,iBAAiB,sBAAY,QAAO;AAAA,cACnD,oBAAC,SAAI,WAAU,iCACZ,sBAAY,MACf;AAAA,eACF;AAAA,aACF;AAAA,WACF,GACF,GACF;AAAA;AAAA,IAEJ;AAAA,MACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/auth/auth-layout.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@mdxui/primitives/lib/utils\"\n\nexport interface AuthLayoutProps extends React.ComponentProps<\"div\"> {\n  children: React.ReactNode\n  title?: string\n  subtitle?: string\n  logo?: React.ReactNode\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction AuthLayout({\n  className,\n  children,\n  title,\n  subtitle,\n  logo,\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n  ...props\n}: AuthLayoutProps) {\n  return (\n    <div className={cn(\"min-h-screen w-full lg:grid lg:grid-cols-2\", className)} {...props}>\n      {/* Left side - Form */}\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto w-full max-w-[400px] space-y-8 px-4\">\n          {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n          {(title || subtitle) && (\n            <div className=\"space-y-2 text-center\">\n              {title && (\n                <h1 className=\"text-3xl font-bold tracking-tight\">{title}</h1>\n              )}\n              {subtitle && (\n                <p className=\"text-muted-foreground text-sm\">{subtitle}</p>\n              )}\n            </div>\n          )}\n\n          <div>{children}</div>\n        </div>\n      </div>\n\n      {/* Right side - Visual/Testimonial */}\n      <div\n        className=\"bg-muted hidden lg:block\"\n        style={\n          backgroundImage\n            ? {\n                backgroundImage: `url(${backgroundImage})`,\n                backgroundSize: \"cover\",\n                backgroundPosition: \"center\",\n              }\n            : undefined\n        }\n      >\n        {showTestimonial && testimonial && !backgroundImage && (\n          <div className=\"flex h-full items-center justify-center p-12\">\n            <div className=\"max-w-md space-y-6\">\n              <blockquote className=\"space-y-4\">\n                <p className=\"text-lg font-medium leading-relaxed\">\n                  \"{testimonial.quote}\"\n                </p>\n                <footer className=\"flex items-center gap-3\">\n                  {testimonial.avatar && (\n                    <img\n                      src={testimonial.avatar}\n                      alt={testimonial.author}\n                      className=\"size-10 rounded-full\"\n                    />\n                  )}\n                  <div>\n                    <div className=\"font-semibold\">{testimonial.author}</div>\n                    <div className=\"text-muted-foreground text-sm\">\n                      {testimonial.role}\n                    </div>\n                  </div>\n                </footer>\n              </blockquote>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { AuthLayout }\n"],"mappings":";;;AAGA,SAAS,UAAU;AAiCA,cAGP,YAHO;AAhBnB,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,qBAAC,SAAI,WAAW,GAAG,8CAA8C,SAAS,GAAI,GAAG,OAE/E;AAAA,wBAAC,SAAI,WAAU,0CACb,+BAAC,SAAI,WAAU,+CACZ;AAAA,cAAQ,oBAAC,SAAI,WAAU,uBAAuB,gBAAK;AAAA,OAElD,SAAS,aACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,iBACC,oBAAC,QAAG,WAAU,qCAAqC,iBAAM;AAAA,QAE1D,YACC,oBAAC,OAAE,WAAU,iCAAiC,oBAAS;AAAA,SAE3D;AAAA,MAGF,oBAAC,SAAK,UAAS;AAAA,OACjB,GACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,kBACI;AAAA,UACE,iBAAiB,OAAO,eAAe;AAAA,UACvC,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,QACtB,IACA;AAAA,QAGL,6BAAmB,eAAe,CAAC,mBAClC,oBAAC,SAAI,WAAU,gDACb,8BAAC,SAAI,WAAU,sBACb,+BAAC,gBAAW,WAAU,aACpB;AAAA,+BAAC,OAAE,WAAU,uCAAsC;AAAA;AAAA,YAC/C,YAAY;AAAA,YAAM;AAAA,aACtB;AAAA,UACA,qBAAC,YAAO,WAAU,2BACf;AAAA,wBAAY,UACX;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,YAAY;AAAA,gBACjB,KAAK,YAAY;AAAA,gBACjB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEF,qBAAC,SACC;AAAA,kCAAC,SAAI,WAAU,iBAAiB,sBAAY,QAAO;AAAA,cACnD,oBAAC,SAAI,WAAU,iCACZ,sBAAY,MACf;AAAA,eACF;AAAA,aACF;AAAA,WACF,GACF,GACF;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/auth/index.js

@@ -1,59 +1,18 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
 // src/auth/auth-layout.tsx
 import { cn } from "@mdxui/primitives/lib/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-function AuthLayout(_a) {
-  var _b = _a, {
-    className,
-    children,
-    title,
-    subtitle,
-    logo,
-    backgroundImage,
-    showTestimonial = false,
-    testimonial
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "title",
-    "subtitle",
-    "logo",
-    "backgroundImage",
-    "showTestimonial",
-    "testimonial"
-  ]);
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ className: cn("min-h-screen w-full lg:grid lg:grid-cols-2", className) }, props), { children: [
+function AuthLayout({
+  className,
+  children,
+  title,
+  subtitle,
+  logo,
+  backgroundImage,
+  showTestimonial = false,
+  testimonial,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen w-full lg:grid lg:grid-cols-2", className), ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[400px] space-y-8 px-4", children: [
       logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: logo }),
       (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
@@ -94,7 +53,7 @@ function AuthLayout(_a) {
         ] }) }) })
       }
     )
-  ] }));
+  ] });
 }
 
 // src/auth/login-page.tsx

package/dist/auth/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/auth/auth-layout.tsx","../../src/auth/login-page.tsx","../../src/auth/signup-page.tsx","../../src/auth/password-reset-page.tsx","../../src/auth/otp-page.tsx","../../src/auth/onboarding-page.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@mdxui/primitives/lib/utils\"\n\nexport interface AuthLayoutProps extends React.ComponentProps<\"div\"> {\n  children: React.ReactNode\n  title?: string\n  subtitle?: string\n  logo?: React.ReactNode\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction AuthLayout({\n  className,\n  children,\n  title,\n  subtitle,\n  logo,\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n  ...props\n}: AuthLayoutProps) {\n  return (\n    <div className={cn(\"min-h-screen w-full lg:grid lg:grid-cols-2\", className)} {...props}>\n      {/* Left side - Form */}\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto w-full max-w-[400px] space-y-8 px-4\">\n          {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n          {(title || subtitle) && (\n            <div className=\"space-y-2 text-center\">\n              {title && (\n                <h1 className=\"text-3xl font-bold tracking-tight\">{title}</h1>\n              )}\n              {subtitle && (\n                <p className=\"text-muted-foreground text-sm\">{subtitle}</p>\n              )}\n            </div>\n          )}\n\n          <div>{children}</div>\n        </div>\n      </div>\n\n      {/* Right side - Visual/Testimonial */}\n      <div\n        className=\"bg-muted hidden lg:block\"\n        style={\n          backgroundImage\n            ? {\n                backgroundImage: `url(${backgroundImage})`,\n                backgroundSize: \"cover\",\n                backgroundPosition: \"center\",\n              }\n            : undefined\n        }\n      >\n        {showTestimonial && testimonial && !backgroundImage && (\n          <div className=\"flex h-full items-center justify-center p-12\">\n            <div className=\"max-w-md space-y-6\">\n              <blockquote className=\"space-y-4\">\n                <p className=\"text-lg font-medium leading-relaxed\">\n                  \"{testimonial.quote}\"\n                </p>\n                <footer className=\"flex items-center gap-3\">\n                  {testimonial.avatar && (\n                    <img\n                      src={testimonial.avatar}\n                      alt={testimonial.author}\n                      className=\"size-10 rounded-full\"\n                    />\n                  )}\n                  <div>\n                    <div className=\"font-semibold\">{testimonial.author}</div>\n                    <div className=\"text-muted-foreground text-sm\">\n                      {testimonial.role}\n                    </div>\n                  </div>\n                </footer>\n              </blockquote>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { AuthLayout }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { LoginForm } from \"@mdxui/primitives/auth/login-form\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface LoginPageProps {\n  onSubmit?: (data: { email: string; password: string; rememberMe?: boolean }) => void | Promise<void>\n  onOAuthClick?: (provider: \"google\" | \"github\" | \"microsoft\") => void | Promise<void>\n  onMagicLinkClick?: (email: string) => void | Promise<void>\n  onForgotPasswordClick?: () => void\n  onSignupClick?: () => void\n  isLoading?: boolean\n  showOAuth?: boolean\n  showMagicLink?: boolean\n  oauthProviders?: Array<\"google\" | \"github\" | \"microsoft\">\n  error?: string\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction LoginPage({\n  onSubmit,\n  onOAuthClick,\n  onMagicLinkClick,\n  onForgotPasswordClick,\n  onSignupClick,\n  isLoading,\n  showOAuth = true,\n  showMagicLink = false,\n  oauthProviders = [\"google\", \"github\"],\n  error,\n  logo,\n  title = \"Welcome back\",\n  subtitle = \"Sign in to your account to continue\",\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n}: LoginPageProps) {\n  return (\n    <AuthLayout\n      logo={logo}\n      title={title}\n      subtitle={subtitle}\n      backgroundImage={backgroundImage}\n      showTestimonial={showTestimonial}\n      testimonial={testimonial}\n    >\n      <LoginForm\n        onSubmit={onSubmit}\n        onOAuthClick={onOAuthClick}\n        onMagicLinkClick={onMagicLinkClick}\n        onForgotPasswordClick={onForgotPasswordClick}\n        onSignupClick={onSignupClick}\n        isLoading={isLoading}\n        showOAuth={showOAuth}\n        showMagicLink={showMagicLink}\n        oauthProviders={oauthProviders}\n        error={error}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { LoginPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { SignupForm } from \"@mdxui/primitives/auth/signup-form\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface SignupPageProps {\n  onSubmit?: (data: {\n    fullName: string\n    email: string\n    password: string\n    confirmPassword: string\n    agreeToTerms: boolean\n  }) => void | Promise<void>\n  onOAuthClick?: (provider: \"google\" | \"github\" | \"microsoft\") => void | Promise<void>\n  onLoginClick?: () => void\n  isLoading?: boolean\n  showOAuth?: boolean\n  oauthProviders?: Array<\"google\" | \"github\" | \"microsoft\">\n  multiStep?: boolean\n  error?: string\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction SignupPage({\n  onSubmit,\n  onOAuthClick,\n  onLoginClick,\n  isLoading,\n  showOAuth = true,\n  oauthProviders = [\"google\", \"github\"],\n  multiStep = false,\n  error,\n  logo,\n  title = \"Create an account\",\n  subtitle = \"Get started with your free account\",\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n}: SignupPageProps) {\n  return (\n    <AuthLayout\n      logo={logo}\n      title={title}\n      subtitle={subtitle}\n      backgroundImage={backgroundImage}\n      showTestimonial={showTestimonial}\n      testimonial={testimonial}\n    >\n      <SignupForm\n        onSubmit={onSubmit}\n        onOAuthClick={onOAuthClick}\n        onLoginClick={onLoginClick}\n        isLoading={isLoading}\n        showOAuth={showOAuth}\n        oauthProviders={oauthProviders}\n        multiStep={multiStep}\n        error={error}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { SignupPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { PasswordResetForm } from \"@mdxui/primitives/auth/password-reset-form\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface PasswordResetPageProps {\n  mode?: \"request\" | \"confirm\"\n  onRequestSubmit?: (data: { email: string }) => void | Promise<void>\n  onConfirmSubmit?: (data: { password: string; confirmPassword: string }) => void | Promise<void>\n  onBackToLogin?: () => void\n  isLoading?: boolean\n  error?: string\n  successMessage?: string\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  backgroundImage?: string\n}\n\nfunction PasswordResetPage({\n  mode = \"request\",\n  onRequestSubmit,\n  onConfirmSubmit,\n  onBackToLogin,\n  isLoading,\n  error,\n  successMessage,\n  logo,\n  title,\n  subtitle,\n  backgroundImage,\n}: PasswordResetPageProps) {\n  const defaultTitle =\n    mode === \"request\" ? \"Reset your password\" : \"Create new password\"\n  const defaultSubtitle =\n    mode === \"request\"\n      ? \"We'll send you a link to reset your password\"\n      : \"Enter your new password below\"\n\n  return (\n    <AuthLayout\n      logo={logo}\n      title={title || defaultTitle}\n      subtitle={subtitle || defaultSubtitle}\n      backgroundImage={backgroundImage}\n    >\n      <PasswordResetForm\n        mode={mode}\n        onRequestSubmit={onRequestSubmit}\n        onConfirmSubmit={onConfirmSubmit}\n        onBackToLogin={onBackToLogin}\n        isLoading={isLoading}\n        error={error}\n        successMessage={successMessage}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { PasswordResetPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInputForm } from \"@mdxui/primitives/auth/otp-input\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface OTPPageProps {\n  onSubmit?: (data: { otp: string }) => void | Promise<void>\n  onResend?: () => void | Promise<void>\n  isLoading?: boolean\n  error?: string\n  canResend?: boolean\n  resendTimeout?: number\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  description?: string\n  backgroundImage?: string\n}\n\nfunction OTPPage({\n  onSubmit,\n  onResend,\n  isLoading,\n  error,\n  canResend = false,\n  resendTimeout = 60,\n  logo,\n  title = \"Two-Factor Authentication\",\n  subtitle = \"Enter the code from your authenticator app\",\n  description,\n  backgroundImage,\n}: OTPPageProps) {\n  return (\n    <AuthLayout logo={logo} backgroundImage={backgroundImage}>\n      <OTPInputForm\n        onSubmit={onSubmit}\n        onResend={onResend}\n        isLoading={isLoading}\n        error={error}\n        title={title}\n        description={description || subtitle}\n        canResend={canResend}\n        resendTimeout={resendTimeout}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { OTPPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { OnboardingWizard, type OnboardingStep } from \"@mdxui/primitives/auth/onboarding-wizard\"\nimport { cn } from \"@mdxui/primitives/lib/utils\"\n\nexport interface OnboardingPageProps {\n  steps: OnboardingStep[]\n  onComplete?: (data: Record<string, any>) => void | Promise<void>\n  onSkip?: () => void\n  allowSkip?: boolean\n  isLoading?: boolean\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  showProgress?: boolean\n  className?: string\n}\n\nfunction OnboardingPage({\n  steps,\n  onComplete,\n  onSkip,\n  allowSkip = false,\n  isLoading,\n  logo,\n  title = \"Welcome! Let's get you set up\",\n  subtitle = \"This will only take a few minutes\",\n  showProgress = true,\n  className,\n}: OnboardingPageProps) {\n  return (\n    <div className={cn(\"flex min-h-screen items-center justify-center p-4\", className)}>\n      <div className=\"w-full space-y-8\">\n        {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n        <OnboardingWizard\n          steps={steps}\n          onComplete={onComplete}\n          onSkip={onSkip}\n          allowSkip={allowSkip}\n          isLoading={isLoading}\n          title={title}\n          subtitle={subtitle}\n          showProgress={showProgress}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport { OnboardingPage }\n"],"mappings":"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","names":["jsx","jsx","jsx","jsx","cn","jsx","jsxs"]}
+{"version":3,"sources":["../../src/auth/auth-layout.tsx","../../src/auth/login-page.tsx","../../src/auth/signup-page.tsx","../../src/auth/password-reset-page.tsx","../../src/auth/otp-page.tsx","../../src/auth/onboarding-page.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@mdxui/primitives/lib/utils\"\n\nexport interface AuthLayoutProps extends React.ComponentProps<\"div\"> {\n  children: React.ReactNode\n  title?: string\n  subtitle?: string\n  logo?: React.ReactNode\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction AuthLayout({\n  className,\n  children,\n  title,\n  subtitle,\n  logo,\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n  ...props\n}: AuthLayoutProps) {\n  return (\n    <div className={cn(\"min-h-screen w-full lg:grid lg:grid-cols-2\", className)} {...props}>\n      {/* Left side - Form */}\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto w-full max-w-[400px] space-y-8 px-4\">\n          {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n          {(title || subtitle) && (\n            <div className=\"space-y-2 text-center\">\n              {title && (\n                <h1 className=\"text-3xl font-bold tracking-tight\">{title}</h1>\n              )}\n              {subtitle && (\n                <p className=\"text-muted-foreground text-sm\">{subtitle}</p>\n              )}\n            </div>\n          )}\n\n          <div>{children}</div>\n        </div>\n      </div>\n\n      {/* Right side - Visual/Testimonial */}\n      <div\n        className=\"bg-muted hidden lg:block\"\n        style={\n          backgroundImage\n            ? {\n                backgroundImage: `url(${backgroundImage})`,\n                backgroundSize: \"cover\",\n                backgroundPosition: \"center\",\n              }\n            : undefined\n        }\n      >\n        {showTestimonial && testimonial && !backgroundImage && (\n          <div className=\"flex h-full items-center justify-center p-12\">\n            <div className=\"max-w-md space-y-6\">\n              <blockquote className=\"space-y-4\">\n                <p className=\"text-lg font-medium leading-relaxed\">\n                  \"{testimonial.quote}\"\n                </p>\n                <footer className=\"flex items-center gap-3\">\n                  {testimonial.avatar && (\n                    <img\n                      src={testimonial.avatar}\n                      alt={testimonial.author}\n                      className=\"size-10 rounded-full\"\n                    />\n                  )}\n                  <div>\n                    <div className=\"font-semibold\">{testimonial.author}</div>\n                    <div className=\"text-muted-foreground text-sm\">\n                      {testimonial.role}\n                    </div>\n                  </div>\n                </footer>\n              </blockquote>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { AuthLayout }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { LoginForm } from \"@mdxui/primitives/auth/login-form\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface LoginPageProps {\n  onSubmit?: (data: { email: string; password: string; rememberMe?: boolean }) => void | Promise<void>\n  onOAuthClick?: (provider: \"google\" | \"github\" | \"microsoft\") => void | Promise<void>\n  onMagicLinkClick?: (email: string) => void | Promise<void>\n  onForgotPasswordClick?: () => void\n  onSignupClick?: () => void\n  isLoading?: boolean\n  showOAuth?: boolean\n  showMagicLink?: boolean\n  oauthProviders?: Array<\"google\" | \"github\" | \"microsoft\">\n  error?: string\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction LoginPage({\n  onSubmit,\n  onOAuthClick,\n  onMagicLinkClick,\n  onForgotPasswordClick,\n  onSignupClick,\n  isLoading,\n  showOAuth = true,\n  showMagicLink = false,\n  oauthProviders = [\"google\", \"github\"],\n  error,\n  logo,\n  title = \"Welcome back\",\n  subtitle = \"Sign in to your account to continue\",\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n}: LoginPageProps) {\n  return (\n    <AuthLayout\n      logo={logo}\n      title={title}\n      subtitle={subtitle}\n      backgroundImage={backgroundImage}\n      showTestimonial={showTestimonial}\n      testimonial={testimonial}\n    >\n      <LoginForm\n        onSubmit={onSubmit}\n        onOAuthClick={onOAuthClick}\n        onMagicLinkClick={onMagicLinkClick}\n        onForgotPasswordClick={onForgotPasswordClick}\n        onSignupClick={onSignupClick}\n        isLoading={isLoading}\n        showOAuth={showOAuth}\n        showMagicLink={showMagicLink}\n        oauthProviders={oauthProviders}\n        error={error}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { LoginPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { SignupForm } from \"@mdxui/primitives/auth/signup-form\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface SignupPageProps {\n  onSubmit?: (data: {\n    fullName: string\n    email: string\n    password: string\n    confirmPassword: string\n    agreeToTerms: boolean\n  }) => void | Promise<void>\n  onOAuthClick?: (provider: \"google\" | \"github\" | \"microsoft\") => void | Promise<void>\n  onLoginClick?: () => void\n  isLoading?: boolean\n  showOAuth?: boolean\n  oauthProviders?: Array<\"google\" | \"github\" | \"microsoft\">\n  multiStep?: boolean\n  error?: string\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction SignupPage({\n  onSubmit,\n  onOAuthClick,\n  onLoginClick,\n  isLoading,\n  showOAuth = true,\n  oauthProviders = [\"google\", \"github\"],\n  multiStep = false,\n  error,\n  logo,\n  title = \"Create an account\",\n  subtitle = \"Get started with your free account\",\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n}: SignupPageProps) {\n  return (\n    <AuthLayout\n      logo={logo}\n      title={title}\n      subtitle={subtitle}\n      backgroundImage={backgroundImage}\n      showTestimonial={showTestimonial}\n      testimonial={testimonial}\n    >\n      <SignupForm\n        onSubmit={onSubmit}\n        onOAuthClick={onOAuthClick}\n        onLoginClick={onLoginClick}\n        isLoading={isLoading}\n        showOAuth={showOAuth}\n        oauthProviders={oauthProviders}\n        multiStep={multiStep}\n        error={error}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { SignupPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { PasswordResetForm } from \"@mdxui/primitives/auth/password-reset-form\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface PasswordResetPageProps {\n  mode?: \"request\" | \"confirm\"\n  onRequestSubmit?: (data: { email: string }) => void | Promise<void>\n  onConfirmSubmit?: (data: { password: string; confirmPassword: string }) => void | Promise<void>\n  onBackToLogin?: () => void\n  isLoading?: boolean\n  error?: string\n  successMessage?: string\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  backgroundImage?: string\n}\n\nfunction PasswordResetPage({\n  mode = \"request\",\n  onRequestSubmit,\n  onConfirmSubmit,\n  onBackToLogin,\n  isLoading,\n  error,\n  successMessage,\n  logo,\n  title,\n  subtitle,\n  backgroundImage,\n}: PasswordResetPageProps) {\n  const defaultTitle =\n    mode === \"request\" ? \"Reset your password\" : \"Create new password\"\n  const defaultSubtitle =\n    mode === \"request\"\n      ? \"We'll send you a link to reset your password\"\n      : \"Enter your new password below\"\n\n  return (\n    <AuthLayout\n      logo={logo}\n      title={title || defaultTitle}\n      subtitle={subtitle || defaultSubtitle}\n      backgroundImage={backgroundImage}\n    >\n      <PasswordResetForm\n        mode={mode}\n        onRequestSubmit={onRequestSubmit}\n        onConfirmSubmit={onConfirmSubmit}\n        onBackToLogin={onBackToLogin}\n        isLoading={isLoading}\n        error={error}\n        successMessage={successMessage}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { PasswordResetPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInputForm } from \"@mdxui/primitives/auth/otp-input\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface OTPPageProps {\n  onSubmit?: (data: { otp: string }) => void | Promise<void>\n  onResend?: () => void | Promise<void>\n  isLoading?: boolean\n  error?: string\n  canResend?: boolean\n  resendTimeout?: number\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  description?: string\n  backgroundImage?: string\n}\n\nfunction OTPPage({\n  onSubmit,\n  onResend,\n  isLoading,\n  error,\n  canResend = false,\n  resendTimeout = 60,\n  logo,\n  title = \"Two-Factor Authentication\",\n  subtitle = \"Enter the code from your authenticator app\",\n  description,\n  backgroundImage,\n}: OTPPageProps) {\n  return (\n    <AuthLayout logo={logo} backgroundImage={backgroundImage}>\n      <OTPInputForm\n        onSubmit={onSubmit}\n        onResend={onResend}\n        isLoading={isLoading}\n        error={error}\n        title={title}\n        description={description || subtitle}\n        canResend={canResend}\n        resendTimeout={resendTimeout}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { OTPPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { OnboardingWizard, type OnboardingStep } from \"@mdxui/primitives/auth/onboarding-wizard\"\nimport { cn } from \"@mdxui/primitives/lib/utils\"\n\nexport interface OnboardingPageProps {\n  steps: OnboardingStep[]\n  onComplete?: (data: Record<string, any>) => void | Promise<void>\n  onSkip?: () => void\n  allowSkip?: boolean\n  isLoading?: boolean\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  showProgress?: boolean\n  className?: string\n}\n\nfunction OnboardingPage({\n  steps,\n  onComplete,\n  onSkip,\n  allowSkip = false,\n  isLoading,\n  logo,\n  title = \"Welcome! Let's get you set up\",\n  subtitle = \"This will only take a few minutes\",\n  showProgress = true,\n  className,\n}: OnboardingPageProps) {\n  return (\n    <div className={cn(\"flex min-h-screen items-center justify-center p-4\", className)}>\n      <div className=\"w-full space-y-8\">\n        {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n        <OnboardingWizard\n          steps={steps}\n          onComplete={onComplete}\n          onSkip={onSkip}\n          allowSkip={allowSkip}\n          isLoading={isLoading}\n          title={title}\n          subtitle={subtitle}\n          showProgress={showProgress}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport { OnboardingPage }\n"],"mappings":";AAGA,SAAS,UAAU;AAiCA,cAGP,YAHO;AAhBnB,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,qBAAC,SAAI,WAAW,GAAG,8CAA8C,SAAS,GAAI,GAAG,OAE/E;AAAA,wBAAC,SAAI,WAAU,0CACb,+BAAC,SAAI,WAAU,+CACZ;AAAA,cAAQ,oBAAC,SAAI,WAAU,uBAAuB,gBAAK;AAAA,OAElD,SAAS,aACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,iBACC,oBAAC,QAAG,WAAU,qCAAqC,iBAAM;AAAA,QAE1D,YACC,oBAAC,OAAE,WAAU,iCAAiC,oBAAS;AAAA,SAE3D;AAAA,MAGF,oBAAC,SAAK,UAAS;AAAA,OACjB,GACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,kBACI;AAAA,UACE,iBAAiB,OAAO,eAAe;AAAA,UACvC,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,QACtB,IACA;AAAA,QAGL,6BAAmB,eAAe,CAAC,mBAClC,oBAAC,SAAI,WAAU,gDACb,8BAAC,SAAI,WAAU,sBACb,+BAAC,gBAAW,WAAU,aACpB;AAAA,+BAAC,OAAE,WAAU,uCAAsC;AAAA;AAAA,YAC/C,YAAY;AAAA,YAAM;AAAA,aACtB;AAAA,UACA,qBAAC,YAAO,WAAU,2BACf;AAAA,wBAAY,UACX;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,YAAY;AAAA,gBACjB,KAAK,YAAY;AAAA,gBACjB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEF,qBAAC,SACC;AAAA,kCAAC,SAAI,WAAU,iBAAiB,sBAAY,QAAO;AAAA,cACnD,oBAAC,SAAI,WAAU,iCACZ,sBAAY,MACf;AAAA,eACF;AAAA,aACF;AAAA,WACF,GACF,GACF;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;;;AC5FA,SAAS,iBAAiB;AAsDpB,gBAAAA,YAAA;AA3BN,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,iBAAiB,CAAC,UAAU,QAAQ;AAAA,EACpC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,EAClB;AACF,GAAmB;AACjB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;ACpEA,SAAS,kBAAkB;AAwDrB,gBAAAC,YAAA;AAzBN,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,iBAAiB,CAAC,UAAU,QAAQ;AAAA,EACpC,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,EAClB;AACF,GAAoB;AAClB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;ACpEA,SAAS,yBAAyB;AA4C5B,gBAAAC,YAAA;AA3BN,SAAS,kBAAkB;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,eACJ,SAAS,YAAY,wBAAwB;AAC/C,QAAM,kBACJ,SAAS,YACL,iDACA;AAEN,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,UAAU,YAAY;AAAA,MACtB;AAAA,MAEA,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;ACvDA,SAAS,oBAAoB;AAgCvB,gBAAAC,YAAA;AAfN,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAiB;AACf,SACE,gBAAAA,KAAC,cAAW,MAAY,iBACtB,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,eAAe;AAAA,MAC5B;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;;;AC5CA,SAAS,wBAA6C;AACtD,SAAS,MAAAC,WAAU;AA6Bb,SACW,OAAAC,MADX,QAAAC,aAAA;AAdN,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,eAAe;AAAA,EACf;AACF,GAAwB;AACtB,SACE,gBAAAD,KAAC,SAAI,WAAWD,IAAG,qDAAqD,SAAS,GAC/E,0BAAAE,MAAC,SAAI,WAAU,oBACZ;AAAA,YAAQ,gBAAAD,KAAC,SAAI,WAAU,uBAAuB,gBAAK;AAAA,IAEpD,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":["jsx","jsx","jsx","jsx","cn","jsx","jsxs"]}

package/dist/auth/login-page.js

@@ -1,35 +1,4 @@
 "use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 
 // src/auth/login-page.tsx
 import { LoginForm } from "@mdxui/primitives/auth/login-form";
@@ -37,27 +6,18 @@ import { LoginForm } from "@mdxui/primitives/auth/login-form";
 // src/auth/auth-layout.tsx
 import { cn } from "@mdxui/primitives/lib/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-function AuthLayout(_a) {
-  var _b = _a, {
-    className,
-    children,
-    title,
-    subtitle,
-    logo,
-    backgroundImage,
-    showTestimonial = false,
-    testimonial
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "title",
-    "subtitle",
-    "logo",
-    "backgroundImage",
-    "showTestimonial",
-    "testimonial"
-  ]);
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ className: cn("min-h-screen w-full lg:grid lg:grid-cols-2", className) }, props), { children: [
+function AuthLayout({
+  className,
+  children,
+  title,
+  subtitle,
+  logo,
+  backgroundImage,
+  showTestimonial = false,
+  testimonial,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen w-full lg:grid lg:grid-cols-2", className), ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[400px] space-y-8 px-4", children: [
       logo && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: logo }),
       (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
@@ -98,7 +58,7 @@ function AuthLayout(_a) {
         ] }) }) })
       }
     )
-  ] }));
+  ] });
 }
 
 // src/auth/login-page.tsx

package/dist/auth/login-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/auth/login-page.tsx","../../src/auth/auth-layout.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { LoginForm } from \"@mdxui/primitives/auth/login-form\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface LoginPageProps {\n  onSubmit?: (data: { email: string; password: string; rememberMe?: boolean }) => void | Promise<void>\n  onOAuthClick?: (provider: \"google\" | \"github\" | \"microsoft\") => void | Promise<void>\n  onMagicLinkClick?: (email: string) => void | Promise<void>\n  onForgotPasswordClick?: () => void\n  onSignupClick?: () => void\n  isLoading?: boolean\n  showOAuth?: boolean\n  showMagicLink?: boolean\n  oauthProviders?: Array<\"google\" | \"github\" | \"microsoft\">\n  error?: string\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction LoginPage({\n  onSubmit,\n  onOAuthClick,\n  onMagicLinkClick,\n  onForgotPasswordClick,\n  onSignupClick,\n  isLoading,\n  showOAuth = true,\n  showMagicLink = false,\n  oauthProviders = [\"google\", \"github\"],\n  error,\n  logo,\n  title = \"Welcome back\",\n  subtitle = \"Sign in to your account to continue\",\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n}: LoginPageProps) {\n  return (\n    <AuthLayout\n      logo={logo}\n      title={title}\n      subtitle={subtitle}\n      backgroundImage={backgroundImage}\n      showTestimonial={showTestimonial}\n      testimonial={testimonial}\n    >\n      <LoginForm\n        onSubmit={onSubmit}\n        onOAuthClick={onOAuthClick}\n        onMagicLinkClick={onMagicLinkClick}\n        onForgotPasswordClick={onForgotPasswordClick}\n        onSignupClick={onSignupClick}\n        isLoading={isLoading}\n        showOAuth={showOAuth}\n        showMagicLink={showMagicLink}\n        oauthProviders={oauthProviders}\n        error={error}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { LoginPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@mdxui/primitives/lib/utils\"\n\nexport interface AuthLayoutProps extends React.ComponentProps<\"div\"> {\n  children: React.ReactNode\n  title?: string\n  subtitle?: string\n  logo?: React.ReactNode\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction AuthLayout({\n  className,\n  children,\n  title,\n  subtitle,\n  logo,\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n  ...props\n}: AuthLayoutProps) {\n  return (\n    <div className={cn(\"min-h-screen w-full lg:grid lg:grid-cols-2\", className)} {...props}>\n      {/* Left side - Form */}\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto w-full max-w-[400px] space-y-8 px-4\">\n          {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n          {(title || subtitle) && (\n            <div className=\"space-y-2 text-center\">\n              {title && (\n                <h1 className=\"text-3xl font-bold tracking-tight\">{title}</h1>\n              )}\n              {subtitle && (\n                <p className=\"text-muted-foreground text-sm\">{subtitle}</p>\n              )}\n            </div>\n          )}\n\n          <div>{children}</div>\n        </div>\n      </div>\n\n      {/* Right side - Visual/Testimonial */}\n      <div\n        className=\"bg-muted hidden lg:block\"\n        style={\n          backgroundImage\n            ? {\n                backgroundImage: `url(${backgroundImage})`,\n                backgroundSize: \"cover\",\n                backgroundPosition: \"center\",\n              }\n            : undefined\n        }\n      >\n        {showTestimonial && testimonial && !backgroundImage && (\n          <div className=\"flex h-full items-center justify-center p-12\">\n            <div className=\"max-w-md space-y-6\">\n              <blockquote className=\"space-y-4\">\n                <p className=\"text-lg font-medium leading-relaxed\">\n                  \"{testimonial.quote}\"\n                </p>\n                <footer className=\"flex items-center gap-3\">\n                  {testimonial.avatar && (\n                    <img\n                      src={testimonial.avatar}\n                      alt={testimonial.author}\n                      className=\"size-10 rounded-full\"\n                    />\n                  )}\n                  <div>\n                    <div className=\"font-semibold\">{testimonial.author}</div>\n                    <div className=\"text-muted-foreground text-sm\">\n                      {testimonial.role}\n                    </div>\n                  </div>\n                </footer>\n              </blockquote>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { AuthLayout }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,iBAAiB;;;ACA1B,SAAS,UAAU;AAiCA,cAGP,YAHO;AAhBnB,SAAS,WAAW,IAUA;AAVA,eAClB;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,EA5BF,IAoBoB,IASf,kBATe,IASf;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,qBAAC,sCAAI,WAAW,GAAG,8CAA8C,SAAS,KAAO,QAAhF,EAEC;AAAA,wBAAC,SAAI,WAAU,0CACb,+BAAC,SAAI,WAAU,+CACZ;AAAA,cAAQ,oBAAC,SAAI,WAAU,uBAAuB,gBAAK;AAAA,OAElD,SAAS,aACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,iBACC,oBAAC,QAAG,WAAU,qCAAqC,iBAAM;AAAA,QAE1D,YACC,oBAAC,OAAE,WAAU,iCAAiC,oBAAS;AAAA,SAE3D;AAAA,MAGF,oBAAC,SAAK,UAAS;AAAA,OACjB,GACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,kBACI;AAAA,UACE,iBAAiB,OAAO,eAAe;AAAA,UACvC,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,QACtB,IACA;AAAA,QAGL,6BAAmB,eAAe,CAAC,mBAClC,oBAAC,SAAI,WAAU,gDACb,8BAAC,SAAI,WAAU,sBACb,+BAAC,gBAAW,WAAU,aACpB;AAAA,+BAAC,OAAE,WAAU,uCAAsC;AAAA;AAAA,YAC/C,YAAY;AAAA,YAAM;AAAA,aACtB;AAAA,UACA,qBAAC,YAAO,WAAU,2BACf;AAAA,wBAAY,UACX;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,YAAY;AAAA,gBACjB,KAAK,YAAY;AAAA,gBACjB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEF,qBAAC,SACC;AAAA,kCAAC,SAAI,WAAU,iBAAiB,sBAAY,QAAO;AAAA,cACnD,oBAAC,SAAI,WAAU,iCACZ,sBAAY,MACf;AAAA,eACF;AAAA,aACF;AAAA,WACF,GACF,GACF;AAAA;AAAA,IAEJ;AAAA,MACF;AAEJ;;;ADtCM,gBAAAA,YAAA;AA3BN,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,iBAAiB,CAAC,UAAU,QAAQ;AAAA,EACpC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,EAClB;AACF,GAAmB;AACjB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["jsx"]}
+{"version":3,"sources":["../../src/auth/login-page.tsx","../../src/auth/auth-layout.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { LoginForm } from \"@mdxui/primitives/auth/login-form\"\nimport { AuthLayout } from \"./auth-layout\"\n\nexport interface LoginPageProps {\n  onSubmit?: (data: { email: string; password: string; rememberMe?: boolean }) => void | Promise<void>\n  onOAuthClick?: (provider: \"google\" | \"github\" | \"microsoft\") => void | Promise<void>\n  onMagicLinkClick?: (email: string) => void | Promise<void>\n  onForgotPasswordClick?: () => void\n  onSignupClick?: () => void\n  isLoading?: boolean\n  showOAuth?: boolean\n  showMagicLink?: boolean\n  oauthProviders?: Array<\"google\" | \"github\" | \"microsoft\">\n  error?: string\n  logo?: React.ReactNode\n  title?: string\n  subtitle?: string\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction LoginPage({\n  onSubmit,\n  onOAuthClick,\n  onMagicLinkClick,\n  onForgotPasswordClick,\n  onSignupClick,\n  isLoading,\n  showOAuth = true,\n  showMagicLink = false,\n  oauthProviders = [\"google\", \"github\"],\n  error,\n  logo,\n  title = \"Welcome back\",\n  subtitle = \"Sign in to your account to continue\",\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n}: LoginPageProps) {\n  return (\n    <AuthLayout\n      logo={logo}\n      title={title}\n      subtitle={subtitle}\n      backgroundImage={backgroundImage}\n      showTestimonial={showTestimonial}\n      testimonial={testimonial}\n    >\n      <LoginForm\n        onSubmit={onSubmit}\n        onOAuthClick={onOAuthClick}\n        onMagicLinkClick={onMagicLinkClick}\n        onForgotPasswordClick={onForgotPasswordClick}\n        onSignupClick={onSignupClick}\n        isLoading={isLoading}\n        showOAuth={showOAuth}\n        showMagicLink={showMagicLink}\n        oauthProviders={oauthProviders}\n        error={error}\n      />\n    </AuthLayout>\n  )\n}\n\nexport { LoginPage }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@mdxui/primitives/lib/utils\"\n\nexport interface AuthLayoutProps extends React.ComponentProps<\"div\"> {\n  children: React.ReactNode\n  title?: string\n  subtitle?: string\n  logo?: React.ReactNode\n  backgroundImage?: string\n  showTestimonial?: boolean\n  testimonial?: {\n    quote: string\n    author: string\n    role: string\n    avatar?: string\n  }\n}\n\nfunction AuthLayout({\n  className,\n  children,\n  title,\n  subtitle,\n  logo,\n  backgroundImage,\n  showTestimonial = false,\n  testimonial,\n  ...props\n}: AuthLayoutProps) {\n  return (\n    <div className={cn(\"min-h-screen w-full lg:grid lg:grid-cols-2\", className)} {...props}>\n      {/* Left side - Form */}\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto w-full max-w-[400px] space-y-8 px-4\">\n          {logo && <div className=\"flex justify-center\">{logo}</div>}\n\n          {(title || subtitle) && (\n            <div className=\"space-y-2 text-center\">\n              {title && (\n                <h1 className=\"text-3xl font-bold tracking-tight\">{title}</h1>\n              )}\n              {subtitle && (\n                <p className=\"text-muted-foreground text-sm\">{subtitle}</p>\n              )}\n            </div>\n          )}\n\n          <div>{children}</div>\n        </div>\n      </div>\n\n      {/* Right side - Visual/Testimonial */}\n      <div\n        className=\"bg-muted hidden lg:block\"\n        style={\n          backgroundImage\n            ? {\n                backgroundImage: `url(${backgroundImage})`,\n                backgroundSize: \"cover\",\n                backgroundPosition: \"center\",\n              }\n            : undefined\n        }\n      >\n        {showTestimonial && testimonial && !backgroundImage && (\n          <div className=\"flex h-full items-center justify-center p-12\">\n            <div className=\"max-w-md space-y-6\">\n              <blockquote className=\"space-y-4\">\n                <p className=\"text-lg font-medium leading-relaxed\">\n                  \"{testimonial.quote}\"\n                </p>\n                <footer className=\"flex items-center gap-3\">\n                  {testimonial.avatar && (\n                    <img\n                      src={testimonial.avatar}\n                      alt={testimonial.author}\n                      className=\"size-10 rounded-full\"\n                    />\n                  )}\n                  <div>\n                    <div className=\"font-semibold\">{testimonial.author}</div>\n                    <div className=\"text-muted-foreground text-sm\">\n                      {testimonial.role}\n                    </div>\n                  </div>\n                </footer>\n              </blockquote>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { AuthLayout }\n"],"mappings":";;;AAGA,SAAS,iBAAiB;;;ACA1B,SAAS,UAAU;AAiCA,cAGP,YAHO;AAhBnB,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,qBAAC,SAAI,WAAW,GAAG,8CAA8C,SAAS,GAAI,GAAG,OAE/E;AAAA,wBAAC,SAAI,WAAU,0CACb,+BAAC,SAAI,WAAU,+CACZ;AAAA,cAAQ,oBAAC,SAAI,WAAU,uBAAuB,gBAAK;AAAA,OAElD,SAAS,aACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,iBACC,oBAAC,QAAG,WAAU,qCAAqC,iBAAM;AAAA,QAE1D,YACC,oBAAC,OAAE,WAAU,iCAAiC,oBAAS;AAAA,SAE3D;AAAA,MAGF,oBAAC,SAAK,UAAS;AAAA,OACjB,GACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,kBACI;AAAA,UACE,iBAAiB,OAAO,eAAe;AAAA,UACvC,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,QACtB,IACA;AAAA,QAGL,6BAAmB,eAAe,CAAC,mBAClC,oBAAC,SAAI,WAAU,gDACb,8BAAC,SAAI,WAAU,sBACb,+BAAC,gBAAW,WAAU,aACpB;AAAA,+BAAC,OAAE,WAAU,uCAAsC;AAAA;AAAA,YAC/C,YAAY;AAAA,YAAM;AAAA,aACtB;AAAA,UACA,qBAAC,YAAO,WAAU,2BACf;AAAA,wBAAY,UACX;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,YAAY;AAAA,gBACjB,KAAK,YAAY;AAAA,gBACjB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEF,qBAAC,SACC;AAAA,kCAAC,SAAI,WAAU,iBAAiB,sBAAY,QAAO;AAAA,cACnD,oBAAC,SAAI,WAAU,iCACZ,sBAAY,MACf;AAAA,eACF;AAAA,aACF;AAAA,WACF,GACF,GACF;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;;;ADtCM,gBAAAA,YAAA;AA3BN,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,iBAAiB,CAAC,UAAU,QAAQ;AAAA,EACpC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,EAClB;AACF,GAAmB;AACjB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["jsx"]}