@sypra-ui/pages 0.2.0 → 0.3.0

package/README.md

@@ -31,10 +31,10 @@ 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.
+`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.
 
 ```tsx
 const startOAuth = (provider: string) => {
@@ -45,16 +45,21 @@ const startOAuth = (provider: string) => {
 <LoginPage onSubmit={signInWithPassword} />;
 
 // Google only (or use 'github')
-<LoginPage
-  emailPassword={false}
-  providers={['google']}
-  onProviderLogin={startOAuth}
-/>;
+<LoginPage loginOptions={['google']} onProviderLogin={startOAuth} />;
 
 // Email/password, Google, and GitHub
 <LoginPage
-  providers={['google', 'github']}
+  loginOptions={['email-password', 'google', 'github']}
   onProviderLogin={startOAuth}
   onSubmit={signInWithPassword}
 />;
+
+// Your own page shell
+<section className="my-auth-page">
+  <AuthForm
+    mode="login"
+    loginOptions={['google', 'github']}
+    onProviderLogin={startOAuth}
+  />
+</section>;
 ```

package/dist/index.d.ts

@@ -2,12 +2,15 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 type AuthProvider = 'google' | 'github' | string;
+type LoginOption = 'email-password' | AuthProvider;
 type AuthValues = {
     email: string;
     password: string;
     name?: string;
 };
 type AuthCallbacks = {
+    /** The sign-in methods to render, such as ['google', 'github']. */
+    loginOptions?: LoginOption[];
     providers?: AuthProvider[];
     loading?: boolean;
     error?: ReactNode;
@@ -17,15 +20,12 @@ type AuthCallbacks = {
     onLogin?: () => void;
 };
 type AuthMethods = {
-    /** Render the email/password form. Disable for provider-only sign-in. */
-    emailPassword?: true;
-    onSubmit: (values: AuthValues) => void | Promise<void>;
-} | {
-    emailPassword: false;
+    /** 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, emailPassword, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, }: AuthProps & {
+declare function AuthForm({ mode, onSubmit, loginOptions, emailPassword, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, }: AuthProps & {
     mode: 'login' | 'signup' | 'forgot';
 }): react.JSX.Element;
 declare function LoginPage({ title, description, as, ...props }: AuthProps & {
@@ -222,4 +222,4 @@ 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, LoginPage, type PaymentMethod, PaymentMethodCard, PricingTable, type Profile, ProfilePage, SecurityPage, type Session, SessionManager, SettingsLayout, SettingsPageDemo, SignupPage, type Subscription, SubscriptionCard };
+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 };

package/dist/index.js

@@ -22,6 +22,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AuthForm({
   mode,
   onSubmit,
+  loginOptions,
   emailPassword = true,
   providers = [],
   loading,
@@ -41,9 +42,17 @@ function AuthForm({
     void onSubmit?.(values);
   };
   const isForgot = mode === "forgot";
+  const options = loginOptions ?? [
+    ...emailPassword ? ["email-password"] : [],
+    ...providers
+  ];
+  const usesEmailPassword = options.includes("email-password");
+  const selectedProviders = options.filter(
+    (option) => option !== "email-password"
+  );
   return /* @__PURE__ */ jsxs("form", { className: "space-y-4", onSubmit: submit, children: [
     error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", title: "Could not continue", children: error }),
-    emailPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
+    usesEmailPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
       mode === "signup" && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Name" }),
         /* @__PURE__ */ jsx(
@@ -97,13 +106,13 @@ function AuthForm({
       ] }),
       /* @__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: [
-      emailPassword && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-[hsl(var(--rui-muted-foreground))]", children: [
+    selectedProviders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      usesEmailPassword && /* @__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, {})
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: providers.map((provider) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: selectedProviders.map((provider) => /* @__PURE__ */ jsxs(
         Button,
         {
           type: "button",
@@ -118,7 +127,7 @@ function AuthForm({
         provider
       )) })
     ] }),
-    emailPassword && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-[hsl(var(--rui-muted-foreground))]", children: mode === "login" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    usesEmailPassword && /* @__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(

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};\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"]}
+{"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"]}

package/package.json

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