framepexls-ui-lib 2.2.6 → 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.
Files changed (15) hide show
  1. package/dist/AccessibilityFab.d.mts +2 -1
  2. package/dist/AccessibilityFab.d.ts +2 -1
  3. package/dist/AccessibilityFab.js +10 -8
  4. package/dist/AccessibilityFab.mjs +11 -9
  5. package/dist/AppTopbar.js +1 -1
  6. package/dist/AppTopbar.mjs +1 -1
  7. package/dist/Checkbox.d.mts +1 -1
  8. package/dist/Checkbox.d.ts +1 -1
  9. package/dist/Sidebar.js +3 -3
  10. package/dist/Sidebar.mjs +3 -3
  11. package/dist/SupportChatWidget.d.mts +2 -0
  12. package/dist/SupportChatWidget.d.ts +2 -0
  13. package/dist/SupportChatWidget.js +5 -3
  14. package/dist/SupportChatWidget.mjs +5 -3
  15. package/package.json +1 -1
package/dist/AccessibilityFab.d.mts CHANGED
@@ -18,10 +18,11 @@ type AccessibilityFabProps = {
18
18
  className?: string;
19
19
  fontFamilyControl?: React__default.ReactNode;
20
20
  labels?: AccessibilityFabLabels;
21
+ position?: "bottom-left" | "bottom-right";
21
22
  showDescriptions?: boolean;
22
23
  themeToggleProps?: Omit<ThemeToggleProps, "className">;
23
24
  fontSizeProps?: Omit<FontSizeControllerProps, "className">;
24
25
  };
