@moeve-ui/ui 0.2.0 → 0.2.2

package/dist/index.d.mts

@@ -157,6 +157,28 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function Card({ children, className, noPadding, ...rest }: CardProps): react.JSX.Element;
 
+interface LogoProps {
+    /** Primer segmento del wordmark en el color de acento (ej. "RED" de "Redisplay") - opcional, se omite si la marca no tiene ese wordplay (ej. "Fluxer"). */
+    accent?: string;
+    /** Resto del wordmark, o el nombre completo si `accent` se omite. */
+    text: string;
+    /** Clase de color para `accent` - default pensado para fondos claros. */
+    accentClassName?: string;
+    /** Clase de color para `text` - default pensado para fondos claros; pasar algo como "text-white" sobre fondos oscuros (ej. el Sidebar). */
+    textClassName?: string;
+    className?: string;
+}
+/**
+ * Wordmark en negrita itálica, todo mayúsculas, tracking cerrado - el
+ * mismo lenguaje que usan logotipos tipo "marca deportiva/energética"
+ * (ver referencia visual del pedido original). Texto real, no un SVG
+ * estático: se mantiene nítido a cualquier tamaño y hereda el sistema de
+ * color de marca (brand.primary, ya dinámico por marca vía CSS custom
+ * properties en las apps que lo consumen) en vez de tener que exportar
+ * un asset distinto por marca.
+ */
+declare function Logo({ accent, text, accentClassName, textClassName, className }: LogoProps): react.JSX.Element;
+
 interface ProgressBarProps {
     /** 0 to 100 */
     value: number;
@@ -342,6 +364,15 @@ 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;
@@ -352,7 +383,7 @@ interface SelectableCardProps {
  * "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, selected, onClick, className }: SelectableCardProps): react.JSX.Element;
+declare function SelectableCard({ icon, title, subtitle, media, selected, onClick, className }: SelectableCardProps): react.JSX.Element;
 
 interface FileDropzoneProps {
     accept?: string;
@@ -387,7 +418,8 @@ interface SidebarUser {
     role: string;
 }
 interface SidebarProps {
-    brandName?: string;
+    /** String simple o un nodo enriquecido (ej. <Logo/> con su wordmark de dos tonos) - ambos se renderizan tal cual junto al ícono. */
+    brandName?: ReactNode;
     stations: SidebarStation[];
     selectedStationId: string;
     onSelectStation: (stationId: string) => void;
@@ -443,4 +475,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, 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 };
+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, Logo, type LogoProps, 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

@@ -157,6 +157,28 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function Card({ children, className, noPadding, ...rest }: CardProps): react.JSX.Element;
 
+interface LogoProps {
+    /** Primer segmento del wordmark en el color de acento (ej. "RED" de "Redisplay") - opcional, se omite si la marca no tiene ese wordplay (ej. "Fluxer"). */
+    accent?: string;
+    /** Resto del wordmark, o el nombre completo si `accent` se omite. */
+    text: string;
+    /** Clase de color para `accent` - default pensado para fondos claros. */
+    accentClassName?: string;
+    /** Clase de color para `text` - default pensado para fondos claros; pasar algo como "text-white" sobre fondos oscuros (ej. el Sidebar). */
+    textClassName?: string;
+    className?: string;
+}
+/**
+ * Wordmark en negrita itálica, todo mayúsculas, tracking cerrado - el
+ * mismo lenguaje que usan logotipos tipo "marca deportiva/energética"
+ * (ver referencia visual del pedido original). Texto real, no un SVG
+ * estático: se mantiene nítido a cualquier tamaño y hereda el sistema de
+ * color de marca (brand.primary, ya dinámico por marca vía CSS custom
+ * properties en las apps que lo consumen) en vez de tener que exportar
+ * un asset distinto por marca.
+ */
+declare function Logo({ accent, text, accentClassName, textClassName, className }: LogoProps): react.JSX.Element;
+
 interface ProgressBarProps {
     /** 0 to 100 */
     value: number;
@@ -342,6 +364,15 @@ 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;
@@ -352,7 +383,7 @@ interface SelectableCardProps {
  * "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, selected, onClick, className }: SelectableCardProps): react.JSX.Element;
+declare function SelectableCard({ icon, title, subtitle, media, selected, onClick, className }: SelectableCardProps): react.JSX.Element;
 
 interface FileDropzoneProps {
     accept?: string;
@@ -387,7 +418,8 @@ interface SidebarUser {
     role: string;
 }
 interface SidebarProps {
-    brandName?: string;
+    /** String simple o un nodo enriquecido (ej. <Logo/> con su wordmark de dos tonos) - ambos se renderizan tal cual junto al ícono. */
+    brandName?: ReactNode;
     stations: SidebarStation[];
     selectedStationId: string;
     onSelectStation: (stationId: string) => void;
@@ -443,4 +475,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, 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 };
+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, Logo, type LogoProps, 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 };