@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { ModalProps, ModalContextValue } from "./Modal.types";
+export declare const ModalContext: React.Context<ModalContextValue | undefined>;
+export declare const useModalContext: () => ModalContextValue;
+export declare const Modal: {
+    ({ isOpen, onClose, size, variant, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Header: {
+        ({ children, icon, showCloseButton, className, ...props }: import("./Modal.types").ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ children, className, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ children, className, ...props }: import("./Modal.types").ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, className, ...props }: import("./Modal.types").ModalBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, className, ...props }: import("./Modal.types").ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/core/Modal/Modal.js

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useId, useState, useEffect, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Overlay } from '../../effects/Overlay/Overlay.js';
+import { modalTheme, modalSizeVariants } from './Modal.theme.js';
+import { modalContentAnimations, modalOverlayAnimations } from './Modal.animations.js';
+import { ModalHeader } from './ModalHeader.js';
+import { ModalTitle } from './ModalTitle.js';
+import { ModalDescription } from './ModalDescription.js';
+import { ModalBody } from './ModalBody.js';
+import { ModalFooter } from './ModalFooter.js';
+
+// Create context for Modal components
+const ModalContext = createContext(undefined);
+const useModalContext = () => {
+    const ctx = useContext(ModalContext);
+    if (!ctx)
+        throw new Error("Modal compound components must be used within <Modal>");
+    return ctx;
+};
+const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, ...props }) => {
+    var _a;
+    // Generate unique IDs for ARIA linkage
+    const id = useId();
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    // State for tracking if modal body is scrollable
+    const [isBodyScrollable, setIsBodyScrollable] = useState(false);
+    // Reset scroll state when modal closes
+    useEffect(() => {
+        if (!isOpen) {
+            setIsBodyScrollable(false);
+        }
+    }, [isOpen]);
+    // Merge theme with overrides
+    const theme = {
+        ...modalTheme,
+        ...(themeOverrides || {}),
+        containerVariants: {
+            ...modalTheme.containerVariants,
+            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
+        },
+    };
+    // Context value
+    const contextValue = {
+        isOpen,
+        onClose,
+        size,
+        closeOnOverlayClick,
+        closeOnEsc,
+        showCloseButton,
+        theme,
+        isBodyScrollable,
+        setIsBodyScrollable,
+        titleId,
+        descriptionId,
+    };
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: descriptionId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), animations: {
+            overlay: modalOverlayAnimations,
+            content: modalContentAnimations,
+        }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));
+};
+ModalRoot.displayName = "Modal";
+// Attach compound subcomponents
+const Modal = Object.assign(ModalRoot, {
+    Header: ModalHeader,
+    Title: ModalTitle,
+    Description: ModalDescription,
+    Body: ModalBody,
+    Footer: ModalFooter,
+});
+
+export { Modal, ModalContext, useModalContext };

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

@@ -0,0 +1,9 @@
+import { ModalTheme } from "./Modal.types";
+export declare const modalTheme: ModalTheme;
+export declare const modalSizeVariants: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+};

package/dist/components/core/Modal/Modal.theme.js

@@ -0,0 +1,25 @@
+const modalTheme = {
+    // Note: overlay styling is now handled by the shared Overlay component
+    overlay: "",
+    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden",
+    containerVariants: {
+        default: "bg-white ring-4 !ring-white/10 dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)]",
+        translucent: "bg-gradient-to-b from-[var(--color-background)]/90 to-[var(--color-background)]/70 backdrop-blur-xl ring-4 ring-white/20 border-t border-[var(--color-border)]",
+    },
+    header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
+    headerContent: "flex flex-col items-start gap-2 flex-1",
+    title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
+    description: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    body: "flex-1 overflow-y-auto p-6 pb-3",
+    footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
+};
+// Size variants for the modal container
+const modalSizeVariants = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    full: "max-w-full mx-4",
+};
+
+export { modalSizeVariants, modalTheme };

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

