@iamsaroj/smart-ui 0.2.0

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

@@ -0,0 +1,129 @@
+"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 { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage as BreadcrumbCurrent, BreadcrumbSeparator, } from "@iamsaroj/smart-ui/components/breadcrumb";
+import { SMART_PAGE_SLOT } from "./slot";
+/**
+ * Top-level header zone for a page.
+ *
+ * Hosts breadcrumbs, title, description, and actions in a consistent
+ * horizontal layout. Stickiness and border-bottom are controlled by context
+ * (SmartPage props) and the `border` / `compact` props respectively.
+ *
+ * ## Layout
+ * Renders as a flex row: left side for title group, right side for actions.
+ * Children are laid out via natural flex flow — compose
+ * {@link SmartPageTitle}, {@link SmartPageDescription}, and
+ * {@link SmartPageActions} inside.
+ *
+ * ## Stickiness
+ * In `"page"` scroll mode SmartPage wraps the header in a `sticky top-0`
+ * container when `stickyHeader` is enabled. In `"content"` / `"grid"` modes
+ * the header sits above the scroll container so it's always visible.
+ *
+ * ## Flat props vs. composition
+ * For the common case, pass `breadcrumb` / `title` / `description` / `actions`
+ * and the header lays them out for you. Composition is still the escape hatch:
+ * any `children` render *below* the flat block, so you can mix both.
+ *
+ * @example Flat props (the common case)
+ * ```tsx
+ * <SmartPageHeader
+ *   breadcrumb={[{ label: "Users", href: "/users" }, { label: "New" }]}
+ *   title="New User"
+ *   description="Fill in the details below."
+ *   actions={
+ *     <>
+ *       <Button variant="outline">Cancel</Button>
+ *       <Button>Save</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example Composition escape hatch (full control)
+ * ```tsx
+ * <SmartPageHeader>
+ *   <SmartPageBreadcrumb items={[{ label: "Users", href: "/users" }, { label: "New" }]} />
+ *   <div className="flex items-center justify-between">
+ *     <div>
+ *       <SmartPageTitle>New User</SmartPageTitle>
+ *       <SmartPageDescription>Fill in the details below.</SmartPageDescription>
+ *     </div>
+ *     <SmartPageActions>
+ *       <Button>Save</Button>
+ *     </SmartPageActions>
+ *   </div>
+ * </SmartPageHeader>
+ * ```
+ */
+export const SmartPageHeader = React.forwardRef(({ border = true, compact = false, breadcrumb, title, description, actions, className, children, ...props }, ref) => {
+    const hasTitleRow = title != null || description != null || actions != null;
+    const hasFlat = (breadcrumb?.length ?? 0) > 0 || hasTitleRow;
+    return (_jsxs("header", { ref: ref, "data-slot": "page-header", className: cn("flex shrink-0 flex-col", compact ? "px-4 py-2" : "px-6 py-4", border && "border-b", className), ...props, children: [breadcrumb && breadcrumb.length > 0 && (_jsx(SmartPageBreadcrumb, { items: breadcrumb })), hasTitleRow && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [typeof title === "string" ? (_jsx(SmartPageTitle, { children: title })) : (title), description != null && (_jsx(SmartPageDescription, { children: description }))] }), actions != null && _jsx(SmartPageActions, { children: actions })] })), hasFlat && children ? (_jsx("div", { className: "mt-2", children: children })) : (children)] }));
+});
+SmartPageHeader[SMART_PAGE_SLOT] =
+    "header";
+/**
+ * Page-level heading. Always renders as `<h1>` by default for correct
+ * document outline; override with `as` when the page title is nested inside
+ * a section hierarchy.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageTitle>Users</SmartPageTitle>
+ * ```
+ */
+export const SmartPageTitle = React.forwardRef(({ as: Tag = "h1", className, ...props }, ref) => (_jsx(Tag, { ref: ref, "data-slot": "page-title", className: cn("text-lg leading-tight font-semibold tracking-tight", className), ...props })));
+// ─── SmartPageDescription ──────────────────────────────────────────────────────
+/**
+ * Supporting description rendered below the page title.
+ * Automatically muted and limited to a comfortable reading width.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageDescription>Manage your organisation's members and roles.</SmartPageDescription>
+ * ```
+ */
+export const SmartPageDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, "data-slot": "page-description", className: cn("text-sm text-muted-foreground", className), ...props })));
+// ─── SmartPageActions ──────────────────────────────────────────────────────────
+/**
+ * Right-aligned action group inside a page header.
+ * Lay out buttons, dropdowns, or any controls inside. Items are spaced
+ * with a consistent gap and aligned vertically to the centre.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageActions>
+ *   <Button variant="outline"><Download /> Export</Button>
+ *   <Button><Plus /> New User</Button>
+ * </SmartPageActions>
+ * ```
+ */
+export const SmartPageActions = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "page-actions", className: cn("ml-auto flex shrink-0 items-center gap-2", className), ...props })));
+/**
+ * Breadcrumb trail rendered above the page title.
+ * The last item is always rendered as the current page (non-link).
+ * All preceding items are rendered as links when `href` is provided.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageBreadcrumb
+ *   items={[
+ *     { label: "Settings", href: "/settings" },
+ *     { label: "Team", href: "/settings/team" },
+ *     { label: "Members" },
+ *   ]}
+ * />
+ * ```
+ */
+export const SmartPageBreadcrumb = ({ items, className, }) => {
+    if (!items.length)
+        return null;
+    return (_jsx(Breadcrumb, { className: cn("mb-1", className), children: _jsx(BreadcrumbList, { children: items.map((item, idx) => {
+                const isLast = idx === items.length - 1;
+                return (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { children: isLast ? (_jsx(BreadcrumbCurrent, { children: item.label })) : (_jsx(BreadcrumbLink, { href: item.href ?? "#", children: item.label })) }), !isLast && _jsx(BreadcrumbSeparator, {})] }, idx));
+            }) }) }));
+};
+//# sourceMappingURL=smart-page-header.js.map

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

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

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+export interface SmartPageHeroProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual treatment of the hero background.
+     * - `"muted"` — subtle muted fill (default)
+     * - `"gradient"` — foreground-to-transparent gradient overlay
+     * - `"none"` — transparent, useful when placing an image background yourself
+     */
+    background?: "muted" | "gradient" | "none";
+    /**
+     * Controls the vertical height of the hero.
+     * - `"sm"` — compact banner (good for in-page section heroes)
+     * - `"md"` — standard hero (default)
+     * - `"lg"` — prominent hero (landing-style pages)
+     */
+    height?: "sm" | "md" | "lg";
+}
+/**
+ * Full-width feature banner rendered at the top of a page, below the header.
+ *
+ * Designed for dashboard and landing-style pages where a visual introduction
+ * sets context before cards or data appear. The hero always scrolls away with
+ * the page content — it is never sticky.
+ *
+ * Presence of SmartPageHero causes SmartPage to auto-detect a `"dashboard"` layout
+ * (natural page scroll, no height constraints).
+ *
+ * @example
+ * ```tsx
+ * <SmartPage>
+ *   <SmartPageHeader>…</SmartPageHeader>
+ *   <SmartPageHero height="md" background="muted">
+ *     <SmartPageTitle>Welcome back, Sarah</SmartPageTitle>
+ *     <SmartPageDescription>Here's what's happening today.</SmartPageDescription>
+ *   </SmartPageHero>
+ *   <SmartPageContent>
+ *     <MetricCards />
+ *   </SmartPageContent>
+ * </SmartPage>
+ * ```
+ */
+export declare const SmartPageHero: React.ForwardRefExoticComponent<SmartPageHeroProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=smart-page-hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-hero.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-hero.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAA;IAC1C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC5B;AAoBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,aAAa,2FAsBzB,CACA"}

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { SMART_PAGE_SLOT } from "./smart-page";
+const bgClasses = {
+    muted: "bg-muted",
+    gradient: "bg-gradient-to-b from-foreground/5 to-transparent",
+    none: "",
+};
+const heightClasses = {
+    sm: "py-8 md:py-10",
+    md: "py-12 md:py-16",
+    lg: "py-20 md:py-28",
+};
+/**
+ * Full-width feature banner rendered at the top of a page, below the header.
+ *
+ * Designed for dashboard and landing-style pages where a visual introduction
+ * sets context before cards or data appear. The hero always scrolls away with
+ * the page content — it is never sticky.
+ *
+ * Presence of SmartPageHero causes SmartPage to auto-detect a `"dashboard"` layout
+ * (natural page scroll, no height constraints).
+ *
+ * @example
+ * ```tsx
+ * <SmartPage>
+ *   <SmartPageHeader>…</SmartPageHeader>
+ *   <SmartPageHero height="md" background="muted">
+ *     <SmartPageTitle>Welcome back, Sarah</SmartPageTitle>
+ *     <SmartPageDescription>Here's what's happening today.</SmartPageDescription>
+ *   </SmartPageHero>
+ *   <SmartPageContent>
+ *     <MetricCards />
+ *   </SmartPageContent>
+ * </SmartPage>
+ * ```
+ */
+export const SmartPageHero = React.forwardRef(({ background = "muted", height = "md", className, children, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "page-hero", className: cn("w-full shrink-0 px-6", bgClasses[background], heightClasses[height], className), ...props, children: children })));
+SmartPageHero[SMART_PAGE_SLOT] = "hero";
+//# sourceMappingURL=smart-page-hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-hero.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-hero.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;AAmB9C,MAAM,SAAS,GAGX;IACF,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,mDAAmD;IAC7D,IAAI,EAAE,EAAE;CACT,CAAA;AAED,MAAM,aAAa,GAGf;IACF,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,gBAAgB;IACpB,EAAE,EAAE,gBAAgB;CACrB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAI3C,CACE,EAAE,UAAU,GAAG,OAAO,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACtE,GAAG,EACH,EAAE,CAAC,CACH,cACE,GAAG,EAAE,GAAG,eACE,WAAW,EACrB,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,SAAS,CAAC,UAAU,CAAC,EACrB,aAAa,CAAC,MAAM,CAAC,EACrB,SAAS,CACV,KACG,KAAK,YAER,QAAQ,GACL,CACP,CACF,CACA;AAAC,aAAoD,CAAC,eAAe,CAAC,GAAG,MAAM,CAAA"}

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

