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

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

@@ -64,58 +64,7 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivEle
      */
     className?: string;
 }
-/**
- * CheckboxGroup component - Manages a group of related checkboxes
- *
- * The CheckboxGroup component provides a convenient way to manage multiple
- * checkboxes with shared state, labels, and error handling.
- *
- * @example
- * Basic usage
- * ```tsx
- * <CheckboxGroup
- *   label="Select your interests"
- *   options={[
- *     { value: 'sports', label: 'Sports' },
- *     { value: 'music', label: 'Music' },
- *     { value: 'travel', label: 'Travel' },
- *   ]}
- * />
- * ```
- *
- * @example
- * Controlled mode
- * ```tsx
- * const [selected, setSelected] = useState(['sports']);
- * <CheckboxGroup
- *   label="Interests"
- *   options={options}
- *   value={selected}
- *   onChange={setSelected}
- * />
- * ```
- *
- * @example
- * Horizontal layout
- * ```tsx
- * <CheckboxGroup
- *   label="Preferences"
- *   options={options}
- *   orientation="horizontal"
- * />
- * ```
- *
- * @example
- * With error state
- * ```tsx
- * <CheckboxGroup
- *   label="Required selection"
- *   options={options}
- *   error
- *   helperText="Please select at least one option"
- * />
- * ```
- */
-export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const CheckboxGroupWithParsedClasses: (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { CheckboxGroupWithParsedClasses as CheckboxGroup };

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

@@ -55,37 +55,7 @@ export interface ChipProps {
      */
     'data-testid'?: string;
 }
-/**
- * Chip component - Compact element for displaying tags, labels, or selections
- *
- * A versatile chip component for representing small pieces of information like tags,
- * filters, selections, or categories with optional delete functionality.
- *
- * @example
- * Basic usage
- * ```tsx
- * <Chip label="React" />
- * ```
- *
- * @example
- * With delete functionality
- * ```tsx
- * <Chip
- *   label="JavaScript"
- *   onDelete={() => handleRemove('js')}
- * />
- * ```
- *
- * @example
- * With avatar
- * ```tsx
- * <Chip
- *   label="John Doe"
- *   avatar="https://avatar.url/john.jpg"
- *   variant="outlined"
- * />
- * ```
- */
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChipWithParsedClasses: (props: ChipProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<ChipProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { ChipWithParsedClasses as Chip };

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

@@ -42,77 +42,7 @@ export interface DividerProps extends React.HTMLAttributes<HTMLHRElement | HTMLD
      */
     className?: string;
 }
-/**
- * Divider component - A thin line that groups content in lists and layouts
- *
- * The Divider component provides a thin, unobtrusive line for grouping elements
- * to reinforce visual hierarchy. It supports horizontal and vertical orientations,
- * multiple variants, and can wrap content like text or chips.
- *
- * ## CSS Customization
- *
- * You can customize the divider appearance using CSS custom properties:
- *
- * ```css
- * .custom-divider {
- *   --vtx-divider-color: #e91e63;
- *   --vtx-divider-color-light: #fce4ec;
- *   --vtx-divider-text-color: #c2185b;
- *   --vtx-divider-text-color-light: #f48fb1;
- *   --vtx-divider-text-size: 14px;
- *   --vtx-divider-text-weight: 600;
- * }
- * ```
- *
- * Or set them globally on :root:
- *
- * ```css
- * :root {
- *   --vtx-divider-color: #1976d2;
- *   --vtx-divider-text-color: #0d47a1;
- * }
- * ```
- *
- * @example
- * Basic horizontal divider
- * ```tsx
- * <Divider />
- * ```
- *
- * @example
- * Vertical divider in flex container
- * ```tsx
- * <Box display="flex" alignItems="center">
- *   <Chip label="Item 1" />
- *   <Divider orientation="vertical" flexItem />
- *   <Chip label="Item 2" />
- * </Box>
- * ```
- *
- * @example
- * With text content
- * ```tsx
- * <div>
- *   <p>Content above</p>
- *   <Divider>OR</Divider>
- *   <p>Content below</p>
- * </div>
- * ```
- *
- * @example
- * With chip and custom alignment
- * ```tsx
- * <Divider textAlign="left">
- *   <Chip label="Section" size="small" />
- * </Divider>
- * ```
- *
- * @example
- * Custom colored divider
- * ```tsx
- * <Divider className="custom-divider">Custom</Divider>
- * ```
- */
-export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement | HTMLHRElement>>;
+declare const DividerWithParsedClasses: (props: DividerProps & React.RefAttributes<HTMLDivElement | HTMLHRElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<DividerProps & React.RefAttributes<HTMLHRElement | HTMLDivElement>>;
 export default _default;
+export { DividerWithParsedClasses as Divider };

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

@@ -36,31 +36,7 @@ export interface FlexProps {
     /** HTML element to render as */
     as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main';
 }
-/**
- * Flex component - A flexible container for flexbox layouts
- *
- * @example
- * ```tsx
- * // Basic row with gap
- * <Flex gap={16}>
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Flex>
- *
- * // Centered column
- * <Flex direction="column" align="center" justify="center">
- *   <h1>Title</h1>
- *   <p>Content</p>
- * </Flex>
- *
- * // Space between with wrap
- * <Flex justify="between" wrap="wrap" gap={8}>
- *   <button>Button 1</button>
- *   <button>Button 2</button>
- *   <button>Button 3</button>
- * </Flex>
- * ```
- */
-export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FlexWithParsedClasses: (props: FlexProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<FlexProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { FlexWithParsedClasses as Flex };

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

@@ -75,82 +75,7 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     children?: React.ReactNode;
 }
-/**
- * Grid component - A responsive grid layout system
- *
- * The Grid component uses a 12-column responsive grid layout inspired by Material-UI.
- * It supports five breakpoints (xs, sm, md, lg, xl) and provides flexible spacing,
- * alignment, and direction options.
- *
- * ## Breakpoints
- * - xs: 0px and up (extra small devices)
- * - sm: 600px and up (small devices)
- * - md: 960px and up (medium devices)
- * - lg: 1280px and up (large devices)
- * - xl: 1920px and up (extra large devices)
- *
- * ## CSS Customization
- *
- * You can customize the grid spacing using CSS custom properties:
- *
- * ```css
- * :root {
- *   --vtx-grid-spacing-unit: 8px;
- * }
- * ```
- *
- * @example
- * Basic grid with equal columns
- * ```tsx
- * <Grid container spacing={2}>
- *   <Grid item xs={12} sm={6} md={4}>
- *     <div>Column 1</div>
- *   </Grid>
- *   <Grid item xs={12} sm={6} md={4}>
- *     <div>Column 2</div>
- *   </Grid>
- *   <Grid item xs={12} sm={6} md={4}>
- *     <div>Column 3</div>
- *   </Grid>
- * </Grid>
- * ```
- *
- * @example
- * Responsive layout
- * ```tsx
- * <Grid container spacing={3}>
- *   <Grid item xs={12} md={8}>
- *     <div>Main content</div>
- *   </Grid>
- *   <Grid item xs={12} md={4}>
- *     <div>Sidebar</div>
- *   </Grid>
- * </Grid>
- * ```
- *
- * @example
- * Auto-width columns
- * ```tsx
- * <Grid container spacing={2}>
- *   <Grid item xs="auto">
- *     <div>Auto width</div>
- *   </Grid>
- *   <Grid item xs>
- *     <div>Fills remaining space</div>
- *   </Grid>
- * </Grid>
- * ```
- *
- * @example
- * With alignment
- * ```tsx
- * <Grid container spacing={2} justifyContent="center" alignItems="center">
- *   <Grid item xs={6}>
- *     <div>Centered content</div>
- *   </Grid>
- * </Grid>
- * ```
- */
-export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridWithParsedClasses: (props: GridProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<GridProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { GridWithParsedClasses as Grid };

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

@@ -101,38 +101,7 @@ export interface HeaderProps {
      */
     sticky?: boolean;
 }
-/**
- * Header component - Professional admin panel header with notifications and user menu
- *
- * @example
- * Basic header
- * ```tsx
- * <Header
- *   title="Admin Dashboard"
- *   userName="John Doe"
- *   userSubtitle="Admin"
- *   onToggleSidebar={() => setCollapsed(!collapsed)}
- * />
- * ```
- *
- * @example
- * With notifications
- * ```tsx
- * <Header
- *   title="Dashboard"
- *   notifications={[
- *     { id: '1', title: 'New order received', time: '2 min ago', read: false },
- *     { id: '2', title: 'User registered', time: '1 hour ago', read: true }
- *   ]}
- *   userName="John Doe"
- *   userMenuItems={[
- *     { label: 'Profile', icon: <UserIcon /> },
- *     { label: 'Settings', icon: <SettingsIcon /> },
- *     { label: 'Logout', icon: <LogoutIcon />, variant: 'danger' }
- *   ]}
- * />
- * ```
- */
-export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const HeaderWithParsedClasses: (props: HeaderProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<HeaderProps & React.RefAttributes<HTMLElement>>;
 export default _default;
+export { HeaderWithParsedClasses as Header };

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

@@ -73,57 +73,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      */
     suffix?: string;
 }
-/**
- * Input component - Text input field with label, helper text, validation states, and rich features
- *
- * A comprehensive input component with support for icons, prefixes, suffixes, character counting,
- * clear functionality, and various validation states.
- *
- * @example
- * Basic usage
- * ```tsx
- * <Input
- *   label="Email"
- *   type="email"
- *   placeholder="Enter your email"
- *   helperText="We'll never share your email"
- * />
- * ```
- *
- * @example
- * With error state
- * ```tsx
- * <Input
- *   label="Username"
- *   error="Username is already taken"
- *   value={username}
- *   onChange={(e) => setUsername(e.target.value)}
- * />
- * ```
- *
- * @example
- * With icons and clear button
- * ```tsx
- * <Input
- *   label="Search"
- *   leftIcon={<SearchIcon />}
- *   clearable
- *   onClear={() => setSearch('')}
- * />
- * ```
- *
- * @example
- * With character counter
- * ```tsx
- * <Input
- *   label="Bio"
- *   maxLength={100}
- *   showCount
- *   value={bio}
- *   onChange={(e) => setBio(e.target.value)}
- * />
- * ```
- */
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const InputWithParsedClasses: (props: InputProps & React.RefAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
+export { InputWithParsedClasses as Input };

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

@@ -78,37 +78,7 @@ export interface MenuProps {
  * MenuItem component - Individual menu item with submenu support
  */
 export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * 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} />
- * ```
- */
-export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuWithParsedClasses: (props: MenuProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<MenuProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { MenuWithParsedClasses as Menu };

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

@@ -126,76 +126,7 @@ 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;
+declare const _default: React.FC<ModalProps>;
+export default _default;
+export { ModalWithParsedClasses as Modal };

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

@@ -145,46 +145,7 @@ 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;
 declare const _default: React.FC<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { MultiSelectWithParsedClasses as MultiSelect };

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

@@ -46,60 +46,7 @@ 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;
 declare const _default: React.FC<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
+export { RadioWithParsedClasses as Radio };