@iamsaroj/smart-ui 0.2.0

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

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { usePageContext } from "./page-context";
+import { SMART_PAGE_SLOT } from "./smart-page";
+const PADDING_CLASSES = {
+    none: "",
+    sm: "p-3",
+    // Trim the top padding so content sits close to the page header (whose own
+    // py-4 already contributes ~16px). Sides/bottom keep the full padding.
+    md: "p-4 pt-2 md:px-6 md:pt-2 md:pb-6",
+    lg: "p-6 pt-3 md:px-8 md:pt-3 md:pb-8",
+};
+const MAX_WIDTH_CLASSES = {
+    sm: "max-w-sm",
+    md: "max-w-2xl",
+    lg: "max-w-4xl",
+    xl: "max-w-6xl",
+    "2xl": "max-w-7xl",
+    full: "w-full max-w-none",
+};
+/**
+ * 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 const SmartPageContent = React.forwardRef(({ padding: localPadding, maxWidth, centered = false, className, children, ...props }, ref) => {
+    const { scroll, padding: ctxPadding, fullWidth } = usePageContext();
+    const resolvedPadding = localPadding === true
+        ? "md"
+        : localPadding === false
+            ? "none"
+            : (localPadding ?? ctxPadding);
+    const isScrollContainer = scroll === "content";
+    const outerClasses = cn("flex-1", isScrollContainer && "min-h-0 overflow-y-auto", className);
+    const innerClasses = cn(PADDING_CLASSES[resolvedPadding], !fullWidth && maxWidth && MAX_WIDTH_CLASSES[maxWidth], (centered || (!fullWidth && maxWidth)) && "mx-auto");
+    return (_jsx("div", { ref: ref, "data-slot": "page-content", className: outerClasses, ...props, children: innerClasses ? (_jsx("div", { className: innerClasses, children: children })) : (children) }));
+});
+SmartPageContent[SMART_PAGE_SLOT] =
+    "content";
+//# sourceMappingURL=smart-page-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-content.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-content.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAE,cAAc,EAAoB,MAAM,gBAAgB,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,MAAM,eAAe,GAAgC;IACnD,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,KAAK;IACT,2EAA2E;IAC3E,uEAAuE;IACvE,EAAE,EAAE,kCAAkC;IACtC,EAAE,EAAE,kCAAkC;CACvC,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;IACf,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,mBAAmB;CACjB,CAAA;AAmBV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAI9C,CACE,EACE,OAAO,EAAE,YAAY,EACrB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAA;IAEnE,MAAM,eAAe,GACnB,YAAY,KAAK,IAAI;QACnB,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,YAAY,KAAK,KAAK;YACtB,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,CAAC,YAAY,IAAI,UAAU,CAAC,CAAA;IAEpC,MAAM,iBAAiB,GAAG,MAAM,KAAK,SAAS,CAAA;IAE9C,MAAM,YAAY,GAAG,EAAE,CACrB,QAAQ,EACR,iBAAiB,IAAI,yBAAyB,EAC9C,SAAS,CACV,CAAA;IAED,MAAM,YAAY,GAAG,EAAE,CACrB,eAAe,CAAC,eAAe,CAAC,EAChC,CAAC,SAAS,IAAI,QAAQ,IAAI,iBAAiB,CAAC,QAAQ,CAAC,EACrD,CAAC,QAAQ,IAAI,CAAC,CAAC,SAAS,IAAI,QAAQ,CAAC,CAAC,IAAI,SAAS,CACpD,CAAA;IAED,OAAO,CACL,cACE,GAAG,EAAE,GAAG,eACE,cAAc,EACxB,SAAS,EAAE,YAAY,KACnB,KAAK,YAER,YAAY,CAAC,CAAC,CAAC,CACd,cAAK,SAAS,EAAE,YAAY,YAAG,QAAQ,GAAO,CAC/C,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACG,CACP,CAAA;AACH,CAAC,CACF,CACA;AAAC,gBAAuD,CAAC,eAAe,CAAC;IACxE,SAAS,CAAA"}

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+export interface SmartPageEmptyProps {
+    /** Illustrative icon rendered above the title. */
+    icon?: React.ReactNode;
+    /** Short headline (required). */
+    title: string;
+    /** Supporting sentence that explains the empty state. */
+    description?: React.ReactNode;
+    /** Call-to-action (e.g. a Button to create the first item). */
+    action?: React.ReactNode;
+    /** Additional class names on the root element. */
+    className?: string;
+}
+/**
+ * Full-page empty state.
+ *
+ * Used when a page's primary data set returns no results — whether because
+ * the user has no items yet, a search/filter found nothing, or the view is
+ * genuinely empty.
+ *
+ * Render it inside {@link SmartPageContent} or pass it to SmartPage's `empty`
+ * prop for automatic placement:
+ *
+ * ```tsx
+ * <SmartPage empty={data.length === 0 ? <SmartPageEmpty title="No users" … /> : undefined}>
+ *   …
+ * </SmartPage>
+ * ```
+ *
+ * ## Standalone usage (inside SmartPageContent)
+ * ```tsx
+ * <SmartPageContent>
+ *   {data.length === 0 ? (
+ *     <SmartPageEmpty
+ *       icon={<Users />}
+ *       title="No team members yet"
+ *       description="Invite your first team member to get started."
+ *       action={<Button><UserPlus /> Invite member</Button>}
+ *     />
+ *   ) : (
+ *     <MemberList data={data} />
+ *   )}
+ * </SmartPageContent>
+ * ```
+ */
+export declare const SmartPageEmpty: ({ icon, title, description, action, className, }: SmartPageEmptyProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-page-empty.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-empty.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-empty.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,mBAAmB;IAClC,kDAAkD;IAClD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,cAAc,GAAI,kDAM5B,mBAAmB,4CAuBrB,CAAA"}

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+/**
+ * Full-page empty state.
+ *
+ * Used when a page's primary data set returns no results — whether because
+ * the user has no items yet, a search/filter found nothing, or the view is
+ * genuinely empty.
+ *
+ * Render it inside {@link SmartPageContent} or pass it to SmartPage's `empty`
+ * prop for automatic placement:
+ *
+ * ```tsx
+ * <SmartPage empty={data.length === 0 ? <SmartPageEmpty title="No users" … /> : undefined}>
+ *   …
+ * </SmartPage>
+ * ```
+ *
+ * ## Standalone usage (inside SmartPageContent)
+ * ```tsx
+ * <SmartPageContent>
+ *   {data.length === 0 ? (
+ *     <SmartPageEmpty
+ *       icon={<Users />}
+ *       title="No team members yet"
+ *       description="Invite your first team member to get started."
+ *       action={<Button><UserPlus /> Invite member</Button>}
+ *     />
+ *   ) : (
+ *     <MemberList data={data} />
+ *   )}
+ * </SmartPageContent>
+ * ```
+ */
+export const SmartPageEmpty = ({ icon, title, description, action, className, }) => (_jsxs("div", { role: "status", className: cn("flex h-full min-h-60 flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-10 text-center", className), children: [icon && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&>svg]:size-6", children: icon })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-sm font-semibold", children: title }), description && (_jsx("p", { className: "mx-auto max-w-sm text-xs text-muted-foreground", children: description }))] }), action && _jsx("div", { className: "pt-1", children: action })] }));
+//# sourceMappingURL=smart-page-empty.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-empty.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-empty.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AAejD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACW,EAAE,EAAE,CAAC,CACzB,eACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACX,kHAAkH,EAClH,SAAS,CACV,aAEA,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,qGAAqG,YACjH,IAAI,GACD,CACP,EACD,eAAK,SAAS,EAAC,qBAAqB,aAClC,aAAI,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAM,EACjD,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,gDAAgD,YAC1D,WAAW,GACV,CACL,IACG,EACL,MAAM,IAAI,cAAK,SAAS,EAAC,MAAM,YAAE,MAAM,GAAO,IAC3C,CACP,CAAA"}

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+export interface SmartPageErrorProps {
+    /** Short headline describing the error. @default "Something went wrong" */
+    title?: string;
+    /** Detailed message or guidance. */
+    description?: React.ReactNode;
+    /**
+     * Called when the user clicks the "Try again" button.
+     * When omitted, the retry button is not rendered.
+     */
+    onRetry?: () => void;
+    /** Label for the retry button. @default "Try again" */
+    retryLabel?: string;
+    /**
+     * Visual treatment:
+     * - `"page"` (default) — a full-height dashed panel for a page's primary
+     *   error slot.
+     * - `"overlay"` — an absolutely-positioned, backdrop-blurred card that covers
+     *   its (relatively-positioned) parent. Use over content that failed to
+     *   refresh, e.g. inside a data grid.
+     * @default "page"
+     */
+    variant?: "page" | "overlay";
+    /** Additional class names on the root element. */
+    className?: string;
+}
+/**
+ * Full-page error state.
+ *
+ * Shown when a page fails to load its primary data set — network errors,
+ * server errors, or permission denied. Offers an optional retry callback
+ * and a consistent visual treatment across all page types.
+ *
+ * ## Usage
+ * Pass to SmartPage's `error` prop for automatic placement:
+ *
+ * ```tsx
+ * <SmartPage
+ *   error={isError ? (
+ *     <SmartPageError
+ *       title="Failed to load users"
+ *       description={error.message}
+ *       onRetry={refetch}
+ *     />
+ *   ) : undefined}
+ * >
+ *   …children…
+ * </SmartPage>
+ * ```
+ *
+ * Or render it directly:
+ * ```tsx
+ * <SmartPageContent>
+ *   {isError ? <SmartPageError onRetry={refetch} /> : <DataView />}
+ * </SmartPageContent>
+ * ```
+ */
+export declare const SmartPageError: ({ title, description, onRetry, retryLabel, variant, className, }: SmartPageErrorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-page-error.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-error.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-error.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,mBAAmB;IAClC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,cAAc,GAAI,kEAO5B,mBAAmB,4CAqCrB,CAAA"}

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

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, RefreshCw } from "lucide-react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { Button } from "@iamsaroj/smart-ui/components/button";
+/**
+ * Full-page error state.
+ *
+ * Shown when a page fails to load its primary data set — network errors,
+ * server errors, or permission denied. Offers an optional retry callback
+ * and a consistent visual treatment across all page types.
+ *
+ * ## Usage
+ * Pass to SmartPage's `error` prop for automatic placement:
+ *
+ * ```tsx
+ * <SmartPage
+ *   error={isError ? (
+ *     <SmartPageError
+ *       title="Failed to load users"
+ *       description={error.message}
+ *       onRetry={refetch}
+ *     />
+ *   ) : undefined}
+ * >
+ *   …children…
+ * </SmartPage>
+ * ```
+ *
+ * Or render it directly:
+ * ```tsx
+ * <SmartPageContent>
+ *   {isError ? <SmartPageError onRetry={refetch} /> : <DataView />}
+ * </SmartPageContent>
+ * ```
+ */
+export const SmartPageError = ({ title = "Something went wrong", description = "An unexpected error occurred while loading this page.", onRetry, retryLabel = "Try again", variant = "page", className, }) => {
+    const overlay = variant === "overlay";
+    return (_jsx("div", { role: "alert", className: cn(overlay
+            ? "absolute inset-0 z-10 flex items-center justify-center bg-background/80 p-6 backdrop-blur-sm"
+            : "flex h-full min-h-60 flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-destructive/30 bg-destructive/5 p-10 text-center", className), children: _jsxs("div", { className: cn(overlay
+                ? "flex max-w-sm flex-col items-center gap-3 rounded-md border border-border bg-card p-6 text-center shadow-sm"
+                : "contents"), children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-destructive/10 text-destructive", children: _jsx(AlertCircle, { className: "size-6" }) }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-sm font-semibold", children: title }), _jsx("p", { className: "mx-auto max-w-sm text-xs text-muted-foreground", children: description })] }), onRetry && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [_jsx(RefreshCw, {}), retryLabel] }))] }) }));
+};
+//# sourceMappingURL=smart-page-error.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-error.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-error.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAA;AA4B7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,KAAK,GAAG,sBAAsB,EAC9B,WAAW,GAAG,uDAAuD,EACrE,OAAO,EACP,UAAU,GAAG,WAAW,EACxB,OAAO,GAAG,MAAM,EAChB,SAAS,GACW,EAAE,EAAE;IACxB,MAAM,OAAO,GAAG,OAAO,KAAK,SAAS,CAAA;IACrC,OAAO,CACL,cACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CACX,OAAO;YACL,CAAC,CAAC,8FAA8F;YAChG,CAAC,CAAC,yJAAyJ,EAC7J,SAAS,CACV,YAED,eACE,SAAS,EAAE,EAAE,CACX,OAAO;gBACL,CAAC,CAAC,6GAA6G;gBAC/G,CAAC,CAAC,UAAU,CACf,aAED,cAAK,SAAS,EAAC,0FAA0F,YACvG,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC9B,EACN,eAAK,SAAS,EAAC,qBAAqB,aAClC,aAAI,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAM,EAClD,YAAG,SAAS,EAAC,gDAAgD,YAC1D,WAAW,GACV,IACA,EACL,OAAO,IAAI,CACV,MAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,OAAO,aAClD,KAAC,SAAS,KAAG,EACZ,UAAU,IACJ,CACV,IACG,GACF,CACP,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+export interface SmartPageFiltersProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional label shown on the leading edge (e.g. "Filters:").
+     */
+    label?: React.ReactNode;
+    /**
+     * Render a bottom border separating the filter bar from content.
+     * @default true
+     */
+    border?: boolean;
+}
+/**
+ * Filter chip / tag bar rendered below the search input.
+ *
+ * Hosts active filter indicators, quick-filter toggles (status, assignee,
+ * date range), and a "Clear all" action. Children are laid out in a wrapping
+ * flex row so that many active filters expand gracefully.
+ *
+ * ## Stickiness
+ * Controlled by `stickyFilters` on {@link SmartPage} (default `true` for
+ * `"grid"` layout). Sits in the same sticky band as header/toolbar/search.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageFilters label="Filters:">
+ *   <Badge variant="secondary" className="gap-1">
+ *     Status: Active <X className="size-3 cursor-pointer" onClick={clearStatus} />
+ *   </Badge>
+ *   <Badge variant="secondary" className="gap-1">
+ *     Role: Admin <X className="size-3 cursor-pointer" onClick={clearRole} />
+ *   </Badge>
+ *   <Button variant="ghost" size="xs" onClick={clearAll}>Clear all</Button>
+ * </SmartPageFilters>
+ * ```
+ */
+export declare const SmartPageFilters: React.ForwardRefExoticComponent<SmartPageFiltersProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=smart-page-filters.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-filters.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,gBAAgB,8FAqB3B,CACD"}

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