@@ -0,0 +1,31 @@
+export interface SmartPageLoadingProps {
+    /** Accessible label announced to screen readers and displayed below the spinner. */
+    label?: string;
+    /** Additional class names on the root element. */
+    className?: string;
+}
+/**
+ * Full-page loading indicator.
+ *
+ * Renders a centred spinner with an accessible status announcement.
+ * Use this for the initial data load of a page — not for incremental /
+ * background updates (use SmartLoadingOverlay for those).
+ *
+ * ## Usage
+ * Pass to SmartPage's `loading` and `loadingLabel` props for automatic
+ * placement, or render it directly inside a content area:
+ *
+ * ```tsx
+ * // Automatic — replaces all children while loading
+ * <SmartPage loading={isLoading} loadingLabel="Loading users…">
+ *   …children…
+ * </SmartPage>
+ *
+ * // Manual — inside SmartPageContent
+ * <SmartPageContent>
+ *   {isLoading ? <SmartPageLoading label="Loading report…" /> : <Report />}
+ * </SmartPageContent>
+ * ```
+ */
+export declare const SmartPageLoading: ({ label, className, }: SmartPageLoadingProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-page-loading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-loading.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-loading.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IACpC,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,gBAAgB,GAAI,uBAG9B,qBAAqB,4CAavB,CAAA"}

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { SmartSpinner } from "@iamsaroj/smart-ui/smart-components/spinner";
+/**
+ * Full-page loading indicator.
+ *
+ * Renders a centred spinner with an accessible status announcement.
+ * Use this for the initial data load of a page — not for incremental /
+ * background updates (use SmartLoadingOverlay for those).
+ *
+ * ## Usage
+ * Pass to SmartPage's `loading` and `loadingLabel` props for automatic
+ * placement, or render it directly inside a content area:
+ *
+ * ```tsx
+ * // Automatic — replaces all children while loading
+ * <SmartPage loading={isLoading} loadingLabel="Loading users…">
+ *   …children…
+ * </SmartPage>
+ *
+ * // Manual — inside SmartPageContent
+ * <SmartPageContent>
+ *   {isLoading ? <SmartPageLoading label="Loading report…" /> : <Report />}
+ * </SmartPageContent>
+ * ```
+ */
+export const SmartPageLoading = ({ label = "Loading…", className, }) => (_jsxs("div", { role: "status", "aria-live": "polite", "aria-label": label, className: cn("flex h-full min-h-[240px] flex-col items-center justify-center gap-3", className), children: [_jsx(SmartSpinner, { size: 28, className: "text-primary", label: label }), _jsx("p", { className: "text-sm text-muted-foreground", children: label })] }));
+//# sourceMappingURL=smart-page-loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-loading.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-loading.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAA;AAS1E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,GAAG,UAAU,EAClB,SAAS,GACa,EAAE,EAAE,CAAC,CAC3B,eACE,IAAI,EAAC,QAAQ,eACH,QAAQ,gBACN,KAAK,EACjB,SAAS,EAAE,EAAE,CACX,sEAAsE,EACtE,SAAS,CACV,aAED,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,GAAI,EACjE,YAAG,SAAS,EAAC,+BAA+B,YAAE,KAAK,GAAK,IACpD,CACP,CAAA"}

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface SmartPageSearchProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Render a bottom border separating search from content.
+     * @default true
+     */
+    border?: boolean;
+}
+/**
+ * Search bar container rendered below the toolbar.
+ *
+ * Provides consistent spacing and border treatment for a search input area.
+ * Compose a {@link SmartSearchInput} (or the `SmartSearch` alias) and any
+ * supporting controls (clear, scope selector) inside.
+ *
+ * Having a SmartPageSearch as a direct child of SmartPage does NOT by itself
+ * trigger a specific layout — it is combined with other slots. Pair it with
+ * {@link SmartGridArea} for a CRUD layout where search sticks above the grid.
+ *
+ * ## Stickiness
+ * Controlled by `stickySearch` on {@link SmartPage} (default: `true` for
+ * `"grid"` layout). In contained scroll modes the search bar sits above the
+ * scroll container and is already pinned; in `"page"` mode it joins the top
+ * sticky band.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageSearch>
+ *   <SmartSearch
+ *     value={query}
+ *     onValueChange={setQuery}
+ *     placeholder="Search users…"
+ *     className="w-80"
+ *   />
+ * </SmartPageSearch>
+ * ```
+ */
+export declare const SmartPageSearch: React.ForwardRefExoticComponent<SmartPageSearchProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=smart-page-search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-search.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-search.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe,6FAgB1B,CACD"}

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { SMART_PAGE_SLOT } from "./smart-page";
+/**
+ * Search bar container rendered below the toolbar.
+ *
+ * Provides consistent spacing and border treatment for a search input area.
+ * Compose a {@link SmartSearchInput} (or the `SmartSearch` alias) and any
+ * supporting controls (clear, scope selector) inside.
+ *
+ * Having a SmartPageSearch as a direct child of SmartPage does NOT by itself
+ * trigger a specific layout — it is combined with other slots. Pair it with
+ * {@link SmartGridArea} for a CRUD layout where search sticks above the grid.
+ *
+ * ## Stickiness
+ * Controlled by `stickySearch` on {@link SmartPage} (default: `true` for
+ * `"grid"` layout). In contained scroll modes the search bar sits above the
+ * scroll container and is already pinned; in `"page"` mode it joins the top
+ * sticky band.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageSearch>
+ *   <SmartSearch
+ *     value={query}
+ *     onValueChange={setQuery}
+ *     placeholder="Search users…"
+ *     className="w-80"
+ *   />
+ * </SmartPageSearch>
+ * ```
+ */
+export const SmartPageSearch = React.forwardRef(({ border = true, className, children, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "page-search", className: cn("flex shrink-0 items-center gap-3 px-4 py-2", border && "border-b", className), ...props, children: children })));
+SmartPageSearch[SMART_PAGE_SLOT] =
+    "search";
+//# sourceMappingURL=smart-page-search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-search.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-search.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;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3D,cACE,GAAG,EAAE,GAAG,eACE,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,4CAA4C,EAC5C,MAAM,IAAI,UAAU,EACpB,SAAS,CACV,KACG,KAAK,YAER,QAAQ,GACL,CACP,CAAC,CACD;AAAC,eAAsD,CAAC,eAAe,CAAC;IACvE,QAAQ,CAAA"}

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+export interface SmartPageSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Optional section heading. */
+    title?: string;
+    /** Optional supporting description rendered below the title. */
+    description?: string;
+    /**
+     * Show a border beneath the section heading, separating it from the body.
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Renders a border around the entire section.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Applies standard section padding (horizontal + vertical).
+     * @default true
+     */
+    padding?: boolean;
+}
+/**
+ * Named region within a content area, used to group related form fields,
+ * settings controls, or information blocks.
+ *
+ * SmartPageSection provides a consistent heading + body structure without
+ * imposing card or box styling — it's a semantic wrapper, not a visual frame.
+ * For framed cards, combine with the shadcn `Card` primitive.
+ *
+ * ## When to use
+ * - Settings pages: one section per logical settings group
+ * - Forms: one section per form fieldset
+ * - Detail pages: one section per entity attribute group
+ *
+ * @example Settings section
+ * ```tsx
+ * <SmartPageSection
+ *   title="Notifications"
+ *   description="Choose how and when you receive notifications."
+ *   divider
+ * >
+ *   <NotificationForm />
+ * </SmartPageSection>
+ * ```
+ *
+ * @example Borderless information block
+ * ```tsx
+ * <SmartPageSection title="Recent activity">
+ *   <ActivityList />
+ * </SmartPageSection>
+ * ```
+ */
+export declare const SmartPageSection: React.ForwardRefExoticComponent<SmartPageSectionProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=smart-page-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-section.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9E,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,gBAAgB,2FA8C5B,CAAA"}

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

