@trycompai/design-system 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",
@@ -23,6 +23,7 @@
       "default": "./lib/utils.ts"
     },
     "./globals.css": "./src/styles/globals.css",
+    "./fonts/*": "./src/fonts/*",
     "./tailwind.config": {
       "types": "./tailwind.config.ts",
       "import": "./tailwind.config.ts",
@@ -67,13 +68,14 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
+    "@carbon/icons-react": "^11.72.0",
+    "@fontsource-variable/plus-jakarta-sans": "^5.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-resizable-panels": "^4.2.0",
@@ -90,6 +92,7 @@
     "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/node": "^22.18.0",
     "@types/react": "^19.2.7",

package/src/components/atoms/badge.tsx

@@ -3,20 +3,21 @@ import { useRender } from '@base-ui/react/use-render';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const badgeVariants = cva(
-  'h-5 gap-1 rounded-4xl border px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge',
+  'gap-1 rounded-sm px-1.5 py-1 text-[10px] font-semibold uppercase tracking-wider leading-none transition-colors has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:ring-ring/50 focus-visible:ring-[3px] overflow-hidden antialiased select-none',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        default:
+          'bg-primary text-primary-foreground [a]:hover:bg-primary/90',
         secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+          'bg-muted text-muted-foreground [a]:hover:bg-muted/80',
         destructive:
-          'border-transparent bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+          'bg-destructive/10 text-destructive [a]:hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/15',
         outline:
-          'border-border bg-transparent text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+          'border border-border/50 bg-transparent text-foreground [a]:hover:bg-muted/30',
         ghost:
-          'border-transparent bg-transparent hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-        link: 'border-transparent bg-transparent text-primary underline-offset-4 hover:underline',
+          'bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+        link: 'bg-transparent text-primary underline-offset-4 hover:underline',
       },
     },
     defaultVariants: {

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-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "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-lg border border-transparent bg-clip-padding text-sm font-medium 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-150 ease-out active:scale-[0.98] 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: {
@@ -36,6 +36,11 @@ const buttonVariants = cva(
         'icon-sm':
           'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
         'icon-lg': 'size-9',
+        // 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',
         // Calendar day button - special size for calendar day cells
         'calendar-day': [
           // Base sizing

package/src/components/atoms/checkbox.tsx

@@ -1,19 +1,19 @@
 import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 
-import { CheckIcon } from 'lucide-react';
+import { Checkmark } from '@carbon/icons-react';
 
 function Checkbox({ ...props }: Omit<CheckboxPrimitive.Root.Props, 'className'>) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
-      className="border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50"
+      className="border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
       {...props}
     >
       <CheckboxPrimitive.Indicator
         data-slot="checkbox-indicator"
         className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
       >
-        <CheckIcon />
+        <Checkmark />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );

package/src/components/atoms/heading.tsx

@@ -1,15 +1,15 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-const headingVariants = cva('font-semibold', {
+const headingVariants = cva('font-medium', {
   variants: {
     level: {
-      '1': 'text-2xl tracking-tight',
+      '1': 'text-4xl tracking-tight',
       '2': 'text-xl',
-      '3': 'text-lg font-medium',
-      '4': 'text-base font-medium',
-      '5': 'text-sm font-medium',
-      '6': 'text-sm font-medium',
+      '3': 'text-lg ',
+      '4': 'text-base ',
+      '5': 'text-sm ',
+      '6': 'text-sm ',
     },
     variant: {
       default: 'text-foreground',

package/src/components/atoms/index.ts

@@ -8,11 +8,13 @@ export * from './heading';
 export * from './input';
 export * from './kbd';
 export * from './label';
+export * from './logo';
 export * from './progress';
 export * from './separator';
 export * from './skeleton';
 export * from './slider';
 export * from './spinner';
+export * from './stack';
 export * from './switch';
 export * from './text';
 export * from './textarea';

package/src/components/atoms/logo.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import * as React from 'react';
+
+interface LogoProps extends Omit<React.SVGProps<SVGSVGElement>, 'className'> {
+  /** Logo variant - 'dark' shows dark logo (for light backgrounds), 'light' shows white logo (for dark backgrounds) */
+  variant?: 'dark' | 'light';
+}
+
+function Logo({ variant = 'dark', ...props }: LogoProps) {
+  const fill = variant === 'light' ? '#FFFFFF' : '#16171B';
+
+  return (
+    <svg
+      viewBox="0 0 1119 272"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M204 52.885L195.465 46.2399L136.011 0L0 105.77V166.217L136.011 272L272 166.217V105.77L204 52.885ZM136.011 26.631L178.349 59.5553L156.598 76.4509L154.653 77.9583L136.011 63.4621L81.6113 105.77L100.253 120.266L117.369 133.594L136.011 148.091L190.4 105.758L171.781 91.2613L173.725 89.7538L195.476 72.8583L237.791 105.77L216.04 122.691L136.023 184.934L93.6851 152.01L76.5692 138.707L55.9827 122.703L34.2431 105.783L136.011 26.631Z"
+        fill={fill}
+      />
+      <path
+        d="M423.8 210.2C411.133 210.2 400 207.267 390.4 201.4C380.8 195.4 373.333 186.867 368 175.8C362.667 164.733 360 151.533 360 136.2C360 120.867 362.667 107.667 368 96.6C373.333 85.4 380.8 76.8 390.4 70.8C400 64.8 411.133 61.8 423.8 61.8C441 61.8 454.333 66.1333 463.8 74.8C473.267 83.4667 479.467 95.2667 482.4 110.2L464.2 111.4C462.2 101.267 457.933 93.2667 451.4 87.4C444.867 81.5333 435.667 78.6 423.8 78.6C414.733 78.6 406.733 80.9333 399.8 85.6C393 90.1333 387.667 96.7333 383.8 105.4C379.933 113.933 378 124.2 378 136.2C378 148.2 379.933 158.467 383.8 167C387.667 175.533 393 182.067 399.8 186.6C406.733 191.133 414.733 193.4 423.8 193.4C436.2 193.4 445.8 190.2 452.6 183.8C459.4 177.267 463.667 168.467 465.4 157.4L483.6 158.6C481.867 168.867 478.467 177.867 473.4 185.6C468.333 193.333 461.6 199.4 453.2 203.8C444.933 208.067 435.133 210.2 423.8 210.2ZM547.463 209.4C537.729 209.4 529.196 207.133 521.863 202.6C514.529 198.067 508.863 191.667 504.863 183.4C500.863 175 498.863 165.2 498.863 154C498.863 142.667 500.863 132.867 504.863 124.6C508.863 116.333 514.529 109.933 521.863 105.4C529.196 100.867 537.729 98.6 547.463 98.6C557.196 98.6 565.663 100.867 572.863 105.4C580.196 109.933 585.863 116.333 589.863 124.6C593.863 132.867 595.863 142.667 595.863 154C595.863 165.2 593.863 175 589.863 183.4C585.863 191.667 580.196 198.067 572.863 202.6C565.663 207.133 557.196 209.4 547.463 209.4ZM547.463 193.4C557.196 193.4 564.729 189.933 570.063 183C575.529 175.933 578.263 166.267 578.263 154C578.263 141.733 575.529 132.133 570.063 125.2C564.729 118.133 557.196 114.6 547.463 114.6C537.729 114.6 530.129 118.133 524.663 125.2C519.196 132.133 516.462 141.733 516.462 154C516.462 166.267 519.196 175.933 524.663 183C530.129 189.933 537.729 193.4 547.463 193.4ZM618.758 207V101H634.158L634.758 127.8L632.358 127C633.558 121.133 635.624 116.133 638.558 112C641.624 107.733 645.358 104.467 649.758 102.2C654.158 99.8 659.024 98.6 664.358 98.6C673.558 98.6 681.024 101.133 686.758 106.2C692.624 111.267 696.291 118.333 697.758 127.4L694.558 127.2C695.624 121.067 697.558 115.933 700.358 111.8C703.291 107.533 707.024 104.267 711.558 102C716.091 99.7333 721.291 98.6 727.158 98.6C734.758 98.6 741.158 100.2 746.358 103.4C751.558 106.467 755.491 111 758.158 117C760.824 123 762.158 130.267 762.158 138.8V207H745.358V142.4C745.358 132.8 743.491 125.6 739.758 120.8C736.024 115.867 730.491 113.4 723.158 113.4C718.224 113.4 713.891 114.6 710.158 117C706.558 119.4 703.758 122.867 701.758 127.4C699.758 131.8 698.758 137.2 698.758 143.6V207H681.958V143.6C681.958 134.133 680.291 126.733 676.958 121.4C673.624 116.067 668.024 113.4 660.158 113.4C655.224 113.4 650.891 114.6 647.158 117C643.558 119.4 640.691 122.867 638.558 127.4C636.558 131.933 635.558 137.333 635.558 143.6V207H618.758ZM790.242 237V101H805.842L806.242 123.8L803.842 122.6C806.509 114.733 810.909 108.8 817.042 104.8C823.309 100.667 830.509 98.6 838.642 98.6C849.176 98.6 857.776 101.2 864.442 106.4C871.242 111.6 876.242 118.4 879.442 126.8C882.776 135.2 884.442 144.267 884.442 154C884.442 163.733 882.776 172.8 879.442 181.2C876.242 189.6 871.242 196.4 864.442 201.6C857.776 206.8 849.176 209.4 838.642 209.4C833.176 209.4 828.042 208.467 823.242 206.6C818.576 204.733 814.576 202.133 811.242 198.8C808.042 195.467 805.842 191.533 804.642 187L807.042 184.2V237H790.242ZM837.042 193.4C846.242 193.4 853.509 189.933 858.842 183C864.176 176.067 866.842 166.4 866.842 154C866.842 141.6 864.176 131.933 858.842 125C853.509 118.067 846.242 114.6 837.042 114.6C830.909 114.6 825.576 116.067 821.042 119C816.642 121.933 813.176 126.333 810.642 132.2C808.242 138.067 807.042 145.333 807.042 154C807.042 162.667 808.242 169.933 810.642 175.8C813.042 181.667 816.509 186.067 821.042 189C825.576 191.933 830.909 193.4 837.042 193.4ZM939.188 207L990.388 65H1013.59L1064.79 207H1045.99L1031.79 166.6H972.188L957.988 207H939.188ZM977.988 149.8H1025.99L1001.99 80L977.988 149.8ZM1083.28 207V65H1100.48V207H1083.28Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
+
+/** Icon-only version of the logo (just the shield/chevron mark) */
+function LogoIcon({ variant = 'dark', ...props }: LogoProps) {
+  const fill = variant === 'light' ? '#FFFFFF' : '#16171B';
+
+  return (
+    <svg
+      viewBox="0 0 272 272"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M204 52.885L195.465 46.2399L136.011 0L0 105.77V166.217L136.011 272L272 166.217V105.77L204 52.885ZM136.011 26.631L178.349 59.5553L156.598 76.4509L154.653 77.9583L136.011 63.4621L81.6113 105.77L100.253 120.266L117.369 133.594L136.011 148.091L190.4 105.758L171.781 91.2613L173.725 89.7538L195.476 72.8583L237.791 105.77L216.04 122.691L136.023 184.934L93.6851 152.01L76.5692 138.707L55.9827 122.703L34.2431 105.783L136.011 26.631Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
+
+export { Logo, LogoIcon };
+export type { LogoProps };

package/src/components/atoms/spinner.tsx

@@ -1,8 +1,8 @@
-import { Loader2Icon } from 'lucide-react';
+import { Renew } from '@carbon/icons-react';
 
-function Spinner({ ...props }: Omit<React.ComponentProps<'svg'>, 'className'>) {
+function Spinner({ ...props }: Omit<React.ComponentProps<typeof Renew>, 'className'>) {
   return (
-    <Loader2Icon
+    <Renew
       role="status"
       aria-label="Loading"
       className="size-4 shrink-0 animate-spin"

package/src/components/atoms/stack.tsx

@@ -0,0 +1,97 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+const stackVariants = cva('flex', {
+  variants: {
+    direction: {
+      row: 'flex-row',
+      column: 'flex-col',
+      'row-reverse': 'flex-row-reverse',
+      'column-reverse': 'flex-col-reverse',
+    },
+    gap: {
+      none: 'gap-0',
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-4',
+      lg: 'gap-6',
+      xl: 'gap-8',
+      // Numeric values for backward compatibility
+      '0': 'gap-0',
+      '1': 'gap-1',
+      '2': 'gap-2',
+      '3': 'gap-3',
+      '4': 'gap-4',
+      '6': 'gap-6',
+      '8': 'gap-8',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+      baseline: 'items-baseline',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    wrap: {
+      nowrap: 'flex-nowrap',
+      wrap: 'flex-wrap',
+      'wrap-reverse': 'flex-wrap-reverse',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    gap: 'md',
+    align: 'stretch',
+    justify: 'start',
+    wrap: 'nowrap',
+  },
+});
+
+type StackElement = 'div' | 'section' | 'nav' | 'ul' | 'ol' | 'main' | 'article' | 'aside' | 'header' | 'footer';
+
+interface StackProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'className'>,
+    VariantProps<typeof stackVariants> {
+  as?: StackElement;
+}
+
+function Stack({
+  as: Component = 'div',
+  direction,
+  gap,
+  align,
+  justify,
+  wrap,
+  ...props
+}: StackProps) {
+  return (
+    <Component
+      data-slot="stack"
+      className={stackVariants({ direction, gap, align, justify, wrap })}
+      {...props}
+    />
+  );
+}
+
+type VStackProps = Omit<StackProps, 'direction'>;
+
+function VStack({ gap, align, justify, wrap, ...props }: VStackProps) {
+  return <Stack direction="column" gap={gap} align={align} justify={justify} wrap={wrap} {...props} />;
+}
+
+type HStackProps = Omit<StackProps, 'direction'>;
+
+function HStack({ gap, align, justify, wrap, ...props }: HStackProps) {
+  return <Stack direction="row" gap={gap} align={align} justify={justify} wrap={wrap} {...props} />;
+}
+
+export { Stack, VStack, HStack, stackVariants };
+export type { StackProps, VStackProps, HStackProps };

package/src/components/atoms/switch.tsx

@@ -12,7 +12,7 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       data-size={size}
-      className="data-checked:bg-primary data-unchecked:bg-input 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 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50"
+      className="data-checked:bg-primary data-unchecked:bg-input 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 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 cursor-pointer"
       {...props}
     >
       <SwitchPrimitive.Thumb

package/src/components/atoms/text.tsx

@@ -47,10 +47,14 @@ interface TextProps
 }
 
 function Text({ as: Component = 'p', size, variant, weight, leading, font, ...props }: TextProps) {
+  const resolvedSize = size ?? 'base';
+  const isDefaultSize = size === undefined;
   return (
     <Component
       data-slot="text"
-      className={textVariants({ size, variant, weight, leading, font })}
+      data-size={resolvedSize}
+      data-default-size={isDefaultSize ? 'true' : undefined}
+      className={textVariants({ size: resolvedSize, variant, weight, leading, font })}
       {...props}
     />
   );

package/src/components/atoms/toggle.tsx

@@ -2,7 +2,7 @@ import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const toggleVariants = cva(
-  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer",
   {
     variants: {
       variant: {

package/src/components/molecules/accordion.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
-import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { ChevronDown, ChevronUp } from '@carbon/icons-react';
 
 function Accordion({ ...props }: Omit<AccordionPrimitive.Root.Props, 'className'>) {
   return (
@@ -27,11 +27,11 @@ function AccordionTrigger({
         {...props}
       >
         {children}
-        <ChevronDownIcon
+        <ChevronDown
           data-slot="accordion-trigger-icon"
           className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
         />
-        <ChevronUpIcon
+        <ChevronUp
           data-slot="accordion-trigger-icon"
           className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
         />

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/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']>;