@@ -0,0 +1,33 @@
+"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";
+/**
+ * Filter chip / tag bar rendered below the search input.
+ *
+ * Hosts active filter indicators, quick-filter toggles (status, assignee,
+ * date range), and a "Clear all" action. Children are laid out in a wrapping
+ * flex row so that many active filters expand gracefully.
+ *
+ * ## Stickiness
+ * Controlled by `stickyFilters` on {@link SmartPage} (default `true` for
+ * `"grid"` layout). Sits in the same sticky band as header/toolbar/search.
+ *
+ * @example
+ * ```tsx
+ * <SmartPageFilters label="Filters:">
+ *   <Badge variant="secondary" className="gap-1">
+ *     Status: Active <X className="size-3 cursor-pointer" onClick={clearStatus} />
+ *   </Badge>
+ *   <Badge variant="secondary" className="gap-1">
+ *     Role: Admin <X className="size-3 cursor-pointer" onClick={clearRole} />
+ *   </Badge>
+ *   <Button variant="ghost" size="xs" onClick={clearAll}>Clear all</Button>
+ * </SmartPageFilters>
+ * ```
+ */
+export const SmartPageFilters = React.forwardRef(({ label, border = true, className, children, ...props }, ref) => (_jsxs("div", { ref: ref, "data-slot": "page-filters", className: cn("flex shrink-0 flex-wrap items-center gap-2 px-4 py-2", border && "border-b", className), ...props, children: [label && (_jsx("span", { className: "shrink-0 text-xs font-medium text-muted-foreground", children: label })), children] })));
+SmartPageFilters[SMART_PAGE_SLOT] =
+    "filters";
+//# sourceMappingURL=smart-page-filters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-filters.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-filters.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;AAc9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAG9C,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClE,eACE,GAAG,EAAE,GAAG,eACE,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,sDAAsD,EACtD,MAAM,IAAI,UAAU,EACpB,SAAS,CACV,KACG,KAAK,aAER,KAAK,IAAI,CACR,eAAM,SAAS,EAAC,oDAAoD,YACjE,KAAK,GACD,CACR,EACA,QAAQ,IACL,CACP,CAAC,CACD;AAAC,gBAAuD,CAAC,eAAe,CAAC;IACxE,SAAS,CAAA"}

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

