@vtx-ui/react 0.0.1-beta.1

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

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

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

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

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

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

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import './Radio.css';
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /**
+     * If true, the radio is checked
+     */
+    checked?: boolean;
+    /**
+     * If true, the radio is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The label for the radio
+     */
+    label?: React.ReactNode;
+    /**
+     * The size of the radio
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant of the radio
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+    /**
+     * If true, displays error styling
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Helper text displayed below the radio
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Callback fired when the state is changed
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional CSS class name for the container
+     */
+    className?: string;
+    /**
+     * Additional CSS class name for the input element
+     */
+    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 _default: React.FC<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Radio } from './Radio';
+export type { RadioProps } from './Radio';
+export { Radio as RadioComponent } from './Radio';

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import './RadioGroup.css';
+export interface RadioOption {
+    /**
+     * The value of the radio
+     */
+    value: string;
+    /**
+     * The label for the radio
+     */
+    label: React.ReactNode;
+    /**
+     * If true, the radio is disabled
+     */
+    disabled?: boolean;
+}
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The name for the radio group (all radios will share this name)
+     */
+    name: string;
+    /**
+     * The label for the radio group
+     */
+    label?: React.ReactNode;
+    /**
+     * Array of radio options
+     */
+    options: RadioOption[];
+    /**
+     * The selected value
+     */
+    value?: string;
+    /**
+     * Default selected value for uncontrolled mode
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the selection changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * If true, all radios are disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, displays error styling
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Helper text displayed below the group
+     */
+    helperText?: React.ReactNode;
+    /**
+     * The layout orientation of the radios
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The size of the radios
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant of the radios
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+    /**
+     * Additional CSS class name
+     */
+    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 _default: React.FC<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as RadioGroup } from './RadioGroup';
+export type { RadioGroupProps, RadioOption } from './RadioGroup';
+export { RadioGroup as RadioGroupComponent } from './RadioGroup';