@mdxui/cockpit 0.2.0

package/README.md

@@ -0,0 +1,136 @@
+# @mdxui/cockpit
+
+App template components for mdxui - developer dashboards, auth flows, and SaaS patterns.
+
+## Installation
+
+```bash
+npm install @mdxui/cockpit @mdxui/primitives @mdxui/themes mdxui
+# or
+pnpm add @mdxui/cockpit @mdxui/primitives @mdxui/themes mdxui
+```
+
+## Quick Start
+
+```tsx
+import { App, DeveloperDashboard } from '@mdxui/cockpit'
+
+export default function Dashboard() {
+  return (
+    <App
+      branding={{
+        name: 'My App',
+        logo: <Logo />,
+      }}
+      theme="default"
+    />
+  )
+}
+```
+
+## Auth Pages
+
+```tsx
+import { LoginPage, SignupPage, OTPPage } from '@mdxui/cockpit/auth'
+
+// Login page with all options
+<LoginPage
+  logo={<Logo />}
+  title="Welcome back"
+  onSubmit={handleLogin}
+  providers={['google', 'github']}
+/>
+
+// Signup with onboarding
+<SignupPage
+  logo={<Logo />}
+  onSubmit={handleSignup}
+/>
+
+// OTP verification
+<OTPPage
+  logo={<Logo />}
+  email="user@example.com"
+  onVerify={handleVerify}
+/>
+```
+
+## Components
+
+### Main Dashboard
+- `App` / `DeveloperDashboard` - Full dashboard wrapper with routing
+- `DashboardLayout` - Layout with sidebar navigation
+- `DashboardGrid` - Responsive grid for dashboard widgets
+
+### Auth Components
+- `AuthLayout` - Shared auth page layout
+- `LoginPage` - Login with social providers
+- `SignupPage` - Registration flow
+- `PasswordResetPage` - Password recovery
+- `OTPPage` - One-time password verification
+- `OnboardingPage` - User onboarding wizard
+
+### Dashboard Widgets
+- `KPICard` - Key performance indicator cards
+- `AreaChart` - Area chart visualization
+- `BarChart` - Bar chart visualization
+- `LineChart` - Line chart visualization
+- `DataTable` - Sortable, filterable data table
+- `ActivityFeed` - Recent activity timeline
+
+### App Features
+- `APIKeyManager` - API key creation and management
+- `TeamManager` - Team member management
+- `Billing` - Subscription and billing UI
+- `UserProfile` - User profile settings
+- `SettingsPage` - App settings
+
+### Navigation
+- `NavMain` - Main navigation menu
+- `NavUser` - User menu dropdown
+- `TeamSwitcher` - Workspace/team switcher
+- `CommandPalette` - Keyboard-driven command palette
+
+### Theme System
+```tsx
+import { useThemeStore, ThemeScript } from '@mdxui/cockpit/themes'
+
+// In your root layout
+<ThemeScript />
+
+// Toggle theme
+const { theme, setTheme } = useThemeStore()
+```
+
+## Exports
+
+```tsx
+// Main export
+import { App, DeveloperDashboard } from '@mdxui/cockpit'
+
+// Developer components
+import { KPICard, DataTable } from '@mdxui/cockpit/developer'
+
+// Auth pages
+import { LoginPage, SignupPage } from '@mdxui/cockpit/auth'
+
+// Theme utilities
+import { useThemeStore, ThemeScript } from '@mdxui/cockpit/themes'
+```
+
+## Peer Dependencies
+
+- `react` ^18.0.0 || ^19.0.0
+- `@mdxui/primitives` - Base UI components
+- `@mdxui/themes` - Theme system
+- `mdxui` - Core types and contracts
+
+## Links
+
+- [Documentation](https://mdxui.dev)
+- [GitHub](https://github.com/dot-do/ui)
+- [npm](https://www.npmjs.com/package/@mdxui/cockpit)
+
+## License
+
+MIT

package/dist/auth/auth-layout.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface AuthLayoutProps extends React.ComponentProps<"div"> {
+    children: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    logo?: React.ReactNode;
+    backgroundImage?: string;
+    showTestimonial?: boolean;
+    testimonial?: {
+        quote: string;
+        author: string;
+        role: string;
+        avatar?: string;
+    };
+}
+declare function AuthLayout({ className, children, title, subtitle, logo, backgroundImage, showTestimonial, testimonial, ...props }: AuthLayoutProps): react_jsx_runtime.JSX.Element;
+
+export { AuthLayout, type AuthLayoutProps };

package/dist/auth/auth-layout.js

@@ -0,0 +1,103 @@
+"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: [
+    /* @__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: [
+        title && /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "bg-muted hidden lg:block",
+        style: backgroundImage ? {
+          backgroundImage: `url(${backgroundImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center"
+        } : void 0,
+        children: showTestimonial && testimonial && !backgroundImage && /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-12", children: /* @__PURE__ */ jsx("div", { className: "max-w-md space-y-6", children: /* @__PURE__ */ jsxs("blockquote", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-lg font-medium leading-relaxed", children: [
+            '"',
+            testimonial.quote,
+            '"'
+          ] }),
+          /* @__PURE__ */ jsxs("footer", { className: "flex items-center gap-3", children: [
+            testimonial.avatar && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: testimonial.avatar,
+                alt: testimonial.author,
+                className: "size-10 rounded-full"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "font-semibold", children: testimonial.author }),
+              /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: testimonial.role })
+            ] })
+          ] })
+        ] }) }) })
+      }
+    )
+  ] }));
+}
+export {
+  AuthLayout
+};
+//# sourceMappingURL=auth-layout.js.map

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

