@moeve-ui/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,395 @@
+import * as react from 'react';
+import { SVGProps, ReactNode, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+/**
+ * Design tokens - extracted directly from the "Redinamic-tec" Figma file
+ * (get_design_context on the "Simulador de Impacto" node), not made up.
+ *
+ * This is the ONLY source of truth for the library's colors. The Tailwind
+ * preset (`packages/ui/tailwind.preset.ts`) reads from here, so a brand
+ * change happens in a single place and propagates through the whole app -
+ * it's the same Open/Closed principle: extend by adding/changing tokens,
+ * not by editing every component that uses a color.
+ */
+declare const colors: {
+    readonly brand: {
+        readonly sidebar: "#004656";
+        readonly sidebarHover: "#005a6e";
+        readonly accent: "#047dba";
+        readonly primary: "#006395";
+        readonly logo: "#8af9b5";
+    };
+    readonly surface: {
+        readonly page: "#f4fafe";
+        readonly card: "#ffffff";
+        readonly subtle: "#eef4f8";
+        readonly muted: "#e9eff3";
+    };
+    readonly text: {
+        readonly primary: "#161c1f";
+        readonly secondary: "#404850";
+        readonly tertiary: "#707881";
+        readonly onDark: "#ffffff";
+        readonly onDarkMuted: "rgba(255,255,255,0.6)";
+        readonly onDarkFaint: "rgba(255,255,255,0.5)";
+    };
+    readonly success: {
+        readonly DEFAULT: "#008851";
+        readonly dark: "#006c3f";
+        readonly bg: "#8af9b5";
+    };
+    readonly danger: {
+        readonly DEFAULT: "#ba1a1a";
+        readonly dark: "#93000a";
+        readonly bg: "#ffdad6";
+    };
+    readonly info: {
+        readonly DEFAULT: "#006395";
+        readonly dark: "#2e6576";
+    };
+    readonly border: {
+        readonly DEFAULT: "#dde3e7";
+    };
+};
+type ColorTokens = typeof colors;
+
+/**
+ * Custom icon set, in plain SVG (no external library like
+ * lucide-react/heroicons) - so packages/ui doesn't depend on anything but
+ * React, and there's no separate icon package to install/update.
+ *
+ * NOTE ON DESIGN FIDELITY: the Figma design ships its own icons exported
+ * as images; those assets live on Figma's servers and the URLs expire in
+ * ~7 days, so they can't be "committed" as-is. These are an equivalent set
+ * (same visual meaning - pin, arrow, check, etc.) redrawn by hand in SVG,
+ * not an exact pixel-for-pixel copy of the original vector. If the exact
+ * Figma set is wanted later on, it can be exported as SVG from the file
+ * and used to replace these.
+ *
+ * All of them accept the standard SVG props (className, etc.) so size/color
+ * can be controlled with Tailwind from wherever they're used.
+ */
+type IconProps = SVGProps<SVGSVGElement>;
+declare function BoltIcon(props: IconProps): react.JSX.Element;
+declare function MapPinIcon(props: IconProps): react.JSX.Element;
+declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
+declare function ArrowUpIcon(props: IconProps): react.JSX.Element;
+declare function ArrowDownIcon(props: IconProps): react.JSX.Element;
+declare function RefreshIcon(props: IconProps): react.JSX.Element;
+declare function UserCircleIcon(props: IconProps): react.JSX.Element;
+declare function LogOutIcon(props: IconProps): react.JSX.Element;
+declare function TagIcon(props: IconProps): react.JSX.Element;
+declare function TargetIcon(props: IconProps): react.JSX.Element;
+declare function TrendUpIcon(props: IconProps): react.JSX.Element;
+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 XIcon(props: IconProps): react.JSX.Element;
+/**
+ * Solid/filled icon set, exported directly from the "Redinamic-tec" Figma
+ * file (the "Gestion de Precios" stat cards) - unlike the outline set
+ * above, these are pixel-accurate copies of the Figma vectors, not
+ * hand-redrawn equivalents. Each keeps its own natural viewBox/aspect
+ * ratio instead of being forced into the outline set's 24x24 grid.
+ */
+declare function FuelPumpSolidIcon(props: IconProps): react.JSX.Element;
+declare function WalletSolidIcon(props: IconProps): react.JSX.Element;
+declare function TrendUpSolidIcon(props: IconProps): react.JSX.Element;
+
+interface AvatarProps {
+    /** letter or icon shown inside the circle */
+    children: ReactNode;
+    /** background color of the circle (hex or another Tailwind class via className) */
+    className?: string;
+    size?: "sm" | "md";
+}
+/**
+ * Avatar/initials circle - used both by the session user (sidebar) and
+ * each competitor in the "Nearby Competitors" list. It does not decide
+ * the background OR text color: it receives them via className
+ * (e.g. "bg-danger-bg text-danger-dark" or "bg-success text-white"), so
+ * the same component works for any combination without having to touch it.
+ */
+declare function Avatar({ children, className, size }: AvatarProps): react.JSX.Element;
+
+type BadgeTone = "success" | "danger" | "neutral";
+interface BadgeProps {
+    children: ReactNode;
+    tone?: BadgeTone;
+    className?: string;
+}
+/**
+ * Small pill for deltas ("+0.7%", "-800L") and status labels. The set of
+ * variants ("tone") is the only extension point - adding a new tone
+ * doesn't touch the rest of the component (Open/Closed).
+ */
+declare function Badge({ children, tone, className }: BadgeProps): react.JSX.Element;
+
+type ButtonVariant = "primary" | "ghost" | "text";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    icon?: ReactNode;
+}
+/**
+ * Single button with 3 variants (the ones that appear in the design: the
+ * solid blue pill for "Aplicar precio"/"Actualizar datos", the text link
+ * for "Restablecer a Actual", and a "ghost" variant for future cases).
+ * Same as Badge: extending the set of variants doesn't require touching
+ * the rest of the component.
+ */
+declare function Button({ children, variant, icon, className, ...rest }: ButtonProps): react.JSX.Element;
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** removes the default padding, for when the content manages its own */
+    noPadding?: boolean;
+}
+/**
+ * Base white, rounded container with a soft shadow - the same pattern
+ * that wraps every dashboard block in the design (Simulator Panel,
+ * Decision Factors, Nearby Competitors, etc.). Anything specific to a
+ * given block goes through composition (children), not new props here -
+ * single responsibility principle: Card only knows how to be "the white box".
+ */
+declare function Card({ children, className, noPadding, ...rest }: CardProps): react.JSX.Element;
+
+interface ProgressBarProps {
+    /** 0 to 100 */
+    value: number;
+    /** color of the filled bar - Tailwind class, e.g. "bg-info" */
+    fillClassName?: string;
+    /** bar height in px (the design uses 4px in stat tiles and 6px in Decision Factors) */
+    heightClassName?: string;
+    /** number of equal segments the bar is divided into (the design uses 3 in "Supply Cost") */
+    segments?: number;
+    className?: string;
+}
+/**
+ * Simple progress bar. It knows nothing about "what" it represents
+ * (elasticity, margin, inventory...) - that's decided by whoever uses it
+ * via `value` and `fillClassName`. Keeping it "dumb" is what allows it to
+ * be reused in the stat tiles AND in the Decision Factors panel without
+ * duplicating code.
+ */
+declare function ProgressBar({ value, fillClassName, heightClassName, segments, className, }: ProgressBarProps): react.JSX.Element;
+
+type SnackbarTone = "success" | "danger" | "neutral";
+interface SnackbarProps {
+    message: string;
+    tone?: SnackbarTone;
+    onClose?: () => void;
+    className?: string;
+}
+/**
+ * Toast/confirmation bar (e.g. "Datos de mercado actualizados
+ * correctamente" after a refresh). Fully controlled - it has no timer
+ * or visibility state of its own; whoever uses it decides when it's on
+ * screen (mount/unmount it, or drive a boolean) and for how long, same
+ * philosophy as ConfirmDialog's `open`.
+ */
+declare function Snackbar({ message, tone, onClose, className }: SnackbarProps): react.JSX.Element;
+
+interface SegmentedTabOption {
+    value: string;
+    label: string;
+}
+interface SegmentedTabsProps {
+    options: SegmentedTabOption[];
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+/**
+ * The Simulator's "Regular | Premium | Diesel" control. It receives the
+ * options via props instead of having them fixed - the same component
+ * works for any list of tabs, in any future screen.
+ */
+declare function SegmentedTabs({ options, value, onChange, className }: SegmentedTabsProps): react.JSX.Element;
+
+interface NavItemProps {
+    icon: ReactNode;
+    label: string;
+    active?: boolean;
+    href?: string;
+}
+/**
+ * A sidebar navigation link. `active` is the only variant -
+ * the rest of the appearance (icon, text) is composed from outside.
+ */
+declare function NavItem({ icon, label, active, href }: NavItemProps): react.JSX.Element;
+
+interface StatTileProps {
+    icon: ReactNode;
+    label: string;
+    value: string;
+    /** unit suffix rendered next to `value` in a lighter/smaller style, e.g. "L" */
+    unit?: string;
+    /** delta badge text, e.g. "+2.4% vs prom. diario" */
+    delta?: string;
+    deltaTone?: BadgeTone;
+    /** optional 0-100 value for the mini bar below (not every tile has one) */
+    progressValue?: number;
+    progressClassName?: string;
+}
+/**
+ * One of the result cards ("Volumen Proyectado", "Margen Bruto Proy.",
+ * "Ganancia Proyectada"). Purely presentational - it doesn't know where
+ * the numbers come from, it just renders them (Dependency Inversion:
+ * StatTile depends on props, not on the API or the model).
+ */
+declare function StatTile({ icon, label, value, unit, delta, deltaTone, progressValue, progressClassName, }: StatTileProps): react.JSX.Element;
+
+interface DecisionFactorRowProps {
+    label: string;
+    /** the short value on the right, e.g. "Alta", "Estable", "65%" */
+    statusText: string;
+    statusClassName?: string;
+    /** 0-100, the weight/strength of this factor */
+    value: number;
+    fillClassName?: string;
+    segments?: number;
+    description: string;
+}
+/**
+ * A row in the "Decision Factors" panel (Elasticity, Supply Cost,
+ * Inventory...). Designed to be populated directly from the `factors`
+ * array returned by the backend's POST /predict - each factor from the
+ * API maps 1 to 1 to one of these rows.
+ */
+declare function DecisionFactorRow({ label, statusText, statusClassName, value, fillClassName, segments, description, }: DecisionFactorRowProps): react.JSX.Element;
+
+type CompetitorTrend = "up" | "down" | "stable";
+interface CompetitorRowProps {
+    name: string;
+    /** initial shown in the avatar, e.g. "O" */
+    avatarLetter: string;
+    avatarBgClassName: string;
+    avatarTextClassName: string;
+    distanceKm: number;
+    price: string;
+    trend: CompetitorTrend;
+    /** e.g. "Hace 2h" or "Sin cambios (24h)" */
+    trendLabel: string;
+}
+/**
+ * A row in the "Nearby Competitors" panel. Designed to be populated
+ * directly from the array returned by the backend's GET /competitors.
+ */
+declare function CompetitorRow({ name, avatarLetter, avatarBgClassName, avatarTextClassName, distanceKm, price, trend, trendLabel, }: CompetitorRowProps): react.JSX.Element;
+
+interface PriceRangeSliderProps {
+    min: number;
+    max: number;
+    step?: number;
+    /** the value the user is currently dragging */
+    value: number;
+    onChange: (value: number) => void;
+    /** reference "current" price, shown at the top left */
+    currentPrice: number;
+    /** price suggested by the model, shown at the top right */
+    recommendedPrice: number;
+    currencyFormatter: (value: number) => string;
+}
+/**
+ * The Simulator's "Adjust the price to evaluate the projected impact"
+ * slider. Fully controlled (value/onChange come from the parent) - it
+ * holds no state of its own, so it doesn't need "use client" by itself:
+ * it inherits it from the screen component that does manage the state.
+ */
+declare function PriceRangeSlider({ min, max, step, value, onChange, currentPrice, recommendedPrice, currencyFormatter, }: PriceRangeSliderProps): react.JSX.Element;
+
+interface MiniMapCardProps {
+    overlayTitle: string;
+    /** text already assembled with the count included, e.g. "Basado en 3 competidores clave" - don't repeat it in competitorCount. */
+    overlayLinkLabel: string;
+    /** used only for accessibility (aria-label), not rendered on screen again - overlayLinkLabel already has the number in the right place in the sentence. */
+    competitorCount: number;
+}
+/**
+ * The decorative map card below "Decision Factors".
+ *
+ * *** PLACEHOLDER ***: the design uses a screenshot of a real map; here an
+ * abstract SVG map is drawn instead (no dependencies or API key) that
+ * occupies the same space and keeps the text overlay identical. Once a
+ * real integration (Google Maps / Mapbox) exists with the location and
+ * geolocated competitors, this is the component that gets replaced -
+ * the rest of the screen doesn't change because it only depends on this
+ * interface.
+ */
+declare function MiniMapCard({ overlayTitle, overlayLinkLabel, competitorCount }: MiniMapCardProps): react.JSX.Element;
+
+interface SidebarStation {
+    id: string;
+    label: string;
+}
+interface SidebarNavItem {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    active?: boolean;
+    href?: string;
+}
+interface SidebarUser {
+    name: string;
+    role: string;
+}
+interface SidebarProps {
+    brandName?: string;
+    stations: SidebarStation[];
+    selectedStationId: string;
+    onSelectStation: (stationId: string) => void;
+    navItems: SidebarNavItem[];
+    user: SidebarUser;
+    onLogout?: () => void;
+}
+/**
+ * The fixed 260px sidebar. It receives EVERYTHING via props - stations,
+ * nav items, user - instead of having anything hardcoded (beyond the
+ * default brand name). This is what lets it serve "multiple users":
+ * whoever uses it decides which user/stations to show, this component
+ * just knows how to render them. The station list currently uses a
+ * native <select> instead of a custom dropdown - it's the simplest and
+ * most accessible option; it can be replaced by a more elaborate menu
+ * without touching the rest of the screen.
+ */
+declare function Sidebar({ brandName, stations, selectedStationId, onSelectStation, navItems, user, onLogout, }: SidebarProps): react.JSX.Element;
+
+interface TopBarProps {
+    stationName: string;
+    lastUpdatedLabel: string;
+    onRefresh?: () => void;
+    refreshing?: boolean;
+    /** optional content rendered between the station info and the refresh button - e.g. product tabs. */
+    middleContent?: ReactNode;
+}
+/**
+ * The fixed top bar (80px, with blur), to the right of the sidebar.
+ * It only knows the active station's name and the "last updated"
+ * state - the concrete data comes from the screen that uses it.
+ */
+declare function TopBar({ stationName, lastUpdatedLabel, onRefresh, refreshing, middleContent, }: TopBarProps): react.JSX.Element;
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    productLabel: string;
+    description: ReactNode;
+    currentPrice: string;
+    newPrice: string;
+    marginImpactLabel: string;
+    volumeImpactLabel: string;
+    confirming?: boolean;
+}
+/**
+ * The "Aplicar precio recomendado" / "Confirmar y aplicar" modal. Fully
+ * controlled by `open` - it has no state of its own, so the screen that
+ * uses it decides when to show it (e.g. after a successful /simulate
+ * response) and what happens on confirm (calling /prices/apply).
+ */
+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 };