@vtx-ui/react 0.0.1-beta.12 → 0.0.1-beta.14

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

@@ -0,0 +1,173 @@
+import React, { InputHTMLAttributes } from 'react';
+import { Size } from '../../theme';
+import './Autocomplete.css';
+export interface AutocompleteOption {
+    /**
+     * Value of the option
+     */
+    value: string;
+    /**
+     * Display label for the option
+     */
+    label: string;
+    /**
+     * Optional description or secondary text
+     */
+    description?: string;
+    /**
+     * If true, option cannot be selected
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon to display before label
+     */
+    icon?: React.ReactNode;
+}
+export interface AutocompleteProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'onSelect'> {
+    /**
+     * 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 theme.defaultSize
+     */
+    size?: Size;
+    /**
+     * If true, input will take full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Options to display in the autocomplete dropdown
+     */
+    options: any[];
+    /**
+     * 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);
+    /**
+     * 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 description from each option
+     * @default 'description'
+     */
+    getOptionDescription?: string | ((option: any) => string | undefined);
+    /**
+     * Property name or function to extract the icon from each option
+     * @default 'icon'
+     */
+    getOptionIcon?: string | ((option: any) => React.ReactNode);
+    /**
+     * Message to display when no options are available
+     * @default 'No options'
+     */
+    noOptionsMessage?: string;
+    /**
+     * If true, shows a loading spinner
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Loading message to display
+     * @default 'Loading...'
+     */
+    loadingMessage?: string;
+    /**
+     * Callback fired when input value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback fired when an option is selected
+     * Provides the selected option and its value
+     */
+    onSelect?: (value: string, option: any) => void;
+    /**
+     * If true, shows search icon on the left
+     * @default false
+     */
+    showSearchIcon?: boolean;
+    /**
+     * If true, shows a clear button when input has value
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * 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;
+    /**
+     * Custom class name for the dropdown element
+     */
+    dropdownClassName?: string;
+    /**
+     * Custom render function for options
+     */
+    renderOption?: (option: any, index: number) => React.ReactNode;
+    /**
+     * Input value (controlled)
+     */
+    value?: string;
+    /**
+     * If true, opens dropdown on focus even if input is empty
+     * @default true
+     */
+    openOnFocus?: boolean;
+    /**
+     * Minimum characters to type before showing options
+     * @default 0
+     */
+    minSearchLength?: number;
+}
+declare const AutocompleteWithParsedClasses: {
+    (props: AutocompleteProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export { AutocompleteWithParsedClasses as Autocomplete };

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

@@ -0,0 +1,2 @@
+export { default as Autocomplete } from './Autocomplete';
+export type { AutocompleteProps, AutocompleteOption } from './Autocomplete';

package/dist/types/components/DatePicker/Calendar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface CalendarProps {
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    currentMonth?: Date;
+    onMonthChange?: (date: Date) => void;
+    isDateDisabled?: (date: Date) => boolean;
+    rangeValue?: [Date | null, Date | null];
+    onRangeChange?: (range: [Date | null, Date | null]) => void;
+    isRangeMode?: boolean;
+}
+export declare const Calendar: React.FC<CalendarProps>;

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Size } from '../../theme';
+import './DatePicker.css';
+export interface DatePickerProps {
+    /**
+     * The selected date value
+     */
+    value?: Date | null;
+    /**
+     * Callback fired when the date changes
+     */
+    onChange?: (date: Date | null) => void;
+    /**
+     * Label text displayed above the input
+     */
+    label?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Success message
+     */
+    success?: string;
+    /**
+     * Size of the input
+     */
+    size?: Size;
+    /**
+     * If true, input will take full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * If true, the field is required
+     */
+    required?: boolean;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Array of disabled dates
+     */
+    disabledDates?: Date[];
+    /**
+     * Custom function to determine if a date should be disabled
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Date format for display
+     * @default 'MM/DD/YYYY'
+     */
+    format?: string;
+    /**
+     * Show today button in footer
+     * @default true
+     */
+    showToday?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Custom class name for the input
+     */
+    inputClassName?: string;
+    /**
+     * Custom class name for the dropdown
+     */
+    dropdownClassName?: string;
+    /**
+     * If true, shows a clear button when input has value
+     * @default false
+     */
+    clearable?: boolean;
+}
+declare const DatePickerWithParsedClasses: {
+    (props: DatePickerProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export { DatePickerWithParsedClasses as DatePicker };

package/dist/types/components/DatePicker/DateRangePicker.d.ts

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Size } from '../../theme';
+import './DatePicker.css';
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+export interface DateRangePickerProps {
+    /**
+     * The selected date range value
+     */
+    value?: DateRange;
+    /**
+     * Callback fired when the date range changes
+     */
+    onChange?: (range: DateRange) => void;
+    /**
+     * Label text displayed above the input
+     */
+    label?: string;
+    /**
+     * Placeholder text for start date
+     */
+    startPlaceholder?: string;
+    /**
+     * Placeholder text for end date
+     */
+    endPlaceholder?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Success message
+     */
+    success?: string;
+    /**
+     * Size of the input
+     */
+    size?: Size;
+    /**
+     * If true, input will take full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * If true, the field is required
+     */
+    required?: boolean;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Array of disabled dates
+     */
+    disabledDates?: Date[];
+    /**
+     * Custom function to determine if a date should be disabled
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Date format for display
+     * @default 'MM/DD/YYYY'
+     */
+    format?: string;
+    /**
+     * Range separator text
+     * @default 'to'
+     */
+    separator?: string;
+    /**
+     * Preset date ranges
+     */
+    presets?: {
+        label: string;
+        range: DateRange;
+    }[];
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Custom class name for the input
+     */
+    inputClassName?: string;
+    /**
+     * Custom class name for the dropdown
+     */
+    dropdownClassName?: string;
+    /**
+     * If true, shows a clear button when input has value
+     * @default false
+     */
+    clearable?: boolean;
+}
+declare const DateRangePickerWithParsedClasses: {
+    (props: DateRangePickerProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export { DateRangePickerWithParsedClasses as DateRangePicker };

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

@@ -0,0 +1,6 @@
+export { default as DatePicker } from './DatePicker';
+export { default as DateRangePicker } from './DateRangePicker';
+export type { DatePickerProps } from './DatePicker';
+export type { DateRangePickerProps, DateRange } from './DateRangePicker';
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Size } from '../../theme';
+import './FormControl.css';
+export interface FormControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Label text displayed above the form field
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the form field
+     * Provides additional context or instructions
+     */
+    helperText?: string;
+    /**
+     * Error message - when provided, field is shown in error state
+     * Takes precedence over helperText when both are present
+     */
+    error?: string;
+    /**
+     * Success message - when provided, field is shown in success state
+     */
+    success?: string;
+    /**
+     * Size of the form control
+     * Passed to child components if they support size prop
+     * @default theme.defaultSize
+     */
+    size?: Size;
+    /**
+     * If true, form control will take full width of its container
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, adds required indicator to label
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * If true, applies disabled styling
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom class name for the wrapper element
+     */
+    wrapperClassName?: string;
+    /**
+     * Custom class name for the label element
+     */
+    labelClassName?: string;
+    /**
+     * Spacing between form controls when stacked
+     * @default 'md'
+     */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Form control children (Input, Textarea, Select, etc.)
+     */
+    children: React.ReactNode;
+    /**
+     * Custom id for accessibility
+     */
+    id?: string;
+    /**
+     * Position of the label
+     * @default 'top'
+     */
+    labelPosition?: 'top' | 'left';
+}
+declare const FormControlWithParsedClasses: {
+    (props: FormControlProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<FormControlProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { FormControlWithParsedClasses as FormControl };

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

@@ -0,0 +1,3 @@
+export { default as FormControl } from './FormControl';
+export type { FormControlProps } from './FormControl';
+export { FormControl as FormControlComponent } from './FormControl';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * If true, always use native <img> even if a custom imageComponent is provided in ThemeProvider
+     * @default false
+     */
+    forceNative?: boolean;
+    /**
+     * Custom image component to use (overrides ThemeProvider)
+     */
+    imageComponent?: React.ElementType;
+}
+export declare const Image: React.FC<ImageProps>;
+export default Image;

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

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export type { ImageProps } from './Image';

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

@@ -52,6 +52,11 @@ export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>,
      * @default false
      */
     external?: boolean;
+    /**
+     * If true or string, triggers browser download
+     * @default false
+     */
+    download?: boolean | string;
     children?: React.ReactNode;
 }
 declare const LinkWithParsedClasses: {