mosuk-ui 1.0.1

package/components/overlays/dialogs/dialog/component/component.interface.d.ts

@@ -0,0 +1,8 @@
+import { Dialog } from '@base-ui-components/react/dialog';
+import { RefObject } from 'react';
+export interface DialogProps extends Dialog.Root.Props {
+    ref?: RefObject<HTMLDivElement | null>;
+    container?: Dialog.Portal.Props['container'];
+    keepMounted?: boolean;
+    children?: React.ReactNode;
+}

package/components/overlays/dialogs/dialog/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/overlays/dialogs/dialog/component/component.js

@@ -0,0 +1,139 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Dialog as BaseUiDialog } from '@base-ui-components/react/dialog';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { DialogContext } from './context/component';
+export function Dialog(_a) {
+    var _b;
+    var keepMounted = _a.keepMounted, container = _a.container, rest = __rest(_a, ["keepMounted", "container"]);
+    var popupRef = useRef(null);
+    var _c = useState(1), progress = _c[0], setProgress = _c[1];
+    var _d = useState({
+        isDragging: false,
+        startY: 0,
+        isTouch: false,
+    }), dragState = _d[0], setDragState = _d[1];
+    var isDragging = dragState.isDragging, startY = dragState.startY, isTouch = dragState.isTouch;
+    var applyProgress = useCallback(function (value) {
+        setProgress(value);
+    }, []);
+    var handleOpenChange = useCallback(function (open, eventDetails) {
+        var _a;
+        (_a = rest === null || rest === void 0 ? void 0 : rest.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(rest, open, eventDetails);
+    }, [rest === null || rest === void 0 ? void 0 : rest.onOpenChange]);
+    useEffect(function () {
+        if (rest === null || rest === void 0 ? void 0 : rest.open) {
+            setProgress(0);
+            requestAnimationFrame(function () { return setProgress(1); });
+        }
+        else {
+            setProgress(0);
+        }
+    }, [rest === null || rest === void 0 ? void 0 : rest.open]);
+    var calculateProgress = useCallback(function (clientY) {
+        if (!startY || !popupRef.current)
+            return 1;
+        var delta = clientY - startY;
+        var height = popupRef.current.getBoundingClientRect().height || 0;
+        if (height === 0 || delta <= 0)
+            return 1;
+        return Math.max(0, Math.min(1, 1 - delta / height));
+    }, [startY]);
+    var handleTouchStart = useCallback(function (e) {
+        var now = Date.now();
+        e._lastClick = now;
+        var isTouchEvent = 'touches' in e;
+        var clientY = isTouchEvent ? e.touches[0].clientY : e.clientY;
+        setDragState({
+            isDragging: true,
+            startY: clientY,
+            isTouch: isTouchEvent,
+        });
+    }, [rest === null || rest === void 0 ? void 0 : rest.onOpenChange]);
+    var handleDragMove = useCallback(function (clientY) {
+        if (!isDragging)
+            return;
+        var newProgress = calculateProgress(clientY);
+        applyProgress(newProgress);
+    }, [isDragging, calculateProgress, applyProgress]);
+    var handleDragEnd = useCallback(function (clientY) {
+        var _a;
+        if (!isDragging)
+            return;
+        setDragState(function (s) { return (__assign(__assign({}, s), { isDragging: false })); });
+        if (clientY !== undefined)
+            handleDragMove(clientY);
+        if (progress < 0.5) {
+            (_a = rest === null || rest === void 0 ? void 0 : rest.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(rest, false, undefined);
+        }
+        else {
+            applyProgress(1);
+        }
+    }, [isDragging, handleDragMove, progress, applyProgress, rest === null || rest === void 0 ? void 0 : rest.onOpenChange]);
+    useEffect(function () {
+        if (!isDragging)
+            return;
+        var move = function (e) {
+            handleDragMove(e.clientY);
+        };
+        var touchMove = function (e) {
+            if (e.touches.length > 0) {
+                handleDragMove(e.touches[0].clientY);
+            }
+        };
+        var end = function (e) {
+            handleDragEnd(e.clientY);
+        };
+        var touchEnd = function (e) {
+            if (e.changedTouches.length > 0) {
+                handleDragEnd(e.changedTouches[0].clientY);
+            }
+        };
+        document.addEventListener('mousemove', move);
+        document.addEventListener('mouseup', end);
+        document.addEventListener('touchmove', touchMove, { passive: false });
+        document.addEventListener('touchend', touchEnd);
+        return function () {
+            document.removeEventListener('mousemove', move);
+            document.removeEventListener('mouseup', end);
+            document.removeEventListener('touchmove', touchMove);
+            document.removeEventListener('touchend', touchEnd);
+        };
+    }, [isDragging, handleDragMove, handleDragEnd]);
+    // * Styles
+    var styleVars = useMemo(function () {
+        return ({
+            '--progress': progress,
+        });
+    }, [progress]);
+    return (React.createElement(DialogContext.Provider, { value: {
+            styleVars: styleVars,
+            popupRef: popupRef,
+            isDragging: isDragging,
+            handleTouchStart: handleTouchStart,
+            onOpenChange: handleOpenChange,
+            open: rest === null || rest === void 0 ? void 0 : rest.open,
+        } },
+        React.createElement(BaseUiDialog.Root, __assign({}, rest, { modal: (_b = rest === null || rest === void 0 ? void 0 : rest.modal) !== null && _b !== void 0 ? _b : true, open: rest === null || rest === void 0 ? void 0 : rest.open, onOpenChange: rest === null || rest === void 0 ? void 0 : rest.onOpenChange }),
+            React.createElement(BaseUiDialog.Portal, { container: container !== null && container !== void 0 ? container : undefined, keepMounted: keepMounted !== null && keepMounted !== void 0 ? keepMounted : false }, rest === null || rest === void 0 ? void 0 : rest.children))));
+}

package/components/overlays/dialogs/dialog/component/component.module.css

@@ -0,0 +1,211 @@
+@layer mosuk-ui {
+    @layer index-17 {
+        .backdrop {
+            position: fixed;
+            inset: 0;
+            z-index: 200;
+
+            background-color: rgba(0, 0, 0, calc(var(--progress, 0) * 0.025));
+            backdrop-filter: blur(calc(var(--progress, 0) * 4px));
+
+            transition: all 300ms ease-in-out;
+
+            &.dragging {
+                transition: all 0ms;
+            }
+        }
+
+        .dialog {
+            overflow: hidden;
+
+            position: fixed;
+            inset: 0;
+            z-index: 200;
+
+            width: 100%;
+            height: fit-content;
+            max-height: calc(100% - calc(var(--spacing, 0.25rem) * 16));
+
+            background-color: rgba(255, 255, 255, 1);
+            backdrop-filter: blur(8px);
+
+            margin: auto auto 0 auto;
+            border: 1px solid var(--color-gray-100, oklch(0.967 0.003 264.542));
+            border-top-left-radius: var(--radius-2xl, 1rem);
+            border-top-right-radius: var(--radius-2xl, 1rem);
+            outline: none;
+
+            box-shadow: 0 25px 50px -12px rgba(243, 244, 246, var(--tw-shadow-alpha, 0.5));
+
+            transform: translateY(calc((1 - var(--progress, 0)) * 100%));
+            transition: all 300ms ease-in-out;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .gesture {
+                position: fixed;
+                inset: 0;
+                z-index: 202;
+
+                width: calc(var(--spacing, 0.25rem) * 40);
+                height: calc(var(--spacing, 0.25rem) * 8);
+
+                margin-left: auto;
+                margin-right: auto;
+
+                outline: none;
+                touch-action: none;
+                user-select: none;
+                cursor: grab;
+
+                .line {
+                    display: block;
+
+                    width: calc(var(--spacing, 0.25rem) * 20);
+                    height: calc(var(--spacing, 0.25rem) * 0.75);
+
+                    background-color: var(--color-gray-300, oklch(0.872 0.01 258.338));
+
+                    margin-top: calc(var(--spacing, 0.25rem) * 1.75);
+                    margin-left: auto;
+                    margin-right: auto;
+                    border-radius: 9999px;
+
+                    transition: all 0.2s ease-in-out;
+                }
+
+                &:hover {
+                    .line {
+                        background-color: var(--color-gray-400, oklch(0.707 0.022 261.325));
+                    }
+                }
+
+                &:not(:hover) {
+                    .line {
+                        transition: all 600ms ease-in-out;
+                    }
+                }
+            }
+
+            .header {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 201;
+
+                display: block;
+
+                width: 100%;
+
+                background-color: rgba(255, 255, 255, 0.7);
+                backdrop-filter: blur(12px);
+
+                padding: calc(var(--spacing, 0.25rem) * 3) calc(var(--spacing, 0.25rem) * 4);
+                border-bottom: 1px solid var(--color-gray-100, oklch(0.967 0.003 264.542));
+            }
+
+            .body {
+                overflow-x: hidden;
+                overflow-y: auto;
+
+                display: block;
+
+                height: fit-content;
+                max-height: calc(var(--window-height, 100vh) - calc(var(--spacing, 0.25rem) * 16));
+
+                padding: calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 4);
+                margin: 0 calc(var(--spacing, 0.25rem) * 2);
+
+                &::-webkit-scrollbar {
+                    width: calc(var(--spacing, .25rem) * 1);
+                }
+
+                &::-webkit-scrollbar-track {
+                    margin: calc(var(--header-height, 0px) + var(--spacing, 0.25rem) * 4 + var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 4) calc(var(--footer-height, 0px) + var(--spacing, 0.25rem) * 4 + var(--spacing, 0.25rem) * 4);
+                }
+            }
+
+            .footer {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 201;
+
+                display: block;
+
+                width: 100%;
+
+                background-color: rgba(255, 255, 255, 0.7);
+                backdrop-filter: blur(12px);
+
+                padding: calc(var(--spacing, 0.25rem) * 4);
+                border-top: 1px solid var(--color-gray-100, oklch(0.967 0.003 264.542));
+            }
+
+            &.dragging {
+                transition: all 0ms;
+            }
+
+            &:has(.header) {
+                .body {
+                    padding-top: calc(var(--header-height, 0px) + var(--spacing, 0.25rem) * 4);
+                }
+            }
+
+            &:has(.footer) {
+                .body {
+                    padding-bottom: calc(var(--footer-height, 0px) + var(--spacing, 0.25rem) * 4);
+                }
+            }
+        }
+
+        @media (min-width: 1025px) {
+            .dialog {
+                max-width: var(--container-lg, 512px);
+                max-height: calc(100% - calc(var(--spacing, 0.25rem) * 32));
+
+                margin: auto;
+                border-radius: var(--radius-3xl, 1.5rem);
+
+                scale: calc((0.8 + (var(--progress, 0)) * 0.2));
+                opacity: calc((0 + (var(--progress, 0)) * 1));
+
+                transform: unset;
+
+                .gesture {
+                    display: none;
+                    opacity: 0;
+                }
+
+                .header {
+                    padding: calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 4);
+                }
+
+                .body {
+                    max-height: calc(var(--window-height, 100vh) - calc(var(--spacing, 0.25rem) * 32));
+
+                    padding: calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 4);
+                    margin: 0 calc(var(--spacing, 0.25rem) * 2);
+                }
+
+                .footer {
+                    padding: calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 4);
+                }
+
+                &:has(.header) {
+                    .body {
+                        padding-top: calc(var(--header-height, 0px) + var(--spacing, 0.25rem) * 7);
+                    }
+                }
+
+                &:has(.footer) {
+                    .body {
+                        padding-bottom: calc(var(--footer-height, 0px) + var(--spacing, 0.25rem) * 7);
+                    }
+                }
+            }
+        }
+    }
+}

