mosuk-ui 1.0.1

package/components/layouts/tabbar/skeleton/component.module.css

@@ -0,0 +1,105 @@
+@layer mosuk-ui {
+    @layer index-16 {
+        .tabbar {
+            position: fixed;
+            top: auto;
+            right: calc(var(--spacing, .25rem) * 2);
+            bottom: calc(var(--spacing, .25rem) * 2);
+            left: calc(var(--spacing, .25rem) * 2);
+            z-index: 100;
+
+            width: calc(100% - calc(var(--spacing, .25rem) * 4));
+            height: calc(var(--spacing, .25rem) * 16);
+
+            background-color: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(12px);
+
+            padding: calc(var(--spacing, .25rem) * 1);
+            border-radius: calc(infinity * 1px);
+            border: 1px solid var(--color-gray-100, oklch(0.967 0.003 264.542));
+            box-shadow: 0 -25px 50px -12px rgba(243, 244, 246, var(--tw-shadow-alpha, 0.5));
+
+            opacity: calc(100% - var(--progress, 0%) * 1);
+            scale: calc(100% - var(--progress, 0%) * 0.25);
+            translate: 0 calc(0% + var(--progress, 0%) * 0.125);
+        }
+
+        .tabs {
+            position: relative;
+
+            width: 100%;
+            height: 100%;
+
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: calc(var(--spacing, .25rem) * 1);
+        }
+
+        .tab {
+            overflow: hidden;
+            position: relative;
+            z-index: 1;
+
+            width: calc(var(--spacing, .25rem) * 20);
+            height: 100%;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: calc(var(--spacing, .25rem) * 1);
+
+            font-size: var(--text-2xs, 0.625rem);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            padding: calc(var(--spacing, .25rem) * 4);
+            border-radius: calc(infinity * 1px);
+
+            cursor: pointer;
+            transition: all 200ms ease-in-out;
+
+            svg {
+                width: calc(var(--spacing, .25rem) * 5);
+                height: calc(var(--spacing, .25rem) * 5);
+                min-width: calc(var(--spacing, .25rem) * 5);
+                min-height: calc(var(--spacing, .25rem) * 5);
+
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+                transition: all 200ms ease-in-out;
+            }
+
+            &:hover,
+            &.active {
+                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+                color: var(--color-primary-500, #0074e7);
+
+                svg {
+                    color: var(--color-primary-500, #0074e7);
+                }
+            }
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+
+                svg {
+                    transition: all 600ms ease-in-out;
+                }
+            }
+
+            &:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+                pointer-events: none;
+            }
+        }
+
+        @media (min-width: 1024px) {
+            .tabbar {
+                display: none;
+            }
+        }
+    }
+}

package/components/layouts/tabbar/skeleton/index.d.ts

@@ -0,0 +1,19 @@
+import { TabbarSkeleton as BaseTabbarSkeleton } from './component';
+import type { TabbarSkeletonProps } from './component.interface';
+import { TabbarTabsSkeleton } from './tabs/component';
+import { TabbarTabsTabSkeleton } from './tabs/tab/component';
+import { TabbarTabsTabSkeletonProps } from './tabs/tab/component.interface';
+export declare const TabbarSkeleton: typeof BaseTabbarSkeleton & {
+    Tabs: typeof TabbarTabsSkeleton & {
+        Tab: typeof TabbarTabsTabSkeleton;
+    };
+};
+export declare namespace TabbarSkeleton {
+    type Props = TabbarSkeletonProps;
+    namespace Tabs {
+        type Props = TabbarTabsTabSkeletonProps;
+        namespace Tab {
+            type Props = TabbarTabsTabSkeletonProps;
+        }
+    }
+}

package/components/layouts/tabbar/skeleton/index.js

@@ -0,0 +1,8 @@
+import { TabbarSkeleton as BaseTabbarSkeleton } from './component';
+import { TabbarTabsSkeleton } from './tabs/component';
+import { TabbarTabsTabSkeleton } from './tabs/tab/component';
+export var TabbarSkeleton = Object.assign(BaseTabbarSkeleton, {
+    Tabs: Object.assign(TabbarTabsSkeleton, {
+        Tab: TabbarTabsTabSkeleton,
+    }),
+});

