@tidbcloud/uikit 2.3.3 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.4.1
+
+### Patch Changes
+
+- refactor(biz/app-shell): extract back button props for cleaner prop handling ([#542](https://github.com/tidbcloud/tidbcloud-uikit/pull/542))
+
+## 2.4.0
+
+### Minor Changes
+
+- feat(biz): add new AppShell and PageShell ([#540](https://github.com/tidbcloud/tidbcloud-uikit/pull/540))
+
 ## 2.3.3
 
 ### Patch Changes

package/dist/biz/AppShell/AppPageShell.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                                                                                                                                                                                        */
+;/* empty css                                                                                                                                                                                         */
+;/* empty css                                                                                                                                                                                                 */
+;/* empty css                                                                                                                                                                                            */
+;/* empty css                                                                                                                                                                                            */
+require("clsx");
+const styles = require("../../utils/styles.cjs");
+const PageShellBaseBackButton = require("../PageShellBase/PageShellBaseBackButton.cjs");
+const PageShellBaseBody = require("../PageShellBase/PageShellBaseBody.cjs");
+const PageShellBaseHeader = require("../PageShellBase/PageShellBaseHeader.cjs");
+const PageShellBaseRoot = require("../PageShellBase/PageShellBaseRoot.cjs");
+const PageShellBaseTitle = require("../PageShellBase/PageShellBaseTitle.cjs");
+const ExpandNavbarButtonPlaceholder = require("./navbar/ExpandNavbarButtonPlaceholder.cjs");
+const Group = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const DEFAULT_PAGE_MAX_WIDTH = 1920;
+const AppPageShell = ({
+  withHeader = true,
+  headerProps,
+  bodyProps,
+  wrapperProps,
+  maxWidth = `${DEFAULT_PAGE_MAX_WIDTH}px`,
+  ...rest
+}) => {
+  if (!withHeader) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PageShellBaseRoot.PageShellBaseRoot,
+      {
+        ...bodyProps,
+        sx: styles.mergeSxList([
+          {
+            "--app-shell-page-max-width": maxWidth
+          },
+          {
+            height: "100%",
+            maxWidth: `min(100%, ${maxWidth})`,
+            margin: "0 auto",
+            padding: 24
+          },
+          bodyProps == null ? void 0 : bodyProps.sx
+        ]),
+        children: rest.children
+      }
+    );
+  }
+  const { withBack, onBackClick, ...headerPropsWithoutBack } = headerProps ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PageShellBaseRoot.PageShellBaseRoot,
+    {
+      ...wrapperProps,
+      sx: styles.mergeSxList([
+        {
+          "--app-shell-page-max-width": maxWidth
+        },
+        (theme) => ({
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          maxWidth: `min(100%, ${maxWidth})`,
+          margin: "0 auto",
+          minWidth: `calc(${theme.breakpoints.md} - var(--app-shell-navbar-offset))`
+        }),
+        wrapperProps == null ? void 0 : wrapperProps.sx
+      ]),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PageShellBaseHeader.PageShellBaseHeader,
+          {
+            ...headerPropsWithoutBack,
+            leftSection: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { wrap: "nowrap", gap: 0, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ExpandNavbarButtonPlaceholder.ExpandNavbarButtonPlaceholder, {}),
+              withBack && /* @__PURE__ */ jsxRuntime.jsx(PageShellBaseBackButton.PageShellBaseBackButton, { onClick: onBackClick, mr: "md" })
+            ] }),
+            sx: styles.mergeSxList([
+              (theme) => ({
+                backgroundColor: theme.colors.carbon[1],
+                flexShrink: 0
+              }),
+              headerProps == null ? void 0 : headerProps.sx
+            ]),
+            children: /* @__PURE__ */ jsxRuntime.jsx(PageShellBaseTitle.PageShellBaseTitle, { children: rest.title })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PageShellBaseBody.PageShellBaseBody,
+          {
+            ...bodyProps,
+            sx: styles.mergeSxList([
+              {
+                paddingTop: 0,
+                paddingBottom: 64,
+                flex: 1
+              },
+              bodyProps == null ? void 0 : bodyProps.sx
+            ]),
+            children: rest.children
+          }
+        )
+      ]
+    }
+  );
+};
+exports.AppPageShell = AppPageShell;

