@trycompai/design-system 1.0.0 → 1.0.2

package/src/components/{ui → molecules}/scroll-area.tsx

@@ -1,17 +1,18 @@
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 
-import { cn } from '../../../lib/utils';
-
-function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
+function ScrollArea({
+  children,
+  ...props
+}: Omit<ScrollAreaPrimitive.Root.Props, 'className'>) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn('relative', className)}
+      className="relative overflow-hidden size-full"
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -22,19 +23,15 @@ function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.
 }
 
 function ScrollBar({
-  className,
   orientation = 'vertical',
   ...props
-}: ScrollAreaPrimitive.Scrollbar.Props) {
+}: Omit<ScrollAreaPrimitive.Scrollbar.Props, 'className'>) {
   return (
     <ScrollAreaPrimitive.Scrollbar
       data-slot="scroll-area-scrollbar"
       data-orientation={orientation}
       orientation={orientation}
-      className={cn(
-        'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
-        className,
-      )}
+      className="data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none"
       {...props}
     >
       <ScrollAreaPrimitive.Thumb

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { Heading } from './heading';
-import { Stack } from './stack';
-import { Text } from './text';
+import { Heading } from '../atoms/heading';
+import { Text } from '../atoms/text';
+import { Stack } from '../atoms/stack';
 
 interface SectionProps extends Omit<React.ComponentProps<'section'>, 'className'> {
   title?: string;

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { Select as SelectPrimitive } from '@base-ui/react/select';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { Checkmark, ChevronDown, ChevronUp } from '@carbon/icons-react';
 import * as React from 'react';
 
 const Select = SelectPrimitive.Root;
@@ -18,9 +18,21 @@ function SelectValue({
   placeholder?: string;
 }) {
   return (
-    <SelectPrimitive.Value data-slot="select-value" className="flex flex-1 text-left" {...props}>
-      {placeholder}
-    </SelectPrimitive.Value>
+    <>
+      <SelectPrimitive.Value
+        data-slot="select-value"
+        className="flex-1 text-left data-[placeholder]:hidden"
+        {...props}
+      />
+      {placeholder && (
+        <span
+          data-slot="select-placeholder"
+          className="text-muted-foreground [[data-slot=select-value]:not([data-placeholder])~&]:hidden"
+        >
+          {placeholder}
+        </span>
+      )}
+    </>
   );
 }
 
@@ -35,12 +47,12 @@ function SelectTrigger({
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
-      className="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0"
+      className="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:data-[placeholder]:absolute *:data-[slot=select-value]:data-[placeholder]:w-0 *:data-[slot=select-value]:data-[placeholder]:overflow-hidden *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-full items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0"
       {...props}
     >
       {children}
       <SelectPrimitive.Icon
-        render={<ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />}
+        render={<ChevronDown className="text-muted-foreground size-4 pointer-events-none" />}
       />
     </SelectPrimitive.Trigger>
   );
@@ -71,7 +83,7 @@ function SelectContent({
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
-          className="bg-popover text-popover-foreground 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 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto"
+          className="bg-popover text-popover-foreground 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 min-w-(--anchor-width) max-w-80 rounded-lg p-1 shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto"
           {...props}
         >
           <SelectScrollUpButton />
@@ -108,7 +120,7 @@ function SelectItem({ children, ...props }: Omit<SelectPrimitive.Item.Props, 'cl
           <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" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   );
@@ -133,7 +145,7 @@ function SelectScrollUpButton({
       className="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full"
       {...props}
     >
-      <ChevronUpIcon />
+      <ChevronUp />
     </SelectPrimitive.ScrollUpArrow>
   );
 }
@@ -147,7 +159,7 @@ function SelectScrollDownButton({
       className="bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full"
       {...props}
     >
-      <ChevronDownIcon />
+      <ChevronDown />
     </SelectPrimitive.ScrollDownArrow>
   );
 }

package/src/components/molecules/settings.tsx

@@ -0,0 +1,169 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { Heading } from '../atoms/heading';
+import { Stack } from '../atoms/stack';
+import { Text } from '../atoms/text';
+
+const settingRowVariants = cva(
+  'flex w-full items-start justify-between gap-4 py-4 first:pt-0 last:pb-0',
+  {
+    variants: {
+      size: {
+        default: 'py-4',
+        sm: 'py-3',
+        lg: 'py-5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+interface SettingRowProps
+  extends Omit<React.ComponentProps<'div'>, 'className'>,
+    VariantProps<typeof settingRowVariants> {
+  /** The setting label */
+  label: string;
+  /** Optional description text */
+  description?: string;
+  /** Whether the setting is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * A horizontal row for a single setting with label/description on the left
+ * and a control (switch, button, select, etc.) on the right.
+ */
+function SettingRow({
+  label,
+  description,
+  disabled,
+  size,
+  children,
+  ...props
+}: SettingRowProps) {
+  return (
+    <div
+      data-slot="setting-row"
+      data-disabled={disabled || undefined}
+      className={settingRowVariants({ size })}
+      {...props}
+    >
+      <div className="min-w-0 flex-1">
+        <Stack gap="1">
+          <Text weight="medium" variant={disabled ? 'muted' : undefined}>
+            {label}
+          </Text>
+          {description && (
+            <Text size="sm" variant="muted">
+              {description}
+            </Text>
+          )}
+        </Stack>
+      </div>
+      <div className="flex shrink-0 items-center">{children}</div>
+    </div>
+  );
+}
+
+interface SettingGroupProps extends Omit<React.ComponentProps<'div'>, 'className'> {
+  /** Whether to show dividers between rows */
+  divided?: boolean;
+}
+
+/**
+ * Groups multiple SettingRow components together, optionally with dividers.
+ */
+function SettingGroup({ divided = true, children, ...props }: SettingGroupProps) {
+  return (
+    <div
+      data-slot="setting-group"
+      data-divided={divided || undefined}
+      className={
+        divided
+          ? '[&>[data-slot=setting-row]:not(:last-child)]:border-border [&>[data-slot=setting-row]:not(:last-child)]:border-b'
+          : ''
+      }
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SettingLabelProps extends Omit<React.ComponentProps<'div'>, 'className'> {}
+
+/**
+ * Custom label area for complex setting rows. Use when you need more than just text.
+ */
+function SettingLabel({ children, ...props }: SettingLabelProps) {
+  return (
+    <div data-slot="setting-label" className="min-w-0 flex-1" {...props}>
+      {children}
+    </div>
+  );
+}
+
+interface SettingControlProps extends Omit<React.ComponentProps<'div'>, 'className'> {}
+
+/**
+ * Control area for setting rows. Use when you need multiple controls or custom layout.
+ */
+function SettingControl({ children, ...props }: SettingControlProps) {
+  return (
+    <div data-slot="setting-control" className="flex shrink-0 items-center gap-2" {...props}>
+      {children}
+    </div>
+  );
+}
+
+interface SettingsCardProps extends Omit<React.ComponentProps<'div'>, 'className'> {
+  /** Card title */
+  title: string;
+  /** Optional description */
+  description?: string;
+  /** Hint text shown in footer (left side) */
+  hint?: React.ReactNode;
+  /** Action button/content shown in footer (right side) */
+  action?: React.ReactNode;
+}
+
+/**
+ * A self-contained settings card with title, description, content area, and footer.
+ * Footer shows hint text on left and action button on right.
+ */
+function SettingsCard({ title, description, hint, action, children, ...props }: SettingsCardProps) {
+  const hasFooter = hint || action;
+
+  return (
+    <div
+      data-slot="settings-card"
+      className="bg-card text-card-foreground rounded-xl border shadow-sm"
+      {...props}
+    >
+      <div className="px-6 pt-6 pb-4">
+        <Stack gap="1">
+          <Text weight="semibold">{title}</Text>
+          {description && (
+            <Text size="sm" variant="muted">
+              {description}
+            </Text>
+          )}
+        </Stack>
+      </div>
+      <div className="px-6 pb-6">{children}</div>
+      {hasFooter && (
+        <div className="border-t bg-muted/30 px-6 py-4">
+          <div className="flex items-center justify-between gap-4">
+            <div className="text-muted-foreground text-sm">{hint}</div>
+            <div className="flex shrink-0 items-center gap-2">{action}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { SettingControl, SettingGroup, SettingLabel, SettingRow, SettingsCard };

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

@@ -1,9 +1,22 @@
 import * as React from 'react';
 
-function Table({ ...props }: Omit<React.ComponentProps<'table'>, 'className'>) {
+function Table({
+  variant = 'default',
+  ...props
+}: Omit<React.ComponentProps<'table'>, 'className'> & {
+  variant?: 'default' | 'bordered';
+}) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table data-slot="table" className="w-full caption-bottom text-sm" {...props} />
+    <div
+      data-slot="table-container"
+      data-variant={variant}
+      className="relative w-full overflow-x-auto data-[variant=bordered]:border data-[variant=bordered]:rounded-lg"
+    >
+      <table
+        data-slot="table"
+        className="w-full caption-bottom text-sm [&_[data-slot=text][data-default-size=true]]:text-sm"
+        {...props}
+      />
     </div>
   );
 }

package/src/components/molecules/tabs.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+function Tabs({
+  orientation = 'horizontal',
+  ...props
+}: Omit<TabsPrimitive.Root.Props, 'className'>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className="group/tabs flex data-[orientation=horizontal]:flex-col"
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none data-[variant=underline]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+        underline: 'p-0 pb-px bg-transparent w-full justify-start items-stretch shadow-[inset_0_-1px_0_0_var(--color-border)]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function TabsList({
+  variant = 'default',
+  ...props
+}: Omit<TabsPrimitive.List.Props, 'className'> & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={tabsListVariants({ variant })}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ ...props }: Omit<TabsPrimitive.Tab.Props, 'className'>) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none group-data-[variant=underline]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:bg-transparent group-data-[variant=underline]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:px-3 group-data-[variant=underline]/tabs-list:py-2 group-data-[variant=underline]/tabs-list:mb-0 group-data-[variant=underline]/tabs-list:hover:bg-muted group-data-[variant=underline]/tabs-list:rounded-t-md group-data-[variant=underline]/tabs-list:flex-none group-data-[variant=underline]/tabs-list:justify-start group-data-[variant=underline]/tabs-list:text-left dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=underline]/tabs-list:data-active:border-transparent dark:group-data-[variant=underline]/tabs-list:data-active:bg-transparent data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:after:bg-foreground group-data-[variant=underline]/tabs-list:after:bg-primary group-data-[variant=line]/tabs-list:data-active:after:opacity-100 group-data-[variant=underline]/tabs-list:after:h-[3px] group-data-[variant=underline]/tabs-list:after:bottom-0 group-data-[variant=underline]/tabs-list:after:rounded-t-sm group-data-[variant=underline]/tabs-list:h-auto group-data-[variant=underline]/tabs-list:data-active:after:opacity-100"
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ ...props }: Omit<TabsPrimitive.Panel.Props, 'className'>) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className="text-sm flex-1 outline-none animate-in fade-in-0 duration-200"
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };

package/src/components/molecules/theme-switcher.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Moon, Screen, Sun } from '@carbon/icons-react';
+import * as React from 'react';
+
+const themeSwitcherVariants = cva(
+  'inline-flex items-center rounded-full p-0.5 bg-muted',
+  {
+    variants: {
+      size: {
+        sm: 'gap-0.5',
+        default: 'gap-0.5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+const themeSwitcherButtonVariants = cva(
+  'inline-flex items-center justify-center rounded-full transition-all duration-200',
+  {
+    variants: {
+      size: {
+        sm: 'size-6 [&_svg]:size-3',
+        default: 'size-7 [&_svg]:size-3.5',
+      },
+      isActive: {
+        true: 'bg-background text-foreground shadow-sm',
+        false: 'text-muted-foreground hover:text-foreground',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      isActive: false,
+    },
+  },
+);
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeSwitcherProps
+  extends Omit<React.ComponentProps<'div'>, 'className' | 'onChange'>,
+    VariantProps<typeof themeSwitcherVariants> {
+  /** Current theme value */
+  value?: Theme;
+  /** Default theme value (uncontrolled) */
+  defaultValue?: Theme;
+  /** Called when theme changes */
+  onChange?: (theme: Theme) => void;
+  /** Show system option */
+  showSystem?: boolean;
+}
+
+function ThemeSwitcher({
+  value: valueProp,
+  defaultValue = 'system',
+  onChange,
+  showSystem = true,
+  size = 'default',
+  ...props
+}: ThemeSwitcherProps) {
+  const [internalValue, setInternalValue] = React.useState<Theme>(defaultValue);
+  const value = valueProp ?? internalValue;
+
+  const handleChange = (newTheme: Theme) => {
+    if (valueProp === undefined) {
+      setInternalValue(newTheme);
+    }
+    onChange?.(newTheme);
+  };
+
+  const options: { value: Theme; icon: React.ReactNode; label: string }[] = [
+    { value: 'light', icon: <Sun />, label: 'Light mode' },
+    { value: 'dark', icon: <Moon />, label: 'Dark mode' },
+    ...(showSystem
+      ? [{ value: 'system' as Theme, icon: <Screen />, label: 'System theme' }]
+      : []),
+  ];
+
+  return (
+    <div
+      data-slot="theme-switcher"
+      role="radiogroup"
+      aria-label="Theme"
+      className={themeSwitcherVariants({ size })}
+      {...props}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          role="radio"
+          aria-checked={value === option.value}
+          aria-label={option.label}
+          onClick={() => handleChange(option.value)}
+          className={themeSwitcherButtonVariants({
+            size,
+            isActive: value === option.value,
+          })}
+        >
+          {option.icon}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// Simple light/dark toggle for compact spaces
+interface ThemeToggleProps extends Omit<React.ComponentProps<'button'>, 'className' | 'onChange'> {
+  /** Current theme - true for dark, false for light */
+  isDark?: boolean;
+  /** Called when theme changes */
+  onChange?: (isDark: boolean) => void;
+  /** Size variant */
+  size?: 'sm' | 'default';
+}
+
+function ThemeToggle({
+  isDark: isDarkProp,
+  onChange,
+  size = 'default',
+  ...props
+}: ThemeToggleProps) {
+  const [internalIsDark, setInternalIsDark] = React.useState(false);
+  const isDark = isDarkProp ?? internalIsDark;
+
+  const handleToggle = () => {
+    const newValue = !isDark;
+    if (isDarkProp === undefined) {
+      setInternalIsDark(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const iconSize = size === 'sm' ? 'size-3' : 'size-3.5';
+  const buttonSize = size === 'sm' ? 'h-6 w-12' : 'h-7 w-14';
+  const thumbSize = size === 'sm' ? 'size-5' : 'size-6';
+  const thumbTranslate = size === 'sm' ? 'translate-x-[26px]' : 'translate-x-[30px]';
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isDark}
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      onClick={handleToggle}
+      data-slot="theme-toggle"
+      className={`${buttonSize} relative inline-flex items-center rounded-full bg-muted p-0.5 transition-colors`}
+      {...props}
+    >
+      {/* Background icons */}
+      <span className="absolute inset-0 flex items-center justify-between px-1.5">
+        <Sun className={`${iconSize} text-amber-500`} />
+        <Moon className={`${iconSize} text-blue-400`} />
+      </span>
+      {/* Sliding thumb */}
+      <span
+        className={`${thumbSize} relative z-10 flex items-center justify-center rounded-full bg-background shadow-sm transition-transform duration-200 ${
+          isDark ? thumbTranslate : 'translate-x-0'
+        }`}
+      >
+        {isDark ? (
+          <Moon className={`${iconSize} text-blue-500`} />
+        ) : (
+          <Sun className={`${iconSize} text-amber-500`} />
+        )}
+      </span>
+    </button>
+  );
+}
+
+export { ThemeSwitcher, ThemeToggle };
+export type { ThemeSwitcherProps, ThemeToggleProps, Theme };

package/src/components/{ui → molecules}/toggle-group.tsx

@@ -6,7 +6,7 @@ import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
-import { toggleVariants } from './toggle';
+import { toggleVariants } from '../atoms/toggle';
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {