doct-ui-auth-kit 1.0.0

package/README.md

@@ -0,0 +1,266 @@
+# doct-ui-auth-kit
+
+A composable React auth SDK for building authentication and onboarding experiences. Built with React composition patterns for maximum flexibility and scalability.
+
+## Install
+
+```bash
+npm install doct-ui-auth-kit
+```
+
+Peer dependencies (install in your app if not already present):
+
+```bash
+npm install react react-dom docthub-core-components react-hook-form zod
+```
+
+## Consumer imports
+
+Install the package and import components, layouts, and types from the library:
+
+```tsx
+import {
+  AuthLayout,
+  OtpVerification,
+  type OtpVerificationProps,
+} from 'doct-ui-auth-kit';
+
+function Example() {
+  const handleSubmit: OtpVerificationProps['onSubmit'] = (otp) => {
+    // handle OTP
+  };
+
+  return (
+    <AuthLayout.Root variant="mobile" maxWidth="sm">
+      <AuthLayout.Main>
+        <AuthLayout.Body>
+          <OtpVerification
+            mode="phone"
+            recipientDisplay="+91 9825910X0X"
+            onSubmit={handleSubmit}
+          />
+        </AuthLayout.Body>
+      </AuthLayout.Main>
+    </AuthLayout.Root>
+  );
+}
+```
+
+## Components
+
+### AuthLayout
+
+A compound component system for authentication pages using composition pattern. Provides consistent spacing, responsive centering, and flexible content organization.
+
+#### Design Philosophy
+
+The `AuthLayout` uses compound components (slot-based pattern) to provide maximum flexibility. Each slot can be independently composed, reordered, or omitted based on your needs.
+
+#### Usage
+
+```tsx
+import { AuthLayout } from '@/components/layout';
+
+<AuthLayout.Root variant="desktop" maxWidth="md">
+  <AuthLayout.Header>
+    <EnterpriseLoginBadge />
+  </AuthLayout.Header>
+  <AuthLayout.Main>
+    <AuthLayout.Logo>
+      <img src="/logo.svg" alt="Docthub" />
+    </AuthLayout.Logo>
+    <AuthLayout.Title>
+      <h1>The Healthcare Career App</h1>
+    </AuthLayout.Title>
+    <AuthLayout.Description>
+      <p>Continue to Signup, If you already have an account we'll log you in.</p>
+    </AuthLayout.Description>
+    <AuthLayout.Body>
+      <button>Continue with Mobile</button>
+      <button>Continue with Email</button>
+    </AuthLayout.Body>
+  </AuthLayout.Main>
+  <AuthLayout.Footer>
+    <p>Terms and Privacy links</p>
+  </AuthLayout.Footer>
+</AuthLayout.Root>
+```
+
+#### Components
+
+**`AuthLayout.Root`**
+- Main container providing layout context to all child slots
+- Props:
+  - `variant?: 'mobile' | 'desktop'` - Layout variant (default: 'mobile')
+  - `maxWidth?: 'sm' | 'md' | 'lg'` - Content width constraint (default: 'sm')
+  - `className?: string` - Additional root className
+  - `contentClassName?: string` - Additional content wrapper className
+
+**`AuthLayout.Header`**
+- Optional header slot, renders top-right in desktop variant, above logo in mobile
+
+**`AuthLayout.Main`**
+- Main content wrapper that centers and constrains width of inner slots
+
+**`AuthLayout.Logo`**
+- Logo slot with centered alignment
+
+**`AuthLayout.Title`**
+- Title slot with centered alignment
+
+**`AuthLayout.Description`**
+- Description slot with centered alignment
+
+**`AuthLayout.Body`**
+- Main content area for forms, buttons, etc. with vertical spacing
+
+**`AuthLayout.Footer`**
+- Optional footer slot for terms, privacy links, etc.
+
+#### Benefits of Composition Pattern
+
+- **Flexible ordering**: Rearrange slots as needed without prop drilling
+- **Selective rendering**: Only include the slots you need
+- **Type safety**: Each slot has its own typed props
+- **Extensibility**: Easy to add custom slots without breaking existing APIs
+- **Better DX**: Clear component hierarchy in JSX
+
+### MainLayout
+
+Two-panel layout for authentication pages with marketing content on the left and auth content on the right.
+
+#### Usage
+
+```tsx
+import { MainLayout } from '@/components/layout';
+import { AuthLayout } from '@/components/layout';
+
+<MainLayout
+  sliderImages={['/image1.jpg', '/image2.jpg', '/image3.jpg']}
+  sliderAutoPlayInterval={5000}
+  ctaText="Get Healthcare Career App Now!"
+>
+  <AuthLayout.Root variant="desktop" maxWidth="sm" className="bg-transparent">
+    <AuthLayout.Header>
+      <EnterpriseLoginBadge />
+    </AuthLayout.Header>
+    <AuthLayout.Main>
+      <AuthLayout.Logo>...</AuthLayout.Logo>
+      <AuthLayout.Title>...</AuthLayout.Title>
+      <AuthLayout.Body>...</AuthLayout.Body>
+    </AuthLayout.Main>
+    <AuthLayout.Footer>...</AuthLayout.Footer>
+  </AuthLayout.Root>
+</MainLayout>
+```
+
+#### Props
+
+- `sliderImages?: string[]` - Array of image URLs for the slider (default: [])
+- `sliderAutoPlayInterval?: number` - Auto-play interval in milliseconds (default: 5000, 0 to disable)
+- `ctaText?: ReactNode | null` - Call-to-action text, set to null to hide
+- `className?: string` - Additional root className
+- `marketingClassName?: string` - Additional className for left marketing panel
+- `contentClassName?: string` - Additional className for right content panel
+- `children: ReactNode` - Auth content (typically AuthLayout.Root)
+
+### ImageSlider
+
+Image carousel component with indicator dots. Supports both controlled and uncontrolled modes.
+
+#### Usage (Uncontrolled)
+
+```tsx
+import { ImageSlider } from '@/components/layout';
+
+<ImageSlider
+  images={['/image1.jpg', '/image2.jpg']}
+  autoPlayInterval={3000}
+  onSlideChange={(index) => console.log('Slide changed to', index)}
+/>
+```
+
+#### Usage (Controlled)
+
+```tsx
+import { ImageSlider } from '@/components/layout';
+import { useState } from 'react';
+
+const [activeIndex, setActiveIndex] = useState(0);
+
+<ImageSlider
+  images={['/image1.jpg', '/image2.jpg']}
+  activeIndex={activeIndex}
+  onSlideChange={setActiveIndex}
+  onNavigate={setActiveIndex}
+  autoPlayInterval={5000}
+/>
+```
+
+#### Props
+
+- `images: string[]` - Array of image URLs
+- `autoPlayInterval?: number` - Auto-play interval in ms (default: 5000, 0 to disable)
+- `className?: string` - Additional root className
+- `hideIndicators?: boolean` - Hide built-in indicators (default: false)
+- `onSlideChange?: (index: number) => void` - Callback when slide changes
+- `activeIndex?: number` - Controlled active index
+- `onNavigate?: (index: number) => void` - Callback for manual navigation in controlled mode
+
+## Migration Guide
+
+If you were using the old prop-based `AuthLayout`, here's how to migrate:
+
+### Before (Old API)
+
+```tsx
+<AuthLayout
+  header={<Header />}
+  logo={<Logo />}
+  title="Welcome"
+  description="Sign in to continue"
+  footer={<Footer />}
+>
+  <LoginForm />
+</AuthLayout>
+```
+
+### After (New Compound API)
+
+```tsx
+<AuthLayout.Root variant="mobile" maxWidth="sm">
+  <AuthLayout.Header>
+    <Header />
+  </AuthLayout.Header>
+  <AuthLayout.Main>
+    <AuthLayout.Logo>
+      <Logo />
+    </AuthLayout.Logo>
+    <AuthLayout.Title>Welcome</AuthLayout.Title>
+    <AuthLayout.Description>Sign in to continue</AuthLayout.Description>
+    <AuthLayout.Body>
+      <LoginForm />
+    </AuthLayout.Body>
+  </AuthLayout.Main>
+  <AuthLayout.Footer>
+    <Footer />
+  </AuthLayout.Footer>
+</AuthLayout.Root>
+```
+
+## Documentation
+
+See Storybook for interactive examples and visual documentation:
+
+```bash
+npm run storybook
+```
+
+## Publishing to npm
+
+1. **Login** (one-time): `npm login`
+2. **Build** (runs automatically on publish): `npm run build`
+3. **Publish**:
+   - First release: `npm publish`
+   - Scoped package (if name is taken): set `"name": "@your-org/doct-ui-auth-kit"` then `npm publish --access public`
+4. **Use in another project**: `npm install doct-ui-auth-kit`

