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

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

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

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

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

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

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

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

@@ -1,169 +0,0 @@
-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/components/Select/index.d.ts

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

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

@@ -1,118 +0,0 @@
-import React from 'react';
-import './SideMenu.css';
-export interface SideMenuItemProps {
-    /**
-     * Menu item label
-     */
-    label: string;
-    /**
-     * Click handler
-     */
-    onClick?: () => void;
-    /**
-     * Icon to display before label
-     */
-    icon?: React.ReactNode;
-    /**
-     * Whether the item is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether the item is active/selected
-     * @default false
-     */
-    active?: boolean;
-    /**
-     * Submenu items for nested navigation
-     */
-    items?: SideMenuItemProps[];
-    /**
-     * Badge content (number or text)
-     */
-    badge?: string | number;
-    /**
-     * Custom href for links
-     */
-    href?: string;
-}
-export interface SideMenuProps {
-    /**
-     * Menu items configuration
-     */
-    items: SideMenuItemProps[];
-    /**
-     * Whether the sidebar is collapsed
-     * @default false
-     */
-    collapsed?: boolean;
-    /**
-     * Collapse toggle handler
-     */
-    onCollapseToggle?: (collapsed: boolean) => void;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Sidebar width when expanded
-     * @default '260px'
-     */
-    width?: string | number;
-    /**
-     * Sidebar width when collapsed
-     * @default '80px'
-     */
-    collapsedWidth?: string | number;
-    /**
-     * Header content (logo, title)
-     */
-    header?: React.ReactNode;
-    /**
-     * Footer content
-     */
-    footer?: React.ReactNode;
-}
-/**
- * SideMenuItem component - Individual sidebar menu item with submenu support
- */
-export declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & {
-    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 _default: React.FC<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;

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

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