@gv-tech/design-system 1.0.0 → 1.2.0

package/eslint.config.mjs

@@ -1,86 +1,13 @@
-import js from '@eslint/js';
-import ts from '@typescript-eslint/eslint-plugin';
-import tsParser from '@typescript-eslint/parser';
-import prettierConfig from 'eslint-config-prettier';
-import prettier from 'eslint-plugin-prettier';
-import globals from 'globals';
-
-// File patterns for JS/TS files only
-const jsFiles = ['**/*.js', '**/*.jsx', '**/*.mjs', '**/*.cjs'];
-const tsFiles = ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts'];
-const allJsTsFiles = [...jsFiles, ...tsFiles];
+import { recommended } from '@gv-tech/eslint-config';
 
+/**
+ * ESLint configuration for TypeScript projects. Uses @gv-tech/eslint-config for sensible defaults. For more information
+ * on configuration options, see: https://github.com/Garcia-Ventures/eslint-config
+ */
 export default [
+  ...recommended,
+  // Add project-specific overrides here
   {
-    // Global ignores - at the top of the array
-    ignores: [
-      '**/node_modules/**',
-      '**/.yarn/**',
-      '**/dist/**',
-      '**/dist-site/**',
-      '**/storybook-static/**',
-      '**/coverage/**',
-      '**/public/**',
-      '**/.github/**',
-      '**/.vscode/**',
-      '**/.husky/**',
-      'eslint.config.mjs',
-      '**/.*', // Ignore all hidden files
-      '**/*.json',
-      '**/*.md',
-      '**/*.yml',
-      '**/*.log',
-    ],
-  },
-  {
-    // Base config for all JS/TS files
-    files: allJsTsFiles,
-    ...js.configs.recommended,
-    linterOptions: {
-      noInlineConfig: true,
-      reportUnusedDisableDirectives: true,
-    },
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.browser,
-      },
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-      },
-    },
-  },
-  {
-    // TypeScript-specific config
-    files: tsFiles,
-    languageOptions: {
-      parser: tsParser,
-    },
-    plugins: {
-      '@typescript-eslint': ts,
-    },
-    rules: {
-      ...ts.configs.base.rules,
-      ...ts.configs['eslint-recommended'].rules,
-      ...ts.configs.recommended.rules,
-    },
-  },
-  {
-    files: jsFiles,
-    rules: {
-      ...js.configs.recommended.rules,
-    },
-  },
-  {
-    // Prettier config for all JS/TS files
-    files: allJsTsFiles,
-    plugins: {
-      prettier: prettier,
-    },
-    rules: {
-      ...prettierConfig.rules,
-      'prettier/prettier': 'error',
-    },
+    ignores: ['**/eslint.config.mjs', '**/.yarn/**', 'dist-site/**'],
   },
 ];

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@gv-tech/design-system",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Garcia Ventures react design system",
+  "repository": "git@github.com:Garcia-Ventures/gvtech-design.git",
   "license": "MIT",
   "author": "Eric N. Garcia <eng618@garciaericn.com>",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
-  "repository": "git@github.com:Garcia-Ventures/gvtech-design.git",
   "scripts": {
     "build": "yarn build:registry && tsc -p tsconfig.build.json && VITE_LIB=true vite build",
     "build:registry": "tsx scripts/build-registry.ts",
@@ -22,11 +22,38 @@
     "setup:ui": "tsx scripts/import-all-shadcn.ts",
     "start": "vite",
     "test": "vitest",
-    "test:ci": "CI=true vitest --run --reporter=dot --passWithNoTests",
+    "test:ci": "CI=true vitest --run --reporter=dot",
     "test:watch": "vitest --watch",
     "validate": "node ./scripts/validate.js",
     "validate:fix": "node ./scripts/validate.js --fix"
   },
+  "lint-staged": {
+    "*.(js|ts|mjs|cjs)?(x)": [
+      "prettier --write",
+      "eslint --cache --fix"
+    ],
+    "*.(md)?(x)": [
+      "prettier --write"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  },
+  "browserslist": {
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ],
+    "production": [
+      ">0.2%",
+      "not dead"
+    ]
+  },
+  "prettier": "@eng618/prettier-config",
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
@@ -56,6 +83,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/postcss": "4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -65,17 +93,17 @@
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-hook-form": "^7.71.1",
+    "react-icons": "^5.5.0",
     "react-resizable-panels": "^4.6.0",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@eng618/prettier-config": "^2.5.3",
