@gv-tech/design-system 2.3.0 → 2.5.0

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

@@ -0,0 +1,88 @@
+import * as ToastPrimitive from '@rn-primitives/toast';
+import { X } from 'lucide-react-native';
+import * as React from 'react';
+import Animated, { FadeInUp, FadeOutDown, Layout } from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+
+// Toast for native doesn't use a Provider or Viewport in the same way as web.
+// We export fragments if they are needed for structural parity in shared components.
+const ToastProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+const ToastViewport = () => null;
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & { variant?: 'default' | 'destructive' }
+>(({ className, variant = 'default', ...props }, ref) => {
+  return (
+    <ToastPrimitive.Root
+      ref={ref}
+      className={cn(
+        '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',
+        variant === 'default' ? 'border-border bg-background' : 'border-destructive bg-destructive',
+        className,
+      )}
+      {...props}
+    >
+      <Animated.View entering={FadeInUp} exiting={FadeOutDown} layout={Layout} className="flex-row items-center w-full">
+        {props.children}
+      </Animated.View>
+    </ToastPrimitive.Root>
+  );
+});
+Toast.displayName = ToastPrimitive.Root.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Title ref={ref} className={cn('text-sm font-semibold text-foreground', className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitive.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Description
+    ref={ref}
+    className={cn('text-sm opacity-90 text-muted-foreground', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitive.Description.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.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',
+      className,
+    )}
+    {...props}
+  >
+    <X size={16} className="text-muted-foreground" />
+  </ToastPrimitive.Close>
+));
+ToastClose.displayName = ToastPrimitive.Close.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.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',
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitive.Action.displayName;
+
+export type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport };

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

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export function Toaster() {
+  return (
+    <View>
+      <Text>Toaster is not yet implemented for React Native</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { ToggleGroupBaseProps, ToggleGroupItemBaseProps } from '@gv-tech/ui-core';
+import * as ToggleGroupPrimitive from '@rn-primitives/toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+import { TextClassContext } from './text';
+import { toggleVariants } from './toggle';
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
+
+export interface ToggleGroupProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, 'value' | 'onValueChange' | 'type'>,
+    ToggleGroupBaseProps {}
+
+const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Root>, ToggleGroupProps>(
+  ({ className, variant, size, children, type, value, onValueChange, ...props }, ref) => (
+    <ToggleGroupPrimitive.Root
+      ref={ref}
+      {...({
+        type,
+        value,
+        onValueChange,
+      } as unknown as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}
+      className={cn('flex flex-row items-center justify-center gap-1', className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  ),
+);
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root?.displayName || 'ToggleGroup';
+
+export interface ToggleGroupItemProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, 'children' | 'disabled'>,
+    ToggleGroupItemBaseProps {}
+
+const ToggleGroupItem = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Item>, ToggleGroupItemProps>(
+  ({ className, children, variant, size, value, ...props }, ref) => {
+    const context = React.useContext(ToggleGroupContext);
+
+    return (
+      <TextClassContext.Provider
+        value={cn(
+          'text-sm native:text-base text-foreground font-medium',
+          props.disabled && 'web:cursor-not-allowed opacity-50',
+          value === '' && 'text-accent-foreground',
+          className,
+        )}
+      >
+        <ToggleGroupPrimitive.Item
+          ref={ref}
+          value={value}
+          className={cn(
+            toggleVariants({
+              variant: context.variant || variant,
+              size: context.size || size,
+            }),
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </ToggleGroupPrimitive.Item>
+      </TextClassContext.Provider>
+    );
+  },
+);
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item?.displayName || 'ToggleGroupItem';
+
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,35 @@
+import { ToggleBaseProps, toggleVariants } from '@gv-tech/ui-core';
+import * as TogglePrimitive from '@rn-primitives/toggle';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+import { TextClassContext } from './text';
+
+export interface ToggleProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, 'pressed' | 'onPressedChange' | 'children'>,
+    ToggleBaseProps {}
+
+const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm native:text-base text-foreground font-medium',
+        props.pressed && 'text-accent-foreground',
+        className,
+      )}
+    >
+      <TogglePrimitive.Root
+        ref={ref}
+        className={cn(toggleVariants({ variant, size, className }))}
+        {...props}
+        pressed={props.pressed || false}
+        onPressedChange={props.onPressedChange || (() => {})}
+      />
+    </TextClassContext.Provider>
+  ),
+);
+
+Toggle.displayName = TogglePrimitive.Root?.displayName || 'Toggle';
+
+export { Toggle, toggleVariants };

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

@@ -0,0 +1,44 @@
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+import { Text } from './text';
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    portalHost?: string;
+  }
+>(
+  (
+    { className, portalHost, ...props },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _ref,
+  ) => (
+    <TooltipPrimitive.Portal hostName={portalHost}>
+      <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
+        <Animated.View
+          entering={FadeIn}
+          exiting={FadeOut}
+          className={cn(
+            'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md web:animate-in web:fade-in-0 web:zoom-in-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,
+          )}
+        >
+          <Text className="text-sm text-popover-foreground native:text-base">{props.children}</Text>
+        </Animated.View>
+      </TooltipPrimitive.Overlay>
+    </TooltipPrimitive.Portal>
+  ),
+);
+TooltipContent.displayName = TooltipPrimitive.Content?.displayName || 'TooltipContent';
+
+const TooltipProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/packages/ui-native/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "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",
+    "paths": {
+      "@gv-tech/design-tokens": ["../design-tokens/src"],
+      "@gv-tech/ui-core": ["../ui-core/src"],
+      "@/*": ["./src/*"]
+    },
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react-swc';
+import { resolve } from 'path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: [resolve(__dirname, '../../src/setupTests.ts')],
+  },
+  resolve: {
+    alias: {
+      'react-native': resolve(__dirname, '../../apps/playground-web/src/lib/react-native-shim.js'),
+    },
+  },
+});

