@papernote/ui 1.8.0 → 1.8.2

package/dist/index.js

@@ -56700,6 +56700,21 @@ const AppLayout = ({ children, toolbarSections = [], className = '', showToolbar
  * </PageLayout>
  * ```
  *
+ * @example With actions
+ * ```tsx
+ * <PageLayout
+ *   title="Products"
+ *   description="Manage your product catalog"
+ *   headerContent={<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Products' }]} />}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport, variant: 'ghost' },
+ *     { id: 'add', label: 'Add Product', icon: <Plus />, onClick: handleAdd, variant: 'primary' },
+ *   ]}
+ * >
+ *   <DataTable data={products} columns={columns} />
+ * </PageLayout>
+ * ```
+ *
  * @example With Layout for sidebar and gutter
  * ```tsx
  * <Layout sidebar={<Sidebar items={items} />}>
@@ -56709,7 +56724,7 @@ const AppLayout = ({ children, toolbarSections = [], className = '', showToolbar
  * </Layout>
  * ```
  */
-function PageLayout({ title, description, children, className = '', headerContent, maxWidth = '7xl', fixed = false }) {
+function PageLayout({ title, description, children, className = '', headerContent, maxWidth = '7xl', fixed = false, actions, rightContent, }) {
     // Responsive padding classes - fixed left/top, responsive right/bottom
     const paddingClasses = fixed
         ? 'p-6 pb-20'
@@ -56721,7 +56736,7 @@ function PageLayout({ title, description, children, className = '', headerConten
         '7xl': 'max-w-7xl',
         'full': 'max-w-full',
     };
-    return (jsxRuntime.jsxs(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: [headerContent, jsxRuntime.jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [jsxRuntime.jsxs("div", { className: "mb-8", children: [jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsxRuntime.jsx("p", { className: "text-ink-600", children: description }))] }), children] })] }));
+    return (jsxRuntime.jsx(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: jsxRuntime.jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [headerContent && jsxRuntime.jsx("div", { className: "mb-4", children: headerContent }), jsxRuntime.jsx("div", { className: "mb-8", children: jsxRuntime.jsxs(Stack, { direction: "horizontal", justify: "between", align: "start", gap: "md", children: [jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx(Text, { as: "h1", size: "2xl", weight: "bold", className: "text-3xl mb-2", children: title }), description && (jsxRuntime.jsx(Text, { color: "muted", children: description }))] }), (actions || rightContent) && (jsxRuntime.jsxs(Stack, { direction: "horizontal", gap: "sm", className: "flex-shrink-0", children: [rightContent, actions?.map((action) => (jsxRuntime.jsx(Button, { variant: action.variant || 'secondary', icon: action.icon, onClick: action.onClick, disabled: action.disabled, loading: action.loading, className: action.hideOnMobile ? 'hidden sm:inline-flex' : '', children: action.label }, action.id)))] }))] }) }), children] }) }));
 }
 
 /**