@true-tech-team/react-components 0.0.1

package/lib/assets/icons/index.d.ts

@@ -0,0 +1,105 @@
+import { default as Calendar } from './calendar.svg?react';
+import { default as ChevronDown } from './chevron-down.svg?react';
+import { default as ChevronUp } from './chevron-up.svg?react';
+import { default as ChevronLeft } from './chevron-left.svg?react';
+import { default as ChevronRight } from './chevron-right.svg?react';
+import { default as Close } from './close.svg?react';
+import { default as Check } from './check.svg?react';
+import { default as Minus } from './minus.svg?react';
+import { default as Plus } from './plus.svg?react';
+import { default as Info } from './info.svg?react';
+import { default as Help } from './help.svg?react';
+import { default as Warning } from './warning.svg?react';
+import { default as Error } from './error.svg?react';
+import { default as Eye } from './eye.svg?react';
+import { default as EyeOff } from './eye-off.svg?react';
+import { default as Edit } from './edit.svg?react';
+import { default as Copy } from './copy.svg?react';
+import { default as Delete } from './delete.svg?react';
+import { default as Settings } from './settings.svg?react';
+import { default as Profile } from './profile.svg?react';
+import { default as Preferences } from './preferences.svg?react';
+import { default as Account } from './account.svg?react';
+import { default as Logout } from './logout.svg?react';
+/**
+ * Icon registry mapping icon names to SVG components
+ */
+export declare const iconRegistry: {
+    readonly calendar: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly 'chevron-down': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly 'chevron-up': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly 'chevron-left': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly 'chevron-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly close: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly check: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly minus: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly plus: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly info: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly help: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly warning: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly error: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly eye: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly 'eye-off': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly edit: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly copy: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly delete: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly settings: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly profile: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly preferences: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly account: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly logout: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+};
+/**
+ * Available icon names
+ */
+export type IconName = keyof typeof iconRegistry;
+/**
+ * Named exports for direct import
+ */
+export { Calendar, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, Close, Check, Minus, Plus, Info, Help, Warning, Error, Eye, EyeOff, Edit, Copy, Delete, Settings, Profile, Preferences, Account, Logout, };

package/lib/components/buttons/Button/Button.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { ExtendedComponentSize, ComponentVariant, BaseComponentProps } from '../../../types';
+import { IconName } from '../../../assets/icons';
+export interface ButtonProps extends BaseComponentProps {
+    /**
+     * Button variant
+     * @default 'primary'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: ExtendedComponentSize;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Button type attribute
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether the button should take full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display before the text
+     * Can be an icon name or a React component
+     */
+    startIcon?: React.ReactNode | IconName;
+    /**
+     * Icon to display after the text
+     * Can be an icon name or a React component
+     */
+    endIcon?: React.ReactNode | IconName;
+}
+/**
+ * Button component with multiple variants and sizes
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/lib/components/buttons/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+export { default } from './Button';

package/lib/components/buttons/IconButton/IconButton.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { ComponentVariant, BaseComponentProps, ExtendedComponentSize } from '../../../types';
+import { IconName } from '../../../assets/icons';
+export interface IconButtonProps extends BaseComponentProps {
+    /**
+     * Icon to display (required)
+     */
+    icon: IconName;
+    /**
+     * Button variant
+     * @default 'ghost'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: ExtendedComponentSize;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Button type attribute
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible label (REQUIRED for icon-only buttons)
+     */
+    'aria-label': string;
+}
+/**
+ * IconButton component - a button that displays only an icon
+ *
+ * This component is specifically designed for icon-only buttons with:
+ * - Extended size range (xs through xl)
+ * - Icon size automatically matched to button size
+ * - Default ghost variant for minimal UI
+ * - Required aria-label for accessibility
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/lib/components/buttons/IconButton/index.d.ts

@@ -0,0 +1,3 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
+export { default } from './IconButton';

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

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './IconButton';

package/lib/components/display/Icon/Icon.d.ts

@@ -0,0 +1,43 @@
+import { IconName } from '../../../assets/icons';
+import { BaseComponentProps, ExtendedComponentSize } from '../../../types';
+/**
+ * Maps ExtendedComponentSize to pixel values for icons
+ */
+export declare const ICON_SIZE_MAP: Record<ExtendedComponentSize, number>;
+/**
+ * Converts ExtendedComponentSize to pixel value
+ */
+export declare function getIconSize(size: ExtendedComponentSize | number | string): number | string;
+export interface IconProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Name of the icon from the icon registry
+     */
+    name: IconName;
+    /**
+     * Size of the icon
+     * Can be:
+     * - ExtendedComponentSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' (mapped to pixels)
+     * - number: pixel value
+     * - string: CSS size value
+     * @default 'lg' (24px)
+     */
+    size?: ExtendedComponentSize | number | string;
+    /**
+     * Color of the icon (CSS color value or theme variable)
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Accessible label for screen readers
+     */
+    'aria-label'?: string;
+    /**
+     * Title for the icon (shown on hover)
+     */
+    title?: string;
+}
+/**
+ * Icon component for rendering SVG icons
+ */
+export declare function Icon({ name, size, color, className, 'aria-label': ariaLabel, 'data-testid': testId, title, style, }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+export default Icon;

package/lib/components/display/Icon/index.d.ts

@@ -0,0 +1,3 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+export { default } from './Icon';

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

@@ -0,0 +1 @@
+export * from './Icon';

package/lib/components/forms/FormBuilder/FormBuilder.d.ts

@@ -0,0 +1,109 @@
+import { default as React } from 'react';
+import { ComponentVariant, ComponentSize, BaseComponentProps } from '../../../types';
+import { FormFieldConfig, FormContext as FormContextType } from './types';
+/**
+ * Hook to access form context
+ */
+export declare const useFormContext: () => FormContextType;
+export interface FormBuilderProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Visual style variant
+     */
+    variant?: ComponentVariant;
+    /**
+     * Size of form components
+     */
+    size?: ComponentSize;
+    /**
+     * Field configurations (config mode)
+     */
+    fields?: FormFieldConfig[];
+    /**
+     * Form children (children mode)
+     */
+    children?: React.ReactNode;
+    /**
+     * Initial form values
+     */
+    defaultValues?: Record<string, any>;
+    /**
+     * Callback when form is submitted
+     */
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+    /**
+     * Callback when form values change
+     */
+    onChange?: (values: Record<string, any>) => void;
+    /**
+     * Callback when validation changes
+     */
+    onValidate?: (errors: Record<string, string>) => void;
+    /**
+     * When to validate fields
+     */
+    validateOn?: 'change' | 'blur' | 'submit';
+    /**
+     * Show submit button
+     */
+    showSubmitButton?: boolean;
+    /**
+     * Submit button text
+     */
+    submitButtonText?: string;
+    /**
+     * Submit button variant
+     */
+    submitButtonVariant?: ComponentVariant;
+    /**
+     * Show reset button
+     */
+    showResetButton?: boolean;
+    /**
+     * Reset button text
+     */
+    resetButtonText?: string;
+    /**
+     * Form layout
+     */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /**
+     * Number of columns (for grid layout)
+     */
+    columns?: number;
+    /**
+     * Gap between fields
+     */
+    gap?: number;
+    /**
+     * Loading state (disables form)
+     */
+    loading?: boolean;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+}
+/**
+ * FormBuilder component - Build forms from config or React children
+ *
+ * @example
+ * Config mode:
+ * ```tsx
+ * <FormBuilder
+ *   fields={[
+ *     { name: 'email', type: 'input', label: 'Email', validation: { required: true } },
+ *     { name: 'password', type: 'input', label: 'Password', props: { type: 'password' } }
+ *   ]}
+ *   onSubmit={(values) => console.log(values)}
+ * />
+ * ```
+ *
+ * Children mode:
+ * ```tsx
+ * <FormBuilder onSubmit={(values) => console.log(values)}>
+ *   <Input name="email" label="Email" required />
+ *   <Input name="password" type="password" label="Password" />
+ * </FormBuilder>
+ * ```
+ */
+export declare const FormBuilder: React.ForwardRefExoticComponent<FormBuilderProps & React.RefAttributes<HTMLFormElement>>;

