@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/native-playground/src/global.css

@@ -1,49 +0,0 @@
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}

package/apps/native-playground/tailwind.config.js

@@ -1,49 +0,0 @@
-const { theme: designTokens } = require('../../packages/design-tokens/src/theme');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  // NOTE: NativeWind v4 uses the same content pattern as Tailwind
-  content: ['./src/**/*.{js,ts,jsx,tsx}', '../../packages/ui-native/src/**/*.{js,ts,jsx,tsx}'],
-  presets: [require('nativewind/preset')],
-  theme: {
-    extend: {
-      colors: {
-        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))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-      },
-      borderRadius: designTokens.light.radius,
-    },
-  },
-  plugins: [],
-};

package/apps/native-playground/tsconfig.app.json

@@ -1,24 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": ["node", "nativewind/types"]
-  },
-  "files": ["../../node_modules/@nx/expo/typings/svg.d.ts"],
-  "exclude": [
-    "**/*.test.ts",
-    "**/*.spec.ts",
-    "**/*.test.tsx",
-    "**/*.spec.tsx",
-    "**/*.test.js",
-    "**/*.spec.js",
-    "**/*.test.jsx",
-    "**/*.spec.jsx",
-    "src/test-setup.ts",
-    "jest.config.ts",
-    "jest.config.cts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts"
-  ],
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
-}

package/apps/native-playground/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "jsx": "react-native",
-    "lib": ["dom", "esnext"],
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "strict": true,
-    "declaration": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/apps/native-playground/tsconfig.spec.json

