tuiuiu.js 0.1.1

package/dist/design-system/overlays/modal.d.ts

@@ -0,0 +1,251 @@
+/**
+ * Modal/Window Component - Pop-up dialogs for Reck
+ *
+ * Features:
+ * - Centered modal dialogs
+ * - Floating windows with position
+ * - Confirmation dialogs
+ * - Alert/info boxes
+ * - Toast notifications
+ * - Backdrop overlay
+ *
+ * @example
+ * ```typescript
+ * import { Modal, ConfirmDialog, Toast, createModal } from './modal.js';
+ *
+ * // Simple modal
+ * When(showModal(),
+ *   Modal({
+ *     title: 'Settings',
+ *     content: SettingsForm(),
+ *     onClose: () => setShowModal(false)
+ *   })
+ * )
+ *
+ * // Confirmation dialog
+ * ConfirmDialog({
+ *   title: 'Delete File?',
+ *   message: 'This action cannot be undone.',
+ *   onConfirm: handleDelete,
+ *   onCancel: closeDialog
+ * })
+ * ```
+ */
+import type { VNode } from '../../utils/types.js';
+export type BorderStyle = 'single' | 'double' | 'round' | 'heavy' | 'none';
+export type ModalSize = 'small' | 'medium' | 'large' | 'fullscreen' | {
+    width: number;
+    height: number;
+};
+export type ModalPosition = 'center' | 'top' | 'bottom' | {
+    x: number;
+    y: number;
+};
+/**
+ * Modal Props
+ */
+export interface ModalProps {
+    /** Modal title */
+    title?: string;
+    /** Modal content */
+    content: VNode;
+    /** Modal size */
+    size?: ModalSize;
+    /** Modal position */
+    position?: ModalPosition;
+    /** Border style */
+    borderStyle?: BorderStyle;
+    /** Border color */
+    borderColor?: string;
+    /** Title color */
+    titleColor?: string;
+    /** Show backdrop (dim area behind modal) */
+    backdrop?: boolean;
+    /** Backdrop character */
+    backdropChar?: string;
+    /** Show close button hint */
+    showCloseHint?: boolean;
+    /** Close button hint text */
+    closeHint?: string;
+    /** Footer content */
+    footer?: VNode;
+    /** Padding inside modal */
+    padding?: number;
+    /** Show close button (X) in the title bar */
+    showCloseButton?: boolean;
+    /** Close callback - called when X button or backdrop is clicked */
+    onClose?: () => void;
+    /** Close when backdrop is clicked (default: true if onClose is provided) */
+    closeOnBackdrop?: boolean;
+}
+/**
+ * Modal Component
+ *
+ * Renders a modal dialog with customizable appearance and position.
+ *
+ * @example
+ * ```typescript
+ * Modal({
+ *   title: 'Confirm Delete',
+ *   content: Text({}, 'Are you sure you want to delete this file?'),
+ *   size: 'small',
+ *   position: 'center',
+ *   borderStyle: 'round',
+ *   borderColor: 'yellow',
+ *   showCloseHint: true
+ * })
+ * ```
+ */
+export declare function Modal(props: ModalProps): VNode;
+/**
+ * Confirmation Dialog Props
+ */
+export interface ConfirmDialogProps {
+    /** Dialog title */
+    title: string;
+    /** Confirmation message */
+    message: string;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Confirm button color */
+    confirmColor?: string;
+    /** Cancel button color */
+    cancelColor?: string;
+    /** Selected button (0 = cancel, 1 = confirm) */
+    selected?: number;
+    /** Dialog type (affects colors) */
+    type?: 'info' | 'warning' | 'danger';
+    /** Callback when confirm button is clicked */
+    onConfirm?: () => void;
+    /** Callback when cancel button is clicked */
+    onCancel?: () => void;
+}
+/**
+ * Confirmation Dialog
+ *
+ * Pre-built modal for yes/no confirmations.
+ *
+ * @example
+ * ```typescript
+ * const dialog = createConfirmDialog({
+ *   title: 'Delete File',
+ *   message: 'This action cannot be undone.',
+ *   type: 'danger'
+ * });
+ *
+ * // Render
+ * ConfirmDialog({
+ *   ...dialog.props,
+ *   selected: dialog.selected
+ * })
+ *
+ * // Handle input
+ * useInput((_, key) => {
+ *   if (key.left || key.right) dialog.toggle();
+ *   if (key.return) dialog.confirm();
+ *   if (key.escape) dialog.cancel();
+ * });
+ * ```
+ */
+export declare function ConfirmDialog(props: ConfirmDialogProps): VNode;
+/**
+ * Create interactive confirm dialog state
+ */
+export declare function createConfirmDialog(options: {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    type?: 'info' | 'warning' | 'danger';
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}): {
+    readonly props: ConfirmDialogProps;
+    readonly selected: number;
+    toggle: () => void;
+    selectCancel: () => void;
+    selectConfirm: () => void;
+    confirm: () => void;
+    cancel: () => void;
+};
+/**
+ * Toast notification type
+ */
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+/**
+ * Toast Props
+ */
+export interface ToastProps {
+    /** Toast message */
+    message: string;
+    /** Toast type */
+    type?: ToastType;
+    /** Position on screen */
+    position?: 'top' | 'bottom';
+    /** Show icon */
+    showIcon?: boolean;
+    /** Expand to fill available width */
+    fullWidth?: boolean;
+}
+/**
+ * Toast Notification
+ *
+ * Simple notification message.
+ *
+ * @example
+ * ```typescript
+ * Toast({
+ *   message: 'File saved successfully!',
+ *   type: 'success',
+ *   position: 'bottom'
+ * })
+ * ```
+ */
+export declare function Toast(props: ToastProps): VNode;
+/**
+ * Alert Box Props
+ */
+export interface AlertBoxProps {
+    /** Alert title */
+    title?: string;
+    /** Alert message */
+    message: string;
+    /** Alert type */
+    type?: 'success' | 'error' | 'warning' | 'info';
+    /** Show icon */
+    showIcon?: boolean;
+    /** Expand to fill available width */
+    fullWidth?: boolean;
+}
+/**
+ * Alert Box
+ *
+ * Styled alert message box.
+ *
+ * @example
+ * ```typescript
+ * AlertBox({
+ *   title: 'Warning',
+ *   message: 'This operation may take a while.',
+ *   type: 'warning'
+ * })
+ * ```
+ */
+export declare function AlertBox(props: AlertBoxProps): VNode;
+/**
+ * Modal state manager
+ */
+export interface ModalState {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+/**
+ * Create modal state
+ */
+export declare function createModal(): ModalState;
+export type { VNode };
+//# sourceMappingURL=modal.d.ts.map

package/dist/design-system/overlays/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/design-system/overlays/modal.ts"],"names":[],"mappings":"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"}