@@ -0,0 +1,93 @@
+import React from "react";
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ModalVariant = "default" | "translucent";
+export interface ModalTheme {
+    overlay: string;
+    container: string;
+    containerVariants: Record<ModalVariant, string>;
+    header: string;
+    headerContent: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}
+export interface ModalThemeOverrides {
+    overlay?: string;
+    container?: string;
+    containerVariants?: Partial<Record<ModalVariant, string>>;
+    header?: string;
+    headerContent?: string;
+    title?: string;
+    description?: string;
+    body?: string;
+    footer?: string;
+}
+export interface ModalContextValue {
+    isOpen: boolean;
+    onClose: () => void;
+    size: ModalSize;
+    closeOnOverlayClick: boolean;
+    closeOnEsc: boolean;
+    showCloseButton: boolean;
+    theme: ModalTheme;
+    isBodyScrollable: boolean;
+    setIsBodyScrollable: (scrollable: boolean) => void;
+    titleId: string;
+    descriptionId: string;
+}
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClose" | "onAnimationStart" | "onDragStart" | "onDrag" | "onDragEnd"> {
+    isOpen: boolean;
+    onClose: () => void;
+    size?: ModalSize;
+    /**
+     * Visual variant of the modal container.
+     * - `default`: Solid background with subtle ring
+     * - `translucent`: Frosted glass effect with reduced opacity and backdrop blur
+     * @default "default"
+     */
+    variant?: ModalVariant;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    showCloseButton?: boolean;
+    /**
+     * ARIA role for the modal dialog.
+     * - `dialog`: Standard dialog (default)
+     * - `alertdialog`: Alert dialog requiring user acknowledgment
+     * @default "dialog"
+     */
+    role?: 'dialog' | 'alertdialog';
+    children: React.ReactNode;
+    className?: string;
+    theme?: ModalThemeOverrides;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    showCloseButton?: boolean;
+    className?: string;
+}
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface ModalDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+    className?: string;
+}

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

