@vtx-ui/react 0.0.1-beta.3 → 0.0.1-beta.4

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

@@ -0,0 +1,252 @@
+import React from 'react';
+import './Header.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 HeaderDesktopProps 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, header has a shadow effect
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * If true, header sticks to top on scroll
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * If true, makes header 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;
+    /**
+     * Custom logo click handler
+     */
+    onLogoClick?: () => void;
+    /**
+     * Layout style for the header
+     * @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 header)
+     */
+    topBar?: TopBarConfig;
+    /**
+     * Scroll behavior - 'transparent-to-solid' makes header 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 HeaderMobileProps 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, header has a shadow effect
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * If true, header 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;
+    /**
+     * 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 HeaderResponsiveProps {
+    /**
+     * Props for desktop header
+     */
+    desktopProps: HeaderDesktopProps;
+    /**
+     * Props for mobile header
+     */
+    mobileProps: HeaderMobileProps;
+    /**
+     * Breakpoint in pixels to switch between desktop and mobile
+     * @default 768
+     */
+    breakpoint?: number;
+}
+export declare const Header: {
+    Desktop: React.FC<HeaderDesktopProps & React.RefAttributes<HTMLElement>>;
+    Mobile: React.FC<HeaderMobileProps & React.RefAttributes<HTMLElement>>;
+    Responsive: React.FC<HeaderResponsiveProps>;
+};
+export default Header;

package/dist/types/widgets/Header/Header.examples.d.ts

@@ -0,0 +1,17 @@
+export declare const BasicDesktopExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const NestedNavigationExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const EcommerceDesktopExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const MobileHeaderExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const ResponsiveHeaderExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllVariantsExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const SaaSHeaderExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderExamples: {
+    BasicDesktop: () => import("react/jsx-runtime").JSX.Element;
+    NestedNavigation: () => import("react/jsx-runtime").JSX.Element;
+    EcommerceDesktop: () => import("react/jsx-runtime").JSX.Element;
+    Mobile: () => import("react/jsx-runtime").JSX.Element;
+    Responsive: () => import("react/jsx-runtime").JSX.Element;
+    AllVariants: () => import("react/jsx-runtime").JSX.Element;
+    SaaS: () => import("react/jsx-runtime").JSX.Element;
+};
+export default HeaderExamples;

package/dist/types/widgets/Header/Header.megamenu.examples.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Example 1: E-commerce Header with Mega Menu
+ * Layout: Two rows (Logo + Search + Actions on top, Mega menu navigation below)
+ */
+export declare const EcommerceMegaMenuExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example 2: SaaS Platform with Mega Menu
+ * Layout: Two rows with centered search
+ */
+export declare const SaaSMegaMenuExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example 3: Corporate Website with Centered Layout
+ */
+export declare const CenteredMegaMenuExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example 4: Standard Single Row with Mega Menu
+ */
+export declare const SingleRowMegaMenuExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example 5: Mixed Mega Menu and Regular Dropdowns
+ */
+export declare const MixedNavigationExample: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import type { StoryObj } from '@storybook/react';
+import { Header } from './Header';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Header").HeaderResponsiveProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof Header.Responsive>;
+type MobileStory = StoryObj<typeof Header.Mobile>;
+type ResponsiveStory = StoryObj<typeof Header.Responsive>;
+export declare const Primary: Story;
+export declare const WithSearch: Story;
+export declare const WithActions: Story;
+export declare const NestedMenu: Story;
+export declare const FullFeatured: Story;
+export declare const TwoRowLayout: Story;
+export declare const WithMegaMenu: Story;
+export declare const MobilePrimary: MobileStory;
+export declare const MobileDark: MobileStory;
+export declare const MobileNested: MobileStory;
+export declare const MobileWithSearch: MobileStory;
+export declare const MobileWithActions: MobileStory;
+export declare const ResponsiveBasic: ResponsiveStory;
+export declare const ResponsiveTwoRowWithMegaMenu: ResponsiveStory;
+export declare const ScrollTransparentToSolid: Story;
+export declare const ScrollTwoRowTransparent: Story;

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

