@opencxh/ui-kit 3.137.11 → 3.137.12

package/dist/src/content/Page.d.ts

@@ -0,0 +1,85 @@
+import { default as React, ReactNode } from 'react';
+import { ContentLoadingShape } from '../feedback/ContentLoading';
+import { PageHeaderAction } from './PageHeader';
+/**
+ * The `md` gutter matches `PageHeader`'s own horizontal padding, so the table
+ * or form below lines up with the title above it. The top value is small
+ * because the header already supplies most of that gap (`pt-4 pb-2.5`).
+ */
+declare const paddingClasses: {
+    readonly none: "";
+    readonly sm: "px-3 pb-3 pt-1";
+    readonly md: "px-5 pb-5 pt-1.5";
+};
+export interface PageProps {
+    /** Page title, rendered by `PageHeader`. */
+    title: string;
+    /** Short description beside the title. */
+    subtitle?: string;
+    /** Line under the title — a count, a record, a timestamp. */
+    meta?: ReactNode;
+    /** Toolbar actions, right-aligned in the header. */
+    actions?: PageHeaderAction[];
+    /** Renders the back chevron beside the title. */
+    onBack?: () => void;
+    /**
+     * Draws the rule under the header. Defaults to `scroll`, because a header
+     * that stays put while the body scrolls needs an edge — without it the first
+     * row slides up against the title with nothing between them. A page that
+     * scrolls as a whole does not, so the rule would just be a stray line.
+     */
+    surface?: boolean;
+    /** Full-width row at the bottom of the header — a filter strip, a tab bar. */
+    headerContent?: ReactNode;
+    /** Swaps the body for a skeleton. */
+    loading?: boolean;
+    /**
+     * What the body is about to render, so the placeholder has the right shape.
+     * Most app pages are a table; a detail page is usually a form.
+     */
+    loadingShape?: ContentLoadingShape;
+    /**
+     * Rendered instead of `children` when there is nothing to show — pass an
+     * `EmptyState`. Ignored while `loading`, so an empty list does not flash its
+     * "nothing here" message during the first fetch.
+     */
+    empty?: ReactNode;
+    padding?: keyof typeof paddingClasses;
+    /**
+     * Whether the page owns its scroll. `true` (default) pins the header and
+     * scrolls the body — the right behaviour for a table you page through.
+     * Set `false` when the page is rendered inside something that already
+     * scrolls and should flow with it.
+     */
+    scroll?: boolean;
+    className?: string;
+    contentClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * One app page: the header, the content gutter, the scroll container, and the
+ * loading and empty states.
+ *
+ * These four were re-invented per page — 24 times in `eylo-voip` alone, each
+ * with its own gutter — which is how `p-4` there and `px-5` everywhere else
+ * ended up side by side in the same product. Reach for this instead of pairing
+ * a `PageHeader` with a padded `div`.
+ *
+ * Settings panels are the exception: they live inside the settings frame, which
+ * draws its own title and scrolls itself, so they use `SettingsPage`.
+ *
+ * @example
+ * ```tsx
+ * <Page
+ *   title={t("interactions")}
+ *   subtitle={t("interactions_description")}
+ *   actions={[{ id: "refresh", label: t("refresh"), onClick: reload }]}
+ *   loading={loading}
+ *   empty={!interactions.length && <EmptyState title={t("interaction_no_records_found")} />}
+ * >
+ *   <InteractionsTable interactions={interactions} />
+ * </Page>
+ * ```
+ */
+export declare const Page: React.FC<PageProps>;
+export {};

package/dist/src/index.d.ts

@@ -44,6 +44,7 @@ export { Image, type ImageProps } from './content/Image';
 export { List, ListBulkAction, type ListGroup, type ListProps } from './content/List';
 export { MessageBubble, type MessageBubbleProps } from './content/MessageBubble';
 export { KpiCard, type KpiCardProps } from './content/KpiCard';
+export { Page, type PageProps } from './content/Page';
 export { PageHeader, type PageHeaderAction, type PageHeaderProps } from './content/PageHeader';
 export { PageToolbar, PageToolbarActions, type PageToolbarActionsProps, type PageToolbarProps } from './content/PageToolbar';
 export { RichText, type RichTextProps } from './content/RichText';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "3.137.11",
+  "version": "3.137.12",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {