@true-tech-team/react-components 0.0.1

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

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+import { IconName } from '../../../assets/icons';
+import { ComponentVariant, ComponentSize, BaseComponentProps } from '../../../types';
+/**
+ * Autocomplete option
+ */
+export interface AutocompleteOption {
+    key: string;
+    label: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+/**
+ * Autocomplete component props
+ */
+export interface AutocompleteProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Input variant
+     * @default 'primary'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Input size
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Input label
+     */
+    label?: string;
+    /**
+     * Input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Available options
+     */
+    options: AutocompleteOption[];
+    /**
+     * Selected value(s) (controlled)
+     */
+    value?: string | string[];
+    /**
+     * Default value (uncontrolled)
+     */
+    defaultValue?: string | string[];
+    /**
+     * Selection mode
+     * @default 'single'
+     */
+    selectionMode?: 'single' | 'multi';
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: string | string[]) => void;
+    /**
+     * Callback when input value changes
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * Custom filter function
+     * @default case-insensitive includes
+     */
+    filterFunction?: (option: AutocompleteOption, inputValue: string) => boolean;
+    /**
+     * Async data loading function
+     */
+    onLoadOptions?: (inputValue: string) => Promise<AutocompleteOption[]>;
+    /**
+     * Debounce delay for async loading (ms)
+     * @default 300
+     */
+    debounceDelay?: number;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+    /**
+     * No options message
+     * @default 'No options'
+     */
+    noOptionsMessage?: string;
+    /**
+     * Highlight matching text
+     * @default true
+     */
+    highlightMatch?: boolean;
+    /**
+     * Start icon
+     */
+    startIcon?: ReactNode | IconName;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Error state
+     */
+    error?: boolean;
+    /**
+     * Helper text
+     */
+    helperText?: string;
+}
+/**
+ * Autocomplete component
+ * Filterable input with dropdown menu
+ */
+export declare const Autocomplete: React.FC<AutocompleteProps>;

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

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

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

