@vtx-ui/react 0.0.1-beta.1 → 0.0.1-beta.10

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/package.json

@@ -1,59 +1,113 @@
-{
-  "name": "@vtx-ui/react",
-  "version": "0.0.1-beta.1",
-  "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.10",
+  "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./theme": {
+      "types": "./dist/types/theme/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/types/index.d.ts"
+      ],
+      "theme": [
+        "dist/types/theme/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"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "react-components",
+    "ui",
+    "ui-library",
+    "component-library",
+    "design-system",
+    "typescript",
+    "vtx-ui",
+    "vertex-ui",
+    "accessibility",
+    "a11y",
+    "themeable",
+    "dark-mode",
+    "enterprise"
+  ],
+  "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"
+  }
+}

package/dist/components/Accordion/Accordion.d.ts

@@ -1,31 +0,0 @@
-import React from "react";
-import { AccordionProps } from "./types";
-import './Accordion.css';
-/**
- * Accordion component - Collapsible content panels for presenting information in a limited space.
- *
- * @example
- * Basic usage with items prop:
- * ```tsx
- * <Accordion
- *   items={[
- *     { id: 'item1', header: 'Section 1', children: <div>Content 1</div> },
- *     { id: 'item2', header: 'Section 2', children: <div>Content 2</div> },
- *   ]}
- * />
- * ```
- *
- * @example
- * Usage with AccordionItem children:
- * ```tsx
- * <Accordion>
- *   <AccordionItem id="item1" header="Section 1">Content 1</AccordionItem>
- *   <AccordionItem id="item2" header="Section 2">Content 2</AccordionItem>
- * </Accordion>
- * ```
- */
-declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.FC<AccordionProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
-export { Accordion };
-export type { AccordionProps };

package/dist/components/Accordion/Accordion.examples.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const AccordionExamples: React.FC;
-export default AccordionExamples;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { AccordionItemComponentProps, AccordionItemProps } from './types';
-declare const _default: React.FC<AccordionItemComponentProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
-export declare const AccordionItemWrapper: React.FC<AccordionItemProps>;

package/dist/components/Accordion/index.d.ts

@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion';
-export type { AccordionProps, AccordionItemProps, AccordionItemComponentProps } from './types';
-export { Accordion as AccordionComponent } from './Accordion';
-export { default as AccordionItem, AccordionItemWrapper } from './AccordionItem';

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

@@ -1,98 +0,0 @@
-import { ReactNode } from 'react';
-export interface AccordionItemProps {
-    /** Unique identifier for the accordion item */
-    id: string;
-    /** The header content for the accordion item */
-    header: ReactNode;
-    /** The body content for the accordion item */
-    children: ReactNode;
-    /** Whether this item is disabled */
-    disabled?: boolean;
-    /** Custom class name for the accordion item */
-    className?: string;
-    /** Loading state for this specific item */
-    loading?: boolean;
-    /** Status indicator for the item */
-    status?: 'default' | 'success' | 'warning' | 'error' | 'featured';
-    /** Custom icon for this specific item (overrides accordion-level icons) */
-    icon?: {
-        expanded?: React.ReactNode;
-        collapsed?: React.ReactNode;
-    };
-    /** Additional data attributes for testing or analytics */
-    dataTestId?: string;
-}
-export interface AccordionProps {
-    /** Array of accordion items */
-    items?: AccordionItemProps[];
-    /** Children accordion items (alternative to items prop) */
-    children?: ReactNode;
-    /** Whether multiple items can be open at once */
-    allowMultiple?: boolean;
-    /** Default open items (controlled) */
-    defaultOpenItems?: string[];
-    /** Open items (uncontrolled) */
-    openItems?: string[];
-    /** Callback when items are toggled */
-    onToggle?: (openItems: string[]) => void;
-    /** Visual variant style of the accordion */
-    variant?: 'default' | 'bordered' | 'separated' | 'flush';
-    /** Size variant of the accordion */
-    size?: 'sm' | 'md' | 'lg';
-    /** Custom class name */
-    className?: string;
-    /** Custom styles */
-    style?: React.CSSProperties;
-    /** Whether to show chevron icons */
-    showChevron?: boolean;
-    /** Position of the chevron icon */
-    chevronPosition?: 'left' | 'right';
-    /** Custom icon for expanded state */
-    expandedIcon?: React.ReactNode;
-    /** Custom icon for collapsed state */
-    collapsedIcon?: React.ReactNode;
-    /** Icon type preset */
-    iconType?: 'chevron' | 'plus-minus' | 'custom';
-    /** Whether to show divider lines between items */
-    showDivider?: boolean;
-    /** Whether items are collapsible (can all be closed) */
-    collapsible?: boolean;
-    /** Loading state for the entire accordion */
-    loading?: boolean;
-    /** Disable all accordion interactions */
-    disabled?: boolean;
-    /** Spacing variant for compact or spacious layouts */
-    spacing?: 'compact' | 'default' | 'spacious';
-    /** Disable animations for better performance or accessibility */
-    disableAnimations?: boolean;
-}
-export interface AccordionItemComponentProps {
-    /** The accordion item data */
-    item: AccordionItemProps;
-    /** Whether this item is open */
-    isOpen: boolean;
-    /** Function to toggle this item */
-    onToggle: () => void;
-    /** Variant from parent accordion */
-    variant: AccordionProps['variant'];
-    /** Size from parent accordion */
-    size: AccordionProps['size'];
-    /** Whether to show chevron */
-    showChevron: boolean;
-    /** Chevron position */
-    chevronPosition: AccordionProps['chevronPosition'];
-    /** Custom icon for expanded state */
-    expandedIcon?: React.ReactNode;
-    /** Custom icon for collapsed state */
-    collapsedIcon?: React.ReactNode;
-    /** Icon type preset */
-    iconType?: AccordionProps['iconType'];
-    /** Loading state from parent accordion */
-    loading?: boolean;
-    /** Disabled state from parent accordion */
-    disabled?: boolean;
-    /** Spacing variant from parent accordion */
-    spacing?: AccordionProps['spacing'];
-    /** Disable animations */
-    disableAnimations?: boolean;
-}