package/components/overlays/dialogs/dialog/component/context/component.d.ts

@@ -0,0 +1,2 @@
+import { DialogContextProps } from './component.interface';
+export declare const DialogContext: import("react").Context<DialogContextProps | null>;

package/components/overlays/dialogs/dialog/component/context/component.interface.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, MouseEvent, RefObject, TouchEvent } from 'react';
+export interface DialogContextProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    styleVars: CSSProperties;
+    popupRef: RefObject<HTMLDivElement | null>;
+    isDragging: boolean;
+    handleTouchStart: (e: TouchEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>) => void;
+}

package/components/overlays/dialogs/dialog/component/context/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/overlays/dialogs/dialog/component/context/component.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var DialogContext = createContext(null);

package/components/overlays/dialogs/dialog/component/dialog/body/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { DialogDialogBodyProps } from './component.interface';
+export declare function DialogDialogBody<C extends ElementType = 'div'>({ ...rest }: DialogDialogBodyProps<C>): React.JSX.Element;

package/components/overlays/dialogs/dialog/component/dialog/body/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type DialogDialogBodyProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/overlays/dialogs/dialog/component/dialog/body/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/overlays/dialogs/dialog/component/dialog/body/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../../component.module.css';
+export function DialogDialogBody(_a) {
+    var rest = __rest(_a, []);
+    var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'div');
+    return (React.createElement(Component, __assign({}, rest, { ref: rest === null || rest === void 0 ? void 0 : rest.ref, className: classNames('mosuk-dialog-dialog-body', styles.body, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/dialogs/dialog/component/dialog/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DialogDialogProps } from './component.interface';
+export declare function DialogDialog({ ...props }: DialogDialogProps): React.JSX.Element;

package/components/overlays/dialogs/dialog/component/dialog/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { Dialog } from '@base-ui-components/react/dialog';
+export interface DialogDialogProps extends Dialog.Popup.Props {
+}

package/components/overlays/dialogs/dialog/component/dialog/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/overlays/dialogs/dialog/component/dialog/component.js

@@ -0,0 +1,85 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Dialog as BaseUiDialog } from '@base-ui-components/react/dialog';
+import React, { useContext, useEffect } from 'react';
+import styles from '../component.module.css';
+import { DialogContext } from '../context/component';
+export function DialogDialog(_a) {
+    var props = __rest(_a, []);
+    var context = useContext(DialogContext);
+    if (!context) {
+        throw new Error('Dialog.Dialog must be used within a Dialog.Context');
+    }
+    var styleVars = context.styleVars, popupRef = context.popupRef, isDragging = context.isDragging, handleTouchStart = context.handleTouchStart, onOpenChange = context.onOpenChange, open = context.open;
+    var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
+    useEffect(function () {
+        if (!open)
+            return;
+        var rafId = null;
+        var measureAndMutate = function () {
+            var container = popupRef.current;
+            if (!container)
+                return;
+            var header = container.querySelector(".".concat(styles.header));
+            var footer = container.querySelector(".".concat(styles.footer));
+            var windowH = window.innerHeight;
+            // read in this frame
+            var headerH = (header === null || header === void 0 ? void 0 : header.getBoundingClientRect().height) || 0;
+            var footerH = (footer === null || footer === void 0 ? void 0 : footer.getBoundingClientRect().height) || 0;
+            // write in next frame
+            rafId = requestAnimationFrame(function () {
+                var node = popupRef.current;
+                if (!node)
+                    return;
+                node.style.setProperty('--window-height', "".concat(windowH, "px"));
+                node.style.setProperty('--header-height', "".concat(headerH, "px"));
+                node.style.setProperty('--footer-height', "".concat(footerH, "px"));
+            });
+        };
+        var ro = new ResizeObserver(function () {
+            if (rafId)
+                cancelAnimationFrame(rafId);
+            requestAnimationFrame(measureAndMutate);
+        });
+        if (popupRef.current) {
+            ro.observe(popupRef.current);
+        }
+        // initial
+        requestAnimationFrame(measureAndMutate);
+        var onResize = function () { return requestAnimationFrame(measureAndMutate); };
+        window.addEventListener('resize', onResize);
+        return function () {
+            window.removeEventListener('resize', onResize);
+            ro.disconnect();
+            if (rafId)
+                cancelAnimationFrame(rafId);
+        };
+    }, [open]);
+    return (React.createElement(BaseUiDialog.Popup, __assign({}, rest, { ref: popupRef, className: "mosuk-dialog-dialog ".concat(styles.dialog, " ").concat(isDragging ? " ".concat(styles.dragging) : '').concat(className ? " ".concat(className) : ''), style: styleVars, onKeyDown: function (e) {
+            if (e.key === 'Escape')
+                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+        } }),
+        React.createElement("div", { className: styles.gesture, onMouseDown: function (e) { return handleTouchStart(e); }, onTouchStart: function (e) { return handleTouchStart(e); } },
+            React.createElement("button", { autoFocus: true, className: styles.line })),
+        children));
+}

package/components/overlays/dialogs/dialog/component/dialog/footer/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { DialogDialogFooterProps } from './component.interface';
+export declare function DialogDialogFooter<C extends ElementType = 'div'>({ ...rest }: DialogDialogFooterProps<C>): React.JSX.Element;

package/components/overlays/dialogs/dialog/component/dialog/footer/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type DialogDialogFooterProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/overlays/dialogs/dialog/component/dialog/footer/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/overlays/dialogs/dialog/component/dialog/footer/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../../component.module.css';
+export function DialogDialogFooter(_a) {
+    var rest = __rest(_a, []);
+    var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'div');
+    return (React.createElement(Component, __assign({}, rest, { ref: rest === null || rest === void 0 ? void 0 : rest.ref, className: classNames('mosuk-dialog-dialog-footer', styles.footer, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/dialogs/dialog/component/dialog/header/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { DialogDialogHeaderProps } from './component.interface';
+export declare function DialogDialogHeader<C extends ElementType = 'div'>({ ...rest }: DialogDialogHeaderProps<C>): React.JSX.Element;

package/components/overlays/dialogs/dialog/component/dialog/header/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type DialogDialogHeaderProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/overlays/dialogs/dialog/component/dialog/header/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/overlays/dialogs/dialog/component/dialog/header/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../../component.module.css';
+export function DialogDialogHeader(_a) {
+    var rest = __rest(_a, []);
+    var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'div');
+    return (React.createElement(Component, __assign({}, rest, { ref: rest === null || rest === void 0 ? void 0 : rest.ref, className: classNames('mosuk-dialog-dialog-header', styles.header, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/dialogs/dialog/component/index.d.ts

@@ -0,0 +1,43 @@
+import { DialogBackdrop } from './backdrop/component';
+import { DialogBackdropProps } from './backdrop/component.interface';
+import { Dialog as BaseDialog } from './component';
+import { DialogProps } from './component.interface';
+import { DialogContextProps } from './context/component.interface';
+import { DialogDialogBody } from './dialog/body/component';
+import { DialogDialogBodyProps } from './dialog/body/component.interface';
+import { DialogDialog } from './dialog/component';
+import { DialogDialogProps } from './dialog/component.interface';
+import { DialogDialogFooter } from './dialog/footer/component';
+import { DialogDialogFooterProps } from './dialog/footer/component.interface';
+import { DialogDialogHeader } from './dialog/header/component';
+import { DialogDialogHeaderProps } from './dialog/header/component.interface';
+export declare const Dialog: typeof BaseDialog & {
+    Context: import("react").Context<DialogContextProps | null>;
+    Backdrop: typeof DialogBackdrop;
+    Dialog: typeof DialogDialog & {
+        Header: typeof DialogDialogHeader;
+        Body: typeof DialogDialogBody;
+        Footer: typeof DialogDialogFooter;
+    };
+};
+export declare namespace Dialog {
+    type Props = DialogProps;
+    namespace Context {
+        type Props = DialogContextProps;
+    }
+    namespace Backdrop {
+        type Props = DialogBackdropProps;
+    }
+    namespace Dialog {
+        type Props = DialogDialogProps;
+        namespace Header {
+            type Props = DialogDialogHeaderProps;
+        }
+        namespace Body {
+            type Props = DialogDialogBodyProps;
+        }
+        namespace Footer {
+            type Props = DialogDialogFooterProps;
+        }
+    }
+}