@gv-tech/design-system 2.4.0 → 2.5.1

package/src/pages/components/ToggleGroupDocs.tsx

@@ -1,131 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { Bold, Italic, Underline } from 'lucide-react';
-
-export function ToggleGroupDocs() {
-  return (
-    <ComponentSection title="Toggle Group" description="A set of two-state buttons that can be toggled on or off.">
-      <ComponentShowcase
-        title="Default"
-        description="A default toggle group."
-        code={`<ToggleGroup type="multiple">
-  <ToggleGroupItem value="bold" aria-label="Toggle bold">
-    <Bold className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="italic" aria-label="Toggle italic">
-    <Italic className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="underline" aria-label="Toggle underline">
-    <Underline className="h-4 w-4" />
-  </ToggleGroupItem>
-</ToggleGroup>`}
-      >
-        <ToggleGroup type="multiple">
-          <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="underline" aria-label="Toggle underline">
-            <Underline className="h-4 w-4" />
-          </ToggleGroupItem>
-        </ToggleGroup>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The ToggleGroup component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/toggle-group"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Toggle Group
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">ToggleGroup (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'type',
-              type: '"single" | "multiple"',
-              required: true,
-              description: 'Determines whether a single or multiple items can be pressed at a time.',
-            },
-            {
-              name: 'defaultValue',
-              type: 'string | string[]',
-              description: 'The value of the item to show as pressed when initially rendered.',
-            },
-            {
-              name: 'value',
-              type: 'string | string[]',
-              description: 'The controlled value of the pressed item.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string | string[]) => void',
-              description: 'Event handler called when the value changes.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with the toggle group.',
-            },
-            {
-              name: 'rovingFocus',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'When false, roving focus is disabled.',
-            },
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              description: 'The orientation of the component.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the toggle group.',
-            },
-            {
-              name: 'variant',
-              type: '"default" | "outline"',
-              defaultValue: '"default"',
-              description: 'The visual variant of the toggle group.',
-            },
-            {
-              name: 'size',
-              type: '"default" | "sm" | "lg"',
-              defaultValue: '"default"',
-              description: 'The size of the toggle group.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">ToggleGroupItem</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              required: true,
-              description: 'A unique value for the item.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with the item.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/TooltipDocs.tsx

@@ -1,147 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@/components/ui/button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-
-export function TooltipDocs() {
-  return (
-    <ComponentSection
-      title="Tooltip"
-      description="A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
-    >
-      <ComponentShowcase
-        title="Default"
-        description="A default tooltip."
-        code={`<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button variant="outline">Hover</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Add to library</p>
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>`}
-      >
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="outline">Hover</Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Add to library</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Tooltip component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/tooltip"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Tooltip
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">TooltipProvider</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'delayDuration',
-              type: 'number',
-              defaultValue: '700',
-              description: 'The duration from when the mouse enters a tooltip trigger until the tooltip opens.',
-            },
-            {
-              name: 'skipDelayDuration',
-              type: 'number',
-              defaultValue: '300',
-              description: 'How much time a user has to enter another trigger without incurring a delay again.',
-            },
-            {
-              name: 'disableHoverableContent',
-              type: 'boolean',
-              description:
-                'When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">Tooltip (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The open state of the tooltip when it is initially rendered.',
-            },
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the tooltip.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state of the tooltip changes.',
-            },
-            {
-              name: 'delayDuration',
-              type: 'number',
-              defaultValue: '700',
-              description: 'The duration from when the mouse enters a tooltip trigger until the tooltip opens.',
-            },
-            {
-              name: 'disableHoverableContent',
-              type: 'boolean',
-              description:
-                'When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">TooltipContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'side',
-              type: '"top" | "right" | "bottom" | "left"',
-              defaultValue: '"top"',
-              description: 'The preferred side of the trigger to render against when open.',
-            },
-            {
-              name: 'sideOffset',
-              type: 'number',
-              description: 'The distance in pixels from the trigger.',
-            },
-            {
-              name: 'align',
-              type: '"start" | "center" | "end"',
-              defaultValue: '"center"',
-              description: 'The preferred alignment against the trigger.',
-            },
-            {
-              name: 'alignOffset',
-              type: 'number',
-              description: 'An offset in pixels from the "start" or "end" alignment options.',
-            },
-            {
-              name: 'avoidCollisions',
-              type: 'boolean',
-              defaultValue: 'true',
-              description:
-                'When true, overrides the side and align preferences to prevent collisions with boundary edges.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/index.ts

@@ -1,52 +0,0 @@
-// Getting Started
-export { ColorTokensDocs } from './ColorTokensDocs';
-export { GettingStartedPage, InstallationPage } from './GettingStarted';
-
-// Component Docs
-export { AccordionDocs } from './components/AccordionDocs';
-export { AlertDialogDocs } from './components/AlertDialogDocs';
-export { AlertDocs } from './components/AlertDocs';
-export { AspectRatioDocs } from './components/AspectRatioDocs';
-export { AvatarDocs } from './components/AvatarDocs';
-export { BadgeDocs } from './components/BadgeDocs';
-export { BreadcrumbDocs } from './components/BreadcrumbDocs';
-export { ButtonDocs } from './components/ButtonDocs';
-export { CalendarDocs } from './components/CalendarDocs';
-export { CardDocs } from './components/CardDocs';
-export { CarouselDocs } from './components/CarouselDocs';
-export { ChartDocs } from './components/ChartDocs';
-export { CheckboxDocs } from './components/CheckboxDocs';
-export { CollapsibleDocs } from './components/CollapsibleDocs';
-export { CommandDocs } from './components/CommandDocs';
-export { ContextMenuDocs } from './components/ContextMenuDocs';
-export { DialogDocs } from './components/DialogDocs';
-export { DrawerDocs } from './components/DrawerDocs';
-export { DropdownMenuDocs } from './components/DropdownMenuDocs';
-export { FormDocs } from './components/FormDocs';
-export { HoverCardDocs } from './components/HoverCardDocs';
-export { InputDocs } from './components/InputDocs';
-export { LabelDocs } from './components/LabelDocs';
-export { MenubarDocs } from './components/MenubarDocs';
-export { NavigationMenuDocs } from './components/NavigationMenuDocs';
-export { PaginationDocs } from './components/PaginationDocs';
-export { PopoverDocs } from './components/PopoverDocs';
-export { ProgressDocs } from './components/ProgressDocs';
-export { RadioGroupDocs } from './components/RadioGroupDocs';
-export { ResizableDocs } from './components/ResizableDocs';
-export { ScrollAreaDocs } from './components/ScrollAreaDocs';
-export { SearchDocs } from './components/SearchDocs';
-export { SelectDocs } from './components/SelectDocs';
-export { SeparatorDocs } from './components/SeparatorDocs';
-export { SheetDocs } from './components/SheetDocs';
-export { SkeletonDocs } from './components/SkeletonDocs';
-export { SliderDocs } from './components/SliderDocs';
-export { SonnerDocs } from './components/SonnerDocs';
-export { SwitchDocs } from './components/SwitchDocs';
-export { TableDocs } from './components/TableDocs';
-export { TabsDocs } from './components/TabsDocs';
-export { TextareaDocs } from './components/TextareaDocs';
-export { ThemeToggleDocs } from './components/ThemeToggleDocs';
-export { ToastDocs } from './components/ToastDocs';
-export { ToggleDocs } from './components/ToggleDocs';
-export { ToggleGroupDocs } from './components/ToggleGroupDocs';
-export { TooltipDocs } from './components/TooltipDocs';

package/src/setupTests.ts

@@ -1,47 +0,0 @@
-import '@testing-library/jest-dom';
-import * as matchers from '@testing-library/jest-dom/matchers';
-import { expect } from 'vitest';
-
-expect.extend(matchers);
-
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: (query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: () => {}, // Deprecated
-    removeListener: () => {}, // Deprecated
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    dispatchEvent: () => {},
-  }),
-});
-
-// Mock ResizeObserver
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-window.ResizeObserver = ResizeObserver;
-
-// Mock IntersectionObserver
-class IntersectionObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-window.IntersectionObserver = IntersectionObserver as any;
-
-// Mock scrollIntoView
-window.HTMLElement.prototype.scrollIntoView = function () {};
-
-// Mock Pointer Capture
-window.HTMLElement.prototype.setPointerCapture = function () {};
-window.HTMLElement.prototype.releasePointerCapture = function () {};
-window.HTMLElement.prototype.hasPointerCapture = function () {
-  return false;
-};

