@deriv-com/trading-game-design-system 0.1.0

package/README.md

@@ -0,0 +1,150 @@
+# Trading Game Design System
+
+A component library and design token system for the Deriv trading game product. Built on [shadcn/ui](https://ui.shadcn.com/) with a custom Figma-driven token architecture, Tailwind CSS v4, and React 19.
+
+---
+
+## What's inside
+
+- **50+ UI components** — buttons, forms, dialogs, charts, sidebars, and more
+- **Design tokens** — CSS custom properties for color, radius, and typography synced from Figma
+- **Dark mode** — built-in light/dark theming via CSS variables
+- **TypeScript** — full type definitions included
+
+---
+
+## Available components
+
+| Component | Import |
+|---|---|
+| Accordion | `Accordion, AccordionItem, AccordionTrigger, AccordionContent` |
+| Alert | `Alert, AlertTitle, AlertDescription` |
+| Alert Dialog | `AlertDialog, AlertDialogTrigger, AlertDialogContent, ...` |
+| Avatar | `Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup` |
+| Badge | `Badge, badgeVariants` |
+| Breadcrumb | `Breadcrumb, BreadcrumbList, BreadcrumbItem, ...` |
+| Button | `Button, buttonVariants` |
+| Button Group | `ButtonGroup, ButtonGroupSeparator, ButtonGroupText` |
+| Calendar | `Calendar, CalendarDayButton` |
+| Card | `Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter` |
+| Carousel | `Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext` |
+| Chart | `ChartContainer, ChartTooltip, ChartLegend, ChartStyle` |
+| Checkbox | `Checkbox` |
+| Collapsible | `Collapsible, CollapsibleTrigger, CollapsibleContent` |
+| Combobox | `Combobox, ComboboxInput, ComboboxContent, ComboboxItem, ...` |
+| Command | `Command, CommandDialog, CommandInput, CommandList, ...` |
+| Context Menu | `ContextMenu, ContextMenuTrigger, ContextMenuContent, ...` |
+| Dialog | `Dialog, DialogTrigger, DialogContent, DialogHeader, ...` |
+| Drawer | `Drawer, DrawerTrigger, DrawerContent, DrawerHeader, ...` |
+| Dropdown Menu | `DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, ...` |
+| Empty State | `Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent` |
+| Field | `Field, FieldLabel, FieldDescription, FieldError, FieldGroup` |
+| Form | `Form, FormItem, FormLabel, FormControl, FormField, FormMessage` |
+| Hover Card | `HoverCard, HoverCardTrigger, HoverCardContent` |
+| Input | `Input` |
+| Input Group | `InputGroup, InputGroupAddon, InputGroupButton, InputGroupText` |
+| Input OTP | `InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator` |
+| Item | `Item, ItemMedia, ItemContent, ItemTitle, ItemDescription` |
+| Kbd | `Kbd, KbdGroup` |
+| Label | `Label` |
+| Menubar | `Menubar, MenubarMenu, MenubarTrigger, MenubarContent, ...` |
+| Native Select | `NativeSelect, NativeSelectOptGroup, NativeSelectOption` |
+| Navigation Menu | `NavigationMenu, NavigationMenuList, NavigationMenuTrigger, ...` |
+| Pagination | `Pagination, PaginationContent, PaginationLink, ...` |
+| Popover | `Popover, PopoverTrigger, PopoverContent, PopoverAnchor` |
+| Progress | `Progress` |
+| Radio Group | `RadioGroup, RadioGroupItem` |
+| Resizable | `ResizableHandle, ResizablePanel, ResizablePanelGroup` |
+| Scroll Area | `ScrollArea, ScrollBar` |
+| Select | `Select, SelectTrigger, SelectContent, SelectItem, ...` |
+| Separator | `Separator` |
+| Sheet | `Sheet, SheetTrigger, SheetContent, SheetHeader, ...` |
+| Sidebar | `Sidebar, SidebarProvider, SidebarMenu, SidebarMenuItem, ...` |
+| Skeleton | `Skeleton` |
+| Slider | `Slider` |
+| Spinner | `Spinner` |
+| Switch | `Switch` |
+| Table | `Table, TableHeader, TableBody, TableRow, TableHead, TableCell` |
+| Tabs | `Tabs, TabsList, TabsTrigger, TabsContent` |
+| Textarea | `Textarea` |
+| Toast | `Toaster` |
+| Toggle | `Toggle, toggleVariants` |
+| Toggle Group | `ToggleGroup, ToggleGroupItem` |
+| Tooltip | `Tooltip, TooltipTrigger, TooltipContent, TooltipProvider` |
+
+---
+
+## Button variants and sizes
+
+```tsx
+// Variants
+<Button variant="primary" />   // teal — main CTA
+<Button variant="secondary" /> // amber — secondary action
+<Button variant="outline" />   // teal outline
+<Button variant="link" />      // text only
+
+// Sizes
+<Button size="lg" />      // 48px height (default)
+<Button size="md" />      // 40px height
+<Button size="sm" />      // 32px height
+<Button size="xs" />      // 24px height
+<Button size="icon" />    // 48px square
+<Button size="icon-lg" /> // 40px square
+<Button size="icon-sm" /> // 28px square
+<Button size="icon-xs" /> // 24px square
+```
+
+---
+
+## Design tokens
+
+All tokens are CSS custom properties defined in `app/globals.css`.
+
+| Token | Usage |
+|---|---|
+| `--primary` | Teal `#00FFFF` — brand primary |
+| `--primary-hover` | Teal hover `#00D4D4` |
+| `--secondary` | Amber at 10% opacity |
+| `--secondary-hover` | Amber 500 — full opacity |
+| `--semantic-win` | Green — positive outcome |
+| `--semantic-loss` | Red — negative outcome |
+| `--semantic-warning` | Amber — warning state |
+| `--brand-usdt` | USDT green |
+| `--background` | Page background |
+| `--foreground` | Primary text |
+| `--muted-foreground` | Secondary text |
+| `--border` | Border color |
+| `--radius` | Base border radius (`0.625rem`) |
+
+---
+
+## Development
+
+```bash
+# Clone
+git clone https://github.com/deriv-com/product-design-trading-game-ds.git
+cd product-design-trading-game-ds
+
+# Install dependencies
+npm install
+
+# Start dev server (Next.js component playground)
+npm run dev
+```
+
+### Updating design tokens
+
+Design tokens are managed in Figma and exported as JSON variables. To update:
+
+1. Export updated variables from Figma (TailwindCSS.json, Theme.json, Mode.json)
+2. Update the CSS custom properties in `app/globals.css`
+
+---
+
+## Tech stack
+
+- **React 19** + **TypeScript**
+- **Tailwind CSS v4** — CSS-first configuration
+- **shadcn/ui** (New York style) — base component primitives
+- **Radix UI** — accessible headless primitives
+- **Figma** — source of truth for design tokens

package/app/globals.css

@@ -0,0 +1,211 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-barlow);
+  --font-mono: var(--font-orbitron);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-semantic-win: var(--semantic-win);
+  --color-semantic-loss: var(--semantic-loss);
+  --color-semantic-warning: var(--semantic-warning);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-decorative: var(--text-decorative);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  /* Light mode */
+  /* base/white */
+  --background: oklch(1 0 0);
+  /* neutral/950 */
+  --foreground: oklch(0.07 0.012 165);
+  /* base/white */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.07 0.012 165);
+  /* base/white */
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.07 0.012 165);
+  /* teal-N/default = #00FFFF */
+  --primary: oklch(0.905 0.158 194);
+  /* neutral/950 on primary */
+  --primary-foreground: oklch(0.07 0.012 165);
+  /* teal-N/hover/press = #00D4D4 */
+  --primary-hover: oklch(0.80 0.130 194);
+  /* amber/500 at 4% opacity */
+  --secondary: oklch(0.764 0.188 76 / 4%);
+  /* amber/500 */
+  --secondary-hover: oklch(0.764 0.188 76);
+  /* neutral/900 */
+  --secondary-foreground: oklch(0.12 0.015 160);
+  /* neutral/100 */
+  --muted: oklch(0.96 0 0);
+  /* neutral/500 */
+  --muted-foreground: oklch(0.52 0 0);
+  /* neutral/100 */
+  --accent: oklch(0.96 0 0);
+  /* neutral/900 */
+  --accent-foreground: oklch(0.12 0.015 160);
+  /* neutral/200 */
+  --accent-hover: oklch(0.92 0 0);
+  /* red/600 = #DC2626 */
+  --destructive: oklch(0.53 0.220 27);
+  /* neutral/200 */
+  --border: oklch(0.92 0 0);
+  --input: oklch(0.92 0 0);
+  /* neutral/400 */
+  --ring: oklch(0.70 0 0);
+  /* chart: orange/600, teal/600, cyan/900, amber/400, amber/500 */
+  --chart-1: oklch(0.62 0.200 41);
+  --chart-2: oklch(0.83 0.130 196);
+  --chart-3: oklch(0.37 0.075 215);
+  --chart-4: oklch(0.84 0.170 85);
+  --chart-5: oklch(0.764 0.188 76);
+  /* semantic colors */
+  --semantic-win: oklch(0.87 0.200 155);
+  --semantic-loss: oklch(0.60 0.240 15);
+  --semantic-warning: oklch(0.68 0.210 48);
+  --text-secondary: oklch(0.52 0 0);
+  --text-tertiary: oklch(0.38 0 0);
+  --text-decorative: oklch(0.12 0.015 160);
+  /* sidebar light */
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.07 0.012 165);
+  /* neutral/900 */
+  --sidebar-primary: oklch(0.12 0.015 160);
+  /* neutral/50 = white */
+  --sidebar-primary-foreground: oklch(1 0 0);
+  /* neutral/100 */
+  --sidebar-accent: oklch(0.96 0 0);
+  /* neutral/900 */
+  --sidebar-accent-foreground: oklch(0.12 0.015 160);
+  /* neutral/200 */
+  --sidebar-border: oklch(0.92 0 0);
+  /* neutral/400 */
+  --sidebar-ring: oklch(0.70 0 0);
+}
+
+.dark {
+  /* Dark mode */
+  /* neutral/950 = #020B0A */
+  --background: oklch(0.07 0.012 165);
+  /* neutral/50 = white */
+  --foreground: oklch(1 0 0);
+  /* neutral/900 = #0D1410 */
+  --card: oklch(0.12 0.015 160);
+  --card-foreground: oklch(1 0 0);
+  /* neutral/800 = #1C221C */
+  --popover: oklch(0.20 0.013 155);
+  --popover-foreground: oklch(1 0 0);
+  /* teal-N/default = #00FFFF */
+  --primary: oklch(0.905 0.158 194);
+  /* neutral/950 on primary */
+  --primary-foreground: oklch(0.07 0.012 165);
+  /* teal-N/hover/press = #00D4D4 */
+  --primary-hover: oklch(0.80 0.130 194);
+  /* amber/500 at 4% opacity */
+  --secondary: oklch(0.764 0.188 76 / 4%);
+  /* amber/500 */
+  --secondary-hover: oklch(0.764 0.188 76);
+  /* neutral/50 = white */
+  --secondary-foreground: oklch(1 0 0);
+  /* neutral/800 */
+  --muted: oklch(0.20 0.013 155);
+  /* neutral/400 */
+  --muted-foreground: oklch(0.70 0 0);
+  /* neutral/700 = #303530 */
+  --accent: oklch(0.28 0.010 155);
+  /* neutral/50 = white */
+  --accent-foreground: oklch(1 0 0);
+  /* neutral/600 */
+  --accent-hover: oklch(0.37 0.006 155);
+  /* red/400 = #F87171 */
+  --destructive: oklch(0.64 0.185 22);
+  /* white/10% */
+  --border: oklch(1 0 0 / 10%);
+  /* white/15% */
+  --input: oklch(1 0 0 / 15%);
+  /* neutral/500 */
+  --ring: oklch(0.52 0 0);
+  /* chart: blue/700, emerald/500, amber/500, purple/500, rose/500 */
+  --chart-1: oklch(0.44 0.240 265);
+  --chart-2: oklch(0.70 0.175 160);
+  --chart-3: oklch(0.764 0.188 76);
+  --chart-4: oklch(0.59 0.270 308);
+  --chart-5: oklch(0.64 0.235 12);
+  /* semantic colors */
+  --semantic-win: oklch(0.87 0.200 155);
+  --semantic-loss: oklch(0.60 0.240 15);
+  --semantic-warning: oklch(0.68 0.210 48);
+  --text-secondary: oklch(0.70 0 0);
+  --text-tertiary: oklch(0.40 0 0);
+  --text-decorative: oklch(0.20 0.013 155);
+  /* sidebar dark */
+  /* neutral/900 */
+  --sidebar: oklch(0.12 0.015 160);
+  --sidebar-foreground: oklch(1 0 0);
+  /* blue/700 */
+  --sidebar-primary: oklch(0.44 0.240 265);
+  /* neutral/50 = white */
+  --sidebar-primary-foreground: oklch(1 0 0);
+  /* neutral/800 */
+  --sidebar-accent: oklch(0.20 0.013 155);
+  /* neutral/50 = white */
+  --sidebar-accent-foreground: oklch(1 0 0);
+  /* white/10% */
+  --sidebar-border: oklch(1 0 0 / 10%);
+  /* neutral/600 */
+  --sidebar-ring: oklch(0.37 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/components/ui/alert-dialog.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "primary",
+  size = "lg",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "lg",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }