framepexls-ui-lib 2.2.3 → 2.2.6

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 (13) hide show
  1. package/dist/AccessibilityFab.d.mts +5 -1
  2. package/dist/AccessibilityFab.d.ts +5 -1
  3. package/dist/AccessibilityFab.js +18 -7
  4. package/dist/AccessibilityFab.mjs +18 -7
  5. package/dist/Select.d.mts +3 -1
  6. package/dist/Select.d.ts +3 -1
  7. package/dist/Select.js +12 -2
  8. package/dist/Select.mjs +12 -2
  9. package/dist/theme/ThemeScript.d.mts +7 -1
  10. package/dist/theme/ThemeScript.d.ts +7 -1
  11. package/dist/theme/ThemeScript.js +9 -3
  12. package/dist/theme/ThemeScript.mjs +9 -3
  13. package/package.json +1 -1
package/dist/AccessibilityFab.d.mts CHANGED
@@ -9,15 +9,19 @@ 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
+ showDescriptions?: boolean;
18
22
  themeToggleProps?: Omit<ThemeToggleProps, "className">;
19
23
  fontSizeProps?: Omit<FontSizeControllerProps, "className">;
20
24
  };
21
- declare function AccessibilityFab({ className, labels, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
25
+ declare function AccessibilityFab({ className, fontFamilyControl, labels, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
22
26
 
23
27
  export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };
package/dist/AccessibilityFab.d.ts CHANGED
@@ -9,15 +9,19 @@ 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
+ showDescriptions?: boolean;
18
22
  themeToggleProps?: Omit<ThemeToggleProps, "className">;
19
23
  fontSizeProps?: Omit<FontSizeControllerProps, "className">;
20
24
  };
21
- declare function AccessibilityFab({ className, labels, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
25
+ declare function AccessibilityFab({ className, fontFamilyControl, labels, showDescriptions, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
22
26
 
23
27
  export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };
package/dist/AccessibilityFab.js CHANGED
@@ -41,11 +41,13 @@ 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
+ showDescriptions = false,
45
47
  themeToggleProps,
46
48
  fontSizeProps
47
49
  }) {
48
- var _a, _b, _c, _d, _e, _f, _g, _h;
50
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
49
51
  const [open, setOpen] = import_react.default.useState(false);
50
52
  const reduceMotion = (0, import_framer_motion.useReducedMotion)();
51
53
  const btnRef = import_react.default.useRef(null);
@@ -57,8 +59,10 @@ function AccessibilityFab({
57
59
  open: (_d = labels == null ? void 0 : labels.open) != null ? _d : "Abrir accesibilidad",
58
60
  appearanceTitle: (_e = labels == null ? void 0 : labels.appearanceTitle) != null ? _e : "Apariencia",
59
61
  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"
62
+ fontFamilyTitle: (_g = labels == null ? void 0 : labels.fontFamilyTitle) != null ? _g : "Fuente",
63
+ fontFamilyDescription: (_h = labels == null ? void 0 : labels.fontFamilyDescription) != null ? _h : "Elige la familia tipogr\xE1fica de la app",
64
+ fontSizeTitle: (_i = labels == null ? void 0 : labels.fontSizeTitle) != null ? _i : "Tama\xF1o del texto",
65
+ fontSizeDescription: (_j = labels == null ? void 0 : labels.fontSizeDescription) != null ? _j : "Mejora la lectura con un ajuste r\xE1pido"
62
66
  };
63
67
  import_react.default.useEffect(() => {
64
68
  if (!open) return;
@@ -96,7 +100,7 @@ function AccessibilityFab({
96
100
  /* @__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
101
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
98
102
  /* @__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 })
103
+ showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: text.description }) : null
100
104
  ] }),
101
105
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102
106
  import_Button.default,
@@ -115,17 +119,24 @@ function AccessibilityFab({
115
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: [
116
120
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
117
121
  /* @__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 })
122
+ showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription }) : null
119
123
  ] }),
120
124
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeToggle.default, { cycle: ["light", "dark"], ...themeToggleProps })
121
125
  ] }),
122
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: [
123
127
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
124
128
  /* @__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 })
129
+ showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription }) : null
126
130
  ] }),
127
131
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FontSizeController.default, { ...fontSizeProps })
128
- ] })
132
+ ] }),
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: [
134
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
135
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontFamilyTitle }),
136
+ showDescriptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontFamilyDescription }) : null
137
+ ] }),
138
+ fontFamilyControl
139
+ ] }) : null
129
140
  ] })
130
141
  ]
131
142
  }
package/dist/AccessibilityFab.mjs CHANGED
@@ -14,11 +14,13 @@ import ThemeToggle from "./theme/ThemeToggle.mjs";
14
14
  import { CloseIcon, TextAaIcon } from "./iconos/index.mjs";
15
15
  function AccessibilityFab({
16
16
  className,
17
+ fontFamilyControl,
17
18
  labels,
19
+ showDescriptions = false,
18
20
  themeToggleProps,
19
21
  fontSizeProps
20
22
  }) {
21
- var _a, _b, _c, _d, _e, _f, _g, _h;
23
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
22
24
  const [open, setOpen] = React.useState(false);
23
25
  const reduceMotion = useReducedMotion();
24
26
  const btnRef = React.useRef(null);
@@ -30,8 +32,10 @@ function AccessibilityFab({
30
32
  open: (_d = labels == null ? void 0 : labels.open) != null ? _d : "Abrir accesibilidad",
31
33
  appearanceTitle: (_e = labels == null ? void 0 : labels.appearanceTitle) != null ? _e : "Apariencia",
32
34
  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"
35
+ fontFamilyTitle: (_g = labels == null ? void 0 : labels.fontFamilyTitle) != null ? _g : "Fuente",
36
+ fontFamilyDescription: (_h = labels == null ? void 0 : labels.fontFamilyDescription) != null ? _h : "Elige la familia tipogr\xE1fica de la app",
37
+ fontSizeTitle: (_i = labels == null ? void 0 : labels.fontSizeTitle) != null ? _i : "Tama\xF1o del texto",
38
+ fontSizeDescription: (_j = labels == null ? void 0 : labels.fontSizeDescription) != null ? _j : "Mejora la lectura con un ajuste r\xE1pido"
35
39
  };
36
40
  React.useEffect(() => {
37
41
  if (!open) return;
@@ -69,7 +73,7 @@ function AccessibilityFab({
69
73
  /* @__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
74
  /* @__PURE__ */ jsxs("div", { children: [
71
75
  /* @__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 })
76
+ showDescriptions ? /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted)]", children: text.description }) : null
73
77
  ] }),
74
78
  /* @__PURE__ */ jsx(
75
79
  Button,
@@ -88,17 +92,24 @@ function AccessibilityFab({
88
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: [
89
93
  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
90
94
  /* @__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 })
95
+ showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription }) : null
92
96
  ] }),
93
97
  /* @__PURE__ */ jsx(ThemeToggle, { cycle: ["light", "dark"], ...themeToggleProps })
94
98
  ] }),
95
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: [
96
100
  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
97
101
  /* @__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 })
102
+ showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription }) : null
99
103
  ] }),
100
104
  /* @__PURE__ */ jsx(FontSizeController, { ...fontSizeProps })
101
- ] })
105
+ ] }),
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: [
107
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
108
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontFamilyTitle }),
109
+ showDescriptions ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontFamilyDescription }) : null
110
+ ] }),
111
+ fontFamilyControl
112
+ ] }) : null
102
113
  ] })
103
114
  ]
104
115
  }
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/theme/ThemeScript.d.mts CHANGED
@@ -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 };
package/dist/theme/ThemeScript.d.ts CHANGED
@@ -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 };
package/dist/theme/ThemeScript.js CHANGED
@@ -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:
package/dist/theme/ThemeScript.mjs CHANGED
@@ -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.6",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",