@gv-tech/design-system 2.3.0 → 2.4.0

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

@@ -9,6 +9,8 @@ vi.mock('@/components/ui/dialog', () => ({
   DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DialogPortal: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DialogOverlay: () => null,
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
+  DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
 }));
 
 describe('Search', () => {

package/src/components/ui/search.tsx

@@ -70,8 +70,8 @@ export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerPr
         className={cn(
           'relative h-9 text-sm text-muted-foreground transition-all transition-colors',
           variant === 'default'
-            ? 'w-full justify-start sm:pr-12 md:w-40 lg:w-64'
-            : 'w-9 justify-center px-0 sm:w-24 sm:justify-start sm:px-3 sm:pr-12',
+            ? 'w-full justify-start pr-12'
+            : 'w-9 justify-center px-0 md:w-40 md:justify-start md:px-3 md:pr-12 lg:w-64',
           className,
         )}
         ref={ref}
@@ -79,7 +79,7 @@ export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerPr
       >
         <span className="inline-flex items-center gap-2">
           <SearchIcon className="h-4 w-4 shrink-0" />
-          {variant === 'default' && <span className="truncate">{placeholder}</span>}
+          <span className={cn('truncate', variant === 'compact' && 'hidden md:inline')}>{placeholder}</span>
         </span>
         <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
           <span className="text-xs">⌘</span>K

package/src/globals.css

@@ -33,6 +33,7 @@
 }
 
 @layer base {
+  /* @tokens-start */
   :root {
     --background: 0 0% 96%;
     --foreground: 222 47% 11%;
@@ -59,6 +60,25 @@
     --brand-blue: 225 73% 57%;
     --brand-green: 151 66% 27%;
     --brand-floral-white: 40 100% 97%;
+    --neutral-white: 0 0% 100%;
+    --neutral-black: 0 0% 0%;
+    --neutral-gray50: 0 0% 96%;
+    --neutral-gray100: 0 0% 92%;
+    --neutral-gray200: 0 0% 89%;
+    --neutral-gray300: 0 0% 88%;
+    --neutral-gray400: 0 0% 70%;
+    --neutral-gray500: 215 16% 47%;
+    --neutral-gray600: 222 47% 11%;
+    --neutral-gray700: 0 0% 18%;
+    --neutral-gray800: 0 0% 15%;
+    --neutral-gray900: 0 0% 14%;
+    --neutral-gray950: 0 0% 11%;
+    --neutral-gray975: 0 0% 9%;
+    --neutral-gray990: 0 0% 6%;
+    --semantic-success: 93 28% 54%;
+    --semantic-success-dark: 96 44% 61%;
+    --semantic-destructive: 0 84.2% 60.2%;
+    --semantic-destructive-dark: 0 62.8% 30.6%;
   }
 
   .dark {
@@ -81,7 +101,9 @@
     --border: 0 0% 18%;
     --input: 0 0% 18%;
     --ring: 0 0% 90%;
+    --radius: 0.5rem;
   }
+  /* @tokens-end */
 }
 
 @layer base {

package/src/pages/ColorTokensDocs.tsx

@@ -7,8 +7,8 @@ export function ColorTokensDocs() {
   return (
     <div className="space-y-12">
       <div className="space-y-4">
-        <h1 className="text-4xl font-extrabold tracking-tight">Color Tokens</h1>
-        <p className="text-xl text-muted-foreground max-w-2xl">
+        <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight">Color Tokens</h1>
+        <p className="text-lg md:text-xl text-muted-foreground max-w-2xl">
           The Garcia Ventures design system is built on a robust token architecture that ensures consistency,
           accessibility, and easy maintenance across all digital products.
         </p>
@@ -167,8 +167,8 @@ const MyComponent = () => {
 
       <section className="space-y-6">
         <h2 className="text-3xl font-bold tracking-tight">Semantic Tokens Reference</h2>
-        <div className="rounded-xl border shadow-sm overflow-hidden">
-          <Table>
+        <div className="rounded-xl border shadow-sm overflow-x-auto">
+          <Table className="min-w-[600px] md:min-w-full">
             <TableHeader>
               <TableRow className="bg-muted/50 hover:bg-muted/50">
                 <TableHead className="w-[200px]">Token</TableHead>

package/src/pages/GettingStarted.tsx

@@ -6,8 +6,10 @@ export function GettingStartedPage() {
   return (
     <div className="space-y-8">
       <div className="space-y-2">
-        <h1 className="text-4xl font-bold tracking-tight">GV Tech Design System</h1>
-        <p className="text-xl text-muted-foreground">
+        <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-center md:text-left">
+          GV Tech Design System
+        </h1>
+        <p className="text-lg md:text-xl text-muted-foreground text-center md:text-left">
           A comprehensive React component library built with shadcn/ui and Tailwind CSS.
         </p>
       </div>
@@ -100,8 +102,8 @@ export function InstallationPage() {
   return (
     <div className="space-y-8">
       <div className="space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">Installation</h1>
-        <p className="text-lg text-muted-foreground">
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Installation</h1>
+        <p className="text-base md:text-lg text-muted-foreground">
           Get started with the GV Tech Design System in your React project.
         </p>
       </div>

package/src/theme/tokens.ts

@@ -9,51 +9,73 @@ export const palette = {
     green: 'hsl(151 66% 27%)', // #177245 (Stability)
     floralWhite: 'hsl(40 100% 97%)', // Light Neutral / Floral White
   },
-  // Additional primitives can be added here
+  neutral: {
+    white: 'hsl(0 0% 100%)',
+    black: 'hsl(0 0% 0%)', // Pure Black
+    gray50: 'hsl(0 0% 96%)', // White Smoke
+    gray100: 'hsl(0 0% 92%)', // Gainsboro
+    gray200: 'hsl(0 0% 89%)', // Light Gray
+    gray300: 'hsl(0 0% 88%)', // French Gray
+    gray400: 'hsl(0 0% 70%)', // Silver
+    gray500: 'hsl(215 16% 47%)', // Steel Blue
+    gray600: 'hsl(222 47% 11%)', // Oxford Blue
+    gray700: 'hsl(0 0% 18%)', // Raisin Black
+    gray800: 'hsl(0 0% 15%)', // Jet
+    gray900: 'hsl(0 0% 14%)', // Eerie Black
+    gray950: 'hsl(0 0% 11%)', // Night (alt)
+    gray975: 'hsl(0 0% 9%)', // Night
+    gray990: 'hsl(0 0% 6%)', // Black (almost)
+  },
+  semantic: {
+    success: 'hsl(93 28% 54%)', // Asparagus / Pistachio
+    successDark: 'hsl(96 44% 61%)',
+    destructive: 'hsl(0 84.2% 60.2%)', // Vivid Red
+    destructiveDark: 'hsl(0 62.8% 30.6%)', // Blood Red
+  },
 } as const;
 
 export const theme = {
   light: {
-    background: 'hsl(0 0% 96%)', // White Smoke
-    foreground: 'hsl(222 47% 11%)', // Oxford Blue
-    card: 'hsl(0 0% 100%)', // White
-    cardForeground: 'hsl(222 47% 11%)', // Oxford Blue
-    popover: 'hsl(0 0% 100%)', // White
-    popoverForeground: 'hsl(222 47% 11%)', // Oxford Blue
-    primary: palette.brand.blue, // Royal Blue (Intellect)
-    primaryForeground: 'hsl(0 0% 100%)', // White
-    secondary: 'hsl(93 28% 54%)', // Asparagus / Pistachio
-    secondaryForeground: 'hsl(0 0% 100%)', // White
-    muted: 'hsl(0 0% 92%)', // Gainsboro
-    mutedForeground: 'hsl(215 16% 47%)', // Steel Blue
-    accent: 'hsl(0 0% 88%)', // French Gray
-    accentForeground: 'hsl(222 47% 11%)', // Oxford Blue
-    destructive: 'hsl(0 84.2% 60.2%)', // Vivid Red
-    destructiveForeground: 'hsl(0 0% 100%)', // White
-    border: 'hsl(0 0% 89%)', // Light Gray
-    input: 'hsl(0 0% 89%)', // Light Gray
-    ring: 'hsl(222 47% 11%)', // Oxford Blue
+    background: palette.neutral.gray50,
+    foreground: palette.neutral.gray600,
+    card: palette.neutral.white,
+    cardForeground: palette.neutral.gray600,
+    popover: palette.neutral.white,
+    popoverForeground: palette.neutral.gray600,
+    primary: palette.brand.blue,
+    primaryForeground: palette.neutral.white,
+    secondary: palette.semantic.success,
+    secondaryForeground: palette.neutral.white,
+    muted: palette.neutral.gray100,
+    mutedForeground: palette.neutral.gray500,
+    accent: palette.neutral.gray300,
+    accentForeground: palette.neutral.gray600,
+    destructive: palette.semantic.destructive,
+    destructiveForeground: palette.neutral.white,
+    border: palette.neutral.gray200,
+    input: palette.neutral.gray200,
+    ring: palette.neutral.gray600,
     radius: '0.5rem',
   },
   dark: {
-    background: 'hsl(0 0% 9%)', // Night
-    foreground: 'hsl(0 0% 100%)', // White
-    card: 'hsl(0 0% 14%)', // Eerie Black
-    cardForeground: 'hsl(0 0% 100%)', // White
-    popover: 'hsl(0 0% 11%)', // Night (alt)
-    popoverForeground: 'hsl(0 0% 100%)', // White
-    primary: 'hsl(227 96% 71%)', // Baby Blue
-    primaryForeground: 'hsl(0 0% 9%)', // Night
-    secondary: 'hsl(96 44% 61%)', // Celadon
-    secondaryForeground: 'hsl(0 0% 9%)', // Night
-    muted: 'hsl(0 0% 6%)', // Black
-    mutedForeground: 'hsl(0 0% 70%)', // Silver
-    accent: 'hsl(0 0% 15%)', // Jet
-    accentForeground: 'hsl(0 0% 100%)', // White
-    destructive: 'hsl(0 62.8% 30.6%)', // Blood Red
-    destructiveForeground: 'hsl(0 0% 100%)', // White
-    border: 'hsl(0 0% 18%)', // Raisin Black
-    input: 'hsl(0 0% 18%)', // Raisin Black
+    background: palette.neutral.gray975,
+    foreground: palette.neutral.white,
+    card: palette.neutral.gray900,
+    cardForeground: palette.neutral.white,
+    popover: palette.neutral.gray950,
+    popoverForeground: palette.neutral.white,
+    primary: 'hsl(227 96% 71%)', // Keeping as specific HSL to match original
+    primaryForeground: palette.neutral.gray975,
+    secondary: palette.semantic.successDark,
+    secondaryForeground: palette.neutral.gray975,
+    muted: palette.neutral.gray990,
+    mutedForeground: palette.neutral.gray400,
+    accent: palette.neutral.gray800,
+    accentForeground: palette.neutral.white,
+    destructive: palette.semantic.destructiveDark,
+    destructiveForeground: palette.neutral.white,
+    border: palette.neutral.gray700,
+    input: palette.neutral.gray700,
     ring: 'hsl(0 0% 90%)', // Platinum
     radius: '0.5rem',
   },

package/vite.config.ts

@@ -1,9 +1,29 @@
 import react from '@vitejs/plugin-react-swc';
+import fs from 'fs';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
 
 const isLibrary = process.env.VITE_LIB === 'true';
 
+// Get all UI components for multi-entry build
+const getEntries = () => {
+  const entries: Record<string, string> = {
+    index: resolve(__dirname, 'src/index.ts'),
+  };
+
+  if (isLibrary) {
+    const uiPath = resolve(__dirname, 'src/components/ui');
+    const files = fs.readdirSync(uiPath);
+    files.forEach((file) => {
+      if (file.endsWith('.tsx') && !file.includes('.test.') && !file.includes('.stories.')) {
+        const name = file.replace('.tsx', '');
+        entries[name] = resolve(uiPath, file);
+      }
+    });
+  }
+  return entries;
+};
+
 export default defineConfig({
   plugins: [react()],
   resolve: {
@@ -19,10 +39,12 @@ export default defineConfig({
     emptyOutDir: !isLibrary,
     lib: isLibrary
       ? {
-          entry: resolve(__dirname, 'src/index.ts'),
+          entry: getEntries(),
           name: 'GvtechDesign',
-          // Matches the names in package.json
-          fileName: (format) => `index.${format === 'es' ? 'es' : 'cjs'}.js`,
+          fileName: (format, entryName) =>
+            entryName === 'index'
+              ? `index.${format === 'es' ? 'es' : 'cjs'}.js`
+              : `${entryName}.${format === 'es' ? 'es' : 'cjs'}.js`,
           formats: ['es', 'cjs'],
         }
       : undefined,