@iamsaroj/smart-ui 0.2.0

package/dist/smart-components/page/layouts/standard-layout.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+/**
+ * The default vertical layout, used for the `document`, `dashboard`, and `grid`
+ * presets: optional sticky header/toolbar/search/filter band on top, a single
+ * flexible main region (grid area → content → loose body, in priority order),
+ * and a sticky-or-flowing status-bar/footer band on the bottom.
+ *
+ * Sticky positioning only applies in `page` scroll mode — in contained modes
+ * (`content` / `grid`) the bands sit outside the scroll container and are
+ * naturally pinned by flexbox, so pinning them again would double up.
+ */
+export const StandardLayout = ({ buckets: b, scroll, ctx, }) => {
+    const isPageScroll = scroll === "page";
+    // Collect which items are sticky (page-scroll mode only — in contained modes
+    // items above the scroll container are naturally "pinned" by flexbox).
+    const stickyTopItems = [];
+    const flowTopItems = [];
+    const pushTop = (items, sticky) => {
+        if (!items.length)
+            return;
+        if (isPageScroll && sticky) {
+            stickyTopItems.push(...items);
+        }
+        else {
+            flowTopItems.push(...items);
+        }
+    };
+    pushTop(b.header, ctx.stickyHeader);
+    // hero is never sticky — always scrolls away
+    if (b.hero.length)
+        flowTopItems.push(...b.hero);
+    pushTop(b.toolbar, ctx.stickyToolbar);
+    pushTop(b.search, ctx.stickySearch);
+    pushTop(b.filters, ctx.stickyFilters);
+    if (b.tabs.length)
+        flowTopItems.push(...b.tabs);
+    const stickyBottomItems = [];
+    const flowBottomItems = [];
+    if (b.statusBar.length) {
+        if (isPageScroll && ctx.stickyStatusBar)
+            stickyBottomItems.push(...b.statusBar);
+        else
+            flowBottomItems.push(...b.statusBar);
+    }
+    if (b.footer.length) {
+        if (isPageScroll && ctx.stickyFooter)
+            stickyBottomItems.push(...b.footer);
+        else
+            flowBottomItems.push(...b.footer);
+    }
+    const mainContent = b.gridArea.length > 0
+        ? b.gridArea
+        : b.content.length > 0
+            ? b.content
+            : b.body;
+    const mainClasses = cn("flex-1", scroll === "content" && "min-h-0 overflow-y-auto", scroll === "grid" && "flex min-h-0 flex-col");
+    return (_jsxs(_Fragment, { children: [stickyTopItems.length > 0 && (_jsx("div", { className: "sticky top-0 z-10 bg-background", children: stickyTopItems })), flowTopItems, _jsx("div", { className: mainClasses, children: mainContent }), flowBottomItems, stickyBottomItems.length > 0 && (_jsx("div", { className: "sticky bottom-0 z-10 bg-background", children: stickyBottomItems }))] }));
+};
+//# sourceMappingURL=standard-layout.js.map

package/dist/smart-components/page/layouts/standard-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard-layout.js","sourceRoot":"","sources":["../../../../src/smart-components/page/layouts/standard-layout.tsx"],"names":[],"mappings":"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"}

package/dist/smart-components/page/page-context.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The high-level layout mode of the page.
+ *
+ * | Mode        | Description                                            |
+ * |-------------|--------------------------------------------------------|
+ * | document    | Natural page flow — blog posts, settings, forms        |
+ * | grid        | Data grid fills remaining height — CRUD, list views    |
+ * | dashboard   | Cards and widgets — analytics, overview pages          |
+ * | split       | Left content + right sidebar — detail views, email     |
+ * | fullscreen  | Fills entire area — canvas, maps, editors              |
+ * | wizard      | Stepped flow with pinned footer — onboarding, checkout |
+ * | detail      | Entity detail with sticky header — profile, item view  |
+ */
+export type PageLayout = "document" | "grid" | "dashboard" | "split" | "fullscreen" | "wizard" | "detail";
+/**
+ * Which container owns the scroll behaviour.
+ *
+ * | Mode    | Scroll owner                                        |
+ * |---------|-----------------------------------------------------|
+ * | page    | Browser / outer shell scrolls (natural flow)        |
+ * | content | SmartPageContent scrolls; header/footer stay fixed  |
+ * | grid    | The data grid manages its own scroll                |
+ * | none    | No scroll — useful for fullscreen editors / maps    |
+ */
+export type ScrollMode = "page" | "content" | "grid" | "none";
+/** Named padding scale tokens used throughout the layout system. */
+export type PaddingSize = "none" | "sm" | "md" | "lg";
+export interface PageContextValue {
+    /** Resolved layout preset (after auto-detection). */
+    layout: PageLayout;
+    /** Resolved scroll mode. */
+    scroll: ScrollMode;
+    /** Padding scale applied inside content areas. */
+    padding: PaddingSize;
+    stickyHeader: boolean;
+    stickyToolbar: boolean;
+    stickySearch: boolean;
+    stickyFilters: boolean;
+    stickyStatusBar: boolean;
+    stickyFooter: boolean;
+    /** When true, content areas suppress max-width constraints. */
+    fullWidth: boolean;
+    bordered: boolean;
+}
+export declare const PageContext: import("react").Context<PageContextValue>;
+/**
+ * Returns the current page layout context.
+ * Available to any component rendered inside a {@link SmartPage}.
+ */
+export declare const usePageContext: () => PageContextValue;
+//# sourceMappingURL=page-context.d.ts.map

package/dist/smart-components/page/page-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-context.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/page-context.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAClB,UAAU,GACV,MAAM,GACN,WAAW,GACX,OAAO,GACP,YAAY,GACZ,QAAQ,GACR,QAAQ,CAAA;AAEZ;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7D,oEAAoE;AACpE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAErD,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,MAAM,EAAE,UAAU,CAAA;IAClB,4BAA4B;IAC5B,MAAM,EAAE,UAAU,CAAA;IAClB,kDAAkD;IAClD,OAAO,EAAE,WAAW,CAAA;IACpB,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;IACtB,eAAe,EAAE,OAAO,CAAA;IACxB,YAAY,EAAE,OAAO,CAAA;IACrB,+DAA+D;IAC/D,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAgBD,eAAO,MAAM,WAAW,2CAAkD,CAAA;AAE1E;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,gBAA2C,CAAA"}

package/dist/smart-components/page/page-context.js

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+const defaultContext = {
+    layout: "document",
+    scroll: "page",
+    padding: "md",
+    stickyHeader: false,
+    stickyToolbar: false,
+    stickySearch: false,
+    stickyFilters: false,
+    stickyStatusBar: false,
+    stickyFooter: false,
+    fullWidth: false,
+    bordered: false,
+};
+export const PageContext = createContext(defaultContext);
+/**
+ * Returns the current page layout context.
+ * Available to any component rendered inside a {@link SmartPage}.
+ */
+export const usePageContext = () => useContext(PageContext);
+//# sourceMappingURL=page-context.js.map

package/dist/smart-components/page/page-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-context.js","sourceRoot":"","sources":["../../../src/smart-components/page/page-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAyDjD,MAAM,cAAc,GAAqB;IACvC,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,IAAI;IACb,YAAY,EAAE,KAAK;IACnB,aAAa,EAAE,KAAK;IACpB,YAAY,EAAE,KAAK;IACnB,aAAa,EAAE,KAAK;IACpB,eAAe,EAAE,KAAK;IACtB,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB,cAAc,CAAC,CAAA;AAE1E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAqB,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA"}

