@trycompai/design-system 1.0.1 → 1.0.2

package/src/components/organisms/calendar.tsx

@@ -8,7 +8,7 @@ import {
   type DayPickerProps,
 } from 'react-day-picker';
 
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { ChevronDown, ChevronLeft, ChevronRight } from '@carbon/icons-react';
 import { cn } from '../../../lib/utils';
 import { Button, buttonVariants } from '../atoms/button';
 
@@ -129,14 +129,14 @@ function Calendar({
         },
         Chevron: ({ orientation, ...componentProps }) => {
           if (orientation === 'left') {
-            return <ChevronLeftIcon className="size-4" {...componentProps} />;
+            return <ChevronLeft className="size-4" {...componentProps} />;
           }
 
           if (orientation === 'right') {
-            return <ChevronRightIcon className="size-4" {...componentProps} />;
+            return <ChevronRight className="size-4" {...componentProps} />;
           }
 
-          return <ChevronDownIcon className="size-4" {...componentProps} />;
+          return <ChevronDown className="size-4" {...componentProps} />;
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...componentProps }) => {

package/src/components/organisms/carousel.tsx

@@ -2,7 +2,7 @@ import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-reac
 import * as React from 'react';
 
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from '@carbon/icons-react';
 import { cn } from '../../../lib/utils';
 import { buttonVariants } from '../atoms/button';
 
@@ -174,7 +174,7 @@ function CarouselPrevious({ ...props }: Omit<ButtonPrimitive.Props, 'className'>
       onClick={scrollPrev}
       {...props}
     >
-      <ChevronLeftIcon />
+      <ChevronLeft />
       <span className="sr-only">Previous slide</span>
     </ButtonPrimitive>
   );
@@ -197,7 +197,7 @@ function CarouselNext({ ...props }: Omit<ButtonPrimitive.Props, 'className'>) {
       onClick={scrollNext}
       {...props}
     >
-      <ChevronRightIcon />
+      <ChevronRight />
       <span className="sr-only">Next slide</span>
     </ButtonPrimitive>
   );

package/src/components/organisms/combobox.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
-import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
+import { Checkmark, ChevronDown, Close } from '@carbon/icons-react';
 import * as React from 'react';
 
 import { Button } from '../atoms/button';
@@ -24,7 +24,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
+      <ChevronDown className="text-muted-foreground size-4 pointer-events-none" />
     </ComboboxPrimitive.Trigger>
   );
 }
@@ -36,7 +36,7 @@ function ComboboxClear({ ...props }: Omit<ComboboxPrimitive.Clear.Props, 'classN
       render={<InputGroupButton variant="ghost" size="icon-xs" />}
       {...props}
     >
-      <XIcon className="pointer-events-none" />
+      <Close className="pointer-events-none" />
     </ComboboxPrimitive.Clear>
   );
 }
@@ -127,7 +127,7 @@ function ComboboxItem({ children, ...props }: Omit<ComboboxPrimitive.Item.Props,
           <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
         }
       >
-        <CheckIcon className="pointer-events-none" />
+        <Checkmark className="pointer-events-none" />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
   );
@@ -206,7 +206,7 @@ function ComboboxChip({
           className="-ml-1 opacity-50 hover:opacity-100"
           data-slot="combobox-chip-remove"
         >
-          <XIcon className="pointer-events-none" />
+          <Close className="pointer-events-none" />
         </ComboboxPrimitive.ChipRemove>
       )}
     </ComboboxPrimitive.Chip>

package/src/components/organisms/command.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { CheckIcon, SearchIcon } from 'lucide-react';
+import { Checkmark, Search } from '@carbon/icons-react';
 
 const commandVariants = cva(
   'bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden',
@@ -95,7 +95,7 @@ function CommandInput({
           data-align="inline-end"
           className="text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 pr-2 text-sm font-medium select-none"
         >
-          <SearchIcon className="size-4 shrink-0 opacity-50" />
+          <Search className="size-4 shrink-0 opacity-50" />
         </div>
       </div>
     </div>
@@ -161,7 +161,7 @@ function CommandItem({
       {...props}
     >
       {children}
-      <CheckIcon className="ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+      <Checkmark className="ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
     </CommandPrimitive.Item>
   );
 }

package/src/components/organisms/context-menu.tsx

@@ -1,6 +1,6 @@
 import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
 
-import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+import { Checkmark, ChevronRight } from '@carbon/icons-react';
 
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
@@ -105,7 +105,7 @@ function ContextMenuSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      <ChevronRight className="ml-auto" />
     </ContextMenuPrimitive.SubmenuTrigger>
   );
 }
@@ -134,7 +134,7 @@ function ContextMenuCheckboxItem({
     >
       <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon />
+          <Checkmark />
         </ContextMenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -158,7 +158,7 @@ function ContextMenuRadioItem({
     >
       <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.RadioItemIndicator>
-          <CheckIcon />
+          <Checkmark />
         </ContextMenuPrimitive.RadioItemIndicator>
       </span>
       {children}

package/src/components/organisms/dialog.tsx

@@ -3,7 +3,7 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import * as React from 'react';
 
-import { XIcon } from 'lucide-react';
+import { Close } from '@carbon/icons-react';
 import { Button } from '../atoms/button';
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
@@ -54,7 +54,7 @@ function DialogContent({
             render={<Button variant="ghost" size="icon-sm" />}
             className="absolute top-2 right-2"
           >
-            <XIcon />
+            <Close />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}

package/src/components/organisms/dropdown-menu.tsx

@@ -2,7 +2,8 @@ import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+import { Checkmark, ChevronRight } from '@carbon/icons-react';
+import { cn } from '../../../lib/utils';
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
@@ -29,13 +30,14 @@ const dropdownMenuTriggerVariants = cva('', {
 
 function DropdownMenuTrigger({
   variant = 'default',
+  className,
   ...props
-}: Omit<MenuPrimitive.Trigger.Props, 'className'> &
+}: MenuPrimitive.Trigger.Props &
   VariantProps<typeof dropdownMenuTriggerVariants>) {
   return (
     <MenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
-      className={dropdownMenuTriggerVariants({ variant })}
+      className={cn(dropdownMenuTriggerVariants({ variant }), className)}
       {...props}
     />
   );
@@ -126,7 +128,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      <ChevronRight className="ml-auto" />
     </MenuPrimitive.SubmenuTrigger>
   );
 }
@@ -167,7 +169,7 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon className="size-4" />
+          <Checkmark className="size-4" />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -194,7 +196,7 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>
-          <CheckIcon className="size-4" />
+          <Checkmark className="size-4" />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}

package/src/components/organisms/index.ts

@@ -1,4 +1,5 @@
 export * from './alert-dialog';
+export * from './app-shell';
 export * from './calendar';
 export * from './carousel';
 export * from './chart';

package/src/components/organisms/menubar.tsx

@@ -2,7 +2,7 @@ import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
 import * as React from 'react';
 
-import { CheckIcon } from 'lucide-react';
+import { Checkmark } from '@carbon/icons-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -84,7 +84,7 @@ function MenubarCheckboxItem({
     >
       <span className="left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
         <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon />
+          <Checkmark />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -108,7 +108,7 @@ function MenubarRadioItem({
     >
       <span className="left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
         <MenuPrimitive.RadioItemIndicator>
-          <CheckIcon />
+          <Checkmark />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}

package/src/components/organisms/navigation-menu.tsx

@@ -1,7 +1,7 @@
 import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
 import { cva } from 'class-variance-authority';
 
-import { ChevronDownIcon } from 'lucide-react';
+import { ChevronDown } from '@carbon/icons-react';
 import { cn } from '../../../lib/utils';
 
 function NavigationMenu({
@@ -55,7 +55,7 @@ function NavigationMenuTrigger({
       {...props}
     >
       {children}{' '}
-      <ChevronDownIcon
+      <ChevronDown
         className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />

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

@@ -1,22 +1,15 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
+import { cn } from '../../../lib/utils';
+import { Stack } from '../atoms/stack';
+
 const pageLayoutVariants = cva('min-h-dvh bg-background text-foreground', {
   variants: {
     variant: {
       default: 'flex flex-col',
       center: 'flex items-center justify-center',
     },
-    contentWidth: {
-      auto: '',
-      sm: 'w-full max-w-sm',
-      md: 'w-full max-w-md',
-      lg: 'w-full max-w-lg',
-      xl: 'w-full max-w-xl',
-      '2xl': 'w-full max-w-2xl',
-      '3xl': 'w-full max-w-3xl',
-      full: 'w-full max-w-full',
-    },
     padding: {
       none: '',
       sm: 'px-4 py-6',
@@ -26,20 +19,54 @@ const pageLayoutVariants = cva('min-h-dvh bg-background text-foreground', {
   },
   defaultVariants: {
     variant: 'default',
-    contentWidth: 'auto',
     padding: 'default',
   },
 });
 
+const containerVariants = cva('mx-auto w-full', {
+  variants: {
+    maxWidth: {
+      sm: 'max-w-screen-sm', // 640px
+      md: 'max-w-screen-md', // 768px
+      lg: 'max-w-screen-lg', // 1024px
+      xl: 'max-w-[1200px]',
+      '2xl': 'max-w-[1400px]',
+    },
+  },
+  defaultVariants: {
+    maxWidth: 'xl',
+  },
+});
+
 interface PageLayoutProps
-  extends
-    Omit<React.ComponentProps<'div'>, 'className' | 'children'>,
+  extends Omit<React.ComponentProps<'div'>, 'className' | 'children'>,
     VariantProps<typeof pageLayoutVariants> {
   children?: React.ReactNode;
+  /** Whether to wrap content in a centered container. Defaults to true. */
+  container?: boolean;
+  /** Max width of the container. Only applies when container is true. */
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Vertical gap between children. Defaults to 'lg' (gap-6). */
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '0' | '1' | '2' | '3' | '4' | '6' | '8';
 }
 
-function PageLayout({ variant, padding, contentWidth, children, ...props }: PageLayoutProps) {
-  const resolvedContentWidth = contentWidth ?? (variant === 'center' ? 'lg' : 'auto');
+function PageLayout({
+  variant,
+  padding,
+  container = true,
+  maxWidth,
+  gap = 'lg',
+  children,
+  ...props
+}: PageLayoutProps) {
+  // For center variant, default to smaller max-width (sm) for auth-style pages
+  const resolvedMaxWidth = maxWidth ?? (variant === 'center' ? 'sm' : 'lg');
+
+  const content = (
+    <Stack gap={gap}>
+      {children}
+    </Stack>
+  );
 
   return (
     <div
@@ -48,15 +75,18 @@ function PageLayout({ variant, padding, contentWidth, children, ...props }: Page
       className={pageLayoutVariants({ variant, padding })}
       {...props}
     >
-      {resolvedContentWidth !== 'auto' ? (
+      {container ? (
         <div
-          data-slot="page-layout-content"
-          className={pageLayoutVariants({ contentWidth: resolvedContentWidth })}
+          data-slot="page-layout-container"
+          className={cn(
+            containerVariants({ maxWidth: resolvedMaxWidth }),
+            variant === 'center' && 'flex items-center justify-center'
+          )}
         >
-          {children}
+          {content}
         </div>
       ) : (
-        children
+        content
       )}
     </div>
   );

package/src/components/organisms/sheet.tsx

@@ -1,7 +1,7 @@
 import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
 import * as React from 'react';
 
-import { XIcon } from 'lucide-react';
+import { Close } from '@carbon/icons-react';
 import { Button } from '../atoms/button';
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
@@ -55,7 +55,7 @@ function SheetContent({
             render={<Button variant="ghost" size="icon-sm" />}
             className="absolute top-4 right-4"
           >
-            <XIcon className="size-4" />
+            <Close className="size-4" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}

package/src/components/organisms/sidebar.tsx

@@ -7,7 +7,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { PanelLeftIcon } from 'lucide-react';
+import { SidePanelOpen } from '@carbon/icons-react';
 import { useIsMobile } from '../../../hooks/use-mobile';
 import { cn } from '../../../lib/utils';
 import { buttonVariants } from '../atoms/button';
@@ -203,7 +203,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer text-sidebar-foreground hidden w-fit md:block"
       data-state={state}
       data-collapsible={state === 'collapsed' ? collapsible : ''}
       data-variant={variant}
@@ -262,7 +262,7 @@ function SidebarTrigger({ onClick, ...props }: Omit<ButtonPrimitive.Props, 'clas
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <SidePanelOpen />
       <span className="sr-only">Toggle Sidebar</span>
     </ButtonPrimitive>
   );
@@ -350,12 +350,27 @@ function SidebarContent({ ...props }: Omit<React.ComponentProps<'div'>, 'classNa
   );
 }
 
-function SidebarGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+const sidebarGroupVariants = cva('relative flex w-full min-w-0 flex-col', {
+  variants: {
+    padding: {
+      default: 'p-2',
+      none: 'p-0',
+    },
+  },
+  defaultVariants: {
+    padding: 'default',
+  },
+});
+
+function SidebarGroup({
+  padding = 'default',
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof sidebarGroupVariants>) {
   return (
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className="p-2 relative flex w-full min-w-0 flex-col"
+      className={sidebarGroupVariants({ padding })}
       {...props}
     />
   );
@@ -544,7 +559,7 @@ function SidebarMenuBadge({ ...props }: Omit<React.ComponentProps<'div'>, 'class
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
-      className="text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden"
+      className="text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden"
       {...props}
     />
   );
@@ -643,6 +658,7 @@ export {
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
+  sidebarGroupVariants,
   SidebarGroupAction,
   SidebarGroupContent,
   SidebarGroupLabel,

package/src/components/organisms/sonner.tsx

@@ -1,10 +1,10 @@
 import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from 'lucide-react';
+  CheckmarkFilled,
+  Information,
+  Misuse,
+  Renew,
+  Warning,
+} from '@carbon/icons-react';
 import { Toaster as Sonner, type ToasterProps } from 'sonner';
 
 const Toaster = ({ theme = 'system', ...props }: ToasterProps) => {
@@ -13,11 +13,11 @@ const Toaster = ({ theme = 'system', ...props }: ToasterProps) => {
       theme={theme}
       className="toaster group"
       icons={{
-        success: <CircleCheckIcon className="size-4 text-success" />,
-        info: <InfoIcon className="size-4 text-info" />,
-        warning: <TriangleAlertIcon className="size-4 text-warning" />,
-        error: <OctagonXIcon className="size-4 text-destructive" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: <CheckmarkFilled className="size-4 text-success" />,
+        info: <Information className="size-4 text-info" />,
+        warning: <Warning className="size-4 text-warning" />,
+        error: <Misuse className="size-4 text-destructive" />,
+        loading: <Renew className="size-4 animate-spin" />,
       }}
       style={
         {