@moeve-ui/ui 0.1.0
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/README.md +114 -0
- package/dist/chunk-HUXDCAF5.mjs +46 -0
- package/dist/chunk-HUXDCAF5.mjs.map +1 -0
- package/dist/index.d.mts +395 -0
- package/dist/index.d.ts +395 -0
- package/dist/index.js +781 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +681 -0
- package/dist/index.mjs.map +1 -0
- package/dist/tailwind.preset.d.mts +11 -0
- package/dist/tailwind.preset.d.ts +11 -0
- package/dist/tailwind.preset.js +96 -0
- package/dist/tailwind.preset.js.map +1 -0
- package/dist/tailwind.preset.mjs +35 -0
- package/dist/tailwind.preset.mjs.map +1 -0
- package/package.json +69 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,781 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var src_exports = {};
|
|
22
|
+
__export(src_exports, {
|
|
23
|
+
ArrowDownIcon: () => ArrowDownIcon,
|
|
24
|
+
ArrowUpIcon: () => ArrowUpIcon,
|
|
25
|
+
Avatar: () => Avatar,
|
|
26
|
+
Badge: () => Badge,
|
|
27
|
+
BoltIcon: () => BoltIcon,
|
|
28
|
+
Button: () => Button,
|
|
29
|
+
Card: () => Card,
|
|
30
|
+
CheckCircleIcon: () => CheckCircleIcon,
|
|
31
|
+
ChevronDownIcon: () => ChevronDownIcon,
|
|
32
|
+
CompetitorRow: () => CompetitorRow,
|
|
33
|
+
ConfirmDialog: () => ConfirmDialog,
|
|
34
|
+
DecisionFactorRow: () => DecisionFactorRow,
|
|
35
|
+
FuelIcon: () => FuelIcon,
|
|
36
|
+
FuelPumpSolidIcon: () => FuelPumpSolidIcon,
|
|
37
|
+
LogOutIcon: () => LogOutIcon,
|
|
38
|
+
MapPinIcon: () => MapPinIcon,
|
|
39
|
+
MiniMapCard: () => MiniMapCard,
|
|
40
|
+
NavItem: () => NavItem,
|
|
41
|
+
PriceRangeSlider: () => PriceRangeSlider,
|
|
42
|
+
ProgressBar: () => ProgressBar,
|
|
43
|
+
RefreshIcon: () => RefreshIcon,
|
|
44
|
+
SegmentedTabs: () => SegmentedTabs,
|
|
45
|
+
Sidebar: () => Sidebar,
|
|
46
|
+
Snackbar: () => Snackbar,
|
|
47
|
+
StatTile: () => StatTile,
|
|
48
|
+
TagIcon: () => TagIcon,
|
|
49
|
+
TargetIcon: () => TargetIcon,
|
|
50
|
+
TopBar: () => TopBar,
|
|
51
|
+
TrendDownIcon: () => TrendDownIcon,
|
|
52
|
+
TrendUpIcon: () => TrendUpIcon,
|
|
53
|
+
TrendUpSolidIcon: () => TrendUpSolidIcon,
|
|
54
|
+
UserCircleIcon: () => UserCircleIcon,
|
|
55
|
+
WalletIcon: () => WalletIcon,
|
|
56
|
+
WalletSolidIcon: () => WalletSolidIcon,
|
|
57
|
+
XIcon: () => XIcon,
|
|
58
|
+
colors: () => colors
|
|
59
|
+
});
|
|
60
|
+
module.exports = __toCommonJS(src_exports);
|
|
61
|
+
|
|
62
|
+
// src/tokens/colors.ts
|
|
63
|
+
var colors = {
|
|
64
|
+
brand: {
|
|
65
|
+
sidebar: "#004656",
|
|
66
|
+
sidebarHover: "#005a6e",
|
|
67
|
+
accent: "#047dba",
|
|
68
|
+
primary: "#006395",
|
|
69
|
+
logo: "#8af9b5"
|
|
70
|
+
},
|
|
71
|
+
surface: {
|
|
72
|
+
page: "#f4fafe",
|
|
73
|
+
card: "#ffffff",
|
|
74
|
+
subtle: "#eef4f8",
|
|
75
|
+
muted: "#e9eff3"
|
|
76
|
+
},
|
|
77
|
+
text: {
|
|
78
|
+
primary: "#161c1f",
|
|
79
|
+
secondary: "#404850",
|
|
80
|
+
tertiary: "#707881",
|
|
81
|
+
onDark: "#ffffff",
|
|
82
|
+
onDarkMuted: "rgba(255,255,255,0.6)",
|
|
83
|
+
onDarkFaint: "rgba(255,255,255,0.5)"
|
|
84
|
+
},
|
|
85
|
+
success: {
|
|
86
|
+
DEFAULT: "#008851",
|
|
87
|
+
dark: "#006c3f",
|
|
88
|
+
bg: "#8af9b5"
|
|
89
|
+
},
|
|
90
|
+
danger: {
|
|
91
|
+
DEFAULT: "#ba1a1a",
|
|
92
|
+
dark: "#93000a",
|
|
93
|
+
bg: "#ffdad6"
|
|
94
|
+
},
|
|
95
|
+
info: {
|
|
96
|
+
DEFAULT: "#006395",
|
|
97
|
+
dark: "#2e6576"
|
|
98
|
+
},
|
|
99
|
+
border: {
|
|
100
|
+
DEFAULT: "#dde3e7"
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
// src/icons/index.tsx
|
|
105
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
106
|
+
var base = {
|
|
107
|
+
viewBox: "0 0 24 24",
|
|
108
|
+
fill: "none",
|
|
109
|
+
strokeWidth: 2,
|
|
110
|
+
strokeLinecap: "round",
|
|
111
|
+
strokeLinejoin: "round"
|
|
112
|
+
};
|
|
113
|
+
function BoltIcon(props) {
|
|
114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...base, stroke: "currentColor", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 2 4 14h6l-1 8 9-12h-6l1-8Z", fill: "currentColor", stroke: "none" }) });
|
|
115
|
+
}
|
|
116
|
+
function MapPinIcon(props) {
|
|
117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 21s7-6.5 7-11.5A7 7 0 0 0 5 9.5C5 14.5 12 21 12 21Z" }),
|
|
119
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "9.5", r: "2.25" })
|
|
120
|
+
] });
|
|
121
|
+
}
|
|
122
|
+
function ChevronDownIcon(props) {
|
|
123
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...base, stroke: "currentColor", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" }) });
|
|
124
|
+
}
|
|
125
|
+
function ArrowUpIcon(props) {
|
|
126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 19V5" }),
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 11 6-6 6 6" })
|
|
129
|
+
] });
|
|
130
|
+
}
|
|
131
|
+
function ArrowDownIcon(props) {
|
|
132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" }),
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 13 6 6 6-6" })
|
|
135
|
+
] });
|
|
136
|
+
}
|
|
137
|
+
function RefreshIcon(props) {
|
|
138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
139
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-2.64-6.36" }),
|
|
140
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 3v6h-6" })
|
|
141
|
+
] });
|
|
142
|
+
}
|
|
143
|
+
function UserCircleIcon(props) {
|
|
144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
145
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
146
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "10", r: "3" }),
|
|
147
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6.5 19a6 6 0 0 1 11 0" })
|
|
148
|
+
] });
|
|
149
|
+
}
|
|
150
|
+
function LogOutIcon(props) {
|
|
151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
152
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
|
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m16 17 5-5-5-5" }),
|
|
154
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12H9" })
|
|
155
|
+
] });
|
|
156
|
+
}
|
|
157
|
+
function TagIcon(props) {
|
|
158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
159
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20.59 13.41 12 22l-9-9V4a1 1 0 0 1 1-1h9l7.59 7.59a2 2 0 0 1 0 2.82Z" }),
|
|
160
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "7.5", cy: "7.5", r: "1.25", fill: "currentColor", stroke: "none" })
|
|
161
|
+
] });
|
|
162
|
+
}
|
|
163
|
+
function TargetIcon(props) {
|
|
164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
165
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
166
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
|
|
167
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor", stroke: "none" })
|
|
168
|
+
] });
|
|
169
|
+
}
|
|
170
|
+
function TrendUpIcon(props) {
|
|
171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
172
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3 17 6-6 4 4 8-8" }),
|
|
173
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 7h6v6" })
|
|
174
|
+
] });
|
|
175
|
+
}
|
|
176
|
+
function TrendDownIcon(props) {
|
|
177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
178
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3 7 6 6 4-4 8 8" }),
|
|
179
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 17h6v-6" })
|
|
180
|
+
] });
|
|
181
|
+
}
|
|
182
|
+
function FuelIcon(props) {
|
|
183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
184
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 22V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16" }),
|
|
185
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12h10" }),
|
|
186
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 7h2l3.5 3.5a1.5 1.5 0 0 1 .5 1.1V17a1.5 1.5 0 0 1-3 0v-1" }),
|
|
187
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 22h12" })
|
|
188
|
+
] });
|
|
189
|
+
}
|
|
190
|
+
function WalletIcon(props) {
|
|
191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
192
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 7a2 2 0 0 1 2-2h13a1 1 0 0 1 1 1v3" }),
|
|
193
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 7v11a2 2 0 0 0 2 2h14a1 1 0 0 0 1-1v-4" }),
|
|
194
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 13h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a2 2 0 0 1 0-4Z" })
|
|
195
|
+
] });
|
|
196
|
+
}
|
|
197
|
+
function CheckCircleIcon(props) {
|
|
198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
199
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
200
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m8.5 12.5 2.5 2.5 5-5" })
|
|
201
|
+
] });
|
|
202
|
+
}
|
|
203
|
+
function XIcon(props) {
|
|
204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
|
|
205
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
|
|
206
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
|
|
207
|
+
] });
|
|
208
|
+
}
|
|
209
|
+
function FuelPumpSolidIcon(props) {
|
|
210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 33 36", fill: "currentColor", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 36V4C0 2.9 0.391667 1.95833 1.175 1.175C1.95833 0.391667 2.9 0 4 0H16C17.1 0 18.0417 0.391667 18.825 1.175C19.6083 1.95833 20 2.9 20 4V18H22C23.1 18 24.0417 18.3917 24.825 19.175C25.6083 19.9583 26 20.9 26 22V31C26 31.5667 26.1917 32.0417 26.575 32.425C26.9583 32.8083 27.4333 33 28 33C28.5667 33 29.0417 32.8083 29.425 32.425C29.8083 32.0417 30 31.5667 30 31V16.6C29.7 16.7667 29.3833 16.875 29.05 16.925C28.7167 16.975 28.3667 17 28 17C26.6 17 25.4167 16.5167 24.45 15.55C23.4833 14.5833 23 13.4 23 12C23 10.9333 23.2917 9.975 23.875 9.125C24.4583 8.275 25.2333 7.66667 26.2 7.3L22 3.1L24.1 1L31.5 8.2C32 8.7 32.375 9.28333 32.625 9.95C32.875 10.6167 33 11.3 33 12V31C33 32.4 32.5167 33.5833 31.55 34.55C30.5833 35.5167 29.4 36 28 36C26.6 36 25.4167 35.5167 24.45 34.55C23.4833 33.5833 23 32.4 23 31V21H20V36H0ZM4 14H16V4H4V14ZM28 14C28.5667 14 29.0417 13.8083 29.425 13.425C29.8083 13.0417 30 12.5667 30 12C30 11.4333 29.8083 10.9583 29.425 10.575C29.0417 10.1917 28.5667 10 28 10C27.4333 10 26.9583 10.1917 26.575 10.575C26.1917 10.9583 26 11.4333 26 12C26 12.5667 26.1917 13.0417 26.575 13.425C26.9583 13.8083 27.4333 14 28 14Z" }) });
|
|
211
|
+
}
|
|
212
|
+
function WalletSolidIcon(props) {
|
|
213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 44 32", fill: "currentColor", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 32C2.9 32 1.95833 31.6083 1.175 30.825C0.391667 30.0417 0 29.1 0 28V6H4V28H38V32H4ZM12 24C10.9 24 9.95833 23.6083 9.175 22.825C8.39167 22.0417 8 21.1 8 20V4C8 2.9 8.39167 1.95833 9.175 1.175C9.95833 0.391667 10.9 0 12 0H40C41.1 0 42.0417 0.391667 42.825 1.175C43.6083 1.95833 44 2.9 44 4V20C44 21.1 43.6083 22.0417 42.825 22.825C42.0417 23.6083 41.1 24 40 24H12ZM16 20C16 18.9 15.6083 17.9583 14.825 17.175C14.0417 16.3917 13.1 16 12 16V20H16ZM36 20H40V16C38.9 16 37.9583 16.3917 37.175 17.175C36.3917 17.9583 36 18.9 36 20ZM26 18C27.6667 18 29.0833 17.4167 30.25 16.25C31.4167 15.0833 32 13.6667 32 12C32 10.3333 31.4167 8.91667 30.25 7.75C29.0833 6.58333 27.6667 6 26 6C24.3333 6 22.9167 6.58333 21.75 7.75C20.5833 8.91667 20 10.3333 20 12C20 13.6667 20.5833 15.0833 21.75 16.25C22.9167 17.4167 24.3333 18 26 18ZM12 8C13.1 8 14.0417 7.60833 14.825 6.825C15.6083 6.04167 16 5.1 16 4H12V8ZM40 8V4H36C36 5.1 36.3917 6.04167 37.175 6.825C37.9583 7.60833 38.9 8 40 8Z" }) });
|
|
214
|
+
}
|
|
215
|
+
function TrendUpSolidIcon(props) {
|
|
216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 36 36", fill: "currentColor", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 36V32L4 28V36H0ZM8 36V24L12 20V36H8ZM16 36V20L20 24.05V36H16ZM24 36V24.05L28 20.05V36H24ZM32 36V16L36 12V36H32ZM0 25.65V20L14 6L22 14L36 0V5.65L22 19.65L14 11.65L0 25.65Z" }) });
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
// src/atoms/Avatar/Avatar.tsx
|
|
220
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
221
|
+
var SIZE_CLASSES = {
|
|
222
|
+
sm: "size-8 text-sm",
|
|
223
|
+
md: "size-10 text-base"
|
|
224
|
+
};
|
|
225
|
+
function Avatar({ children, className = "", size = "md" }) {
|
|
226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
227
|
+
"div",
|
|
228
|
+
{
|
|
229
|
+
className: `flex shrink-0 items-center justify-center rounded-full font-bold ${SIZE_CLASSES[size]} ${className}`.trim(),
|
|
230
|
+
children
|
|
231
|
+
}
|
|
232
|
+
);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// src/atoms/Badge/Badge.tsx
|
|
236
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
237
|
+
var TONE_CLASSES = {
|
|
238
|
+
success: "bg-success-bg text-success-dark",
|
|
239
|
+
danger: "bg-danger-bg text-danger-dark",
|
|
240
|
+
neutral: "bg-surface-muted text-text-secondary"
|
|
241
|
+
};
|
|
242
|
+
function Badge({ children, tone = "neutral", className = "" }) {
|
|
243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
244
|
+
"span",
|
|
245
|
+
{
|
|
246
|
+
className: `inline-flex items-center rounded-full px-2 py-0.5 text-sm font-semibold ${TONE_CLASSES[tone]} ${className}`.trim(),
|
|
247
|
+
children
|
|
248
|
+
}
|
|
249
|
+
);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
// src/atoms/Button/Button.tsx
|
|
253
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
254
|
+
var VARIANT_CLASSES = {
|
|
255
|
+
primary: "bg-brand-primary text-white shadow-card hover:bg-brand-sidebarHover disabled:opacity-50 disabled:cursor-not-allowed",
|
|
256
|
+
ghost: "bg-surface-muted text-text-primary hover:bg-border disabled:opacity-50 disabled:cursor-not-allowed",
|
|
257
|
+
text: "bg-transparent text-brand-primary hover:underline disabled:opacity-50 disabled:cursor-not-allowed p-0"
|
|
258
|
+
};
|
|
259
|
+
function Button({
|
|
260
|
+
children,
|
|
261
|
+
variant = "primary",
|
|
262
|
+
icon,
|
|
263
|
+
className = "",
|
|
264
|
+
...rest
|
|
265
|
+
}) {
|
|
266
|
+
const shape = variant === "text" ? "" : "rounded-full px-6 py-2.5";
|
|
267
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
268
|
+
"button",
|
|
269
|
+
{
|
|
270
|
+
className: `inline-flex items-center justify-center gap-2 text-sm font-semibold tracking-[0.14px] transition-colors ${shape} ${VARIANT_CLASSES[variant]} ${className}`.trim(),
|
|
271
|
+
...rest,
|
|
272
|
+
children: [
|
|
273
|
+
icon,
|
|
274
|
+
children
|
|
275
|
+
]
|
|
276
|
+
}
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
// src/atoms/Card/Card.tsx
|
|
281
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
282
|
+
function Card({ children, className = "", noPadding = false, ...rest }) {
|
|
283
|
+
const padding = noPadding ? "" : "p-6";
|
|
284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
285
|
+
"div",
|
|
286
|
+
{
|
|
287
|
+
className: `bg-surface-card rounded-xl shadow-card ${padding} ${className}`.trim(),
|
|
288
|
+
...rest,
|
|
289
|
+
children
|
|
290
|
+
}
|
|
291
|
+
);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
// src/atoms/ProgressBar/ProgressBar.tsx
|
|
295
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
296
|
+
function ProgressBar({
|
|
297
|
+
value,
|
|
298
|
+
fillClassName = "bg-info",
|
|
299
|
+
heightClassName = "h-1",
|
|
300
|
+
segments = 1,
|
|
301
|
+
className = ""
|
|
302
|
+
}) {
|
|
303
|
+
const clamped = Math.min(100, Math.max(0, value));
|
|
304
|
+
if (segments > 1) {
|
|
305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `flex w-full gap-0.5 overflow-hidden rounded-full bg-border ${heightClassName} ${className}`.trim(), children: Array.from({ length: segments }).map((_, i) => {
|
|
306
|
+
const segmentStart = i / segments * 100;
|
|
307
|
+
const filled = clamped > segmentStart;
|
|
308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
309
|
+
"div",
|
|
310
|
+
{
|
|
311
|
+
className: `h-full flex-1 ${filled ? fillClassName : "opacity-20 " + fillClassName}`
|
|
312
|
+
},
|
|
313
|
+
i
|
|
314
|
+
);
|
|
315
|
+
}) });
|
|
316
|
+
}
|
|
317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `w-full overflow-hidden rounded-full bg-border ${heightClassName} ${className}`.trim(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `h-full rounded-full ${fillClassName}`, style: { width: `${clamped}%` } }) });
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
// src/atoms/Snackbar/Snackbar.tsx
|
|
321
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
322
|
+
var TONE_CLASSES2 = {
|
|
323
|
+
success: "bg-success",
|
|
324
|
+
danger: "bg-danger",
|
|
325
|
+
neutral: "bg-text-secondary"
|
|
326
|
+
};
|
|
327
|
+
var TONE_ICON = {
|
|
328
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckCircleIcon, { className: "size-5" }),
|
|
329
|
+
danger: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(XIcon, { className: "size-5" }),
|
|
330
|
+
neutral: null
|
|
331
|
+
};
|
|
332
|
+
function Snackbar({ message, tone = "success", onClose, className = "" }) {
|
|
333
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
334
|
+
"div",
|
|
335
|
+
{
|
|
336
|
+
role: "status",
|
|
337
|
+
className: `flex w-full items-center gap-2 rounded-lg px-6 py-3 text-white shadow-card ${TONE_CLASSES2[tone]} ${className}`.trim(),
|
|
338
|
+
children: [
|
|
339
|
+
TONE_ICON[tone],
|
|
340
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "flex-1 text-sm font-semibold", children: message }),
|
|
341
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
342
|
+
"button",
|
|
343
|
+
{
|
|
344
|
+
type: "button",
|
|
345
|
+
onClick: onClose,
|
|
346
|
+
"aria-label": "Cerrar",
|
|
347
|
+
className: "text-white/80 transition-colors hover:text-white",
|
|
348
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(XIcon, { className: "size-4" })
|
|
349
|
+
}
|
|
350
|
+
)
|
|
351
|
+
]
|
|
352
|
+
}
|
|
353
|
+
);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
// src/molecules/SegmentedTabs/SegmentedTabs.tsx
|
|
357
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
358
|
+
function SegmentedTabs({ options, value, onChange, className = "" }) {
|
|
359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
360
|
+
"div",
|
|
361
|
+
{
|
|
362
|
+
role: "tablist",
|
|
363
|
+
className: `inline-flex items-start gap-0 rounded-lg bg-surface-muted p-1 ${className}`.trim(),
|
|
364
|
+
children: options.map((option) => {
|
|
365
|
+
const active = option.value === value;
|
|
366
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
367
|
+
"button",
|
|
368
|
+
{
|
|
369
|
+
type: "button",
|
|
370
|
+
role: "tab",
|
|
371
|
+
"aria-selected": active,
|
|
372
|
+
onClick: () => onChange(option.value),
|
|
373
|
+
className: `rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${active ? "bg-white text-text-primary shadow-tab" : "text-text-secondary hover:text-text-primary"}`,
|
|
374
|
+
children: option.label
|
|
375
|
+
},
|
|
376
|
+
option.value
|
|
377
|
+
);
|
|
378
|
+
})
|
|
379
|
+
}
|
|
380
|
+
);
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
// src/molecules/NavItem/NavItem.tsx
|
|
384
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
385
|
+
function NavItem({ icon, label, active = false, href = "#" }) {
|
|
386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
387
|
+
"a",
|
|
388
|
+
{
|
|
389
|
+
href,
|
|
390
|
+
className: `flex w-full items-center gap-3 rounded-xl px-4 py-3 text-base font-bold transition-colors ${active ? "bg-brand-accent text-white" : "text-white/70 hover:bg-white/5"}`,
|
|
391
|
+
children: [
|
|
392
|
+
icon,
|
|
393
|
+
label
|
|
394
|
+
]
|
|
395
|
+
}
|
|
396
|
+
);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
// src/molecules/StatTile/StatTile.tsx
|
|
400
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
401
|
+
var DELTA_ICON = {
|
|
402
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TrendUpIcon, { className: "size-4" }),
|
|
403
|
+
danger: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TrendDownIcon, { className: "size-4" }),
|
|
404
|
+
neutral: null
|
|
405
|
+
};
|
|
406
|
+
function StatTile({
|
|
407
|
+
icon,
|
|
408
|
+
label,
|
|
409
|
+
value,
|
|
410
|
+
unit,
|
|
411
|
+
delta,
|
|
412
|
+
deltaTone = "success",
|
|
413
|
+
progressValue,
|
|
414
|
+
progressClassName = "bg-info"
|
|
415
|
+
}) {
|
|
416
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex flex-1 flex-col gap-4 overflow-hidden rounded-2xl bg-surface-card p-6 shadow-card", children: [
|
|
417
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pointer-events-none absolute right-5 top-5 text-border", children: icon }),
|
|
418
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "max-w-[80%] text-lg font-semibold text-text-secondary", children: label }),
|
|
419
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "flex items-baseline gap-1.5", children: [
|
|
420
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-4xl font-bold text-text-primary", children: value }),
|
|
421
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-2xl font-medium text-text-tertiary", children: unit })
|
|
422
|
+
] }),
|
|
423
|
+
delta && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Badge, { tone: deltaTone, className: "w-fit gap-1", children: [
|
|
424
|
+
DELTA_ICON[deltaTone],
|
|
425
|
+
delta
|
|
426
|
+
] }),
|
|
427
|
+
progressValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ProgressBar, { value: progressValue, fillClassName: progressClassName })
|
|
428
|
+
] });
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
// src/molecules/DecisionFactorRow/DecisionFactorRow.tsx
|
|
432
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
433
|
+
function DecisionFactorRow({
|
|
434
|
+
label,
|
|
435
|
+
statusText,
|
|
436
|
+
statusClassName = "text-brand-primary",
|
|
437
|
+
value,
|
|
438
|
+
fillClassName = "bg-brand-primary",
|
|
439
|
+
segments = 1,
|
|
440
|
+
description
|
|
441
|
+
}) {
|
|
442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
443
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between", children: [
|
|
444
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm font-semibold text-text-primary", children: label }),
|
|
445
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `text-sm font-semibold ${statusClassName}`, children: statusText })
|
|
446
|
+
] }),
|
|
447
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ProgressBar, { value, fillClassName, heightClassName: "h-1.5", segments }),
|
|
448
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs leading-relaxed text-text-secondary", children: description })
|
|
449
|
+
] });
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
// src/molecules/CompetitorRow/CompetitorRow.tsx
|
|
453
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
454
|
+
var TREND_ICON = {
|
|
455
|
+
up: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowUpIcon, { className: "size-4" }),
|
|
456
|
+
down: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowDownIcon, { className: "size-4" }),
|
|
457
|
+
stable: null
|
|
458
|
+
};
|
|
459
|
+
var TREND_TEXT_CLASS = {
|
|
460
|
+
up: "text-success-dark",
|
|
461
|
+
down: "text-danger",
|
|
462
|
+
stable: "text-text-secondary"
|
|
463
|
+
};
|
|
464
|
+
function CompetitorRow({
|
|
465
|
+
name,
|
|
466
|
+
avatarLetter,
|
|
467
|
+
avatarBgClassName,
|
|
468
|
+
avatarTextClassName,
|
|
469
|
+
distanceKm,
|
|
470
|
+
price,
|
|
471
|
+
trend,
|
|
472
|
+
trendLabel
|
|
473
|
+
}) {
|
|
474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full items-center justify-between rounded-lg bg-surface-page p-4", children: [
|
|
475
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-4", children: [
|
|
476
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { className: `${avatarBgClassName} ${avatarTextClassName}`, children: avatarLetter }),
|
|
477
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
478
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold text-text-primary", children: name }),
|
|
479
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1 text-text-secondary", children: [
|
|
480
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MapPinIcon, { className: "size-[18px]" }),
|
|
481
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-xs font-medium tracking-wide", children: [
|
|
482
|
+
distanceKm,
|
|
483
|
+
" km"
|
|
484
|
+
] })
|
|
485
|
+
] })
|
|
486
|
+
] })
|
|
487
|
+
] }),
|
|
488
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-right", children: [
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-2xl font-semibold text-text-primary", children: price }),
|
|
490
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex items-center justify-end gap-1 text-xs font-medium ${TREND_TEXT_CLASS[trend]}`, children: [
|
|
491
|
+
TREND_ICON[trend],
|
|
492
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: trendLabel })
|
|
493
|
+
] })
|
|
494
|
+
] })
|
|
495
|
+
] });
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
// src/molecules/PriceRangeSlider/PriceRangeSlider.tsx
|
|
499
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
500
|
+
function PriceRangeSlider({
|
|
501
|
+
min,
|
|
502
|
+
max,
|
|
503
|
+
step = 0.01,
|
|
504
|
+
value,
|
|
505
|
+
onChange,
|
|
506
|
+
currentPrice,
|
|
507
|
+
recommendedPrice,
|
|
508
|
+
currencyFormatter
|
|
509
|
+
}) {
|
|
510
|
+
const percent = (value - min) / (max - min) * 100;
|
|
511
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative h-[250px] w-full rounded-xl border border-border/30 bg-surface-page p-6 shadow-tab", children: [
|
|
512
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
513
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
|
|
514
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-text-secondary", children: "PRECIO ACTUAL" }),
|
|
515
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-2xl font-semibold text-text-primary", children: currencyFormatter(currentPrice) })
|
|
516
|
+
] }),
|
|
517
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-right", children: [
|
|
518
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-brand-primary", children: "RECOMENDADO" }),
|
|
519
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-2xl font-semibold text-brand-primary", children: currencyFormatter(recommendedPrice) })
|
|
520
|
+
] })
|
|
521
|
+
] }),
|
|
522
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute left-6 right-6 top-[100px] flex h-24 items-center justify-center", children: [
|
|
523
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
524
|
+
"div",
|
|
525
|
+
{
|
|
526
|
+
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",
|
|
527
|
+
style: { left: `${percent}%` },
|
|
528
|
+
children: [
|
|
529
|
+
currencyFormatter(value),
|
|
530
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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]" })
|
|
531
|
+
]
|
|
532
|
+
}
|
|
533
|
+
),
|
|
534
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative h-2 w-full rounded-full bg-border", children: [
|
|
535
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
536
|
+
"div",
|
|
537
|
+
{
|
|
538
|
+
className: "h-full rounded-full bg-brand-primary",
|
|
539
|
+
style: { width: `${percent}%` }
|
|
540
|
+
}
|
|
541
|
+
),
|
|
542
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
543
|
+
"input",
|
|
544
|
+
{
|
|
545
|
+
type: "range",
|
|
546
|
+
min,
|
|
547
|
+
max,
|
|
548
|
+
step,
|
|
549
|
+
value,
|
|
550
|
+
onChange: (event) => onChange(Number(event.target.value)),
|
|
551
|
+
"aria-label": "Precio a evaluar",
|
|
552
|
+
className: "range-thumb absolute inset-0 h-2 w-full cursor-pointer appearance-none bg-transparent"
|
|
553
|
+
}
|
|
554
|
+
)
|
|
555
|
+
] })
|
|
556
|
+
] }),
|
|
557
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute bottom-6 left-6 right-6 flex items-start justify-between text-sm text-text-secondary", children: [
|
|
558
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: currencyFormatter(min) }),
|
|
559
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: currencyFormatter(max) })
|
|
560
|
+
] })
|
|
561
|
+
] });
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
// src/molecules/MiniMapCard/MiniMapCard.tsx
|
|
565
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
566
|
+
function MiniMapCard({ overlayTitle, overlayLinkLabel, competitorCount }) {
|
|
567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative h-64 w-full overflow-hidden rounded-xl bg-white p-2 shadow-tab", children: [
|
|
568
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative h-full w-full overflow-hidden rounded-lg bg-[#dbe9ee]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { viewBox: "0 0 320 220", className: "h-full w-full", preserveAspectRatio: "xMidYMid slice", children: [
|
|
569
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: "320", height: "220", fill: "#dbe9ee" }),
|
|
570
|
+
Array.from({ length: 9 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("line", { x1: i * 40, y1: "0", x2: i * 40, y2: "220", stroke: "#c5dbe2", strokeWidth: "1" }, `v${i}`)),
|
|
571
|
+
Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("line", { x1: "0", y1: i * 36, x2: "320", y2: i * 36, stroke: "#c5dbe2", strokeWidth: "1" }, `h${i}`)),
|
|
572
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "160", cy: "110", r: "10", fill: "#006395" }),
|
|
573
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "100", cy: "70", r: "6", fill: "#404850" }),
|
|
574
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "220", cy: "60", r: "6", fill: "#404850" }),
|
|
575
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "235", cy: "150", r: "6", fill: "#404850" })
|
|
576
|
+
] }) }),
|
|
577
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("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: [
|
|
578
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1 text-xs font-medium uppercase tracking-wider text-text-primary", children: [
|
|
579
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapPinIcon, { className: "size-3.5" }),
|
|
580
|
+
overlayTitle
|
|
581
|
+
] }),
|
|
582
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm font-semibold text-brand-primary", "aria-label": `${overlayLinkLabel} - ${competitorCount} en total`, children: overlayLinkLabel })
|
|
583
|
+
] })
|
|
584
|
+
] });
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
// src/organisms/Sidebar/Sidebar.tsx
|
|
588
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
589
|
+
function Sidebar({
|
|
590
|
+
brandName = "Redinamic",
|
|
591
|
+
stations,
|
|
592
|
+
selectedStationId,
|
|
593
|
+
onSelectStation,
|
|
594
|
+
navItems,
|
|
595
|
+
user,
|
|
596
|
+
onLogout
|
|
597
|
+
}) {
|
|
598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("aside", { className: "fixed left-0 top-0 flex h-screen w-[260px] flex-col justify-between bg-brand-sidebar pb-2 pt-8", children: [
|
|
599
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6 px-4 pb-6", children: [
|
|
600
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3 px-2", children: [
|
|
601
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex size-8 items-center justify-center rounded bg-brand-logo", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BoltIcon, { className: "size-4 text-brand-sidebar" }) }),
|
|
602
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-2xl font-semibold tracking-tight text-white", children: brandName })
|
|
603
|
+
] }),
|
|
604
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
|
|
605
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MapPinIcon, { className: "pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-white" }),
|
|
606
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
607
|
+
"select",
|
|
608
|
+
{
|
|
609
|
+
value: selectedStationId,
|
|
610
|
+
onChange: (event) => onSelectStation(event.target.value),
|
|
611
|
+
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",
|
|
612
|
+
children: stations.map((station) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: station.id, className: "text-text-primary", children: station.label }, station.id))
|
|
613
|
+
}
|
|
614
|
+
),
|
|
615
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 size-3 -translate-y-1/2 text-white" })
|
|
616
|
+
] })
|
|
617
|
+
] }),
|
|
618
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { className: "flex flex-1 flex-col gap-1 px-4", children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(NavItem, { icon: item.icon, label: item.label, active: item.active, href: item.href }, item.key)) }),
|
|
619
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "border-t border-white/10 px-4 pt-4", children: [
|
|
620
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3 px-4 py-3", children: [
|
|
621
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Avatar, { className: "bg-brand-primary text-white", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UserCircleIcon, { className: "size-4" }) }),
|
|
622
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
|
|
623
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-semibold text-white", children: user.name }),
|
|
624
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-white/60", children: user.role })
|
|
625
|
+
] })
|
|
626
|
+
] }),
|
|
627
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
628
|
+
"button",
|
|
629
|
+
{
|
|
630
|
+
type: "button",
|
|
631
|
+
onClick: onLogout,
|
|
632
|
+
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",
|
|
633
|
+
children: [
|
|
634
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LogOutIcon, { className: "size-4" }),
|
|
635
|
+
"Cerrar Sesi\xF3n"
|
|
636
|
+
]
|
|
637
|
+
}
|
|
638
|
+
)
|
|
639
|
+
] })
|
|
640
|
+
] });
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
// src/organisms/TopBar/TopBar.tsx
|
|
644
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
645
|
+
function TopBar({
|
|
646
|
+
stationName,
|
|
647
|
+
lastUpdatedLabel,
|
|
648
|
+
onRefresh,
|
|
649
|
+
refreshing = false,
|
|
650
|
+
middleContent
|
|
651
|
+
}) {
|
|
652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("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: [
|
|
653
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "shrink-0", children: [
|
|
654
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
655
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MapPinIcon, { className: "size-4 text-text-primary" }),
|
|
656
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-semibold text-text-primary", children: stationName })
|
|
657
|
+
] }),
|
|
658
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mt-1 flex items-center gap-2", children: [
|
|
659
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "size-2 rounded-full bg-success-dark" }),
|
|
660
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs font-medium text-text-secondary", children: lastUpdatedLabel })
|
|
661
|
+
] })
|
|
662
|
+
] }),
|
|
663
|
+
middleContent,
|
|
664
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex shrink-0 items-center gap-4", children: [
|
|
665
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
666
|
+
Button,
|
|
667
|
+
{
|
|
668
|
+
variant: "primary",
|
|
669
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RefreshIcon, { className: `size-4 ${refreshing ? "animate-spin" : ""}` }),
|
|
670
|
+
onClick: onRefresh,
|
|
671
|
+
disabled: refreshing,
|
|
672
|
+
children: "Actualizar datos"
|
|
673
|
+
}
|
|
674
|
+
),
|
|
675
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Avatar, { className: "bg-brand-primary text-white", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UserCircleIcon, { className: "size-4" }) })
|
|
676
|
+
] })
|
|
677
|
+
] });
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
// src/organisms/ConfirmDialog/ConfirmDialog.tsx
|
|
681
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
682
|
+
function ConfirmDialog({
|
|
683
|
+
open,
|
|
684
|
+
onClose,
|
|
685
|
+
onConfirm,
|
|
686
|
+
title,
|
|
687
|
+
productLabel,
|
|
688
|
+
description,
|
|
689
|
+
currentPrice,
|
|
690
|
+
newPrice,
|
|
691
|
+
marginImpactLabel,
|
|
692
|
+
volumeImpactLabel,
|
|
693
|
+
confirming = false
|
|
694
|
+
}) {
|
|
695
|
+
if (!open) return null;
|
|
696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-modal", children: [
|
|
697
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative flex items-center justify-center bg-gradient-to-r from-brand-primary to-info-dark py-8", children: [
|
|
698
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
699
|
+
"button",
|
|
700
|
+
{
|
|
701
|
+
type: "button",
|
|
702
|
+
onClick: onClose,
|
|
703
|
+
"aria-label": "Cerrar",
|
|
704
|
+
className: "absolute right-4 top-4 text-white/80 hover:text-white",
|
|
705
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(XIcon, { className: "size-5" })
|
|
706
|
+
}
|
|
707
|
+
),
|
|
708
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex size-14 items-center justify-center rounded-full bg-white text-brand-primary", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(WalletIcon, { className: "size-6" }) })
|
|
709
|
+
] }),
|
|
710
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col items-center gap-3 px-8 py-6 text-center", children: [
|
|
711
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-xl font-bold text-text-primary", children: title }),
|
|
712
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "rounded-full bg-surface-muted px-3 py-1 text-xs font-semibold text-text-secondary", children: productLabel }),
|
|
713
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-text-secondary", children: description }),
|
|
714
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "mt-2 flex w-full items-center justify-between rounded-xl bg-surface-subtle p-4", children: [
|
|
715
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-left", children: [
|
|
716
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs uppercase text-text-secondary", children: "Actual" }),
|
|
717
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-lg font-semibold text-text-tertiary line-through", children: currentPrice })
|
|
718
|
+
] }),
|
|
719
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-text-secondary", children: "\u2192" }),
|
|
720
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-right", children: [
|
|
721
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs uppercase text-success-dark", children: "Recomendado" }),
|
|
722
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-lg font-semibold text-brand-primary", children: newPrice })
|
|
723
|
+
] })
|
|
724
|
+
] }),
|
|
725
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex w-full items-center justify-between text-sm", children: [
|
|
726
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-left", children: [
|
|
727
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs text-text-secondary", children: "Impacto en Margen" }),
|
|
728
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-semibold text-success-dark", children: marginImpactLabel })
|
|
729
|
+
] }),
|
|
730
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-right", children: [
|
|
731
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs text-text-secondary", children: "Volumen Estimado" }),
|
|
732
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-semibold text-success-dark", children: volumeImpactLabel })
|
|
733
|
+
] })
|
|
734
|
+
] })
|
|
735
|
+
] }),
|
|
736
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-end gap-4 border-t border-border px-8 py-4", children: [
|
|
737
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "text", onClick: onClose, children: "Cancelar" }),
|
|
738
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "primary", onClick: onConfirm, disabled: confirming, children: confirming ? "Aplicando..." : "Confirmar y aplicar" })
|
|
739
|
+
] })
|
|
740
|
+
] }) });
|
|
741
|
+
}
|
|
742
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
743
|
+
0 && (module.exports = {
|
|
744
|
+
ArrowDownIcon,
|
|
745
|
+
ArrowUpIcon,
|
|
746
|
+
Avatar,
|
|
747
|
+
Badge,
|
|
748
|
+
BoltIcon,
|
|
749
|
+
Button,
|
|
750
|
+
Card,
|
|
751
|
+
CheckCircleIcon,
|
|
752
|
+
ChevronDownIcon,
|
|
753
|
+
CompetitorRow,
|
|
754
|
+
ConfirmDialog,
|
|
755
|
+
DecisionFactorRow,
|
|
756
|
+
FuelIcon,
|
|
757
|
+
FuelPumpSolidIcon,
|
|
758
|
+
LogOutIcon,
|
|
759
|
+
MapPinIcon,
|
|
760
|
+
MiniMapCard,
|
|
761
|
+
NavItem,
|
|
762
|
+
PriceRangeSlider,
|
|
763
|
+
ProgressBar,
|
|
764
|
+
RefreshIcon,
|
|
765
|
+
SegmentedTabs,
|
|
766
|
+
Sidebar,
|
|
767
|
+
Snackbar,
|
|
768
|
+
StatTile,
|
|
769
|
+
TagIcon,
|
|
770
|
+
TargetIcon,
|
|
771
|
+
TopBar,
|
|
772
|
+
TrendDownIcon,
|
|
773
|
+
TrendUpIcon,
|
|
774
|
+
TrendUpSolidIcon,
|
|
775
|
+
UserCircleIcon,
|
|
776
|
+
WalletIcon,
|
|
777
|
+
WalletSolidIcon,
|
|
778
|
+
XIcon,
|
|
779
|
+
colors
|
|
780
|
+
});
|
|
781
|
+
//# sourceMappingURL=index.js.map
|