@stack-spot/portal-components 1.0.0-dev.1775743853760 → 1.0.0-dev.1778512145216

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

@@ -0,0 +1,165 @@
+import { type AriaAttributes, type CSSProperties, type PropsWithChildren, type SyntheticEvent } from 'react';
+import './style.css';
+/**
+ * Available size options for the dialog.
+ */
+export type DialogSize = 'small' | 'medium' | 'large' | 'extra-large' | 'fit-content';
+/**
+ * Type of dialog display.
+ *
+ * @remarks
+ * - `modal`: Centered dialog with backdrop
+ * - `right-panel`: Slide-in panel from the right side
+ */
+type DialogType = 'modal' | 'right-panel';
+/**
+ * Props for controlled dialog state.
+ */
+type ControlledProps = {
+    /**
+     * Controls whether the dialog is open.
+     */
+    isOpen: boolean;
+    /**
+     * Callback to update the dialog's open state.
+     */
+    setIsOpen: (value: boolean) => void;
+};
+/**
+ * Props for uncontrolled dialog state.
+ *
+ * @remarks
+ * Use this when you want the dialog to manage its own state internally.
+ */
+type UncontrolledProps = {
+    isOpen?: never;
+    setIsOpen?: never;
+};
+type AriaProps = Pick<AriaAttributes, 'aria-labelledby' | 'aria-label' | 'aria-describedby' | 'aria-description'>;
+export type DialogProps = PropsWithChildren & (ControlledProps | UncontrolledProps) & AriaProps & {
+    /**
+     * The display type of the dialog.
+     *
+     * @defaultValue 'modal'
+     */
+    type?: DialogType;
+    /**
+     * Whether clicking outside the dialog should close it.
+     *
+     * @defaultValue true
+     */
+    shouldLightDismiss?: boolean;
+    /**
+     * Initial open state for uncontrolled dialogs.
+     *
+     * @defaultValue false
+     */
+    initialOpen?: boolean;
+    /**
+     * Callback fired when the dialog is closed.
+     */
+    onClose?: (event?: SyntheticEvent) => void;
+    /**
+     * The size of the dialog.
+     *
+     * @defaultValue 'medium'
+     */
+    size?: DialogSize;
+    /**
+     * Custom inline styles for the dialog element.
+     */
+    style?: CSSProperties;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Optional identifier for the dialog element.
+     */
+    id?: string;
+};
+export interface DialogRef extends Pick<HTMLDialogElement, 'addEventListener' | 'removeEventListener'> {
+    close: () => void;
+    showModal: () => void;
+    isOpen: () => boolean;
+}
+/**
+ * A flexible dialog component that supports both modal and panel modes.
+ *
+ * @remarks
+ * The Dialog component provides a native HTML dialog element with enhanced functionality:
+ * - **Controlled or uncontrolled state**: Manage state externally or let the component handle it
+ * - **Light dismiss**: Optional backdrop click to close
+ * - **Keyboard support**: ESC key closes the dialog
+ * - **Multiple sizes**: Predefined size options
+ * - **Accessibility**: Full ARIA support
+ * - **Two display modes**: Modal (centered) or right panel (slide-in)
+ *
+ * **Important:** When using controlled mode, you must provide both `isOpen` and `setIsOpen` props.
+ * For uncontrolled mode, use the ref to control the dialog programmatically.
+ *
+ * @example
+ * Uncontrolled dialog with ref:
+ * ```tsx
+ * const dialogRef = useRef<DialogRef>(null)
+ *
+ * const handleOpen = () => {
+ *   dialogRef.current?.showModal()
+ * }
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleOpen}>Open Dialog</button>
+ *     <Dialog
+ *       ref={dialogRef}
+ *       size="large"
+ *       aria-label="Example dialog"
+ *     >
+ *       <Text>Dialog content</Text>
+ *     </Dialog>
+ *   </>
+ * )
+ * ```
+ *
+ * @example
+ * Controlled dialog:
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => setIsOpen(true)}>Open Dialog</button>
+ *     <Dialog
+ *       isOpen={isOpen}
+ *       setIsOpen={setIsOpen}
+ *       type="right-panel"
+ *       shouldLightDismiss={false}
+ *       onClose={() => console.log('Dialog closed')}
+ *     >
+ *       <Text>Panel content</Text>
+ *     </Dialog>
+ *   </>
+ * )
+ * ```
+ *
+ * @example
+ * Dialog with custom styling:
+ * ```tsx
+ * <Dialog
+ *   size="fit-content"
+ *   className="custom-dialog"
+ *   style={{ maxWidth: '600px' }}
+ *   aria-labelledby="dialog-title"
+ * >
+ *   <h2 id="dialog-title">Custom Dialog</h2>
+ *   <p>Content here</p>
+ * </Dialog>
+ * ```
+ *
+ * @param props - Dialog properties
+ * @param ref - Forwarded ref for imperative control
+ * @returns A dialog element
+ */
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<DialogRef>>;
+export {};
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/Modal/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAA;AACd,OAAO,aAAa,CAAA;AACpB;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,aAAa,CAAA;AAErF;;;;;;GAMG;AACH,KAAK,UAAU,GAAG,OAAO,GAAG,aAAa,CAAA;AAEzC;;GAEG;AACH,KAAK,eAAe,GAAG;IACrB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAA;AAED;;;;;GAKG;AACH,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAA;AAED,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,iBAAiB,GAAG,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAA;AACjH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,CAAC,eAAe,GAAG,iBAAiB,CAAC,GAAG,SAAS,GAAG;IAChG;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,GAAG,qBAAqB,CAAC;IACpG,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,OAAO,CAAC;CACvB;AAmFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,eAAO,MAAM,MAAM,mGAgDlB,CAAA"}

package/dist/components/Modal/Dialog.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import './style.css';
+/**
+ * Custom hook for managing dialog state and behavior.
+ *
+ * @remarks
+ * This hook handles:
+ * - Opening and closing the dialog
+ * - Light dismiss (clicking outside to close)
+ * - Escape key handling
+ * - Cleanup on unmount
+ *
+ * @param props - Dialog configuration options
+ * @returns Dialog state and control methods
+ */
+const useDialog = ({ isOpen: controlledOpen, setIsOpen: setControlledOpen, initialOpen = false, shouldLightDismiss = true, }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+    const dialogRef = useRef(null);
+    const isOpen = controlledOpen ?? uncontrolledOpen;
+    const setIsOpen = setControlledOpen ?? setUncontrolledOpen;
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (isOpen && dialog && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (!isOpen) {
+            dialog?.close();
+        }
+        return () => {
+            dialog?.close();
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        const handleClose = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsOpen(false);
+        };
+        const lightDismiss = (event) => {
+            const { target } = event;
+            if (target instanceof Element && target.nodeName === 'DIALOG') {
+                handleClose(event);
+            }
+        };
+        const closeOnEscape = (event) => {
+            if (event.code === 'Escape') {
+                handleClose(event);
+            }
+        };
+        if (shouldLightDismiss) {
+            dialog.addEventListener('click', lightDismiss);
+        }
+        dialog.addEventListener('keydown', closeOnEscape);
+        return () => {
+            if (shouldLightDismiss) {
+                dialog.removeEventListener('click', lightDismiss);
+            }
+            dialog.removeEventListener('keydown', closeOnEscape);
+        };
+    }, [shouldLightDismiss, setIsOpen]);
+    return {
+        dialogRef,
+        isOpen,
+        close: () => setIsOpen(false),
+        showModal: () => setIsOpen(true),
+    };
+};
+/**
+ * A flexible dialog component that supports both modal and panel modes.
+ *
+ * @remarks
+ * The Dialog component provides a native HTML dialog element with enhanced functionality:
+ * - **Controlled or uncontrolled state**: Manage state externally or let the component handle it
+ * - **Light dismiss**: Optional backdrop click to close
+ * - **Keyboard support**: ESC key closes the dialog
+ * - **Multiple sizes**: Predefined size options
+ * - **Accessibility**: Full ARIA support
+ * - **Two display modes**: Modal (centered) or right panel (slide-in)
+ *
+ * **Important:** When using controlled mode, you must provide both `isOpen` and `setIsOpen` props.
+ * For uncontrolled mode, use the ref to control the dialog programmatically.
+ *
+ * @example
+ * Uncontrolled dialog with ref:
+ * ```tsx
+ * const dialogRef = useRef<DialogRef>(null)
+ *
+ * const handleOpen = () => {
+ *   dialogRef.current?.showModal()
+ * }
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleOpen}>Open Dialog</button>
+ *     <Dialog
+ *       ref={dialogRef}
+ *       size="large"
+ *       aria-label="Example dialog"
+ *     >
+ *       <Text>Dialog content</Text>
+ *     </Dialog>
+ *   </>
+ * )
+ * ```
+ *
+ * @example
+ * Controlled dialog:
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => setIsOpen(true)}>Open Dialog</button>
+ *     <Dialog
+ *       isOpen={isOpen}
+ *       setIsOpen={setIsOpen}
+ *       type="right-panel"
+ *       shouldLightDismiss={false}
+ *       onClose={() => console.log('Dialog closed')}
+ *     >
+ *       <Text>Panel content</Text>
+ *     </Dialog>
+ *   </>
+ * )
+ * ```
+ *
+ * @example
+ * Dialog with custom styling:
+ * ```tsx
+ * <Dialog
+ *   size="fit-content"
+ *   className="custom-dialog"
+ *   style={{ maxWidth: '600px' }}
+ *   aria-labelledby="dialog-title"
+ * >
+ *   <h2 id="dialog-title">Custom Dialog</h2>
+ *   <p>Content here</p>
+ * </Dialog>
+ * ```
+ *
+ * @param props - Dialog properties
+ * @param ref - Forwarded ref for imperative control
+ * @returns A dialog element
+ */
+export const Dialog = forwardRef(({ type = 'modal', shouldLightDismiss = true, initialOpen = false, isOpen: controlledOpen, setIsOpen: setControlledOpen, onClose, children, size = 'medium', style, className, ...props }, forwardedRef) => {
+    const { dialogRef, isOpen, close, showModal } = useDialog({
+        isOpen: controlledOpen,
+        setIsOpen: setControlledOpen,
+        initialOpen,
+        shouldLightDismiss,
+    });
+    useImperativeHandle(forwardedRef, () => ({
+        close,
+        showModal,
+        isOpen: () => isOpen,
+        addEventListener(name, callback, options) {
+            dialogRef.current?.addEventListener(name, callback, options);
+        },
+        removeEventListener(name, callback, options) {
+            dialogRef.current?.removeEventListener(name, callback, options);
+        },
+    }), [isOpen, close, showModal]);
+    return (_jsx("dialog", { ref: dialogRef, onClose: onClose, ...props, className: `${type} ${size}${className ? ` ${className}` : ''}`, style: style, children: _jsx("div", { className: "dialog-content", children: children }) }));
+});
+Dialog.displayName = 'Dialog';
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Modal/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Modal/Dialog.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { DialogProps, DialogRef } from './Dialog.js';
+/**
+ * Props for the Modal component.
+ */
+export type ModalProps = DialogProps & {
+    /**
+     * The title text displayed in the modal header.
+     */
+    title?: string;
+    /**
+     * The subtitle text displayed below the title in the modal header.
+     */
+    subtitle?: string;
+    /**
+     * Optional identifier for the modal element.
+     */
+    id?: string;
+};
+/**
+ * A modal dialog component that displays content in an overlay with a header and close button.
+ *
+ * @example
+ * Using ref to control modal:
+ * ```tsx
+ * const modalRef = useRef<DialogRef>(null)
+ *
+ * const handleOpenModal = () => {
+ *   modalRef.current?.showModal()
+ * }
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleOpenModal}>Open Modal</button>
+ *     <Modal
+ *       ref={modalRef}
+ *       title="Welcome"
+ *       subtitle="Please review the information below"
+ *     >
+ *       <Text>Modal content goes here</Text>
+ *     </Modal>
+ *   </>
+ * )
+ * ```
+ *
+ * @example
+ * Using controlled state:
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => setIsOpen(true)}>Open Modal</button>
+ *     <Modal
+ *       title="Confirmation"
+ *       subtitle="Are you sure?"
+ *       isOpen={isOpen}
+ *       setIsOpen={setIsOpen}
+ *     >
+ *       <Text>Confirm your action</Text>
+ *     </Modal>
+ *   </>
+ * )
+ * ```
+ *
+ * @param props - The modal properties
+ * @param ref - Forwarded ref to access Dialog methods
+ * @returns A modal dialog component
+ */
+export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<DialogRef>>;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,WAAW,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,KAAK,kGAiCjB,CAAA"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Column, IconBox, Row, Text } from '@stack-spot/citric-react';
+import { forwardRef } from 'react';
+import { Dialog } from './Dialog.js';
+/**
+ * A modal dialog component that displays content in an overlay with a header and close button.
+ *
+ * @example
+ * Using ref to control modal:
+ * ```tsx
+ * const modalRef = useRef<DialogRef>(null)
+ *
+ * const handleOpenModal = () => {
+ *   modalRef.current?.showModal()
+ * }
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleOpenModal}>Open Modal</button>
+ *     <Modal
+ *       ref={modalRef}
+ *       title="Welcome"
+ *       subtitle="Please review the information below"
+ *     >
+ *       <Text>Modal content goes here</Text>
+ *     </Modal>
+ *   </>
+ * )
+ * ```
+ *
+ * @example
+ * Using controlled state:
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => setIsOpen(true)}>Open Modal</button>
+ *     <Modal
+ *       title="Confirmation"
+ *       subtitle="Are you sure?"
+ *       isOpen={isOpen}
+ *       setIsOpen={setIsOpen}
+ *     >
+ *       <Text>Confirm your action</Text>
+ *     </Modal>
+ *   </>
+ * )
+ * ```
+ *
+ * @param props - The modal properties
+ * @param ref - Forwarded ref to access Dialog methods
+ * @returns A modal dialog component
+ */
+export const Modal = forwardRef(({ title, subtitle, children, ...props }, ref) => {
+    const handleClose = () => {
+        if (ref && 'current' in ref && ref?.current) {
+            ref.current.close();
+        }
+        else if (props.setIsOpen) {
+            props.setIsOpen(false);
+        }
+    };
+    return (_jsx(Dialog, { ref: ref, ...props, children: _jsxs(Column, { bg: "light.400", flex: 1, h: "100%", children: [_jsxs(Row, { justifyContent: "space-between", p: "20px", children: [_jsxs(Column, { children: [_jsx(Text, { appearance: "h4", children: title }), _jsx(Text, { color: "light.700", children: subtitle })] }), _jsx(IconBox, { onClick: handleClose, tag: "button", icon: "TimesMini", appearance: "circle", colorScheme: "light" })] }), _jsx(Column, { flex: 1, className: "content-box", p: "20px", children: children })] }) }));
+});
+Modal.displayName = 'Modal';
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,MAAM,EAA0B,MAAM,UAAU,CAAA;AAsBzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,GAAG,IAAI,SAAS,IAAI,GAAG,IAAI,GAAG,EAAE,OAAO,EAAE,CAAC;YAC5C,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;QACrB,CAAC;aAAM,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAC3B,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,YACzB,MAAC,MAAM,IAAC,EAAE,EAAC,WAAW,EAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,aACtC,MAAC,GAAG,IAAC,cAAc,EAAC,eAAe,EAAC,CAAC,EAAC,MAAM,aAC1C,MAAC,MAAM,eACL,KAAC,IAAI,IAAC,UAAU,EAAC,IAAI,YAAE,KAAK,GAAQ,EACpC,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,QAAQ,GAAQ,IAClC,EACT,KAAC,OAAO,IACN,OAAO,EAAE,WAAW,EACpB,GAAG,EAAC,QAAQ,EACZ,IAAI,EAAC,WAAW,EAChB,UAAU,EAAC,QAAQ,EACnB,WAAW,EAAC,OAAO,GACnB,IACE,EACN,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,aAAa,EAAC,CAAC,EAAC,MAAM,YAC9C,QAAQ,GACF,IACF,GACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}

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

@@ -0,0 +1,5 @@
+export { Dialog } from './Dialog.js';
+export type { DialogProps, DialogRef, DialogSize } from './Dialog.js';
+export { Modal } from './Modal.js';
+export type { ModalProps } from './Modal.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAElE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Modal/index.js

@@ -0,0 +1,3 @@
+export { Dialog } from './Dialog.js';
+export { Modal } from './Modal.js';
+//# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Modal/style.css

@@ -0,0 +1,103 @@
+
+/* Dialog */
+dialog {
+  --animation-duration: 0.3s;
+  --animation-easing: ease-in-out;
+  padding: 0;
+  border: 0;
+}
+
+dialog.small {
+  width: 400px;
+}
+
+dialog.medium {
+  width: 600px;
+}
+
+dialog.large {
+  width: 800px;
+}
+
+dialog.extra-large {
+  width: 70%;
+}
+
+dialog>.dialog-content {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%; 
+  
+  .content-box {
+    overflow: auto;
+  }
+}
+
+/* Transition the :backdrop when the dialog modal is promoted to the top layer */
+dialog::backdrop {
+  background-color: transparent;
+}
+
+dialog:open::backdrop {
+  background-color: rgb(0 0 0 / 25%);
+}
+
+/* This starting-style rule cannot be nested inside the above selector because the nesting selector cannot represent pseudo-elements. */
+@starting-style {
+  dialog:open::backdrop {
+    background-color: transparent;
+  }
+}
+
+/*  MODAL  */
+
+/* Open state of the dialog  */
+dialog.modal:open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Closed state of the dialog  */
+dialog.modal {
+  opacity: 0;
+  transform: scale(0.5);
+  transition: all var(--animation-duration) allow-discrete;
+}
+
+/* Before open state  */
+/* Needs to be after the previous dialog:open rule to take effect, as the specificity is the same */
+@starting-style {
+  dialog.modal:open {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+/*  Right Panel  */
+/* Closed state of the dialog  */
+dialog.right-panel {
+  height: 100vh;
+  left: auto;
+  max-height: 100vh;
+  scrollbar-gutter: stable;
+  /* Not widely available yet. */
+
+  opacity: 0;
+  translate: 100%;
+  transition: all var(--animation-duration) allow-discrete;
+}
+
+dialog.right-panel:open {
+  opacity: 1;
+  translate: 0%;
+}
+
+/* Before open state  */
+/* Needs to be after the previous dialog:open rule to take effect, as the specificity is the same */
+@starting-style {
+  dialog.right-panel:open {
+    opacity: 0;
+    translate: 100%;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "1.0.0-dev.1775743853760",
+  "version": "1.0.0-dev.1778512145216",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,16 +28,19 @@
     "./FadingOverflow": "./dist/components/FadingOverflow.js",
     "./Table": "./dist/components/Table/index.js",
     "./ContentValidateFilter": "./dist/components/ContentValidateFilter.js",
-    "./Form": "./dist/components/form/Form/index.js"
+    "./Form": "./dist/components/form/Form/index.js",
+    "./Dialog": "./dist/components/Modal/Dialog.js",
+    "./Modal": "./dist/components/Modal/Modal.js"
   },
   "scripts": {
-    "build": "pnpm package-override --revert=false && rimraf dist && tsc && tsc-esm-fix --target='dist'",
+    "build": "pnpm package-override --revert=false && rimraf dist && tsc && tsc-esm-fix --target='dist' && cpy 'src/**/*.css' dist",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "check-tree-shaking": "agadoo"
   },
   "peerDependencies": {
     "@citric/core": "^6.5.1",
     "@citric/icons": "^5.10.0",
+    "@stack-spot/citric-react": "^0.41.2",
     "@citric/ui": "^6.10.1",
     "@stack-spot/portal-theme": "^1.1.1",
     "@stack-spot/portal-translate": "^2.1.0",
@@ -51,16 +54,17 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
     "agadoo": "^3.0.0",
-    "eslint": "^8.53.0",
+    "cpy-cli": "^5.0.0",
+    "eslint": "^9.26.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/components/Modal/Dialog.tsx

@@ -0,0 +1,318 @@
+import {
+  type AriaAttributes,
+  type CSSProperties,
+  type PropsWithChildren,
+  type SyntheticEvent,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import './style.css'
+/**
+ * Available size options for the dialog.
+ */
+export type DialogSize = 'small' | 'medium' | 'large' | 'extra-large' | 'fit-content'
+
+/**
+ * Type of dialog display.
+ * 
+ * @remarks
+ * - `modal`: Centered dialog with backdrop
+ * - `right-panel`: Slide-in panel from the right side
+ */
+type DialogType = 'modal' | 'right-panel'
+
+/**
+ * Props for controlled dialog state.
+ */
+type ControlledProps = { 
+  /**
+   * Controls whether the dialog is open.
+   */
+  isOpen: boolean,
+  
+  /**
+   * Callback to update the dialog's open state.
+   */
+  setIsOpen: (value: boolean) => void, 
+}
+
+/**
+ * Props for uncontrolled dialog state.
+ * 
+ * @remarks
+ * Use this when you want the dialog to manage its own state internally.
+ */
+type UncontrolledProps = { 
+  isOpen?: never,
+  setIsOpen?: never, 
+}
+
+type AriaProps = Pick<AriaAttributes, 'aria-labelledby' | 'aria-label' | 'aria-describedby' | 'aria-description'>
+export type DialogProps = PropsWithChildren & (ControlledProps | UncontrolledProps) & AriaProps & {
+  /**
+   * The display type of the dialog.
+   * 
+   * @defaultValue 'modal'
+   */
+  type?: DialogType,
+  
+  /**
+   * Whether clicking outside the dialog should close it.
+   * 
+   * @defaultValue true
+   */
+  shouldLightDismiss?: boolean,
+  
+  /**
+   * Initial open state for uncontrolled dialogs.
+   * 
+   * @defaultValue false
+   */
+  initialOpen?: boolean,
+  
+  /**
+   * Callback fired when the dialog is closed.
+   */
+  onClose?: (event?: SyntheticEvent) => void,
+  
+  /**
+   * The size of the dialog.
+   * 
+   * @defaultValue 'medium'
+   */
+  size?: DialogSize,
+  
+  /**
+   * Custom inline styles for the dialog element.
+   */
+  style?: CSSProperties,
+  
+  /**
+   * Additional CSS class names.
+   */
+  className?: string,
+  
+  /**
+   * Optional identifier for the dialog element.
+   */
+  id?: string,
+}
+
+export interface DialogRef extends Pick<HTMLDialogElement, 'addEventListener' | 'removeEventListener'> {
+  close: () => void,
+  showModal: () => void,
+  isOpen: () => boolean,
+}
+
+/**
+ * Custom hook for managing dialog state and behavior.
+ * 
+ * @remarks
+ * This hook handles:
+ * - Opening and closing the dialog
+ * - Light dismiss (clicking outside to close)
+ * - Escape key handling
+ * - Cleanup on unmount
+ * 
+ * @param props - Dialog configuration options
+ * @returns Dialog state and control methods
+ */
+const useDialog = ({
+  isOpen: controlledOpen,
+  setIsOpen: setControlledOpen,
+  initialOpen = false,
+  shouldLightDismiss = true,
+}: Pick<DialogProps, 'isOpen' | 'setIsOpen' | 'initialOpen' | 'shouldLightDismiss'>) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen)
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  const isOpen = controlledOpen ?? uncontrolledOpen
+  const setIsOpen = setControlledOpen ?? setUncontrolledOpen
+
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (isOpen && dialog && !dialog.open) {
+      dialog.showModal()
+    } else if (!isOpen) {
+      dialog?.close()
+    }
+    return () => {
+      dialog?.close()
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (!dialog) return
+
+    const handleClose = (event: Event | KeyboardEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setIsOpen(false)
+    }
+
+    const lightDismiss = (event: Event) => {
+      const { target } = event
+      if (target instanceof Element && target.nodeName === 'DIALOG') {
+        handleClose(event)
+      }
+    }
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.code === 'Escape') {
+        handleClose(event)
+      }
+    }
+
+    if (shouldLightDismiss) {
+      dialog.addEventListener('click', lightDismiss)
+    }
+    dialog.addEventListener('keydown', closeOnEscape)
+
+    return () => {
+      if (shouldLightDismiss) {
+        dialog.removeEventListener('click', lightDismiss)
+      }
+      dialog.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [shouldLightDismiss, setIsOpen])
+
+  return {
+    dialogRef,
+    isOpen,
+    close: () => setIsOpen(false),
+    showModal: () => setIsOpen(true),
+  }
+}
+
+/**
+ * A flexible dialog component that supports both modal and panel modes.
+ * 
+ * @remarks
+ * The Dialog component provides a native HTML dialog element with enhanced functionality:
+ * - **Controlled or uncontrolled state**: Manage state externally or let the component handle it
+ * - **Light dismiss**: Optional backdrop click to close
+ * - **Keyboard support**: ESC key closes the dialog
+ * - **Multiple sizes**: Predefined size options
+ * - **Accessibility**: Full ARIA support
+ * - **Two display modes**: Modal (centered) or right panel (slide-in)
+ * 
+ * **Important:** When using controlled mode, you must provide both `isOpen` and `setIsOpen` props.
+ * For uncontrolled mode, use the ref to control the dialog programmatically.
+ * 
+ * @example
+ * Uncontrolled dialog with ref:
+ * ```tsx
+ * const dialogRef = useRef<DialogRef>(null)
+ * 
+ * const handleOpen = () => {
+ *   dialogRef.current?.showModal()
+ * }
+ * 
+ * return (
+ *   <>
+ *     <button onClick={handleOpen}>Open Dialog</button>
+ *     <Dialog 
+ *       ref={dialogRef}
+ *       size="large"
+ *       aria-label="Example dialog"
+ *     >
+ *       <Text>Dialog content</Text>
+ *     </Dialog>
+ *   </>
+ * )
+ * ```
+ * 
+ * @example
+ * Controlled dialog:
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ * 
+ * return (
+ *   <>
+ *     <button onClick={() => setIsOpen(true)}>Open Dialog</button>
+ *     <Dialog 
+ *       isOpen={isOpen}
+ *       setIsOpen={setIsOpen}
+ *       type="right-panel"
+ *       shouldLightDismiss={false}
+ *       onClose={() => console.log('Dialog closed')}
+ *     >
+ *       <Text>Panel content</Text>
+ *     </Dialog>
+ *   </>
+ * )
+ * ```
+ * 
+ * @example
+ * Dialog with custom styling:
+ * ```tsx
+ * <Dialog 
+ *   size="fit-content"
+ *   className="custom-dialog"
+ *   style={{ maxWidth: '600px' }}
+ *   aria-labelledby="dialog-title"
+ * >
+ *   <h2 id="dialog-title">Custom Dialog</h2>
+ *   <p>Content here</p>
+ * </Dialog>
+ * ```
+ * 
+ * @param props - Dialog properties
+ * @param ref - Forwarded ref for imperative control
+ * @returns A dialog element
+ */
+export const Dialog = forwardRef<DialogRef, DialogProps>(
+  ({
+    type = 'modal',
+    shouldLightDismiss = true,
+    initialOpen = false,
+    isOpen: controlledOpen,
+    setIsOpen: setControlledOpen,
+    onClose,
+    children,
+    size = 'medium',
+    style,
+    className,
+    ...props
+  }, forwardedRef,
+  ) => {
+    const { dialogRef, isOpen, close, showModal } = useDialog({
+      isOpen: controlledOpen,
+      setIsOpen: setControlledOpen,
+      initialOpen,
+      shouldLightDismiss,
+    })
+
+    useImperativeHandle(forwardedRef, () => ({
+      close,
+      showModal,
+      isOpen: () => isOpen,
+      addEventListener(name: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {
+        dialogRef.current?.addEventListener(name, callback, options)
+      },
+      removeEventListener(name: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {
+        dialogRef.current?.removeEventListener(name, callback, options)
+      },
+    }), [isOpen, close, showModal])
+
+    return (
+      <dialog 
+        ref={dialogRef} 
+        onClose={onClose} 
+        {...props} 
+        className={`${type} ${size}${className ? ` ${className}` : ''}`}
+        style={style}
+      >
+        <div className="dialog-content">
+          {children}
+        </div>
+      </dialog>
+    )
+  },
+)
+
+Dialog.displayName = 'Dialog'

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,110 @@
+import { Column, IconBox, Row, Text } from '@stack-spot/citric-react'
+import { forwardRef } from 'react'
+import { Dialog, DialogProps, DialogRef } from './Dialog'
+
+/**
+ * Props for the Modal component.
+ */
+export type ModalProps = DialogProps & { 
+  /**
+   * The title text displayed in the modal header.
+   */
+  title?: string,
+  
+  /**
+   * The subtitle text displayed below the title in the modal header.
+   */
+  subtitle?: string,
+  
+  /**
+   * Optional identifier for the modal element.
+   */
+  id?: string, 
+}
+
+/**
+ * A modal dialog component that displays content in an overlay with a header and close button.
+ * 
+ * @example
+ * Using ref to control modal:
+ * ```tsx
+ * const modalRef = useRef<DialogRef>(null)
+ * 
+ * const handleOpenModal = () => {
+ *   modalRef.current?.showModal()
+ * }
+ * 
+ * return (
+ *   <>
+ *     <button onClick={handleOpenModal}>Open Modal</button>
+ *     <Modal 
+ *       ref={modalRef}
+ *       title="Welcome"
+ *       subtitle="Please review the information below"
+ *     >
+ *       <Text>Modal content goes here</Text>
+ *     </Modal>
+ *   </>
+ * )
+ * ```
+ * 
+ * @example
+ * Using controlled state:
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ * 
+ * return (
+ *   <>
+ *     <button onClick={() => setIsOpen(true)}>Open Modal</button>
+ *     <Modal 
+ *       title="Confirmation"
+ *       subtitle="Are you sure?"
+ *       isOpen={isOpen}
+ *       setIsOpen={setIsOpen}
+ *     >
+ *       <Text>Confirm your action</Text>
+ *     </Modal>
+ *   </>
+ * )
+ * ```
+ * 
+ * @param props - The modal properties
+ * @param ref - Forwarded ref to access Dialog methods
+ * @returns A modal dialog component
+ */
+export const Modal = forwardRef<DialogRef, ModalProps>(
+  ({ title, subtitle, children, ...props }, ref) => {
+    const handleClose = () => {
+      if (ref && 'current' in ref && ref?.current) {
+        ref.current.close()
+      } else if (props.setIsOpen) {
+        props.setIsOpen(false)
+      }
+    }
+    
+    return (
+      <Dialog ref={ref} {...props}>
+        <Column bg="light.400" flex={1} h="100%">
+          <Row justifyContent="space-between" p="20px">
+            <Column>
+              <Text appearance="h4">{title}</Text>
+              <Text color="light.700">{subtitle}</Text>
+            </Column>
+            <IconBox 
+              onClick={handleClose} 
+              tag="button" 
+              icon="TimesMini" 
+              appearance="circle" 
+              colorScheme="light" 
+            />
+          </Row>
+          <Column flex={1} className="content-box" p="20px">
+            {children}
+          </Column>
+        </Column>
+      </Dialog>
+    )
+  },
+)
+
+Modal.displayName = 'Modal'

package/src/components/Modal/index.ts

@@ -0,0 +1,6 @@
+export { Dialog } from './Dialog'
+export type { DialogProps, DialogRef, DialogSize } from './Dialog'
+
+export { Modal } from './Modal'
+export type { ModalProps } from './Modal'
+

package/src/components/Modal/style.css

@@ -0,0 +1,103 @@
+
+/* Dialog */
+dialog {
+  --animation-duration: 0.3s;
+  --animation-easing: ease-in-out;
+  padding: 0;
+  border: 0;
+}
+
+dialog.small {
+  width: 400px;
+}
+
+dialog.medium {
+  width: 600px;
+}
+
+dialog.large {
+  width: 800px;
+}
+
+dialog.extra-large {
+  width: 70%;
+}
+
+dialog>.dialog-content {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%; 
+  
+  .content-box {
+    overflow: auto;
+  }
+}
+
+/* Transition the :backdrop when the dialog modal is promoted to the top layer */
+dialog::backdrop {
+  background-color: transparent;
+}
+
+dialog:open::backdrop {
+  background-color: rgb(0 0 0 / 25%);
+}
+
+/* This starting-style rule cannot be nested inside the above selector because the nesting selector cannot represent pseudo-elements. */
+@starting-style {
+  dialog:open::backdrop {
+    background-color: transparent;
+  }
+}
+
+/*  MODAL  */
+
+/* Open state of the dialog  */
+dialog.modal:open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Closed state of the dialog  */
+dialog.modal {
+  opacity: 0;
+  transform: scale(0.5);
+  transition: all var(--animation-duration) allow-discrete;
+}
+
+/* Before open state  */
+/* Needs to be after the previous dialog:open rule to take effect, as the specificity is the same */
+@starting-style {
+  dialog.modal:open {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+/*  Right Panel  */
+/* Closed state of the dialog  */
+dialog.right-panel {
+  height: 100vh;
+  left: auto;
+  max-height: 100vh;
+  scrollbar-gutter: stable;
+  /* Not widely available yet. */
+
+  opacity: 0;
+  translate: 100%;
+  transition: all var(--animation-duration) allow-discrete;
+}
+
+dialog.right-panel:open {
+  opacity: 1;
+  translate: 0%;
+}
+
+/* Before open state  */
+/* Needs to be after the previous dialog:open rule to take effect, as the specificity is the same */
+@starting-style {
+  dialog.right-panel:open {
+    opacity: 0;
+    translate: 100%;
+  }
+}