@trycompai/design-system 1.0.0 → 1.0.2

package/src/components/{ui → organisms}/calendar.tsx

@@ -8,9 +8,9 @@ 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 './button';
+import { Button, buttonVariants } from '../atoms/button';
 
 type CalendarButtonVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';
 
@@ -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 }) => {
@@ -158,9 +158,8 @@ function Calendar({
 function CalendarDayButton({
   day,
   modifiers,
-  className: _className,
   ...props
-}: React.ComponentProps<typeof DayButton>) {
+}: Omit<React.ComponentProps<typeof DayButton>, 'className'>) {
   const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();

package/src/components/{ui → organisms}/carousel.tsx

@@ -2,9 +2,9 @@ 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 './button';
+import { buttonVariants } from '../atoms/button';
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -44,10 +44,9 @@ function Carousel({
   opts,
   setApi,
   plugins,
-  className,
   children,
   ...props
-}: React.ComponentProps<'div'> & CarouselProps) {
+}: Omit<React.ComponentProps<'div'>, 'className'> & CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
@@ -116,7 +115,7 @@ function Carousel({
     >
       <div
         onKeyDownCapture={handleKeyDown}
-        className={cn('relative', className)}
+        className="relative"
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
@@ -128,20 +127,20 @@ function Carousel({
   );
 }
 
-function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+function CarouselContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   const { carouselRef, orientation } = useCarousel();
 
   return (
     <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
       <div
-        className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+        className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col')}
         {...props}
       />
     </div>
   );
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+function CarouselItem({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   const { orientation } = useCarousel();
 
   return (
@@ -152,7 +151,6 @@ function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
       className={cn(
         'min-w-0 shrink-0 grow-0 basis-full',
         orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-        className,
       )}
       {...props}
     />
@@ -176,7 +174,7 @@ function CarouselPrevious({ ...props }: Omit<ButtonPrimitive.Props, 'className'>
       onClick={scrollPrev}
       {...props}
     >
-      <ChevronLeftIcon />
+      <ChevronLeft />
       <span className="sr-only">Previous slide</span>
     </ButtonPrimitive>
   );
@@ -199,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/{ui → organisms}/chart.tsx

@@ -36,11 +36,10 @@ function useChart() {
 
 function ChartContainer({
   id,
-  className,
   children,
   config,
   ...props
-}: React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<'div'>, 'className'> & {
   config: ChartConfig;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
 }) {
@@ -52,10 +51,7 @@ function ChartContainer({
       <div
         data-slot="chart"
         data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className,
-        )}
+        className="[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden"
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
@@ -99,19 +95,17 @@ const ChartTooltip = RechartsPrimitive.Tooltip;
 function ChartTooltipContent({
   active,
   payload,
-  className,
   indicator = 'dot',
   hideLabel = false,
   hideIndicator = false,
   label,
   labelFormatter,
-  labelClassName,
   formatter,
   color,
   nameKey,
   labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, 'className'> &
+  Omit<React.ComponentProps<'div'>, 'className'> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: 'line' | 'dot' | 'dashed';
@@ -134,17 +128,15 @@ function ChartTooltipContent({
         : itemConfig?.label;
 
     if (labelFormatter) {
-      return (
-        <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>
-      );
+      return <div className="font-medium">{labelFormatter(value, payload)}</div>;
     }
 
     if (!value) {
       return null;
     }
 
-    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
-  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+    return <div className="font-medium">{value}</div>;
+  }, [label, labelFormatter, payload, hideLabel, config, labelKey]);
 
   if (!active || !payload?.length) {
     return null;
@@ -153,12 +145,7 @@ function ChartTooltipContent({
   const nestLabel = payload.length === 1 && indicator !== 'dot';
 
   return (
-    <div
-      className={cn(
-        'border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start',
-        className,
-      )}
-    >
+    <div className="border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start">
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload
@@ -235,12 +222,11 @@ function ChartTooltipContent({
 const ChartLegend = RechartsPrimitive.Legend;
 
 function ChartLegendContent({
-  className,
   hideIcon = false,
   payload,
   verticalAlign = 'bottom',
   nameKey,
-}: React.ComponentProps<'div'> &
+}: Omit<React.ComponentProps<'div'>, 'className'> &
   Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
     hideIcon?: boolean;
     nameKey?: string;
@@ -256,7 +242,6 @@ function ChartLegendContent({
       className={cn(
         'flex items-center justify-center gap-4',
         verticalAlign === 'top' ? 'pb-3' : 'pt-3',
-        className,
       )}
     >
       {payload

package/src/components/{ui → organisms}/combobox.tsx

@@ -1,11 +1,11 @@
 '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 './button';
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group';
+import { Button } from '../atoms/button';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '../molecules/input-group';
 
 const Combobox = ComboboxPrimitive.Root;
 
@@ -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/{ui → 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/{ui → organisms}/context-menu.tsx

@@ -1,8 +1,6 @@
 import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
-import * as React from 'react';
 
-import { CheckIcon, ChevronRightIcon } from 'lucide-react';
-import { cn } from '../../../lib/utils';
+import { Checkmark, ChevronRight } from '@carbon/icons-react';
 
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
@@ -12,24 +10,23 @@ function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
   return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
 }
 
-function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
+function ContextMenuTrigger({ ...props }: Omit<ContextMenuPrimitive.Trigger.Props, 'className'>) {
   return (
     <ContextMenuPrimitive.Trigger
       data-slot="context-menu-trigger"
-      className={cn('select-none', className)}
+      className="select-none"
       {...props}
     />
   );
 }
 
 function ContextMenuContent({
-  className,
   align = 'start',
   alignOffset = 4,
   side = 'right',
   sideOffset = 0,
   ...props
-}: ContextMenuPrimitive.Popup.Props &
+}: Omit<ContextMenuPrimitive.Popup.Props, 'className'> &
   Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
   return (
     <ContextMenuPrimitive.Portal>
@@ -42,10 +39,7 @@ function ContextMenuContent({
       >
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
-          className={cn(
-            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none',
-            className,
-          )}
+          className="data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none"
           {...props}
         />
       </ContextMenuPrimitive.Positioner>
@@ -58,31 +52,26 @@ function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
 }
 
 function ContextMenuLabel({
-  className,
   inset,
   ...props
-}: ContextMenuPrimitive.GroupLabel.Props & {
+}: Omit<ContextMenuPrimitive.GroupLabel.Props, 'className'> & {
   inset?: boolean;
 }) {
   return (
     <ContextMenuPrimitive.GroupLabel
       data-slot="context-menu-label"
       data-inset={inset}
-      className={cn(
-        'text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8',
-        className,
-      )}
+      className="text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8"
       {...props}
     />
   );
 }
 
 function ContextMenuItem({
-  className,
   inset,
   variant = 'default',
   ...props
-}: ContextMenuPrimitive.Item.Props & {
+}: Omit<ContextMenuPrimitive.Item.Props, 'className'> & {
   inset?: boolean;
   variant?: 'default' | 'destructive';
 }) {
@@ -91,10 +80,7 @@ function ContextMenuItem({
       data-slot="context-menu-item"
       data-inset={inset}
       data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className,
-      )}
+      className="focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0"
       {...props}
     />
   );
@@ -105,34 +91,29 @@ function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
 }
 
 function ContextMenuSubTrigger({
-  className,
   inset,
   children,
   ...props
-}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+}: Omit<ContextMenuPrimitive.SubmenuTrigger.Props, 'className'> & {
   inset?: boolean;
 }) {
   return (
     <ContextMenuPrimitive.SubmenuTrigger
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className,
-      )}
+      className="focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0"
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      <ChevronRight className="ml-auto" />
     </ContextMenuPrimitive.SubmenuTrigger>
   );
 }
 
-function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>) {
+function ContextMenuSubContent({ ...props }: Omit<React.ComponentProps<typeof ContextMenuContent>, 'className'>) {
   return (
     <ContextMenuContent
       data-slot="context-menu-sub-content"
-      className="shadow-lg"
       side="right"
       {...props}
     />
@@ -140,24 +121,20 @@ function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof Context
 }
 
 function ContextMenuCheckboxItem({
-  className,
   children,
   checked,
   ...props
-}: ContextMenuPrimitive.CheckboxItem.Props) {
+}: Omit<ContextMenuPrimitive.CheckboxItem.Props, 'className'>) {
   return (
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className,
-      )}
+      className="focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0"
       checked={checked}
       {...props}
     >
       <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon />
+          <Checkmark />
         </ContextMenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -170,22 +147,18 @@ function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Pro
 }
 
 function ContextMenuRadioItem({
-  className,
   children,
   ...props
-}: ContextMenuPrimitive.RadioItem.Props) {
+}: Omit<ContextMenuPrimitive.RadioItem.Props, 'className'>) {
   return (
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className,
-      )}
+      className="focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0"
       {...props}
     >
       <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.RadioItemIndicator>
-          <CheckIcon />
+          <Checkmark />
         </ContextMenuPrimitive.RadioItemIndicator>
       </span>
       {children}
@@ -193,24 +166,21 @@ function ContextMenuRadioItem({
   );
 }
 
-function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {
+function ContextMenuSeparator({ ...props }: Omit<ContextMenuPrimitive.Separator.Props, 'className'>) {
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className="bg-border -mx-1 my-1 h-px"
       {...props}
     />
   );
 }
 
-function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+function ContextMenuShortcut({ ...props }: Omit<React.ComponentProps<'span'>, 'className'>) {
   return (
     <span
       data-slot="context-menu-shortcut"
-      className={cn(
-        'text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
-        className,
-      )}
+      className="text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest"
       {...props}
     />
   );

package/src/components/{ui → organisms}/dialog.tsx

@@ -3,8 +3,8 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import * as React from 'react';
 
-import { XIcon } from 'lucide-react';
-import { Button } from './button';
+import { Close } from '@carbon/icons-react';
+import { Button } from '../atoms/button';
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...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/{ui → 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

@@ -0,0 +1,17 @@
+export * from './alert-dialog';
+export * from './app-shell';
+export * from './calendar';
+export * from './carousel';
+export * from './chart';
+export * from './combobox';
+export * from './command';
+export * from './context-menu';
+export * from './dialog';
+export * from './drawer';
+export * from './dropdown-menu';
+export * from './menubar';
+export * from './navigation-menu';
+export * from './page-layout';
+export * from './sheet';
+export * from './sidebar';
+export * from './sonner';

package/src/components/{ui → 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}