@moeve-ui/ui 0.1.3 → 0.2.1

package/dist/index.d.mts

@@ -85,6 +85,8 @@ declare function TrendDownIcon(props: IconProps): react.JSX.Element;
 declare function FuelIcon(props: IconProps): react.JSX.Element;
 declare function WalletIcon(props: IconProps): react.JSX.Element;
 declare function CheckCircleIcon(props: IconProps): react.JSX.Element;
+declare function CalendarIcon(props: IconProps): react.JSX.Element;
+declare function UploadIcon(props: IconProps): react.JSX.Element;
 declare function XIcon(props: IconProps): react.JSX.Element;
 /**
  * Solid/filled icon set, exported directly from the "Redinamic-tec" Figma
@@ -320,6 +322,64 @@ interface MiniMapCardProps {
  */
 declare function MiniMapCard({ overlayTitle, overlayLinkLabel, competitorCount }: MiniMapCardProps): react.JSX.Element;
 
+interface WeekdayPickerProps {
+    /** Exactly 7 short labels, in whatever order/language the caller uses (e.g. ["Lun", ..., "Dom"]). The index is the day value passed to onToggle/selected. */
+    labels: readonly string[];
+    /** Day indices currently toggled on. */
+    selected: readonly number[];
+    onToggle: (day: number) => void;
+    className?: string;
+}
+/**
+ * Circular day-of-week toggle row - previously hand-duplicated (with
+ * slightly different styles) in redisplay-web's QuoteWizard and
+ * RecurringPlansClient. Generic on purpose: the caller owns the labels
+ * (language/order) and which days start selected.
+ */
+declare function WeekdayPicker({ labels, selected, onToggle, className }: WeekdayPickerProps): react.JSX.Element;
+
+interface SelectableCardProps {
+    icon?: ReactNode;
+    title: string;
+    subtitle?: string;
+    /**
+     * Optional visual header (a map, an illustration, anything) rendered in a
+     * fixed-height rounded-top slot above the title - switches the card from
+     * the default horizontal "icon + text" row into a vertical "listing card"
+     * layout (media on top, text below), the same shape a photo-card grid
+     * needs. The caller owns what goes in it - this component has no opinion
+     * on images vs. maps vs. anything else.
+     */
+    media?: ReactNode;
+    selected?: boolean;
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * Generic clickable "pick one of these" card: an icon chip, a title, an
+ * optional subtitle, and a selected state. Not tied to any domain (not
+ * "StationCard") - meant for any picker across the 3 apps (redisplay-web's
+ * station picker today, any future list-of-options screen tomorrow).
+ */
+declare function SelectableCard({ icon, title, subtitle, media, selected, onClick, className }: SelectableCardProps): react.JSX.Element;
+
+interface FileDropzoneProps {
+    accept?: string;
+    onFileSelected: (file: File | null) => void;
+    /** Name of the currently-selected file, if any - the caller owns the File itself, this component is stateless about it. */
+    selectedFileName?: string | null;
+    label?: string;
+    hint?: string;
+    className?: string;
+}
+/**
+ * Restyled file picker: a dashed dropzone (click or drag-and-drop) instead
+ * of a bare `<input type="file">`. The native input still does the actual
+ * work (hidden, triggered via the visible box) - this only changes how it
+ * looks, not the underlying file-selection contract.
+ */
+declare function FileDropzone({ accept, onFileSelected, selectedFileName, label, hint, className, }: FileDropzoneProps): react.JSX.Element;
+
 interface SidebarStation {
     id: string;
     label: string;
@@ -392,4 +452,4 @@ interface ConfirmDialogProps {
  */
 declare function ConfirmDialog({ open, onClose, onConfirm, title, productLabel, description, currentPrice, newPrice, marginImpactLabel, volumeImpactLabel, confirming, }: ConfirmDialogProps): react.JSX.Element | null;
 
-export { ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BoltIcon, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, CheckCircleIcon, ChevronDownIcon, type ColorTokens, CompetitorRow, type CompetitorRowProps, type CompetitorTrend, ConfirmDialog, type ConfirmDialogProps, DecisionFactorRow, type DecisionFactorRowProps, FuelIcon, FuelPumpSolidIcon, LogOutIcon, MapPinIcon, MiniMapCard, type MiniMapCardProps, NavItem, type NavItemProps, PriceRangeSlider, type PriceRangeSliderProps, ProgressBar, type ProgressBarProps, RefreshIcon, type SegmentedTabOption, SegmentedTabs, type SegmentedTabsProps, Sidebar, type SidebarNavItem, type SidebarProps, type SidebarStation, type SidebarUser, Snackbar, type SnackbarProps, type SnackbarTone, StatTile, type StatTileProps, TagIcon, TargetIcon, TopBar, type TopBarProps, TrendDownIcon, TrendUpIcon, TrendUpSolidIcon, UserCircleIcon, WalletIcon, WalletSolidIcon, XIcon, colors };
+export { ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BoltIcon, Button, type ButtonProps, type ButtonVariant, CalendarIcon, Card, type CardProps, CheckCircleIcon, ChevronDownIcon, type ColorTokens, CompetitorRow, type CompetitorRowProps, type CompetitorTrend, ConfirmDialog, type ConfirmDialogProps, DecisionFactorRow, type DecisionFactorRowProps, FileDropzone, type FileDropzoneProps, FuelIcon, FuelPumpSolidIcon, LogOutIcon, MapPinIcon, MiniMapCard, type MiniMapCardProps, NavItem, type NavItemProps, PriceRangeSlider, type PriceRangeSliderProps, ProgressBar, type ProgressBarProps, RefreshIcon, type SegmentedTabOption, SegmentedTabs, type SegmentedTabsProps, SelectableCard, type SelectableCardProps, Sidebar, type SidebarNavItem, type SidebarProps, type SidebarStation, type SidebarUser, Snackbar, type SnackbarProps, type SnackbarTone, StatTile, type StatTileProps, TagIcon, TargetIcon, TopBar, type TopBarProps, TrendDownIcon, TrendUpIcon, TrendUpSolidIcon, UploadIcon, UserCircleIcon, WalletIcon, WalletSolidIcon, WeekdayPicker, type WeekdayPickerProps, XIcon, colors };

package/dist/index.d.ts

@@ -85,6 +85,8 @@ declare function TrendDownIcon(props: IconProps): react.JSX.Element;
 declare function FuelIcon(props: IconProps): react.JSX.Element;
 declare function WalletIcon(props: IconProps): react.JSX.Element;
 declare function CheckCircleIcon(props: IconProps): react.JSX.Element;
+declare function CalendarIcon(props: IconProps): react.JSX.Element;
+declare function UploadIcon(props: IconProps): react.JSX.Element;
 declare function XIcon(props: IconProps): react.JSX.Element;
 /**
  * Solid/filled icon set, exported directly from the "Redinamic-tec" Figma
@@ -320,6 +322,64 @@ interface MiniMapCardProps {
  */
 declare function MiniMapCard({ overlayTitle, overlayLinkLabel, competitorCount }: MiniMapCardProps): react.JSX.Element;
 
+interface WeekdayPickerProps {
+    /** Exactly 7 short labels, in whatever order/language the caller uses (e.g. ["Lun", ..., "Dom"]). The index is the day value passed to onToggle/selected. */
+    labels: readonly string[];
+    /** Day indices currently toggled on. */
+    selected: readonly number[];
+    onToggle: (day: number) => void;
+    className?: string;
+}
+/**
+ * Circular day-of-week toggle row - previously hand-duplicated (with
+ * slightly different styles) in redisplay-web's QuoteWizard and
+ * RecurringPlansClient. Generic on purpose: the caller owns the labels
+ * (language/order) and which days start selected.
+ */
+declare function WeekdayPicker({ labels, selected, onToggle, className }: WeekdayPickerProps): react.JSX.Element;
+
+interface SelectableCardProps {
+    icon?: ReactNode;
+    title: string;
+    subtitle?: string;
+    /**
+     * Optional visual header (a map, an illustration, anything) rendered in a
+     * fixed-height rounded-top slot above the title - switches the card from
+     * the default horizontal "icon + text" row into a vertical "listing card"
+     * layout (media on top, text below), the same shape a photo-card grid
+     * needs. The caller owns what goes in it - this component has no opinion
+     * on images vs. maps vs. anything else.
+     */
+    media?: ReactNode;
+    selected?: boolean;
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * Generic clickable "pick one of these" card: an icon chip, a title, an
+ * optional subtitle, and a selected state. Not tied to any domain (not
+ * "StationCard") - meant for any picker across the 3 apps (redisplay-web's
+ * station picker today, any future list-of-options screen tomorrow).
+ */
+declare function SelectableCard({ icon, title, subtitle, media, selected, onClick, className }: SelectableCardProps): react.JSX.Element;
+
+interface FileDropzoneProps {
+    accept?: string;
+    onFileSelected: (file: File | null) => void;
+    /** Name of the currently-selected file, if any - the caller owns the File itself, this component is stateless about it. */
+    selectedFileName?: string | null;
+    label?: string;
+    hint?: string;
+    className?: string;
+}
+/**
+ * Restyled file picker: a dashed dropzone (click or drag-and-drop) instead
+ * of a bare `<input type="file">`. The native input still does the actual
+ * work (hidden, triggered via the visible box) - this only changes how it
+ * looks, not the underlying file-selection contract.
+ */
+declare function FileDropzone({ accept, onFileSelected, selectedFileName, label, hint, className, }: FileDropzoneProps): react.JSX.Element;
+
 interface SidebarStation {
     id: string;
     label: string;
@@ -392,4 +452,4 @@ interface ConfirmDialogProps {
  */
 declare function ConfirmDialog({ open, onClose, onConfirm, title, productLabel, description, currentPrice, newPrice, marginImpactLabel, volumeImpactLabel, confirming, }: ConfirmDialogProps): react.JSX.Element | null;
 
-export { ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BoltIcon, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, CheckCircleIcon, ChevronDownIcon, type ColorTokens, CompetitorRow, type CompetitorRowProps, type CompetitorTrend, ConfirmDialog, type ConfirmDialogProps, DecisionFactorRow, type DecisionFactorRowProps, FuelIcon, FuelPumpSolidIcon, LogOutIcon, MapPinIcon, MiniMapCard, type MiniMapCardProps, NavItem, type NavItemProps, PriceRangeSlider, type PriceRangeSliderProps, ProgressBar, type ProgressBarProps, RefreshIcon, type SegmentedTabOption, SegmentedTabs, type SegmentedTabsProps, Sidebar, type SidebarNavItem, type SidebarProps, type SidebarStation, type SidebarUser, Snackbar, type SnackbarProps, type SnackbarTone, StatTile, type StatTileProps, TagIcon, TargetIcon, TopBar, type TopBarProps, TrendDownIcon, TrendUpIcon, TrendUpSolidIcon, UserCircleIcon, WalletIcon, WalletSolidIcon, XIcon, colors };
+export { ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BoltIcon, Button, type ButtonProps, type ButtonVariant, CalendarIcon, Card, type CardProps, CheckCircleIcon, ChevronDownIcon, type ColorTokens, CompetitorRow, type CompetitorRowProps, type CompetitorTrend, ConfirmDialog, type ConfirmDialogProps, DecisionFactorRow, type DecisionFactorRowProps, FileDropzone, type FileDropzoneProps, FuelIcon, FuelPumpSolidIcon, LogOutIcon, MapPinIcon, MiniMapCard, type MiniMapCardProps, NavItem, type NavItemProps, PriceRangeSlider, type PriceRangeSliderProps, ProgressBar, type ProgressBarProps, RefreshIcon, type SegmentedTabOption, SegmentedTabs, type SegmentedTabsProps, SelectableCard, type SelectableCardProps, Sidebar, type SidebarNavItem, type SidebarProps, type SidebarStation, type SidebarUser, Snackbar, type SnackbarProps, type SnackbarTone, StatTile, type StatTileProps, TagIcon, TargetIcon, TopBar, type TopBarProps, TrendDownIcon, TrendUpIcon, TrendUpSolidIcon, UploadIcon, UserCircleIcon, WalletIcon, WalletSolidIcon, WeekdayPicker, type WeekdayPickerProps, XIcon, colors };

package/dist/index.js

@@ -26,12 +26,14 @@ __export(src_exports, {
   Badge: () => Badge,
   BoltIcon: () => BoltIcon,
   Button: () => Button,
+  CalendarIcon: () => CalendarIcon,
   Card: () => Card,
   CheckCircleIcon: () => CheckCircleIcon,
   ChevronDownIcon: () => ChevronDownIcon,
   CompetitorRow: () => CompetitorRow,
   ConfirmDialog: () => ConfirmDialog,
   DecisionFactorRow: () => DecisionFactorRow,
+  FileDropzone: () => FileDropzone,
   FuelIcon: () => FuelIcon,
   FuelPumpSolidIcon: () => FuelPumpSolidIcon,
   LogOutIcon: () => LogOutIcon,
@@ -42,6 +44,7 @@ __export(src_exports, {
   ProgressBar: () => ProgressBar,
   RefreshIcon: () => RefreshIcon,
   SegmentedTabs: () => SegmentedTabs,
+  SelectableCard: () => SelectableCard,
   Sidebar: () => Sidebar,
   Snackbar: () => Snackbar,
   StatTile: () => StatTile,
@@ -51,9 +54,11 @@ __export(src_exports, {
   TrendDownIcon: () => TrendDownIcon,
   TrendUpIcon: () => TrendUpIcon,
   TrendUpSolidIcon: () => TrendUpSolidIcon,
+  UploadIcon: () => UploadIcon,
   UserCircleIcon: () => UserCircleIcon,
   WalletIcon: () => WalletIcon,
   WalletSolidIcon: () => WalletSolidIcon,
+  WeekdayPicker: () => WeekdayPicker,
   XIcon: () => XIcon,
   colors: () => colors
 });
@@ -200,6 +205,21 @@ function CheckCircleIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m8.5 12.5 2.5 2.5 5-5" })
   ] });
 }
+function CalendarIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "3", x2: "8", y2: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "3", x2: "16", y2: "7" })
+  ] });
+}
+function UploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16V4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m7 9 5-5 5 5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" })
+  ] });
+}
 function XIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...base, stroke: "currentColor", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
