@gv-tech/design-system 2.1.0 → 2.2.0

package/dist/manifest.json

@@ -3,9 +3,9 @@
   "name": "GV Tech Design System",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "favicon.png",
+      "sizes": "512x512",
+      "type": "image/png"
     },
     {
       "src": "logo192.png",

package/dist/pages/ColorTokensDocs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorTokensDocs.d.ts","sourceRoot":"","sources":["../../src/pages/ColorTokensDocs.tsx"],"names":[],"mappings":"AAKA,wBAAgB,eAAe,4CA+K9B"}
+{"version":3,"file":"ColorTokensDocs.d.ts","sourceRoot":"","sources":["../../src/pages/ColorTokensDocs.tsx"],"names":[],"mappings":"AAKA,wBAAgB,eAAe,4CAoN9B"}

package/dist/pages/components/ThemeToggleDocs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggleDocs.d.ts","sourceRoot":"","sources":["../../../src/pages/components/ThemeToggleDocs.tsx"],"names":[],"mappings":"AAKA,wBAAgB,eAAe,4CAoH9B"}
+{"version":3,"file":"ThemeToggleDocs.d.ts","sourceRoot":"","sources":["../../../src/pages/components/ThemeToggleDocs.tsx"],"names":[],"mappings":"AAKA,wBAAgB,eAAe,4CA+I9B"}

package/dist/registry/alert-dialog.test.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "ui/alert-dialog.test.tsx",
-      "content": "import { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from './alert-dialog';\n\ndescribe('AlertDialog', () => {\n  it('renders correctly', async () => {\n    render(\n      <AlertDialog>\n        <AlertDialogTrigger>Open</AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>,\n    );\n\n    expect(screen.getByText('Open')).toBeInTheDocument();\n    expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();\n\n    await userEvent.click(screen.getByText('Open'));\n\n    await waitFor(() => {\n      expect(screen.getByRole('alertdialog')).toBeInTheDocument();\n      expect(screen.getByText('Are you sure?')).toBeInTheDocument();\n      expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();\n    });\n  });\n\n  it('closes when cancel is clicked', async () => {\n    render(\n      <AlertDialog>\n        <AlertDialogTrigger>Open</AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>,\n    );\n\n    await userEvent.click(screen.getByText('Open'));\n    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());\n\n    await userEvent.click(screen.getByText('Cancel'));\n    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());\n  });\n\n  it('closes when action is clicked', async () => {\n    render(\n      <AlertDialog>\n        <AlertDialogTrigger>Open</AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>,\n    );\n\n    await userEvent.click(screen.getByText('Open'));\n    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());\n\n    await userEvent.click(screen.getByText('Continue'));\n    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());\n  });\n});\n",
+      "content": "import { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from './alert-dialog';\n\ndescribe('AlertDialog', () => {\n  it('renders correctly', async () => {\n    render(\n      <AlertDialog>\n        <AlertDialogTrigger>Open</AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>,\n    );\n\n    expect(screen.getByText('Open')).toBeInTheDocument();\n    expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();\n\n    await userEvent.click(screen.getByText('Open'));\n\n    await waitFor(() => {\n      expect(screen.getByRole('alertdialog')).toBeInTheDocument();\n      expect(screen.getByText('Are you sure?')).toBeInTheDocument();\n      expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();\n    });\n  });\n\n  it('closes when cancel is clicked', async () => {\n    render(\n      <AlertDialog>\n        <AlertDialogTrigger>Open</AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>,\n    );\n\n    await userEvent.click(screen.getByText('Open'));\n    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());\n\n    await userEvent.click(screen.getByText('Cancel'));\n    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());\n  });\n\n  it('closes when action is clicked', async () => {\n    render(\n      <AlertDialog>\n        <AlertDialogTrigger>Open</AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>,\n    );\n\n    await userEvent.click(screen.getByText('Open'));\n    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());\n\n    await userEvent.click(screen.getByText('Continue'));\n    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());\n  });\n});\n",
       "type": "registry:ui"
     }
   ]

package/dist/registry/index.json

@@ -587,6 +587,13 @@
     ],
     "type": "registry:ui"
   },
+  {
+    "name": "theme-toggle.test",
+    "files": [
+      "ui/theme-toggle.test.tsx"
+    ],
+    "type": "registry:ui"
+  },
   {
     "name": "theme-toggle",
     "files": [

package/dist/registry/theme-toggle.json

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

package/dist/registry/theme-toggle.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "theme-toggle.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/theme-toggle.test.tsx",
+      "content": "import { ThemeToggle } from '@/components/ui/theme-toggle';\nimport { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { ThemeProvider } from 'next-themes';\nimport { describe, expect, it, vi } from 'vitest';\n\n// Mock the useTheme hook to control its return values\nvi.mock('@/hooks/use-theme', async () => {\n  const actual = await vi.importActual('@/hooks/use-theme');\n  return {\n    ...actual,\n    useTheme: () => ({\n      theme: 'light',\n      setTheme: vi.fn(),\n      resolvedTheme: 'light',\n      tokens: {},\n    }),\n  };\n});\n\ndescribe('ThemeToggle', () => {\n  it('renders binary toggle by default', () => {\n    render(\n      <ThemeProvider>\n        <ThemeToggle />\n      </ThemeProvider>,\n    );\n    // Use role button which is accessible\n    const button = screen.getByRole('button', { name: /toggle theme/i });\n    expect(button).toBeInTheDocument();\n  });\n\n  it('renders ternary toggle with dropdown', async () => {\n    const user = userEvent.setup();\n    render(\n      <ThemeProvider>\n        <ThemeToggle variant=\"ternary\" />\n      </ThemeProvider>,\n    );\n    const button = screen.getByRole('button'); // Dropdown trigger\n    expect(button).toBeInTheDocument();\n\n    // Open dropdown\n    await user.click(button);\n    expect(await screen.findByText('Light')).toBeInTheDocument();\n    expect(screen.getByText('Dark')).toBeInTheDocument();\n    expect(screen.getByText('System')).toBeInTheDocument();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Design system tokens for Garcia Ventures.
+ * This file defines the core palette and semantic tokens for the theme system.
+ */
+export declare const palette: {
+    readonly brand: {
+        readonly blue: "hsl(225 73% 57%)";
+        readonly green: "hsl(151 66% 27%)";
+        readonly floralWhite: "hsl(40 100% 97%)";
+    };
+};
+export declare const theme: {
+    readonly light: {
+        readonly background: "hsl(0 0% 96%)";
+        readonly foreground: "hsl(222 47% 11%)";
+        readonly card: "hsl(0 0% 100%)";
+        readonly cardForeground: "hsl(222 47% 11%)";
+        readonly popover: "hsl(0 0% 100%)";
+        readonly popoverForeground: "hsl(222 47% 11%)";
+        readonly primary: "hsl(225 73% 57%)";
+        readonly primaryForeground: "hsl(0 0% 100%)";
+        readonly secondary: "hsl(93 28% 54%)";
+        readonly secondaryForeground: "hsl(0 0% 100%)";
+        readonly muted: "hsl(0 0% 92%)";
+        readonly mutedForeground: "hsl(215 16% 47%)";
+        readonly accent: "hsl(0 0% 88%)";
+        readonly accentForeground: "hsl(222 47% 11%)";
+        readonly destructive: "hsl(0 84.2% 60.2%)";
+        readonly destructiveForeground: "hsl(0 0% 100%)";
+        readonly border: "hsl(0 0% 89%)";
+        readonly input: "hsl(0 0% 89%)";
+        readonly ring: "hsl(222 47% 11%)";
+        readonly radius: "0.5rem";
+    };
+    readonly dark: {
+        readonly background: "hsl(0 0% 9%)";
+        readonly foreground: "hsl(0 0% 100%)";
+        readonly card: "hsl(0 0% 14%)";
+        readonly cardForeground: "hsl(0 0% 100%)";
+        readonly popover: "hsl(0 0% 11%)";
+        readonly popoverForeground: "hsl(0 0% 100%)";
+        readonly primary: "hsl(227 96% 71%)";
+        readonly primaryForeground: "hsl(0 0% 9%)";
+        readonly secondary: "hsl(96 44% 61%)";
+        readonly secondaryForeground: "hsl(0 0% 9%)";
+        readonly muted: "hsl(0 0% 6%)";
+        readonly mutedForeground: "hsl(0 0% 70%)";
+        readonly accent: "hsl(0 0% 15%)";
+        readonly accentForeground: "hsl(0 0% 100%)";
+        readonly destructive: "hsl(0 62.8% 30.6%)";
+        readonly destructiveForeground: "hsl(0 0% 100%)";
+        readonly border: "hsl(0 0% 18%)";
+        readonly input: "hsl(0 0% 18%)";
+        readonly ring: "hsl(0 0% 90%)";
+        readonly radius: "0.5rem";
+    };
+};
+export declare const tokens: {
+    readonly palette: {
+        readonly brand: {
+            readonly blue: "hsl(225 73% 57%)";
+            readonly green: "hsl(151 66% 27%)";
+            readonly floralWhite: "hsl(40 100% 97%)";
+        };
+    };
+    readonly theme: {
+        readonly light: {
+            readonly background: "hsl(0 0% 96%)";
+            readonly foreground: "hsl(222 47% 11%)";
+            readonly card: "hsl(0 0% 100%)";
+            readonly cardForeground: "hsl(222 47% 11%)";
+            readonly popover: "hsl(0 0% 100%)";
+            readonly popoverForeground: "hsl(222 47% 11%)";
+            readonly primary: "hsl(225 73% 57%)";
+            readonly primaryForeground: "hsl(0 0% 100%)";
+            readonly secondary: "hsl(93 28% 54%)";
+            readonly secondaryForeground: "hsl(0 0% 100%)";
+            readonly muted: "hsl(0 0% 92%)";
+            readonly mutedForeground: "hsl(215 16% 47%)";
+            readonly accent: "hsl(0 0% 88%)";
+            readonly accentForeground: "hsl(222 47% 11%)";
+            readonly destructive: "hsl(0 84.2% 60.2%)";
+            readonly destructiveForeground: "hsl(0 0% 100%)";
+            readonly border: "hsl(0 0% 89%)";
+            readonly input: "hsl(0 0% 89%)";
+            readonly ring: "hsl(222 47% 11%)";
+            readonly radius: "0.5rem";
+        };
+        readonly dark: {
+            readonly background: "hsl(0 0% 9%)";
+            readonly foreground: "hsl(0 0% 100%)";
+            readonly card: "hsl(0 0% 14%)";
+            readonly cardForeground: "hsl(0 0% 100%)";
+            readonly popover: "hsl(0 0% 11%)";
+            readonly popoverForeground: "hsl(0 0% 100%)";
+            readonly primary: "hsl(227 96% 71%)";
+            readonly primaryForeground: "hsl(0 0% 9%)";
+            readonly secondary: "hsl(96 44% 61%)";
+            readonly secondaryForeground: "hsl(0 0% 9%)";
+            readonly muted: "hsl(0 0% 6%)";
+            readonly mutedForeground: "hsl(0 0% 70%)";
+            readonly accent: "hsl(0 0% 15%)";
+            readonly accentForeground: "hsl(0 0% 100%)";
+            readonly destructive: "hsl(0 62.8% 30.6%)";
+            readonly destructiveForeground: "hsl(0 0% 100%)";
+            readonly border: "hsl(0 0% 18%)";
+            readonly input: "hsl(0 0% 18%)";
+            readonly ring: "hsl(0 0% 90%)";
+            readonly radius: "0.5rem";
+        };
+    };
+};
+export type ThemeTokens = typeof theme.light;
+export type PaletteTokens = typeof palette;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;CAOV,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CR,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGT,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,KAAK,CAAC;AAC7C,MAAM,MAAM,aAAa,GAAG,OAAO,OAAO,CAAC"}

package/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GV Tech Design System Playground</title>
   </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/design-system",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Garcia Ventures react design system",
   "repository": "git@github.com:Garcia-Ventures/gvtech-design.git",
   "license": "MIT",
@@ -9,14 +9,20 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.es.js"
+    },
+    "./style.css": {
+      "style": "./dist/design-system.css",
+      "import": "./dist/design-system.css",
+      "default": "./dist/design-system.css"
     },
-    "./style.css": "./dist/design-system.css",
     "./package.json": "./package.json"
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
+  "style": "dist/design-system.css",
   "scripts": {
     "build": "yarn build:registry && tsc -p tsconfig.build.json && VITE_LIB=true vite build",
     "build:registry": "tsx scripts/build-registry.ts",
@@ -45,12 +51,6 @@
       "prettier --write"
     ]
   },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ]
