@gv-tech/design-system 1.1.0 → 1.2.0

package/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,108 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import { Moon, Sun, SunMoon } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+export interface ThemeToggleProps {
+  /**
+   * The mode of the theme toggle. 'binary' allows toggling between light and dark. 'ternary' allows choosing between
+   * light, dark, and system.
+   *
+   * @default 'binary'
+   */
+  variant?: 'binary' | 'ternary';
+  /** Optional callback when the theme changes. */
+  onThemeChange?: (theme: string) => void;
+  /** Optional current theme value for external control. */
+  customTheme?: string;
+  /** Optional className for the button. */
+  className?: string;
+}
+
+export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, className }: ThemeToggleProps) {
+  const { theme: nextTheme, setTheme: setNextTheme, resolvedTheme } = useTheme();
+
+  // Use customTheme if provided, otherwise fallback to next-themes
+  const currentTheme = customTheme ?? nextTheme;
+
+  // Determine the effective theme for icon rendering
+  const effectiveTheme = customTheme ? customTheme : resolvedTheme;
+  const isDark = effectiveTheme === 'dark';
+  const isSystem = currentTheme === 'system';
+
+  const handleThemeChange = (newTheme: string) => {
+    if (onThemeChange) {
+      onThemeChange(newTheme);
+    } else {
+      setNextTheme(newTheme);
+    }
+  };
+
+  const IconToggle = () => (
+    <>
+      <Sun
+        className={cn(
+          'h-[1.2rem] w-[1.2rem] transition-all',
+          !isSystem && !isDark ? 'rotate-0 scale-100' : '-rotate-90 scale-0',
+        )}
+      />
+      <Moon
+        className={cn(
+          'absolute h-[1.2rem] w-[1.2rem] transition-all',
+          !isSystem && isDark ? 'rotate-0 scale-100' : 'rotate-90 scale-0',
+        )}
+      />
+      <SunMoon
+        className={cn(
+          'absolute h-[1.2rem] w-[1.2rem] transition-all',
+          isSystem ? 'rotate-0 scale-100' : 'rotate-90 scale-0',
+        )}
+      />
+      <span className="sr-only">Toggle theme</span>
+    </>
+  );
+
+  if (variant === 'ternary') {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className={cn('h-9 w-9', className)}>
+            <IconToggle />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={() => handleThemeChange('light')}>
+            <Sun className="mr-2 h-4 w-4" />
+            <span>Light</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => handleThemeChange('dark')}>
+            <Moon className="mr-2 h-4 w-4" />
+            <span>Dark</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => handleThemeChange('system')}>
+            <SunMoon className="mr-2 h-4 w-4" />
+            <span>System</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn('h-9 w-9', className)}
+      onClick={() => handleThemeChange(currentTheme === 'dark' ? 'light' : 'dark')}
+      aria-label="Toggle theme"
+    >
+      <IconToggle />
+    </Button>
+  );
+}

package/src/components/ui/toast.test.tsx

@@ -0,0 +1,42 @@
+import { useToast } from '@/hooks/use-toast';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Toaster } from './toaster';
+
+// Test component to trigger toasts
+const ToastTrigger = () => {
+  const { toast } = useToast();
+  return (
+    <button
+      onClick={() =>
+        toast({
+          title: 'Test Toast',
+          description: 'This is a test message',
+        })
+      }
+    >
+      Show Toast
+    </button>
+  );
+};
+
+describe('Toast', () => {
+  it('shows toast when triggered', async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <Toaster />
+        <ToastTrigger />
+      </>,
+    );
+
+    expect(screen.queryByText('Test Toast')).not.toBeInTheDocument();
+
+    await user.click(screen.getByText('Show Toast'));
+
+    // Toast might take a moment to appear (animation)
+    expect(await screen.findByText('Test Toast')).toBeInTheDocument();
+    expect(screen.getByText('This is a test message')).toBeInTheDocument();
+  });
+});

package/src/components/ui/toggle-group.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+
+describe('ToggleGroup', () => {
+  it('renders correctly', () => {
+    render(
+      <ToggleGroup type="single">
+        <ToggleGroupItem value="a" aria-label="Toggle A">
+          A
+        </ToggleGroupItem>
+        <ToggleGroupItem value="b" aria-label="Toggle B">
+          B
+        </ToggleGroupItem>
+      </ToggleGroup>,
+    );
+
+    expect(screen.getByLabelText('Toggle A')).toBeInTheDocument();
+    expect(screen.getByLabelText('Toggle B')).toBeInTheDocument();
+  });
+
+  it('toggles selection', async () => {
+    const user = userEvent.setup();
+    render(
+      <ToggleGroup type="single">
+        <ToggleGroupItem value="a" aria-label="Toggle A">
+          A
+        </ToggleGroupItem>
+        <ToggleGroupItem value="b" aria-label="Toggle B">
+          B
+        </ToggleGroupItem>
+      </ToggleGroup>,
+    );
+
+    const toggleA = screen.getByLabelText('Toggle A');
+    await user.click(toggleA);
+    expect(toggleA).toHaveAttribute('aria-checked', 'true');
+  });
+});