package/components/layouts/tabbar/skeleton/tabs/component.d.ts

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

package/components/layouts/tabbar/skeleton/tabs/component.interface.d.ts

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

package/components/layouts/tabbar/skeleton/tabs/component.interface.js

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

package/components/layouts/tabbar/skeleton/tabs/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 TabbarTabsSkeleton(_a) {
+    var rest = __rest(_a, []);
+    var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'nav');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabbar-tabs-skeleton', styles.tabs, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/layouts/tabbar/skeleton/tabs/tab/component.d.ts

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

package/components/layouts/tabbar/skeleton/tabs/tab/component.interface.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type TabbarTabsTabSkeletonProps<C extends ElementType = 'a'> = {
+    as?: C;
+    ref?: Ref<any>;
+    isActive?: boolean;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/layouts/tabbar/skeleton/tabs/tab/component.interface.js

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

package/components/layouts/tabbar/skeleton/tabs/tab/component.js

@@ -0,0 +1,35 @@
+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 TabbarTabsTabSkeleton(_a) {
+    var _b;
+    var as = _a.as, isActive = _a.isActive, rest = __rest(_a, ["as", "isActive"]);
+    var Component = (as || 'a');
+    var isLinkActive = isActive;
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabbar-tabs-tab', (_b = {},
+            _b[styles.tab] = true,
+            _b[styles.active] = isLinkActive,
+            _b), rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/alert/component/close/component.d.ts

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

package/components/overlays/alert/component/close/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { Toast } from '@base-ui-components/react/toast';
+export interface CloseProps extends Toast.Close.Props {
+}

package/components/overlays/alert/component/close/component.interface.js

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

package/components/overlays/alert/component/close/component.js

@@ -0,0 +1,28 @@
+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 { Toast } from '@base-ui-components/react/toast';
+import React from 'react';
+export function Close(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Toast.Close, __assign({}, rest), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/alert/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AlertProps } from './component.interface';
+export declare function Alert({ toast, ...rest }: AlertProps): React.JSX.Element | null;

package/components/overlays/alert/component/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { Toast } from '@base-ui-components/react/toast';
+export interface AlertProps extends Omit<Toast.Root.Props, 'toast'> {
+    toast?: Toast.Root.Props['toast'];
+}

package/components/overlays/alert/component/component.interface.js

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

package/components/overlays/alert/component/component.js

@@ -0,0 +1,31 @@
+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 { Toast } from '@base-ui-components/react/toast';
+import React from 'react';
+export function Alert(_a) {
+    var toast = _a.toast, rest = __rest(_a, ["toast"]);
+    if (!toast) {
+        return null;
+    }
+    return (React.createElement(Toast.Root, __assign({ toast: toast }, rest), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/alert/component/index.d.ts

@@ -0,0 +1,13 @@
+import { Close } from './close/component';
+import { CloseProps } from './close/component.interface';
+import { Alert as BaseAlert } from './component';
+import type { AlertProps } from './component.interface';
+export declare const Alert: typeof BaseAlert & {
+    Close: typeof Close;
+};
+export declare namespace Alert {
+    type Props = AlertProps;
+    namespace Close {
+        type Props = CloseProps;
+    }
+}

package/components/overlays/alert/component/index.js

@@ -0,0 +1,5 @@
+import { Close } from './close/component';
+import { Alert as BaseAlert } from './component';
+export var Alert = Object.assign(BaseAlert, {
+    Close: Close
+});

package/components/overlays/dialogs/dialog/(images)/component.module.css

@@ -0,0 +1,24 @@
+@layer mosuk-ui {
+    @layer index-27 {
+        .dialog {
+            width: 100%;
+            height: 100%;
+        }
+
+        .images {
+            --swiper-navigation-sides-offset: calc(var(--spacing, 0.25rem) * 4);
+
+            width: 100%;
+            height: 100%;
+        }
+
+        @media (min-width: 1025px) {
+            .dialog {
+                max-width: 100%;
+                max-height: 100%;
+
+                border-radius: 0;
+            }
+        }
+    }
+}

package/components/overlays/dialogs/dialog/(images)/dialog/component.d.ts

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

package/components/overlays/dialogs/dialog/(images)/dialog/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { DialogDialogProps as ParentDialogProps } from '../../component/dialog/component.interface';
+export interface DialogImagesDialogProps extends ParentDialogProps {
+}

package/components/overlays/dialogs/dialog/(images)/dialog/component.interface.js

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

package/components/overlays/dialogs/dialog/(images)/dialog/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 { DialogDialog } from '../../component/dialog/component';
+import style from '../component.module.css';
+export function DialogImagesDialog(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(DialogDialog, __assign({}, rest, { className: classNames(style.dialog, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/overlays/dialogs/dialog/(images)/dialog/images/component.d.ts

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

package/components/overlays/dialogs/dialog/(images)/dialog/images/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { SwiperProps } from 'swiper/react';
+export interface DialogImagesDialogImagesProps extends SwiperProps {
+}

package/components/overlays/dialogs/dialog/(images)/dialog/images/component.interface.js

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

package/components/overlays/dialogs/dialog/(images)/dialog/images/component.js

@@ -0,0 +1,47 @@
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import classNames from 'classnames';
+import React, { Children, isValidElement } from 'react';
+import { Navigation } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import styles from '../../component.module.css';
+import { DialogImagesDialogImagesImage } from './image/component';
+export function DialogImagesDialogImages(_a) {
+    var _b, _c, _d, _e;
+    var rest = __rest(_a, []);
+    return (React.createElement(Swiper, __assign({}, rest, { modules: __spreadArray([Navigation], ((rest === null || rest === void 0 ? void 0 : rest.modules) || []), true), navigation: true, speed: (_b = rest === null || rest === void 0 ? void 0 : rest.speed) !== null && _b !== void 0 ? _b : 400, spaceBetween: (_c = rest === null || rest === void 0 ? void 0 : rest.spaceBetween) !== null && _c !== void 0 ? _c : 0, slidesPerView: (_d = rest === null || rest === void 0 ? void 0 : rest.slidesPerView) !== null && _d !== void 0 ? _d : 1, draggable: (_e = rest === null || rest === void 0 ? void 0 : rest.draggable) !== null && _e !== void 0 ? _e : true, className: classNames('dialog-images-dialog-images', styles.images, rest === null || rest === void 0 ? void 0 : rest.className) }), Children.map(rest === null || rest === void 0 ? void 0 : rest.children, function (child, index) {
+        if (isValidElement(child) && child.type === DialogImagesDialogImagesImage) {
+            return (React.createElement(SwiperSlide, { key: index, className: classNames('dialog-images-dialog-images-slide', rest === null || rest === void 0 ? void 0 : rest.className) }, child));
+        }
+        return child;
+    })));
+}

package/components/overlays/dialogs/dialog/(images)/dialog/images/image/component.d.ts

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

package/components/overlays/dialogs/dialog/(images)/dialog/images/image/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { ImageImageProps } from '../../../../../../../display/image/component/image/component.interface';
+export interface DialogImagesDialogImagesImageProps extends ImageImageProps {
+}

package/components/overlays/dialogs/dialog/(images)/dialog/images/image/component.interface.js

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

package/components/overlays/dialogs/dialog/(images)/dialog/images/image/component.js

@@ -0,0 +1,28 @@
+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 React from 'react';
+import { ImageImage } from '../../../../../../../display/image/component/image/component';
+export function DialogImagesDialogImagesImage(_a) {
+    var rest = __rest(_a, []);
+    return React.createElement(ImageImage, __assign({}, rest), rest === null || rest === void 0 ? void 0 : rest.children);
+}

package/components/overlays/dialogs/dialog/(images)/index.d.ts

@@ -0,0 +1,49 @@
+import { DialogBackdrop as ParentDialogBackdrop } from '../component/backdrop/component';
+import { DialogBackdropProps as ParentDialogBackdropProps } from '../component/backdrop/component.interface';
+import { DialogProps as ParentDialogProps } from '../component/component.interface';
+import { DialogContextProps as ParentDialogContextProps } from '../component/context/component.interface';
+import { DialogDialogBodyProps as ParentDialogBodyProps } from '../component/dialog/body/component.interface';
+import { DialogDialogFooterProps as ParentDialogFooterProps } from '../component/dialog/footer/component.interface';
+import { DialogDialogHeaderProps as ParentDialogHeaderProps } from '../component/dialog/header/component.interface';
+import { DialogImagesDialog } from './dialog/component';
+import { DialogImagesDialogProps } from './dialog/component.interface';
+import { DialogImagesDialogImages } from './dialog/images/component';
+import { DialogImagesDialogImagesProps } from './dialog/images/component.interface';
+import { DialogImagesDialogImagesImage } from './dialog/images/image/component';
+import { DialogImagesDialogImagesImageProps } from './dialog/images/image/component.interface';
+export declare const DialogImages: ((props: ParentDialogProps) => import("react").JSX.Element) & {
+    Context: import("react").Context<ParentDialogContextProps | null>;
+    Backdrop: typeof ParentDialogBackdrop;
+    Dialog: typeof DialogImagesDialog & {
+        Images: typeof DialogImagesDialogImages & {
+            Image: typeof DialogImagesDialogImagesImage;
+        };
+    };
+};
+export declare namespace Dialog {
+    type Props = ParentDialogProps;
+    namespace Context {
+        type Props = ParentDialogContextProps;
+    }
+    namespace Backdrop {
+        type Props = ParentDialogBackdropProps;
+    }
+    namespace Dialog {
+        type Props = DialogImagesDialogProps;
+        namespace Header {
+            type Props = ParentDialogHeaderProps;
+        }
+        namespace Body {
+            type Props = ParentDialogBodyProps;
+        }
+        namespace Footer {
+            type Props = ParentDialogFooterProps;
+        }
+        namespace Images {
+            type Props = DialogImagesDialogImagesProps;
+            namespace Image {
+                type Props = DialogImagesDialogImagesImageProps;
+            }
+        }
+    }
+}

package/components/overlays/dialogs/dialog/(images)/index.js

@@ -0,0 +1,16 @@
+import { DialogBackdrop as ParentDialogBackdrop } from '../component/backdrop/component';
+import { Dialog as ParentDialog } from '../component/component';
+import { DialogContext as ParentDialogContext } from '../component/context/component';
+import { DialogImagesDialog } from './dialog/component';
+import { DialogImagesDialogImages } from './dialog/images/component';
+import { DialogImagesDialogImagesImage } from './dialog/images/image/component';
+var ChildDialog = function (props) { return ParentDialog(props); };
+export var DialogImages = Object.assign(ChildDialog, {
+    Context: ParentDialogContext,
+    Backdrop: ParentDialogBackdrop,
+    Dialog: Object.assign(DialogImagesDialog, {
+        Images: Object.assign(DialogImagesDialogImages, {
+            Image: DialogImagesDialogImagesImage,
+        }),
+    }),
+});

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+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 classNames from 'classnames';
+import React, { useContext } from 'react';
+import styles from '../component.module.css';
+import { DialogContext } from '../context/component';
+export function DialogBackdrop(_a) {
+    var _b;
+    var rest = __rest(_a, []);
+    var context = useContext(DialogContext);
+    if (!context) {
+        throw new Error('Dialog.Backdrop must be used within a Dialog.Context');
+    }
+    var _c = context, styleVars = _c.styleVars, isDragging = _c.isDragging;
+    return (React.createElement(BaseUiDialog.Backdrop, __assign({}, rest, { style: __assign(__assign({}, rest === null || rest === void 0 ? void 0 : rest.style), styleVars), className: classNames('mosuk-dialog-backdrop', styles.backdrop, (_b = {},
+            _b[styles.dragging] = isDragging,
+            _b), rest === null || rest === void 0 ? void 0 : rest.className) })));
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DialogProps } from './component.interface';
+export declare function Dialog({ keepMounted, container, ...rest }: DialogProps): React.JSX.Element;