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.
@@ -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 };
@@ -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
- fontSizeTitle: (_g = labels == null ? void 0 : labels.fontSizeTitle) != null ? _g : "Tama\xF1o del texto",
61
- fontSizeDescription: (_h = labels == null ? void 0 : labels.fontSizeDescription) != null ? _h : "Mejora la lectura con un ajuste r\xE1pido"
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
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["fixed bottom-5 right-5 z-[70] flex items-end gap-3", className != null ? className : ""].join(" "), children: [
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(360px,calc(100vw-1.5rem))] overflow-hidden rounded-[1.75rem] border border-[color-mix(in_oklab,var(--border)_72%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] shadow-[0_30px_90px_rgba(2,12,27,0.24)] backdrop-blur-xl",
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-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] text-[var(--foreground)] transition hover:bg-[color-mix(in_oklab,var(--card)_65%,transparent)]",
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-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
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-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
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-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] text-[var(--foreground)] shadow-[0_24px_60px_rgba(15,23,42,0.22)] backdrop-blur-xl transition hover:scale-[1.02] hover:bg-[color-mix(in_oklab,var(--surface)_92%,transparent)]",
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.TextAaIcon, { className: "size-5 opacity-90 transition group-hover:opacity-100", "aria-hidden": true })
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, TextAaIcon } from "./iconos/index.mjs";
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
- fontSizeTitle: (_g = labels == null ? void 0 : labels.fontSizeTitle) != null ? _g : "Tama\xF1o del texto",
34
- fontSizeDescription: (_h = labels == null ? void 0 : labels.fontSizeDescription) != null ? _h : "Mejora la lectura con un ajuste r\xE1pido"
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
- return /* @__PURE__ */ jsxs("div", { className: ["fixed bottom-5 right-5 z-[70] flex items-end gap-3", className != null ? className : ""].join(" "), children: [
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(360px,calc(100vw-1.5rem))] overflow-hidden rounded-[1.75rem] border border-[color-mix(in_oklab,var(--border)_72%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] shadow-[0_30px_90px_rgba(2,12,27,0.24)] backdrop-blur-xl",
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-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] text-[var(--foreground)] transition hover:bg-[color-mix(in_oklab,var(--card)_65%,transparent)]",
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-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
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-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
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-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] text-[var(--foreground)] shadow-[0_24px_60px_rgba(15,23,42,0.22)] backdrop-blur-xl transition hover:scale-[1.02] hover:bg-[color-mix(in_oklab,var(--surface)_92%,transparent)]",
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(TextAaIcon, { className: "size-5 opacity-90 transition group-hover:opacity-100", "aria-hidden": true })
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 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
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 } })
@@ -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 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
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 } })
@@ -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>, "size" | "type"> & {
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;
@@ -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>, "size" | "type"> & {
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-5 pt-5", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
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: cx("mt-4", collapsed ? "px-4" : "px-5"), 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: [
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-5 pt-5", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
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: cx("mt-4", collapsed ? "px-4" : "px-5"), 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: [
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 = "Kontestalo",
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 : "Kontestalo";
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 = "Kontestalo",
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 : "Kontestalo";
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
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id, dangerouslySetInnerHTML: { __html: INIT_SNIPPET } });
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
- return /* @__PURE__ */ jsx("script", { id, dangerouslySetInnerHTML: { __html: INIT_SNIPPET } });
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 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "2.2.3",
3
+ "version": "2.2.7",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",