@@ -0,0 +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":[]}

package/dist/auth/index.d.ts

@@ -0,0 +1,9 @@
+export { AuthLayout, AuthLayoutProps } from './auth-layout.js';
+export { LoginPage, LoginPageProps } from './login-page.js';
+export { SignupPage, SignupPageProps } from './signup-page.js';
+export { PasswordResetPage, PasswordResetPageProps } from './password-reset-page.js';
+export { OTPPage, OTPPageProps } from './otp-page.js';
+export { OnboardingPage, OnboardingPageProps } from './onboarding-page.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mdxui/primitives/auth/onboarding-wizard';

package/dist/auth/index.js

@@ -0,0 +1,307 @@
+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: [
+    /* @__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: [
+        title && /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "bg-muted hidden lg:block",
+        style: backgroundImage ? {
+          backgroundImage: `url(${backgroundImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center"
+        } : void 0,
+        children: showTestimonial && testimonial && !backgroundImage && /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-12", children: /* @__PURE__ */ jsx("div", { className: "max-w-md space-y-6", children: /* @__PURE__ */ jsxs("blockquote", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-lg font-medium leading-relaxed", children: [
+            '"',
+            testimonial.quote,
+            '"'
+          ] }),
+          /* @__PURE__ */ jsxs("footer", { className: "flex items-center gap-3", children: [
+            testimonial.avatar && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: testimonial.avatar,
+                alt: testimonial.author,
+                className: "size-10 rounded-full"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "font-semibold", children: testimonial.author }),
+              /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: testimonial.role })
+            ] })
+          ] })
+        ] }) }) })
+      }
+    )
+  ] }));
+}
+
+// src/auth/login-page.tsx
+import { LoginForm } from "@mdxui/primitives/auth/login-form";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function LoginPage({
+  onSubmit,
+  onOAuthClick,
+  onMagicLinkClick,
+  onForgotPasswordClick,
+  onSignupClick,
+  isLoading,
+  showOAuth = true,
+  showMagicLink = false,
+  oauthProviders = ["google", "github"],
+  error,
+  logo,
+  title = "Welcome back",
+  subtitle = "Sign in to your account to continue",
+  backgroundImage,
+  showTestimonial = false,
+  testimonial
+}) {
+  return /* @__PURE__ */ jsx2(
+    AuthLayout,
+    {
+      logo,
+      title,
+      subtitle,
+      backgroundImage,
+      showTestimonial,
+      testimonial,
+      children: /* @__PURE__ */ jsx2(
+        LoginForm,
+        {
+          onSubmit,
+          onOAuthClick,
+          onMagicLinkClick,
+          onForgotPasswordClick,
+          onSignupClick,
+          isLoading,
+          showOAuth,
+          showMagicLink,
+          oauthProviders,
+          error
+        }
+      )
+    }
+  );
+}
+
+// src/auth/signup-page.tsx
+import { SignupForm } from "@mdxui/primitives/auth/signup-form";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function SignupPage({
+  onSubmit,
+  onOAuthClick,
+  onLoginClick,
+  isLoading,
+  showOAuth = true,
+  oauthProviders = ["google", "github"],
+  multiStep = false,
+  error,
+  logo,
+  title = "Create an account",
+  subtitle = "Get started with your free account",
+  backgroundImage,
+  showTestimonial = false,
+  testimonial
+}) {
+  return /* @__PURE__ */ jsx3(
+    AuthLayout,
+    {
+      logo,
+      title,
+      subtitle,
+      backgroundImage,
+      showTestimonial,
+      testimonial,
+      children: /* @__PURE__ */ jsx3(
+        SignupForm,
+        {
+          onSubmit,
+          onOAuthClick,
+          onLoginClick,
+          isLoading,
+          showOAuth,
+          oauthProviders,
+          multiStep,
+          error
+        }
+      )
+    }
+  );
+}
+
+// src/auth/password-reset-page.tsx
+import { PasswordResetForm } from "@mdxui/primitives/auth/password-reset-form";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function PasswordResetPage({
+  mode = "request",
+  onRequestSubmit,
+  onConfirmSubmit,
+  onBackToLogin,
+  isLoading,
+  error,
+  successMessage,
+  logo,
+  title,
+  subtitle,
+  backgroundImage
+}) {
+  const defaultTitle = mode === "request" ? "Reset your password" : "Create new password";
+  const defaultSubtitle = mode === "request" ? "We'll send you a link to reset your password" : "Enter your new password below";
+  return /* @__PURE__ */ jsx4(
+    AuthLayout,
+    {
+      logo,
+      title: title || defaultTitle,
+      subtitle: subtitle || defaultSubtitle,
+      backgroundImage,
+      children: /* @__PURE__ */ jsx4(
+        PasswordResetForm,
+        {
+          mode,
+          onRequestSubmit,
+          onConfirmSubmit,
+          onBackToLogin,
+          isLoading,
+          error,
+          successMessage
+        }
+      )
+    }
+  );
+}
+
+// src/auth/otp-page.tsx
+import { OTPInputForm } from "@mdxui/primitives/auth/otp-input";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function OTPPage({
+  onSubmit,
+  onResend,
+  isLoading,
+  error,
+  canResend = false,
+  resendTimeout = 60,
+  logo,
+  title = "Two-Factor Authentication",
+  subtitle = "Enter the code from your authenticator app",
+  description,
+  backgroundImage
+}) {
+  return /* @__PURE__ */ jsx5(AuthLayout, { logo, backgroundImage, children: /* @__PURE__ */ jsx5(
+    OTPInputForm,
+    {
+      onSubmit,
+      onResend,
+      isLoading,
+      error,
+      title,
+      description: description || subtitle,
+      canResend,
+      resendTimeout
+    }
+  ) });
+}
+
+// src/auth/onboarding-page.tsx
+import { OnboardingWizard } from "@mdxui/primitives/auth/onboarding-wizard";
+import { cn as cn2 } from "@mdxui/primitives/lib/utils";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function OnboardingPage({
+  steps,
+  onComplete,
+  onSkip,
+  allowSkip = false,
+  isLoading,
+  logo,
+  title = "Welcome! Let's get you set up",
+  subtitle = "This will only take a few minutes",
+  showProgress = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: cn2("flex min-h-screen items-center justify-center p-4", className), children: /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-8", children: [
+    logo && /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: logo }),
+    /* @__PURE__ */ jsx6(
+      OnboardingWizard,
+      {
+        steps,
+        onComplete,
+        onSkip,
+        allowSkip,
+        isLoading,
+        title,
+        subtitle,
+        showProgress
+      }
+    )
+  ] }) });
+}
+export {
+  AuthLayout,
+  LoginPage,
+  OTPPage,
+  OnboardingPage,
+  PasswordResetPage,
+  SignupPage
+};
+//# sourceMappingURL=index.js.map

