@true-tech-team/react-components 0.0.2 → 0.0.4

package/lib/components/display/PageMessages/types.d.ts

@@ -0,0 +1,175 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps, ExtendedComponentSize } from '../../../types/component.types';
+import { IconName } from '../Icon/icons';
+import { SpinnerProps } from '../Spinner';
+import { ButtonProps } from '../../buttons/Button';
+/**
+ * Available page message state types
+ */
+export type PageMessageState = 'loading' | 'error' | 'forbidden' | 'not-found' | 'empty' | 'maintenance' | 'offline' | 'unauthorized' | 'timeout';
+/**
+ * Action button configuration for page messages
+ */
+export interface PageMessageAction {
+    /** Button label */
+    label: string;
+    /** Click handler */
+    onClick: () => void;
+    /** Button variant */
+    variant?: ButtonProps['variant'];
+    /** Loading state for the button */
+    loading?: boolean;
+    /** Icon to display */
+    icon?: IconName | ReactNode;
+}
+/**
+ * Configuration for a single page message state
+ */
+export interface PageMessageStateConfig {
+    /** Title text displayed prominently */
+    title?: string;
+    /** Description or subtitle text */
+    description?: string;
+    /** Icon name from registry or custom ReactNode */
+    icon?: IconName | ReactNode;
+    /** Primary action button */
+    primaryAction?: PageMessageAction;
+    /** Secondary action button */
+    secondaryAction?: PageMessageAction;
+    /** Custom render function for complete control */
+    render?: () => ReactNode;
+}
+/**
+ * Props for loading state specifically
+ */
+export interface LoadingStateConfig extends Omit<PageMessageStateConfig, 'icon'> {
+    /** Spinner props passthrough */
+    spinnerProps?: Partial<SpinnerProps>;
+    /** Whether to show text alongside spinner */
+    showText?: boolean;
+}
+/**
+ * Props for the PageMessages component
+ */
+export interface PageMessagesProps extends BaseComponentProps {
+    /**
+     * Whether the page is in loading state
+     * Priority: 1 (highest)
+     */
+    loading?: boolean;
+    /**
+     * Whether the page has an error
+     * Priority: 2
+     */
+    error?: boolean | Error | string;
+    /**
+     * Whether access is forbidden (403)
+     * Priority: 3
+     */
+    forbidden?: boolean;
+    /**
+     * Whether the resource is not found (404)
+     * Priority: 4
+     */
+    notFound?: boolean;
+    /**
+     * Whether the user is unauthorized (401)
+     * Priority: 5
+     */
+    unauthorized?: boolean;
+    /**
+     * Whether the page is in maintenance mode
+     * Priority: 6
+     */
+    maintenance?: boolean;
+    /**
+     * Whether the user is offline
+     * Priority: 7
+     */
+    offline?: boolean;
+    /**
+     * Whether there was a timeout
+     * Priority: 8
+     */
+    timeout?: boolean;
+    /**
+     * Whether the data is empty
+     * Priority: 9 (lowest)
+     */
+    empty?: boolean;
+    /**
+     * Custom loading state configuration
+     */
+    loadingConfig?: LoadingStateConfig;
+    /**
+     * Custom error state configuration
+     */
+    errorConfig?: PageMessageStateConfig;
+    /**
+     * Custom forbidden state configuration
+     */
+    forbiddenConfig?: PageMessageStateConfig;
+    /**
+     * Custom not-found state configuration
+     */
+    notFoundConfig?: PageMessageStateConfig;
+    /**
+     * Custom unauthorized state configuration
+     */
+    unauthorizedConfig?: PageMessageStateConfig;
+    /**
+     * Custom maintenance state configuration
+     */
+    maintenanceConfig?: PageMessageStateConfig;
+    /**
+     * Custom offline state configuration
+     */
+    offlineConfig?: PageMessageStateConfig;
+    /**
+     * Custom timeout state configuration
+     */
+    timeoutConfig?: PageMessageStateConfig;
+    /**
+     * Custom empty state configuration
+     */
+    emptyConfig?: PageMessageStateConfig;
+    /**
+     * Size variant affecting icon and text sizes
+     * @default 'md'
+     */
+    size?: ExtendedComponentSize;
+    /**
+     * Callback when retry action is triggered (for error/timeout states)
+     */
+    onRetry?: () => void;
+    /**
+     * Callback when go back action is triggered
+     */
+    onGoBack?: () => void;
+    /**
+     * Callback when go home action is triggered
+     */
+    onGoHome?: () => void;
+    /**
+     * Callback when login action is triggered (for unauthorized/forbidden)
+     */
+    onLogin?: () => void;
+    /**
+     * Whether to use fullscreen mode
+     * @default false
+     */
+    fullScreen?: boolean;
+    /**
+     * Whether to center the message vertically
+     * @default true
+     */
+    centerVertically?: boolean;
+    /**
+     * Minimum height when not fullscreen
+     */
+    minHeight?: string | number;
+}
+/**
+ * Determines which state to display based on priority
+ */
+export declare function getActiveState(props: PageMessagesProps): PageMessageState | null;

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

