@trycompai/design-system 1.0.11 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/molecules/page-header.tsx

@@ -20,6 +20,7 @@ interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'className'>
 function PageHeader({ title, actions, breadcrumbs, backHref, backLabel = 'Back', tabs, children, ...props }: PageHeaderProps) {
   const childArray = React.Children.toArray(children);
   const extractedActionChildren: React.ReactNode[] = [];
+  const extractedDescriptionChildren: React.ReactNode[] = [];
 
   childArray.forEach((child) => {
     if (
@@ -30,6 +31,14 @@ function PageHeader({ title, actions, breadcrumbs, backHref, backLabel = 'Back',
     ) {
       extractedActionChildren.push((child.props as { children?: React.ReactNode }).children);
     }
+    if (
+      React.isValidElement(child) &&
+      (child.type === PageHeaderDescription ||
+        (typeof child.type === 'function' &&
+          (child.type as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot === 'description'))
+    ) {
+      extractedDescriptionChildren.push(child);
+    }
   });
 
   const resolvedActions =
@@ -69,6 +78,9 @@ function PageHeader({ title, actions, breadcrumbs, backHref, backLabel = 'Back',
         )}
       </div>
 
+      {/* Description section */}
+      {extractedDescriptionChildren.length > 0 && extractedDescriptionChildren}
+
       {/* Tabs section */}
       {tabs && (
         <div className="mt-2 -mb-px">
@@ -85,7 +97,14 @@ function PageHeaderActions({ ...props }: Omit<React.ComponentProps<'div'>, 'clas
   );
 }
 
+function PageHeaderDescription({ ...props }: Omit<React.ComponentProps<'p'>, 'className'>) {
+  return (
+    <p data-slot="page-header-description" className="text-sm text-muted-foreground" {...props} />
+  );
+}
+
 // Mark compound slots so PageHeader can detect them even if module instances differ.
 (PageHeaderActions as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot = 'actions';
+(PageHeaderDescription as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot = 'description';
 
-export { PageHeader, PageHeaderActions };
+export { PageHeader, PageHeaderActions, PageHeaderDescription };

package/src/components/organisms/page-layout.tsx

@@ -34,7 +34,7 @@ const containerVariants = cva('mx-auto w-full', {
     },
   },
   defaultVariants: {
-    maxWidth: 'xl',
+    maxWidth: '2xl',
   },
 });
 
@@ -60,7 +60,7 @@ function PageLayout({
   ...props
 }: PageLayoutProps) {
   // For center variant, default to smaller max-width (sm) for auth-style pages
-  const resolvedMaxWidth = maxWidth ?? (variant === 'center' ? 'sm' : 'lg');
+  const resolvedMaxWidth = maxWidth ?? (variant === 'center' ? 'sm' : 'xl');
 
   const content = (
     <Stack gap={gap}>