package/dist/smart-components/page/slot.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Slot tagging primitive, kept in a dependency-free leaf module.
+ *
+ * Every SmartPage slot component (header, toolbar, footer, …) stamps this
+ * symbol onto itself so {@link SmartPage} can bucket children by slot without
+ * relying on class identity (which breaks with HOCs or lazy imports).
+ *
+ * It lives here rather than in `smart-page.tsx` so that `smart-page.tsx` can
+ * import a slot component (to auto-render a header from flat props) without a
+ * circular import: the slot component depends only on this leaf, never back on
+ * the page orchestrator.
+ */
+/**
+ * Well-known symbol placed as a static property on every slot component.
+ * SmartPage reads this to bucket children.
+ */
+export declare const SMART_PAGE_SLOT: unique symbol;
+export type PageSlot = "header" | "hero" | "toolbar" | "search" | "filters" | "tabs" | "content" | "sidebar" | "grid-area" | "status-bar" | "footer";
+//# sourceMappingURL=slot.d.ts.map

package/dist/smart-components/page/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/slot.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,eAAO,MAAM,eAAe,eAA2C,CAAA;AAEvE,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,WAAW,GACX,YAAY,GACZ,QAAQ,CAAA"}

package/dist/smart-components/page/slot.js

@@ -0,0 +1,18 @@
+/**
+ * Slot tagging primitive, kept in a dependency-free leaf module.
+ *
+ * Every SmartPage slot component (header, toolbar, footer, …) stamps this
+ * symbol onto itself so {@link SmartPage} can bucket children by slot without
+ * relying on class identity (which breaks with HOCs or lazy imports).
+ *
+ * It lives here rather than in `smart-page.tsx` so that `smart-page.tsx` can
+ * import a slot component (to auto-render a header from flat props) without a
+ * circular import: the slot component depends only on this leaf, never back on
+ * the page orchestrator.
+ */
+/**
+ * Well-known symbol placed as a static property on every slot component.
+ * SmartPage reads this to bucket children.
+ */
+export const SMART_PAGE_SLOT = Symbol.for("@workspace/smart-page-slot");
+//# sourceMappingURL=slot.js.map

package/dist/smart-components/page/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","sourceRoot":"","sources":["../../../src/smart-components/page/slot.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAA"}

package/dist/smart-components/page/smart-grid-area.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+export interface SmartGridAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional toolbar rendered inside the grid area, above the grid itself.
+     * Use this for grid-specific controls (pagination, column visibility,
+     * density selector, CSV export) that shouldn't be in the page toolbar.
+     */
+    toolbar?: React.ReactNode;
+    /**
+     * Render a top border between the search area and the grid.
+     * Set to `false` when the parent already provides the border (e.g. the
+     * search or filter bar has `border` set).
+     * @default false
+     */
+    border?: boolean;
+    /**
+     * Clip the grid with rounded corners.
+     * @default false
+     */
+    rounded?: boolean;
+}
+/**
+ * Fills the remaining viewport height and hosts a virtualized data grid.
+ *
+ * This is the central component of any CRUD or list page. SmartGridArea solves
+ * the classic "100% height grid" problem without `calc()` or `100vh`:
+ *
+ * 1. The parent SmartPage is `flex flex-col flex-1 min-h-0 overflow-hidden`.
+ * 2. All sibling regions (header, toolbar, footer) are `shrink-0`.
+ * 3. SmartGridArea is `flex-1 min-h-0` — it takes every remaining pixel.
+ * 4. The grid inside is rendered inside a `flex-1 min-h-0 flex flex-col`
+ *    wrapper, so any height-filling grid (AG Grid, TanStack Virtual) works.
+ *
+ * **Critical**: your grid component must be configured with `height: 100%` or
+ * equivalent. AG Grid needs `domLayout: "normal"` (the default) and the theme
+ * height set to 100%.
+ *
+ * ## What grid libraries work?
+ * - AG Grid Community / Enterprise
+ * - TanStack Table + react-virtual
+ * - Any virtualized list that expands to fill its container
+ *
+ * ## Presence of SmartGridArea triggers auto-detection
+ * When SmartGridArea is a direct child of SmartPage, the page auto-selects
+ * the `"grid"` layout: header/toolbar/search/filters/footer all become sticky,
+ * and the scroll mode switches to `"grid"` so no outer scrollbar appears.
+ *
+ * @example Basic CRUD grid
+ * ```tsx
+ * <SmartGridArea>
+ *   <AgGridReact
+ *     rowData={rows}
+ *     columnDefs={cols}
+ *     className="ag-theme-quartz h-full"
+ *   />
+ * </SmartGridArea>
+ * ```
+ *
+ * @example With an internal toolbar
+ * ```tsx
+ * <SmartGridArea
+ *   toolbar={
+ *     <>
+ *       <span className="text-xs text-muted-foreground">{rows.length} rows</span>
+ *       <span className="ms-auto" />
+ *       <Button size="sm" variant="outline"><Download /> Export</Button>
+ *     </>
+ *   }
+ * >
+ *   <MyGrid />
+ * </SmartGridArea>
+ * ```
+ */
+export declare const SmartGridArea: React.ForwardRefExoticComponent<SmartGridAreaProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=smart-grid-area.d.ts.map

