framepexls-ui-lib 0.3.11 → 0.3.13

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 (5) hide show
  1. package/dist/ComboSelect.js +18 -8
  2. package/dist/ComboSelect.mjs +18 -8
  3. package/dist/Select.js +2 -2
  4. package/dist/Select.mjs +2 -2
  5. package/package.json +1 -1
package/dist/ComboSelect.js CHANGED
@@ -41,7 +41,7 @@ var import_Button = __toESM(require("./Button"));
41
41
  var import_framer_motion = require("framer-motion");
42
42
  var import_animations = require("./animations");
43
43
  const cx = (...a) => a.filter(Boolean).join(" ");
44
- const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-4 focus-within:ring-slate-900/5 focus-within:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus-within:ring-white/10";
44
+ const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-4 focus-within:ring-slate-900/5 focus-within:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-slate-600/80 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:placeholder:text-slate-500 dark:shadow-[0_0_0_1px_rgba(15,23,42,0.65)] dark:focus-within:ring-rose-500/30 dark:focus-within:border-rose-500/70";
45
45
  const isFocusableOrInteractive = (el) => {
46
46
  if (!el) return false;
47
47
  return !!el.closest(
@@ -268,7 +268,7 @@ function ComboSelect({
268
268
  {
269
269
  className: cx(
270
270
  "flex items-center justify-between gap-3",
271
- isActive ? "bg-slate-50 dark:bg-white/10" : "hover:bg-slate-50 dark:hover:bg-white/10"
271
+ isActive ? "bg-slate-50 dark:bg-slate-800/80" : "hover:bg-slate-50 dark:hover:bg-slate-800/60"
272
272
  ),
273
273
  children: [
274
274
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex items-center gap-3", children: [
@@ -283,13 +283,23 @@ function ComboSelect({
283
283
  }
284
284
  ),
285
285
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
286
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate font-medium", children: opt.label }),
286
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate font-medium text-slate-900 dark:text-slate-50", children: opt.label }),
287
287
  opt.sublabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: opt.sublabel }) : opt.hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: opt.hint }) : null
288
288
  ] })
289
289
  ] }),
290
290
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex shrink-0 items-center gap-3", children: [
291
291
  opt.right != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-600", children: opt.right }) : null,
292
- isSel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) })
292
+ isSel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
293
+ "svg",
294
+ {
295
+ viewBox: "0 0 24 24",
296
+ className: "h-4 w-4 text-slate-700 dark:text-rose-300",
297
+ fill: "none",
298
+ stroke: "currentColor",
299
+ strokeWidth: 2,
300
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" })
301
+ }
302
+ )
293
303
  ] })
294
304
  ]
295
305
  }
@@ -334,7 +344,7 @@ function ComboSelect({
334
344
  animate: "animate",
335
345
  exit: "exit",
336
346
  transition: import_animations.menuTransition,
337
- className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
347
+ className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-slate-700 dark:bg-[#05070b] dark:shadow-[0_18px_45px_rgba(0,0,0,0.75)]",
338
348
  children: filteredRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: noResultsText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
339
349
  if (row.kind === "section") {
340
350
  const Header = renderSectionHeader != null ? renderSectionHeader : DefaultSectionHeader;
@@ -428,14 +438,14 @@ function ComboSelect({
428
438
  )
429
439
  ] }),
430
440
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5 pointer-events-none", children: [
431
- loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none text-xs text-slate-400", children: "cargando\u2026" }),
441
+ loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none text-xs text-slate-400 dark:text-slate-500", children: "cargando\u2026" }),
432
442
  allowClear && value != null && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
433
443
  import_Button.default,
434
444
  {
435
445
  unstyled: true,
436
446
  type: "button",
437
447
  title: "Limpiar",
438
- className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-[var(--fx-surface)]",
448
+ className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-slate-600/80 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800",
439
449
  onMouseDown: (e) => {
440
450
  e.preventDefault();
441
451
  e.stopPropagation();
@@ -463,7 +473,7 @@ function ComboSelect({
463
473
  title: open ? "Cerrar" : "Abrir",
464
474
  disabled,
465
475
  className: cx(
466
- disabled ? "pointer-events-none opacity-60" : "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-[var(--fx-surface)]"
476
+ disabled ? "pointer-events-none opacity-60" : "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-slate-600/80 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
467
477
  ),
468
478
  onMouseDown: (e) => {
469
479
  e.preventDefault();
package/dist/ComboSelect.mjs CHANGED
@@ -8,7 +8,7 @@ import Button from "./Button";
8
8
  import { AnimatePresence, motion } from "framer-motion";
9
9
  import { popOver, menuTransition } from "./animations";
10
10
  const cx = (...a) => a.filter(Boolean).join(" ");
11
- const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-4 focus-within:ring-slate-900/5 focus-within:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus-within:ring-white/10";
11
+ const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-4 focus-within:ring-slate-900/5 focus-within:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-slate-600/80 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:placeholder:text-slate-500 dark:shadow-[0_0_0_1px_rgba(15,23,42,0.65)] dark:focus-within:ring-rose-500/30 dark:focus-within:border-rose-500/70";
12
12
  const isFocusableOrInteractive = (el) => {
13
13
  if (!el) return false;
14
14
  return !!el.closest(
@@ -235,7 +235,7 @@ function ComboSelect({
235
235
  {
236
236
  className: cx(
237
237
  "flex items-center justify-between gap-3",
238
- isActive ? "bg-slate-50 dark:bg-white/10" : "hover:bg-slate-50 dark:hover:bg-white/10"
238
+ isActive ? "bg-slate-50 dark:bg-slate-800/80" : "hover:bg-slate-50 dark:hover:bg-slate-800/60"
239
239
  ),
240
240
  children: [
241
241
  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex items-center gap-3", children: [
@@ -250,13 +250,23 @@ function ComboSelect({
250
250
  }
251
251
  ),
252
252
  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
253
- /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: opt.label }),
253
+ /* @__PURE__ */ jsx("div", { className: "truncate font-medium text-slate-900 dark:text-slate-50", children: opt.label }),
254
254
  opt.sublabel ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: opt.sublabel }) : opt.hint ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: opt.hint }) : null
255
255
  ] })
256
256
  ] }),
257
257
  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
258
258
  opt.right != null ? /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-600", children: opt.right }) : null,
259
- isSel && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) })
259
+ isSel && /* @__PURE__ */ jsx(
260
+ "svg",
261
+ {
262
+ viewBox: "0 0 24 24",
263
+ className: "h-4 w-4 text-slate-700 dark:text-rose-300",
264
+ fill: "none",
265
+ stroke: "currentColor",
266
+ strokeWidth: 2,
267
+ children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" })
268
+ }
269
+ )
260
270
  ] })
