@trycompai/design-system 1.0.19 → 1.0.21

package/package.json

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

package/src/components/molecules/tabs.tsx

@@ -18,13 +18,13 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none data-[variant=underline]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none data-[variant=underline]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col overflow-x-auto scrollbar-none',
   {
     variants: {
       variant: {
         default: 'bg-muted',
         line: 'gap-1 bg-transparent',
-        underline: 'p-0 pb-px bg-transparent w-full justify-start items-stretch shadow-[inset_0_-1px_0_0_var(--color-border)]',
+        underline: 'p-0 pb-px bg-transparent w-full max-w-full justify-start items-stretch shadow-[inset_0_-1px_0_0_var(--color-border)]',
       },
     },
     defaultVariants: {

package/src/components/organisms/alert-dialog.tsx

@@ -47,7 +47,7 @@ function AlertDialogHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'clas
   return (
     <div
       data-slot="alert-dialog-header"
-      className="grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]"
+      className="grid grid-rows-[auto_1fr] place-items-start gap-1.5 text-left has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]"
       {...props}
     />
   );

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { cn } from '../../../lib/utils';
 import { Stack } from '../atoms/stack';
 import { Skeleton } from '../atoms/skeleton';
+import { Heading } from '../atoms/heading';
 
 const pageLayoutVariants = cva('min-h-full bg-background text-foreground', {
   variants: {
@@ -51,16 +52,26 @@ interface PageLayoutProps
   gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '0' | '1' | '2' | '3' | '4' | '6' | '8';
   /** Whether the page is loading. Shows skeleton placeholder when true. */
   loading?: boolean;
+  /** @deprecated Use header prop instead. Page title to display during loading state. */
+  loadingTitle?: string;
+  /** Header element (e.g., PageHeader) that renders regardless of loading state. */
+  header?: React.ReactNode;
 }
 
-function PageLayoutSkeleton() {
+function PageLayoutSkeleton({ title, includeHeader = true }: { title?: string; includeHeader?: boolean }) {
   return (
     <Stack gap="lg">
-      {/* Header skeleton */}
-      <div className="space-y-2">
-        <Skeleton style={{ width: '30%', height: 24 }} />
-        <Skeleton style={{ width: '50%', height: 16 }} />
-      </div>
+      {/* Header skeleton - only shown if no header prop is provided */}
+      {includeHeader && (
+        <div className="space-y-2">
+          {title ? (
+            <Heading level="1">{title}</Heading>
+          ) : (
+            <Skeleton style={{ width: '30%', height: 24 }} />
+          )}
+          <Skeleton style={{ width: '50%', height: 16 }} />
+        </div>
+      )}
       {/* Content skeleton */}
       <div className="space-y-4">
         <Skeleton style={{ width: '100%', height: 200 }} />
@@ -81,6 +92,8 @@ function PageLayout({
   maxWidth,
   gap = 'lg',
   loading = false,
+  loadingTitle,
+  header,
   children,
   ...props
 }: PageLayoutProps) {
@@ -88,9 +101,13 @@ function PageLayout({
   const resolvedMaxWidth = maxWidth ?? (variant === 'center' ? 'sm' : 'xl');
 
   const content = loading ? (
-    <PageLayoutSkeleton />
+    <Stack gap={gap}>
+      {header}
+      <PageLayoutSkeleton title={loadingTitle} includeHeader={!header} />
+    </Stack>
   ) : (
     <Stack gap={gap}>
+      {header}
       {children}
     </Stack>
   );

package/src/styles/globals.css

@@ -254,6 +254,15 @@
   .font-bold {
     font-weight: 700;
   }
+
+  /* Hide scrollbar while keeping scroll functionality */
+  .scrollbar-none {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 /* View Transitions API for smooth page transitions */