@@ -47,6 +47,17 @@ export interface ProgressBarProps extends Omit<BaseComponentProps, 'children'> {
      * Custom format function for the value display
      */
     formatValue?: (value: number, max: number) => string;
+    /**
+     * Indeterminate mode - shows infinite loading animation
+     * When true, value prop is ignored
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Buffer/secondary progress value (0-100)
+     * Shows a secondary progress track for buffering states
+     */
+    bufferValue?: number;
 }
 /**
  * ProgressBar - Linear progress indicator for showing task completion or loading states

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

@@ -0,0 +1,109 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Animation types available for reveal
+ */
+export type RevealAnimation = 'fade' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'zoom' | 'zoomIn' | 'zoomOut';
+/**
+ * Props for the Reveal component
+ */
+export interface RevealProps extends BaseComponentProps {
+    /**
+     * Animation type
+     * @default 'fade'
+     */
+    animation?: RevealAnimation;
+    /**
+     * Animation duration in milliseconds
+     * @default 500
+     */
+    duration?: number;
+    /**
+     * Delay before animation starts (ms)
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * CSS easing function
+     * @default 'ease-out'
+     */
+    easing?: string;
+    /**
+     * Visibility threshold (0-1) for Intersection Observer
+     * @default 0.1
+     */
+    threshold?: number;
+    /**
+     * Whether to animate only once
+     * @default true
+     */
+    triggerOnce?: boolean;
+    /**
+     * Distance for slide animations
+     * @default '20px'
+     */
+    distance?: string;
+    /**
+     * Whether to stagger children animations
+     * @default false
+     */
+    cascade?: boolean;
+    /**
+     * Delay between staggered children (ms)
+     * @default 100
+     */
+    cascadeDelay?: number;
+    /**
+     * Callback when element is revealed
+     */
+    onReveal?: () => void;
+    /**
+     * Whether the component is initially visible (skips animation)
+     * @default false
+     */
+    initiallyVisible?: boolean;
+    /**
+     * Root margin for Intersection Observer
+     * @default '0px'
+     */
+    rootMargin?: string;
+    /**
+     * Play animation immediately on mount without requiring scroll
+     * Useful for hero sections or elements visible on initial page load
+     * @default false
+     */
+    playOnMount?: boolean;
+}
+/**
+ * Reveal - Intersection Observer-based reveal animation component
+ *
+ * @example
+ * ```tsx
+ * <Reveal animation="slideUp">
+ *   <div>Content that animates in when scrolled into view</div>
+ * </Reveal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Reveal animation="fade" cascade cascadeDelay={100}>
+ *   <div>First item</div>
+ *   <div>Second item</div>
+ *   <div>Third item</div>
+ * </Reveal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Reveal
+ *   animation="zoom"
+ *   duration={800}
+ *   delay={200}
+ *   onReveal={() => console.log('Revealed!')}
+ * >
+ *   <Card>Animated card</Card>
+ * </Reveal>
+ * ```
+ */
+export declare const Reveal: React.ForwardRefExoticComponent<RevealProps & React.RefAttributes<HTMLDivElement>>;
+export default Reveal;

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

