@slyxup/ui 2.5.0 → 2.5.2
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/LICENSE +21 -0
- package/README.md +112 -16
- package/dist/components/BillingPortal/BillingPortal.d.ts +18 -16
- package/dist/components/BillingPortal/BillingPortal.d.ts.map +1 -1
- package/dist/components/BillingPortal/BillingPortal.js +9 -55
- package/dist/components/BillingPortal/BillingPortal.js.map +1 -1
- package/dist/components/CheckoutButton/CheckoutButton.d.ts +26 -0
- package/dist/components/CheckoutButton/CheckoutButton.d.ts.map +1 -0
- package/dist/components/CheckoutButton/CheckoutButton.js +24 -0
- package/dist/components/CheckoutButton/CheckoutButton.js.map +1 -0
- package/dist/components/CopyField.d.ts.map +1 -1
- package/dist/components/CopyField.js +1 -1
- package/dist/components/CopyField.js.map +1 -1
- package/dist/components/CurrentPlanCard/CurrentPlanCard.d.ts +30 -0
- package/dist/components/CurrentPlanCard/CurrentPlanCard.d.ts.map +1 -0
- package/dist/components/CurrentPlanCard/CurrentPlanCard.js +38 -0
- package/dist/components/CurrentPlanCard/CurrentPlanCard.js.map +1 -0
- package/dist/components/EmptyState.d.ts.map +1 -1
- package/dist/components/EmptyState.js +1 -1
- package/dist/components/EmptyState.js.map +1 -1
- package/dist/components/InvoicesTable/InvoicesTable.d.ts +20 -0
- package/dist/components/InvoicesTable/InvoicesTable.d.ts.map +1 -0
- package/dist/components/InvoicesTable/InvoicesTable.js +33 -0
- package/dist/components/InvoicesTable/InvoicesTable.js.map +1 -0
- package/dist/components/OtpInput.d.ts.map +1 -1
- package/dist/components/OtpInput.js +3 -1
- package/dist/components/OtpInput.js.map +1 -1
- package/dist/components/PasswordStrength.d.ts +1 -1
- package/dist/components/PasswordStrength.d.ts.map +1 -1
- package/dist/components/PasswordStrength.js +8 -2
- package/dist/components/PasswordStrength.js.map +1 -1
- package/dist/components/PlanCard/PlanCard.d.ts +29 -0
- package/dist/components/PlanCard/PlanCard.d.ts.map +1 -0
- package/dist/components/PlanCard/PlanCard.js +46 -0
- package/dist/components/PlanCard/PlanCard.js.map +1 -0
- package/dist/components/PricingTable/PricingTable.d.ts +18 -15
- package/dist/components/PricingTable/PricingTable.d.ts.map +1 -1
- package/dist/components/PricingTable/PricingTable.js +16 -47
- package/dist/components/PricingTable/PricingTable.js.map +1 -1
- package/dist/components/SubscriptionStatus/SubscriptionStatus.d.ts +12 -0
- package/dist/components/SubscriptionStatus/SubscriptionStatus.d.ts.map +1 -0
- package/dist/components/SubscriptionStatus/SubscriptionStatus.js +34 -0
- package/dist/components/SubscriptionStatus/SubscriptionStatus.js.map +1 -0
- package/dist/index.d.ts +11 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -4
- package/dist/index.js.map +1 -1
- package/dist/lib/scoped-theme.d.ts +10 -0
- package/dist/lib/scoped-theme.d.ts.map +1 -0
- package/dist/lib/scoped-theme.js +20 -0
- package/dist/lib/scoped-theme.js.map +1 -0
- package/dist/react/hooks/useBilling.d.ts +34 -1
- package/dist/react/hooks/useBilling.d.ts.map +1 -1
- package/dist/react/hooks/useBilling.js +71 -4
- package/dist/react/hooks/useBilling.js.map +1 -1
- package/package.json +8 -8
|
@@ -30,7 +30,9 @@ export function OtpInput({ length = 6, value, onChange, onComplete, autoFocus, d
|
|
|
30
30
|
commit(current.slice(0, i) + current.slice(i + 1));
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
const next = (current.slice(0, i) +
|
|
33
|
+
const next = (current.slice(0, i) +
|
|
34
|
+
d +
|
|
35
|
+
current.slice(i + 1)).slice(0, length);
|
|
34
36
|
commit(next);
|
|
35
37
|
if (i < length - 1)
|
|
36
38
|
focusBox(i + 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OtpInput.js","sourceRoot":"","sources":["../../src/components/OtpInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"OtpInput.js","sourceRoot":"","sources":["../../src/components/OtpInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,5 +7,5 @@ export interface PasswordStrengthProps {
|
|
|
7
7
|
showLabel?: boolean;
|
|
8
8
|
}
|
|
9
9
|
/** 5-segment strength meter. Pair with a password field. */
|
|
10
|
-
export declare function PasswordStrength({ password, showLabel }: PasswordStrengthProps): import("react").JSX.Element;
|
|
10
|
+
export declare function PasswordStrength({ password, showLabel, }: PasswordStrengthProps): import("react").JSX.Element;
|
|
11
11
|
//# sourceMappingURL=PasswordStrength.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordStrength.d.ts","sourceRoot":"","sources":["../../src/components/PasswordStrength.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAI9C,mFAAmF;AACnF,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,CASvD;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,4DAA4D;AAC5D,wBAAgB,gBAAgB,CAAC,
|
|
1
|
+
{"version":3,"file":"PasswordStrength.d.ts","sourceRoot":"","sources":["../../src/components/PasswordStrength.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAI9C,mFAAmF;AACnF,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,CASvD;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,4DAA4D;AAC5D,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAgB,GACjB,EAAE,qBAAqB,+BAiCvB"}
|
|
@@ -19,10 +19,16 @@ export function passwordScore(pw) {
|
|
|
19
19
|
return Math.min(4, score);
|
|
20
20
|
}
|
|
21
21
|
/** 5-segment strength meter. Pair with a password field. */
|
|
22
|
-
export function PasswordStrength({ password, showLabel = true }) {
|
|
22
|
+
export function PasswordStrength({ password, showLabel = true, }) {
|
|
23
23
|
injectStyles();
|
|
24
24
|
const score = passwordScore(password);
|
|
25
|
-
const tone = score <= 1
|
|
25
|
+
const tone = score <= 1
|
|
26
|
+
? 'var(--slx-danger)'
|
|
27
|
+
: score === 2
|
|
28
|
+
? '#d97706'
|
|
29
|
+
: score === 3
|
|
30
|
+
? 'var(--slx-accent)'
|
|
31
|
+
: 'var(--slx-success)';
|
|
26
32
|
return (_jsxs("div", { className: "slx-meter-wrap", "aria-live": "polite", children: [_jsx("div", { className: "slx-meter", role: "img", "aria-label": `Password strength: ${LABELS[score]} (${score} of 4)`, children: [0, 1, 2, 3].map((i) => (_jsx("i", { className: i < score ? 'on' : undefined, style: i < score ? { background: tone } : undefined }, i))) }), showLabel && password && (_jsx("span", { className: "slx-meter-label", style: { color: tone }, children: LABELS[score] }))] }));
|
|
27
33
|
}
|
|
28
34
|
//# sourceMappingURL=PasswordStrength.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordStrength.js","sourceRoot":"","sources":["../../src/components/PasswordStrength.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAIzC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AAEvE,mFAAmF;AACnF,MAAM,UAAU,aAAa,CAAC,EAAU;IACtC,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,CAAC;IAClB,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC;QAAE,KAAK,IAAI,CAAC,CAAC;IAC/B,IAAI,EAAE,CAAC,MAAM,IAAI,EAAE;QAAE,KAAK,IAAI,CAAC,CAAC;IAChC,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAAE,KAAK,IAAI,CAAC,CAAC;IACrD,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAAE,KAAK,IAAI,CAAC,CAAC;IAC9B,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;QAAE,KAAK,IAAI,CAAC,CAAC;IACxC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAkB,CAAC;AAC7C,CAAC;AAQD,4DAA4D;AAC5D,MAAM,UAAU,gBAAgB,CAAC,
|
|
1
|
+
{"version":3,"file":"PasswordStrength.js","sourceRoot":"","sources":["../../src/components/PasswordStrength.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAIzC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AAEvE,mFAAmF;AACnF,MAAM,UAAU,aAAa,CAAC,EAAU;IACtC,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,CAAC;IAClB,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC;QAAE,KAAK,IAAI,CAAC,CAAC;IAC/B,IAAI,EAAE,CAAC,MAAM,IAAI,EAAE;QAAE,KAAK,IAAI,CAAC,CAAC;IAChC,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAAE,KAAK,IAAI,CAAC,CAAC;IACrD,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAAE,KAAK,IAAI,CAAC,CAAC;IAC9B,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;QAAE,KAAK,IAAI,CAAC,CAAC;IACxC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAkB,CAAC;AAC7C,CAAC;AAQD,4DAA4D;AAC5D,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,GAAG,IAAI,GACM;IACtB,YAAY,EAAE,CAAC;IACf,MAAM,KAAK,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,IAAI,GACR,KAAK,IAAI,CAAC;QACR,CAAC,CAAC,mBAAmB;QACrB,CAAC,CAAC,KAAK,KAAK,CAAC;YACX,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,KAAK,KAAK,CAAC;gBACX,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,oBAAoB,CAAC;IAC/B,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,eAAW,QAAQ,aAChD,cACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,KAAK,gBACE,sBAAsB,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,QAAQ,YAEhE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvB,YAEE,SAAS,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,IAF9C,CAAC,CAGN,CACH,CAAC,GACE,EACL,SAAS,IAAI,QAAQ,IAAI,CACxB,eAAM,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,YACrD,MAAM,CAAC,KAAK,CAAC,GACT,CACR,IACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { CSSProperties } from 'react';
|
|
2
|
+
import type { SlyxUpTheme } from '../../theme';
|
|
3
|
+
export interface PlanCardPlan {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
amount: number;
|
|
7
|
+
currency: string;
|
|
8
|
+
interval: 'month' | 'year';
|
|
9
|
+
trialDays: number | null;
|
|
10
|
+
features: string[] | null;
|
|
11
|
+
isPopular: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface PlanCardProps {
|
|
14
|
+
plan: PlanCardPlan;
|
|
15
|
+
/** Renders the disabled current-plan state instead of the CTA. */
|
|
16
|
+
current?: boolean;
|
|
17
|
+
currentLabel?: string;
|
|
18
|
+
ctaLabel?: string;
|
|
19
|
+
popularBadgeText?: string;
|
|
20
|
+
onSelect?: (plan: PlanCardPlan) => void;
|
|
21
|
+
loading?: boolean;
|
|
22
|
+
/** Per-component theme (accent, mode, radius…) — scoped, never global. */
|
|
23
|
+
theme?: SlyxUpTheme;
|
|
24
|
+
style?: CSSProperties;
|
|
25
|
+
className?: string;
|
|
26
|
+
}
|
|
27
|
+
/** Single pricing card — use standalone or inside PricingTable. */
|
|
28
|
+
export declare function PlanCard({ plan, current, currentLabel, ctaLabel, popularBadgeText, onSelect, loading, theme, style, className, }: PlanCardProps): import("react").JSX.Element;
|
|
29
|
+
//# sourceMappingURL=PlanCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PlanCard.d.ts","sourceRoot":"","sources":["../../../src/components/PlanCard/PlanCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,mEAAmE;AACnE,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,OAAe,EACf,YAA6B,EAC7B,QAAwB,EACxB,gBAA4B,EAC5B,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,aAAa,+BAsGf"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useScopedTheme } from '../../lib/scoped-theme';
|
|
4
|
+
import { injectStyles } from '../../styles';
|
|
5
|
+
/** Single pricing card — use standalone or inside PricingTable. */
|
|
6
|
+
export function PlanCard({ plan, current = false, currentLabel = 'Current plan', ctaLabel = 'Get started', popularBadgeText = 'POPULAR', onSelect, loading, theme, style, className, }) {
|
|
7
|
+
injectStyles();
|
|
8
|
+
const ref = useScopedTheme(theme);
|
|
9
|
+
return (_jsxs("div", { ref: ref, className: `slx-card${plan.isPopular ? ' slx-card-popular' : ''} ${className ?? ''}`, style: {
|
|
10
|
+
position: plan.isPopular ? 'relative' : undefined,
|
|
11
|
+
borderColor: plan.isPopular ? 'var(--slx-accent)' : undefined,
|
|
12
|
+
display: 'flex',
|
|
13
|
+
flexDirection: 'column',
|
|
14
|
+
...style,
|
|
15
|
+
}, children: [plan.isPopular && (_jsx("span", { style: {
|
|
16
|
+
position: 'absolute',
|
|
17
|
+
top: -11,
|
|
18
|
+
right: 20,
|
|
19
|
+
fontSize: 10.5,
|
|
20
|
+
fontFamily: 'var(--slx-mono)',
|
|
21
|
+
background: 'linear-gradient(135deg, color-mix(in srgb, var(--slx-accent) 78%, #0c0c12), color-mix(in srgb, var(--slx-accent-2) 55%, #0c0c12))',
|
|
22
|
+
color: '#fff',
|
|
23
|
+
padding: '3px 10px',
|
|
24
|
+
borderRadius: 999,
|
|
25
|
+
}, children: popularBadgeText })), _jsx("h3", { style: { fontSize: 15, fontWeight: 550, color: 'var(--slx-muted)' }, children: plan.name }), _jsxs("div", { style: { margin: '8px 0 2px' }, children: [_jsxs("span", { style: {
|
|
26
|
+
fontSize: 38,
|
|
27
|
+
fontWeight: 750,
|
|
28
|
+
letterSpacing: '-0.03em',
|
|
29
|
+
fontFamily: 'var(--slx-display)',
|
|
30
|
+
}, children: ["$", (plan.amount / 100).toFixed(0)] }), _jsxs("span", { style: { fontSize: 14, color: 'var(--slx-muted)' }, children: ["/", plan.interval] })] }), plan.trialDays ? (_jsxs("p", { style: {
|
|
31
|
+
fontSize: 12,
|
|
32
|
+
color: 'var(--slx-accent)',
|
|
33
|
+
marginBottom: 4,
|
|
34
|
+
}, children: [plan.trialDays, " day free trial"] })) : (_jsx("p", { style: { fontSize: 12, color: 'transparent', marginBottom: 4 }, children: "\u00A0" })), _jsx("ul", { style: { listStyle: 'none', margin: '14px 0 22px', flex: 1 }, children: (plan.features ?? []).map((f) => (_jsxs("li", { style: {
|
|
35
|
+
fontSize: 13.5,
|
|
36
|
+
color: 'var(--slx-ink)',
|
|
37
|
+
padding: '5px 0 5px 24px',
|
|
38
|
+
position: 'relative',
|
|
39
|
+
}, children: [_jsx("span", { style: {
|
|
40
|
+
position: 'absolute',
|
|
41
|
+
left: 0,
|
|
42
|
+
color: '#34d399',
|
|
43
|
+
fontWeight: 700,
|
|
44
|
+
}, children: "\u2713" }), ' ', f] }, f))) }), _jsx("button", { type: "button", className: "slx-btn", onClick: () => (current ? undefined : onSelect?.(plan)), disabled: loading || current, style: current ? { opacity: 0.65, cursor: 'default' } : undefined, children: current ? currentLabel : ctaLabel })] }));
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=PlanCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PlanCard.js","sourceRoot":"","sources":["../../../src/components/PlanCard/PlanCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
currency: string;
|
|
6
|
-
interval: 'month' | 'year';
|
|
7
|
-
trialDays: number | null;
|
|
8
|
-
features: string[] | null;
|
|
9
|
-
isPopular: boolean;
|
|
10
|
-
}
|
|
1
|
+
import type { CSSProperties } from 'react';
|
|
2
|
+
import type { SlyxUpTheme } from '../../theme';
|
|
3
|
+
import { type PlanCardPlan } from '../PlanCard/PlanCard';
|
|
4
|
+
export type PricingPlan = PlanCardPlan;
|
|
11
5
|
export interface PricingTableProps {
|
|
12
|
-
plans:
|
|
13
|
-
onSelect?: (plan:
|
|
6
|
+
plans: PricingPlan[];
|
|
7
|
+
onSelect?: (plan: PricingPlan) => void;
|
|
14
8
|
loading?: boolean;
|
|
9
|
+
/** Plan id treated as the user's current plan — its button renders
|
|
10
|
+
* `currentLabel` disabled instead of "Get started". Pass the active
|
|
11
|
+
* subscription's planId, or the $0 plan's id when on the free tier. */
|
|
12
|
+
currentPlanId?: string | null;
|
|
13
|
+
currentLabel?: string;
|
|
14
|
+
ctaLabel?: string;
|
|
15
|
+
/** Per-component theme (accent, mode, radius…) — scoped, never global. */
|
|
16
|
+
theme?: SlyxUpTheme;
|
|
17
|
+
style?: CSSProperties;
|
|
18
|
+
className?: string;
|
|
15
19
|
}
|
|
16
|
-
/** Clean pricing grid with popular badge */
|
|
17
|
-
export declare function PricingTable({ plans, onSelect, loading }: PricingTableProps): import("react").JSX.Element;
|
|
18
|
-
export {};
|
|
20
|
+
/** Clean pricing grid with popular badge. Composes PlanCard per plan. */
|
|
21
|
+
export declare function PricingTable({ plans, onSelect, loading, currentPlanId, currentLabel, ctaLabel, theme, style, className, }: PricingTableProps): import("react").JSX.Element;
|
|
19
22
|
//# sourceMappingURL=PricingTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PricingTable.d.ts","sourceRoot":"","sources":["../../../src/components/PricingTable/PricingTable.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PricingTable.d.ts","sourceRoot":"","sources":["../../../src/components/PricingTable/PricingTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEnE,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC;AAQvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;4EAEwE;IACxE,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,aAAoB,EACpB,YAA6B,EAC7B,QAAwB,EACxB,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,iBAAiB,+BA0CnB"}
|
|
@@ -1,54 +1,23 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useScopedTheme } from '../../lib/scoped-theme';
|
|
3
4
|
import { injectStyles } from '../../styles';
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
import { PlanCard } from '../PlanCard/PlanCard';
|
|
6
|
+
const PRICING_GRID_CSS = [
|
|
7
|
+
'.slx-pricing-grid{display:grid;gap:16px;grid-template-columns:1fr}',
|
|
8
|
+
'@media(min-width:640px){.slx-pricing-grid.slx-pricing-grid--2,.slx-pricing-grid.slx-pricing-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}',
|
|
9
|
+
'@media(min-width:1024px){.slx-pricing-grid.slx-pricing-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}',
|
|
10
|
+
].join('');
|
|
11
|
+
/** Clean pricing grid with popular badge. Composes PlanCard per plan. */
|
|
12
|
+
export function PricingTable({ plans, onSelect, loading, currentPlanId = null, currentLabel = 'Current plan', ctaLabel = 'Get started', theme, style, className, }) {
|
|
6
13
|
injectStyles();
|
|
14
|
+
const ref = useScopedTheme(theme);
|
|
15
|
+
// Responsive columns: 1 per row on mobile, scaling up to 3 on desktop.
|
|
16
|
+
const cols = Math.min(Math.max(plans.length, 1), 3);
|
|
17
|
+
const gridClass = `slx-pricing-grid slx-pricing-grid--${cols} ${className ?? ''}`;
|
|
7
18
|
if (loading) {
|
|
8
|
-
return (_jsx("div", { className: "slx-
|
|
9
|
-
display: 'grid',
|
|
10
|
-
gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
|
|
11
|
-
gap: 16,
|
|
12
|
-
}, children: [1, 2, 3].map((i) => (_jsx("div", { className: "slx-card", style: { minHeight: 320 }, "aria-busy": "true" }, i))) }));
|
|
19
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { children: PRICING_GRID_CSS }), _jsx("div", { ref: ref, className: gridClass, style: style, children: [1, 2, 3].map((i) => (_jsx("div", { className: "slx-card", style: { minHeight: 320 }, "aria-busy": "true" }, i))) })] }));
|
|
13
20
|
}
|
|
14
|
-
return (_jsx("div", { style: {
|
|
15
|
-
display: 'grid',
|
|
16
|
-
gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
|
|
17
|
-
gap: 16,
|
|
18
|
-
}, children: plans.map((plan) => (_jsxs("div", { className: `slx-card${plan.isPopular ? ' slx-card-popular' : ''}`, style: {
|
|
19
|
-
position: plan.isPopular ? 'relative' : undefined,
|
|
20
|
-
borderColor: plan.isPopular ? 'var(--slx-accent)' : undefined,
|
|
21
|
-
display: 'flex',
|
|
22
|
-
flexDirection: 'column',
|
|
23
|
-
}, children: [plan.isPopular && (_jsx("span", { style: {
|
|
24
|
-
position: 'absolute',
|
|
25
|
-
top: -11,
|
|
26
|
-
right: 20,
|
|
27
|
-
fontSize: 10.5,
|
|
28
|
-
fontFamily: 'var(--slx-mono)',
|
|
29
|
-
background: 'linear-gradient(135deg, color-mix(in srgb, var(--slx-accent) 78%, #0c0c12), color-mix(in srgb, var(--slx-accent-2) 55%, #0c0c12))',
|
|
30
|
-
color: '#fff',
|
|
31
|
-
padding: '3px 10px',
|
|
32
|
-
borderRadius: 999,
|
|
33
|
-
}, children: "POPULAR" })), _jsx("h3", { style: { fontSize: 15, fontWeight: 550, color: 'var(--slx-muted)' }, children: plan.name }), _jsxs("div", { style: { margin: '8px 0 2px' }, children: [_jsxs("span", { style: {
|
|
34
|
-
fontSize: 38,
|
|
35
|
-
fontWeight: 750,
|
|
36
|
-
letterSpacing: '-0.03em',
|
|
37
|
-
fontFamily: 'var(--slx-display)',
|
|
38
|
-
}, children: ["$", (plan.amount / 100).toFixed(0)] }), _jsxs("span", { style: { fontSize: 14, color: 'var(--slx-muted)' }, children: ["/", plan.interval] })] }), plan.trialDays ? (_jsxs("p", { style: {
|
|
39
|
-
fontSize: 12,
|
|
40
|
-
color: 'var(--slx-accent)',
|
|
41
|
-
marginBottom: 4,
|
|
42
|
-
}, children: [plan.trialDays, " day free trial"] })) : (_jsx("p", { style: { fontSize: 12, color: 'transparent', marginBottom: 4 }, children: "\u00A0" })), _jsx("ul", { style: { listStyle: 'none', margin: '14px 0 22px', flex: 1 }, children: (plan.features ?? []).map((f) => (_jsxs("li", { style: {
|
|
43
|
-
fontSize: 13.5,
|
|
44
|
-
color: 'var(--slx-ink)',
|
|
45
|
-
padding: '5px 0 5px 24px',
|
|
46
|
-
position: 'relative',
|
|
47
|
-
}, children: [_jsx("span", { style: {
|
|
48
|
-
position: 'absolute',
|
|
49
|
-
left: 0,
|
|
50
|
-
color: '#34d399',
|
|
51
|
-
fontWeight: 700,
|
|
52
|
-
}, children: "\u2713" }), ' ', f] }, f))) }), _jsx("button", { type: "button", className: "slx-btn", onClick: () => onSelect?.(plan), disabled: loading, children: "Get started" })] }, plan.id))) }));
|
|
21
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { children: PRICING_GRID_CSS }), _jsx("div", { ref: ref, className: gridClass, style: style, children: plans.map((plan) => (_jsx(PlanCard, { plan: plan, current: currentPlanId != null && plan.id === currentPlanId, currentLabel: currentLabel, ctaLabel: ctaLabel, onSelect: onSelect, loading: loading }, plan.id))) })] }));
|
|
53
22
|
}
|
|
54
23
|
//# sourceMappingURL=PricingTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PricingTable.js","sourceRoot":"","sources":["../../../src/components/PricingTable/PricingTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"PricingTable.js","sourceRoot":"","sources":["../../../src/components/PricingTable/PricingTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAqB,MAAM,sBAAsB,CAAC;AAInE,MAAM,gBAAgB,GAAG;IACvB,oEAAoE;IACpE,qJAAqJ;IACrJ,gHAAgH;CACjH,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAkBX,yEAAyE;AACzE,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,cAAc,EAC7B,QAAQ,GAAG,aAAa,EACxB,KAAK,EACL,KAAK,EACL,SAAS,GACS;IAClB,YAAY,EAAE,CAAC;IACf,MAAM,GAAG,GAAG,cAAc,CAAiB,KAAK,CAAC,CAAC;IAClD,uEAAuE;IACvE,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,sCAAsC,IAAI,IAAI,SAAS,IAAI,EAAE,EAAE,CAAC;IAClF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,8BACE,0BAAQ,gBAAgB,GAAS,EACjC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACpB,cAEE,SAAS,EAAC,UAAU,EACpB,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,eACf,MAAM,IAHX,CAAC,CAIN,CACH,CAAC,GACE,IACL,CACJ,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BACE,0BAAQ,gBAAgB,GAAS,EACjC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YAC9C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,aAAa,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,aAAa,EAC3D,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IANX,IAAI,CAAC,EAAE,CAOZ,CACH,CAAC,GACE,IACL,CACJ,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { CSSProperties } from 'react';
|
|
2
|
+
import type { SlyxUpTheme } from '../../theme';
|
|
3
|
+
export interface SubscriptionStatusProps {
|
|
4
|
+
status: string;
|
|
5
|
+
/** Per-component theme (accent, mode, radius…) — scoped, never global. */
|
|
6
|
+
theme?: SlyxUpTheme;
|
|
7
|
+
style?: CSSProperties;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
/** Tiny status pill — use anywhere you show plan state. */
|
|
11
|
+
export declare function SubscriptionStatus({ status, theme, style, className, }: SubscriptionStatusProps): import("react").JSX.Element;
|
|
12
|
+
//# sourceMappingURL=SubscriptionStatus.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SubscriptionStatus.d.ts","sourceRoot":"","sources":["../../../src/components/SubscriptionStatus/SubscriptionStatus.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,uBAAuB,+BAqBzB"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useScopedTheme } from '../../lib/scoped-theme';
|
|
4
|
+
import { injectStyles } from '../../styles';
|
|
5
|
+
function toneFor(status) {
|
|
6
|
+
switch (status) {
|
|
7
|
+
case 'active':
|
|
8
|
+
case 'trialing':
|
|
9
|
+
return { background: 'rgba(52,211,153,.12)', color: '#34d399' };
|
|
10
|
+
case 'past_due':
|
|
11
|
+
return { background: 'rgba(214,69,80,.1)', color: 'var(--slx-danger)' };
|
|
12
|
+
default:
|
|
13
|
+
return {
|
|
14
|
+
background: 'var(--slx-accent-soft)',
|
|
15
|
+
color: 'var(--slx-muted)',
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
/** Tiny status pill — use anywhere you show plan state. */
|
|
20
|
+
export function SubscriptionStatus({ status, theme, style, className, }) {
|
|
21
|
+
injectStyles();
|
|
22
|
+
const ref = useScopedTheme(theme);
|
|
23
|
+
const tone = toneFor(status);
|
|
24
|
+
return (_jsx("span", { ref: ref, className: className, style: {
|
|
25
|
+
fontSize: 11.5,
|
|
26
|
+
fontWeight: 600,
|
|
27
|
+
padding: '2px 10px',
|
|
28
|
+
borderRadius: 999,
|
|
29
|
+
background: tone.background,
|
|
30
|
+
color: tone.color,
|
|
31
|
+
...style,
|
|
32
|
+
}, children: status }));
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=SubscriptionStatus.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SubscriptionStatus.js","sourceRoot":"","sources":["../../../src/components/SubscriptionStatus/SubscriptionStatus.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAW5C,SAAS,OAAO,CAAC,MAAc;IAI7B,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,QAAQ,CAAC;QACd,KAAK,UAAU;YACb,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QAClE,KAAK,UAAU;YACb,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC;QAC1E;YACE,OAAO;gBACL,UAAU,EAAE,wBAAwB;gBACpC,KAAK,EAAE,kBAAkB;aAC1B,CAAC;IACN,CAAC;AACH,CAAC;AAED,2DAA2D;AAC3D,MAAM,UAAU,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,GACe;IACxB,YAAY,EAAE,CAAC;IACf,MAAM,GAAG,GAAG,cAAc,CAAkB,KAAK,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,GAAG;YACf,OAAO,EAAE,UAAU;YACnB,YAAY,EAAE,GAAG;YACjB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,GAAG,KAAK;SACT,YAEA,MAAM,GACF,CACR,CAAC;AACJ,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { injectStyles, CSS } from './styles';
|
|
2
2
|
export { applyTheme, getTheme, ACCENTS, FONTS, type SlyxUpTheme, type ThemeMode, type AccentName, type AccentDef, type FontDef, type CustomFont, type AuthLayout, type PrimaryStyle, type Density, } from './theme';
|
|
3
|
-
export { KeyholeMark, GoogleIcon, GitHubIcon, CheckIcon, EyeIcon, EyeOffIcon } from './icons';
|
|
3
|
+
export { KeyholeMark, GoogleIcon, GitHubIcon, CheckIcon, EyeIcon, EyeOffIcon, } from './icons';
|
|
4
4
|
export { SlyxUpProvider, type SlyxUpProviderProps, } from './react/provider/SlyxUpProvider';
|
|
5
5
|
export { AuthContext, useAuthContext, type AuthContextValue, } from './react/context/auth-context';
|
|
6
6
|
export { useAuth } from './react/hooks/useAuth';
|
|
@@ -9,11 +9,11 @@ export { useSession } from './react/hooks/useSession';
|
|
|
9
9
|
export { useTwoFactor } from './react/hooks/useTwoFactor';
|
|
10
10
|
export { useConnectedAccounts } from './react/hooks/useConnectedAccounts';
|
|
11
11
|
export { useTheme, type ThemePreference } from './react/hooks/useTheme';
|
|
12
|
-
export { useBilling, usePlans, useSubscription, useInvoices, useCheckout, } from './react/hooks/useBilling';
|
|
12
|
+
export { useBilling, usePlans, useSubscription, useSubscriptions, useInvoices, useCheckout, useTransaction, type CheckoutHookOptions, type TransactionStatus, } from './react/hooks/useBilling';
|
|
13
13
|
export { SignIn, type SignInProps } from './components/SignIn/SignIn';
|
|
14
|
-
export { PasswordField, type PasswordFieldProps } from './components/PasswordField';
|
|
14
|
+
export { PasswordField, type PasswordFieldProps, } from './components/PasswordField';
|
|
15
15
|
export { OtpInput, type OtpInputProps } from './components/OtpInput';
|
|
16
|
-
export { PasswordStrength, passwordScore, type PasswordStrengthProps, type StrengthScore } from './components/PasswordStrength';
|
|
16
|
+
export { PasswordStrength, passwordScore, type PasswordStrengthProps, type StrengthScore, } from './components/PasswordStrength';
|
|
17
17
|
export { CopyField, type CopyFieldProps } from './components/CopyField';
|
|
18
18
|
export { EmptyState, type EmptyStateProps } from './components/EmptyState';
|
|
19
19
|
export { SignUp, type SignUpProps } from './components/SignUp/SignUp';
|
|
@@ -23,8 +23,13 @@ export { ForgotPassword, type ForgotPasswordProps, } from './components/ForgotPa
|
|
|
23
23
|
export { ResetPassword, type ResetPasswordProps, } from './components/ResetPassword/ResetPassword';
|
|
24
24
|
export { EmailVerification, type EmailVerificationProps, } from './components/EmailVerification/EmailVerification';
|
|
25
25
|
export { SocialButtons, type SocialButtonsProps, } from './components/SocialButtons/SocialButtons';
|
|
26
|
-
export { BillingPortal, type BillingPortalProps, } from './components/BillingPortal/BillingPortal';
|
|
27
|
-
export { PricingTable, type PricingTableProps, } from './components/PricingTable/PricingTable';
|
|
26
|
+
export { BillingPortal, type BillingPortalProps, type PortalSubscription, } from './components/BillingPortal/BillingPortal';
|
|
27
|
+
export { PricingTable, type PricingTableProps, type PricingPlan, } from './components/PricingTable/PricingTable';
|
|
28
|
+
export { PlanCard, type PlanCardProps, type PlanCardPlan, } from './components/PlanCard/PlanCard';
|
|
29
|
+
export { CurrentPlanCard, type CurrentPlanCardProps, type CurrentPlanSubscription, type CurrentPlanCardLabels, } from './components/CurrentPlanCard/CurrentPlanCard';
|
|
30
|
+
export { InvoicesTable, type InvoicesTableProps, type InvoiceRow, } from './components/InvoicesTable/InvoicesTable';
|
|
31
|
+
export { SubscriptionStatus, type SubscriptionStatusProps, } from './components/SubscriptionStatus/SubscriptionStatus';
|
|
32
|
+
export { CheckoutButton, type CheckoutButtonProps, } from './components/CheckoutButton/CheckoutButton';
|
|
28
33
|
export { AdminPanel, type AdminPanelProps, } from './components/AdminPanel/AdminPanel';
|
|
29
34
|
export { initPaddle, openPaddleCheckout } from './lib/paddle';
|
|
30
35
|
/**
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EACL,UAAU,EACV,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,OAAO,EACZ,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,OAAO,GACb,MAAM,SAAS,CAAC;AACjB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { injectStyles, CSS } from './styles';
|
|
2
2
|
export { applyTheme, getTheme, ACCENTS, FONTS, } from './theme';
|
|
3
|
-
export { KeyholeMark, GoogleIcon, GitHubIcon, CheckIcon, EyeIcon, EyeOffIcon } from './icons';
|
|
3
|
+
export { KeyholeMark, GoogleIcon, GitHubIcon, CheckIcon, EyeIcon, EyeOffIcon, } from './icons';
|
|
4
4
|
// All React lives here now (2-SDK model) — provider, context, hooks.
|
|
5
5
|
export { SlyxUpProvider, } from './react/provider/SlyxUpProvider';
|
|
6
6
|
export { AuthContext, useAuthContext, } from './react/context/auth-context';
|
|
@@ -10,11 +10,11 @@ export { useSession } from './react/hooks/useSession';
|
|
|
10
10
|
export { useTwoFactor } from './react/hooks/useTwoFactor';
|
|
11
11
|
export { useConnectedAccounts } from './react/hooks/useConnectedAccounts';
|
|
12
12
|
export { useTheme } from './react/hooks/useTheme';
|
|
13
|
-
export { useBilling, usePlans, useSubscription, useInvoices, useCheckout, } from './react/hooks/useBilling';
|
|
13
|
+
export { useBilling, usePlans, useSubscription, useSubscriptions, useInvoices, useCheckout, useTransaction, } from './react/hooks/useBilling';
|
|
14
14
|
export { SignIn } from './components/SignIn/SignIn';
|
|
15
|
-
export { PasswordField } from './components/PasswordField';
|
|
15
|
+
export { PasswordField, } from './components/PasswordField';
|
|
16
16
|
export { OtpInput } from './components/OtpInput';
|
|
17
|
-
export { PasswordStrength, passwordScore } from './components/PasswordStrength';
|
|
17
|
+
export { PasswordStrength, passwordScore, } from './components/PasswordStrength';
|
|
18
18
|
export { CopyField } from './components/CopyField';
|
|
19
19
|
export { EmptyState } from './components/EmptyState';
|
|
20
20
|
export { SignUp } from './components/SignUp/SignUp';
|
|
@@ -26,6 +26,12 @@ export { EmailVerification, } from './components/EmailVerification/EmailVerifica
|
|
|
26
26
|
export { SocialButtons, } from './components/SocialButtons/SocialButtons';
|
|
27
27
|
export { BillingPortal, } from './components/BillingPortal/BillingPortal';
|
|
28
28
|
export { PricingTable, } from './components/PricingTable/PricingTable';
|
|
29
|
+
// Granular billing parts — compose your own layouts without the full portal.
|
|
30
|
+
export { PlanCard, } from './components/PlanCard/PlanCard';
|
|
31
|
+
export { CurrentPlanCard, } from './components/CurrentPlanCard/CurrentPlanCard';
|
|
32
|
+
export { InvoicesTable, } from './components/InvoicesTable/InvoicesTable';
|
|
33
|
+
export { SubscriptionStatus, } from './components/SubscriptionStatus/SubscriptionStatus';
|
|
34
|
+
export { CheckoutButton, } from './components/CheckoutButton/CheckoutButton';
|
|
29
35
|
export { AdminPanel, } from './components/AdminPanel/AdminPanel';
|
|
30
36
|
export { initPaddle, openPaddleCheckout } from './lib/paddle';
|
|
31
37
|
import { useEffect } from 'react';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EACL,UAAU,EACV,QAAQ,EACR,OAAO,EACP,KAAK,GAUN,MAAM,SAAS,CAAC;AACjB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EACL,UAAU,EACV,QAAQ,EACR,OAAO,EACP,KAAK,GAUN,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,EACP,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,qEAAqE;AACrE,OAAO,EACL,cAAc,GAEf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,WAAW,EACX,cAAc,GAEf,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAwB,MAAM,wBAAwB,CAAC;AACxE,OAAO,EACL,UAAU,EACV,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,cAAc,GAGf,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAoB,MAAM,4BAA4B,CAAC;AACtE,OAAO,EACL,aAAa,GAEd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAsB,MAAM,uBAAuB,CAAC;AACrE,OAAO,EACL,gBAAgB,EAChB,aAAa,GAGd,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,SAAS,EAAuB,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAwB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAoB,MAAM,4BAA4B,CAAC;AACtE,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,WAAW,GAEZ,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,cAAc,GAEf,MAAM,4CAA4C,CAAC;AACpD,OAAO,EACL,aAAa,GAEd,MAAM,0CAA0C,CAAC;AAClD,OAAO,EACL,iBAAiB,GAElB,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACL,aAAa,GAEd,MAAM,0CAA0C,CAAC;AAClD,OAAO,EACL,aAAa,GAGd,MAAM,0CAA0C,CAAC;AAClD,OAAO,EACL,YAAY,GAGb,MAAM,wCAAwC,CAAC;AAChD,6EAA6E;AAC7E,OAAO,EACL,QAAQ,GAGT,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,eAAe,GAIhB,MAAM,8CAA8C,CAAC;AACtD,OAAO,EACL,aAAa,GAGd,MAAM,0CAA0C,CAAC;AAClD,OAAO,EACL,kBAAkB,GAEnB,MAAM,oDAAoD,CAAC;AAC5D,OAAO,EACL,cAAc,GAEf,MAAM,4CAA4C,CAAC;AACpD,OAAO,EACL,UAAU,GAEX,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC;;;GAGG;AACH,MAAM,UAAU,YAAY;IAC1B,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,IAAI,CAAC;AACd,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type SlyxUpTheme } from '../theme';
|
|
2
|
+
/**
|
|
3
|
+
* Apply a SlyxUp theme to exactly one component subtree.
|
|
4
|
+
* Uses the same engine as global `applyTheme()` — accent, mode, radius,
|
|
5
|
+
* primary style, density — scoped to the returned ref's element (which gets
|
|
6
|
+
* `slyxup-root` automatically). No global leakage: siblings and the host
|
|
7
|
+
* app are untouched. Pass `theme` straight from component props.
|
|
8
|
+
*/
|
|
9
|
+
export declare function useScopedTheme<T extends HTMLElement = HTMLDivElement>(theme?: SlyxUpTheme): import("react").MutableRefObject<T | null>;
|
|
10
|
+
//# sourceMappingURL=scoped-theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scoped-theme.d.ts","sourceRoot":"","sources":["../../src/lib/scoped-theme.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,UAAU,CAAC;AAExD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EACnE,KAAK,CAAC,EAAE,WAAW,8CAQpB"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useEffect, useRef } from 'react';
|
|
3
|
+
import { applyTheme } from '../theme';
|
|
4
|
+
/**
|
|
5
|
+
* Apply a SlyxUp theme to exactly one component subtree.
|
|
6
|
+
* Uses the same engine as global `applyTheme()` — accent, mode, radius,
|
|
7
|
+
* primary style, density — scoped to the returned ref's element (which gets
|
|
8
|
+
* `slyxup-root` automatically). No global leakage: siblings and the host
|
|
9
|
+
* app are untouched. Pass `theme` straight from component props.
|
|
10
|
+
*/
|
|
11
|
+
export function useScopedTheme(theme) {
|
|
12
|
+
const ref = useRef(null);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (!theme || !ref.current)
|
|
15
|
+
return;
|
|
16
|
+
return applyTheme(theme, ref.current);
|
|
17
|
+
}, [theme]);
|
|
18
|
+
return ref;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=scoped-theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scoped-theme.js","sourceRoot":"","sources":["../../src/lib/scoped-theme.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAoB,UAAU,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAmB;IAEnB,MAAM,GAAG,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACnC,OAAO,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,GAAG,CAAC;AACb,CAAC"}
|
|
@@ -17,9 +17,42 @@ export declare function useInvoices(apiUrl?: string): {
|
|
|
17
17
|
invoices: Invoice[];
|
|
18
18
|
loading: boolean;
|
|
19
19
|
};
|
|
20
|
+
export interface CheckoutHookOptions {
|
|
21
|
+
/** Return target carried through payment → success page. */
|
|
22
|
+
origin?: string;
|
|
23
|
+
openIn?: '_blank' | '_self';
|
|
24
|
+
manualOpen?: boolean;
|
|
25
|
+
}
|
|
20
26
|
export declare function useCheckout(apiUrl?: string): {
|
|
21
|
-
checkout: (planId: string) => Promise<
|
|
27
|
+
checkout: (planId: string, opts?: CheckoutHookOptions) => Promise<import("@slyxup/core").CheckoutResult>;
|
|
22
28
|
loading: boolean;
|
|
23
29
|
error: string | null;
|
|
24
30
|
};
|
|
31
|
+
export interface TransactionStatus {
|
|
32
|
+
id: string;
|
|
33
|
+
status: string;
|
|
34
|
+
paid: boolean;
|
|
35
|
+
checkoutUrl: string | null;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* All non-canceled subscriptions for the session user, across projects.
|
|
39
|
+
* Prefer this over useSubscription when the UI doesn't know a single
|
|
40
|
+
* projectId upfront (multi-project platforms).
|
|
41
|
+
*/
|
|
42
|
+
export declare function useSubscriptions(apiUrl?: string): {
|
|
43
|
+
subscriptions: Subscription[];
|
|
44
|
+
loading: boolean;
|
|
45
|
+
error: string | null;
|
|
46
|
+
reload: () => Promise<void>;
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Verify a checkout transaction with Paddle — headless building block for
|
|
50
|
+
* custom success screens. `paid` is true only for completed transactions.
|
|
51
|
+
*/
|
|
52
|
+
export declare function useTransaction(transactionId: string | undefined, apiUrl?: string): {
|
|
53
|
+
transaction: TransactionStatus | null;
|
|
54
|
+
loading: boolean;
|
|
55
|
+
error: string | null;
|
|
56
|
+
reload: () => Promise<void>;
|
|
57
|
+
};
|
|
25
58
|
//# sourceMappingURL=useBilling.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBilling.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useBilling.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EACb,KAAK,OAAO,EACZ,KAAK,IAAI,EACT,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AAKtB,wBAAgB,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM;;EAMzC;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM;;;;EAsBtE;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,MAAM,CAAC,EAAE,MAAM;;;;;
|
|
1
|
+
{"version":3,"file":"useBilling.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useBilling.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EACb,KAAK,OAAO,EACZ,KAAK,IAAI,EACT,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AAKtB,wBAAgB,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM;;EAMzC;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM;;;;EAsBtE;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,MAAM,CAAC,EAAE,MAAM;;;;;EA6BhB;AAED,wBAAgB,WAAW,CAAC,MAAM,CAAC,EAAE,MAAM;;;EAc1C;AAED,MAAM,WAAW,mBAAmB;IAClC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,MAAM,CAAC,EAAE,MAAM;uBAMxB,MAAM,SAAS,mBAAmB;;;EAgBpD;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM;;;;;EAuB/C;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,MAAM,CAAC,EAAE,MAAM;;;;;EA8BhB"}
|