@sypra-ui/pages 0.1.0 → 0.2.0

package/README.md

@@ -28,3 +28,33 @@ Apply `--rui-*` CSS variables to your application or a page wrapper to change
 the color palette and shape. Page components remain data-and-callback driven,
 so your application retains ownership of authentication, routing, APIs, and
 payments.
+
+## Authentication methods
+
+`LoginPage`, `SignupPage`, and `AuthModal` can show email/password and any
+selection of provider buttons. Email/password is enabled by default; set
+`emailPassword={false}` for provider-only sign-in. The library calls your
+handler and never owns OAuth client IDs, redirects, or callback exchanges.
+
+```tsx
+const startOAuth = (provider: string) => {
+  window.location.assign(`/auth/${provider}`);
+};
+
+// Email/password only
+<LoginPage onSubmit={signInWithPassword} />;
+
+// Google only (or use 'github')
+<LoginPage
+  emailPassword={false}
+  providers={['google']}
+  onProviderLogin={startOAuth}
+/>;
+
+// Email/password, Google, and GitHub
+<LoginPage
+  providers={['google', 'github']}
+  onProviderLogin={startOAuth}
+  onSubmit={signInWithPassword}
+/>;
+```

package/dist/index.d.ts

@@ -16,30 +16,34 @@ type AuthCallbacks = {
     onSignup?: () => void;
     onLogin?: () => void;
 };
