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

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/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/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/contexts/PageMessagesContext/PageMessagesContext.d.ts

@@ -0,0 +1,91 @@
+import { ReactNode } from 'react';
+import { PageMessageStateConfig, LoadingStateConfig, PageMessagesProps } from '../../components/display/PageMessages/types';
+/**
+ * Default configurations for all page message states
+ */
+export interface PageMessagesDefaults {
+    /** Default loading configuration */
+    loading?: LoadingStateConfig;
+    /** Default error configuration */
+    error?: PageMessageStateConfig;
+    /** Default forbidden configuration */
+    forbidden?: PageMessageStateConfig;
+    /** Default not-found configuration */
+    notFound?: PageMessageStateConfig;
+    /** Default unauthorized configuration */
+    unauthorized?: PageMessageStateConfig;
+    /** Default maintenance configuration */
+    maintenance?: PageMessageStateConfig;
+    /** Default offline configuration */
+    offline?: PageMessageStateConfig;
+    /** Default timeout configuration */
+    timeout?: PageMessageStateConfig;
+    /** Default empty configuration */
+    empty?: PageMessageStateConfig;
+}
+/**
+ * Global actions that can be provided app-wide
+ */
+export interface PageMessagesGlobalActions {
+    /** Default retry handler */
+    onRetry?: () => void;
+    /** Default go back handler */
+    onGoBack?: () => void;
+    /** Default go home handler */
+    onGoHome?: () => void;
+    /** Default login handler */
+    onLogin?: () => void;
+}
+/**
+ * Context value for PageMessages
+ */
+export interface PageMessagesContextValue {
+    /** Default state configurations */
+    defaults: PageMessagesDefaults;
+    /** Global action handlers */
+    actions: PageMessagesGlobalActions;
+    /** Default component props */
+    defaultProps?: Partial<Pick<PageMessagesProps, 'size' | 'fullScreen' | 'centerVertically' | 'minHeight'>>;
+}
+export interface PageMessagesProviderProps {
+    children: ReactNode;
+    /** Default configurations for page message states */
+    defaults?: PageMessagesDefaults;
+    /** Global action handlers */
+    actions?: PageMessagesGlobalActions;
+    /** Default component props */
+    defaultProps?: PageMessagesContextValue['defaultProps'];
+}
+/**
+ * Provider for PageMessages defaults and global configuration
+ *
+ * @example
+ * ```tsx
+ * <PageMessagesProvider
+ *   defaults={{
+ *     error: {
+ *       title: 'Oops! Something went wrong',
+ *       description: 'Please try again later',
+ *       icon: 'error',
+ *     },
+ *   }}
+ *   actions={{
+ *     onGoHome: () => router.push('/'),
+ *     onLogin: () => router.push('/login'),
+ *   }}
+ * >
+ *   <App />
+ * </PageMessagesProvider>
+ * ```
+ */
+export declare function PageMessagesProvider({ children, defaults, actions, defaultProps, }: PageMessagesProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access PageMessages context
+ * Returns undefined if not within provider (uses built-in defaults)
+ */
+export declare function usePageMessages(): PageMessagesContextValue | undefined;
+/**
+ * Hook to get merged configuration (context defaults + component props)
+ * For internal use by PageMessages component
+ */
+export declare function usePageMessagesConfig(componentProps: Partial<PageMessagesProps>): PageMessagesContextValue;

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

@@ -0,0 +1,2 @@
+export { PageMessagesProvider, usePageMessages, usePageMessagesConfig, } from './PageMessagesContext';
+export type { PageMessagesProviderProps, PageMessagesContextValue, PageMessagesDefaults, PageMessagesGlobalActions, } from './PageMessagesContext';

package/lib/contexts/index.d.ts

@@ -1,2 +1,4 @@
 export { ThemeProvider, useTheme } from './ThemeContext';
 export type { ThemeProviderProps } from './ThemeContext';
+export { PageMessagesProvider, usePageMessages } from './PageMessagesContext';
+export type { PageMessagesProviderProps, PageMessagesContextValue, PageMessagesDefaults, PageMessagesGlobalActions, } from './PageMessagesContext';

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { PageMessagesProviderProps } from '../../contexts/PageMessagesContext';
 import { ThemeConfig } from '../../types';
 export interface GlobalProviderProps {
     /**
@@ -13,6 +14,10 @@ export interface GlobalProviderProps {
      * Whether to inject global styles (default: true)
      */
     injectGlobalStyles?: boolean;
+    /**
+     * PageMessages default configuration
+     */
+    pageMessagesConfig?: Omit<PageMessagesProviderProps, 'children'>;
 }
 /**
  * GlobalProvider component that wraps the entire application
@@ -52,5 +57,5 @@ export interface GlobalProviderProps {
  * </GlobalProvider>
  * ```
  */
-export declare function GlobalProvider({ children, themeConfig, injectGlobalStyles, }: GlobalProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalProvider({ children, themeConfig, injectGlobalStyles, pageMessagesConfig, }: GlobalProviderProps): import("react/jsx-runtime").JSX.Element;
 export default GlobalProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-tech-team/react-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "React TypeScript component library",
   "main": "./index.js",
   "types": "./index.d.ts",