package/src/theme/tokens.ts

@@ -1,90 +0,0 @@
-/**
- * Design system tokens for Garcia Ventures.
- * This file defines the core palette and semantic tokens for the theme system.
- */
-
-export const palette = {
-  brand: {
-    blue: 'hsl(225 73% 57%)', // Royal Blue (Intellect)
-    green: 'hsl(151 66% 27%)', // #177245 (Stability)
-    floralWhite: 'hsl(40 100% 97%)', // Light Neutral / Floral White
-  },
-  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: 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: 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',
-  },
-} as const;
-
-export const tokens = {
-  palette,
-  theme,
-} as const;
-
-export type ThemeTokens = typeof theme.light;
-export type PaletteTokens = typeof palette;

package/tsconfig.build.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "declarationMap": true,
-    "outDir": "dist",
-    "rootDir": "src"
-  },
-  "include": ["src"]
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "types": ["node"]
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,72 +0,0 @@
-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: {
-    alias: {
-      '@': resolve(__dirname, './src'),
-    },
-  },
-  build: {
-    sourcemap: true,
-    outDir: isLibrary ? 'dist' : 'dist-site',
-    // Only empty the directory when building the site.
-    // For the library, we want to keep the types generated by tsc.
-    emptyOutDir: !isLibrary,
-    lib: isLibrary
-      ? {
-          entry: getEntries(),
-          name: 'GvtechDesign',
-          fileName: (format, entryName) =>
-            entryName === 'index'
-              ? `index.${format === 'es' ? 'es' : 'cjs'}.js`
-              : `${entryName}.${format === 'es' ? 'es' : 'cjs'}.js`,
-          formats: ['es', 'cjs'],
-        }
-      : undefined,
-    rollupOptions: {
-      external: isLibrary ? ['react', 'react-dom', 'prop-types', 'next-themes'] : [],
-      output: {
-        globals: isLibrary
-          ? {
-              react: 'React',
-              'react-dom': 'ReactDOM',
-              'prop-types': 'PropTypes',
-              'next-themes': 'NextThemes',
-            }
-          : {},
-        manualChunks(id) {
-          if (id.includes('node_modules')) {
-            if (id.includes('axe-core')) return 'axe';
-            if (id.includes('react-docgen')) return 'docgen';
-            return 'vendor';
-          }
-        },
-      },
-    },
-  },
-});

package/vitest.config.ts

@@ -1,17 +0,0 @@
-import { resolve } from 'path';
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: './src/setupTests.ts',
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'lcov'],
-    },
-    alias: {
-      '@': resolve(__dirname, './src'),
-    },
-  },
-});

package/wrangler.toml

@@ -1,22 +0,0 @@
-name = "gvtech-design"
-compatibility_date = "2024-11-01"
-compatibility_flags = ["nodejs_compat"]
-pages_build_output_dir = "dist-site"
-
-[vars]
-NODE_VERSION = "24"
-APP_ENV = "production"
-
-[env.preview]
-name = "gvtech-design-preview"
-
-[env.preview.vars]
-NODE_VERSION = "24"
-APP_ENV = "preview"
-
-[env.production]
-name = "gvtech-design"
-
-[env.production.vars]
-NODE_VERSION = "24"
-APP_ENV = "production"