@@ -0,0 +1,3 @@
+export { Reveal } from './Reveal';
+export type { RevealProps, RevealAnimation } from './Reveal';
+export { default } from './Reveal';

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

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ExtendedComponentSize } from '../../../types/component.types';
+/**
+ * Visual style of the spinner animation
+ */
+export type SpinnerStyle = 'circular' | 'dots' | 'bars' | 'pulse';
+/**
+ * Color variant of the spinner
+ */
+export type SpinnerVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'currentColor';
+/**
+ * Animation speed of the spinner
+ */
+export type SpinnerSpeed = 'slow' | 'normal' | 'fast';
+/**
+ * Props for the Spinner component
+ */
+export interface SpinnerProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Visual style of the spinner animation
+     * @default 'circular'
+     */
+    spinnerStyle?: SpinnerStyle;
+    /**
+     * Size of the spinner
+     * @default 'md'
+     */
+    size?: ExtendedComponentSize;
+    /**
+     * Color variant of the spinner
+     * @default 'primary'
+     */
+    variant?: SpinnerVariant;
+    /**
+     * Animation speed
+     * @default 'normal'
+     */
+    speed?: SpinnerSpeed;
+    /**
+     * Stroke width for circular spinner style
+     * @default 3
+     */
+    strokeWidth?: number;
+    /**
+     * Screen reader text
+     * @default 'Loading...'
+     */
+    srText?: string;
+    /**
+     * Whether to show the screen reader text visually
+     * @default false
+     */
+    showSrText?: boolean;
+}
+/**
+ * Spinner - Animated loading indicator with multiple configurable styles
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Spinner spinnerStyle="dots" size="lg" variant="primary" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Spinner spinnerStyle="bars" speed="fast" variant="success" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Spinner spinnerStyle="pulse" size="xl" />
+ * ```
+ */
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
+export default Spinner;

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

@@ -0,0 +1,3 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerStyle, SpinnerVariant, SpinnerSpeed } from './Spinner';
+export { default } from './Spinner';

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

