@trycompai/design-system 1.0.0 → 1.0.2

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

@@ -0,0 +1,217 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Close, MagicWand, Send } from '@carbon/icons-react';
+import * as React from 'react';
+
+const aiChatTriggerVariants = cva(
+  'fixed bottom-6 right-6 z-50 flex items-center justify-center rounded-full transition-all duration-200 cursor-pointer',
+  {
+    variants: {
+      size: {
+        default: 'size-14',
+        sm: 'size-12',
+        lg: 'size-16',
+      },
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:scale-95',
+        secondary: 'bg-foreground text-background hover:bg-foreground/90 active:scale-95',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+  },
+);
+
+const aiChatPanelVariants = cva(
+  'fixed bottom-24 right-6 z-50 flex flex-col bg-background border border-border/40 rounded-2xl overflow-hidden transition-all duration-200 origin-bottom-right',
+  {
+    variants: {
+      size: {
+        default: 'w-96 h-[500px]',
+        sm: 'w-80 h-[400px]',
+        lg: 'w-[450px] h-[600px]',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+interface AIChatProps extends VariantProps<typeof aiChatTriggerVariants> {
+  /** Whether the chat panel is open */
+  open?: boolean;
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Custom trigger icon */
+  triggerIcon?: React.ReactNode;
+  /** Panel size */
+  panelSize?: 'sm' | 'default' | 'lg';
+  /** Content to render inside the chat panel */
+  children?: React.ReactNode;
+}
+
+function AIChat({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  triggerIcon,
+  size = 'default',
+  variant = 'default',
+  panelSize = 'default',
+  children,
+}: AIChatProps) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isOpen = openProp ?? internalOpen;
+
+  const handleToggle = () => {
+    const newValue = !isOpen;
+    if (openProp === undefined) {
+      setInternalOpen(newValue);
+    }
+    onOpenChange?.(newValue);
+  };
+
+  return (
+    <>
+      {/* Chat Panel */}
+      <div
+        data-slot="ai-chat-panel"
+        className={`${aiChatPanelVariants({ size: panelSize })} ${
+          isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0 pointer-events-none'
+        }`}
+        style={{
+          boxShadow: '0 8px 32px -4px rgb(0 0 0 / 0.12), 0 4px 16px -2px rgb(0 0 0 / 0.08)',
+        }}
+      >
+        {children || <AIChatDefaultContent onClose={handleToggle} />}
+      </div>
+
+      {/* Floating Trigger Button */}
+      <button
+        type="button"
+        data-slot="ai-chat-trigger"
+        onClick={handleToggle}
+        className={aiChatTriggerVariants({ size, variant })}
+        style={{
+          boxShadow: '0 4px 16px -2px rgb(0 0 0 / 0.15), 0 2px 8px -2px rgb(0 0 0 / 0.1)',
+        }}
+        aria-label={isOpen ? 'Close chat' : 'Open chat'}
+      >
+        <span
+          className={`absolute transition-all duration-200 ${
+            isOpen ? 'scale-0 opacity-0 rotate-90' : 'scale-100 opacity-100 rotate-0'
+          }`}
+        >
+          {triggerIcon || <MagicWand className="size-6" />}
+        </span>
+        <span
+          className={`absolute transition-all duration-200 ${
+            isOpen ? 'scale-100 opacity-100 rotate-0' : 'scale-0 opacity-0 -rotate-90'
+          }`}
+        >
+          <Close className="size-6" />
+        </span>
+      </button>
+    </>
+  );
+}
+
+// Default content when no children provided
+function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
+  return (
+    <>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border/40">
+        <div className="flex items-center gap-2">
+          <span className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <MagicWand className="size-4" />
+          </span>
+          <div>
+            <div className="font-semibold text-sm">AI Assistant</div>
+            <div className="text-xs text-muted-foreground">Ask me anything</div>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="size-8 flex items-center justify-center rounded-md hover:bg-muted/50 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 flex-col gap-4">
+          {/* AI Welcome Message */}
+          <div className="flex gap-3">
+            <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <MagicWand className="size-3.5" />
+            </span>
+            <div className="flex-1 rounded-2xl rounded-tl-sm bg-muted/50 dark:bg-muted px-3 py-2 text-sm">
+              Hi! I'm your AI assistant. How can I help you today?
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Input Area */}
+      <div className="p-3 border-t border-border/40">
+        <div className="flex items-center gap-2 rounded-xl bg-muted/50 dark:bg-muted px-3 py-2">
+          <input
+            type="text"
+            placeholder="Ask a question..."
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          />
+          <button
+            type="button"
+            className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            <Send className="size-4" />
+          </button>
+        </div>
+        <div className="mt-2 text-center text-xs text-muted-foreground">
+          Powered by AI
+        </div>
+      </div>
+    </>
+  );
+}
+
+// Compound components for custom content
+function AIChatHeader({ children, ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="ai-chat-header"
+      className="flex items-center justify-between px-4 py-3 border-b border-border/40"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function AIChatBody({ children, ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div data-slot="ai-chat-body" className="flex-1 overflow-auto p-4" {...props}>
+      {children}
+    </div>
+  );
+}
+
+function AIChatFooter({ children, ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div data-slot="ai-chat-footer" className="p-3 border-t border-border/40" {...props}>
+      {children}
+    </div>
+  );
+}
+
+export { AIChat, AIChatHeader, AIChatBody, AIChatFooter, aiChatTriggerVariants, aiChatPanelVariants };
+export type { AIChatProps };

package/src/components/{ui → molecules}/alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
+import { CheckmarkFilled, Information, Misuse, Warning } from '@carbon/icons-react';
 import * as React from 'react';
 
 const alertVariants = cva(
@@ -25,10 +25,10 @@ const alertVariants = cva(
 
 const variantIcons = {
   default: null,
-  info: Info,
-  success: CheckCircle2,
-  warning: AlertTriangle,
-  destructive: AlertCircle,
+  info: Information,
+  success: CheckmarkFilled,
+  warning: Warning,
+  destructive: Misuse,
 } as const;
 
 type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;

package/src/components/{ui → molecules}/breadcrumb.tsx

@@ -2,13 +2,13 @@ import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import * as React from 'react';
 
-import { ArrowRightIcon, ChevronRightIcon, MoreHorizontalIcon, SlashIcon } from 'lucide-react';
+import { ArrowRight, ChevronRight, OverflowMenuHorizontal } from '@carbon/icons-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from './dropdown-menu';
+} from '../organisms/dropdown-menu';
 
 interface BreadcrumbItemData {
   /** The text label for the breadcrumb item */
@@ -26,9 +26,10 @@ interface BreadcrumbItemData {
 type BreadcrumbSeparatorType = 'chevron' | 'slash' | 'arrow';
 
 const separatorIcons: Record<BreadcrumbSeparatorType, React.ReactNode> = {
-  chevron: <ChevronRightIcon />,
-  slash: <SlashIcon />,
-  arrow: <ArrowRightIcon />,
+  chevron: <ChevronRight />,
+  // Carbon doesn't ship a slash glyph icon; render it as text.
+  slash: <span className="text-xs leading-none">/</span>,
+  arrow: <ArrowRight />,
 };
 
 interface BreadcrumbProps extends Omit<React.ComponentProps<'nav'>, 'children' | 'className'> {
@@ -201,7 +202,7 @@ function BreadcrumbSeparator({
       className="[&>svg]:size-3.5"
       {...props}
     >
-      {children ?? <ChevronRightIcon />}
+      {children ?? <ChevronRight />}
     </li>
   );
 }
@@ -215,7 +216,7 @@ function BreadcrumbEllipsis({ ...props }: Omit<React.ComponentProps<'span'>, 'cl
       className="size-5 [&>svg]:size-4 flex items-center justify-center"
       {...props}
     >
-      <MoreHorizontalIcon />
+      <OverflowMenuHorizontal />
       <span className="sr-only">More</span>
     </span>
   );
@@ -229,7 +230,7 @@ function BreadcrumbEllipsisMenu({ collapsedItems }: { collapsedItems?: Breadcrum
   return (
     <DropdownMenu>
       <DropdownMenuTrigger variant="ellipsis" aria-label="Show hidden breadcrumb items">
-        <MoreHorizontalIcon />
+        <OverflowMenuHorizontal />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         {collapsedItems.map((item, index) => (

package/src/components/{ui → molecules}/card.tsx

@@ -2,7 +2,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 const cardVariants = cva(
-  'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+  'bg-card text-card-foreground border border-border/40 shadow-[0_1px_3px_0_rgb(0_0_0/0.06)] overflow-hidden rounded-xl py-4 text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
   {
     variants: {
       width: {
@@ -25,14 +25,18 @@ const cardVariants = cva(
         full: 'max-w-full',
       },
       spacing: {
-        default: '',
-        tight: 'gap-3',
-        relaxed: 'gap-6',
+        default: 'gap-4 data-[size=sm]:gap-3',
+        tight: 'gap-3 data-[size=sm]:gap-2.5',
+        relaxed: 'gap-6 data-[size=sm]:gap-4',
+      },
+      disabled: {
+        true: 'opacity-60 pointer-events-none select-none',
       },
     },
     defaultVariants: {
       width: 'auto',
       spacing: 'default',
+      disabled: undefined,
     },
   },
 );
@@ -56,6 +60,8 @@ function Card({
   size = 'default',
   width,
   maxWidth,
+  spacing,
+  disabled,
   title,
   description,
   headerAction,
@@ -68,6 +74,13 @@ function Card({
   // Check if children contain compound components (have data-slot)
   const hasCompoundChildren = React.Children.toArray(children).some((child) => {
     if (React.isValidElement(child)) {
+      // Prefer checking component identity. `data-slot` is applied inside the component render,
+      // so it won't exist on `child.props` unless manually passed in.
+      if (child.type === CardHeader || child.type === CardContent || child.type === CardFooter) {
+        return true;
+      }
+
+      // Fallback for direct DOM usage.
       const props = child.props as Record<string, unknown>;
       return (
         props['data-slot'] === 'card-header' ||
@@ -79,7 +92,13 @@ function Card({
   });
 
   return (
-    <div data-slot="card" data-size={size} className={cardVariants({ width, maxWidth })} {...props}>
+    <div
+      data-slot="card"
+      data-size={size}
+      data-disabled={disabled ? '' : undefined}
+      className={cardVariants({ width, maxWidth, spacing, disabled: disabled ? true : undefined })}
+      {...props}
+    >
       {hasHeader && (
         <CardHeader>
           {title && <CardTitle>{title}</CardTitle>}

package/src/components/molecules/command-search.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import * as React from 'react';
+import { Search } from '@carbon/icons-react';
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from '../organisms/command';
+import { Kbd } from '../atoms/kbd';
+
+// ============ TYPES ============
+
+export interface CommandSearchItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  onSelect?: () => void;
+  keywords?: string[];
+}
+
+export interface CommandSearchGroup {
+  id: string;
+  label: string;
+  items: CommandSearchItem[];
+}
+
+export interface CommandSearchProps {
+  /** Placeholder text for the search input */
+  placeholder?: string;
+  /** Text shown when no results are found */
+  emptyText?: string;
+  /** Groups of searchable items */
+  groups?: CommandSearchGroup[];
+  /** Flat list of items (alternative to groups) */
+  items?: CommandSearchItem[];
+  /** Callback when an item is selected */
+  onSelect?: (item: CommandSearchItem) => void;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether to show the trigger input */
+  showTrigger?: boolean;
+  /** Width of the trigger input */
+  triggerWidth?: 'sm' | 'md' | 'lg' | 'full';
+}
+
+// ============ COMPONENT ============
+
+function CommandSearch({
+  placeholder = 'Search...',
+  emptyText = 'No results found.',
+  groups = [],
+  items = [],
+  onSelect,
+  open: openProp,
+  onOpenChange,
+  showTrigger = true,
+  triggerWidth = 'md',
+}: CommandSearchProps) {
+  const [_open, _setOpen] = React.useState(false);
+  const open = openProp ?? _open;
+  const setOpen = onOpenChange ?? _setOpen;
+
+  // Listen for Cmd+K / Ctrl+K
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, setOpen]);
+
+  const handleSelect = (item: CommandSearchItem) => {
+    setOpen(false);
+    item.onSelect?.();
+    onSelect?.(item);
+  };
+
+  const widthClasses = {
+    sm: 'w-48 md:w-56',
+    md: 'w-56 md:w-72',
+    lg: 'w-72 md:w-96',
+    full: 'w-full max-w-md',
+  };
+
+  // Combine flat items into a default group if provided
+  const allGroups = items.length > 0
+    ? [{ id: 'default', label: '', items }, ...groups]
+    : groups;
+
+  return (
+    <>
+      {showTrigger && (
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className={`${widthClasses[triggerWidth]} inline-flex items-center gap-2 rounded-lg border border-input/50 bg-background/50 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-background hover:border-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+        >
+          <Search className="size-4" />
+          <span className="flex-1 text-left">{placeholder}</span>
+          <Kbd>⌘K</Kbd>
+        </button>
+      )}
+
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder={placeholder} />
+          <CommandList>
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            {allGroups.map((group) => (
+              <CommandGroup key={group.id} heading={group.label || undefined}>
+                {group.items.map((item) => (
+                  <CommandItem
+                    key={item.id}
+                    value={item.label}
+                    keywords={item.keywords}
+                    onSelect={() => handleSelect(item)}
+                  >
+                    {item.icon}
+                    <span>{item.label}</span>
+                    {item.shortcut && (
+                      <CommandShortcut>{item.shortcut}</CommandShortcut>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ))}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  );
+}
+
+export { CommandSearch };

package/src/components/molecules/empty.tsx

@@ -0,0 +1,82 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+function Empty({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty"
+      className="gap-4 rounded-lg border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance"
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty-header"
+      className="gap-2 flex max-w-sm flex-col items-center"
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function EmptyMedia({
+  variant = 'default',
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={emptyMediaVariants({ variant })}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty-title"
+      className="text-lg font-medium tracking-tight"
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ ...props }: Omit<React.ComponentProps<'p'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty-description"
+      className="text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="empty-content"
+      className="gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance"
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };