@trycompai/design-system 1.0.9 → 1.0.11

package/package.json

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

package/src/components/atoms/button.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { Spinner } from './spinner';
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent text-sm font-medium leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-out active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent text-[13px] font-medium leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-out active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
   {
     variants: {
       variant: {
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
         ghost:
-          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+          'hover:bg-accent hover:text-foreground dark:hover:bg-accent/50 aria-expanded:bg-accent aria-expanded:text-foreground',
         destructive:
           'bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 focus-visible:border-destructive/40 dark:bg-destructive/20 dark:hover:bg-destructive/30',
         link: 'text-primary underline-offset-4 hover:underline',
@@ -27,21 +27,21 @@ const buttonVariants = cva(
       },
       size: {
         default:
-          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        xs: "h-6 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
-        icon: 'size-8',
+          'h-7 gap-1 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+        xs: "h-5 gap-0.5 px-1.5 text-[11px] has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-6 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-8 gap-1 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-7',
         'icon-xs':
-          "size-6 [&_svg:not([class*='size-'])]:size-3",
+          "size-5 [&_svg:not([class*='size-'])]:size-3",
         'icon-sm':
-          'size-7',
-        'icon-lg': 'size-9',
+          'size-6',
+        'icon-lg': 'size-8',
         // Round icon buttons - for avatar triggers and circular icons
-        'icon-round': 'size-8 rounded-full',
-        'icon-round-xs': "size-6 rounded-full [&_svg:not([class*='size-'])]:size-3",
-        'icon-round-sm': 'size-7 rounded-full',
-        'icon-round-lg': 'size-9 rounded-full',
+        'icon-round': 'size-7 rounded-full',
+        'icon-round-xs': "size-5 rounded-full [&_svg:not([class*='size-'])]:size-3",
+        'icon-round-sm': 'size-6 rounded-full',
+        'icon-round-lg': 'size-8 rounded-full',
         // Calendar day button - special size for calendar day cells
         'calendar-day': [
           // Base sizing

package/src/components/molecules/ai-chat.tsx

@@ -63,14 +63,24 @@ function AIChat({
 
   return (
     <>
-      {/* Chat Panel - persistent side panel, no backdrop */}
+      {/* Backdrop overlay */}
+      <div
+        data-slot="ai-chat-backdrop"
+        className={`fixed inset-0 z-20 bg-black/5 backdrop-blur-[2px] transition-opacity duration-300 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={handleClose}
+      />
+      {/* Chat Panel - floating module */}
       <div
         data-slot="ai-chat-panel"
-        className={`fixed top-14 right-0 bottom-0 z-30 w-full max-w-md flex flex-col bg-background border-l border-border transition-transform duration-300 ease-out ${
-          isOpen ? 'translate-x-0' : 'translate-x-full'
+        className={`fixed top-16 right-3 bottom-3 z-30 w-full max-w-md flex flex-col bg-background/95 backdrop-blur-xl border border-border/50 rounded-2xl overflow-hidden transition-all duration-300 ease-out ring-1 ring-black/[0.03] dark:ring-white/[0.05] ${
+          isOpen ? 'translate-x-0 opacity-100 scale-100' : 'translate-x-2 opacity-0 scale-[0.98] pointer-events-none'
         }`}
         style={{
-          boxShadow: isOpen ? '-4px 0 24px -4px rgb(0 0 0 / 0.08)' : 'none',
+          boxShadow: isOpen
+            ? '0 24px 48px -12px rgb(0 0 0 / 0.15), 0 12px 24px -8px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.03)'
+            : 'none',
         }}
       >
         {children || <AIChatDefaultContent onClose={handleClose} />}
@@ -120,7 +130,7 @@ function AIChatTrigger({ onClick, isOpen, shortcut = 'J' }: AIChatTriggerProps)
 // Default content when no children provided
 function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
   const [message, setMessage] = React.useState('');
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
 
   // Focus input when panel opens
   React.useEffect(() => {
@@ -128,43 +138,62 @@ function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
     return () => clearTimeout(timer);
   }, []);
 
+  // Auto-resize textarea
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = `${Math.min(e.target.scrollHeight, 120)}px`;
+  };
+
   return (
     <>
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+      <div className="flex items-center justify-between px-5 py-4 border-b border-border/50 shrink-0 bg-muted/30">
         <div className="flex items-center gap-3">
-          <span className="flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <span className="flex size-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 text-primary ring-1 ring-primary/10">
             <MagicWand className="size-5" />
           </span>
           <div>
             <div className="font-semibold text-sm">AI Assistant</div>
-            <div className="text-xs text-muted-foreground">Ask me anything about your compliance</div>
+            <div className="text-xs text-muted-foreground">Powered by Claude</div>
           </div>
         </div>
         <button
           type="button"
           onClick={onClose}
-          className="size-8 flex items-center justify-center rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+          className="size-8 flex items-center justify-center rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
         >
           <Close className="size-4" />
         </button>
       </div>
 
       {/* Messages Area */}
-      <div className="flex-1 overflow-auto p-4">
+      <div className="flex-1 overflow-auto p-5">
         <div className="flex flex-col gap-4">
           {/* AI Welcome Message */}
           <div className="flex gap-3">
-            <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-primary/15 to-primary/5 text-primary">
               <MagicWand className="size-4" />
             </span>
-            <div className="flex-1 rounded-2xl rounded-tl-md bg-muted px-4 py-3 text-sm">
-              <p className="mb-2">Hi! I can help you with:</p>
-              <ul className="space-y-1 text-muted-foreground">
-                <li>Understanding compliance requirements</li>
-                <li>Reviewing and creating policies</li>
-                <li>Analyzing evidence and controls</li>
-                <li>Answering questions about SOC 2, ISO 27001, and more</li>
+            <div className="flex-1 rounded-2xl rounded-tl-lg bg-muted/50 ring-1 ring-border/50 px-4 py-3 text-sm">
+              <p className="mb-3 font-medium">Hi! I can help you with:</p>
+              <ul className="space-y-2 text-muted-foreground">
+                <li className="flex items-start gap-2">
+                  <span className="size-1.5 rounded-full bg-primary/60 mt-1.5 shrink-0" />
+                  <span>Understanding compliance requirements</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="size-1.5 rounded-full bg-primary/60 mt-1.5 shrink-0" />
+                  <span>Reviewing and creating policies</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="size-1.5 rounded-full bg-primary/60 mt-1.5 shrink-0" />
+                  <span>Analyzing evidence and controls</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="size-1.5 rounded-full bg-primary/60 mt-1.5 shrink-0" />
+                  <span>Answering questions about SOC 2, ISO 27001, and more</span>
+                </li>
               </ul>
             </div>
           </div>
@@ -172,31 +201,35 @@ function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
       </div>
 
       {/* Input Area */}
-      <div className="p-4 border-t border-border shrink-0">
-        <div className="flex items-center gap-2 rounded-xl bg-muted px-4 py-2.5">
-          <input
+      <div className="p-4 border-t border-border/50 shrink-0 bg-muted/20">
+        <div className="flex items-end gap-2 rounded-xl bg-background ring-1 ring-border/50 px-4 py-3 focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/30 transition-all">
+          <textarea
             ref={inputRef}
-            type="text"
             value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            placeholder="Ask a question..."
-            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            onChange={handleTextareaChange}
+            placeholder="Ask anything..."
+            rows={1}
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground resize-none min-h-[24px] max-h-[120px]"
             onKeyDown={(e) => {
-              if (e.key === 'Enter' && message.trim()) {
+              if (e.key === 'Enter' && !e.shiftKey && message.trim()) {
+                e.preventDefault();
                 // Handle send
                 setMessage('');
+                if (inputRef.current) {
+                  inputRef.current.style.height = 'auto';
+                }
               }
             }}
           />
           <button
             type="button"
             disabled={!message.trim()}
-            className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-primary shadow-sm"
           >
             <Send className="size-4" />
           </button>
         </div>
-        <div className="mt-3 flex items-center justify-center gap-2 text-xs text-muted-foreground">
+        <div className="mt-3 flex items-center justify-center gap-2 text-xs text-muted-foreground/70">
           <Keyboard className="size-3" />
           <span>Press <Kbd>Esc</Kbd> to close</span>
         </div>

package/src/components/molecules/card.tsx

@@ -156,7 +156,7 @@ function CardFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>
   return (
     <div
       data-slot="card-footer"
-      className="bg-muted rounded-b-md border-t p-4 group-data-[size=sm]/card:p-3 flex items-center"
+      className="bg-muted rounded-b-md border-t p-4 group-data-[size=sm]/card:p-3 flex items-center justify-between gap-4"
       {...props}
     />
   );

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

@@ -1,21 +1,25 @@
+import { ArrowLeft } from '@carbon/icons-react';
 import * as React from 'react';
 
 import { Heading } from '../atoms/heading';
-import { Text } from '../atoms/text';
-import { Stack } from '../atoms/stack';
+import { Breadcrumb, type BreadcrumbItemData } from './breadcrumb';
 
 interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'className'> {
   title: string;
-  description?: string;
-  /** Additional descriptive text below description */
-  meta?: string;
   actions?: React.ReactNode;
+  /** Breadcrumb items to display above the title */
+  breadcrumbs?: BreadcrumbItemData[];
+  /** Back button href - displays a back arrow link above the title */
+  backHref?: string;
+  /** Back button label (default: "Back") */
+  backLabel?: string;
+  /** Tabs to display below the header (typically TabsList) */
+  tabs?: React.ReactNode;
 }
 
-function PageHeader({ title, description, meta, actions, children, ...props }: PageHeaderProps) {
+function PageHeader({ title, actions, breadcrumbs, backHref, backLabel = 'Back', tabs, children, ...props }: PageHeaderProps) {
   const childArray = React.Children.toArray(children);
   const extractedActionChildren: React.ReactNode[] = [];
-  const nonActionChildren: React.ReactNode[] = [];
 
   childArray.forEach((child) => {
     if (
@@ -25,9 +29,7 @@ function PageHeader({ title, description, meta, actions, children, ...props }: P
           (child.type as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot === 'actions'))
     ) {
       extractedActionChildren.push((child.props as { children?: React.ReactNode }).children);
-      return;
     }
-    nonActionChildren.push(child);
   });
 
   const resolvedActions =
@@ -35,46 +37,55 @@ function PageHeader({ title, description, meta, actions, children, ...props }: P
     (extractedActionChildren.length > 0 ? extractedActionChildren : undefined);
 
   return (
-    <div data-slot="page-header" className="flex items-start justify-between gap-4" {...props}>
-      <Stack gap="1">
-        <Heading level="1">{title}</Heading>
-        {description && (
-          <Text size="sm" variant="muted">
-            {description}
-          </Text>
-        )}
-        {meta && (
-          <Text size="xs" variant="muted">
-            {meta}
-          </Text>
+    <div data-slot="page-header" className="flex flex-col gap-1" {...props}>
+      {/* Navigation: breadcrumbs or back button */}
+      {breadcrumbs && breadcrumbs.length > 0 ? (
+        <div className="overflow-hidden">
+          <Breadcrumb items={breadcrumbs} separator="chevron" />
+        </div>
+      ) : backHref ? (
+        <a
+          href={backHref}
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground hover:underline underline-offset-2 transition-colors w-fit"
+        >
+          <ArrowLeft className="size-4" />
+          <span>{backLabel}</span>
+        </a>
+      ) : null}
+
+      {/* Main header row */}
+      <div className="flex items-center justify-between gap-4 min-w-0">
+        <div className="min-w-0 flex-1 truncate">
+          <Heading level="1">{title}</Heading>
+        </div>
+        {resolvedActions && (
+          <div className="shrink-0">
+            {React.isValidElement(resolvedActions) && resolvedActions.type === PageHeaderActions ? (
+              resolvedActions
+            ) : (
+              <PageHeaderActions>{resolvedActions}</PageHeaderActions>
+            )}
+          </div>
         )}
-        {nonActionChildren}
-      </Stack>
-      {resolvedActions &&
-        (React.isValidElement(resolvedActions) && resolvedActions.type === PageHeaderActions ? (
-          resolvedActions
-        ) : (
-          <PageHeaderActions>{resolvedActions}</PageHeaderActions>
-        ))}
+      </div>
+
+      {/* Tabs section */}
+      {tabs && (
+        <div className="mt-2 -mb-px">
+          {tabs}
+        </div>
+      )}
     </div>
   );
 }
 
-function PageHeaderTitle({ ...props }: Omit<React.ComponentProps<typeof Heading>, 'className'>) {
-  return <Heading data-slot="page-header-title" level="1" {...props} />;
-}
-
-function PageHeaderDescription({ ...props }: Omit<React.ComponentProps<typeof Text>, 'className'>) {
-  return <Text data-slot="page-header-description" size="sm" variant="muted" {...props} />;
-}
-
 function PageHeaderActions({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
-    <div data-slot="page-header-actions" className="flex shrink-0 items-center gap-3" {...props} />
+    <div data-slot="page-header-actions" className="flex shrink-0 items-center gap-2" {...props} />
   );
 }
 
 // Mark compound slots so PageHeader can detect them even if module instances differ.
 (PageHeaderActions as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot = 'actions';
 
-export { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderTitle };
+export { PageHeader, PageHeaderActions };

package/src/components/molecules/table.tsx

@@ -63,7 +63,7 @@ function TableCell({ ...props }: Omit<React.ComponentProps<'td'>, 'className'>)
   return (
     <td
       data-slot="table-cell"
-      className="px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [[data-variant=bordered]_&]:border-r [[data-variant=bordered]_&]:last:border-r-0"
+      className="px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [[data-variant=bordered]_&]:border-r [[data-variant=bordered]_&]:last:border-r-0 [&_[data-slot=button]]:relative [&_[data-slot=button]]:z-10"
       {...props}
     />
   );

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

@@ -12,14 +12,14 @@ const pageLayoutVariants = cva('min-h-full bg-background text-foreground', {
     },
     padding: {
       none: '',
-      sm: 'px-4 py-6',
-      default: 'px-4 py-10 sm:px-6 lg:px-8',
-      lg: 'px-6 py-12 sm:px-8 lg:px-12',
+      sm: 'px-1.5 sm:px-2',
+      default: 'px-1.5 sm:px-2 md:px-3 lg:px-4',
+      lg: 'px-2 sm:px-3 md:px-4 lg:px-6',
     },
   },
   defaultVariants: {
     variant: 'default',
-    padding: 'default',
+    padding: 'none',
   },
 });