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

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

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

@@ -0,0 +1,112 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface ScrollAreaRef {
+    /**
+     * Scroll to specific position
+     */
+    scrollTo: (options: ScrollToOptions) => void;
+    /**
+     * Scroll to top
+     */
+    scrollToTop: (behavior?: ScrollBehavior) => void;
+    /**
+     * Scroll to bottom
+     */
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    /**
+     * Scroll to left
+     */
+    scrollToLeft: (behavior?: ScrollBehavior) => void;
+    /**
+     * Scroll to right
+     */
+    scrollToRight: (behavior?: ScrollBehavior) => void;
+    /**
+     * Get current scroll position
+     */
+    getScrollPosition: () => {
+        scrollTop: number;
+        scrollLeft: number;
+    };
+    /**
+     * Get the viewport element
+     */
+    getElement: () => HTMLDivElement | null;
+}
+export interface ScrollAreaProps extends BaseComponentProps {
+    /**
+     * Scroll direction
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal' | 'both';
+    /**
+     * Maximum height (enables vertical scroll)
+     */
+    maxHeight?: string | number;
+    /**
+     * Maximum width (enables horizontal scroll)
+     */
+    maxWidth?: string | number;
+    /**
+     * Whether to show shadow indicators at scroll edges
+     * @default false
+     */
+    showShadows?: boolean;
+    /**
+     * Callback when scroll position changes
+     */
+    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    /**
+     * Callback when scrolled to top
+     */
+    onScrollToTop?: () => void;
+    /**
+     * Callback when scrolled to bottom
+     */
+    onScrollToBottom?: () => void;
+    /**
+     * Callback when scrolled to left edge
+     */
+    onScrollToLeft?: () => void;
+    /**
+     * Callback when scrolled to right edge
+     */
+    onScrollToRight?: () => void;
+    /**
+     * Threshold in pixels for scroll end callbacks
+     * @default 10
+     */
+    scrollEndThreshold?: number;
+    /**
+     * Content to render inside scrollable area
+     */
+    children: React.ReactNode;
+}
+/**
+ * ScrollArea component - a custom scrollbar container
+ *
+ * Provides styled scrollbars with various visibility modes and
+ * programmatic scroll control.
+ *
+ * @example
+ * Basic vertical scroll:
+ * ```tsx
+ * <ScrollArea maxHeight={300}>
+ *   <p>Long content here...</p>
+ * </ScrollArea>
+ * ```
+ *
+ * @example
+ * With scroll callbacks:
+ * ```tsx
+ * <ScrollArea
+ *   maxHeight={400}
+ *   onScrollToBottom={() => loadMore()}
+ *   showShadows
+ * >
+ *   {items.map(item => <Item key={item.id} {...item} />)}
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<ScrollAreaRef>>;
+export default ScrollArea;

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

@@ -0,0 +1,3 @@
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaProps, ScrollAreaRef } from './ScrollArea';
+export { default } from './ScrollArea';

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/display/Tabs/Tab.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../Icon/icons';
+export interface TabProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Value identifier for this tab (required)
+     */
+    value: string;
+    /**
+     * Icon to display before tab label
+     */
+    icon?: IconName;
+    /**
+     * Whether this tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Tab label content
+     */
+    children: React.ReactNode;
+}
+/**
+ * Tab component - individual tab header button
+ *
+ * Must be used within TabList, which must be within Tabs.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabList>
+ *     <Tab value="tab1">Tab 1</Tab>
+ *     <Tab value="tab2" icon="settings">Settings</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1">Content 1</TabPanel>
+ *   <TabPanel value="tab2">Content 2</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+export default Tab;

package/lib/components/display/Tabs/TabList.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface TabListProps extends BaseComponentProps {
+    /**
+     * Tab children
+     */
+    children: React.ReactNode;
+}
+/**
+ * TabList component - container for Tab items
+ *
+ * Must be used within Tabs.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabList>
+ *     <Tab value="tab1">Tab 1</Tab>
+ *     <Tab value="tab2">Tab 2</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1">Content 1</TabPanel>
+ *   <TabPanel value="tab2">Content 2</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
+export default TabList;