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

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

@@ -78,10 +78,38 @@ export interface MenuProps {
  * MenuItem component - Individual menu item with submenu support
  */
 export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
-declare const MenuWithParsedClasses: {
-    (props: MenuProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Menu component - Navigation or action menu with responsive support
+ *
+ * @example
+ * Basic menu with items array
+ * ```tsx
+ * <Menu
+ *   items={[
+ *     { label: 'Profile', icon: <UserIcon />, onClick: () => {} },
+ *     { label: 'Settings', icon: <SettingsIcon />, onClick: () => {} },
+ *     { label: 'Logout', icon: <LogoutIcon />, onClick: () => {}, variant: 'danger' }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * Horizontal menu with custom children
+ * ```tsx
+ * <Menu orientation="horizontal">
+ *   <MenuItem label="Home" active />
+ *   <MenuItem label="Products" />
+ *   <MenuItem label="About" />
+ * </Menu>
+ * ```
+ *
+ * @example
+ * Responsive menu (hamburger on mobile)
+ * ```tsx
+ * <Menu responsive items={menuItems} />
+ * ```
+ */
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<MenuProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { MenuWithParsedClasses as Menu };
+export { Menu };

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

@@ -126,10 +126,78 @@ export interface ModalProps {
      */
     centered?: boolean;
 }
-declare const ModalWithParsedClasses: {
-    (props: ModalProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Modal component - Overlay dialog for focused user interactions
+ *
+ * A feature-rich modal component with accessibility features including focus trap,
+ * body scroll lock, keyboard navigation, and customizable animations.
+ *
+ * @example
+ * Basic confirmation modal with footerButtons array
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ *   description="Are you sure you want to proceed with this action?"
+ *   footerButtons={[
+ *     { label: 'Cancel', onClick: () => setIsOpen(false), variant: 'outline' },
+ *     { label: 'Confirm', onClick: handleConfirm, variant: 'primary' }
+ *   ]}
+ * >
+ *   <p>This action cannot be undone.</p>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * Custom footer with ReactNode
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Custom Footer"
+ *   footer={
+ *     <>
+ *       <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+ *       <Button variant="primary">Save</Button>
+ *     </>
+ *   }
+ * >
+ *   <p>Custom content here.</p>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * Form modal with custom header
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   size="large"
+ *   header={<CustomHeader />}
+ *   scrollable
+ * >
+ *   <FormContent />
+ * </Modal>
+ * ```
+ *
+ * @example
+ * Fullscreen modal without backdrop close
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   size="fullscreen"
+ *   closeOnBackdropClick={false}
+ *   animation="slide-up"
+ * >
+ *   <FullscreenContent />
+ * </Modal>
+ * ```
+ */
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<ModalProps>;
 export default _default;
-export { ModalWithParsedClasses as Modal };
+export { Modal };

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

@@ -145,10 +145,47 @@ export interface MultiSelectProps {
      */
     loading?: boolean;
 }
-declare const MultiSelectWithParsedClasses: {
-    (props: MultiSelectProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * MultiSelect component - Multi-selection dropdown with chips display
+ *
+ * A professional multi-select component supporting checkbox or checkmark styles,
+ * with chips display, search functionality, and group support.
+ *
+ * @example
+ * Basic usage with checkbox style
+ * ```tsx
+ * <MultiSelect
+ *   label="Select Technologies"
+ *   placeholder="Choose technologies"
+ *   options={technologies}
+ *   onChange={(values) => console.log(values)}
+ * />
+ * ```
+ *
+ * @example
+ * With checkmark style
+ * ```tsx
+ * <MultiSelect
+ *   label="Select Skills"
+ *   options={skills}
+ *   selectionStyle="checkmark"
+ *   searchable
+ *   showSelectAll
+ * />
+ * ```
+ *
+ * @example
+ * Customize loading spinner via CSS
+ * ```css
+ * .vtx-multiselect-icon-spinner {
+ *   --vtx-multiselect-loader-color: #10b981;
+ *   --vtx-multiselect-loader-speed: 1.2s;
+ *   --vtx-multiselect-loader-track-opacity: 0.15;
+ *   --vtx-multiselect-loader-path-opacity: 0.85;
+ * }
+ * ```
+ */
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { MultiSelectWithParsedClasses as MultiSelect };
+export { MultiSelect };

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

@@ -233,4 +233,5 @@ export declare const Navbar: React.FC<NavbarResponsiveProps> & {
     Mobile: React.FC<NavbarMobileProps>;
     Responsive: React.FC<NavbarResponsiveProps>;
 };
-export default Navbar;
+declare const _default: React.FC<NavbarResponsiveProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -47,10 +47,61 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      */
     inputClassName?: string;
 }
-declare const RadioWithParsedClasses: {
-    (props: RadioProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Radio component - Allows users to select a single option from a set
+ *
+ * The Radio component provides a customizable radio input with support
+ * for labels, error states, variants, and three sizes.
+ *
+ * ## CSS Customization
+ *
+ * You can customize the radio appearance using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --vtx-radio-color: #1976d2;
+ *   --vtx-radio-size: 20px;
+ *   --vtx-radio-border-width: 2px;
+ * }
+ * ```
+ *
+ * @example
+ * Basic radio
+ * ```tsx
+ * <Radio label="Option 1" name="options" value="1" />
+ * ```
+ *
+ * @example
+ * Controlled radio
+ * ```tsx
+ * const [selected, setSelected] = useState('1');
+ * <Radio
+ *   checked={selected === '1'}
+ *   onChange={(e) => setSelected(e.target.value)}
+ *   label="Option 1"
+ *   value="1"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <Radio
+ *   label="Required option"
+ *   error
+ *   helperText="Please select an option"
+ * />
+ * ```
+ *
+ * @example
+ * Different variants
+ * ```tsx
+ * <Radio label="Primary" variant="primary" />
+ * <Radio label="Success" variant="success" />
+ * <Radio label="Error" variant="error" />
+ * ```
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 declare const _default: React.FC<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export { RadioWithParsedClasses as Radio };
+export { Radio };

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

@@ -74,10 +74,63 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      */
     className?: string;
 }
-declare const RadioGroupWithParsedClasses: {
-    (props: RadioGroupProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * RadioGroup component - Manages a group of related radio buttons
+ *
+ * The RadioGroup component provides a convenient way to manage multiple
+ * radio buttons with shared state, labels, and error handling.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <RadioGroup
+ *   name="plan"
+ *   label="Select your plan"
+ *   options={[
+ *     { value: 'basic', label: 'Basic' },
+ *     { value: 'pro', label: 'Pro' },
+ *     { value: 'enterprise', label: 'Enterprise' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * Controlled mode
+ * ```tsx
+ * const [selected, setSelected] = useState('basic');
+ * <RadioGroup
+ *   name="plan"
+ *   label="Plan"
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
+ *
+ * @example
+ * Horizontal layout
+ * ```tsx
+ * <RadioGroup
+ *   name="answer"
+ *   label="Your answer"
+ *   options={options}
+ *   orientation="horizontal"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <RadioGroup
+ *   name="required"
+ *   label="Required selection"
+ *   options={options}
+ *   error
+ *   helperText="Please select an option"
+ * />
+ * ```
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { RadioGroupWithParsedClasses as RadioGroup };
+export { RadioGroup };

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

@@ -150,4 +150,6 @@ export type ToolbarButton = 'bold' | 'italic' | 'underline' | 'strikethrough' |
  * ```
  */
 declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<HTMLDivElement>>;
-export default RichTextEditor;
+declare const _default: React.FC<RichTextEditorProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { RichTextEditor };

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

@@ -108,10 +108,64 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      */
     loading?: boolean;
 }
-declare const SelectWithParsedClasses: {
-    (props: SelectProps & React.RefAttributes<HTMLSelectElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { SelectWithParsedClasses as Select };
+/**
+ * Select component - Dropdown selection control with label, validation states, and grouping support
+ *
+ * A comprehensive select component with support for grouped options, validation states,
+ * and enhanced accessibility features.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Select
+ *   label="Country"
+ *   placeholder="Select a country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With grouped options
+ * ```tsx
+ * <Select
+ *   label="Framework"
+ *   grouped
+ *   options={[
+ *     { value: 'react', label: 'React', group: 'Frontend' },
+ *     { value: 'vue', label: 'Vue', group: 'Frontend' },
+ *     { value: 'node', label: 'Node.js', group: 'Backend' },
+ *     { value: 'django', label: 'Django', group: 'Backend' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With change callback
+ * ```tsx
+ * <Select
+ *   label="Status"
+ *   options={statusOptions}
+ *   onSelectChange={(value, option) => {
+ *     console.log('Selected:', value, option);
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Customize loading spinner via CSS
+ * ```css
+ * .vtx-select-icon-spinner {
+ *   --vtx-select-loader-color: #10b981;
+ *   --vtx-select-loader-speed: 1.2s;
+ *   --vtx-select-loader-track-opacity: 0.15;
+ *   --vtx-select-loader-path-opacity: 0.85;
+ * }
+ * ```
+ */
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 declare const _default: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default _default;
+export { Select };

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

@@ -90,10 +90,40 @@ export declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemP
     collapsed?: boolean;
     level?: number;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const SideMenuWithParsedClasses: {
-    (props: SideMenuProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * SideMenu component - Professional sidebar navigation for admin panels
+ *
+ * @example
+ * Basic sidebar menu
+ * ```tsx
+ * <SideMenu
+ *   items={[
+ *     { label: 'Dashboard', icon: <DashboardIcon />, active: true },
+ *     {
+ *       label: 'Products',
+ *       icon: <ProductIcon />,
+ *       items: [
+ *         { label: 'All Products', onClick: () => {} },
+ *         { label: 'Categories', onClick: () => {} }
+ *       ]
+ *     },
+ *     { label: 'Settings', icon: <SettingsIcon />, onClick: () => {} }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * Collapsible sidebar with header
+ * ```tsx
+ * <SideMenu
+ *   collapsed={isCollapsed}
+ *   onCollapseToggle={setIsCollapsed}
+ *   header={<Logo />}
+ *   items={menuItems}
+ * />
+ * ```
+ */
+declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { SideMenuWithParsedClasses as SideMenu };
+export { SideMenu };

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

@@ -268,10 +268,64 @@ export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTa
      */
     onFiltersChange?: (filters: Record<string, string>) => void;
 }
-declare const TableWithParsedClasses: {
-    (props: TableProps<unknown>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Table component - Displays data in rows and columns with advanced features
+ *
+ * A comprehensive table component with support for sorting, selection, loading states,
+ * sticky columns, and customizable rendering.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * const columns = [
+ *   { key: 'name', header: 'Name' },
+ *   { key: 'email', header: 'Email' },
+ *   { key: 'role', header: 'Role', align: 'center' },
+ * ];
+ *
+ * const data = [
+ *   { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+ * ];
+ *
+ * <Table
+ *   columns={columns}
+ *   data={data}
+ *   getRowKey={(row) => row.id}
+ *   striped
+ * />
+ * ```
+ *
+ * @example
+ * With sorting and row click
+ * ```tsx
+ * <Table
+ *   columns={columns}
+ *   data={data}
+ *   getRowKey={(row) => row.id}
+ *   sortable
+ *   onRowClick={(row) => console.log('Clicked:', row)}
+ * />
+ * ```
+ *
+ * @example
+ * With loading state and custom rendering
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', header: 'Name', sticky: 'left' },
+ *     { key: 'status', header: 'Status', render: (row) => <Badge>{row.status}</Badge> }
+ *   ]}
+ *   data={data}
+ *   getRowKey={(row) => row.id}
+ *   loading={isLoading}
+ *   maxHeight="400px"
+ * />
+ * ```
+ */
+declare function Table<T = unknown>({ columns, data, getRowKey, striped, hoverable, bordered, size, caption, emptyMessage, emptyStateIcon, emptyStateDescription, loading, loadingContent, skeletonLoader, skeletonRows, scrollable, maxHeight, onRowClick, isRowSelected, onRowSelect, sortable, sortConfig, onSortChange, className, containerClassName, selectable, selectedRows, onSelectionChange, pagination, page, rowsPerPage, rowsPerPageOptions, onPageChange, onRowsPerPageChange, dense, expandableRows, renderExpandedRow, expandedRows, onExpandRow, stickyHeader, toolbar, filterable, filters, onFiltersChange, ...props }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
 declare const _default: React.FC<TableProps & React.RefAttributes<HTMLTableElement>>;
 export default _default;
-export { TableWithParsedClasses as Table };
+export { Table };

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

@@ -0,0 +1,94 @@
+import React, { ReactNode } from 'react';
+import { Size } from '../../theme';
+import './Tabs.css';
+export type TabsVariant = 'line' | 'enclosed' | 'soft-rounded' | 'solid-rounded' | 'segmented';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The initial active tab value (uncontrolled mode)
+     */
+    defaultValue?: string;
+    /**
+     * The active tab value (controlled mode)
+     */
+    value?: string;
+    /**
+     * Callback when the active tab changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Visual style of the tabs
+     * @default 'line'
+     */
+    variant?: TabsVariant;
+    /**
+     * Orientation of the tabs
+     * @default 'horizontal'
+     */
+    orientation?: TabsOrientation;
+    /**
+     * Size of the tabs
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Whether to lazy mount tab panels
+     * @default false
+     */
+    isLazy?: boolean;
+    children: ReactNode;
+}
+declare const TabsWithParsedClasses: {
+    (props: TabsProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TabsWithParsedClasses as Tabs };
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /**
+     * If true, shows scroll buttons when tabs overflow (horizontal only)
+     * @default false
+     */
+    showScrollControls?: boolean;
+}
+declare const TabListWithParsedClasses: {
+    (props: TabListProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TabListWithParsedClasses as TabList };
+export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The value of the tab. Must be unique within the Tabs component.
+     */
+    value: string;
+    /**
+     * Icon to display before the label
+     */
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+declare const TabWithParsedClasses: {
+    (props: TabProps & React.RefAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TabWithParsedClasses as Tab };
+export interface TabPanelsProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare const TabPanelsWithParsedClasses: {
+    (props: TabPanelsProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TabPanelsWithParsedClasses as TabPanels };
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The value corresponding to the Tab value
+     */
+    value: string;
+    children: ReactNode;
+}
+declare const TabPanelWithParsedClasses: {
+    (props: TabPanelProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TabPanelWithParsedClasses as TabPanel };

package/dist/types/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs';
+export type { TabsProps, TabListProps, TabProps, TabPanelsProps, TabPanelProps, TabsVariant, TabsOrientation } from './Tabs';

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

@@ -111,10 +111,56 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
      */
     children?: React.ReactNode;
 }
-declare const TextWithParsedClasses: {
-    (props: TextProps & React.RefAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { TextWithParsedClasses as Text };
+/**
+ * Text component - Versatile typography component with theme integration
+ *
+ * A comprehensive text component that provides consistent typography across your application
+ * with full theming support and extensive customization options.
+ *
+ * @example
+ * Basic usage with variants
+ * ```tsx
+ * <Text variant="h1">Heading 1</Text>
+ * <Text variant="body1">Regular body text</Text>
+ * <Text variant="caption" color="neutral.500">Small caption text</Text>
+ * ```
+ *
+ * @example
+ * Custom styling
+ * ```tsx
+ * <Text
+ *   variant="body1"
+ *   weight="bold"
+ *   align="center"
+ *   color="primary.600"
+ * >
+ *   Centered bold text
+ * </Text>
+ * ```
+ *
+ * @example
+ * Truncation and line clamping
+ * ```tsx
+ * <Text truncate>This text will be truncated with ellipsis...</Text>
+ * <Text lineClamp={3}>This text will show only 3 lines before truncating...</Text>
+ * ```
+ *
+ * @example
+ * Gradient text
+ * ```tsx
+ * <Text variant="h2" gradient={['#667eea', '#764ba2']}>
+ *   Gradient Heading
+ * </Text>
+ * ```
+ *
+ * @example
+ * Semantic HTML control
+ * ```tsx
+ * <Text variant="h1" as="h2">Visually h1, semantically h2</Text>
+ * <Text variant="body1" as="label" htmlFor="input">Label with body style</Text>
+ * ```
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
 declare const _default: React.FC<TextProps & React.RefAttributes<HTMLElement>>;
 export default _default;
+export { Text };