@@ -1,24 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "moduleResolution": "node10",
-    "jsx": "react-jsx",
-    "types": ["jest", "node"]
-  },
-  "files": ["src/test-setup.ts"],
-  "include": [
-    "jest.config.ts",
-    "jest.config.cts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}

package/apps/playground-web/CHANGELOG.md

@@ -1,8 +0,0 @@
-# Changelog
-
-## [0.1.0](https://github.com/Garcia-Ventures/gvtech-design/compare/playground-web-v0.0.1...playground-web-v0.1.0) (2026-02-20)
-
-
-### Features
-
-* **universal:** pivot to monorepo architecture and stabilize react native support ([#63](https://github.com/Garcia-Ventures/gvtech-design/issues/63)) ([3458938](https://github.com/Garcia-Ventures/gvtech-design/commit/3458938c17bdfc7a7f5eea0053b7bf1786a571fa))

package/apps/playground-web/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <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>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/apps/playground-web/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "playground-web",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "preview": "vite preview",
-    "typecheck": "yarn tsc --noEmit"
-  },
-  "dependencies": {
-    "@gv-tech/design-tokens": "workspace:*",
-    "@gv-tech/ui-core": "workspace:*",
-    "@gv-tech/ui-web": "workspace:*",
-    "lucide-react": "^0.563.0",
-    "next-themes": "^0.4.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-router-dom": "^7.13.0",
-    "recharts": "2.15.4",
-    "sonner": "^2.0.7"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react-swc": "^4.2.3",
-    "autoprefixer": "^10.4.18",
-    "postcss": "^8.5.6",
-    "tailwindcss": "4.1.18",
-    "typescript": "^5.9.3",
-    "vite": "7.3.1"
-  }
-}

package/apps/playground-web/public/index.demo.html

@@ -1,40 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Garcia Ventures design system" />
-    <link rel="apple-touch-icon" href="logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>GV Tech Design System</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/apps/playground-web/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "GV Design",
-  "name": "GV Tech Design System",
-  "icons": [
-    {
-      "src": "favicon.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/apps/playground-web/public/robots.txt

@@ -1,2 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *

package/apps/playground-web/src/App.tsx

@@ -1,179 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  Button,
-  ScrollArea,
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  SonnerToaster,
-  ThemeProvider,
-  ThemeToggle,
-  Toaster,
-  TooltipProvider,
-} from '@gv-tech/ui-web';
-import { Loader2, Menu } from 'lucide-react';
-import * as React from 'react';
-import { BrowserRouter, Link, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import { CombinedDocsLayout, DocSearch, DocSearchProvider, ErrorBoundary, Footer, Sidebar } from './components/docs';
-import { docConfig } from './config/docs';
-
-import { docRoutes } from './routes/doc-routes';
-
-// Lazy load docs pages
-import { PackageManagerProvider } from './hooks/usePackageManager';
-
-const ColorTokensDocs = React.lazy(() => import('./pages').then((m) => ({ default: m.ColorTokensDocs })));
-const GettingStartedPage = React.lazy(() => import('./pages').then((m) => ({ default: m.GettingStartedPage })));
-const InstallationPage = React.lazy(() => import('./pages').then((m) => ({ default: m.InstallationPage })));
-
-function PageLoader() {
-  return (
-    <div className="flex h-[400px] w-full items-center justify-center">
-      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-    </div>
-  );
-}
-
-function DocumentationLayout() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
-
-  // Find current doc based on URL path
-  const pathParts = location.pathname.split('/');
-  const docSlug = pathParts[2] || 'getting-started';
-
-  const currentDoc = React.useMemo(() => {
-    for (const category of docConfig) {
-      const found = category.items.find((item) => item.href === docSlug);
-      if (found) return found;
-    }
-    return null;
-  }, [docSlug]);
-
-  React.useEffect(() => {
-    if (!location.pathname.startsWith('/docs')) {
-      navigate('/docs/getting-started', { replace: true });
-    }
-  }, [location.pathname, navigate]);
-
-  return (
-    <DocSearchProvider>
-      <PackageManagerProvider>
-        <div className="flex h-screen bg-background text-foreground">
-          {/* Desktop Sidebar */}
-          <div className="hidden lg:flex h-full shrink-0">
-            <Sidebar />
-          </div>
-
-          <div className="flex-1 flex flex-col overflow-hidden">
-            <header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
-              <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 className="w-full border-none" onLinkClick={() => setIsSidebarOpen(false)} />
-                  </SheetContent>
-                </Sheet>
-
-                <Breadcrumb className="hidden md:flex min-w-0">
-                  <BreadcrumbList>
-                    <BreadcrumbItem>
-                      <BreadcrumbLink asChild>
-                        <Link to="/docs/getting-started">Docs</Link>
-                      </BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                      <BreadcrumbPage>{currentDoc?.title || 'Documentation'}</BreadcrumbPage>
-                    </BreadcrumbItem>
-                  </BreadcrumbList>
-                </Breadcrumb>
-              </div>
-
-              <div className="flex items-center gap-2 md:gap-4 shrink-0">
-                <DocSearch variant="compact" />
-                <ThemeToggle variant="ternary" />
-              </div>
-            </header>
-            <ScrollArea className="flex-1">
-              <main className="flex-1 flex flex-col p-4 md:p-8 max-w-4xl mx-auto w-full">
-                <div className="flex-1">
-                  <ErrorBoundary>
-                    <React.Suspense fallback={<PageLoader />}>
-                      <Routes>
-                        {/* Getting Started */}
-                        <Route path="getting-started" element={<GettingStartedPage />} />
-                        <Route path="installation" element={<InstallationPage />} />
-                        <Route path="theming" element={<ColorTokensDocs />} />
-                        <Route path="color-tokens" element={<Navigate to="/docs/theming" replace />} />
-
-                        {/* Dynamic Component Routes */}
-                        {docRoutes.map((route) => (
-                          <Route
-                            key={route.path}
-                            path={route.path}
-                            element={
-                              <CombinedDocsLayout
-                                title={route.title}
-                                description={route.description}
-                                web={route.web ? <route.web /> : undefined}
-                                native={route.native ? <route.native /> : undefined}
-                              />
-                            }
-                          />
-                        ))}
-
-                        <Route path="*" element={<Navigate to="/docs/getting-started" replace />} />
-                      </Routes>
-                    </React.Suspense>
-                  </ErrorBoundary>
-                </div>
-                <Footer />
-              </main>
-            </ScrollArea>
-          </div>
-        </div>
-      </PackageManagerProvider>
-    </DocSearchProvider>
-  );
-}
-
-function App() {
-  return (
-    <ThemeProvider>
-      <TooltipProvider>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<Navigate to="/docs/getting-started" replace />} />
-            <Route path="/docs/*" element={<DocumentationLayout />} />
-          </Routes>
-        </BrowserRouter>
-        <Toaster />
-        <SonnerToaster />
-      </TooltipProvider>
-    </ThemeProvider>
-  );
-}
-
-export default App;

package/apps/playground-web/src/components/docs/CodeBlock.tsx

@@ -1,34 +0,0 @@
-import { cn } from '@gv-tech/ui-web';
-import { Check, Copy } from 'lucide-react';
-import * as React from 'react';
-
-interface CodeBlockProps {
-  code: string;
-  language?: string;
-  className?: string;
-}
-
-export function CodeBlock({ code, language = 'tsx', className }: CodeBlockProps) {
-  const [copied, setCopied] = React.useState(false);
-
-  const copyToClipboard = async () => {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div className={cn('relative group', className)}>
-      <pre className="bg-zinc-950 text-zinc-100 rounded-lg p-4 overflow-x-auto text-sm font-mono">
-        <code className={`language-${language}`}>{code.trim()}</code>
-      </pre>
-      <button
-        onClick={copyToClipboard}
-        className="absolute top-3 right-3 p-2 rounded-md bg-zinc-800 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-700 transition-colors opacity-0 group-hover:opacity-100"
-        aria-label="Copy code"
-      >
-        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-      </button>
-    </div>
-  );
-}

package/apps/playground-web/src/components/docs/CombinedDocsLayout.tsx

@@ -1,103 +0,0 @@
-import { useDocMetadata } from '@/hooks/useDocMetadata';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gv-tech/ui-web';
-import { Info } from 'lucide-react';
-import React from 'react';
-
-interface CombinedDocsLayoutProps {
-  title?: string;
-  description?: string;
-  web?: React.ReactNode;
-  native?: React.ReactNode;
-}
-
-export const PlatformContext = React.createContext<'web' | 'native'>('web');
-
-export function CombinedDocsLayout({ title, description, web, native }: CombinedDocsLayoutProps) {
-  useDocMetadata({
-    title: title || 'Documentation',
-    description: description || 'GV Tech Design System documentation.',
-  });
-  // Use localStorage to persist platform preference
-  const [activeTab, setActiveTab] = React.useState<'web' | 'native'>(() => {
-    // Check if there is a saved preference
-    const saved = typeof window !== 'undefined' ? localStorage.getItem('gv-docs-platform') : null;
-    if (saved === 'web' || saved === 'native') {
-      // Ensure the saved preference is actually available for this component
-      if (saved === 'web' && web) return 'web';
-      if (saved === 'native' && native) return 'native';
-    }
-    // Default to web if available, otherwise native
-    return web ? 'web' : 'native';
-  });
-
-  // When navigating between pages, React Router reuses this component without
-  // remounting, so the useState initializer won't re-run. Sync activeTab
-  // whenever the set of available platforms changes to avoid showing a blank tab.
-  React.useEffect(() => {
-    if (activeTab === 'native' && !native) {
-      setActiveTab(web ? 'web' : 'native');
-    } else if (activeTab === 'web' && !web && native) {
-      setActiveTab('native');
-    }
-  }, [web, native, activeTab]);
-
-  const onTabChange = (value: string) => {
-    const newTab = value as 'web' | 'native';
-    setActiveTab(newTab);
-    localStorage.setItem('gv-docs-platform', newTab);
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <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>
-
-      <Tabs value={activeTab} onValueChange={onTabChange} className="w-full">
-        <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
-          {web && (
-            <TabsTrigger
-              value="web"
-              className="relative h-9 rounded-none border-b-2 border-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-            >
-              Web
-            </TabsTrigger>
-          )}
-          {native && (
-            <TabsTrigger
-              value="native"
-              className="relative h-9 rounded-none border-b-2 border-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-            >
-              Native
-            </TabsTrigger>
-          )}
-        </TabsList>
-        {web && (
-          <TabsContent value="web" className="mt-8 md:mt-10 border-none p-0 outline-none">
-            <PlatformContext.Provider value="web">
-              <div className="space-y-10 md:space-y-12">{web}</div>
-            </PlatformContext.Provider>
-          </TabsContent>
-        )}
-        {native && (
-          <TabsContent value="native" className="mt-8 md:mt-10 border-none p-0 outline-none">
-            <PlatformContext.Provider value="native">
-              <div className="rounded-lg bg-blue-500/10 border border-blue-500/20 p-4 mb-6 flex gap-3 text-blue-500">
-                <Info className="h-5 w-5 shrink-0" />
-                <div className="text-sm">
-                  <p className="font-semibold">Native Implementation</p>
-                  <p className="opacity-90">
-                    These components are built for React Native environments. Previews below show implementation details
-                    and code samples.
-                  </p>
-                </div>
-              </div>
-              <div className="space-y-10 md:space-y-12">{native}</div>
-            </PlatformContext.Provider>
-          </TabsContent>
-        )}
-      </Tabs>
-    </div>
-  );
-}