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

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

@@ -1,129 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import './Input.css';
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /**
-     * Label text displayed above the input
-     */
-    label?: string;
-    /**
-     * Helper text displayed below the input
-     * Provides additional context or instructions
-     */
-    helperText?: string;
-    /**
-     * Error message - when provided, input is shown in error state
-     * Takes precedence over helperText when both are present
-     */
-    error?: string;
-    /**
-     * Success message - when provided, input is shown in success state
-     */
-    success?: string;
-    /**
-     * Size of the input
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * If true, input will take full width of its container
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Icon or element to display at the start of the input
-     */
-    leftIcon?: React.ReactNode;
-    /**
-     * Icon or element to display at the end of the input
-     */
-    rightIcon?: React.ReactNode;
-    /**
-     * If true, shows a clear button when input has value
-     * @default false
-     */
-    clearable?: boolean;
-    /**
-     * Callback fired when clear button is clicked
-     */
-    onClear?: () => void;
-    /**
-     * If true, adds a character counter below the input
-     * Requires maxLength prop to be set
-     * @default false
-     */
-    showCount?: boolean;
-    /**
-     * Custom class name for the wrapper element
-     */
-    wrapperClassName?: string;
-    /**
-     * Custom class name for the label element
-     */
-    labelClassName?: string;
-    /**
-     * Custom class name for the input element itself
-     */
-    inputClassName?: string;
-    /**
-     * Prefix text to display before input value
-     */
-    prefix?: string;
-    /**
-     * Suffix text to display after input value
-     */
-    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 _default: React.FC<InputProps & React.RefAttributes<HTMLInputElement>>;
-export default _default;

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

@@ -1,3 +0,0 @@
-export { default as Input } from './Input';
-export type { InputProps } from './Input';
-export { Input as InputComponent } from './Input';

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

@@ -1,114 +0,0 @@
-import React from 'react';
-import './Menu.css';
-export interface MenuItemProps {
-    /**
-     * Menu item label
-     */
-    label: string;
-    /**
-     * Click handler
-     */
-    onClick?: () => void;
-    /**
-     * Icon to display before label
-     */
-    icon?: React.ReactNode;
-    /**
-     * Icon to display after label
-     */
-    rightIcon?: React.ReactNode;
-    /**
-     * Whether the item is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether the item is active/selected
-     * @default false
-     */
-    active?: boolean;
-    /**
-     * Item variant
-     * @default 'default'
-     */
-    variant?: 'default' | 'danger';
-    /**
-     * Keyboard shortcut to display
-     */
-    shortcut?: string;
-    /**
-     * Divider after this item
-     * @default false
-     */
-    divider?: boolean;
-    /**
-     * Submenu items for multi-level menus
-     */
-    items?: MenuItemProps[];
-}
-export interface MenuProps {
-    /**
-     * Menu items configuration
-     */
-    items?: MenuItemProps[];
-    /**
-     * Custom children (MenuItem components)
-     */
-    children?: React.ReactNode;
-    /**
-     * Menu orientation
-     * @default 'vertical'
-     */
-    orientation?: 'vertical' | 'horizontal';
-    /**
-     * Whether menu is responsive (converts to hamburger on mobile)
-     * @default true
-     */
-    responsive?: boolean;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Menu width (for vertical menus)
-     */
-    width?: string | number;
-}
-/**
- * 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 _default: React.FC<MenuProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;

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

@@ -1,4 +0,0 @@
-export { default as Menu } from './Menu';
-export type { MenuProps, MenuItemProps } from './Menu';
-export { Menu as MenuComponent } from './Menu';
-export { MenuItem } from './Menu';

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

@@ -1,201 +0,0 @@
-import React from 'react';
-import './Modal.css';
-export interface ModalFooterButton {
-    /**
-     * Button label text
-     */
-    label: string;
-    /**
-     * Click handler for the button
-     */
-    onClick: () => void;
-    /**
-     * Button variant
-     * @default 'secondary'
-     */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning';
-    /**
-     * Button size
-     * @default 'medium'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Loading state
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Disabled state
-     * @default false
-     */
-    disabled?: boolean;
-}
-export interface ModalProps {
-    /**
-     * Whether the modal is open
-     */
-    isOpen: boolean;
-    /**
-     * Callback fired when the modal requests to be closed
-     * Called on backdrop click, escape key, or close button click
-     */
-    onClose: () => void;
-    /**
-     * Modal title displayed in header
-     */
-    title?: string;
-    /**
-     * Optional subtitle or description below the title
-     */
-    description?: string;
-    /**
-     * Modal content
-     */
-    children: React.ReactNode;
-    /**
-     * Optional header content to replace the default title area
-     * When provided, title and description are ignored
-     */
-    header?: React.ReactNode;
-    /**
-     * Optional footer content (typically action buttons)
-     * Can be a ReactNode or an array of button configurations
-     */
-    footer?: React.ReactNode;
-    /**
-     * Array of footer buttons to auto-generate footer
-     * If provided, footer prop is ignored
-     */
-    footerButtons?: ModalFooterButton[];
-    /** Size of the modal ('sm', 'md', 'lg', 'fullscreen', 'auto'). Defaults to theme defaultSize */
-    size?: 'sm' | 'md' | 'lg' | 'fullscreen' | 'auto';
-    /**
-     * If false, clicking the backdrop won't close the modal
-     * @default true
-     */
-    closeOnBackdropClick?: boolean;
-    /**
-     * If false, pressing Escape won't close the modal
-     * @default true
-     */
-    closeOnEscape?: boolean;
-    /**
-     * If false, hides the close button in the header
-     * @default true
-     */
-    showCloseButton?: boolean;
-    /**
-     * If true, modal backdrop will be transparent
-     * @default false
-     */
-    transparentBackdrop?: boolean;
-    /**
-     * Custom class name for the modal content
-     */
-    className?: string;
-    /**
-     * Custom class name for the modal backdrop
-     */
-    backdropClassName?: string;
-    /**
-     * Prevents body scroll when modal is open
-     * @default true
-     */
-    preventScroll?: boolean;
-    /**
-     * Animation variant for modal entrance
-     * @default 'fade'
-     */
-    animation?: 'fade' | 'slide-up' | 'slide-down' | 'zoom' | 'none';
-    /**
-     * Callback fired after modal opens (after animation completes)
-     */
-    onAfterOpen?: () => void;
-    /**
-     * Callback fired after modal closes (after animation completes)
-     */
-    onAfterClose?: () => void;
-    /**
-     * If true, modal will be scrollable inside
-     * @default false
-     */
-    scrollable?: boolean;
-    /**
-     * If true, centers the modal vertically
-     * @default true
-     */
-    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;

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

@@ -1,3 +0,0 @@
-export { default as Modal } from './Modal';
-export type { ModalProps } from './Modal';
-export { Modal as ModalComponent } from './Modal';

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

@@ -1,190 +0,0 @@
-import React from 'react';
-import './MultiSelect.css';
-export interface MultiSelectOption {
-    /**
-     * Value of the option
-     */
-    value: string | number;
-    /**
-     * Display label for the option
-     */
-    label: string;
-    /**
-     * If true, option cannot be selected
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Optional group this option belongs to
-     */
-    group?: string;
-}
-export interface MultiSelectProps {
-    /**
-     * Label text displayed above the select
-     */
-    label?: string;
-    /**
-     * Helper text displayed below the select
-     */
-    helperText?: string;
-    /**
-     * Error message - when provided, select is shown in error state
-     */
-    error?: string;
-    /**
-     * Success message - when provided, select is shown in success state
-     */
-    success?: string;
-    /**
-     * Size of the select
-     * @default 'medium'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * If true, select will take full width of its container
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Options to display in the select dropdown
-     */
-    options: MultiSelectOption[];
-    /**
-     * Selected values
-     */
-    value?: (string | number)[];
-    /**
-     * Default selected values for uncontrolled component
-     */
-    defaultValue?: (string | number)[];
-    /**
-     * Placeholder text shown when no option is selected
-     */
-    placeholder?: string;
-    /**
-     * Custom class name for the wrapper element
-     */
-    className?: string;
-    /**
-     * If true, options will be grouped
-     * @default false
-     */
-    grouped?: boolean;
-    /**
-     * Property name or function to extract the display label from each option
-     */
-    getOptionLabel?: string | ((option: any) => string);
-    /**
-     * Property name or function to extract the value from each option
-     */
-    getOptionValue?: string | ((option: any) => string | number);
-    /**
-     * Property name or function to determine if an option is disabled
-     */
-    getOptionDisabled?: string | ((option: any) => boolean);
-    /**
-     * Property name or function to extract the group from each option
-     */
-    getOptionGroup?: string | ((option: any) => string);
-    /**
-     * Callback fired when selection changes
-     */
-    onChange?: (values: (string | number)[], selectedOptions: MultiSelectOption[]) => void;
-    /**
-     * If true, component is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If true, field is required
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Unique identifier
-     */
-    id?: string;
-    /**
-     * Name attribute for form integration
-     */
-    name?: string;
-    /**
-     * Selection style
-     * @default 'checkbox'
-     */
-    selectionStyle?: 'checkbox' | 'checkmark';
-    /**
-     * If true, shows a searchable input in the dropdown
-     * @default false
-     */
-    searchable?: boolean;
-    /**
-     * If true, shows Select All / Clear All actions
-     * @default false
-     */
-    showSelectAll?: boolean;
-    /**
-     * Maximum number of chips to display before showing "+N more"
-     * @default undefined (shows all)
-     */
-    maxChipsDisplay?: number;
-    /**
-     * Custom chip color
-     * @default 'primary'
-     */
-    chipColor?: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
-    /**
-     * Custom chip variant
-     * @default 'light'
-     */
-    chipVariant?: 'filled' | 'outlined' | 'light';
-    /**
-     * If true, shows a loading spinner in the dropdown
-     * @default false
-     */
-    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 _default: React.FC<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;

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

@@ -1,3 +0,0 @@
-export { default as MultiSelect } from './MultiSelect';
-export type { MultiSelectProps, MultiSelectOption } from './MultiSelect';
-export { MultiSelect as MultiSelectComponent } from './MultiSelect';