@true-tech-team/react-components 0.0.1

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

@@ -0,0 +1,101 @@
+import { default as React } from 'react';
+import { InputBaseProps } from '../../../types/component.types';
+export interface TagInputProps extends Omit<InputBaseProps, 'value' | 'onChange' | 'type' | 'defaultValue' | 'onBlur'> {
+    /**
+     * Controlled tags array
+     */
+    value?: string[];
+    /**
+     * Default tags (uncontrolled)
+     */
+    defaultValue?: string[];
+    /**
+     * Callback when tags change
+     */
+    onChange?: (tags: string[]) => 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;
+    /**
+     * Maximum number of tags allowed
+     */
+    maxTags?: number;
+    /**
+     * Delimiters that trigger tag creation (default: Enter, comma)
+     */
+    delimiters?: string[];
+    /**
+     * Allow duplicate tags
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Transform tag before adding (e.g., lowercase, trim)
+     */
+    transformTag?: (tag: string) => string;
+    /**
+     * Validate tag before adding
+     */
+    validateTag?: (tag: string) => boolean | string;
+    /**
+     * Autocomplete suggestions
+     */
+    suggestions?: string[];
+    /**
+     * Show autocomplete suggestions
+     */
+    showSuggestions?: boolean;
+    /**
+     * Placeholder for input field
+     */
+    placeholder?: string;
+    /**
+     * Custom tag render function
+     */
+    renderTag?: (tag: string, onRemove: () => void) => React.ReactNode;
+    /**
+     * Whether to clear input on blur
+     */
+    clearOnBlur?: boolean;
+    /**
+     * Add tag on blur
+     */
+    addOnBlur?: boolean;
+}
+/**
+ * TagInput component for multi-value chip input
+ *
+ * @example
+ * ```tsx
+ * <TagInput
+ *   label="Tags"
+ *   placeholder="Add tags..."
+ *   onChange={(tags) => console.log(tags)}
+ * />
+ * ```
+ */
+export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+import { ValidationResult, ValidationTiming } from '../Input/Input';
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /**
+     * Label text to display above textarea
+     */
+    label?: string;
+    /**
+     * Helper text to display below textarea
+     */
+    helperText?: string;
+    /**
+     * Error message to display when in error state
+     */
+    errorMessage?: string;
+    /**
+     * Whether the textarea is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Number of visible text rows
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Minimum number of rows (for auto-resize)
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows (for auto-resize)
+     */
+    maxRows?: number;
+    /**
+     * Auto-resize textarea based on content
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Maximum character length
+     */
+    maxLength?: number;
+    /**
+     * Show character counter
+     * @default false
+     */
+    showCounter?: boolean;
+    /**
+     * Validation regex pattern
+     */
+    validationRegex?: RegExp;
+    /**
+     * Callback fired when validation completes
+     */
+    onValidate?: (result: ValidationResult) => void;
+    /**
+     * When to perform validation
+     * @default 'blur'
+     */
+    validateOn?: ValidationTiming;
+    /**
+     * Control resize behavior
+     * @default 'vertical'
+     */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    /**
+     * ID for the textarea element
+     * Auto-generated if not provided
+     */
+    id?: string;
+    /**
+     * Data test ID for testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Textarea component
+ * Multi-line text input with auto-resize and character counting
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   label="Description"
+ *   placeholder="Enter description..."
+ *   maxLength={200}
+ *   showCounter
+ * />
+ * ```
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

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

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

@@ -0,0 +1,69 @@
+import { default as React } from 'react';
+import { ComponentSize, ComponentVariant, InputBaseProps } from '../../../types';
+export interface ToggleProps extends Omit<InputBaseProps, 'value' | 'onChange' | 'placeholder'> {
+    /**
+     * Toggle variant style
+     * @default 'primary'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Toggle size
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Whether the toggle is checked
+     */
+    checked?: boolean;
+    /**
+     * Default checked state for uncontrolled component
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback fired when the toggle 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 toggle
+     */
+    label?: string;
+    /**
+     * Label placement relative to toggle
+     * @default 'end'
+     */
+    labelPlacement?: 'start' | 'end';
+    /**
+     * Helper text to display below the toggle
+     */
+    helperText?: string;
+    /**
+     * Error message to display when toggle is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Whether the toggle is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * ID for the input element (also used for label[for])
+     * Auto-generated if not provided
+     */
+    id?: string;
+}
+/**
+ * Toggle (Switch) component
+ * A toggle switch for boolean input with smooth animations
+ *
+ * @example
+ * ```tsx
+ * <Toggle
+ *   label="Enable notifications"
+ *   checked={enabled}
+ *   onChange={(checked) => setEnabled(checked)}
+ * />
+ * ```
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,16 @@
+export * from './Input';
+export * from './Textarea';
+export * from './NumberInput';
+export * from './PhoneInput';
+export * from './TagInput';
+export * from './Select';
+export * from './Autocomplete';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Toggle';
+export * from './Slider';
+export * from './Rating';
+export * from './ColorPicker';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export * from './FilePicker';

package/lib/components/overlays/Dropdown/Dropdown.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import { MenuProps } from '../Menu';
+import { IconName } from '../../../assets/icons';
+import { ComponentVariant, ComponentSize } from '../../../types';
+/**
+ * Dropdown item definition
+ */
+export interface DropdownItem {
+    /**
+     * Unique key for the item
+     */
+    itemKey: string;
+    /**
+     * Label to display
+     */
+    label: ReactNode;
+    /**
+     * Optional icon (icon name or React element)
+     */
+    icon?: ReactNode | IconName;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether this is a divider (renders MenuDivider instead of MenuItem)
+     */
+    divider?: boolean;
+    /**
+     * Click handler for the item
+     */
+    onClick?: () => void;
+}
+/**
+ * Dropdown option for extracting labels (deprecated, use DropdownItem)
+ */
+export interface DropdownOption {
+    itemKey: string;
+    children: ReactNode;
+}
+/**
+ * Dropdown component props
+ */
+export interface DropdownProps extends Omit<MenuProps, 'trigger' | 'children'> {
+    /**
+     * Button text (shown when nothing is selected)
+     */
+    label: ReactNode;
+    /**
+     * Button variant
+     * @default 'outline'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Show chevron icon
+     * @default true
+     */
+    showChevron?: boolean;
+    /**
+     * Button icon
+     */
+    icon?: ReactNode | IconName;
+    /**
+     * Full width button
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Array of items to render as menu items
+     * If provided, children will be ignored
+     */
+    items?: DropdownItem[];
+    /**
+     * Custom children (menu items)
+     * Only used if items prop is not provided
+     */
+    children?: ReactNode;
+}
+export declare const Dropdown: React.FC<DropdownProps>;

package/lib/components/overlays/Dropdown/index.d.ts

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

package/lib/components/overlays/Menu/Menu.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { PopoverProps } from '../Popover';
+import { SelectionMode } from './MenuContext';
+/**
+ * Menu component props
+ */
+export interface MenuProps extends Omit<PopoverProps, 'children' | 'width'> {
+    /**
+     * Menu items (MenuList, MenuItem, etc.)
+     */
+    children: ReactNode;
+    /**
+     * Selection mode
+     * @default 'none'
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Selected item keys (controlled)
+     */
+    selectedKeys?: string[];
+    /**
+     * Default selected keys (uncontrolled)
+     * @default []
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (keys: string[]) => void;
+    /**
+     * Callback when item is selected
+     */
+    onAction?: (key: string) => void;
+    /**
+     * Width configuration for menu
+     * - 'trigger': Match trigger element width
+     * - 'auto': Use natural content width
+     * - 'content': Use content width (fit-content)
+     * - 'max-content': Use maximum content width (takes width of widest item and target)
+     * - number: Fixed width in pixels
+     * @default 'max-content'
+     */
+    width?: PopoverProps['width'];
+    /**
+     * Whether to automatically focus the first menu item when opened
+     * @default true
+     */
+    autoFocusFirstItem?: boolean;
+    /**
+     * Whether to scroll to the selected item when menu opens
+     * @default false
+     */
+    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;
+}
+/**
+ * Menu component
+ * Provides context and keyboard navigation for menu items
+ */
+export declare const Menu: React.FC<MenuProps>;

package/lib/components/overlays/Menu/MenuContext.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Menu context for sharing state across menu components
+ */
+/**
+ * Selection mode for menu
+ */
+export type SelectionMode = 'none' | 'single' | 'multi';
+/**
+ * Menu context value
+ */
+export interface MenuContextValue {
+    /**
+     * Set of selected item keys
+     */
+    selectedKeys: Set<string>;
+    /**
+     * Toggle selection for an item
+     */
+    toggleSelection: (key: string) => void;
+    /**
+     * Selection mode
+     */
+    selectionMode: SelectionMode;
+    /**
+     * Close the menu
+     */
+    closeMenu: () => void;
+    /**
+     * Currently focused item index (-1 means no item is focused)
+     */
+    focusedIndex: number;
+    /**
+     * Set focused item index
+     */
+    setFocusedIndex: (index: number) => void;
+    /**
+     * Total number of items
+     */
+    itemsCount: number;
+    /**
+     * Register a menu item and get assigned index
+     */
+    registerItem: () => number;
+    /**
+     * Callback when item is clicked
+     */
+    onItemAction?: (key: string) => void;
+    /**
+     * Whether to scroll to selected item when menu opens
+     */
+    scrollToSelected?: boolean;
+    /**
+     * Whether type-ahead keyboard navigation is enabled
+     */
+    enableTypeAhead?: boolean;
+    /**
+     * Register item label for type-ahead search
+     */
+    registerItemLabel: (index: number, label: string) => void;
+}
+/**
+ * Menu context
+ */
+export declare const MenuContext: import('react').Context<MenuContextValue | null>;
+/**
+ * Hook to access menu context
+ */
+export declare function useMenuContext(): MenuContextValue;