@@ -0,0 +1,2 @@
+export { Header, default } from './Header';
+export type { NavigationItem, MegaMenuColumn, TopBarConfig, HeaderDesktopProps, HeaderMobileProps, HeaderResponsiveProps, } from './Header';

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import './InfoCard.css';
+export interface InfoCardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon element to display
+     */
+    icon: React.ReactNode;
+    /**
+     * Visual variant for the icon styling
+     * @default 'primary'
+     */
+    iconVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * Main text content
+     */
+    text: React.ReactNode;
+    /**
+     * Optional secondary text below main text
+     */
+    subText?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface InfoCardMetricProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Primary value/metric to display
+     */
+    value: React.ReactNode;
+    /**
+     * Optional label for the metric
+     */
+    label?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const InfoCard: {
+    Base: React.FC<InfoCardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    Metric: React.FC<InfoCardMetricProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default InfoCard;

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

@@ -0,0 +1 @@
+export * from './InfoCard';

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import './InfoListCard.css';
+export interface InfoListItem {
+    /** Label/key - can be text or any React node */
+    label: React.ReactNode;
+    /** Value - can be text or any React node */
+    value: React.ReactNode;
+    /** Optional CSS class for value styling */
+    valueClass?: string;
+    /** Optional CSS class for label styling */
+    labelClass?: string;
+    /** Hide this item */
+    hidden?: boolean;
+}
+export interface InfoListCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Card heading/title */
+    heading?: string;
+    /** Array of label-value pairs */
+    items: InfoListItem[];
+    /** Show divider between items
+     * @default false
+     */
+    showDividers?: boolean;
+    /** Compact spacing
+     * @default false
+     */
+    compact?: boolean;
+    /** Card variant
+     * @default 'outlined'
+     */
+    variant?: 'outlined' | 'elevated' | 'flat';
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+declare const InfoListCardWithParsedClasses: (props: InfoListCardProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: React.FC<InfoListCardProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { InfoListCardWithParsedClasses as InfoListCard };

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

@@ -0,0 +1,2 @@
+export { default as InfoListCard } from './InfoListCard';
+export type { InfoListCardProps, InfoListItem } from './InfoListCard';

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

@@ -0,0 +1,144 @@
+import React from 'react';
+import './InfoText.css';
+export interface InfoTextBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon element to display
+     */
+    icon: React.ReactNode;
+    /**
+     * Visual variant for icon styling
+     * @default 'primary'
+     */
+    iconVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * Display icon in a circle
+     * @default true
+     */
+    iconCircle?: boolean;
+    /**
+     * Main heading text
+     */
+    heading: React.ReactNode;
+    /**
+     * Optional secondary text
+     */
+    subText?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface InfoTextStatProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional icon element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Visual variant for icon styling
+     * @default 'primary'
+     */
+    iconVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * Display icon in a circle
+     * @default true
+     */
+    iconCircle?: boolean;
+    /**
+     * Metric/stat value
+     */
+    value: React.ReactNode;
+    /**
+     * Label for the stat
+     */
+    label: React.ReactNode;
+    /**
+     * Optional additional text
+     */
+    subText?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface InfoTextFeatureProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Icon element to display
+     */
+    icon: React.ReactNode;
+    /**
+     * Visual variant for icon styling
+     * @default 'primary'
+     */
+    iconVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * Display icon in a circle
+     * @default true
+     */
+    iconCircle?: boolean;
+    /**
+     * Feature title
+     */
+    title: React.ReactNode;
+    /**
+     * Feature description
+     */
+    description: React.ReactNode;
+    /**
+     * Optional badge element
+     */
+    badge?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface InfoTextCompactProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon element to display
+     */
+    icon: React.ReactNode;
+    /**
+     * Visual variant for icon styling
+     * @default 'primary'
+     */
+    iconVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * Display icon in a circle
+     * @default true
+     */
+    iconCircle?: boolean;
+    /**
+     * Text content
+     */
+    text: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface InfoTextVerticalProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon element to display
+     */
+    icon: React.ReactNode;
+    /**
+     * Visual variant for icon styling
+     * @default 'primary'
+     */
+    iconVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * Display icon in a circle
+     * @default true
+     */
+    iconCircle?: boolean;
+    /**
+     * Main heading text
+     */
+    heading: React.ReactNode;
+    /**
+     * Optional secondary text
+     */
+    subText?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const InfoText: {
+    Base: React.FC<InfoTextBaseProps & React.RefAttributes<HTMLDivElement>>;
+    Stat: React.FC<InfoTextStatProps & React.RefAttributes<HTMLDivElement>>;
+    Feature: React.FC<InfoTextFeatureProps & React.RefAttributes<HTMLDivElement>>;
+    Compact: React.FC<InfoTextCompactProps & React.RefAttributes<HTMLDivElement>>;
+    Vertical: React.FC<InfoTextVerticalProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default InfoText;

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

@@ -0,0 +1,33 @@
+/**
+ * InfoText.Base - Basic info text with icon, heading, and optional subtext
+ */
+export declare const InfoTextBaseExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * InfoText.Stat - Statistics display with icon, large value, and label
+ */
+export declare const InfoTextStatExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * InfoText.Feature - Feature highlights with icon, title, description, and optional badge
+ */
+export declare const InfoTextFeatureExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * InfoText.Compact - Compact info display for inline use
+ */
+export declare const InfoTextCompactExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * InfoText.Vertical - Vertical layout with centered icon and text
+ */
+export declare const InfoTextVerticalExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Mixed Usage Example - Combining different variants
+ */
+export declare const InfoTextMixedExample: () => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    Base: () => import("react/jsx-runtime").JSX.Element;
+    Stat: () => import("react/jsx-runtime").JSX.Element;
+    Feature: () => import("react/jsx-runtime").JSX.Element;
+    Compact: () => import("react/jsx-runtime").JSX.Element;
+    Vertical: () => import("react/jsx-runtime").JSX.Element;
+    Mixed: () => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;

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

@@ -0,0 +1 @@
+export * from './InfoText';

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import './OrderCard.css';
+export interface OrderItem {
+    id?: string;
+    name: string;
+    image?: string;
+    quantity?: number;
+}
+export interface OrderCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique order identifier
+     */
+    orderId: string;
+    /**
+     * Display order number (defaults to orderId)
+     */
+    orderNumber?: string;
+    /**
+     * Order status
+     * @default 'pending'
+     */
+    status?: 'pending' | 'processing' | 'delivered' | 'cancelled' | 'shipped';
+    /**
+     * Custom status text (overrides default)
+     */
+    statusText?: string;
+    /**
+     * Array of order items
+     */
+    items: OrderItem[];
+    /**
+     * Delivery date string
+     */
+    deliveryDate?: string;
+    /**
+     * Delivery label text
+     * @default 'Delivered on'
+     */
+    deliveryLabel?: string;
+    /**
+     * Total order amount
+     */
+    totalAmount: number;
+    /**
+     * Currency symbol
+     * @default '₹'
+     */
+    currency?: string;
+    /**
+     * Track order button handler
+     */
+    onTrackOrder?: (orderId: string) => void;
+    /**
+     * View details handler
+     */
+    onViewDetails?: (orderId: string) => void;
+    /**
+     * Track button text
+     * @default 'Track Order'
+     */
+    trackButtonText?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const OrderCardWithParsedClasses: (props: OrderCardProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: React.FC<OrderCardProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { OrderCardWithParsedClasses as OrderCard };

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

@@ -0,0 +1,2 @@
+export { default as OrderCard } from './OrderCard';
+export type { OrderCardProps, OrderItem } from './OrderCard';