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

package/lib/components/overlays/Alert/AlertProvider.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { AlertProps } from './Alert';
+/**
+ * Alert provider props
+ */
+export interface AlertProviderProps {
+    /**
+     * Children to render
+     */
+    children: ReactNode;
+    /**
+     * Default props to apply to all alerts
+     */
+    defaultAlertProps?: Partial<AlertProps>;
+}
+/**
+ * Alert provider component
+ * Manages a queue of alerts for programmatic creation
+ *
+ * @example
+ * ```tsx
+ * <AlertProvider>
+ *   <App />
+ * </AlertProvider>
+ *
+ * // In a component:
+ * const { confirm, error, success } = useAlert();
+ *
+ * const handleDelete = async () => {
+ *   const confirmed = await confirm('Delete Item', 'Are you sure?');
+ *   if (confirmed) {
+ *     // perform delete
+ *   }
+ * };
+ * ```
+ */
+export declare function AlertProvider({ children, defaultAlertProps, }: AlertProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AlertProvider {
+    var displayName: string;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Alert component exports
+ */
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';
+export { AlertProvider } from './AlertProvider';
+export type { AlertProviderProps } from './AlertProvider';
+export { AlertContext, useAlertContext, useAlertContextStrict, } from './AlertContext';
+export type { AlertContextValue, AlertQueueItem, } from './AlertContext';
+export { ALERT_PRESETS, getAlertPreset, } from './AlertPresets';
+export type { AlertVariant, AlertPreset, } from './AlertPresets';

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

@@ -0,0 +1,197 @@
+import { default as React, ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Dialog size options
+ */
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Dialog props
+ */
+export interface DialogProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Whether the dialog is open (controlled)
+     */
+    isOpen?: boolean;
+    /**
+     * Default open state (uncontrolled)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Callback when dialog requests to close
+     */
+    onClose?: () => void;
+    /**
+     * Dialog title (rendered in header)
+     */
+    title?: ReactNode;
+    /**
+     * Dialog content (main body)
+     */
+    children?: ReactNode;
+    /**
+     * Actions/buttons to render in footer
+     */
+    actions?: ReactNode;
+    /**
+     * Dialog size preset
+     * @default 'md'
+     */
+    size?: DialogSize;
+    /**
+     * Custom width (overrides size preset)
+     */
+    width?: string | number;
+    /**
+     * Maximum height (content scrolls if exceeded)
+     */
+    maxHeight?: string | number;
+    /**
+     * Close when clicking backdrop
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Close when pressing Escape key
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether to show close button in header
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Whether to trap focus within dialog
+     * @default true
+     */
+    trapFocus?: boolean;
+    /**
+     * Whether to block body scroll when open
+     * @default true
+     */
+    blockScroll?: boolean;
+    /**
+     * Enable backdrop blur effect
+     * @default false
+     */
+    blurBackdrop?: boolean;
+    /**
+     * Backdrop opacity (0-1)
+     * @default 0.5
+     */
+    backdropOpacity?: number;
+    /**
+     * Custom z-index
+     */
+    zIndex?: number;
+    /**
+     * Animation duration in milliseconds
+     * @default 200
+     */
+    animationDuration?: number;
+    /**
+     * Dialog role for accessibility
+     * @default 'dialog'
+     */
+    role?: 'dialog' | 'alertdialog';
+    /**
+     * ARIA labelledby ID
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ARIA describedby ID
+     */
+    'aria-describedby'?: string;
+    /**
+     * Whether dialog is modal (prevents interaction outside)
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Render function for custom header
+     */
+    renderHeader?: (props: {
+        title?: ReactNode;
+        onClose: () => void;
+    }) => ReactNode;
+    /**
+     * Render function for custom footer
+     */
+    renderFooter?: (props: {
+        actions?: ReactNode;
+        onClose: () => void;
+    }) => ReactNode;
+    /**
+     * Custom class for backdrop
+     */
+    backdropClassName?: string;
+    /**
+     * Custom class for content container
+     */
+    contentClassName?: string;
+    /**
+     * Callback after open animation completes
+     */
+    onOpenComplete?: () => void;
+    /**
+     * Callback after close animation completes
+     */
+    onCloseComplete?: () => void;
+}
+/**
+ * Dialog header props (for compound component)
+ */
+export interface DialogHeaderProps extends BaseComponentProps {
+    /**
+     * Whether to show close button
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Close button click handler
+     */
+    onClose?: () => void;
+}
+/**
+ * Dialog body props (for compound component)
+ */
+export interface DialogBodyProps extends BaseComponentProps {
+    /**
+     * Enable scroll for content overflow
+     * @default true
+     */
+    scrollable?: boolean;
+}
+/**
+ * Dialog footer props (for compound component)
+ */
+export interface DialogFooterProps extends BaseComponentProps {
+    /**
+     * Alignment of actions
+     * @default 'end'
+     */
+    align?: 'start' | 'center' | 'end' | 'space-between';
+}
+/**
+ * Dialog Header compound component
+ */
+export declare const DialogHeader: React.FC<DialogHeaderProps>;
+/**
+ * Dialog Body compound component
+ */
+export declare const DialogBody: React.FC<DialogBodyProps>;
+/**
+ * Dialog Footer compound component
+ */
+export declare const DialogFooter: React.FC<DialogFooterProps>;
+/**
+ * Dialog component
+ * Modal dialog for user interactions with customizable content
+ */
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
+export default Dialog;

package/lib/components/overlays/Dialog/DialogContext.d.ts

@@ -0,0 +1,75 @@
+import { DialogProps } from './Dialog';
+/**
+ * Dialog stack item representing an open dialog
+ */
+export interface DialogStackItem {
+    /**
+     * Unique dialog ID
+     */
+    id: string;
+    /**
+     * Dialog props (excluding isOpen which is managed by context)
+     */
+    props: Omit<DialogProps, 'isOpen'>;
+    /**
+     * Resolve function for promise-based dialog
+     */
+    resolve?: (value: unknown) => void;
+}
+/**
+ * Dialog context value
+ */
+export interface DialogContextValue {
+    /**
+     * Currently open dialogs (stack for nested support)
+     */
+    dialogs: DialogStackItem[];
+    /**
+     * Open a new dialog
+     * @returns Promise that resolves when dialog closes with the result value
+     */
+    openDialog: <T = void>(props: Omit<DialogProps, 'isOpen'>) => Promise<T>;
+    /**
+     * Close a specific dialog by ID
+     * @param id - Dialog ID to close
+     * @param result - Optional result value to resolve the promise
+     */
+    closeDialog: (id: string, result?: unknown) => void;
+    /**
+     * Close the topmost dialog
+     * @param result - Optional result value to resolve the promise
+     */
+    closeTopDialog: (result?: unknown) => void;
+    /**
+     * Close all dialogs
+     */
+    closeAllDialogs: () => void;
+    /**
+     * Update props of an open dialog
+     * @param id - Dialog ID to update
+     * @param props - Partial props to merge
+     */
+    updateDialog: (id: string, props: Partial<DialogProps>) => void;
+    /**
+     * Check if a dialog is open
+     * @param id - Dialog ID to check
+     */
+    isDialogOpen: (id: string) => boolean;
+    /**
+     * Get the count of open dialogs
+     */
+    dialogCount: number;
+}
+/**
+ * Dialog context
+ */
+export declare const DialogContext: import('react').Context<DialogContextValue | null>;
+/**
+ * Hook to access dialog context (returns null if not in provider)
+ */
+export declare function useDialogContext(): DialogContextValue | null;
+/**
+ * Hook to access dialog context (throws if not in provider)
+ * @throws Error if used outside of DialogProvider
+ */
+export declare function useDialogContextStrict(): DialogContextValue;

package/lib/components/overlays/Dialog/DialogProvider.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { DialogProps } from './Dialog';
+/**
+ * Dialog provider props
+ */
+export interface DialogProviderProps {
+    /**
+     * Children to render
+     */
+    children: ReactNode;
+    /**
+     * Default props to apply to all dialogs
+     */
+    defaultDialogProps?: Partial<DialogProps>;
+}
+/**
+ * Dialog provider component
+ * Manages a stack of dialogs for programmatic creation
+ *
+ * @example
+ * ```tsx
+ * <DialogProvider>
+ *   <App />
+ * </DialogProvider>
+ * ```
+ */
+export declare function DialogProvider({ children, defaultDialogProps, }: DialogProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogProvider {
+    var displayName: string;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Dialog component exports
+ */
+export { Dialog, DialogHeader, DialogBody, DialogFooter, } from './Dialog';
+export type { DialogProps, DialogSize, DialogHeaderProps, DialogBodyProps, DialogFooterProps, } from './Dialog';
+export { DialogProvider } from './DialogProvider';
+export type { DialogProviderProps } from './DialogProvider';
+export { DialogContext, useDialogContext, useDialogContextStrict, } from './DialogContext';
+export type { DialogContextValue, DialogStackItem, } from './DialogContext';

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

@@ -0,0 +1,103 @@
+import { default as React, ReactNode } from 'react';
+import { IconName } from '../../display/Icon/icons';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Toast position options
+ */
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/**
+ * Toast variant types
+ */
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error' | 'loading';
+/**
+ * Toast animation state
+ */
+export type ToastAnimationState = 'entering' | 'entered' | 'exiting' | 'exited';
+/**
+ * Single toast props
+ */
+export interface ToastProps extends BaseComponentProps {
+    /**
+     * Unique toast ID
+     */
+    id: string;
+    /**
+     * Toast variant
+     * @default 'info'
+     */
+    variant?: ToastVariant;
+    /**
+     * Toast title
+     */
+    title?: ReactNode;
+    /**
+     * Toast message/description
+     */
+    message?: ReactNode;
+    /**
+     * Custom icon (overrides variant default)
+     */
+    icon?: IconName | ReactNode;
+    /**
+     * Hide the icon
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Duration in milliseconds (0 for persistent)
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Whether toast can be dismissed by user
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Action button configuration
+     */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Callback when toast is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Whether to show progress bar for duration
+     * @default false
+     */
+    showProgress?: boolean;
+    /**
+     * Whether to pause duration on hover
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Custom render function for toast content
+     */
+    render?: (props: {
+        toast: ToastProps;
+        dismiss: () => void;
+    }) => ReactNode;
+    /**
+     * Animation state (managed by container)
+     */
+    animationState?: ToastAnimationState;
+    /**
+     * Animation duration in ms
+     * @default 200
+     */
+    animationDuration?: number;
+    /**
+     * Position (for animation direction)
+     */
+    position?: ToastPosition;
+}
+/**
+ * Toast component
+ * Single toast notification with auto-dismiss and actions
+ */
+export declare const Toast: React.FC<ToastProps>;
+export default Toast;

package/lib/components/overlays/Toast/ToastContainer.d.ts

@@ -0,0 +1,37 @@
+import { default as React, ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { ToastPosition } from './Toast';
+/**
+ * Toast container props
+ */
+export interface ToastContainerProps extends BaseComponentProps {
+    /**
+     * Position for toasts
+     * @default 'top-right'
+     */
+    position?: ToastPosition;
+    /**
+     * Gap between toasts in pixels
+     * @default 12
+     */
+    gap?: number;
+    /**
+     * Offset from viewport edge
+     * @default 16
+     */
+    offset?: number;
+    /**
+     * Custom z-index
+     */
+    zIndex?: number;
+    /**
+     * Children (toast elements)
+     */
+    children?: ReactNode;
+}
+/**
+ * Toast container component
+ * Positions and stacks toast notifications
+ */
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+export default ToastContainer;

package/lib/components/overlays/Toast/ToastContext.d.ts

@@ -0,0 +1,126 @@
+import { ToastProps, ToastPosition } from './Toast';
+/**
+ * Toast data for creating new toasts
+ */
+export interface ToastData extends Omit<ToastProps, 'id' | 'animationState' | 'onDismiss'> {
+    /**
+     * Optional ID (auto-generated if not provided)
+     */
+    id?: string;
+}
+/**
+ * Toast instance with full props and internal state
+ */
+export interface ToastInstance extends ToastProps {
+    /**
+     * Timestamp when toast was created
+     */
+    createdAt: number;
+    /**
+     * Timestamp when toast was paused (if paused)
+     */
+    pausedAt?: number;
+    /**
+     * Remaining duration when paused
+     */
+    remainingDuration?: number;
+}
+/**
+ * Promise toast options
+ */
+export interface PromiseToastOptions<T> {
+    /**
+     * Message or data to show while loading
+     */
+    loading: string | Partial<ToastData>;
+    /**
+     * Message or data to show on success
+     * Can be a function that receives the result
+     */
+    success: string | Partial<ToastData> | ((data: T) => string | Partial<ToastData>);
+    /**
+     * Message or data to show on error
+     * Can be a function that receives the error
+     */
+    error: string | Partial<ToastData> | ((error: Error) => string | Partial<ToastData>);
+}
+/**
+ * Toast context value
+ */
+export interface ToastContextValue {
+    /**
+     * Current toast instances
+     */
+    toasts: ToastInstance[];
+    /**
+     * Add a new toast
+     * @returns Toast ID
+     */
+    addToast: (data: ToastData) => string;
+    /**
+     * Remove a toast by ID
+     */
+    removeToast: (id: string) => void;
+    /**
+     * Update a toast
+     */
+    updateToast: (id: string, data: Partial<ToastData>) => void;
+    /**
+     * Remove all toasts
+     */
+    removeAllToasts: () => void;
+    /**
+     * Pause a toast's timer
+     */
+    pauseToast: (id: string) => void;
+    /**
+     * Resume a toast's timer
+     */
+    resumeToast: (id: string) => void;
+    /**
+     * Show a success toast
+     */
+    success: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Show an error toast
+     */
+    error: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Show a warning toast
+     */
+    warning: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Show an info toast
+     */
+    info: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Show a loading toast
+     */
+    loading: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Promise-based toast that shows loading, then success/error
+     * @returns Original promise result
+     */
+    promise: <T>(promise: Promise<T>, options: PromiseToastOptions<T>) => Promise<T>;
+    /**
+     * Container position
+     */
+    position: ToastPosition;
+    /**
+     * Maximum visible toasts
+     */
+    maxVisible: number;
+}
+/**
+ * Toast context
+ */
+export declare const ToastContext: import('react').Context<ToastContextValue | null>;
+/**
+ * Hook to access toast context (returns null if not in provider)
+ */
+export declare function useToastContext(): ToastContextValue | null;
+/**
+ * Hook to access toast context (throws if not in provider)
+ * @throws Error if used outside of ToastProvider
+ */
+export declare function useToastContextStrict(): ToastContextValue;

package/lib/components/overlays/Toast/ToastProvider.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+import { ToastPosition } from './Toast';
+import { ToastData } from './ToastContext';
+/**
+ * Toast provider props
+ */
+export interface ToastProviderProps {
+    /**
+     * Children to render
+     */
+    children: ReactNode;
+    /**
+     * Position for toasts
+     * @default 'top-right'
+     */
+    position?: ToastPosition;
+    /**
+     * Maximum number of visible toasts
+     * @default 5
+     */
+    maxVisible?: number;
+    /**
+     * Gap between toasts in pixels
+     * @default 12
+     */
+    gap?: number;
+    /**
+     * Offset from viewport edge
+     * @default 16
+     */
+    offset?: number;
+    /**
+     * Default duration for toasts in milliseconds
+     * @default 5000
+     */
+    defaultDuration?: number;
+    /**
+     * Animation duration in milliseconds
+     * @default 200
+     */
+    animationDuration?: number;
+    /**
+     * Default props to apply to all toasts
+     */
+    defaultToastProps?: Partial<ToastData>;
+    /**
+     * Custom z-index for toast container
+     */
+    zIndex?: number;
+}
+/**
+ * Toast provider component
+ * Manages a stack of toasts for programmatic creation
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider position="top-right" maxVisible={5}>
+ *   <App />
+ * </ToastProvider>
+ *
+ * // In a component:
+ * const toast = useToast();
+ *
+ * toast.success('Changes saved successfully');
+ * toast.error('Failed to save changes');
+ * ```
+ */
+export declare function ToastProvider({ children, position, maxVisible, gap, offset, defaultDuration, animationDuration, defaultToastProps, zIndex, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ToastProvider {
+    var displayName: string;
+}