@true-tech-team/react-components 0.0.1

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

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

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * Portal component props
+ */
+export interface PortalProps {
+    /**
+     * Content to render in portal
+     */
+    children: ReactNode;
+    /**
+     * ID of the portal container
+     * @default 'portal-root'
+     */
+    containerId?: string;
+    /**
+     * Z-index for portal container
+     */
+    zIndex?: number;
+}
+/**
+ * Portal component
+ * Renders children into a portal container outside the DOM hierarchy
+ */
+export declare const Portal: React.FC<PortalProps>;

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

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

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

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { PopoverPosition } from '../../../utils';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Tooltip component props
+ */
+export interface TooltipProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Tooltip content (what to display in tooltip)
+     */
+    content: ReactNode;
+    /**
+     * Element to trigger tooltip
+     */
+    children: ReactNode;
+    /**
+     * Tooltip position
+     * @default 'top'
+     */
+    position?: PopoverPosition;
+    /**
+     * Delay before showing tooltip (ms)
+     * @default 200
+     */
+    delayShow?: number;
+    /**
+     * Delay before hiding tooltip (ms)
+     * @default 0
+     */
+    delayHide?: number;
+    /**
+     * Disable tooltip
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Show arrow pointing to trigger
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Gap between trigger and tooltip
+     * @default 8
+     */
+    offset?: number;
+}
+/**
+ * Tooltip component
+ * Displays helpful text on hover/focus
+ */
+export declare const Tooltip: React.FC<TooltipProps>;

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

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

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

@@ -0,0 +1,5 @@
+export * from './Popover';
+export * from './Tooltip';
+export * from './Dropdown';
+export * from './Menu';
+export * from './Portal';

package/lib/contexts/ThemeContext/ThemeContext.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { ThemeMode, ThemeConfig, ThemeOverride } from '../../types';
+interface ThemeContextValue {
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: () => void;
+    themeOverride?: ThemeOverride;
+    setThemeOverride: (override?: ThemeOverride) => void;
+}
+export interface ThemeProviderProps {
+    children: ReactNode;
+    defaultMode?: ThemeMode;
+    themeConfig?: ThemeConfig;
+}
+/**
+ * ThemeProvider component that manages theme state
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider defaultMode="light">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export declare function ThemeProvider({ children, defaultMode, themeConfig, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access theme context
+ *
+ * @throws {Error} If used outside of ThemeProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { mode, toggleMode } = useTheme();
+ *   return <button onClick={toggleMode}>Current mode: {mode}</button>;
+ * }
+ * ```
+ */
+export declare function useTheme(): ThemeContextValue;
+export {};

package/lib/contexts/ThemeContext/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme } from './ThemeContext';
+export type { ThemeProviderProps } from './ThemeContext';

package/lib/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme } from './ThemeContext';
+export type { ThemeProviderProps } from './ThemeContext';

