@mitumba/ui 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,734 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+
+type ButtonVariant = 'primary' | 'secondary' | 'earth' | 'success' | 'error' | 'outline' | 'ghost';
+type ButtonSize = 'small' | 'medium' | 'large';
+type IconPosition = 'left' | 'right';
+interface MitumbaPrimaryButtonProps {
+    /** Button text label. If not provided and icon is present, becomes an Icon-Only button. */
+    label?: string;
+    /** Called when the button is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Shows a spinner and prevents clicks while work is in progress. */
+    loading?: boolean;
+    /** Prevents user interaction. */
+    disabled?: boolean;
+    /** Optional leading or trailing icon. */
+    icon?: ReactNode;
+    /** Placement of the icon relative to the label. Defaults to 'left'. */
+    iconPosition?: IconPosition;
+    /** Whether the button spans the full available width. Defaults to false. */
+    fullWidth?: boolean;
+    /** Button height/scale. small(32px), medium(42px), large(52px). Defaults to 'medium'. */
+    size?: ButtonSize;
+    /** Visual treatment. Defaults to 'primary'. */
+    variant?: ButtonVariant;
+    /** Optional style overrides using MUI sx prop. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Living" Button primitive with tactile interaction and precision scaling.
+ * Fulfills the 32/42/52 height standard and incorporates benchmark spring physics.
+ */
+declare function MitumbaPrimaryButton({ label, onClick, loading, disabled, icon, iconPosition, fullWidth, size, variant, sx, }: MitumbaPrimaryButtonProps): react_jsx_runtime.JSX.Element;
+
+type TextFieldSize = 'small' | 'medium' | 'large';
+type TextFieldStatus = 'success' | 'warning' | 'error';
+type TextFieldRounding = 'pill' | 'rounded';
+interface MitumbaTextFieldProps {
+    /** Optional label text displayed above the field. */
+    label?: string;
+    /** Placeholder text shown when the field is empty. */
+    hint: string;
+    /** Controlled value of the input. */
+    value: string;
+    /** Callback fired when the value changes. */
+    onChange: (value: string) => void;
+    /** Supporting text or error message displayed below the field. */
+    helperText?: string;
+    /** Error message displayed below the field. If provided, sets status to 'error'. */
+    error?: string;
+    /** Scale standard matching buttons/select. Defaults to 'medium'. */
+    size?: TextFieldSize;
+    /** Corner geometry. Defaults to 'rounded'. */
+    rounding?: TextFieldRounding;
+    /** Validation status treatment. */
+    status?: TextFieldStatus;
+    /** Leading icon or content. */
+    prefix?: ReactNode;
+    /** Trailing icon or content. */
+    suffix?: ReactNode;
+    /** Integrated button at the end of the input. */
+    endButton?: ReactNode;
+    /** Input type (e.g. "text", "email", "password"). Defaults to "text". */
+    type?: string;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Renders a multi-line textarea instead of a single-line input. */
+    multiline?: boolean;
+    /** Number of visible rows for a multi-line textarea. Defaults to 4 for multiline. */
+    rows?: number;
+    /** Whether the field is read-only. */
+    readOnly?: boolean;
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Living" Text Field primitive with precision scaling and tactile states.
+ * Fulfills the 32/42/52 height standard and supports seamless integrated buttons.
+ */
+declare function MitumbaTextField({ label, hint, value, onChange, helperText, error, size, rounding, status, prefix, suffix, endButton, type, disabled, multiline, rows, readOnly, sx, }: MitumbaTextFieldProps): react_jsx_runtime.JSX.Element;
+
+type SelectSize = 'small' | 'medium' | 'large';
+type SelectRounding = 'pill' | 'rounded' | 'square';
+interface MitumbaSelectOption {
+    /** Technical value for the option. */
+    value: string | number;
+    /** Primary display text. */
+    label: string;
+    /** Secondary supporting text. */
+    subtitle?: string;
+    /** Leading icon, flag, or avatar. */
+    icon?: React.ReactElement;
+    /** Optional grouping label. */
+    group?: string;
+    /** Whether the option is disabled. */
+    disabled?: boolean;
+}
+interface MitumbaSelectProps {
+    /** Selected value(s). */
+    value: string | number | (string | number)[];
+    /** Technical field name. */
+    name?: string;
+    /** Label text displayed above or inside the select. */
+    label?: string;
+    /** Placeholder when no value is selected. */
+    placeholder?: string;
+    /** Array of selectable options. */
+    options: MitumbaSelectOption[];
+    /** Called when the selection changes. */
+    onChange: (value: string | number | (string | number)[]) => void;
+    /** Scale standard matching buttons. Defaults to 'medium'. */
+    size?: SelectSize;
+    /** Corner geometry. Defaults to 'rounded'. */
+    rounding?: SelectRounding;
+    /** Whether multiple values can be selected. */
+    multiple?: boolean;
+    /** Shows a loading indicator. */
+    loading?: boolean;
+    /** Shows an error state. */
+    error?: string;
+    /** Prevents user interaction. */
+    disabled?: boolean;
+    /** Support for a search field inside the menu. */
+    showSearch?: boolean;
+    /** Support for a high-contrast dark menu. */
+    inverted?: boolean;
+    /** Leading icon for the collapsed state. */
+    startIcon?: React.ReactElement;
+    /** Manual override for the value display (e.g. "3 items selected"). */
+    displayValue?: string;
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Living" Select primitive with precision scaling and rich menu metadata.
+ * Fulfills the 32/42/52 height standard and incorporates benchmark menu physics.
+ */
+declare function MitumbaSelect({ value, name, label, placeholder, options, onChange, size, rounding, multiple, loading, error, disabled, showSearch, inverted, startIcon, displayValue, sx, }: MitumbaSelectProps): react_jsx_runtime.JSX.Element;
+
+type ChipVariant = 'solid' | 'outline' | 'soft' | 'ghost';
+type ChipRounding = 'rounded' | 'pill' | 'square';
+type ChipStatus = 'default' | 'active' | 'incomplete' | 'danger' | 'success' | 'common' | 'special';
+interface MitumbaChipProps {
+    /** Text label displayed inside the chip. */
+    label: string;
+    /** Called when the chip is clicked. */
+    onClick?: () => void;
+    /** Called when the delete icon is clicked. */
+    onDelete?: () => void;
+    /** Whether the chip is in a selected/active state. */
+    selected?: boolean;
+    /** Prevents user interaction. */
+    disabled?: boolean;
+    /** Leading icon or dot. */
+    icon?: ReactNode;
+    /** Custom avatar element. */
+    avatar?: React.ReactElement;
+    /** Numeric or text badge appended to the end. */
+    badge?: string | number;
+    /** Visual treatment. Defaults to 'outline' as per new benchmark. */
+    variant?: ChipVariant;
+    /** Category archetype for auto-styling. */
+    status?: ChipStatus;
+    /** Corner geometry. Defaults to 'rounded' (8px). */
+    rounding?: ChipRounding;
+    /** Size standard. */
+    size?: 'small' | 'medium';
+    /** Base color theme. */
+    color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'earth' | 'purple' | 'blue';
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Living" Chip primitive with tactile interaction and precision geometry.
+ * Fulfills the "Badges and Chips" design benchmark with systematic status-aware styling.
+ */
+declare function MitumbaChip({ label, onClick, onDelete, selected, disabled, icon, avatar, badge, variant, status, rounding, size, color: propColor, sx, }: MitumbaChipProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface MitumbaAvatarProps {
+    /** Display name for initials fallback and meta text. Isaac Stanley -> IS. */
+    name?: string;
+    /** URL of the profile image. */
+    imageUrl?: string;
+    /** Size of the avatar. xs(24), sm(32), md(44), lg(64), xl(80). Defaults to 'md'. */
+    size?: AvatarSize;
+    /** Optional element rendered as a badge on the bottom-right corner. */
+    badge?: ReactNode;
+    /** Requirement 4: Presence status dot (bottom-right). */
+    status?: 'online' | 'offline';
+    /** Requirement 2: Action icon overlay (bottom-right). Overrides status if both provided. */
+    actionIcon?: ReactNode;
+    /** Requirement 3: Numeric/text notification badge (top-right). */
+    notificationCount?: number | string;
+    /** Custom color for notification badge. Defaults to error red. */
+    notificationColor?: string;
+    /** Requirement 5 & 6: Alignment of name/subtitle text. */
+    textAlignment?: 'side' | 'bottom';
+    /** Supporting text for side-alignment metadata. */
+    subtitle?: string;
+    /** Requirement 7: Trigger the "new event" spinning border animation (dots-to-solid). */
+    hasNewEvent?: boolean;
+    /** Requirement 8: Value 0-100 for concentric progress stroke (e.g. profile completeness). */
+    progress?: number;
+    /** Requirement 9: Show selected state with tick icon at bottom-right. */
+    selected?: boolean;
+    /** Requirement 10: internal prop for stacked styling. */
+    isStacked?: boolean;
+    /** Requirement 11: internal prop for stacked CTA button. */
+    isCTA?: boolean;
+    /** Requirement 12: internal prop for numeric overflow circle. */
+    overflowCount?: number;
+    /** Called when the avatar/content is clicked. */
+    onClick?: () => void;
+}
+
+/**
+ * Premium "Living" Avatar primitive with 3D physicality and high-end animations.
+ * Fulfills all professional requirements and refinements from Stanley.
+ */
+declare function MitumbaAvatar({ name, imageUrl, size, badge, status, actionIcon, notificationCount, notificationColor, subtitle, textAlignment, hasNewEvent, progress, selected, isStacked, isCTA, overflowCount, onClick, }: MitumbaAvatarProps): react_jsx_runtime.JSX.Element;
+
+interface PageContainerProps {
+    /** Content rendered inside the container. */
+    children: ReactNode;
+    /** Maximum width constraint. Defaults to 'lg'. */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
+    /** If true, removes horizontal padding. */
+    noPadding?: boolean;
+}
+
+declare function PageContainer({ children, maxWidth, noPadding, }: PageContainerProps): react_jsx_runtime.JSX.Element;
+
+interface SectionHeaderProps {
+    /** Main section title. */
+    title: string;
+    /** Supporting descriptive text. */
+    subtitle?: string;
+    /** Secondary small label displayed above the title. */
+    overline?: string;
+    /** Primary action element (e.g., "See All" button). */
+    action?: ReactNode;
+    /** Horizontal alignment. Defaults to 'left'. */
+    align?: 'left' | 'center';
+    /** Visual scale. Defaults to 'standard'. */
+    variant?: 'standard' | 'large';
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+    /** Legacy props for backward compatibility. */
+    actionLabel?: string;
+    onAction?: () => void;
+}
+
+/**
+ * Premium "Living" Section Header primitive.
+ * Fulfills high-end layout standards with flexible alignment and benchmarked typography.
+ */
+declare function SectionHeader({ title, subtitle, overline, action, align, variant, sx, actionLabel, onAction, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare function MitumbaDivider(): react_jsx_runtime.JSX.Element;
+
+interface MitumbaGridProps {
+    /** Grid cells. */
+    children: ReactNode;
+    /** Column counts per breakpoint. Defaults to { xs: 4, sm: 8, md: 8, lg: 12 }. */
+    columns?: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    /** Responsive gap between cells. Defaults to benchmark standard (16/20/20). */
+    gap?: number | string | object;
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Living" Grid primitive.
+ * Fulfills high-end structural standards with conservative, professional spatial density.
+ * Reigned in from the benchmark to avoid 'wild' excessive margins.
+ */
+declare function MitumbaGrid({ children, columns, gap, sx, }: MitumbaGridProps): react_jsx_runtime.JSX.Element;
+
+type BreadcrumbItem = {
+    /** Display label. */
+    label: string;
+    /** Optional href. If provided, renders as a link. */
+    href?: string;
+};
+interface MitumbaBreadcrumbProps {
+    /** Breadcrumb trail items. */
+    items: BreadcrumbItem[];
+}
+
+/**
+ * Premium "Living" Breadcrumb primitive.
+ * Fulfills high-end hierarchy standards with systematic dividers and tactile hover states.
+ */
+declare function MitumbaBreadcrumb({ items }: MitumbaBreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+type BottomNavVariant = 'm3' | 'expansive' | 'indicator' | 'pill' | 'standalone';
+interface MobileBottomNavItem {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    activeIcon?: ReactNode;
+}
+interface MobileBottomNavProps {
+    /** Currently active tab ID. */
+    activeTab: string;
+    /** Called when a tab is selected. */
+    onTabChange: (id: string) => void;
+    /** Visual archetype from benchmark. Defaults to 'm3'. */
+    variant?: BottomNavVariant;
+    /** Array of navigation items. */
+    items?: MobileBottomNavItem[];
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Living" Mobile Bottom Navigation.
+ * Fulfills high-end benchmark standards with 5+ visual archetypes and tactile physics.
+ */
+declare function MobileBottomNav({ activeTab, onTabChange, variant, items, sx, }: MobileBottomNavProps): react_jsx_runtime.JSX.Element;
+
+interface TopNavLink {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+interface TopNavProps {
+    /** Optional announcement bar content. */
+    announcement?: ReactNode;
+    /** Main logo element. */
+    logo?: ReactNode;
+    /** Navigation links. */
+    links?: TopNavLink[];
+    /** Right-side action elements (Icons, Buttons). */
+    actions?: ReactNode;
+    /** Main CTA button (e.g., "Start Free Trial"). */
+    cta?: ReactNode;
+    /** Whether the nav is sticky. Defaults to true. */
+    sticky?: boolean;
+    /** Whether the background is transparent (until scroll). */
+    transparent?: boolean;
+    /** Desktop/Tablet search value. */
+    searchValue?: string;
+    /** Search change handler. */
+    onSearchChange?: (value: string) => void;
+    /** Search submit handler. */
+    onSearchSubmit?: (query: string) => void;
+    /** User object for profile display. */
+    user?: {
+        name: string;
+        avatarUrl?: string;
+    };
+    /** Authentication status. */
+    isAuthenticated?: boolean;
+    /** Click handlers. */
+    onLogoClick?: () => void;
+    onAuthClick?: () => void;
+    onProfileClick?: () => void;
+    onCartClick?: () => void;
+    /** Cart item count. */
+    cartCount?: number;
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Living" TopNav primitive.
+ * Fulfills high-end navigation benchmarks with customizable layouts and tactile feedback.
+ */
+declare function TopNav({ announcement, logo, links, actions, cta, sticky, transparent, searchValue, onSearchChange, onSearchSubmit, user, isAuthenticated, onLogoClick, onAuthClick, onProfileClick, onCartClick, cartCount, sx, }: TopNavProps): react_jsx_runtime.JSX.Element;
+
+interface STIScoreChipProps {
+    /** STI score value from 0 to 100. */
+    score: number;
+    /** When true, only the score number is shown. When false, label + score are shown. Defaults to false. */
+    compact?: boolean;
+    /** Whether to show the text label next to the score. Defaults to true when not compact. */
+    showLabel?: boolean;
+}
+
+declare function STIScoreChip({ score, compact, showLabel, }: STIScoreChipProps): react_jsx_runtime.JSX.Element;
+
+interface SellerCardProps {
+    /** Unique identifier for the seller. */
+    sellerId: string;
+    /** Display name of the seller. */
+    name: string;
+    /** Optional URL of the seller's avatar image. */
+    avatarUrl?: string;
+    /** City where the seller is based. */
+    city: string;
+    /** STI score (0–100). */
+    stiScore: number;
+    /** Total number of listings the seller has. */
+    totalListings: number;
+    /** Whether this seller is VAZI featured. Defaults to false. */
+    isVaziFeatured?: boolean;
+    /** Called when the card is tapped/clicked. */
+    onTap?: () => void;
+}
+
+declare function SellerCard({ name, avatarUrl, city, stiScore, totalListings, isVaziFeatured, onTap, }: SellerCardProps): react_jsx_runtime.JSX.Element;
+
+interface STIEvent {
+    type: 'penalty' | 'positive';
+    reason: string;
+    pointsChange: number;
+    timestamp: string;
+}
+interface STIBreakdownPanelProps {
+    /** Overall STI score (0–100). */
+    score: number;
+    /** Order fulfillment rate as fraction (0–1). */
+    fulfillmentRate: number;
+    /** Listing accuracy rate as fraction (0–1). */
+    accuracyRate: number;
+    /** Average response time in hours. */
+    avgResponseHours: number;
+    /** Number of days the seller has been active. */
+    daysActive: number;
+    /** Recent STI events affecting score. */
+    recentEvents: STIEvent[];
+}
+
+declare function STIBreakdownPanel({ score, fulfillmentRate, accuracyRate, avgResponseHours, daysActive, recentEvents, }: STIBreakdownPanelProps): react_jsx_runtime.JSX.Element;
+
+interface ListingCardProps {
+    /** Array of image URLs for the carousel. */
+    images: string[];
+    /** Product title. */
+    title: string;
+    /** Current price. */
+    price: number;
+    /** Original price for discount display. */
+    originalPrice?: number;
+    /** Brand or seller name. */
+    brand?: string;
+    /** Product size metadata. */
+    size?: string;
+    /** Floating badge text (e.g., "Best Seller"). */
+    badge?: string;
+    /** URL for the brand logo overlay. */
+    brandLogoUrl?: string;
+    /** Called when the card is clicked. */
+    onClick?: () => void;
+    /** Called when the "Buy Now" button is clicked. */
+    onBuyClick?: (e: React.MouseEvent) => void;
+    /** Whether the user has liked this item. */
+    isLiked?: boolean;
+    /** Called when the heart icon is clicked. */
+    onLikeClick?: (e: React.MouseEvent) => void;
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Pinterest-Level" Listing Card primitive.
+ * Engineered for absolute geometric harmony and high-fidelity action states.
+ * Reigned in for professional visual sanity (Very Serious standard).
+ */
+declare function ListingCard({ images, title, price, originalPrice, brand, size, badge, brandLogoUrl, onClick, onBuyClick, isLiked, onLikeClick, sx, }: ListingCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Premium Listing Card Skeleton.
+ * Perfectly mirrors the ListingCard geometry and spatial density.
+ */
+declare function ListingCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+interface ListingGridProps {
+    /** Grid cells containing listing cards or any children. */
+    children: ReactNode;
+    /** Number of columns per breakpoint. Defaults to 2 mobile, 2 tablet, 3 small desktop, 4 desktop. */
+    columns?: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    /** Gap between grid cells. Defaults to 16. */
+    gap?: number | string | object;
+    /** Whether the grid is in a loading state. */
+    isLoading?: boolean;
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Specialized Listing Grid for Product Items.
+ * Inherits from MitumbaGrid but defaults to e-commerce standard column counts.
+ */
+declare function ListingGrid({ children, columns, gap, isLoading, sx, }: ListingGridProps): react_jsx_runtime.JSX.Element;
+
+interface ListingImageGalleryProps {
+    /** Array of image URLs for the listing. */
+    images: string[];
+    /** Descriptive title of the listing — used as alt text prefix for accessibility. */
+    title: string;
+}
+
+/**
+ * Premium Listing Image Gallery.
+ * Engineered for absolute geometric harmony and high-fidelity transitions.
+ * Reigned in for professional visual sanity (Very Serious standard).
+ */
+declare function ListingImageGallery({ images, title }: ListingImageGalleryProps): react_jsx_runtime.JSX.Element;
+
+interface ConditionBadgeProps {
+    /**
+     * Condition grade of the listing item.
+     * - A: Like new
+     * - B: Good
+     * - C: Fair
+     */
+    grade: 'A' | 'B' | 'C';
+    /**
+     * Whether to show the text label along with the grade letter.
+     * When false, only the grade letter is shown.
+     * @default false
+     */
+    showLabel?: boolean;
+}
+
+/**
+ * Premium Listing Condition Badge.
+ * Redefined by the benchmarked Chip rules.
+ */
+declare function ConditionBadge({ grade, showLabel }: ConditionBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface PriceTagProps {
+    /** Price in Kenyan Shillings. */
+    priceKes: number;
+    /** Visual size of the tag. */
+    size?: 'small' | 'medium' | 'large';
+    /** Color theme. */
+    color?: 'green' | 'earth' | 'default';
+    /** Whether to show as strikethrough (e.g. original price). */
+    strikethrough?: boolean;
+}
+
+declare function PriceTag({ priceKes, size, color, strikethrough }: PriceTagProps): react_jsx_runtime.JSX.Element;
+
+interface DeliveryBadgeProps {
+    /** Type of delivery service. */
+    type: 'same-city' | 'intercity';
+    /** Estimated delivery time string (e.g., "Today", "3–5 business days"). */
+    estimatedDays?: string;
+    /** Delivery fee in KES. */
+    feeKes?: number;
+}
+
+/**
+ * Premium Delivery Status Badge.
+ * Redefined by the benchmarked Chip rules.
+ */
+declare function DeliveryBadge({ type, estimatedDays }: DeliveryBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface CartItemProps {
+    /** Technical ID of the item. */
+    id: string;
+    /** URL of the item's image. */
+    imageUrl: string;
+    /** Primary product title (e.g., ARTICLE 42453). */
+    title: string;
+    /** Secondary detail (e.g., COLOR GREEN). */
+    subtitle?: string;
+    /** Availability status (e.g., IN STOCK). */
+    status?: string;
+    /** Current price in Kenyan Shillings. */
+    priceKes: number;
+    /** Selected size metadata. */
+    size?: string;
+    /** Current quantity. */
+    quantity?: number;
+    /** Called when the item should be removed. */
+    onRemove?: () => void;
+    /** Called when the quantity is updated. */
+    onQuantityChange?: (newQuantity: number) => void;
+    /** Called when the size is updated. */
+    onSizeChange?: (newSize: string) => void;
+    /** Optional style overrides. */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * Premium "Pinterest-Level" Cart Item primitive.
+ * Fulfills high-end 'CART 02' benchmark standards with systematic columns and airy spacing.
+ */
+declare function CartItem({ imageUrl, title, subtitle, status, priceKes, size, quantity, onRemove, onQuantityChange, onSizeChange, sx, }: CartItemProps): react_jsx_runtime.JSX.Element;
+
+type OrderStatus = 'CREATED' | 'PAYMENT_PENDING' | 'PAID' | 'SELLER_CONFIRMED' | 'SHIPPED' | 'DELIVERED' | 'COMPLETED' | 'CANCELLED' | 'DISPUTED';
+interface OrderEvent {
+    status: OrderStatus;
+    timestamp: string;
+    note?: string;
+}
+interface OrderStatusTimelineProps {
+    /** The current order status. */
+    currentStatus: OrderStatus;
+    /** Array of order event entries. */
+    events: OrderEvent[];
+}
+
+declare function OrderStatusTimeline({ currentStatus, events }: OrderStatusTimelineProps): react_jsx_runtime.JSX.Element;
+
+type EscrowStatus = 'FUNDED' | 'SHIPPED' | 'TIMEOUT_WARNING' | 'RELEASED' | 'REFUNDED';
+interface EscrowStatusBannerProps {
+    /** Current escrow status. */
+    status: EscrowStatus;
+    /** Hours remaining for timeout warning. */
+    hoursRemaining?: number;
+    /** Called when the user confirms delivery. */
+    onConfirmDelivery?: () => void;
+    /** Called when the user raises a dispute. */
+    onRaiseDispute?: () => void;
+}
+
+/**
+ * Banner displaying the current escrow/payment status with contextual actions.
+ */
+declare function EscrowStatusBanner({ status, hoursRemaining, onConfirmDelivery, onRaiseDispute, }: EscrowStatusBannerProps): react_jsx_runtime.JSX.Element;
+
+interface VAZIOutfitItem {
+    /** Unique identifier for the listing. */
+    listingId: string;
+    /** URL of the item's image. */
+    imageUrl: string;
+    /** Type of garment in the outfit. */
+    garmentType: 'top' | 'bottom' | 'shoes' | 'accessory';
+    /** Price in Kenyan Shillings. */
+    priceKes: number;
+    /** Display name of the seller. */
+    sellerName: string;
+}
+interface VAZIOutfitCardProps {
+    /** Name of the outfit (e.g. "Weekend Chill"). */
+    outfitName: string;
+    /** Items that make up the outfit (2–4 items). */
+    items: VAZIOutfitItem[];
+    /** Total price of all items in Kenyan Shillings. */
+    totalPriceKes: number;
+    /** Number of unique sellers involved in this outfit. */
+    sellersCount: number;
+    /** Whether items ship from multiple cities. */
+    isMultiCity?: boolean;
+    /** Called when the card is tapped or clicked. */
+    onTap?: () => void;
+    /** Called when the "Buy this look" button is clicked. */
+    onBuyAll?: () => void;
+}
+
+declare function VAZIOutfitCard({ outfitName, items, totalPriceKes, sellersCount, isMultiCity, onTap, onBuyAll, }: VAZIOutfitCardProps): react_jsx_runtime.JSX.Element;
+
+declare function VAZIOutfitCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+/**
+ * VAZIOutfitCardSkeleton has no props.
+ * Renders an animated skeleton matching VAZIOutfitCard dimensions.
+ */
+interface VAZIOutfitCardSkeletonProps {
+    /** Optional test ID for testing hooks. */
+    'data-testid'?: string;
+}
+
+interface VAZIBadgeProps {
+    /** Size of the badge. Defaults to 'medium'. */
+    size?: 'small' | 'medium';
+}
+
+/**
+ * Premium VAZI Status Badge.
+ * Redefined by the benchmarked Chip rules.
+ */
+declare function VAZIBadge({ size }: VAZIBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface VAZIFeedSectionProps {
+    /** VAZI outfits to display in the section. */
+    outfits: VAZIOutfitCardProps[];
+    /** Whether the outfits are still loading. Shows skeleton cards when true. */
+    loading?: boolean;
+    /** Called when the user presses "See all". */
+    onSeeAll?: () => void;
+}
+
+declare function VAZIFeedSection({ outfits, loading, onSeeAll }: VAZIFeedSectionProps): react_jsx_runtime.JSX.Element;
+
+interface CompleteThisLookPanelProps {
+    /** VAZI outfit suggestions seeded from the current listing. */
+    outfits: VAZIOutfitCardProps[];
+    /** Whether the outfits are still loading. Shows skeleton cards when true. */
+    loading?: boolean;
+}
+
+declare function CompleteThisLookPanel({ outfits, loading }: CompleteThisLookPanelProps): react_jsx_runtime.JSX.Element | null;
+
+interface MitumbaThemeProviderProps {
+    /** Application or story content rendered inside the Mitumba theme. */
+    children: ReactNode;
+    /** Disable CssBaseline when embedding inside an already-normalized host app. */
+    disableCssBaseline?: boolean;
+}
+declare function MitumbaThemeProvider({ children, disableCssBaseline, }: MitumbaThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+declare module '@mui/material/styles' {
+    interface Palette {
+        earth: Palette['primary'];
+    }
+    interface PaletteOptions {
+        earth?: PaletteOptions['primary'];
+    }
+}
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        earth: true;
+    }
+}
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        earth: true;
+    }
+}
+declare const mitumbaTheme: Theme;
+
+export { CartItem, type CartItemProps, CompleteThisLookPanel, type CompleteThisLookPanelProps, ConditionBadge, type ConditionBadgeProps, DeliveryBadge, type DeliveryBadgeProps, type EscrowStatus, EscrowStatusBanner, type EscrowStatusBannerProps, ListingCard, type ListingCardProps, ListingCardSkeleton, ListingGrid, type ListingGridProps, ListingImageGallery, type ListingImageGalleryProps, MitumbaAvatar, type MitumbaAvatarProps, MitumbaBreadcrumb, type MitumbaBreadcrumbProps, MitumbaChip, type MitumbaChipProps, MitumbaDivider, MitumbaGrid, type MitumbaGridProps, MitumbaPrimaryButton, type MitumbaPrimaryButtonProps, MitumbaSelect, type MitumbaSelectProps, MitumbaTextField, type MitumbaTextFieldProps, MitumbaThemeProvider, type MitumbaThemeProviderProps, MobileBottomNav, type MobileBottomNavProps, type OrderEvent, type OrderStatus, OrderStatusTimeline, type OrderStatusTimelineProps, PageContainer, type PageContainerProps, PriceTag, type PriceTagProps, STIBreakdownPanel, type STIBreakdownPanelProps, STIScoreChip, type STIScoreChipProps, SectionHeader, type SectionHeaderProps, SellerCard, type SellerCardProps, TopNav, type TopNavProps, VAZIBadge, type VAZIBadgeProps, VAZIFeedSection, type VAZIFeedSectionProps, VAZIOutfitCard, type VAZIOutfitCardProps, VAZIOutfitCardSkeleton, type VAZIOutfitCardSkeletonProps, type VAZIOutfitItem, mitumbaTheme };