@embedreach/components 0.1.5 → 0.1.7
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/reach.es.js +358 -357
- package/dist/reach.umd.js +2 -2
- package/package.json +13 -3
package/dist/reach.es.js
CHANGED
|
@@ -5,16 +5,16 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
import React__default, { useState, useEffect, createContext, memo, PureComponent, useRef, createRef, Children, useContext, useMemo, isValidElement, cloneElement, useReducer } from "react";
|
|
7
7
|
import { QueryClient, useQueryClient, useMutation, useQuery, QueryClientProvider } from "@tanstack/react-query";
|
|
8
|
+
import { X, ArrowRightLeft, Info, ChevronDown, ChevronUp, Check, InfoIcon, Minus, CheckCircle, SparklesIcon, MapPin, DollarSign, CircleDollarSign, Code2, Target, Loader, Rocket, Trash2, ExternalLink, CheckCircle2, Copy, Link, Code, Settings, BarChart2, Megaphone, ChevronLeft, ChevronRight, CalendarIcon, Circle as Circle$1, FilterIcon, TvMinimalPlayIcon, UserPlus, HelpCircle, AlertTriangle, AlertCircle, LayoutDashboard, BarChart3 } from "lucide-react";
|
|
9
|
+
import { clsx } from "clsx";
|
|
10
|
+
import { twMerge } from "tailwind-merge";
|
|
11
|
+
import { AnimatePresence, motion } from "framer-motion";
|
|
8
12
|
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
|
9
13
|
import { Outlet, useNavigate, Routes, Route, Navigate, MemoryRouter } from "react-router-dom";
|
|
10
14
|
import { useFlags, useLDClient, LDProvider } from "launchdarkly-react-client-sdk";
|
|
11
15
|
import { useTranslation, initReactI18next, I18nextProvider } from "react-i18next";
|
|
12
16
|
import * as ToastPrimitives from "@radix-ui/react-toast";
|
|
13
17
|
import { cva } from "class-variance-authority";
|
|
14
|
-
import { X, ArrowRightLeft, Info, ChevronDown, ChevronUp, Check, InfoIcon, Minus, CheckCircle, SparklesIcon, MapPin, DollarSign, CircleDollarSign, Code2, Target, Loader, Rocket, Trash2, ExternalLink, CheckCircle2, Copy, Link, Code, Settings, BarChart2, Megaphone, ChevronLeft, ChevronRight, CalendarIcon, Circle as Circle$1, FilterIcon, TvMinimalPlayIcon, UserPlus, HelpCircle, AlertTriangle, AlertCircle, LayoutDashboard, BarChart3 } from "lucide-react";
|
|
15
|
-
import { clsx } from "clsx";
|
|
16
|
-
import { twMerge } from "tailwind-merge";
|
|
17
|
-
import { AnimatePresence, motion } from "framer-motion";
|
|
18
18
|
import { get, set, appendErrors, useFormContext, FormProvider, useForm } from "react-hook-form";
|
|
19
19
|
import { Slot } from "@radix-ui/react-slot";
|
|
20
20
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
@@ -36,358 +36,6 @@ import * as RechartsPrimitive from "recharts";
|
|
|
36
36
|
import { AreaChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Area } from "recharts";
|
|
37
37
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
38
38
|
import i18n from "i18next";
|
|
39
|
-
const TOAST_LIMIT = 1;
|
|
40
|
-
const TOAST_REMOVE_DELAY = 1e6;
|
|
41
|
-
let count = 0;
|
|
42
|
-
function genId() {
|
|
43
|
-
count = (count + 1) % Number.MAX_SAFE_INTEGER;
|
|
44
|
-
return count.toString();
|
|
45
|
-
}
|
|
46
|
-
const toastTimeouts = /* @__PURE__ */ new Map();
|
|
47
|
-
const addToRemoveQueue = (toastId) => {
|
|
48
|
-
if (toastTimeouts.has(toastId)) {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
const timeout = setTimeout(() => {
|
|
52
|
-
toastTimeouts.delete(toastId);
|
|
53
|
-
dispatch({
|
|
54
|
-
type: "REMOVE_TOAST",
|
|
55
|
-
toastId
|
|
56
|
-
});
|
|
57
|
-
}, TOAST_REMOVE_DELAY);
|
|
58
|
-
toastTimeouts.set(toastId, timeout);
|
|
59
|
-
};
|
|
60
|
-
const reducer = (state, action) => {
|
|
61
|
-
switch (action.type) {
|
|
62
|
-
case "ADD_TOAST":
|
|
63
|
-
return {
|
|
64
|
-
...state,
|
|
65
|
-
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
|
|
66
|
-
};
|
|
67
|
-
case "UPDATE_TOAST":
|
|
68
|
-
return {
|
|
69
|
-
...state,
|
|
70
|
-
toasts: state.toasts.map(
|
|
71
|
-
(t2) => t2.id === action.toast.id ? { ...t2, ...action.toast } : t2
|
|
72
|
-
)
|
|
73
|
-
};
|
|
74
|
-
case "DISMISS_TOAST": {
|
|
75
|
-
const { toastId } = action;
|
|
76
|
-
if (toastId) {
|
|
77
|
-
addToRemoveQueue(toastId);
|
|
78
|
-
} else {
|
|
79
|
-
state.toasts.forEach((toast2) => {
|
|
80
|
-
addToRemoveQueue(toast2.id);
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
return {
|
|
84
|
-
...state,
|
|
85
|
-
toasts: state.toasts.map(
|
|
86
|
-
(t2) => t2.id === toastId || toastId === void 0 ? {
|
|
87
|
-
...t2,
|
|
88
|
-
open: false
|
|
89
|
-
} : t2
|
|
90
|
-
)
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
case "REMOVE_TOAST":
|
|
94
|
-
if (action.toastId === void 0) {
|
|
95
|
-
return {
|
|
96
|
-
...state,
|
|
97
|
-
toasts: []
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
return {
|
|
101
|
-
...state,
|
|
102
|
-
toasts: state.toasts.filter((t2) => t2.id !== action.toastId)
|
|
103
|
-
};
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
const listeners = [];
|
|
107
|
-
let memoryState = { toasts: [] };
|
|
108
|
-
function dispatch(action) {
|
|
109
|
-
memoryState = reducer(memoryState, action);
|
|
110
|
-
listeners.forEach((listener) => {
|
|
111
|
-
listener(memoryState);
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
function toast({ ...props }) {
|
|
115
|
-
const id = genId();
|
|
116
|
-
const update = (props2) => dispatch({
|
|
117
|
-
type: "UPDATE_TOAST",
|
|
118
|
-
toast: { ...props2, id }
|
|
119
|
-
});
|
|
120
|
-
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
|
|
121
|
-
dispatch({
|
|
122
|
-
type: "ADD_TOAST",
|
|
123
|
-
toast: {
|
|
124
|
-
...props,
|
|
125
|
-
id,
|
|
126
|
-
open: true,
|
|
127
|
-
onOpenChange: (open) => {
|
|
128
|
-
if (!open) dismiss();
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
return {
|
|
133
|
-
id,
|
|
134
|
-
dismiss,
|
|
135
|
-
update
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
function useToast() {
|
|
139
|
-
const [state, setState] = React.useState(memoryState);
|
|
140
|
-
React.useEffect(() => {
|
|
141
|
-
listeners.push(setState);
|
|
142
|
-
return () => {
|
|
143
|
-
const index = listeners.indexOf(setState);
|
|
144
|
-
if (index > -1) {
|
|
145
|
-
listeners.splice(index, 1);
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
}, [state]);
|
|
149
|
-
return {
|
|
150
|
-
...state,
|
|
151
|
-
toast,
|
|
152
|
-
dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
|
|
153
|
-
};
|
|
154
|
-
}
|
|
155
|
-
function cn(...inputs) {
|
|
156
|
-
return twMerge(clsx(inputs));
|
|
157
|
-
}
|
|
158
|
-
const ToastProvider = ToastPrimitives.Provider;
|
|
159
|
-
const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
160
|
-
ToastPrimitives.Viewport,
|
|
161
|
-
{
|
|
162
|
-
ref,
|
|
163
|
-
className: cn(
|
|
164
|
-
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-0 sm:right-0 sm:bottom-auto sm:flex-col md:max-w-[420px]",
|
|
165
|
-
className
|
|
166
|
-
),
|
|
167
|
-
...props
|
|
168
|
-
}
|
|
169
|
-
));
|
|
170
|
-
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
171
|
-
const toastVariants = cva(
|
|
172
|
-
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
173
|
-
{
|
|
174
|
-
variants: {
|
|
175
|
-
variant: {
|
|
176
|
-
default: "border bg-background text-foreground",
|
|
177
|
-
destructive: "destructive group border-destructive bg-destructive text-destructive-foreground"
|
|
178
|
-
}
|
|
179
|
-
},
|
|
180
|
-
defaultVariants: {
|
|
181
|
-
variant: "default"
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
);
|
|
185
|
-
const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
|
|
186
|
-
return /* @__PURE__ */ jsx(
|
|
187
|
-
ToastPrimitives.Root,
|
|
188
|
-
{
|
|
189
|
-
ref,
|
|
190
|
-
className: cn(toastVariants({ variant }), className),
|
|
191
|
-
...props
|
|
192
|
-
}
|
|
193
|
-
);
|
|
194
|
-
});
|
|
195
|
-
Toast.displayName = ToastPrimitives.Root.displayName;
|
|
196
|
-
const ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
197
|
-
ToastPrimitives.Action,
|
|
198
|
-
{
|
|
199
|
-
ref,
|
|
200
|
-
className: cn(
|
|
201
|
-
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
|
202
|
-
className
|
|
203
|
-
),
|
|
204
|
-
...props
|
|
205
|
-
}
|
|
206
|
-
));
|
|
207
|
-
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
|
208
|
-
const ToastClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
209
|
-
ToastPrimitives.Close,
|
|
210
|
-
{
|
|
211
|
-
ref,
|
|
212
|
-
className: cn(
|
|
213
|
-
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
|
214
|
-
className
|
|
215
|
-
),
|
|
216
|
-
"toast-close": "",
|
|
217
|
-
...props,
|
|
218
|
-
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
219
|
-
}
|
|
220
|
-
));
|
|
221
|
-
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
|
222
|
-
const ToastTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
223
|
-
ToastPrimitives.Title,
|
|
224
|
-
{
|
|
225
|
-
ref,
|
|
226
|
-
className: cn("text-sm font-semibold [&+div]:text-xs", className),
|
|
227
|
-
...props
|
|
228
|
-
}
|
|
229
|
-
));
|
|
230
|
-
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
|
231
|
-
const ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
232
|
-
ToastPrimitives.Description,
|
|
233
|
-
{
|
|
234
|
-
ref,
|
|
235
|
-
className: cn("text-sm opacity-90", className),
|
|
236
|
-
...props
|
|
237
|
-
}
|
|
238
|
-
));
|
|
239
|
-
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
|
240
|
-
function Toaster() {
|
|
241
|
-
const { toasts } = useToast();
|
|
242
|
-
return /* @__PURE__ */ jsxs(ToastProvider, { children: [
|
|
243
|
-
toasts.map(function({ id, title: title2, description: description2, action, ...props }) {
|
|
244
|
-
return /* @__PURE__ */ jsxs(Toast, { ...props, children: [
|
|
245
|
-
/* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
|
|
246
|
-
title2 && /* @__PURE__ */ jsx(ToastTitle, { children: title2 }),
|
|
247
|
-
description2 && /* @__PURE__ */ jsx(ToastDescription, { children: description2 })
|
|
248
|
-
] }),
|
|
249
|
-
action,
|
|
250
|
-
/* @__PURE__ */ jsx(ToastClose, {})
|
|
251
|
-
] }, id);
|
|
252
|
-
}),
|
|
253
|
-
/* @__PURE__ */ jsx(ToastViewport, {})
|
|
254
|
-
] });
|
|
255
|
-
}
|
|
256
|
-
const H2 = ({ children }) => {
|
|
257
|
-
return /* @__PURE__ */ jsx(
|
|
258
|
-
"h2",
|
|
259
|
-
{
|
|
260
|
-
className: "scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0",
|
|
261
|
-
children
|
|
262
|
-
}
|
|
263
|
-
);
|
|
264
|
-
};
|
|
265
|
-
const H3 = ({ children }) => {
|
|
266
|
-
return /* @__PURE__ */ jsx("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight", children });
|
|
267
|
-
};
|
|
268
|
-
const P = ({ children }) => {
|
|
269
|
-
return /* @__PURE__ */ jsx("p", { className: "leading-7 [&:not(:first-child)]:mt-6", children });
|
|
270
|
-
};
|
|
271
|
-
const SpinLoader = ({
|
|
272
|
-
size = 35,
|
|
273
|
-
color = "black",
|
|
274
|
-
speed = 0.9,
|
|
275
|
-
strokeWidth = 3.5,
|
|
276
|
-
text,
|
|
277
|
-
textSpeed = 2e3
|
|
278
|
-
// Default 2 seconds per text
|
|
279
|
-
}) => {
|
|
280
|
-
const [currentTextIndex, setCurrentTextIndex] = useState(0);
|
|
281
|
-
const textArray = Array.isArray(text) ? text : text ? [text] : [];
|
|
282
|
-
useEffect(() => {
|
|
283
|
-
if (textArray.length <= 1) return;
|
|
284
|
-
if (currentTextIndex >= textArray.length - 1) return;
|
|
285
|
-
const interval = setInterval(() => {
|
|
286
|
-
setCurrentTextIndex(
|
|
287
|
-
(current) => current < textArray.length - 1 ? current + 1 : current
|
|
288
|
-
);
|
|
289
|
-
}, textSpeed);
|
|
290
|
-
return () => clearInterval(interval);
|
|
291
|
-
}, [textArray.length, textSpeed, currentTextIndex]);
|
|
292
|
-
return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
293
|
-
/* @__PURE__ */ jsxs(
|
|
294
|
-
"div",
|
|
295
|
-
{
|
|
296
|
-
className: "loader-container",
|
|
297
|
-
style: {
|
|
298
|
-
"--uib-size": `${size}px`,
|
|
299
|
-
"--uib-color": color,
|
|
300
|
-
"--uib-speed": `${speed}s`,
|
|
301
|
-
"--uib-stroke": `${strokeWidth}px`
|
|
302
|
-
},
|
|
303
|
-
children: [
|
|
304
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
305
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
306
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
307
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
308
|
-
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
309
|
-
/* @__PURE__ */ jsx("div", { className: "line" })
|
|
310
|
-
]
|
|
311
|
-
}
|
|
312
|
-
),
|
|
313
|
-
textArray.length > 0 && /* @__PURE__ */ jsx(
|
|
314
|
-
"div",
|
|
315
|
-
{
|
|
316
|
-
className: "text-center text-sm text-muted-foreground animate-fade-in",
|
|
317
|
-
children: /* @__PURE__ */ jsx(H3, { children: textArray[currentTextIndex] })
|
|
318
|
-
},
|
|
319
|
-
currentTextIndex
|
|
320
|
-
),
|
|
321
|
-
/* @__PURE__ */ jsx("style", { children: `
|
|
322
|
-
.loader-container {
|
|
323
|
-
position: relative;
|
|
324
|
-
display: flex;
|
|
325
|
-
align-items: center;
|
|
326
|
-
justify-content: center;
|
|
327
|
-
height: var(--uib-size);
|
|
328
|
-
width: var(--uib-size);
|
|
329
|
-
}
|
|
330
|
-
.line {
|
|
331
|
-
position: absolute;
|
|
332
|
-
top: calc(50% - var(--uib-stroke) / 2);
|
|
333
|
-
left: 0;
|
|
334
|
-
height: var(--uib-stroke);
|
|
335
|
-
width: 100%;
|
|
336
|
-
border-radius: calc(var(--uib-stroke) / 2);
|
|
337
|
-
background-color: var(--uib-color);
|
|
338
|
-
animation: rotate var(--uib-speed) ease-in-out infinite;
|
|
339
|
-
transition: background-color 0.3s ease;
|
|
340
|
-
}
|
|
341
|
-
.line:nth-child(1) {
|
|
342
|
-
animation-delay: calc(var(--uib-speed) * -0.375);
|
|
343
|
-
}
|
|
344
|
-
.line:nth-child(2) {
|
|
345
|
-
animation-delay: calc(var(--uib-speed) * -0.375);
|
|
346
|
-
opacity: 0.8;
|
|
347
|
-
}
|
|
348
|
-
.line:nth-child(3) {
|
|
349
|
-
animation-delay: calc(var(--uib-speed) * -0.3);
|
|
350
|
-
opacity: 0.6;
|
|
351
|
-
}
|
|
352
|
-
.line:nth-child(4) {
|
|
353
|
-
animation-delay: calc(var(--uib-speed) * -0.225);
|
|
354
|
-
opacity: 0.4;
|
|
355
|
-
}
|
|
356
|
-
.line:nth-child(5) {
|
|
357
|
-
animation-delay: calc(var(--uib-speed) * -0.15);
|
|
358
|
-
opacity: 0.2;
|
|
359
|
-
}
|
|
360
|
-
.line:nth-child(6) {
|
|
361
|
-
animation-delay: calc(var(--uib-speed) * -0.075);
|
|
362
|
-
opacity: 0.1;
|
|
363
|
-
}
|
|
364
|
-
@keyframes rotate {
|
|
365
|
-
0% {
|
|
366
|
-
transform: rotate(0deg);
|
|
367
|
-
}
|
|
368
|
-
100% {
|
|
369
|
-
transform: rotate(180deg);
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
.animate-fade-in {
|
|
373
|
-
animation: fadeIn 0.5s ease-in-out;
|
|
374
|
-
}
|
|
375
|
-
@keyframes fadeIn {
|
|
376
|
-
from {
|
|
377
|
-
opacity: 0;
|
|
378
|
-
transform: translateY(5px);
|
|
379
|
-
}
|
|
380
|
-
to {
|
|
381
|
-
opacity: 1;
|
|
382
|
-
transform: translateY(0);
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
` })
|
|
386
|
-
] }) });
|
|
387
|
-
};
|
|
388
|
-
const NavigationLayout = () => {
|
|
389
|
-
return /* @__PURE__ */ jsx("div", { className: "min-h-screen flex", children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsx("main", { className: "flex-1 p-6", children: /* @__PURE__ */ jsx(Outlet, {}) }) }) });
|
|
390
|
-
};
|
|
391
39
|
const AD_ACCOUNT_PATH = "/ad-accounts";
|
|
392
40
|
const BUSINESS_PATH = "/businesses/me";
|
|
393
41
|
const BUSINESS_SEGMENT_PATH = "/segments";
|
|
@@ -550,6 +198,138 @@ const useSegment = () => {
|
|
|
550
198
|
refetchSegmentsConditions: segmentsConditionsQuery.refetch
|
|
551
199
|
};
|
|
552
200
|
};
|
|
201
|
+
const H2 = ({ children }) => {
|
|
202
|
+
return /* @__PURE__ */ jsx(
|
|
203
|
+
"h2",
|
|
204
|
+
{
|
|
205
|
+
className: "scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0",
|
|
206
|
+
children
|
|
207
|
+
}
|
|
208
|
+
);
|
|
209
|
+
};
|
|
210
|
+
const H3 = ({ children }) => {
|
|
211
|
+
return /* @__PURE__ */ jsx("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight", children });
|
|
212
|
+
};
|
|
213
|
+
const P = ({ children }) => {
|
|
214
|
+
return /* @__PURE__ */ jsx("p", { className: "leading-7 [&:not(:first-child)]:mt-6", children });
|
|
215
|
+
};
|
|
216
|
+
const SpinLoader = ({
|
|
217
|
+
size = 35,
|
|
218
|
+
color = "black",
|
|
219
|
+
speed = 0.9,
|
|
220
|
+
strokeWidth = 3.5,
|
|
221
|
+
text,
|
|
222
|
+
textSpeed = 2e3
|
|
223
|
+
// Default 2 seconds per text
|
|
224
|
+
}) => {
|
|
225
|
+
const [currentTextIndex, setCurrentTextIndex] = useState(0);
|
|
226
|
+
const textArray = Array.isArray(text) ? text : text ? [text] : [];
|
|
227
|
+
useEffect(() => {
|
|
228
|
+
if (textArray.length <= 1) return;
|
|
229
|
+
if (currentTextIndex >= textArray.length - 1) return;
|
|
230
|
+
const interval = setInterval(() => {
|
|
231
|
+
setCurrentTextIndex(
|
|
232
|
+
(current) => current < textArray.length - 1 ? current + 1 : current
|
|
233
|
+
);
|
|
234
|
+
}, textSpeed);
|
|
235
|
+
return () => clearInterval(interval);
|
|
236
|
+
}, [textArray.length, textSpeed, currentTextIndex]);
|
|
237
|
+
return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
238
|
+
/* @__PURE__ */ jsxs(
|
|
239
|
+
"div",
|
|
240
|
+
{
|
|
241
|
+
className: "loader-container",
|
|
242
|
+
style: {
|
|
243
|
+
"--uib-size": `${size}px`,
|
|
244
|
+
"--uib-color": color,
|
|
245
|
+
"--uib-speed": `${speed}s`,
|
|
246
|
+
"--uib-stroke": `${strokeWidth}px`
|
|
247
|
+
},
|
|
248
|
+
children: [
|
|
249
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
250
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
251
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
252
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
253
|
+
/* @__PURE__ */ jsx("div", { className: "line" }),
|
|
254
|
+
/* @__PURE__ */ jsx("div", { className: "line" })
|
|
255
|
+
]
|
|
256
|
+
}
|
|
257
|
+
),
|
|
258
|
+
textArray.length > 0 && /* @__PURE__ */ jsx(
|
|
259
|
+
"div",
|
|
260
|
+
{
|
|
261
|
+
className: "text-center text-sm text-muted-foreground animate-fade-in",
|
|
262
|
+
children: /* @__PURE__ */ jsx(H3, { children: textArray[currentTextIndex] })
|
|
263
|
+
},
|
|
264
|
+
currentTextIndex
|
|
265
|
+
),
|
|
266
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
267
|
+
.loader-container {
|
|
268
|
+
position: relative;
|
|
269
|
+
display: flex;
|
|
270
|
+
align-items: center;
|
|
271
|
+
justify-content: center;
|
|
272
|
+
height: var(--uib-size);
|
|
273
|
+
width: var(--uib-size);
|
|
274
|
+
}
|
|
275
|
+
.line {
|
|
276
|
+
position: absolute;
|
|
277
|
+
top: calc(50% - var(--uib-stroke) / 2);
|
|
278
|
+
left: 0;
|
|
279
|
+
height: var(--uib-stroke);
|
|
280
|
+
width: 100%;
|
|
281
|
+
border-radius: calc(var(--uib-stroke) / 2);
|
|
282
|
+
background-color: var(--uib-color);
|
|
283
|
+
animation: rotate var(--uib-speed) ease-in-out infinite;
|
|
284
|
+
transition: background-color 0.3s ease;
|
|
285
|
+
}
|
|
286
|
+
.line:nth-child(1) {
|
|
287
|
+
animation-delay: calc(var(--uib-speed) * -0.375);
|
|
288
|
+
}
|
|
289
|
+
.line:nth-child(2) {
|
|
290
|
+
animation-delay: calc(var(--uib-speed) * -0.375);
|
|
291
|
+
opacity: 0.8;
|
|
292
|
+
}
|
|
293
|
+
.line:nth-child(3) {
|
|
294
|
+
animation-delay: calc(var(--uib-speed) * -0.3);
|
|
295
|
+
opacity: 0.6;
|
|
296
|
+
}
|
|
297
|
+
.line:nth-child(4) {
|
|
298
|
+
animation-delay: calc(var(--uib-speed) * -0.225);
|
|
299
|
+
opacity: 0.4;
|
|
300
|
+
}
|
|
301
|
+
.line:nth-child(5) {
|
|
302
|
+
animation-delay: calc(var(--uib-speed) * -0.15);
|
|
303
|
+
opacity: 0.2;
|
|
304
|
+
}
|
|
305
|
+
.line:nth-child(6) {
|
|
306
|
+
animation-delay: calc(var(--uib-speed) * -0.075);
|
|
307
|
+
opacity: 0.1;
|
|
308
|
+
}
|
|
309
|
+
@keyframes rotate {
|
|
310
|
+
0% {
|
|
311
|
+
transform: rotate(0deg);
|
|
312
|
+
}
|
|
313
|
+
100% {
|
|
314
|
+
transform: rotate(180deg);
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
.animate-fade-in {
|
|
318
|
+
animation: fadeIn 0.5s ease-in-out;
|
|
319
|
+
}
|
|
320
|
+
@keyframes fadeIn {
|
|
321
|
+
from {
|
|
322
|
+
opacity: 0;
|
|
323
|
+
transform: translateY(5px);
|
|
324
|
+
}
|
|
325
|
+
to {
|
|
326
|
+
opacity: 1;
|
|
327
|
+
transform: translateY(0);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
` })
|
|
331
|
+
] }) });
|
|
332
|
+
};
|
|
553
333
|
const TailwindClassDefinitions = {
|
|
554
334
|
PrimaryButton: "bg-purple-600 text-white rounded-lg",
|
|
555
335
|
PrimaryButtonHover: "hover:bg-purple-700",
|
|
@@ -566,6 +346,9 @@ const mergeTailwindClassDefinitions = (passedInDefinitions) => {
|
|
|
566
346
|
const mergeIconDefinitions = (passedInDefinitions) => {
|
|
567
347
|
return { ...IconDefinitions, ...passedInDefinitions || {} };
|
|
568
348
|
};
|
|
349
|
+
function cn(...inputs) {
|
|
350
|
+
return twMerge(clsx(inputs));
|
|
351
|
+
}
|
|
569
352
|
const ActionButtons = ({ onClose, setClickedCreate, isDisabled, tailwindClassDefinitions }) => {
|
|
570
353
|
return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end space-x-4", children: [
|
|
571
354
|
/* @__PURE__ */ jsx(
|
|
@@ -871,6 +654,223 @@ const SegementBuilder = ({
|
|
|
871
654
|
] })
|
|
872
655
|
] });
|
|
873
656
|
};
|
|
657
|
+
const TOAST_LIMIT = 1;
|
|
658
|
+
const TOAST_REMOVE_DELAY = 1e6;
|
|
659
|
+
let count = 0;
|
|
660
|
+
function genId() {
|
|
661
|
+
count = (count + 1) % Number.MAX_SAFE_INTEGER;
|
|
662
|
+
return count.toString();
|
|
663
|
+
}
|
|
664
|
+
const toastTimeouts = /* @__PURE__ */ new Map();
|
|
665
|
+
const addToRemoveQueue = (toastId) => {
|
|
666
|
+
if (toastTimeouts.has(toastId)) {
|
|
667
|
+
return;
|
|
668
|
+
}
|
|
669
|
+
const timeout = setTimeout(() => {
|
|
670
|
+
toastTimeouts.delete(toastId);
|
|
671
|
+
dispatch({
|
|
672
|
+
type: "REMOVE_TOAST",
|
|
673
|
+
toastId
|
|
674
|
+
});
|
|
675
|
+
}, TOAST_REMOVE_DELAY);
|
|
676
|
+
toastTimeouts.set(toastId, timeout);
|
|
677
|
+
};
|
|
678
|
+
const reducer = (state, action) => {
|
|
679
|
+
switch (action.type) {
|
|
680
|
+
case "ADD_TOAST":
|
|
681
|
+
return {
|
|
682
|
+
...state,
|
|
683
|
+
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
|
|
684
|
+
};
|
|
685
|
+
case "UPDATE_TOAST":
|
|
686
|
+
return {
|
|
687
|
+
...state,
|
|
688
|
+
toasts: state.toasts.map(
|
|
689
|
+
(t2) => t2.id === action.toast.id ? { ...t2, ...action.toast } : t2
|
|
690
|
+
)
|
|
691
|
+
};
|
|
692
|
+
case "DISMISS_TOAST": {
|
|
693
|
+
const { toastId } = action;
|
|
694
|
+
if (toastId) {
|
|
695
|
+
addToRemoveQueue(toastId);
|
|
696
|
+
} else {
|
|
697
|
+
state.toasts.forEach((toast2) => {
|
|
698
|
+
addToRemoveQueue(toast2.id);
|
|
699
|
+
});
|
|
700
|
+
}
|
|
701
|
+
return {
|
|
702
|
+
...state,
|
|
703
|
+
toasts: state.toasts.map(
|
|
704
|
+
(t2) => t2.id === toastId || toastId === void 0 ? {
|
|
705
|
+
...t2,
|
|
706
|
+
open: false
|
|
707
|
+
} : t2
|
|
708
|
+
)
|
|
709
|
+
};
|
|
710
|
+
}
|
|
711
|
+
case "REMOVE_TOAST":
|
|
712
|
+
if (action.toastId === void 0) {
|
|
713
|
+
return {
|
|
714
|
+
...state,
|
|
715
|
+
toasts: []
|
|
716
|
+
};
|
|
717
|
+
}
|
|
718
|
+
return {
|
|
719
|
+
...state,
|
|
720
|
+
toasts: state.toasts.filter((t2) => t2.id !== action.toastId)
|
|
721
|
+
};
|
|
722
|
+
}
|
|
723
|
+
};
|
|
724
|
+
const listeners = [];
|
|
725
|
+
let memoryState = { toasts: [] };
|
|
726
|
+
function dispatch(action) {
|
|
727
|
+
memoryState = reducer(memoryState, action);
|
|
728
|
+
listeners.forEach((listener) => {
|
|
729
|
+
listener(memoryState);
|
|
730
|
+
});
|
|
731
|
+
}
|
|
732
|
+
function toast({ ...props }) {
|
|
733
|
+
const id = genId();
|
|
734
|
+
const update = (props2) => dispatch({
|
|
735
|
+
type: "UPDATE_TOAST",
|
|
736
|
+
toast: { ...props2, id }
|
|
737
|
+
});
|
|
738
|
+
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
|
|
739
|
+
dispatch({
|
|
740
|
+
type: "ADD_TOAST",
|
|
741
|
+
toast: {
|
|
742
|
+
...props,
|
|
743
|
+
id,
|
|
744
|
+
open: true,
|
|
745
|
+
onOpenChange: (open) => {
|
|
746
|
+
if (!open) dismiss();
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
});
|
|
750
|
+
return {
|
|
751
|
+
id,
|
|
752
|
+
dismiss,
|
|
753
|
+
update
|
|
754
|
+
};
|
|
755
|
+
}
|
|
756
|
+
function useToast() {
|
|
757
|
+
const [state, setState] = React.useState(memoryState);
|
|
758
|
+
React.useEffect(() => {
|
|
759
|
+
listeners.push(setState);
|
|
760
|
+
return () => {
|
|
761
|
+
const index = listeners.indexOf(setState);
|
|
762
|
+
if (index > -1) {
|
|
763
|
+
listeners.splice(index, 1);
|
|
764
|
+
}
|
|
765
|
+
};
|
|
766
|
+
}, [state]);
|
|
767
|
+
return {
|
|
768
|
+
...state,
|
|
769
|
+
toast,
|
|
770
|
+
dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
|
|
771
|
+
};
|
|
772
|
+
}
|
|
773
|
+
const ToastProvider = ToastPrimitives.Provider;
|
|
774
|
+
const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
775
|
+
ToastPrimitives.Viewport,
|
|
776
|
+
{
|
|
777
|
+
ref,
|
|
778
|
+
className: cn(
|
|
779
|
+
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-0 sm:right-0 sm:bottom-auto sm:flex-col md:max-w-[420px]",
|
|
780
|
+
className
|
|
781
|
+
),
|
|
782
|
+
...props
|
|
783
|
+
}
|
|
784
|
+
));
|
|
785
|
+
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
786
|
+
const toastVariants = cva(
|
|
787
|
+
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
788
|
+
{
|
|
789
|
+
variants: {
|
|
790
|
+
variant: {
|
|
791
|
+
default: "border bg-background text-foreground",
|
|
792
|
+
destructive: "destructive group border-destructive bg-destructive text-destructive-foreground"
|
|
793
|
+
}
|
|
794
|
+
},
|
|
795
|
+
defaultVariants: {
|
|
796
|
+
variant: "default"
|
|
797
|
+
}
|
|
798
|
+
}
|
|
799
|
+
);
|
|
800
|
+
const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
|
|
801
|
+
return /* @__PURE__ */ jsx(
|
|
802
|
+
ToastPrimitives.Root,
|
|
803
|
+
{
|
|
804
|
+
ref,
|
|
805
|
+
className: cn(toastVariants({ variant }), className),
|
|
806
|
+
...props
|
|
807
|
+
}
|
|
808
|
+
);
|
|
809
|
+
});
|
|
810
|
+
Toast.displayName = ToastPrimitives.Root.displayName;
|
|
811
|
+
const ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
812
|
+
ToastPrimitives.Action,
|
|
813
|
+
{
|
|
814
|
+
ref,
|
|
815
|
+
className: cn(
|
|
816
|
+
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
|
817
|
+
className
|
|
818
|
+
),
|
|
819
|
+
...props
|
|
820
|
+
}
|
|
821
|
+
));
|
|
822
|
+
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
|
823
|
+
const ToastClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
824
|
+
ToastPrimitives.Close,
|
|
825
|
+
{
|
|
826
|
+
ref,
|
|
827
|
+
className: cn(
|
|
828
|
+
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
|
829
|
+
className
|
|
830
|
+
),
|
|
831
|
+
"toast-close": "",
|
|
832
|
+
...props,
|
|
833
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
834
|
+
}
|
|
835
|
+
));
|
|
836
|
+
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
|
837
|
+
const ToastTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
838
|
+
ToastPrimitives.Title,
|
|
839
|
+
{
|
|
840
|
+
ref,
|
|
841
|
+
className: cn("text-sm font-semibold [&+div]:text-xs", className),
|
|
842
|
+
...props
|
|
843
|
+
}
|
|
844
|
+
));
|
|
845
|
+
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
|
846
|
+
const ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
847
|
+
ToastPrimitives.Description,
|
|
848
|
+
{
|
|
849
|
+
ref,
|
|
850
|
+
className: cn("text-sm opacity-90", className),
|
|
851
|
+
...props
|
|
852
|
+
}
|
|
853
|
+
));
|
|
854
|
+
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
|
855
|
+
function Toaster() {
|
|
856
|
+
const { toasts } = useToast();
|
|
857
|
+
return /* @__PURE__ */ jsxs(ToastProvider, { children: [
|
|
858
|
+
toasts.map(function({ id, title: title2, description: description2, action, ...props }) {
|
|
859
|
+
return /* @__PURE__ */ jsxs(Toast, { ...props, children: [
|
|
860
|
+
/* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
|
|
861
|
+
title2 && /* @__PURE__ */ jsx(ToastTitle, { children: title2 }),
|
|
862
|
+
description2 && /* @__PURE__ */ jsx(ToastDescription, { children: description2 })
|
|
863
|
+
] }),
|
|
864
|
+
action,
|
|
865
|
+
/* @__PURE__ */ jsx(ToastClose, {})
|
|
866
|
+
] }, id);
|
|
867
|
+
}),
|
|
868
|
+
/* @__PURE__ */ jsx(ToastViewport, {})
|
|
869
|
+
] });
|
|
870
|
+
}
|
|
871
|
+
const NavigationLayout = () => {
|
|
872
|
+
return /* @__PURE__ */ jsx("div", { className: "min-h-screen flex", children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsx("main", { className: "flex-1 p-6", children: /* @__PURE__ */ jsx(Outlet, {}) }) }) });
|
|
873
|
+
};
|
|
874
874
|
const s = (e, s2, o2) => {
|
|
875
875
|
if (e && "reportValidity" in e) {
|
|
876
876
|
const r2 = get(o2, s2);
|
|
@@ -17056,5 +17056,6 @@ const ReachProvider = ({
|
|
|
17056
17056
|
};
|
|
17057
17057
|
export {
|
|
17058
17058
|
Button,
|
|
17059
|
-
ReachProvider
|
|
17059
|
+
ReachProvider,
|
|
17060
|
+
SegementBuilder
|
|
17060
17061
|
};
|