package/src/components/ui/toggle.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Toggle } from './toggle';
+
+describe('Toggle', () => {
+  it('renders correctly', () => {
+    render(<Toggle aria-label="Toggle bold">B</Toggle>);
+    expect(screen.getByLabelText('Toggle bold')).toBeInTheDocument();
+  });
+
+  it('toggles state', async () => {
+    const user = userEvent.setup();
+    render(<Toggle aria-label="Toggle italic" />);
+    const toggle = screen.getByLabelText('Toggle italic');
+
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    await user.click(toggle);
+    expect(toggle).toHaveAttribute('aria-pressed', 'true');
+  });
+});

package/src/components/ui/tooltip.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+
+describe('Tooltip', () => {
+  it('shows content on hover', async () => {
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tooltip content</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+
+    expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument();
+
+    await user.hover(screen.getByText('Hover me'));
+    const tooltip = await screen.findByRole('tooltip');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent('Tooltip content');
+  });
+});

package/src/globals.css

@@ -34,47 +34,52 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 0 0% 96%;
+    --foreground: 222 47% 11%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 222 47% 11%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 225 73% 57%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 93 28% 54%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 92%;
+    --muted-foreground: 215 16% 47%;
+    --accent: 0 0% 88%;
+    --accent-foreground: 222 47% 11%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 89%;
+    --input: 0 0% 89%;
+    --ring: 222 47% 11%;
+    --radius: 0.5rem;
+
+    /* Brand Tokens */
+    --brand-green: 151 66% 27%;
+    --brand-blue: 225 73% 57%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --background: 0 0% 9%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 14%;
+    --card-foreground: 0 0% 100%;
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 227 96% 71%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 96 44% 61%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 6%;
+    --muted-foreground: 0 0% 70%;
+    --accent: 0 0% 15%;
+    --accent-foreground: 0 0% 100%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 18%;
+    --input: 0 0% 18%;
+    --ring: 0 0% 90%;
   }
 }
 

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/tokens';
 export * from './lib/utils';
 
 // UI Components
@@ -42,6 +43,7 @@ export * from './components/ui/switch';
 export * from './components/ui/table';
 export * from './components/ui/tabs';
 export * from './components/ui/textarea';
+export * from './components/ui/theme-toggle';
 export * from './components/ui/toast';
 export { Toaster as ToasterToast } from './components/ui/toaster';
 export * from './components/ui/toggle';

package/src/lib/tokens.ts

@@ -0,0 +1,54 @@
+/** Design system color tokens for Garcia Ventures. */
+export const tokens = {
+  colors: {
+    light: {
+      background: 'hsl(0 0% 96%)',
+      foreground: 'hsl(222 47% 11%)',
+      card: 'hsl(0 0% 100%)',
+      cardForeground: 'hsl(222 47% 11%)',
+      popover: 'hsl(0 0% 100%)',
+      popoverForeground: 'hsl(222 47% 11%)',
+      primary: 'hsl(225 73% 57%)',
+      primaryForeground: 'hsl(0 0% 100%)',
+      secondary: 'hsl(93 28% 54%)',
+      secondaryForeground: 'hsl(0 0% 100%)',
+      muted: 'hsl(0 0% 92%)',
+      mutedForeground: 'hsl(215 16% 47%)',
+      accent: 'hsl(0 0% 88%)',
+      accentForeground: 'hsl(222 47% 11%)',
+      destructive: 'hsl(0 84.2% 60.2%)',
+      destructiveForeground: 'hsl(0 0% 100%)',
+      border: 'hsl(0 0% 89%)',
+      input: 'hsl(0 0% 89%)',
+      ring: 'hsl(222 47% 11%)',
+    },
+    dark: {
+      background: 'hsl(0 0% 9%)',
+      foreground: 'hsl(0 0% 100%)',
+      card: 'hsl(0 0% 14%)',
+      cardForeground: 'hsl(0 0% 100%)',
+      popover: 'hsl(0 0% 11%)',
+      popoverForeground: 'hsl(0 0% 100%)',
+      primary: 'hsl(227 96% 71%)',
+      primaryForeground: 'hsl(0 0% 9%)',
+      secondary: 'hsl(96 44% 61%)',
+      secondaryForeground: 'hsl(0 0% 9%)',
+      muted: 'hsl(0 0% 6%)',
+      mutedForeground: 'hsl(0 0% 70%)',
+      accent: 'hsl(0 0% 15%)',
+      accentForeground: 'hsl(0 0% 100%)',
+      destructive: 'hsl(0 62.8% 30.6%)',
+      destructiveForeground: 'hsl(0 0% 100%)',
+      border: 'hsl(0 0% 18%)',
+      input: 'hsl(0 0% 18%)',
+      ring: 'hsl(0 0% 90%)',
+    },
+    brand: {
+      green: 'hsl(151 66% 27%)',
+      blue: 'hsl(225 73% 57%)',
+    },
+  },
+} as const;
+
+export type ThemeTokens = typeof tokens.colors.light;
+export type BrandTokens = typeof tokens.colors.brand;