@@ -0,0 +1,41 @@
+"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 { Separator } from "@iamsaroj/smart-ui/components/separator";
+/**
+ * Named region within a content area, used to group related form fields,
+ * settings controls, or information blocks.
+ *
+ * SmartPageSection provides a consistent heading + body structure without
+ * imposing card or box styling — it's a semantic wrapper, not a visual frame.
+ * For framed cards, combine with the shadcn `Card` primitive.
+ *
+ * ## When to use
+ * - Settings pages: one section per logical settings group
+ * - Forms: one section per form fieldset
+ * - Detail pages: one section per entity attribute group
+ *
+ * @example Settings section
+ * ```tsx
+ * <SmartPageSection
+ *   title="Notifications"
+ *   description="Choose how and when you receive notifications."
+ *   divider
+ * >
+ *   <NotificationForm />
+ * </SmartPageSection>
+ * ```
+ *
+ * @example Borderless information block
+ * ```tsx
+ * <SmartPageSection title="Recent activity">
+ *   <ActivityList />
+ * </SmartPageSection>
+ * ```
+ */
+export const SmartPageSection = React.forwardRef(({ title, description, divider = false, bordered = false, padding = true, className, children, ...props }, ref) => {
+    const hasHeading = Boolean(title || description);
+    return (_jsxs("section", { ref: ref, "data-slot": "page-section", className: cn("flex flex-col gap-4", padding && "py-6", bordered && "rounded-lg border p-6", className), ...props, children: [hasHeading && (_jsxs("div", { className: "flex flex-col gap-1", children: [title && (_jsx("h2", { className: "text-sm leading-tight font-semibold", children: title })), description && (_jsx("p", { className: "text-xs text-muted-foreground", children: description })), divider && _jsx(Separator, { className: "mt-2" })] })), _jsx("div", { className: "flex flex-col gap-3", children: children })] }));
+});
+//# sourceMappingURL=smart-page-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-section.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-section.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAwBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAI9C,CACE,EACE,KAAK,EACL,WAAW,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,IAAI,EACd,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,WAAW,CAAC,CAAA;IAEhD,OAAO,CACL,mBACE,GAAG,EAAE,GAAG,eACE,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,OAAO,IAAI,MAAM,EACjB,QAAQ,IAAI,uBAAuB,EACnC,SAAS,CACV,KACG,KAAK,aAER,UAAU,IAAI,CACb,eAAK,SAAS,EAAC,qBAAqB,aACjC,KAAK,IAAI,CACR,aAAI,SAAS,EAAC,qCAAqC,YAAE,KAAK,GAAM,CACjE,EACA,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,+BAA+B,YAAE,WAAW,GAAK,CAC/D,EACA,OAAO,IAAI,KAAC,SAAS,IAAC,SAAS,EAAC,MAAM,GAAG,IACtC,CACP,EACD,cAAK,SAAS,EAAC,qBAAqB,YAAE,QAAQ,GAAO,IAC7C,CACX,CAAA;AACH,CAAC,CACF,CAAA"}