package/lib/components/forms/FormBuilder/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useFormState } from './useFormState';
+export { useFormValidation, validateField } from './useFormValidation';

package/lib/components/forms/FormBuilder/hooks/useFormState.d.ts

@@ -0,0 +1,5 @@
+import { UseFormStateOptions, FormContext } from '../types';
+/**
+ * Hook for managing form state
+ */
+export declare const useFormState: (options?: UseFormStateOptions) => FormContext;

package/lib/components/forms/FormBuilder/hooks/useFormValidation.d.ts

@@ -0,0 +1,11 @@
+import { FormFieldValidation, FormValues } from '../types';
+/**
+ * Validate a field value against validation rules
+ */
+export declare const validateField: (value: any, validation: FormFieldValidation, allValues?: FormValues) => string | null;
+/**
+ * Hook for form validation utilities
+ */
+export declare const useFormValidation: () => {
+    validateField: (value: any, validation: FormFieldValidation, allValues?: FormValues) => string | null;
+};

package/lib/components/forms/FormBuilder/index.d.ts

@@ -0,0 +1,4 @@
+export { FormBuilder, useFormContext } from './FormBuilder';
+export type { FormBuilderProps } from './FormBuilder';
+export { useFormState, useFormValidation } from './hooks';
+export type { FormFieldType, FormFieldConfig, FormFieldValidation, FormFieldDependency, FormValues, FormErrors, FormTouched, FormState, FormActions, FormContext, UseFormStateOptions, } from './types';

package/lib/components/forms/FormBuilder/types.d.ts

@@ -0,0 +1,193 @@
+/**
+ * Type definitions for FormBuilder component
+ */
+export type FormFieldType = 'input' | 'textarea' | 'toggle' | 'checkbox' | 'radio' | 'select' | 'slider' | 'rating' | 'number' | 'phone' | 'tag' | 'file' | 'color' | 'date' | 'daterange';
+export interface FormFieldValidation {
+    /**
+     * Field is required
+     */
+    required?: boolean;
+    /**
+     * Pattern validation (regex)
+     */
+    pattern?: RegExp;
+    /**
+     * Minimum length (for strings)
+     */
+    minLength?: number;
+    /**
+     * Maximum length (for strings)
+     */
+    maxLength?: number;
+    /**
+     * Minimum value (for numbers)
+     */
+    min?: number;
+    /**
+     * Maximum value (for numbers)
+     */
+    max?: number;
+    /**
+     * Custom validation function
+     */
+    custom?: (value: any, allValues: Record<string, any>) => string | null;
+    /**
+     * Custom error messages
+     */
+    messages?: {
+        required?: string;
+        pattern?: string;
+        minLength?: string;
+        maxLength?: string;
+        min?: string;
+        max?: string;
+    };
+}
+export interface FormFieldDependency {
+    /**
+     * Field name to depend on
+     */
+    field: string;
+    /**
+     * Condition to check
+     */
+    condition: (value: any) => boolean;
+    /**
+     * Action to take when condition is met
+     */
+    action: 'show' | 'hide' | 'enable' | 'disable';
+}
+export interface FormFieldConfig {
+    /**
+     * Unique field name (used as key in form values)
+     */
+    name: string;
+    /**
+     * Field type
+     */
+    type: FormFieldType;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Default value
+     */
+    defaultValue?: any;
+    /**
+     * Validation rules
+     */
+    validation?: FormFieldValidation;
+    /**
+     * Additional props to pass to the field component
+     */
+    props?: Record<string, any>;
+    /**
+     * Field dependencies
+     */
+    dependencies?: FormFieldDependency[];
+    /**
+     * Helper text
+     */
+    helperText?: string;
+}
+export interface FormValues {
+    [key: string]: any;
+}
+export interface FormErrors {
+    [key: string]: string;
+}
+export interface FormTouched {
+    [key: string]: boolean;
+}
+export interface FormState {
+    /**
+     * Current form values
+     */
+    values: FormValues;
+    /**
+     * Form errors
+     */
+    errors: FormErrors;
+    /**
+     * Touched fields
+     */
+    touched: FormTouched;
+    /**
+     * Whether the form is dirty (has unsaved changes)
+     */
+    isDirty: boolean;
+    /**
+     * Whether the form is submitting
+     */
+    isSubmitting: boolean;
+    /**
+     * Whether the form is valid
+     */
+    isValid: boolean;
+}
+export interface FormActions {
+    /**
+     * Set a field value
+     */
+    setFieldValue: (name: string, value: any) => void;
+    /**
+     * Set a field error
+     */
+    setFieldError: (name: string, error: string) => void;
+    /**
+     * Set a field touched state
+     */
+    setFieldTouched: (name: string, touched: boolean) => void;
+    /**
+     * Validate a single field
+     */
+    validateField: (name: string) => string | null;
+    /**
+     * Validate all fields
+     */
+    validateForm: () => FormErrors;
+    /**
+     * Submit the form
+     */
+    submitForm: () => Promise<void>;
+    /**
+     * Reset the form
+     */
+    resetForm: () => void;
+    /**
+     * Register a field
+     */
+    registerField: (name: string, config?: FormFieldConfig) => void;
+    /**
+     * Unregister a field
+     */
+    unregisterField: (name: string) => void;
+}
+export type FormContext = FormState & FormActions;
+export interface UseFormStateOptions {
+    /**
+     * Initial form values
+     */
+    initialValues?: FormValues;
+    /**
+     * Field configurations (for config mode)
+     */
+    fields?: FormFieldConfig[];
+    /**
+     * When to validate fields
+     */
+    validateOn?: 'change' | 'blur' | 'submit';
+    /**
+     * Callback when form is submitted
+     */
+    onSubmit?: (values: FormValues) => void | Promise<void>;
+    /**
+     * Callback when form values change
+     */
+    onChange?: (values: FormValues) => void;
+    /**
+     * Callback when form validation state changes
+     */
+    onValidate?: (errors: FormErrors) => void;
+}

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

