@opensite/ui 0.7.4 → 0.7.5
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/carousel-fullscreen-scroll-fx.cjs +576 -118
- package/dist/carousel-fullscreen-scroll-fx.d.cts +5 -1
- package/dist/carousel-fullscreen-scroll-fx.d.ts +5 -1
- package/dist/carousel-fullscreen-scroll-fx.js +577 -119
- package/dist/registry.cjs +165 -126
- package/dist/registry.js +165 -126
- package/package.json +1 -1
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var React5 = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var tailwindMerge = require('tailwind-merge');
|
|
7
7
|
var img = require('@page-speed/img');
|
|
8
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
8
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
10
|
|
|
10
11
|
function _interopNamespace(e) {
|
|
@@ -25,12 +26,430 @@ function _interopNamespace(e) {
|
|
|
25
26
|
return Object.freeze(n);
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
var
|
|
29
|
+
var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
|
|
29
30
|
|
|
30
31
|
// components/blocks/carousel/carousel-fullscreen-scroll-fx.tsx
|
|
31
32
|
function cn(...inputs) {
|
|
32
33
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
33
34
|
}
|
|
35
|
+
function normalizePhoneNumber(input) {
|
|
36
|
+
const trimmed = input.trim();
|
|
37
|
+
if (trimmed.toLowerCase().startsWith("tel:")) {
|
|
38
|
+
return trimmed;
|
|
39
|
+
}
|
|
40
|
+
const match = trimmed.match(/^[\s\+\-\(\)]*(\d[\d\s\-\(\)\.]*\d)[\s\-]*(x|ext\.?|extension)?[\s\-]*(\d+)?$/i);
|
|
41
|
+
if (match) {
|
|
42
|
+
const mainNumber = match[1].replace(/[\s\-\(\)\.]/g, "");
|
|
43
|
+
const extension = match[3];
|
|
44
|
+
const normalized = mainNumber.length >= 10 && !trimmed.startsWith("+") ? `+${mainNumber}` : mainNumber;
|
|
45
|
+
const withExtension = extension ? `${normalized};ext=${extension}` : normalized;
|
|
46
|
+
return `tel:${withExtension}`;
|
|
47
|
+
}
|
|
48
|
+
const cleaned = trimmed.replace(/[\s\-\(\)\.]/g, "");
|
|
49
|
+
return `tel:${cleaned}`;
|
|
50
|
+
}
|
|
51
|
+
function normalizeEmail(input) {
|
|
52
|
+
const trimmed = input.trim();
|
|
53
|
+
if (trimmed.toLowerCase().startsWith("mailto:")) {
|
|
54
|
+
return trimmed;
|
|
55
|
+
}
|
|
56
|
+
return `mailto:${trimmed}`;
|
|
57
|
+
}
|
|
58
|
+
function isEmail(input) {
|
|
59
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
60
|
+
return emailRegex.test(input.trim());
|
|
61
|
+
}
|
|
62
|
+
function isPhoneNumber(input) {
|
|
63
|
+
const trimmed = input.trim();
|
|
64
|
+
if (trimmed.toLowerCase().startsWith("tel:")) {
|
|
65
|
+
return true;
|
|
66
|
+
}
|
|
67
|
+
const phoneRegex = /^[\s\+\-\(\)]*\d[\d\s\-\(\)\.]*\d[\s\-]*(x|ext\.?|extension)?[\s\-]*\d*$/i;
|
|
68
|
+
return phoneRegex.test(trimmed);
|
|
69
|
+
}
|
|
70
|
+
function isInternalUrl(href) {
|
|
71
|
+
if (typeof window === "undefined") {
|
|
72
|
+
return href.startsWith("/") && !href.startsWith("//");
|
|
73
|
+
}
|
|
74
|
+
const trimmed = href.trim();
|
|
75
|
+
if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
|
|
76
|
+
return true;
|
|
77
|
+
}
|
|
78
|
+
try {
|
|
79
|
+
const url = new URL(trimmed, window.location.href);
|
|
80
|
+
const currentOrigin = window.location.origin;
|
|
81
|
+
const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
|
|
82
|
+
return normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin);
|
|
83
|
+
} catch {
|
|
84
|
+
return false;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
function toRelativePath(href) {
|
|
88
|
+
if (typeof window === "undefined") {
|
|
89
|
+
return href;
|
|
90
|
+
}
|
|
91
|
+
const trimmed = href.trim();
|
|
92
|
+
if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
|
|
93
|
+
return trimmed;
|
|
94
|
+
}
|
|
95
|
+
try {
|
|
96
|
+
const url = new URL(trimmed, window.location.href);
|
|
97
|
+
const currentOrigin = window.location.origin;
|
|
98
|
+
const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
|
|
99
|
+
if (normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin)) {
|
|
100
|
+
return url.pathname + url.search + url.hash;
|
|
101
|
+
}
|
|
102
|
+
} catch {
|
|
103
|
+
}
|
|
104
|
+
return trimmed;
|
|
105
|
+
}
|
|
106
|
+
function useNavigation({
|
|
107
|
+
href,
|
|
108
|
+
onClick
|
|
109
|
+
} = {}) {
|
|
110
|
+
const linkType = React5__namespace.useMemo(() => {
|
|
111
|
+
if (!href || href.trim() === "") {
|
|
112
|
+
return onClick ? "none" : "none";
|
|
113
|
+
}
|
|
114
|
+
const trimmed = href.trim();
|
|
115
|
+
if (trimmed.toLowerCase().startsWith("mailto:") || isEmail(trimmed)) {
|
|
116
|
+
return "mailto";
|
|
117
|
+
}
|
|
118
|
+
if (trimmed.toLowerCase().startsWith("tel:") || isPhoneNumber(trimmed)) {
|
|
119
|
+
return "tel";
|
|
120
|
+
}
|
|
121
|
+
if (isInternalUrl(trimmed)) {
|
|
122
|
+
return "internal";
|
|
123
|
+
}
|
|
124
|
+
try {
|
|
125
|
+
new URL(trimmed, typeof window !== "undefined" ? window.location.href : "http://localhost");
|
|
126
|
+
return "external";
|
|
127
|
+
} catch {
|
|
128
|
+
return "internal";
|
|
129
|
+
}
|
|
130
|
+
}, [href, onClick]);
|
|
131
|
+
const normalizedHref = React5__namespace.useMemo(() => {
|
|
132
|
+
if (!href || href.trim() === "") {
|
|
133
|
+
return void 0;
|
|
134
|
+
}
|
|
135
|
+
const trimmed = href.trim();
|
|
136
|
+
switch (linkType) {
|
|
137
|
+
case "tel":
|
|
138
|
+
return normalizePhoneNumber(trimmed);
|
|
139
|
+
case "mailto":
|
|
140
|
+
return normalizeEmail(trimmed);
|
|
141
|
+
case "internal":
|
|
142
|
+
return toRelativePath(trimmed);
|
|
143
|
+
case "external":
|
|
144
|
+
return trimmed;
|
|
145
|
+
default:
|
|
146
|
+
return trimmed;
|
|
147
|
+
}
|
|
148
|
+
}, [href, linkType]);
|
|
149
|
+
const target = React5__namespace.useMemo(() => {
|
|
150
|
+
switch (linkType) {
|
|
151
|
+
case "external":
|
|
152
|
+
return "_blank";
|
|
153
|
+
case "internal":
|
|
154
|
+
return "_self";
|
|
155
|
+
case "mailto":
|
|
156
|
+
case "tel":
|
|
157
|
+
return void 0;
|
|
158
|
+
default:
|
|
159
|
+
return void 0;
|
|
160
|
+
}
|
|
161
|
+
}, [linkType]);
|
|
162
|
+
const rel = React5__namespace.useMemo(() => {
|
|
163
|
+
if (linkType === "external") {
|
|
164
|
+
return "noopener noreferrer";
|
|
165
|
+
}
|
|
166
|
+
return void 0;
|
|
167
|
+
}, [linkType]);
|
|
168
|
+
const isExternal = linkType === "external";
|
|
169
|
+
const isInternal = linkType === "internal";
|
|
170
|
+
const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
|
|
171
|
+
const handleClick = React5__namespace.useCallback(
|
|
172
|
+
(event) => {
|
|
173
|
+
if (onClick) {
|
|
174
|
+
try {
|
|
175
|
+
onClick(event);
|
|
176
|
+
} catch (error) {
|
|
177
|
+
console.error("Error in user onClick handler:", error);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
if (event.defaultPrevented) {
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
if (shouldUseRouter && normalizedHref && event.button === 0 && // left-click only
|
|
184
|
+
!event.metaKey && !event.altKey && !event.ctrlKey && !event.shiftKey) {
|
|
185
|
+
if (typeof window !== "undefined") {
|
|
186
|
+
const handler = window.__opensiteNavigationHandler;
|
|
187
|
+
if (typeof handler === "function") {
|
|
188
|
+
try {
|
|
189
|
+
const handled = handler(normalizedHref, event.nativeEvent || event);
|
|
190
|
+
if (handled !== false) {
|
|
191
|
+
event.preventDefault();
|
|
192
|
+
}
|
|
193
|
+
} catch (error) {
|
|
194
|
+
console.error("Error in navigation handler:", error);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
[onClick, shouldUseRouter, normalizedHref]
|
|
201
|
+
);
|
|
202
|
+
return {
|
|
203
|
+
linkType,
|
|
204
|
+
normalizedHref,
|
|
205
|
+
target,
|
|
206
|
+
rel,
|
|
207
|
+
isExternal,
|
|
208
|
+
isInternal,
|
|
209
|
+
shouldUseRouter,
|
|
210
|
+
handleClick
|
|
211
|
+
};
|
|
212
|
+
}
|
|
213
|
+
var baseStyles = [
|
|
214
|
+
// Layout
|
|
215
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
|
|
216
|
+
// Typography - using CSS variables with sensible defaults
|
|
217
|
+
"font-[var(--button-font-family,inherit)]",
|
|
218
|
+
"font-[var(--button-font-weight,500)]",
|
|
219
|
+
"tracking-[var(--button-letter-spacing,0)]",
|
|
220
|
+
"leading-[var(--button-line-height,1.25)]",
|
|
221
|
+
"[text-transform:var(--button-text-transform,none)]",
|
|
222
|
+
"text-sm",
|
|
223
|
+
// Border radius
|
|
224
|
+
"rounded-[var(--button-radius,var(--radius,0.375rem))]",
|
|
225
|
+
// Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
|
|
226
|
+
"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
|
|
227
|
+
// Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
|
|
228
|
+
"[box-shadow:var(--button-shadow,none)]",
|
|
229
|
+
"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
|
|
230
|
+
// Disabled state
|
|
231
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
232
|
+
// SVG handling
|
|
233
|
+
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
|
|
234
|
+
// Focus styles
|
|
235
|
+
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
236
|
+
// Invalid state
|
|
237
|
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
|
|
238
|
+
].join(" ");
|
|
239
|
+
var buttonVariants = classVarianceAuthority.cva(baseStyles, {
|
|
240
|
+
variants: {
|
|
241
|
+
variant: {
|
|
242
|
+
// Default (Primary) variant - full customization
|
|
243
|
+
default: [
|
|
244
|
+
"bg-[var(--button-default-bg,hsl(var(--primary)))]",
|
|
245
|
+
"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
|
|
246
|
+
"border-[length:var(--button-default-border-width,0px)]",
|
|
247
|
+
"border-[color:var(--button-default-border,transparent)]",
|
|
248
|
+
"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
|
|
249
|
+
"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
|
|
250
|
+
"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
|
|
251
|
+
"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
|
|
252
|
+
"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
|
|
253
|
+
].join(" "),
|
|
254
|
+
// Destructive variant - full customization
|
|
255
|
+
destructive: [
|
|
256
|
+
"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
|
|
257
|
+
"text-[var(--button-destructive-fg,white)]",
|
|
258
|
+
"border-[length:var(--button-destructive-border-width,0px)]",
|
|
259
|
+
"border-[color:var(--button-destructive-border,transparent)]",
|
|
260
|
+
"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
|
|
261
|
+
"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
|
|
262
|
+
"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
|
|
263
|
+
"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
|
|
264
|
+
"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
|
|
265
|
+
"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
266
|
+
"dark:bg-destructive/60"
|
|
267
|
+
].join(" "),
|
|
268
|
+
// Outline variant - full customization with proper border handling
|
|
269
|
+
outline: [
|
|
270
|
+
"bg-[var(--button-outline-bg,hsl(var(--background)))]",
|
|
271
|
+
"text-[var(--button-outline-fg,inherit)]",
|
|
272
|
+
"border-[length:var(--button-outline-border-width,1px)]",
|
|
273
|
+
"border-[color:var(--button-outline-border,hsl(var(--border)))]",
|
|
274
|
+
"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
|
|
275
|
+
"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
|
|
276
|
+
"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
|
|
277
|
+
"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
|
|
278
|
+
"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
|
|
279
|
+
"dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
|
280
|
+
].join(" "),
|
|
281
|
+
// Secondary variant - full customization
|
|
282
|
+
secondary: [
|
|
283
|
+
"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
|
|
284
|
+
"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
|
|
285
|
+
"border-[length:var(--button-secondary-border-width,0px)]",
|
|
286
|
+
"border-[color:var(--button-secondary-border,transparent)]",
|
|
287
|
+
"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
|
|
288
|
+
"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
|
|
289
|
+
"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
|
|
290
|
+
"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
|
|
291
|
+
"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
|
|
292
|
+
].join(" "),
|
|
293
|
+
// Ghost variant - full customization
|
|
294
|
+
ghost: [
|
|
295
|
+
"bg-[var(--button-ghost-bg,transparent)]",
|
|
296
|
+
"text-[var(--button-ghost-fg,inherit)]",
|
|
297
|
+
"border-[length:var(--button-ghost-border-width,0px)]",
|
|
298
|
+
"border-[color:var(--button-ghost-border,transparent)]",
|
|
299
|
+
"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
|
|
300
|
+
"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
|
|
301
|
+
"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
|
|
302
|
+
"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
|
|
303
|
+
"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
|
|
304
|
+
"dark:hover:bg-accent/50"
|
|
305
|
+
].join(" "),
|
|
306
|
+
// Link variant - full customization
|
|
307
|
+
link: [
|
|
308
|
+
"bg-[var(--button-link-bg,transparent)]",
|
|
309
|
+
"text-[var(--button-link-fg,hsl(var(--primary)))]",
|
|
310
|
+
"border-[length:var(--button-link-border-width,0px)]",
|
|
311
|
+
"border-[color:var(--button-link-border,transparent)]",
|
|
312
|
+
"[box-shadow:var(--button-link-shadow,none)]",
|
|
313
|
+
"hover:bg-[var(--button-link-hover-bg,transparent)]",
|
|
314
|
+
"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
|
|
315
|
+
"hover:[box-shadow:var(--button-link-shadow-hover,none)]",
|
|
316
|
+
"underline-offset-4 hover:underline"
|
|
317
|
+
].join(" ")
|
|
318
|
+
},
|
|
319
|
+
size: {
|
|
320
|
+
default: [
|
|
321
|
+
"h-[var(--button-height-md,2.25rem)]",
|
|
322
|
+
"px-[var(--button-padding-x-md,1rem)]",
|
|
323
|
+
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
324
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
325
|
+
].join(" "),
|
|
326
|
+
sm: [
|
|
327
|
+
"h-[var(--button-height-sm,2rem)]",
|
|
328
|
+
"px-[var(--button-padding-x-sm,0.75rem)]",
|
|
329
|
+
"py-[var(--button-padding-y-sm,0.25rem)]",
|
|
330
|
+
"gap-1.5",
|
|
331
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
|
|
332
|
+
].join(" "),
|
|
333
|
+
md: [
|
|
334
|
+
"h-[var(--button-height-md,2.25rem)]",
|
|
335
|
+
"px-[var(--button-padding-x-md,1rem)]",
|
|
336
|
+
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
337
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
338
|
+
].join(" "),
|
|
339
|
+
lg: [
|
|
340
|
+
"h-[var(--button-height-lg,2.5rem)]",
|
|
341
|
+
"px-[var(--button-padding-x-lg,1.5rem)]",
|
|
342
|
+
"py-[var(--button-padding-y-lg,0.5rem)]",
|
|
343
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
|
|
344
|
+
].join(" "),
|
|
345
|
+
icon: "size-[var(--button-height-md,2.25rem)]",
|
|
346
|
+
"icon-sm": "size-[var(--button-height-sm,2rem)]",
|
|
347
|
+
"icon-lg": "size-[var(--button-height-lg,2.5rem)]"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
defaultVariants: {
|
|
351
|
+
variant: "default",
|
|
352
|
+
size: "default"
|
|
353
|
+
}
|
|
354
|
+
});
|
|
355
|
+
var Pressable = React5__namespace.forwardRef(
|
|
356
|
+
({
|
|
357
|
+
children,
|
|
358
|
+
className,
|
|
359
|
+
href,
|
|
360
|
+
onClick,
|
|
361
|
+
variant,
|
|
362
|
+
size,
|
|
363
|
+
asButton = false,
|
|
364
|
+
fallbackComponentType = "span",
|
|
365
|
+
componentType,
|
|
366
|
+
"aria-label": ariaLabel,
|
|
367
|
+
"aria-describedby": ariaDescribedby,
|
|
368
|
+
id,
|
|
369
|
+
...props
|
|
370
|
+
}, ref) => {
|
|
371
|
+
const navigation = useNavigation({ href, onClick });
|
|
372
|
+
const {
|
|
373
|
+
normalizedHref,
|
|
374
|
+
target,
|
|
375
|
+
rel,
|
|
376
|
+
linkType,
|
|
377
|
+
isInternal,
|
|
378
|
+
handleClick
|
|
379
|
+
} = navigation;
|
|
380
|
+
const shouldRenderLink = normalizedHref && linkType !== "none";
|
|
381
|
+
const shouldRenderButton = !shouldRenderLink && onClick;
|
|
382
|
+
const effectiveComponentType = componentType || (shouldRenderLink ? "a" : shouldRenderButton ? "button" : fallbackComponentType);
|
|
383
|
+
const finalComponentType = isInternal && shouldRenderLink ? "a" : effectiveComponentType;
|
|
384
|
+
const shouldApplyButtonStyles = asButton || variant || size;
|
|
385
|
+
const combinedClassName = cn(
|
|
386
|
+
shouldApplyButtonStyles && buttonVariants({ variant, size }),
|
|
387
|
+
className
|
|
388
|
+
);
|
|
389
|
+
const dataProps = Object.fromEntries(
|
|
390
|
+
Object.entries(props).filter(([key]) => key.startsWith("data-"))
|
|
391
|
+
);
|
|
392
|
+
const buttonDataAttributes = shouldApplyButtonStyles ? {
|
|
393
|
+
"data-slot": "button",
|
|
394
|
+
"data-variant": variant ?? "default",
|
|
395
|
+
"data-size": size ?? "default"
|
|
396
|
+
} : {};
|
|
397
|
+
const commonProps = {
|
|
398
|
+
className: combinedClassName,
|
|
399
|
+
onClick: handleClick,
|
|
400
|
+
"aria-label": ariaLabel,
|
|
401
|
+
"aria-describedby": ariaDescribedby,
|
|
402
|
+
id,
|
|
403
|
+
...dataProps,
|
|
404
|
+
...buttonDataAttributes
|
|
405
|
+
};
|
|
406
|
+
if (finalComponentType === "a" && shouldRenderLink) {
|
|
407
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
408
|
+
"a",
|
|
409
|
+
{
|
|
410
|
+
ref,
|
|
411
|
+
href: normalizedHref,
|
|
412
|
+
target,
|
|
413
|
+
rel,
|
|
414
|
+
...commonProps,
|
|
415
|
+
...props,
|
|
416
|
+
children
|
|
417
|
+
}
|
|
418
|
+
);
|
|
419
|
+
}
|
|
420
|
+
if (finalComponentType === "button") {
|
|
421
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
422
|
+
"button",
|
|
423
|
+
{
|
|
424
|
+
ref,
|
|
425
|
+
type: props.type || "button",
|
|
426
|
+
...commonProps,
|
|
427
|
+
...props,
|
|
428
|
+
children
|
|
429
|
+
}
|
|
430
|
+
);
|
|
431
|
+
}
|
|
432
|
+
if (finalComponentType === "div") {
|
|
433
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
434
|
+
"div",
|
|
435
|
+
{
|
|
436
|
+
ref,
|
|
437
|
+
...commonProps,
|
|
438
|
+
children
|
|
439
|
+
}
|
|
440
|
+
);
|
|
441
|
+
}
|
|
442
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
443
|
+
"span",
|
|
444
|
+
{
|
|
445
|
+
ref,
|
|
446
|
+
...commonProps,
|
|
447
|
+
children
|
|
448
|
+
}
|
|
449
|
+
);
|
|
450
|
+
}
|
|
451
|
+
);
|
|
452
|
+
Pressable.displayName = "Pressable";
|
|
34
453
|
var maxWidthStyles = {
|
|
35
454
|
sm: "max-w-screen-sm",
|
|
36
455
|
md: "max-w-screen-md",
|
|
@@ -40,7 +459,7 @@ var maxWidthStyles = {
|
|
|
40
459
|
"4xl": "max-w-[1536px]",
|
|
41
460
|
full: "max-w-full"
|
|
42
461
|
};
|
|
43
|
-
var Container =
|
|
462
|
+
var Container = React5__namespace.default.forwardRef(
|
|
44
463
|
({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
|
|
45
464
|
const Component = as;
|
|
46
465
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -345,7 +764,7 @@ var spacingStyles = {
|
|
|
345
764
|
};
|
|
346
765
|
var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
|
|
347
766
|
var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
|
|
348
|
-
var Section =
|
|
767
|
+
var Section = React5__namespace.default.forwardRef(
|
|
349
768
|
({
|
|
350
769
|
id,
|
|
351
770
|
title,
|
|
@@ -425,42 +844,45 @@ function CarouselFullscreenScrollFx({
|
|
|
425
844
|
pattern = "diagonalCrossBasic",
|
|
426
845
|
patternOpacity = 0.033
|
|
427
846
|
}) {
|
|
428
|
-
const containerRef =
|
|
429
|
-
const
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
setActiveIndex(index);
|
|
440
|
-
}
|
|
441
|
-
});
|
|
442
|
-
},
|
|
443
|
-
{ threshold: 0.5 }
|
|
444
|
-
);
|
|
445
|
-
observer.observe(element);
|
|
446
|
-
observers.push(observer);
|
|
447
|
-
}
|
|
448
|
-
});
|
|
449
|
-
return () => {
|
|
450
|
-
observers.forEach((observer) => observer.disconnect());
|
|
847
|
+
const containerRef = React5__namespace.useRef(null);
|
|
848
|
+
const scrollContainerRef = React5__namespace.useRef(null);
|
|
849
|
+
const [activeIndex, setActiveIndex] = React5__namespace.useState(0);
|
|
850
|
+
React5__namespace.useEffect(() => {
|
|
851
|
+
const scrollContainer = scrollContainerRef.current;
|
|
852
|
+
if (!scrollContainer || !slides?.length) return;
|
|
853
|
+
const handleScroll = () => {
|
|
854
|
+
const scrollLeft = scrollContainer.scrollLeft;
|
|
855
|
+
const slideWidth = scrollContainer.clientWidth;
|
|
856
|
+
const newIndex = Math.round(scrollLeft / slideWidth);
|
|
857
|
+
setActiveIndex(newIndex);
|
|
451
858
|
};
|
|
859
|
+
scrollContainer.addEventListener("scroll", handleScroll);
|
|
860
|
+
return () => scrollContainer.removeEventListener("scroll", handleScroll);
|
|
452
861
|
}, [slides]);
|
|
862
|
+
const scrollToSlide = React5__namespace.useCallback((index) => {
|
|
863
|
+
const scrollContainer = scrollContainerRef.current;
|
|
864
|
+
if (!scrollContainer) return;
|
|
865
|
+
const slideWidth = scrollContainer.clientWidth;
|
|
866
|
+
if (typeof scrollContainer.scrollTo === "function") {
|
|
867
|
+
scrollContainer.scrollTo({
|
|
868
|
+
left: slideWidth * index,
|
|
869
|
+
behavior: "smooth"
|
|
870
|
+
});
|
|
871
|
+
} else {
|
|
872
|
+
scrollContainer.scrollLeft = slideWidth * index;
|
|
873
|
+
}
|
|
874
|
+
}, []);
|
|
453
875
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
454
876
|
Section,
|
|
455
877
|
{
|
|
456
878
|
ref: containerRef,
|
|
457
879
|
background,
|
|
458
880
|
spacing,
|
|
459
|
-
className: cn(className),
|
|
881
|
+
className: cn("relative overflow-hidden", className),
|
|
460
882
|
pattern,
|
|
461
883
|
patternOpacity,
|
|
462
884
|
containerMaxWidth,
|
|
463
|
-
containerClassName,
|
|
885
|
+
containerClassName: "p-0",
|
|
464
886
|
children: [
|
|
465
887
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
466
888
|
"div",
|
|
@@ -472,10 +894,7 @@ function CarouselFullscreenScrollFx({
|
|
|
472
894
|
children: slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
473
895
|
"button",
|
|
474
896
|
{
|
|
475
|
-
onClick: () =>
|
|
476
|
-
const element = document.getElementById(`fullscreen-${slide.id}`);
|
|
477
|
-
element?.scrollIntoView({ behavior: "smooth" });
|
|
478
|
-
},
|
|
897
|
+
onClick: () => scrollToSlide(index),
|
|
479
898
|
className: cn(
|
|
480
899
|
"h-3 w-3 rounded-full border-2 transition-all",
|
|
481
900
|
activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
|
|
@@ -486,111 +905,150 @@ function CarouselFullscreenScrollFx({
|
|
|
486
905
|
))
|
|
487
906
|
}
|
|
488
907
|
),
|
|
489
|
-
|
|
908
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
490
909
|
"div",
|
|
491
910
|
{
|
|
492
|
-
|
|
493
|
-
className:
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
className:
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
911
|
+
ref: scrollContainerRef,
|
|
912
|
+
className: "flex h-screen snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth",
|
|
913
|
+
style: { scrollbarWidth: "none", msOverflowStyle: "none" },
|
|
914
|
+
children: slidesSlot ? slidesSlot : slides?.map((slide, index) => {
|
|
915
|
+
const renderActions = React5__namespace.useMemo(() => {
|
|
916
|
+
if (!slide.actions || slide.actions.length === 0) return null;
|
|
917
|
+
return slide.actions.map((action, actionIndex) => {
|
|
918
|
+
const {
|
|
919
|
+
label,
|
|
920
|
+
icon,
|
|
921
|
+
iconAfter,
|
|
922
|
+
children,
|
|
923
|
+
className: actionClassName,
|
|
924
|
+
asButton,
|
|
925
|
+
...pressableProps
|
|
926
|
+
} = action;
|
|
927
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
928
|
+
Pressable,
|
|
929
|
+
{
|
|
930
|
+
asButton: asButton ?? true,
|
|
931
|
+
className: actionClassName,
|
|
932
|
+
...pressableProps,
|
|
933
|
+
children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
934
|
+
icon,
|
|
935
|
+
label,
|
|
936
|
+
iconAfter
|
|
937
|
+
] })
|
|
938
|
+
},
|
|
939
|
+
actionIndex
|
|
940
|
+
);
|
|
941
|
+
});
|
|
942
|
+
}, [slide.actions]);
|
|
943
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
522
944
|
"div",
|
|
523
945
|
{
|
|
946
|
+
id: `fullscreen-${slide.id}`,
|
|
524
947
|
className: cn(
|
|
525
|
-
"relative
|
|
526
|
-
|
|
948
|
+
"relative flex h-screen min-w-full snap-start items-center justify-center overflow-hidden",
|
|
949
|
+
slide.className
|
|
527
950
|
),
|
|
528
951
|
children: [
|
|
529
|
-
|
|
530
|
-
|
|
952
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
|
|
953
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
954
|
+
img.Img,
|
|
955
|
+
{
|
|
956
|
+
src: slide.image,
|
|
957
|
+
alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
|
|
958
|
+
className: cn(
|
|
959
|
+
"h-full w-full object-cover",
|
|
960
|
+
slide.imageClassName
|
|
961
|
+
),
|
|
962
|
+
optixFlowConfig
|
|
963
|
+
}
|
|
964
|
+
),
|
|
965
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
966
|
+
"div",
|
|
967
|
+
{
|
|
968
|
+
className: "absolute inset-0",
|
|
969
|
+
style: {
|
|
970
|
+
backgroundColor: slide.overlayColor || "rgba(0, 0, 0, 0.5)"
|
|
971
|
+
}
|
|
972
|
+
}
|
|
973
|
+
)
|
|
974
|
+
] }),
|
|
975
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
976
|
+
"div",
|
|
531
977
|
{
|
|
532
978
|
className: cn(
|
|
533
|
-
"
|
|
534
|
-
|
|
979
|
+
"relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
|
|
980
|
+
contentClassName
|
|
535
981
|
),
|
|
536
|
-
children:
|
|
982
|
+
children: [
|
|
983
|
+
slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
984
|
+
"p",
|
|
985
|
+
{
|
|
986
|
+
className: cn(
|
|
987
|
+
"mb-4 text-sm font-medium uppercase tracking-widest text-white/70",
|
|
988
|
+
subtitleClassName
|
|
989
|
+
),
|
|
990
|
+
children: slide.subtitle
|
|
991
|
+
}
|
|
992
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: slide.subtitle })),
|
|
993
|
+
slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
994
|
+
"h2",
|
|
995
|
+
{
|
|
996
|
+
className: cn(
|
|
997
|
+
"mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
|
|
998
|
+
titleClassName
|
|
999
|
+
),
|
|
1000
|
+
children: slide.title
|
|
1001
|
+
}
|
|
1002
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: slide.title })),
|
|
1003
|
+
slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1004
|
+
"p",
|
|
1005
|
+
{
|
|
1006
|
+
className: cn(
|
|
1007
|
+
"mx-auto text-lg text-white/80 md:text-xl text-balance",
|
|
1008
|
+
descriptionClassName
|
|
1009
|
+
),
|
|
1010
|
+
children: slide.description
|
|
1011
|
+
}
|
|
1012
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: slide.description })),
|
|
1013
|
+
renderActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: renderActions })
|
|
1014
|
+
]
|
|
537
1015
|
}
|
|
538
|
-
)
|
|
539
|
-
|
|
540
|
-
"
|
|
1016
|
+
),
|
|
1017
|
+
index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1018
|
+
"div",
|
|
541
1019
|
{
|
|
542
1020
|
className: cn(
|
|
543
|
-
"
|
|
544
|
-
|
|
1021
|
+
"absolute bottom-8 left-1/2 -translate-x-1/2",
|
|
1022
|
+
scrollIndicatorClassName
|
|
545
1023
|
),
|
|
546
|
-
children:
|
|
1024
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
1025
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
|
|
1026
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
|
|
1027
|
+
] })
|
|
547
1028
|
}
|
|
548
|
-
)
|
|
549
|
-
|
|
550
|
-
"
|
|
1029
|
+
),
|
|
1030
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1031
|
+
"div",
|
|
551
1032
|
{
|
|
552
1033
|
className: cn(
|
|
553
|
-
"
|
|
554
|
-
|
|
1034
|
+
"absolute bottom-8 right-8 text-sm text-white/50",
|
|
1035
|
+
counterClassName
|
|
555
1036
|
),
|
|
556
|
-
children:
|
|
1037
|
+
children: [
|
|
1038
|
+
String(index + 1).padStart(2, "0"),
|
|
1039
|
+
" /",
|
|
1040
|
+
" ",
|
|
1041
|
+
String(slides?.length ?? 0).padStart(2, "0")
|
|
1042
|
+
]
|
|
557
1043
|
}
|
|
558
|
-
)
|
|
559
|
-
]
|
|
560
|
-
}
|
|
561
|
-
),
|
|
562
|
-
index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
563
|
-
"div",
|
|
564
|
-
{
|
|
565
|
-
className: cn(
|
|
566
|
-
"absolute bottom-8 left-1/2 -translate-x-1/2",
|
|
567
|
-
scrollIndicatorClassName
|
|
568
|
-
),
|
|
569
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
570
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
|
|
571
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
|
|
572
|
-
] })
|
|
573
|
-
}
|
|
574
|
-
),
|
|
575
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
576
|
-
"div",
|
|
577
|
-
{
|
|
578
|
-
className: cn(
|
|
579
|
-
"absolute bottom-8 right-8 text-sm text-white/50",
|
|
580
|
-
counterClassName
|
|
581
|
-
),
|
|
582
|
-
children: [
|
|
583
|
-
String(index + 1).padStart(2, "0"),
|
|
584
|
-
" /",
|
|
585
|
-
" ",
|
|
586
|
-
String(slides?.length ?? 0).padStart(2, "0")
|
|
1044
|
+
)
|
|
587
1045
|
]
|
|
588
|
-
}
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
)
|
|
1046
|
+
},
|
|
1047
|
+
slide.id
|
|
1048
|
+
);
|
|
1049
|
+
})
|
|
1050
|
+
}
|
|
1051
|
+
)
|
|
594
1052
|
]
|
|
595
1053
|
}
|
|
596
1054
|
);
|