@trycompai/design-system 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.0",
+  "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",
@@ -48,7 +49,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/trycompai/comp.git",
-    "directory": "packages/ui-shadcn"
+    "directory": "packages/design-system"
   },
   "license": "MIT",
   "keywords": [
@@ -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

@@ -0,0 +1,49 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const badgeVariants = cva(
+  '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:
+          'bg-primary text-primary-foreground [a]:hover:bg-primary/90',
+        secondary:
+          'bg-muted text-muted-foreground [a]:hover:bg-muted/80',
+        destructive:
+          '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-border/50 bg-transparent text-foreground [a]:hover:bg-muted/30',
+        ghost:
+          'bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+        link: 'bg-transparent text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+type BadgeProps = Omit<useRender.ComponentProps<'span'>, 'className'> &
+  VariantProps<typeof badgeVariants>;
+
+function Badge({ variant = 'default', render, ...props }: BadgeProps) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: badgeVariants({ variant }),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,21 @@
+export * from './aspect-ratio';
+export * from './avatar';
+export * from './badge';
+export * from './button';
+export * from './checkbox';
+export * from './container';
+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';
+export * from './toggle';

package/src/components/atoms/kbd.tsx

@@ -0,0 +1,21 @@
+function Kbd({ ...props }: Omit<React.ComponentProps<'kbd'>, 'className'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className="bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none"
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className="gap-1 inline-flex items-center"
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };

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/{ui → atoms}/slider.tsx

@@ -17,7 +17,7 @@ function Slider({
 
   return (
     <SliderPrimitive.Root
-      className="data-horizontal:w-full data-vertical:h-full"
+      className="data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full"
       data-slot="slider"
       defaultValue={defaultValue}
       value={value}
@@ -26,14 +26,14 @@ function Slider({
       thumbAlignment="edge"
       {...props}
     >
-      <SliderPrimitive.Control className="data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col">
+      <SliderPrimitive.Control className="data-[orientation=vertical]:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col">
         <SliderPrimitive.Track
           data-slot="slider-track"
-          className="bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative overflow-hidden select-none"
+          className="bg-border rounded-full h-1.5 w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 relative overflow-hidden select-none"
         >
           <SliderPrimitive.Indicator
             data-slot="slider-range"
-            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+            className="bg-primary select-none h-full data-[orientation=vertical]:w-full"
           />
         </SliderPrimitive.Track>
         {Array.from({ length: _values.length }, (_, index) => (

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

@@ -1,10 +1,16 @@
 import * as React from 'react';
 
-function Textarea({ ...props }: Omit<React.ComponentProps<'textarea'>, 'className'>) {
+function Textarea({
+  size = 'default',
+  ...props
+}: Omit<React.ComponentProps<'textarea'>, 'className'> & {
+  size?: 'sm' | 'default' | 'lg' | 'full';
+}) {
   return (
     <textarea
       data-slot="textarea"
-      className="border-input dark:bg-input/30 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 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      data-size={size}
+      className="border-input dark:bg-input/30 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 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=sm]:w-xs data-[size=default]:w-md data-[size=lg]:w-xl data-[size=full]:w-full"
       {...props}
     />
   );

package/src/components/{ui → atoms}/toggle.tsx

@@ -1,10 +1,8 @@
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../../lib/utils';
-
 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: {
@@ -25,15 +23,14 @@ const toggleVariants = cva(
 );
 
 function Toggle({
-  className,
   variant = 'default',
   size = 'default',
   ...props
-}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+}: Omit<TogglePrimitive.Props, 'className'> & VariantProps<typeof toggleVariants>) {
   return (
     <TogglePrimitive
       data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
+      className={toggleVariants({ variant, size })}
       {...props}
     />
   );

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