@vtx-ui/react 0.0.1-beta.15 → 0.0.1-beta.17

package/dist/types/components/Widget/types.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
-export type WidgetType = 'metric' | 'info' | 'product' | 'order' | 'list' | 'text' | 'header' | 'carousel' | 'image' | 'testimonial' | 'gridCarousel' | 'navbar' | 'contentBlock';
+import { PricingTier } from '../../widgets/PricingTable';
+import { FAQItem, FAQCategory } from '../../widgets/FAQ';
+import { ProductCoreData } from '../../widgets/ProductCard';
+export type WidgetType = 'metric' | 'info' | 'product' | 'order' | 'order-confirmation' | 'order-details' | 'list' | 'text' | 'header' | 'carousel' | 'image' | 'testimonial' | 'gridCarousel' | 'navbar' | 'contentBlock' | 'errorPage' | 'emptyState' | 'pricing-table' | 'faq' | 'contact-form' | 'stat' | 'progress' | 'comparison';
 /**
  * WidgetTheme - all available theme options
  */
-export type WidgetTheme = 'minimal' | 'modern' | 'professional' | 'compact' | 'detailed' | 'card' | 'inline' | 'hero' | 'base' | 'two-row' | 'centered' | 'editorial' | 'ecommerce' | 'creative' | 'luxury';
+export type WidgetTheme = 'minimal' | 'modern' | 'professional' | 'compact' | 'detailed' | 'card' | 'inline' | 'hero' | 'base' | 'two-row' | 'centered' | 'editorial' | 'ecommerce' | 'creative' | 'luxury' | 'playful' | 'technical' | 'elegant' | 'list';
 export type GridConfig = {
     mobile?: number;
     tablet?: number;
@@ -99,10 +101,24 @@ export interface ProductWidgetData extends BaseWidgetData {
     price: number | string;
     originalPrice?: number | string;
     category?: string;
+    categoryHref?: string;
+    categoryUrl?: string;
     rating?: number;
     reviews?: number;
     inStock?: boolean;
     tags?: string[];
+    imageAlt?: string;
+    weight?: number;
+    units?: string;
+    discount?: string;
+    quantity?: number;
+    initialQuantity?: number;
+    featured?: boolean;
+    featuredText?: string;
+    href?: string;
+    url?: string;
+    currency?: string;
+    readonly?: boolean;
 }
 /**
  * Product Widget Settings - Display and layout options
@@ -113,6 +129,34 @@ export interface ProductWidgetSettings extends BaseWidgetSettings {
     showTags?: boolean;
     imagePosition?: 'top' | 'left' | 'right';
     cardStyle?: 'elevated' | 'outlined' | 'flat';
+    showWishlist?: boolean;
+    isWishlisted?: boolean;
+    cartIcon?: React.ReactNode;
+    wishlistIcon?: React.ReactNode;
+    wishlistFilledIcon?: React.ReactNode;
+    quickViewIcon?: React.ReactNode;
+    addToCartButtonVariant?: string;
+    incrementButtonVariant?: string;
+    decrementButtonVariant?: string;
+    quickViewButtonVariant?: string;
+    linkComponent?: React.ComponentType<any>;
+    imageComponent?: React.ElementType;
+    fallbackImage?: string;
+    priority?: boolean;
+    onAddToCart?: (data: ProductCoreData, quantity: number) => void | Promise<void>;
+    onIncrementCart?: (data: ProductCoreData, quantity: number) => void | Promise<void>;
+    onDecrementCart?: (data: ProductCoreData, quantity: number) => void | Promise<void>;
+    onWishlist?: () => void;
+    onQuickView?: () => void;
+    onClick?: () => void;
+    onCategoryClick?: () => void;
+    loading?: boolean;
+    actionLoading?: boolean;
+    featuredBadgeVariant?: 'filled' | 'outlined' | 'light';
+    featuredBadgeColor?: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
+    discountBadgeVariant?: 'filled' | 'outlined' | 'light';
+    discountBadgeColor?: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
+    wishlistButtonColor?: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
 }
 /**
  * Order Widget Data - Order information
@@ -162,6 +206,153 @@ export interface OrderWidgetSettings extends BaseWidgetSettings {
     showAddress?: boolean;
     showBreakdown?: boolean;
     compact?: boolean;
+    /**
+     * If true, shows skeleton loading state
+     * @default false
+     */
+    loading?: boolean;
+}
+/**
+ * Order Confirmation Widget Data - Complete order confirmation information
+ */
+export interface OrderConfirmationWidgetData {
+    orderId: string;
+    orderNumber?: string;
+    orderDate?: string;
+    status?: 'pending' | 'processing' | 'confirmed' | 'delivered' | 'cancelled';
+    statusText?: string;
+    headerText?: string;
+    headerSubtitle?: string;
+    customerEmail?: string;
+    customerPhone?: string;
+    shippingAddress: {
+        name: string;
+        addressLine1: string;
+        addressLine2?: string;
+        city: string;
+        state: string;
+        zipCode: string;
+        phone?: string;
+    };
+    billingAddress?: {
+        name: string;
+        addressLine1: string;
+        addressLine2?: string;
+        city: string;
+        state: string;
+        zipCode: string;
+        phone?: string;
+    };
+    items: Array<{
+        id: string;
+        name: string;
+        image?: string;
+        quantity: number;
+        price: number;
+        variant?: string;
+    }>;
+    subtotal: number;
+    shippingCost?: number;
+    tax?: number;
+    discount?: number;
+    total: number;
+    currency?: string;
+    paymentMethod?: string;
+    transactionId?: string;
+    estimatedDelivery?: string;
+    trackingNumber?: string;
+    actions?: {
+        onDownloadInvoice?: (orderId: string) => void;
+        onContinueShopping?: () => void;
+        onTrackOrder?: (orderId: string) => void;
+        onViewDetails?: (orderId: string) => void;
+        onContactSupport?: (orderId: string) => void;
+        onShareOrder?: (orderId: string) => void;
+    };
+}
+/**
+ * Order Confirmation Widget Settings - Display configuration
+ */
+export interface OrderConfirmationWidgetSettings extends BaseWidgetSettings {
+    showActions?: boolean;
+    hideDownloadInvoice?: boolean;
+    hideContinueShopping?: boolean;
+    hideTrackOrder?: boolean;
+    hideContactSupport?: boolean;
+    loading?: boolean;
+}
+/**
+ * Order Details Widget Data - Complete order details information
+ */
+export interface OrderDetailsWidgetData {
+    orderId: string;
+    orderNumber?: string;
+    orderDate: string;
+    status: 'pending' | 'processing' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled' | 'returned';
+    statusText?: string;
+    customerName?: string;
+    customerEmail?: string;
+    customerPhone?: string;
+    shippingAddress: {
+        name: string;
+        addressLine1: string;
+        addressLine2?: string;
+        city: string;
+        state: string;
+        zipCode: string;
+        phone?: string;
+    };
+    billingAddress?: {
+        name: string;
+        addressLine1: string;
+        addressLine2?: string;
+        city: string;
+        state: string;
+        zipCode: string;
+        phone?: string;
+    };
+    items: Array<{
+        id: string;
+        name: string;
+        image?: string;
+        quantity: number;
+        price: number;
+        variant?: string;
+    }>;
+    subtotal: number;
+    shippingCost?: number;
+    tax?: number;
+    discount?: number;
+    total: number;
+    currency?: string;
+    couponCode?: string;
+    paymentMethod?: string;
+    paymentStatus?: 'pending' | 'paid' | 'failed' | 'refunded';
+    transactionId?: string;
+    estimatedDelivery?: string;
+    deliveredDate?: string;
+    trackingNumber?: string;
+    trackingUrl?: string;
+    carrier?: string;
+    actions?: {
+        onDownloadInvoice?: (orderId: string) => void;
+        onTrackOrder?: (orderId: string) => void;
+        onCancelOrder?: (orderId: string) => void;
+        onReturnOrder?: (orderId: string) => void;
+        onReorder?: (orderId: string) => void;
+        onContactSupport?: (orderId: string) => void;
+        onWriteReview?: (orderId: string) => void;
+    };
+}
+/**
+ * Order Details Widget Settings - Display configuration
+ */
+export interface OrderDetailsWidgetSettings extends BaseWidgetSettings {
+    showActions?: boolean;
+    allowCancel?: boolean;
+    allowReturn?: boolean;
+    allowReorder?: boolean;
+    loading?: boolean;
 }
 /**
  * List Widget Data - List content
@@ -323,6 +514,7 @@ export interface CarouselWidgetSettings extends BaseWidgetSettings {
     buttonVariant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning';
 }
 import type { ButtonProps } from '../Button/Button';
+import { StatCardData, StatCardSettings, ProgressCardData, ProgressCardSettings, ComparisonCardData, ComparisonCardSettings } from '../../widgets/DashboardCard';
 /**
  * Image Widget Data - Image content
  */
@@ -444,29 +636,79 @@ export interface NavbarWidgetSettings extends BaseWidgetSettings {
     mobileOnly?: boolean;
 }
 /**
- * Grid Carousel Widget Data - Carousel items
+ * Grid Carousel Widget Data - Theme-based carousel items
+ *
+ * @theme 'product' - Displays array of product widgets
+ * @theme 'base' - Displays array of custom React nodes (children)
  */
 export interface GridCarouselWidgetData {
-    items: React.ReactNode[];
+    /**
+     * Theme determines the type of items displayed
+     * - 'product': Display product widgets from products array
+     * - 'base': Display custom React nodes from items array
+     */
+    theme: 'product' | 'base';
+    /**
+     * Product data array (used when theme='product')
+     */
+    products?: ProductWidgetData[];
+    /**
+     * Custom React nodes array (used when theme='base')
+     */
+    items?: React.ReactNode[];
 }
 /**
- * Grid Carousel Widget Settings - Carousel configuration
+ * Grid Carousel Widget Settings - Carousel configuration and appearance
  */
-export interface GridCarouselWidgetSettings {
+export interface GridCarouselWidgetSettings extends BaseWidgetSettings {
+    /**
+     * Number of items to show per view at different breakpoints
+     */
     itemsPerView?: {
         mobile?: number;
         tablet?: number;
         desktop?: number;
     };
+    /**
+     * Gap between grid items (px or CSS value)
+     */
     gap?: number | string;
+    /**
+     * Enable automatic sliding
+     */
     autoplay?: boolean;
+    /**
+     * Delay between auto-slides in milliseconds
+     */
     autoplayDelay?: number;
+    /**
+     * Show navigation arrows
+     */
     showNavigation?: boolean;
+    /**
+     * Show pagination dots
+     */
     showPagination?: boolean;
+    /**
+     * Scroll behavior: 'page' scrolls by full page, 'item' scrolls by one item
+     */
     scrollBehavior?: 'page' | 'item';
+    /**
+     * Apply border radius to container
+     */
     borderRadius?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
+    /**
+     * Hide navigation on mobile devices
+     */
+    hideNavigationOnMobile?: boolean;
+    /**
+     * Container background color
+     */
+    backgroundColor?: string;
+    /**
+     * Product widget settings (used when theme='product')
+     */
+    productSettings?: Omit<ProductWidgetSettings, 'className' | 'style'>;
 }
 export interface ContentBlockWidgetData extends Omit<BaseWidgetData, 'metadata'> {
     media?: {
@@ -574,6 +816,55 @@ export interface ContentBlockWidgetData extends Omit<BaseWidgetData, 'metadata'>
         icon?: React.ReactNode;
     };
 }
+export interface ContentBlockWidgetSettings extends Omit<BaseWidgetSettings, 'variant'> {
+    variant?: 'minimal' | 'card' | 'elevated' | 'outlined' | 'bordered';
+    layout?: 'media-left' | 'media-right' | 'split-equal' | 'media-top' | 'media-bottom' | 'media-background' | 'centered' | 'centered-media-top' | 'grid-2col' | 'grid-3col' | 'sidebar-left' | 'sidebar-right';
+    mediaWidth?: '20%' | '30%' | '40%' | '50%' | '60%' | '70%' | 'auto';
+    contentWidth?: 'narrow' | 'medium' | 'wide' | 'full';
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    imageWidth?: string;
+    imageHeight?: string;
+    imageMaxWidth?: string;
+    imageMaxHeight?: string;
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    customIconSize?: string;
+    contentAlign?: 'left' | 'center' | 'right' | 'justify';
+    verticalAlign?: 'start' | 'center' | 'end' | 'stretch';
+    rounded?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    shadow?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'inner';
+    border?: boolean | 'all' | 'left' | 'right' | 'top' | 'bottom';
+    background?: {
+        color?: string;
+        gradient?: string;
+        opacity?: number;
+    };
+    overlay?: {
+        enabled: boolean;
+        color?: string;
+        opacity?: number;
+        blur?: number;
+        gradient?: 'top' | 'bottom' | 'center' | 'none';
+    };
+    grid?: {
+        columns?: number;
+        gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        minItemWidth?: string;
+    };
+    responsive?: {
+        stackOnMobile?: boolean;
+        stackOnTablet?: boolean;
+        reverseOnMobile?: boolean;
+        hideMediaOnMobile?: boolean;
+    };
+    hover?: {
+        enabled?: boolean;
+        effect?: 'lift' | 'glow' | 'scale' | 'none';
+        mediaZoom?: boolean;
+    };
+    animate?: boolean;
+    animationType?: 'fade' | 'slide-up' | 'slide-left' | 'slide-right' | 'zoom' | 'none';
+}
 /**
  * Grid Widget Data - Collection of widgets
  */
@@ -587,8 +878,238 @@ export interface GridWidgetSettings {
     gap?: 'none' | 'sm' | 'md' | 'lg';
     grid?: GridConfig;
 }
-export type WidgetData = MetricWidgetData | InfoWidgetData | ProductWidgetData | OrderWidgetData | ListWidgetData | TextWidgetData | HeaderWidgetData | CarouselWidgetData | ImageWidgetData | TestimonialWidgetData | GridCarouselWidgetData | NavbarWidgetData | ContentBlockWidgetData | GridWidgetData;
-export type WidgetSettings = MetricWidgetSettings | InfoWidgetSettings | ProductWidgetSettings | OrderWidgetSettings | ListWidgetSettings | TextWidgetSettings | HeaderWidgetSettings | CarouselWidgetSettings | ImageWidgetSettings | TestimonialWidgetSettings | GridCarouselWidgetSettings | NavbarWidgetSettings | GridWidgetSettings | BaseWidgetSettings;
+/**
+ * Error Page Widget Data - Error page information
+ */
+export interface ErrorPageWidgetData {
+    /**
+     * Error code (e.g., '404', '500', '403', '401', '503', 'search')
+     * @default '404'
+     */
+    errorCode?: string;
+    /**
+     * Main error title
+     * @example 'Page Not Found'
+     */
+    title?: string;
+    /**
+     * Error message description
+     * @example "Oops! The page you're looking for doesn't exist."
+     */
+    message?: string;
+    /**
+     * Helpful suggestion or next steps
+     * @example 'Try checking the URL or return to the homepage.'
+     */
+    suggestion?: string;
+    /**
+     * Call-to-action buttons/links
+     * @example
+     * actions: [
+     *   { variant: 'primary', label: 'Go Home', href: '/', icon: 'home' },
+     *   { variant: 'outline', label: 'Go Back', onClick: () => history.back(), icon: 'back' }
+     * ]
+     */
+    actions?: Array<{
+        variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning';
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: 'home' | 'back' | 'refresh';
+        external?: boolean;
+    }>;
+    /**
+     * @deprecated Use actions array instead
+     */
+    primaryAction?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: 'home' | 'back' | 'refresh';
+    };
+    /**
+     * @deprecated Use actions array instead
+     */
+    secondaryAction?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: 'home' | 'back' | 'refresh';
+    };
+    /**
+     * Custom icon component to display
+     */
+    customIcon?: React.ReactNode;
+    /**
+     * Additional information or help text
+     */
+    additionalInfo?: string;
+}
+/**
+ * Error Page Widget Settings - Display configuration
+ */
+export interface ErrorPageWidgetSettings extends BaseWidgetSettings {
+    /**
+     * Theme for the error page
+     * - minimal: Clean, simple design
+     * - modern: Gradient backgrounds, bold typography
+     * - professional: Formal, business-appropriate
+     * - playful: Fun, energetic design
+     * - technical: Terminal/code-like appearance
+     * - elegant: Sophisticated, refined design
+     * @default 'modern'
+     */
+    theme?: 'minimal' | 'modern' | 'professional' | 'playful' | 'technical' | 'elegant';
+    /**
+     * Show illustration/icon
+     * @default true
+     */
+    showIllustration?: boolean;
+    /**
+     * Center the content
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Take full viewport height
+     * @default true
+     */
+    fullHeight?: boolean;
+    /**
+     * Custom background color or gradient
+     * Overrides theme default background
+     * @example 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+     * @example '#f5f5f5'
+     */
+    backgroundColor?: string;
+}
+/**
+ * Empty State Types - Different contexts for empty states
+ */
+export type EmptyStateType = 'general' | 'search' | 'data' | 'notification' | 'cart' | 'file';
+/**
+ * EmptyStateWidgetData - Data for empty state widget
+ *
+ * @example
+ * const emptyCartData: EmptyStateWidgetData = {
+ *   type: 'cart',
+ *   title: 'Your Cart is Empty',
+ *   message: 'Add items to your cart to get started',
+ *   actions: [
+ *     { label: 'Browse Products', href: '/products', icon: 'search', variant: 'primary' },
+ *     { label: 'View Wishlist', href: '/wishlist', variant: 'outline' }
+ *   ]
+ * };
+ */
+export interface EmptyStateWidgetData {
+    /**
+     * Type of empty state (affects default icon and messaging)
+     * @default 'general'
+     */
+    type?: EmptyStateType;
+    /**
+     * Main title
+     * If not provided, uses default based on type
+     */
+    title?: string;
+    /**
+     * Description message
+     * If not provided, uses default based on type
+     */
+    message?: string;
+    /**
+     * Custom icon to display
+     * If not provided, uses default icon based on type
+     */
+    customIcon?: React.ReactNode;
+    /**
+     * Action buttons
+     */
+    actions?: Array<{
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: 'add' | 'plus' | 'refresh' | 'search';
+        variant?: 'primary' | 'outline' | 'ghost';
+        external?: boolean;
+    }>;
+    /**
+     * Additional information text (shown below actions)
+     */
+    additionalInfo?: string;
+}
+/**
+ * EmptyStateWidgetSettings - Settings for empty state widget
+ */
+export interface EmptyStateWidgetSettings extends BaseWidgetSettings {
+    /**
+     * Visual theme
+     * @default 'modern'
+     */
+    theme?: 'minimal' | 'modern' | 'professional' | 'playful' | 'technical' | 'elegant';
+    /**
+     * Color variant
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'danger' | 'warning' | 'info';
+    /**
+     * Whether to show illustration/icon
+     * @default true
+     */
+    showIllustration?: boolean;
+    /**
+     * Whether to center content
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Compact mode (smaller spacing and icons)
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Custom background color or gradient
+     * Overrides theme default background
+     * @example 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+     * @example '#f5f5f5'
+     */
+    backgroundColor?: string;
+}
+export interface PricingTableWidgetData {
+    tiers: PricingTier[];
+}
+export interface PricingTableWidgetSettings extends BaseWidgetSettings {
+    columns?: 2 | 3 | 4;
+}
+export interface FAQWidgetData {
+    title?: string;
+    subtitle?: string;
+    items: FAQItem[] | FAQCategory[];
+}
+export interface FAQWidgetSettings extends BaseWidgetSettings {
+    allowMultiple?: boolean;
+}
+export interface ContactFormWidgetData {
+    title?: string;
+    description?: string;
+    submitLabel?: string;
+    successMessage?: string;
+    fields?: {
+        nameLabel?: string;
+        emailLabel?: string;
+        phoneLabel?: string;
+        messageLabel?: string;
+        showPhone?: boolean;
+        showCompany?: boolean;
+        companyLabel?: string;
+    };
+    onSubmit?: (data: Record<string, any>) => Promise<void> | void;
+}
+export interface ContactFormWidgetSettings extends BaseWidgetSettings {
+    card?: boolean;
+}
+export type WidgetData = MetricWidgetData | InfoWidgetData | ProductWidgetData | OrderWidgetData | OrderConfirmationWidgetData | OrderDetailsWidgetData | ListWidgetData | TextWidgetData | HeaderWidgetData | CarouselWidgetData | ImageWidgetData | TestimonialWidgetData | GridCarouselWidgetData | NavbarWidgetData | ContentBlockWidgetData | GridWidgetData | ErrorPageWidgetData | EmptyStateWidgetData | PricingTableWidgetData | FAQWidgetData | ContactFormWidgetData | StatCardData | ProgressCardData | ComparisonCardData;
+export type WidgetSettings = MetricWidgetSettings | InfoWidgetSettings | ProductWidgetSettings | OrderWidgetSettings | OrderConfirmationWidgetSettings | OrderDetailsWidgetSettings | ListWidgetSettings | TextWidgetSettings | HeaderWidgetSettings | CarouselWidgetSettings | ImageWidgetSettings | TestimonialWidgetSettings | GridCarouselWidgetSettings | NavbarWidgetSettings | GridWidgetSettings | ContentBlockWidgetSettings | ErrorPageWidgetSettings | EmptyStateWidgetSettings | PricingTableWidgetSettings | FAQWidgetSettings | ContactFormWidgetSettings | StatCardSettings | ProgressCardSettings | ComparisonCardSettings | BaseWidgetSettings;
 /**
  * Widget Configuration - Combines type, data, and settings
  *
@@ -627,3 +1148,4 @@ export interface WidgetConfig {
     /** @deprecated Use settings */
     grid?: GridConfig;
 }
+//# sourceMappingURL=types.d.ts.map