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

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

@@ -0,0 +1,119 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types/component.types';
+/**
+ * Easing functions for animation
+ */
+export type EasingFunction = 'linear' | 'easeOut' | 'easeIn' | 'easeInOut' | 'easeOutCubic' | 'easeInCubic' | 'easeOutExpo';
+/**
+ * Props for the CountUp component
+ */
+export interface CountUpProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Target value to count to
+     */
+    value: number;
+    /**
+     * Starting value
+     * @default 0
+     */
+    start?: number;
+    /**
+     * Animation duration in milliseconds
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * Easing function for animation
+     * @default 'easeOutCubic'
+     */
+    easing?: EasingFunction;
+    /**
+     * Prefix to display before the number
+     */
+    prefix?: string;
+    /**
+     * Suffix to display after the number
+     */
+    suffix?: string;
+    /**
+     * Number of decimal places
+     * @default 0
+     */
+    decimals?: number;
+    /**
+     * Thousands separator
+     * @default ','
+     */
+    separator?: string;
+    /**
+     * Decimal separator
+     * @default '.'
+     */
+    decimalSeparator?: string;
+    /**
+     * Whether to start animation when element becomes visible
+     * @default true
+     */
+    triggerOnVisible?: boolean;
+    /**
+     * Visibility threshold (0-1) for Intersection Observer
+     * @default 0.1
+     */
+    visibilityThreshold?: number;
+    /**
+     * Callback when animation starts
+     */
+    onStart?: () => void;
+    /**
+     * Callback when animation ends
+     */
+    onEnd?: () => void;
+    /**
+     * Custom format function
+     */
+    formatFn?: (value: number) => string;
+    /**
+     * Size of the component
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Whether to start animation immediately (if triggerOnVisible is false)
+     * @default true
+     */
+    autoStart?: boolean;
+    /**
+     * Delay before starting animation (ms)
+     * @default 0
+     */
+    delay?: number;
+}
+/**
+ * CountUp - Animated number counting component
+ *
+ * @example
+ * ```tsx
+ * <CountUp value={1000} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CountUp
+ *   value={1234.56}
+ *   prefix="$"
+ *   decimals={2}
+ *   duration={3000}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CountUp
+ *   value={99}
+ *   suffix="%"
+ *   easing="easeOutExpo"
+ * />
+ * ```
+ */
+export declare const CountUp: React.ForwardRefExoticComponent<CountUpProps & React.RefAttributes<HTMLSpanElement>>;
+export default CountUp;

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

@@ -0,0 +1,3 @@
+export { CountUp } from './CountUp';
+export type { CountUpProps, EasingFunction } from './CountUp';
+export { default } from './CountUp';

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

@@ -0,0 +1,125 @@
+import { default as React, ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Direction of the flip animation
+ */
+export type FlipDirection = 'horizontal' | 'vertical';
+/**
+ * How the flip is triggered
+ */
+export type FlipTrigger = 'click' | 'hover' | 'manual';
+/**
+ * Props for the FlipCard component
+ */
+export interface FlipCardProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Content for the front face of the card
+     */
+    front: ReactNode;
+    /**
+     * Content for the back face of the card
+     */
+    back: ReactNode;
+    /**
+     * Whether the card is flipped (controlled mode)
+     */
+    isFlipped?: boolean;
+    /**
+     * Default flipped state (uncontrolled mode)
+     * @default false
+     */
+    defaultFlipped?: boolean;
+    /**
+     * Callback when flip state changes
+     */
+    onFlipChange?: (isFlipped: boolean) => void;
+    /**
+     * How the flip is triggered
+     * @default 'click'
+     */
+    flipTrigger?: FlipTrigger;
+    /**
+     * Direction of the flip animation
+     * @default 'horizontal'
+     */
+    flipDirection?: FlipDirection;
+    /**
+     * Animation duration in milliseconds
+     * @default 600
+     */
+    duration?: number;
+    /**
+     * CSS easing function
+     * @default 'ease-in-out'
+     */
+    easing?: string;
+    /**
+     * Callback when flip animation starts
+     */
+    onFlipStart?: (toFlipped: boolean) => void;
+    /**
+     * Callback when flip animation ends
+     */
+    onFlipEnd?: (isFlipped: boolean) => void;
+    /**
+     * Whether the card is disabled (no flip interaction)
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Fixed height for the card (required for 3D perspective)
+     */
+    height?: string | number;
+    /**
+     * Fixed width for the card
+     */
+    width?: string | number;
+    /**
+     * Perspective distance for 3D effect
+     * @default 1000
+     */
+    perspective?: number;
+    /**
+     * ARIA label for the flip action (accessibility)
+     * @default 'Flip card'
+     */
+    flipButtonAriaLabel?: string;
+}
+/**
+ * FlipCard - An animated card component that flips to reveal back content
+ *
+ * @example
+ * ```tsx
+ * <FlipCard
+ *   front={<div>Front content</div>}
+ *   back={<div>Back content</div>}
+ *   height={200}
+ *   width={300}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled mode
+ * const [isFlipped, setIsFlipped] = useState(false);
+ * <FlipCard
+ *   front={<div>Front</div>}
+ *   back={<div>Back</div>}
+ *   isFlipped={isFlipped}
+ *   onFlipChange={setIsFlipped}
+ *   flipTrigger="manual"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Hover to flip
+ * <FlipCard
+ *   front={<div>Hover me</div>}
+ *   back={<div>Back side</div>}
+ *   flipTrigger="hover"
+ * />
+ * ```
+ */
+export declare const FlipCard: React.ForwardRefExoticComponent<FlipCardProps & React.RefAttributes<HTMLDivElement>>;
+export default FlipCard;

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