package/dist/smart-components/page/smart-grid-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-grid-area.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-grid-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,aAAa,2FA8BzB,CACA"}

package/dist/smart-components/page/smart-grid-area.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { SMART_PAGE_SLOT } from "./smart-page";
+/**
+ * Fills the remaining viewport height and hosts a virtualized data grid.
+ *
+ * This is the central component of any CRUD or list page. SmartGridArea solves
+ * the classic "100% height grid" problem without `calc()` or `100vh`:
+ *
+ * 1. The parent SmartPage is `flex flex-col flex-1 min-h-0 overflow-hidden`.
+ * 2. All sibling regions (header, toolbar, footer) are `shrink-0`.
+ * 3. SmartGridArea is `flex-1 min-h-0` — it takes every remaining pixel.
+ * 4. The grid inside is rendered inside a `flex-1 min-h-0 flex flex-col`
+ *    wrapper, so any height-filling grid (AG Grid, TanStack Virtual) works.
+ *
+ * **Critical**: your grid component must be configured with `height: 100%` or
+ * equivalent. AG Grid needs `domLayout: "normal"` (the default) and the theme
+ * height set to 100%.
+ *
+ * ## What grid libraries work?
+ * - AG Grid Community / Enterprise
+ * - TanStack Table + react-virtual
+ * - Any virtualized list that expands to fill its container
+ *
+ * ## Presence of SmartGridArea triggers auto-detection
+ * When SmartGridArea is a direct child of SmartPage, the page auto-selects
+ * the `"grid"` layout: header/toolbar/search/filters/footer all become sticky,
+ * and the scroll mode switches to `"grid"` so no outer scrollbar appears.
+ *
+ * @example Basic CRUD grid
+ * ```tsx
+ * <SmartGridArea>
+ *   <AgGridReact
+ *     rowData={rows}
+ *     columnDefs={cols}
+ *     className="ag-theme-quartz h-full"
+ *   />
+ * </SmartGridArea>
+ * ```
+ *
+ * @example With an internal toolbar
+ * ```tsx
+ * <SmartGridArea
+ *   toolbar={
+ *     <>
+ *       <span className="text-xs text-muted-foreground">{rows.length} rows</span>
+ *       <span className="ms-auto" />
+ *       <Button size="sm" variant="outline"><Download /> Export</Button>
+ *     </>
+ *   }
+ * >
+ *   <MyGrid />
+ * </SmartGridArea>
+ * ```
+ */
+export const SmartGridArea = React.forwardRef(({ toolbar, border = false, rounded = false, className, children, ...props }, ref) => (_jsxs("div", { ref: ref, "data-slot": "grid-area", className: cn("flex min-h-0 flex-1 flex-col", border && "border-t", rounded && "overflow-hidden rounded-lg", className), ...props, children: [toolbar && (_jsx("div", { className: "flex shrink-0 items-center gap-2 border-b bg-muted/30 px-4 py-2", children: toolbar })), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children })] })));
+SmartGridArea[SMART_PAGE_SLOT] =
+    "grid-area";
+//# sourceMappingURL=smart-grid-area.js.map

