@wealthx/shadcn 1.5.12 → 1.5.13
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/.turbo/turbo-build.log +74 -74
- package/CHANGELOG.md +6 -0
- package/dist/{chunk-CPM6P63C.mjs → chunk-BF5FKUF6.mjs} +53 -24
- package/dist/chunk-KICT4VQL.mjs +508 -0
- package/dist/chunk-V23CBULF.mjs +432 -0
- package/dist/components/ui/appointment-calendar-view.js +177 -176
- package/dist/components/ui/appointment-calendar-view.mjs +1 -1
- package/dist/components/ui/bank-statement-generate-dialog.js +163 -76
- package/dist/components/ui/bank-statement-generate-dialog.mjs +2 -1
- package/dist/components/ui/resource-center/index.js +1030 -0
- package/dist/components/ui/resource-center/index.mjs +29 -0
- package/dist/index.js +540 -364
- package/dist/index.mjs +15 -13
- package/dist/styles.css +1 -1
- package/package.json +4 -4
- package/src/components/index.tsx +2 -0
- package/src/components/ui/appointment-calendar-view.tsx +211 -199
- package/src/components/ui/bank-statement-generate-dialog.tsx +125 -97
- package/src/components/ui/resource-center/index.tsx +35 -0
- package/src/components/ui/resource-center/resource-cards.tsx +218 -0
- package/src/components/ui/resource-center/resource-carousel.tsx +122 -0
- package/src/components/ui/resource-center/resource-center-header.tsx +95 -0
- package/src/components/ui/resource-center/resource-email-editor-dialog.tsx +131 -0
- package/src/components/ui/resource-center/resource-modal.tsx +76 -0
- package/src/components/ui/resource-center/types.ts +81 -0
- package/src/styles/styles-css.ts +1 -1
- package/tsup.config.ts +1 -1
- package/dist/chunk-IODGRCQG.mjs +0 -438
- package/dist/chunk-XYWEGBAA.mjs +0 -348
- package/dist/components/ui/resource-center.js +0 -748
- package/dist/components/ui/resource-center.mjs +0 -24
- package/src/components/ui/resource-center.tsx +0 -539
|
@@ -0,0 +1,1030 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __export = (target, all) => {
|
|
38
|
+
for (var name in all)
|
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
+
};
|
|
41
|
+
var __copyProps = (to, from, except, desc) => {
|
|
42
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
43
|
+
for (let key of __getOwnPropNames(from))
|
|
44
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
45
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
46
|
+
}
|
|
47
|
+
return to;
|
|
48
|
+
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
57
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
+
|
|
59
|
+
// src/components/ui/resource-center/index.tsx
|
|
60
|
+
var resource_center_exports = {};
|
|
61
|
+
__export(resource_center_exports, {
|
|
62
|
+
ResourceCarousel: () => ResourceCarousel,
|
|
63
|
+
ResourceCenterHeader: () => ResourceCenterHeader,
|
|
64
|
+
ResourceDocumentCard: () => ResourceDocumentCard,
|
|
65
|
+
ResourceEmailEditorDialog: () => ResourceEmailEditorDialog,
|
|
66
|
+
ResourceEmailTemplateCard: () => ResourceEmailTemplateCard,
|
|
67
|
+
ResourceModal: () => ResourceModal,
|
|
68
|
+
ResourceVideoCard: () => ResourceVideoCard
|
|
69
|
+
});
|
|
70
|
+
module.exports = __toCommonJS(resource_center_exports);
|
|
71
|
+
|
|
72
|
+
// src/components/ui/resource-center/resource-carousel.tsx
|
|
73
|
+
var import_react = require("react");
|
|
74
|
+
var import_lucide_react = require("lucide-react");
|
|
75
|
+
|
|
76
|
+
// src/lib/utils.ts
|
|
77
|
+
var import_clsx = require("clsx");
|
|
78
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
79
|
+
var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
|
|
80
|
+
extend: {
|
|
81
|
+
classGroups: {
|
|
82
|
+
"font-size": [
|
|
83
|
+
{
|
|
84
|
+
text: [
|
|
85
|
+
"display-large",
|
|
86
|
+
"display-medium",
|
|
87
|
+
"display-small",
|
|
88
|
+
"h1",
|
|
89
|
+
"h2",
|
|
90
|
+
"h3",
|
|
91
|
+
"h4",
|
|
92
|
+
"h5",
|
|
93
|
+
"h6",
|
|
94
|
+
"body-large",
|
|
95
|
+
"body-medium",
|
|
96
|
+
"body-small",
|
|
97
|
+
"label-large",
|
|
98
|
+
"label-medium",
|
|
99
|
+
"label-small",
|
|
100
|
+
"button",
|
|
101
|
+
"button-xs",
|
|
102
|
+
"caption",
|
|
103
|
+
"overline",
|
|
104
|
+
"code"
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
function cn(...inputs) {
|
|
112
|
+
return twMerge((0, import_clsx.clsx)(inputs));
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// src/components/ui/toggle-group.tsx
|
|
116
|
+
var React = __toESM(require("react"));
|
|
117
|
+
var import_toggle_group = require("@base-ui/react/toggle-group");
|
|
118
|
+
var import_toggle2 = require("@base-ui/react/toggle");
|
|
119
|
+
|
|
120
|
+
// src/components/ui/toggle.tsx
|
|
121
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
122
|
+
var import_toggle = require("@base-ui/react/toggle");
|
|
123
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
124
|
+
var toggleVariants = (0, import_class_variance_authority.cva)(
|
|
125
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
126
|
+
{
|
|
127
|
+
variants: {
|
|
128
|
+
variant: {
|
|
129
|
+
default: "bg-transparent hover:bg-muted hover:text-muted-foreground",
|
|
130
|
+
outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
|
|
131
|
+
},
|
|
132
|
+
size: {
|
|
133
|
+
default: "h-9 min-w-9 px-2 text-label-large",
|
|
134
|
+
sm: "h-8 min-w-8 px-1.5 text-label-medium",
|
|
135
|
+
lg: "h-10 min-w-10 px-2.5 text-h5"
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
defaultVariants: {
|
|
139
|
+
variant: "default",
|
|
140
|
+
size: "default"
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
);
|
|
144
|
+
|
|
145
|
+
// src/components/ui/toggle-group.tsx
|
|
146
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
147
|
+
var ToggleGroupContext = React.createContext({
|
|
148
|
+
size: "default",
|
|
149
|
+
variant: "default",
|
|
150
|
+
spacing: 0
|
|
151
|
+
});
|
|
152
|
+
function ToggleGroup(_a) {
|
|
153
|
+
var _b = _a, {
|
|
154
|
+
className,
|
|
155
|
+
variant,
|
|
156
|
+
size,
|
|
157
|
+
spacing = 0,
|
|
158
|
+
type,
|
|
159
|
+
children
|
|
160
|
+
} = _b, props = __objRest(_b, [
|
|
161
|
+
"className",
|
|
162
|
+
"variant",
|
|
163
|
+
"size",
|
|
164
|
+
"spacing",
|
|
165
|
+
"type",
|
|
166
|
+
"children"
|
|
167
|
+
]);
|
|
168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
169
|
+
import_toggle_group.ToggleGroup,
|
|
170
|
+
__spreadProps(__spreadValues({
|
|
171
|
+
className: cn(
|
|
172
|
+
// WealthX: removed rounded-md (sharp corners) and shadow-xs (flat panels)
|
|
173
|
+
"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]",
|
|
174
|
+
className
|
|
175
|
+
),
|
|
176
|
+
"data-size": size,
|
|
177
|
+
"data-slot": "toggle-group",
|
|
178
|
+
"data-spacing": spacing,
|
|
179
|
+
"data-variant": variant,
|
|
180
|
+
multiple: type === "multiple",
|
|
181
|
+
style: { "--gap": spacing }
|
|
182
|
+
}, props), {
|
|
183
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
|
|
184
|
+
})
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
function ToggleGroupItem(_a) {
|
|
188
|
+
var _b = _a, {
|
|
189
|
+
className,
|
|
190
|
+
children,
|
|
191
|
+
variant,
|
|
192
|
+
size
|
|
193
|
+
} = _b, props = __objRest(_b, [
|
|
194
|
+
"className",
|
|
195
|
+
"children",
|
|
196
|
+
"variant",
|
|
197
|
+
"size"
|
|
198
|
+
]);
|
|
199
|
+
const context = React.useContext(ToggleGroupContext);
|
|
200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
201
|
+
import_toggle2.Toggle,
|
|
202
|
+
__spreadProps(__spreadValues({
|
|
203
|
+
className: cn(
|
|
204
|
+
toggleVariants({
|
|
205
|
+
variant: context.variant || variant,
|
|
206
|
+
size: context.size || size
|
|
207
|
+
}),
|
|
208
|
+
"w-auto min-w-0 shrink-0 focus:z-10 focus-visible:z-10",
|
|
209
|
+
// WealthX: no rounded corners on grouped items
|
|
210
|
+
"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
|
|
211
|
+
className
|
|
212
|
+
),
|
|
213
|
+
"data-size": context.size || size,
|
|
214
|
+
"data-slot": "toggle-group-item",
|
|
215
|
+
"data-spacing": context.spacing,
|
|
216
|
+
"data-variant": context.variant || variant
|
|
217
|
+
}, props), {
|
|
218
|
+
children
|
|
219
|
+
})
|
|
220
|
+
);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// src/components/ui/resource-center/resource-carousel.tsx
|
|
224
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
225
|
+
function ResourceCarousel({
|
|
226
|
+
title,
|
|
227
|
+
items,
|
|
228
|
+
headerAction,
|
|
229
|
+
onViewModeChange,
|
|
230
|
+
className
|
|
231
|
+
}) {
|
|
232
|
+
const scrollRef = (0, import_react.useRef)(null);
|
|
233
|
+
const [viewMode, setViewMode] = (0, import_react.useState)("compact");
|
|
234
|
+
function scrollLeft() {
|
|
235
|
+
var _a;
|
|
236
|
+
(_a = scrollRef.current) == null ? void 0 : _a.scrollBy({ left: -380, behavior: "smooth" });
|
|
237
|
+
}
|
|
238
|
+
function scrollRight() {
|
|
239
|
+
var _a;
|
|
240
|
+
(_a = scrollRef.current) == null ? void 0 : _a.scrollBy({ left: 380, behavior: "smooth" });
|
|
241
|
+
}
|
|
242
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("flex flex-col gap-4", className), children: [
|
|
243
|
+
(title || headerAction) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
244
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-1 items-center gap-4 min-w-0", children: [
|
|
245
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "text-h3 text-foreground", children: title }),
|
|
246
|
+
headerAction && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 flex justify-end", children: headerAction })
|
|
247
|
+
] }),
|
|
248
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
249
|
+
ToggleGroup,
|
|
250
|
+
{
|
|
251
|
+
type: "single",
|
|
252
|
+
variant: "outline",
|
|
253
|
+
value: [viewMode],
|
|
254
|
+
onValueChange: (v) => {
|
|
255
|
+
if (v.length > 0) {
|
|
256
|
+
const mode = v[0];
|
|
257
|
+
setViewMode(mode);
|
|
258
|
+
onViewModeChange == null ? void 0 : onViewModeChange(mode);
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
"aria-label": "View mode",
|
|
262
|
+
children: [
|
|
263
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItem, { value: "compact", "aria-label": "Compact view", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.GalleryHorizontal, { className: "size-4" }) }),
|
|
264
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItem, { value: "grid", "aria-label": "Grid view", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.LayoutGrid, { className: "size-4" }) })
|
|
265
|
+
]
|
|
266
|
+
}
|
|
267
|
+
)
|
|
268
|
+
] }),
|
|
269
|
+
items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "py-8 text-center text-body-small text-muted-foreground", children: "No items available" }) : viewMode === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-4 gap-6 max-[1280px]:grid-cols-3 max-[900px]:grid-cols-2 max-[600px]:grid-cols-1", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: item }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "group/track relative", children: [
|
|
270
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
271
|
+
"button",
|
|
272
|
+
{
|
|
273
|
+
type: "button",
|
|
274
|
+
onClick: scrollLeft,
|
|
275
|
+
"aria-label": "Scroll left",
|
|
276
|
+
className: cn(
|
|
277
|
+
"absolute left-0 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
|
|
278
|
+
"flex size-9 items-center justify-center",
|
|
279
|
+
"border border-border bg-background shadow-sm",
|
|
280
|
+
"opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
|
|
281
|
+
"hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
282
|
+
),
|
|
283
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronLeft, { className: "size-4 text-foreground" })
|
|
284
|
+
}
|
|
285
|
+
),
|
|
286
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
287
|
+
"div",
|
|
288
|
+
{
|
|
289
|
+
ref: scrollRef,
|
|
290
|
+
className: "flex gap-4 overflow-x-auto scroll-smooth pb-2",
|
|
291
|
+
style: { scrollbarWidth: "none" },
|
|
292
|
+
children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-[360px] shrink-0", children: item }, i))
|
|
293
|
+
}
|
|
294
|
+
),
|
|
295
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
296
|
+
"button",
|
|
297
|
+
{
|
|
298
|
+
type: "button",
|
|
299
|
+
onClick: scrollRight,
|
|
300
|
+
"aria-label": "Scroll right",
|
|
301
|
+
className: cn(
|
|
302
|
+
"absolute right-0 top-1/2 z-10 translate-x-1/2 -translate-y-1/2",
|
|
303
|
+
"flex size-9 items-center justify-center",
|
|
304
|
+
"border border-border bg-background shadow-sm",
|
|
305
|
+
"opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
|
|
306
|
+
"hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
307
|
+
),
|
|
308
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronRight, { className: "size-4 text-foreground" })
|
|
309
|
+
}
|
|
310
|
+
)
|
|
311
|
+
] })
|
|
312
|
+
] });
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
// src/components/ui/resource-center/resource-center-header.tsx
|
|
316
|
+
var import_react4 = require("react");
|
|
317
|
+
var import_lucide_react5 = require("lucide-react");
|
|
318
|
+
|
|
319
|
+
// src/components/ui/button.tsx
|
|
320
|
+
var import_react2 = require("react");
|
|
321
|
+
var import_class_variance_authority2 = require("class-variance-authority");
|
|
322
|
+
var import_lucide_react2 = require("lucide-react");
|
|
323
|
+
|
|
324
|
+
// src/lib/slot.tsx
|
|
325
|
+
var React3 = __toESM(require("react"));
|
|
326
|
+
function mergeRefs(...refs) {
|
|
327
|
+
return (value) => {
|
|
328
|
+
for (const ref of refs) {
|
|
329
|
+
if (typeof ref === "function") ref(value);
|
|
330
|
+
else if (ref !== null)
|
|
331
|
+
ref.current = value;
|
|
332
|
+
}
|
|
333
|
+
};
|
|
334
|
+
}
|
|
335
|
+
var Slot = React3.forwardRef(
|
|
336
|
+
(_a, forwardedRef) => {
|
|
337
|
+
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
338
|
+
const child = React3.Children.only(children);
|
|
339
|
+
if (!React3.isValidElement(child)) return null;
|
|
340
|
+
const childProps = child.props;
|
|
341
|
+
const merged = __spreadValues({}, props);
|
|
342
|
+
for (const key of Object.keys(childProps)) {
|
|
343
|
+
if (key === "className") {
|
|
344
|
+
merged.className = [props.className, childProps.className].filter(Boolean).join(" ");
|
|
345
|
+
} else if (key === "style") {
|
|
346
|
+
merged.style = __spreadValues(__spreadValues({}, props.style), childProps.style);
|
|
347
|
+
} else if (key.startsWith("on") && typeof childProps[key] === "function") {
|
|
348
|
+
const parentHandler = props[key];
|
|
349
|
+
if (typeof parentHandler === "function") {
|
|
350
|
+
merged[key] = (...args) => {
|
|
351
|
+
childProps[key](...args);
|
|
352
|
+
parentHandler(...args);
|
|
353
|
+
};
|
|
354
|
+
} else {
|
|
355
|
+
merged[key] = childProps[key];
|
|
356
|
+
}
|
|
357
|
+
} else {
|
|
358
|
+
merged[key] = childProps[key];
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
const childRef = child.ref;
|
|
362
|
+
merged.ref = forwardedRef ? mergeRefs(forwardedRef, childRef) : childRef;
|
|
363
|
+
return React3.cloneElement(
|
|
364
|
+
child,
|
|
365
|
+
merged
|
|
366
|
+
);
|
|
367
|
+
}
|
|
368
|
+
);
|
|
369
|
+
Slot.displayName = "Slot";
|
|
370
|
+
|
|
371
|
+
// src/components/ui/button.tsx
|
|
372
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
373
|
+
var buttonVariants = (0, import_class_variance_authority2.cva)(
|
|
374
|
+
"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-button whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
375
|
+
{
|
|
376
|
+
variants: {
|
|
377
|
+
variant: {
|
|
378
|
+
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
|
379
|
+
secondary: "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
|
|
380
|
+
destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
|
|
381
|
+
outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:border-border focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
382
|
+
"outline-primary": "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
|
|
383
|
+
"outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:border-brand-secondary focus-visible:ring-brand-secondary/30",
|
|
384
|
+
ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
|
|
385
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
386
|
+
},
|
|
387
|
+
size: {
|
|
388
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
389
|
+
xs: "h-6 gap-1 px-2 text-button-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
390
|
+
sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
391
|
+
lg: "h-10 px-6 has-[>svg]:px-4",
|
|
392
|
+
icon: "size-9",
|
|
393
|
+
"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
|
|
394
|
+
"icon-sm": "size-8",
|
|
395
|
+
"icon-lg": "size-10"
|
|
396
|
+
}
|
|
397
|
+
},
|
|
398
|
+
defaultVariants: {
|
|
399
|
+
variant: "default",
|
|
400
|
+
size: "default"
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
);
|
|
404
|
+
var Button = (0, import_react2.forwardRef)(function Button2(_a, ref) {
|
|
405
|
+
var _b = _a, {
|
|
406
|
+
className,
|
|
407
|
+
variant,
|
|
408
|
+
size,
|
|
409
|
+
asChild = false,
|
|
410
|
+
loading = false,
|
|
411
|
+
disabled,
|
|
412
|
+
type = "button",
|
|
413
|
+
children
|
|
414
|
+
} = _b, props = __objRest(_b, [
|
|
415
|
+
"className",
|
|
416
|
+
"variant",
|
|
417
|
+
"size",
|
|
418
|
+
"asChild",
|
|
419
|
+
"loading",
|
|
420
|
+
"disabled",
|
|
421
|
+
"type",
|
|
422
|
+
"children"
|
|
423
|
+
]);
|
|
424
|
+
const Comp = asChild ? Slot : "button";
|
|
425
|
+
const isIconOnly = size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg";
|
|
426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
427
|
+
Comp,
|
|
428
|
+
__spreadProps(__spreadValues({
|
|
429
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
430
|
+
"data-size": size,
|
|
431
|
+
"data-slot": "button",
|
|
432
|
+
"data-variant": variant,
|
|
433
|
+
disabled: loading || disabled,
|
|
434
|
+
ref,
|
|
435
|
+
type
|
|
436
|
+
}, props), {
|
|
437
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
438
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Loader2, { "aria-hidden": "true", className: "animate-spin" }),
|
|
439
|
+
!isIconOnly && children
|
|
440
|
+
] }) : children
|
|
441
|
+
})
|
|
442
|
+
);
|
|
443
|
+
});
|
|
444
|
+
|
|
445
|
+
// src/components/ui/resource-center/resource-modal.tsx
|
|
446
|
+
var import_lucide_react4 = require("lucide-react");
|
|
447
|
+
|
|
448
|
+
// src/components/ui/badge.tsx
|
|
449
|
+
var import_class_variance_authority3 = require("class-variance-authority");
|
|
450
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
451
|
+
var badgeVariants = (0, import_class_variance_authority3.cva)(
|
|
452
|
+
"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-caption whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
|
|
453
|
+
{
|
|
454
|
+
variants: {
|
|
455
|
+
variant: {
|
|
456
|
+
default: "border-primary/40 bg-primary/10 text-foreground [a&]:hover:bg-primary/15",
|
|
457
|
+
secondary: "border-border bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
|
|
458
|
+
destructive: "border-destructive/40 bg-destructive/10 text-destructive-text focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/15",
|
|
459
|
+
success: "border-success/40 bg-success/10 text-success-text [a&]:hover:bg-success/15",
|
|
460
|
+
warning: "border-warning/40 bg-warning/10 text-warning-text [a&]:hover:bg-warning/15",
|
|
461
|
+
info: "border-info/40 bg-info/10 text-info-text [a&]:hover:bg-info/15",
|
|
462
|
+
outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
463
|
+
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
464
|
+
link: "text-primary underline-offset-4 [a&]:hover:underline"
|
|
465
|
+
}
|
|
466
|
+
},
|
|
467
|
+
defaultVariants: {
|
|
468
|
+
variant: "default"
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
);
|
|
472
|
+
function Badge(_a) {
|
|
473
|
+
var _b = _a, {
|
|
474
|
+
className,
|
|
475
|
+
variant = "default",
|
|
476
|
+
asChild = false
|
|
477
|
+
} = _b, props = __objRest(_b, [
|
|
478
|
+
"className",
|
|
479
|
+
"variant",
|
|
480
|
+
"asChild"
|
|
481
|
+
]);
|
|
482
|
+
const Comp = asChild ? Slot : "span";
|
|
483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
484
|
+
Comp,
|
|
485
|
+
__spreadValues({
|
|
486
|
+
className: cn(badgeVariants({ variant }), className),
|
|
487
|
+
"data-slot": "badge",
|
|
488
|
+
"data-variant": variant
|
|
489
|
+
}, props)
|
|
490
|
+
);
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
// src/components/ui/dialog.tsx
|
|
494
|
+
var import_lucide_react3 = require("lucide-react");
|
|
495
|
+
var import_dialog = require("@base-ui/react/dialog");
|
|
496
|
+
|
|
497
|
+
// src/lib/theme-provider.tsx
|
|
498
|
+
var import_react3 = require("react");
|
|
499
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
500
|
+
var ThemeVarsContext = (0, import_react3.createContext)({});
|
|
501
|
+
function useThemeVars() {
|
|
502
|
+
return (0, import_react3.useContext)(ThemeVarsContext);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
// src/components/ui/dialog.tsx
|
|
506
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
507
|
+
function Dialog(_a) {
|
|
508
|
+
var props = __objRest(_a, []);
|
|
509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog.Dialog.Root, __spreadValues({ "data-slot": "dialog" }, props));
|
|
510
|
+
}
|
|
511
|
+
function DialogPortal(_a) {
|
|
512
|
+
var props = __objRest(_a, []);
|
|
513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_dialog.Dialog.Portal, __spreadValues({ "data-slot": "dialog-portal" }, props));
|
|
514
|
+
}
|
|
515
|
+
function DialogOverlay(_a) {
|
|
516
|
+
var _b = _a, {
|
|
517
|
+
className
|
|
518
|
+
} = _b, props = __objRest(_b, [
|
|
519
|
+
"className"
|
|
520
|
+
]);
|
|
521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
522
|
+
import_dialog.Dialog.Backdrop,
|
|
523
|
+
__spreadValues({
|
|
524
|
+
className: cn(
|
|
525
|
+
// WealthX: foreground/50 scrim (matches Figma — foreground token at 50% opacity)
|
|
526
|
+
"fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
|
|
527
|
+
className
|
|
528
|
+
),
|
|
529
|
+
"data-slot": "dialog-overlay"
|
|
530
|
+
}, props)
|
|
531
|
+
);
|
|
532
|
+
}
|
|
533
|
+
var DIALOG_MAX_WIDTHS = {
|
|
534
|
+
sm: "24rem",
|
|
535
|
+
md: "28rem",
|
|
536
|
+
lg: "32rem",
|
|
537
|
+
xl: "36rem",
|
|
538
|
+
"2xl": "42rem",
|
|
539
|
+
"3xl": "48rem",
|
|
540
|
+
"4xl": "56rem",
|
|
541
|
+
full: "100%"
|
|
542
|
+
};
|
|
543
|
+
var DIALOG_AUTO_MIN_WIDTH = "20rem";
|
|
544
|
+
function DialogContent(_a) {
|
|
545
|
+
var _b = _a, {
|
|
546
|
+
className,
|
|
547
|
+
children,
|
|
548
|
+
showCloseButton = true,
|
|
549
|
+
style,
|
|
550
|
+
container,
|
|
551
|
+
align = "top",
|
|
552
|
+
size = "lg",
|
|
553
|
+
minWidth
|
|
554
|
+
} = _b, props = __objRest(_b, [
|
|
555
|
+
"className",
|
|
556
|
+
"children",
|
|
557
|
+
"showCloseButton",
|
|
558
|
+
"style",
|
|
559
|
+
"container",
|
|
560
|
+
"align",
|
|
561
|
+
"size",
|
|
562
|
+
"minWidth"
|
|
563
|
+
]);
|
|
564
|
+
const themeVars = useThemeVars();
|
|
565
|
+
const isAuto = size === "auto";
|
|
566
|
+
const sizeStyle = isAuto ? { minWidth: minWidth != null ? minWidth : DIALOG_AUTO_MIN_WIDTH } : { maxWidth: DIALOG_MAX_WIDTHS[size] };
|
|
567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DialogPortal, { container: container != null ? container : void 0, children: [
|
|
568
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogOverlay, { style: themeVars }),
|
|
569
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
570
|
+
import_dialog.Dialog.Popup,
|
|
571
|
+
__spreadProps(__spreadValues({
|
|
572
|
+
className: cn(
|
|
573
|
+
// WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels)
|
|
574
|
+
// max-w-[calc(100%-2rem)] acts as a viewport-edge guard on all sizes.
|
|
575
|
+
// Fixed max-width is applied via inline style (sizeStyle) to avoid
|
|
576
|
+
// Tailwind v4 class-scanning gaps with dynamic class lookups.
|
|
577
|
+
"fixed left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
|
578
|
+
// "auto" → hug content (with min-width floor); fixed sizes → fill to max-width
|
|
579
|
+
isAuto ? "w-auto" : "w-full",
|
|
580
|
+
align === "center" ? "top-[50%] translate-y-[-50%]" : "top-4 translate-y-0",
|
|
581
|
+
className
|
|
582
|
+
),
|
|
583
|
+
"data-slot": "dialog-content",
|
|
584
|
+
style: __spreadValues(__spreadValues(__spreadValues({}, themeVars), sizeStyle), style)
|
|
585
|
+
}, props), {
|
|
586
|
+
children: [
|
|
587
|
+
children,
|
|
588
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
589
|
+
import_dialog.Dialog.Close,
|
|
590
|
+
{
|
|
591
|
+
className: "absolute top-4 right-4 inline-flex size-7 items-center justify-center transition-colors hover:bg-foreground/5 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
592
|
+
"data-slot": "dialog-close",
|
|
593
|
+
children: [
|
|
594
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.XIcon, {}),
|
|
595
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Close" })
|
|
596
|
+
]
|
|
597
|
+
}
|
|
598
|
+
) : null
|
|
599
|
+
]
|
|
600
|
+
})
|
|
601
|
+
)
|
|
602
|
+
] });
|
|
603
|
+
}
|
|
604
|
+
function DialogHeader(_a) {
|
|
605
|
+
var _b = _a, {
|
|
606
|
+
className
|
|
607
|
+
} = _b, props = __objRest(_b, [
|
|
608
|
+
"className"
|
|
609
|
+
]);
|
|
610
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
611
|
+
"div",
|
|
612
|
+
__spreadValues({
|
|
613
|
+
className: cn("flex flex-col gap-1.5", className),
|
|
614
|
+
"data-slot": "dialog-header"
|
|
615
|
+
}, props)
|
|
616
|
+
);
|
|
617
|
+
}
|
|
618
|
+
function DialogTitle(_a) {
|
|
619
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
620
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
621
|
+
import_dialog.Dialog.Title,
|
|
622
|
+
__spreadValues({
|
|
623
|
+
className: cn("text-h5 leading-none", className),
|
|
624
|
+
"data-slot": "dialog-title"
|
|
625
|
+
}, props)
|
|
626
|
+
);
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
// src/components/ui/resource-center/resource-modal.tsx
|
|
630
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
631
|
+
function ResourceModal({
|
|
632
|
+
open,
|
|
633
|
+
onClose,
|
|
634
|
+
title,
|
|
635
|
+
videoUrl,
|
|
636
|
+
tags,
|
|
637
|
+
attachments
|
|
638
|
+
}) {
|
|
639
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dialog, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
640
|
+
DialogContent,
|
|
641
|
+
{
|
|
642
|
+
size: "2xl",
|
|
643
|
+
className: "flex flex-col gap-4 p-0 overflow-hidden",
|
|
644
|
+
children: [
|
|
645
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DialogHeader, { className: "px-6 pt-6 pb-0", children: [
|
|
646
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogTitle, { className: "text-h5", children: title }),
|
|
647
|
+
tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Badge, { variant: "secondary", children: tag }, tag)) })
|
|
648
|
+
] }),
|
|
649
|
+
videoUrl && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "aspect-video w-full bg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
650
|
+
"iframe",
|
|
651
|
+
{
|
|
652
|
+
src: videoUrl,
|
|
653
|
+
title,
|
|
654
|
+
className: "h-full w-full",
|
|
655
|
+
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
|
|
656
|
+
allowFullScreen: true
|
|
657
|
+
}
|
|
658
|
+
) }),
|
|
659
|
+
attachments && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2 px-6 pb-6", children: [
|
|
660
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-body-small font-medium text-foreground", children: "Attachments" }),
|
|
661
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col gap-1", children: attachments.map((attachment, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
662
|
+
"a",
|
|
663
|
+
{
|
|
664
|
+
href: attachment.url,
|
|
665
|
+
download: true,
|
|
666
|
+
className: "flex items-center gap-2 text-body-small text-primary hover:underline",
|
|
667
|
+
children: [
|
|
668
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Download, { className: "size-3.5 shrink-0" }),
|
|
669
|
+
attachment.name
|
|
670
|
+
]
|
|
671
|
+
},
|
|
672
|
+
i
|
|
673
|
+
)) })
|
|
674
|
+
] }),
|
|
675
|
+
(!attachments || attachments.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pb-2" })
|
|
676
|
+
]
|
|
677
|
+
}
|
|
678
|
+
) });
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
// src/components/ui/resource-center/resource-center-header.tsx
|
|
682
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
683
|
+
function ResourceCenterHeader({
|
|
684
|
+
title,
|
|
685
|
+
description,
|
|
686
|
+
backgroundImageUrl,
|
|
687
|
+
backgroundVideoUrl,
|
|
688
|
+
watchVideoUrl
|
|
689
|
+
}) {
|
|
690
|
+
const [watchModalOpen, setWatchModalOpen] = (0, import_react4.useState)(false);
|
|
691
|
+
const hasBackground = !!backgroundImageUrl || !!backgroundVideoUrl;
|
|
692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
693
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
694
|
+
"div",
|
|
695
|
+
{
|
|
696
|
+
className: cn(
|
|
697
|
+
"relative flex min-h-[480px] w-full items-center overflow-hidden max-[900px]:min-h-[360px] max-[600px]:min-h-[260px]"
|
|
698
|
+
),
|
|
699
|
+
children: [
|
|
700
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
701
|
+
"div",
|
|
702
|
+
{
|
|
703
|
+
className: cn(
|
|
704
|
+
"absolute inset-0 z-[0]",
|
|
705
|
+
hasBackground ? "bg-foreground" : "bg-gradient-to-br from-primary to-foreground"
|
|
706
|
+
)
|
|
707
|
+
}
|
|
708
|
+
),
|
|
709
|
+
backgroundImageUrl && !backgroundVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
710
|
+
"img",
|
|
711
|
+
{
|
|
712
|
+
src: backgroundImageUrl,
|
|
713
|
+
alt: "",
|
|
714
|
+
"aria-hidden": "true",
|
|
715
|
+
className: "absolute inset-0 h-full w-full object-cover z-[1]"
|
|
716
|
+
}
|
|
717
|
+
),
|
|
718
|
+
backgroundVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
719
|
+
"video",
|
|
720
|
+
{
|
|
721
|
+
className: "absolute inset-0 h-full w-full object-cover z-[1]",
|
|
722
|
+
src: backgroundVideoUrl,
|
|
723
|
+
autoPlay: true,
|
|
724
|
+
muted: true,
|
|
725
|
+
loop: true,
|
|
726
|
+
playsInline: true
|
|
727
|
+
}
|
|
728
|
+
),
|
|
729
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
730
|
+
"div",
|
|
731
|
+
{
|
|
732
|
+
className: cn(
|
|
733
|
+
"absolute inset-0 z-[2]",
|
|
734
|
+
hasBackground ? "bg-black/50" : "bg-black/20"
|
|
735
|
+
)
|
|
736
|
+
}
|
|
737
|
+
),
|
|
738
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative z-[3] flex flex-col gap-4 px-8 py-12 md:px-16 max-w-3xl", children: [
|
|
739
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-[56px] font-bold text-white leading-none max-[900px]:text-[40px] max-[600px]:text-[32px]", children: title }),
|
|
740
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-body-medium text-white/80 leading-relaxed", children: description }),
|
|
741
|
+
watchVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Button, { variant: "default", onClick: () => setWatchModalOpen(true), children: [
|
|
742
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.Play, { className: "mr-2 size-4" }),
|
|
743
|
+
"Watch Now"
|
|
744
|
+
] }) })
|
|
745
|
+
] })
|
|
746
|
+
]
|
|
747
|
+
}
|
|
748
|
+
),
|
|
749
|
+
watchVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
750
|
+
ResourceModal,
|
|
751
|
+
{
|
|
752
|
+
open: watchModalOpen,
|
|
753
|
+
onClose: () => setWatchModalOpen(false),
|
|
754
|
+
title,
|
|
755
|
+
videoUrl: watchVideoUrl
|
|
756
|
+
}
|
|
757
|
+
)
|
|
758
|
+
] });
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
// src/components/ui/resource-center/resource-cards.tsx
|
|
762
|
+
var import_react5 = require("react");
|
|
763
|
+
var import_lucide_react6 = require("lucide-react");
|
|
764
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
765
|
+
function ResourceVideoCard({ video }) {
|
|
766
|
+
const [modalOpen, setModalOpen] = (0, import_react5.useState)(false);
|
|
767
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
768
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
769
|
+
"button",
|
|
770
|
+
{
|
|
771
|
+
type: "button",
|
|
772
|
+
onClick: () => setModalOpen(true),
|
|
773
|
+
className: "group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
774
|
+
children: [
|
|
775
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative w-full overflow-hidden bg-muted aspect-video", children: [
|
|
776
|
+
video.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
777
|
+
"img",
|
|
778
|
+
{
|
|
779
|
+
src: video.thumbnailUrl,
|
|
780
|
+
alt: video.title,
|
|
781
|
+
className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
|
|
782
|
+
}
|
|
783
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.Play, { className: "size-10 text-muted-foreground opacity-40" }) }),
|
|
784
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex size-12 items-center justify-center bg-background/90", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.Play, { className: "size-5 text-foreground" }) }) }),
|
|
785
|
+
video.duration && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "absolute bottom-2 right-2 bg-black/70 px-1.5 py-0.5 text-caption text-white", children: video.duration })
|
|
786
|
+
] }),
|
|
787
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-body-medium font-semibold text-foreground leading-snug line-clamp-2", children: video.title })
|
|
788
|
+
]
|
|
789
|
+
}
|
|
790
|
+
),
|
|
791
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
792
|
+
ResourceModal,
|
|
793
|
+
{
|
|
794
|
+
open: modalOpen,
|
|
795
|
+
onClose: () => setModalOpen(false),
|
|
796
|
+
title: video.title,
|
|
797
|
+
videoUrl: video.videoUrl,
|
|
798
|
+
tags: video.tags,
|
|
799
|
+
attachments: video.attachments
|
|
800
|
+
}
|
|
801
|
+
)
|
|
802
|
+
] });
|
|
803
|
+
}
|
|
804
|
+
function ResourceEmailTemplateCard({
|
|
805
|
+
template,
|
|
806
|
+
onClick
|
|
807
|
+
}) {
|
|
808
|
+
if (template.isAddTemplate) {
|
|
809
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
810
|
+
"button",
|
|
811
|
+
{
|
|
812
|
+
type: "button",
|
|
813
|
+
onClick,
|
|
814
|
+
className: cn(
|
|
815
|
+
"flex w-full flex-col items-center justify-center gap-3",
|
|
816
|
+
"border-2 border-dashed border-border bg-muted/40",
|
|
817
|
+
"aspect-video hover:border-primary hover:bg-muted/70 transition-colors",
|
|
818
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
819
|
+
),
|
|
820
|
+
children: [
|
|
821
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex size-10 items-center justify-center border-2 border-dashed border-muted-foreground/40", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-2xl text-muted-foreground/60", children: "+" }) }),
|
|
822
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-body-small font-medium text-muted-foreground", children: "Add Template" })
|
|
823
|
+
]
|
|
824
|
+
}
|
|
825
|
+
);
|
|
826
|
+
}
|
|
827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
828
|
+
"button",
|
|
829
|
+
{
|
|
830
|
+
type: "button",
|
|
831
|
+
onClick,
|
|
832
|
+
className: "group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
833
|
+
children: [
|
|
834
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative w-full overflow-hidden border border-border bg-background aspect-video", children: [
|
|
835
|
+
template.htmlContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
836
|
+
"iframe",
|
|
837
|
+
{
|
|
838
|
+
srcDoc: template.htmlContent,
|
|
839
|
+
title: template.title,
|
|
840
|
+
className: "h-full w-full pointer-events-none",
|
|
841
|
+
style: {
|
|
842
|
+
transform: "scale(0.5)",
|
|
843
|
+
transformOrigin: "top left",
|
|
844
|
+
width: "200%",
|
|
845
|
+
height: "200%"
|
|
846
|
+
},
|
|
847
|
+
sandbox: "allow-same-origin"
|
|
848
|
+
}
|
|
849
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex h-full w-full items-center justify-center bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-caption text-muted-foreground", children: "No preview available" }) }),
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-body-small font-medium text-white", children: "Use Template" }) })
|
|
851
|
+
] }),
|
|
852
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
853
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-body-small font-medium text-foreground leading-snug line-clamp-1", children: template.title }),
|
|
854
|
+
template.type && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Badge, { variant: "secondary", className: "shrink-0", children: template.type === "system" ? "System" : "Company" })
|
|
855
|
+
] })
|
|
856
|
+
]
|
|
857
|
+
}
|
|
858
|
+
);
|
|
859
|
+
}
|
|
860
|
+
function ResourceDocumentCard({
|
|
861
|
+
document,
|
|
862
|
+
onClick
|
|
863
|
+
}) {
|
|
864
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
865
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
866
|
+
"button",
|
|
867
|
+
{
|
|
868
|
+
type: "button",
|
|
869
|
+
onClick,
|
|
870
|
+
className: "group relative w-full overflow-hidden border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aspect-video",
|
|
871
|
+
children: [
|
|
872
|
+
document.pdfUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
873
|
+
"iframe",
|
|
874
|
+
{
|
|
875
|
+
src: document.pdfUrl,
|
|
876
|
+
title: document.title,
|
|
877
|
+
className: "h-full w-full pointer-events-none"
|
|
878
|
+
}
|
|
879
|
+
) : document.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
880
|
+
"img",
|
|
881
|
+
{
|
|
882
|
+
src: document.thumbnailUrl,
|
|
883
|
+
alt: document.title,
|
|
884
|
+
className: "h-full w-full object-cover"
|
|
885
|
+
}
|
|
886
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex h-full w-full flex-col items-center justify-center gap-2", children: [
|
|
887
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center bg-muted-foreground/10 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.Download, { className: "size-8 text-muted-foreground opacity-50" }) }),
|
|
888
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-caption text-muted-foreground", children: document.title })
|
|
889
|
+
] }),
|
|
890
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-foreground/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100" })
|
|
891
|
+
]
|
|
892
|
+
}
|
|
893
|
+
),
|
|
894
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
895
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1 min-w-0", children: [
|
|
896
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-body-small font-medium text-foreground leading-snug line-clamp-1", children: document.title }),
|
|
897
|
+
document.tags && document.tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1", children: document.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Badge, { variant: "secondary", children: tag }, tag)) })
|
|
898
|
+
] }),
|
|
899
|
+
document.downloadUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
900
|
+
"a",
|
|
901
|
+
{
|
|
902
|
+
href: document.downloadUrl,
|
|
903
|
+
download: true,
|
|
904
|
+
onClick: (e) => e.stopPropagation(),
|
|
905
|
+
className: "shrink-0",
|
|
906
|
+
"aria-label": `Download ${document.title}`,
|
|
907
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { variant: "outline", size: "icon", className: "size-8", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.Download, { className: "size-4" }) })
|
|
908
|
+
}
|
|
909
|
+
)
|
|
910
|
+
] })
|
|
911
|
+
] });
|
|
912
|
+
}
|
|
913
|
+
|
|
914
|
+
// src/components/ui/resource-center/resource-email-editor-dialog.tsx
|
|
915
|
+
var import_react6 = require("react");
|
|
916
|
+
|
|
917
|
+
// src/components/ui/input.tsx
|
|
918
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
919
|
+
function Input(_a) {
|
|
920
|
+
var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
|
|
921
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
922
|
+
"input",
|
|
923
|
+
__spreadValues({
|
|
924
|
+
className: cn(
|
|
925
|
+
"h-9 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-body-medium font-sans shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-label-medium file:text-foreground placeholder:font-normal placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30",
|
|
926
|
+
"focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20",
|
|
927
|
+
"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
|
|
928
|
+
className
|
|
929
|
+
),
|
|
930
|
+
"data-slot": "input",
|
|
931
|
+
type
|
|
932
|
+
}, props)
|
|
933
|
+
);
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
// src/components/ui/resource-center/resource-email-editor-dialog.tsx
|
|
937
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
938
|
+
var EDITOR_CONTENT_TYPES = [
|
|
939
|
+
"Columns",
|
|
940
|
+
"Button",
|
|
941
|
+
"Divider",
|
|
942
|
+
"Heading",
|
|
943
|
+
"Paragraph",
|
|
944
|
+
"Image",
|
|
945
|
+
"Social",
|
|
946
|
+
"Menu",
|
|
947
|
+
"HTML"
|
|
948
|
+
];
|
|
949
|
+
function ResourceEmailEditorDialog({
|
|
950
|
+
open,
|
|
951
|
+
onClose,
|
|
952
|
+
onSave,
|
|
953
|
+
editorSlot
|
|
954
|
+
}) {
|
|
955
|
+
const [templateName, setTemplateName] = (0, import_react6.useState)("");
|
|
956
|
+
function handleSave() {
|
|
957
|
+
onSave(templateName);
|
|
958
|
+
}
|
|
959
|
+
function handleClose() {
|
|
960
|
+
setTemplateName("");
|
|
961
|
+
onClose();
|
|
962
|
+
}
|
|
963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Dialog, { open, onOpenChange: (v) => !v && handleClose(), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
964
|
+
DialogContent,
|
|
965
|
+
{
|
|
966
|
+
size: "4xl",
|
|
967
|
+
className: "flex flex-col gap-0 p-0 overflow-hidden h-[90vh]",
|
|
968
|
+
children: [
|
|
969
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "shrink-0 border-b border-border px-6 py-4", children: [
|
|
970
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-label-small text-muted-foreground mb-1", children: "Template Name" }),
|
|
971
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
972
|
+
Input,
|
|
973
|
+
{
|
|
974
|
+
placeholder: "Enter template name",
|
|
975
|
+
value: templateName,
|
|
976
|
+
onChange: (e) => setTemplateName(e.target.value),
|
|
977
|
+
className: "border-none shadow-none px-0 text-body-medium h-auto focus-visible:ring-0 bg-transparent"
|
|
978
|
+
}
|
|
979
|
+
)
|
|
980
|
+
] }),
|
|
981
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1 overflow-hidden", children: editorSlot != null ? editorSlot : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EditorPlaceholder, {}) }),
|
|
982
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "shrink-0 flex items-center justify-between border-t border-border px-6 py-4", children: [
|
|
983
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "outline", onClick: handleClose, children: "Back" }),
|
|
984
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "default", onClick: handleSave, children: "Save Email" })
|
|
985
|
+
] })
|
|
986
|
+
]
|
|
987
|
+
}
|
|
988
|
+
) });
|
|
989
|
+
}
|
|
990
|
+
function EditorPlaceholder() {
|
|
991
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex h-full", children: [
|
|
992
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-1 items-center justify-center bg-[#f4f4f4]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "max-w-[500px] w-full border-2 border-dashed border-[#9ecbf0] bg-[#e8f4ff] px-16 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-body-small text-[#5c9fd8]", children: "No content here. Drag content from right." }) }) }),
|
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-[280px] shrink-0 flex flex-col border-l border-border bg-background", children: [
|
|
994
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex border-b border-border", children: ["Content", "Blocks", "Body"].map((tab, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
995
|
+
"button",
|
|
996
|
+
{
|
|
997
|
+
type: "button",
|
|
998
|
+
className: cn(
|
|
999
|
+
"flex flex-1 flex-col items-center gap-1 py-3 text-caption",
|
|
1000
|
+
i === 0 ? "text-foreground border-b-2 border-foreground" : "text-muted-foreground"
|
|
1001
|
+
),
|
|
1002
|
+
children: tab
|
|
1003
|
+
},
|
|
1004
|
+
tab
|
|
1005
|
+
)) }),
|
|
1006
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-3 gap-2 p-3", children: EDITOR_CONTENT_TYPES.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1007
|
+
"div",
|
|
1008
|
+
{
|
|
1009
|
+
className: "flex flex-col items-center gap-1.5 border border-border p-2 hover:bg-muted transition-colors cursor-grab",
|
|
1010
|
+
children: [
|
|
1011
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "size-6 bg-foreground/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] text-foreground/40", children: "\u25A4" }) }),
|
|
1012
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[11px] text-foreground leading-none text-center", children: item })
|
|
1013
|
+
]
|
|
1014
|
+
},
|
|
1015
|
+
item
|
|
1016
|
+
)) }),
|
|
1017
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-auto border-t border-border py-2.5 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-caption text-muted-foreground", children: "\u26A1 by Unlayer Editor" }) })
|
|
1018
|
+
] })
|
|
1019
|
+
] });
|
|
1020
|
+
}
|
|
1021
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
1022
|
+
0 && (module.exports = {
|
|
1023
|
+
ResourceCarousel,
|
|
1024
|
+
ResourceCenterHeader,
|
|
1025
|
+
ResourceDocumentCard,
|
|
1026
|
+
ResourceEmailEditorDialog,
|
|
1027
|
+
ResourceEmailTemplateCard,
|
|
1028
|
+
ResourceModal,
|
|
1029
|
+
ResourceVideoCard
|
|
1030
|
+
});
|