@commercetools/nimbus 2.9.1 → 2.11.0

package/dist/components/icon-button.es.js

@@ -1,4 +1,4 @@
-import { I as n } from "../chunks/icon-button-CsfjzFu5.es.js";
+import { I as n } from "../chunks/icon-button-COjLtd6N.es.js";
 export {
   n as IconButton
 };

package/dist/components/icon-toggle-button/icon-toggle-button.figma.d.ts

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

package/dist/components/icon-toggle-button.cjs

@@ -1,2 +1,2 @@
-"use strict";const o=require("../chunks/icon-toggle-button-Bg8u0Y6z.cjs.js");exports.IconToggleButton=o.IconToggleButton;
+"use strict";const o=require("../chunks/icon-toggle-button-BUG86RqE.cjs.js");exports.IconToggleButton=o.IconToggleButton;
 //# sourceMappingURL=icon-toggle-button.cjs.map

package/dist/components/icon-toggle-button.es.js

@@ -1,4 +1,4 @@
-import { I as e } from "../chunks/icon-toggle-button-D88M7O7u.es.js";
+import { I as e } from "../chunks/icon-toggle-button-CBEMJReu.es.js";
 export {
   e as IconToggleButton
 };

package/dist/components/index.d.ts

@@ -1,8 +1,11 @@
+export * from './scroll-area';
+export * from './toast';
 export * from './avatar';
 export * from './box';
 export * from './button';
 export * from './code';
 export * from './combobox';
+export * from './default-page';
 export * from './dialog';
 export * from './field-errors';
 export * from './flex';
@@ -64,7 +67,8 @@ export * from './data-table';
 export * from './page-content';
 export * from './pagination';
 export * from './drawer';
+export * from './tab-nav';
 export * from './tabs';
-export * from './toast';
 export * from './localized-field';
 export * from './steps';
+export * from './modal-page';

package/dist/components/inline-svg.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/inline-svg-Ct3XXJCo.cjs.js");exports.InlineSvg=e.InlineSvg;
+"use strict";const e=require("../chunks/inline-svg-Che-ey1M.cjs.js");exports.InlineSvg=e.InlineSvg;
 //# sourceMappingURL=inline-svg.cjs.map

package/dist/components/kbd.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/kbd-C22HGSIk.cjs.js");exports.Kbd=e.Kbd;
+"use strict";const e=require("../chunks/kbd-C7j2lBXn.cjs.js");exports.Kbd=e.Kbd;
 //# sourceMappingURL=kbd.cjs.map

package/dist/components/kbd.es.js

@@ -1,4 +1,4 @@
-import { K } from "../chunks/kbd-pvGIJN_-.es.js";
+import { K } from "../chunks/kbd-cMLVKsgq.es.js";
 export {
   K as Kbd
 };

package/dist/components/link/link.figma.d.ts

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

package/dist/components/link.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/link-DmxaGmar.cjs.js");exports.Link=e.Link;
+"use strict";const e=require("../chunks/link-CtHsn3Fs.cjs.js");exports.Link=e.Link;
 //# sourceMappingURL=link.cjs.map

package/dist/components/link.es.js

@@ -1,4 +1,4 @@
-import { L } from "../chunks/link-B1bi6UkZ.es.js";
+import { L } from "../chunks/link-BagSeub_.es.js";
 export {
   L as Link
 };

package/dist/components/list.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("../chunks/list-DJWmJm0u.cjs.js");exports.List=t.List;exports._ListIndicator=t.ListIndicator;exports._ListItem=t.ListItem;exports._ListRoot=t.ListRoot;
+"use strict";const t=require("../chunks/list-DZkO_S3d.cjs.js");exports.List=t.List;exports._ListIndicator=t.ListIndicator;exports._ListItem=t.ListItem;exports._ListRoot=t.ListRoot;
 //# sourceMappingURL=list.cjs.map

package/dist/components/list.es.js

@@ -1,4 +1,4 @@
-import { L as a, a as i, b as o, c as L } from "../chunks/list-IEZDjRJJ.es.js";
+import { L as a, a as i, b as o, c as L } from "../chunks/list-DZIxOhF7.es.js";
 export {
   a as List,
   i as _ListIndicator,

package/dist/components/loading-spinner/loading-spinner.figma.d.ts

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

package/dist/components/loading-spinner.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/loading-spinner-C2hfbSXt.cjs.js");exports.LoadingSpinner=e.LoadingSpinner;
+"use strict";const e=require("../chunks/loading-spinner-KDA1v0Qr.cjs.js");exports.LoadingSpinner=e.LoadingSpinner;
 //# sourceMappingURL=loading-spinner.cjs.map

package/dist/components/loading-spinner.es.js

@@ -1,4 +1,4 @@
-import { L as r } from "../chunks/loading-spinner-DQ33Zrq8.es.js";
+import { L as r } from "../chunks/loading-spinner-DjYAzT9l.es.js";
 export {
   r as LoadingSpinner
 };

package/dist/components/localized-field/localized-field.figma.d.ts

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

package/dist/components/localized-field/localized-field.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const localizedFieldSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "description" | "error" | "infoDialog" | "fieldsContainer" | "toggleButtonContainer" | "localeFieldRoot" | "localeFieldLabel" | "localeFieldInput" | "localeFieldDescription" | "localeFieldError", {
+export declare const localizedFieldSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "error" | "description" | "infoDialog" | "fieldsContainer" | "toggleButtonContainer" | "localeFieldRoot" | "localeFieldLabel" | "localeFieldInput" | "localeFieldDescription" | "localeFieldError", {
     size: {
         md: {
             root: {

package/dist/components/localized-field/utils/localized-field.utils.d.ts

@@ -15,7 +15,7 @@ export declare const getLocaleFieldAttribute: (fieldGroupAttr?: string, locale?:
 export declare const getLanguageForLocale: (locale: string) => string;
 export declare const splitLanguages: (defaultLocale: string, locales: string[]) => LanguagesSplitByDefaultLocale;
 export declare const sortLocalesByDefaultLocaleLanguage: (defaultLocale: string, allLocales: string[]) => string[];
-export declare const sortCurrencies: (defaultCurrency: CurrencyCode, allCurrencies: CurrencyCode[]) => ("ADP" | "AED" | "AFA" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "ATS" | "AUD" | "AWG" | "AYM" | "AZM" | "AZN" | "BAM" | "BBD" | "BDT" | "BEF" | "BGL" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYB" | "BYN" | "BYR" | "BZD" | "CAD" | "CDF" | "CHF" | "CLF" | "CLP" | "CNY" | "COP" | "CRC" | "CSD" | "CUC" | "CUP" | "CVE" | "CYP" | "CZK" | "DEM" | "DJF" | "DKK" | "DOP" | "DZD" | "EEK" | "EGP" | "ERN" | "ESP" | "ETB" | "EUR" | "FIM" | "FJD" | "FKP" | "FRF" | "GBP" | "GEL" | "GHC" | "GHS" | "GIP" | "GMD" | "GNF" | "GRD" | "GTQ" | "GWP" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "IEP" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "ITL" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LTL" | "LUF" | "LVL" | "LYD" | "MAD" | "MDL" | "MGA" | "MGF" | "MKD" | "MMK" | "MNT" | "MOP" | "MRO" | "MTL" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZM" | "MZN" | "NAD" | "NGN" | "NIO" | "NLG" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PTE" | "PYG" | "QAR" | "ROL" | "RON" | "RSD" | "RUB" | "RUR" | "RWF" | "SAR" | "SBD" | "SCR" | "SDD" | "SDG" | "SEK" | "SGD" | "SHP" | "SIT" | "SKK" | "SLL" | "SOS" | "SRD" | "SRG" | "SSP" | "STD" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMM" | "TMT" | "TND" | "TOP" | "TPE" | "TRL" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "USS" | "UYU" | "UZS" | "VEB" | "VEF" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XFO" | "XFU" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "YUM" | "ZAR" | "ZMK" | "ZMW" | "ZWD" | "ZWL" | "ZWN" | "ZWR")[];
+export declare const sortCurrencies: (defaultCurrency: CurrencyCode, allCurrencies: CurrencyCode[]) => ("ADP" | "AED" | "AFA" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "ATS" | "AUD" | "AWG" | "AYM" | "AZM" | "AZN" | "BAM" | "BBD" | "BDT" | "BEF" | "BGL" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYB" | "BYN" | "BYR" | "BZD" | "CAD" | "CDF" | "CHF" | "CLF" | "CLP" | "CNY" | "COP" | "CRC" | "CSD" | "CUC" | "CUP" | "CVE" | "CYP" | "CZK" | "DEM" | "DJF" | "DKK" | "DOP" | "DZD" | "EEK" | "EGP" | "ERN" | "ESP" | "ETB" | "EUR" | "FIM" | "FJD" | "FKP" | "FRF" | "GBP" | "GEL" | "GHC" | "GHS" | "GIP" | "GMD" | "GNF" | "GRD" | "GTQ" | "GWP" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "IEP" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "ITL" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LTL" | "LUF" | "LVL" | "LYD" | "MAD" | "MDL" | "MGA" | "MGF" | "MKD" | "MMK" | "MNT" | "MOP" | "MRO" | "MTL" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZM" | "MZN" | "NAD" | "NGN" | "NIO" | "NLG" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PTE" | "PYG" | "QAR" | "ROL" | "RON" | "RSD" | "RUB" | "RUR" | "RWF" | "SAR" | "SBD" | "SCR" | "SDD" | "SDG" | "SEK" | "SGD" | "SHP" | "SIT" | "SKK" | "SLL" | "SOS" | "SRD" | "SRG" | "SSP" | "STD" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMM" | "TMT" | "TND" | "TOP" | "TPE" | "TRL" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "USS" | "UYU" | "UZS" | "VEB" | "VEF" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XFO" | "XFU" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "YUM" | "ZAR" | "ZMK" | "ZMW" | "ZWD" | "ZWL" | "ZWN" | "ZWR" | "CZK0" | "HUF0" | "ILS0" | "KZT0" | "TRY0" | "TWD0")[];
 export declare const getHasInvalidLocalizedFields: <TErrors extends object>(errors?: TErrors, defaultLocaleOrCurrency?: string) => boolean;
 export declare const createLocalizedString: (locales: string[], existingLocalizedString: LocalizedString) => LocalizedString;
 export declare const isEmpty: (localizedString?: LocalizedString) => boolean;

package/dist/components/localized-field.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/localized-field-BecRbjT7.cjs.js");exports.LocalizedField=e.LocalizedField;
+"use strict";const e=require("../chunks/localized-field-B69EDfq1.cjs.js");exports.LocalizedField=e.LocalizedField;
 //# sourceMappingURL=localized-field.cjs.map

package/dist/components/localized-field.es.js

@@ -1,4 +1,4 @@
-import { L as a } from "../chunks/localized-field-B1kgb4OI.es.js";
+import { L as a } from "../chunks/localized-field-BrdKlDDc.es.js";
 export {
   a as LocalizedField
 };

package/dist/components/modal-page/components/index.d.ts

@@ -0,0 +1,9 @@
+export { ModalPageRoot } from './modal-page.root';
+export { ModalPageTopBar } from './modal-page.top-bar';
+export { ModalPageHeader } from './modal-page.header';
+export { ModalPageTitle } from './modal-page.title';
+export { ModalPageSubtitle } from './modal-page.subtitle';
+export { ModalPageActions } from './modal-page.actions';
+export { ModalPageTabNav } from './modal-page.tab-nav';
+export { ModalPageContent } from './modal-page.content';
+export { ModalPageFooter } from './modal-page.footer';

package/dist/components/modal-page/components/modal-page.actions.d.ts

@@ -0,0 +1,10 @@
+import { ModalPageActionsProps } from '../modal-page.types';
+/**
+ * ModalPage.Actions — action buttons container, aligned to the right of the header.
+ *
+ * @supportsStyleProps
+ */
+export declare const ModalPageActions: {
+    ({ ref, children, ...props }: ModalPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/components/modal-page.content.d.ts

@@ -0,0 +1,10 @@
+import { ModalPageContentProps } from '../modal-page.types';
+/**
+ * ModalPage.Content — scrollable content area.
+ *
+ * @supportsStyleProps
+ */
+export declare const ModalPageContent: {
+    ({ ref, children, ...props }: ModalPageContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/components/modal-page.footer.d.ts

@@ -0,0 +1,10 @@
+import { ModalPageFooterProps } from '../modal-page.types';
+/**
+ * ModalPage.Footer — footer slot, typically containing action buttons.
+ *
+ * @supportsStyleProps
+ */
+export declare const ModalPageFooter: {
+    ({ ref, children, ...props }: ModalPageFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/components/modal-page.header.d.ts

@@ -0,0 +1,10 @@
+import { ModalPageHeaderProps } from '../modal-page.types';
+/**
+ * ModalPage.Header — header section, 2-column grid (title | actions).
+ *
+ * @supportsStyleProps
+ */
+export declare const ModalPageHeader: {
+    ({ ref, children, ...props }: ModalPageHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/components/modal-page.root.d.ts

@@ -0,0 +1,25 @@
+import { ModalPageRootProps } from '../modal-page.types';
+/**
+ * ModalPage.Root — fullscreen modal page overlay.
+ *
+ * Renders a right-side Drawer with near-full-width, full-height layout.
+ * Provides the slot recipe context for all ModalPage sub-components via a
+ * CSS grid container (rows: topBar / header / content / footer).
+ *
+ * Style props (e.g. `width`) are forwarded to the Drawer.Content panel.
+ * The default width is near-fullscreen; consumers can pass a custom `width`
+ * to override.
+ *
+ * Dismissal: backdrop click is disabled (no accidental close on a full-page
+ * form). Escape key remains active (isKeyboardDismissDisabled defaults to
+ * false), matching standard browser/OS modal behaviour and WCAG 2.1 SC 2.1.2.
+ *
+ * Exit animations are handled automatically: the Drawer recipe defines
+ * [data-exiting] CSS animations (fade-out on overlay, slide-to-right-full on
+ * modal), and React Aria's ModalOverlay waits for animationend before
+ * unmounting — no manual delay needed.
+ */
+export declare const ModalPageRoot: {
+    ({ ref, isOpen, onClose, children, width, }: ModalPageRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/components/modal-page.subtitle.d.ts

@@ -0,0 +1,10 @@
+import { ModalPageSubtitleProps } from '../modal-page.types';
+/**
+ * ModalPage.Subtitle — optional subtitle text below the page title.
+ *
+ * @supportsStyleProps
+ */
+export declare const ModalPageSubtitle: {
+    ({ ref, children, ...props }: ModalPageSubtitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/components/modal-page.tab-nav.d.ts

@@ -0,0 +1,24 @@
+import { ModalPageTabNavProps } from '../modal-page.types';
+/**
+ * ModalPage.TabNav — layout container for tab navigation in the header.
+ * Positions itself in the header grid's last row at full width.
+ *
+ * Place inside `ModalPage.Header` for route-based page navigation.
+ * Wrap a `TabNav.Root` inside this component.
+ *
+ * @supportsStyleProps
+ *
+ * @example
+ * ```tsx
+ * <ModalPage.TabNav>
+ *   <TabNav.Root aria-label="Order sections">
+ *     <TabNav.Item href="/general" isCurrent>General</TabNav.Item>
+ *     <TabNav.Item href="/items">Items</TabNav.Item>
+ *   </TabNav.Root>
+ * </ModalPage.TabNav>
+ * ```
+ */
+export declare const ModalPageTabNav: {
+    ({ ref, children, ...props }: ModalPageTabNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/components/modal-page.title.d.ts

@@ -0,0 +1,13 @@
+import { ModalPageTitleProps } from '../modal-page.types';
+/**
+ * ModalPage.Title — the page title heading. Renders as an `h2` element.
+ *
+ * Wraps the React Aria `Heading` component with `slot="title"` so the
+ * parent Dialog automatically uses it as the accessible name (aria-labelledby).
+ *
+ * @supportsStyleProps
+ */
+export declare const ModalPageTitle: {
+    ({ ref, children, ...props }: ModalPageTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/components/modal-page.top-bar.d.ts

@@ -0,0 +1,13 @@
+import { ModalPageTopBarProps } from '../modal-page.types';
+/**
+ * ModalPage.TopBar — breadcrumb navigation row.
+ *
+ * Renders a back button (uses React Aria `slot="close"` to hook into dialog close)
+ * followed by the current path label.
+ *
+ * @supportsStyleProps
+ */
+export declare const ModalPageTopBar: {
+    ({ ref, previousPathLabel, currentPathLabel, ...props }: ModalPageTopBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/modal-page/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modal-page';
+export * from './modal-page.types';

package/dist/components/modal-page/intl/de.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled de messages for ModalPage
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    backButton: (args: Record<string, string | number>) => string;
+};
+export default _default;

package/dist/components/modal-page/intl/en.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled en messages for ModalPage
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    backButton: (args: Record<string, string | number>) => string;
+};
+export default _default;

package/dist/components/modal-page/intl/es.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled es messages for ModalPage
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    backButton: (args: Record<string, string | number>) => string;
+};
+export default _default;

package/dist/components/modal-page/intl/fr-FR.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled fr-FR messages for ModalPage
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    backButton: (args: Record<string, string | number>) => string;
+};
+export default _default;

package/dist/components/modal-page/intl/pt-BR.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled pt-BR messages for ModalPage
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    backButton: (args: Record<string, string | number>) => string;
+};
+export default _default;

package/dist/components/modal-page/modal-page.d.ts

@@ -0,0 +1,198 @@
+import { ModalPageRoot, ModalPageTopBar, ModalPageHeader, ModalPageTitle, ModalPageSubtitle, ModalPageActions, ModalPageTabNav, ModalPageContent, ModalPageFooter } from './components';
+/**
+ * ModalPage
+ * ============================================================
+ * A fullscreen modal overlay used for form, info, and tabular page patterns.
+ * Wraps Drawer internally with right-side placement and near-full-width layout.
+ *
+ * Used for the ~29 modal page patterns in Merchant Center (form/info/tabular).
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/layout/modal-page}
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <ModalPage.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalPage.TopBar
+ *     previousPathLabel="Products"
+ *     currentPathLabel="Edit Product"
+ *   />
+ *   <ModalPage.Header>
+ *     <ModalPage.Title>Edit Product</ModalPage.Title>
+ *     <ModalPage.Subtitle>Update the product details</ModalPage.Subtitle>
+ *     <ModalPage.Actions>
+ *       <Button>Save</Button>
+ *     </ModalPage.Actions>
+ *   </ModalPage.Header>
+ *   <ModalPage.Content>
+ *     <p>Form content here</p>
+ *   </ModalPage.Content>
+ *   <ModalPage.Footer>
+ *     <Button slot="close" variant="outline">Cancel</Button>
+ *     <Button colorPalette="primary" variant="solid">Save</Button>
+ *   </ModalPage.Footer>
+ * </ModalPage.Root>
+ * ```
+ */
+export declare const ModalPage: {
+    /**
+     * # ModalPage.Root
+     *
+     * The root container. Renders a fullscreen right-side Drawer.
+     * Controlled-only: requires `isOpen` and `onClose`.
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
+     *   <ModalPage.TopBar previousPathLabel="Products" currentPathLabel="Edit Product" />
+     *   <ModalPage.Header>...</ModalPage.Header>
+     *   <ModalPage.Content>...</ModalPage.Content>
+     * </ModalPage.Root>
+     * ```
+     */
+    Root: {
+        ({ ref, isOpen, onClose, children, width, }: import('./modal-page.types').ModalPageRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # ModalPage.TopBar
+     *
+     * Breadcrumb navigation row with a back button and current path label.
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.TopBar
+     *   previousPathLabel="Products"
+     *   currentPathLabel="Edit Product"
+     * />
+     * ```
+     */
+    TopBar: {
+        ({ ref, previousPathLabel, currentPathLabel, ...props }: import('./modal-page.types').ModalPageTopBarProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # ModalPage.Header
+     *
+     * Header section with a 2-column grid layout for Title and Actions.
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.Header>
+     *   <ModalPage.Title>Edit Product</ModalPage.Title>
+     *   <ModalPage.Actions>
+     *     <Button>Save</Button>
+     *   </ModalPage.Actions>
+     * </ModalPage.Header>
+     * ```
+     */
+    Header: {
+        ({ ref, children, ...props }: import('./modal-page.types').ModalPageHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # ModalPage.Title
+     *
+     * The main page title heading. Renders as an `h2` element.
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.Title>Edit Product</ModalPage.Title>
+     * ```
+     */
+    Title: {
+        ({ ref, children, ...props }: import('./modal-page.types').ModalPageTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # ModalPage.Subtitle
+     *
+     * An optional subtitle displayed below the title.
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.Subtitle>Fill in the product details</ModalPage.Subtitle>
+     * ```
+     */
+    Subtitle: {
+        ({ ref, children, ...props }: import('./modal-page.types').ModalPageSubtitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # ModalPage.Actions
+     *
+     * Container for action buttons in the header.
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.Actions>
+     *   <Button variant="outline">Preview</Button>
+     * </ModalPage.Actions>
+     * ```
+     */
+    Actions: {
+        ({ ref, children, ...props }: import('./modal-page.types').ModalPageActionsProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # ModalPage.TabNav
+     *
+     * Layout container for tab navigation in the header.
+     * Positions itself in the header grid's last row at full width.
+     * Place inside `ModalPage.Header`.
+     *
+     * Wrap a `TabNav.Root` inside, or use `as={TabNav.Root}` for a flatter DOM.
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.Header>
+     *   <ModalPage.Title>Order Details</ModalPage.Title>
+     *   <ModalPage.TabNav>
+     *     <TabNav.Root aria-label="Order sections">
+     *       <TabNav.Item href="/general" isCurrent>General</TabNav.Item>
+     *       <TabNav.Item href="/items">Items</TabNav.Item>
+     *     </TabNav.Root>
+     *   </ModalPage.TabNav>
+     * </ModalPage.Header>
+     * ```
+     */
+    TabNav: {
+        ({ ref, children, ...props }: import('./modal-page.types').ModalPageTabNavProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # ModalPage.Content
+     *
+     * Scrollable content area.
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.Content>
+     *   <FormField.Root>...</FormField.Root>
+     * </ModalPage.Content>
+     * ```
+     */
+    Content: {
+        ({ ref, children, ...props }: import('./modal-page.types').ModalPageContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # ModalPage.Footer
+     *
+     * Footer slot for action buttons (save/cancel).
+     *
+     * @example
+     * ```tsx
+     * <ModalPage.Footer>
+     *   <Button slot="close" variant="outline">Cancel</Button>
+     *   <Button variant="solid">Save</Button>
+     * </ModalPage.Footer>
+     * ```
+     */
+    Footer: {
+        ({ ref, children, ...props }: import('./modal-page.types').ModalPageFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { ModalPageRoot as _ModalPageRoot, ModalPageTopBar as _ModalPageTopBar, ModalPageHeader as _ModalPageHeader, ModalPageTitle as _ModalPageTitle, ModalPageSubtitle as _ModalPageSubtitle, ModalPageActions as _ModalPageActions, ModalPageTabNav as _ModalPageTabNav, ModalPageContent as _ModalPageContent, ModalPageFooter as _ModalPageFooter, };

package/dist/components/modal-page/modal-page.i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    backButton: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/components/modal-page/modal-page.messages.d.ts

@@ -0,0 +1,6 @@
+import { LocalizedString, LocalizedStrings } from '@internationalized/string';
+export declare const modalPageMessagesStrings: LocalizedStrings<string, LocalizedString>;
+/**
+ * Available message keys for ModalPage component
+ */
+export type ModalPageMessageKey = "backButton";

package/dist/components/modal-page/modal-page.recipe.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Recipe configuration for the ModalPage component.
+ * Provides a fullscreen modal page layout with a fixed grid structure:
+ * top bar, header, scrollable content, and optional footer.
+ */
+export declare const modalPageSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "content" | "footer" | "header" | "title" | "subtitle" | "actions" | "tabNav" | "topBar", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "content" | "footer" | "header" | "title" | "subtitle" | "actions" | "tabNav" | "topBar">>;

package/dist/components/modal-page/modal-page.slots.d.ts

@@ -0,0 +1,11 @@
+import { SlotComponent } from '../../type-utils/slot-types';
+import { ModalPageRootSlotProps, ModalPageTopBarSlotProps, ModalPageHeaderSlotProps, ModalPageTitleSlotProps, ModalPageSubtitleSlotProps, ModalPageActionsSlotProps, ModalPageTabNavSlotProps, ModalPageContentSlotProps, ModalPageFooterSlotProps } from './modal-page.types';
+export declare const ModalPageRootSlot: SlotComponent<HTMLDivElement, ModalPageRootSlotProps>;
+export declare const ModalPageTopBarSlot: SlotComponent<HTMLDivElement, ModalPageTopBarSlotProps>;
+export declare const ModalPageHeaderSlot: SlotComponent<HTMLElement, ModalPageHeaderSlotProps>;
+export declare const ModalPageTitleSlot: SlotComponent<HTMLDivElement, ModalPageTitleSlotProps>;
+export declare const ModalPageSubtitleSlot: SlotComponent<HTMLParagraphElement, ModalPageSubtitleSlotProps>;
+export declare const ModalPageActionsSlot: SlotComponent<HTMLDivElement, ModalPageActionsSlotProps>;
+export declare const ModalPageTabNavSlot: SlotComponent<HTMLDivElement, ModalPageTabNavSlotProps>;
+export declare const ModalPageContentSlot: SlotComponent<HTMLDivElement, ModalPageContentSlotProps>;
+export declare const ModalPageFooterSlot: SlotComponent<HTMLElement, ModalPageFooterSlotProps>;