@moeve-ui/ui 0.2.0 → 0.2.2
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 +35 -3
- package/dist/index.d.ts +35 -3
- package/dist/index.js +191 -170
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +190 -170
- 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,35 +529,45 @@ function WeekdayPicker({ labels, selected, onToggle, className = "" }) {
|
|
|
520
529
|
}
|
|
521
530
|
|
|
522
531
|
// src/molecules/SelectableCard/SelectableCard.tsx
|
|
523
|
-
import { jsx as
|
|
524
|
-
function SelectableCard({ icon, title, subtitle, selected = false, onClick, className = "" }) {
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
{
|
|
528
|
-
|
|
529
|
-
"
|
|
530
|
-
|
|
531
|
-
className: `flex w-full items-center gap-3 rounded-xl border p-4 text-left transition-colors ${selected ? "border-brand-primary bg-brand-primary/5" : "border-border hover:bg-surface-subtle"} ${className}`.trim(),
|
|
532
|
-
children: [
|
|
533
|
-
icon && /* @__PURE__ */ jsx14(
|
|
532
|
+
import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
533
|
+
function SelectableCard({ icon, title, subtitle, media, selected = false, onClick, className = "" }) {
|
|
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();
|
|
535
|
+
if (media) {
|
|
536
|
+
return /* @__PURE__ */ jsxs11("button", { type: "button", "aria-pressed": selected, onClick, className: `overflow-hidden ${base2}`, children: [
|
|
537
|
+
/* @__PURE__ */ jsx15("div", { className: "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(
|
|
534
540
|
"span",
|
|
535
541
|
{
|
|
536
|
-
className: `flex h-
|
|
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"}`,
|
|
537
543
|
children: icon
|
|
538
544
|
}
|
|
539
545
|
),
|
|
540
|
-
/* @__PURE__ */
|
|
541
|
-
/* @__PURE__ */
|
|
542
|
-
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 })
|
|
543
549
|
] })
|
|
544
|
-
]
|
|
545
|
-
}
|
|
546
|
-
|
|
550
|
+
] })
|
|
551
|
+
] });
|
|
552
|
+
}
|
|
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(
|
|
555
|
+
"span",
|
|
556
|
+
{
|
|
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"}`,
|
|
558
|
+
children: icon
|
|
559
|
+
}
|
|
560
|
+
),
|
|
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 })
|
|
564
|
+
] })
|
|
565
|
+
] });
|
|
547
566
|
}
|
|
548
567
|
|
|
549
568
|
// src/molecules/FileDropzone/FileDropzone.tsx
|
|
550
569
|
import { useRef, useState } from "react";
|
|
551
|
-
import { Fragment, jsx as
|
|
570
|
+
import { Fragment, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
552
571
|
function FileDropzone({
|
|
553
572
|
accept,
|
|
554
573
|
onFileSelected,
|
|
@@ -573,7 +592,7 @@ function FileDropzone({
|
|
|
573
592
|
setDragActive(false);
|
|
574
593
|
onFileSelected(e.dataTransfer.files?.[0] ?? null);
|
|
575
594
|
}
|
|
576
|
-
return /* @__PURE__ */
|
|
595
|
+
return /* @__PURE__ */ jsxs12(
|
|
577
596
|
"div",
|
|
578
597
|
{
|
|
579
598
|
role: "button",
|
|
@@ -588,7 +607,7 @@ function FileDropzone({
|
|
|
588
607
|
onDrop: handleDrop,
|
|
589
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(),
|
|
590
609
|
children: [
|
|
591
|
-
/* @__PURE__ */
|
|
610
|
+
/* @__PURE__ */ jsx16(
|
|
592
611
|
"input",
|
|
593
612
|
{
|
|
594
613
|
ref: inputRef,
|
|
@@ -598,10 +617,10 @@ function FileDropzone({
|
|
|
598
617
|
onChange: (e) => onFileSelected(e.target.files?.[0] ?? null)
|
|
599
618
|
}
|
|
600
619
|
),
|
|
601
|
-
/* @__PURE__ */
|
|
602
|
-
selectedFileName ? /* @__PURE__ */
|
|
603
|
-
/* @__PURE__ */
|
|
604
|
-
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 })
|
|
605
624
|
] })
|
|
606
625
|
]
|
|
607
626
|
}
|
|
@@ -609,7 +628,7 @@ function FileDropzone({
|
|
|
609
628
|
}
|
|
610
629
|
|
|
611
630
|
// src/organisms/Sidebar/Sidebar.tsx
|
|
612
|
-
import { jsx as
|
|
631
|
+
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
613
632
|
function Sidebar({
|
|
614
633
|
brandName = "Redinamic",
|
|
615
634
|
stations,
|
|
@@ -619,43 +638,43 @@ function Sidebar({
|
|
|
619
638
|
user,
|
|
620
639
|
onLogout
|
|
621
640
|
}) {
|
|
622
|
-
return /* @__PURE__ */
|
|
623
|
-
/* @__PURE__ */
|
|
624
|
-
/* @__PURE__ */
|
|
625
|
-
/* @__PURE__ */
|
|
626
|
-
/* @__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 })
|
|
627
646
|
] }),
|
|
628
|
-
/* @__PURE__ */
|
|
629
|
-
/* @__PURE__ */
|
|
630
|
-
/* @__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(
|
|
631
650
|
"select",
|
|
632
651
|
{
|
|
633
652
|
value: selectedStationId,
|
|
634
653
|
onChange: (event) => onSelectStation(event.target.value),
|
|
635
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",
|
|
636
|
-
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))
|
|
637
656
|
}
|
|
638
657
|
),
|
|
639
|
-
/* @__PURE__ */
|
|
658
|
+
/* @__PURE__ */ jsx17(ChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 size-3 -translate-y-1/2 text-white" })
|
|
640
659
|
] })
|
|
641
660
|
] }),
|
|
642
|
-
/* @__PURE__ */
|
|
643
|
-
/* @__PURE__ */
|
|
644
|
-
/* @__PURE__ */
|
|
645
|
-
/* @__PURE__ */
|
|
646
|
-
/* @__PURE__ */
|
|
647
|
-
/* @__PURE__ */
|
|
648
|
-
/* @__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 })
|
|
649
668
|
] })
|
|
650
669
|
] }),
|
|
651
|
-
/* @__PURE__ */
|
|
670
|
+
/* @__PURE__ */ jsxs13(
|
|
652
671
|
"button",
|
|
653
672
|
{
|
|
654
673
|
type: "button",
|
|
655
674
|
onClick: onLogout,
|
|
656
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",
|
|
657
676
|
children: [
|
|
658
|
-
/* @__PURE__ */
|
|
677
|
+
/* @__PURE__ */ jsx17(LogOutIcon, { className: "size-4" }),
|
|
659
678
|
"Cerrar Sesi\xF3n"
|
|
660
679
|
]
|
|
661
680
|
}
|
|
@@ -665,7 +684,7 @@ function Sidebar({
|
|
|
665
684
|
}
|
|
666
685
|
|
|
667
686
|
// src/organisms/TopBar/TopBar.tsx
|
|
668
|
-
import { jsx as
|
|
687
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
669
688
|
function TopBar({
|
|
670
689
|
stationName,
|
|
671
690
|
lastUpdatedLabel,
|
|
@@ -673,36 +692,36 @@ function TopBar({
|
|
|
673
692
|
refreshing = false,
|
|
674
693
|
middleContent
|
|
675
694
|
}) {
|
|
676
|
-
return /* @__PURE__ */
|
|
677
|
-
/* @__PURE__ */
|
|
678
|
-
/* @__PURE__ */
|
|
679
|
-
/* @__PURE__ */
|
|
680
|
-
/* @__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 })
|
|
681
700
|
] }),
|
|
682
|
-
/* @__PURE__ */
|
|
683
|
-
/* @__PURE__ */
|
|
684
|
-
/* @__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 })
|
|
685
704
|
] })
|
|
686
705
|
] }),
|
|
687
706
|
middleContent,
|
|
688
|
-
/* @__PURE__ */
|
|
689
|
-
/* @__PURE__ */
|
|
707
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex shrink-0 items-center gap-4", children: [
|
|
708
|
+
/* @__PURE__ */ jsx18(
|
|
690
709
|
Button,
|
|
691
710
|
{
|
|
692
711
|
variant: "primary",
|
|
693
|
-
icon: /* @__PURE__ */
|
|
712
|
+
icon: /* @__PURE__ */ jsx18(RefreshIcon, { className: `size-4 ${refreshing ? "animate-spin" : ""}` }),
|
|
694
713
|
onClick: onRefresh,
|
|
695
714
|
disabled: refreshing,
|
|
696
715
|
children: "Actualizar datos"
|
|
697
716
|
}
|
|
698
717
|
),
|
|
699
|
-
/* @__PURE__ */
|
|
718
|
+
/* @__PURE__ */ jsx18(Avatar, { className: "bg-brand-primary text-white", size: "sm", children: /* @__PURE__ */ jsx18(UserCircleIcon, { className: "size-4" }) })
|
|
700
719
|
] })
|
|
701
720
|
] });
|
|
702
721
|
}
|
|
703
722
|
|
|
704
723
|
// src/organisms/ConfirmDialog/ConfirmDialog.tsx
|
|
705
|
-
import { jsx as
|
|
724
|
+
import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
706
725
|
function ConfirmDialog({
|
|
707
726
|
open,
|
|
708
727
|
onClose,
|
|
@@ -717,49 +736,49 @@ function ConfirmDialog({
|
|
|
717
736
|
confirming = false
|
|
718
737
|
}) {
|
|
719
738
|
if (!open) return null;
|
|
720
|
-
return /* @__PURE__ */
|
|
721
|
-
/* @__PURE__ */
|
|
722
|
-
/* @__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(
|
|
723
742
|
"button",
|
|
724
743
|
{
|
|
725
744
|
type: "button",
|
|
726
745
|
onClick: onClose,
|
|
727
746
|
"aria-label": "Cerrar",
|
|
728
747
|
className: "absolute right-4 top-4 text-white/80 hover:text-white",
|
|
729
|
-
children: /* @__PURE__ */
|
|
748
|
+
children: /* @__PURE__ */ jsx19(XIcon, { className: "size-5" })
|
|
730
749
|
}
|
|
731
750
|
),
|
|
732
|
-
/* @__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" }) })
|
|
733
752
|
] }),
|
|
734
|
-
/* @__PURE__ */
|
|
735
|
-
/* @__PURE__ */
|
|
736
|
-
/* @__PURE__ */
|
|
737
|
-
/* @__PURE__ */
|
|
738
|
-
/* @__PURE__ */
|
|
739
|
-
/* @__PURE__ */
|
|
740
|
-
/* @__PURE__ */
|
|
741
|
-
/* @__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 })
|
|
742
761
|
] }),
|
|
743
|
-
/* @__PURE__ */
|
|
744
|
-
/* @__PURE__ */
|
|
745
|
-
/* @__PURE__ */
|
|
746
|
-
/* @__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 })
|
|
747
766
|
] })
|
|
748
767
|
] }),
|
|
749
|
-
/* @__PURE__ */
|
|
750
|
-
/* @__PURE__ */
|
|
751
|
-
/* @__PURE__ */
|
|
752
|
-
/* @__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 })
|
|
753
772
|
] }),
|
|
754
|
-
/* @__PURE__ */
|
|
755
|
-
/* @__PURE__ */
|
|
756
|
-
/* @__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 })
|
|
757
776
|
] })
|
|
758
777
|
] })
|
|
759
778
|
] }),
|
|
760
|
-
/* @__PURE__ */
|
|
761
|
-
/* @__PURE__ */
|
|
762
|
-
/* @__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" })
|
|
763
782
|
] })
|
|
764
783
|
] }) });
|
|
765
784
|
}
|
|
@@ -781,6 +800,7 @@ export {
|
|
|
781
800
|
FuelIcon,
|
|
782
801
|
FuelPumpSolidIcon,
|
|
783
802
|
LogOutIcon,
|
|
803
|
+
Logo,
|
|
784
804
|
MapPinIcon,
|
|
785
805
|
MiniMapCard,
|
|
786
806
|
NavItem,
|