@@ -8,7 +8,7 @@ export interface StatusIndicatorProps extends BaseComponentProps {
      * Status variant of the indicator
      * @default 'neutral'
      */
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'processing';
+    status?: 'online' | 'offline' | 'away' | 'busy' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'processing';
     /**
      * Size of the indicator
      * @default 'md'

package/lib/components/index.d.ts

@@ -22,6 +22,25 @@ export { KPI } from './display/KPI';
 export type { KPIProps } from './display/KPI';
 export { Skeleton } from './display/Skeleton';
 export type { SkeletonProps } from './display/Skeleton';
+export { Spinner } from './display/Spinner';
+export type { SpinnerProps, SpinnerStyle, SpinnerVariant, SpinnerSpeed } from './display/Spinner';
+export { Collapse } from './display/Collapse';
+export type { CollapseProps } from './display/Collapse';
+export { Accordion, AccordionContainer, AccordionContext, useAccordionContext, useAccordionContextStrict, } from './display/Accordion';
+export type { AccordionProps, AccordionIconPosition, AccordionContainerProps, AccordionControlsPosition, AccordionContextValue, AccordionMode, } from './display/Accordion';
+export { Card } from './display/Card';
+export type { CardProps, CardVariant, CardPadding } from './display/Card';
+export { FlipCard } from './display/FlipCard';
+export type { FlipCardProps, FlipDirection, FlipTrigger } from './display/FlipCard';
+export { CountUp } from './display/CountUp';
+export type { CountUpProps, EasingFunction } from './display/CountUp';
+export { Reveal } from './display/Reveal';
+export type { RevealProps, RevealAnimation } from './display/Reveal';
+export { Carousel } from './display/Carousel';
+export type { CarouselProps } from './display/Carousel';
+export { PageMessages } from './display/PageMessages';
+export type { PageMessagesProps, PageMessageState, PageMessageStateConfig, PageMessageAction, LoadingStateConfig, } from './display/PageMessages';
+export { getActiveState } from './display/PageMessages';
 export { Portal } from './overlays/Portal';
 export type { PortalProps } from './overlays/Portal';
 export { Popover } from './overlays/Popover';
@@ -32,6 +51,8 @@ export { Menu, MenuList, MenuItem, MenuDivider, MenuGroup, MenuContext, useMenuC
 export type { MenuProps, MenuListProps, MenuItemProps, MenuDividerProps, MenuGroupProps, MenuContextValue, SelectionMode, } from './overlays/Menu';
 export { Dropdown } from './overlays/Dropdown';
 export type { DropdownProps } from './overlays/Dropdown';
+export { LoadingOverlay } from './overlays/LoadingOverlay';
+export type { LoadingOverlayProps, LoadingOverlayMode } from './overlays/LoadingOverlay';
 export { Input } from './inputs/Input';
 export type { InputProps, ValidationResult, FormatMask, ValidationTiming, InputType, } from './inputs/Input';
 export { Autocomplete } from './inputs/Autocomplete';

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 import { ComponentVariant, ComponentSize, BaseComponentProps } from '../../../types';
 /**
  * Autocomplete option

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ComponentSize, ComponentVariant, InputBaseProps } from '../../../types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface CheckboxProps extends Omit<InputBaseProps, 'value' | 'onChange' | 'placeholder'> {
     /**
      * Checkbox variant style

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { BaseComponentProps } from '../../../types/component.types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface DatePickerProps extends Omit<BaseComponentProps, 'children'> {
     /**
      * Controlled date value

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { InputBaseProps } from '../../../types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 /**
  * Validation timing options
  */

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
     /**
      * The value of this radio button

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ComponentSize } from '../../../types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
     size?: ComponentSize;
     value?: number;

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface SelectOption {
     /**
      * Option value

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

@@ -11,6 +11,11 @@ export interface ToggleProps extends Omit<InputBaseProps, 'value' | 'onChange' |
      * @default 'md'
      */
     size?: ComponentSize;
+    /**
+     * Whether the toggle is in loading state
+     * @default false
+     */
+    loading?: boolean;
     /**
      * Whether the toggle is checked
      */

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { MenuProps } from '../Menu';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 import { ComponentVariant, ComponentSize } from '../../../types';
 /**
  * Dropdown item definition

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

@@ -0,0 +1,101 @@
+import { default as React, ReactNode } from 'react';
+import { BaseComponentProps, ExtendedComponentSize } from '../../../types/component.types';
+import { SpinnerSpeed, SpinnerStyle, SpinnerVariant } from '../../display/Spinner';
+/**
+ * Loading overlay mode
+ */
+export type LoadingOverlayMode = 'container' | 'fullscreen';
+/**
+ * Props for the LoadingOverlay component
+ */
+export interface LoadingOverlayProps extends BaseComponentProps {
+    /**
+     * Whether the overlay is visible
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Mode: cover parent container or full screen
+     * @default 'container'
+     */
+    mode?: LoadingOverlayMode;
+    /**
+     * Spinner style to use
+     * @default 'circular'
+     */
+    spinnerStyle?: SpinnerStyle;
+    /**
+     * Spinner size
+     * @default 'lg'
+     */
+    spinnerSize?: ExtendedComponentSize;
+    /**
+     * Spinner color variant
+     * @default 'primary'
+     */
+    spinnerVariant?: SpinnerVariant;
+    /**
+     * Spinner animation speed
+     * @default 'normal'
+     */
+    spinnerSpeed?: SpinnerSpeed;
+    /**
+     * Optional message to display below spinner
+     */
+    message?: ReactNode;
+    /**
+     * Enable backdrop blur effect
+     * @default false
+     */
+    blur?: boolean;
+    /**
+     * Backdrop opacity (0-1)
+     * @default 0.7
+     */
+    backdropOpacity?: number;
+    /**
+     * Custom z-index for the overlay
+     */
+    zIndex?: number;
+    /**
+     * Transition duration in milliseconds
+     * @default 200
+     */
+    transitionDuration?: number;
+    /**
+     * Custom spinner element (overrides spinnerStyle, spinnerSize, spinnerVariant)
+     */
+    customSpinner?: ReactNode;
+    /**
+     * Border radius for the overlay to match child content
+     * Accepts any valid CSS border-radius value
+     */
+    borderRadius?: string | number;
+}
+/**
+ * LoadingOverlay - Overlay component for showing loading state over content
+ *
+ * @example
+ * ```tsx
+ * // Container mode - wraps content
+ * <LoadingOverlay visible={isLoading}>
+ *   <div>Content to overlay</div>
+ * </LoadingOverlay>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Fullscreen mode
+ * <LoadingOverlay visible={isLoading} mode="fullscreen" message="Loading..." />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With blur effect
+ * <LoadingOverlay visible={isLoading} blur backdropOpacity={0.5}>
+ *   <div>Blurred content</div>
+ * </LoadingOverlay>
+ * ```
+ */
+export declare const LoadingOverlay: React.ForwardRefExoticComponent<LoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export default LoadingOverlay;

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

@@ -0,0 +1,3 @@
+export { LoadingOverlay } from './LoadingOverlay';
+export type { LoadingOverlayProps, LoadingOverlayMode } from './LoadingOverlay';
+export { default } from './LoadingOverlay';

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { BaseComponentProps } from '../../../types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 /**
  * MenuItem component props
  */