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

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,71 @@
+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;
+    displayName: string;
+};
+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';

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import './OrderConfirmation.css';
+export interface OrderConfirmationItem {
+    id: string;
+    name: string;
+    image?: string;
+    quantity: number;
+    price: number;
+    variant?: string;
+}
+export interface OrderConfirmationAddress {
+    name: string;
+    addressLine1: string;
+    addressLine2?: string;
+    city: string;
+    state: string;
+    zipCode: string;
+    phone?: string;
+}
+/**
+ * OrderConfirmation - Complete order confirmation view
+ *
+ * Displays comprehensive order confirmation with items, pricing, addresses, and action buttons
+ *
+ * @example
+ * ```tsx
+ * <OrderConfirmation
+ *   orderId="12345"
+ *   status="confirmed"
+ *   items={orderItems}
+ *   shippingAddress={address}
+ *   total={199.99}
+ * />
+ * ```
+ */
+export interface OrderConfirmationProps extends React.HTMLAttributes<HTMLDivElement> {
+    orderId: string;
+    orderNumber?: string;
+    orderDate?: string;
+    status?: 'pending' | 'processing' | 'confirmed' | 'delivered' | 'cancelled';
+    statusText?: string;
+    headerText?: string;
+    headerSubtitle?: string;
+    customerEmail?: string;
+    customerPhone?: string;
+    shippingAddress: OrderConfirmationAddress;
+    billingAddress?: OrderConfirmationAddress;
+    items: OrderConfirmationItem[];
+    subtotal: number;
+    shippingCost?: number;
+    tax?: number;
+    discount?: number;
+    total: number;
+    currency?: string;
+    paymentMethod?: string;
+    transactionId?: string;
+    estimatedDelivery?: string;
+    trackingNumber?: string;
+    onDownloadInvoice?: (orderId: string) => void;
+    onContinueShopping?: () => void;
+    onTrackOrder?: (orderId: string) => void;
+    onViewDetails?: (orderId: string) => void;
+    onContactSupport?: (orderId: string) => void;
+    onShareOrder?: (orderId: string) => void;
+    downloadInvoiceText?: string;
+    continueShoppingText?: string;
+    trackOrderText?: string;
+    viewDetailsText?: string;
+    contactSupportText?: string;
+    shareOrderText?: string;
+    showActions?: boolean;
+    hideDownloadInvoice?: boolean;
+    hideContinueShopping?: boolean;
+    hideTrackOrder?: boolean;
+    hideContactSupport?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const OrderConfirmationWithParsedClasses: {
+    (props: OrderConfirmationProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<OrderConfirmationProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { OrderConfirmationWithParsedClasses as OrderConfirmation };

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

@@ -0,0 +1,3 @@
+export { default } from './OrderConfirmation';
+export { default as OrderConfirmation } from './OrderConfirmation';
+export type { OrderConfirmationProps, OrderConfirmationItem, OrderConfirmationAddress } from './OrderConfirmation';

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import './OrderDetails.css';
+export interface OrderDetailsItem {
+    id: string;
+    name: string;
+    image?: string;
+    quantity: number;
+    price: number;
+    variant?: string;
+}
+export interface OrderDetailsAddress {
+    name: string;
+    addressLine1: string;
+    addressLine2?: string;
+    city: string;
+    state: string;
+    zipCode: string;
+    phone?: string;
+}
+/**
+ * OrderDetails - Comprehensive order details view
+ *
+ * Displays complete order information with items, pricing, tracking, and management actions
+ *
+ * @example
+ * ```tsx
+ * <OrderDetails
+ *   orderId="12345"
+ *   orderDate="Dec 19, 2023"
+ *   status="delivered"
+ *   items={orderItems}
+ *   shippingAddress={address}
+ *   total={199.99}
+ * />
+ * ```
+ */
+export interface OrderDetailsProps extends React.HTMLAttributes<HTMLDivElement> {
+    orderId: string;
+    orderNumber?: string;
+    orderDate: string;
+    status: 'pending' | 'processing' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled' | 'returned';
+    statusText?: string;
+    customerName?: string;
+    customerEmail?: string;
+    customerPhone?: string;
+    shippingAddress: OrderDetailsAddress;
+    billingAddress?: OrderDetailsAddress;
+    items: OrderDetailsItem[];
+    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;
+    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;
+    downloadInvoiceText?: string;
+    trackOrderText?: string;
+    cancelOrderText?: string;
+    returnOrderText?: string;
+    reorderText?: string;
+    contactSupportText?: string;
+    writeReviewText?: string;
+    showActions?: boolean;
+    allowCancel?: boolean;
+    allowReturn?: boolean;
+    allowReorder?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const OrderDetailsWithParsedClasses: {
+    (props: OrderDetailsProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<OrderDetailsProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { OrderDetailsWithParsedClasses as OrderDetails };

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

@@ -0,0 +1,3 @@
+export { default } from './OrderDetails';
+export { default as OrderDetails } from './OrderDetails';
+export type { OrderDetailsProps, OrderDetailsItem, OrderDetailsAddress } from './OrderDetails';

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import './ProductCard.css';
+export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    id?: string;
+    image: string;
+    imageAlt?: string;
+    category?: string;
+    name: React.ReactNode;
+    weight?: number;
+    units?: string;
+    price: number;
+    originalPrice?: number;
+    discount?: string;
+    rating?: number;
+    initialQuantity?: number;
+    featured?: boolean;
+    featuredText?: string;
+    showWishlist?: boolean;
+    isWishlisted?: boolean;
+    cartIcon?: React.ReactNode;
+    wishlistIcon?: React.ReactNode;
+    wishlistFilledIcon?: React.ReactNode;
+    quickViewIcon?: React.ReactNode;
+    onAddToCart?: (id?: string, quantity?: number) => void | Promise<void>;
+    onIncrementCart?: (id?: string, quantity?: number) => void | Promise<void>;
+    onDecrementCart?: (id?: string, quantity?: number) => void | Promise<void>;
+    onWishlist?: () => void;
+    onQuickView?: () => void;
+    onClick?: () => void;
+    loading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface ProductCardWideProps extends ProductCardProps {
+    imagePosition?: 'left' | 'right';
+}
+export declare const ProductCard: {
+    Base: React.FC<ProductCardProps & React.RefAttributes<HTMLDivElement>>;
+    Wide: React.FC<ProductCardWideProps & React.RefAttributes<HTMLDivElement>>;
+    Minimal: React.FC<ProductCardProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default ProductCard;

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

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

package/dist/types/widgets/product-card-old/ProductCard.d.ts

@@ -0,0 +1,12 @@
+interface ProductCardProps {
+    id: string;
+    category: string;
+    name: string;
+    weight?: number;
+    units?: string;
+    price: number;
+    ratings: number;
+    imageUrl?: string;
+}
+declare const ProductCard: (props: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductCard;

package/package.json

@@ -1,59 +1,73 @@
-{
-  "name": "@vtx-ui/react",
-  "version": "0.0.1-beta.3",
-  "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
-  "author": "Innostes Solutions Pvt Ltd <contact@innostes.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/vertex-ui/react"
-  },
-  "homepage": "https://innostes.com/",
-  "bugs": {
-    "url": "https://github.com/vertex-ui/react/issues"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
-  },
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
-  },
-  "devDependencies": {
-    
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.2.0",
-    "jest-axe": "^7.0.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^2.79.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^29.4.6"
-  },
-  "dependencies": {
-    "tslib": "^2.8.1"
-  }
-}
+{
+  "name": "@vtx-ui/react",
+  "version": "0.0.1-beta.5",
+  "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "author": "Innostes Solutions Pvt Ltd <contact@innostes.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vertex-ui/react"
+  },
+  "homepage": "https://innostes.com/",
+  "bugs": {
+    "url": "https://github.com/vertex-ui/react/issues"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
+    "eslint-plugin-storybook": "^10.1.10",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "jest-axe": "^7.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "playwright": "^1.57.0",
+    "rollup": "^2.79.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^10.1.10",
+    "ts-jest": "^29.4.6",
+    "vitest": "^4.0.16"
+  },
+  "dependencies": {
+    "react-icons": "^5.5.0",
+    "tslib": "^2.8.1"
+  }
+}