25
- declare function AccessibilityFab({ className, fontFamilyControl, labels, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
26
+ declare function AccessibilityFab({ className, fontFamilyControl, labels, position, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
26
27
 
27
28
  export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };
package/dist/AccessibilityFab.d.ts CHANGED
@@ -18,10 +18,11 @@ type AccessibilityFabProps = {
18
18
  className?: string;
19
19
  fontFamilyControl?: React__default.ReactNode;
20
20
  labels?: AccessibilityFabLabels;
21
+ position?: "bottom-left" | "bottom-right";
21
22
  showDescriptions?: boolean;
22
23
  themeToggleProps?: Omit<ThemeToggleProps, "className">;
23
24
  fontSizeProps?: Omit<FontSizeControllerProps, "className">;
24
25
  };
25
- declare function AccessibilityFab({ className, fontFamilyControl, labels, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
26
+ declare function AccessibilityFab({ className, fontFamilyControl, labels, position, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
26
27
 
27
28
  export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };
package/dist/AccessibilityFab.js CHANGED
@@ -43,6 +43,7 @@ function AccessibilityFab({
43
43
  className,
44
44
  fontFamilyControl,
45
45
  labels,
46
+ position = "bottom-right",
46
47
  showDescriptions = false,
47
48
  themeToggleProps,
48
49
  fontSizeProps
@@ -86,7 +87,8 @@ function AccessibilityFab({
86
87
  window.removeEventListener("pointerdown", onPointerDown, true);
87
88
  };
88
89
  }, [open]);
89
- 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: [
90
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)(
91
93
  import_framer_motion.m.div,
92
94
  {
@@ -95,7 +97,7 @@ function AccessibilityFab({
95
97
  animate: reduceMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 },
96
98
  exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98 },
97
99
  transition: reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" },
98
- 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)]",
99
101
  children: [
100
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: [
101
103
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
@@ -108,7 +110,7 @@ function AccessibilityFab({
108
110
  unstyled: true,
109
111
  type: "button",
110
112
  onClick: () => setOpen(false),
111
- 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)]",
112
114
  "aria-label": text.close,
113
115
  title: text.close,
114
116
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CloseIcon, { className: "size-4", "aria-hidden": true })
@@ -116,21 +118,21 @@ function AccessibilityFab({
116
118
  )
117
119
  ] }),
118
120
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3 p-4", children: [
119
- /* @__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: [
120
122
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
121
123
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.appearanceTitle }),
122
124
  showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription }) : null
123
125
  ] }),
124
126
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeToggle.default, { cycle: ["light", "dark"], ...themeToggleProps })
125
127
  ] }),
126
- /* @__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: [
127
129
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
128
130
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontSizeTitle }),
129
131
  showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription }) : null
130
132
  ] }),
131
133
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FontSizeController.default, { ...fontSizeProps })
132
134
  ] }),
133
- fontFamilyControl ? /* @__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: [
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: [
134
136
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
135
137
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontFamilyTitle }),
136
138
  showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontFamilyDescription }) : null
@@ -148,10 +150,10 @@ function AccessibilityFab({
148
150
  ref: btnRef,
149
151
  type: "button",
150
152
  onClick: () => setOpen((value) => !value),
151
- 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)]",
152
154
  "aria-label": open ? text.close : text.open,
153
155
  title: open ? text.close : text.title,
154
- 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 })
155
157
  }
156
158
  )
157
159
  ] });
package/dist/AccessibilityFab.mjs CHANGED
@@ -11,11 +11,12 @@ 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
17
  fontFamilyControl,
18
18
  labels,
19
+ position = "bottom-right",
19
20
  showDescriptions = false,
20
21
  themeToggleProps,
21
22
  fontSizeProps
@@ -59,7 +60,8 @@ function AccessibilityFab({
59
60
  window.removeEventListener("pointerdown", onPointerDown, true);
60
61
  };
61
62
  }, [open]);
62
- 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: [
63
65
  /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(
64
66
  m.div,
65
67
  {
@@ -68,7 +70,7 @@ function AccessibilityFab({
68
70
  animate: reduceMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 },
69
71
  exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98 },
70
72
  transition: reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" },
71
- 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)]",
72
74
  children: [
73
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: [
74
76
  /* @__PURE__ */ jsxs("div", { children: [
@@ -81,7 +83,7 @@ function AccessibilityFab({
81
83
  unstyled: true,
82
84
  type: "button",
83
85
  onClick: () => setOpen(false),
84
- 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)]",
85
87
  "aria-label": text.close,
86
88
  title: text.close,
87
89
  children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4", "aria-hidden": true })
@@ -89,21 +91,21 @@ function AccessibilityFab({
89
91
  )
90
92
  ] }),
91
93
  /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4", children: [
92
- /* @__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: [
93
95
  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
94
96
  /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.appearanceTitle }),
95
97
  showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription }) : null
96
98
  ] }),
97
99
  /* @__PURE__ */ jsx(ThemeToggle, { cycle: ["light", "dark"], ...themeToggleProps })
98
100
  ] }),
99
- /* @__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: [
100
102
  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
101
103
  /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontSizeTitle }),
102
104
  showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription }) : null
103
105
  ] }),
104
106
  /* @__PURE__ */ jsx(FontSizeController, { ...fontSizeProps })
105
107
  ] }),
106
- fontFamilyControl ? /* @__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: [
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: [
107
109
  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
108
110
  /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontFamilyTitle }),
109
111
  showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontFamilyDescription }) : null
@@ -121,10 +123,10 @@ function AccessibilityFab({
121
123
  ref: btnRef,
122
124
  type: "button",
123
125
  onClick: () => setOpen((value) => !value),
124
- 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)]",
125
127
  "aria-label": open ? text.close : text.open,
126
128
  title: open ? text.close : text.title,
127
- 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 })
128
130
  }
129
131
  )
130
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 } })
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 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 } })
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>, "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/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>, "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/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,
package/dist/SupportChatWidget.d.mts CHANGED
@@ -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;
package/dist/SupportChatWidget.d.ts CHANGED
@@ -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;
package/dist/SupportChatWidget.js CHANGED
@@ -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);
package/dist/SupportChatWidget.mjs CHANGED
@@ -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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "2.2.6",
3
+ "version": "2.2.7",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",