package/dist/components/Alert/Alert.d.ts

@@ -1,119 +0,0 @@
-import React from 'react';
-import './Alert.css';
-export interface AlertProps {
-    /**
-     * Content of the alert (primary message, can be any ReactNode)
-     */
-    children?: React.ReactNode;
-    /**
-     * Alert title
-     */
-    title?: string;
-    /**
-     * Alert description - alternative to children for simple text
-     */
-    description?: string;
-    /**
-     * Visual variant of the alert
-     * @default 'info'
-     */
-    variant?: 'success' | 'error' | 'warning' | 'info' | 'neutral';
-    /**
-     * Visual style of the alert
-     * @default 'subtle'
-     */
-    alertStyle?: 'filled' | 'outlined' | 'subtle' | 'left-accent';
-    /** Size of the alert. Defaults to theme defaultSize or 'md'. */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Custom icon or false to hide icon
-     * If not provided, shows default icon based on variant
-     */
-    icon?: React.ReactNode | false;
-    /**
-     * If true, shows close button
-     * @default false
-     */
-    dismissible?: boolean;
-    /**
-     * Callback fired when alert is dismissed
-     */
-    onClose?: () => void;
-    /**
-     * Action element (button or link) displayed on the right
-     */
-    action?: React.ReactNode;
-    /**
-     * If true, alert takes full width of container
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Custom class name
-     */
-    className?: string;
-    /**
-     * Custom inline styles
-     */
-    style?: React.CSSProperties;
-    /**
-     * Role attribute for accessibility
-     * @default 'alert'
-     */
-    role?: string;
-}
-/**
- * Alert component - Displays important messages and notifications
- *
- * A flexible alert component supporting multiple variants, styles, and interactive features.
- * Can display simple messages or complex content with titles, actions, and custom icons.
- *
- * @example
- * Simple alert with children
- * ```tsx
- * <Alert variant="success">
- *   Your changes have been saved!
- * </Alert>
- * ```
- *
- * @example
- * Alert with title and description
- * ```tsx
- * <Alert
- *   variant="error"
- *   title="Error occurred"
- *   description="Unable to connect to the server."
- *   dismissible
- *   onClose={() => console.log('closed')}
- * />
- * ```
- *
- * @example
- * Alert with action button
- * ```tsx
- * <Alert
- *   variant="warning"
- *   title="Update available"
- *   style="left-accent"
- *   action={<Button size="small">Update Now</Button>}
- * >
- *   A new version is available. Update to get the latest features.
- * </Alert>
- * ```
- *
- * @example
- * Alert with custom icon
- * ```tsx
- * <Alert
- *   variant="info"
- *   icon={<CustomIcon />}
- *   title="Custom notification"
- * >
- *   This alert uses a custom icon.
- * </Alert>
- * ```
- */
-declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.FC<AlertProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
-export { Alert };

package/dist/components/Alert/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Alert } from './Alert';
-export type { AlertProps } from './Alert';
-export { Alert as AlertComponent } from './Alert';