package/lib/decorators/ComponentDecorator/ComponentDecorator.d.ts

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+import { CSSVariables } from '../../types';
+export interface ComponentDecoratorProps {
+    /**
+     * Component name for data-component attribute
+     */
+    componentName: string;
+    /**
+     * CSS module classes for the root element
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+    /**
+     * Custom CSS variables for component customization
+     */
+    cssVariables?: CSSVariables;
+    /**
+     * Root element type
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Children to render
+     */
+    children: React.ReactNode;
+    /**
+     * Additional props to spread on root element
+     */
+    [key: string]: unknown;
+}
+/**
+ * Higher-order component that wraps components with standard props and styling
+ *
+ * @param Component - The component to wrap
+ * @param componentName - Name of the component for data attributes
+ * @param defaultClassName - Default CSS class to apply
+ *
+ * @example
+ * ```tsx
+ * import { withComponentDecorator } from '../../decorators';
+ * import styles from './Button.module.scss';
+ *
+ * const ButtonBase = ({ children, variant }) => (
+ *   <span className={styles[`button--${variant}`]}>{children}</span>
+ * );
+ *
+ * export const Button = withComponentDecorator(
+ *   ButtonBase,
+ *   'button',
+ *   styles.button
+ * );
+ * ```
+ */
+export declare function withComponentDecorator<P extends object>(Component: React.ComponentType<P>, componentName: string, defaultClassName?: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & Omit<ComponentDecoratorProps, "componentName">> & React.RefAttributes<HTMLDivElement>>;
+export default withComponentDecorator;

package/lib/decorators/ComponentDecorator/index.d.ts

@@ -0,0 +1,3 @@
+export { withComponentDecorator } from './ComponentDecorator';
+export type { ComponentDecoratorProps } from './ComponentDecorator';
+export { default } from './ComponentDecorator';

package/lib/decorators/index.d.ts

@@ -0,0 +1,2 @@
+export { withComponentDecorator } from './ComponentDecorator';
+export type { ComponentDecoratorProps } from './ComponentDecorator';

package/lib/hooks/index.d.ts

@@ -0,0 +1,11 @@
+export { useTheme } from './useTheme';
+export { usePortal } from './usePortal';
+export type { UsePortalOptions } from './usePortal';
+export { useClickOutside } from './useClickOutside';
+export { useEscapeKey } from './useEscapeKey';
+export { useFocusTrap } from './useFocusTrap';
+export { usePopoverPosition } from './usePopoverPosition';
+export type { UsePopoverPositionOptions, UsePopoverPositionReturn, } from './usePopoverPosition';
+export { useHover } from './useHover';
+export type { UseHoverOptions, UseHoverReturn, HoverProps } from './useHover';
+export { useDebounce } from './useDebounce';

package/lib/hooks/useClickOutside/index.d.ts

@@ -0,0 +1 @@
+export { useClickOutside } from './useClickOutside';

package/lib/hooks/useClickOutside/useClickOutside.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+/**
+ * Detect clicks outside a referenced element
+ * @param ref - Reference to the element
+ * @param handler - Callback to execute when clicking outside
+ * @param enabled - Whether the hook is active
+ * @param excludeRefs - Additional refs to exclude from outside click detection (e.g., trigger elements)
+ */
+export declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean, excludeRefs?: Array<RefObject<HTMLElement>>): void;

package/lib/hooks/useDebounce/index.d.ts

@@ -0,0 +1 @@
+export { useDebounce } from './useDebounce';

package/lib/hooks/useDebounce/useDebounce.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook for debouncing value changes
+ */
+/**
+ * Debounce a value
+ * @param value - Value to debounce
+ * @param delay - Delay in milliseconds
+ * @returns Debounced value
+ */
+export declare function useDebounce<T>(value: T, delay: number): T;

package/lib/hooks/useEscapeKey/index.d.ts

@@ -0,0 +1 @@
+export { useEscapeKey } from './useEscapeKey';

package/lib/hooks/useEscapeKey/useEscapeKey.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook for handling Escape key press
+ */
+/**
+ * Handle Escape key press
+ * @param handler - Callback to execute when Escape is pressed
+ * @param enabled - Whether the hook is active
+ */
+export declare function useEscapeKey(handler: (event: KeyboardEvent) => void, enabled?: boolean): void;

package/lib/hooks/useFocusTrap/index.d.ts

@@ -0,0 +1 @@
+export { useFocusTrap } from './useFocusTrap';

package/lib/hooks/useFocusTrap/useFocusTrap.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * Trap focus within an element
+ * @param ref - Reference to the container element
+ * @param enabled - Whether the focus trap is active
+ * @param autoFocus - Whether to automatically focus the first element on mount
+ */
+export declare function useFocusTrap<T extends HTMLElement>(ref: RefObject<T>, enabled?: boolean, autoFocus?: boolean): void;

package/lib/hooks/useHover/index.d.ts

