@true-tech-team/react-components 0.0.1

package/lib/components/inputs/Input/Input.d.ts

@@ -0,0 +1,171 @@
+import { default as React } from 'react';
+import { InputBaseProps } from '../../../types';
+import { IconName } from '../../../assets/icons';
+/**
+ * Validation timing options
+ */
+export type ValidationTiming = 'blur' | 'change' | 'submit' | 'manual';
+/**
+ * HTML input types supported
+ */
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
+/**
+ * Format mask configuration for auto-formatting input
+ */
+export interface FormatMask {
+    /**
+     * The pattern to format (e.g., "(###) ###-####" for phone)
+     */
+    pattern: string;
+    /**
+     * Character used as placeholder in pattern (default: '#')
+     */
+    placeholder?: string;
+}
+/**
+ * Validation result passed to onValidate callback
+ */
+export interface ValidationResult {
+    /**
+     * Whether the input is valid
+     */
+    isValid: boolean;
+    /**
+     * The value that was validated
+     */
+    value: string;
+    /**
+     * The validation regex pattern used
+     */
+    pattern?: RegExp;
+}
+export interface InputProps extends Omit<InputBaseProps, 'children'> {
+    /**
+     * HTML input type
+     * @default 'text'
+     */
+    type?: InputType;
+    /**
+     * Label text to display above input
+     */
+    label?: string;
+    /**
+     * ID for the input element (also used for label[for])
+     * Auto-generated if not provided
+     */
+    id?: string;
+    /**
+     * Icon to display at start of input
+     * Can be icon name (string) or React component
+     */
+    startIcon?: React.ReactNode | IconName;
+    /**
+     * Icon to display at end of input
+     * Can be icon name (string) or React component
+     */
+    endIcon?: React.ReactNode | IconName;
+    /**
+     * Helper text to display below input
+     */
+    helperText?: string;
+    /**
+     * Error message to display (overrides helperText when present)
+     */
+    errorMessage?: string;
+    /**
+     * Whether the input is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Maximum character length (enables character counter)
+     */
+    maxLength?: number;
+    /**
+     * Show character counter when maxLength is set
+     * @default true
+     */
+    showCounter?: boolean;
+    /**
+     * Regex pattern to filter what characters can be entered
+     * Prevents invalid characters from being typed
+     * @example /^[0-9]*$/ - only allow numbers
+     */
+    inputFilter?: RegExp;
+    /**
+     * Auto-formatting mask to apply as user types
+     * Formats the input value according to a pattern
+     * @example { pattern: "(###) ###-####" } - formats phone number
+     */
+    formatMask?: FormatMask | string;
+    /**
+     * Regex pattern for validation
+     */
+    validationRegex?: RegExp;
+    /**
+     * Validation callback - called when validation is triggered
+     */
+    onValidate?: (result: ValidationResult) => void;
+    /**
+     * When to trigger validation
+     * @default 'blur'
+     */
+    validateOn?: ValidationTiming;
+    /**
+     * Show clear button (X icon) when input has value
+     * @default false
+     */
+    showClearButton?: boolean;
+    /**
+     * Show password visibility toggle for password inputs
+     * @default true
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * Prefix text or component to display before input value
+     */
+    prefix?: React.ReactNode | string;
+    /**
+     * Suffix text or component to display after input value
+     */
+    suffix?: React.ReactNode | string;
+    /**
+     * Loading state - shows spinner
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Auto-focus the input on mount
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Auto-complete attribute
+     */
+    autoComplete?: string;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultValue?: string;
+    /**
+     * Callback when input is focused
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when input loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * Callback when Enter key is pressed
+     */
+    onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Input component with comprehensive features
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/lib/components/inputs/Input/index.d.ts

@@ -0,0 +1,3 @@
+export { Input } from './Input';
+export type { InputProps, ValidationResult, FormatMask, ValidationTiming, InputType } from './Input';
+export { default } from './Input';

package/lib/components/inputs/NumberInput/NumberInput.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'onBlur'> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    error?: boolean;
+    formatDisplay?: (value: number) => string;
+    id?: string;
+    'data-testid'?: string;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/inputs/NumberInput/index.d.ts

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

package/lib/components/inputs/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,87 @@
+import { default as React } from 'react';
+import { InputBaseProps } from '../../../types/component.types';
+/**
+ * Country data for phone input
+ */
+export interface Country {
+    code: string;
+    name: string;
+    dialCode: string;
+    flag: string;
+    format?: string;
+}
+export interface PhoneInputProps extends Omit<InputBaseProps, 'value' | 'onChange' | 'type' | 'onBlur'> {
+    /**
+     * Controlled phone number value (full number with country code)
+     */
+    value?: string;
+    /**
+     * Default phone number value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Default country code (ISO 3166-1 alpha-2)
+     */
+    defaultCountry?: string;
+    /**
+     * Callback when phone number changes
+     */
+    onChange?: (phone: string, country: Country) => void;
+    /**
+     * Callback when input loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Input label text
+     */
+    label?: string;
+    /**
+     * Label placement
+     */
+    labelPlacement?: 'top' | 'left';
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message (shows when error is true)
+     */
+    errorMessage?: string;
+    /**
+     * Whether the input is in an error state
+     */
+    error?: boolean;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether to show the country search dropdown
+     */
+    showCountrySearch?: boolean;
+    /**
+     * Placeholder for country search
+     */
+    countrySearchPlaceholder?: string;
+    /**
+     * Custom country list (defaults to common countries)
+     */
+    countries?: Country[];
+    /**
+     * Whether to format the phone number based on country format
+     */
+    autoFormat?: boolean;
+}
+/**
+ * PhoneInput component with country code selector and auto-formatting
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput
+ *   label="Phone Number"
+ *   defaultCountry="US"
+ *   onChange={(phone, country) => console.log(phone, country)}
+ * />
+ * ```
+ */
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/inputs/PhoneInput/index.d.ts

@@ -0,0 +1,2 @@
+export { PhoneInput } from './PhoneInput';
+export type { PhoneInputProps, Country } from './PhoneInput';

package/lib/components/inputs/Radio/Radio.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+import { IconName } from '../../../assets/icons';
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
+    /**
+     * The value of this radio button
+     */
+    value: string;
+    /**
+     * Label text to display next to radio
+     */
+    label?: string;
+    /**
+     * Label placement relative to radio
+     * @default 'end'
+     */
+    labelPlacement?: 'start' | 'end';
+    /**
+     * Helper text to display below the radio
+     */
+    helperText?: string;
+    /**
+     * Custom checked icon
+     * Can be icon name (string) or React component
+     */
+    checkedIcon?: React.ReactNode | IconName;
+    /**
+     * ID for the input element
+     * Auto-generated if not provided
+     */
+    id?: string;
+    /**
+     * Data test ID for testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Radio component
+ * Individual radio button to be used within RadioGroup
+ *
+ * @example
+ * ```tsx
+ * <Radio value="option1" label="Option 1" />
+ * ```
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/inputs/Radio/RadioGroup.d.ts

@@ -0,0 +1,88 @@
+import { default as React } from 'react';
+import { ComponentSize, ComponentVariant, InputBaseProps } from '../../../types';
+export interface RadioGroupContextValue {
+    name: string;
+    value?: string;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: ComponentSize;
+    variant?: ComponentVariant;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupContextValue | null>;
+export declare const useRadioGroup: () => RadioGroupContextValue;
+export interface RadioGroupProps extends Omit<InputBaseProps, 'value' | 'onChange' | 'placeholder'> {
+    /**
+     * RadioGroup variant style
+     * @default 'primary'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Radio button size
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Currently selected value
+     */
+    value?: string;
+    /**
+     * Default selected value for uncontrolled component
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when selection changes
+     * @param value - The selected value
+     * @param event - The change event
+     */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Layout orientation
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Group label
+     */
+    label?: string;
+    /**
+     * Helper text to display below the group
+     */
+    helperText?: string;
+    /**
+     * Error message to display when group is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Whether the group is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Radio button children
+     */
+    children: React.ReactNode;
+    /**
+     * Gap between radio buttons (in spacing units)
+     * @default 2 (8px)
+     */
+    gap?: number;
+    /**
+     * ID for the fieldset element
+     */
+    id?: string;
+}
+/**
+ * RadioGroup component
+ * Container for Radio buttons that manages selection state
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={size} onChange={setSize} label="Select size">
+ *   <Radio value="small" label="Small" />
+ *   <Radio value="medium" label="Medium" />
+ *   <Radio value="large" label="Large" />
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

package/lib/components/inputs/Radio/index.d.ts

@@ -0,0 +1,4 @@
+export { Radio } from './Radio';
+export type { RadioProps } from './Radio';
+export { RadioGroup, useRadioGroup, RadioGroupContext } from './RadioGroup';
+export type { RadioGroupProps, RadioGroupContextValue } from './RadioGroup';

package/lib/components/inputs/Rating/Rating.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ComponentSize } from '../../../types';
+import { IconName } from '../../../assets/icons';
+export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
+    size?: ComponentSize;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    max?: number;
+    precision?: number;
+    icon?: React.ReactNode | IconName;
+    emptyIcon?: React.ReactNode | IconName;
+    label?: string;
+    helperText?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    'data-testid'?: string;
+}
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/inputs/Rating/index.d.ts

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

package/lib/components/inputs/Select/Select.d.ts

@@ -0,0 +1,142 @@
+import { default as React } from 'react';
+import { IconName } from '../../../assets/icons';
+export interface SelectOption {
+    /**
+     * Option value
+     */
+    value: string;
+    /**
+     * Option label (displayed text)
+     */
+    label: React.ReactNode;
+    /**
+     * Whether option is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional group name for grouping options
+     */
+    group?: string;
+}
+export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Options to display
+     */
+    options: SelectOption[];
+    /**
+     * Selected value
+     */
+    value?: string;
+    /**
+     * Default selected value for uncontrolled component
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when selection changes
+     */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLSelectElement>) => void;
+    /**
+     * Callback fired when select loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * Whether the select is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the select is read-only
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the select is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Label text to display above select
+     */
+    label?: string;
+    /**
+     * Helper text to display below select
+     */
+    helperText?: string;
+    /**
+     * Error message to display when in error state
+     */
+    errorMessage?: string;
+    /**
+     * Whether the select is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Show clear button to reset selection
+     * @default false
+     */
+    showClearButton?: boolean;
+    /**
+     * Icon to display at start of select
+     */
+    startIcon?: React.ReactNode | IconName;
+    /**
+     * Icon to display at end of select (overrides default dropdown arrow)
+     */
+    endIcon?: React.ReactNode | IconName;
+    /**
+     * Placeholder text when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * ID for the select element
+     * Auto-generated if not provided
+     */
+    id?: string;
+    /**
+     * Enable search functionality for filtering options
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder text for search input
+     * @default 'Search...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Whether to scroll to the selected item when menu opens
+     * @default true
+     */
+    scrollToSelected?: boolean;
+    /**
+     * Enable keyboard type-ahead navigation
+     * When enabled, typing characters will jump to/cycle through matching items
+     * @default false
+     */
+    enableTypeAhead?: boolean;
+    /**
+     * Delay in milliseconds before resetting the type-ahead search string
+     * @default 500
+     */
+    typeAheadDelay?: number;
+}
+/**
+ * Select component
+ * Custom select element with Menu component, option grouping, and optional search
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'ca', label: 'Canada' },
+ *   ]}
+ *   value={country}
+ *   onChange={(value) => setCountry(value)}
+ *   searchable
+ * />
+ * ```
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/inputs/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';

package/lib/components/inputs/Slider/Slider.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { ComponentSize, ComponentVariant } from '../../../types';
+export interface Mark {
+    value: number;
+    label?: React.ReactNode;
+}
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size' | 'defaultValue'> {
+    variant?: ComponentVariant;
+    size?: ComponentSize;
+    value?: number | number[];
+    defaultValue?: number | number[];
+    onChange?: (value: number | number[]) => void;
+    onChangeCommitted?: (value: number | number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: boolean | Mark[];
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    error?: boolean;
+    showValue?: boolean;
+    valueLabelDisplay?: 'on' | 'auto' | 'off';
+    valueLabelFormat?: (value: number) => string;
+    orientation?: 'horizontal' | 'vertical';
+    id?: string;
+    'data-testid'?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/inputs/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps, Mark } from './Slider';