package/dist/smart-components/page/smart-page-status-bar.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+export interface SmartPageStatusBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Render a top border separating the status bar from the grid / content.
+     * @default true
+     */
+    border?: boolean;
+}
+/**
+ * Status bar pinned between the grid area and the footer.
+ *
+ * Shows lightweight contextual information about the primary data set:
+ * total row counts, active selection counts, last-updated timestamps,
+ * data quality warnings, or sync status indicators.
+ *
+ * ## Stickiness
+ * Controlled by `stickyStatusBar` on SmartPage (default `true` for `"grid"`
+ * layout). In contained modes it sits below the scroll container and is always
+ * visible. In `"page"` mode it joins the bottom sticky band with the footer.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageStatusBar>
+ *   <span className="text-xs text-muted-foreground">
+ *     {total.toLocaleString()} users — {selected} selected
+ *   </span>
+ *   <span className="ms-auto text-xs text-muted-foreground">
+ *     Last synced 3 minutes ago
+ *   </span>
+ * </SmartPageStatusBar>
+ * ```
+ */
+export declare const SmartPageStatusBar: React.ForwardRefExoticComponent<SmartPageStatusBarProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=smart-page-status-bar.d.ts.map

package/dist/smart-components/page/smart-page-status-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-status-bar.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-status-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,kBAAkB,gGAgB7B,CACD"}

package/dist/smart-components/page/smart-page-status-bar.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { SMART_PAGE_SLOT } from "./smart-page";
+/**
+ * Status bar pinned between the grid area and the footer.
+ *
+ * Shows lightweight contextual information about the primary data set:
+ * total row counts, active selection counts, last-updated timestamps,
+ * data quality warnings, or sync status indicators.
+ *
+ * ## Stickiness
+ * Controlled by `stickyStatusBar` on SmartPage (default `true` for `"grid"`
+ * layout). In contained modes it sits below the scroll container and is always
+ * visible. In `"page"` mode it joins the bottom sticky band with the footer.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageStatusBar>
+ *   <span className="text-xs text-muted-foreground">
+ *     {total.toLocaleString()} users — {selected} selected
+ *   </span>
+ *   <span className="ms-auto text-xs text-muted-foreground">
+ *     Last synced 3 minutes ago
+ *   </span>
+ * </SmartPageStatusBar>
+ * ```
+ */
+export const SmartPageStatusBar = React.forwardRef(({ border = true, className, children, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "page-status-bar", className: cn("flex shrink-0 items-center gap-4 px-4 py-1.5", border && "border-t", className), ...props, children: children })));
+SmartPageStatusBar[SMART_PAGE_SLOT] =
+    "status-bar";
+//# sourceMappingURL=smart-page-status-bar.js.map

package/dist/smart-components/page/smart-page-status-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-status-bar.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-status-bar.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;AAU9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAGhD,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3D,cACE,GAAG,EAAE,GAAG,eACE,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,8CAA8C,EAC9C,MAAM,IAAI,UAAU,EACpB,SAAS,CACV,KACG,KAAK,YAER,QAAQ,GACL,CACP,CAAC,CACD;AAAC,kBAAyD,CAAC,eAAe,CAAC;IAC1E,YAAY,CAAA"}