package/dist/adapters/http-auth-adapter.d.ts

@@ -0,0 +1,11 @@
+/**
+ * HTTP adapter that calls a compatible auth API (e.g. doct-auth-mock-api).
+ * Use with SSOAuthProvider: apiAdapter: createHttpAuthAdapter('http://localhost:3001')
+ */
+import type { AuthApiAdapter } from '@/core/auth-api-adapter';
+/**
+ * Creates an AuthApiAdapter that calls the given API base URL.
+ * Expects routes: POST /api/auth/send-otp, verify-otp, complete-profile,
+ * authenticate-provider, validate-session, refresh-session.
+ */
+export declare function createHttpAuthAdapter(baseUrl: string): AuthApiAdapter;

package/dist/adapters/index.d.ts

@@ -0,0 +1 @@
+export { createHttpAuthAdapter } from './http-auth-adapter';

package/dist/auth-methods/apple.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Apple Sign-In (future-ready stub).
+ * Implement when backend supports Apple ID credential validation.
+ */
+export interface UseAppleSignInOptions {
+    /** Apple client ID (Services ID). */
+    clientId: string;
+    /** Redirect URI registered in Apple Developer. */
+    redirectUri: string;
+    /** Callback when user signs in; receives the authorization code or id_token. */
+    onCredential: (credential: string) => void;
+}
+/**
+ * Stub: Apple Sign-In hook. Not implemented yet.
+ * Use adapter.authenticateWithProvider({ provider: 'apple', credential }) when you have the token.
+ */
+export declare function useAppleSignIn(_options: UseAppleSignInOptions): {
+    triggerSignIn: () => void;
+};

