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

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';

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

@@ -0,0 +1,308 @@
+import React from 'react';
+import './Navbar.css';
+export interface TopBarConfig {
+    /**
+     * Content to display in the top bar
+     */
+    content?: React.ReactNode;
+    /**
+     * Left-aligned content
+     */
+    leftContent?: React.ReactNode;
+    /**
+     * Right-aligned content
+     */
+    rightContent?: React.ReactNode;
+    /**
+     * Top bar styling variant
+     * @default 'subtle'
+     */
+    variant?: 'subtle' | 'bold' | 'accent' | 'dark' | 'gradient';
+    /**
+     * If true, shows a dismiss button
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when dismiss button is clicked
+     */
+    onDismiss?: () => void;
+}
+export interface MegaMenuColumn {
+    /**
+     * Column title
+     */
+    title?: React.ReactNode;
+    /**
+     * Column items
+     */
+    items: NavigationItem[];
+}
+export interface NavigationItem {
+    /**
+     * Unique identifier for the navigation item
+     */
+    id: string;
+    /**
+     * Label text to display
+     */
+    label: React.ReactNode;
+    /**
+     * URL or path for navigation
+     */
+    href?: string;
+    /**
+     * Icon to display before label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Nested child items for dropdown menus
+     */
+    children?: NavigationItem[];
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * If true, marks this item as active/selected
+     */
+    active?: boolean;
+    /**
+     * If true, disables the item
+     */
+    disabled?: boolean;
+    /**
+     * Badge content to display (e.g., notification count)
+     */
+    badge?: React.ReactNode;
+    /**
+     * If true, renders as a mega menu with columns
+     */
+    megaMenu?: boolean;
+    /**
+     * Mega menu columns (when megaMenu is true)
+     */
+    megaMenuColumns?: MegaMenuColumn[];
+    /**
+     * Description text for mega menu items
+     */
+    description?: React.ReactNode;
+    /**
+     * Featured image for mega menu
+     */
+    image?: string;
+}
+export interface NavbarDesktopProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Logo element or brand name
+     */
+    logo?: React.ReactNode;
+    /**
+     * Array of navigation items
+     */
+    navItems?: NavigationItem[];
+    /**
+     * Action buttons or elements to display on the right
+     */
+    actions?: React.ReactNode;
+    /**
+     * Visual theme variant
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'dark' | 'light' | 'transparent' | 'gradient';
+    /**
+     * If true, navbar has a shadow effect
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * If true, navbar sticks to top on scroll
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * If true, makes navbar full bleed (no max-width)
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, enables search functionality
+     * @default false
+     */
+    searchEnabled?: boolean;
+    /**
+     * Search placeholder text
+     */
+    searchPlaceholder?: string;
+    /**
+     * Search input handler
+     */
+    onSearch?: (query: string) => void;
+    /**
+     * Search suggestions/options for autocomplete
+     */
+    searchOptions?: any[];
+    /**
+     * Property name or function to extract the display label from search option
+     * @default 'label'
+     */
+    searchGetOptionLabel?: string | ((option: any) => string);
+    /**
+     * Property name or function to extract the value from search option
+     * @default 'value'
+     */
+    searchGetOptionValue?: string | ((option: any) => string);
+    /**
+     * Message to display when no search options are available
+     * @default 'No options'
+     */
+    searchNoOptionsMessage?: string;
+    /**
+     * If true, shows loading state in search autocomplete
+     * @default false
+     */
+    searchLoading?: boolean;
+    /**
+     * Callback fired when a search option is selected
+     */
+    onSearchSelect?: (value: string, option: any) => void;
+    /**
+     * Custom logo click handler
+     */
+    onLogoClick?: () => void;
+    /**
+     * Layout style for the navbar
+     * @default 'single-row'
+     */
+    layout?: 'single-row' | 'two-row' | 'centered';
+    /**
+     * Two-row bottom styling variant (only applicable when layout='two-row')
+     * @default 'default'
+     */
+    twoRowBottomStyle?: 'default' | 'divider' | 'dark-bottom' | 'gradient-bottom' | 'elevated-bottom';
+    /**
+     * Top bar configuration (displays above main navbar)
+     */
+    topBar?: TopBarConfig;
+    /**
+     * Scroll behavior - 'transparent-to-solid' makes navbar transparent initially and solid on scroll
+     * @default undefined
+     */
+    scrollBehavior?: 'transparent-to-solid';
+    /**
+     * Scroll threshold in pixels before applying scroll effect
+     * @default 50
+     */
+    scrollThreshold?: number;
+    /**
+     * Callback fired when scroll state changes
+     * @param scrolled - true if user has scrolled past threshold, false otherwise
+     */
+    onScrollStateChange?: (scrolled: boolean) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface NavbarMobileProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Logo element or brand name
+     */
+    logo?: React.ReactNode;
+    /**
+     * Array of navigation items
+     */
+    navItems?: NavigationItem[];
+    /**
+     * Action buttons or elements to display on the right
+     */
+    actions?: React.ReactNode;
+    /**
+     * Visual theme variant
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'dark' | 'light' | 'transparent' | 'gradient';
+    /**
+     * If true, navbar has a shadow effect
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * If true, navbar sticks to top on scroll
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * If true, enables search functionality in mobile menu
+     * @default false
+     */
+    searchEnabled?: boolean;
+    /**
+     * Search placeholder text
+     */
+    searchPlaceholder?: string;
+    /**
+     * Search input handler
+     */
+    onSearch?: (query: string) => void;
+    /**
+     * Search suggestions/options for autocomplete
+     */
+    searchOptions?: any[];
+    /**
+     * Property name or function to extract the display label from search option
+     * @default 'label'
+     */
+    searchGetOptionLabel?: string | ((option: any) => string);
+    /**
+     * Property name or function to extract the value from search option
+     * @default 'value'
+     */
+    searchGetOptionValue?: string | ((option: any) => string);
+    /**
+     * Message to display when no search options are available
+     * @default 'No options'
+     */
+    searchNoOptionsMessage?: string;
+    /**
+     * If true, shows loading state in search autocomplete
+     * @default false
+     */
+    searchLoading?: boolean;
+    /**
+     * Callback fired when a search option is selected
+     */
+    onSearchSelect?: (value: string, option: any) => void;
+    /**
+     * Custom logo click handler
+     */
+    onLogoClick?: () => void;
+    /**
+     * Menu open state (controlled)
+     */
+    menuOpen?: boolean;
+    /**
+     * Menu open change handler (controlled)
+     */
+    onMenuOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface NavbarResponsiveProps {
+    /**
+     * Props for desktop navbar
+     */
+    desktopProps: NavbarDesktopProps;
+    /**
+     * Props for mobile navbar
+     */
+    mobileProps: NavbarMobileProps;
+    /**
+     * Breakpoint in pixels to switch between desktop and mobile
+     * @default 768
+     */
+    breakpoint?: number;
+}
+export declare const Navbar: {
+    Desktop: React.FC<NavbarDesktopProps & React.RefAttributes<HTMLElement>>;
+    Mobile: React.FC<NavbarMobileProps & React.RefAttributes<HTMLElement>>;
+    Responsive: React.FC<NavbarResponsiveProps>;
+};
+export default Navbar;