@gv-tech/design-system 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [1.1.0](https://github.com/Garcia-Ventures/gvtech-design/compare/v1.0.0...v1.1.0) (2026-02-06)
+
+
+### Features
+
+* display dynamic version from package.json in the sidebar ([7be0b14](https://github.com/Garcia-Ventures/gvtech-design/commit/7be0b14f69da21e4bf9109a1d6ed31551d74d6cb))
+* Upgrade to Tailwind CSS v4, migrating configuration to CSS and ESM, and updating dependencies. ([41d67f2](https://github.com/Garcia-Ventures/gvtech-design/commit/41d67f23d00a058e55225e30e9d7e8b7a20a0d7a))
+
 ## [1.0.0](https://github.com/Garcia-Ventures/gvtech-design/compare/v0.9.0...v1.0.0) (2026-02-06)
 
 

package/dist/components/docs/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/docs/Sidebar.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GACzB,iBAAiB,GACjB,QAAQ,GACR,OAAO,GACP,cAAc,GACd,YAAY,GACZ,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAaD,eAAO,MAAM,QAAQ,EAAE,OAAO,EA+D7B,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,YAAY,2CAyEjE"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/docs/Sidebar.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,iBAAiB,GACzB,iBAAiB,GACjB,QAAQ,GACR,OAAO,GACP,cAAc,GACd,YAAY,GACZ,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAaD,eAAO,MAAM,QAAQ,EAAE,OAAO,EA+D7B,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,YAAY,2CAyEjE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/design-system",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Garcia Ventures react design system",
   "license": "MIT",
   "author": "Eric N. Garcia <eng618@garciaericn.com>",
@@ -56,6 +56,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",
@@ -69,7 +70,6 @@
     "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"
   },
@@ -86,7 +86,6 @@
     "@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",
@@ -105,7 +104,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",

package/postcss.config.mjs

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

package/src/components/docs/Sidebar.tsx

@@ -14,6 +14,7 @@ import {
   Table2,
 } from 'lucide-react';
 import * as React from 'react';
+import { version } from '../../../package.json';
 
 export type ComponentCategory =
   | 'getting-started'
@@ -135,7 +136,7 @@ export function Sidebar({ activeItem, onItemSelect }: SidebarProps) {
     <div className="w-64 border-r bg-muted/30 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">

package/src/globals.css

@@ -1,6 +1,36 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  /* Border radius */
+  --radius-lg: 0.5rem;
+  --radius-md: calc(var(--radius-lg) - 2px);
+  --radius-sm: calc(var(--radius-lg) - 4px);
+
+  /* Container */
+  --container-2xl: 1400px;
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
 
 @layer base {
   :root {
@@ -23,7 +53,6 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
   }
 
   .dark {
@@ -58,6 +87,29 @@
   }
 }
 
+/* Tailwind v4 color utilities - map CSS vars to theme */
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+}
+
 /* Sticky footer support for ScrollArea */
 [data-radix-scroll-area-viewport] > div {
   min-height: 100%;

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/tailwind.config.js

@@ -1,79 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};