-declare function AuthForm({ mode, onSubmit, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, }: AuthCallbacks & {
-    mode: 'login' | 'signup' | 'forgot';
+type AuthMethods = {
+    /** Render the email/password form. Disable for provider-only sign-in. */
+    emailPassword?: true;
     onSubmit: (values: AuthValues) => void | Promise<void>;
+} | {
+    emailPassword: false;
+    onSubmit?: (values: AuthValues) => void | Promise<void>;
+};
+type AuthProps = AuthCallbacks & AuthMethods;
+declare function AuthForm({ mode, onSubmit, emailPassword, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, }: AuthProps & {
+    mode: 'login' | 'signup' | 'forgot';
 }): react.JSX.Element;
-declare function LoginPage({ title, description, onSubmit, as, ...props }: AuthCallbacks & {
+declare function LoginPage({ title, description, as, ...props }: AuthProps & {
     title?: string;
     description?: string;
     as?: 'main' | 'div';
-    onSubmit: (values: AuthValues) => void | Promise<void>;
 }): react.JSX.Element;
-declare function SignupPage({ title, description, onSubmit, as, ...props }: AuthCallbacks & {
+declare function SignupPage({ title, description, as, ...props }: AuthProps & {
     title?: string;
     description?: string;
     as?: 'main' | 'div';
-    onSubmit: (values: AuthValues) => void | Promise<void>;
 }): react.JSX.Element;
-declare function ForgotPasswordPage({ onSubmit, as, ...props }: AuthCallbacks & {
-    onSubmit: (values: AuthValues) => void | Promise<void>;
+declare function ForgotPasswordPage({ as, ...props }: AuthProps & {
     as?: 'main' | 'div';
 }): react.JSX.Element;
-declare function AuthModal({ open, onOpenChange, onSubmit, ...props }: AuthCallbacks & {
+declare function AuthModal({ open, onOpenChange, ...props }: AuthProps & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    onSubmit: (values: AuthValues) => void | Promise<void>;
 }): react.JSX.Element;
 
 declare function SettingsLayout({ children }: {

package/dist/index.js

@@ -22,6 +22,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AuthForm({
   mode,
   onSubmit,
+  emailPassword = true,
   providers = [],
   loading,
   error,
@@ -37,65 +38,67 @@ function AuthForm({
   });
   const submit = (event) => {
     event.preventDefault();
-    void onSubmit(values);
+    void onSubmit?.(values);
   };
   const isForgot = mode === "forgot";
   return /* @__PURE__ */ jsxs("form", { className: "space-y-4", onSubmit: submit, children: [
     error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", title: "Could not continue", children: error }),
-    mode === "signup" && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Name" }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: "name",
-          value: values.name,
-          onChange: (event) => setValues({ ...values, name: event.target.value }),
-          autoComplete: "name",
-          required: true
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: "email",
-          type: "email",
-          value: values.email,
-          onChange: (event) => setValues({ ...values, email: event.target.value }),
-          autoComplete: "email",
-          required: true
-        }
-      )
-    ] }),
-    !isForgot && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "Password" }),
-        mode === "login" && /* @__PURE__ */ jsx(
-          "button",
+    emailPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
+      mode === "signup" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Name" }),
+        /* @__PURE__ */ jsx(
+          Input,
           {
-            type: "button",
-            className: "rui-focus text-xs text-[hsl(var(--rui-primary))]",
-            onClick: onForgotPassword,
-            children: "Forgot password?"
+            id: "name",
+            value: values.name,
+            onChange: (event) => setValues({ ...values, name: event.target.value }),
+            autoComplete: "name",
+            required: true
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(
-        PasswordInput,
-        {
-          id: "password",
-          value: values.password,
-          onChange: (event) => setValues({ ...values, password: event.target.value }),
-          autoComplete: mode === "signup" ? "new-password" : "current-password",
-          required: true
-        }
-      )
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            value: values.email,
+            onChange: (event) => setValues({ ...values, email: event.target.value }),
+            autoComplete: "email",
+            required: true
+          }
+        )
+      ] }),
+      !isForgot && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "Password" }),
+          mode === "login" && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rui-focus text-xs text-[hsl(var(--rui-primary))]",
+              onClick: onForgotPassword,
+              children: "Forgot password?"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          PasswordInput,
+          {
+            id: "password",
+            value: values.password,
+            onChange: (event) => setValues({ ...values, password: event.target.value }),
+            autoComplete: mode === "signup" ? "new-password" : "current-password",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Button, { className: "w-full", type: "submit", loading, children: isForgot ? "Send reset link" : mode === "signup" ? "Create account" : "Continue" })
     ] }),
-    /* @__PURE__ */ jsx(Button, { className: "w-full", type: "submit", loading, children: isForgot ? "Send reset link" : mode === "signup" ? "Create account" : "Continue" }),
     providers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-[hsl(var(--rui-muted-foreground))]", children: [
+      emailPassword && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-[hsl(var(--rui-muted-foreground))]", children: [
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsx("span", { children: "OR" }),
         /* @__PURE__ */ jsx(Separator, {})
@@ -109,13 +112,13 @@ function AuthForm({
           children: [
             "Continue with",
             " ",
-            provider.slice(0, 1).toUpperCase() + provider.slice(1)
+            provider === "github" ? "GitHub" : provider.slice(0, 1).toUpperCase() + provider.slice(1)
           ]
         },
         provider
       )) })
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-[hsl(var(--rui-muted-foreground))]", children: mode === "login" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    emailPassword && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-[hsl(var(--rui-muted-foreground))]", children: mode === "login" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       "No account?",
       " ",
       /* @__PURE__ */ jsx(
@@ -153,23 +156,20 @@ function AuthForm({
 function LoginPage({
   title = "Welcome back",
   description = "Sign in to continue.",
-  onSubmit,
   as,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AuthPage, { title, description, as, children: /* @__PURE__ */ jsx(AuthForm, { mode: "login", onSubmit, ...props }) });
+  return /* @__PURE__ */ jsx(AuthPage, { title, description, as, children: /* @__PURE__ */ jsx(AuthForm, { mode: "login", ...props }) });
 }
 function SignupPage({
   title = "Create your account",
   description = "Start with a free account.",
-  onSubmit,
   as,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AuthPage, { title, description, as, children: /* @__PURE__ */ jsx(AuthForm, { mode: "signup", onSubmit, ...props }) });
+  return /* @__PURE__ */ jsx(AuthPage, { title, description, as, children: /* @__PURE__ */ jsx(AuthForm, { mode: "signup", ...props }) });
 }
 function ForgotPasswordPage({
-  onSubmit,
   as,
   ...props
 }) {
@@ -179,7 +179,7 @@ function ForgotPasswordPage({
       title: "Reset your password",
       description: "We\u2019ll email a reset link.",
       as,
-      children: /* @__PURE__ */ jsx(AuthForm, { mode: "forgot", onSubmit, ...props })
+      children: /* @__PURE__ */ jsx(AuthForm, { mode: "forgot", ...props })
     }
   );
 }
@@ -200,7 +200,6 @@ function AuthPage({
 function AuthModal({
   open,
   onOpenChange,
-  onSubmit,
   ...props
 }) {
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
@@ -208,7 +207,7 @@ function AuthModal({
       /* @__PURE__ */ jsx(DialogTitle, { children: "Welcome back" }),
       /* @__PURE__ */ jsx(DialogDescription, { children: "Sign in to your account." })
     ] }),
-    /* @__PURE__ */ jsx(AuthForm, { mode: "login", onSubmit, ...props })
+    /* @__PURE__ */ jsx(AuthForm, { mode: "login", ...props })
   ] }) });
 }
 

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 AuthValues = { email: string; password: string; name?: string };\ntype AuthCallbacks = {\n  providers?: AuthProvider[];\n  loading?: boolean;\n  error?: ReactNode;\n  onProviderLogin?: (provider: AuthProvider) => void;\n  onForgotPassword?: () => void;\n  onSignup?: () => void;\n  onLogin?: () => void;\n};\nexport function AuthForm({\n  mode,\n  onSubmit,\n  providers = [],\n  loading,\n  error,\n  onProviderLogin,\n  onForgotPassword,\n  onSignup,\n  onLogin,\n}: AuthCallbacks & {\n  mode: 'login' | 'signup' | 'forgot';\n  onSubmit: (values: AuthValues) => void | Promise<void>;\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  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      {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      {providers.length > 0 && (\n        <>\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          <div className=\"grid gap-2\">\n            {providers.map((provider) => (\n              <Button\n                key={provider}\n                type=\"button\"\n                variant=\"outline\"\n                onClick={() => onProviderLogin?.(provider)}\n              >\n                Continue with{' '}\n                {provider.slice(0, 1).toUpperCase() + provider.slice(1)}\n              </Button>\n            ))}\n          </div>\n        </>\n      )}\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    </form>\n  );\n}\nexport function LoginPage({\n  title = 'Welcome back',\n  description = 'Sign in to continue.',\n  onSubmit,\n  as,\n  ...props\n}: AuthCallbacks & {\n  title?: string;\n  description?: string;\n  as?: 'main' | 'div';\n  onSubmit: (values: AuthValues) => void | Promise<void>;\n}) {\n  return (\n    <AuthPage title={title} description={description} as={as}>\n      <AuthForm mode=\"login\" onSubmit={onSubmit} {...props} />\n    </AuthPage>\n  );\n}\nexport function SignupPage({\n  title = 'Create your account',\n  description = 'Start with a free account.',\n  onSubmit,\n  as,\n  ...props\n}: AuthCallbacks & {\n  title?: string;\n  description?: string;\n  as?: 'main' | 'div';\n  onSubmit: (values: AuthValues) => void | Promise<void>;\n}) {\n  return (\n    <AuthPage title={title} description={description} as={as}>\n      <AuthForm mode=\"signup\" onSubmit={onSubmit} {...props} />\n    </AuthPage>\n  );\n}\nexport function ForgotPasswordPage({\n  onSubmit,\n  as,\n  ...props\n}: AuthCallbacks & {\n  onSubmit: (values: AuthValues) => void | Promise<void>;\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\" onSubmit={onSubmit} {...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  onSubmit,\n  ...props\n}: AuthCallbacks & {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onSubmit: (values: AuthValues) => void | Promise<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\" onSubmit={onSubmit} {...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 AuthValues = { email: string; password: string; name?: string };\ntype AuthCallbacks = {\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  | {\n      /** Render the email/password form. Disable for provider-only sign-in. */\n      emailPassword?: true;\n      onSubmit: (values: AuthValues) => void | Promise<void>;\n    }\n  | {\n      emailPassword: false;\n      onSubmit?: (values: AuthValues) => void | Promise<void>;\n    };\ntype AuthProps = AuthCallbacks & AuthMethods;\nexport function AuthForm({\n  mode,\n  onSubmit,\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  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      {emailPassword && (\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      {providers.length > 0 && (\n        <>\n          {emailPassword && (\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            {providers.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      {emailPassword && (\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"]}

package/package.json

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