framepexls-ui-lib 2.2.3 → 2.2.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/AccessibilityFab.d.mts +6 -1
- package/dist/AccessibilityFab.d.ts +6 -1
- package/dist/AccessibilityFab.js +27 -14
- package/dist/AccessibilityFab.mjs +28 -15
- package/dist/AppTopbar.js +1 -1
- package/dist/AppTopbar.mjs +1 -1
- package/dist/Checkbox.d.mts +1 -1
- package/dist/Checkbox.d.ts +1 -1
- package/dist/Select.d.mts +3 -1
- package/dist/Select.d.ts +3 -1
- package/dist/Select.js +12 -2
- package/dist/Select.mjs +12 -2
- package/dist/Sidebar.js +3 -3
- package/dist/Sidebar.mjs +3 -3
- package/dist/SupportChatWidget.d.mts +2 -0
- package/dist/SupportChatWidget.d.ts +2 -0
- package/dist/SupportChatWidget.js +5 -3
- package/dist/SupportChatWidget.mjs +5 -3
- package/dist/theme/ThemeScript.d.mts +7 -1
- package/dist/theme/ThemeScript.d.ts +7 -1
- package/dist/theme/ThemeScript.js +9 -3
- package/dist/theme/ThemeScript.mjs +9 -3
- package/package.json +1 -1
|
@@ -9,15 +9,20 @@ type AccessibilityFabLabels = {
|
|
|
9
9
|
open?: string;
|
|
10
10
|
appearanceTitle?: string;
|
|
11
11
|
appearanceDescription?: string;
|
|
12
|
+
fontFamilyTitle?: string;
|
|
13
|
+
fontFamilyDescription?: string;
|
|
12
14
|
fontSizeTitle?: string;
|
|
13
15
|
fontSizeDescription?: string;
|
|
14
16
|
};
|
|
15
17
|
type AccessibilityFabProps = {
|
|
16
18
|
className?: string;
|
|
19
|
+
fontFamilyControl?: React__default.ReactNode;
|
|
17
20
|
labels?: AccessibilityFabLabels;
|
|
21
|
+
position?: "bottom-left" | "bottom-right";
|
|
22
|
+
showDescriptions?: boolean;
|
|
18
23
|
themeToggleProps?: Omit<ThemeToggleProps, "className">;
|
|
19
24
|
fontSizeProps?: Omit<FontSizeControllerProps, "className">;
|
|
20
25
|
};
|
|
21
|
-
declare function AccessibilityFab({ className, labels, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
|
|
26
|
+
declare function AccessibilityFab({ className, fontFamilyControl, labels, position, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
|
|
22
27
|
|
|
23
28
|
export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };
|
|
@@ -9,15 +9,20 @@ type AccessibilityFabLabels = {
|
|
|
9
9
|
open?: string;
|
|
10
10
|
appearanceTitle?: string;
|
|
11
11
|
appearanceDescription?: string;
|
|
12
|
+
fontFamilyTitle?: string;
|
|
13
|
+
fontFamilyDescription?: string;
|
|
12
14
|
fontSizeTitle?: string;
|
|
13
15
|
fontSizeDescription?: string;
|
|
14
16
|
};
|
|
15
17
|
type AccessibilityFabProps = {
|
|
16
18
|
className?: string;
|
|
19
|
+
fontFamilyControl?: React__default.ReactNode;
|
|
17
20
|
labels?: AccessibilityFabLabels;
|
|
21
|
+
position?: "bottom-left" | "bottom-right";
|
|
22
|
+
showDescriptions?: boolean;
|
|
18
23
|
themeToggleProps?: Omit<ThemeToggleProps, "className">;
|
|
19
24
|
fontSizeProps?: Omit<FontSizeControllerProps, "className">;
|
|
20
25
|
};
|
|
21
|
-
declare function AccessibilityFab({ className, labels, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
|
|
26
|
+
declare function AccessibilityFab({ className, fontFamilyControl, labels, position, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
|
|
22
27
|
|
|
23
28
|
export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };
|
package/dist/AccessibilityFab.js
CHANGED
|
@@ -41,11 +41,14 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
|
|
|
41
41
|
var import_iconos = require("./iconos");
|
|
42
42
|
function AccessibilityFab({
|
|
43
43
|
className,
|
|
44
|
+
fontFamilyControl,
|
|
44
45
|
labels,
|
|
46
|
+
position = "bottom-right",
|
|
47
|
+
showDescriptions = false,
|
|
45
48
|
themeToggleProps,
|
|
46
49
|
fontSizeProps
|
|
47
50
|
}) {
|
|
48
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
51
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
49
52
|
const [open, setOpen] = import_react.default.useState(false);
|
|
50
53
|
const reduceMotion = (0, import_framer_motion.useReducedMotion)();
|
|
51
54
|
const btnRef = import_react.default.useRef(null);
|
|
@@ -57,8 +60,10 @@ function AccessibilityFab({
|
|
|
57
60
|
open: (_d = labels == null ? void 0 : labels.open) != null ? _d : "Abrir accesibilidad",
|
|
58
61
|
appearanceTitle: (_e = labels == null ? void 0 : labels.appearanceTitle) != null ? _e : "Apariencia",
|
|
59
62
|
appearanceDescription: (_f = labels == null ? void 0 : labels.appearanceDescription) != null ? _f : "Alterna entre modo claro y oscuro",
|
|
60
|
-
|
|
61
|
-
|
|
63
|
+
fontFamilyTitle: (_g = labels == null ? void 0 : labels.fontFamilyTitle) != null ? _g : "Fuente",
|
|
64
|
+
fontFamilyDescription: (_h = labels == null ? void 0 : labels.fontFamilyDescription) != null ? _h : "Elige la familia tipogr\xE1fica de la app",
|
|
65
|
+
fontSizeTitle: (_i = labels == null ? void 0 : labels.fontSizeTitle) != null ? _i : "Tama\xF1o del texto",
|
|
66
|
+
fontSizeDescription: (_j = labels == null ? void 0 : labels.fontSizeDescription) != null ? _j : "Mejora la lectura con un ajuste r\xE1pido"
|
|
62
67
|
};
|
|
63
68
|
import_react.default.useEffect(() => {
|
|
64
69
|
if (!open) return;
|
|
@@ -82,7 +87,8 @@ function AccessibilityFab({
|
|
|
82
87
|
window.removeEventListener("pointerdown", onPointerDown, true);
|
|
83
88
|
};
|
|
84
89
|
}, [open]);
|
|
85
|
-
|
|
90
|
+
const positionClass = position === "bottom-left" ? "fixed bottom-5 left-5 z-[2147483645] flex flex-row-reverse items-end gap-3" : "fixed bottom-5 right-5 z-[2147483645] flex items-end gap-3";
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: [positionClass, className != null ? className : ""].join(" "), children: [
|
|
86
92
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
87
93
|
import_framer_motion.m.div,
|
|
88
94
|
{
|
|
@@ -91,12 +97,12 @@ function AccessibilityFab({
|
|
|
91
97
|
animate: reduceMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 },
|
|
92
98
|
exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98 },
|
|
93
99
|
transition: reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" },
|
|
94
|
-
className: "w-[min(
|
|
100
|
+
className: "w-[min(21rem,calc(100vw-4.8rem))] overflow-hidden rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] shadow-[0_24px_58px_rgba(6,19,22,0.14)] backdrop-blur-xl dark:shadow-[0_24px_58px_rgba(0,0,0,0.3)]",
|
|
95
101
|
children: [
|
|
96
102
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 border-b border-[color-mix(in_oklab,var(--border)_70%,transparent)] px-4 py-3", children: [
|
|
97
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
98
104
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.title }),
|
|
99
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: text.description })
|
|
105
|
+
showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: text.description }) : null
|
|
100
106
|
] }),
|
|
101
107
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
102
108
|
import_Button.default,
|
|
@@ -104,7 +110,7 @@ function AccessibilityFab({
|
|
|
104
110
|
unstyled: true,
|
|
105
111
|
type: "button",
|
|
106
112
|
onClick: () => setOpen(false),
|
|
107
|
-
className: "grid size-9 place-items-center rounded-2xl border border-[
|
|
113
|
+
className: "grid size-9 place-items-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_80%,transparent)] text-[var(--foreground)] transition hover:border-[color-mix(in_oklab,var(--primary)_36%,var(--border))] hover:bg-[var(--surface)]",
|
|
108
114
|
"aria-label": text.close,
|
|
109
115
|
title: text.close,
|
|
110
116
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CloseIcon, { className: "size-4", "aria-hidden": true })
|
|
@@ -112,20 +118,27 @@ function AccessibilityFab({
|
|
|
112
118
|
)
|
|
113
119
|
] }),
|
|
114
120
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3 p-4", children: [
|
|
115
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[
|
|
121
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_72%,transparent)] p-3", children: [
|
|
116
122
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
|
|
117
123
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.appearanceTitle }),
|
|
118
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription })
|
|
124
|
+
showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription }) : null
|
|
119
125
|
] }),
|
|
120
126
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeToggle.default, { cycle: ["light", "dark"], ...themeToggleProps })
|
|
121
127
|
] }),
|
|
122
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_72%,transparent)] p-3", children: [
|
|
123
129
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
|
|
124
130
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontSizeTitle }),
|
|
125
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription })
|
|
131
|
+
showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription }) : null
|
|
126
132
|
] }),
|
|
127
133
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FontSizeController.default, { ...fontSizeProps })
|
|
128
|
-
] })
|
|
134
|
+
] }),
|
|
135
|
+
fontFamilyControl ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_72%,transparent)] p-3", children: [
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
|
|
137
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontFamilyTitle }),
|
|
138
|
+
showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontFamilyDescription }) : null
|
|
139
|
+
] }),
|
|
140
|
+
fontFamilyControl
|
|
141
|
+
] }) : null
|
|
129
142
|
] })
|
|
130
143
|
]
|
|
131
144
|
}
|
|
@@ -137,10 +150,10 @@ function AccessibilityFab({
|
|
|
137
150
|
ref: btnRef,
|
|
138
151
|
type: "button",
|
|
139
152
|
onClick: () => setOpen((value) => !value),
|
|
140
|
-
className: "group grid size-12 place-items-center rounded-2xl border border-[
|
|
153
|
+
className: "group grid size-12 place-items-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] text-[var(--primary)] shadow-[0_20px_48px_rgba(6,19,22,0.13)] backdrop-blur-xl transition duration-200 hover:-translate-y-0.5 hover:border-[color-mix(in_oklab,var(--primary)_38%,var(--border))] hover:bg-[var(--surface)] hover:text-[var(--foreground)] hover:shadow-[0_24px_58px_rgba(6,19,22,0.18)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--primary)_42%,transparent)] dark:shadow-[0_20px_48px_rgba(0,0,0,0.28)] dark:hover:shadow-[0_24px_58px_rgba(0,0,0,0.36)]",
|
|
141
154
|
"aria-label": open ? text.close : text.open,
|
|
142
155
|
title: open ? text.close : text.title,
|
|
143
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.
|
|
156
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.PersonArmsSpreadIcon, { className: "size-5 opacity-95 transition group-hover:scale-105 group-hover:opacity-100", "aria-hidden": true })
|
|
144
157
|
}
|
|
145
158
|
)
|
|
146
159
|
] });
|
|
@@ -11,14 +11,17 @@ import {
|
|
|
11
11
|
import Button from "./Button.mjs";
|
|
12
12
|
import FontSizeController from "./theme/FontSizeController.mjs";
|
|
13
13
|
import ThemeToggle from "./theme/ThemeToggle.mjs";
|
|
14
|
-
import { CloseIcon,
|
|
14
|
+
import { CloseIcon, PersonArmsSpreadIcon } from "./iconos/index.mjs";
|
|
15
15
|
function AccessibilityFab({
|
|
16
16
|
className,
|
|
17
|
+
fontFamilyControl,
|
|
17
18
|
labels,
|
|
19
|
+
position = "bottom-right",
|
|
20
|
+
showDescriptions = false,
|
|
18
21
|
themeToggleProps,
|
|
19
22
|
fontSizeProps
|
|
20
23
|
}) {
|
|
21
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
24
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
22
25
|
const [open, setOpen] = React.useState(false);
|
|
23
26
|
const reduceMotion = useReducedMotion();
|
|
24
27
|
const btnRef = React.useRef(null);
|
|
@@ -30,8 +33,10 @@ function AccessibilityFab({
|
|
|
30
33
|
open: (_d = labels == null ? void 0 : labels.open) != null ? _d : "Abrir accesibilidad",
|
|
31
34
|
appearanceTitle: (_e = labels == null ? void 0 : labels.appearanceTitle) != null ? _e : "Apariencia",
|
|
32
35
|
appearanceDescription: (_f = labels == null ? void 0 : labels.appearanceDescription) != null ? _f : "Alterna entre modo claro y oscuro",
|
|
33
|
-
|
|
34
|
-
|
|
36
|
+
fontFamilyTitle: (_g = labels == null ? void 0 : labels.fontFamilyTitle) != null ? _g : "Fuente",
|
|
37
|
+
fontFamilyDescription: (_h = labels == null ? void 0 : labels.fontFamilyDescription) != null ? _h : "Elige la familia tipogr\xE1fica de la app",
|
|
38
|
+
fontSizeTitle: (_i = labels == null ? void 0 : labels.fontSizeTitle) != null ? _i : "Tama\xF1o del texto",
|
|
39
|
+
fontSizeDescription: (_j = labels == null ? void 0 : labels.fontSizeDescription) != null ? _j : "Mejora la lectura con un ajuste r\xE1pido"
|
|
35
40
|
};
|
|
36
41
|
React.useEffect(() => {
|
|
37
42
|
if (!open) return;
|
|
@@ -55,7 +60,8 @@ function AccessibilityFab({
|
|
|
55
60
|
window.removeEventListener("pointerdown", onPointerDown, true);
|
|
56
61
|
};
|
|
57
62
|
}, [open]);
|
|
58
|
-
|
|
63
|
+
const positionClass = position === "bottom-left" ? "fixed bottom-5 left-5 z-[2147483645] flex flex-row-reverse items-end gap-3" : "fixed bottom-5 right-5 z-[2147483645] flex items-end gap-3";
|
|
64
|
+
return /* @__PURE__ */ jsxs("div", { className: [positionClass, className != null ? className : ""].join(" "), children: [
|
|
59
65
|
/* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(
|
|
60
66
|
m.div,
|
|
61
67
|
{
|
|
@@ -64,12 +70,12 @@ function AccessibilityFab({
|
|
|
64
70
|
animate: reduceMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 },
|
|
65
71
|
exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98 },
|
|
66
72
|
transition: reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" },
|
|
67
|
-
className: "w-[min(
|
|
73
|
+
className: "w-[min(21rem,calc(100vw-4.8rem))] overflow-hidden rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] shadow-[0_24px_58px_rgba(6,19,22,0.14)] backdrop-blur-xl dark:shadow-[0_24px_58px_rgba(0,0,0,0.3)]",
|
|
68
74
|
children: [
|
|
69
75
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[color-mix(in_oklab,var(--border)_70%,transparent)] px-4 py-3", children: [
|
|
70
76
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
71
77
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.title }),
|
|
72
|
-
/* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted)]", children: text.description })
|
|
78
|
+
showDescriptions ? /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted)]", children: text.description }) : null
|
|
73
79
|
] }),
|
|
74
80
|
/* @__PURE__ */ jsx(
|
|
75
81
|
Button,
|
|
@@ -77,7 +83,7 @@ function AccessibilityFab({
|
|
|
77
83
|
unstyled: true,
|
|
78
84
|
type: "button",
|
|
79
85
|
onClick: () => setOpen(false),
|
|
80
|
-
className: "grid size-9 place-items-center rounded-2xl border border-[
|
|
86
|
+
className: "grid size-9 place-items-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_80%,transparent)] text-[var(--foreground)] transition hover:border-[color-mix(in_oklab,var(--primary)_36%,var(--border))] hover:bg-[var(--surface)]",
|
|
81
87
|
"aria-label": text.close,
|
|
82
88
|
title: text.close,
|
|
83
89
|
children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4", "aria-hidden": true })
|
|
@@ -85,20 +91,27 @@ function AccessibilityFab({
|
|
|
85
91
|
)
|
|
86
92
|
] }),
|
|
87
93
|
/* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4", children: [
|
|
88
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[
|
|
94
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_72%,transparent)] p-3", children: [
|
|
89
95
|
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
90
96
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.appearanceTitle }),
|
|
91
|
-
/* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription })
|
|
97
|
+
showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription }) : null
|
|
92
98
|
] }),
|
|
93
99
|
/* @__PURE__ */ jsx(ThemeToggle, { cycle: ["light", "dark"], ...themeToggleProps })
|
|
94
100
|
] }),
|
|
95
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[
|
|
101
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_72%,transparent)] p-3", children: [
|
|
96
102
|
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
97
103
|
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontSizeTitle }),
|
|
98
|
-
/* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription })
|
|
104
|
+
showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription }) : null
|
|
99
105
|
] }),
|
|
100
106
|
/* @__PURE__ */ jsx(FontSizeController, { ...fontSizeProps })
|
|
101
|
-
] })
|
|
107
|
+
] }),
|
|
108
|
+
fontFamilyControl ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_72%,transparent)] p-3", children: [
|
|
109
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
110
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontFamilyTitle }),
|
|
111
|
+
showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontFamilyDescription }) : null
|
|
112
|
+
] }),
|
|
113
|
+
fontFamilyControl
|
|
114
|
+
] }) : null
|
|
102
115
|
] })
|
|
103
116
|
]
|
|
104
117
|
}
|
|
@@ -110,10 +123,10 @@ function AccessibilityFab({
|
|
|
110
123
|
ref: btnRef,
|
|
111
124
|
type: "button",
|
|
112
125
|
onClick: () => setOpen((value) => !value),
|
|
113
|
-
className: "group grid size-12 place-items-center rounded-2xl border border-[
|
|
126
|
+
className: "group grid size-12 place-items-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] text-[var(--primary)] shadow-[0_20px_48px_rgba(6,19,22,0.13)] backdrop-blur-xl transition duration-200 hover:-translate-y-0.5 hover:border-[color-mix(in_oklab,var(--primary)_38%,var(--border))] hover:bg-[var(--surface)] hover:text-[var(--foreground)] hover:shadow-[0_24px_58px_rgba(6,19,22,0.18)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--primary)_42%,transparent)] dark:shadow-[0_20px_48px_rgba(0,0,0,0.28)] dark:hover:shadow-[0_24px_58px_rgba(0,0,0,0.36)]",
|
|
114
127
|
"aria-label": open ? text.close : text.open,
|
|
115
128
|
title: open ? text.close : text.title,
|
|
116
|
-
children: /* @__PURE__ */ jsx(
|
|
129
|
+
children: /* @__PURE__ */ jsx(PersonArmsSpreadIcon, { className: "size-5 opacity-95 transition group-hover:scale-105 group-hover:opacity-100", "aria-hidden": true })
|
|
117
130
|
}
|
|
118
131
|
)
|
|
119
132
|
] });
|
package/dist/AppTopbar.js
CHANGED
|
@@ -48,7 +48,7 @@ function AppTopbar({ title, subtitle, secondary, primary, actions, color, loadin
|
|
|
48
48
|
{
|
|
49
49
|
className: "sticky top-0 z-30 border-b border-[var(--border)] bg-[var(--card)] shadow-sm",
|
|
50
50
|
"aria-busy": showLoading ? "true" : void 0,
|
|
51
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8
|
|
51
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
|
|
52
52
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: showLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
|
|
53
53
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: titleW, height: 18, borderRadius: 10 } }),
|
|
54
54
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: subtitleW, height: 12, borderRadius: 10 } })
|
package/dist/AppTopbar.mjs
CHANGED
|
@@ -15,7 +15,7 @@ function AppTopbar({ title, subtitle, secondary, primary, actions, color, loadin
|
|
|
15
15
|
{
|
|
16
16
|
className: "sticky top-0 z-30 border-b border-[var(--border)] bg-[var(--card)] shadow-sm",
|
|
17
17
|
"aria-busy": showLoading ? "true" : void 0,
|
|
18
|
-
children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8
|
|
18
|
+
children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
|
|
19
19
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx("div", { children: showLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
20
20
|
/* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: titleW, height: 18, borderRadius: 10 } }),
|
|
21
21
|
/* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: subtitleW, height: 12, borderRadius: 10 } })
|
package/dist/Checkbox.d.mts
CHANGED
|
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
|
|
|
11
11
|
className?: string;
|
|
12
12
|
inputClassName?: string;
|
|
13
13
|
};
|
|
14
|
-
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "
|
|
14
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
15
15
|
label?: React__default.ReactNode;
|
|
16
16
|
description?: React__default.ReactNode;
|
|
17
17
|
error?: boolean;
|
package/dist/Checkbox.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
|
|
|
11
11
|
className?: string;
|
|
12
12
|
inputClassName?: string;
|
|
13
13
|
};
|
|
14
|
-
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "
|
|
14
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
|
15
15
|
label?: React__default.ReactNode;
|
|
16
16
|
description?: React__default.ReactNode;
|
|
17
17
|
error?: boolean;
|
package/dist/Select.d.mts
CHANGED
|
@@ -7,6 +7,7 @@ type Option<T extends BaseValue> = {
|
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
};
|
|
9
9
|
type Size = "sm" | "md" | "lg";
|
|
10
|
+
type Placement = "bottom" | "top";
|
|
10
11
|
type Props<T extends BaseValue> = {
|
|
11
12
|
value: T | "";
|
|
12
13
|
onChange: (v: T | "") => void;
|
|
@@ -25,7 +26,8 @@ type Props<T extends BaseValue> = {
|
|
|
25
26
|
closeOnSelect?: boolean;
|
|
26
27
|
minWidthClasses?: string;
|
|
27
28
|
fit?: boolean;
|
|
29
|
+
placement?: Placement;
|
|
28
30
|
};
|
|
29
|
-
declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, }: Props<T>): React__default.JSX.Element;
|
|
31
|
+
declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, placement, }: Props<T>): React__default.JSX.Element;
|
|
30
32
|
|
|
31
33
|
export { type Option, ModernSelect as default };
|
package/dist/Select.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ type Option<T extends BaseValue> = {
|
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
};
|
|
9
9
|
type Size = "sm" | "md" | "lg";
|
|
10
|
+
type Placement = "bottom" | "top";
|
|
10
11
|
type Props<T extends BaseValue> = {
|
|
11
12
|
value: T | "";
|
|
12
13
|
onChange: (v: T | "") => void;
|
|
@@ -25,7 +26,8 @@ type Props<T extends BaseValue> = {
|
|
|
25
26
|
closeOnSelect?: boolean;
|
|
26
27
|
minWidthClasses?: string;
|
|
27
28
|
fit?: boolean;
|
|
29
|
+
placement?: Placement;
|
|
28
30
|
};
|
|
29
|
-
declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, }: Props<T>): React__default.JSX.Element;
|
|
31
|
+
declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, placement, }: Props<T>): React__default.JSX.Element;
|
|
30
32
|
|
|
31
33
|
export { type Option, ModernSelect as default };
|
package/dist/Select.js
CHANGED
|
@@ -61,7 +61,8 @@ function ModernSelect({
|
|
|
61
61
|
clearable = false,
|
|
62
62
|
closeOnSelect = true,
|
|
63
63
|
minWidthClasses,
|
|
64
|
-
fit = true
|
|
64
|
+
fit = true,
|
|
65
|
+
placement = "bottom"
|
|
65
66
|
}) {
|
|
66
67
|
var _a, _b;
|
|
67
68
|
const s = S[size];
|
|
@@ -85,12 +86,20 @@ function ModernSelect({
|
|
|
85
86
|
const el = btnRef.current;
|
|
86
87
|
if (!el) return;
|
|
87
88
|
const r = el.getBoundingClientRect();
|
|
89
|
+
if (placement === "top") {
|
|
90
|
+
setMenuPos({
|
|
91
|
+
bottom: Math.round(window.innerHeight - r.top + 6),
|
|
92
|
+
left: Math.round(r.left),
|
|
93
|
+
width: Math.round(r.width)
|
|
94
|
+
});
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
88
97
|
setMenuPos({
|
|
89
98
|
top: Math.round(r.bottom + 6),
|
|
90
99
|
left: Math.round(r.left),
|
|
91
100
|
width: Math.round(r.width)
|
|
92
101
|
});
|
|
93
|
-
}, []);
|
|
102
|
+
}, [placement]);
|
|
94
103
|
import_react.default.useEffect(() => {
|
|
95
104
|
setMounted(true);
|
|
96
105
|
}, []);
|
|
@@ -253,6 +262,7 @@ function ModernSelect({
|
|
|
253
262
|
].join(" "),
|
|
254
263
|
style: {
|
|
255
264
|
top: menuPos.top,
|
|
265
|
+
bottom: menuPos.bottom,
|
|
256
266
|
left: menuPos.left,
|
|
257
267
|
width: menuPos.width,
|
|
258
268
|
maxWidth: "calc(100vw - 24px)",
|
package/dist/Select.mjs
CHANGED
|
@@ -28,7 +28,8 @@ function ModernSelect({
|
|
|
28
28
|
clearable = false,
|
|
29
29
|
closeOnSelect = true,
|
|
30
30
|
minWidthClasses,
|
|
31
|
-
fit = true
|
|
31
|
+
fit = true,
|
|
32
|
+
placement = "bottom"
|
|
32
33
|
}) {
|
|
33
34
|
var _a, _b;
|
|
34
35
|
const s = S[size];
|
|
@@ -52,12 +53,20 @@ function ModernSelect({
|
|
|
52
53
|
const el = btnRef.current;
|
|
53
54
|
if (!el) return;
|
|
54
55
|
const r = el.getBoundingClientRect();
|
|
56
|
+
if (placement === "top") {
|
|
57
|
+
setMenuPos({
|
|
58
|
+
bottom: Math.round(window.innerHeight - r.top + 6),
|
|
59
|
+
left: Math.round(r.left),
|
|
60
|
+
width: Math.round(r.width)
|
|
61
|
+
});
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
55
64
|
setMenuPos({
|
|
56
65
|
top: Math.round(r.bottom + 6),
|
|
57
66
|
left: Math.round(r.left),
|
|
58
67
|
width: Math.round(r.width)
|
|
59
68
|
});
|
|
60
|
-
}, []);
|
|
69
|
+
}, [placement]);
|
|
61
70
|
React.useEffect(() => {
|
|
62
71
|
setMounted(true);
|
|
63
72
|
}, []);
|
|
@@ -220,6 +229,7 @@ function ModernSelect({
|
|
|
220
229
|
].join(" "),
|
|
221
230
|
style: {
|
|
222
231
|
top: menuPos.top,
|
|
232
|
+
bottom: menuPos.bottom,
|
|
223
233
|
left: menuPos.left,
|
|
224
234
|
width: menuPos.width,
|
|
225
235
|
maxWidth: "calc(100vw - 24px)",
|
package/dist/Sidebar.js
CHANGED
|
@@ -2191,7 +2191,7 @@ function SidebarInner({
|
|
|
2191
2191
|
] });
|
|
2192
2192
|
};
|
|
2193
2193
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["flex h-full flex-col", loading ? "pointer-events-none select-none" : ""].join(" "), "aria-busy": loading ? "true" : void 0, children: [
|
|
2194
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: collapsed ? "px-3 pt-4" : "px-
|
|
2194
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: collapsed ? "px-3 pt-4" : "px-4 pt-5", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
2195
2195
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["flex min-w-0 flex-1 items-center gap-3", collapsed ? "justify-center" : ""].join(" "), children: [
|
|
2196
2196
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: collapsed ? 44 : 40, height: collapsed ? 44 : 40, borderRadius: 16 } }),
|
|
2197
2197
|
!collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
|
|
@@ -2293,7 +2293,7 @@ function SidebarInner({
|
|
|
2293
2293
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["min-w-0 flex-1 text-sm font-semibold text-[var(--muted)]", collapsed ? "text-center" : ""].join(" "), children: "Navegaci\xF3n" }),
|
|
2294
2294
|
renderCollapseToggle()
|
|
2295
2295
|
] }) }),
|
|
2296
|
-
showTopPanel || loading && skShowTopPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className:
|
|
2296
|
+
showTopPanel || loading && skShowTopPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 px-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: collapsed ? cx("rounded-3xl p-2", TOP_PANEL_SURFACE) : topPanelClass, children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
2297
2297
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: 44, height: 44, borderRadius: 16 } }),
|
|
2298
2298
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: 56, height: 12, borderRadius: 10 } })
|
|
2299
2299
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-2 py-2", children: [
|
|
@@ -2393,7 +2393,7 @@ function SidebarInner({
|
|
|
2393
2393
|
ref: navRef,
|
|
2394
2394
|
className: cx(
|
|
2395
2395
|
"mt-5 flex-1 space-y-6 overflow-y-auto overflow-x-hidden py-2",
|
|
2396
|
-
"px-5"
|
|
2396
|
+
collapsed ? "px-5" : "px-3.5"
|
|
2397
2397
|
),
|
|
2398
2398
|
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-7", children: Array.from({ length: skGroups }).map((_, g) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
2399
2399
|
!collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-3 px-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: g % 2 === 0 ? "6.5rem" : "7.5rem", height: 10, borderRadius: 10 } }) }) : null,
|
package/dist/Sidebar.mjs
CHANGED
|
@@ -2170,7 +2170,7 @@ function SidebarInner({
|
|
|
2170
2170
|
] });
|
|
2171
2171
|
};
|
|
2172
2172
|
return /* @__PURE__ */ jsxs("div", { className: ["flex h-full flex-col", loading ? "pointer-events-none select-none" : ""].join(" "), "aria-busy": loading ? "true" : void 0, children: [
|
|
2173
|
-
/* @__PURE__ */ jsx("div", { className: collapsed ? "px-3 pt-4" : "px-
|
|
2173
|
+
/* @__PURE__ */ jsx("div", { className: collapsed ? "px-3 pt-4" : "px-4 pt-5", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
2174
2174
|
/* @__PURE__ */ jsxs("div", { className: ["flex min-w-0 flex-1 items-center gap-3", collapsed ? "justify-center" : ""].join(" "), children: [
|
|
2175
2175
|
/* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: collapsed ? 44 : 40, height: collapsed ? 44 : 40, borderRadius: 16 } }),
|
|
2176
2176
|
!collapsed ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
@@ -2272,7 +2272,7 @@ function SidebarInner({
|
|
|
2272
2272
|
/* @__PURE__ */ jsx("div", { className: ["min-w-0 flex-1 text-sm font-semibold text-[var(--muted)]", collapsed ? "text-center" : ""].join(" "), children: "Navegaci\xF3n" }),
|
|
2273
2273
|
renderCollapseToggle()
|
|
2274
2274
|
] }) }),
|
|
2275
|
-
showTopPanel || loading && skShowTopPanel ? /* @__PURE__ */ jsx("div", { className:
|
|
2275
|
+
showTopPanel || loading && skShowTopPanel ? /* @__PURE__ */ jsx("div", { className: "mt-4 px-4", children: loading ? /* @__PURE__ */ jsx("div", { className: collapsed ? cx("rounded-3xl p-2", TOP_PANEL_SURFACE) : topPanelClass, children: collapsed ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
2276
2276
|
/* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: 44, height: 44, borderRadius: 16 } }),
|
|
2277
2277
|
/* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: 56, height: 12, borderRadius: 10 } })
|
|
2278
2278
|
] }) : /* @__PURE__ */ jsxs("div", { className: "px-2 py-2", children: [
|
|
@@ -2372,7 +2372,7 @@ function SidebarInner({
|
|
|
2372
2372
|
ref: navRef,
|
|
2373
2373
|
className: cx(
|
|
2374
2374
|
"mt-5 flex-1 space-y-6 overflow-y-auto overflow-x-hidden py-2",
|
|
2375
|
-
"px-5"
|
|
2375
|
+
collapsed ? "px-5" : "px-3.5"
|
|
2376
2376
|
),
|
|
2377
2377
|
children: loading ? /* @__PURE__ */ jsx("div", { className: "space-y-7", children: Array.from({ length: skGroups }).map((_, g) => /* @__PURE__ */ jsxs("div", { children: [
|
|
2378
2378
|
!collapsed ? /* @__PURE__ */ jsx("div", { className: "mb-3 px-1", children: /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: g % 2 === 0 ? "6.5rem" : "7.5rem", height: 10, borderRadius: 10 } }) }) : null,
|
|
@@ -59,6 +59,8 @@ type SupportChatTranscriptConfig = {
|
|
|
59
59
|
type SupportChatSendResult = string | void | SupportChatMessage[] | {
|
|
60
60
|
reply?: string;
|
|
61
61
|
messages?: SupportChatMessage[];
|
|
62
|
+
suggestedReplies?: string[];
|
|
63
|
+
serviceSuggestions?: SupportChatServiceSuggestion[];
|
|
62
64
|
};
|
|
63
65
|
type SupportChatWidgetLabels = {
|
|
64
66
|
trigger?: string;
|
|
@@ -59,6 +59,8 @@ type SupportChatTranscriptConfig = {
|
|
|
59
59
|
type SupportChatSendResult = string | void | SupportChatMessage[] | {
|
|
60
60
|
reply?: string;
|
|
61
61
|
messages?: SupportChatMessage[];
|
|
62
|
+
suggestedReplies?: string[];
|
|
63
|
+
serviceSuggestions?: SupportChatServiceSuggestion[];
|
|
62
64
|
};
|
|
63
65
|
type SupportChatWidgetLabels = {
|
|
64
66
|
trigger?: string;
|
|
@@ -178,7 +178,7 @@ function buildHtmlTranscript(messages, title, brandName) {
|
|
|
178
178
|
}
|
|
179
179
|
function SupportChatWidget({
|
|
180
180
|
mode = "bot",
|
|
181
|
-
brandName = "
|
|
181
|
+
brandName = "Heliip Support",
|
|
182
182
|
assistant,
|
|
183
183
|
agent,
|
|
184
184
|
open: openProp,
|
|
@@ -268,7 +268,7 @@ function SupportChatWidget({
|
|
|
268
268
|
const labelSaveRecentTranscript = (_q = labels == null ? void 0 : labels.saveRecentTranscript) != null ? _q : "Guardar extracto";
|
|
269
269
|
const labelSaveFullTranscript = (_r = labels == null ? void 0 : labels.saveFullTranscript) != null ? _r : "Guardar HTML";
|
|
270
270
|
const labelRating = (_s = labels == null ? void 0 : labels.ratingLabel) != null ? _s : "Calificacion";
|
|
271
|
-
const labelPoweredBy = (_t = labels == null ? void 0 : labels.poweredBy) != null ? _t : "
|
|
271
|
+
const labelPoweredBy = (_t = labels == null ? void 0 : labels.poweredBy) != null ? _t : "Heliip Support";
|
|
272
272
|
const labelWelcomeTitle = (_v = labels == null ? void 0 : labels.defaultWelcomeTitle) != null ? _v : `Hola, soy ${(_u = assistant == null ? void 0 : assistant.name) != null ? _u : brandName}`;
|
|
273
273
|
const labelWelcomeMessage = (_w = labels == null ? void 0 : labels.defaultWelcomeMessage) != null ? _w : "Puedo ayudarte con servicios, horarios, contacto y dudas frecuentes.";
|
|
274
274
|
const labelError = (_x = labels == null ? void 0 : labels.errorMessage) != null ? _x : "No se pudo enviar el mensaje. Intenta de nuevo.";
|
|
@@ -325,7 +325,9 @@ function SupportChatWidget({
|
|
|
325
325
|
content: result.reply,
|
|
326
326
|
createdAt: /* @__PURE__ */ new Date(),
|
|
327
327
|
state: "complete",
|
|
328
|
-
actor: currentActor
|
|
328
|
+
actor: currentActor,
|
|
329
|
+
suggestedReplies: result.suggestedReplies,
|
|
330
|
+
serviceSuggestions: result.serviceSuggestions
|
|
329
331
|
});
|
|
330
332
|
}
|
|
331
333
|
if (Array.isArray(result.messages)) next.push(...result.messages);
|
|
@@ -157,7 +157,7 @@ function buildHtmlTranscript(messages, title, brandName) {
|
|
|
157
157
|
}
|
|
158
158
|
function SupportChatWidget({
|
|
159
159
|
mode = "bot",
|
|
160
|
-
brandName = "
|
|
160
|
+
brandName = "Heliip Support",
|
|
161
161
|
assistant,
|
|
162
162
|
agent,
|
|
163
163
|
open: openProp,
|
|
@@ -247,7 +247,7 @@ function SupportChatWidget({
|
|
|
247
247
|
const labelSaveRecentTranscript = (_q = labels == null ? void 0 : labels.saveRecentTranscript) != null ? _q : "Guardar extracto";
|
|
248
248
|
const labelSaveFullTranscript = (_r = labels == null ? void 0 : labels.saveFullTranscript) != null ? _r : "Guardar HTML";
|
|
249
249
|
const labelRating = (_s = labels == null ? void 0 : labels.ratingLabel) != null ? _s : "Calificacion";
|
|
250
|
-
const labelPoweredBy = (_t = labels == null ? void 0 : labels.poweredBy) != null ? _t : "
|
|
250
|
+
const labelPoweredBy = (_t = labels == null ? void 0 : labels.poweredBy) != null ? _t : "Heliip Support";
|
|
251
251
|
const labelWelcomeTitle = (_v = labels == null ? void 0 : labels.defaultWelcomeTitle) != null ? _v : `Hola, soy ${(_u = assistant == null ? void 0 : assistant.name) != null ? _u : brandName}`;
|
|
252
252
|
const labelWelcomeMessage = (_w = labels == null ? void 0 : labels.defaultWelcomeMessage) != null ? _w : "Puedo ayudarte con servicios, horarios, contacto y dudas frecuentes.";
|
|
253
253
|
const labelError = (_x = labels == null ? void 0 : labels.errorMessage) != null ? _x : "No se pudo enviar el mensaje. Intenta de nuevo.";
|
|
@@ -304,7 +304,9 @@ function SupportChatWidget({
|
|
|
304
304
|
content: result.reply,
|
|
305
305
|
createdAt: /* @__PURE__ */ new Date(),
|
|
306
306
|
state: "complete",
|
|
307
|
-
actor: currentActor
|
|
307
|
+
actor: currentActor,
|
|
308
|
+
suggestedReplies: result.suggestedReplies,
|
|
309
|
+
serviceSuggestions: result.serviceSuggestions
|
|
308
310
|
});
|
|
309
311
|
}
|
|
310
312
|
if (Array.isArray(result.messages)) next.push(...result.messages);
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
declare function ThemeScript({ id, strategy, }: {
|
|
3
|
+
declare function ThemeScript({ id, strategy, storageKey, defaultTheme, accentStorageKey, defaultAccent, fontScaleStorageKey, defaultFontScale, }: {
|
|
4
4
|
id?: string;
|
|
5
5
|
strategy?: "safe" | "before-hydration";
|
|
6
|
+
storageKey?: string;
|
|
7
|
+
defaultTheme?: "light" | "dark" | "system";
|
|
8
|
+
accentStorageKey?: string;
|
|
9
|
+
defaultAccent?: string;
|
|
10
|
+
fontScaleStorageKey?: string;
|
|
11
|
+
defaultFontScale?: number;
|
|
6
12
|
}): React.JSX.Element | null;
|
|
7
13
|
|
|
8
14
|
export { ThemeScript, ThemeScript as default };
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
declare function ThemeScript({ id, strategy, }: {
|
|
3
|
+
declare function ThemeScript({ id, strategy, storageKey, defaultTheme, accentStorageKey, defaultAccent, fontScaleStorageKey, defaultFontScale, }: {
|
|
4
4
|
id?: string;
|
|
5
5
|
strategy?: "safe" | "before-hydration";
|
|
6
|
+
storageKey?: string;
|
|
7
|
+
defaultTheme?: "light" | "dark" | "system";
|
|
8
|
+
accentStorageKey?: string;
|
|
9
|
+
defaultAccent?: string;
|
|
10
|
+
fontScaleStorageKey?: string;
|
|
11
|
+
defaultFontScale?: number;
|
|
6
12
|
}): React.JSX.Element | null;
|
|
7
13
|
|
|
8
14
|
export { ThemeScript, ThemeScript as default };
|
|
@@ -23,13 +23,19 @@ __export(ThemeScript_exports, {
|
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(ThemeScript_exports);
|
|
25
25
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
-
const INIT_SNIPPET = `!function(){try{var d=document.documentElement;var pref=localStorage.getItem('theme')||'system';var accent=localStorage.getItem('accent')||'blue';var scale=localStorage.getItem('fontScale')||'1';d.dataset.theme=pref;d.dataset.accent=accent;d.style.setProperty('--font-scale',scale);var m=window.matchMedia('(prefers-color-scheme: dark)');var isDark=(pref==='dark')||(pref==='system'&&m.matches);d.classList.toggle('dark',isDark);d.style.colorScheme=isDark?'dark':'light'}catch(e){}}();`;
|
|
27
26
|
function ThemeScript({
|
|
28
27
|
id = "ui-lib-theme-init",
|
|
29
|
-
strategy = "safe"
|
|
28
|
+
strategy = "safe",
|
|
29
|
+
storageKey = "theme",
|
|
30
|
+
defaultTheme = "system",
|
|
31
|
+
accentStorageKey = "accent",
|
|
32
|
+
defaultAccent = "blue",
|
|
33
|
+
fontScaleStorageKey = "fontScale",
|
|
34
|
+
defaultFontScale = 1
|
|
30
35
|
}) {
|
|
31
36
|
if (strategy !== "before-hydration") return null;
|
|
32
|
-
|
|
37
|
+
const snippet = `!function(){try{var d=document.documentElement;var pref=localStorage.getItem(${JSON.stringify(storageKey)})||${JSON.stringify(defaultTheme)};var accent=localStorage.getItem(${JSON.stringify(accentStorageKey)})||${JSON.stringify(defaultAccent)};var scale=localStorage.getItem(${JSON.stringify(fontScaleStorageKey)})||${JSON.stringify(String(defaultFontScale))};d.dataset.theme=pref;d.dataset.accent=accent;d.style.setProperty('--font-scale',scale);var m=window.matchMedia('(prefers-color-scheme: dark)');var isDark=(pref==='dark')||(pref==='system'&&m.matches);d.classList.toggle('dark',isDark);d.style.colorScheme=isDark?'dark':'light'}catch(e){}}();`;
|
|
38
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id, dangerouslySetInnerHTML: { __html: snippet } });
|
|
33
39
|
}
|
|
34
40
|
var ThemeScript_default = ThemeScript;
|
|
35
41
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
const INIT_SNIPPET = `!function(){try{var d=document.documentElement;var pref=localStorage.getItem('theme')||'system';var accent=localStorage.getItem('accent')||'blue';var scale=localStorage.getItem('fontScale')||'1';d.dataset.theme=pref;d.dataset.accent=accent;d.style.setProperty('--font-scale',scale);var m=window.matchMedia('(prefers-color-scheme: dark)');var isDark=(pref==='dark')||(pref==='system'&&m.matches);d.classList.toggle('dark',isDark);d.style.colorScheme=isDark?'dark':'light'}catch(e){}}();`;
|
|
3
2
|
function ThemeScript({
|
|
4
3
|
id = "ui-lib-theme-init",
|
|
5
|
-
strategy = "safe"
|
|
4
|
+
strategy = "safe",
|
|
5
|
+
storageKey = "theme",
|
|
6
|
+
defaultTheme = "system",
|
|
7
|
+
accentStorageKey = "accent",
|
|
8
|
+
defaultAccent = "blue",
|
|
9
|
+
fontScaleStorageKey = "fontScale",
|
|
10
|
+
defaultFontScale = 1
|
|
6
11
|
}) {
|
|
7
12
|
if (strategy !== "before-hydration") return null;
|
|
8
|
-
|
|
13
|
+
const snippet = `!function(){try{var d=document.documentElement;var pref=localStorage.getItem(${JSON.stringify(storageKey)})||${JSON.stringify(defaultTheme)};var accent=localStorage.getItem(${JSON.stringify(accentStorageKey)})||${JSON.stringify(defaultAccent)};var scale=localStorage.getItem(${JSON.stringify(fontScaleStorageKey)})||${JSON.stringify(String(defaultFontScale))};d.dataset.theme=pref;d.dataset.accent=accent;d.style.setProperty('--font-scale',scale);var m=window.matchMedia('(prefers-color-scheme: dark)');var isDark=(pref==='dark')||(pref==='system'&&m.matches);d.classList.toggle('dark',isDark);d.style.colorScheme=isDark?'dark':'light'}catch(e){}}();`;
|
|
14
|
+
return /* @__PURE__ */ jsx("script", { id, dangerouslySetInnerHTML: { __html: snippet } });
|
|
9
15
|
}
|
|
10
16
|
var ThemeScript_default = ThemeScript;
|
|
11
17
|
export {
|