@vtx-ui/react 0.0.1-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Innostes Solutions Pvt Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,228 @@
+<p align="center">
+  <img src="https://innostes.com/images/home/section_navbar/company-latest-logo.png" alt="Innostes Solutions Pvt Ltd" width="220"/>
+</p>
+
+# @vtx-ui/react
+
+A production-ready React + TypeScript UI library with enterprise-grade components.
+
+<p align="center">
+  <b>Documentation & full guides at <a href="https://vertexui.com/" target="_blank">vertexui.com</a></b><br/>
+  <sub>Developed and maintained by <a href="https://innostes.com/" target="_blank">Innostes Solutions Pvt Ltd</a> for the <a href="https://github.com/vertex-ui" target="_blank">vertex-ui</a> organization.</sub>
+</p>
+
+[![npm version](https://badge.fury.io/js/%40vtx-ui%2Freact.svg)](https://www.npmjs.com/package/@vtx-ui/react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+✨ **Enterprise-Ready** - Production-grade components with strict TypeScript support  
+♿ **Accessible** - WCAG 2.1 AA compliant with full ARIA support  
+🎨 **Unified Theme System** - Consistent primary color-based design across all 23 components  
+🎯 **Fully Customizable** - Change entire theme with CSS custom properties (no rebuild needed)  
+📦 **Tree-Shakable** - Optimized bundle size with ESM support  
+🧪 **Well Tested** - 508 passing tests with 100% component coverage  
+📚 **Documented** - Complete JSDoc comments, Storybook, and theming guides
+
+## Installation
+
+```bash
+npm install @vtx-ui/react
+```
+
+```bash
+yarn add @vtx-ui/react
+```
+
+```bash
+pnpm add @vtx-ui/react
+```
+
+## Quick Start
+
+```tsx
+import { ThemeProvider, Button } from '@vtx-ui/react';
+import '@vtx-ui/react/styles.css';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Button variant="primary" onClick={() => console.log('clicked')}>
+        Click me
+      </Button>
+    </ThemeProvider>
+  );
+}
+```
+
+## Theming
+
+All components use a **unified primary color system** for consistent branding:
+
+```css
+/* Change the entire theme by updating primary color tokens */
+:root {
+  --vtx-color-primary-500: #3b82f6; /* Focus rings, borders */
+  --vtx-color-primary-600: #2563eb; /* Main brand color */
+  --vtx-color-primary-700: #1d4ed8; /* Hover states */
+}
+```
+
+**Examples:**
+
+- **Blue (default)**: Modern, tech-focused
+- **Green**: Eco-friendly, growth-oriented
+- **Purple**: Premium, creative brand
+- **Red**: Bold, action-driven
+
+📖 **[Complete Theming Guide](./DESIGN_SYSTEM_THEMING.md)** - Learn how to customize colors, spacing, typography, and more.
+
+## Components
+
+### 23 Production-Ready Components
+
+**Form Controls**: Button, Input, Select, MultiSelect, Checkbox, Radio, CheckboxGroup, RadioGroup  
+**Interactive**: Accordion, Card, Modal, Toast, Tooltip  
+**Display**: Chip, Badge, Alert, Table, Avatar, Divider, Text  
+**Layout**: Flex, Grid
+
+### Example Usage
+
+#### Button
+
+```tsx
+import { Button } from '@vtx-ui/react';
+
+<Button variant="primary" size="large" loading={false}>
+  Click me
+</Button>;
+```
+
+#### Input
+
+```tsx
+import { Input } from '@vtx-ui/react';
+
+<Input
+  label="Email"
+  type="email"
+  placeholder="you@example.com"
+  helperText="We'll never share your email"
+  error={errors.email}
+/>;
+```
+
+#### Modal
+
+```tsx
+import { Modal, Button } from '@vtx-ui/react';
+
+const [isOpen, setIsOpen] = useState(false);
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Confirm Action"
+  footer={
+    <>
+      <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+      <Button variant="primary">Confirm</Button>
+    </>
+  }
+>
+  <p>Are you sure you want to proceed?</p>
+</Modal>;
+```
+
+## Theming
+
+The library uses a comprehensive design token system with CSS variables:
+
+```tsx
+import { ThemeProvider, tokens } from '@vtx-ui/react';
+
+function App() {
+  return (
+    <ThemeProvider initialMode="light">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### Using Theme Tokens
+
+```tsx
+import { useTheme } from '@vtx-ui/react';
+
+function MyComponent() {
+  const { tokens, mode, setMode } = useTheme();
+
+  return <div style={{ color: tokens.colors.primary[500] }}>Current mode: {mode}</div>;
+}
+```
+
+## Custom Hooks
+
+- `useTheme` - Access theme tokens and mode
+- `useClickOutside` - Detect clicks outside an element
+- `useFocusTrap` - Trap focus within a component
+- `useEscapeKey` - Handle escape key presses
+- `useBodyScrollLock` - Lock body scroll (for modals)
+- `useId` - Generate unique IDs for accessibility
+- `useDebounce` - Debounce values
+
+## Development
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Start Storybook
+
+```bash
+npm run storybook
+```
+
+### Run tests
+
+```bash
+npm test
+```
+
+### Build library
+
+```bash
+npm run build
+```
+
+### Lint and format
+
+```bash
+npm run lint
+npm run format
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting PRs.
+
+## License
+
+MIT © [Innostes Solutions Pvt Ltd](https://innostes.com/)
+
+## Links
+
+- [Documentation](https://vertexui.com/)
+- [Storybook](https://vertexui.com/storybook)
+- [npm](https://www.npmjs.com/package/@vtx-ui/react)
+- [GitHub](https://github.com/vertex-ui/react)

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

@@ -0,0 +1,31 @@
+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

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,119 @@
+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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { HTMLAttributes, ImgHTMLAttributes } from "react";
+import './Avatar.css';
+/**
+ * Avatar component - Displays user profile image, initials, or fallback
+ *
+ * The Avatar component supports images, fallback text, different sizes, shapes, and status indicators.
+ *
+ * @example
+ * Basic avatar with image
+ * ```tsx
+ * <Avatar src="https://randomuser.me/api/portraits/men/1.jpg" alt="John Doe" />
+ * ```
+ *
+ * @example
+ * Avatar with fallback text
+ * ```tsx
+ * <Avatar fallback="JD" />
+ * ```
+ *
+ * @example
+ * Different sizes
+ * ```tsx
+ * <Avatar src="..." size="small" />
+ * <Avatar src="..." size="large" />
+ * ```
+ *
+ * @example
+ * Square shape
+ * ```tsx
+ * <Avatar src="..." shape="square" />
+ * ```
+ *
+ * @example
+ * Status indicator
+ * ```tsx
+ * <Avatar
+ *   src="..."
+ *   statusIndicator={<span style={{ background: 'green', borderRadius: '50%', width: 12, height: 12, display: 'inline-block' }} />}
+ *   statusPosition="top-right"
+ * />
+ * ```
+ */
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    src?: string;
+    alt?: string;
+    /**
+     * Size of the avatar
+     * @default theme.defaultSize or 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'circle' | 'square';
+    fallback?: string;
+    onImageError?: (error: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onImageLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'className' | 'onError' | 'onLoad'>;
+    statusIndicator?: React.ReactNode;
+    statusPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { Avatar };

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

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { Avatar as AvatarComponent } from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,81 @@
+import React, { HTMLAttributes } from 'react';
+import './Badge.css';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual variant of the badge
+     * @default 'neutral'
+     */
+    variant?: 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /**
+     * Size of the badge
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * If true, badge will be pill-shaped with rounded ends
+     * @default false
+     */
+    pill?: boolean;
+    /**
+     * If true, displays a dot indicator before the content
+     * Useful for status indicators
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * If true, displays the badge with an outline style instead of filled
+     * @default false
+     */
+    outline?: boolean;
+    /**
+     * Maximum content length before truncation
+     * Useful for limiting badge text length
+     */
+    maxLength?: number;
+    /**
+     * Icon to display before the badge content
+     */
+    icon?: React.ReactNode;
+    /**
+     * Badge content - text, numbers, or custom elements
+     */
+    children: React.ReactNode;
+    /**
+     * Callback fired when badge is clicked
+     */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Badge component - Small labels and indicators for status, counts, or categories
+ *
+ * A versatile badge component that can display status indicators, counts, tags, or any short text
+ * with various visual styles and customization options.
+ *
+ * @example
+ * Basic status badges
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="error" dot>Error</Badge>
+ * <Badge variant="primary" pill>NEW</Badge>
+ * ```
+ *
+ * @example
+ * With icon and outline
+ * ```tsx
+ * <Badge variant="info" icon={<InfoIcon />} outline>
+ *   Information
+ * </Badge>
+ * ```
+ *
+ * @example
+ * Removable badge
+ * ```tsx
+ * <Badge variant="primary" onRemove={(e) => handleRemove()}>
+ *   Tag 1
+ * </Badge>
+ * ```
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+declare const _default: React.FC<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;
+export { Badge };

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

@@ -0,0 +1,3 @@
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+export { Badge as BadgeComponent } from './Badge';