package/dist/auth-methods/google.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+declare global {
+    interface Window {
+        google?: {
+            accounts: {
+                id: {
+                    initialize: (config: {
+                        client_id: string;
+                        callback: (response: {
+                            credential: string;
+                        }) => void;
+                        auto_select?: boolean;
+                    }) => void;
+                    prompt: (momentListener?: (moment: {
+                        getMomentType: () => string;
+                    }) => void) => void;
+                    renderButton: (element: HTMLElement, options: {
+                        theme?: string;
+                        size?: string;
+                        type?: string;
+                        text?: string;
+                    }) => void;
+                };
+            };
+        };
+    }
+}
+export interface UseGoogleOneTapOptions {
+    /** Google OAuth 2.0 client ID. */
+    clientId: string;
+    /** Callback when user signs in with Google; receives the ID token (credential). */
+    onCredential: (credential: string) => void;
+    /** When true, show One Tap prompt after init. Default true. */
+    enabled?: boolean;
+}
+/**
+ * Loads Google Identity Services and optionally shows One Tap prompt.
+ * Call onCredential with the ID token to pass to adapter.authenticateWithProvider.
+ */
+export declare function useGoogleOneTap({ clientId, onCredential, enabled, }: UseGoogleOneTapOptions): {
+    triggerOneTap: () => void;
+};
+export interface GoogleSignInButtonProps {
+    /** Google OAuth 2.0 client ID. */
+    clientId: string;
+    /** Callback when user signs in; receives the ID token. */
+    onCredential: (credential: string) => void;
+    /** Optional container ref (when using the hook directly). */
+    containerRef?: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Hook: renders the Google Sign-In button into the given container.
+ * Ensure the container is in the DOM (e.g. use a ref on a div).
+ */
+export declare function useGoogleSignInButton({ clientId, onCredential, containerRef, }: GoogleSignInButtonProps): void;
+export interface GoogleSignInButtonComponentProps {
+    clientId: string;
+    onCredential: (credential: string) => void;
+    children?: ReactNode;
+}
+/**
+ * Component: renders a div that is filled with the Google-branded sign-in button.
+ */
+export declare function GoogleSignInButton({ clientId, onCredential, }: GoogleSignInButtonComponentProps): React.ReactElement;

package/dist/auth-methods/index.d.ts

@@ -0,0 +1,2 @@
+export { type UseAppleSignInOptions, useAppleSignIn } from './apple';
+export { GoogleSignInButton, type GoogleSignInButtonComponentProps, type GoogleSignInButtonProps, type UseGoogleOneTapOptions, useGoogleOneTap, useGoogleSignInButton, } from './google';

package/dist/components/auth/repeat-login.d.ts

@@ -0,0 +1,24 @@
+export interface RepeatLoginProps {
+    /**
+     * Last used authentication method shown in the description and primary button label.
+     * Example: "Mobile", "Email".
+     *
+     * @default "Mobile"
+     */
+    lastUsedMethod?: string;
+    /** Handler for the primary action (continue with last used method). */
+    onContinueWithLastMethod?: () => void;
+    /** Handler for the secondary action (choose another method). */
+    onUseAnotherMethod?: () => void;
+}
+/**
+ * Repeat login experience for returning users.
+ *
+ * Renders the central auth card used in the "USER LOGIN SCREEN - REPEAT"
+ * Figma design, including title, description and two actions.
+ *
+ * This component is layout-aware and is intended to be used inside
+ * an existing `AuthLayout.Root` so that it can adapt between
+ * desktop and mobile variants.
+ */
+export declare function RepeatLogin({ lastUsedMethod, onContinueWithLastMethod, onUseAnotherMethod, }: Readonly<RepeatLoginProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/rhf-doct-phone-input.d.ts

@@ -0,0 +1,2 @@
+import type { RHFDoctPhoneInputFieldProps } from '@/types/forms';
+export declare function RHFDoctPhoneInputField({ name, label, placeholder, helperText, defaultCountry, variant, required, disabled, control, error, }: RHFDoctPhoneInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/rhf-input-field.d.ts

@@ -0,0 +1,2 @@
+import type { RHFInputFieldProps } from '@/types/forms';
+export declare function RHFInputField({ name, label, placeholder, className, control, required, type, disabled, onKeyDown, maxLength, numericOnly, }: RHFInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/rhf-otp-input-field.d.ts

@@ -0,0 +1,2 @@
+import type { RHFOtpInputFieldProps } from '@/types/forms';
+export declare function RHFOtpInputField({ name, label, className, control, length, inputClassName, }: RHFOtpInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/rhf-password-field.d.ts

@@ -0,0 +1,2 @@
+import type { RHFPasswordFieldProps } from '@/types/forms';
+export declare function RHFPasswordField({ name, label, placeholder, className, control, required, showPassword: showPasswordProp, togglePasswordVisibility, }: RHFPasswordFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,89 @@
+import type { AuthLayoutBodyProps, AuthLayoutDescriptionProps, AuthLayoutFooterProps, AuthLayoutHeaderProps, AuthLayoutLogoProps, AuthLayoutMainProps, AuthLayoutRootProps, AuthLayoutTitleProps } from '../../types/auth-layout-types';
+/**
+ * Root container component for auth layouts.
+ * Provides layout context to child slot components.
+ *
+ * @example
+ * ```tsx
+ * <AuthLayout.Root variant="desktop" maxWidth="md">
+ *   <AuthLayout.Header>...</AuthLayout.Header>
+ *   <AuthLayout.Logo>...</AuthLayout.Logo>
+ *   <AuthLayout.Title>...</AuthLayout.Title>
+ *   <AuthLayout.Description>...</AuthLayout.Description>
+ *   <AuthLayout.Body>...</AuthLayout.Body>
+ *   <AuthLayout.Footer>...</AuthLayout.Footer>
+ * </AuthLayout.Root>
+ * ```
+ */
+declare function AuthLayoutRoot({ children, variant, maxWidth, className, contentClassName, }: Readonly<AuthLayoutRootProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header slot component - renders differently based on layout variant.
+ * In desktop variant, renders top-right. In mobile variant, renders above logo.
+ */
+declare function AuthLayoutHeader({ children, className, }: Readonly<AuthLayoutHeaderProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Logo slot component - alignment configurable via align prop
+ */
+declare function AuthLayoutLogo({ children, align, className, }: Readonly<AuthLayoutLogoProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Title slot component - alignment configurable via align prop
+ */
+declare function AuthLayoutTitle({ children, align, className, }: Readonly<AuthLayoutTitleProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Description slot component - alignment configurable via align prop
+ */
+declare function AuthLayoutDescription({ children, align, className, }: Readonly<AuthLayoutDescriptionProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Body slot component - main content area with vertical spacing
+ */
+declare function AuthLayoutBody({ children, className, }: Readonly<AuthLayoutBodyProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main content wrapper - centers and constrains width of inner slots
+ */
+declare function AuthLayoutMain({ children, sm, className, }: Readonly<AuthLayoutMainProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Footer slot component - centered with consistent spacing
+ */
+declare function AuthLayoutFooter({ children, className, }: Readonly<AuthLayoutFooterProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Compound component for authentication layouts.
+ * Uses composition pattern for maximum flexibility and scalability.
+ *
+ * @example
+ * ```tsx
+ * <AuthLayout.Root variant="desktop" maxWidth="md">
+ *   <AuthLayout.Header>
+ *     <EnterpriseHeader />
+ *   </AuthLayout.Header>
+ *   <AuthLayout.Main>
+ *     <AuthLayout.Logo>
+ *       <img src="/logo.svg" alt="Docthub" />
+ *     </AuthLayout.Logo>
+ *     <AuthLayout.Title>
+ *       <h1>The Healthcare Career App</h1>
+ *     </AuthLayout.Title>
+ *     <AuthLayout.Description>
+ *       <p>Continue to Signup</p>
+ *     </AuthLayout.Description>
+ *     <AuthLayout.Body>
+ *       <button>Continue with Mobile</button>
+ *       <button>Continue with Email</button>
+ *     </AuthLayout.Body>
+ *   </AuthLayout.Main>
+ *   <AuthLayout.Footer>
+ *     <p>Terms and Privacy</p>
+ *   </AuthLayout.Footer>
+ * </AuthLayout.Root>
+ * ```
+ */
+export declare const AuthLayout: {
+    Root: typeof AuthLayoutRoot;
+    Header: typeof AuthLayoutHeader;
+    Main: typeof AuthLayoutMain;
+    Logo: typeof AuthLayoutLogo;
+    Title: typeof AuthLayoutTitle;
+    Description: typeof AuthLayoutDescription;
+    Body: typeof AuthLayoutBody;
+    Footer: typeof AuthLayoutFooter;
+};
+export {};

package/dist/components/layout/image-slider.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Props for the ImageSlider component.
+ */
+export interface ImageSliderProps {
+    /** Array of image URLs to display */
+    images: string[];
+    /** Auto-play interval in milliseconds (0 to disable) */
+    autoPlayInterval?: number;
+    /** Additional className for the root container */
+    className?: string;
+    /** Whether to hide the built-in slider indicators */
+    hideIndicators?: boolean;
+    /** Optional callback fired whenever the active slide changes */
+    onSlideChange?: (index: number) => void;
+    /** Controlled active index (makes component controlled) */
+    activeIndex?: number;
+    /** Callback for manual slide navigation in controlled mode */
+    onNavigate?: (index: number) => void;
+}
+/**
+ * Image slider component with indicator dots.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * @example Uncontrolled mode (manages its own state)
+ * ```tsx
+ * <ImageSlider
+ *   images={['/image1.jpg', '/image2.jpg']}
+ *   autoPlayInterval={3000}
+ *   onSlideChange={(index) => console.log('Slide changed to', index)}
+ * />
+ * ```
+ *
+ * @example Controlled mode (parent manages state)
+ * ```tsx
+ * const [activeIndex, setActiveIndex] = useState(0);
+ *
+ * <ImageSlider
+ *   images={['/image1.jpg', '/image2.jpg']}
+ *   activeIndex={activeIndex}
+ *   onSlideChange={setActiveIndex}
+ *   onNavigate={setActiveIndex}
+ * />
+ * ```
+ */
+export declare function ImageSlider({ images, autoPlayInterval, className, hideIndicators, onSlideChange, activeIndex: controlledIndex, onNavigate, }: Readonly<ImageSliderProps>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/layout/index.d.ts

@@ -0,0 +1,6 @@
+export type { AuthLayoutAlign, AuthLayoutBodyProps, AuthLayoutDescriptionProps, AuthLayoutFooterProps, AuthLayoutHeaderProps, AuthLayoutLogoProps, AuthLayoutMainProps, AuthLayoutMaxWidth, AuthLayoutRootProps, AuthLayoutTitleProps, AuthLayoutVariant, } from '../../types/auth-layout-types';
+export { AuthLayout } from './auth-layout';
+export type { ImageSliderProps } from './image-slider';
+export { ImageSlider } from './image-slider';
+export type { MainLayoutProps, MarketingPanelProps } from './main-layout';
+export { MainLayout, MarketingPanel } from './main-layout';

package/dist/components/layout/main-layout.d.ts

@@ -0,0 +1,74 @@
+import { type ReactNode } from 'react';
+/**
+ * Props for the MainLayout component.
+ *
+ * @remarks
+ * This layout provides a two-panel authentication page structure:
+ * - Left panel: Marketing content with image slider, CTA, and image card
+ * - Right panel: Authentication content (provided as children)
+ */
+export interface MainLayoutProps {
+    /** Array of image URLs for the slider */
+    sliderImages?: string[];
+    /** Auto-play interval for slider in milliseconds (0 to disable) */
+    sliderAutoPlayInterval?: number;
+    /** Call-to-action text displayed above the image card. Set to null to hide */
+    ctaText?: ReactNode | null;
+    /** Per-slide title/CTA (overrides ctaText when provided; uses active slide index) */
+    sliderTitles?: (ReactNode | string)[] | undefined;
+    /** Additional className for the root container */
+    className?: string;
+    /** Additional className for the marketing panel (left side) */
+    marketingClassName?: string;
+    /** Additional className for the content panel (right side) */
+    contentClassName?: string;
+    /** Main authentication content (typically AuthLayout.Root with slots) */
+    children: ReactNode;
+}
+/**
+ * Props for the MarketingPanel component (left side)
+ */
+export interface MarketingPanelProps {
+    /** Array of image URLs for the slider */
+    sliderImages: string[];
+    /** Auto-play interval for slider in milliseconds */
+    sliderAutoPlayInterval: number;
+    /** Active slide index (controlled) */
+    activeSlideIndex: number;
+    /** Callback when slide changes */
+    onSlideChange: (index: number) => void;
+    /** Call-to-action text */
+    ctaText?: ReactNode | null;
+    /** Per-slide title/CTA (overrides ctaText when provided) */
+    sliderTitles?: (ReactNode | string)[] | undefined;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Marketing panel component - displays CTA, image slider, and indicators
+ */
+declare function MarketingPanel({ sliderImages, sliderAutoPlayInterval, activeSlideIndex, onSlideChange, ctaText, sliderTitles, className, }: Readonly<MarketingPanelProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main layout component - two-panel layout for authentication pages.
+ * Left panel displays marketing content, right panel displays auth content.
+ *
+ * @example
+ * ```tsx
+ * <MainLayout
+ *   sliderImages={['/image1.jpg', '/image2.jpg']}
+ *   ctaText="Get Healthcare Career App Now!"
+ * >
+ *   <AuthLayout.Root variant="desktop" maxWidth="md">
+ *     <AuthLayout.Header>...</AuthLayout.Header>
+ *     <AuthLayout.Main>
+ *       <AuthLayout.Logo>...</AuthLayout.Logo>
+ *       <AuthLayout.Title>...</AuthLayout.Title>
+ *       <AuthLayout.Body>...</AuthLayout.Body>
+ *     </AuthLayout.Main>
+ *     <AuthLayout.Footer>...</AuthLayout.Footer>
+ *   </AuthLayout.Root>
+ * </MainLayout>
+ * ```
+ */
+export declare function MainLayout({ sliderImages, sliderAutoPlayInterval, ctaText, sliderTitles, className, marketingClassName, contentClassName, children, }: Readonly<MainLayoutProps>): import("react/jsx-runtime").JSX.Element;
+export { MarketingPanel };

package/dist/constants/demo-slider.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Demo data for MainLayout marketing slider.
+ * Used in Storybook and anywhere a consistent demo slider is needed.
+ */
+/**
+ * Marketing slider images exported from Figma.
+ * These are static PNG images saved in /public/slider/.
+ *
+ * To update: Export frames from Figma (nodes 2179:2215, 2179:2226, 2179:2236, 2179:2246, 2179:2256)
+ * and save as slide-1.png through slide-5.png in the public/slider/ directory.
+ */
+export declare const DEMO_SLIDER_IMAGES: string[];
+/** Default auto-play interval (ms) for the demo slider. */
+export declare const DEMO_SLIDER_AUTO_PLAY_INTERVAL = 5000;
+/** Per-slide CTA titles for the demo slider (Figma: "Get Healthcare Career App Now!"). */
+export declare const DEMO_SLIDER_TITLES: string[];

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export { DEMO_SLIDER_AUTO_PLAY_INTERVAL, DEMO_SLIDER_IMAGES, DEMO_SLIDER_TITLES, } from './demo-slider';