@moeve-ui/ui 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +25 -2
- package/dist/index.d.ts +25 -2
- package/dist/index.js +176 -165
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +175 -165
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -207,8 +207,17 @@ function Card({ children, className = "", noPadding = false, ...rest }) {
|
|
|
207
207
|
);
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
+
// src/atoms/Logo/Logo.tsx
|
|
211
|
+
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
212
|
+
function Logo({ accent, text, accentClassName = "text-brand-primary", textClassName = "text-text-primary", className = "" }) {
|
|
213
|
+
return /* @__PURE__ */ jsxs3("span", { className: `inline-flex whitespace-nowrap font-black italic uppercase tracking-tight ${className}`.trim(), children: [
|
|
214
|
+
accent && /* @__PURE__ */ jsx5("span", { className: accentClassName, children: accent }),
|
|
215
|
+
/* @__PURE__ */ jsx5("span", { className: textClassName, children: text })
|
|
216
|
+
] });
|
|
217
|
+
}
|
|
218
|
+
|
|
210
219
|
// src/atoms/ProgressBar/ProgressBar.tsx
|
|
211
|
-
import { jsx as
|
|
220
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
212
221
|
function ProgressBar({
|
|
213
222
|
value,
|
|
214
223
|
fillClassName = "bg-info",
|
|
@@ -218,10 +227,10 @@ function ProgressBar({
|
|
|
218
227
|
}) {
|
|
219
228
|
const clamped = Math.min(100, Math.max(0, value));
|
|
220
229
|
if (segments > 1) {
|
|
221
|
-
return /* @__PURE__ */
|
|
230
|
+
return /* @__PURE__ */ jsx6("div", { className: `flex w-full gap-0.5 overflow-hidden rounded-full bg-border ${heightClassName} ${className}`.trim(), children: Array.from({ length: segments }).map((_, i) => {
|
|
222
231
|
const segmentStart = i / segments * 100;
|
|
223
232
|
const filled = clamped > segmentStart;
|
|
224
|
-
return /* @__PURE__ */
|
|
233
|
+
return /* @__PURE__ */ jsx6(
|
|
225
234
|
"div",
|
|
226
235
|
{
|
|
227
236
|
className: `h-full flex-1 ${filled ? fillClassName : "opacity-20 " + fillClassName}`
|
|
@@ -230,38 +239,38 @@ function ProgressBar({
|
|
|
230
239
|
);
|
|
231
240
|
}) });
|
|
232
241
|
}
|
|
233
|
-
return /* @__PURE__ */
|
|
242
|
+
return /* @__PURE__ */ jsx6("div", { className: `w-full overflow-hidden rounded-full bg-border ${heightClassName} ${className}`.trim(), children: /* @__PURE__ */ jsx6("div", { className: `h-full rounded-full ${fillClassName}`, style: { width: `${clamped}%` } }) });
|
|
234
243
|
}
|
|
235
244
|
|
|
236
245
|
// src/atoms/Snackbar/Snackbar.tsx
|
|
237
|
-
import { jsx as
|
|
246
|
+
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
238
247
|
var TONE_CLASSES2 = {
|
|
239
248
|
success: "bg-success",
|
|
240
249
|
danger: "bg-danger",
|
|
241
250
|
neutral: "bg-text-secondary"
|
|
242
251
|
};
|
|
243
252
|
var TONE_ICON = {
|
|
244
|
-
success: /* @__PURE__ */
|
|
245
|
-
danger: /* @__PURE__ */
|
|
253
|
+
success: /* @__PURE__ */ jsx7(CheckCircleIcon, { className: "size-5" }),
|
|
254
|
+
danger: /* @__PURE__ */ jsx7(XIcon, { className: "size-5" }),
|
|
246
255
|
neutral: null
|
|
247
256
|
};
|
|
248
257
|
function Snackbar({ message, tone = "success", onClose, className = "" }) {
|
|
249
|
-
return /* @__PURE__ */
|
|
258
|
+
return /* @__PURE__ */ jsxs4(
|
|
250
259
|
"div",
|
|
251
260
|
{
|
|
252
261
|
role: "status",
|
|
253
262
|
className: `flex w-full items-center gap-2 rounded-lg px-6 py-3 text-white shadow-card ${TONE_CLASSES2[tone]} ${className}`.trim(),
|
|
254
263
|
children: [
|
|
255
264
|
TONE_ICON[tone],
|
|
256
|
-
/* @__PURE__ */
|
|
257
|
-
/* @__PURE__ */
|
|
265
|
+
/* @__PURE__ */ jsx7("p", { className: "flex-1 text-sm font-semibold", children: message }),
|
|
266
|
+
/* @__PURE__ */ jsx7(
|
|
258
267
|
"button",
|
|
259
268
|
{
|
|
260
269
|
type: "button",
|
|
261
270
|
onClick: onClose,
|
|
262
271
|
"aria-label": "Cerrar",
|
|
263
272
|
className: "text-white/80 transition-colors hover:text-white",
|
|
264
|
-
children: /* @__PURE__ */
|
|
273
|
+
children: /* @__PURE__ */ jsx7(XIcon, { className: "size-4" })
|
|
265
274
|
}
|
|
266
275
|
)
|
|
267
276
|
]
|
|
@@ -270,16 +279,16 @@ function Snackbar({ message, tone = "success", onClose, className = "" }) {
|
|
|
270
279
|
}
|
|
271
280
|
|
|
272
281
|
// src/molecules/SegmentedTabs/SegmentedTabs.tsx
|
|
273
|
-
import { jsx as
|
|
282
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
274
283
|
function SegmentedTabs({ options, value, onChange, className = "" }) {
|
|
275
|
-
return /* @__PURE__ */
|
|
284
|
+
return /* @__PURE__ */ jsx8(
|
|
276
285
|
"div",
|
|
277
286
|
{
|
|
278
287
|
role: "tablist",
|
|
279
288
|
className: `inline-flex items-start gap-0 rounded-lg bg-surface-muted p-1 ${className}`.trim(),
|
|
280
289
|
children: options.map((option) => {
|
|
281
290
|
const active = option.value === value;
|
|
282
|
-
return /* @__PURE__ */
|
|
291
|
+
return /* @__PURE__ */ jsx8(
|
|
283
292
|
"button",
|
|
284
293
|
{
|
|
285
294
|
type: "button",
|
|
@@ -297,9 +306,9 @@ function SegmentedTabs({ options, value, onChange, className = "" }) {
|
|
|
297
306
|
}
|
|
298
307
|
|
|
299
308
|
// src/molecules/NavItem/NavItem.tsx
|
|
300
|
-
import { jsxs as
|
|
309
|
+
import { jsxs as jsxs5 } from "react/jsx-runtime";
|
|
301
310
|
function NavItem({ icon, label, active = false, href = "#" }) {
|
|
302
|
-
return /* @__PURE__ */
|
|
311
|
+
return /* @__PURE__ */ jsxs5(
|
|
303
312
|
"a",
|
|
304
313
|
{
|
|
305
314
|
href,
|
|
@@ -313,10 +322,10 @@ function NavItem({ icon, label, active = false, href = "#" }) {
|
|
|
313
322
|
}
|
|
314
323
|
|
|
315
324
|
// src/molecules/StatTile/StatTile.tsx
|
|
316
|
-
import { jsx as
|
|
325
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
317
326
|
var DELTA_ICON = {
|
|
318
|
-
success: /* @__PURE__ */
|
|
319
|
-
danger: /* @__PURE__ */
|
|
327
|
+
success: /* @__PURE__ */ jsx9(TrendUpIcon, { className: "size-4" }),
|
|
328
|
+
danger: /* @__PURE__ */ jsx9(TrendDownIcon, { className: "size-4" }),
|
|
320
329
|
neutral: null
|
|
321
330
|
};
|
|
322
331
|
function StatTile({
|
|
@@ -329,23 +338,23 @@ function StatTile({
|
|
|
329
338
|
progressValue,
|
|
330
339
|
progressClassName = "bg-info"
|
|
331
340
|
}) {
|
|
332
|
-
return /* @__PURE__ */
|
|
333
|
-
/* @__PURE__ */
|
|
334
|
-
/* @__PURE__ */
|
|
335
|
-
/* @__PURE__ */
|
|
336
|
-
/* @__PURE__ */
|
|
337
|
-
unit && /* @__PURE__ */
|
|
341
|
+
return /* @__PURE__ */ jsxs6("div", { className: "relative flex flex-1 flex-col gap-4 overflow-hidden rounded-2xl bg-surface-card p-6 shadow-card", children: [
|
|
342
|
+
/* @__PURE__ */ jsx9("span", { className: "pointer-events-none absolute right-5 top-5 text-border", children: icon }),
|
|
343
|
+
/* @__PURE__ */ jsx9("h3", { className: "max-w-[80%] text-lg font-semibold text-text-secondary", children: label }),
|
|
344
|
+
/* @__PURE__ */ jsxs6("p", { className: "flex items-baseline gap-1.5", children: [
|
|
345
|
+
/* @__PURE__ */ jsx9("span", { className: "text-4xl font-bold text-text-primary", children: value }),
|
|
346
|
+
unit && /* @__PURE__ */ jsx9("span", { className: "text-2xl font-medium text-text-tertiary", children: unit })
|
|
338
347
|
] }),
|
|
339
|
-
delta && /* @__PURE__ */
|
|
348
|
+
delta && /* @__PURE__ */ jsxs6(Badge, { tone: deltaTone, className: "w-fit gap-1", children: [
|
|
340
349
|
DELTA_ICON[deltaTone],
|
|
341
350
|
delta
|
|
342
351
|
] }),
|
|
343
|
-
progressValue !== void 0 && /* @__PURE__ */
|
|
352
|
+
progressValue !== void 0 && /* @__PURE__ */ jsx9(ProgressBar, { value: progressValue, fillClassName: progressClassName })
|
|
344
353
|
] });
|
|
345
354
|
}
|
|
346
355
|
|
|
347
356
|
// src/molecules/DecisionFactorRow/DecisionFactorRow.tsx
|
|
348
|
-
import { jsx as
|
|
357
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
349
358
|
function DecisionFactorRow({
|
|
350
359
|
label,
|
|
351
360
|
statusText,
|
|
@@ -355,21 +364,21 @@ function DecisionFactorRow({
|
|
|
355
364
|
segments = 1,
|
|
356
365
|
description
|
|
357
366
|
}) {
|
|
358
|
-
return /* @__PURE__ */
|
|
359
|
-
/* @__PURE__ */
|
|
360
|
-
/* @__PURE__ */
|
|
361
|
-
/* @__PURE__ */
|
|
367
|
+
return /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-2", children: [
|
|
368
|
+
/* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between", children: [
|
|
369
|
+
/* @__PURE__ */ jsx10("span", { className: "text-sm font-semibold text-text-primary", children: label }),
|
|
370
|
+
/* @__PURE__ */ jsx10("span", { className: `text-sm font-semibold ${statusClassName}`, children: statusText })
|
|
362
371
|
] }),
|
|
363
|
-
/* @__PURE__ */
|
|
364
|
-
/* @__PURE__ */
|
|
372
|
+
/* @__PURE__ */ jsx10(ProgressBar, { value, fillClassName, heightClassName: "h-1.5", segments }),
|
|
373
|
+
/* @__PURE__ */ jsx10("p", { className: "text-xs leading-relaxed text-text-secondary", children: description })
|
|
365
374
|
] });
|
|
366
375
|
}
|
|
367
376
|
|
|
368
377
|
// src/molecules/CompetitorRow/CompetitorRow.tsx
|
|
369
|
-
import { jsx as
|
|
378
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
370
379
|
var TREND_ICON = {
|
|
371
|
-
up: /* @__PURE__ */
|
|
372
|
-
down: /* @__PURE__ */
|
|
380
|
+
up: /* @__PURE__ */ jsx11(ArrowUpIcon, { className: "size-4" }),
|
|
381
|
+
down: /* @__PURE__ */ jsx11(ArrowDownIcon, { className: "size-4" }),
|
|
373
382
|
stable: null
|
|
374
383
|
};
|
|
375
384
|
var TREND_TEXT_CLASS = {
|
|
@@ -387,32 +396,32 @@ function CompetitorRow({
|
|
|
387
396
|
trend,
|
|
388
397
|
trendLabel
|
|
389
398
|
}) {
|
|
390
|
-
return /* @__PURE__ */
|
|
391
|
-
/* @__PURE__ */
|
|
392
|
-
/* @__PURE__ */
|
|
393
|
-
/* @__PURE__ */
|
|
394
|
-
/* @__PURE__ */
|
|
395
|
-
/* @__PURE__ */
|
|
396
|
-
/* @__PURE__ */
|
|
397
|
-
/* @__PURE__ */
|
|
399
|
+
return /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between rounded-lg bg-surface-page p-4", children: [
|
|
400
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4", children: [
|
|
401
|
+
/* @__PURE__ */ jsx11(Avatar, { className: `${avatarBgClassName} ${avatarTextClassName}`, children: avatarLetter }),
|
|
402
|
+
/* @__PURE__ */ jsxs8("div", { children: [
|
|
403
|
+
/* @__PURE__ */ jsx11("p", { className: "text-sm font-semibold text-text-primary", children: name }),
|
|
404
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 text-text-secondary", children: [
|
|
405
|
+
/* @__PURE__ */ jsx11(MapPinIcon, { className: "size-[18px]" }),
|
|
406
|
+
/* @__PURE__ */ jsxs8("span", { className: "text-xs font-medium tracking-wide", children: [
|
|
398
407
|
distanceKm,
|
|
399
408
|
" km"
|
|
400
409
|
] })
|
|
401
410
|
] })
|
|
402
411
|
] })
|
|
403
412
|
] }),
|
|
404
|
-
/* @__PURE__ */
|
|
405
|
-
/* @__PURE__ */
|
|
406
|
-
/* @__PURE__ */
|
|
413
|
+
/* @__PURE__ */ jsxs8("div", { className: "text-right", children: [
|
|
414
|
+
/* @__PURE__ */ jsx11("p", { className: "text-2xl font-semibold text-text-primary", children: price }),
|
|
415
|
+
/* @__PURE__ */ jsxs8("div", { className: `flex items-center justify-end gap-1 text-xs font-medium ${TREND_TEXT_CLASS[trend]}`, children: [
|
|
407
416
|
TREND_ICON[trend],
|
|
408
|
-
/* @__PURE__ */
|
|
417
|
+
/* @__PURE__ */ jsx11("span", { children: trendLabel })
|
|
409
418
|
] })
|
|
410
419
|
] })
|
|
411
420
|
] });
|
|
412
421
|
}
|
|
413
422
|
|
|
414
423
|
// src/molecules/PriceRangeSlider/PriceRangeSlider.tsx
|
|
415
|
-
import { jsx as
|
|
424
|
+
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
416
425
|
function PriceRangeSlider({
|
|
417
426
|
min,
|
|
418
427
|
max,
|
|
@@ -424,38 +433,38 @@ function PriceRangeSlider({
|
|
|
424
433
|
currencyFormatter
|
|
425
434
|
}) {
|
|
426
435
|
const percent = (value - min) / (max - min) * 100;
|
|
427
|
-
return /* @__PURE__ */
|
|
428
|
-
/* @__PURE__ */
|
|
429
|
-
/* @__PURE__ */
|
|
430
|
-
/* @__PURE__ */
|
|
431
|
-
/* @__PURE__ */
|
|
436
|
+
return /* @__PURE__ */ jsxs9("div", { className: "relative h-[250px] w-full rounded-xl border border-border/30 bg-surface-page p-6 shadow-tab", children: [
|
|
437
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
|
|
438
|
+
/* @__PURE__ */ jsxs9("div", { children: [
|
|
439
|
+
/* @__PURE__ */ jsx12("p", { className: "text-sm text-text-secondary", children: "PRECIO ACTUAL" }),
|
|
440
|
+
/* @__PURE__ */ jsx12("p", { className: "text-2xl font-semibold text-text-primary", children: currencyFormatter(currentPrice) })
|
|
432
441
|
] }),
|
|
433
|
-
/* @__PURE__ */
|
|
434
|
-
/* @__PURE__ */
|
|
435
|
-
/* @__PURE__ */
|
|
442
|
+
/* @__PURE__ */ jsxs9("div", { className: "text-right", children: [
|
|
443
|
+
/* @__PURE__ */ jsx12("p", { className: "text-sm text-brand-primary", children: "RECOMENDADO" }),
|
|
444
|
+
/* @__PURE__ */ jsx12("p", { className: "text-2xl font-semibold text-brand-primary", children: currencyFormatter(recommendedPrice) })
|
|
436
445
|
] })
|
|
437
446
|
] }),
|
|
438
|
-
/* @__PURE__ */
|
|
439
|
-
/* @__PURE__ */
|
|
447
|
+
/* @__PURE__ */ jsxs9("div", { className: "absolute left-6 right-6 top-[100px] flex h-24 items-center justify-center", children: [
|
|
448
|
+
/* @__PURE__ */ jsxs9(
|
|
440
449
|
"div",
|
|
441
450
|
{
|
|
442
451
|
className: "pointer-events-none absolute -top-16 -translate-x-1/2 rounded-lg bg-[#2b3134] px-4 py-2 text-sm font-semibold text-white shadow-tooltip",
|
|
443
452
|
style: { left: `${percent}%` },
|
|
444
453
|
children: [
|
|
445
454
|
currencyFormatter(value),
|
|
446
|
-
/* @__PURE__ */
|
|
455
|
+
/* @__PURE__ */ jsx12("span", { className: "absolute left-1/2 top-full h-0 w-0 -translate-x-1/2 border-x-8 border-t-8 border-x-transparent border-t-[#2b3134]" })
|
|
447
456
|
]
|
|
448
457
|
}
|
|
449
458
|
),
|
|
450
|
-
/* @__PURE__ */
|
|
451
|
-
/* @__PURE__ */
|
|
459
|
+
/* @__PURE__ */ jsxs9("div", { className: "relative h-2 w-full rounded-full bg-border", children: [
|
|
460
|
+
/* @__PURE__ */ jsx12(
|
|
452
461
|
"div",
|
|
453
462
|
{
|
|
454
463
|
className: "h-full rounded-full bg-brand-primary",
|
|
455
464
|
style: { width: `${percent}%` }
|
|
456
465
|
}
|
|
457
466
|
),
|
|
458
|
-
/* @__PURE__ */
|
|
467
|
+
/* @__PURE__ */ jsx12(
|
|
459
468
|
"input",
|
|
460
469
|
{
|
|
461
470
|
type: "range",
|
|
@@ -470,42 +479,42 @@ function PriceRangeSlider({
|
|
|
470
479
|
)
|
|
471
480
|
] })
|
|
472
481
|
] }),
|
|
473
|
-
/* @__PURE__ */
|
|
474
|
-
/* @__PURE__ */
|
|
475
|
-
/* @__PURE__ */
|
|
482
|
+
/* @__PURE__ */ jsxs9("div", { className: "absolute bottom-6 left-6 right-6 flex items-start justify-between text-sm text-text-secondary", children: [
|
|
483
|
+
/* @__PURE__ */ jsx12("span", { children: currencyFormatter(min) }),
|
|
484
|
+
/* @__PURE__ */ jsx12("span", { children: currencyFormatter(max) })
|
|
476
485
|
] })
|
|
477
486
|
] });
|
|
478
487
|
}
|
|
479
488
|
|
|
480
489
|
// src/molecules/MiniMapCard/MiniMapCard.tsx
|
|
481
|
-
import { jsx as
|
|
490
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
482
491
|
function MiniMapCard({ overlayTitle, overlayLinkLabel, competitorCount }) {
|
|
483
|
-
return /* @__PURE__ */
|
|
484
|
-
/* @__PURE__ */
|
|
485
|
-
/* @__PURE__ */
|
|
486
|
-
Array.from({ length: 9 }).map((_, i) => /* @__PURE__ */
|
|
487
|
-
Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */
|
|
488
|
-
/* @__PURE__ */
|
|
489
|
-
/* @__PURE__ */
|
|
490
|
-
/* @__PURE__ */
|
|
491
|
-
/* @__PURE__ */
|
|
492
|
+
return /* @__PURE__ */ jsxs10("div", { className: "relative h-64 w-full overflow-hidden rounded-xl bg-white p-2 shadow-tab", children: [
|
|
493
|
+
/* @__PURE__ */ jsx13("div", { className: "relative h-full w-full overflow-hidden rounded-lg bg-[#dbe9ee]", children: /* @__PURE__ */ jsxs10("svg", { viewBox: "0 0 320 220", className: "h-full w-full", preserveAspectRatio: "xMidYMid slice", children: [
|
|
494
|
+
/* @__PURE__ */ jsx13("rect", { width: "320", height: "220", fill: "#dbe9ee" }),
|
|
495
|
+
Array.from({ length: 9 }).map((_, i) => /* @__PURE__ */ jsx13("line", { x1: i * 40, y1: "0", x2: i * 40, y2: "220", stroke: "#c5dbe2", strokeWidth: "1" }, `v${i}`)),
|
|
496
|
+
Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ jsx13("line", { x1: "0", y1: i * 36, x2: "320", y2: i * 36, stroke: "#c5dbe2", strokeWidth: "1" }, `h${i}`)),
|
|
497
|
+
/* @__PURE__ */ jsx13("circle", { cx: "160", cy: "110", r: "10", fill: "#006395" }),
|
|
498
|
+
/* @__PURE__ */ jsx13("circle", { cx: "100", cy: "70", r: "6", fill: "#404850" }),
|
|
499
|
+
/* @__PURE__ */ jsx13("circle", { cx: "220", cy: "60", r: "6", fill: "#404850" }),
|
|
500
|
+
/* @__PURE__ */ jsx13("circle", { cx: "235", cy: "150", r: "6", fill: "#404850" })
|
|
492
501
|
] }) }),
|
|
493
|
-
/* @__PURE__ */
|
|
494
|
-
/* @__PURE__ */
|
|
495
|
-
/* @__PURE__ */
|
|
502
|
+
/* @__PURE__ */ jsxs10("div", { className: "absolute inset-x-4 bottom-4 flex flex-col gap-1 rounded-lg bg-surface-page/90 p-3 shadow-modal backdrop-blur-sm", children: [
|
|
503
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 text-xs font-medium uppercase tracking-wider text-text-primary", children: [
|
|
504
|
+
/* @__PURE__ */ jsx13(MapPinIcon, { className: "size-3.5" }),
|
|
496
505
|
overlayTitle
|
|
497
506
|
] }),
|
|
498
|
-
/* @__PURE__ */
|
|
507
|
+
/* @__PURE__ */ jsx13("p", { className: "text-sm font-semibold text-brand-primary", "aria-label": `${overlayLinkLabel} - ${competitorCount} en total`, children: overlayLinkLabel })
|
|
499
508
|
] })
|
|
500
509
|
] });
|
|
501
510
|
}
|
|
502
511
|
|
|
503
512
|
// src/molecules/WeekdayPicker/WeekdayPicker.tsx
|
|
504
|
-
import { jsx as
|
|
513
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
505
514
|
function WeekdayPicker({ labels, selected, onToggle, className = "" }) {
|
|
506
|
-
return /* @__PURE__ */
|
|
515
|
+
return /* @__PURE__ */ jsx14("div", { role: "group", className: `flex flex-wrap gap-2 ${className}`.trim(), children: labels.map((label, day) => {
|
|
507
516
|
const active = selected.includes(day);
|
|
508
|
-
return /* @__PURE__ */
|
|
517
|
+
return /* @__PURE__ */ jsx14(
|
|
509
518
|
"button",
|
|
510
519
|
{
|
|
511
520
|
type: "button",
|
|
@@ -520,45 +529,45 @@ function WeekdayPicker({ labels, selected, onToggle, className = "" }) {
|
|
|
520
529
|
}
|
|
521
530
|
|
|
522
531
|
// src/molecules/SelectableCard/SelectableCard.tsx
|
|
523
|
-
import { jsx as
|
|
532
|
+
import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
524
533
|
function SelectableCard({ icon, title, subtitle, media, selected = false, onClick, className = "" }) {
|
|
525
534
|
const base2 = `w-full rounded-xl border text-left transition-colors ${selected ? "border-brand-primary bg-brand-primary/5" : "border-border hover:bg-surface-subtle"} ${className}`.trim();
|
|
526
535
|
if (media) {
|
|
527
|
-
return /* @__PURE__ */
|
|
528
|
-
/* @__PURE__ */
|
|
529
|
-
/* @__PURE__ */
|
|
530
|
-
icon && /* @__PURE__ */
|
|
536
|
+
return /* @__PURE__ */ jsxs11("button", { type: "button", "aria-pressed": selected, onClick, className: `overflow-hidden ${base2}`, children: [
|
|
537
|
+
/* @__PURE__ */ jsx15("div", { className: "isolate h-36 w-full overflow-hidden", children: media }),
|
|
538
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 p-4", children: [
|
|
539
|
+
icon && /* @__PURE__ */ jsx15(
|
|
531
540
|
"span",
|
|
532
541
|
{
|
|
533
542
|
className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${selected ? "bg-brand-primary text-white" : "bg-surface-muted text-text-secondary"}`,
|
|
534
543
|
children: icon
|
|
535
544
|
}
|
|
536
545
|
),
|
|
537
|
-
/* @__PURE__ */
|
|
538
|
-
/* @__PURE__ */
|
|
539
|
-
subtitle && /* @__PURE__ */
|
|
546
|
+
/* @__PURE__ */ jsxs11("span", { className: "flex flex-col", children: [
|
|
547
|
+
/* @__PURE__ */ jsx15("span", { className: "font-medium text-text-primary", children: title }),
|
|
548
|
+
subtitle && /* @__PURE__ */ jsx15("span", { className: "text-sm text-text-tertiary", children: subtitle })
|
|
540
549
|
] })
|
|
541
550
|
] })
|
|
542
551
|
] });
|
|
543
552
|
}
|
|
544
|
-
return /* @__PURE__ */
|
|
545
|
-
icon && /* @__PURE__ */
|
|
553
|
+
return /* @__PURE__ */ jsxs11("button", { type: "button", "aria-pressed": selected, onClick, className: `flex items-center gap-3 p-4 ${base2}`, children: [
|
|
554
|
+
icon && /* @__PURE__ */ jsx15(
|
|
546
555
|
"span",
|
|
547
556
|
{
|
|
548
557
|
className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-full ${selected ? "bg-brand-primary text-white" : "bg-surface-muted text-text-secondary"}`,
|
|
549
558
|
children: icon
|
|
550
559
|
}
|
|
551
560
|
),
|
|
552
|
-
/* @__PURE__ */
|
|
553
|
-
/* @__PURE__ */
|
|
554
|
-
subtitle && /* @__PURE__ */
|
|
561
|
+
/* @__PURE__ */ jsxs11("span", { className: "flex flex-col", children: [
|
|
562
|
+
/* @__PURE__ */ jsx15("span", { className: "font-medium text-text-primary", children: title }),
|
|
563
|
+
subtitle && /* @__PURE__ */ jsx15("span", { className: "text-sm text-text-tertiary", children: subtitle })
|
|
555
564
|
] })
|
|
556
565
|
] });
|
|
557
566
|
}
|
|
558
567
|
|
|
559
568
|
// src/molecules/FileDropzone/FileDropzone.tsx
|
|
560
569
|
import { useRef, useState } from "react";
|
|
561
|
-
import { Fragment, jsx as
|
|
570
|
+
import { Fragment, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
562
571
|
function FileDropzone({
|
|
563
572
|
accept,
|
|
564
573
|
onFileSelected,
|
|
@@ -583,7 +592,7 @@ function FileDropzone({
|
|
|
583
592
|
setDragActive(false);
|
|
584
593
|
onFileSelected(e.dataTransfer.files?.[0] ?? null);
|
|
585
594
|
}
|
|
586
|
-
return /* @__PURE__ */
|
|
595
|
+
return /* @__PURE__ */ jsxs12(
|
|
587
596
|
"div",
|
|
588
597
|
{
|
|
589
598
|
role: "button",
|
|
@@ -598,7 +607,7 @@ function FileDropzone({
|
|
|
598
607
|
onDrop: handleDrop,
|
|
599
608
|
className: `flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-8 text-center transition-colors ${dragActive ? "border-brand-primary bg-brand-primary/5" : "border-border hover:border-brand-primary/60"} ${className}`.trim(),
|
|
600
609
|
children: [
|
|
601
|
-
/* @__PURE__ */
|
|
610
|
+
/* @__PURE__ */ jsx16(
|
|
602
611
|
"input",
|
|
603
612
|
{
|
|
604
613
|
ref: inputRef,
|
|
@@ -608,10 +617,10 @@ function FileDropzone({
|
|
|
608
617
|
onChange: (e) => onFileSelected(e.target.files?.[0] ?? null)
|
|
609
618
|
}
|
|
610
619
|
),
|
|
611
|
-
/* @__PURE__ */
|
|
612
|
-
selectedFileName ? /* @__PURE__ */
|
|
613
|
-
/* @__PURE__ */
|
|
614
|
-
hint && /* @__PURE__ */
|
|
620
|
+
/* @__PURE__ */ jsx16(UploadIcon, { className: `size-6 ${dragActive ? "text-brand-primary" : "text-text-tertiary"}` }),
|
|
621
|
+
selectedFileName ? /* @__PURE__ */ jsx16("p", { className: "text-sm font-medium text-text-primary", children: selectedFileName }) : /* @__PURE__ */ jsxs12(Fragment, { children: [
|
|
622
|
+
/* @__PURE__ */ jsx16("p", { className: "text-sm font-medium text-text-primary", children: label }),
|
|
623
|
+
hint && /* @__PURE__ */ jsx16("p", { className: "text-xs text-text-tertiary", children: hint })
|
|
615
624
|
] })
|
|
616
625
|
]
|
|
617
626
|
}
|
|
@@ -619,7 +628,7 @@ function FileDropzone({
|
|
|
619
628
|
}
|
|
620
629
|
|
|
621
630
|
// src/organisms/Sidebar/Sidebar.tsx
|
|
622
|
-
import { jsx as
|
|
631
|
+
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
623
632
|
function Sidebar({
|
|
624
633
|
brandName = "Redinamic",
|
|
625
634
|
stations,
|
|
@@ -629,43 +638,43 @@ function Sidebar({
|
|
|
629
638
|
user,
|
|
630
639
|
onLogout
|
|
631
640
|
}) {
|
|
632
|
-
return /* @__PURE__ */
|
|
633
|
-
/* @__PURE__ */
|
|
634
|
-
/* @__PURE__ */
|
|
635
|
-
/* @__PURE__ */
|
|
636
|
-
/* @__PURE__ */
|
|
641
|
+
return /* @__PURE__ */ jsxs13("aside", { className: "fixed left-0 top-0 flex h-screen w-[260px] flex-col justify-between bg-brand-sidebar pb-2 pt-8", children: [
|
|
642
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-6 px-4 pb-6", children: [
|
|
643
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 px-2", children: [
|
|
644
|
+
/* @__PURE__ */ jsx17("div", { className: "flex size-8 items-center justify-center rounded bg-brand-logo", children: /* @__PURE__ */ jsx17(BoltIcon, { className: "size-4 text-brand-sidebar" }) }),
|
|
645
|
+
/* @__PURE__ */ jsx17("span", { className: "text-2xl font-semibold tracking-tight text-white", children: brandName })
|
|
637
646
|
] }),
|
|
638
|
-
/* @__PURE__ */
|
|
639
|
-
/* @__PURE__ */
|
|
640
|
-
/* @__PURE__ */
|
|
647
|
+
/* @__PURE__ */ jsxs13("div", { className: "relative", children: [
|
|
648
|
+
/* @__PURE__ */ jsx17(MapPinIcon, { className: "pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-white" }),
|
|
649
|
+
/* @__PURE__ */ jsx17(
|
|
641
650
|
"select",
|
|
642
651
|
{
|
|
643
652
|
value: selectedStationId,
|
|
644
653
|
onChange: (event) => onSelectStation(event.target.value),
|
|
645
654
|
className: "w-full appearance-none rounded-xl border border-white/10 bg-white/10 py-2.5 pl-10 pr-9 text-sm font-semibold text-white outline-none",
|
|
646
|
-
children: stations.map((station) => /* @__PURE__ */
|
|
655
|
+
children: stations.map((station) => /* @__PURE__ */ jsx17("option", { value: station.id, className: "text-text-primary", children: station.label }, station.id))
|
|
647
656
|
}
|
|
648
657
|
),
|
|
649
|
-
/* @__PURE__ */
|
|
658
|
+
/* @__PURE__ */ jsx17(ChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 size-3 -translate-y-1/2 text-white" })
|
|
650
659
|
] })
|
|
651
660
|
] }),
|
|
652
|
-
/* @__PURE__ */
|
|
653
|
-
/* @__PURE__ */
|
|
654
|
-
/* @__PURE__ */
|
|
655
|
-
/* @__PURE__ */
|
|
656
|
-
/* @__PURE__ */
|
|
657
|
-
/* @__PURE__ */
|
|
658
|
-
/* @__PURE__ */
|
|
661
|
+
/* @__PURE__ */ jsx17("nav", { className: "flex flex-1 flex-col gap-1 px-4", children: navItems.map((item) => /* @__PURE__ */ jsx17(NavItem, { icon: item.icon, label: item.label, active: item.active, href: item.href }, item.key)) }),
|
|
662
|
+
/* @__PURE__ */ jsxs13("div", { className: "border-t border-white/10 px-4 pt-4", children: [
|
|
663
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 px-4 py-3", children: [
|
|
664
|
+
/* @__PURE__ */ jsx17(Avatar, { className: "bg-brand-primary text-white", children: /* @__PURE__ */ jsx17(UserCircleIcon, { className: "size-4" }) }),
|
|
665
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
666
|
+
/* @__PURE__ */ jsx17("p", { className: "text-sm font-semibold text-white", children: user.name }),
|
|
667
|
+
/* @__PURE__ */ jsx17("p", { className: "text-xs text-white/60", children: user.role })
|
|
659
668
|
] })
|
|
660
669
|
] }),
|
|
661
|
-
/* @__PURE__ */
|
|
670
|
+
/* @__PURE__ */ jsxs13(
|
|
662
671
|
"button",
|
|
663
672
|
{
|
|
664
673
|
type: "button",
|
|
665
674
|
onClick: onLogout,
|
|
666
675
|
className: "flex w-full items-center gap-3 rounded-lg px-4 py-2 text-sm font-semibold text-white/50 transition-colors hover:text-white/80",
|
|
667
676
|
children: [
|
|
668
|
-
/* @__PURE__ */
|
|
677
|
+
/* @__PURE__ */ jsx17(LogOutIcon, { className: "size-4" }),
|
|
669
678
|
"Cerrar Sesi\xF3n"
|
|
670
679
|
]
|
|
671
680
|
}
|
|
@@ -675,7 +684,7 @@ function Sidebar({
|
|
|
675
684
|
}
|
|
676
685
|
|
|
677
686
|
// src/organisms/TopBar/TopBar.tsx
|
|
678
|
-
import { jsx as
|
|
687
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
679
688
|
function TopBar({
|
|
680
689
|
stationName,
|
|
681
690
|
lastUpdatedLabel,
|
|
@@ -683,36 +692,36 @@ function TopBar({
|
|
|
683
692
|
refreshing = false,
|
|
684
693
|
middleContent
|
|
685
694
|
}) {
|
|
686
|
-
return /* @__PURE__ */
|
|
687
|
-
/* @__PURE__ */
|
|
688
|
-
/* @__PURE__ */
|
|
689
|
-
/* @__PURE__ */
|
|
690
|
-
/* @__PURE__ */
|
|
695
|
+
return /* @__PURE__ */ jsxs14("header", { className: "fixed left-[260px] right-0 top-0 z-10 flex h-20 items-center justify-between gap-4 bg-surface-page/80 px-6 shadow-header backdrop-blur-md", children: [
|
|
696
|
+
/* @__PURE__ */ jsxs14("div", { className: "shrink-0", children: [
|
|
697
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
|
|
698
|
+
/* @__PURE__ */ jsx18(MapPinIcon, { className: "size-4 text-text-primary" }),
|
|
699
|
+
/* @__PURE__ */ jsx18("span", { className: "text-sm font-semibold text-text-primary", children: stationName })
|
|
691
700
|
] }),
|
|
692
|
-
/* @__PURE__ */
|
|
693
|
-
/* @__PURE__ */
|
|
694
|
-
/* @__PURE__ */
|
|
701
|
+
/* @__PURE__ */ jsxs14("div", { className: "mt-1 flex items-center gap-2", children: [
|
|
702
|
+
/* @__PURE__ */ jsx18("span", { className: "size-2 rounded-full bg-success-dark" }),
|
|
703
|
+
/* @__PURE__ */ jsx18("span", { className: "text-xs font-medium text-text-secondary", children: lastUpdatedLabel })
|
|
695
704
|
] })
|
|
696
705
|
] }),
|
|
697
706
|
middleContent,
|
|
698
|
-
/* @__PURE__ */
|
|
699
|
-
/* @__PURE__ */
|
|
707
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex shrink-0 items-center gap-4", children: [
|
|
708
|
+
/* @__PURE__ */ jsx18(
|
|
700
709
|
Button,
|
|
701
710
|
{
|
|
702
711
|
variant: "primary",
|
|
703
|
-
icon: /* @__PURE__ */
|
|
712
|
+
icon: /* @__PURE__ */ jsx18(RefreshIcon, { className: `size-4 ${refreshing ? "animate-spin" : ""}` }),
|
|
704
713
|
onClick: onRefresh,
|
|
705
714
|
disabled: refreshing,
|
|
706
715
|
children: "Actualizar datos"
|
|
707
716
|
}
|
|
708
717
|
),
|
|
709
|
-
/* @__PURE__ */
|
|
718
|
+
/* @__PURE__ */ jsx18(Avatar, { className: "bg-brand-primary text-white", size: "sm", children: /* @__PURE__ */ jsx18(UserCircleIcon, { className: "size-4" }) })
|
|
710
719
|
] })
|
|
711
720
|
] });
|
|
712
721
|
}
|
|
713
722
|
|
|
714
723
|
// src/organisms/ConfirmDialog/ConfirmDialog.tsx
|
|
715
|
-
import { jsx as
|
|
724
|
+
import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
716
725
|
function ConfirmDialog({
|
|
717
726
|
open,
|
|
718
727
|
onClose,
|
|
@@ -727,49 +736,49 @@ function ConfirmDialog({
|
|
|
727
736
|
confirming = false
|
|
728
737
|
}) {
|
|
729
738
|
if (!open) return null;
|
|
730
|
-
return /* @__PURE__ */
|
|
731
|
-
/* @__PURE__ */
|
|
732
|
-
/* @__PURE__ */
|
|
739
|
+
return /* @__PURE__ */ jsx19("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4", children: /* @__PURE__ */ jsxs15("div", { className: "w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-modal", children: [
|
|
740
|
+
/* @__PURE__ */ jsxs15("div", { className: "relative flex items-center justify-center bg-gradient-to-r from-brand-primary to-info-dark py-8", children: [
|
|
741
|
+
/* @__PURE__ */ jsx19(
|
|
733
742
|
"button",
|
|
734
743
|
{
|
|
735
744
|
type: "button",
|
|
736
745
|
onClick: onClose,
|
|
737
746
|
"aria-label": "Cerrar",
|
|
738
747
|
className: "absolute right-4 top-4 text-white/80 hover:text-white",
|
|
739
|
-
children: /* @__PURE__ */
|
|
748
|
+
children: /* @__PURE__ */ jsx19(XIcon, { className: "size-5" })
|
|
740
749
|
}
|
|
741
750
|
),
|
|
742
|
-
/* @__PURE__ */
|
|
751
|
+
/* @__PURE__ */ jsx19("div", { className: "flex size-14 items-center justify-center rounded-full bg-white text-brand-primary", children: /* @__PURE__ */ jsx19(WalletIcon, { className: "size-6" }) })
|
|
743
752
|
] }),
|
|
744
|
-
/* @__PURE__ */
|
|
745
|
-
/* @__PURE__ */
|
|
746
|
-
/* @__PURE__ */
|
|
747
|
-
/* @__PURE__ */
|
|
748
|
-
/* @__PURE__ */
|
|
749
|
-
/* @__PURE__ */
|
|
750
|
-
/* @__PURE__ */
|
|
751
|
-
/* @__PURE__ */
|
|
753
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-center gap-3 px-8 py-6 text-center", children: [
|
|
754
|
+
/* @__PURE__ */ jsx19("h2", { className: "text-xl font-bold text-text-primary", children: title }),
|
|
755
|
+
/* @__PURE__ */ jsx19("span", { className: "rounded-full bg-surface-muted px-3 py-1 text-xs font-semibold text-text-secondary", children: productLabel }),
|
|
756
|
+
/* @__PURE__ */ jsx19("p", { className: "text-sm text-text-secondary", children: description }),
|
|
757
|
+
/* @__PURE__ */ jsxs15("div", { className: "mt-2 flex w-full items-center justify-between rounded-xl bg-surface-subtle p-4", children: [
|
|
758
|
+
/* @__PURE__ */ jsxs15("div", { className: "text-left", children: [
|
|
759
|
+
/* @__PURE__ */ jsx19("p", { className: "text-xs uppercase text-text-secondary", children: "Actual" }),
|
|
760
|
+
/* @__PURE__ */ jsx19("p", { className: "text-lg font-semibold text-text-tertiary line-through", children: currentPrice })
|
|
752
761
|
] }),
|
|
753
|
-
/* @__PURE__ */
|
|
754
|
-
/* @__PURE__ */
|
|
755
|
-
/* @__PURE__ */
|
|
756
|
-
/* @__PURE__ */
|
|
762
|
+
/* @__PURE__ */ jsx19("span", { className: "text-text-secondary", children: "\u2192" }),
|
|
763
|
+
/* @__PURE__ */ jsxs15("div", { className: "text-right", children: [
|
|
764
|
+
/* @__PURE__ */ jsx19("p", { className: "text-xs uppercase text-success-dark", children: "Recomendado" }),
|
|
765
|
+
/* @__PURE__ */ jsx19("p", { className: "text-lg font-semibold text-brand-primary", children: newPrice })
|
|
757
766
|
] })
|
|
758
767
|
] }),
|
|
759
|
-
/* @__PURE__ */
|
|
760
|
-
/* @__PURE__ */
|
|
761
|
-
/* @__PURE__ */
|
|
762
|
-
/* @__PURE__ */
|
|
768
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex w-full items-center justify-between text-sm", children: [
|
|
769
|
+
/* @__PURE__ */ jsxs15("div", { className: "text-left", children: [
|
|
770
|
+
/* @__PURE__ */ jsx19("p", { className: "text-xs text-text-secondary", children: "Impacto en Margen" }),
|
|
771
|
+
/* @__PURE__ */ jsx19("p", { className: "font-semibold text-success-dark", children: marginImpactLabel })
|
|
763
772
|
] }),
|
|
764
|
-
/* @__PURE__ */
|
|
765
|
-
/* @__PURE__ */
|
|
766
|
-
/* @__PURE__ */
|
|
773
|
+
/* @__PURE__ */ jsxs15("div", { className: "text-right", children: [
|
|
774
|
+
/* @__PURE__ */ jsx19("p", { className: "text-xs text-text-secondary", children: "Volumen Estimado" }),
|
|
775
|
+
/* @__PURE__ */ jsx19("p", { className: "font-semibold text-success-dark", children: volumeImpactLabel })
|
|
767
776
|
] })
|
|
768
777
|
] })
|
|
769
778
|
] }),
|
|
770
|
-
/* @__PURE__ */
|
|
771
|
-
/* @__PURE__ */
|
|
772
|
-
/* @__PURE__ */
|
|
779
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-end gap-4 border-t border-border px-8 py-4", children: [
|
|
780
|
+
/* @__PURE__ */ jsx19(Button, { variant: "text", onClick: onClose, children: "Cancelar" }),
|
|
781
|
+
/* @__PURE__ */ jsx19(Button, { variant: "primary", onClick: onConfirm, disabled: confirming, children: confirming ? "Aplicando..." : "Confirmar y aplicar" })
|
|
773
782
|
] })
|
|
774
783
|
] }) });
|
|
775
784
|
}
|
|
@@ -791,6 +800,7 @@ export {
|
|
|
791
800
|
FuelIcon,
|
|
792
801
|
FuelPumpSolidIcon,
|
|
793
802
|
LogOutIcon,
|
|
803
|
+
Logo,
|
|
794
804
|
MapPinIcon,
|
|
795
805
|
MiniMapCard,
|
|
796
806
|
NavItem,
|