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

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

@@ -1,331 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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;