@burdenoff/fe-libs 2026.1021.9 → 2026.1021.11
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/dist/chrome/AppShellLayout.d.ts +14 -0
- package/dist/chrome/AppShellLayout.js +40 -34
- package/dist/shared/assistant/api.d.ts +2 -5
- package/dist/shared/assistant/api.js +21 -6
- package/dist/shared/assistant/conversation.d.ts +2 -5
- package/dist/shared/assistant/product.d.ts +2 -5
- package/dist/shared/assistant/turnProgress.d.ts +2 -5
- package/dist/shared/assistant/types.d.ts +10 -4
- package/dist/shared/assistant/usageReporting.d.ts +2 -4
- package/dist/shared/assistant/usageReporting.js +14 -2
- package/dist/shared/components/SkipToContent.d.ts +95 -0
- package/dist/shared/components/SkipToContent.js +61 -0
- package/dist/shared/components/index.d.ts +2 -0
- package/dist/shared/pages/AiPage.js +49 -48
- package/dist/shared-components.js +23 -22
- package/dist/shared.js +98 -97
- package/dist/ui/modern-landing.d.ts +4 -0
- package/dist/ui/modern-landing.js +129 -125
- package/dist/ui/native-welcome.js +56 -55
- package/package.json +1 -1
|
@@ -1,146 +1,150 @@
|
|
|
1
1
|
import { useAppShell as e } from "../shared/providers/shell/AppShellContext.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { MainLandmark as t, SkipToContentLink as n } from "../shared/components/SkipToContent.js";
|
|
3
|
+
import { ArrowRight as r, CheckCircle2 as i, Sparkles as a } from "lucide-react";
|
|
4
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
4
5
|
//#region src/ui/modern-landing.tsx
|
|
5
|
-
var
|
|
6
|
-
function
|
|
7
|
-
let { productName:
|
|
8
|
-
return /* @__PURE__ */
|
|
6
|
+
var c = "\n.boff-landing{background:var(--color-bg-canvas);color:var(--color-text-primary);min-height:100vh}\n.boff-landing .bl-glow{background:\n radial-gradient(60% 50% at 20% 0%, color-mix(in oklab, var(--color-accent-primary, var(--color-action-primary-bg)) 18%, transparent), transparent 70%),\n radial-gradient(50% 50% at 90% 10%, color-mix(in oklab, var(--color-accent-secondary, var(--color-action-primary-bg)) 12%, transparent), transparent 70%)}\n.boff-landing .bl-grid{background-image:\n linear-gradient(to right, color-mix(in oklab, var(--color-border-subtle, var(--color-border-default)) 55%, transparent) 1px, transparent 1px),\n linear-gradient(to bottom, color-mix(in oklab, var(--color-border-subtle, var(--color-border-default)) 55%, transparent) 1px, transparent 1px);\n background-size:44px 44px;\n mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);\n -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%)}\n.boff-landing .bl-gradient-text{\n background:linear-gradient(100deg, var(--color-action-primary-bg), color-mix(in oklab, var(--color-action-primary-bg) 55%, var(--color-text-primary)));\n -webkit-background-clip:text;background-clip:text;color:transparent}\n@keyframes bl-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}\n@keyframes bl-fade{from{opacity:0}to{opacity:1}}\n.boff-landing .bl-anim-up{animation:bl-fade-up .6s cubic-bezier(.16,1,.3,1) both}\n.boff-landing .bl-anim{animation:bl-fade .8s ease both}\n.boff-landing .bl-d1{animation-delay:.08s}.boff-landing .bl-d2{animation-delay:.16s}.boff-landing .bl-d3{animation-delay:.26s}\n.boff-landing .bl-card{transition:border-color .2s ease, box-shadow .2s ease}\n.boff-landing .bl-card:hover{border-color:var(--color-border-strong, var(--color-border-default));box-shadow:var(--shadow-elevation-1)}\n@media (prefers-reduced-motion: reduce){\n .boff-landing .bl-anim-up,.boff-landing .bl-anim{animation:none}\n}\n";
|
|
7
|
+
function l({ eyebrow: l, headlineLead: u, headlineAccent: d, subheadline: f, highlights: p, features: m = [], featuresTitle: h, featuresSubtitle: g, primaryCtaLabel: _ = "Get started", secondaryCtaLabel: v = "Sign in", onPrimaryCta: y, onSecondaryCta: b, closingTitle: x, closingSubtitle: S, footer: C }) {
|
|
8
|
+
let { productName: w } = e();
|
|
9
|
+
return /* @__PURE__ */ s("div", {
|
|
9
10
|
className: "boff-landing w-full overflow-x-hidden",
|
|
10
11
|
children: [
|
|
11
|
-
/* @__PURE__ */
|
|
12
|
-
/* @__PURE__ */
|
|
12
|
+
/* @__PURE__ */ o("style", { children: c }),
|
|
13
|
+
/* @__PURE__ */ o(n, {}),
|
|
14
|
+
/* @__PURE__ */ s("header", {
|
|
13
15
|
className: "relative z-10 mx-auto flex max-w-7xl items-center justify-between px-6 py-5",
|
|
14
|
-
children: [/* @__PURE__ */
|
|
16
|
+
children: [/* @__PURE__ */ o("span", {
|
|
15
17
|
className: "text-lg font-semibold tracking-tight text-text-primary",
|
|
16
|
-
children:
|
|
17
|
-
}),
|
|
18
|
+
children: w
|
|
19
|
+
}), b && /* @__PURE__ */ o("button", {
|
|
18
20
|
type: "button",
|
|
19
|
-
onClick:
|
|
21
|
+
onClick: b,
|
|
20
22
|
className: "rounded-lg px-4 py-2 text-sm font-medium text-text-secondary transition hover:text-text-primary",
|
|
21
|
-
children:
|
|
23
|
+
children: v
|
|
22
24
|
})]
|
|
23
25
|
}),
|
|
24
|
-
/* @__PURE__ */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
s && /* @__PURE__ */ a("div", {
|
|
39
|
-
className: "bl-anim mb-6 inline-flex items-center gap-2 rounded-full border border-border-subtle bg-bg-surface/60 px-4 py-1.5 text-sm font-medium text-text-secondary backdrop-blur",
|
|
40
|
-
children: [/* @__PURE__ */ i(r, { className: "size-3.5 text-action-primary-bg" }), s]
|
|
41
|
-
}),
|
|
42
|
-
/* @__PURE__ */ a("h1", {
|
|
43
|
-
className: "bl-anim-up mx-auto max-w-3xl text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl",
|
|
44
|
-
children: [c && /* @__PURE__ */ i("span", {
|
|
45
|
-
className: "block text-text-primary",
|
|
46
|
-
children: c
|
|
47
|
-
}), /* @__PURE__ */ i("span", {
|
|
48
|
-
className: "bl-gradient-text block",
|
|
49
|
-
children: l
|
|
50
|
-
})]
|
|
51
|
-
}),
|
|
52
|
-
u && /* @__PURE__ */ i("p", {
|
|
53
|
-
className: "bl-anim-up bl-d1 mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-text-secondary",
|
|
54
|
-
children: u
|
|
55
|
-
}),
|
|
56
|
-
/* @__PURE__ */ a("div", {
|
|
57
|
-
className: "bl-anim-up bl-d2 mt-9 flex flex-wrap items-center justify-center gap-3",
|
|
58
|
-
children: [_ && /* @__PURE__ */ a("button", {
|
|
59
|
-
type: "button",
|
|
60
|
-
onClick: _,
|
|
61
|
-
className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 text-sm font-semibold text-action-primary-text shadow-elevation-1 transition hover:bg-action-primary-bgHover active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-bg-canvas",
|
|
62
|
-
children: [h, /* @__PURE__ */ i(t, { className: "size-4" })]
|
|
63
|
-
}), v && /* @__PURE__ */ i("button", {
|
|
64
|
-
type: "button",
|
|
65
|
-
onClick: v,
|
|
66
|
-
className: "inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-6 py-3 text-sm font-semibold text-text-primary transition hover:bg-bg-sunken hover:border-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
|
|
67
|
-
children: g
|
|
68
|
-
})]
|
|
69
|
-
}),
|
|
70
|
-
d && d.length > 0 && /* @__PURE__ */ i("ul", {
|
|
71
|
-
className: "bl-anim bl-d3 mx-auto mt-9 flex max-w-2xl flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-text-secondary",
|
|
72
|
-
children: d.map((e) => /* @__PURE__ */ a("li", {
|
|
73
|
-
className: "flex items-center gap-2",
|
|
74
|
-
children: [/* @__PURE__ */ i(n, { className: "size-4 shrink-0 text-action-primary-bg" }), e]
|
|
75
|
-
}, e))
|
|
76
|
-
})
|
|
77
|
-
]
|
|
78
|
-
})
|
|
79
|
-
]
|
|
80
|
-
}),
|
|
81
|
-
f.length > 0 && /* @__PURE__ */ a("section", {
|
|
82
|
-
className: "relative mx-auto max-w-7xl px-6 py-16 sm:py-20",
|
|
83
|
-
children: [(p || m) && /* @__PURE__ */ a("div", {
|
|
84
|
-
className: "mx-auto mb-12 max-w-2xl text-center",
|
|
85
|
-
children: [p && /* @__PURE__ */ i("h2", {
|
|
86
|
-
className: "text-2xl font-bold tracking-tight text-text-primary sm:text-3xl",
|
|
87
|
-
children: p
|
|
88
|
-
}), m && /* @__PURE__ */ i("p", {
|
|
89
|
-
className: "mt-3 text-base text-text-secondary",
|
|
90
|
-
children: m
|
|
91
|
-
})]
|
|
92
|
-
}), /* @__PURE__ */ i("div", {
|
|
93
|
-
className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
|
|
94
|
-
children: f.map((e) => {
|
|
95
|
-
let t = e.icon;
|
|
96
|
-
return /* @__PURE__ */ a("div", {
|
|
97
|
-
className: "bl-card flex flex-col rounded-2xl border border-border-subtle bg-bg-surface p-6",
|
|
26
|
+
/* @__PURE__ */ s(t, { children: [
|
|
27
|
+
/* @__PURE__ */ s("section", {
|
|
28
|
+
className: "relative overflow-hidden",
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ o("div", {
|
|
31
|
+
"aria-hidden": "true",
|
|
32
|
+
className: "bl-glow pointer-events-none absolute inset-0"
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ o("div", {
|
|
35
|
+
"aria-hidden": "true",
|
|
36
|
+
className: "bl-grid pointer-events-none absolute inset-0 opacity-60"
|
|
37
|
+
}),
|
|
38
|
+
/* @__PURE__ */ s("div", {
|
|
39
|
+
className: "relative mx-auto max-w-4xl px-6 pb-20 pt-16 text-center sm:pt-24",
|
|
98
40
|
children: [
|
|
99
|
-
|
|
100
|
-
className: "mb-
|
|
101
|
-
children: /* @__PURE__ */
|
|
41
|
+
l && /* @__PURE__ */ s("div", {
|
|
42
|
+
className: "bl-anim mb-6 inline-flex items-center gap-2 rounded-full border border-border-subtle bg-bg-surface/60 px-4 py-1.5 text-sm font-medium text-text-secondary backdrop-blur",
|
|
43
|
+
children: [/* @__PURE__ */ o(a, { className: "size-3.5 text-action-primary-bg" }), l]
|
|
44
|
+
}),
|
|
45
|
+
/* @__PURE__ */ s("h1", {
|
|
46
|
+
className: "bl-anim-up mx-auto max-w-3xl text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl",
|
|
47
|
+
children: [u && /* @__PURE__ */ o("span", {
|
|
48
|
+
className: "block text-text-primary",
|
|
49
|
+
children: u
|
|
50
|
+
}), /* @__PURE__ */ o("span", {
|
|
51
|
+
className: "bl-gradient-text block",
|
|
52
|
+
children: d
|
|
53
|
+
})]
|
|
102
54
|
}),
|
|
103
|
-
/* @__PURE__ */
|
|
104
|
-
className: "text-
|
|
105
|
-
children:
|
|
55
|
+
f && /* @__PURE__ */ o("p", {
|
|
56
|
+
className: "bl-anim-up bl-d1 mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-text-secondary",
|
|
57
|
+
children: f
|
|
106
58
|
}),
|
|
107
|
-
/* @__PURE__ */
|
|
108
|
-
className: "mt-
|
|
109
|
-
children:
|
|
59
|
+
/* @__PURE__ */ s("div", {
|
|
60
|
+
className: "bl-anim-up bl-d2 mt-9 flex flex-wrap items-center justify-center gap-3",
|
|
61
|
+
children: [y && /* @__PURE__ */ s("button", {
|
|
62
|
+
type: "button",
|
|
63
|
+
onClick: y,
|
|
64
|
+
className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 text-sm font-semibold text-action-primary-text shadow-elevation-1 transition hover:bg-action-primary-bgHover active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-bg-canvas",
|
|
65
|
+
children: [_, /* @__PURE__ */ o(r, { className: "size-4" })]
|
|
66
|
+
}), b && /* @__PURE__ */ o("button", {
|
|
67
|
+
type: "button",
|
|
68
|
+
onClick: b,
|
|
69
|
+
className: "inline-flex items-center gap-2 rounded-lg border border-border-default bg-bg-surface px-6 py-3 text-sm font-semibold text-text-primary transition hover:bg-bg-sunken hover:border-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
|
|
70
|
+
children: v
|
|
71
|
+
})]
|
|
72
|
+
}),
|
|
73
|
+
p && p.length > 0 && /* @__PURE__ */ o("ul", {
|
|
74
|
+
className: "bl-anim bl-d3 mx-auto mt-9 flex max-w-2xl flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-text-secondary",
|
|
75
|
+
children: p.map((e) => /* @__PURE__ */ s("li", {
|
|
76
|
+
className: "flex items-center gap-2",
|
|
77
|
+
children: [/* @__PURE__ */ o(i, { className: "size-4 shrink-0 text-action-primary-bg" }), e]
|
|
78
|
+
}, e))
|
|
110
79
|
})
|
|
111
80
|
]
|
|
112
|
-
}, e.title);
|
|
113
|
-
})
|
|
114
|
-
})]
|
|
115
|
-
}),
|
|
116
|
-
(y || _) && /* @__PURE__ */ a("section", {
|
|
117
|
-
className: "relative overflow-hidden border-t border-border-subtle bg-bg-sunken",
|
|
118
|
-
children: [/* @__PURE__ */ i("div", {
|
|
119
|
-
"aria-hidden": "true",
|
|
120
|
-
className: "bl-glow pointer-events-none absolute inset-0 opacity-70"
|
|
121
|
-
}), /* @__PURE__ */ a("div", {
|
|
122
|
-
className: "relative mx-auto max-w-3xl px-6 py-16 text-center sm:py-20",
|
|
123
|
-
children: [
|
|
124
|
-
/* @__PURE__ */ i("h2", {
|
|
125
|
-
className: "text-2xl font-bold tracking-tight text-text-primary sm:text-3xl",
|
|
126
|
-
children: y ?? `Get started with ${S}`
|
|
127
|
-
}),
|
|
128
|
-
b && /* @__PURE__ */ i("p", {
|
|
129
|
-
className: "mx-auto mt-3 max-w-xl text-base text-text-secondary",
|
|
130
|
-
children: b
|
|
131
|
-
}),
|
|
132
|
-
_ && /* @__PURE__ */ a("button", {
|
|
133
|
-
type: "button",
|
|
134
|
-
onClick: _,
|
|
135
|
-
className: "mt-8 inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 text-sm font-semibold text-action-primary-text shadow-elevation-1 transition hover:bg-action-primary-bgHover active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-bg-canvas",
|
|
136
|
-
children: [h, /* @__PURE__ */ i(t, { className: "size-4" })]
|
|
137
81
|
})
|
|
138
82
|
]
|
|
139
|
-
})
|
|
140
|
-
|
|
141
|
-
|
|
83
|
+
}),
|
|
84
|
+
m.length > 0 && /* @__PURE__ */ s("section", {
|
|
85
|
+
className: "relative mx-auto max-w-7xl px-6 py-16 sm:py-20",
|
|
86
|
+
children: [(h || g) && /* @__PURE__ */ s("div", {
|
|
87
|
+
className: "mx-auto mb-12 max-w-2xl text-center",
|
|
88
|
+
children: [h && /* @__PURE__ */ o("h2", {
|
|
89
|
+
className: "text-2xl font-bold tracking-tight text-text-primary sm:text-3xl",
|
|
90
|
+
children: h
|
|
91
|
+
}), g && /* @__PURE__ */ o("p", {
|
|
92
|
+
className: "mt-3 text-base text-text-secondary",
|
|
93
|
+
children: g
|
|
94
|
+
})]
|
|
95
|
+
}), /* @__PURE__ */ o("div", {
|
|
96
|
+
className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
|
|
97
|
+
children: m.map((e) => {
|
|
98
|
+
let t = e.icon;
|
|
99
|
+
return /* @__PURE__ */ s("div", {
|
|
100
|
+
className: "bl-card flex flex-col rounded-2xl border border-border-subtle bg-bg-surface p-6",
|
|
101
|
+
children: [
|
|
102
|
+
t && /* @__PURE__ */ o("span", {
|
|
103
|
+
className: "mb-4 inline-flex size-11 items-center justify-center rounded-xl bg-bg-sunken text-action-primary-bg",
|
|
104
|
+
children: /* @__PURE__ */ o(t, { className: "size-5" })
|
|
105
|
+
}),
|
|
106
|
+
/* @__PURE__ */ o("h3", {
|
|
107
|
+
className: "text-base font-semibold text-text-primary",
|
|
108
|
+
children: e.title
|
|
109
|
+
}),
|
|
110
|
+
/* @__PURE__ */ o("p", {
|
|
111
|
+
className: "mt-2 text-sm leading-relaxed text-text-secondary",
|
|
112
|
+
children: e.description
|
|
113
|
+
})
|
|
114
|
+
]
|
|
115
|
+
}, e.title);
|
|
116
|
+
})
|
|
117
|
+
})]
|
|
118
|
+
}),
|
|
119
|
+
(x || y) && /* @__PURE__ */ s("section", {
|
|
120
|
+
className: "relative overflow-hidden border-t border-border-subtle bg-bg-sunken",
|
|
121
|
+
children: [/* @__PURE__ */ o("div", {
|
|
122
|
+
"aria-hidden": "true",
|
|
123
|
+
className: "bl-glow pointer-events-none absolute inset-0 opacity-70"
|
|
124
|
+
}), /* @__PURE__ */ s("div", {
|
|
125
|
+
className: "relative mx-auto max-w-3xl px-6 py-16 text-center sm:py-20",
|
|
126
|
+
children: [
|
|
127
|
+
/* @__PURE__ */ o("h2", {
|
|
128
|
+
className: "text-2xl font-bold tracking-tight text-text-primary sm:text-3xl",
|
|
129
|
+
children: x ?? `Get started with ${w}`
|
|
130
|
+
}),
|
|
131
|
+
S && /* @__PURE__ */ o("p", {
|
|
132
|
+
className: "mx-auto mt-3 max-w-xl text-base text-text-secondary",
|
|
133
|
+
children: S
|
|
134
|
+
}),
|
|
135
|
+
y && /* @__PURE__ */ s("button", {
|
|
136
|
+
type: "button",
|
|
137
|
+
onClick: y,
|
|
138
|
+
className: "mt-8 inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 text-sm font-semibold text-action-primary-text shadow-elevation-1 transition hover:bg-action-primary-bgHover active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-bg-canvas",
|
|
139
|
+
children: [_, /* @__PURE__ */ o(r, { className: "size-4" })]
|
|
140
|
+
})
|
|
141
|
+
]
|
|
142
|
+
})]
|
|
143
|
+
})
|
|
144
|
+
] }),
|
|
145
|
+
C
|
|
142
146
|
]
|
|
143
147
|
});
|
|
144
148
|
}
|
|
145
149
|
//#endregion
|
|
146
|
-
export {
|
|
150
|
+
export { l as ModernLanding };
|
|
@@ -3,20 +3,21 @@ import { useAppShell as t } from "../shared/providers/shell/AppShellContext.js";
|
|
|
3
3
|
import { cn as n } from "../shared-utils.js";
|
|
4
4
|
import { Button as r } from "./button.js";
|
|
5
5
|
import { nativeImpact as i, nativeOpenUrl as a } from "../shared/native/consumers.js";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
6
|
+
import { MainLandmark as o } from "../shared/components/SkipToContent.js";
|
|
7
|
+
import { SafeAreaView as s } from "../shared/native/SafeAreaView.js";
|
|
8
|
+
import { useCallback as c, useRef as l, useState as u } from "react";
|
|
9
|
+
import { jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
9
10
|
//#region src/ui/native-welcome.tsx
|
|
10
|
-
function
|
|
11
|
+
function p({ domain: e }) {
|
|
11
12
|
let t = (t) => () => {
|
|
12
13
|
a(`https://${e}/${t}`);
|
|
13
14
|
};
|
|
14
|
-
return /* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ f("p", {
|
|
15
16
|
className: "text-center text-xs leading-relaxed text-text-muted",
|
|
16
17
|
children: [
|
|
17
18
|
"By continuing you agree to our",
|
|
18
19
|
" ",
|
|
19
|
-
/* @__PURE__ */
|
|
20
|
+
/* @__PURE__ */ d("button", {
|
|
20
21
|
type: "button",
|
|
21
22
|
onClick: t("terms"),
|
|
22
23
|
className: "text-text-link underline underline-offset-2 hover:text-text-linkHover",
|
|
@@ -25,7 +26,7 @@ function f({ domain: e }) {
|
|
|
25
26
|
" ",
|
|
26
27
|
"and",
|
|
27
28
|
" ",
|
|
28
|
-
/* @__PURE__ */
|
|
29
|
+
/* @__PURE__ */ d("button", {
|
|
29
30
|
type: "button",
|
|
30
31
|
onClick: t("privacy"),
|
|
31
32
|
className: "text-text-link underline underline-offset-2 hover:text-text-linkHover",
|
|
@@ -35,113 +36,113 @@ function f({ domain: e }) {
|
|
|
35
36
|
]
|
|
36
37
|
});
|
|
37
38
|
}
|
|
38
|
-
function
|
|
39
|
-
let
|
|
40
|
-
let e =
|
|
39
|
+
function m({ productName: a, tagline: m, headline: h, features: g = [], primaryCtaLabel: _ = "Sign in", secondaryCtaLabel: v = "Create account", onSignIn: y, onCreateAccount: b, legal: x, logoSrc: S = "/icons/icon.svg", className: C }) {
|
|
40
|
+
let w = t(), T = a ?? w.productName, E = m ?? w.tagline, [D, O] = u(!1), [k, A] = u(0), j = l(null), M = e(), N = c(() => {
|
|
41
|
+
let e = j.current;
|
|
41
42
|
if (!e) return;
|
|
42
43
|
let t = e.clientWidth || 1;
|
|
43
|
-
|
|
44
|
-
}, []),
|
|
45
|
-
let t =
|
|
44
|
+
A(Math.round(e.scrollLeft / t));
|
|
45
|
+
}, []), P = c((e) => {
|
|
46
|
+
let t = j.current;
|
|
46
47
|
t && t.scrollTo({
|
|
47
48
|
left: e * t.clientWidth,
|
|
48
49
|
behavior: "smooth"
|
|
49
50
|
});
|
|
50
|
-
}, []),
|
|
51
|
+
}, []), F = (e) => () => {
|
|
51
52
|
e && (i("light"), e());
|
|
52
|
-
},
|
|
53
|
-
return /* @__PURE__ */
|
|
53
|
+
}, I = x === void 0 ? w.domain ? /* @__PURE__ */ d(p, { domain: w.domain }) : null : x;
|
|
54
|
+
return /* @__PURE__ */ d(s, {
|
|
54
55
|
"data-native-welcome": "",
|
|
55
|
-
className: n("flex min-h-[100dvh] flex-col bg-bg-canvas text-text-primary",
|
|
56
|
-
children: /* @__PURE__ */
|
|
57
|
-
className: n("flex flex-1 flex-col",
|
|
56
|
+
className: n("flex min-h-[100dvh] flex-col bg-bg-canvas text-text-primary", M && "items-center justify-center", C),
|
|
57
|
+
children: /* @__PURE__ */ f(o, {
|
|
58
|
+
className: n("flex flex-1 flex-col", M && "my-auto w-full max-w-[480px] rounded-card border border-border-subtle bg-bg-surface shadow-elevation-3"),
|
|
58
59
|
children: [
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
+
/* @__PURE__ */ f("header", {
|
|
60
61
|
"data-shell-chrome": "",
|
|
61
62
|
className: "flex flex-col items-center gap-4 px-6 pb-6 pt-12 text-center",
|
|
62
63
|
children: [
|
|
63
|
-
|
|
64
|
+
D ? /* @__PURE__ */ d("span", {
|
|
64
65
|
"aria-hidden": "true",
|
|
65
66
|
className: "flex size-16 items-center justify-center rounded-2xl bg-action-primary-bg text-2xl font-semibold text-action-primary-text shadow-elevation-1",
|
|
66
|
-
children:
|
|
67
|
-
}) : /* @__PURE__ */
|
|
68
|
-
src:
|
|
67
|
+
children: w.brandInitial
|
|
68
|
+
}) : /* @__PURE__ */ d("img", {
|
|
69
|
+
src: S,
|
|
69
70
|
alt: "",
|
|
70
71
|
"aria-hidden": "true",
|
|
71
|
-
onError: () =>
|
|
72
|
+
onError: () => O(!0),
|
|
72
73
|
className: "size-16 rounded-2xl object-contain"
|
|
73
74
|
}),
|
|
74
|
-
|
|
75
|
+
h && /* @__PURE__ */ d("p", {
|
|
75
76
|
className: "text-sm font-medium uppercase tracking-wide text-text-muted",
|
|
76
|
-
children:
|
|
77
|
+
children: h
|
|
77
78
|
}),
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
+
/* @__PURE__ */ d("h1", {
|
|
79
80
|
className: "text-3xl font-bold tracking-tight text-text-primary",
|
|
80
|
-
children:
|
|
81
|
+
children: T
|
|
81
82
|
}),
|
|
82
|
-
|
|
83
|
+
E && /* @__PURE__ */ d("p", {
|
|
83
84
|
className: "max-w-sm text-base leading-relaxed text-text-secondary",
|
|
84
|
-
children:
|
|
85
|
+
children: E
|
|
85
86
|
})
|
|
86
87
|
]
|
|
87
88
|
}),
|
|
88
|
-
|
|
89
|
+
g.length > 0 && /* @__PURE__ */ f("section", {
|
|
89
90
|
className: "flex flex-1 flex-col justify-center gap-4 py-2",
|
|
90
|
-
children: [/* @__PURE__ */
|
|
91
|
-
ref:
|
|
91
|
+
children: [/* @__PURE__ */ d("div", {
|
|
92
|
+
ref: j,
|
|
92
93
|
"data-native-welcome-carousel": "",
|
|
93
94
|
"data-swipe-ignore": "",
|
|
94
|
-
onScroll:
|
|
95
|
+
onScroll: N,
|
|
95
96
|
className: "flex snap-x snap-mandatory overflow-x-auto scroll-smooth",
|
|
96
|
-
children:
|
|
97
|
+
children: g.map((e) => {
|
|
97
98
|
let t = e.icon;
|
|
98
|
-
return /* @__PURE__ */
|
|
99
|
+
return /* @__PURE__ */ f("article", {
|
|
99
100
|
className: "flex w-full shrink-0 snap-center flex-col items-center gap-3 px-8 text-center",
|
|
100
101
|
children: [
|
|
101
|
-
t && /* @__PURE__ */
|
|
102
|
+
t && /* @__PURE__ */ d("span", {
|
|
102
103
|
className: "flex size-12 items-center justify-center rounded-xl bg-bg-accentSubtle text-action-primary-bg",
|
|
103
|
-
children: /* @__PURE__ */
|
|
104
|
+
children: /* @__PURE__ */ d(t, { className: "size-6" })
|
|
104
105
|
}),
|
|
105
|
-
/* @__PURE__ */
|
|
106
|
+
/* @__PURE__ */ d("h2", {
|
|
106
107
|
className: "text-lg font-semibold text-text-primary",
|
|
107
108
|
children: e.title
|
|
108
109
|
}),
|
|
109
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ d("p", {
|
|
110
111
|
className: "max-w-sm text-sm leading-relaxed text-text-secondary",
|
|
111
112
|
children: e.description
|
|
112
113
|
})
|
|
113
114
|
]
|
|
114
115
|
}, e.title);
|
|
115
116
|
})
|
|
116
|
-
}),
|
|
117
|
+
}), g.length > 1 && /* @__PURE__ */ d("div", {
|
|
117
118
|
className: "flex items-center justify-center gap-2",
|
|
118
|
-
children:
|
|
119
|
+
children: g.map((e, t) => /* @__PURE__ */ d("button", {
|
|
119
120
|
type: "button",
|
|
120
|
-
"aria-current": t ===
|
|
121
|
+
"aria-current": t === k ? "true" : void 0,
|
|
121
122
|
"aria-label": `Show highlight: ${e.title}`,
|
|
122
|
-
onClick: () =>
|
|
123
|
-
className: n("size-2 rounded-full transition-colors", t ===
|
|
123
|
+
onClick: () => P(t),
|
|
124
|
+
className: n("size-2 rounded-full transition-colors", t === k ? "bg-action-primary-bg" : "bg-border-strong")
|
|
124
125
|
}, e.title))
|
|
125
126
|
})]
|
|
126
127
|
}),
|
|
127
|
-
/* @__PURE__ */
|
|
128
|
+
/* @__PURE__ */ f("footer", {
|
|
128
129
|
"data-shell-chrome": "",
|
|
129
130
|
className: "mt-auto flex flex-col gap-3 border-t border-border-subtle bg-bg-canvas px-6 pb-6 pt-4",
|
|
130
131
|
children: [
|
|
131
|
-
/* @__PURE__ */
|
|
132
|
+
/* @__PURE__ */ d(r, {
|
|
132
133
|
size: "lg",
|
|
133
134
|
className: "w-full",
|
|
134
|
-
onClick:
|
|
135
|
-
children:
|
|
135
|
+
onClick: F(y),
|
|
136
|
+
children: _
|
|
136
137
|
}),
|
|
137
|
-
|
|
138
|
+
b && /* @__PURE__ */ d(r, {
|
|
138
139
|
size: "lg",
|
|
139
140
|
variant: "ghost",
|
|
140
141
|
className: "w-full",
|
|
141
|
-
onClick:
|
|
142
|
-
children:
|
|
142
|
+
onClick: F(b),
|
|
143
|
+
children: v
|
|
143
144
|
}),
|
|
144
|
-
|
|
145
|
+
I
|
|
145
146
|
]
|
|
146
147
|
})
|
|
147
148
|
]
|
|
@@ -149,4 +150,4 @@ function p({ productName: a, tagline: p, headline: m, features: h = [], primaryC
|
|
|
149
150
|
});
|
|
150
151
|
}
|
|
151
152
|
//#endregion
|
|
152
|
-
export {
|
|
153
|
+
export { m as NativeWelcome };
|