@@ -0,0 +1,49 @@
+import * as React from "react";
+export interface SmartPageFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Render a top border separating the footer from the content / status bar.
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Horizontal alignment of footer children.
+     * @default "end"
+     */
+    justify?: "start" | "center" | "end" | "between";
+}
+/**
+ * Footer action bar pinned at the bottom of the page.
+ *
+ * Hosts primary and secondary actions that apply to the page as a whole:
+ * form submit / cancel buttons, wizard navigation controls, bulk-action
+ * buttons, or pagination controls.
+ *
+ * ## Stickiness
+ * Controlled by `stickyFooter` on SmartPage (default `true` for `"grid"` and
+ * `"wizard"` layouts). In `"grid"` scroll mode the footer sits below the scroll
+ * container, making it always visible without `position: sticky`.
+ *
+ * ## Layout
+ * Uses `justify` to align children. Common patterns:
+ * - `"end"` — submit/cancel buttons (default)
+ * - `"between"` — back/next buttons in wizard steps
+ * - `"start"` — status text + trailing actions
+ *
+ * @example Wizard footer
+ * ```tsx
+ * <SmartPageFooter justify="between">
+ *   <Button variant="outline" onClick={prev}>Back</Button>
+ *   <Button onClick={next}>Next</Button>
+ * </SmartPageFooter>
+ * ```
+ *
+ * @example Form footer
+ * ```tsx
+ * <SmartPageFooter>
+ *   <Button variant="ghost" onClick={cancel}>Cancel</Button>
+ *   <Button type="submit" form="settings-form">Save changes</Button>
+ * </SmartPageFooter>
+ * ```
+ */
+export declare const SmartPageFooter: React.ForwardRefExoticComponent<SmartPageFooterProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=smart-page-footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-footer.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAA;CACjD;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,eAAe,0FAiB1B,CACD"}

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

