@common-origin/design-system 2.9.0 → 2.10.0

package/dist/components/molecules/Modal/Modal.d.ts

@@ -0,0 +1,65 @@
+import { type ReactNode } from 'react';
+import { type IconName } from '../../../types/icons';
+export type ModalSize = 'small' | 'medium' | 'large';
+export interface ModalAction {
+    /** Button label text */
+    label: string;
+    /** Callback when the action is clicked */
+    onClick: () => void;
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'naked' | 'emphasis' | 'danger';
+    /** Optional leading icon */
+    icon?: IconName;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+}
+export interface ModalProps {
+    /** Whether the modal is visible */
+    isOpen: boolean;
+    /** Callback fired when the modal should close (close button, overlay, Escape) */
+    onClose: () => void;
+    /** Title displayed in the modal header */
+    title: string;
+    /** Body content of the modal */
+    children: ReactNode;
+    /**
+     * Width preset. All sizes auto-switch to fullscreen below the `md` breakpoint (768 px).
+     * - small  → 400 px
+     * - medium → 560 px
+     * - large  → 720 px
+     * @default 'medium'
+     */
+    size?: ModalSize;
+    /** Structured action buttons rendered in the footer */
+    actions?: ModalAction[];
+    /**
+     * Close when the backdrop overlay is clicked
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Close when the Escape key is pressed
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+    /** Accessible label – falls back to `title` */
+    'aria-label'?: string;
+    /** ID of an element that describes the modal */
+    'aria-describedby'?: string;
+}
+/**
+ * Modal component
+ *
+ * A centred dialog overlay with a title, close button (IconButton), scrollable
+ * body content, and an optional footer with structured action buttons.
+ *
+ * - Renders via `createPortal` to avoid z-index / overflow issues.
+ * - Auto-fullscreen on viewports narrower than 768 px.
+ * - Focus trap, Escape-to-close, overlay-click-to-close.
+ * - Locks body scroll while open.
+ *
+ * Composes: IconButton, Button, Typography, Stack, Divider
+ */
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/molecules/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalAction, ModalSize } from './Modal';

package/dist/components/molecules/index.d.ts

@@ -13,6 +13,7 @@ export * from './EmptyState';
 export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './List';
+export * from './Modal';
 export * from './NumberInput';
 export * from './PageTitle';
 export * from './PasswordField';