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

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

@@ -0,0 +1,102 @@
+import { default as React, ReactNode } from 'react';
+import { DialogProps, DialogSize } from '../Dialog';
+import { IconName } from '../../display/Icon/icons';
+import { AlertVariant } from './AlertPresets';
+/**
+ * Alert props - extends Dialog with preset configurations
+ */
+export interface AlertProps extends Omit<DialogProps, 'actions' | 'renderHeader' | 'renderFooter'> {
+    /**
+     * Alert variant (determines icon, colors, default buttons)
+     * @default 'info'
+     */
+    variant?: AlertVariant;
+    /**
+     * Alert icon (overrides variant default)
+     */
+    icon?: IconName | ReactNode;
+    /**
+     * Hide the icon
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Description/message content
+     */
+    description?: ReactNode;
+    /**
+     * Confirm button text
+     * @default 'OK' (or 'Confirm' for confirm variant)
+     */
+    confirmText?: string;
+    /**
+     * Cancel button text (only shown for confirm variant or when explicitly provided)
+     */
+    cancelText?: string;
+    /**
+     * Callback when confirm is clicked
+     */
+    onConfirm?: () => void | Promise<void>;
+    /**
+     * Callback when cancel is clicked
+     */
+    onCancel?: () => void;
+    /**
+     * Whether confirm button is loading
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether confirm button is disabled
+     * @default false
+     */
+    confirmDisabled?: boolean;
+    /**
+     * Confirm button variant
+     */
+    confirmVariant?: 'primary' | 'danger' | 'success' | 'warning';
+    /**
+     * Additional actions to render
+     */
+    extraActions?: ReactNode;
+    /**
+     * Override default size for alerts
+     * @default 'sm'
+     */
+    size?: DialogSize;
+    /**
+     * Show cancel button
+     * @default true for confirm variant, false for others
+     */
+    showCancel?: boolean;
+}
+/**
+ * Alert component
+ * A dialog variant with preset configurations for common alert types
+ *
+ * @example
+ * ```tsx
+ * // Simple info alert
+ * <Alert
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   variant="info"
+ *   title="Information"
+ *   description="This is an informational message."
+ * />
+ *
+ * // Confirmation alert
+ * <Alert
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   variant="confirm"
+ *   title="Delete Item"
+ *   description="Are you sure you want to delete this item?"
+ *   onConfirm={handleDelete}
+ *   onCancel={() => setIsOpen(false)}
+ *   confirmVariant="danger"
+ * />
+ * ```
+ */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export default Alert;

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

@@ -0,0 +1,94 @@
+import { AlertProps } from './Alert';
+/**
+ * Alert queue item representing a pending alert
+ */
+export interface AlertQueueItem {
+    /**
+     * Unique alert ID
+     */
+    id: string;
+    /**
+     * Alert props (excluding isOpen which is managed by context)
+     */
+    props: Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel'>;
+    /**
+     * Resolve function for promise-based alert
+     * Resolves with true if confirmed, false if cancelled
+     */
+    resolve: (confirmed: boolean) => void;
+}
+/**
+ * Alert context value
+ */
+export interface AlertContextValue {
+    /**
+     * Current alert queue
+     */
+    alerts: AlertQueueItem[];
+    /**
+     * Show an alert and wait for user response
+     * @returns Promise<boolean> - true if confirmed, false if cancelled
+     */
+    alert: (props: Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel'>) => Promise<boolean>;
+    /**
+     * Show a confirmation alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true if confirmed, false if cancelled
+     */
+    confirm: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Show an error alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true when dismissed
+     */
+    error: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Show a success alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true when dismissed
+     */
+    success: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Show a warning alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true when dismissed
+     */
+    warning: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Show an info alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true when dismissed
+     */
+    info: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Dismiss current alert (resolves with false)
+     */
+    dismiss: () => void;
+    /**
+     * Dismiss all alerts
+     */
+    dismissAll: () => void;
+}
+/**
+ * Alert context
+ */
+export declare const AlertContext: import('react').Context<AlertContextValue | null>;
+/**
+ * Hook to access alert context (returns null if not in provider)
+ */
+export declare function useAlertContext(): AlertContextValue | null;
+/**
+ * Hook to access alert context (throws if not in provider)
+ * @throws Error if used outside of AlertProvider
+ */
+export declare function useAlertContextStrict(): AlertContextValue;

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

@@ -0,0 +1,42 @@
+import { IconName } from '../../display/Icon/icons';
+/**
+ * Alert variant types
+ */
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'confirm';
+/**
+ * Alert preset configuration
+ */
+export interface AlertPreset {
+    /**
+     * Variant identifier
+     */
+    variant: AlertVariant;
+    /**
+     * Default icon for the variant
+     */
+    icon: IconName;
+    /**
+     * Default title for the variant
+     */
+    title: string;
+    /**
+     * Default confirm button text
+     */
+    confirmText: string;
+    /**
+     * Default cancel button text (only for confirm variant)
+     */
+    cancelText?: string;
+    /**
+     * Confirm button variant
+     */
+    confirmVariant: 'primary' | 'danger' | 'success' | 'warning';
+}
+/**
+ * Preset configurations for each alert variant
+ */
+export declare const ALERT_PRESETS: Record<AlertVariant, AlertPreset>;
+/**
+ * Get preset configuration for a variant
+ */
+export declare function getAlertPreset(variant: AlertVariant): AlertPreset;

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