@trycompai/design-system 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",
@@ -65,6 +65,12 @@
     "shadcn",
     "ui"
   ],
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "format": "prettier --write .",
+    "lint": "prettier --check .",
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
     "@carbon/icons-react": "^11.72.0",
@@ -91,6 +97,7 @@
     "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/node": "^22.18.0",
     "@types/react": "^19.2.7",
@@ -99,13 +106,6 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.8",
-    "typescript": "^5.9.3",
-    "@repo/typescript-config": "0.0.0"
-  },
-  "scripts": {
-    "clean": "rm -rf .turbo node_modules",
-    "format": "prettier --write .",
-    "lint": "prettier --check .",
-    "typecheck": "tsc --noEmit"
+    "typescript": "^5.9.3"
   }
-}
+}

package/src/components/atoms/textarea.tsx

@@ -10,7 +10,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       data-size={size}
-      className="border-input dark:bg-input/30 focus-visible:border-primary focus-visible:ring-primary/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-sm border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=sm]:w-xs data-[size=default]:w-md data-[size=lg]:w-xl data-[size=full]:w-full"
+      className="border-input dark:bg-input/30 focus-visible:border-primary focus-visible:ring-primary/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-sm border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 max-w-full outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=sm]:w-xs data-[size=default]:w-md data-[size=lg]:w-xl data-[size=full]:w-full"
       {...props}
     />
   );

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}>