@vtx-ui/react 0.0.1-beta.12 → 0.0.1-beta.14

package/dist/types/stories/widgets/InfoText.stories.d.ts

@@ -1,30 +1,12 @@
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../..").InfoTextBaseProps & import("react").RefAttributes<HTMLDivElement>>;
-    subcomponents: {
-        Base: import("react").FC<import("../..").InfoTextBaseProps & import("react").RefAttributes<HTMLDivElement>>;
-        Stat: import("react").FC<import("../..").InfoTextStatProps & import("react").RefAttributes<HTMLDivElement>>;
-        Feature: import("react").FC<import("../..").InfoTextFeatureProps & import("react").RefAttributes<HTMLDivElement>>;
-        Compact: import("react").FC<import("../..").InfoTextCompactProps & import("react").RefAttributes<HTMLDivElement>>;
-        Vertical: import("react").FC<import("../..").InfoTextVerticalProps & import("react").RefAttributes<HTMLDivElement>>;
-    };
+    component: import("react").FC<import("../..").WidgetProps>;
 };
 export default _default;
 export declare const Base: () => import("react/jsx-runtime").JSX.Element;
-export declare const BaseVariants: () => import("react/jsx-runtime").JSX.Element;
-export declare const BaseWithoutSubtext: () => import("react/jsx-runtime").JSX.Element;
-export declare const BaseWithoutCircle: () => import("react/jsx-runtime").JSX.Element;
 export declare const Stat: () => import("react/jsx-runtime").JSX.Element;
-export declare const StatVariants: () => import("react/jsx-runtime").JSX.Element;
-export declare const StatWithoutIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const StatWithoutCircle: () => import("react/jsx-runtime").JSX.Element;
 export declare const Feature: () => import("react/jsx-runtime").JSX.Element;
-export declare const FeatureVariants: () => import("react/jsx-runtime").JSX.Element;
 export declare const Compact: () => import("react/jsx-runtime").JSX.Element;
-export declare const CompactVariants: () => import("react/jsx-runtime").JSX.Element;
-export declare const Vertical: () => import("react/jsx-runtime").JSX.Element;
-export declare const VerticalVariants: () => import("react/jsx-runtime").JSX.Element;
-export declare const AllIconVariants: () => import("react/jsx-runtime").JSX.Element;
 export declare const MixedUsage: () => import("react/jsx-runtime").JSX.Element;
 export declare const GridLayout: () => import("react/jsx-runtime").JSX.Element;
 export declare const FeatureGrid: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/stories/widgets/MetricCard.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Widget } from '../../components/Widget';
+declare const meta: Meta<typeof Widget>;
+export default meta;
+type Story = StoryObj<typeof Widget>;
+export declare const Base: Story;
+export declare const BaseWithIcon: Story;
+export declare const BaseNoTrend: Story;
+export declare const CompactPrimary: Story;
+export declare const CompactSuccess: Story;
+export declare const CompactWarning: Story;
+export declare const CompactDanger: Story;
+export declare const DetailedWithProgress: Story;
+export declare const DetailedWithIcon: Story;
+export declare const DetailedComplete: Story;
+export declare const ChartLine: Story;
+export declare const ChartBar: Story;
+export declare const ChartSecondary: Story;
+export declare const ChartDanger: Story;
+export declare const FilledStyles: Story;
+export declare const FilledDetailed: Story;
+export declare const FilledCharts: Story;
+export declare const AdminDashboard: Story;
+export declare const DetailedDashboard: Story;
+export declare const ChartDashboard: Story;
+export declare const MixedDashboard: Story;
+export declare const MixedDashboardWithoutTrend: Story;

package/dist/types/stories/widgets/OrderCard.stories.d.ts

@@ -1,13 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import OrderCard from '../../widgets/OrderCard/OrderCard';
-declare const meta: Meta<typeof OrderCard>;
+import Widget from '../../components/Widget/Widget';
+declare const meta: Meta<typeof Widget>;
 export default meta;
-type Story = StoryObj<typeof OrderCard>;
+type Story = StoryObj<typeof Widget>;
 export declare const Delivered: Story;
-export declare const Processing: Story;
-export declare const Cancelled: Story;
-export declare const LongProductName: Story;
-export declare const Pending: Story;
-export declare const NoImage: Story;
-export declare const MultipleItems: Story;
 export declare const OrdersList: Story;

package/dist/types/stories/widgets/OrderConfirmation.stories.d.ts

@@ -1,36 +1,13 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../..").OrderConfirmationProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: import("react").FC<import("../..").WidgetProps>;
     parameters: {
         layout: string;
     };
     tags: string[];
-    argTypes: {
-        onDownloadInvoice: {
-            action: string;
-        };
-        onContinueShopping: {
-            action: string;
-        };
-        onTrackOrder: {
-            action: string;
-        };
-        onViewDetails: {
-            action: string;
-        };
-        onContactSupport: {
-            action: string;
-        };
-        onShareOrder: {
-            action: string;
-        };
-    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithDiscount: Story;
-export declare const MultipleItems: Story;
-export declare const MinimalInfo: Story;
-export declare const Delivered: Story;

package/dist/types/stories/widgets/OrderDetails.stories.d.ts

@@ -1,11 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { OrderDetails } from '../../widgets/OrderDetails/OrderDetails';
-declare const meta: Meta<typeof OrderDetails>;
+import Widget from '../../components/Widget/Widget';
+declare const meta: Meta<typeof Widget>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Widget>;
 export declare const Processing: Story;
-export declare const Shipped: Story;
 export declare const Delivered: Story;
-export declare const Pending: Story;
-export declare const Cancelled: Story;
-export declare const MultipleItems: Story;

package/dist/types/stories/widgets/ProductCard.stories.d.ts

@@ -1,25 +1,11 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: {
-        Base: React.FC<import("../..").ProductCardProps & React.RefAttributes<HTMLDivElement>>;
-        Wide: React.FC<import("../..").ProductCardWideProps & React.RefAttributes<HTMLDivElement>>;
-        Minimal: React.FC<import("../..").ProductCardProps & React.RefAttributes<HTMLDivElement>>;
-    };
+    component: React.FC<import("../..").WidgetProps>;
 };
 export default _default;
 export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithWishlist: () => import("react/jsx-runtime").JSX.Element;
 export declare const FeaturedProduct: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithQuickView: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithInitialQuantity: () => import("react/jsx-runtime").JSX.Element;
-export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithoutCategory: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithoutWeight: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithoutRating: () => import("react/jsx-runtime").JSX.Element;
 export declare const ProductGrid: () => import("react/jsx-runtime").JSX.Element;
 export declare const Interactive: () => import("react/jsx-runtime").JSX.Element;
-export declare const WideVariant: () => import("react/jsx-runtime").JSX.Element;
-export declare const WideVariantImageRight: () => import("react/jsx-runtime").JSX.Element;
-export declare const MinimalVariant: () => import("react/jsx-runtime").JSX.Element;
-export declare const AllVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/theme/ThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tokens, CustomTokens } from './tokens';
+import type { ToastPosition } from '../components/Toast/types';
 export type Size = 'sm' | 'md' | 'lg';
 export type ColorContrast = 'light' | 'dark';
 export interface ColorContrastConfig {
@@ -10,12 +11,15 @@ export interface ColorContrastConfig {
     danger?: ColorContrast;
     success?: ColorContrast;
     warning?: ColorContrast;
+    info?: ColorContrast;
 }
 export interface Theme {
     tokens: Tokens;
     mode: 'light' | 'dark';
     defaultSize: Size;
     colorContrast: ColorContrastConfig;
+    linkComponent?: React.ElementType;
+    imageComponent?: React.ElementType;
 }
 export interface ThemeContextValue {
     theme: Theme;
@@ -33,6 +37,16 @@ export interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement>
     defaultSize?: Size;
     /** Color contrast configuration - specify if variant backgrounds are light or dark */
     colorContrast?: ColorContrastConfig;
+    /** Toast container position */
+    toastPosition?: ToastPosition;
+    /** Maximum number of toasts to display at once */
+    toastLimit?: number;
+    /** Disable toast notifications globally */
+    disableToasts?: boolean;
+    /** Default link component for routing (e.g., React Router Link, Next.js Link) */
+    linkComponent?: React.ElementType;
+    /** Default image component for images (e.g., Next.js Image, native img) */
+    imageComponent?: React.ElementType;
 }
 declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
 export { ThemeProvider };

package/dist/types/utils/parseClass.d.ts

@@ -1 +1,3 @@
 export declare function parseClass(className: string): string;
+export declare function initGlobalStyles(): void;
+export declare function cleanupGlobalStyles(): void;

package/dist/types/widgets/DashboardCard/DashboardCard.d.ts

@@ -0,0 +1,275 @@
+import React from 'react';
+import './DashboardCard.css';
+export type DashboardCardTheme = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+export type DashboardCardSize = 'sm' | 'md' | 'lg';
+interface BaseDashboardCardProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    loading?: boolean;
+    size?: DashboardCardSize;
+    variant?: 'outlined' | 'filled';
+}
+interface TrendData {
+    value: number;
+    label?: string;
+    isPositive?: boolean;
+}
+export interface StatCardData {
+    value: string | number;
+    label: string;
+    icon?: React.ReactNode;
+    trend?: TrendData;
+    subtitle?: string;
+}
+export interface StatCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    showIcon?: boolean;
+    showTrend?: boolean;
+    valueSize?: 'sm' | 'md' | 'lg';
+    layout?: 'horizontal' | 'vertical';
+}
+export interface StatCardProps extends BaseDashboardCardProps {
+    type: 'stat';
+    data: StatCardData;
+    settings?: StatCardSettings;
+}
+export interface ProgressCardData {
+    current: number;
+    target: number;
+    label: string;
+    icon?: React.ReactNode;
+    unit?: string;
+    subtitle?: string;
+}
+export interface ProgressCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    showPercentage?: boolean;
+    showValues?: boolean;
+    progressType?: 'bar' | 'circle';
+    status?: 'on-track' | 'at-risk' | 'exceeded' | 'behind';
+}
+export interface ProgressCardProps extends BaseDashboardCardProps {
+    type: 'progress';
+    data: ProgressCardData;
+    settings?: ProgressCardSettings;
+}
+export interface ComparisonCardData {
+    label: string;
+    items: Array<{
+        label: string;
+        value: string | number;
+        trend?: TrendData;
+        icon?: React.ReactNode;
+    }>;
+}
+export interface ComparisonCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    layout?: 'horizontal' | 'vertical';
+    showTrends?: boolean;
+    showDivider?: boolean;
+}
+export interface ComparisonCardProps extends BaseDashboardCardProps {
+    type: 'comparison';
+    data: ComparisonCardData;
+    settings?: ComparisonCardSettings;
+}
+export interface ActivityCardData {
+    title: string;
+    onViewAll?: () => void;
+    activities: Array<{
+        id: string;
+        label: string;
+        value?: string | number;
+        timestamp?: string;
+        icon?: React.ReactNode;
+        status?: 'success' | 'warning' | 'danger' | 'info';
+    }>;
+}
+export interface ActivityCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    maxItems?: number;
+    showTimestamps?: boolean;
+    showIcons?: boolean;
+    compact?: boolean;
+}
+export interface ActivityCardProps extends BaseDashboardCardProps {
+    type: 'activity';
+    data: ActivityCardData;
+    settings?: ActivityCardSettings;
+}
+export interface OrderCardData {
+    orderId: string;
+    status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
+    amount: number;
+    currency?: string;
+    customer?: string;
+    items?: number;
+    date?: string;
+    icon?: React.ReactNode;
+}
+export interface OrderCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    showCustomer?: boolean;
+    showItems?: boolean;
+    showDate?: boolean;
+    layout?: 'compact' | 'detailed';
+}
+export interface OrderCardProps extends BaseDashboardCardProps {
+    type: 'order';
+    data: OrderCardData;
+    settings?: OrderCardSettings;
+}
+export interface UserCardData {
+    name: string;
+    role?: string;
+    department?: string;
+    avatar?: React.ReactNode;
+    status?: 'active' | 'away' | 'offline';
+    metrics?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+}
+export interface UserCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    showStatus?: boolean;
+    showMetrics?: boolean;
+    layout?: 'horizontal' | 'vertical';
+    avatarSize?: 'sm' | 'md' | 'lg';
+}
+export interface UserCardProps extends BaseDashboardCardProps {
+    type: 'user';
+    data: UserCardData;
+    settings?: UserCardSettings;
+}
+export interface RevenueCardData {
+    amount: number;
+    currency?: string;
+    label: string;
+    period?: string;
+    trend?: TrendData;
+    icon?: React.ReactNode;
+    breakdown?: Array<{
+        label: string;
+        value: number;
+        percentage?: number;
+    }>;
+}
+export interface RevenueCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    showTrend?: boolean;
+    showBreakdown?: boolean;
+    showPeriod?: boolean;
+    format?: 'compact' | 'detailed';
+}
+export interface RevenueCardProps extends BaseDashboardCardProps {
+    type: 'revenue';
+    data: RevenueCardData;
+    settings?: RevenueCardSettings;
+}
+export interface AlertCardData {
+    title: string;
+    message: string;
+    severity: 'info' | 'warning' | 'error' | 'success';
+    icon?: React.ReactNode;
+    timestamp?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+}
+export interface AlertCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    showIcon?: boolean;
+    showTimestamp?: boolean;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+export interface AlertCardProps extends BaseDashboardCardProps {
+    type: 'alert';
+    data: AlertCardData;
+    settings?: AlertCardSettings;
+}
+export interface RankingCardData {
+    title: string;
+    items: Array<{
+        rank: number;
+        label: string;
+        value: string | number;
+        icon?: React.ReactNode;
+        percentage?: number;
+    }>;
+}
+export interface RankingCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    maxItems?: number;
+    showPercentages?: boolean;
+    showBars?: boolean;
+    highlightTop?: number;
+}
+export interface RankingCardProps extends BaseDashboardCardProps {
+    type: 'ranking';
+    data: RankingCardData;
+    settings?: RankingCardSettings;
+}
+export interface MetricCardData {
+    value: string | number;
+    label: string;
+    icon?: React.ReactNode;
+    trend?: TrendData;
+    subtitle?: string;
+    chartData?: Array<number>;
+    chartType?: 'line' | 'bar';
+    targetValue?: number;
+    comparisonValue?: string | number;
+    comparisonLabel?: string;
+}
+export interface MetricCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    showChart?: boolean;
+    showTrend?: boolean;
+    showComparison?: boolean;
+    chartHeight?: number;
+    valueSize?: 'sm' | 'md' | 'lg';
+}
+export interface MetricCardProps extends BaseDashboardCardProps {
+    type: 'metric';
+    data: MetricCardData;
+    settings?: MetricCardSettings;
+}
+export interface StatusCardData {
+    service: string;
+    status: 'online' | 'offline' | 'degraded' | 'maintenance';
+    icon?: React.ReactNode;
+    uptime?: string;
+    lastChecked?: string;
+    metrics?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+}
+export interface StatusCardSettings {
+    theme?: DashboardCardTheme;
+    variant?: 'outlined' | 'filled';
+    showMetrics?: boolean;
+    showUptime?: boolean;
+    showLastChecked?: boolean;
+    layout?: 'compact' | 'detailed';
+}
+export interface StatusCardProps extends BaseDashboardCardProps {
+    type: 'status';
+    data: StatusCardData;
+    settings?: StatusCardSettings;
+}
+export type DashboardCardProps = StatCardProps | ProgressCardProps | ComparisonCardProps | ActivityCardProps | OrderCardProps | UserCardProps | RevenueCardProps | AlertCardProps | RankingCardProps | MetricCardProps | StatusCardProps;
+export declare const DashboardCard: <T extends DashboardCardProps>(props: T & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
+export default DashboardCard;

package/dist/types/widgets/DashboardCard/index.d.ts

@@ -0,0 +1,2 @@
+export { DashboardCard, default } from './DashboardCard';
+export type { DashboardCardProps, DashboardCardTheme, DashboardCardSize, StatCardProps, StatCardData, StatCardSettings, ProgressCardProps, ProgressCardData, ProgressCardSettings, ComparisonCardProps, ComparisonCardData, ComparisonCardSettings, ActivityCardProps, ActivityCardData, ActivityCardSettings, OrderCardProps, OrderCardData, OrderCardSettings, UserCardProps, UserCardData, UserCardSettings, RevenueCardProps, RevenueCardData, RevenueCardSettings, AlertCardProps, AlertCardData, AlertCardSettings, RankingCardProps, RankingCardData, RankingCardSettings, StatusCardProps, StatusCardData, StatusCardSettings, } from './DashboardCard';

package/dist/types/widgets/MetricCard/MetricCard.d.ts

@@ -0,0 +1,106 @@
+import React from 'react';
+import './MetricCard.css';
+export interface TrendData {
+    direction: 'up' | 'down';
+    value: number;
+    label?: string;
+}
+export interface TargetData {
+    value: string;
+    label?: string;
+}
+export interface ChartData {
+    data: number[];
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    type?: 'line' | 'bar';
+}
+export interface MetricCardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Primary value/metric to display
+     */
+    value: React.ReactNode;
+    /**
+     * Label for the metric
+     */
+    label: React.ReactNode;
+    /**
+     * Optional icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Trend information
+     */
+    trend?: TrendData;
+    /**
+     * Optional description text
+     */
+    description?: React.ReactNode;
+    /**
+     * Color variant for filled style
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * If true, applies filled background style with variant color
+     * @default false
+     */
+    filled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MetricCardCompactProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: React.ReactNode;
+    label: React.ReactNode;
+    trend?: TrendData;
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * If true, applies filled background style with variant color
+     * @default false
+     */
+    filled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MetricCardDetailedProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: React.ReactNode;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    trend?: TrendData;
+    target?: TargetData;
+    progress?: number;
+    description?: React.ReactNode;
+    /**
+     * Color variant for filled style
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * If true, applies filled background style with variant color
+     * @default false
+     */
+    filled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MetricCardChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: React.ReactNode;
+    label: React.ReactNode;
+    trend?: TrendData;
+    chart: ChartData;
+    /**
+     * Color variant for filled style
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * If true, applies filled background style with variant color
+     * @default false
+     */
+    filled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const MetricCard: {
+    Base: React.FC<MetricCardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    Compact: React.FC<MetricCardCompactProps & React.RefAttributes<HTMLDivElement>>;
+    Detailed: React.FC<MetricCardDetailedProps & React.RefAttributes<HTMLDivElement>>;
+    Chart: React.FC<MetricCardChartProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default MetricCard;

package/dist/types/widgets/MetricCard/index.d.ts

@@ -0,0 +1,2 @@
+export { MetricCard, default } from './MetricCard';
+export type { MetricCardBaseProps, MetricCardCompactProps, MetricCardDetailedProps, MetricCardChartProps, TrendData, TargetData, ChartData, } from './MetricCard';