@gv-tech/design-system 2.3.0 → 2.5.0

package/src/components/ui/tooltip.tsx

@@ -1,30 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground 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 origin-[--radix-tooltip-content-transform-origin]',
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/hooks/use-theme.test.tsx

@@ -1,27 +0,0 @@
-import { useTheme } from '@/hooks/use-theme';
-import { theme } from '@/theme/tokens';
-import { renderHook } from '@testing-library/react';
-import { ThemeProvider } from 'next-themes';
-import { describe, expect, it } from 'vitest';
-
-describe('useTheme', () => {
-  it('returns default light tokens when no theme is set', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
-    });
-
-    expect(result.current.tokens).toEqual(theme.light);
-  });
-
-  it('returns dark tokens when theme is dark', () => {
-    const { result } = renderHook(() => useTheme(), {
-      wrapper: ({ children }) => (
-        <ThemeProvider defaultTheme="dark" enableSystem={false}>
-          {children}
-        </ThemeProvider>
-      ),
-    });
-
-    expect(result.current.tokens).toEqual(theme.dark);
-  });
-});

package/src/hooks/use-theme.ts

@@ -1,15 +0,0 @@
-import { theme } from '@/theme/tokens';
-import { useTheme as useNextTheme } from 'next-themes';
-
-export function useTheme() {
-  const context = useNextTheme();
-  const { resolvedTheme } = context;
-
-  // Default to light theme tokens if resolvedTheme is undefined or invalid
-  const activeTokens = resolvedTheme === 'dark' ? theme.dark : theme.light;
-
-  return {
-    ...context,
-    tokens: activeTokens,
-  };
-}

package/src/hooks/use-toast.ts

@@ -1,189 +0,0 @@
-'use client';
-
-// Inspired by react-hot-toast library
-import * as React from 'react';
-
-import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: 'ADD_TOAST',
-  UPDATE_TOAST: 'UPDATE_TOAST',
-  DISMISS_TOAST: 'DISMISS_TOAST',
-  REMOVE_TOAST: 'REMOVE_TOAST',
-} as const;
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | {
-      type: ActionType['ADD_TOAST'];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType['UPDATE_TOAST'];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType['DISMISS_TOAST'];
-      toastId?: ToasterToast['id'];
-    }
-  | {
-      type: ActionType['REMOVE_TOAST'];
-      toastId?: ToasterToast['id'];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: 'REMOVE_TOAST',
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case actionTypes.ADD_TOAST:
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case actionTypes.UPDATE_TOAST:
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      };
-
-    case actionTypes.DISMISS_TOAST: {
-      const { toastId } = action;
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      };
-    }
-    case actionTypes.REMOVE_TOAST:
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-
-type Toast = Omit<ToasterToast, 'id'>;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: 'UPDATE_TOAST',
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
-
-  dispatch({
-    type: 'ADD_TOAST',
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
-  };
-}
-
-export { toast, useToast };

package/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-import './globals.css';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);

package/src/pages/ColorTokensDocs.tsx

@@ -1,218 +0,0 @@
-import { CodeBlock } from '@/components/docs/CodeBlock';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { tokens } from '@/theme/tokens';
-
-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">
-          The Garcia Ventures design system is built on a robust token architecture that ensures consistency,
-          accessibility, and easy maintenance across all digital products.
-        </p>
-      </div>
-
-      <section className="space-y-6">
-        <h2 className="text-3xl font-bold tracking-tight">Design Philosophy</h2>
-        <div className="grid gap-6 md:grid-cols-3">
-          <Card className="bg-primary/5 border-primary/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Intellect</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Represented by Royal Blue, signaling depth, trust, and professional expertise.
-              </p>
-            </CardContent>
-          </Card>
-          <Card className="bg-secondary/5 border-secondary/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Stability</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Rooted in Brand Green, reflecting growth, balance, and environmental consciousness.
-              </p>
-            </CardContent>
-          </Card>
-          <Card className="bg-accent/5 border-accent/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Transparency</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Expressed through Floral White, prioritizing clarity and a clean user experience.
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      <section className="space-y-6">
-        <h2 className="text-3xl font-bold tracking-tight">Adoption Guide</h2>
-        <p className="text-muted-foreground">
-          There are three primary ways to consume these tokens depending on your project's technology stack.
-        </p>
-
-        <div className="space-y-8">
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">1. Tailwind CSS (Recommended)</h3>
-            <p className="text-sm text-muted-foreground">
-              Most projects should use standard Tailwind utility classes. These are automatically mapped to our tokens
-              via CSS variables.
-            </p>
-            <CodeBlock
-              language="tsx"
-              code={`// Use standard semantic classes
-<button className="bg-primary text-primary-foreground hover:bg-primary/90">
-  Primary Action
-</button>
-
-<div className="border-border bg-card text-card-foreground">
-  Card Content
-</div>`}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">2. TypeScript / React</h3>
-            <p className="text-sm text-muted-foreground">
-              For logic-heavy styling or CSS-in-JS solutions, import the \`tokens\` object directly.
-            </p>
-            <CodeBlock
-              language="tsx"
-              code={`import { tokens } from '@gv-tech/design-system';
-
-const MyComponent = () => {
-  return (
-    <div style={{ color: tokens.palette.brand.blue }}>
-      Using Royal Blue directly
-    </div>
-  );
-};`}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">3. Vanilla CSS</h3>
-            <p className="text-sm text-muted-foreground">
-              Directly access the CSS variables in your style tags or external stylesheets.
-            </p>
-            <CodeBlock
-              language="css"
-              code={`.custom-element {
-  background-color: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
-  border: 1px solid hsl(var(--border));
-}`}
-            />
-          </div>
-        </div>
-      </section>
-
-      <section className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h2 className="text-3xl font-bold tracking-tight">Core Palette</h2>
-        </div>
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.blue }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Royal Blue</h4>
-                  <p className="text-xs text-muted-foreground">Intellect & Trust</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.blue}</code>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.green }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Stability Green</h4>
-                  <p className="text-xs text-muted-foreground">Growth & Balance</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.green}</code>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.floralWhite }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Floral White</h4>
-                  <p className="text-xs text-muted-foreground">Transparency & Clarity</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.floralWhite}</code>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      <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>
-            <TableHeader>
-              <TableRow className="bg-muted/50 hover:bg-muted/50">
-                <TableHead className="w-[200px]">Token</TableHead>
-                <TableHead>Variable Name</TableHead>
-                <TableHead>Light Mode</TableHead>
-                <TableHead>Dark Mode</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {(Object.keys(tokens.theme.light) as Array<keyof typeof tokens.theme.light>).map((key) => {
-                if (key === 'radius') return null;
-                return (
-                  <TableRow key={key} className="group">
-                    <TableCell className="font-medium group-hover:text-primary transition-colors">
-                      {key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')}
-                    </TableCell>
-                    <TableCell className="font-mono text-xs text-muted-foreground">
-                      --{key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-3">
-                        <div
-                          className="h-6 w-6 rounded-md border shadow-sm"
-                          style={{ backgroundColor: tokens.theme.light[key] as string }}
-                        />
-                        <span className="text-xs font-mono">{tokens.theme.light[key]}</span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-3">
-                        <div
-                          className="h-6 w-6 rounded-md border shadow-sm"
-                          style={{ backgroundColor: tokens.theme.dark[key] as string }}
-                        />
-                        <span className="text-xs font-mono">{tokens.theme.dark[key]}</span>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      </section>
-    </div>
-  );
-}