@sypra-ui/pages 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# @sypra-ui/pages
+
+Reusable frontend-only page compositions. Supply data and callbacks; no
+provider, API, or router is required.
+
+## Install
+
+```sh
+pnpm add @sypra-ui/ui @sypra-ui/pages
+```
+
+Pages use `@sypra-ui/ui` for all visual styling. Follow the UI package's
+Tailwind setup and import `@sypra-ui/ui/styles.css` once. Include both package
+builds in Tailwind's content configuration:
+
+```ts
+// tailwind.config.ts
+export default {
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@sypra-ui/ui/dist/**/*.{js,mjs}',
+    './node_modules/@sypra-ui/pages/dist/**/*.{js,mjs}',
+  ],
+};
+```
+
+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.

package/dist/index.d.ts

@@ -0,0 +1,221 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type AuthProvider = 'google' | 'github' | string;
+type AuthValues = {
+    email: string;
+    password: string;
+    name?: string;
+};
+type AuthCallbacks = {
+    providers?: AuthProvider[];
+    loading?: boolean;
+    error?: ReactNode;
+    onProviderLogin?: (provider: AuthProvider) => void;
+    onForgotPassword?: () => void;
+    onSignup?: () => void;
+    onLogin?: () => void;
+};
+declare function AuthForm({ mode, onSubmit, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, }: AuthCallbacks & {
+    mode: 'login' | 'signup' | 'forgot';
+    onSubmit: (values: AuthValues) => void | Promise<void>;
+}): react.JSX.Element;
+declare function LoginPage({ title, description, onSubmit, as, ...props }: AuthCallbacks & {
+    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 & {
+    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>;
+    as?: 'main' | 'div';
+}): react.JSX.Element;
+declare function AuthModal({ open, onOpenChange, onSubmit, ...props }: AuthCallbacks & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSubmit: (values: AuthValues) => void | Promise<void>;
+}): react.JSX.Element;
+
+declare function SettingsLayout({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+type Profile = {
+    name: string;
+    email: string;
+    avatar?: string;
+};
+declare function ProfilePage({ profile, loading, onSave, }: {
+    profile: Profile;
+    loading?: boolean;
+    onSave: (profile: Profile) => void | Promise<void>;
+}): react.JSX.Element;
+type Session = {
+    id: string;
+    device: string;
+    location?: string;
+    lastActive: string;
+};
+declare function SessionManager({ sessions, currentSessionId, loading, onRevoke, onRevokeAll, }: {
+    sessions: Session[];
+    currentSessionId?: string;
+    loading?: boolean;
+    onRevoke: (id: string) => void | Promise<void>;
+    onRevokeAll: () => void | Promise<void>;
+}): react.JSX.Element;
+declare function SecurityPage({ sessions, currentSessionId, onRevoke, onRevokeAll, passwordEnabled, twoFactorEnabled, onChangePassword, onToggleTwoFactor, }: {
+    sessions: Session[];
+    currentSessionId?: string;
+    onRevoke: (id: string) => void | Promise<void>;
+    onRevokeAll: () => void | Promise<void>;
+    passwordEnabled?: boolean;
+    twoFactorEnabled?: boolean;
+    onChangePassword?: () => void;
+    onToggleTwoFactor?: (enabled: boolean) => void;
+}): react.JSX.Element;
+type ApiKey = {
+    id: string;
+    name: string;
+    prefix: string;
+    createdAt: string;
+    lastUsedAt?: string;
+    permissions?: string[];
+};
+declare function CreateApiKeyDialog({ open, onOpenChange, onCreate, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreate: (values: {
+        name: string;
+        permissions: string[];
+    }) => void | Promise<void>;
+}): react.JSX.Element;
+declare function ApiKeyManager({ keys, loading, onCreate, onRevoke, }: {
+    keys: ApiKey[];
+    loading?: boolean;
+    onCreate: (values: {
+        name: string;
+        permissions: string[];
+    }) => void | Promise<void>;
+    onRevoke: (id: string) => void | Promise<void>;
+}): react.JSX.Element;
+declare function ApiKeyPage(props: ComponentProps<typeof ApiKeyManager>): react.JSX.Element;
+type ComponentProps<T> = T extends (props: infer Props) => unknown ? Props : never;
+declare function DangerZone({ onDeleteAccount, confirmationText, }: {
+    onDeleteAccount: () => void | Promise<void>;
+    confirmationText?: string;
+}): react.JSX.Element;
+
+type Subscription = {
+    plan: string;
+    price: string;
+    interval?: string;
+    nextBillingDate?: string;
+    status?: string;
+    usage?: Array<{
+        label: string;
+        value: string;
+    }>;
+};
+type PaymentMethod = {
+    brand: string;
+    last4: string;
+    expiresAt?: string;
+};
+type Invoice = {
+    id: string;
+    date: string;
+    amount: string;
+    status: string;
+    href?: string;
+};
+declare function SubscriptionCard({ subscription, onChangePlan, onCancel, }: {
+    subscription?: Subscription;
+    onChangePlan?: () => void;
+    onCancel?: () => void;
+}): react.JSX.Element;
+declare function PaymentMethodCard({ paymentMethod, onUpdate, }: {
+    paymentMethod?: PaymentMethod;
+    onUpdate?: () => void;
+}): react.JSX.Element;
+declare function InvoiceTable({ invoices, onView, }: {
+    invoices: Invoice[];
+    onView?: (invoice: Invoice) => void;
+}): react.JSX.Element;
+declare function PricingTable({ plans, onSelect, }: {
+    plans: Array<{
+        name: string;
+        price: string;
+        description?: string;
+        features: string[];
+        highlighted?: boolean;
+    }>;
+    onSelect: (plan: string) => void;
+}): react.JSX.Element;
+declare function BillingPage({ subscription, paymentMethod, invoices, onChangePlan, onUpdatePaymentMethod, onCancel, onViewInvoice, }: {
+    subscription?: Subscription;
+    paymentMethod?: PaymentMethod;
+    invoices: Invoice[];
+    onChangePlan?: () => void;
+    onUpdatePaymentMethod?: () => void;
+    onCancel?: () => void;
+    onViewInvoice?: (invoice: Invoice) => void;
+}): react.JSX.Element;
+
+declare function Hero({ eyebrow, title, description, primaryAction, secondaryAction, }: {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
+}): react.JSX.Element;
+declare function FeatureGrid({ features, }: {
+    features: Array<{
+        title: string;
+        description: string;
+        icon?: ReactNode;
+    }>;
+}): react.JSX.Element;
+declare function FAQ({ items, }: {
+    items: Array<{
+        question: string;
+        answer: ReactNode;
+    }>;
+}): react.JSX.Element;
+declare function CTA({ title, description, action, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    action: ReactNode;
+}): react.JSX.Element;
+declare function Footer({ brand, links, }: {
+    brand: ReactNode;
+    links?: Array<{
+        label: string;
+        href: string;
+    }>;
+}): react.JSX.Element;
+declare function LandingPage({ brand, hero, features, children, as, }: {
+    brand: ReactNode;
+    hero: {
+        title: ReactNode;
+        description: ReactNode;
+        primaryAction?: ReactNode;
+        secondaryAction?: ReactNode;
+    };
+    features?: Array<{
+        title: string;
+        description: string;
+        icon?: ReactNode;
+    }>;
+    children?: ReactNode;
+    as?: 'main' | 'div';
+}): react.JSX.Element;
+declare function SettingsPageDemo({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { type ApiKey, ApiKeyManager, ApiKeyPage, AuthForm, AuthModal, type AuthProvider, type AuthValues, BillingPage, CTA, CreateApiKeyDialog, DangerZone, FAQ, FeatureGrid, Footer, ForgotPasswordPage, Hero, type Invoice, InvoiceTable, LandingPage, LoginPage, type PaymentMethod, PaymentMethodCard, PricingTable, type Profile, ProfilePage, SecurityPage, type Session, SessionManager, SettingsLayout, SettingsPageDemo, SignupPage, type Subscription, SubscriptionCard };

package/dist/index.js

@@ -0,0 +1,850 @@
+// src/pages/auth.tsx
+import { useState } from "react";
+import {
+  Alert,
+  Button,
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  PageShell,
+  PasswordInput,
+  Separator
+} from "@sypra-ui/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AuthForm({
+  mode,
+  onSubmit,
+  providers = [],
+  loading,
+  error,
+  onProviderLogin,
+  onForgotPassword,
+  onSignup,
+  onLogin
+}) {
+  const [values, setValues] = useState({
+    email: "",
+    password: "",
+    name: ""
+  });
+  const submit = (event) => {
+    event.preventDefault();
+    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",
+          {
+            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" }),
+    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: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx("span", { children: "OR" }),
+        /* @__PURE__ */ jsx(Separator, {})
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: providers.map((provider) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => onProviderLogin?.(provider),
+          children: [
+            "Continue with",
+            " ",
+            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: [
+      "No account?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rui-focus text-[hsl(var(--rui-primary))]",
+          onClick: onSignup,
+          children: "Sign up"
+        }
+      )
+    ] }) : mode === "signup" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rui-focus text-[hsl(var(--rui-primary))]",
+          onClick: onLogin,
+          children: "Log in"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "rui-focus text-[hsl(var(--rui-primary))]",
+        onClick: onLogin,
+        children: "Back to login"
+      }
+    ) })
+  ] });
+}
+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 }) });
+}
+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 }) });
+}
+function ForgotPasswordPage({
+  onSubmit,
+  as,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AuthPage,
+    {
+      title: "Reset your password",
+      description: "We\u2019ll email a reset link.",
+      as,
+      children: /* @__PURE__ */ jsx(AuthForm, { mode: "forgot", onSubmit, ...props })
+    }
+  );
+}
+function AuthPage({
+  title,
+  description,
+  children,
+  as
+}) {
+  return /* @__PURE__ */ jsx(PageShell, { as, className: "grid place-items-center p-4", children: /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-md", children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }) }),
+    children
+  ] }) });
+}
+function AuthModal({
+  open,
+  onOpenChange,
+  onSubmit,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Welcome back" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Sign in to your account." })
+    ] }),
+    /* @__PURE__ */ jsx(AuthForm, { mode: "login", onSubmit, ...props })
+  ] }) });
+}
+
+// src/pages/settings.tsx
+import { useState as useState2 } from "react";
+import {
+  Avatar,
+  Badge,
+  Button as Button2,
+  Card as Card2,
+  CardDescription as CardDescription2,
+  CardTitle as CardTitle2,
+  Checkbox,
+  Dialog as Dialog2,
+  DialogBody,
+  DialogClose,
+  DialogContent as DialogContent2,
+  DialogDescription as DialogDescription2,
+  DialogFooter,
+  DialogHeader as DialogHeader2,
+  DialogTitle as DialogTitle2,
+  EmptyState,
+  Input as Input2,
+  Label as Label2,
+  Section,
+  Separator as Separator2,
+  Stack,
+  Switch
+} from "@sypra-ui/ui";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SettingsLayout({ children }) {
+  return /* @__PURE__ */ jsx2("div", { className: "min-w-0 space-y-8", children });
+}
+function ProfilePage({
+  profile,
+  loading,
+  onSave
+}) {
+  const [next, setNext] = useState2(profile);
+  return /* @__PURE__ */ jsx2(Section, { title: "Profile", description: "Update the details people see.", children: /* @__PURE__ */ jsxs2(Card2, { children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-5 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx2(Avatar, { src: next.avatar, alt: next.name }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(CardTitle2, { children: next.name || "Your profile" }),
+        /* @__PURE__ */ jsx2(CardDescription2, { children: next.email })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        className: "max-w-lg space-y-4",
+        onSubmit: (event) => {
+          event.preventDefault();
+          void onSave(next);
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(Label2, { htmlFor: "profile-name", children: "Name" }),
+            /* @__PURE__ */ jsx2(
+              Input2,
+              {
+                id: "profile-name",
+                value: next.name,
+                onChange: (event) => setNext({ ...next, name: event.target.value }),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(Label2, { htmlFor: "profile-email", children: "Email" }),
+            /* @__PURE__ */ jsx2(
+              Input2,
+              {
+                id: "profile-email",
+                type: "email",
+                value: next.email,
+                onChange: (event) => setNext({ ...next, email: event.target.value }),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(Button2, { type: "submit", loading, children: "Save changes" })
+        ]
+      }
+    )
+  ] }) });
+}
+function SessionManager({
+  sessions,
+  currentSessionId,
+  loading,
+  onRevoke,
+  onRevokeAll
+}) {
+  return /* @__PURE__ */ jsxs2(
+    Section,
+    {
+      title: "Active sessions",
+      description: "Review where your account is signed in.",
+      children: [
+        /* @__PURE__ */ jsx2(Stack, { children: sessions.length ? sessions.map((session) => /* @__PURE__ */ jsxs2(
+          Card2,
+          {
+            className: "flex flex-wrap items-center justify-between gap-3",
+            children: [
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsxs2(CardTitle2, { children: [
+                  session.device,
+                  " ",
+                  session.id === currentSessionId && /* @__PURE__ */ jsx2(Badge, { children: "Current" })
+                ] }),
+                /* @__PURE__ */ jsx2(CardDescription2, { children: [session.location, session.lastActive].filter(Boolean).join(" \xB7 ") })
+              ] }),
+              session.id !== currentSessionId && /* @__PURE__ */ jsx2(
+                Button2,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  loading,
+                  onClick: () => void onRevoke(session.id),
+                  children: "Revoke"
+                }
+              )
+            ]
+          },
+          session.id
+        )) : /* @__PURE__ */ jsx2(EmptyState, { title: "No sessions" }) }),
+        sessions.length > 1 && /* @__PURE__ */ jsx2(
+          Button2,
+          {
+            variant: "destructive",
+            loading,
+            onClick: () => void onRevokeAll(),
+            children: "Sign out of other sessions"
+          }
+        )
+      ]
+    }
+  );
+}
+function SecurityPage({
+  sessions,
+  currentSessionId,
+  onRevoke,
+  onRevokeAll,
+  passwordEnabled = true,
+  twoFactorEnabled,
+  onChangePassword,
+  onToggleTwoFactor
+}) {
+  return /* @__PURE__ */ jsxs2(Stack, { gap: 8, children: [
+    /* @__PURE__ */ jsx2(Section, { title: "Security", description: "Keep your account secure.", children: /* @__PURE__ */ jsxs2(Card2, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2(CardTitle2, { children: "Password" }),
+          /* @__PURE__ */ jsx2(CardDescription2, { children: passwordEnabled ? "Password is enabled." : "Passwordless sign-in." })
+        ] }),
+        onChangePassword && /* @__PURE__ */ jsx2(Button2, { variant: "outline", onClick: onChangePassword, children: "Change password" })
+      ] }),
+      /* @__PURE__ */ jsx2(Separator2, {}),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2(CardTitle2, { children: "Two-factor authentication" }),
+          /* @__PURE__ */ jsx2(CardDescription2, { children: twoFactorEnabled ? "Enabled" : "Not enabled" })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          Switch,
+          {
+            checked: twoFactorEnabled,
+            onChange: (event) => onToggleTwoFactor?.(event.target.checked)
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx2(
+      SessionManager,
+      {
+        sessions,
+        currentSessionId,
+        onRevoke,
+        onRevokeAll
+      }
+    )
+  ] });
+}
+function CreateApiKeyDialog({
+  open,
+  onOpenChange,
+  onCreate
+}) {
+  const [name, setName] = useState2("");
+  const [write, setWrite] = useState2(false);
+  return /* @__PURE__ */ jsx2(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(DialogContent2, { children: [
+    /* @__PURE__ */ jsxs2(DialogHeader2, { children: [
+      /* @__PURE__ */ jsx2(DialogTitle2, { children: "Create API key" }),
+      /* @__PURE__ */ jsx2(DialogDescription2, { children: "The full key should only be shown once by your application." })
+    ] }),
+    /* @__PURE__ */ jsxs2(DialogBody, { children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(Label2, { htmlFor: "key-name", children: "Name" }),
+        /* @__PURE__ */ jsx2(
+          Input2,
+          {
+            id: "key-name",
+            value: name,
+            onChange: (event) => setName(event.target.value),
+            placeholder: "Production"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx2(
+          Checkbox,
+          {
+            checked: write,
+            onChange: (event) => setWrite(event.target.checked)
+          }
+        ),
+        " ",
+        "Allow write access"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2(DialogFooter, { children: [
+      /* @__PURE__ */ jsx2(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx2(Button2, { variant: "outline", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx2(
+        Button2,
+        {
+          onClick: () => {
+            void onCreate({
+              name,
+              permissions: write ? ["read", "write"] : ["read"]
+            });
+            onOpenChange(false);
+          },
+          disabled: !name.trim(),
+          children: "Create key"
+        }
+      )
+    ] })
+  ] }) });
+}
+function ApiKeyManager({
+  keys,
+  loading,
+  onCreate,
+  onRevoke
+}) {
+  const [createOpen, setCreateOpen] = useState2(false);
+  return /* @__PURE__ */ jsxs2(
+    Section,
+    {
+      title: "API keys",
+      description: "Create keys for programmatic access.",
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx2(Button2, { onClick: () => setCreateOpen(true), children: "Create API key" }) }),
+        /* @__PURE__ */ jsx2(Stack, { children: keys.length ? keys.map((key) => /* @__PURE__ */ jsxs2(
+          Card2,
+          {
+            className: "flex flex-wrap items-center justify-between gap-3",
+            children: [
+              /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsx2(CardTitle2, { children: key.name }),
+                /* @__PURE__ */ jsxs2(CardDescription2, { children: [
+                  /* @__PURE__ */ jsxs2("code", { children: [
+                    key.prefix,
+                    "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+                  ] }),
+                  " \xB7 Created ",
+                  key.createdAt,
+                  key.lastUsedAt ? ` \xB7 Last used ${key.lastUsedAt}` : " \xB7 Never used"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                Button2,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  loading,
+                  onClick: () => void onRevoke(key.id),
+                  children: "Revoke"
+                }
+              )
+            ]
+          },
+          key.id
+        )) : /* @__PURE__ */ jsx2(
+          EmptyState,
+          {
+            title: "No API keys",
+            description: "Create one when you need programmatic access."
+          }
+        ) }),
+        /* @__PURE__ */ jsx2(
+          CreateApiKeyDialog,
+          {
+            open: createOpen,
+            onOpenChange: setCreateOpen,
+            onCreate
+          }
+        )
+      ]
+    }
+  );
+}
+function ApiKeyPage(props) {
+  return /* @__PURE__ */ jsx2(ApiKeyManager, { ...props });
+}
+function DangerZone({
+  onDeleteAccount,
+  confirmationText = "DELETE"
+}) {
+  const [value, setValue] = useState2("");
+  return /* @__PURE__ */ jsx2(Section, { title: "Danger zone", description: "These actions are permanent.", children: /* @__PURE__ */ jsxs2(Card2, { className: "border-[hsl(var(--rui-destructive))]", children: [
+    /* @__PURE__ */ jsx2(CardTitle2, { children: "Delete account" }),
+    /* @__PURE__ */ jsx2(CardDescription2, { children: "Delete all account data. This cannot be undone." }),
+    /* @__PURE__ */ jsxs2("div", { className: "mt-4 max-w-sm", children: [
+      /* @__PURE__ */ jsxs2(Label2, { htmlFor: "delete-confirmation", children: [
+        "Type ",
+        confirmationText,
+        " to confirm"
+      ] }),
+      /* @__PURE__ */ jsx2(
+        Input2,
+        {
+          id: "delete-confirmation",
+          value,
+          onChange: (event) => setValue(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(
+      Button2,
+      {
+        className: "mt-4",
+        variant: "destructive",
+        disabled: value !== confirmationText,
+        onClick: () => void onDeleteAccount(),
+        children: "Delete account"
+      }
+    )
+  ] }) });
+}
+
+// src/pages/billing.tsx
+import {
+  Badge as Badge2,
+  Button as Button3,
+  Card as Card3,
+  CardDescription as CardDescription3,
+  CardHeader as CardHeader2,
+  CardTitle as CardTitle3,
+  DataTable,
+  EmptyState as EmptyState2,
+  Section as Section2,
+  Stack as Stack2
+} from "@sypra-ui/ui";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SubscriptionCard({
+  subscription,
+  onChangePlan,
+  onCancel
+}) {
+  if (!subscription)
+    return /* @__PURE__ */ jsx3(
+      EmptyState2,
+      {
+        title: "No active subscription",
+        action: onChangePlan && /* @__PURE__ */ jsx3(Button3, { onClick: onChangePlan, children: "View plans" })
+      }
+    );
+  return /* @__PURE__ */ jsxs3(Card3, { children: [
+    /* @__PURE__ */ jsxs3(CardHeader2, { children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3(CardTitle3, { children: subscription.plan }),
+        /* @__PURE__ */ jsxs3(CardDescription3, { children: [
+          subscription.price,
+          subscription.interval && ` / ${subscription.interval}`
+        ] })
+      ] }),
+      subscription.status && /* @__PURE__ */ jsx3(Badge2, { variant: "success", children: subscription.status })
+    ] }),
+    subscription.nextBillingDate && /* @__PURE__ */ jsxs3("p", { className: "text-sm text-[hsl(var(--rui-muted-foreground))]", children: [
+      "Next billing date: ",
+      subscription.nextBillingDate
+    ] }),
+    subscription.usage?.length ? /* @__PURE__ */ jsx3("div", { className: "mt-4 grid gap-2 text-sm sm:grid-cols-2", children: subscription.usage.map((item) => /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "rounded bg-[hsl(var(--rui-muted))] p-3",
+        children: [
+          /* @__PURE__ */ jsx3("strong", { className: "block", children: item.value }),
+          /* @__PURE__ */ jsx3("span", { className: "text-[hsl(var(--rui-muted-foreground))]", children: item.label })
+        ]
+      },
+      item.label
+    )) }) : null,
+    /* @__PURE__ */ jsxs3("div", { className: "mt-5 flex flex-wrap gap-2", children: [
+      onChangePlan && /* @__PURE__ */ jsx3(Button3, { onClick: onChangePlan, children: "Change plan" }),
+      onCancel && /* @__PURE__ */ jsx3(Button3, { variant: "outline", onClick: onCancel, children: "Manage subscription" })
+    ] })
+  ] });
+}
+function PaymentMethodCard({
+  paymentMethod,
+  onUpdate
+}) {
+  return /* @__PURE__ */ jsx3(Card3, { children: /* @__PURE__ */ jsxs3(CardHeader2, { children: [
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3(CardTitle3, { children: "Payment method" }),
+      /* @__PURE__ */ jsx3(CardDescription3, { children: paymentMethod ? `${paymentMethod.brand} \u2022\u2022\u2022\u2022 ${paymentMethod.last4}${paymentMethod.expiresAt ? ` \xB7 Expires ${paymentMethod.expiresAt}` : ""}` : "No payment method on file." })
+    ] }),
+    onUpdate && /* @__PURE__ */ jsx3(Button3, { variant: "outline", size: "sm", onClick: onUpdate, children: paymentMethod ? "Update" : "Add payment method" })
+  ] }) });
+}
+function InvoiceTable({
+  invoices,
+  onView
+}) {
+  const columns = [
+    { key: "date", header: "Date", sortable: true },
+    { key: "amount", header: "Amount" },
+    {
+      key: "status",
+      header: "Status",
+      cell: (invoice) => /* @__PURE__ */ jsx3(
+        Badge2,
+        {
+          variant: invoice.status.toLowerCase() === "paid" ? "success" : "warning",
+          children: invoice.status
+        }
+      )
+    },
+    {
+      key: "id",
+      header: /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Actions" }),
+      cell: (invoice) => onView && /* @__PURE__ */ jsx3(Button3, { variant: "ghost", size: "sm", onClick: () => onView(invoice), children: "View" })
+    }
+  ];
+  return /* @__PURE__ */ jsx3(
+    DataTable,
+    {
+      data: invoices,
+      columns,
+      emptyMessage: "No invoices yet."
+    }
+  );
+}
+function PricingTable({
+  plans,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx3("div", { className: "grid gap-4 md:grid-cols-3", children: plans.map((plan) => /* @__PURE__ */ jsxs3(
+    Card3,
+    {
+      className: plan.highlighted ? "border-[hsl(var(--rui-primary))]" : void 0,
+      children: [
+        /* @__PURE__ */ jsx3(CardTitle3, { children: plan.name }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-3 text-2xl font-bold", children: plan.price }),
+        plan.description && /* @__PURE__ */ jsx3(CardDescription3, { children: plan.description }),
+        /* @__PURE__ */ jsx3("ul", { className: "my-5 space-y-2 text-sm", children: plan.features.map((feature) => /* @__PURE__ */ jsxs3("li", { children: [
+          "\u2713 ",
+          feature
+        ] }, feature)) }),
+        /* @__PURE__ */ jsxs3(
+          Button3,
+          {
+            className: "w-full",
+            variant: plan.highlighted ? "primary" : "outline",
+            onClick: () => onSelect(plan.name),
+            children: [
+              "Choose ",
+              plan.name
+            ]
+          }
+        )
+      ]
+    },
+    plan.name
+  )) });
+}
+function BillingPage({
+  subscription,
+  paymentMethod,
+  invoices,
+  onChangePlan,
+  onUpdatePaymentMethod,
+  onCancel,
+  onViewInvoice
+}) {
+  return /* @__PURE__ */ jsxs3(Stack2, { gap: 8, children: [
+    /* @__PURE__ */ jsx3(
+      Section2,
+      {
+        title: "Billing",
+        description: "Manage your plan and payment details.",
+        children: /* @__PURE__ */ jsx3(
+          SubscriptionCard,
+          {
+            subscription,
+            onChangePlan,
+            onCancel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      PaymentMethodCard,
+      {
+        paymentMethod,
+        onUpdate: onUpdatePaymentMethod
+      }
+    ),
+    /* @__PURE__ */ jsx3(Section2, { title: "Invoices", children: /* @__PURE__ */ jsx3(InvoiceTable, { invoices, onView: onViewInvoice }) })
+  ] });
+}
+
+// src/pages/marketing.tsx
+import {
+  Badge as Badge3,
+  Card as Card4,
+  CardDescription as CardDescription4,
+  CardTitle as CardTitle4,
+  Container,
+  PageContent,
+  PageHeader,
+  PageShell as PageShell2
+} from "@sypra-ui/ui";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Hero({
+  eyebrow,
+  title,
+  description,
+  primaryAction,
+  secondaryAction
+}) {
+  return /* @__PURE__ */ jsxs4("section", { className: "py-20 text-center sm:py-28", children: [
+    eyebrow && /* @__PURE__ */ jsx4(Badge3, { children: eyebrow }),
+    /* @__PURE__ */ jsx4("h1", { className: "mx-auto mt-5 max-w-3xl text-4xl font-bold tracking-tight sm:text-6xl", children: title }),
+    /* @__PURE__ */ jsx4("p", { className: "mx-auto mt-5 max-w-2xl text-lg text-[hsl(var(--rui-muted-foreground))]", children: description }),
+    /* @__PURE__ */ jsxs4("div", { className: "mt-8 flex flex-wrap justify-center gap-3", children: [
+      primaryAction,
+      secondaryAction
+    ] })
+  ] });
+}
+function FeatureGrid({
+  features
+}) {
+  return /* @__PURE__ */ jsx4("section", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: features.map((feature) => /* @__PURE__ */ jsxs4(Card4, { children: [
+    feature.icon && /* @__PURE__ */ jsx4("div", { className: "mb-3 text-[hsl(var(--rui-primary))]", children: feature.icon }),
+    /* @__PURE__ */ jsx4(CardTitle4, { children: feature.title }),
+    /* @__PURE__ */ jsx4(CardDescription4, { children: feature.description })
+  ] }, feature.title)) });
+}
+function FAQ({
+  items
+}) {
+  return /* @__PURE__ */ jsx4("section", { className: "mx-auto max-w-3xl space-y-4", children: items.map((item) => /* @__PURE__ */ jsxs4(Card4, { children: [
+    /* @__PURE__ */ jsx4(CardTitle4, { children: item.question }),
+    /* @__PURE__ */ jsx4(CardDescription4, { children: item.answer })
+  ] }, item.question)) });
+}
+function CTA({
+  title,
+  description,
+  action
+}) {
+  return /* @__PURE__ */ jsxs4("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))]", children: [
+    /* @__PURE__ */ jsx4("h2", { className: "text-3xl font-bold", children: title }),
+    description && /* @__PURE__ */ jsx4("p", { className: "mt-3 opacity-85", children: description }),
+    /* @__PURE__ */ jsx4("div", { className: "mt-6", children: action })
+  ] });
+}
+function Footer({
+  brand,
+  links
+}) {
+  return /* @__PURE__ */ jsx4("footer", { className: "mt-16 border-t border-[hsl(var(--rui-border))] py-8 text-sm text-[hsl(var(--rui-muted-foreground))]", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsx4("strong", { className: "text-[hsl(var(--rui-foreground))]", children: brand }),
+    /* @__PURE__ */ jsx4("div", { className: "flex gap-4", children: links?.map((link) => /* @__PURE__ */ jsx4(
+      "a",
+      {
+        href: link.href,
+        className: "hover:text-[hsl(var(--rui-foreground))]",
+        children: link.label
+      },
+      link.href
+    )) })
+  ] }) });
+}
+function LandingPage({
+  brand,
+  hero,
+  features,
+  children,
+  as
+}) {
+  return /* @__PURE__ */ jsx4(PageShell2, { as, children: /* @__PURE__ */ jsxs4(Container, { children: [
+    /* @__PURE__ */ jsx4("header", { className: "flex h-16 items-center justify-between", children: /* @__PURE__ */ jsx4("strong", { children: brand }) }),
+    /* @__PURE__ */ jsx4(Hero, { ...hero }),
+    features && /* @__PURE__ */ jsx4(FeatureGrid, { features }),
+    children,
+    /* @__PURE__ */ jsx4(Footer, { brand })
+  ] }) });
+}
+function SettingsPageDemo({ children }) {
+  return /* @__PURE__ */ jsx4(PageShell2, { children: /* @__PURE__ */ jsxs4(Container, { className: "py-8", children: [
+    /* @__PURE__ */ jsx4(PageHeader, { title: "Settings", description: "Manage your account." }),
+    /* @__PURE__ */ jsx4(PageContent, { children })
+  ] }) });
+}
+export {
+  ApiKeyManager,
+  ApiKeyPage,
+  AuthForm,
+  AuthModal,
+  BillingPage,
+  CTA,
+  CreateApiKeyDialog,
+  DangerZone,
+  FAQ,
+  FeatureGrid,
+  Footer,
+  ForgotPasswordPage,
+  Hero,
+  InvoiceTable,
+  LandingPage,
+  LoginPage,
+  PaymentMethodCard,
+  PricingTable,
+  ProfilePage,
+  SecurityPage,
+  SessionManager,
+  SettingsLayout,
+  SettingsPageDemo,
+  SignupPage,
+  SubscriptionCard
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@sypra-ui/pages",
+  "version": "0.1.0",
+  "description": "Data-and-callback driven React page compositions.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/surya-mp/ui-components.git",
+    "directory": "pages"
+  },
+  "homepage": "https://github.com/surya-mp/ui-components#readme",
+  "bugs": "https://github.com/surya-mp/ui-components/issues",
+  "keywords": [
+    "auth",
+    "billing",
+    "pages",
+    "react",
+    "saas",
+    "tailwindcss",
+    "typescript"
+  ],
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@sypra-ui/ui": "^0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "jsdom": "^25.0.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
+    "@sypra-ui/ui": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm --dts --sourcemap --external react --external react-dom --external @sypra-ui/ui --clean",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "lint": "eslint src && prettier --check src"
+  }
+}