@gv-tech/design-system 2.5.0 → 2.5.2

package/packages/ui-web/src/toast.tsx

@@ -1,111 +0,0 @@
-import * as ToastPrimitives from '@radix-ui/react-toast';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-      className,
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
-  {
-    variants: {
-      variant: {
-        default: 'border bg-background text-foreground',
-        destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
-      className,
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold [&+div]:text-xs', className)} {...props} />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  Toast,
-  ToastAction,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-  type ToastActionElement,
-  type ToastProps,
-};

package/packages/ui-web/src/toaster.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import { ToasterBaseProps } from '@gv-tech/ui-core';
-import { useToast } from './hooks/use-toast';
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from './toast';
-
-export function Toaster({ ...props }: ToasterBaseProps) {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider {...props}>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}

package/packages/ui-web/src/toggle-group.test.tsx

@@ -1,40 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import { ToggleGroup, ToggleGroupItem } from '.';
-
-describe('ToggleGroup', () => {
-  it('renders correctly', () => {
-    render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="a" aria-label="Toggle A">
-          A
-        </ToggleGroupItem>
-        <ToggleGroupItem value="b" aria-label="Toggle B">
-          B
-        </ToggleGroupItem>
-      </ToggleGroup>,
-    );
-
-    expect(screen.getByLabelText('Toggle A')).toBeInTheDocument();
-    expect(screen.getByLabelText('Toggle B')).toBeInTheDocument();
-  });
-
-  it('toggles selection', async () => {
-    const user = userEvent.setup();
-    render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="a" aria-label="Toggle A">
-          A
-        </ToggleGroupItem>
-        <ToggleGroupItem value="b" aria-label="Toggle B">
-          B
-        </ToggleGroupItem>
-      </ToggleGroup>,
-    );
-
-    const toggleA = screen.getByLabelText('Toggle A');
-    await user.click(toggleA);
-    expect(toggleA).toHaveAttribute('aria-checked', 'true');
-  });
-});

package/packages/ui-web/src/toggle-group.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { toggleVariants } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  size: 'default',
-  variant: 'default',
-});
-
-export type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>;
-
-const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Root>, ToggleGroupProps>(
-  ({ className, variant, size, children, ...props }, ref) => (
-    <ToggleGroupPrimitive.Root ref={ref} className={cn('flex items-center justify-center gap-1', className)} {...props}>
-      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  ),
-);
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>;
-
-const ToggleGroupItem = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Item>, ToggleGroupItemProps>(
-  ({ className, children, variant, size, ...props }, ref) => {
-    const context = React.useContext(ToggleGroupContext);
-
-    return (
-      <ToggleGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          toggleVariants({
-            variant: context.variant || variant,
-            size: context.size || size,
-          }),
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </ToggleGroupPrimitive.Item>
-    );
-  },
-);
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };

package/packages/ui-web/src/toggle.test.tsx

@@ -1,21 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import { Toggle } from '.';
-
-describe('Toggle', () => {
-  it('renders correctly', () => {
-    render(<Toggle aria-label="Toggle bold">B</Toggle>);
-    expect(screen.getByLabelText('Toggle bold')).toBeInTheDocument();
-  });
-
-  it('toggles state', async () => {
-    const user = userEvent.setup();
-    render(<Toggle aria-label="Toggle italic" />);
-    const toggle = screen.getByLabelText('Toggle italic');
-
-    expect(toggle).toHaveAttribute('aria-pressed', 'false');
-    await user.click(toggle);
-    expect(toggle).toHaveAttribute('aria-pressed', 'true');
-  });
-});

package/packages/ui-web/src/toggle.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { ToggleBaseProps, toggleVariants } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-export interface ToggleProps
-  extends
-    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,
-    Omit<VariantProps<typeof toggleVariants>, 'size' | 'variant'>,
-    ToggleBaseProps {}
-
-const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
-  ({ className, variant, size, ...props }, ref) => (
-    <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
-  ),
-);
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };

package/packages/ui-web/src/tooltip.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import {
-  TooltipBaseProps,
-  TooltipContentBaseProps,
-  TooltipProviderBaseProps,
-  TooltipTriggerBaseProps,
-} from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-export type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> &
-  TooltipProviderBaseProps;
-
-const TooltipProvider = ({ delayDuration = 0, ...props }: TooltipProviderProps) => (
-  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
-);
-
-export type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> & TooltipBaseProps;
-
-const Tooltip = ({ ...props }: TooltipProps) => <TooltipPrimitive.Root {...props} />;
-
-export type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> &
-  TooltipTriggerBaseProps;
-
-const TooltipTrigger = React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Trigger>, TooltipTriggerProps>(
-  ({ className, ...props }, ref) => <TooltipPrimitive.Trigger ref={ref} className={className} {...props} />,
-);
-TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
-
-export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
-  TooltipContentBaseProps;
-
-const TooltipContent = React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(
-  ({ className, sideOffset = 4, ...props }, ref) => (
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/packages/ui-web/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react-jsx",
-    "outDir": "dist",
-    "rootDir": "../..",
-    "types": ["node", "vitest/globals", "@testing-library/jest-dom"],
-    "paths": {
-      "@gv-tech/design-tokens": ["../design-tokens/src"],
-      "@gv-tech/ui-core": ["../ui-core/src"],
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}

package/packages/ui-web/vite.config.ts

@@ -1,21 +0,0 @@
-/// <reference types="vitest" />
-import react from '@vitejs/plugin-react-swc';
-import path from 'path';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./src/setupTests.ts'],
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-});

package/postcss.config.mjs

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

package/release-please-config.json