package/dist/biz/AppShell/AppPageShell.d.cts

@@ -0,0 +1,20 @@
+import { PageShellBaseRootProps, PageShellBaseHeaderProps, PageShellBaseBodyProps } from '../PageShellBase/page-shell-base.cjs';
+export interface AppPageShellProps {
+    maxWidth?: string;
+    withHeader?: boolean;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    wrapperProps?: PageShellBaseRootProps;
+    headerProps?: PageShellBaseHeaderProps & {
+        /**
+         * Determines whether the back button should be rendered
+         */
+        withBack?: boolean;
+        /**
+         * Called when the back button is clicked
+         */
+        onBackClick?: () => void;
+    };
+    bodyProps?: PageShellBaseBodyProps;
+}
+export declare const AppPageShell: ({ withHeader, headerProps, bodyProps, wrapperProps, maxWidth, ...rest }: AppPageShellProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/biz/AppShell/AppPageShell.d.mts

@@ -0,0 +1,20 @@
+import { PageShellBaseRootProps, PageShellBaseHeaderProps, PageShellBaseBodyProps } from '../PageShellBase/page-shell-base.mjs';
+export interface AppPageShellProps {
+    maxWidth?: string;
+    withHeader?: boolean;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    wrapperProps?: PageShellBaseRootProps;
+    headerProps?: PageShellBaseHeaderProps & {
+        /**
+         * Determines whether the back button should be rendered
+         */
+        withBack?: boolean;
+        /**
+         * Called when the back button is clicked
+         */
+        onBackClick?: () => void;
+    };
+    bodyProps?: PageShellBaseBodyProps;
+}
+export declare const AppPageShell: ({ withHeader, headerProps, bodyProps, wrapperProps, maxWidth, ...rest }: AppPageShellProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/biz/AppShell/AppPageShell.mjs

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+/* empty css                                                                                                                                                                                       */
+/* empty css                                                                                                                                                                                        */
+/* empty css                                                                                                                                                                                                */
+/* empty css                                                                                                                                                                                           */
+/* empty css                                                                                                                                                                                           */
+import "clsx";
+import { mergeSxList } from "../../utils/styles.mjs";
+import { PageShellBaseBackButton } from "../PageShellBase/PageShellBaseBackButton.mjs";
+import { PageShellBaseBody } from "../PageShellBase/PageShellBaseBody.mjs";
+import { PageShellBaseHeader } from "../PageShellBase/PageShellBaseHeader.mjs";
+import { PageShellBaseRoot } from "../PageShellBase/PageShellBaseRoot.mjs";
+import { PageShellBaseTitle } from "../PageShellBase/PageShellBaseTitle.mjs";
+import { ExpandNavbarButtonPlaceholder } from "./navbar/ExpandNavbarButtonPlaceholder.mjs";
+import { Group } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.mjs";
+const DEFAULT_PAGE_MAX_WIDTH = 1920;
+const AppPageShell = ({
+  withHeader = true,
+  headerProps,
+  bodyProps,
+  wrapperProps,
+  maxWidth = `${DEFAULT_PAGE_MAX_WIDTH}px`,
+  ...rest
+}) => {
+  if (!withHeader) {
+    return /* @__PURE__ */ jsx(
+      PageShellBaseRoot,
+      {
+        ...bodyProps,
+        sx: mergeSxList([
+          {
+            "--app-shell-page-max-width": maxWidth
+          },
+          {
+            height: "100%",
+            maxWidth: `min(100%, ${maxWidth})`,
+            margin: "0 auto",
+            padding: 24
+          },
+          bodyProps == null ? void 0 : bodyProps.sx
+        ]),
+        children: rest.children
+      }
+    );
+  }
+  const { withBack, onBackClick, ...headerPropsWithoutBack } = headerProps ?? {};
+  return /* @__PURE__ */ jsxs(
+    PageShellBaseRoot,
+    {
+      ...wrapperProps,
+      sx: mergeSxList([
+        {
+          "--app-shell-page-max-width": maxWidth
+        },
+        (theme) => ({
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          maxWidth: `min(100%, ${maxWidth})`,
+          margin: "0 auto",
+          minWidth: `calc(${theme.breakpoints.md} - var(--app-shell-navbar-offset))`
+        }),
+        wrapperProps == null ? void 0 : wrapperProps.sx
+      ]),
+      children: [
+        /* @__PURE__ */ jsx(
+          PageShellBaseHeader,
+          {
+            ...headerPropsWithoutBack,
+            leftSection: /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: 0, children: [
+              /* @__PURE__ */ jsx(ExpandNavbarButtonPlaceholder, {}),
+              withBack && /* @__PURE__ */ jsx(PageShellBaseBackButton, { onClick: onBackClick, mr: "md" })
+            ] }),
+            sx: mergeSxList([
+              (theme) => ({
+                backgroundColor: theme.colors.carbon[1],
+                flexShrink: 0
+              }),
+              headerProps == null ? void 0 : headerProps.sx
+            ]),
+            children: /* @__PURE__ */ jsx(PageShellBaseTitle, { children: rest.title })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PageShellBaseBody,
+          {
+            ...bodyProps,
+            sx: mergeSxList([
+              {
+                paddingTop: 0,
+                paddingBottom: 64,
+                flex: 1
+              },
+              bodyProps == null ? void 0 : bodyProps.sx
+            ]),
+            children: rest.children
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  AppPageShell
+};

package/dist/biz/AppShell/AppShell.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+;/* empty css                                                                                                                                                                                        */
+;/* empty css                                                                                                                                                                                         */
+;/* empty css                                                                                                                                                                                                 */
+;/* empty css                                                                                                                                                                                            */
+;/* empty css                                                                                                                                                                                            */
+const AppShellBody = require("./container/AppShellBody.cjs");
+const AppShellMain = require("./container/AppShellMain.cjs");
+const AppShellRoot = require("./container/AppShellRoot.cjs");
+const navMenuRefContext = require("./navbar/context/nav-menu-ref-context.cjs");
+const ExpandNavbarButton = require("./navbar/ExpandNavbarButton.cjs");
+const Navbar = require("./navbar/Navbar.cjs");
+const NavbarHeader = require("./navbar/NavbarHeader.cjs");
+const NavbarSection = require("./navbar/NavbarSection.cjs");
+const Box = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
+const Stack = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Stack/Stack.cjs");
+const Divider = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
+const DEFAULT_NAVBAR_WIDTH = 240;
+const AppShell = ({ banner, navbar, children }) => {
+  const navMenuRef = React.useRef(null);
+  const bannerRef = React.useRef(null);
+  const [withBanner, setWithBanner] = React.useState(false);
+  const [navbarCollapsed, setNavbarCollapsed] = React.useState(false);
+  const navbarWidth = navbar.width ?? DEFAULT_NAVBAR_WIDTH;
+  const handleNavbarCollapse = React.useCallback(() => {
+    var _a;
+    setNavbarCollapsed(true);
+    (_a = navbar.onCollapse) == null ? void 0 : _a.call(navbar);
+  }, [navbar.onCollapse]);
+  const handleNavbarExpand = React.useCallback(() => {
+    var _a;
+    setNavbarCollapsed(false);
+    (_a = navbar.onExpand) == null ? void 0 : _a.call(navbar);
+  }, [navbar.onExpand]);
+  React.useEffect(() => {
+    var _a;
+    if (bannerRef.current) {
+      setWithBanner(((_a = bannerRef.current.children) == null ? void 0 : _a.length) > 0);
+    }
+  }, [banner]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(AppShellRoot.AppShellRoot, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ref: bannerRef, className: "tiui-app-shell-banner", children: banner }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      AppShellMain.AppShellMain,
+      {
+        mod: { "height-flex": withBanner },
+        style: {
+          "--app-shell-transition-duration": "200ms",
+          "--app-shell-transition-timing-function": "ease",
+          "--app-shell-navbar-width": `${navbarWidth}px`,
+          "--app-shell-navbar-offset": navbarCollapsed ? "0px" : `${navbarWidth}px`,
+          "--app-shell-navbar-collapsed": navbarCollapsed ? "1" : "0"
+        },
+        children: [
+          navbarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(ExpandNavbarButton.ExpandNavbarButton, { logo: navbar.logo, onClick: handleNavbarExpand }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Navbar.Navbar, { withBorder: true, hidden: navbarCollapsed, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(NavbarSection.NavbarSection, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              NavbarHeader.NavbarHeader,
+              {
+                logo: navbar.logo,
+                onLogoClick: navbar.onLogoClick,
+                onToggleCollapse: handleNavbarCollapse,
+                px: "md",
+                py: 8
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(NavbarSection.NavbarSection, { children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { className: "tiui-app-shell-navbar-above-menu", px: "md", children: navbar.aboveMenu }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(NavbarSection.NavbarSection, { className: "tiui-app-shell-navbar-menu-section", grow: true, scrollable: true, py: 8, children: /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { ref: navMenuRef, className: "tiui-app-shell-navbar-menu", gap: 8, px: "md" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(NavbarSection.NavbarSection, { px: "md", pb: "8", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { mx: "-md", mb: 8 }),
+              /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { className: "tiui-app-shell-navbar-footer", gap: 8, children: navbar.footer })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(AppShellBody.AppShellBody, { children: /* @__PURE__ */ jsxRuntime.jsx(navMenuRefContext.NavMenuRefContext.Provider, { value: navMenuRef, children }) })
+        ]
+      }
+    )
+  ] });
+};
+exports.AppShell = AppShell;

package/dist/biz/AppShell/AppShell.d.cts

@@ -0,0 +1,45 @@
+interface AppShellProps {
+    /**
+     * The banner to display at the top of the app
+     */
+    banner?: React.ReactNode;
+    /**
+     * Sections of the navbar for user to customize
+     */
+    navbar: {
+        /**
+         * Custom width of the navbar
+         */
+        width?: number;
+        /**
+         * The logo to display in the navbar
+         */
+        logo: React.ReactNode;
+        /**
+         * Custom content rendered in the navbar section between the header and the main menu.
+         */
+        aboveMenu: React.ReactNode;
+        /**
+         * The footer section of the navbar
+         */
+        footer: React.ReactNode;
+        /**
+         * The callback function to handle logo click
+         */
+        onLogoClick?: () => void;
+        /**
+         * Trigger when the navbar is collapsed
+         */
+        onCollapse?: () => void;
+        /**
+         * Trigger when the navbar is expanded
+         */
+        onExpand?: () => void;
+    };
+}
+/**
+ * The app shell component is purely for display
+ * and not related to any business feature
+ */
+export declare const AppShell: ({ banner, navbar, children }: React.PropsWithChildren<AppShellProps>) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/biz/AppShell/AppShell.d.mts

@@ -0,0 +1,45 @@
+interface AppShellProps {
+    /**
+     * The banner to display at the top of the app
+     */
+    banner?: React.ReactNode;
+    /**
+     * Sections of the navbar for user to customize
+     */
+    navbar: {
+        /**
+         * Custom width of the navbar
+         */
+        width?: number;
+        /**
+         * The logo to display in the navbar
+         */
+        logo: React.ReactNode;
+        /**
+         * Custom content rendered in the navbar section between the header and the main menu.
+         */
+        aboveMenu: React.ReactNode;
+        /**
+         * The footer section of the navbar
+         */
+        footer: React.ReactNode;
+        /**
+         * The callback function to handle logo click
+         */
+        onLogoClick?: () => void;
+        /**
+         * Trigger when the navbar is collapsed
+         */
+        onCollapse?: () => void;
+        /**
+         * Trigger when the navbar is expanded
+         */
+        onExpand?: () => void;
+    };
+}
+/**
+ * The app shell component is purely for display
+ * and not related to any business feature
+ */
+export declare const AppShell: ({ banner, navbar, children }: React.PropsWithChildren<AppShellProps>) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/biz/AppShell/AppShell.mjs

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+/* empty css                                                                                                                                                                                       */
+/* empty css                                                                                                                                                                                        */
+/* empty css                                                                                                                                                                                                */
+/* empty css                                                                                                                                                                                           */
+/* empty css                                                                                                                                                                                           */
+import { AppShellBody } from "./container/AppShellBody.mjs";
+import { AppShellMain } from "./container/AppShellMain.mjs";
+import { AppShellRoot } from "./container/AppShellRoot.mjs";
+import { NavMenuRefContext } from "./navbar/context/nav-menu-ref-context.mjs";
+import { ExpandNavbarButton } from "./navbar/ExpandNavbarButton.mjs";
+import { Navbar } from "./navbar/Navbar.mjs";
+import { NavbarHeader } from "./navbar/NavbarHeader.mjs";
+import { NavbarSection } from "./navbar/NavbarSection.mjs";
+import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
+import { Stack } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Stack/Stack.mjs";
+import { Divider } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Divider/Divider.mjs";
+const DEFAULT_NAVBAR_WIDTH = 240;
+const AppShell = ({ banner, navbar, children }) => {
+  const navMenuRef = useRef(null);
+  const bannerRef = useRef(null);
+  const [withBanner, setWithBanner] = useState(false);
+  const [navbarCollapsed, setNavbarCollapsed] = useState(false);
+  const navbarWidth = navbar.width ?? DEFAULT_NAVBAR_WIDTH;
+  const handleNavbarCollapse = useCallback(() => {
+    var _a;
+    setNavbarCollapsed(true);
+    (_a = navbar.onCollapse) == null ? void 0 : _a.call(navbar);
+  }, [navbar.onCollapse]);
+  const handleNavbarExpand = useCallback(() => {
+    var _a;
+    setNavbarCollapsed(false);
+    (_a = navbar.onExpand) == null ? void 0 : _a.call(navbar);
+  }, [navbar.onExpand]);
+  useEffect(() => {
+    var _a;
+    if (bannerRef.current) {
+      setWithBanner(((_a = bannerRef.current.children) == null ? void 0 : _a.length) > 0);
+    }
+  }, [banner]);
+  return /* @__PURE__ */ jsxs(AppShellRoot, { children: [
+    /* @__PURE__ */ jsx(Box, { ref: bannerRef, className: "tiui-app-shell-banner", children: banner }),
+    /* @__PURE__ */ jsxs(
+      AppShellMain,
+      {
+        mod: { "height-flex": withBanner },
+        style: {
+          "--app-shell-transition-duration": "200ms",
+          "--app-shell-transition-timing-function": "ease",
+          "--app-shell-navbar-width": `${navbarWidth}px`,
+          "--app-shell-navbar-offset": navbarCollapsed ? "0px" : `${navbarWidth}px`,
+          "--app-shell-navbar-collapsed": navbarCollapsed ? "1" : "0"
+        },
+        children: [
+          navbarCollapsed && /* @__PURE__ */ jsx(ExpandNavbarButton, { logo: navbar.logo, onClick: handleNavbarExpand }),
+          /* @__PURE__ */ jsxs(Navbar, { withBorder: true, hidden: navbarCollapsed, children: [
+            /* @__PURE__ */ jsx(NavbarSection, { children: /* @__PURE__ */ jsx(
+              NavbarHeader,
+              {
+                logo: navbar.logo,
+                onLogoClick: navbar.onLogoClick,
+                onToggleCollapse: handleNavbarCollapse,
+                px: "md",
+                py: 8
+              }
+            ) }),
+            /* @__PURE__ */ jsx(NavbarSection, { children: /* @__PURE__ */ jsx(Box, { className: "tiui-app-shell-navbar-above-menu", px: "md", children: navbar.aboveMenu }) }),
+            /* @__PURE__ */ jsx(NavbarSection, { className: "tiui-app-shell-navbar-menu-section", grow: true, scrollable: true, py: 8, children: /* @__PURE__ */ jsx(Stack, { ref: navMenuRef, className: "tiui-app-shell-navbar-menu", gap: 8, px: "md" }) }),
+            /* @__PURE__ */ jsxs(NavbarSection, { px: "md", pb: "8", children: [
+              /* @__PURE__ */ jsx(Divider, { mx: "-md", mb: 8 }),
+              /* @__PURE__ */ jsx(Stack, { className: "tiui-app-shell-navbar-footer", gap: 8, children: navbar.footer })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(AppShellBody, { children: /* @__PURE__ */ jsx(NavMenuRefContext.Provider, { value: navMenuRef, children }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  AppShell
+};

package/dist/biz/AppShell/container/AppShellBody.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                                                                                                                                                                                           */
+;/* empty css                                                                                                                                                                                            */
+;/* empty css                                                                                                                                                                                                    */
+;/* empty css                                                                                                                                                                                               */
+;/* empty css                                                                                                                                                                                               */
+const clsx = require("clsx");
+const styles = require("../../../utils/styles.cjs");
+const Box = require("../../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
+const AppShellBody = ({ className, sx, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      component: "main",
+      ...rest,
+      className: clsx.clsx(className, "tiui-app-shell-body"),
+      sx: styles.mergeSxList([
+        (theme) => ({
+          flex: 1,
+          overflowX: "auto",
+          backgroundColor: theme.colors.carbon[1]
+        }),
+        sx
+      ])
+    }
+  );
+};
+exports.AppShellBody = AppShellBody;

package/dist/biz/AppShell/container/AppShellBody.d.cts

@@ -0,0 +1,5 @@
+import { BoxProps, ElementProps } from '../../../primitive/index.cjs';
+interface AppShellBodyProps extends BoxProps, ElementProps<'main'> {
+}
+export declare const AppShellBody: ({ className, sx, ...rest }: AppShellBodyProps) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/biz/AppShell/container/AppShellBody.d.mts

@@ -0,0 +1,5 @@
+import { BoxProps, ElementProps } from '../../../primitive/index.mjs';
+interface AppShellBodyProps extends BoxProps, ElementProps<'main'> {
+}
+export declare const AppShellBody: ({ className, sx, ...rest }: AppShellBodyProps) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/biz/AppShell/container/AppShellBody.mjs

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+/* empty css                                                                                                                                                                                          */
+/* empty css                                                                                                                                                                                           */
+/* empty css                                                                                                                                                                                                   */
+/* empty css                                                                                                                                                                                              */
+/* empty css                                                                                                                                                                                              */
+import { clsx } from "clsx";
+import { mergeSxList } from "../../../utils/styles.mjs";
+import { Box } from "../../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
+const AppShellBody = ({ className, sx, ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "main",
+      ...rest,
+      className: clsx(className, "tiui-app-shell-body"),
+      sx: mergeSxList([
+        (theme) => ({
+          flex: 1,
+          overflowX: "auto",
+          backgroundColor: theme.colors.carbon[1]
+        }),
+        sx
+      ])
+    }
+  );
+};
+export {
+  AppShellBody
+};

package/dist/biz/AppShell/container/AppShellMain.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                                                                                                                                                                                           */
+;/* empty css                                                                                                                                                                                            */
+;/* empty css                                                                                                                                                                                                    */
+;/* empty css                                                                                                                                                                                               */
+;/* empty css                                                                                                                                                                                               */
+const clsx = require("clsx");
+const styles = require("../../../utils/styles.cjs");
+const Group = require("../../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const AppShellMain = ({ className, sx, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Group.Group,
+    {
+      gap: 0,
+      wrap: "nowrap",
+      align: "stretch",
+      ...rest,
+      className: clsx.clsx(className, "tiui-app-shell-main"),
+      sx: styles.mergeSxList([
+        {
+          position: "relative",
+          height: "100%",
+          minHeight: 0,
+          overflow: "hidden",
+          "&:where([data-height-flex])": {
+            flex: 1
+          }
+        },
+        sx
+      ])
+    }
+  );
+};
+exports.AppShellMain = AppShellMain;

package/dist/biz/AppShell/container/AppShellMain.d.cts

@@ -0,0 +1,5 @@
+import { BoxProps, ElementProps } from '../../../primitive/index.cjs';
+interface AppShellMainProps extends BoxProps, ElementProps<'div'> {
+}
+export declare const AppShellMain: ({ className, sx, ...rest }: AppShellMainProps) => import("react/jsx-runtime.js").JSX.Element;
+export {};