@sudobility/building_blocks 0.0.145 → 0.0.147

package/dist/components/layout/app-page-layout.d.ts

@@ -1,5 +1,4 @@
 import React, { type ReactNode } from 'react';
-import { type VariantProps } from 'class-variance-authority';
 import { type AppBreadcrumbsProps } from '../breadcrumbs/app-breadcrumbs';
 import { type AppTopBarProps } from '../topbar/app-topbar';
 import { type AppTopBarWithFirebaseAuthProps } from '../topbar/app-topbar-with-firebase-auth';
@@ -7,9 +6,6 @@ import { type AppTopBarWithWalletProps } from '../topbar/app-topbar-with-wallet'
 import { type AppFooterProps } from '../footer/app-footer';
 import { type AppFooterForHomePageProps } from '../footer/app-footer-for-home-page';
 import type { MaxWidth, ContentPadding, BackgroundVariant } from '../../types';
-declare const layoutVariants: (props?: ({
-    background?: "default" | "white" | "gradient" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Discriminated union for selecting which TopBar component to render. */
 export type TopBarConfig = ({
     variant: 'base';
@@ -27,15 +23,8 @@ export type FooterConfig = ({
 } & AppFooterProps) | ({
     variant: 'full';
 } & AppFooterForHomePageProps);
-export interface AppPageLayoutProps extends VariantProps<typeof layoutVariants> {
-    /** Page content */
-    children: ReactNode;
-    /** TopBar configuration - selects which TopBar component to render */
-    topBar: TopBarConfig;
-    /** Breadcrumbs configuration (optional) */
-    breadcrumbs?: AppBreadcrumbsProps;
-    /** Footer configuration - selects which Footer component to render */
-    footer?: FooterConfig;
+/** Page-level layout and styling options. */
+export interface AppPageProps {
     /** Max width for content area (default: '7xl') */
     maxWidth?: MaxWidth;
     /** Content padding (default: 'md') */
@@ -53,6 +42,18 @@ export interface AppPageLayoutProps extends VariantProps<typeof layoutVariants>
     /** Optional aspect ratio (width / height) for content area. When set, children are placed inside a container with fixed aspect ratio using AspectFit behavior. */
     aspectRatio?: number;
 }
+export interface AppPageLayoutProps {
+    /** Page content */
+    children: ReactNode;
+    /** TopBar configuration - selects which TopBar component to render */
+    topBar: TopBarConfig;
+    /** Breadcrumbs configuration (optional) */
+    breadcrumbs?: AppBreadcrumbsProps;
+    /** Footer configuration - selects which Footer component to render */
+    footer?: FooterConfig;
+    /** Page-level layout and styling options */
+    page?: AppPageProps;
+}
 /**
  * AppPageLayout - Layout wrapper combining TopBar, Breadcrumbs, Content, and Footer.
  *
@@ -84,8 +85,7 @@ export interface AppPageLayoutProps extends VariantProps<typeof layoutVariants>
  *     companyName: 'My Company',
  *     links: [{ label: 'Privacy', href: '/privacy' }],
  *   }}
- *   maxWidth="7xl"
- *   background="default"
+ *   page={{ maxWidth: '7xl', background: 'default' }}
  * >
  *   <h1>Page Content</h1>
  * </AppPageLayout>

package/dist/components/layout/index.d.ts

@@ -1 +1 @@
-export { AppPageLayout, type AppPageLayoutProps, type TopBarConfig, type FooterConfig, } from './app-page-layout';
+export { AppPageLayout, type AppPageLayoutProps, type AppPageProps, type TopBarConfig, type FooterConfig, } from './app-page-layout';

package/dist/index.js

@@ -252,16 +252,20 @@ const AppTopBar = ({
     () => menuItems.filter((item) => item.show !== false),
     [menuItems]
   );
-  const navItems = useMemo(
-    () => visibleMenuItems.map((item) => ({
-      id: item.id,
-      label: item.label,
-      icon: item.icon,
-      href: item.href,
-      className: item.className
-    })),
-    [visibleMenuItems]
-  );
+  const navItems = useMemo(() => {
+    const mapItem = (item) => {
+      var _a;
+      return {
+        id: item.id,
+        label: item.label,
+        icon: item.icon,
+        href: item.href,
+        className: item.className,
+        children: (_a = item.children) == null ? void 0 : _a.filter((child) => child.show !== false).map(mapItem)
+      };
+    };
+    return visibleMenuItems.map(mapItem);
+  }, [visibleMenuItems]);
   const LinkWrapper = useMemo(
     () => ({ href, className: className2, children }) => /* @__PURE__ */ jsx(LinkComponent, { href, className: className2, children }),
     [LinkComponent]
@@ -1108,15 +1112,18 @@ const AppPageLayout = ({
   topBar,
   breadcrumbs,
   footer,
-  maxWidth = "7xl",
-  contentPadding = "md",
-  background = "default",
-  layoutMode = "standard",
-  className,
-  contentClassName,
-  mainClassName,
-  aspectRatio
+  page
 }) => {
+  const {
+    maxWidth = "7xl",
+    contentPadding = "md",
+    background = "default",
+    layoutMode = "standard",
+    className,
+    contentClassName,
+    mainClassName,
+    aspectRatio
+  } = page ?? {};
   const isCompactFooter = (footer == null ? void 0 : footer.variant) === "compact";
   const content = aspectRatio ? /* @__PURE__ */ jsx(AspectFitView, { aspectRatio, children }) : children;
   return /* @__PURE__ */ jsx(LayoutProvider, { mode: layoutMode, children: /* @__PURE__ */ jsxs("div", { className: cn(layoutVariants({ background }), className), children: [