package/packages/ui-web/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## [0.1.0](https://github.com/Garcia-Ventures/gvtech-design/compare/ui-web-v0.0.1...ui-web-v0.1.0) (2026-02-20)
+
+
+### Features
+
+* **universal:** pivot to monorepo architecture and stabilize react native support ([#63](https://github.com/Garcia-Ventures/gvtech-design/issues/63)) ([3458938](https://github.com/Garcia-Ventures/gvtech-design/commit/3458938c17bdfc7a7f5eea0053b7bf1786a571fa))

package/packages/ui-web/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@gv-tech/ui-web",
+  "version": "0.1.0",
+  "description": "Web (DOM/Radix) implementations of the GV Tech design system components",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Garcia-Ventures/gvtech-design.git",
+    "directory": "packages/ui-web"
+  },
+  "license": "MIT",
+  "author": "Eric N. Garcia <eng618@garciaericn.com>",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./*": {
+      "types": "./src/*/index.ts",
+      "default": "./src/*/index.ts"
+    }
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "echo 'No build step — consumed as TS source by sibling packages'",
+    "lint": "echo 'Linted from workspace root'",
+    "test": "vitest run",
+    "typecheck": "yarn tsc --noEmit"
+  },
+  "dependencies": {
+    "@gv-tech/design-tokens": "workspace:*",
+    "@gv-tech/ui-core": "workspace:*",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^0.563.0",
+    "react-day-picker": "^9.13.2",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^4.6.4",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.1",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}

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

@@ -0,0 +1,58 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+
+import {
+  AccordionBaseProps,
+  AccordionContentBaseProps,
+  AccordionItemBaseProps,
+  AccordionTriggerBaseProps,
+} from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & AccordionItemBaseProps
+>(({ 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> & AccordionTriggerBaseProps
+>(({ 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> & AccordionContentBaseProps
+>(({ 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 };
+export type { AccordionBaseProps as AccordionProps };

package/packages/ui-web/src/alert-dialog.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '.';
+
+describe('AlertDialog', () => {
+  it('renders correctly', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    expect(screen.getByText('Open')).toBeInTheDocument();
+    expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByText('Open'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+      expect(screen.getByText('Are you sure?')).toBeInTheDocument();
+      expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
+    });
+  });
+
+  it('closes when cancel is clicked', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    await userEvent.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Cancel'));
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+  });
+
+  it('closes when action is clicked', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    await userEvent.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Continue'));
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+  });
+});

package/packages/ui-web/src/alert-dialog.tsx

@@ -0,0 +1,121 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+
+import {
+  AlertDialogActionBaseProps,
+  AlertDialogBaseProps,
+  AlertDialogCancelBaseProps,
+  AlertDialogContentBaseProps,
+  AlertDialogDescriptionBaseProps,
+  AlertDialogFooterBaseProps,
+  AlertDialogHeaderBaseProps,
+  AlertDialogTitleBaseProps,
+} from '@gv-tech/ui-core';
+import { buttonVariants } from './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> & AlertDialogContentBaseProps
+>(({ 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> & AlertDialogHeaderBaseProps) => (
+  <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> & AlertDialogFooterBaseProps) => (
+  <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> & AlertDialogTitleBaseProps
+>(({ 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> & AlertDialogDescriptionBaseProps
+>(({ 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> & AlertDialogActionBaseProps
+>(({ 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> & AlertDialogCancelBaseProps
+>(({ 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,
+};
+export type { AlertDialogBaseProps as AlertDialogProps };