@@ -584,8 +604,126 @@ function MiniMapCard({ overlayTitle, overlayLinkLabel, competitorCount }) {
   ] });
 }
 
-// src/organisms/Sidebar/Sidebar.tsx
+// src/molecules/WeekdayPicker/WeekdayPicker.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function WeekdayPicker({ labels, selected, onToggle, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "group", className: `flex flex-wrap gap-2 ${className}`.trim(), children: labels.map((label, day) => {
+    const active = selected.includes(day);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": active,
+        onClick: () => onToggle(day),
+        className: `flex h-10 w-10 items-center justify-center rounded-full border text-xs font-semibold transition-colors ${active ? "border-brand-primary bg-brand-primary text-white" : "border-border text-text-secondary hover:bg-surface-subtle"}`,
+        children: label
+      },
+      day
+    );
+  }) });
+}
+
+// src/molecules/SelectableCard/SelectableCard.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function SelectableCard({ icon, title, subtitle, media, selected = false, onClick, className = "" }) {
+  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();
+  if (media) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", "aria-pressed": selected, onClick, className: `overflow-hidden ${base2}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-36 w-full overflow-hidden", children: media }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-3 p-4", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
+          {
+            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"}`,
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-medium text-text-primary", children: title }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm text-text-tertiary", children: subtitle })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", "aria-pressed": selected, onClick, className: `flex items-center gap-3 p-4 ${base2}`, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "span",
+      {
+        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"}`,
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-medium text-text-primary", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm text-text-tertiary", children: subtitle })
+    ] })
+  ] });
+}
+
+// src/molecules/FileDropzone/FileDropzone.tsx
+var import_react = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function FileDropzone({
+  accept,
+  onFileSelected,
+  selectedFileName,
+  label = "Arrastra tu archivo aqu\xED, o haz clic para elegirlo",
+  hint,
+  className = ""
+}) {
+  const inputRef = (0, import_react.useRef)(null);
+  const [dragActive, setDragActive] = (0, import_react.useState)(false);
+  function openPicker() {
+    inputRef.current?.click();
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openPicker();
+    }
+  }
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragActive(false);
+    onFileSelected(e.dataTransfer.files?.[0] ?? null);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: openPicker,
+      onKeyDown: handleKeyDown,
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDragActive(true);
+      },
+      onDragLeave: () => setDragActive(false),
+      onDrop: handleDrop,
+      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(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            className: "hidden",
+            onChange: (e) => onFileSelected(e.target.files?.[0] ?? null)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UploadIcon, { className: `size-6 ${dragActive ? "text-brand-primary" : "text-text-tertiary"}` }),
+        selectedFileName ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm font-medium text-text-primary", children: selectedFileName }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm font-medium text-text-primary", children: label }),
+          hint && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs text-text-tertiary", children: hint })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/organisms/Sidebar/Sidebar.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Sidebar({
   brandName = "Redinamic",
   stations,