@@ -0,0 +1,49 @@
+"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 JUSTIFY_CLASSES = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+};
+/**
+ * Footer action bar pinned at the bottom of the page.
+ *
+ * Hosts primary and secondary actions that apply to the page as a whole:
+ * form submit / cancel buttons, wizard navigation controls, bulk-action
+ * buttons, or pagination controls.
+ *
+ * ## Stickiness
+ * Controlled by `stickyFooter` on SmartPage (default `true` for `"grid"` and
+ * `"wizard"` layouts). In `"grid"` scroll mode the footer sits below the scroll
+ * container, making it always visible without `position: sticky`.
+ *
+ * ## Layout
+ * Uses `justify` to align children. Common patterns:
+ * - `"end"` — submit/cancel buttons (default)
+ * - `"between"` — back/next buttons in wizard steps
+ * - `"start"` — status text + trailing actions
+ *
+ * @example Wizard footer
+ * ```tsx
+ * <SmartPageFooter justify="between">
+ *   <Button variant="outline" onClick={prev}>Back</Button>
+ *   <Button onClick={next}>Next</Button>
+ * </SmartPageFooter>
+ * ```
+ *
+ * @example Form footer
+ * ```tsx
+ * <SmartPageFooter>
+ *   <Button variant="ghost" onClick={cancel}>Cancel</Button>
+ *   <Button type="submit" form="settings-form">Save changes</Button>
+ * </SmartPageFooter>
+ * ```
+ */
+export const SmartPageFooter = React.forwardRef(({ border = true, justify = "end", className, children, ...props }, ref) => (_jsx("footer", { ref: ref, "data-slot": "page-footer", className: cn("flex shrink-0 items-center gap-2 px-6 py-3", JUSTIFY_CLASSES[justify], border && "border-t", className), ...props, children: children })));
+SmartPageFooter[SMART_PAGE_SLOT] =
+    "footer";
+//# sourceMappingURL=smart-page-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-footer.js","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-footer.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;AAe9C,MAAM,eAAe,GAGjB;IACF,KAAK,EAAE,eAAe;IACtB,MAAM,EAAE,gBAAgB;IACxB,GAAG,EAAE,aAAa;IAClB,OAAO,EAAE,iBAAiB;CAC3B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5E,iBACE,GAAG,EAAE,GAAG,eACE,aAAa,EACvB,SAAS,EAAE,EAAE,CACX,4CAA4C,EAC5C,eAAe,CAAC,OAAO,CAAC,EACxB,MAAM,IAAI,UAAU,EACpB,SAAS,CACV,KACG,KAAK,YAER,QAAQ,GACF,CACV,CAAC,CACD;AAAC,eAAsD,CAAC,eAAe,CAAC;IACvE,QAAQ,CAAA"}

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

