@sypra-ui/pages 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -11
- package/dist/index.d.ts +58 -21
- package/dist/index.js +83 -33
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,10 +31,10 @@ payments.
|
|
|
31
31
|
|
|
32
32
|
## Authentication methods
|
|
33
33
|
|
|
34
|
-
`LoginPage`, `SignupPage`,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
`LoginPage`, `SignupPage`, `AuthModal`, and the unwrapped `AuthForm` accept
|
|
35
|
+
`authMethods`. Enable any combination of email/password, Google, and GitHub.
|
|
36
|
+
The library calls your handler and never owns OAuth client IDs, redirects, or
|
|
37
|
+
callback exchanges.
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
40
|
const startOAuth = (provider: string) => {
|
|
@@ -42,19 +42,53 @@ const startOAuth = (provider: string) => {
|
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
// Email/password only
|
|
45
|
-
<LoginPage onSubmit={signInWithPassword} />;
|
|
46
|
-
|
|
47
|
-
// Google only (or use 'github')
|
|
48
45
|
<LoginPage
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
onProviderLogin={startOAuth}
|
|
46
|
+
authMethods={{ emailPassword: true }}
|
|
47
|
+
onSubmit={signInWithPassword}
|
|
52
48
|
/>;
|
|
53
49
|
|
|
50
|
+
// Google only (or use 'github')
|
|
51
|
+
<LoginPage authMethods={{ google: true }} onProviderLogin={startOAuth} />;
|
|
52
|
+
|
|
54
53
|
// Email/password, Google, and GitHub
|
|
55
54
|
<LoginPage
|
|
56
|
-
|
|
55
|
+
authMethods={{ emailPassword: true, google: true, github: true }}
|
|
57
56
|
onProviderLogin={startOAuth}
|
|
58
57
|
onSubmit={signInWithPassword}
|
|
59
58
|
/>;
|
|
59
|
+
|
|
60
|
+
// Your own page shell
|
|
61
|
+
<section className="my-auth-page">
|
|
62
|
+
<AuthForm
|
|
63
|
+
mode="login"
|
|
64
|
+
authMethods={{ google: true, github: true }}
|
|
65
|
+
onProviderLogin={startOAuth}
|
|
66
|
+
/>
|
|
67
|
+
</section>;
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Page sections
|
|
71
|
+
|
|
72
|
+
Composite pages expose their smaller building blocks and let you hide sections
|
|
73
|
+
you do not need:
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
<SecurityPage sections={{ password: false, twoFactor: false }} />
|
|
77
|
+
<BillingPage sections={{ paymentMethod: false, invoices: false }} />
|
|
78
|
+
<LandingPage sections={{ header: false, footer: false }} />
|
|
79
|
+
<ProfilePage fields={{ avatar: false, email: false }} />
|
|
80
|
+
<ApiKeyManager actions={{ create: false, revoke: false }} />
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Use exported components such as `SessionManager`, `SubscriptionCard`,
|
|
84
|
+
`PaymentMethodCard`, `InvoiceTable`, `Hero`, `FeatureGrid`, `FAQ`, `CTA`, and
|
|
85
|
+
`Footer` directly when you need a completely custom page layout.
|
|
86
|
+
|
|
87
|
+
Every composite page also accepts `children` as an extension slot for future
|
|
88
|
+
application-specific content:
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
<BillingPage sections={{ paymentMethod: false }} invoices={invoices}>
|
|
92
|
+
<UsageChart />
|
|
93
|
+
</BillingPage>
|
|
60
94
|
```
|
package/dist/index.d.ts
CHANGED
|
@@ -2,12 +2,22 @@ import * as react from 'react';
|
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
type AuthProvider = 'google' | 'github' | string;
|
|
5
|
+
type LoginOption = 'email-password' | AuthProvider;
|
|
5
6
|
type AuthValues = {
|
|
6
7
|
email: string;
|
|
7
8
|
password: string;
|
|
8
9
|
name?: string;
|
|
9
10
|
};
|
|
11
|
+
type AuthMethods = {
|
|
12
|
+
emailPassword?: boolean;
|
|
13
|
+
google?: boolean;
|
|
14
|
+
github?: boolean;
|
|
15
|
+
};
|
|
10
16
|
type AuthCallbacks = {
|
|
17
|
+
/** The enabled built-in authentication methods. */
|
|
18
|
+
authMethods?: AuthMethods;
|
|
19
|
+
/** The sign-in methods to render, such as ['google', 'github']. */
|
|
20
|
+
loginOptions?: LoginOption[];
|
|
11
21
|
providers?: AuthProvider[];
|
|
12
22
|
loading?: boolean;
|
|
13
23
|
error?: ReactNode;
|
|
@@ -15,17 +25,15 @@ type AuthCallbacks = {
|
|
|
15
25
|
onForgotPassword?: () => void;
|
|
16
26
|
onSignup?: () => void;
|
|
17
27
|
onLogin?: () => void;
|
|
28
|
+
children?: ReactNode;
|
|
18
29
|
};
|
|
19
|
-
type
|
|
20
|
-
/**
|
|
21
|
-
emailPassword?:
|
|
22
|
-
onSubmit: (values: AuthValues) => void | Promise<void>;
|
|
23
|
-
} | {
|
|
24
|
-
emailPassword: false;
|
|
30
|
+
type AuthBehavior = {
|
|
31
|
+
/** Legacy alternative to omitting 'email-password' from loginOptions. */
|
|
32
|
+
emailPassword?: boolean;
|
|
25
33
|
onSubmit?: (values: AuthValues) => void | Promise<void>;
|
|
26
34
|
};
|
|
27
|
-
type AuthProps = AuthCallbacks &
|
|
28
|
-
declare function AuthForm({ mode, onSubmit, emailPassword, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, }: AuthProps & {
|
|
35
|
+
type AuthProps = AuthCallbacks & AuthBehavior;
|
|
36
|
+
declare function AuthForm({ mode, onSubmit, authMethods, loginOptions, emailPassword, providers, loading, error, onProviderLogin, onForgotPassword, onSignup, onLogin, children, }: AuthProps & {
|
|
29
37
|
mode: 'login' | 'signup' | 'forgot';
|
|
30
38
|
}): react.JSX.Element;
|
|
31
39
|
declare function LoginPage({ title, description, as, ...props }: AuthProps & {
|
|
@@ -54,10 +62,16 @@ type Profile = {
|
|
|
54
62
|
email: string;
|
|
55
63
|
avatar?: string;
|
|
56
64
|
};
|
|
57
|
-
declare function ProfilePage({ profile, loading, onSave, }: {
|
|
65
|
+
declare function ProfilePage({ profile, loading, onSave, fields, children, }: {
|
|
58
66
|
profile: Profile;
|
|
59
67
|
loading?: boolean;
|
|
60
68
|
onSave: (profile: Profile) => void | Promise<void>;
|
|
69
|
+
fields?: {
|
|
70
|
+
avatar?: boolean;
|
|
71
|
+
name?: boolean;
|
|
72
|
+
email?: boolean;
|
|
73
|
+
};
|
|
74
|
+
children?: ReactNode;
|
|
61
75
|
}): react.JSX.Element;
|
|
62
76
|
type Session = {
|
|
63
77
|
id: string;
|
|
@@ -72,15 +86,21 @@ declare function SessionManager({ sessions, currentSessionId, loading, onRevoke,
|
|
|
72
86
|
onRevoke: (id: string) => void | Promise<void>;
|
|
73
87
|
onRevokeAll: () => void | Promise<void>;
|
|
74
88
|
}): react.JSX.Element;
|
|
75
|
-
declare function SecurityPage({ sessions, currentSessionId, onRevoke, onRevokeAll, passwordEnabled, twoFactorEnabled, onChangePassword, onToggleTwoFactor, }: {
|
|
76
|
-
sessions
|
|
89
|
+
declare function SecurityPage({ sessions, currentSessionId, onRevoke, onRevokeAll, passwordEnabled, twoFactorEnabled, onChangePassword, onToggleTwoFactor, sections, children, }: {
|
|
90
|
+
sessions?: Session[];
|
|
77
91
|
currentSessionId?: string;
|
|
78
|
-
onRevoke
|
|
79
|
-
onRevokeAll
|
|
92
|
+
onRevoke?: (id: string) => void | Promise<void>;
|
|
93
|
+
onRevokeAll?: () => void | Promise<void>;
|
|
80
94
|
passwordEnabled?: boolean;
|
|
81
95
|
twoFactorEnabled?: boolean;
|
|
82
96
|
onChangePassword?: () => void;
|
|
83
97
|
onToggleTwoFactor?: (enabled: boolean) => void;
|
|
98
|
+
sections?: {
|
|
99
|
+
password?: boolean;
|
|
100
|
+
twoFactor?: boolean;
|
|
101
|
+
sessions?: boolean;
|
|
102
|
+
};
|
|
103
|
+
children?: ReactNode;
|
|
84
104
|
}): react.JSX.Element;
|
|
85
105
|
type ApiKey = {
|
|
86
106
|
id: string;
|
|
@@ -98,14 +118,19 @@ declare function CreateApiKeyDialog({ open, onOpenChange, onCreate, }: {
|
|
|
98
118
|
permissions: string[];
|
|
99
119
|
}) => void | Promise<void>;
|
|
100
120
|
}): react.JSX.Element;
|
|
101
|
-
declare function ApiKeyManager({ keys, loading, onCreate, onRevoke, }: {
|
|
121
|
+
declare function ApiKeyManager({ keys, loading, onCreate, onRevoke, actions, children, }: {
|
|
102
122
|
keys: ApiKey[];
|
|
103
123
|
loading?: boolean;
|
|
104
|
-
onCreate
|
|
124
|
+
onCreate?: (values: {
|
|
105
125
|
name: string;
|
|
106
126
|
permissions: string[];
|
|
107
127
|
}) => void | Promise<void>;
|
|
108
|
-
onRevoke
|
|
128
|
+
onRevoke?: (id: string) => void | Promise<void>;
|
|
129
|
+
actions?: {
|
|
130
|
+
create?: boolean;
|
|
131
|
+
revoke?: boolean;
|
|
132
|
+
};
|
|
133
|
+
children?: ReactNode;
|
|
109
134
|
}): react.JSX.Element;
|
|
110
135
|
declare function ApiKeyPage(props: ComponentProps<typeof ApiKeyManager>): react.JSX.Element;
|
|
111
136
|
type ComponentProps<T> = T extends (props: infer Props) => unknown ? Props : never;
|
|
@@ -160,14 +185,20 @@ declare function PricingTable({ plans, onSelect, }: {
|
|
|
160
185
|
}>;
|
|
161
186
|
onSelect: (plan: string) => void;
|
|
162
187
|
}): react.JSX.Element;
|
|
163
|
-
declare function BillingPage({ subscription, paymentMethod, invoices, onChangePlan, onUpdatePaymentMethod, onCancel, onViewInvoice, }: {
|
|
188
|
+
declare function BillingPage({ subscription, paymentMethod, invoices, onChangePlan, onUpdatePaymentMethod, onCancel, onViewInvoice, sections, children, }: {
|
|
164
189
|
subscription?: Subscription;
|
|
165
190
|
paymentMethod?: PaymentMethod;
|
|
166
|
-
invoices
|
|
191
|
+
invoices?: Invoice[];
|
|
167
192
|
onChangePlan?: () => void;
|
|
168
193
|
onUpdatePaymentMethod?: () => void;
|
|
169
194
|
onCancel?: () => void;
|
|
170
195
|
onViewInvoice?: (invoice: Invoice) => void;
|
|
196
|
+
sections?: {
|
|
197
|
+
subscription?: boolean;
|
|
198
|
+
paymentMethod?: boolean;
|
|
199
|
+
invoices?: boolean;
|
|
200
|
+
};
|
|
201
|
+
children?: ReactNode;
|
|
171
202
|
}): react.JSX.Element;
|
|
172
203
|
|
|
173
204
|
declare function Hero({ eyebrow, title, description, primaryAction, secondaryAction, }: {
|
|
@@ -202,9 +233,9 @@ declare function Footer({ brand, links, }: {
|
|
|
202
233
|
href: string;
|
|
203
234
|
}>;
|
|
204
235
|
}): react.JSX.Element;
|
|
205
|
-
declare function LandingPage({ brand, hero, features, children, as, }: {
|
|
236
|
+
declare function LandingPage({ brand, hero, features, children, as, sections, }: {
|
|
206
237
|
brand: ReactNode;
|
|
207
|
-
hero
|
|
238
|
+
hero?: {
|
|
208
239
|
title: ReactNode;
|
|
209
240
|
description: ReactNode;
|
|
210
241
|
primaryAction?: ReactNode;
|
|
@@ -217,9 +248,15 @@ declare function LandingPage({ brand, hero, features, children, as, }: {
|
|
|
217
248
|
}>;
|
|
218
249
|
children?: ReactNode;
|
|
219
250
|
as?: 'main' | 'div';
|
|
251
|
+
sections?: {
|
|
252
|
+
header?: boolean;
|
|
253
|
+
hero?: boolean;
|
|
254
|
+
features?: boolean;
|
|
255
|
+
footer?: boolean;
|
|
256
|
+
};
|
|
220
257
|
}): react.JSX.Element;
|
|
221
258
|
declare function SettingsPageDemo({ children }: {
|
|
222
259
|
children: ReactNode;
|
|
223
260
|
}): react.JSX.Element;
|
|
224
261
|
|
|
225
|
-
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 };
|
|
262
|
+
export { type ApiKey, ApiKeyManager, ApiKeyPage, AuthForm, type AuthMethods, AuthModal, type AuthProvider, type AuthValues, BillingPage, CTA, CreateApiKeyDialog, DangerZone, FAQ, FeatureGrid, Footer, ForgotPasswordPage, Hero, type Invoice, InvoiceTable, LandingPage, type LoginOption, LoginPage, type PaymentMethod, PaymentMethodCard, PricingTable, type Profile, ProfilePage, SecurityPage, type Session, SessionManager, SettingsLayout, SettingsPageDemo, SignupPage, type Subscription, SubscriptionCard };
|
package/dist/index.js
CHANGED
|
@@ -22,6 +22,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
22
22
|
function AuthForm({
|
|
23
23
|
mode,
|
|
24
24
|
onSubmit,
|
|
25
|
+
authMethods,
|
|
26
|
+
loginOptions,
|
|
25
27
|
emailPassword = true,
|
|
26
28
|
providers = [],
|
|
27
29
|
loading,
|
|
@@ -29,7 +31,8 @@ function AuthForm({
|
|
|
29
31
|
onProviderLogin,
|
|
30
32
|
onForgotPassword,
|
|
31
33
|
onSignup,
|
|
32
|
-
onLogin
|
|
34
|
+
onLogin,
|
|
35
|
+
children
|
|
33
36
|
}) {
|
|
34
37
|
const [values, setValues] = useState({
|
|
35
38
|
email: "",
|
|
@@ -41,9 +44,21 @@ function AuthForm({
|
|
|
41
44
|
void onSubmit?.(values);
|
|
42
45
|
};
|
|
43
46
|
const isForgot = mode === "forgot";
|
|
47
|
+
const options = authMethods ? [
|
|
48
|
+
...authMethods.emailPassword ? ["email-password"] : [],
|
|
49
|
+
...authMethods.google ? ["google"] : [],
|
|
50
|
+
...authMethods.github ? ["github"] : []
|
|
51
|
+
] : loginOptions ?? [
|
|
52
|
+
...emailPassword ? ["email-password"] : [],
|
|
53
|
+
...providers
|
|
54
|
+
];
|
|
55
|
+
const usesEmailPassword = options.includes("email-password");
|
|
56
|
+
const selectedProviders = options.filter(
|
|
57
|
+
(option) => option !== "email-password"
|
|
58
|
+
);
|
|
44
59
|
return /* @__PURE__ */ jsxs("form", { className: "space-y-4", onSubmit: submit, children: [
|
|
45
60
|
error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", title: "Could not continue", children: error }),
|
|
46
|
-
|
|
61
|
+
usesEmailPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
47
62
|
mode === "signup" && /* @__PURE__ */ jsxs("div", { children: [
|
|
48
63
|
/* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Name" }),
|
|
49
64
|
/* @__PURE__ */ jsx(
|
|
@@ -97,13 +112,13 @@ function AuthForm({
|
|
|
97
112
|
] }),
|
|
98
113
|
/* @__PURE__ */ jsx(Button, { className: "w-full", type: "submit", loading, children: isForgot ? "Send reset link" : mode === "signup" ? "Create account" : "Continue" })
|
|
99
114
|
] }),
|
|
100
|
-
|
|
101
|
-
|
|
115
|
+
selectedProviders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
116
|
+
usesEmailPassword && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-[hsl(var(--rui-muted-foreground))]", children: [
|
|
102
117
|
/* @__PURE__ */ jsx(Separator, {}),
|
|
103
118
|
/* @__PURE__ */ jsx("span", { children: "OR" }),
|
|
104
119
|
/* @__PURE__ */ jsx(Separator, {})
|
|
105
120
|
] }),
|
|
106
|
-
/* @__PURE__ */ jsx("div", { className: "grid gap-2", children:
|
|
121
|
+
/* @__PURE__ */ jsx("div", { className: "grid gap-2", children: selectedProviders.map((provider) => /* @__PURE__ */ jsxs(
|
|
107
122
|
Button,
|
|
108
123
|
{
|
|
109
124
|
type: "button",
|
|
@@ -118,7 +133,7 @@ function AuthForm({
|
|
|
118
133
|
provider
|
|
119
134
|
)) })
|
|
120
135
|
] }),
|
|
121
|
-
|
|
136
|
+
usesEmailPassword && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-[hsl(var(--rui-muted-foreground))]", children: mode === "login" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
122
137
|
"No account?",
|
|
123
138
|
" ",
|
|
124
139
|
/* @__PURE__ */ jsx(
|
|
@@ -150,7 +165,8 @@ function AuthForm({
|
|
|
150
165
|
onClick: onLogin,
|
|
151
166
|
children: "Back to login"
|
|
152
167
|
}
|
|
153
|
-
) })
|
|
168
|
+
) }),
|
|
169
|
+
children
|
|
154
170
|
] });
|
|
155
171
|
}
|
|
156
172
|
function LoginPage({
|
|
@@ -244,12 +260,15 @@ function SettingsLayout({ children }) {
|
|
|
244
260
|
function ProfilePage({
|
|
245
261
|
profile,
|
|
246
262
|
loading,
|
|
247
|
-
onSave
|
|
263
|
+
onSave,
|
|
264
|
+
fields,
|
|
265
|
+
children
|
|
248
266
|
}) {
|
|
249
267
|
const [next, setNext] = useState2(profile);
|
|
268
|
+
const visibleFields = { avatar: true, name: true, email: true, ...fields };
|
|
250
269
|
return /* @__PURE__ */ jsx2(Section, { title: "Profile", description: "Update the details people see.", children: /* @__PURE__ */ jsxs2(Card2, { children: [
|
|
251
270
|
/* @__PURE__ */ jsxs2("div", { className: "mb-5 flex items-center gap-3", children: [
|
|
252
|
-
/* @__PURE__ */ jsx2(Avatar, { src: next.avatar, alt: next.name }),
|
|
271
|
+
visibleFields.avatar && /* @__PURE__ */ jsx2(Avatar, { src: next.avatar, alt: next.name }),
|
|
253
272
|
/* @__PURE__ */ jsxs2("div", { children: [
|
|
254
273
|
/* @__PURE__ */ jsx2(CardTitle2, { children: next.name || "Your profile" }),
|
|
255
274
|
/* @__PURE__ */ jsx2(CardDescription2, { children: next.email })
|
|
@@ -264,7 +283,7 @@ function ProfilePage({
|
|
|
264
283
|
void onSave(next);
|
|
265
284
|
},
|
|
266
285
|
children: [
|
|
267
|
-
/* @__PURE__ */ jsxs2("div", { children: [
|
|
286
|
+
visibleFields.name && /* @__PURE__ */ jsxs2("div", { children: [
|
|
268
287
|
/* @__PURE__ */ jsx2(Label2, { htmlFor: "profile-name", children: "Name" }),
|
|
269
288
|
/* @__PURE__ */ jsx2(
|
|
270
289
|
Input2,
|
|
@@ -276,7 +295,7 @@ function ProfilePage({
|
|
|
276
295
|
}
|
|
277
296
|
)
|
|
278
297
|
] }),
|
|
279
|
-
/* @__PURE__ */ jsxs2("div", { children: [
|
|
298
|
+
visibleFields.email && /* @__PURE__ */ jsxs2("div", { children: [
|
|
280
299
|
/* @__PURE__ */ jsx2(Label2, { htmlFor: "profile-email", children: "Email" }),
|
|
281
300
|
/* @__PURE__ */ jsx2(
|
|
282
301
|
Input2,
|
|
@@ -289,10 +308,11 @@ function ProfilePage({
|
|
|
289
308
|
}
|
|
290
309
|
)
|
|
291
310
|
] }),
|
|
292
|
-
/* @__PURE__ */ jsx2(Button2, { type: "submit", loading, children: "Save changes" })
|
|
311
|
+
(visibleFields.name || visibleFields.email) && /* @__PURE__ */ jsx2(Button2, { type: "submit", loading, children: "Save changes" })
|
|
293
312
|
]
|
|
294
313
|
}
|
|
295
|
-
)
|
|
314
|
+
),
|
|
315
|
+
children
|
|
296
316
|
] }) });
|
|
297
317
|
}
|
|
298
318
|
function SessionManager({
|
|
@@ -356,19 +376,27 @@ function SecurityPage({
|
|
|
356
376
|
passwordEnabled = true,
|
|
357
377
|
twoFactorEnabled,
|
|
358
378
|
onChangePassword,
|
|
359
|
-
onToggleTwoFactor
|
|
379
|
+
onToggleTwoFactor,
|
|
380
|
+
sections,
|
|
381
|
+
children
|
|
360
382
|
}) {
|
|
383
|
+
const visibleSections = {
|
|
384
|
+
password: true,
|
|
385
|
+
twoFactor: true,
|
|
386
|
+
sessions: true,
|
|
387
|
+
...sections
|
|
388
|
+
};
|
|
361
389
|
return /* @__PURE__ */ jsxs2(Stack, { gap: 8, children: [
|
|
362
|
-
/* @__PURE__ */ jsx2(Section, { title: "Security", description: "Keep your account secure.", children: /* @__PURE__ */ jsxs2(Card2, { className: "space-y-4", children: [
|
|
363
|
-
/* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
|
|
390
|
+
(visibleSections.password || visibleSections.twoFactor) && /* @__PURE__ */ jsx2(Section, { title: "Security", description: "Keep your account secure.", children: /* @__PURE__ */ jsxs2(Card2, { className: "space-y-4", children: [
|
|
391
|
+
visibleSections.password && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
|
|
364
392
|
/* @__PURE__ */ jsxs2("div", { children: [
|
|
365
393
|
/* @__PURE__ */ jsx2(CardTitle2, { children: "Password" }),
|
|
366
394
|
/* @__PURE__ */ jsx2(CardDescription2, { children: passwordEnabled ? "Password is enabled." : "Passwordless sign-in." })
|
|
367
395
|
] }),
|
|
368
396
|
onChangePassword && /* @__PURE__ */ jsx2(Button2, { variant: "outline", onClick: onChangePassword, children: "Change password" })
|
|
369
397
|
] }),
|
|
370
|
-
/* @__PURE__ */ jsx2(Separator2, {}),
|
|
371
|
-
/* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
|
|
398
|
+
visibleSections.password && visibleSections.twoFactor && /* @__PURE__ */ jsx2(Separator2, {}),
|
|
399
|
+
visibleSections.twoFactor && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
|
|
372
400
|
/* @__PURE__ */ jsxs2("div", { children: [
|
|
373
401
|
/* @__PURE__ */ jsx2(CardTitle2, { children: "Two-factor authentication" }),
|
|
374
402
|
/* @__PURE__ */ jsx2(CardDescription2, { children: twoFactorEnabled ? "Enabled" : "Not enabled" })
|
|
@@ -382,7 +410,7 @@ function SecurityPage({
|
|
|
382
410
|
)
|
|
383
411
|
] })
|
|
384
412
|
] }) }),
|
|
385
|
-
/* @__PURE__ */ jsx2(
|
|
413
|
+
visibleSections.sessions && sessions && onRevoke && onRevokeAll && /* @__PURE__ */ jsx2(
|
|
386
414
|
SessionManager,
|
|
387
415
|
{
|
|
388
416
|
sessions,
|
|
@@ -390,7 +418,8 @@ function SecurityPage({
|
|
|
390
418
|
onRevoke,
|
|
391
419
|
onRevokeAll
|
|
392
420
|
}
|
|
393
|
-
)
|
|
421
|
+
),
|
|
422
|
+
children
|
|
394
423
|
] });
|
|
395
424
|
}
|
|
396
425
|
function CreateApiKeyDialog({
|
|
@@ -453,16 +482,19 @@ function ApiKeyManager({
|
|
|
453
482
|
keys,
|
|
454
483
|
loading,
|
|
455
484
|
onCreate,
|
|
456
|
-
onRevoke
|
|
485
|
+
onRevoke,
|
|
486
|
+
actions,
|
|
487
|
+
children
|
|
457
488
|
}) {
|
|
458
489
|
const [createOpen, setCreateOpen] = useState2(false);
|
|
490
|
+
const visibleActions = { create: true, revoke: true, ...actions };
|
|
459
491
|
return /* @__PURE__ */ jsxs2(
|
|
460
492
|
Section,
|
|
461
493
|
{
|
|
462
494
|
title: "API keys",
|
|
463
495
|
description: "Create keys for programmatic access.",
|
|
464
496
|
children: [
|
|
465
|
-
/* @__PURE__ */ jsx2("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx2(Button2, { onClick: () => setCreateOpen(true), children: "Create API key" }) }),
|
|
497
|
+
visibleActions.create && onCreate && /* @__PURE__ */ jsx2("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx2(Button2, { onClick: () => setCreateOpen(true), children: "Create API key" }) }),
|
|
466
498
|
/* @__PURE__ */ jsx2(Stack, { children: keys.length ? keys.map((key) => /* @__PURE__ */ jsxs2(
|
|
467
499
|
Card2,
|
|
468
500
|
{
|
|
@@ -480,7 +512,7 @@ function ApiKeyManager({
|
|
|
480
512
|
key.lastUsedAt ? ` \xB7 Last used ${key.lastUsedAt}` : " \xB7 Never used"
|
|
481
513
|
] })
|
|
482
514
|
] }),
|
|
483
|
-
/* @__PURE__ */ jsx2(
|
|
515
|
+
visibleActions.revoke && onRevoke && /* @__PURE__ */ jsx2(
|
|
484
516
|
Button2,
|
|
485
517
|
{
|
|
486
518
|
variant: "outline",
|
|
@@ -500,7 +532,8 @@ function ApiKeyManager({
|
|
|
500
532
|
description: "Create one when you need programmatic access."
|
|
501
533
|
}
|
|
502
534
|
) }),
|
|
503
|
-
|
|
535
|
+
children,
|
|
536
|
+
visibleActions.create && onCreate && /* @__PURE__ */ jsx2(
|
|
504
537
|
CreateApiKeyDialog,
|
|
505
538
|
{
|
|
506
539
|
open: createOpen,
|
|
@@ -695,10 +728,18 @@ function BillingPage({
|
|
|
695
728
|
onChangePlan,
|
|
696
729
|
onUpdatePaymentMethod,
|
|
697
730
|
onCancel,
|
|
698
|
-
onViewInvoice
|
|
731
|
+
onViewInvoice,
|
|
732
|
+
sections,
|
|
733
|
+
children
|
|
699
734
|
}) {
|
|
735
|
+
const visibleSections = {
|
|
736
|
+
subscription: true,
|
|
737
|
+
paymentMethod: true,
|
|
738
|
+
invoices: true,
|
|
739
|
+
...sections
|
|
740
|
+
};
|
|
700
741
|
return /* @__PURE__ */ jsxs3(Stack2, { gap: 8, children: [
|
|
701
|
-
/* @__PURE__ */ jsx3(
|
|
742
|
+
visibleSections.subscription && /* @__PURE__ */ jsx3(
|
|
702
743
|
Section2,
|
|
703
744
|
{
|
|
704
745
|
title: "Billing",
|
|
@@ -713,14 +754,15 @@ function BillingPage({
|
|
|
713
754
|
)
|
|
714
755
|
}
|
|
715
756
|
),
|
|
716
|
-
/* @__PURE__ */ jsx3(
|
|
757
|
+
visibleSections.paymentMethod && /* @__PURE__ */ jsx3(
|
|
717
758
|
PaymentMethodCard,
|
|
718
759
|
{
|
|
719
760
|
paymentMethod,
|
|
720
761
|
onUpdate: onUpdatePaymentMethod
|
|
721
762
|
}
|
|
722
763
|
),
|
|
723
|
-
/* @__PURE__ */ jsx3(Section2, { title: "Invoices", children: /* @__PURE__ */ jsx3(InvoiceTable, { invoices, onView: onViewInvoice }) })
|
|
764
|
+
visibleSections.invoices && /* @__PURE__ */ jsx3(Section2, { title: "Invoices", children: /* @__PURE__ */ jsx3(InvoiceTable, { invoices: invoices ?? [], onView: onViewInvoice }) }),
|
|
765
|
+
children
|
|
724
766
|
] });
|
|
725
767
|
}
|
|
726
768
|
|
|
@@ -803,14 +845,22 @@ function LandingPage({
|
|
|
803
845
|
hero,
|
|
804
846
|
features,
|
|
805
847
|
children,
|
|
806
|
-
as
|
|
848
|
+
as,
|
|
849
|
+
sections
|
|
807
850
|
}) {
|
|
851
|
+
const visibleSections = {
|
|
852
|
+
header: true,
|
|
853
|
+
hero: true,
|
|
854
|
+
features: true,
|
|
855
|
+
footer: true,
|
|
856
|
+
...sections
|
|
857
|
+
};
|
|
808
858
|
return /* @__PURE__ */ jsx4(PageShell2, { as, children: /* @__PURE__ */ jsxs4(Container, { children: [
|
|
809
|
-
/* @__PURE__ */ jsx4("header", { className: "flex h-16 items-center justify-between", children: /* @__PURE__ */ jsx4("strong", { children: brand }) }),
|
|
810
|
-
/* @__PURE__ */ jsx4(Hero, { ...hero }),
|
|
811
|
-
features && /* @__PURE__ */ jsx4(FeatureGrid, { features }),
|
|
859
|
+
visibleSections.header && /* @__PURE__ */ jsx4("header", { className: "flex h-16 items-center justify-between", children: /* @__PURE__ */ jsx4("strong", { children: brand }) }),
|
|
860
|
+
visibleSections.hero && hero && /* @__PURE__ */ jsx4(Hero, { ...hero }),
|
|
861
|
+
visibleSections.features && features && /* @__PURE__ */ jsx4(FeatureGrid, { features }),
|
|
812
862
|
children,
|
|
813
|
-
/* @__PURE__ */ jsx4(Footer, { brand })
|
|
863
|
+
visibleSections.footer && /* @__PURE__ */ jsx4(Footer, { brand })
|
|
814
864
|
] }) });
|
|
815
865
|
}
|
|
816
866
|
function SettingsPageDemo({ children }) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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"]}
|
|
1
|
+
{"version":3,"sources":["../src/pages/auth.tsx","../src/pages/settings.tsx","../src/pages/billing.tsx","../src/pages/marketing.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type FormEvent, type ReactNode } from 'react';\nimport {\n Alert,\n Button,\n Card,\n CardDescription,\n CardHeader,\n CardTitle,\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n Input,\n Label,\n PageShell,\n PasswordInput,\n Separator,\n} from '@sypra-ui/ui';\n\nexport type AuthProvider = 'google' | 'github' | string;\nexport type LoginOption = 'email-password' | AuthProvider;\nexport type AuthValues = { email: string; password: string; name?: string };\nexport type AuthMethods = {\n emailPassword?: boolean;\n google?: boolean;\n github?: boolean;\n};\ntype AuthCallbacks = {\n /** The enabled built-in authentication methods. */\n authMethods?: AuthMethods;\n /** The sign-in methods to render, such as ['google', 'github']. */\n loginOptions?: LoginOption[];\n providers?: AuthProvider[];\n loading?: boolean;\n error?: ReactNode;\n onProviderLogin?: (provider: AuthProvider) => void;\n onForgotPassword?: () => void;\n onSignup?: () => void;\n onLogin?: () => void;\n children?: ReactNode;\n};\ntype AuthBehavior = {\n /** Legacy alternative to omitting 'email-password' from loginOptions. */\n emailPassword?: boolean;\n onSubmit?: (values: AuthValues) => void | Promise<void>;\n};\ntype AuthProps = AuthCallbacks & AuthBehavior;\nexport function AuthForm({\n mode,\n onSubmit,\n authMethods,\n loginOptions,\n emailPassword = true,\n providers = [],\n loading,\n error,\n onProviderLogin,\n onForgotPassword,\n onSignup,\n onLogin,\n children,\n}: AuthProps & {\n mode: 'login' | 'signup' | 'forgot';\n}) {\n const [values, setValues] = useState<AuthValues>({\n email: '',\n password: '',\n name: '',\n });\n const submit = (event: FormEvent) => {\n event.preventDefault();\n void onSubmit?.(values);\n };\n const isForgot = mode === 'forgot';\n const options = authMethods\n ? [\n ...(authMethods.emailPassword ? ['email-password'] : []),\n ...(authMethods.google ? ['google'] : []),\n ...(authMethods.github ? ['github'] : []),\n ]\n : (loginOptions ?? [\n ...(emailPassword ? ['email-password'] : []),\n ...providers,\n ]);\n const usesEmailPassword = options.includes('email-password');\n const selectedProviders = options.filter(\n (option) => option !== 'email-password',\n );\n return (\n <form className=\"space-y-4\" onSubmit={submit}>\n {error && (\n <Alert variant=\"destructive\" title=\"Could not continue\">\n {error}\n </Alert>\n )}\n {usesEmailPassword && (\n <>\n {mode === 'signup' && (\n <div>\n <Label htmlFor=\"name\">Name</Label>\n <Input\n id=\"name\"\n value={values.name}\n onChange={(event) =>\n setValues({ ...values, name: event.target.value })\n }\n autoComplete=\"name\"\n required\n />\n </div>\n )}\n <div>\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n value={values.email}\n onChange={(event) =>\n setValues({ ...values, email: event.target.value })\n }\n autoComplete=\"email\"\n required\n />\n </div>\n {!isForgot && (\n <div>\n <div className=\"flex justify-between\">\n <Label htmlFor=\"password\">Password</Label>\n {mode === 'login' && (\n <button\n type=\"button\"\n className=\"rui-focus text-xs text-[hsl(var(--rui-primary))]\"\n onClick={onForgotPassword}\n >\n Forgot password?\n </button>\n )}\n </div>\n <PasswordInput\n id=\"password\"\n value={values.password}\n onChange={(event) =>\n setValues({ ...values, password: event.target.value })\n }\n autoComplete={\n mode === 'signup' ? 'new-password' : 'current-password'\n }\n required\n />\n </div>\n )}\n <Button className=\"w-full\" type=\"submit\" loading={loading}>\n {isForgot\n ? 'Send reset link'\n : mode === 'signup'\n ? 'Create account'\n : 'Continue'}\n </Button>\n </>\n )}\n {selectedProviders.length > 0 && (\n <>\n {usesEmailPassword && (\n <div className=\"flex items-center gap-3 text-xs text-[hsl(var(--rui-muted-foreground))]\">\n <Separator />\n <span>OR</span>\n <Separator />\n </div>\n )}\n <div className=\"grid gap-2\">\n {selectedProviders.map((provider) => (\n <Button\n key={provider}\n type=\"button\"\n variant=\"outline\"\n onClick={() => onProviderLogin?.(provider)}\n >\n Continue with{' '}\n {provider === 'github'\n ? 'GitHub'\n : provider.slice(0, 1).toUpperCase() + provider.slice(1)}\n </Button>\n ))}\n </div>\n </>\n )}\n {usesEmailPassword && (\n <p className=\"text-center text-sm text-[hsl(var(--rui-muted-foreground))]\">\n {mode === 'login' ? (\n <>\n No account?{' '}\n <button\n type=\"button\"\n className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n onClick={onSignup}\n >\n Sign up\n </button>\n </>\n ) : mode === 'signup' ? (\n <>\n Already have an account?{' '}\n <button\n type=\"button\"\n className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n onClick={onLogin}\n >\n Log in\n </button>\n </>\n ) : (\n <button\n type=\"button\"\n className=\"rui-focus text-[hsl(var(--rui-primary))]\"\n onClick={onLogin}\n >\n Back to login\n </button>\n )}\n </p>\n )}\n {children}\n </form>\n );\n}\nexport function LoginPage({\n title = 'Welcome back',\n description = 'Sign in to continue.',\n as,\n ...props\n}: AuthProps & {\n title?: string;\n description?: string;\n as?: 'main' | 'div';\n}) {\n return (\n <AuthPage title={title} description={description} as={as}>\n <AuthForm mode=\"login\" {...props} />\n </AuthPage>\n );\n}\nexport function SignupPage({\n title = 'Create your account',\n description = 'Start with a free account.',\n as,\n ...props\n}: AuthProps & {\n title?: string;\n description?: string;\n as?: 'main' | 'div';\n}) {\n return (\n <AuthPage title={title} description={description} as={as}>\n <AuthForm mode=\"signup\" {...props} />\n </AuthPage>\n );\n}\nexport function ForgotPasswordPage({\n as,\n ...props\n}: AuthProps & {\n as?: 'main' | 'div';\n}) {\n return (\n <AuthPage\n title=\"Reset your password\"\n description=\"We’ll email a reset link.\"\n as={as}\n >\n <AuthForm mode=\"forgot\" {...props} />\n </AuthPage>\n );\n}\nfunction AuthPage({\n title,\n description,\n children,\n as,\n}: {\n title: string;\n description: string;\n children: ReactNode;\n as?: 'main' | 'div';\n}) {\n return (\n <PageShell as={as} className=\"grid place-items-center p-4\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <div>\n <CardTitle>{title}</CardTitle>\n <CardDescription>{description}</CardDescription>\n </div>\n </CardHeader>\n {children}\n </Card>\n </PageShell>\n );\n}\nexport function AuthModal({\n open,\n onOpenChange,\n ...props\n}: AuthProps & {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}) {\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Welcome back</DialogTitle>\n <DialogDescription>Sign in to your account.</DialogDescription>\n </DialogHeader>\n <AuthForm mode=\"login\" {...props} />\n </DialogContent>\n </Dialog>\n );\n}\n","'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport {\n Avatar,\n Badge,\n Button,\n Card,\n CardDescription,\n CardTitle,\n Checkbox,\n Dialog,\n DialogBody,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n EmptyState,\n Input,\n Label,\n Section,\n Separator,\n Stack,\n Switch,\n} from '@sypra-ui/ui';\n\nexport function SettingsLayout({ children }: { children: ReactNode }) {\n return <div className=\"min-w-0 space-y-8\">{children}</div>;\n}\nexport type Profile = { name: string; email: string; avatar?: string };\nexport function ProfilePage({\n profile,\n loading,\n onSave,\n fields,\n children,\n}: {\n profile: Profile;\n loading?: boolean;\n onSave: (profile: Profile) => void | Promise<void>;\n fields?: { avatar?: boolean; name?: boolean; email?: boolean };\n children?: ReactNode;\n}) {\n const [next, setNext] = useState(profile);\n const visibleFields = { avatar: true, name: true, email: true, ...fields };\n return (\n <Section title=\"Profile\" description=\"Update the details people see.\">\n <Card>\n <div className=\"mb-5 flex items-center gap-3\">\n {visibleFields.avatar && <Avatar src={next.avatar} alt={next.name} />}\n <div>\n <CardTitle>{next.name || 'Your profile'}</CardTitle>\n <CardDescription>{next.email}</CardDescription>\n </div>\n </div>\n <form\n className=\"max-w-lg space-y-4\"\n onSubmit={(event) => {\n event.preventDefault();\n void onSave(next);\n }}\n >\n {visibleFields.name && (\n <div>\n <Label htmlFor=\"profile-name\">Name</Label>\n <Input\n id=\"profile-name\"\n value={next.name}\n onChange={(event) =>\n setNext({ ...next, name: event.target.value })\n }\n required\n />\n </div>\n )}\n {visibleFields.email && (\n <div>\n <Label htmlFor=\"profile-email\">Email</Label>\n <Input\n id=\"profile-email\"\n type=\"email\"\n value={next.email}\n onChange={(event) =>\n setNext({ ...next, email: event.target.value })\n }\n required\n />\n </div>\n )}\n {(visibleFields.name || visibleFields.email) && (\n <Button type=\"submit\" loading={loading}>\n Save changes\n </Button>\n )}\n </form>\n {children}\n </Card>\n </Section>\n );\n}\nexport type Session = {\n id: string;\n device: string;\n location?: string;\n lastActive: string;\n};\nexport function SessionManager({\n sessions,\n currentSessionId,\n loading,\n onRevoke,\n onRevokeAll,\n}: {\n sessions: Session[];\n currentSessionId?: string;\n loading?: boolean;\n onRevoke: (id: string) => void | Promise<void>;\n onRevokeAll: () => void | Promise<void>;\n}) {\n return (\n <Section\n title=\"Active sessions\"\n description=\"Review where your account is signed in.\"\n >\n <Stack>\n {sessions.length ? (\n sessions.map((session) => (\n <Card\n key={session.id}\n className=\"flex flex-wrap items-center justify-between gap-3\"\n >\n <div>\n <CardTitle>\n {session.device}{' '}\n {session.id === currentSessionId && <Badge>Current</Badge>}\n </CardTitle>\n <CardDescription>\n {[session.location, session.lastActive]\n .filter(Boolean)\n .join(' · ')}\n </CardDescription>\n </div>\n {session.id !== currentSessionId && (\n <Button\n variant=\"outline\"\n size=\"sm\"\n loading={loading}\n onClick={() => void onRevoke(session.id)}\n >\n Revoke\n </Button>\n )}\n </Card>\n ))\n ) : (\n <EmptyState title=\"No sessions\" />\n )}\n </Stack>\n {sessions.length > 1 && (\n <Button\n variant=\"destructive\"\n loading={loading}\n onClick={() => void onRevokeAll()}\n >\n Sign out of other sessions\n </Button>\n )}\n </Section>\n );\n}\nexport function SecurityPage({\n sessions,\n currentSessionId,\n onRevoke,\n onRevokeAll,\n passwordEnabled = true,\n twoFactorEnabled,\n onChangePassword,\n onToggleTwoFactor,\n sections,\n children,\n}: {\n sessions?: Session[];\n currentSessionId?: string;\n onRevoke?: (id: string) => void | Promise<void>;\n onRevokeAll?: () => void | Promise<void>;\n passwordEnabled?: boolean;\n twoFactorEnabled?: boolean;\n onChangePassword?: () => void;\n onToggleTwoFactor?: (enabled: boolean) => void;\n sections?: { password?: boolean; twoFactor?: boolean; sessions?: boolean };\n children?: ReactNode;\n}) {\n const visibleSections = {\n password: true,\n twoFactor: true,\n sessions: true,\n ...sections,\n };\n return (\n <Stack gap={8}>\n {(visibleSections.password || visibleSections.twoFactor) && (\n <Section title=\"Security\" description=\"Keep your account secure.\">\n <Card className=\"space-y-4\">\n {visibleSections.password && (\n <div className=\"flex items-center justify-between gap-3\">\n <div>\n <CardTitle>Password</CardTitle>\n <CardDescription>\n {passwordEnabled\n ? 'Password is enabled.'\n : 'Passwordless sign-in.'}\n </CardDescription>\n </div>\n {onChangePassword && (\n <Button variant=\"outline\" onClick={onChangePassword}>\n Change password\n </Button>\n )}\n </div>\n )}\n {visibleSections.password && visibleSections.twoFactor && (\n <Separator />\n )}\n {visibleSections.twoFactor && (\n <div className=\"flex items-center justify-between gap-3\">\n <div>\n <CardTitle>Two-factor authentication</CardTitle>\n <CardDescription>\n {twoFactorEnabled ? 'Enabled' : 'Not enabled'}\n </CardDescription>\n </div>\n <Switch\n checked={twoFactorEnabled}\n onChange={(event) =>\n onToggleTwoFactor?.(event.target.checked)\n }\n />\n </div>\n )}\n </Card>\n </Section>\n )}\n {visibleSections.sessions && sessions && onRevoke && onRevokeAll && (\n <SessionManager\n sessions={sessions}\n currentSessionId={currentSessionId}\n onRevoke={onRevoke}\n onRevokeAll={onRevokeAll}\n />\n )}\n {children}\n </Stack>\n );\n}\n\nexport type ApiKey = {\n id: string;\n name: string;\n prefix: string;\n createdAt: string;\n lastUsedAt?: string;\n permissions?: string[];\n};\nexport function CreateApiKeyDialog({\n open,\n onOpenChange,\n onCreate,\n}: {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n onCreate: (values: {\n name: string;\n permissions: string[];\n }) => void | Promise<void>;\n}) {\n const [name, setName] = useState('');\n const [write, setWrite] = useState(false);\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Create API key</DialogTitle>\n <DialogDescription>\n The full key should only be shown once by your application.\n </DialogDescription>\n </DialogHeader>\n <DialogBody>\n <div>\n <Label htmlFor=\"key-name\">Name</Label>\n <Input\n id=\"key-name\"\n value={name}\n onChange={(event) => setName(event.target.value)}\n placeholder=\"Production\"\n />\n </div>\n <label className=\"flex items-center gap-2 text-sm\">\n <Checkbox\n checked={write}\n onChange={(event) => setWrite(event.target.checked)}\n />{' '}\n Allow write access\n </label>\n </DialogBody>\n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button\n onClick={() => {\n void onCreate({\n name,\n permissions: write ? ['read', 'write'] : ['read'],\n });\n onOpenChange(false);\n }}\n disabled={!name.trim()}\n >\n Create key\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n );\n}\nexport function ApiKeyManager({\n keys,\n loading,\n onCreate,\n onRevoke,\n actions,\n children,\n}: {\n keys: ApiKey[];\n loading?: boolean;\n onCreate?: (values: {\n name: string;\n permissions: string[];\n }) => void | Promise<void>;\n onRevoke?: (id: string) => void | Promise<void>;\n actions?: { create?: boolean; revoke?: boolean };\n children?: ReactNode;\n}) {\n const [createOpen, setCreateOpen] = useState(false);\n const visibleActions = { create: true, revoke: true, ...actions };\n return (\n <Section\n title=\"API keys\"\n description=\"Create keys for programmatic access.\"\n >\n {visibleActions.create && onCreate && (\n <div className=\"flex justify-end\">\n <Button onClick={() => setCreateOpen(true)}>Create API key</Button>\n </div>\n )}\n <Stack>\n {keys.length ? (\n keys.map((key) => (\n <Card\n key={key.id}\n className=\"flex flex-wrap items-center justify-between gap-3\"\n >\n <div>\n <CardTitle>{key.name}</CardTitle>\n <CardDescription>\n <code>{key.prefix}••••••••</code> · Created {key.createdAt}\n {key.lastUsedAt\n ? ` · Last used ${key.lastUsedAt}`\n : ' · Never used'}\n </CardDescription>\n </div>\n {visibleActions.revoke && onRevoke && (\n <Button\n variant=\"outline\"\n size=\"sm\"\n loading={loading}\n onClick={() => void onRevoke(key.id)}\n >\n Revoke\n </Button>\n )}\n </Card>\n ))\n ) : (\n <EmptyState\n title=\"No API keys\"\n description=\"Create one when you need programmatic access.\"\n />\n )}\n </Stack>\n {children}\n {visibleActions.create && onCreate && (\n <CreateApiKeyDialog\n open={createOpen}\n onOpenChange={setCreateOpen}\n onCreate={onCreate}\n />\n )}\n </Section>\n );\n}\nexport function ApiKeyPage(props: ComponentProps<typeof ApiKeyManager>) {\n return <ApiKeyManager {...props} />;\n}\ntype ComponentProps<T> = T extends (props: infer Props) => unknown\n ? Props\n : never;\nexport function DangerZone({\n onDeleteAccount,\n confirmationText = 'DELETE',\n}: {\n onDeleteAccount: () => void | Promise<void>;\n confirmationText?: string;\n}) {\n const [value, setValue] = useState('');\n return (\n <Section title=\"Danger zone\" description=\"These actions are permanent.\">\n <Card className=\"border-[hsl(var(--rui-destructive))]\">\n <CardTitle>Delete account</CardTitle>\n <CardDescription>\n Delete all account data. This cannot be undone.\n </CardDescription>\n <div className=\"mt-4 max-w-sm\">\n <Label htmlFor=\"delete-confirmation\">\n Type {confirmationText} to confirm\n </Label>\n <Input\n id=\"delete-confirmation\"\n value={value}\n onChange={(event) => setValue(event.target.value)}\n />\n </div>\n <Button\n className=\"mt-4\"\n variant=\"destructive\"\n disabled={value !== confirmationText}\n onClick={() => void onDeleteAccount()}\n >\n Delete account\n </Button>\n </Card>\n </Section>\n );\n}\n","import { type ReactNode } from 'react';\nimport {\n Badge,\n Button,\n Card,\n CardDescription,\n CardHeader,\n CardTitle,\n DataTable,\n EmptyState,\n Section,\n Stack,\n type DataColumn,\n} from '@sypra-ui/ui';\n\nexport type Subscription = {\n plan: string;\n price: string;\n interval?: string;\n nextBillingDate?: string;\n status?: string;\n usage?: Array<{ label: string; value: string }>;\n};\nexport type PaymentMethod = {\n brand: string;\n last4: string;\n expiresAt?: string;\n};\nexport type Invoice = {\n id: string;\n date: string;\n amount: string;\n status: string;\n href?: string;\n};\nexport function SubscriptionCard({\n subscription,\n onChangePlan,\n onCancel,\n}: {\n subscription?: Subscription;\n onChangePlan?: () => void;\n onCancel?: () => void;\n}) {\n if (!subscription)\n return (\n <EmptyState\n title=\"No active subscription\"\n action={\n onChangePlan && <Button onClick={onChangePlan}>View plans</Button>\n }\n />\n );\n return (\n <Card>\n <CardHeader>\n <div>\n <CardTitle>{subscription.plan}</CardTitle>\n <CardDescription>\n {subscription.price}\n {subscription.interval && ` / ${subscription.interval}`}\n </CardDescription>\n </div>\n {subscription.status && (\n <Badge variant=\"success\">{subscription.status}</Badge>\n )}\n </CardHeader>\n {subscription.nextBillingDate && (\n <p className=\"text-sm text-[hsl(var(--rui-muted-foreground))]\">\n Next billing date: {subscription.nextBillingDate}\n </p>\n )}\n {subscription.usage?.length ? (\n <div className=\"mt-4 grid gap-2 text-sm sm:grid-cols-2\">\n {subscription.usage.map((item) => (\n <div\n key={item.label}\n className=\"rounded bg-[hsl(var(--rui-muted))] p-3\"\n >\n <strong className=\"block\">{item.value}</strong>\n <span className=\"text-[hsl(var(--rui-muted-foreground))]\">\n {item.label}\n </span>\n </div>\n ))}\n </div>\n ) : null}\n <div className=\"mt-5 flex flex-wrap gap-2\">\n {onChangePlan && <Button onClick={onChangePlan}>Change plan</Button>}\n {onCancel && (\n <Button variant=\"outline\" onClick={onCancel}>\n Manage subscription\n </Button>\n )}\n </div>\n </Card>\n );\n}\nexport function PaymentMethodCard({\n paymentMethod,\n onUpdate,\n}: {\n paymentMethod?: PaymentMethod;\n onUpdate?: () => void;\n}) {\n return (\n <Card>\n <CardHeader>\n <div>\n <CardTitle>Payment method</CardTitle>\n <CardDescription>\n {paymentMethod\n ? `${paymentMethod.brand} •••• ${paymentMethod.last4}${paymentMethod.expiresAt ? ` · Expires ${paymentMethod.expiresAt}` : ''}`\n : 'No payment method on file.'}\n </CardDescription>\n </div>\n {onUpdate && (\n <Button variant=\"outline\" size=\"sm\" onClick={onUpdate}>\n {paymentMethod ? 'Update' : 'Add payment method'}\n </Button>\n )}\n </CardHeader>\n </Card>\n );\n}\nexport function InvoiceTable({\n invoices,\n onView,\n}: {\n invoices: Invoice[];\n onView?: (invoice: Invoice) => void;\n}) {\n const columns: DataColumn<Invoice>[] = [\n { key: 'date', header: 'Date', sortable: true },\n { key: 'amount', header: 'Amount' },\n {\n key: 'status',\n header: 'Status',\n cell: (invoice) => (\n <Badge\n variant={\n invoice.status.toLowerCase() === 'paid' ? 'success' : 'warning'\n }\n >\n {invoice.status}\n </Badge>\n ),\n },\n {\n key: 'id',\n header: <span className=\"sr-only\">Actions</span>,\n cell: (invoice) =>\n onView && (\n <Button variant=\"ghost\" size=\"sm\" onClick={() => onView(invoice)}>\n View\n </Button>\n ),\n },\n ];\n return (\n <DataTable\n data={invoices}\n columns={columns}\n emptyMessage=\"No invoices yet.\"\n />\n );\n}\nexport function PricingTable({\n plans,\n onSelect,\n}: {\n plans: Array<{\n name: string;\n price: string;\n description?: string;\n features: string[];\n highlighted?: boolean;\n }>;\n onSelect: (plan: string) => void;\n}) {\n return (\n <div className=\"grid gap-4 md:grid-cols-3\">\n {plans.map((plan) => (\n <Card\n key={plan.name}\n className={\n plan.highlighted ? 'border-[hsl(var(--rui-primary))]' : undefined\n }\n >\n <CardTitle>{plan.name}</CardTitle>\n <p className=\"mt-3 text-2xl font-bold\">{plan.price}</p>\n {plan.description && (\n <CardDescription>{plan.description}</CardDescription>\n )}\n <ul className=\"my-5 space-y-2 text-sm\">\n {plan.features.map((feature) => (\n <li key={feature}>✓ {feature}</li>\n ))}\n </ul>\n <Button\n className=\"w-full\"\n variant={plan.highlighted ? 'primary' : 'outline'}\n onClick={() => onSelect(plan.name)}\n >\n Choose {plan.name}\n </Button>\n </Card>\n ))}\n </div>\n );\n}\nexport function BillingPage({\n subscription,\n paymentMethod,\n invoices,\n onChangePlan,\n onUpdatePaymentMethod,\n onCancel,\n onViewInvoice,\n sections,\n children,\n}: {\n subscription?: Subscription;\n paymentMethod?: PaymentMethod;\n invoices?: Invoice[];\n onChangePlan?: () => void;\n onUpdatePaymentMethod?: () => void;\n onCancel?: () => void;\n onViewInvoice?: (invoice: Invoice) => void;\n sections?: {\n subscription?: boolean;\n paymentMethod?: boolean;\n invoices?: boolean;\n };\n children?: ReactNode;\n}) {\n const visibleSections = {\n subscription: true,\n paymentMethod: true,\n invoices: true,\n ...sections,\n };\n return (\n <Stack gap={8}>\n {visibleSections.subscription && (\n <Section\n title=\"Billing\"\n description=\"Manage your plan and payment details.\"\n >\n <SubscriptionCard\n subscription={subscription}\n onChangePlan={onChangePlan}\n onCancel={onCancel}\n />\n </Section>\n )}\n {visibleSections.paymentMethod && (\n <PaymentMethodCard\n paymentMethod={paymentMethod}\n onUpdate={onUpdatePaymentMethod}\n />\n )}\n {visibleSections.invoices && (\n <Section title=\"Invoices\">\n <InvoiceTable invoices={invoices ?? []} onView={onViewInvoice} />\n </Section>\n )}\n {children}\n </Stack>\n );\n}\n","import { type ReactNode } from 'react';\nimport {\n Badge,\n Card,\n CardDescription,\n CardTitle,\n Container,\n PageContent,\n PageHeader,\n PageShell,\n} from '@sypra-ui/ui';\n\nexport function Hero({\n eyebrow,\n title,\n description,\n primaryAction,\n secondaryAction,\n}: {\n eyebrow?: ReactNode;\n title: ReactNode;\n description: ReactNode;\n primaryAction?: ReactNode;\n secondaryAction?: ReactNode;\n}) {\n return (\n <section className=\"py-20 text-center sm:py-28\">\n {eyebrow && <Badge>{eyebrow}</Badge>}\n <h1 className=\"mx-auto mt-5 max-w-3xl text-4xl font-bold tracking-tight sm:text-6xl\">\n {title}\n </h1>\n <p className=\"mx-auto mt-5 max-w-2xl text-lg text-[hsl(var(--rui-muted-foreground))]\">\n {description}\n </p>\n <div className=\"mt-8 flex flex-wrap justify-center gap-3\">\n {primaryAction}\n {secondaryAction}\n </div>\n </section>\n );\n}\nexport function FeatureGrid({\n features,\n}: {\n features: Array<{ title: string; description: string; icon?: ReactNode }>;\n}) {\n return (\n <section className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n {features.map((feature) => (\n <Card key={feature.title}>\n {feature.icon && (\n <div className=\"mb-3 text-[hsl(var(--rui-primary))]\">\n {feature.icon}\n </div>\n )}\n <CardTitle>{feature.title}</CardTitle>\n <CardDescription>{feature.description}</CardDescription>\n </Card>\n ))}\n </section>\n );\n}\nexport function FAQ({\n items,\n}: {\n items: Array<{ question: string; answer: ReactNode }>;\n}) {\n return (\n <section className=\"mx-auto max-w-3xl space-y-4\">\n {items.map((item) => (\n <Card key={item.question}>\n <CardTitle>{item.question}</CardTitle>\n <CardDescription>{item.answer}</CardDescription>\n </Card>\n ))}\n </section>\n );\n}\nexport function CTA({\n title,\n description,\n action,\n}: {\n title: ReactNode;\n description?: ReactNode;\n action: ReactNode;\n}) {\n return (\n <section className=\"rounded-[calc(var(--rui-radius)+.2rem)] bg-[hsl(var(--rui-primary))] px-6 py-14 text-center text-[hsl(var(--rui-primary-foreground))]\">\n <h2 className=\"text-3xl font-bold\">{title}</h2>\n {description && <p className=\"mt-3 opacity-85\">{description}</p>}\n <div className=\"mt-6\">{action}</div>\n </section>\n );\n}\nexport function Footer({\n brand,\n links,\n}: {\n brand: ReactNode;\n links?: Array<{ label: string; href: string }>;\n}) {\n return (\n <footer className=\"mt-16 border-t border-[hsl(var(--rui-border))] py-8 text-sm text-[hsl(var(--rui-muted-foreground))]\">\n <div className=\"flex flex-wrap items-center justify-between gap-4\">\n <strong className=\"text-[hsl(var(--rui-foreground))]\">{brand}</strong>\n <div className=\"flex gap-4\">\n {links?.map((link) => (\n <a\n key={link.href}\n href={link.href}\n className=\"hover:text-[hsl(var(--rui-foreground))]\"\n >\n {link.label}\n </a>\n ))}\n </div>\n </div>\n </footer>\n );\n}\nexport function LandingPage({\n brand,\n hero,\n features,\n children,\n as,\n sections,\n}: {\n brand: ReactNode;\n hero?: {\n title: ReactNode;\n description: ReactNode;\n primaryAction?: ReactNode;\n secondaryAction?: ReactNode;\n };\n features?: Array<{ title: string; description: string; icon?: ReactNode }>;\n children?: ReactNode;\n as?: 'main' | 'div';\n sections?: {\n header?: boolean;\n hero?: boolean;\n features?: boolean;\n footer?: boolean;\n };\n}) {\n const visibleSections = {\n header: true,\n hero: true,\n features: true,\n footer: true,\n ...sections,\n };\n return (\n <PageShell as={as}>\n <Container>\n {visibleSections.header && (\n <header className=\"flex h-16 items-center justify-between\">\n <strong>{brand}</strong>\n </header>\n )}\n {visibleSections.hero && hero && <Hero {...hero} />}\n {visibleSections.features && features && (\n <FeatureGrid features={features} />\n )}\n {children}\n {visibleSections.footer && <Footer brand={brand} />}\n </Container>\n </PageShell>\n );\n}\n\nexport function SettingsPageDemo({ children }: { children: ReactNode }) {\n return (\n <PageShell>\n <Container className=\"py-8\">\n <PageHeader title=\"Settings\" description=\"Manage your account.\" />\n <PageContent>{children}</PageContent>\n </Container>\n </PageShell>\n );\n}\n"],"mappings":"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","names":["useState","Button","Card","CardDescription","CardTitle","Dialog","DialogContent","DialogDescription","DialogHeader","DialogTitle","Input","Label","Separator","jsx","jsxs","Badge","Button","Card","CardDescription","CardHeader","CardTitle","EmptyState","Section","Stack","jsx","jsxs","Badge","Card","CardDescription","CardTitle","PageShell","jsx","jsxs"]}
|