@@ -0,0 +1 @@
+export * from './FormBuilder';

package/lib/components/index.d.ts

@@ -0,0 +1,50 @@
+export { Button } from './buttons/Button';
+export type { ButtonProps } from './buttons/Button';
+export { Icon } from './display/Icon';
+export type { IconProps } from './display/Icon';
+export { Portal } from './overlays/Portal';
+export type { PortalProps } from './overlays/Portal';
+export { Popover } from './overlays/Popover';
+export type { PopoverProps } from './overlays/Popover';
+export { Tooltip } from './overlays/Tooltip';
+export type { TooltipProps } from './overlays/Tooltip';
+export { Menu, MenuList, MenuItem, MenuDivider, MenuGroup, MenuContext, useMenuContext, } from './overlays/Menu';
+export type { MenuProps, MenuListProps, MenuItemProps, MenuDividerProps, MenuGroupProps, MenuContextValue, SelectionMode, } from './overlays/Menu';
+export { Dropdown } from './overlays/Dropdown';
+export type { DropdownProps } from './overlays/Dropdown';
+export { Input } from './inputs/Input';
+export type { InputProps, ValidationResult, FormatMask, ValidationTiming, InputType } from './inputs/Input';
+export { Autocomplete } from './inputs/Autocomplete';
+export type { AutocompleteProps, AutocompleteOption } from './inputs/Autocomplete';
+export { Toggle } from './inputs/Toggle';
+export type { ToggleProps } from './inputs/Toggle';
+export { Checkbox } from './inputs/Checkbox';
+export type { CheckboxProps } from './inputs/Checkbox';
+export { Radio, RadioGroup, useRadioGroup, RadioGroupContext } from './inputs/Radio';
+export type { RadioProps, RadioGroupProps, RadioGroupContextValue } from './inputs/Radio';
+export { Textarea } from './inputs/Textarea';
+export type { TextareaProps } from './inputs/Textarea';
+export { Select } from './inputs/Select';
+export type { SelectProps, SelectOption } from './inputs/Select';
+export { Slider } from './inputs/Slider';
+export type { SliderProps, Mark } from './inputs/Slider';
+export { Rating } from './inputs/Rating';
+export type { RatingProps } from './inputs/Rating';
+export { NumberInput } from './inputs/NumberInput';
+export type { NumberInputProps } from './inputs/NumberInput';
+export { PhoneInput } from './inputs/PhoneInput';
+export type { PhoneInputProps, Country } from './inputs/PhoneInput';
+export { TagInput } from './inputs/TagInput';
+export type { TagInputProps } from './inputs/TagInput';
+export { FilePicker } from './inputs/FilePicker';
+export type { FilePickerProps, FileError } from './inputs/FilePicker';
+export { ColorPicker } from './inputs/ColorPicker';
+export type { ColorPickerProps, ColorFormat } from './inputs/ColorPicker';
+export { DatePicker } from './inputs/DatePicker';
+export type { DatePickerProps } from './inputs/DatePicker';
+export { DateRangePicker } from './inputs/DateRangePicker';
+export type { DateRangePickerProps, DateRangePreset } from './inputs/DateRangePicker';
+export { FormBuilder, useFormContext } from './forms/FormBuilder';
+export type { FormBuilderProps } from './forms/FormBuilder';
+export { useFormState, useFormValidation } from './forms/FormBuilder';
+export type { FormFieldType, FormFieldConfig, FormFieldValidation, FormFieldDependency, FormValues, FormErrors, FormTouched, FormState, FormActions, FormContext, UseFormStateOptions, } from './forms/FormBuilder';