261
271
  ]
262
272
  }
@@ -301,7 +311,7 @@ function ComboSelect({
301
311
  animate: "animate",
302
312
  exit: "exit",
303
313
  transition: menuTransition,
304
- className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
314
+ className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-slate-700 dark:bg-[#05070b] dark:shadow-[0_18px_45px_rgba(0,0,0,0.75)]",
305
315
  children: filteredRows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: noResultsText }) : /* @__PURE__ */ jsx("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
306
316
  if (row.kind === "section") {
307
317
  const Header = renderSectionHeader != null ? renderSectionHeader : DefaultSectionHeader;
@@ -395,14 +405,14 @@ function ComboSelect({
395
405
  )
396
406
  ] }),
397
407
  /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5 pointer-events-none", children: [
398
- loading && /* @__PURE__ */ jsx("span", { className: "pointer-events-none text-xs text-slate-400", children: "cargando\u2026" }),
408
+ loading && /* @__PURE__ */ jsx("span", { className: "pointer-events-none text-xs text-slate-400 dark:text-slate-500", children: "cargando\u2026" }),
399
409
  allowClear && value != null && !disabled && /* @__PURE__ */ jsx(
400
410
  Button,
401
411
  {
402
412
  unstyled: true,
403
413
  type: "button",
404
414
  title: "Limpiar",
405
- className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-[var(--fx-surface)]",
415
+ className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-slate-600/80 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800",
406
416
  onMouseDown: (e) => {
407
417
  e.preventDefault();
408
418
  e.stopPropagation();
@@ -430,7 +440,7 @@ function ComboSelect({
430
440
  title: open ? "Cerrar" : "Abrir",
431
441
  disabled,
432
442
  className: cx(
433
- disabled ? "pointer-events-none opacity-60" : "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-[var(--fx-surface)]"
443
+ disabled ? "pointer-events-none opacity-60" : "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-slate-600/80 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
434
444
  ),
435
445
  onMouseDown: (e) => {
436
446
  e.preventDefault();
package/dist/Select.js CHANGED
@@ -82,8 +82,8 @@ function ModernSelect({
82
82
  if (!el) return;
83
83
  const r = el.getBoundingClientRect();
84
84
  setMenuPos({
85
- top: Math.round(r.bottom + window.scrollY + 6),
86
- left: Math.round(r.left + window.scrollX),
85
+ top: Math.round(r.bottom + 6),
86
+ left: Math.round(r.left),
87
87
  width: Math.round(r.width)
88
88
  });
89
89
  }, []);
package/dist/Select.mjs CHANGED
@@ -49,8 +49,8 @@ function ModernSelect({
49
49
  if (!el) return;
50
50
  const r = el.getBoundingClientRect();
51
51
  setMenuPos({
52
- top: Math.round(r.bottom + window.scrollY + 6),
53
- left: Math.round(r.left + window.scrollX),
52
+ top: Math.round(r.bottom + 6),
53
+ left: Math.round(r.left),
54
54
  width: Math.round(r.width)
55
55
  });
56
56
  }, []);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.11",
3
+ "version": "0.3.13",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",