package/lib/components/overlays/Menu/MenuDivider.d.ts

@@ -0,0 +1,10 @@
+import { BaseComponentProps } from '../../../types';
+/**
+ * MenuDivider component props
+ */
+export type MenuDividerProps = BaseComponentProps;
+/**
+ * MenuDivider component
+ * Visual separator between menu items
+ */
+export declare const MenuDivider: React.FC<MenuDividerProps>;

package/lib/components/overlays/Menu/MenuGroup.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types';
+/**
+ * MenuGroup component props
+ */
+export interface MenuGroupProps extends BaseComponentProps {
+    /**
+     * Group label
+     */
+    label?: string;
+    /**
+     * Menu items
+     */
+    children: ReactNode;
+}
+/**
+ * MenuGroup component
+ * Groups related menu items with an optional label
+ */
+export declare const MenuGroup: React.FC<MenuGroupProps>;

package/lib/components/overlays/Menu/MenuItem.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../../../assets/icons';
+/**
+ * MenuItem component props
+ */
+export interface MenuItemProps extends BaseComponentProps {
+    /**
+     * Unique key for this item
+     */
+    itemKey: string;
+    /**
+     * Whether item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon to display before text
+     */
+    startIcon?: ReactNode | IconName;
+    /**
+     * Icon to display after text
+     */
+    endIcon?: ReactNode | IconName;
+    /**
+     * Keyboard shortcut text to display
+     */
+    shortcut?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Item content
+     */
+    children: ReactNode;
+}
+/**
+ * MenuItem component
+ * Interactive menu item with selection, hover, and keyboard support
+ */
+export declare const MenuItem: React.FC<MenuItemProps>;

package/lib/components/overlays/Menu/MenuList.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types';
+/**
+ * MenuList component props
+ */
+export interface MenuListProps extends BaseComponentProps {
+    /**
+     * Menu items
+     */
+    children: ReactNode;
+}
+/**
+ * MenuList component
+ * Container for menu items with scrolling support
+ */
+export declare const MenuList: React.FC<MenuListProps>;

package/lib/components/overlays/Menu/index.d.ts

@@ -0,0 +1,12 @@
+export { Menu } from './Menu';
+export type { MenuProps } from './Menu';
+export { MenuList } from './MenuList';
+export type { MenuListProps } from './MenuList';
+export { MenuItem } from './MenuItem';
+export type { MenuItemProps } from './MenuItem';
+export { MenuDivider } from './MenuDivider';
+export type { MenuDividerProps } from './MenuDivider';
+export { MenuGroup } from './MenuGroup';
+export type { MenuGroupProps } from './MenuGroup';
+export { MenuContext, useMenuContext } from './MenuContext';
+export type { MenuContextValue, SelectionMode } from './MenuContext';

package/lib/components/overlays/Popover/Popover.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode, RefObject } from 'react';
+import { PopoverPosition, PopoverWidth } from '../../../utils';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Popover component props
+ */
+export interface PopoverProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Whether the popover is open (controlled)
+     */
+    isOpen?: boolean;
+    /**
+     * Default open state (uncontrolled)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Popover position relative to trigger
+     * @default 'bottom'
+     */
+    position?: PopoverPosition;
+    /**
+     * Gap between trigger and popover in pixels
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Allow position to flip if would overflow viewport
+     * @default true
+     */
+    allowFlip?: boolean;
+    /**
+     * Close on click outside
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Close on Escape key
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Trigger element (render prop or ReactNode)
+     */
+    trigger: ReactNode | ((props: {
+        ref: RefObject<HTMLElement>;
+    }) => ReactNode);
+    /**
+     * Popover content
+     */
+    children: ReactNode;
+    /**
+     * Z-index for popover
+     */
+    zIndex?: number;
+    /**
+     * Width configuration for popover
+     * @default 'auto'
+     */
+    width?: PopoverWidth;
+    /**
+     * Callback when popover is closed
+     */
+    onClose?: () => void;
+}
+/**
+ * Popover component
+ * Base component for creating positioned overlays
+ */
+export declare const Popover: React.FC<PopoverProps>;