@trycompai/design-system 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.10",
+  "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/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/organisms/page-layout.tsx

@@ -12,14 +12,14 @@ const pageLayoutVariants = cva('min-h-full bg-background text-foreground', {
     },
     padding: {
       none: '',
-      sm: 'px-4',
-      default: 'px-4 sm:px-6 lg:px-8',
-      lg: 'px-6 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',
   },
 });