-    "@eslint/js": "^9.39.2",
+    "@eng618/prettier-config": "^2.6.0",
+    "@gv-tech/eslint-config": "^0.1.8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -86,15 +114,11 @@
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
     "@vitejs/plugin-react-swc": "^4.2.3",
-    "autoprefixer": "^10.4.24",
     "axe-core": "^4.11.1",
-    "eslint": "^9.39.2",
-    "eslint-config-prettier": "^10.1.8",
+    "eslint": "^10.0.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "globals": "^17.3.0",
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
     "lint-staged": "^16.2.7",
@@ -105,7 +129,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-is": "^19.2.4",
-    "tailwindcss": "3",
+    "tailwindcss": "4",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "7.3.1",
@@ -117,39 +141,12 @@
     "react-dom": "^18 || ^19",
     "react-is": "^16 || ^17 || ^18 || ^19"
   },
+  "packageManager": "yarn@4.12.0",
   "engines": {
     "node": ">=20"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
-  },
-  "lint-staged": {
-    "*.(js|ts|mjs|cjs)?(x)": [
-      "prettier --write",
-      "eslint --cache --fix"
-    ],
-    "*.(md)?(x)": [
-      "prettier --write"
-    ]
-  },
-  "prettier": "@eng618/prettier-config",
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ]
-  },
-  "browserslist": {
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ],
-    "production": [
-      ">0.2%",
-      "not dead"
-    ]
-  },
-  "packageManager": "yarn@4.12.0"
+  }
 }

package/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/src/App.tsx

@@ -1,8 +1,19 @@
 import { ThemeProvider } from 'next-themes';
 import * as React from 'react';
-import { Footer, Sidebar, ThemeToggle } from './components/docs';
+import { Footer, Sidebar } from './components/docs';
+import { navItems } from './components/docs/Sidebar';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './components/ui/breadcrumb';
 import { ScrollArea } from './components/ui/scroll-area';