package/dist/auth/index.js.map

@@ -0,0 +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"]}

package/dist/auth/login-page.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface LoginPageProps {
+    onSubmit?: (data: {
+        email: string;
+        password: string;
+        rememberMe?: boolean;
+    }) => void | Promise<void>;
+    onOAuthClick?: (provider: "google" | "github" | "microsoft") => void | Promise<void>;
+    onMagicLinkClick?: (email: string) => void | Promise<void>;
+    onForgotPasswordClick?: () => void;
+    onSignupClick?: () => void;
+    isLoading?: boolean;
+    showOAuth?: boolean;
+    showMagicLink?: boolean;
+    oauthProviders?: Array<"google" | "github" | "microsoft">;
+    error?: string;
+    logo?: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    backgroundImage?: string;
+    showTestimonial?: boolean;
+    testimonial?: {
+        quote: string;
+        author: string;
+        role: string;
+        avatar?: string;
+    };
+}
+declare function LoginPage({ onSubmit, onOAuthClick, onMagicLinkClick, onForgotPasswordClick, onSignupClick, isLoading, showOAuth, showMagicLink, oauthProviders, error, logo, title, subtitle, backgroundImage, showTestimonial, testimonial, }: LoginPageProps): react_jsx_runtime.JSX.Element;
+
+export { LoginPage, type LoginPageProps };