-  },
   "browserslist": {
     "development": [
       "last 1 chrome version",

package/public/manifest.json

@@ -3,9 +3,9 @@
   "name": "GV Tech Design System",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "favicon.png",
+      "sizes": "512x512",
+      "type": "image/png"
     },
     {
       "src": "logo192.png",

package/scripts/validate.js

@@ -15,6 +15,7 @@ const steps = [
     cmd: fix ? 'yarn lint:fix' : 'yarn lint',
   },
   { name: 'TypeScript type check', cmd: 'npx tsc --noEmit' },
+  { name: 'Test (vitest)', cmd: 'yarn test:ci' },
   { name: 'Build (vite)', cmd: 'yarn build' },
 ];
 

package/src/components/ui/alert-dialog.test.tsx

@@ -50,6 +50,7 @@ describe('AlertDialog', () => {
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
@@ -72,6 +73,7 @@ describe('AlertDialog', () => {
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogAction>Continue</AlertDialogAction>

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

@@ -0,0 +1,49 @@
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from 'next-themes';
+import { describe, expect, it, vi } from 'vitest';
+
+// Mock the useTheme hook to control its return values
+vi.mock('@/hooks/use-theme', async () => {
+  const actual = await vi.importActual('@/hooks/use-theme');
+  return {
+    ...actual,
+    useTheme: () => ({
+      theme: 'light',
+      setTheme: vi.fn(),
+      resolvedTheme: 'light',
+      tokens: {},
+    }),
+  };
+});
+
+describe('ThemeToggle', () => {
+  it('renders binary toggle by default', () => {
+    render(
+      <ThemeProvider>
+        <ThemeToggle />
+      </ThemeProvider>,
+    );
+    // Use role button which is accessible
+    const button = screen.getByRole('button', { name: /toggle theme/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders ternary toggle with dropdown', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeProvider>
+        <ThemeToggle variant="ternary" />
+      </ThemeProvider>,
+    );
+    const button = screen.getByRole('button'); // Dropdown trigger
+    expect(button).toBeInTheDocument();
+
+    // Open dropdown
+    await user.click(button);
+    expect(await screen.findByText('Light')).toBeInTheDocument();
+    expect(screen.getByText('Dark')).toBeInTheDocument();
+    expect(screen.getByText('System')).toBeInTheDocument();
+  });
+});

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

@@ -5,9 +5,9 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { useTheme } from '@/hooks/use-theme';
 import { cn } from '@/lib/utils';
 import { Moon, Sun, SunMoon } from 'lucide-react';
-import { useTheme } from 'next-themes';
 
 export interface ThemeToggleProps {
   /**

package/src/globals.css

@@ -56,8 +56,9 @@
     --radius: 0.5rem;
 
     /* Brand Tokens */
-    --brand-green: 151 66% 27%;
     --brand-blue: 225 73% 57%;
+    --brand-green: 151 66% 27%;
+    --brand-floral-white: 40 100% 97%;
   }
 
   .dark {

package/src/hooks/use-theme.test.tsx

@@ -0,0 +1,27 @@
+import { useTheme } from '@/hooks/use-theme';
+import { theme } from '@/theme/tokens';
+import { renderHook } from '@testing-library/react';
+import { ThemeProvider } from 'next-themes';
+import { describe, expect, it } from 'vitest';
+
+describe('useTheme', () => {
+  it('returns default light tokens when no theme is set', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
+    });
+
+    expect(result.current.tokens).toEqual(theme.light);
+  });
+
+  it('returns dark tokens when theme is dark', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => (
+        <ThemeProvider defaultTheme="dark" enableSystem={false}>
+          {children}
+        </ThemeProvider>
+      ),
+    });
+
+    expect(result.current.tokens).toEqual(theme.dark);
+  });
+});

package/src/hooks/use-theme.ts

@@ -0,0 +1,15 @@
+import { theme } from '@/theme/tokens';
+import { useTheme as useNextTheme } from 'next-themes';
+
+export function useTheme() {
+  const context = useNextTheme();
+  const { resolvedTheme } = context;
+
+  // Default to light theme tokens if resolvedTheme is undefined or invalid
+  const activeTokens = resolvedTheme === 'dark' ? theme.dark : theme.light;
+
+  return {
+    ...context,
+    tokens: activeTokens,
+  };
+}

package/src/index.ts

@@ -1,7 +1,7 @@
 import './globals.css';
 
-export * from './lib/tokens';
 export * from './lib/utils';
+export * from './theme/tokens';
 
 // UI Components
 export * from './components/ui/accordion';
@@ -53,4 +53,5 @@ export * from './components/ui/toggle-group';
 export * from './components/ui/tooltip';
 
 // Hooks
+export * from './hooks/use-theme';
 export * from './hooks/use-toast';