@@ -595,43 +733,43 @@ function Sidebar({
   user,
   onLogout
 }) {
-  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: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6 px-4 pb-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3 px-2", children: [
-        /* @__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" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-2xl font-semibold tracking-tight text-white", children: brandName })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.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: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-6 px-4 pb-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3 px-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex size-8 items-center justify-center rounded bg-brand-logo", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BoltIcon, { className: "size-4 text-brand-sidebar" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-2xl font-semibold tracking-tight text-white", children: brandName })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
-        /* @__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" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MapPinIcon, { className: "pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-white" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "select",
           {
             value: selectedStationId,
             onChange: (event) => onSelectStation(event.target.value),
             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",
-            children: stations.map((station) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: station.id, className: "text-text-primary", children: station.label }, station.id))
+            children: stations.map((station) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: station.id, className: "text-text-primary", children: station.label }, station.id))
           }
         ),
-        /* @__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" })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 size-3 -translate-y-1/2 text-white" })
       ] })
     ] }),
-    /* @__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)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "border-t border-white/10 px-4 pt-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3 px-4 py-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Avatar, { className: "bg-brand-primary text-white", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UserCircleIcon, { className: "size-4" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-semibold text-white", children: user.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-white/60", children: user.role })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { className: "flex flex-1 flex-col gap-1 px-4", children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NavItem, { icon: item.icon, label: item.label, active: item.active, href: item.href }, item.key)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "border-t border-white/10 px-4 pt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { className: "bg-brand-primary text-white", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UserCircleIcon, { className: "size-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-semibold text-white", children: user.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-xs text-white/60", children: user.role })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "button",
         {
           type: "button",
           onClick: onLogout,
           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",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LogOutIcon, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LogOutIcon, { className: "size-4" }),
             "Cerrar Sesi\xF3n"
           ]
         }
@@ -641,7 +779,7 @@ function Sidebar({
 }
 
 // src/organisms/TopBar/TopBar.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function TopBar({
   stationName,
   lastUpdatedLabel,
@@ -649,36 +787,36 @@ function TopBar({
   refreshing = false,
   middleContent
 }) {
-  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: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "shrink-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MapPinIcon, { className: "size-4 text-text-primary" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-semibold text-text-primary", children: stationName })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.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: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MapPinIcon, { className: "size-4 text-text-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm font-semibold text-text-primary", children: stationName })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mt-1 flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "size-2 rounded-full bg-success-dark" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs font-medium text-text-secondary", children: lastUpdatedLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mt-1 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-2 rounded-full bg-success-dark" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xs font-medium text-text-secondary", children: lastUpdatedLabel })
       ] })
     ] }),
     middleContent,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex shrink-0 items-center gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex shrink-0 items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Button,
         {
           variant: "primary",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RefreshIcon, { className: `size-4 ${refreshing ? "animate-spin" : ""}` }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RefreshIcon, { className: `size-4 ${refreshing ? "animate-spin" : ""}` }),
           onClick: onRefresh,
           disabled: refreshing,
           children: "Actualizar datos"
         }
       ),
-      /* @__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" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Avatar, { className: "bg-brand-primary text-white", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UserCircleIcon, { className: "size-4" }) })
     ] })
   ] });
 }
 
 // src/organisms/ConfirmDialog/ConfirmDialog.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ConfirmDialog({
   open,
   onClose,
@@ -693,49 +831,49 @@ function ConfirmDialog({
   confirming = false
 }) {
   if (!open) return null;
-  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: [
-    /* @__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: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-modal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative flex items-center justify-center bg-gradient-to-r from-brand-primary to-info-dark py-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "button",
         {
           type: "button",
           onClick: onClose,
           "aria-label": "Cerrar",
           className: "absolute right-4 top-4 text-white/80 hover:text-white",
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(XIcon, { className: "size-5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(XIcon, { className: "size-5" })
         }
       ),
-      /* @__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" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex size-14 items-center justify-center rounded-full bg-white text-brand-primary", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(WalletIcon, { className: "size-6" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col items-center gap-3 px-8 py-6 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-xl font-bold text-text-primary", children: title }),
-      /* @__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 }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-text-secondary", children: description }),
-      /* @__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: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs uppercase text-text-secondary", children: "Actual" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-lg font-semibold text-text-tertiary line-through", children: currentPrice })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-3 px-8 py-6 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "text-xl font-bold text-text-primary", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "rounded-full bg-surface-muted px-3 py-1 text-xs font-semibold text-text-secondary", children: productLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-text-secondary", children: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mt-2 flex w-full items-center justify-between rounded-xl bg-surface-subtle p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs uppercase text-text-secondary", children: "Actual" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-lg font-semibold text-text-tertiary line-through", children: currentPrice })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-text-secondary", children: "\u2192" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs uppercase text-success-dark", children: "Recomendado" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-lg font-semibold text-brand-primary", children: newPrice })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-text-secondary", children: "\u2192" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs uppercase text-success-dark", children: "Recomendado" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-lg font-semibold text-brand-primary", children: newPrice })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex w-full items-center justify-between text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs text-text-secondary", children: "Impacto en Margen" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-semibold text-success-dark", children: marginImpactLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full items-center justify-between text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-text-secondary", children: "Impacto en Margen" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-semibold text-success-dark", children: marginImpactLabel })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs text-text-secondary", children: "Volumen Estimado" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-semibold text-success-dark", children: volumeImpactLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-text-secondary", children: "Volumen Estimado" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-semibold text-success-dark", children: volumeImpactLabel })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-end gap-4 border-t border-border px-8 py-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "text", onClick: onClose, children: "Cancelar" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "primary", onClick: onConfirm, disabled: confirming, children: confirming ? "Aplicando..." : "Confirmar y aplicar" })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-end gap-4 border-t border-border px-8 py-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "text", onClick: onClose, children: "Cancelar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "primary", onClick: onConfirm, disabled: confirming, children: confirming ? "Aplicando..." : "Confirmar y aplicar" })
     ] })
   ] }) });
 }
@@ -747,12 +885,14 @@ function ConfirmDialog({
   Badge,
   BoltIcon,
   Button,
+  CalendarIcon,
   Card,
   CheckCircleIcon,
   ChevronDownIcon,
   CompetitorRow,
   ConfirmDialog,
   DecisionFactorRow,
+  FileDropzone,
   FuelIcon,
   FuelPumpSolidIcon,
   LogOutIcon,
@@ -763,6 +903,7 @@ function ConfirmDialog({
   ProgressBar,
   RefreshIcon,
   SegmentedTabs,
+  SelectableCard,
   Sidebar,
   Snackbar,
   StatTile,
@@ -772,9 +913,11 @@ function ConfirmDialog({
   TrendDownIcon,
   TrendUpIcon,
   TrendUpSolidIcon,
+  UploadIcon,
   UserCircleIcon,
   WalletIcon,
   WalletSolidIcon,
+  WeekdayPicker,
   XIcon,
   colors
 });