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

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

@@ -126,76 +126,10 @@ export interface ModalProps {
      */
     centered?: boolean;
 }
-/**
- * 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>
- * ```
- */
-export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
-export default Modal;
+declare const ModalWithParsedClasses: {
+    (props: ModalProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<ModalProps>;
+export default _default;
+export { ModalWithParsedClasses as Modal };

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

@@ -145,46 +145,10 @@ export interface MultiSelectProps {
      */
     loading?: boolean;
 }
-/**
- * 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;
- * }
- * ```
- */
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
+declare const MultiSelectWithParsedClasses: {
+    (props: MultiSelectProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { MultiSelectWithParsedClasses as MultiSelect };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Size } from '../../theme';
 import './Radio.css';
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /**
@@ -16,9 +17,9 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     label?: React.ReactNode;
     /**
      * The size of the radio
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * The variant of the radio
      * @default 'primary'
@@ -46,60 +47,10 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      */
     inputClassName?: 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" />
- * ```
- */
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+declare const RadioWithParsedClasses: {
+    (props: RadioProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
+export { RadioWithParsedClasses as Radio };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Size } from '../../theme';
 import './RadioGroup.css';
 export interface RadioOption {
     /**
@@ -60,9 +61,9 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     orientation?: 'horizontal' | 'vertical';
     /**
      * The size of the radios
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * The variant of the radios
      * @default 'primary'
@@ -73,62 +74,10 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      */
     className?: 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"
- * />
- * ```
- */
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupWithParsedClasses: {
+    (props: RadioGroupProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { RadioGroupWithParsedClasses as RadioGroup };

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

@@ -1,4 +1,5 @@
 import React, { SelectHTMLAttributes } from 'react';
+import { Size } from '../../theme';
 import './Select.css';
 export interface SelectOption {
     /**
@@ -39,9 +40,9 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
     success?: string;
     /**
      * Size of the select
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * If true, select will take full width of its container
      * @default false
@@ -107,63 +108,10 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      */
     loading?: boolean;
 }
-/**
- * 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;
- * }
- * ```
- */
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare const SelectWithParsedClasses: {
+    (props: SelectProps & React.RefAttributes<HTMLSelectElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectWithParsedClasses as Select };
 declare const _default: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default _default;

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

@@ -80,39 +80,10 @@ export declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemP
     collapsed?: boolean;
     level?: number;
 } & React.RefAttributes<HTMLDivElement>>;
-/**
- * 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}
- * />
- * ```
- */
-export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
+declare const SideMenuWithParsedClasses: {
+    (props: SideMenuProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { SideMenuWithParsedClasses as SideMenu };

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

@@ -0,0 +1,18 @@
+/**
+ * Example: Basic Layout with Collapsible Sidebar
+ *
+ * This example demonstrates a simple layout with:
+ * - Collapsible sidebar
+ * - Nested menu items
+ * - Badges for notifications
+ * - Icons and tooltips
+ */
+export declare const BasicLayoutExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example: With Links
+ */
+export declare const WithLinksExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example: Simple Sidebar
+ */
+export declare const SimpleExample: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,2 @@
-export { default as SideMenu } from './SideMenu';
+export { SideMenu, default } from './SideMenu';
 export type { SideMenuProps, SideMenuItemProps } from './SideMenu';
-export { SideMenu as SideMenuComponent } from './SideMenu';
-export { SideMenuItem } from './SideMenu';

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

@@ -1,4 +1,5 @@
 import React, { TableHTMLAttributes } from 'react';
+import { Size } from '../../theme';
 import './Table.css';
 export interface TableColumn<T = unknown> {
     /**
@@ -53,6 +54,19 @@ export interface TableColumn<T = unknown> {
      * Custom class name for header cell
      */
     headerClassName?: string;
+    /**
+     * Enable filtering for this column
+     * @default false
+     */
+    filterable?: boolean;
+    /**
+     * Custom filter function
+     */
+    filterFn?: (row: T, filterValue: string) => boolean;
+    /**
+     * Filter placeholder text
+     */
+    filterPlaceholder?: string;
 }
 export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableElement>, 'children'> {
     /**
@@ -85,9 +99,9 @@ export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTa
     bordered?: boolean;
     /**
      * Size variant
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * Optional caption for the table (improves accessibility)
      */
@@ -148,64 +162,98 @@ export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTa
      * Custom class name for table container
      */
     containerClassName?: string;
+    /**
+     * If true, enables row selection with checkboxes
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Array of selected row keys
+     */
+    selectedRows?: (string | number)[];
+    /**
+     * Callback fired when selection changes
+     */
+    onSelectionChange?: (selectedKeys: (string | number)[]) => void;
+    /**
+     * If true, enables pagination
+     * @default false
+     */
+    pagination?: boolean;
+    /**
+     * Current page (zero-indexed)
+     * @default 0
+     */
+    page?: number;
+    /**
+     * Number of rows per page
+     * @default 10
+     */
+    rowsPerPage?: number;
+    /**
+     * Options for rows per page selection
+     * @default [5, 10, 25, 50]
+     */
+    rowsPerPageOptions?: number[];
+    /**
+     * Callback fired when page changes
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Callback fired when rows per page changes
+     */
+    onRowsPerPageChange?: (rowsPerPage: number) => void;
+    /**
+     * Dense mode - reduces padding for compact view
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Enable expandable rows
+     */
+    expandableRows?: boolean;
+    /**
+     * Function to render expanded row content
+     */
+    renderExpandedRow?: (row: T, rowIndex: number) => React.ReactNode;
+    /**
+     * Array of expanded row keys
+     */
+    expandedRows?: (string | number)[];
+    /**
+     * Callback fired when row expansion changes
+     */
+    onExpandRow?: (rowKey: string | number) => void;
+    /**
+     * Sticky header when scrolling
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Show toolbar with title and actions
+     */
+    toolbar?: React.ReactNode | {
+        title?: string;
+        actions?: React.ReactNode;
+    };
+    /**
+     * Enable column filtering
+     * @default false
+     */
+    filterable?: boolean;
+    /**
+     * Current filter values
+     */
+    filters?: Record<string, string>;
+    /**
+     * Callback fired when filters change
+     */
+    onFiltersChange?: (filters: Record<string, string>) => void;
 }
-/**
- * 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"
- * />
- * ```
- */
-export declare function Table<T = unknown>({ columns, data, getRowKey, striped, hoverable, bordered, size, caption, emptyMessage, loading, loadingContent, scrollable, maxHeight, onRowClick, isRowSelected, onRowSelect, sortable, sortConfig, onSortChange, className, containerClassName, ...props }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace Table {
-    var displayName: string;
-}
+declare const TableWithParsedClasses: {
+    (props: TableProps<unknown>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<TableProps & React.RefAttributes<HTMLTableElement>>;
 export default _default;
+export { TableWithParsedClasses as Table };

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

@@ -105,7 +105,10 @@ 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;
+declare const TextWithParsedClasses: {
+    (props: TextProps & React.RefAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { TextWithParsedClasses as Text };
 declare const _default: React.FC<TextProps & React.RefAttributes<HTMLElement>>;
 export default _default;