@@ -0,0 +1,3 @@
+export { FlipCard } from './FlipCard';
+export type { FlipCardProps, FlipDirection, FlipTrigger } from './FlipCard';
+export { default } from './FlipCard';

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

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

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

@@ -0,0 +1,19 @@
+import { ExtendedComponentSize } from '../../../types/component.types';
+import { PageMessageState, PageMessageStateConfig, LoadingStateConfig } from './types';
+import { PageMessagesGlobalActions } from '../../../contexts/PageMessagesContext';
+export interface PageMessageContentProps {
+    /** The active page message state */
+    state: PageMessageState;
+    /** Configuration for the state */
+    config: PageMessageStateConfig | LoadingStateConfig;
+    /** Size variant */
+    size: ExtendedComponentSize;
+    /** Error message (extracted from error prop) */
+    errorMessage?: string;
+    /** Global actions from context */
+    actions: PageMessagesGlobalActions;
+}
+/**
+ * Internal component that renders the page message content
+ */
+export declare function PageMessageContent({ state, config, size, errorMessage, actions, }: PageMessageContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { PageMessagesProps } from './types';
+/**
+ * PageMessages - Handles page-level states like loading, error, forbidden, etc.
+ *
+ * States are displayed based on priority (loading > error > forbidden > etc.)
+ * When no state is active, children are rendered directly without any wrapper.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PageMessages loading={isLoading} error={error}>
+ *   <MyContent />
+ * </PageMessages>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom configuration
+ * <PageMessages
+ *   empty={items.length === 0}
+ *   emptyConfig={{
+ *     title: 'No items yet',
+ *     description: 'Create your first item to get started',
+ *     primaryAction: {
+ *       label: 'Create Item',
+ *       onClick: handleCreate,
+ *     },
+ *   }}
+ * >
+ *   <ItemList items={items} />
+ * </PageMessages>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom renderer
+ * <PageMessages
+ *   error={error}
+ *   errorConfig={{
+ *     render: () => <CustomErrorPage error={error} />,
+ *   }}
+ * >
+ *   <Dashboard />
+ * </PageMessages>
+ * ```
+ */
+export declare const PageMessages: React.ForwardRefExoticComponent<PageMessagesProps & React.RefAttributes<HTMLDivElement>>;
+export default PageMessages;

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

@@ -0,0 +1,5 @@
+import { PageMessagesDefaults } from '../../../contexts/PageMessagesContext';
+/**
+ * Built-in default configurations for all page message states
+ */
+export declare const DEFAULT_CONFIGS: Required<PageMessagesDefaults>;

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

@@ -0,0 +1,3 @@
+export { PageMessages } from './PageMessages';
+export type { PageMessagesProps, PageMessageState, PageMessageStateConfig, PageMessageAction, LoadingStateConfig, } from './types';
+export { getActiveState } from './types';

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';