package/src/pages/ColorTokensDocs.tsx

@@ -0,0 +1,181 @@
+import { CodeBlock } from '@/components/docs/CodeBlock';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { tokens } from '@/lib/tokens';
+
+export function ColorTokensDocs() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-2">
+        <h1 className="text-3xl font-bold tracking-tight">Color Tokens</h1>
+        <p className="text-lg text-muted-foreground">
+          A comprehensive token library for consistent branding across Garcia Ventures applications.
+        </p>
+      </div>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">The Color Theme</h2>
+        <p className="text-muted-foreground">
+          Our theme is designed to signal stability, intellect, and transparency. It follows a consistent hierarchy
+          across light and dark modes to ensure accessibility and professional aesthetics.
+        </p>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm font-medium">Core Palette</CardTitle>
+            </CardHeader>
+            <CardContent className="grid gap-4">
+              <div className="flex items-center gap-4">
+                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(225 73% 57%)' }} />
+                <div>
+                  <p className="text-sm font-medium">Primary (Blue)</p>
+                  <p className="text-xs text-muted-foreground">Royal Blue / Cornflower</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(93 28% 54%)' }} />
+                <div>
+                  <p className="text-sm font-medium">Secondary (Green)</p>
+                  <p className="text-xs text-muted-foreground">Asparagus / Pistachio</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(210 29% 98%)' }} />
+                <div>
+                  <p className="text-sm font-medium">Neutral (Off-White)</p>
+                  <p className="text-xs text-muted-foreground">Light Neutral / Floral White</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm font-medium">Brand Specifics</CardTitle>
+            </CardHeader>
+            <CardContent className="grid gap-4">
+              <div className="flex items-center gap-4">
+                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(151 66% 27%)' }} />
+                <div>
+                  <p className="text-sm font-medium">Brand Green</p>
+                  <p className="text-xs text-muted-foreground">#177245 (Stability)</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="h-10 w-10 rounded-md border" style={{ backgroundColor: 'hsl(225 73% 57%)' }} />
+                <div>
+                  <p className="text-sm font-medium">Brand Blue</p>
+                  <p className="text-xs text-muted-foreground">#4169e1 (Intellect)</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Usage: Tailwind CSS</h2>
+        <p className="text-muted-foreground">
+          All color tokens are mapped to standard Tailwind colors via CSS variables in our design system.
+        </p>
+        <CodeBlock
+          language="tsx"
+          code={`<div className="bg-primary text-primary-foreground">
+  Primary Content
+</div>
+<div className="text-secondary">
+  Secondary Accent
+</div>
+<div className="border-border bg-muted/30">
+  Muted Container
+</div>`}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Usage: TypeScript Tokens</h2>
+        <p className="text-muted-foreground">
+          For programmatic usage or non-Tailwind applications, you can import the raw token values.
+        </p>
+        <CodeBlock
+          language="tsx"
+          code={`import { tokens } from '@gv-tech/design-system';
+
+// Accessing HSL values
+const primary = tokens.colors.light.primary;
+const brandGreen = tokens.colors.brand.green;`}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">CSS Variables Reference</h2>
+        <p className="text-muted-foreground">
+          Below is a complete reference of all semantic color tokens available in the design system.
+        </p>
+        <div className="rounded-md border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/50 hover:bg-muted/50">
+                <TableHead>Variable</TableHead>
+                <TableHead>Light Mode</TableHead>
+                <TableHead>Dark Mode</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {(Object.keys(tokens.colors.light) as Array<keyof typeof tokens.colors.light>).map((key) => (
+                <TableRow key={key}>
+                  <TableCell className="font-mono text-xs">
+                    --{key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="h-4 w-4 rounded-sm border"
+                        style={{ backgroundColor: tokens.colors.light[key] }}
+                      />
+                      <span className="text-muted-foreground">{tokens.colors.light[key]}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div className="h-4 w-4 rounded-sm border" style={{ backgroundColor: tokens.colors.dark[key] }} />
+                      <span className="text-muted-foreground">{tokens.colors.dark[key]}</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Brand Colors</h2>
+        <div className="rounded-md border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/50 hover:bg-muted/50">
+                <TableHead>Token</TableHead>
+                <TableHead>Value</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Object.entries(tokens.colors.brand).map(([key, value]) => (
+                <TableRow key={key}>
+                  <TableCell className="font-mono text-xs">tokens.colors.brand.{key}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div className="h-4 w-4 rounded-sm border" style={{ backgroundColor: value }} />
+                      <span className="text-muted-foreground">{value}</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </section>
+    </div>
+  );
+}