@@ -1,60 +0,0 @@
-{
-  "packages": {
-    ".": {
-      "release-type": "node",
-      "changelog-sections": [
-        {
-          "type": "feat",
-          "section": "Features"
-        },
-        {
-          "type": "fix",
-          "section": "Bug Fixes"
-        },
-        {
-          "type": "docs",
-          "section": "Documentation",
-          "hidden": false
-        },
-        {
-          "type": "perf",
-          "section": "Performance Improvements"
-        },
-        {
-          "type": "refactor",
-          "section": "Code Refactoring",
-          "hidden": false
-        },
-        {
-          "type": "chore",
-          "section": "Miscellaneous Chores",
-          "hidden": true
-        }
-      ]
-    },
-    "packages/ui-web": {
-      "release-type": "node",
-      "package-name": "@gv-tech/ui-web"
-    },
-    "packages/ui-native": {
-      "release-type": "node",
-      "package-name": "@gv-tech/ui-native"
-    },
-    "packages/ui-core": {
-      "release-type": "node",
-      "package-name": "@gv-tech/ui-core"
-    },
-    "packages/design-tokens": {
-      "release-type": "node",
-      "package-name": "@gv-tech/design-tokens"
-    },
-    "apps/playground-web": {
-      "release-type": "node",
-      "package-name": "playground-web"
-    },
-    "apps/native-playground": {
-      "release-type": "node",
-      "package-name": "native-playground"
-    }
-  }
-}

package/scripts/build-registry.ts

@@ -1,80 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-const REGISTRY_PATH = path.join(process.cwd(), 'apps/playground-web/public/registry');
-const COMPONENTS_UI_PATH = path.join(process.cwd(), 'packages/ui-web/src');
-
-if (!fs.existsSync(REGISTRY_PATH)) {
-  fs.mkdirSync(REGISTRY_PATH, { recursive: true });
-}
-
-function buildRegistry() {
-  const entries = fs.readdirSync(COMPONENTS_UI_PATH, { withFileTypes: true });
-
-  const registryIndex: { name: string; files: string[]; type: string }[] = [];
-
-  entries.forEach((entry) => {
-    let name = '';
-    const componentFiles: { path: string; content: string; type: string }[] = [];
-    const filePaths: string[] = [];
-
-    // Ignore index.ts, hooks, lib, and tests
-    if (
-      entry.name === 'index.ts' ||
-      entry.name === 'hooks' ||
-      entry.name === 'lib' ||
-      entry.name.includes('.test.') ||
-      entry.name === 'sonner.tsx' // sonner is often handled uniquely or as a wrapper
-    ) {
-      return;
-    }
-
-    if (entry.isDirectory()) {
-      name = entry.name;
-      const dirPath = path.join(COMPONENTS_UI_PATH, name);
-      const dirFiles = fs.readdirSync(dirPath).filter((f) => f.endsWith('.ts') || f.endsWith('.tsx'));
-
-      dirFiles.forEach((file) => {
-        const content = fs.readFileSync(path.join(dirPath, file), 'utf8');
-        componentFiles.push({
-          path: `ui/${name}/${file}`,
-          content,
-          type: 'registry:ui',
-        });
-        filePaths.push(`ui/${name}/${file}`);
-      });
-    } else if (entry.isFile() && entry.name.endsWith('.tsx')) {
-      name = path.basename(entry.name, '.tsx');
-      const content = fs.readFileSync(path.join(COMPONENTS_UI_PATH, entry.name), 'utf8');
-      componentFiles.push({
-        path: `ui/${entry.name}`,
-        content,
-        type: 'registry:ui',
-      });
-      filePaths.push(`ui/${entry.name}`);
-    }
-
-    if (name) {
-      const componentJson = {
-        name,
-        type: 'registry:ui',
-        dependencies: [],
-        registryDependencies: [],
-        files: componentFiles,
-      };
-
-      fs.writeFileSync(path.join(REGISTRY_PATH, `${name}.json`), JSON.stringify(componentJson, null, 2));
-
-      registryIndex.push({
-        name,
-        files: filePaths,
-        type: 'registry:ui',
-      });
-    }
-  });
-
-  fs.writeFileSync(path.join(REGISTRY_PATH, 'index.json'), JSON.stringify(registryIndex, null, 2));
-  console.log('✅ Registry built successfully in public/registry');
-}
-
-buildRegistry();

package/scripts/sync-tokens.ts

@@ -1,86 +0,0 @@
-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 '@gv-tech/design-tokens';
-
-const GLOBALS_CSS_PATHS = [
-  path.join(process.cwd(), 'src/globals.css'),
-  path.join(process.cwd(), 'apps/playground-web/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() {
-  const variables = generateCssVariables();
-  const tokenRegex = /\/\* @tokens-start \*\/[\s\S]*\/\* @tokens-end \*\//;
-
-  for (const cssPath of GLOBALS_CSS_PATHS) {
-    try {
-      if (!fs.existsSync(cssPath)) {
-        console.log(`⚠️ Skipping ${cssPath} (not found)`);
-        continue;
-      }
-
-      const globalsContent = fs.readFileSync(cssPath, 'utf8');
-
-      if (!tokenRegex.test(globalsContent)) {
-        console.warn(`⚠️ Warning: Could not find @tokens markers in ${cssPath}`);
-        continue;
-      }
-
-      const updatedContent = globalsContent.replace(
-        tokenRegex,
-        `/* @tokens-start */\n${variables}\n  /* @tokens-end */`,
-      );
-
-      fs.writeFileSync(cssPath, updatedContent);
-      console.log(`✅ Tokens synchronized successfully for ${path.relative(process.cwd(), cssPath)}`);
-    } catch (error) {
-      console.error(`❌ Error synchronizing tokens for ${cssPath}:`, error);
-      // We don't exit here to allow other files to be synced, but we might want to flag failure.
-    }
-  }
-}
-
-syncTokens();