package/dist/smart-components/page/smart-grid-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-grid-area.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-grid-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAuB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAI3C,CACE,EAAE,OAAO,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC3E,GAAG,EACH,EAAE,CAAC,CACH,eACE,GAAG,EAAE,GAAG,eACE,WAAW,EACrB,SAAS,EAAE,EAAE,CACX,8BAA8B,EAC9B,MAAM,IAAI,UAAU,EACpB,OAAO,IAAI,4BAA4B,EACvC,SAAS,CACV,KACG,KAAK,aAER,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,iEAAiE,YAC7E,OAAO,GACJ,CACP,EAID,cAAK,SAAS,EAAC,8BAA8B,YAAE,QAAQ,GAAO,IAC1D,CACP,CACF,CACA;AAAC,aAAoD,CAAC,eAAe,CAAC;IACrE,WAAW,CAAA"}

package/dist/smart-components/page/smart-page-container.d.ts

@@ -0,0 +1,66 @@
+import { type SmartPageProps } from "./smart-page";
+export type { SmartPageProps as SmartPageContainerProps };
+/**
+ * Compound wrapper around {@link SmartPage} that bundles all page slot
+ * components as static properties so you only need one import.
+ *
+ * Every sub-component is identical to its standalone counterpart —
+ * `SmartPageContainer.Header` is `SmartPageHeader`, etc.
+ *
+ * @example Grid page (single import)
+ * ```tsx
+ * import { SmartPageContainer as Page } from "@iamsaroj/smart-ui/..."
+ *
+ * <Page>
+ *   <Page.Header>
+ *     <Page.Title>Users</Page.Title>
+ *     <Page.Actions><Button>New</Button></Page.Actions>
+ *   </Page.Header>
+ *   <Page.Toolbar>…</Page.Toolbar>
+ *   <Page.GridArea><UserGrid /></Page.GridArea>
+ *   <Page.Footer><Page.StatusBar>42 rows</Page.StatusBar></Page.Footer>
+ * </Page>
+ * ```
+ *
+ * @example Document page
+ * ```tsx
+ * <Page layout="document">
+ *   <Page.Header>
+ *     <Page.Breadcrumb items={[{ label: "Settings", href: "/settings" }, { label: "Profile" }]} />
+ *     <Page.Title>Profile</Page.Title>
+ *   </Page.Header>
+ *   <Page.Content maxWidth="2xl" centered>
+ *     <Page.Section title="Personal info" divider>
+ *       <ProfileForm />
+ *     </Page.Section>
+ *   </Page.Content>
+ *   <Page.Footer>
+ *     <Button type="submit">Save</Button>
+ *   </Page.Footer>
+ * </Page>
+ * ```
+ */
+export declare const SmartPageContainer: ((props: SmartPageProps) => import("react/jsx-runtime").JSX.Element) & {
+    Header: import("react").ForwardRefExoticComponent<import("./smart-page-header").SmartPageHeaderProps & import("react").RefAttributes<HTMLElement>>;
+    Title: import("react").ForwardRefExoticComponent<import("./smart-page-header").SmartPageTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Actions: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Breadcrumb: ({ items, className, }: import("./smart-page-header").SmartPageBreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+    Hero: import("react").ForwardRefExoticComponent<import("./smart-page-hero").SmartPageHeroProps & import("react").RefAttributes<HTMLDivElement>>;
+    Toolbar: import("react").ForwardRefExoticComponent<import("./smart-toolbar").SmartToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+    Search: import("react").ForwardRefExoticComponent<import("./smart-page-search").SmartPageSearchProps & import("react").RefAttributes<HTMLDivElement>>;
+    Filters: import("react").ForwardRefExoticComponent<import("./smart-page-filters").SmartPageFiltersProps & import("react").RefAttributes<HTMLDivElement>>;
+    Tabs: ({ defaultValue, value, onValueChange, border, variant, className, children, }: import("./smart-page-tabs").SmartPageTabsProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ value, className, children, }: import("./smart-page-tabs").SmartPageTabProps) => import("react/jsx-runtime").JSX.Element;
+    TabPanel: ({ value, className, children, }: import("./smart-page-tabs").SmartPageTabPanelProps) => import("react/jsx-runtime").JSX.Element;
+    Content: import("react").ForwardRefExoticComponent<import("./smart-page-content").SmartPageContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Section: import("react").ForwardRefExoticComponent<import("./smart-page-section").SmartPageSectionProps & import("react").RefAttributes<HTMLElement>>;
+    Sidebar: import("react").ForwardRefExoticComponent<import("./smart-sidebar").SmartSidebarProps & import("react").RefAttributes<HTMLElement>>;
+    GridArea: import("react").ForwardRefExoticComponent<import("./smart-grid-area").SmartGridAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+    StatusBar: import("react").ForwardRefExoticComponent<import("./smart-page-status-bar").SmartPageStatusBarProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("./smart-page-footer").SmartPageFooterProps & import("react").RefAttributes<HTMLElement>>;
+    Empty: ({ icon, title, description, action, className, }: import("./smart-page-empty").SmartPageEmptyProps) => import("react/jsx-runtime").JSX.Element;
+    Loading: ({ label, className, }: import("./smart-page-loading").SmartPageLoadingProps) => import("react/jsx-runtime").JSX.Element;
+    Error: ({ title, description, onRetry, retryLabel, variant, className, }: import("./smart-page-error").SmartPageErrorProps) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=smart-page-container.d.ts.map

package/dist/smart-components/page/smart-page-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-container.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-container.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AA2B7D,YAAY,EAAE,cAAc,IAAI,uBAAuB,EAAE,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,kBAAkB,WACrB,cAAc;;;;;;;;;;;;;;;;;;;;;;CA6CvB,CAAA"}

package/dist/smart-components/page/smart-page-container.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SmartPage } from "./smart-page";
+import { SmartPageHeader, SmartPageTitle, SmartPageDescription, SmartPageActions, SmartPageBreadcrumb, } from "./smart-page-header";
+import { SmartPageHero } from "./smart-page-hero";
+import { SmartToolbar } from "./smart-toolbar";
+import { SmartPageSearch } from "./smart-page-search";
+import { SmartPageFilters } from "./smart-page-filters";
+import { SmartPageTabs, SmartPageTab, SmartPageTabPanel, } from "./smart-page-tabs";
+import { SmartPageContent } from "./smart-page-content";
+import { SmartPageSection } from "./smart-page-section";
+import { SmartSidebar } from "./smart-sidebar";
+import { SmartGridArea } from "./smart-grid-area";
+import { SmartPageStatusBar } from "./smart-page-status-bar";
+import { SmartPageFooter } from "./smart-page-footer";
+import { SmartPageEmpty } from "./smart-page-empty";
+import { SmartPageLoading } from "./smart-page-loading";
+import { SmartPageError } from "./smart-page-error";
+/**
+ * Compound wrapper around {@link SmartPage} that bundles all page slot
+ * components as static properties so you only need one import.
+ *
+ * Every sub-component is identical to its standalone counterpart —
+ * `SmartPageContainer.Header` is `SmartPageHeader`, etc.
+ *
+ * @example Grid page (single import)
+ * ```tsx
+ * import { SmartPageContainer as Page } from "@iamsaroj/smart-ui/..."
+ *
+ * <Page>
+ *   <Page.Header>
+ *     <Page.Title>Users</Page.Title>
+ *     <Page.Actions><Button>New</Button></Page.Actions>
+ *   </Page.Header>
+ *   <Page.Toolbar>…</Page.Toolbar>
+ *   <Page.GridArea><UserGrid /></Page.GridArea>
+ *   <Page.Footer><Page.StatusBar>42 rows</Page.StatusBar></Page.Footer>
+ * </Page>
+ * ```
+ *
+ * @example Document page
+ * ```tsx
+ * <Page layout="document">
+ *   <Page.Header>
+ *     <Page.Breadcrumb items={[{ label: "Settings", href: "/settings" }, { label: "Profile" }]} />
+ *     <Page.Title>Profile</Page.Title>
+ *   </Page.Header>
+ *   <Page.Content maxWidth="2xl" centered>
+ *     <Page.Section title="Personal info" divider>
+ *       <ProfileForm />
+ *     </Page.Section>
+ *   </Page.Content>
+ *   <Page.Footer>
+ *     <Button type="submit">Save</Button>
+ *   </Page.Footer>
+ * </Page>
+ * ```
+ */
+export const SmartPageContainer = Object.assign((props) => _jsx(SmartPage, { ...props }), {
+    // ── Header zone ──────────────────────────────────────────────────────────
+    Header: SmartPageHeader,
+    Title: SmartPageTitle,
+    Description: SmartPageDescription,
+    Actions: SmartPageActions,
+    Breadcrumb: SmartPageBreadcrumb,
+    // ── Hero ─────────────────────────────────────────────────────────────────
+    Hero: SmartPageHero,
+    // ── Toolbar ──────────────────────────────────────────────────────────────
+    Toolbar: SmartToolbar,
+    // ── Search + Filters ─────────────────────────────────────────────────────
+    Search: SmartPageSearch,
+    Filters: SmartPageFilters,
+    // ── Tabs ─────────────────────────────────────────────────────────────────
+    Tabs: SmartPageTabs,
+    Tab: SmartPageTab,
+    TabPanel: SmartPageTabPanel,
+    // ── Content ──────────────────────────────────────────────────────────────
+    Content: SmartPageContent,
+    Section: SmartPageSection,
+    // ── Sidebar ──────────────────────────────────────────────────────────────
+    Sidebar: SmartSidebar,
+    // ── Grid area ────────────────────────────────────────────────────────────
+    GridArea: SmartGridArea,
+    // ── Status bar ───────────────────────────────────────────────────────────
+    StatusBar: SmartPageStatusBar,
+    // ── Footer ───────────────────────────────────────────────────────────────
+    Footer: SmartPageFooter,
+    // ── States ───────────────────────────────────────────────────────────────
+    Empty: SmartPageEmpty,
+    Loading: SmartPageLoading,
+    Error: SmartPageError,
+});
+//# sourceMappingURL=smart-page-container.js.map

