@gv-tech/design-system 0.9.0 → 1.1.0

package/src/components/docs/ComponentShowcase.tsx

@@ -0,0 +1,68 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { CodeBlock } from './CodeBlock';
+
+interface ComponentShowcaseProps {
+  title: string;
+  description?: string;
+  code: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ComponentShowcase({ title, description, code, children, className }: ComponentShowcaseProps) {
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      <CardHeader>
+        <CardTitle className="text-lg">{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent className="p-0">
+        <Tabs defaultValue="preview" className="w-full">
+          <div className="border-b px-6">
+            <TabsList className="h-10 bg-transparent p-0">
+              <TabsTrigger
+                value="preview"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                Preview
+              </TabsTrigger>
+              <TabsTrigger
+                value="code"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                Code
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="preview" className="p-6 mt-0">
+            <div className="flex flex-wrap gap-4 items-center">{children}</div>
+          </TabsContent>
+          <TabsContent value="code" className="mt-0">
+            <CodeBlock code={code} className="rounded-none border-0" />
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface ComponentSectionProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export function ComponentSection({ title, description, children }: ComponentSectionProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+        {description && <p className="text-lg text-muted-foreground">{description}</p>}
+      </div>
+      <div className="space-y-6">{children}</div>
+    </div>
+  );
+}

package/src/components/docs/Footer.tsx

@@ -0,0 +1,117 @@
+import { Separator } from '@/components/ui/separator';
+import { Github, Linkedin, Twitter } from 'lucide-react';
+
+export function Footer() {
+  return (
+    <footer className="border-t bg-muted/30">
+      <div className="p-8 space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Brand */}
+          <div className="space-y-3">
+            <h3 className="font-semibold">GV Tech Design System</h3>
+            <p className="text-sm text-muted-foreground">
+              A comprehensive React component library for building modern applications.
+            </p>
+          </div>
+
+          {/* Resources */}
+          <div className="space-y-3">
+            <h4 className="font-medium text-sm">Resources</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li>
+                <a
+                  href="https://github.com/Garcia-Ventures/gvtech-design"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  GitHub Repository
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.npmjs.com/package/@gv-tech/design-system"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  NPM Package
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://ui.shadcn.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  shadcn/ui
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Social */}
+          <div className="space-y-3">
+            <h4 className="font-medium text-sm">Connect</h4>
+            <div className="flex items-center space-x-4">
+              <a
+                href="https://github.com/Garcia-Ventures"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted-foreground hover:text-foreground transition-colors"
+                aria-label="GitHub"
+              >
+                <Github className="h-5 w-5" />
+              </a>
+              <a
+                href="https://twitter.com/gvtech"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted-foreground hover:text-foreground transition-colors"
+                aria-label="Twitter"
+              >
+                <Twitter className="h-5 w-5" />
+              </a>
+              <a
+                href="https://linkedin.com/company/gvtech"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted-foreground hover:text-foreground transition-colors"
+                aria-label="LinkedIn"
+              >
+                <Linkedin className="h-5 w-5" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+          <p>© GVTech 2026. All rights reserved.</p>
+          <p>
+            Built with{' '}
+            <a
+              href="https://ui.shadcn.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline underline-offset-4 hover:text-foreground"
+            >
+              shadcn/ui
+            </a>{' '}
+            and{' '}
+            <a
+              href="https://tailwindcss.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline underline-offset-4 hover:text-foreground"
+            >
+              Tailwind CSS
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/components/docs/Sidebar.tsx

@@ -0,0 +1,189 @@
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import {
+  ChevronDown,
+  ChevronRight,
+  FormInput,
+  Home,
+  Layers,
+  LayoutGrid,
+  MessageSquare,
+  Navigation,
+  Sparkles,
+  Table2,
+} from 'lucide-react';
+import * as React from 'react';
+import { version } from '../../../package.json';
+
+export type ComponentCategory =
+  | 'getting-started'
+  | 'layout'
+  | 'forms'
+  | 'data-display'
+  | 'navigation'
+  | 'feedback'
+  | 'overlay'
+  | 'advanced';
+
+export interface NavItem {
+  id: string;
+  label: string;
+  category: ComponentCategory;
+}
+
+interface SidebarProps {
+  activeItem: string;
+  onItemSelect: (id: string) => void;
+}
+
+const categoryConfig: Record<ComponentCategory, { label: string; icon: React.ReactNode }> = {
+  'getting-started': { label: 'Getting Started', icon: <Home className="h-4 w-4" /> },
+  layout: { label: 'Layout', icon: <LayoutGrid className="h-4 w-4" /> },
+  forms: { label: 'Forms', icon: <FormInput className="h-4 w-4" /> },
+  'data-display': { label: 'Data Display', icon: <Table2 className="h-4 w-4" /> },
+  navigation: { label: 'Navigation', icon: <Navigation className="h-4 w-4" /> },
+  feedback: { label: 'Feedback', icon: <MessageSquare className="h-4 w-4" /> },
+  overlay: { label: 'Overlay', icon: <Layers className="h-4 w-4" /> },
+  advanced: { label: 'Advanced', icon: <Sparkles className="h-4 w-4" /> },
+};
+
+export const navItems: NavItem[] = [
+  // Getting Started
+  { id: 'getting-started', label: 'Introduction', category: 'getting-started' },
+  { id: 'installation', label: 'Installation', category: 'getting-started' },
+
+  // Layout
+  { id: 'card', label: 'Card', category: 'layout' },
+  { id: 'separator', label: 'Separator', category: 'layout' },
+  { id: 'resizable', label: 'Resizable', category: 'layout' },
+  { id: 'scroll-area', label: 'Scroll Area', category: 'layout' },
+  { id: 'aspect-ratio', label: 'Aspect Ratio', category: 'layout' },
+
+  // Forms
+  { id: 'button', label: 'Button', category: 'forms' },
+  { id: 'input', label: 'Input', category: 'forms' },
+  { id: 'textarea', label: 'Textarea', category: 'forms' },
+  { id: 'label', label: 'Label', category: 'forms' },
+  { id: 'checkbox', label: 'Checkbox', category: 'forms' },
+  { id: 'radio-group', label: 'Radio Group', category: 'forms' },
+  { id: 'select', label: 'Select', category: 'forms' },
+  { id: 'switch', label: 'Switch', category: 'forms' },
+  { id: 'slider', label: 'Slider', category: 'forms' },
+  { id: 'form', label: 'Form', category: 'forms' },
+
+  // Data Display
+  { id: 'badge', label: 'Badge', category: 'data-display' },
+  { id: 'avatar', label: 'Avatar', category: 'data-display' },
+  { id: 'table', label: 'Table', category: 'data-display' },
+  { id: 'progress', label: 'Progress', category: 'data-display' },
+  { id: 'skeleton', label: 'Skeleton', category: 'data-display' },
+  { id: 'chart', label: 'Chart', category: 'data-display' },
+  { id: 'calendar', label: 'Calendar', category: 'data-display' },
+
+  // Navigation
+  { id: 'tabs', label: 'Tabs', category: 'navigation' },
+  { id: 'breadcrumb', label: 'Breadcrumb', category: 'navigation' },
+  { id: 'pagination', label: 'Pagination', category: 'navigation' },
+  { id: 'navigation-menu', label: 'Navigation Menu', category: 'navigation' },
+  { id: 'menubar', label: 'Menubar', category: 'navigation' },
+
+  // Feedback
+  { id: 'alert', label: 'Alert', category: 'feedback' },
+  { id: 'alert-dialog', label: 'Alert Dialog', category: 'feedback' },
+  { id: 'dialog', label: 'Dialog', category: 'feedback' },
+  { id: 'toast', label: 'Toast', category: 'feedback' },
+  { id: 'sonner', label: 'Sonner', category: 'feedback' },
+
+  // Overlay
+  { id: 'popover', label: 'Popover', category: 'overlay' },
+  { id: 'tooltip', label: 'Tooltip', category: 'overlay' },
+  { id: 'hover-card', label: 'Hover Card', category: 'overlay' },
+  { id: 'dropdown-menu', label: 'Dropdown Menu', category: 'overlay' },
+  { id: 'context-menu', label: 'Context Menu', category: 'overlay' },
+  { id: 'command', label: 'Command', category: 'overlay' },
+  { id: 'sheet', label: 'Sheet', category: 'overlay' },
+  { id: 'drawer', label: 'Drawer', category: 'overlay' },
+
+  // Advanced
+  { id: 'accordion', label: 'Accordion', category: 'advanced' },
+  { id: 'collapsible', label: 'Collapsible', category: 'advanced' },
+  { id: 'carousel', label: 'Carousel', category: 'advanced' },
+  { id: 'toggle', label: 'Toggle', category: 'advanced' },
+  { id: 'toggle-group', label: 'Toggle Group', category: 'advanced' },
+];
+
+export function Sidebar({ activeItem, onItemSelect }: SidebarProps) {
+  const [expandedCategories, setExpandedCategories] = React.useState<Set<ComponentCategory>>(
+    new Set(['getting-started', 'forms']),
+  );
+
+  const toggleCategory = (category: ComponentCategory) => {
+    setExpandedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  const categories = Object.keys(categoryConfig) as ComponentCategory[];
+
+  return (
+    <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">v{version}</p>
+      </div>
+      <ScrollArea className="flex-1">
+        <nav className="p-2">
+          {categories.map((category) => {
+            const config = categoryConfig[category];
+            const items = navItems.filter((item) => item.category === category);
+            const isExpanded = expandedCategories.has(category);
+
+            if (items.length === 0) return null;
+
+            return (
+              <div key={category} className="mb-1">
+                <button
+                  onClick={() => toggleCategory(category)}
+                  className="w-full flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-md hover:bg-accent/50 transition-colors"
+                >
+                  {config.icon}
+                  <span className="flex-1 text-left">{config.label}</span>
+                  {isExpanded ? (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </button>
+                {isExpanded && (
+                  <div className="ml-4 mt-1 space-y-0.5">
+                    {items.map((item) => (
+                      <Button
+                        key={item.id}
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onItemSelect(item.id)}
+                        className={cn(
+                          'w-full justify-start h-8 px-2 font-normal',
+                          activeItem === item.id && 'bg-accent text-accent-foreground',
+                        )}
+                      >
+                        {item.label}
+                      </Button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </nav>
+      </ScrollArea>
+    </div>
+  );
+}

package/src/components/docs/ThemeToggle.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@/components/ui/button';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      aria-label="Toggle theme"
+    >
+      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  );
+}

package/src/components/docs/index.ts

@@ -0,0 +1,5 @@
+export { CodeBlock } from './CodeBlock';
+export { ComponentSection, ComponentShowcase } from './ComponentShowcase';
+export { Footer } from './Footer';
+export { Sidebar, navItems, type ComponentCategory, type NavItem } from './Sidebar';
+export { ThemeToggle } from './ThemeToggle';

package/src/components/ui/accordion.tsx

@@ -0,0 +1,51 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,104 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+
+import { buttonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+  ),
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  ),
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertDescription, AlertTitle };

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,38 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

package/src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };