@gv-tech/design-system 2.2.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/design-system",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Garcia Ventures react design system",
   "repository": "git@github.com:Garcia-Ventures/gvtech-design.git",
   "license": "MIT",
@@ -17,7 +17,252 @@
       "import": "./dist/design-system.css",
       "default": "./dist/design-system.css"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./accordion": {
+      "types": "./dist/components/ui/accordion.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./alert-dialog": {
+      "types": "./dist/components/ui/alert-dialog.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./alert": {
+      "types": "./dist/components/ui/alert.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./aspect-ratio": {
+      "types": "./dist/components/ui/aspect-ratio.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/ui/avatar.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./badge": {
+      "types": "./dist/components/ui/badge.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/components/ui/breadcrumb.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./button": {
+      "types": "./dist/components/ui/button.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./calendar": {
+      "types": "./dist/components/ui/calendar.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./card": {
+      "types": "./dist/components/ui/card.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./carousel": {
+      "types": "./dist/components/ui/carousel.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./chart": {
+      "types": "./dist/components/ui/chart.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/ui/checkbox.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./collapsible": {
+      "types": "./dist/components/ui/collapsible.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./command": {
+      "types": "./dist/components/ui/command.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./context-menu": {
+      "types": "./dist/components/ui/context-menu.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./dialog": {
+      "types": "./dist/components/ui/dialog.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./drawer": {
+      "types": "./dist/components/ui/drawer.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./dropdown-menu": {
+      "types": "./dist/components/ui/dropdown-menu.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./form": {
+      "types": "./dist/components/ui/form.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./hover-card": {
+      "types": "./dist/components/ui/hover-card.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./input": {
+      "types": "./dist/components/ui/input.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./label": {
+      "types": "./dist/components/ui/label.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./menubar": {
+      "types": "./dist/components/ui/menubar.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./navigation-menu": {
+      "types": "./dist/components/ui/navigation-menu.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/ui/pagination.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./popover": {
+      "types": "./dist/components/ui/popover.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./progress": {
+      "types": "./dist/components/ui/progress.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/ui/radio-group.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./resizable": {
+      "types": "./dist/components/ui/resizable.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/components/ui/scroll-area.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./search": {
+      "types": "./dist/components/ui/search.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./select": {
+      "types": "./dist/components/ui/select.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./separator": {
+      "types": "./dist/components/ui/separator.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./sheet": {
+      "types": "./dist/components/ui/sheet.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/ui/skeleton.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./slider": {
+      "types": "./dist/components/ui/slider.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./sonner": {
+      "types": "./dist/components/ui/sonner.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./switch": {
+      "types": "./dist/components/ui/switch.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./table": {
+      "types": "./dist/components/ui/table.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/ui/tabs.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/ui/textarea.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./theme-provider": {
+      "types": "./dist/components/ui/theme-provider.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./theme-toggle": {
+      "types": "./dist/components/ui/theme-toggle.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./toast": {
+      "types": "./dist/components/ui/toast.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./toaster": {
+      "types": "./dist/components/ui/toaster.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/ui/toggle-group.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./toggle": {
+      "types": "./dist/components/ui/toggle.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/ui/tooltip.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    }
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -39,8 +284,8 @@
     "test": "vitest",
     "test:ci": "CI=true vitest --run --reporter=dot",
     "test:watch": "vitest --watch",
-    "validate": "node ./scripts/validate.js",
-    "validate:fix": "node ./scripts/validate.js --fix"
+    "validate": "tsx ./scripts/validate.ts",
+    "validate:fix": "tsx ./scripts/validate.ts --fix"
   },
   "lint-staged": {
     "*.(js|ts|mjs|cjs)?(x)": [
@@ -99,7 +344,6 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.563.0",
-    "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.2",
     "react-hook-form": "^7.71.1",
     "react-icons": "^5.5.0",
@@ -131,6 +375,7 @@
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
     "lint-staged": "^16.2.7",
+    "next-themes": "^0.4.6",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
     "prettier-plugin-organize-imports": "^4.3.0",
@@ -145,6 +390,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
+    "next-themes": "^0.4.0",
     "prop-types": "^15.8.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",

package/scripts/sync-exports.ts

@@ -0,0 +1,52 @@
+import fs from 'fs';
+import path from 'path';
+
+const PACKAGE_JSON_PATH = path.join(process.cwd(), 'package.json');
+const COMPONENTS_UI_PATH = path.join(process.cwd(), 'src/components/ui');
+
+function syncExports() {
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(PACKAGE_JSON_PATH, 'utf8'));
+    const components = fs
+      .readdirSync(COMPONENTS_UI_PATH)
+      .filter((file) => file.endsWith('.tsx') && !file.includes('.test.') && !file.includes('.stories.'));
+
+    // Base exports that should always be present
+    const newExports: Record<string, unknown> = {
+      '.': {
+        types: './dist/index.d.ts',
+        import: './dist/index.es.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',
+      },
+      './package.json': './package.json',
+    };
+
+    // Add component exports
+    // Note: We assume the build flattens or maintains structure based on Vite config
+    // For now, we'll map them to where they will be in dist
+    components.sort().forEach((file) => {
+      const name = path.basename(file, '.tsx');
+      newExports[`./${name}`] = {
+        types: `./dist/components/ui/${name}.d.ts`,
+        import: `./dist/index.es.js`, // Temporary: default to main bundle if not individual build
+        default: `./dist/index.es.js`,
+      };
+    });
+
+    packageJson.exports = newExports;
+
+    fs.writeFileSync(PACKAGE_JSON_PATH, JSON.stringify(packageJson, null, 2) + '\n');
+    console.log(`✅ package.json exports synchronized with ${components.length} components`);
+  } catch (error) {
+    console.error('❌ Error synchronizing exports:', error);
+    process.exit(1);
+  }
+}
+
+syncExports();

package/scripts/sync-tokens.ts

@@ -0,0 +1,73 @@
+import fs from 'fs';
+import path from 'path';
+// We use a dynamic import or relative require because we are running with tsx
+// and want to avoid complex tsconfig path issues for a simple script.
+import { palette, theme } from '../src/theme/tokens';
+
+const GLOBALS_CSS_PATH = path.join(process.cwd(), 'src/globals.css');
+
+/** Strips hsl() wrapper and commas to match Tailwind/shadcn expectation of "H S L" */
+function formatTokenValue(value: string) {
+  if (value.includes('hsl')) {
+    return value.replace(/hsl\((.*)\)/, '$1').replace(/,/g, '');
+  }
+  return value;
+}
+
+/** Converts camelCase to kebab-case */
+function toKebabCase(str: string) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+function generateCssVariables() {
+  let css = '  :root {\n';
+
+  // Light theme
+  for (const [key, value] of Object.entries(theme.light)) {
+    const cssVarName = `--${toKebabCase(key)}`;
+    css += `    ${cssVarName}: ${formatTokenValue(value as string)};\n`;
+  }
+
+  css += '\n    /* Brand Tokens */\n';
+  for (const [category, tokens] of Object.entries(palette)) {
+    for (const [key, value] of Object.entries(tokens)) {
+      const cssVarName = `--${toKebabCase(category)}-${toKebabCase(key)}`;
+      css += `    ${cssVarName}: ${formatTokenValue(value as string)};\n`;
+    }
+  }
+
+  css += '  }\n\n  .dark {\n';
+
+  // Dark theme
+  for (const [key, value] of Object.entries(theme.dark)) {
+    const cssVarName = `--${toKebabCase(key)}`;
+    css += `    ${cssVarName}: ${formatTokenValue(value as string)};\n`;
+  }
+
+  css += '  }';
+  return css;
+}
+
+function syncTokens() {
+  try {
+    const globalsContent = fs.readFileSync(GLOBALS_CSS_PATH, 'utf8');
+    const variables = generateCssVariables();
+
+    const tokenRegex = /\/\* @tokens-start \*\/[\s\S]*\/\* @tokens-end \*\//;
+
+    if (!tokenRegex.test(globalsContent)) {
+      console.error('❌ Error: Could not find @tokens markers in src/globals.css');
+      process.exit(1);
+    }
+
+    const updatedContent = globalsContent.replace(tokenRegex, `/* @tokens-start */\n${variables}\n  /* @tokens-end */`);
+
+    fs.writeFileSync(GLOBALS_CSS_PATH, updatedContent);
+    console.log('✅ Tokens synchronized successfully');
+  } catch (error) {
+    console.error('❌ Error synchronizing tokens:', error);
+    process.exit(1);
+  }
+}
+
+syncTokens();

package/scripts/{validate.js → validate.ts}

@@ -1,11 +1,17 @@
-#!/usr/bin/env node
-
-const { spawnSync } = require('child_process');
+import { spawnSync } from 'child_process';
 
 const args = process.argv.slice(2);
 const fix = args.includes('--fix');
 
 const steps = [
+  {
+    name: 'Sync Tokens',
+    cmd: 'yarn tsx scripts/sync-tokens.ts',
+  },
+  {
+    name: 'Sync Exports',
+    cmd: 'yarn tsx scripts/sync-exports.ts',
+  },
   {
     name: fix ? 'Prettier fix' : 'Prettier check',
     cmd: fix ? 'yarn format' : 'yarn format:ci',
@@ -14,15 +20,15 @@ const steps = [
     name: fix ? 'Lint fix (eslint)' : 'Lint (eslint)',
     cmd: fix ? 'yarn lint:fix' : 'yarn lint',
   },
-  { name: 'TypeScript type check', cmd: 'npx tsc --noEmit' },
+  { name: 'TypeScript type check', cmd: 'yarn tsc --noEmit' },
   { name: 'Test (vitest)', cmd: 'yarn test:ci' },
   { name: 'Build (vite)', cmd: 'yarn build' },
 ];
 
 const SEP = '------------------------------------------------------------';
-const green = (s) => `\x1b[32m${s}\x1b[0m`;
-const red = (s) => `\x1b[31m${s}\x1b[0m`;
-const yellow = (s) => `\x1b[33m${s}\x1b[0m`;
+const green = (s: string) => `\x1b[32m${s}\x1b[0m`;
+const red = (s: string) => `\x1b[31m${s}\x1b[0m`;
+const yellow = (s: string) => `\x1b[33m${s}\x1b[0m`;
 
 console.log(SEP);
 console.log('\x1b[1mRunning validate steps (sequential)\x1b[0m');
@@ -36,7 +42,7 @@ for (const step of steps) {
 
   if (result.error) {
     console.error(red(`\nFailed to run: ${step.cmd}`));
-    console.error(red(result.error));
+    console.error(red(result.error.message));
     process.exit(1);
   }
 

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from 'next-themes';
+import { Menu } from 'lucide-react';
 import * as React from 'react';
 import { Footer, Sidebar } from './components/docs';
 import { navItems } from './components/docs/Sidebar';
@@ -10,6 +10,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from './components/ui/breadcrumb';
+import { Button } from './components/ui/button';
 import { ScrollArea } from './components/ui/scroll-area';
 import {
   CommandEmpty,
@@ -20,7 +21,9 @@ import {
   Search,
   SearchTrigger,
 } from './components/ui/search';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './components/ui/sheet';
 import { Toaster as SonnerToaster } from './components/ui/sonner';
+import { ThemeProvider } from './components/ui/theme-provider';
 import { ThemeToggle } from './components/ui/theme-toggle';
 import { Toaster } from './components/ui/toaster';
 import { TooltipProvider } from './components/ui/tooltip';
@@ -77,9 +80,10 @@ import {
   TooltipDocs,
 } from './pages';
 
-function App() {
+export default function App() {
   const [activeItem, setActiveItem] = React.useState('getting-started');
   const [searchOpen, setSearchOpen] = React.useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
 
   const renderContent = () => {
     switch (activeItem) {
@@ -205,31 +209,66 @@ function App() {
   };
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider>
       <TooltipProvider>
-        <div className="flex h-screen bg-background">
-          {/* Sidebar */}
-          <Sidebar activeItem={activeItem} onItemSelect={setActiveItem} />
+        <div className="flex h-screen bg-background overflow-hidden">
+          {/* Desktop Sidebar */}
+          <div className="hidden lg:flex h-full shrink-0">
+            <Sidebar activeItem={activeItem} onItemSelect={setActiveItem} />
+          </div>
 
           {/* Main Content */}
-          <div className="flex-1 flex flex-col overflow-hidden">
+          <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
             {/* Header */}
-            <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>
+            <header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background/50 backdrop-blur-sm sticky top-0 z-10 gap-4">
+              <div className="flex items-center gap-2 min-w-0">
+                {/* Mobile Menu Toggle */}
+                <Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
+                  <SheetTrigger asChild>
+                    <Button variant="ghost" size="icon" className="lg:hidden shrink-0">
+                      <Menu className="h-5 w-5" />
+                      <span className="sr-only">Toggle menu</span>
+                    </Button>
+                  </SheetTrigger>
+                  <SheetContent side="left" className="p-0 w-72">
+                    <SheetHeader className="sr-only">
+                      <SheetTitle>Navigation Menu</SheetTitle>
+                      <SheetDescription>
+                        Explore the components and documentation for GV Tech Design System.
+                      </SheetDescription>
+                    </SheetHeader>
+                    <Sidebar
+                      activeItem={activeItem}
+                      onItemSelect={(id) => {
+                        setActiveItem(id);
+                        setIsSidebarOpen(false);
+                      }}
+                      className="w-full border-none"
+                    />
+                  </SheetContent>
+                </Sheet>
+
+                <Breadcrumb className="hidden md:flex min-w-0">
+                  <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>
+
+                {/* Mobile Breadcrumb (simplified) */}
+                <div className="md:hidden font-medium truncate">
+                  {navItems.find((i) => i.id === activeItem)?.label || 'Introduction'}
+                </div>
+              </div>
               <div className="flex items-center gap-2">
                 <Search open={searchOpen} onOpenChange={setSearchOpen}>
                   <CommandInput placeholder="Type a command or search..." />
@@ -250,7 +289,7 @@ function App() {
                     </CommandGroup>
                   </CommandList>
                 </Search>
-                <SearchTrigger onClick={() => setSearchOpen(true)} />
+                <SearchTrigger onClick={() => setSearchOpen(true)} variant="compact" className="md:w-40 lg:w-64" />
                 <ThemeToggle variant="ternary" />
               </div>
             </header>
@@ -258,7 +297,7 @@ function App() {
             {/* Content Area */}
             <ScrollArea className="flex-1 [&>[data-radix-scroll-area-viewport]]:h-full">
               <div className="flex-1 flex flex-col min-h-full">
-                <main className="flex-1 p-8 max-w-4xl">{renderContent()}</main>
+                <main className="flex-1 p-4 md:p-8 w-full max-w-4xl mx-auto">{renderContent()}</main>
                 <Footer />
               </div>
             </ScrollArea>
@@ -270,5 +309,3 @@ function App() {
     </ThemeProvider>
   );
 }
-
-export default App;

package/src/components/docs/ComponentShowcase.tsx

@@ -21,7 +21,7 @@ export function ComponentShowcase({ title, description, code, children, classNam
       </CardHeader>
       <CardContent className="p-0">
         <Tabs defaultValue="preview" className="w-full">
-          <div className="border-b px-6">
+          <div className="border-b px-4 md:px-6">
             <TabsList className="h-10 bg-transparent p-0">
               <TabsTrigger
                 value="preview"
@@ -37,8 +37,8 @@ export function ComponentShowcase({ title, description, code, children, classNam
               </TabsTrigger>
             </TabsList>
           </div>
-          <TabsContent value="preview" className="p-6 mt-0">
-            <div className="flex flex-wrap gap-4 items-center">{children}</div>
+          <TabsContent value="preview" className="p-4 md:p-6 mt-0">
+            <div className="flex flex-wrap gap-4 items-center overflow-x-auto">{children}</div>
           </TabsContent>
           <TabsContent value="code" className="mt-0">
             <CodeBlock code={code} className="rounded-none border-0" />
@@ -59,8 +59,8 @@ export function ComponentSection({ title, description, children }: ComponentSect
   return (
     <div className="space-y-6">
       <div className="space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-        {description && <p className="text-lg text-muted-foreground">{description}</p>}
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">{title}</h1>
+        {description && <p className="text-base md:text-lg text-muted-foreground">{description}</p>}
       </div>
       <div className="space-y-6">{children}</div>
     </div>