package/dist/smart-components/page/smart-page-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-container.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-container.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAuB,MAAM,cAAc,CAAA;AAC7D,OAAO,EACL,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EACL,aAAa,EACb,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAInD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAC7C,CAAC,KAAqB,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI,EACnD;IACE,4EAA4E;IAC5E,MAAM,EAAE,eAAe;IACvB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,oBAAoB;IACjC,OAAO,EAAE,gBAAgB;IACzB,UAAU,EAAE,mBAAmB;IAE/B,4EAA4E;IAC5E,IAAI,EAAE,aAAa;IAEnB,4EAA4E;IAC5E,OAAO,EAAE,YAAY;IAErB,4EAA4E;IAC5E,MAAM,EAAE,eAAe;IACvB,OAAO,EAAE,gBAAgB;IAEzB,4EAA4E;IAC5E,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,YAAY;IACjB,QAAQ,EAAE,iBAAiB;IAE3B,4EAA4E;IAC5E,OAAO,EAAE,gBAAgB;IACzB,OAAO,EAAE,gBAAgB;IAEzB,4EAA4E;IAC5E,OAAO,EAAE,YAAY;IAErB,4EAA4E;IAC5E,QAAQ,EAAE,aAAa;IAEvB,4EAA4E;IAC5E,SAAS,EAAE,kBAAkB;IAE7B,4EAA4E;IAC5E,MAAM,EAAE,eAAe;IAEvB,4EAA4E;IAC5E,KAAK,EAAE,cAAc;IACrB,OAAO,EAAE,gBAAgB;IACzB,KAAK,EAAE,cAAc;CACtB,CACF,CAAA"}

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

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { type PaddingSize } from "./page-context";
+declare const MAX_WIDTH_CLASSES: {
+    readonly sm: "max-w-sm";
+    readonly md: "max-w-2xl";
+    readonly lg: "max-w-4xl";
+    readonly xl: "max-w-6xl";
+    readonly "2xl": "max-w-7xl";
+    readonly full: "w-full max-w-none";
+};
+export interface SmartPageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Local padding override. Inherits from SmartPage `padding` prop by default.
+     */
+    padding?: boolean | PaddingSize;
+    /**
+     * Constrain the inner content to a readable max-width and centre it.
+     * Ignored when SmartPage has `fullWidth` enabled.
+     */
+    maxWidth?: keyof typeof MAX_WIDTH_CLASSES;
+    /**
+     * Horizontally centre the inner content block (requires `maxWidth`).
+     * @default false
+     */
+    centered?: boolean;
+}
+/**
+ * Main content area of the page.
+ *
+ * SmartPageContent adapts its behaviour based on the scroll mode set by
+ * the parent {@link SmartPage}:
+ *
+ * | Scroll mode | Behaviour                                              |
+ * |-------------|--------------------------------------------------------|
+ * | `"page"`    | Grows to fill remaining space; page scrolls naturally   |
+ * | `"content"` | Becomes the scroll container (`flex-1 overflow-y-auto`) |
+ * | `"grid"`    | Grows; no scroll (grid manages its own)                |
+ * | `"none"`    | Grows; no scroll at all                                |
+ *
+ * The `"content"` mode is the critical one: the outer container is
+ * `overflow-hidden` (preventing page scroll) while SmartPageContent
+ * has `overflow-y-auto`, creating exactly one scrollbar on the inner area.
+ *
+ * ## max-width and centering
+ * For document and settings pages, pass `maxWidth` to constrain the reading
+ * width and `centered` to horizontally centre the content block.
+ *
+ * @example Document page with centred content
+ * ```tsx
+ * <SmartPage layout="document">
+ *   <SmartPageHeader>…</SmartPageHeader>
+ *   <SmartPageContent maxWidth="2xl" centered>
+ *     <SmartPageSection title="Profile">…</SmartPageSection>
+ *   </SmartPageContent>
+ * </SmartPage>
+ * ```
+ *
+ * @example Settings page (detail layout, scrollable body)
+ * ```tsx
+ * <SmartPage layout="detail">
+ *   <SmartPageHeader>…</SmartPageHeader>
+ *   <SmartPageContent maxWidth="xl" centered>
+ *     <SettingsForm />
+ *   </SmartPageContent>
+ * </SmartPage>
+ * ```
+ */
+export declare const SmartPageContent: React.ForwardRefExoticComponent<SmartPageContentProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=smart-page-content.d.ts.map

package/dist/smart-components/page/smart-page-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-content.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAYjE,QAAA,MAAM,iBAAiB;;;;;;;CAOb,CAAA;AAEV,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAA;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAA;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,gBAAgB,8FAqD5B,CACA"}