@sypra-ui/pages 0.3.0 → 0.4.0

package/README.md

@@ -31,10 +31,10 @@ payments.
 
 ## Authentication methods
 
-`LoginPage`, `SignupPage`, `AuthModal`, and the unwrapped `AuthForm` accept a
-`loginOptions` list. Select any combination of `email-password`, `google`,
-and `github`. The library calls your handler and never owns OAuth client IDs,
-redirects, or callback exchanges.
+`LoginPage`, `SignupPage`, `AuthModal`, and the unwrapped `AuthForm` accept
+`authMethods`. Enable any combination of email/password, Google, and GitHub.
+The library calls your handler and never owns OAuth client IDs, redirects, or
+callback exchanges.
 
 ```tsx
 const startOAuth = (provider: string) => {
@@ -42,14 +42,17 @@ const startOAuth = (provider: string) => {
 };
 
 // Email/password only
-<LoginPage onSubmit={signInWithPassword} />;
+<LoginPage
+  authMethods={{ emailPassword: true }}
+  onSubmit={signInWithPassword}
+/>;
 
 // Google only (or use 'github')
-<LoginPage loginOptions={['google']} onProviderLogin={startOAuth} />;
+<LoginPage authMethods={{ google: true }} onProviderLogin={startOAuth} />;
 
 // Email/password, Google, and GitHub
 <LoginPage
-  loginOptions={['email-password', 'google', 'github']}
+  authMethods={{ emailPassword: true, google: true, github: true }}
   onProviderLogin={startOAuth}
   onSubmit={signInWithPassword}
 />;
@@ -58,8 +61,34 @@ const startOAuth = (provider: string) => {
 <section className="my-auth-page">
   <AuthForm
     mode="login"
-    loginOptions={['google', 'github']}
+    authMethods={{ google: true, github: true }}
     onProviderLogin={startOAuth}
   />
 </section>;
 ```
+
+## Page sections
+
+Composite pages expose their smaller building blocks and let you hide sections
+you do not need:
+
+```tsx
+<SecurityPage sections={{ password: false, twoFactor: false }} />
+<BillingPage sections={{ paymentMethod: false, invoices: false }} />
+<LandingPage sections={{ header: false, footer: false }} />
+<ProfilePage fields={{ avatar: false, email: false }} />
+<ApiKeyManager actions={{ create: false, revoke: false }} />
+```
+
+Use exported components such as `SessionManager`, `SubscriptionCard`,
+`PaymentMethodCard`, `InvoiceTable`, `Hero`, `FeatureGrid`, `FAQ`, `CTA`, and
+`Footer` directly when you need a completely custom page layout.
+
+Every composite page also accepts `children` as an extension slot for future
+application-specific content:
+
+```tsx
+<BillingPage sections={{ paymentMethod: false }} invoices={invoices}>
+  <UsageChart />
+</BillingPage>
+```

package/dist/index.d.ts

@@ -8,7 +8,14 @@ type AuthValues = {
     password: string;
     name?: string;
 };
+type AuthMethods = {
+    emailPassword?: boolean;
+    google?: boolean;
+    github?: boolean;
+};
 type AuthCallbacks = {
+    /** The enabled built-in authentication methods. */
+    authMethods?: AuthMethods;
     /** The sign-in methods to render, such as ['google', 'github']. */
     loginOptions?: LoginOption[];
     providers?: AuthProvider[];
@@ -18,14 +25,15 @@ type AuthCallbacks = {
     onForgotPassword?: () => void;
     onSignup?: () => void;
     onLogin?: () => void;
+    children?: ReactNode;
 };
-type AuthMethods = {
+type AuthBehavior = {
     /** Legacy alternative to omitting 'email-password' from loginOptions. */
     emailPassword?: boolean;
     onSubmit?: (values: AuthValues) => void | Promise<void>;
 };
-type AuthProps = AuthCallbacks & AuthMethods;
-declare function AuthForm({ mode, onSubmit, loginOptions, emailPassword, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, }: AuthProps & {
+type AuthProps = AuthCallbacks & AuthBehavior;
+declare function AuthForm({ mode, onSubmit, authMethods, loginOptions, emailPassword, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, children, }: AuthProps & {
     mode: 'login' | 'signup' | 'forgot';
 }): react.JSX.Element;
 declare function LoginPage({ title, description, as, ...props }: AuthProps & {
@@ -54,10 +62,16 @@ type Profile = {
     email: string;
     avatar?: string;
 };
-declare function ProfilePage({ profile, loading, onSave, }: {
+declare function ProfilePage({ profile, loading, onSave, fields, children, }: {
     profile: Profile;
     loading?: boolean;
     onSave: (profile: Profile) => void | Promise<void>;
+    fields?: {
+        avatar?: boolean;
+        name?: boolean;
+        email?: boolean;
+    };
+    children?: ReactNode;
 }): react.JSX.Element;
 type Session = {
     id: string;
@@ -72,15 +86,21 @@ declare function SessionManager({ sessions, currentSessionId, loading, onRevoke,
     onRevoke: (id: string) => void | Promise<void>;
     onRevokeAll: () => void | Promise<void>;
 }): react.JSX.Element;
-declare function SecurityPage({ sessions, currentSessionId, onRevoke, onRevokeAll, passwordEnabled, twoFactorEnabled, onChangePassword, onToggleTwoFactor, }: {
-    sessions: Session[];
+declare function SecurityPage({ sessions, currentSessionId, onRevoke, onRevokeAll, passwordEnabled, twoFactorEnabled, onChangePassword, onToggleTwoFactor, sections, children, }: {
+    sessions?: Session[];
     currentSessionId?: string;
-    onRevoke: (id: string) => void | Promise<void>;
-    onRevokeAll: () => void | Promise<void>;
+    onRevoke?: (id: string) => void | Promise<void>;
+    onRevokeAll?: () => void | Promise<void>;
     passwordEnabled?: boolean;
     twoFactorEnabled?: boolean;
     onChangePassword?: () => void;
     onToggleTwoFactor?: (enabled: boolean) => void;
+    sections?: {
+        password?: boolean;
+        twoFactor?: boolean;
+        sessions?: boolean;
+    };
+    children?: ReactNode;
 }): react.JSX.Element;
 type ApiKey = {
     id: string;
@@ -98,14 +118,19 @@ declare function CreateApiKeyDialog({ open, onOpenChange, onCreate, }: {
         permissions: string[];
     }) => void | Promise<void>;
 }): react.JSX.Element;
-declare function ApiKeyManager({ keys, loading, onCreate, onRevoke, }: {
+declare function ApiKeyManager({ keys, loading, onCreate, onRevoke, actions, children, }: {
     keys: ApiKey[];
     loading?: boolean;
-    onCreate: (values: {
+    onCreate?: (values: {
         name: string;
         permissions: string[];
     }) => void | Promise<void>;
-    onRevoke: (id: string) => void | Promise<void>;
+    onRevoke?: (id: string) => void | Promise<void>;
+    actions?: {
+        create?: boolean;
+        revoke?: boolean;
+    };
+    children?: ReactNode;
 }): react.JSX.Element;
 declare function ApiKeyPage(props: ComponentProps<typeof ApiKeyManager>): react.JSX.Element;
 type ComponentProps<T> = T extends (props: infer Props) => unknown ? Props : never;
@@ -160,14 +185,20 @@ declare function PricingTable({ plans, onSelect, }: {
     }>;
     onSelect: (plan: string) => void;
 }): react.JSX.Element;
-declare function BillingPage({ subscription, paymentMethod, invoices, onChangePlan, onUpdatePaymentMethod, onCancel, onViewInvoice, }: {
+declare function BillingPage({ subscription, paymentMethod, invoices, onChangePlan, onUpdatePaymentMethod, onCancel, onViewInvoice, sections, children, }: {
     subscription?: Subscription;
     paymentMethod?: PaymentMethod;
-    invoices: Invoice[];
+    invoices?: Invoice[];
     onChangePlan?: () => void;
     onUpdatePaymentMethod?: () => void;
     onCancel?: () => void;
     onViewInvoice?: (invoice: Invoice) => void;
+    sections?: {
+        subscription?: boolean;
+        paymentMethod?: boolean;
+        invoices?: boolean;
+    };
+    children?: ReactNode;
 }): react.JSX.Element;
 
 declare function Hero({ eyebrow, title, description, primaryAction, secondaryAction, }: {
@@ -202,9 +233,9 @@ declare function Footer({ brand, links, }: {
         href: string;
     }>;
 }): react.JSX.Element;
-declare function LandingPage({ brand, hero, features, children, as, }: {
+declare function LandingPage({ brand, hero, features, children, as, sections, }: {
     brand: ReactNode;
-    hero: {
+    hero?: {
         title: ReactNode;
         description: ReactNode;
         primaryAction?: ReactNode;
@@ -217,9 +248,15 @@ declare function LandingPage({ brand, hero, features, children, as, }: {
     }>;
     children?: ReactNode;
     as?: 'main' | 'div';
+    sections?: {
+        header?: boolean;
+        hero?: boolean;
+        features?: boolean;
+        footer?: boolean;
+    };
 }): react.JSX.Element;
 declare function SettingsPageDemo({ children }: {
     children: ReactNode;
 }): react.JSX.Element;
 
-export { type ApiKey, ApiKeyManager, ApiKeyPage, AuthForm, AuthModal, type AuthProvider, type AuthValues, BillingPage, CTA, CreateApiKeyDialog, DangerZone, FAQ, FeatureGrid, Footer, ForgotPasswordPage, Hero, type Invoice, InvoiceTable, LandingPage, type LoginOption, LoginPage, type PaymentMethod, PaymentMethodCard, PricingTable, type Profile, ProfilePage, SecurityPage, type Session, SessionManager, SettingsLayout, SettingsPageDemo, SignupPage, type Subscription, SubscriptionCard };
+export { type ApiKey, ApiKeyManager, ApiKeyPage, AuthForm, type AuthMethods, AuthModal, type AuthProvider, type AuthValues, BillingPage, CTA, CreateApiKeyDialog, DangerZone, FAQ, FeatureGrid, Footer, ForgotPasswordPage, Hero, type Invoice, InvoiceTable, LandingPage, type LoginOption, LoginPage, type PaymentMethod, PaymentMethodCard, PricingTable, type Profile, ProfilePage, SecurityPage, type Session, SessionManager, SettingsLayout, SettingsPageDemo, SignupPage, type Subscription, SubscriptionCard };

package/dist/index.js

@@ -22,6 +22,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AuthForm({
   mode,
   onSubmit,
+  authMethods,
   loginOptions,
   emailPassword = true,
   providers = [],
@@ -30,7 +31,8 @@ function AuthForm({
   onProviderLogin,
   onForgotPassword,
   onSignup,
-  onLogin
+  onLogin,
+  children
 }) {
   const [values, setValues] = useState({
     email: "",
@@ -42,7 +44,11 @@ function AuthForm({
     void onSubmit?.(values);
   };
   const isForgot = mode === "forgot";
-  const options = loginOptions ?? [
+  const options = authMethods ? [
+    ...authMethods.emailPassword ? ["email-password"] : [],
+    ...authMethods.google ? ["google"] : [],
+    ...authMethods.github ? ["github"] : []
+  ] : loginOptions ?? [
     ...emailPassword ? ["email-password"] : [],
     ...providers
   ];
@@ -159,7 +165,8 @@ function AuthForm({
         onClick: onLogin,
         children: "Back to login"
       }
-    ) })
+    ) }),
+    children
   ] });
 }
 function LoginPage({
@@ -253,12 +260,15 @@ function SettingsLayout({ children }) {
 function ProfilePage({
   profile,
   loading,
-  onSave
+  onSave,
+  fields,
+  children
 }) {
   const [next, setNext] = useState2(profile);
+  const visibleFields = { avatar: true, name: true, email: true, ...fields };
   return /* @__PURE__ */ jsx2(Section, { title: "Profile", description: "Update the details people see.", children: /* @__PURE__ */ jsxs2(Card2, { children: [
     /* @__PURE__ */ jsxs2("div", { className: "mb-5 flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx2(Avatar, { src: next.avatar, alt: next.name }),
+      visibleFields.avatar && /* @__PURE__ */ jsx2(Avatar, { src: next.avatar, alt: next.name }),
       /* @__PURE__ */ jsxs2("div", { children: [
         /* @__PURE__ */ jsx2(CardTitle2, { children: next.name || "Your profile" }),
         /* @__PURE__ */ jsx2(CardDescription2, { children: next.email })
@@ -273,7 +283,7 @@ function ProfilePage({
           void onSave(next);
         },
         children: [
-          /* @__PURE__ */ jsxs2("div", { children: [
+          visibleFields.name && /* @__PURE__ */ jsxs2("div", { children: [
             /* @__PURE__ */ jsx2(Label2, { htmlFor: "profile-name", children: "Name" }),
             /* @__PURE__ */ jsx2(
               Input2,
@@ -285,7 +295,7 @@ function ProfilePage({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs2("div", { children: [
+          visibleFields.email && /* @__PURE__ */ jsxs2("div", { children: [
             /* @__PURE__ */ jsx2(Label2, { htmlFor: "profile-email", children: "Email" }),
             /* @__PURE__ */ jsx2(
               Input2,
@@ -298,10 +308,11 @@ function ProfilePage({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx2(Button2, { type: "submit", loading, children: "Save changes" })
+          (visibleFields.name || visibleFields.email) && /* @__PURE__ */ jsx2(Button2, { type: "submit", loading, children: "Save changes" })
         ]
       }
-    )
+    ),
+    children
   ] }) });
 }
 function SessionManager({
@@ -365,19 +376,27 @@ function SecurityPage({
   passwordEnabled = true,
   twoFactorEnabled,
   onChangePassword,
-  onToggleTwoFactor
+  onToggleTwoFactor,
+  sections,
+  children
 }) {
+  const visibleSections = {
+    password: true,
+    twoFactor: true,
+    sessions: true,
+    ...sections
+  };
   return /* @__PURE__ */ jsxs2(Stack, { gap: 8, children: [
-    /* @__PURE__ */ jsx2(Section, { title: "Security", description: "Keep your account secure.", children: /* @__PURE__ */ jsxs2(Card2, { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
+    (visibleSections.password || visibleSections.twoFactor) && /* @__PURE__ */ jsx2(Section, { title: "Security", description: "Keep your account secure.", children: /* @__PURE__ */ jsxs2(Card2, { className: "space-y-4", children: [
+      visibleSections.password && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
         /* @__PURE__ */ jsxs2("div", { children: [
           /* @__PURE__ */ jsx2(CardTitle2, { children: "Password" }),
           /* @__PURE__ */ jsx2(CardDescription2, { children: passwordEnabled ? "Password is enabled." : "Passwordless sign-in." })
         ] }),
         onChangePassword && /* @__PURE__ */ jsx2(Button2, { variant: "outline", onClick: onChangePassword, children: "Change password" })
       ] }),
-      /* @__PURE__ */ jsx2(Separator2, {}),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
+      visibleSections.password && visibleSections.twoFactor && /* @__PURE__ */ jsx2(Separator2, {}),
+      visibleSections.twoFactor && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
         /* @__PURE__ */ jsxs2("div", { children: [
           /* @__PURE__ */ jsx2(CardTitle2, { children: "Two-factor authentication" }),
           /* @__PURE__ */ jsx2(CardDescription2, { children: twoFactorEnabled ? "Enabled" : "Not enabled" })
@@ -391,7 +410,7 @@ function SecurityPage({
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx2(
+    visibleSections.sessions && sessions && onRevoke && onRevokeAll && /* @__PURE__ */ jsx2(
       SessionManager,
       {
         sessions,
@@ -399,7 +418,8 @@ function SecurityPage({
         onRevoke,
         onRevokeAll
       }
-    )
+    ),
+    children
   ] });
 }
 function CreateApiKeyDialog({
@@ -462,16 +482,19 @@ function ApiKeyManager({
   keys,
   loading,
   onCreate,
-  onRevoke
+  onRevoke,
+  actions,
+  children
 }) {
   const [createOpen, setCreateOpen] = useState2(false);
+  const visibleActions = { create: true, revoke: true, ...actions };
   return /* @__PURE__ */ jsxs2(
     Section,
     {
       title: "API keys",
       description: "Create keys for programmatic access.",
       children: [
-        /* @__PURE__ */ jsx2("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx2(Button2, { onClick: () => setCreateOpen(true), children: "Create API key" }) }),
+        visibleActions.create && onCreate && /* @__PURE__ */ jsx2("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx2(Button2, { onClick: () => setCreateOpen(true), children: "Create API key" }) }),
         /* @__PURE__ */ jsx2(Stack, { children: keys.length ? keys.map((key) => /* @__PURE__ */ jsxs2(
           Card2,
           {
@@ -489,7 +512,7 @@ function ApiKeyManager({
                   key.lastUsedAt ? ` \xB7 Last used ${key.lastUsedAt}` : " \xB7 Never used"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx2(
+              visibleActions.revoke && onRevoke && /* @__PURE__ */ jsx2(
                 Button2,
                 {
                   variant: "outline",
@@ -509,7 +532,8 @@ function ApiKeyManager({
             description: "Create one when you need programmatic access."
           }
         ) }),
-        /* @__PURE__ */ jsx2(
+        children,
+        visibleActions.create && onCreate && /* @__PURE__ */ jsx2(
           CreateApiKeyDialog,
           {
             open: createOpen,
@@ -704,10 +728,18 @@ function BillingPage({
   onChangePlan,
   onUpdatePaymentMethod,
   onCancel,
-  onViewInvoice
+  onViewInvoice,
+  sections,
+  children
 }) {
+  const visibleSections = {
+    subscription: true,
+    paymentMethod: true,
+    invoices: true,
+    ...sections
+  };
   return /* @__PURE__ */ jsxs3(Stack2, { gap: 8, children: [
-    /* @__PURE__ */ jsx3(
+    visibleSections.subscription && /* @__PURE__ */ jsx3(
       Section2,
       {
         title: "Billing",
@@ -722,14 +754,15 @@ function BillingPage({
         )
       }
     ),
-    /* @__PURE__ */ jsx3(
+    visibleSections.paymentMethod && /* @__PURE__ */ jsx3(
       PaymentMethodCard,
       {
         paymentMethod,
         onUpdate: onUpdatePaymentMethod
       }
     ),
-    /* @__PURE__ */ jsx3(Section2, { title: "Invoices", children: /* @__PURE__ */ jsx3(InvoiceTable, { invoices, onView: onViewInvoice }) })
+    visibleSections.invoices && /* @__PURE__ */ jsx3(Section2, { title: "Invoices", children: /* @__PURE__ */ jsx3(InvoiceTable, { invoices: invoices ?? [], onView: onViewInvoice }) }),
+    children
   ] });
 }
 
@@ -812,14 +845,22 @@ function LandingPage({
   hero,
   features,
   children,
-  as
+  as,
+  sections
 }) {
+  const visibleSections = {
+    header: true,
+    hero: true,
+    features: true,
+    footer: true,
+    ...sections
+  };
   return /* @__PURE__ */ jsx4(PageShell2, { as, children: /* @__PURE__ */ jsxs4(Container, { children: [
-    /* @__PURE__ */ jsx4("header", { className: "flex h-16 items-center justify-between", children: /* @__PURE__ */ jsx4("strong", { children: brand }) }),
-    /* @__PURE__ */ jsx4(Hero, { ...hero }),
-    features && /* @__PURE__ */ jsx4(FeatureGrid, { features }),
+    visibleSections.header && /* @__PURE__ */ jsx4("header", { className: "flex h-16 items-center justify-between", children: /* @__PURE__ */ jsx4("strong", { children: brand }) }),
+    visibleSections.hero && hero && /* @__PURE__ */ jsx4(Hero, { ...hero }),
+    visibleSections.features && features && /* @__PURE__ */ jsx4(FeatureGrid, { features }),
     children,
-    /* @__PURE__ */ jsx4(Footer, { brand })
+    visibleSections.footer && /* @__PURE__ */ jsx4(Footer, { brand })
   ] }) });
 }
 function SettingsPageDemo({ children }) {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/pages/auth.tsx","../src/pages/settings.tsx","../src/pages/billing.tsx","../src/pages/marketing.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type FormEvent, type ReactNode } from 'react';\nimport {\n  Alert,\n  Button,\n  Card,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Input,\n  Label,\n  PageShell,\n  PasswordInput,\n  Separator,\n} from '@sypra-ui/ui';\n\nexport type AuthProvider = 'google' | 'github' | string;\nexport type LoginOption = 'email-password' | AuthProvider;\nexport type AuthValues = { email: string; password: string; name?: string };\ntype AuthCallbacks = {\n  /** The sign-in methods to render, such as ['google', 'github']. */\n  loginOptions?: LoginOption[];\n  providers?: AuthProvider[];\n  loading?: boolean;\n  error?: ReactNode;\n  onProviderLogin?: (provider: AuthProvider) => void;\n  onForgotPassword?: () => void;\n  onSignup?: () => void;\n  onLogin?: () => void;\n};\ntype AuthMethods = {\n  /** Legacy alternative to omitting 'email-password' from loginOptions. */\n  emailPassword?: boolean;\n  onSubmit?: (values: AuthValues) => void | Promise<void>;\n};\ntype AuthProps = AuthCallbacks & AuthMethods;\nexport function AuthForm({\n  mode,\n  onSubmit,\n  loginOptions,\n  emailPassword = true,\n  providers = [],\n  loading,\n  error,\n  onProviderLogin,\n  onForgotPassword,\n  onSignup,\n  onLogin,\n}: AuthProps & {\n  mode: 'login' | 'signup' | 'forgot';\n}) {\n  const [values, setValues] = useState<AuthValues>({\n    email: '',\n    password: '',\n    name: '',\n  });\n  const submit = (event: FormEvent) => {\n    event.preventDefault();\n    void onSubmit?.(values);\n  };\n  const isForgot = mode === 'forgot';\n  const options = loginOptions ?? [\n    ...(emailPassword ? ['email-password'] : []),\n    ...providers,\n  ];\n  const usesEmailPassword = options.includes('email-password');\n  const selectedProviders = options.filter(\n    (option) => option !== 'email-password',\n  );\n  return (\n    <form className=\"space-y-4\" onSubmit={submit}>\n      {error && (\n        <Alert variant=\"destructive\" title=\"Could not continue\">\n          {error}\n        </Alert>\n      )}\n      {usesEmailPassword && (\n        <>\n          {mode === 'signup' && (\n            <div>\n              <Label htmlFor=\"name\">Name</Label>\n              <Input\n                id=\"name\"\n                value={values.name}\n                onChange={(event) =>\n                  setValues({ ...values, name: event.target.value })\n                }\n                autoComplete=\"name\"\n                required\n              />\n            </div>\n          )}\n          <div>\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              value={values.email}\n              onChange={(event) =>\n                setValues({ ...values, email: event.target.value })\n              }\n              autoComplete=\"email\"\n              required\n            />\n          </div>\n          {!isForgot && (\n            <div>\n              <div className=\"flex justify-between\">\n                <Label htmlFor=\"password\">Password</Label>\n                {mode === 'login' && (\n                  <button\n                    type=\"button\"\n                    className=\"rui-focus text-xs text-[hsl(var(--rui-primary))]\"\n                    onClick={onForgotPassword}\n                  >\n                    Forgot password?\n                  </button>\n                )}\n              </div>\n              <PasswordInput\n                id=\"password\"\n                value={values.password}\n                onChange={(event) =>\n                  setValues({ ...values, password: event.target.value })\n                }\n                autoComplete={\n                  mode === 'signup' ? 'new-password' : 'current-password'\n                }\n                required\n              />\n            </div>\n          )}\n          <Button className=\"w-full\" type=\"submit\" loading={loading}>\n            {isForgot\n              ? 'Send reset link'\n              : mode === 'signup'\n                ? 'Create account'\n                : 'Continue'}\n          </Button>\n        </>\n      )}\n      {selectedProviders.length > 0 && (\n        <>\n          {usesEmailPassword && (\n            <div className=\"flex items-center gap-3 text-xs text-[hsl(var(--rui-muted-foreground))]\">\n              <Separator />\n              <span>OR</span>\n              <Separator />\n            </div>\n          )}\n          <div className=\"grid gap-2\">\n            {selectedProviders.map((provider) => (\n              <Button\n                key={provider}\n                type=\"button\"\n                variant=\"outline\"\n                onClick={() => onProviderLogin?.(provider)}\n              >\n                Continue with{' '}\n                {provider === 'github'\n                  ? 'GitHub'\n                  : provider.slice(0, 1).toUpperCase() + provider.slice(1)}\n              </Button>\n            ))}\n          </div>\n        </>\n      )}\n      {usesEmailPassword && (\n        <p className=\"text-center text-sm text-[hsl(var(--rui-muted-foreground))]\">\n          {mode === 'login' ? (\n            <>\n              No account?{' '}\n              <button\n                type=\"button\"\n                className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n                onClick={onSignup}\n              >\n                Sign up\n              </button>\n            </>\n          ) : mode === 'signup' ? (\n            <>\n              Already have an account?{' '}\n              <button\n                type=\"button\"\n                className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n                onClick={onLogin}\n              >\n                Log in\n              </button>\n            </>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n              onClick={onLogin}\n            >\n              Back to login\n            </button>\n          )}\n        </p>\n      )}\n    </form>\n  );\n}\nexport function LoginPage({\n  title = 'Welcome back',\n  description = 'Sign in to continue.',\n  as,\n  ...props\n}: AuthProps & {\n  title?: string;\n  description?: string;\n  as?: 'main' | 'div';\n}) {\n  return (\n    <AuthPage title={title} description={description} as={as}>\n      <AuthForm mode=\"login\" {...props} />\n    </AuthPage>\n  );\n}\nexport function SignupPage({\n  title = 'Create your account',\n  description = 'Start with a free account.',\n  as,\n  ...props\n}: AuthProps & {\n  title?: string;\n  description?: string;\n  as?: 'main' | 'div';\n}) {\n  return (\n    <AuthPage title={title} description={description} as={as}>\n      <AuthForm mode=\"signup\" {...props} />\n    </AuthPage>\n  );\n}\nexport function ForgotPasswordPage({\n  as,\n  ...props\n}: AuthProps & {\n  as?: 'main' | 'div';\n}) {\n  return (\n    <AuthPage\n      title=\"Reset your password\"\n      description=\"We’ll email a reset link.\"\n      as={as}\n    >\n      <AuthForm mode=\"forgot\" {...props} />\n    </AuthPage>\n  );\n}\nfunction AuthPage({\n  title,\n  description,\n  children,\n  as,\n}: {\n  title: string;\n  description: string;\n  children: ReactNode;\n  as?: 'main' | 'div';\n}) {\n  return (\n    <PageShell as={as} className=\"grid place-items-center p-4\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <div>\n            <CardTitle>{title}</CardTitle>\n            <CardDescription>{description}</CardDescription>\n          </div>\n        </CardHeader>\n        {children}\n      </Card>\n    </PageShell>\n  );\n}\nexport function AuthModal({\n  open,\n  onOpenChange,\n  ...props\n}: AuthProps & {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Welcome back</DialogTitle>\n          <DialogDescription>Sign in to your account.</DialogDescription>\n        </DialogHeader>\n        <AuthForm mode=\"login\" {...props} />\n      </DialogContent>\n    </Dialog>\n  );\n}\n","'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport {\n  Avatar,\n  Badge,\n  Button,\n  Card,\n  CardDescription,\n  CardTitle,\n  Checkbox,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  EmptyState,\n  Input,\n  Label,\n  Section,\n  Separator,\n  Stack,\n  Switch,\n} from '@sypra-ui/ui';\n\nexport function SettingsLayout({ children }: { children: ReactNode }) {\n  return <div className=\"min-w-0 space-y-8\">{children}</div>;\n}\nexport type Profile = { name: string; email: string; avatar?: string };\nexport function ProfilePage({\n  profile,\n  loading,\n  onSave,\n}: {\n  profile: Profile;\n  loading?: boolean;\n  onSave: (profile: Profile) => void | Promise<void>;\n}) {\n  const [next, setNext] = useState(profile);\n  return (\n    <Section title=\"Profile\" description=\"Update the details people see.\">\n      <Card>\n        <div className=\"mb-5 flex items-center gap-3\">\n          <Avatar src={next.avatar} alt={next.name} />\n          <div>\n            <CardTitle>{next.name || 'Your profile'}</CardTitle>\n            <CardDescription>{next.email}</CardDescription>\n          </div>\n        </div>\n        <form\n          className=\"max-w-lg space-y-4\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            void onSave(next);\n          }}\n        >\n          <div>\n            <Label htmlFor=\"profile-name\">Name</Label>\n            <Input\n              id=\"profile-name\"\n              value={next.name}\n              onChange={(event) =>\n                setNext({ ...next, name: event.target.value })\n              }\n              required\n            />\n          </div>\n          <div>\n            <Label htmlFor=\"profile-email\">Email</Label>\n            <Input\n              id=\"profile-email\"\n              type=\"email\"\n              value={next.email}\n              onChange={(event) =>\n                setNext({ ...next, email: event.target.value })\n              }\n              required\n            />\n          </div>\n          <Button type=\"submit\" loading={loading}>\n            Save changes\n          </Button>\n        </form>\n      </Card>\n    </Section>\n  );\n}\nexport type Session = {\n  id: string;\n  device: string;\n  location?: string;\n  lastActive: string;\n};\nexport function SessionManager({\n  sessions,\n  currentSessionId,\n  loading,\n  onRevoke,\n  onRevokeAll,\n}: {\n  sessions: Session[];\n  currentSessionId?: string;\n  loading?: boolean;\n  onRevoke: (id: string) => void | Promise<void>;\n  onRevokeAll: () => void | Promise<void>;\n}) {\n  return (\n    <Section\n      title=\"Active sessions\"\n      description=\"Review where your account is signed in.\"\n    >\n      <Stack>\n        {sessions.length ? (\n          sessions.map((session) => (\n            <Card\n              key={session.id}\n              className=\"flex flex-wrap items-center justify-between gap-3\"\n            >\n              <div>\n                <CardTitle>\n                  {session.device}{' '}\n                  {session.id === currentSessionId && <Badge>Current</Badge>}\n                </CardTitle>\n                <CardDescription>\n                  {[session.location, session.lastActive]\n                    .filter(Boolean)\n                    .join(' · ')}\n                </CardDescription>\n              </div>\n              {session.id !== currentSessionId && (\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  loading={loading}\n                  onClick={() => void onRevoke(session.id)}\n                >\n                  Revoke\n                </Button>\n              )}\n            </Card>\n          ))\n        ) : (\n          <EmptyState title=\"No sessions\" />\n        )}\n      </Stack>\n      {sessions.length > 1 && (\n        <Button\n          variant=\"destructive\"\n          loading={loading}\n          onClick={() => void onRevokeAll()}\n        >\n          Sign out of other sessions\n        </Button>\n      )}\n    </Section>\n  );\n}\nexport function SecurityPage({\n  sessions,\n  currentSessionId,\n  onRevoke,\n  onRevokeAll,\n  passwordEnabled = true,\n  twoFactorEnabled,\n  onChangePassword,\n  onToggleTwoFactor,\n}: {\n  sessions: Session[];\n  currentSessionId?: string;\n  onRevoke: (id: string) => void | Promise<void>;\n  onRevokeAll: () => void | Promise<void>;\n  passwordEnabled?: boolean;\n  twoFactorEnabled?: boolean;\n  onChangePassword?: () => void;\n  onToggleTwoFactor?: (enabled: boolean) => void;\n}) {\n  return (\n    <Stack gap={8}>\n      <Section title=\"Security\" description=\"Keep your account secure.\">\n        <Card className=\"space-y-4\">\n          <div className=\"flex items-center justify-between gap-3\">\n            <div>\n              <CardTitle>Password</CardTitle>\n              <CardDescription>\n                {passwordEnabled\n                  ? 'Password is enabled.'\n                  : 'Passwordless sign-in.'}\n              </CardDescription>\n            </div>\n            {onChangePassword && (\n              <Button variant=\"outline\" onClick={onChangePassword}>\n                Change password\n              </Button>\n            )}\n          </div>\n          <Separator />\n          <div className=\"flex items-center justify-between gap-3\">\n            <div>\n              <CardTitle>Two-factor authentication</CardTitle>\n              <CardDescription>\n                {twoFactorEnabled ? 'Enabled' : 'Not enabled'}\n              </CardDescription>\n            </div>\n            <Switch\n              checked={twoFactorEnabled}\n              onChange={(event) => onToggleTwoFactor?.(event.target.checked)}\n            />\n          </div>\n        </Card>\n      </Section>\n      <SessionManager\n        sessions={sessions}\n        currentSessionId={currentSessionId}\n        onRevoke={onRevoke}\n        onRevokeAll={onRevokeAll}\n      />\n    </Stack>\n  );\n}\n\nexport type ApiKey = {\n  id: string;\n  name: string;\n  prefix: string;\n  createdAt: string;\n  lastUsedAt?: string;\n  permissions?: string[];\n};\nexport function CreateApiKeyDialog({\n  open,\n  onOpenChange,\n  onCreate,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onCreate: (values: {\n    name: string;\n    permissions: string[];\n  }) => void | Promise<void>;\n}) {\n  const [name, setName] = useState('');\n  const [write, setWrite] = useState(false);\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Create API key</DialogTitle>\n          <DialogDescription>\n            The full key should only be shown once by your application.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody>\n          <div>\n            <Label htmlFor=\"key-name\">Name</Label>\n            <Input\n              id=\"key-name\"\n              value={name}\n              onChange={(event) => setName(event.target.value)}\n              placeholder=\"Production\"\n            />\n          </div>\n          <label className=\"flex items-center gap-2 text-sm\">\n            <Checkbox\n              checked={write}\n              onChange={(event) => setWrite(event.target.checked)}\n            />{' '}\n            Allow write access\n          </label>\n        </DialogBody>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DialogClose>\n          <Button\n            onClick={() => {\n              void onCreate({\n                name,\n                permissions: write ? ['read', 'write'] : ['read'],\n              });\n              onOpenChange(false);\n            }}\n            disabled={!name.trim()}\n          >\n            Create key\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\nexport function ApiKeyManager({\n  keys,\n  loading,\n  onCreate,\n  onRevoke,\n}: {\n  keys: ApiKey[];\n  loading?: boolean;\n  onCreate: (values: {\n    name: string;\n    permissions: string[];\n  }) => void | Promise<void>;\n  onRevoke: (id: string) => void | Promise<void>;\n}) {\n  const [createOpen, setCreateOpen] = useState(false);\n  return (\n    <Section\n      title=\"API keys\"\n      description=\"Create keys for programmatic access.\"\n    >\n      <div className=\"flex justify-end\">\n        <Button onClick={() => setCreateOpen(true)}>Create API key</Button>\n      </div>\n      <Stack>\n        {keys.length ? (\n          keys.map((key) => (\n            <Card\n              key={key.id}\n              className=\"flex flex-wrap items-center justify-between gap-3\"\n            >\n              <div>\n                <CardTitle>{key.name}</CardTitle>\n                <CardDescription>\n                  <code>{key.prefix}••••••••</code> · Created {key.createdAt}\n                  {key.lastUsedAt\n                    ? ` · Last used ${key.lastUsedAt}`\n                    : ' · Never used'}\n                </CardDescription>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                loading={loading}\n                onClick={() => void onRevoke(key.id)}\n              >\n                Revoke\n              </Button>\n            </Card>\n          ))\n        ) : (\n          <EmptyState\n            title=\"No API keys\"\n            description=\"Create one when you need programmatic access.\"\n          />\n        )}\n      </Stack>\n      <CreateApiKeyDialog\n        open={createOpen}\n        onOpenChange={setCreateOpen}\n        onCreate={onCreate}\n      />\n    </Section>\n  );\n}\nexport function ApiKeyPage(props: ComponentProps<typeof ApiKeyManager>) {\n  return <ApiKeyManager {...props} />;\n}\ntype ComponentProps<T> = T extends (props: infer Props) => unknown\n  ? Props\n  : never;\nexport function DangerZone({\n  onDeleteAccount,\n  confirmationText = 'DELETE',\n}: {\n  onDeleteAccount: () => void | Promise<void>;\n  confirmationText?: string;\n}) {\n  const [value, setValue] = useState('');\n  return (\n    <Section title=\"Danger zone\" description=\"These actions are permanent.\">\n      <Card className=\"border-[hsl(var(--rui-destructive))]\">\n        <CardTitle>Delete account</CardTitle>\n        <CardDescription>\n          Delete all account data. This cannot be undone.\n        </CardDescription>\n        <div className=\"mt-4 max-w-sm\">\n          <Label htmlFor=\"delete-confirmation\">\n            Type {confirmationText} to confirm\n          </Label>\n          <Input\n            id=\"delete-confirmation\"\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n          />\n        </div>\n        <Button\n          className=\"mt-4\"\n          variant=\"destructive\"\n          disabled={value !== confirmationText}\n          onClick={() => void onDeleteAccount()}\n        >\n          Delete account\n        </Button>\n      </Card>\n    </Section>\n  );\n}\n","import {\n  Badge,\n  Button,\n  Card,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  DataTable,\n  EmptyState,\n  Section,\n  Stack,\n  type DataColumn,\n} from '@sypra-ui/ui';\n\nexport type Subscription = {\n  plan: string;\n  price: string;\n  interval?: string;\n  nextBillingDate?: string;\n  status?: string;\n  usage?: Array<{ label: string; value: string }>;\n};\nexport type PaymentMethod = {\n  brand: string;\n  last4: string;\n  expiresAt?: string;\n};\nexport type Invoice = {\n  id: string;\n  date: string;\n  amount: string;\n  status: string;\n  href?: string;\n};\nexport function SubscriptionCard({\n  subscription,\n  onChangePlan,\n  onCancel,\n}: {\n  subscription?: Subscription;\n  onChangePlan?: () => void;\n  onCancel?: () => void;\n}) {\n  if (!subscription)\n    return (\n      <EmptyState\n        title=\"No active subscription\"\n        action={\n          onChangePlan && <Button onClick={onChangePlan}>View plans</Button>\n        }\n      />\n    );\n  return (\n    <Card>\n      <CardHeader>\n        <div>\n          <CardTitle>{subscription.plan}</CardTitle>\n          <CardDescription>\n            {subscription.price}\n            {subscription.interval && ` / ${subscription.interval}`}\n          </CardDescription>\n        </div>\n        {subscription.status && (\n          <Badge variant=\"success\">{subscription.status}</Badge>\n        )}\n      </CardHeader>\n      {subscription.nextBillingDate && (\n        <p className=\"text-sm text-[hsl(var(--rui-muted-foreground))]\">\n          Next billing date: {subscription.nextBillingDate}\n        </p>\n      )}\n      {subscription.usage?.length ? (\n        <div className=\"mt-4 grid gap-2 text-sm sm:grid-cols-2\">\n          {subscription.usage.map((item) => (\n            <div\n              key={item.label}\n              className=\"rounded bg-[hsl(var(--rui-muted))] p-3\"\n            >\n              <strong className=\"block\">{item.value}</strong>\n              <span className=\"text-[hsl(var(--rui-muted-foreground))]\">\n                {item.label}\n              </span>\n            </div>\n          ))}\n        </div>\n      ) : null}\n      <div className=\"mt-5 flex flex-wrap gap-2\">\n        {onChangePlan && <Button onClick={onChangePlan}>Change plan</Button>}\n        {onCancel && (\n          <Button variant=\"outline\" onClick={onCancel}>\n            Manage subscription\n          </Button>\n        )}\n      </div>\n    </Card>\n  );\n}\nexport function PaymentMethodCard({\n  paymentMethod,\n  onUpdate,\n}: {\n  paymentMethod?: PaymentMethod;\n  onUpdate?: () => void;\n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <div>\n          <CardTitle>Payment method</CardTitle>\n          <CardDescription>\n            {paymentMethod\n              ? `${paymentMethod.brand} •••• ${paymentMethod.last4}${paymentMethod.expiresAt ? ` · Expires ${paymentMethod.expiresAt}` : ''}`\n              : 'No payment method on file.'}\n          </CardDescription>\n        </div>\n        {onUpdate && (\n          <Button variant=\"outline\" size=\"sm\" onClick={onUpdate}>\n            {paymentMethod ? 'Update' : 'Add payment method'}\n          </Button>\n        )}\n      </CardHeader>\n    </Card>\n  );\n}\nexport function InvoiceTable({\n  invoices,\n  onView,\n}: {\n  invoices: Invoice[];\n  onView?: (invoice: Invoice) => void;\n}) {\n  const columns: DataColumn<Invoice>[] = [\n    { key: 'date', header: 'Date', sortable: true },\n    { key: 'amount', header: 'Amount' },\n    {\n      key: 'status',\n      header: 'Status',\n      cell: (invoice) => (\n        <Badge\n          variant={\n            invoice.status.toLowerCase() === 'paid' ? 'success' : 'warning'\n          }\n        >\n          {invoice.status}\n        </Badge>\n      ),\n    },\n    {\n      key: 'id',\n      header: <span className=\"sr-only\">Actions</span>,\n      cell: (invoice) =>\n        onView && (\n          <Button variant=\"ghost\" size=\"sm\" onClick={() => onView(invoice)}>\n            View\n          </Button>\n        ),\n    },\n  ];\n  return (\n    <DataTable\n      data={invoices}\n      columns={columns}\n      emptyMessage=\"No invoices yet.\"\n    />\n  );\n}\nexport function PricingTable({\n  plans,\n  onSelect,\n}: {\n  plans: Array<{\n    name: string;\n    price: string;\n    description?: string;\n    features: string[];\n    highlighted?: boolean;\n  }>;\n  onSelect: (plan: string) => void;\n}) {\n  return (\n    <div className=\"grid gap-4 md:grid-cols-3\">\n      {plans.map((plan) => (\n        <Card\n          key={plan.name}\n          className={\n            plan.highlighted ? 'border-[hsl(var(--rui-primary))]' : undefined\n          }\n        >\n          <CardTitle>{plan.name}</CardTitle>\n          <p className=\"mt-3 text-2xl font-bold\">{plan.price}</p>\n          {plan.description && (\n            <CardDescription>{plan.description}</CardDescription>\n          )}\n          <ul className=\"my-5 space-y-2 text-sm\">\n            {plan.features.map((feature) => (\n              <li key={feature}>✓ {feature}</li>\n            ))}\n          </ul>\n          <Button\n            className=\"w-full\"\n            variant={plan.highlighted ? 'primary' : 'outline'}\n            onClick={() => onSelect(plan.name)}\n          >\n            Choose {plan.name}\n          </Button>\n        </Card>\n      ))}\n    </div>\n  );\n}\nexport function BillingPage({\n  subscription,\n  paymentMethod,\n  invoices,\n  onChangePlan,\n  onUpdatePaymentMethod,\n  onCancel,\n  onViewInvoice,\n}: {\n  subscription?: Subscription;\n  paymentMethod?: PaymentMethod;\n  invoices: Invoice[];\n  onChangePlan?: () => void;\n  onUpdatePaymentMethod?: () => void;\n  onCancel?: () => void;\n  onViewInvoice?: (invoice: Invoice) => void;\n}) {\n  return (\n    <Stack gap={8}>\n      <Section\n        title=\"Billing\"\n        description=\"Manage your plan and payment details.\"\n      >\n        <SubscriptionCard\n          subscription={subscription}\n          onChangePlan={onChangePlan}\n          onCancel={onCancel}\n        />\n      </Section>\n      <PaymentMethodCard\n        paymentMethod={paymentMethod}\n        onUpdate={onUpdatePaymentMethod}\n      />\n      <Section title=\"Invoices\">\n        <InvoiceTable invoices={invoices} onView={onViewInvoice} />\n      </Section>\n    </Stack>\n  );\n}\n","import { type ReactNode } from 'react';\nimport {\n  Badge,\n  Card,\n  CardDescription,\n  CardTitle,\n  Container,\n  PageContent,\n  PageHeader,\n  PageShell,\n} from '@sypra-ui/ui';\n\nexport function Hero({\n  eyebrow,\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n}: {\n  eyebrow?: ReactNode;\n  title: ReactNode;\n  description: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryAction?: ReactNode;\n}) {\n  return (\n    <section className=\"py-20 text-center sm:py-28\">\n      {eyebrow && <Badge>{eyebrow}</Badge>}\n      <h1 className=\"mx-auto mt-5 max-w-3xl text-4xl font-bold tracking-tight sm:text-6xl\">\n        {title}\n      </h1>\n      <p className=\"mx-auto mt-5 max-w-2xl text-lg text-[hsl(var(--rui-muted-foreground))]\">\n        {description}\n      </p>\n      <div className=\"mt-8 flex flex-wrap justify-center gap-3\">\n        {primaryAction}\n        {secondaryAction}\n      </div>\n    </section>\n  );\n}\nexport function FeatureGrid({\n  features,\n}: {\n  features: Array<{ title: string; description: string; icon?: ReactNode }>;\n}) {\n  return (\n    <section className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <Card key={feature.title}>\n          {feature.icon && (\n            <div className=\"mb-3 text-[hsl(var(--rui-primary))]\">\n              {feature.icon}\n            </div>\n          )}\n          <CardTitle>{feature.title}</CardTitle>\n          <CardDescription>{feature.description}</CardDescription>\n        </Card>\n      ))}\n    </section>\n  );\n}\nexport function FAQ({\n  items,\n}: {\n  items: Array<{ question: string; answer: ReactNode }>;\n}) {\n  return (\n    <section className=\"mx-auto max-w-3xl space-y-4\">\n      {items.map((item) => (\n        <Card key={item.question}>\n          <CardTitle>{item.question}</CardTitle>\n          <CardDescription>{item.answer}</CardDescription>\n        </Card>\n      ))}\n    </section>\n  );\n}\nexport function CTA({\n  title,\n  description,\n  action,\n}: {\n  title: ReactNode;\n  description?: ReactNode;\n  action: ReactNode;\n}) {\n  return (\n    <section className=\"rounded-[calc(var(--rui-radius)+.2rem)] bg-[hsl(var(--rui-primary))] px-6 py-14 text-center text-[hsl(var(--rui-primary-foreground))]\">\n      <h2 className=\"text-3xl font-bold\">{title}</h2>\n      {description && <p className=\"mt-3 opacity-85\">{description}</p>}\n      <div className=\"mt-6\">{action}</div>\n    </section>\n  );\n}\nexport function Footer({\n  brand,\n  links,\n}: {\n  brand: ReactNode;\n  links?: Array<{ label: string; href: string }>;\n}) {\n  return (\n    <footer className=\"mt-16 border-t border-[hsl(var(--rui-border))] py-8 text-sm text-[hsl(var(--rui-muted-foreground))]\">\n      <div className=\"flex flex-wrap items-center justify-between gap-4\">\n        <strong className=\"text-[hsl(var(--rui-foreground))]\">{brand}</strong>\n        <div className=\"flex gap-4\">\n          {links?.map((link) => (\n            <a\n              key={link.href}\n              href={link.href}\n              className=\"hover:text-[hsl(var(--rui-foreground))]\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </div>\n      </div>\n    </footer>\n  );\n}\nexport function LandingPage({\n  brand,\n  hero,\n  features,\n  children,\n  as,\n}: {\n  brand: ReactNode;\n  hero: {\n    title: ReactNode;\n    description: ReactNode;\n    primaryAction?: ReactNode;\n    secondaryAction?: ReactNode;\n  };\n  features?: Array<{ title: string; description: string; icon?: ReactNode }>;\n  children?: ReactNode;\n  as?: 'main' | 'div';\n}) {\n  return (\n    <PageShell as={as}>\n      <Container>\n        <header className=\"flex h-16 items-center justify-between\">\n          <strong>{brand}</strong>\n        </header>\n        <Hero {...hero} />\n        {features && <FeatureGrid features={features} />}\n        {children}\n        <Footer brand={brand} />\n      </Container>\n    </PageShell>\n  );\n}\n\nexport function SettingsPageDemo({ children }: { children: ReactNode }) {\n  return (\n    <PageShell>\n      <Container className=\"py-8\">\n        <PageHeader title=\"Settings\" description=\"Manage your account.\" />\n        <PageContent>{children}</PageContent>\n      </Container>\n    </PageShell>\n  );\n}\n"],"mappings":"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","names":["useState","Button","Card","CardDescription","CardTitle","Dialog","DialogContent","DialogDescription","DialogHeader","DialogTitle","Input","Label","Separator","jsx","jsxs","Badge","Button","Card","CardDescription","CardHeader","CardTitle","EmptyState","Section","Stack","jsx","jsxs","Badge","Card","CardDescription","CardTitle","PageShell","jsx","jsxs"]}
+{"version":3,"sources":["../src/pages/auth.tsx","../src/pages/settings.tsx","../src/pages/billing.tsx","../src/pages/marketing.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type FormEvent, type ReactNode } from 'react';\nimport {\n  Alert,\n  Button,\n  Card,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Input,\n  Label,\n  PageShell,\n  PasswordInput,\n  Separator,\n} from '@sypra-ui/ui';\n\nexport type AuthProvider = 'google' | 'github' | string;\nexport type LoginOption = 'email-password' | AuthProvider;\nexport type AuthValues = { email: string; password: string; name?: string };\nexport type AuthMethods = {\n  emailPassword?: boolean;\n  google?: boolean;\n  github?: boolean;\n};\ntype AuthCallbacks = {\n  /** The enabled built-in authentication methods. */\n  authMethods?: AuthMethods;\n  /** The sign-in methods to render, such as ['google', 'github']. */\n  loginOptions?: LoginOption[];\n  providers?: AuthProvider[];\n  loading?: boolean;\n  error?: ReactNode;\n  onProviderLogin?: (provider: AuthProvider) => void;\n  onForgotPassword?: () => void;\n  onSignup?: () => void;\n  onLogin?: () => void;\n  children?: ReactNode;\n};\ntype AuthBehavior = {\n  /** Legacy alternative to omitting 'email-password' from loginOptions. */\n  emailPassword?: boolean;\n  onSubmit?: (values: AuthValues) => void | Promise<void>;\n};\ntype AuthProps = AuthCallbacks & AuthBehavior;\nexport function AuthForm({\n  mode,\n  onSubmit,\n  authMethods,\n  loginOptions,\n  emailPassword = true,\n  providers = [],\n  loading,\n  error,\n  onProviderLogin,\n  onForgotPassword,\n  onSignup,\n  onLogin,\n  children,\n}: AuthProps & {\n  mode: 'login' | 'signup' | 'forgot';\n}) {\n  const [values, setValues] = useState<AuthValues>({\n    email: '',\n    password: '',\n    name: '',\n  });\n  const submit = (event: FormEvent) => {\n    event.preventDefault();\n    void onSubmit?.(values);\n  };\n  const isForgot = mode === 'forgot';\n  const options = authMethods\n    ? [\n        ...(authMethods.emailPassword ? ['email-password'] : []),\n        ...(authMethods.google ? ['google'] : []),\n        ...(authMethods.github ? ['github'] : []),\n      ]\n    : (loginOptions ?? [\n        ...(emailPassword ? ['email-password'] : []),\n        ...providers,\n      ]);\n  const usesEmailPassword = options.includes('email-password');\n  const selectedProviders = options.filter(\n    (option) => option !== 'email-password',\n  );\n  return (\n    <form className=\"space-y-4\" onSubmit={submit}>\n      {error && (\n        <Alert variant=\"destructive\" title=\"Could not continue\">\n          {error}\n        </Alert>\n      )}\n      {usesEmailPassword && (\n        <>\n          {mode === 'signup' && (\n            <div>\n              <Label htmlFor=\"name\">Name</Label>\n              <Input\n                id=\"name\"\n                value={values.name}\n                onChange={(event) =>\n                  setValues({ ...values, name: event.target.value })\n                }\n                autoComplete=\"name\"\n                required\n              />\n            </div>\n          )}\n          <div>\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              value={values.email}\n              onChange={(event) =>\n                setValues({ ...values, email: event.target.value })\n              }\n              autoComplete=\"email\"\n              required\n            />\n          </div>\n          {!isForgot && (\n            <div>\n              <div className=\"flex justify-between\">\n                <Label htmlFor=\"password\">Password</Label>\n                {mode === 'login' && (\n                  <button\n                    type=\"button\"\n                    className=\"rui-focus text-xs text-[hsl(var(--rui-primary))]\"\n                    onClick={onForgotPassword}\n                  >\n                    Forgot password?\n                  </button>\n                )}\n              </div>\n              <PasswordInput\n                id=\"password\"\n                value={values.password}\n                onChange={(event) =>\n                  setValues({ ...values, password: event.target.value })\n                }\n                autoComplete={\n                  mode === 'signup' ? 'new-password' : 'current-password'\n                }\n                required\n              />\n            </div>\n          )}\n          <Button className=\"w-full\" type=\"submit\" loading={loading}>\n            {isForgot\n              ? 'Send reset link'\n              : mode === 'signup'\n                ? 'Create account'\n                : 'Continue'}\n          </Button>\n        </>\n      )}\n      {selectedProviders.length > 0 && (\n        <>\n          {usesEmailPassword && (\n            <div className=\"flex items-center gap-3 text-xs text-[hsl(var(--rui-muted-foreground))]\">\n              <Separator />\n              <span>OR</span>\n              <Separator />\n            </div>\n          )}\n          <div className=\"grid gap-2\">\n            {selectedProviders.map((provider) => (\n              <Button\n                key={provider}\n                type=\"button\"\n                variant=\"outline\"\n                onClick={() => onProviderLogin?.(provider)}\n              >\n                Continue with{' '}\n                {provider === 'github'\n                  ? 'GitHub'\n                  : provider.slice(0, 1).toUpperCase() + provider.slice(1)}\n              </Button>\n            ))}\n          </div>\n        </>\n      )}\n      {usesEmailPassword && (\n        <p className=\"text-center text-sm text-[hsl(var(--rui-muted-foreground))]\">\n          {mode === 'login' ? (\n            <>\n              No account?{' '}\n              <button\n                type=\"button\"\n                className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n                onClick={onSignup}\n              >\n                Sign up\n              </button>\n            </>\n          ) : mode === 'signup' ? (\n            <>\n              Already have an account?{' '}\n              <button\n                type=\"button\"\n                className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n                onClick={onLogin}\n              >\n                Log in\n              </button>\n            </>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n              onClick={onLogin}\n            >\n              Back to login\n            </button>\n          )}\n        </p>\n      )}\n      {children}\n    </form>\n  );\n}\nexport function LoginPage({\n  title = 'Welcome back',\n  description = 'Sign in to continue.',\n  as,\n  ...props\n}: AuthProps & {\n  title?: string;\n  description?: string;\n  as?: 'main' | 'div';\n}) {\n  return (\n    <AuthPage title={title} description={description} as={as}>\n      <AuthForm mode=\"login\" {...props} />\n    </AuthPage>\n  );\n}\nexport function SignupPage({\n  title = 'Create your account',\n  description = 'Start with a free account.',\n  as,\n  ...props\n}: AuthProps & {\n  title?: string;\n  description?: string;\n  as?: 'main' | 'div';\n}) {\n  return (\n    <AuthPage title={title} description={description} as={as}>\n      <AuthForm mode=\"signup\" {...props} />\n    </AuthPage>\n  );\n}\nexport function ForgotPasswordPage({\n  as,\n  ...props\n}: AuthProps & {\n  as?: 'main' | 'div';\n}) {\n  return (\n    <AuthPage\n      title=\"Reset your password\"\n      description=\"We’ll email a reset link.\"\n      as={as}\n    >\n      <AuthForm mode=\"forgot\" {...props} />\n    </AuthPage>\n  );\n}\nfunction AuthPage({\n  title,\n  description,\n  children,\n  as,\n}: {\n  title: string;\n  description: string;\n  children: ReactNode;\n  as?: 'main' | 'div';\n}) {\n  return (\n    <PageShell as={as} className=\"grid place-items-center p-4\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <div>\n            <CardTitle>{title}</CardTitle>\n            <CardDescription>{description}</CardDescription>\n          </div>\n        </CardHeader>\n        {children}\n      </Card>\n    </PageShell>\n  );\n}\nexport function AuthModal({\n  open,\n  onOpenChange,\n  ...props\n}: AuthProps & {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Welcome back</DialogTitle>\n          <DialogDescription>Sign in to your account.</DialogDescription>\n        </DialogHeader>\n        <AuthForm mode=\"login\" {...props} />\n      </DialogContent>\n    </Dialog>\n  );\n}\n","'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport {\n  Avatar,\n  Badge,\n  Button,\n  Card,\n  CardDescription,\n  CardTitle,\n  Checkbox,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  EmptyState,\n  Input,\n  Label,\n  Section,\n  Separator,\n  Stack,\n  Switch,\n} from '@sypra-ui/ui';\n\nexport function SettingsLayout({ children }: { children: ReactNode }) {\n  return <div className=\"min-w-0 space-y-8\">{children}</div>;\n}\nexport type Profile = { name: string; email: string; avatar?: string };\nexport function ProfilePage({\n  profile,\n  loading,\n  onSave,\n  fields,\n  children,\n}: {\n  profile: Profile;\n  loading?: boolean;\n  onSave: (profile: Profile) => void | Promise<void>;\n  fields?: { avatar?: boolean; name?: boolean; email?: boolean };\n  children?: ReactNode;\n}) {\n  const [next, setNext] = useState(profile);\n  const visibleFields = { avatar: true, name: true, email: true, ...fields };\n  return (\n    <Section title=\"Profile\" description=\"Update the details people see.\">\n      <Card>\n        <div className=\"mb-5 flex items-center gap-3\">\n          {visibleFields.avatar && <Avatar src={next.avatar} alt={next.name} />}\n          <div>\n            <CardTitle>{next.name || 'Your profile'}</CardTitle>\n            <CardDescription>{next.email}</CardDescription>\n          </div>\n        </div>\n        <form\n          className=\"max-w-lg space-y-4\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            void onSave(next);\n          }}\n        >\n          {visibleFields.name && (\n            <div>\n              <Label htmlFor=\"profile-name\">Name</Label>\n              <Input\n                id=\"profile-name\"\n                value={next.name}\n                onChange={(event) =>\n                  setNext({ ...next, name: event.target.value })\n                }\n                required\n              />\n            </div>\n          )}\n          {visibleFields.email && (\n            <div>\n              <Label htmlFor=\"profile-email\">Email</Label>\n              <Input\n                id=\"profile-email\"\n                type=\"email\"\n                value={next.email}\n                onChange={(event) =>\n                  setNext({ ...next, email: event.target.value })\n                }\n                required\n              />\n            </div>\n          )}\n          {(visibleFields.name || visibleFields.email) && (\n            <Button type=\"submit\" loading={loading}>\n              Save changes\n            </Button>\n          )}\n        </form>\n        {children}\n      </Card>\n    </Section>\n  );\n}\nexport type Session = {\n  id: string;\n  device: string;\n  location?: string;\n  lastActive: string;\n};\nexport function SessionManager({\n  sessions,\n  currentSessionId,\n  loading,\n  onRevoke,\n  onRevokeAll,\n}: {\n  sessions: Session[];\n  currentSessionId?: string;\n  loading?: boolean;\n  onRevoke: (id: string) => void | Promise<void>;\n  onRevokeAll: () => void | Promise<void>;\n}) {\n  return (\n    <Section\n      title=\"Active sessions\"\n      description=\"Review where your account is signed in.\"\n    >\n      <Stack>\n        {sessions.length ? (\n          sessions.map((session) => (\n            <Card\n              key={session.id}\n              className=\"flex flex-wrap items-center justify-between gap-3\"\n            >\n              <div>\n                <CardTitle>\n                  {session.device}{' '}\n                  {session.id === currentSessionId && <Badge>Current</Badge>}\n                </CardTitle>\n                <CardDescription>\n                  {[session.location, session.lastActive]\n                    .filter(Boolean)\n                    .join(' · ')}\n                </CardDescription>\n              </div>\n              {session.id !== currentSessionId && (\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  loading={loading}\n                  onClick={() => void onRevoke(session.id)}\n                >\n                  Revoke\n                </Button>\n              )}\n            </Card>\n          ))\n        ) : (\n          <EmptyState title=\"No sessions\" />\n        )}\n      </Stack>\n      {sessions.length > 1 && (\n        <Button\n          variant=\"destructive\"\n          loading={loading}\n          onClick={() => void onRevokeAll()}\n        >\n          Sign out of other sessions\n        </Button>\n      )}\n    </Section>\n  );\n}\nexport function SecurityPage({\n  sessions,\n  currentSessionId,\n  onRevoke,\n  onRevokeAll,\n  passwordEnabled = true,\n  twoFactorEnabled,\n  onChangePassword,\n  onToggleTwoFactor,\n  sections,\n  children,\n}: {\n  sessions?: Session[];\n  currentSessionId?: string;\n  onRevoke?: (id: string) => void | Promise<void>;\n  onRevokeAll?: () => void | Promise<void>;\n  passwordEnabled?: boolean;\n  twoFactorEnabled?: boolean;\n  onChangePassword?: () => void;\n  onToggleTwoFactor?: (enabled: boolean) => void;\n  sections?: { password?: boolean; twoFactor?: boolean; sessions?: boolean };\n  children?: ReactNode;\n}) {\n  const visibleSections = {\n    password: true,\n    twoFactor: true,\n    sessions: true,\n    ...sections,\n  };\n  return (\n    <Stack gap={8}>\n      {(visibleSections.password || visibleSections.twoFactor) && (\n        <Section title=\"Security\" description=\"Keep your account secure.\">\n          <Card className=\"space-y-4\">\n            {visibleSections.password && (\n              <div className=\"flex items-center justify-between gap-3\">\n                <div>\n                  <CardTitle>Password</CardTitle>\n                  <CardDescription>\n                    {passwordEnabled\n                      ? 'Password is enabled.'\n                      : 'Passwordless sign-in.'}\n                  </CardDescription>\n                </div>\n                {onChangePassword && (\n                  <Button variant=\"outline\" onClick={onChangePassword}>\n                    Change password\n                  </Button>\n                )}\n              </div>\n            )}\n            {visibleSections.password && visibleSections.twoFactor && (\n              <Separator />\n            )}\n            {visibleSections.twoFactor && (\n              <div className=\"flex items-center justify-between gap-3\">\n                <div>\n                  <CardTitle>Two-factor authentication</CardTitle>\n                  <CardDescription>\n                    {twoFactorEnabled ? 'Enabled' : 'Not enabled'}\n                  </CardDescription>\n                </div>\n                <Switch\n                  checked={twoFactorEnabled}\n                  onChange={(event) =>\n                    onToggleTwoFactor?.(event.target.checked)\n                  }\n                />\n              </div>\n            )}\n          </Card>\n        </Section>\n      )}\n      {visibleSections.sessions && sessions && onRevoke && onRevokeAll && (\n        <SessionManager\n          sessions={sessions}\n          currentSessionId={currentSessionId}\n          onRevoke={onRevoke}\n          onRevokeAll={onRevokeAll}\n        />\n      )}\n      {children}\n    </Stack>\n  );\n}\n\nexport type ApiKey = {\n  id: string;\n  name: string;\n  prefix: string;\n  createdAt: string;\n  lastUsedAt?: string;\n  permissions?: string[];\n};\nexport function CreateApiKeyDialog({\n  open,\n  onOpenChange,\n  onCreate,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onCreate: (values: {\n    name: string;\n    permissions: string[];\n  }) => void | Promise<void>;\n}) {\n  const [name, setName] = useState('');\n  const [write, setWrite] = useState(false);\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Create API key</DialogTitle>\n          <DialogDescription>\n            The full key should only be shown once by your application.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody>\n          <div>\n            <Label htmlFor=\"key-name\">Name</Label>\n            <Input\n              id=\"key-name\"\n              value={name}\n              onChange={(event) => setName(event.target.value)}\n              placeholder=\"Production\"\n            />\n          </div>\n          <label className=\"flex items-center gap-2 text-sm\">\n            <Checkbox\n              checked={write}\n              onChange={(event) => setWrite(event.target.checked)}\n            />{' '}\n            Allow write access\n          </label>\n        </DialogBody>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DialogClose>\n          <Button\n            onClick={() => {\n              void onCreate({\n                name,\n                permissions: write ? ['read', 'write'] : ['read'],\n              });\n              onOpenChange(false);\n            }}\n            disabled={!name.trim()}\n          >\n            Create key\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\nexport function ApiKeyManager({\n  keys,\n  loading,\n  onCreate,\n  onRevoke,\n  actions,\n  children,\n}: {\n  keys: ApiKey[];\n  loading?: boolean;\n  onCreate?: (values: {\n    name: string;\n    permissions: string[];\n  }) => void | Promise<void>;\n  onRevoke?: (id: string) => void | Promise<void>;\n  actions?: { create?: boolean; revoke?: boolean };\n  children?: ReactNode;\n}) {\n  const [createOpen, setCreateOpen] = useState(false);\n  const visibleActions = { create: true, revoke: true, ...actions };\n  return (\n    <Section\n      title=\"API keys\"\n      description=\"Create keys for programmatic access.\"\n    >\n      {visibleActions.create && onCreate && (\n        <div className=\"flex justify-end\">\n          <Button onClick={() => setCreateOpen(true)}>Create API key</Button>\n        </div>\n      )}\n      <Stack>\n        {keys.length ? (\n          keys.map((key) => (\n            <Card\n              key={key.id}\n              className=\"flex flex-wrap items-center justify-between gap-3\"\n            >\n              <div>\n                <CardTitle>{key.name}</CardTitle>\n                <CardDescription>\n                  <code>{key.prefix}••••••••</code> · Created {key.createdAt}\n                  {key.lastUsedAt\n                    ? ` · Last used ${key.lastUsedAt}`\n                    : ' · Never used'}\n                </CardDescription>\n              </div>\n              {visibleActions.revoke && onRevoke && (\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  loading={loading}\n                  onClick={() => void onRevoke(key.id)}\n                >\n                  Revoke\n                </Button>\n              )}\n            </Card>\n          ))\n        ) : (\n          <EmptyState\n            title=\"No API keys\"\n            description=\"Create one when you need programmatic access.\"\n          />\n        )}\n      </Stack>\n      {children}\n      {visibleActions.create && onCreate && (\n        <CreateApiKeyDialog\n          open={createOpen}\n          onOpenChange={setCreateOpen}\n          onCreate={onCreate}\n        />\n      )}\n    </Section>\n  );\n}\nexport function ApiKeyPage(props: ComponentProps<typeof ApiKeyManager>) {\n  return <ApiKeyManager {...props} />;\n}\ntype ComponentProps<T> = T extends (props: infer Props) => unknown\n  ? Props\n  : never;\nexport function DangerZone({\n  onDeleteAccount,\n  confirmationText = 'DELETE',\n}: {\n  onDeleteAccount: () => void | Promise<void>;\n  confirmationText?: string;\n}) {\n  const [value, setValue] = useState('');\n  return (\n    <Section title=\"Danger zone\" description=\"These actions are permanent.\">\n      <Card className=\"border-[hsl(var(--rui-destructive))]\">\n        <CardTitle>Delete account</CardTitle>\n        <CardDescription>\n          Delete all account data. This cannot be undone.\n        </CardDescription>\n        <div className=\"mt-4 max-w-sm\">\n          <Label htmlFor=\"delete-confirmation\">\n            Type {confirmationText} to confirm\n          </Label>\n          <Input\n            id=\"delete-confirmation\"\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n          />\n        </div>\n        <Button\n          className=\"mt-4\"\n          variant=\"destructive\"\n          disabled={value !== confirmationText}\n          onClick={() => void onDeleteAccount()}\n        >\n          Delete account\n        </Button>\n      </Card>\n    </Section>\n  );\n}\n","import { type ReactNode } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n  DataTable,\n  EmptyState,\n  Section,\n  Stack,\n  type DataColumn,\n} from '@sypra-ui/ui';\n\nexport type Subscription = {\n  plan: string;\n  price: string;\n  interval?: string;\n  nextBillingDate?: string;\n  status?: string;\n  usage?: Array<{ label: string; value: string }>;\n};\nexport type PaymentMethod = {\n  brand: string;\n  last4: string;\n  expiresAt?: string;\n};\nexport type Invoice = {\n  id: string;\n  date: string;\n  amount: string;\n  status: string;\n  href?: string;\n};\nexport function SubscriptionCard({\n  subscription,\n  onChangePlan,\n  onCancel,\n}: {\n  subscription?: Subscription;\n  onChangePlan?: () => void;\n  onCancel?: () => void;\n}) {\n  if (!subscription)\n    return (\n      <EmptyState\n        title=\"No active subscription\"\n        action={\n          onChangePlan && <Button onClick={onChangePlan}>View plans</Button>\n        }\n      />\n    );\n  return (\n    <Card>\n      <CardHeader>\n        <div>\n          <CardTitle>{subscription.plan}</CardTitle>\n          <CardDescription>\n            {subscription.price}\n            {subscription.interval && ` / ${subscription.interval}`}\n          </CardDescription>\n        </div>\n        {subscription.status && (\n          <Badge variant=\"success\">{subscription.status}</Badge>\n        )}\n      </CardHeader>\n      {subscription.nextBillingDate && (\n        <p className=\"text-sm text-[hsl(var(--rui-muted-foreground))]\">\n          Next billing date: {subscription.nextBillingDate}\n        </p>\n      )}\n      {subscription.usage?.length ? (\n        <div className=\"mt-4 grid gap-2 text-sm sm:grid-cols-2\">\n          {subscription.usage.map((item) => (\n            <div\n              key={item.label}\n              className=\"rounded bg-[hsl(var(--rui-muted))] p-3\"\n            >\n              <strong className=\"block\">{item.value}</strong>\n              <span className=\"text-[hsl(var(--rui-muted-foreground))]\">\n                {item.label}\n              </span>\n            </div>\n          ))}\n        </div>\n      ) : null}\n      <div className=\"mt-5 flex flex-wrap gap-2\">\n        {onChangePlan && <Button onClick={onChangePlan}>Change plan</Button>}\n        {onCancel && (\n          <Button variant=\"outline\" onClick={onCancel}>\n            Manage subscription\n          </Button>\n        )}\n      </div>\n    </Card>\n  );\n}\nexport function PaymentMethodCard({\n  paymentMethod,\n  onUpdate,\n}: {\n  paymentMethod?: PaymentMethod;\n  onUpdate?: () => void;\n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <div>\n          <CardTitle>Payment method</CardTitle>\n          <CardDescription>\n            {paymentMethod\n              ? `${paymentMethod.brand} •••• ${paymentMethod.last4}${paymentMethod.expiresAt ? ` · Expires ${paymentMethod.expiresAt}` : ''}`\n              : 'No payment method on file.'}\n          </CardDescription>\n        </div>\n        {onUpdate && (\n          <Button variant=\"outline\" size=\"sm\" onClick={onUpdate}>\n            {paymentMethod ? 'Update' : 'Add payment method'}\n          </Button>\n        )}\n      </CardHeader>\n    </Card>\n  );\n}\nexport function InvoiceTable({\n  invoices,\n  onView,\n}: {\n  invoices: Invoice[];\n  onView?: (invoice: Invoice) => void;\n}) {\n  const columns: DataColumn<Invoice>[] = [\n    { key: 'date', header: 'Date', sortable: true },\n    { key: 'amount', header: 'Amount' },\n    {\n      key: 'status',\n      header: 'Status',\n      cell: (invoice) => (\n        <Badge\n          variant={\n            invoice.status.toLowerCase() === 'paid' ? 'success' : 'warning'\n          }\n        >\n          {invoice.status}\n        </Badge>\n      ),\n    },\n    {\n      key: 'id',\n      header: <span className=\"sr-only\">Actions</span>,\n      cell: (invoice) =>\n        onView && (\n          <Button variant=\"ghost\" size=\"sm\" onClick={() => onView(invoice)}>\n            View\n          </Button>\n        ),\n    },\n  ];\n  return (\n    <DataTable\n      data={invoices}\n      columns={columns}\n      emptyMessage=\"No invoices yet.\"\n    />\n  );\n}\nexport function PricingTable({\n  plans,\n  onSelect,\n}: {\n  plans: Array<{\n    name: string;\n    price: string;\n    description?: string;\n    features: string[];\n    highlighted?: boolean;\n  }>;\n  onSelect: (plan: string) => void;\n}) {\n  return (\n    <div className=\"grid gap-4 md:grid-cols-3\">\n      {plans.map((plan) => (\n        <Card\n          key={plan.name}\n          className={\n            plan.highlighted ? 'border-[hsl(var(--rui-primary))]' : undefined\n          }\n        >\n          <CardTitle>{plan.name}</CardTitle>\n          <p className=\"mt-3 text-2xl font-bold\">{plan.price}</p>\n          {plan.description && (\n            <CardDescription>{plan.description}</CardDescription>\n          )}\n          <ul className=\"my-5 space-y-2 text-sm\">\n            {plan.features.map((feature) => (\n              <li key={feature}>✓ {feature}</li>\n            ))}\n          </ul>\n          <Button\n            className=\"w-full\"\n            variant={plan.highlighted ? 'primary' : 'outline'}\n            onClick={() => onSelect(plan.name)}\n          >\n            Choose {plan.name}\n          </Button>\n        </Card>\n      ))}\n    </div>\n  );\n}\nexport function BillingPage({\n  subscription,\n  paymentMethod,\n  invoices,\n  onChangePlan,\n  onUpdatePaymentMethod,\n  onCancel,\n  onViewInvoice,\n  sections,\n  children,\n}: {\n  subscription?: Subscription;\n  paymentMethod?: PaymentMethod;\n  invoices?: Invoice[];\n  onChangePlan?: () => void;\n  onUpdatePaymentMethod?: () => void;\n  onCancel?: () => void;\n  onViewInvoice?: (invoice: Invoice) => void;\n  sections?: {\n    subscription?: boolean;\n    paymentMethod?: boolean;\n    invoices?: boolean;\n  };\n  children?: ReactNode;\n}) {\n  const visibleSections = {\n    subscription: true,\n    paymentMethod: true,\n    invoices: true,\n    ...sections,\n  };\n  return (\n    <Stack gap={8}>\n      {visibleSections.subscription && (\n        <Section\n          title=\"Billing\"\n          description=\"Manage your plan and payment details.\"\n        >\n          <SubscriptionCard\n            subscription={subscription}\n            onChangePlan={onChangePlan}\n            onCancel={onCancel}\n          />\n        </Section>\n      )}\n      {visibleSections.paymentMethod && (\n        <PaymentMethodCard\n          paymentMethod={paymentMethod}\n          onUpdate={onUpdatePaymentMethod}\n        />\n      )}\n      {visibleSections.invoices && (\n        <Section title=\"Invoices\">\n          <InvoiceTable invoices={invoices ?? []} onView={onViewInvoice} />\n        </Section>\n      )}\n      {children}\n    </Stack>\n  );\n}\n","import { type ReactNode } from 'react';\nimport {\n  Badge,\n  Card,\n  CardDescription,\n  CardTitle,\n  Container,\n  PageContent,\n  PageHeader,\n  PageShell,\n} from '@sypra-ui/ui';\n\nexport function Hero({\n  eyebrow,\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n}: {\n  eyebrow?: ReactNode;\n  title: ReactNode;\n  description: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryAction?: ReactNode;\n}) {\n  return (\n    <section className=\"py-20 text-center sm:py-28\">\n      {eyebrow && <Badge>{eyebrow}</Badge>}\n      <h1 className=\"mx-auto mt-5 max-w-3xl text-4xl font-bold tracking-tight sm:text-6xl\">\n        {title}\n      </h1>\n      <p className=\"mx-auto mt-5 max-w-2xl text-lg text-[hsl(var(--rui-muted-foreground))]\">\n        {description}\n      </p>\n      <div className=\"mt-8 flex flex-wrap justify-center gap-3\">\n        {primaryAction}\n        {secondaryAction}\n      </div>\n    </section>\n  );\n}\nexport function FeatureGrid({\n  features,\n}: {\n  features: Array<{ title: string; description: string; icon?: ReactNode }>;\n}) {\n  return (\n    <section className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <Card key={feature.title}>\n          {feature.icon && (\n            <div className=\"mb-3 text-[hsl(var(--rui-primary))]\">\n              {feature.icon}\n            </div>\n          )}\n          <CardTitle>{feature.title}</CardTitle>\n          <CardDescription>{feature.description}</CardDescription>\n        </Card>\n      ))}\n    </section>\n  );\n}\nexport function FAQ({\n  items,\n}: {\n  items: Array<{ question: string; answer: ReactNode }>;\n}) {\n  return (\n    <section className=\"mx-auto max-w-3xl space-y-4\">\n      {items.map((item) => (\n        <Card key={item.question}>\n          <CardTitle>{item.question}</CardTitle>\n          <CardDescription>{item.answer}</CardDescription>\n        </Card>\n      ))}\n    </section>\n  );\n}\nexport function CTA({\n  title,\n  description,\n  action,\n}: {\n  title: ReactNode;\n  description?: ReactNode;\n  action: ReactNode;\n}) {\n  return (\n    <section className=\"rounded-[calc(var(--rui-radius)+.2rem)] bg-[hsl(var(--rui-primary))] px-6 py-14 text-center text-[hsl(var(--rui-primary-foreground))]\">\n      <h2 className=\"text-3xl font-bold\">{title}</h2>\n      {description && <p className=\"mt-3 opacity-85\">{description}</p>}\n      <div className=\"mt-6\">{action}</div>\n    </section>\n  );\n}\nexport function Footer({\n  brand,\n  links,\n}: {\n  brand: ReactNode;\n  links?: Array<{ label: string; href: string }>;\n}) {\n  return (\n    <footer className=\"mt-16 border-t border-[hsl(var(--rui-border))] py-8 text-sm text-[hsl(var(--rui-muted-foreground))]\">\n      <div className=\"flex flex-wrap items-center justify-between gap-4\">\n        <strong className=\"text-[hsl(var(--rui-foreground))]\">{brand}</strong>\n        <div className=\"flex gap-4\">\n          {links?.map((link) => (\n            <a\n              key={link.href}\n              href={link.href}\n              className=\"hover:text-[hsl(var(--rui-foreground))]\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </div>\n      </div>\n    </footer>\n  );\n}\nexport function LandingPage({\n  brand,\n  hero,\n  features,\n  children,\n  as,\n  sections,\n}: {\n  brand: ReactNode;\n  hero?: {\n    title: ReactNode;\n    description: ReactNode;\n    primaryAction?: ReactNode;\n    secondaryAction?: ReactNode;\n  };\n  features?: Array<{ title: string; description: string; icon?: ReactNode }>;\n  children?: ReactNode;\n  as?: 'main' | 'div';\n  sections?: {\n    header?: boolean;\n    hero?: boolean;\n    features?: boolean;\n    footer?: boolean;\n  };\n}) {\n  const visibleSections = {\n    header: true,\n    hero: true,\n    features: true,\n    footer: true,\n    ...sections,\n  };\n  return (\n    <PageShell as={as}>\n      <Container>\n        {visibleSections.header && (\n          <header className=\"flex h-16 items-center justify-between\">\n            <strong>{brand}</strong>\n          </header>\n        )}\n        {visibleSections.hero && hero && <Hero {...hero} />}\n        {visibleSections.features && features && (\n          <FeatureGrid features={features} />\n        )}\n        {children}\n        {visibleSections.footer && <Footer brand={brand} />}\n      </Container>\n    </PageShell>\n  );\n}\n\nexport function SettingsPageDemo({ children }: { children: ReactNode }) {\n  return (\n    <PageShell>\n      <Container className=\"py-8\">\n        <PageHeader title=\"Settings\" description=\"Manage your account.\" />\n        <PageContent>{children}</PageContent>\n      </Container>\n    </PageShell>\n  );\n}\n"],"mappings":"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","names":["useState","Button","Card","CardDescription","CardTitle","Dialog","DialogContent","DialogDescription","DialogHeader","DialogTitle","Input","Label","Separator","jsx","jsxs","Badge","Button","Card","CardDescription","CardHeader","CardTitle","EmptyState","Section","Stack","jsx","jsxs","Badge","Card","CardDescription","CardTitle","PageShell","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sypra-ui/pages",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Data-and-callback driven React page compositions.",
   "license": "MIT",
   "repository": {