@@ -0,0 +1,5 @@
+import { ModalBodyProps } from "./Modal.types";
+export declare const ModalBody: {
+    ({ children, className, ...props }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Modal/ModalBody.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useLayoutEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalBody = ({ children, className, ...props }) => {
+    const { theme, setIsBodyScrollable } = useModalContext();
+    const bodyRef = useRef(null);
+    // Function to check if content is scrollable
+    const checkScrollable = useCallback(() => {
+        if (bodyRef.current) {
+            const { scrollHeight, clientHeight } = bodyRef.current;
+            setIsBodyScrollable(scrollHeight > clientHeight);
+        }
+    }, [setIsBodyScrollable]);
+    // Check scrollable state on layout changes
+    useLayoutEffect(() => {
+        checkScrollable();
+    }, [checkScrollable, children]);
+    // Set up resize observer to monitor content changes
+    useLayoutEffect(() => {
+        const element = bodyRef.current;
+        if (!element)
+            return;
+        // Initial check
+        checkScrollable();
+        // Create ResizeObserver to watch for content changes
+        const resizeObserver = new ResizeObserver(checkScrollable);
+        resizeObserver.observe(element);
+        // Also listen for window resize events
+        window.addEventListener('resize', checkScrollable);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', checkScrollable);
+        };
+    }, [checkScrollable]);
+    return (jsx("div", { ref: bodyRef, className: cn(theme.body, className), ...props, children: children }));
+};
+ModalBody.displayName = "Modal.Body";
+
+export { ModalBody };

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

@@ -0,0 +1,5 @@
+import { ModalDescriptionProps } from "./Modal.types";
+export declare const ModalDescription: {
+    ({ children, className, ...props }: ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Modal/ModalDescription.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalDescription = ({ children, className, ...props }) => {
+    const { theme, descriptionId } = useModalContext();
+    return (jsx("p", { id: descriptionId, className: cn(theme.description, className), ...props, children: children }));
+};
+ModalDescription.displayName = "Modal.Description";
+
+export { ModalDescription };

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

@@ -0,0 +1,5 @@
+import { ModalFooterProps } from "./Modal.types";
+export declare const ModalFooter: {
+    ({ children, className, ...props }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Modal/ModalFooter.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalFooter = ({ children, className, ...props }) => {
+    const { theme, isBodyScrollable } = useModalContext();
+    return (jsx("div", { className: cn(theme.footer, isBodyScrollable && "border-border", className), ...props, children: children }));
+};
+ModalFooter.displayName = "Modal.Footer";
+
+export { ModalFooter };

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

@@ -0,0 +1,5 @@
+import { ModalHeaderProps } from "./Modal.types";
+export declare const ModalHeader: {
+    ({ children, icon, showCloseButton, className, ...props }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Modal/ModalHeader.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+import { Button } from '../Button/Button.js';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {
+    const { onClose, showCloseButton: contextShowCloseButton, theme, isBodyScrollable, } = useModalContext();
+    const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
+    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full", children: jsx(XMarkIcon, { className: "size-5" }) }) }))] }));
+};
+ModalHeader.displayName = "Modal.Header";
+
+export { ModalHeader };

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

@@ -0,0 +1,5 @@
+import { ModalTitleProps } from "./Modal.types";
+export declare const ModalTitle: {
+    ({ children, className, ...props }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/core/Modal/ModalTitle.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalTitle = ({ children, className, ...props }) => {
+    const { theme, titleId } = useModalContext();
+    return (jsx("div", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+};
+ModalTitle.displayName = "Modal.Title";
+
+export { ModalTitle };

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

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ModalProps, ModalSize, ModalVariant, ModalThemeOverrides } from "./Modal.types";

package/dist/components/core/ModalStack/ModalStack.animations.d.ts

@@ -0,0 +1,9 @@
+import { Variants } from "motion/react";
+/**
+ * Back modal — iOS-style scale-down when the front modal opens.
+ */
+export declare const backModalAnimations: Variants;
+/**
+ * Front modal — standard enter/exit animation.
+ */
+export declare const frontModalAnimations: Variants;

package/dist/components/core/ModalStack/ModalStack.animations.js

@@ -0,0 +1,62 @@
+/**
+ * Back modal — iOS-style scale-down when the front modal opens.
+ */
+const backModalAnimations = {
+    initial: {
+        opacity: 0,
+        y: 20,
+        scale: 1,
+    },
+    idle: {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        borderRadius: "var(--modal-radius)",
+        filter: "brightness(1)",
+        clipPath: "inset(0% 0% 0% 0%)",
+        transition: { type: "spring", damping: 28, stiffness: 280 },
+    },
+    stacked: {
+        opacity: 1,
+        scale: 0.9,
+        y: -4,
+        borderRadius: "var(--modal-radius)",
+        filter: "brightness(0.94) blur(2px)",
+        clipPath: "inset(0% 0% 88% 0%)",
+        transition: { type: "spring", damping: 28, stiffness: 280 },
+    },
+    exit: {
+        opacity: 0,
+        y: 20,
+        transition: { duration: 0.2, ease: "easeIn" },
+    },
+};
+/**
+ * Front modal — standard enter/exit animation.
+ */
+const frontModalAnimations = {
+    initial: {
+        opacity: 0,
+        y: 40,
+        scale: 0.97,
+    },
+    animate: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+            type: "spring",
+            damping: 26,
+            stiffness: 300,
+            delay: 0.05,
+        },
+    },
+    exit: {
+        opacity: 0,
+        y: 40,
+        scale: 0.97,
+        transition: { duration: 0.2, ease: "easeIn" },
+    },
+};
+
+export { backModalAnimations, frontModalAnimations };

package/dist/components/core/ModalStack/ModalStack.d.ts

@@ -0,0 +1,11 @@
+import { type ModalStackModalInternalProps } from "./ModalStackModal";
+import type { ModalStackProps } from "./ModalStack.types";
+export declare const ModalStack: {
+    ({ isOpen, onClose, closeOnOverlayClick, closeOnEsc, children, className, }: ModalStackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Modal: {
+        ({ size, variant, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/core/ModalStack/ModalStack.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Children, isValidElement, useCallback, cloneElement } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Overlay } from '../../effects/Overlay/Overlay.js';
+import { modalOverlayAnimations } from '../Modal/Modal.animations.js';
+import { backModalAnimations, frontModalAnimations } from './ModalStack.animations.js';
+import { ModalStackModal } from './ModalStackModal.js';
+
+const MODAL_STACK_CONTENT_ANIMATION = {
+    initial: { opacity: 1 },
+    animate: { opacity: 1 },
+    exit: { opacity: 1 },
+};
+const ModalStackRoot = ({ isOpen, onClose, closeOnOverlayClick = true, closeOnEsc = true, children, className, }) => {
+    var _a, _b;
+    // Extract all valid modal children
+    const modalChildren = [];
+    Children.forEach(children, (child) => {
+        // Check if the child is a valid element and specifically our ModalStackModal
+        if (isValidElement(child) && child.type === ModalStackModal) {
+            modalChildren.push(child);
+        }
+    });
+    // Calculate generic stack depth:
+    // - Topmost (Front) is the last child
+    // - Second (Back) is the second-to-last child
+    const lastIndex = modalChildren.length - 1;
+    const frontModal = lastIndex >= 0 ? modalChildren[lastIndex] : null;
+    const backModal = lastIndex >= 1 ? modalChildren[lastIndex - 1] : null;
+    const isFrontOpen = (_a = frontModal === null || frontModal === void 0 ? void 0 : frontModal.props.isOpen) !== null && _a !== void 0 ? _a : false;
+    const frontOnClose = frontModal === null || frontModal === void 0 ? void 0 : frontModal.props.onClose;
+    const backModalSize = (_b = backModal === null || backModal === void 0 ? void 0 : backModal.props.size) !== null && _b !== void 0 ? _b : "md";
+    // Escape/overlay click closes the topmost visible modal
+    const handleClose = useCallback(() => {
+        if (isFrontOpen && frontOnClose) {
+            frontOnClose();
+        }
+        else {
+            onClose();
+        }
+    }, [isFrontOpen, frontOnClose, onClose]);
+    return (jsx(Overlay, { isOpen: isOpen, onClose: handleClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: "dialog", ariaModal: true, animations: {
+            overlay: modalOverlayAnimations,
+            content: MODAL_STACK_CONTENT_ANIMATION,
+        }, contentClassName: className, children: jsxs("div", { className: "relative flex items-center justify-center w-full", children: [backModal && (jsx(motion.div, { className: "w-full flex items-center justify-center", variants: backModalAnimations, initial: "initial", animate: isFrontOpen ? "stacked" : "idle", exit: "exit", style: { originY: 0 }, children: cloneElement(backModal, {
+                        _stackOnClose: onClose,
+                        _isBackModal: true,
+                        showCloseButton: lastIndex - 1 === 0 ? backModal.props.showCloseButton : false,
+                    }) }, backModal.key || "back-modal")), jsx(AnimatePresence, { mode: "wait", children: isFrontOpen && frontModal && (jsx(motion.div, { className: "absolute inset-0 flex items-start justify-center w-full pt-3", variants: frontModalAnimations, initial: "initial", animate: "animate", exit: "exit", children: cloneElement(frontModal, {
+                            _stackOnClose: frontOnClose || onClose,
+                            _isBackModal: false,
+                            size: frontModal.props.size || backModalSize,
+                            showCloseButton: false,
+                        }) }, frontModal.key || "front-modal")) })] }) }));
+};
+ModalStackRoot.displayName = "ModalStack";
+const ModalStack = Object.assign(ModalStackRoot, {
+    Modal: ModalStackModal,
+});
+
+export { ModalStack };

package/dist/components/core/ModalStack/ModalStack.theme.d.ts

@@ -0,0 +1,3 @@
+export declare const modalStackTheme: {
+    backButton: string;
+};

package/dist/components/core/ModalStack/ModalStack.theme.js

@@ -0,0 +1,5 @@
+const modalStackTheme = {
+    backButton: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer p-6 pb-0",
+};
+
+export { modalStackTheme };

package/dist/components/core/ModalStack/ModalStack.types.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { ModalSize, ModalVariant, ModalThemeOverrides } from "../Modal/Modal.types";
+export interface ModalStackProps {
+    isOpen: boolean;
+    onClose: () => void;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+export interface ModalStackModalProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+    size?: ModalSize;
+    variant?: ModalVariant;
+    showCloseButton?: boolean;
+    showBackButton?: boolean;
+    onBack?: () => void;
+    children: React.ReactNode;
+    className?: string;
+    theme?: ModalThemeOverrides;
+}
+export interface ModalStackContextValue {
+    isFrontOpen: boolean;
+    isBackModal: boolean;
+    onClose: () => void;
+    showBackButton: boolean;
+    onBack: () => void;
+}

package/dist/components/core/ModalStack/ModalStackModal.d.ts

@@ -0,0 +1,11 @@
+import type { ModalStackModalProps } from "./ModalStack.types";
+export interface ModalStackModalInternalProps extends ModalStackModalProps {
+    /** Injected by ModalStack — the stack-level close handler */
+    _stackOnClose?: () => void;
+    /** Injected by ModalStack — whether this is the back modal */
+    _isBackModal?: boolean;
+}
+export declare const ModalStackModal: {
+    ({ size, variant, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/core/ModalStack/ModalStackModal.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useState, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ModalContext } from '../Modal/Modal.js';
+import { modalTheme, modalSizeVariants } from '../Modal/Modal.theme.js';
+import { ArrowLeftIcon } from '@heroicons/react/24/outline';
+import { modalStackTheme } from './ModalStack.theme.js';
+import { Button } from '../Button/Button.js';
+
+const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = true, showBackButton = false, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }) => {
+    var _a;
+    const id = useId();
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    const [isBodyScrollable, setIsBodyScrollable] = useState(false);
+    const closeHandler = onClose || _stackOnClose || (() => { });
+    const backHandler = onBack || onClose || (() => { });
+    // Reset scroll state when modal becomes hidden (back modal pushed back)
+    useEffect(() => {
+        if (_isBackModal) {
+            setIsBodyScrollable(false);
+        }
+    }, [_isBackModal]);
+    // Merge theme with overrides
+    const theme = {
+        ...modalTheme,
+        ...(themeOverrides || {}),
+        containerVariants: {
+            ...modalTheme.containerVariants,
+            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
+        },
+    };
+    const contextValue = {
+        isOpen: true,
+        onClose: closeHandler,
+        size,
+        closeOnOverlayClick: true,
+        closeOnEsc: true,
+        showCloseButton,
+        theme,
+        isBodyScrollable,
+        setIsBodyScrollable,
+        titleId,
+        descriptionId,
+    };
+    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": descriptionId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
+};
+ModalStackModal.displayName = "ModalStack.Modal";
+
+export { ModalStackModal };

package/dist/components/core/ModalStack/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalStack } from "./ModalStack";
+export type { ModalStackProps, ModalStackModalProps, } from "./ModalStack.types";

package/dist/components/core/NavItem/NavItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NavItemProps } from "./NavItem.types";
+export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLDivElement>>;