@licklist/design 0.78.5-dev.107 → 0.78.5-dev.108

package/src/v2/shadcn/_reference/StyleGuideContent.tsx

@@ -0,0 +1,331 @@
+import React from 'react';
+
+interface StyleGuideContentProps {
+  typographyScale: Array<{
+    name: string;
+    size: string;
+    weight: string;
+    lineHeight: string;
+    letterSpacing: string;
+    fontFamily: string;
+    class: string;
+  }>;
+  baseColors: Array<{
+    name: string;
+    prefix: string;
+    shades: Array<{ value: string; hex: string }>;
+  }>;
+  mainColors: Array<{
+    category: string;
+    tokens: Array<{ name: string; maps: string; hex: string }>;
+  }>;
+  semanticColors: Array<{
+    name: string;
+    tokens: Array<{ name: string; maps: string; hex: string }>;
+  }>;
+  mappedColors: {
+    label: string[];
+    surface: string[];
+    border: string[];
+    fill: string[];
+    gradient: string[];
+  };
+  gradientInfo: {
+    light: Array<{ stop: string; maps: string; hex: string }>;
+    dark: Array<{ stop: string; maps: string; hex: string }>;
+  };
+  customIcons?: {
+    navigation: Array<{ name: string; file: string; usage: string }>;
+    user: Array<{ name: string; file: string; usage: string }>;
+    interface: Array<{ name: string; file: string; usage: string }>;
+    theme: Array<{ name: string; file: string; usage: string }>;
+    branding: Array<{ name: string; file: string; usage: string }>;
+  };
+}
+
+const StyleGuideContent: React.FC<StyleGuideContentProps> = ({
+  typographyScale,
+  baseColors,
+  mainColors,
+  semanticColors,
+  mappedColors,
+  gradientInfo,
+  customIcons,
+}) => {
+  return (
+    <>
+      {/* Anchor Navigation */}
+      <div className="flex items-start gap-4 self-stretch py-4 px-4 bg-surface-secondary rounded-lg sticky top-14 z-10">
+        <a href="#icons" className="text-[13px] font-semibold text-label-secondary hover:text-label-primary transition-colors">
+          Icons
+        </a>
+        <span className="text-label-secondary">•</span>
+        <a href="#typography" className="text-[13px] font-semibold text-label-secondary hover:text-label-primary transition-colors">
+          Typography
+        </a>
+        <span className="text-label-secondary">•</span>
+        <a href="#base-colors" className="text-[13px] font-semibold text-label-secondary hover:text-label-primary transition-colors">
+          Base Colors
+        </a>
+        <span className="text-label-secondary">•</span>
+        <a href="#main-colors" className="text-[13px] font-semibold text-label-secondary hover:text-label-primary transition-colors">
+          Main Colors
+        </a>
+        <span className="text-label-secondary">•</span>
+        <a href="#semantic-colors" className="text-[13px] font-semibold text-label-secondary hover:text-label-primary transition-colors">
+          Semantic Colors
+        </a>
+        <span className="text-label-secondary">•</span>
+        <a href="#mapped-colors" className="text-[13px] font-semibold text-label-secondary hover:text-label-primary transition-colors">
+          Mapped Colors
+        </a>
+      </div>
+
+      {/* Icons Section */}
+      {customIcons && (
+        <div id="icons" className="flex flex-col gap-4 self-stretch">
+          <h2 className="text-label-primary text-xl font-semibold leading-6">Custom Icon System</h2>
+          <p className="text-label-secondary text-sm">
+            Custom SVG icons designed specifically for this application. These icons maintain consistent sizing and styling across the interface.
+          </p>
+          
+          {Object.entries(customIcons).map(([category, icons]) => (
+            <div key={category} className="flex flex-col gap-3">
+              <h3 className="text-label-primary text-base font-semibold capitalize">{category} Icons</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                {icons.map((icon) => (
+                  <div key={icon.name} className="flex items-center gap-4 p-4 bg-surface-secondary rounded-lg">
+                    <div className="w-12 h-12 flex items-center justify-center bg-surface-primary rounded-lg">
+                      <img 
+                        src={`/src/assets/${icon.file}`} 
+                        alt={icon.name}
+                        className="w-8 h-8"
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <div className="text-label-primary font-semibold text-sm">{icon.name}</div>
+                      <div className="text-label-secondary text-xs mt-1">{icon.usage}</div>
+                      <div className="text-label-tertiary text-xs font-mono mt-1">{icon.file}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Typography Section */}
+      <div id="typography" className="flex flex-col gap-4 self-stretch">
+        <h2 className="text-label-primary text-xl font-semibold leading-6">Typography Scale</h2>
+        <div className="flex flex-col gap-3">
+          {typographyScale.map((type) => (
+            <div key={type.name} className="flex items-center gap-4 p-4 bg-surface-secondary rounded-lg">
+              <div className="flex-1 min-w-[200px]">
+                <div className="text-label-primary font-semibold text-sm">{type.name}</div>
+                <div className="text-label-secondary text-xs mt-1">
+                  {type.size} / {type.weight} / {type.lineHeight}
+                </div>
+                <div className="text-label-secondary text-xs mt-1">
+                  <strong>Family:</strong> {type.fontFamily}
+                </div>
+                <div className="text-label-secondary text-xs">
+                  <strong>Style:</strong> normal / <strong>Spacing:</strong> {type.letterSpacing}
+                </div>
+              </div>
+              <div className="flex-1">
+                <div className={type.class}>The quick brown fox</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Base Colors Section */}
+      <div id="base-colors" className="flex flex-col gap-4 self-stretch">
+        <h2 className="text-label-primary text-xl font-semibold leading-6">Base Colors</h2>
+        <div className="grid grid-cols-1 gap-4">
+          {baseColors.map((color) => (
+            <div key={color.name} className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+              <h3 className="text-label-primary font-semibold text-sm mb-2">{color.name}</h3>
+              <div className="grid grid-cols-5 gap-2 max-sm:grid-cols-2">
+                {color.shades.map((shade) => (
+                  <div key={shade.value} className="flex flex-col gap-2">
+                    <div
+                      className="h-16 rounded border border-border-primary"
+                      style={{ backgroundColor: shade.hex }}
+                    />
+                    <div className="text-label-secondary text-xs">
+                      <div className="font-semibold">{color.prefix}-{shade.value}</div>
+                      <code className="text-[10px] text-label-secondary font-mono">
+                        {shade.hex}
+                      </code>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Main Colors Section */}
+      <div id="main-colors" className="flex flex-col gap-4 self-stretch">
+        <h2 className="text-label-primary text-xl font-semibold leading-6">Main Colors (Semantic Names)</h2>
+        
+        {mainColors.map((colorGroup) => (
+          <div key={colorGroup.category} className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+            <h3 className="text-label-primary font-semibold text-sm mb-2">{colorGroup.category}</h3>
+            <div className="grid grid-cols-4 gap-2 max-sm:grid-cols-2">
+              {colorGroup.tokens.map((token) => (
+                <div key={token.name} className="flex flex-col gap-2">
+                  <div
+                    className="h-16 rounded border border-border-primary"
+                    style={{ backgroundColor: token.hex }}
+                  />
+                  <div className="text-label-secondary text-xs">
+                    <div className="font-semibold">{colorGroup.category.toLowerCase()}-{token.name}</div>
+                    <div className="text-[10px]">→ {token.maps}</div>
+                    <code className="text-[10px] text-label-secondary font-mono">
+                      {token.hex}
+                    </code>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Semantic Colors Section */}
+      <div id="semantic-colors" className="flex flex-col gap-4 self-stretch">
+        <h2 className="text-label-primary text-xl font-semibold leading-6">Semantic Theme Colors</h2>
+        {semanticColors.map((semantic) => (
+          <div key={semantic.name} className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+            <h3 className="text-label-primary font-semibold text-sm mb-2">{semantic.name}</h3>
+            <div className="grid grid-cols-4 gap-2 max-sm:grid-cols-2">
+              {semantic.tokens.map((token) => (
+                <div key={token.name} className="flex flex-col gap-2">
+                  <div
+                    className="h-16 rounded border border-border-primary"
+                    style={{ backgroundColor: token.hex }}
+                  />
+                  <div className="text-label-secondary text-xs">
+                    <div className="font-semibold">{semantic.name.toLowerCase()}-{token.name}</div>
+                    <div className="text-[10px]">→ {token.maps}</div>
+                    <code className="text-[10px] text-label-secondary font-mono">
+                      {token.hex}
+                    </code>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Mapped Colors Section */}
+      <div id="mapped-colors" className="flex flex-col gap-4 self-stretch">
+        <h2 className="text-label-primary text-xl font-semibold leading-6">Mapped Colors</h2>
+        
+        {/* Label Tokens */}
+        <div className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+          <h3 className="text-label-primary font-semibold text-sm mb-2">Label Tokens</h3>
+          <div className="grid grid-cols-3 gap-2 max-sm:grid-cols-1">
+            {mappedColors.label.map((token) => (
+              <div key={token} className="flex items-center gap-2 p-2 bg-surface-primary rounded border border-border-primary">
+                <div className={`w-6 h-6 rounded border border-border-primary flex-shrink-0`} style={{ backgroundColor: `var(--label-${token})` }} />
+                <code className="text-xs text-label-primary font-mono">label-{token}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Surface Tokens */}
+        <div className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+          <h3 className="text-label-primary font-semibold text-sm mb-2">Surface Tokens</h3>
+          <div className="grid grid-cols-3 gap-2 max-sm:grid-cols-1">
+            {mappedColors.surface.map((token) => (
+              <div key={token} className="flex items-center gap-2 p-2 bg-surface-primary rounded border border-border-primary">
+                <div className={`w-6 h-6 rounded border border-border-primary flex-shrink-0 bg-surface-${token}`} />
+                <code className="text-xs text-label-primary font-mono">surface-{token}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Border Tokens */}
+        <div className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+          <h3 className="text-label-primary font-semibold text-sm mb-2">Border Tokens</h3>
+          <div className="grid grid-cols-3 gap-2 max-sm:grid-cols-1">
+            {mappedColors.border.map((token) => (
+              <div key={token} className="flex items-center gap-2 p-2 bg-surface-primary rounded border border-border-primary">
+                <div className={`w-6 h-6 rounded flex-shrink-0 border-2`} style={{ borderColor: `var(--border-${token})` }} />
+                <code className="text-xs text-label-primary font-mono">border-{token}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Fill Tokens */}
+        <div className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+          <h3 className="text-label-primary font-semibold text-sm mb-2">Fill Tokens</h3>
+          <div className="grid grid-cols-3 gap-2 max-sm:grid-cols-1">
+            {mappedColors.fill.map((token) => (
+              <div key={token} className="flex items-center gap-2 p-2 bg-surface-primary rounded border border-border-primary">
+                <div className={`w-6 h-6 rounded border border-border-primary flex-shrink-0`} style={{ backgroundColor: `var(--fill-${token})` }} />
+                <code className="text-xs text-label-primary font-mono">fill-{token}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Gradients - Light Mode */}
+        <div className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+          <h3 className="text-label-primary font-semibold text-sm mb-2">Gradient Stops (Light Mode)</h3>
+          <div className="grid grid-cols-3 gap-3 max-sm:grid-cols-1">
+            {gradientInfo.light.map((info) => (
+              <div key={info.stop} className="flex items-center gap-3 p-3 bg-surface-primary rounded border border-border-primary">
+                <div
+                  className="w-12 h-12 rounded border border-border-primary flex-shrink-0"
+                  style={{ backgroundColor: info.hex }}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="text-label-primary font-semibold text-xs truncate">gradient-{info.stop}</div>
+                  <div className="text-label-secondary text-[10px] truncate">→ {info.maps}</div>
+                  <code className="text-[10px] text-label-secondary font-mono">
+                    {info.hex}
+                  </code>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Gradients - Dark Mode */}
+        <div className="flex flex-col gap-2 p-4 bg-surface-secondary rounded-lg">
+          <h3 className="text-label-primary font-semibold text-sm mb-2">Gradient Stops (Dark Mode)</h3>
+          <div className="grid grid-cols-3 gap-3 max-sm:grid-cols-1">
+            {gradientInfo.dark.map((info) => (
+              <div key={info.stop} className="flex items-center gap-3 p-3 bg-surface-primary rounded border border-border-primary">
+                <div
+                  className="w-12 h-12 rounded border border-border-primary flex-shrink-0"
+                  style={{ backgroundColor: info.hex }}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="text-label-primary font-semibold text-xs truncate">gradient-{info.stop}</div>
+                  <div className="text-label-secondary text-[10px] truncate">→ {info.maps}</div>
+                  <code className="text-[10px] text-label-secondary font-mono">
+                    {info.hex}
+                  </code>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default StyleGuideContent;

package/src/v2/shadcn/_reference/TableActionMenu.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { IconCross } from '../../icons';
+
+export interface MenuItem {
+  label: string;
+  onClick: () => void;
+  variant?: 'default' | 'danger';
+}
+
+interface TableActionMenuProps {
+  items: MenuItem[];
+}
+
+/**
+ * Reusable circular action button with the soft-action surface and fill-action icon tint.
+ * Used standalone (with `icon` + `onClick`) or as the trigger for TableActionMenu.
+ */
+export const ActionButton: React.FC<{
+  icon: React.ReactNode;
+  onClick: () => void;
+  className?: string;
+}> = ({ icon, onClick, className = '' }) => (
+  <button
+    onClick={onClick}
+    className={`w-8 h-8 relative flex items-center justify-center hover:opacity-80 transition-opacity flex-shrink-0 ${className}`}
+  >
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="absolute inset-0">
+      <circle cx="16" cy="16" r="16" className="fill-surface-action-soft" />
+    </svg>
+    <span className="relative z-10 text-fill-action flex items-center justify-center">
+      {icon}
+    </span>
+  </button>
+);
+
+const ThreeDotsIcon = () => (
+  <svg width="18" height="4" viewBox="0 0 18 4" fill="none">
+    <path d="M2 0C3.10457 0 4 0.895431 4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0ZM9 0C10.1046 0 11 0.895431 11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2C7 0.895431 7.89543 0 9 0ZM16 0C17.1046 0 18 0.895431 18 2C18 3.10457 17.1046 4 16 4C14.8954 4 14 3.10457 14 2C14 0.895431 14.8954 0 16 0Z" className="fill-fill-action" />
+  </svg>
+);
+
+const TableActionMenu: React.FC<TableActionMenuProps> = ({ items }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, right: 0, openUpward: false });
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+  const handleToggle = () => {
+    if (!isMenuOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const spacing = 8;
+      
+      const estimatedMenuHeight = items.length * 40 + 16;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      
+      const shouldOpenUpward = spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow;
+      
+      setMenuPosition({
+        top: shouldOpenUpward ? rect.top - spacing : rect.bottom + spacing,
+        right: window.innerWidth - rect.right,
+        openUpward: shouldOpenUpward
+      });
+    }
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <div className="relative">
+      <button 
+        ref={buttonRef}
+        onClick={handleToggle}
+        className="w-8 h-8 relative flex items-center justify-center hover:opacity-80 transition-opacity flex-shrink-0"
+      >
+        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="absolute inset-0">
+          <circle cx="16" cy="16" r="16" className="fill-surface-action-soft" />
+        </svg>
+        {isMenuOpen ? (
+          <IconCross size={16} className="relative z-10 text-fill-action" />
+        ) : (
+          <span className="relative z-10">
+            <ThreeDotsIcon />
+          </span>
+        )}
+      </button>
+
+      {/* Dropdown Menu */}
+      {isMenuOpen && (
+        <>
+          <div 
+            className="fixed inset-0 z-40" 
+            onClick={() => setIsMenuOpen(false)}
+          />
+          <div 
+            className="fixed min-w-[160px] max-w-[240px] w-auto bg-surface-primary rounded-[16px] overflow-hidden z-50 animate-scale-in"
+            style={{ 
+              boxShadow: '0 4px 12px rgba(20, 33, 90, 0.2)',
+              [menuPosition.openUpward ? 'bottom' : 'top']: menuPosition.openUpward 
+                ? `${window.innerHeight - menuPosition.top}px` 
+                : `${menuPosition.top}px`,
+              right: `${menuPosition.right}px`
+            }}
+          >
+            {items.map((item, index) => (
+              <button
+                key={index}
+                onClick={() => {
+                  item.onClick();
+                  setIsMenuOpen(false);
+                }}
+                className={`w-full text-left px-4 py-3 text-[13px] font-medium transition-colors whitespace-nowrap ${
+                  item.variant === 'danger'
+                    ? 'text-label-danger hover:bg-surface-danger-soft-hover'
+                    : 'text-label-primary hover:bg-surface-primary-hover'
+                }`}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default TableActionMenu;

package/src/v2/shadcn/_reference/ThemeProvider.tsx

@@ -0,0 +1,119 @@
+import { createContext, useContext, useEffect, useState, useCallback } from "react"
+import { supabase } from "@/integrations/supabase/client"
+
+type Theme = "light" | "dark" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  // Sync theme from database on auth
+  useEffect(() => {
+    const loadThemeFromDb = async () => {
+      const { data: { user } } = await supabase.auth.getUser()
+      if (!user) return
+
+      const { data } = await supabase
+        .from('profiles')
+        .select('theme_preference')
+        .eq('id', user.id)
+        .single()
+
+      if (data?.theme_preference && data.theme_preference !== theme) {
+        const dbTheme = data.theme_preference as Theme
+        localStorage.setItem(storageKey, dbTheme)
+        setThemeState(dbTheme)
+      }
+    }
+
+    loadThemeFromDb()
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event) => {
+      if (event === 'SIGNED_IN') {
+        loadThemeFromDb()
+      }
+    })
+
+    return () => subscription.unsubscribe()
+  }, [])
+
+  // Apply theme to DOM
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    const applyTheme = (resolvedTheme: "light" | "dark") => {
+      root.classList.remove("light", "dark")
+      root.classList.add(resolvedTheme)
+    }
+
+    if (theme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+      const systemTheme = mediaQuery.matches ? "dark" : "light"
+      applyTheme(systemTheme)
+      
+      const handleChange = (e: MediaQueryListEvent) => {
+        applyTheme(e.matches ? "dark" : "light")
+      }
+      
+      mediaQuery.addEventListener("change", handleChange)
+      return () => mediaQuery.removeEventListener("change", handleChange)
+    } else {
+      applyTheme(theme)
+    }
+  }, [theme])
+
+  const setTheme = useCallback(async (newTheme: Theme) => {
+    localStorage.setItem(storageKey, newTheme)
+    setThemeState(newTheme)
+
+    // Persist to database
+    const { data: { user } } = await supabase.auth.getUser()
+    if (user) {
+      await supabase
+        .from('profiles')
+        .update({ theme_preference: newTheme })
+        .eq('id', user.id)
+    }
+  }, [storageKey])
+
+  const value = { theme, setTheme }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}

package/src/v2/shadcn/_reference/ThemeSettings.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useTheme } from './ThemeProvider';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group';
+import { Label } from './ui/label';
+import { LightModeIcon, DarkModeIcon, SystemModeIcon } from './icons/ThemeIcons';
+
+const ThemeSettings: React.FC = () => {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div className="flex flex-col gap-4 p-2 self-stretch bg-surface-primary rounded-lg">
+      <h3 className="text-label-primary text-xl font-semibold px-2">Theme</h3>
+      
+      <RadioGroup value={theme} onValueChange={(value) => setTheme(value as "light" | "dark" | "system")} className="flex flex-col gap-2">
+        <Label 
+          htmlFor="light" 
+          className="flex p-2 items-center gap-3 rounded-lg cursor-pointer hover:bg-surface-primary-hover transition-colors"
+        >
+          <div className="flex flex-col items-center justify-center gap-2 px-2 pb-2 pt-1 bg-surface-secondary rounded flex-shrink-0 w-[60px]">
+            <LightModeIcon />
+            <div className="flex items-center justify-center w-full">
+              <RadioGroupItem value="light" id="light" />
+            </div>
+          </div>
+          <div className="flex flex-col flex-1 min-w-0">
+            <span className="text-label-primary text-base font-semibold leading-tight">Light Mode</span>
+            <p className="text-label-secondary text-sm font-normal leading-normal">
+              Adopt a brighter, lighter theme.
+            </p>
+          </div>
+        </Label>
+
+        <Label 
+          htmlFor="dark" 
+          className="flex p-2 items-center gap-3 rounded-lg cursor-pointer hover:bg-surface-primary-hover transition-colors"
+        >
+          <div className="flex flex-col items-center justify-center gap-2 px-2 pb-2 pt-1 bg-surface-secondary rounded flex-shrink-0 w-[60px]">
+            <DarkModeIcon />
+            <div className="flex items-center justify-center w-full">
+              <RadioGroupItem value="dark" id="dark" />
+            </div>
+          </div>
+          <div className="flex flex-col flex-1 min-w-0">
+            <span className="text-label-primary text-base font-semibold leading-tight">Dark Mode</span>
+            <p className="text-label-secondary text-sm font-normal leading-normal">
+              Adopt a darker, richer theme.
+            </p>
+          </div>
+        </Label>
+
+        <Label 
+          htmlFor="system" 
+          className="flex p-2 items-center gap-3 rounded-lg cursor-pointer hover:bg-surface-primary-hover transition-colors"
+        >
+          <div className="flex flex-col items-center justify-center gap-2 px-2 pb-2 pt-1 bg-surface-secondary rounded flex-shrink-0 w-[60px]">
+            <SystemModeIcon />
+            <div className="flex items-center justify-center w-full">
+              <RadioGroupItem value="system" id="system" />
+            </div>
+          </div>
+          <div className="flex flex-col flex-1 min-w-0">
+            <span className="text-label-primary text-base font-semibold leading-tight">System</span>
+            <p className="text-label-secondary text-sm font-normal leading-normal">
+              Switch theme based on device settings.
+            </p>
+          </div>
+        </Label>
+      </RadioGroup>
+    </div>
+  );
+};
+
+export default ThemeSettings;