@@ -0,0 +1,145 @@
+import * as React from "react";
+export interface SmartPageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /**
+     * Renders a bottom border beneath the header.
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Uses tighter internal padding — useful when the header sits inside a
+     * compact shell that already provides spacing.
+     * @default false
+     */
+    compact?: boolean;
+    /** Breadcrumb trail rendered above the title. */
+    breadcrumb?: SmartPageBreadcrumbItem[];
+    /** Page title. A string is wrapped in {@link SmartPageTitle}; pass a node for custom title rows (e.g. a badge beside it). */
+    title?: React.ReactNode;
+    /** Supporting description rendered below the title (always wrapped in {@link SmartPageDescription}; inline nodes like `<code>` are fine). */
+    description?: React.ReactNode;
+    /** Right-aligned action group, laid out on the same row as the title. */
+    actions?: React.ReactNode;
+}
+/**
+ * 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 declare const SmartPageHeader: React.ForwardRefExoticComponent<SmartPageHeaderProps & React.RefAttributes<HTMLElement>>;
+export interface SmartPageTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Override the heading level. @default "h1" */
+    as?: "h1" | "h2" | "h3";
+}
+/**
+ * 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 declare const SmartPageTitle: React.ForwardRefExoticComponent<SmartPageTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * 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 declare const SmartPageDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * 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 declare const SmartPageActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface SmartPageBreadcrumbItem {
+    /** Display label for this crumb. */
+    label: string;
+    /** When provided, renders as a link. The last item ignores this. */
+    href?: string;
+}
+export interface SmartPageBreadcrumbProps {
+    /** Ordered list of crumbs from root to current page. */
+    items: SmartPageBreadcrumbItem[];
+    className?: string;
+}
+/**
+ * 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 declare const SmartPageBreadcrumb: ({ items, className, }: SmartPageBreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=smart-page-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"smart-page-header.d.ts","sourceRoot":"","sources":["../../../src/smart-components/page/smart-page-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,OAAO,CACR;IACC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAOjB,iDAAiD;IACjD,UAAU,CAAC,EAAE,uBAAuB,EAAE,CAAA;IACtC,6HAA6H;IAC7H,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,yEAAyE;IACzE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,eAAe,0FA2D3B,CACA;AAKD,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACnF,gDAAgD;IAChD,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACxB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,gGAazB,CAAA;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,yHAU/B,CAAA;AAIF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,6GAU3B,CAAA;AAIF,MAAM,WAAW,uBAAuB;IACtC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,wBAAwB;IACvC,wDAAwD;IACxD,KAAK,EAAE,uBAAuB,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,mBAAmB,GAAI,uBAGjC,wBAAwB,mDAyB1B,CAAA"}