@@ -0,0 +1,2 @@
+export { useHover } from './useHover';
+export type { UseHoverOptions, UseHoverReturn, HoverProps } from './useHover';

package/lib/hooks/useHover/useHover.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Hook for detecting hover state with configurable delays
+ */
+/**
+ * Options for hover detection
+ */
+export interface UseHoverOptions {
+    /**
+     * Callback when hover starts
+     */
+    onHoverStart?: () => void;
+    /**
+     * Callback when hover ends
+     */
+    onHoverEnd?: () => void;
+    /**
+     * Delay before triggering hover start (ms)
+     * @default 0
+     */
+    delayEnter?: number;
+    /**
+     * Delay before triggering hover end (ms)
+     * @default 0
+     */
+    delayLeave?: number;
+    /**
+     * Disable hover detection
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Props to spread on the element
+ */
+export interface HoverProps {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+}
+/**
+ * Return value from useHover
+ */
+export interface UseHoverReturn {
+    /**
+     * Whether element is currently hovered
+     */
+    isHovered: boolean;
+    /**
+     * Props to spread on the element
+     */
+    hoverProps: HoverProps;
+}
+/**
+ * Detect hover state with configurable delays
+ * @param options - Hover configuration options
+ * @returns Hover state and props
+ */
+export declare function useHover(options?: UseHoverOptions): UseHoverReturn;

package/lib/hooks/usePopoverPosition/index.d.ts

@@ -0,0 +1,2 @@
+export { usePopoverPosition } from './usePopoverPosition';
+export type { UsePopoverPositionOptions, UsePopoverPositionReturn, } from './usePopoverPosition';

package/lib/hooks/usePopoverPosition/usePopoverPosition.d.ts

@@ -0,0 +1,58 @@
+import { CSSProperties, RefObject } from 'react';
+import { PopoverPosition, PopoverWidth } from '../../utils';
+/**
+ * Options for popover positioning
+ */
+export interface UsePopoverPositionOptions {
+    /**
+     * Whether the popover is open
+     */
+    isOpen: boolean;
+    /**
+     * Preferred position for the popover
+     * @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;
+    /**
+     * Width configuration for popover
+     * @default 'auto'
+     */
+    width?: PopoverWidth;
+}
+/**
+ * Return value from usePopoverPosition
+ */
+export interface UsePopoverPositionReturn {
+    /**
+     * Ref to attach to popover element
+     */
+    popoverRef: RefObject<HTMLDivElement>;
+    /**
+     * Ref to attach to trigger element
+     */
+    triggerRef: RefObject<HTMLElement>;
+    /**
+     * Style object to apply to popover
+     */
+    style: CSSProperties;
+    /**
+     * Actual position used (may differ from preferred if flipped)
+     */
+    actualPosition: PopoverPosition;
+}
+/**
+ * Calculate and manage popover position
+ * @param options - Positioning options
+ * @returns Refs and styles for positioning
+ */
+export declare function usePopoverPosition(options: UsePopoverPositionOptions): UsePopoverPositionReturn;

package/lib/hooks/usePortal/index.d.ts

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

package/lib/hooks/usePortal/usePortal.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Hook for creating and managing portal containers
+ */
+/**
+ * Options for portal configuration
+ */
+export interface UsePortalOptions {
+    /**
+     * ID of the portal container element
+     * @default 'portal-root'
+     */
+    containerId?: string;
+    /**
+     * Z-index for the portal container
+     */
+    zIndex?: number;
+}
+/**
+ * Create or get a portal container element
+ * @param options - Portal configuration options
+ * @returns Portal container element
+ */
+export declare function usePortal(options?: UsePortalOptions): HTMLElement;

package/lib/hooks/useTheme/index.d.ts

@@ -0,0 +1 @@
+export { useTheme } from '../../contexts/ThemeContext';

package/lib/providers/GlobalProvider/GlobalProvider.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { ThemeConfig } from '../../types';
+export interface GlobalProviderProps {
+    /**
+     * Child components to render
+     */
+    children: ReactNode;
+    /**
+     * Theme configuration
+     */
+    themeConfig?: ThemeConfig;
+    /**
+     * Whether to inject global styles (default: true)
+     */
+    injectGlobalStyles?: boolean;
+}
+/**
+ * GlobalProvider component that wraps the entire application
+ *
+ * Provides:
+ * - Theme context for dark/light mode switching
+ * - Global CSS styles and utility classes
+ * - CSS custom properties for theming
+ *
+ * @example
+ * ```tsx
+ * import { GlobalProvider } from '@true-tech-team/ui-components';
+ *
+ * function App() {
+ *   return (
+ *     <GlobalProvider themeConfig={{ mode: 'dark' }}>
+ *       <YourApp />
+ *     </GlobalProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * With custom theme override:
+ * ```tsx
+ * <GlobalProvider
+ *   themeConfig={{
+ *     mode: 'light',
+ *     theme: {
+ *       colors: {
+ *         primary: '#0066ff',
+ *       },
+ *     },
+ *   }}
+ * >
+ *   <App />
+ * </GlobalProvider>
+ * ```
+ */
+export declare function GlobalProvider({ children, themeConfig, injectGlobalStyles, }: GlobalProviderProps): import("react/jsx-runtime").JSX.Element;
+export default GlobalProvider;

package/lib/providers/GlobalProvider/index.d.ts

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

package/lib/providers/index.d.ts

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

package/lib/types/component.types.d.ts

@@ -0,0 +1,129 @@
+import { ReactNode, CSSProperties } from 'react';
+/**
+ * Base props that all components should accept
+ */
+export interface BaseComponentProps {
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Data test ID for testing
+     */
+    'data-testid'?: string;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Custom inline styles
+     */
+    style?: CSSProperties;
+    /**
+     * Component children
+     */
+    children?: ReactNode;
+}
+/**
+ * Props for components that support size variations
+ */
+export type ComponentSize = 'sm' | 'md' | 'lg';
+/**
+ * Extended size options for components with more granular sizing
+ */
+export type ExtendedComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Props for components that support color variants
+ */
+export type ComponentVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success' | 'warning' | 'danger';
+/**
+ * Props for components that support semantic colors
+ */
+export type SemanticColor = 'success' | 'warning' | 'error' | 'info';
+/**
+ * Common button-like component props
+ */
+export interface ButtonBaseProps extends BaseComponentProps {
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Type attribute for button elements
+     */
+    type?: 'button' | 'submit' | 'reset';
+}
+/**
+ * Common input-like component props
+ */
+export interface InputBaseProps extends BaseComponentProps {
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Input value
+     */
+    value?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * CSS variable customization props
+ */
+export type CSSVariables = Record<string, string | number>;
+/**
+ * Component decorator props
+ */
+export interface ComponentDecoratorProps {
+    /**
+     * Component name for data-component attribute and BEM naming
+     */
+    componentName: string;
+    /**
+     * CSS module classes for the root element
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+    /**
+     * Custom CSS variables for component customization
+     */
+    cssVariables?: CSSVariables;
+    /**
+     * Root element type
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Children to render
+     */
+    children: ReactNode;
+    /**
+     * Additional props to spread on root element
+     */
+    [key: string]: unknown;
+}

package/lib/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { ColorFamily, ColorShade, ThemeColorTokens, ThemeSpacing, ThemeTypography, ThemeBorderRadius, ThemeShadows, Theme, ThemeOverride, ThemeConfig, ThemeMode, } from './theme.types';
+export type { BaseComponentProps, ComponentSize, ExtendedComponentSize, ComponentVariant, SemanticColor, ButtonBaseProps, InputBaseProps, CSSVariables, ComponentDecoratorProps, } from './component.types';