-import { Toaster } from './components/ui/sonner';
+import { Toaster as SonnerToaster } from './components/ui/sonner';
+import { ThemeToggle } from './components/ui/theme-toggle';
+import { Toaster } from './components/ui/toaster';
 import { TooltipProvider } from './components/ui/tooltip';
 import {
   AccordionDocs,
@@ -19,6 +30,7 @@ import {
   ChartDocs,
   CheckboxDocs,
   CollapsibleDocs,
+  ColorTokensDocs,
   CommandDocs,
   ContextMenuDocs,
   DialogDocs,
@@ -48,6 +60,7 @@ import {
   TableDocs,
   TabsDocs,
   TextareaDocs,
+  ThemeToggleDocs,
   ToastDocs,
   ToggleDocs,
   ToggleGroupDocs,
@@ -62,6 +75,8 @@ function App() {
       // Getting Started
       case 'getting-started':
         return <GettingStartedPage />;
+      case 'color-tokens':
+        return <ColorTokensDocs />;
       case 'installation':
         return <InstallationPage />;
 
@@ -168,6 +183,8 @@ function App() {
         return <ToggleDocs />;
       case 'toggle-group':
         return <ToggleGroupDocs />;
+      case 'theme-toggle':
+        return <ThemeToggleDocs />;
 
       default:
         return <GettingStartedPage />;
@@ -184,12 +201,24 @@ function App() {
           {/* Main Content */}
           <div className="flex-1 flex flex-col overflow-hidden">
             {/* Header */}
-            <header className="h-14 border-b flex items-center justify-between px-6">
-              <div className="flex items-center gap-4">
-                <h1 className="text-sm font-medium text-muted-foreground">Components</h1>
-              </div>
+            <header className="h-14 border-b flex items-center justify-between px-6 shrink-0 bg-background/50 backdrop-blur-sm sticky top-0 z-10">
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink onClick={() => setActiveItem('getting-started')} className="cursor-pointer">
+                      Components
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>
+                      {navItems.find((i) => i.id === activeItem)?.label || 'Introduction'}
+                    </BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
               <div className="flex items-center gap-2">
-                <ThemeToggle />
+                <ThemeToggle variant="ternary" />
               </div>
             </header>
 
@@ -203,6 +232,7 @@ function App() {
           </div>
         </div>
         <Toaster />
+        <SonnerToaster />
       </TooltipProvider>
     </ThemeProvider>
   );

package/src/components/docs/Footer.tsx

@@ -1,5 +1,7 @@
+import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
-import { Github, Linkedin, Twitter } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { SiGithub, SiLinkedin, SiX } from 'react-icons/si';
 
 export function Footer() {
   return (
@@ -51,37 +53,56 @@ export function Footer() {
             </ul>
           </div>
 
-          {/* Social */}
           <div className="space-y-3">
             <h4 className="font-medium text-sm">Connect</h4>
-            <div className="flex items-center space-x-4">
-              <a
-                href="https://github.com/Garcia-Ventures"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                aria-label="GitHub"
-              >
-                <Github className="h-5 w-5" />
-              </a>
-              <a
-                href="https://twitter.com/gvtech"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                aria-label="Twitter"
-              >
-                <Twitter className="h-5 w-5" />
-              </a>
-              <a
-                href="https://linkedin.com/company/gvtech"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                aria-label="LinkedIn"
-              >
-                <Linkedin className="h-5 w-5" />
-              </a>
+            <div className="flex items-center space-x-2">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
+                    <a
+                      href="https://github.com/Garcia-Ventures"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label="GitHub"
+                    >
+                      <SiGithub className="h-5 w-5" />
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>GitHub</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
+                    <a
+                      href="https://twitter.com/gvtech"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label="X (formerly Twitter)"
+                    >
+                      <SiX className="h-4 w-4" />
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>X (formerly Twitter)</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
+                    <a
+                      href="https://linkedin.com/company/gvtech"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label="LinkedIn"
+                    >
+                      <SiLinkedin className="h-5 w-5" />
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>LinkedIn</TooltipContent>
+              </Tooltip>
             </div>
           </div>
         </div>

package/src/components/docs/PropsTable.tsx

@@ -0,0 +1,43 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+
+export interface PropDefinition {
+  name: string;
+  type: string;
+  defaultValue?: string;
+  description: string;
+  required?: boolean;
+}
+
+interface PropsTableProps {
+  props: PropDefinition[];
+}
+
+export function PropsTable({ props }: PropsTableProps) {
+  return (
+    <div className="my-6 w-full overflow-y-auto">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Prop</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Default</TableHead>
+            <TableHead>Description</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {props.map((prop) => (
+            <TableRow key={prop.name}>
+              <TableCell className="font-mono text-sm font-semibold">
+                {prop.name}
+                {prop.required && <span className="ml-1 text-destructive">*</span>}
+              </TableCell>
+              <TableCell className="font-mono text-xs text-muted-foreground">{prop.type}</TableCell>
+              <TableCell className="font-mono text-xs text-muted-foreground">{prop.defaultValue || '-'}</TableCell>
+              <TableCell className="text-sm text-muted-foreground">{prop.description}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/components/docs/Sidebar.tsx

@@ -1,19 +1,10 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { cn } from '@/lib/utils';
-import {
-  ChevronDown,
-  ChevronRight,
-  FormInput,
-  Home,
-  Layers,
-  LayoutGrid,
-  MessageSquare,
-  Navigation,
-  Sparkles,
-  Table2,
-} from 'lucide-react';
+import { FormInput, Home, Layers, LayoutGrid, MessageSquare, Navigation, Sparkles, Table2 } from 'lucide-react';
 import * as React from 'react';
+import { version } from '../../../package.json';
 
 export type ComponentCategory =
   | 'getting-started'
@@ -50,6 +41,7 @@ const categoryConfig: Record<ComponentCategory, { label: string; icon: React.Rea
 export const navItems: NavItem[] = [
   // Getting Started
   { id: 'getting-started', label: 'Introduction', category: 'getting-started' },
+  { id: 'color-tokens', label: 'Color Tokens', category: 'getting-started' },
   { id: 'installation', label: 'Installation', category: 'getting-started' },
 
   // Layout
@@ -110,77 +102,57 @@ export const navItems: NavItem[] = [
   { id: 'carousel', label: 'Carousel', category: 'advanced' },
   { id: 'toggle', label: 'Toggle', category: 'advanced' },
   { id: 'toggle-group', label: 'Toggle Group', category: 'advanced' },
+  { id: 'theme-toggle', label: 'Theme Toggle', category: 'advanced' },
 ];
 
 export function Sidebar({ activeItem, onItemSelect }: SidebarProps) {
-  const [expandedCategories, setExpandedCategories] = React.useState<Set<ComponentCategory>>(
-    new Set(['getting-started', 'forms']),
-  );
-
-  const toggleCategory = (category: ComponentCategory) => {
-    setExpandedCategories((prev) => {
-      const next = new Set(prev);
-      if (next.has(category)) {
-        next.delete(category);
-      } else {
-        next.add(category);
-      }
-      return next;
-    });
-  };
-
   const categories = Object.keys(categoryConfig) as ComponentCategory[];
 
   return (
-    <div className="w-64 border-r bg-muted/30 flex flex-col h-full">
+    <div className="w-64 border-r bg-muted/50 flex flex-col h-full">
       <div className="p-4 border-b">
         <h2 className="font-semibold text-lg">GV Design System</h2>
-        <p className="text-xs text-muted-foreground">v0.9.0</p>
+        <p className="text-xs text-muted-foreground">v{version}</p>
       </div>
       <ScrollArea className="flex-1">
         <nav className="p-2">
-          {categories.map((category) => {
-            const config = categoryConfig[category];
-            const items = navItems.filter((item) => item.category === category);
-            const isExpanded = expandedCategories.has(category);
-
-            if (items.length === 0) return null;
-
-            return (
-              <div key={category} className="mb-1">
-                <button
-                  onClick={() => toggleCategory(category)}
-                  className="w-full flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-md hover:bg-accent/50 transition-colors"
-                >
-                  {config.icon}
-                  <span className="flex-1 text-left">{config.label}</span>
-                  {isExpanded ? (
-                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                  )}
-                </button>
-                {isExpanded && (
-                  <div className="ml-4 mt-1 space-y-0.5">
-                    {items.map((item) => (
-                      <Button
-                        key={item.id}
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => onItemSelect(item.id)}
-                        className={cn(
-                          'w-full justify-start h-8 px-2 font-normal',
-                          activeItem === item.id && 'bg-accent text-accent-foreground',
-                        )}
-                      >
-                        {item.label}
-                      </Button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            );
-          })}
+          <Accordion type="multiple" defaultValue={['getting-started', 'forms']} className="w-full space-y-1">
+            {categories.map((category) => {
+              const config = categoryConfig[category];
+              const items = navItems.filter((item) => item.category === category);
+
+              if (items.length === 0) return null;
+
+              return (
+                <AccordionItem key={category} value={category} className="border-none">
+                  <AccordionTrigger className="flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-md hover:bg-accent/50 transition-colors hover:no-underline [&>svg]:h-4 [&>svg]:w-4">
+                    <div className="flex items-center gap-2 flex-1">
+                      {config.icon}
+                      <span className="text-left">{config.label}</span>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="pb-1">
+                    <div className="ml-4 mt-1 space-y-0.5 border-l pl-2">
+                      {items.map((item) => (
+                        <Button
+                          key={item.id}
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => onItemSelect(item.id)}
+                          className={cn(
+                            'w-full justify-start h-8 px-2 font-normal',
+                            activeItem === item.id && 'bg-accent text-accent-foreground',
+                          )}
+                        >
+                          {item.label}
+                        </Button>
+                      ))}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+          </Accordion>
         </nav>
       </ScrollArea>
     </div>

package/src/components/docs/index.ts

@@ -1,5 +1,6 @@
 export { CodeBlock } from './CodeBlock';
 export { ComponentSection, ComponentShowcase } from './ComponentShowcase';
 export { Footer } from './Footer';
+export { PropsTable, type PropDefinition } from './PropsTable';
 export { Sidebar, navItems, type ComponentCategory, type NavItem } from './Sidebar';
 export { ThemeToggle } from './ThemeToggle';