@vtx-ui/react 0.0.1-beta.1

package/dist/types/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/types/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/types/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/types/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/types/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/types/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';

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

@@ -0,0 +1,169 @@
+import React, { SelectHTMLAttributes } from 'react';
+import './Select.css';
+export interface SelectOption {
+    /**
+     * Value of the option
+     */
+    value: string;
+    /**
+     * 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 SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /**
+     * Label text displayed above the select
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the select
+     * Provides additional context or instructions
+     */
+    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?: 'small' | 'medium' | 'large';
+    /**
+     * If true, select will take full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Options to display in the select dropdown
+     */
+    options: SelectOption[];
+    /**
+     * Placeholder text shown when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * Custom class name for the wrapper element
+     */
+    wrapperClassName?: string;
+    /**
+     * If true, groups options by their group property
+     * @default false
+     */
+    grouped?: boolean;
+    /**
+     * Property name or function to extract the display label from each option
+     * @default 'label'
+     * @example
+     * getOptionLabel="productName" // uses option.productName
+     * getOptionLabel={(option) => option.firstName + ' ' + option.lastName}
+     */
+    getOptionLabel?: string | ((option: any) => string);
+    /**
+     * Property name or function to extract the value from each option
+     * @default 'value'
+     * @example
+     * getOptionValue="id" // uses option.id
+     * getOptionValue={(option) => option.uuid}
+     */
+    getOptionValue?: string | ((option: any) => string | number);
+    /**
+     * Property name or function to determine if an option is disabled
+     * @default 'disabled'
+     * @example
+     * getOptionDisabled="isInactive" // uses option.isInactive
+     * getOptionDisabled={(option) => option.stock === 0}
+     */
+    getOptionDisabled?: string | ((option: any) => boolean);
+    /**
+     * Property name or function to extract the group from each option
+     * @default 'group'
+     * @example
+     * getOptionGroup="category" // uses option.category
+     * getOptionGroup={(option) => option.department}
+     */
+    getOptionGroup?: string | ((option: any) => string);
+    /**
+     * Callback fired when selection changes
+     * Provides both event and selected option
+     */
+    onSelectChange?: (value: string, option: SelectOption | undefined) => void;
+    /**
+     * If true, shows a loading spinner in place of the dropdown icon
+     * @default false
+     */
+    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 _default: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+export { Select as SelectComponent } from './Select';