@@ -0,0 +1,85 @@
+import { default as React } from 'react';
+import { ComponentSize, ComponentVariant, InputBaseProps } from '../../../types';
+import { IconName } from '../../../assets/icons';
+export interface CheckboxProps extends Omit<InputBaseProps, 'value' | 'onChange' | 'placeholder'> {
+    /**
+     * Checkbox variant style
+     * @default 'primary'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Checkbox size
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Default checked state for uncontrolled component
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Callback fired when the checkbox state changes
+     * @param checked - The new checked state
+     * @param event - The change event
+     */
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Label text to display next to checkbox
+     */
+    label?: string;
+    /**
+     * Label placement relative to checkbox
+     * @default 'end'
+     */
+    labelPlacement?: 'start' | 'end';
+    /**
+     * Helper text to display below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Error message to display when checkbox is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Whether the checkbox is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Custom check icon
+     * Can be icon name (string) or React component
+     */
+    checkIcon?: React.ReactNode | IconName;
+    /**
+     * Custom indeterminate icon
+     * Can be icon name (string) or React component
+     */
+    indeterminateIcon?: React.ReactNode | IconName;
+    /**
+     * ID for the input element (also used for label[for])
+     * Auto-generated if not provided
+     */
+    id?: string;
+}
+/**
+ * Checkbox component
+ * A checkbox input with support for checked, unchecked, and indeterminate states
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   checked={accepted}
+ *   onChange={(checked) => setAccepted(checked)}
+ * />
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export interface ColorPickerProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Controlled color value (hex format)
+     */
+    value?: string;
+    /**
+     * Default color value (hex format)
+     */
+    defaultValue?: string;
+    /**
+     * Callback when color changes
+     */
+    onChange?: (color: string) => void;
+    /**
+     * Callback when input loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Color format for display and output
+     */
+    format?: ColorFormat;
+    /**
+     * Show alpha channel slider
+     */
+    showAlpha?: boolean;
+    /**
+     * Show preset color palette
+     */
+    showPresets?: boolean;
+    /**
+     * Preset colors (hex format)
+     */
+    presetColors?: string[];
+    /**
+     * Show color input field
+     */
+    showInput?: boolean;
+    /**
+     * Show color swatch preview
+     */
+    showSwatch?: boolean;
+    /**
+     * Input label text
+     */
+    label?: string;
+    /**
+     * 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 the input is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * ColorPicker component with HSL/RGB sliders and color canvas
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   label="Choose Color"
+ *   defaultValue="#FF5733"
+ *   onChange={(color) => console.log(color)}
+ * />
+ * ```
+ */
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,2 @@
+export { ColorPicker } from './ColorPicker';
+export type { ColorPickerProps, ColorFormat } from './ColorPicker';

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

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+import { IconName } from '../../../assets/icons';
+export interface DatePickerProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Controlled date value
+     */
+    value?: Date | null;
+    /**
+     * Default date value (uncontrolled)
+     */
+    defaultValue?: Date | null;
+    /**
+     * Callback when date changes
+     */
+    onChange?: (date: Date | null) => void;
+    /**
+     * Callback when input loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Array of disabled dates
+     */
+    disabledDates?: Date[];
+    /**
+     * Date format string
+     */
+    format?: string;
+    /**
+     * Show calendar popup
+     */
+    showCalendar?: boolean;
+    /**
+     * Show clear button
+     */
+    showClearButton?: boolean;
+    /**
+     * Start icon (calendar icon by default)
+     */
+    startIcon?: React.ReactNode | IconName;
+    /**
+     * Input label text
+     */
+    label?: string;
+    /**
+     * 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 the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+}
+/**
+ * DatePicker component with custom calendar UI built from scratch
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,115 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+export interface DateRangePreset {
+    label: string;
+    getValue: () => {
+        startDate: Date;
+        endDate: Date;
+    };
+}
+export interface DateRangePickerProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Controlled start date value
+     */
+    startDate?: Date | null;
+    /**
+     * Controlled end date value
+     */
+    endDate?: Date | null;
+    /**
+     * Default start date (uncontrolled)
+     */
+    defaultStartDate?: Date | null;
+    /**
+     * Default end date (uncontrolled)
+     */
+    defaultEndDate?: Date | null;
+    /**
+     * Callback when date range changes
+     */
+    onChange?: (startDate: Date | null, endDate: Date | null) => void;
+    /**
+     * Callback when input loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Minimum number of days in range
+     */
+    minDays?: number;
+    /**
+     * Maximum number of days in range
+     */
+    maxDays?: number;
+    /**
+     * Date format string
+     */
+    format?: string;
+    /**
+     * Separator between start and end dates
+     */
+    separator?: string;
+    /**
+     * Show calendar popup
+     */
+    showCalendar?: boolean;
+    /**
+     * Show clear button
+     */
+    showClearButton?: boolean;
+    /**
+     * Show preset ranges
+     */
+    showPresets?: boolean;
+    /**
+     * Custom preset ranges
+     */
+    presets?: DateRangePreset[];
+    /**
+     * Input label text
+     */
+    label?: string;
+    /**
+     * 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 the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+}
+/**
+ * DateRangePicker component with custom dual calendar UI
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   label="Select Date Range"
+ *   onChange={(start, end) => console.log(start, end)}
+ * />
+ * ```
+ */
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,2 @@
+export { DateRangePicker } from './DateRangePicker';
+export type { DateRangePickerProps, DateRangePreset } from './DateRangePicker';

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

@@ -0,0 +1,101 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+export interface FileError {
+    file: File;
+    error: 'size' | 'type' | 'count';
+    message: string;
+}
+export interface FilePickerProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Accepted file types (e.g., "image/*", ".pdf", "image/png,image/jpeg")
+     */
+    accept?: string;
+    /**
+     * Allow multiple file selection
+     */
+    multiple?: boolean;
+    /**
+     * Maximum number of files (only applies when multiple is true)
+     */
+    maxFiles?: number;
+    /**
+     * Maximum file size in bytes
+     */
+    maxSize?: number;
+    /**
+     * Callback when files change
+     */
+    onChange?: (files: File[]) => void;
+    /**
+     * Callback when file validation error occurs
+     */
+    onError?: (errors: FileError[]) => void;
+    /**
+     * Callback when input loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Input label text
+     */
+    label?: string;
+    /**
+     * 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 the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Enable drag and drop
+     */
+    dragAndDrop?: boolean;
+    /**
+     * Show file preview for images
+     */
+    showPreview?: boolean;
+    /**
+     * Show list of selected files
+     */
+    showFileList?: boolean;
+    /**
+     * Custom button text
+     */
+    buttonText?: string;
+    /**
+     * Custom dropzone text
+     */
+    dropzoneText?: string;
+    /**
+     * Icon to display in button/dropzone
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * FilePicker component with drag & drop and file preview
+ *
+ * @example
+ * ```tsx
+ * <FilePicker
+ *   label="Upload Files"
+ *   accept="image/*"
+ *   multiple
+ *   dragAndDrop
+ *   showPreview
+ *   onChange={(files) => console.log(files)}
+ * />
+ * ```
+ */
+export declare const FilePicker: React.ForwardRefExoticComponent<FilePickerProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,2 @@
+export { FilePicker } from './FilePicker';
+export type { FilePickerProps, FileError } from './FilePicker';