@trycompai/design-system 1.0.0 → 1.0.1

package/src/components/{ui → organisms}/sidebar.tsx

@@ -10,9 +10,9 @@ import * as React from 'react';
 import { PanelLeftIcon } from 'lucide-react';
 import { useIsMobile } from '../../../hooks/use-mobile';
 import { cn } from '../../../lib/utils';
-import { buttonVariants } from './button';
+import { buttonVariants } from '../atoms/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../molecules/tooltip';
 import { Sheet } from './sheet';
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -46,11 +46,10 @@ function SidebarProvider({
   defaultOpen = true,
   open: openProp,
   onOpenChange: setOpenProp,
-  className,
   style,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<'div'>, 'className'> & {
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -123,10 +122,7 @@ function SidebarProvider({
             ...style,
           } as React.CSSProperties
         }
-        className={cn(
-          'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-          className,
-        )}
+        className="group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full"
         {...props}
       >
         {children}
@@ -139,10 +135,9 @@ function Sidebar({
   side = 'left',
   variant = 'sidebar',
   collapsible = 'offExamples',
-  className,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
+}: Omit<React.ComponentProps<'div'>, 'className'> & {
   side?: 'left' | 'right';
   variant?: 'sidebar' | 'floating' | 'inset';
   collapsible?: 'offExamples' | 'icon' | 'none';
@@ -153,10 +148,7 @@ function Sidebar({
     return (
       <div
         data-slot="sidebar"
-        className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
-          className,
-        )}
+        className="bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col"
         {...props}
       >
         {children}
@@ -241,7 +233,6 @@ function Sidebar({
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
             : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          className,
         )}
         {...props}
       >
@@ -277,7 +268,7 @@ function SidebarTrigger({ onClick, ...props }: Omit<ButtonPrimitive.Props, 'clas
   );
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+function SidebarRail({ ...props }: Omit<React.ComponentProps<'button'>, 'className'>) {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -288,28 +279,17 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       tabIndex={-1}
       onClick={toggleSidebar}
       title="Toggle Sidebar"
-      className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full',
-        '[[data-side=left][data-collapsible=offExamples]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offExamples]_&]:-left-2',
-        className,
-      )}
+      className="hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full [[data-side=left][data-collapsible=offExamples]_&]:-right-2 [[data-side=right][data-collapsible=offExamples]_&]:-left-2"
       {...props}
     />
   );
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+function SidebarInset({ ...props }: Omit<React.ComponentProps<'main'>, 'className'>) {
   return (
     <main
       data-slot="sidebar-inset"
-      className={cn(
-        'bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col',
-        className,
-      )}
+      className="bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col"
       {...props}
     />
   );
@@ -326,23 +306,23 @@ function SidebarInput({ ...props }: Omit<React.ComponentProps<'input'>, 'classNa
   );
 }
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn('gap-2 p-2 flex flex-col', className)}
+      className="gap-2 p-2 flex flex-col"
       {...props}
     />
   );
 }
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn('gap-2 p-2 flex flex-col', className)}
+      className="gap-2 p-2 flex flex-col"
       {...props}
     />
   );
@@ -359,44 +339,38 @@ function SidebarSeparator({ ...props }: Omit<SeparatorPrimitive.Props, 'classNam
   );
 }
 
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-content"
       data-sidebar="content"
-      className={cn(
-        'no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-        className,
-      )}
+      className="no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden"
       {...props}
     />
   );
 }
 
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarGroup({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn('p-2 relative flex w-full min-w-0 flex-col', className)}
+      className="p-2 relative flex w-full min-w-0 flex-col"
       {...props}
     />
   );
 }
 
 function SidebarGroupLabel({
-  className,
   render,
   ...props
-}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {
+}: Omit<useRender.ComponentProps<'div'>, 'className'> & Omit<React.ComponentProps<'div'>, 'className'>) {
   return useRender({
     defaultTagName: 'div',
     props: mergeProps<'div'>(
       {
-        className: cn(
+        className:
           'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0',
-          className,
-        ),
       },
       props,
     ),
@@ -409,18 +383,15 @@ function SidebarGroupLabel({
 }
 
 function SidebarGroupAction({
-  className,
   render,
   ...props
-}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {
+}: Omit<useRender.ComponentProps<'button'>, 'className'> & Omit<React.ComponentProps<'button'>, 'className'>) {
   return useRender({
     defaultTagName: 'button',
     props: mergeProps<'button'>(
       {
-        className: cn(
+        className:
           'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden',
-          className,
-        ),
       },
       props,
     ),
@@ -432,34 +403,34 @@ function SidebarGroupAction({
   });
 }
 
-function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarGroupContent({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn('text-sm w-full', className)}
+      className="text-sm w-full"
       {...props}
     />
   );
 }
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenu({ ...props }: Omit<React.ComponentProps<'ul'>, 'className'>) {
   return (
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn('gap-1 flex w-full min-w-0 flex-col', className)}
+      className="gap-1 flex w-full min-w-0 flex-col"
       {...props}
     />
   );
 }
 
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+function SidebarMenuItem({ ...props }: Omit<React.ComponentProps<'li'>, 'className'>) {
   return (
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn('group/menu-item relative', className)}
+      className="group/menu-item relative"
       {...props}
     />
   );
@@ -493,10 +464,9 @@ function SidebarMenuButton({
   variant = 'default',
   size = 'default',
   tooltip,
-  className,
   ...props
-}: useRender.ComponentProps<'button'> &
-  React.ComponentProps<'button'> & {
+}: Omit<useRender.ComponentProps<'button'>, 'className'> &
+  Omit<React.ComponentProps<'button'>, 'className'> & {
     isActive?: boolean;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   } & VariantProps<typeof sidebarMenuButtonVariants>) {
@@ -505,7 +475,7 @@ function SidebarMenuButton({
     defaultTagName: 'button',
     props: mergeProps<'button'>(
       {
-        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        className: sidebarMenuButtonVariants({ variant, size }),
       },
       props,
     ),
@@ -542,12 +512,11 @@ function SidebarMenuButton({
 }
 
 function SidebarMenuAction({
-  className,
   render,
   showOnHover = false,
   ...props
-}: useRender.ComponentProps<'button'> &
-  React.ComponentProps<'button'> & {
+}: Omit<useRender.ComponentProps<'button'>, 'className'> &
+  Omit<React.ComponentProps<'button'>, 'className'> & {
     showOnHover?: boolean;
   }) {
   return useRender({
@@ -558,7 +527,6 @@ function SidebarMenuAction({
           'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
           showOnHover &&
             'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0',
-          className,
         ),
       },
       props,
@@ -571,15 +539,12 @@ function SidebarMenuAction({
   });
 }
 
-function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarMenuBadge({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
-      className={cn(
-        'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
-        className,
-      )}
+      className="text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden"
       {...props}
     />
   );
@@ -622,26 +587,23 @@ function SidebarMenuSkeleton({
   );
 }
 
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenuSub({ ...props }: Omit<React.ComponentProps<'ul'>, 'className'>) {
   return (
     <ul
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
-      className={cn(
-        'border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col',
-        className,
-      )}
+      className="border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col"
       {...props}
     />
   );
 }
 
-function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
+function SidebarMenuSubItem({ ...props }: Omit<React.ComponentProps<'li'>, 'className'>) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
       data-sidebar="menu-sub-item"
-      className={cn('group/menu-sub-item relative', className)}
+      className="group/menu-sub-item relative"
       {...props}
     />
   );
@@ -651,10 +613,9 @@ function SidebarMenuSubButton({
   render,
   size = 'md',
   isActive = false,
-  className,
   ...props
-}: useRender.ComponentProps<'a'> &
-  React.ComponentProps<'a'> & {
+}: Omit<useRender.ComponentProps<'a'>, 'className'> &
+  Omit<React.ComponentProps<'a'>, 'className'> & {
     size?: 'sm' | 'md';
     isActive?: boolean;
   }) {
@@ -662,10 +623,8 @@ function SidebarMenuSubButton({
     defaultTagName: 'a',
     props: mergeProps<'a'>(
       {
-        className: cn(
+        className:
           'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
-          className,
-        ),
       },
       props,
     ),

package/src/components/{ui → organisms}/sonner.tsx

@@ -5,21 +5,18 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { Toaster as Sonner, type ToasterProps } from 'sonner';
 
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme();
-
+const Toaster = ({ theme = 'system', ...props }: ToasterProps) => {
   return (
     <Sonner
-      theme={theme as ToasterProps['theme']}
+      theme={theme}
       className="toaster group"
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
+        success: <CircleCheckIcon className="size-4 text-success" />,
+        info: <InfoIcon className="size-4 text-info" />,
+        warning: <TriangleAlertIcon className="size-4 text-warning" />,
+        error: <OctagonXIcon className="size-4 text-destructive" />,
         loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
       style={
@@ -33,6 +30,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast: 'cn-toast',
+          description: '!text-muted-foreground',
         },
       }}
       {...props}

package/src/components/ui/index.ts

@@ -1,61 +1,3 @@
-export * from './accordion';
-export * from './alert';
-export * from './alert-dialog';
-export * from './aspect-ratio';
-export * from './avatar';
-export * from './badge';
-export * from './breadcrumb';
-export * from './button';
-export * from './button-group';
-export * from './calendar';
-export * from './card';
-export * from './carousel';
-export * from './chart';
-export * from './checkbox';
-export * from './collapsible';
-export * from './combobox';
-export * from './command';
-export * from './container';
-export * from './context-menu';
-export * from './dialog';
-export * from './drawer';
-export * from './dropdown-menu';
-export * from './empty';
-export * from './field';
-export * from './grid';
-export * from './heading';
-export * from './hover-card';
-export * from './input';
-export * from './input-group';
-export * from './input-otp';
-export * from './item';
-export * from './kbd';
-export * from './label';
-export * from './menubar';
-export * from './navigation-menu';
-export * from './page-header';
-export * from './page-layout';
-export * from './pagination';
-export * from './popover';
-export * from './progress';
-export * from './radio-group';
-export * from './resizable';
-export * from './scroll-area';
-export * from './section';
-export * from './select';
-export * from './separator';
-export * from './sheet';
-export * from './sidebar';
-export * from './skeleton';
-export * from './slider';
-export * from './sonner';
-export * from './spinner';
-export * from './stack';
-export * from './switch';
-export * from './table';
-export * from './tabs';
-export * from './text';
-export * from './textarea';
-export * from './toggle';
-export * from './toggle-group';
-export * from './tooltip';
+export * from '../atoms';
+export * from '../molecules';
+export * from '../organisms';

package/src/styles/globals.css

@@ -1,6 +1,9 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+/* Include design system components in Tailwind's content scan */
+@source "../components/**/*.tsx";
+
 @custom-variant dark (&:is(.dark *));
 
 @layer base {
@@ -20,6 +23,9 @@
     --accent: oklch(0.97 0 0);
     --accent-foreground: oklch(0.205 0 0);
     --destructive: oklch(0.58 0.22 27);
+    --success: oklch(0.6 0.16 145);
+    --warning: oklch(0.75 0.15 85);
+    --info: oklch(0.6 0.15 250);
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
     --ring: oklch(0.708 0 0);
@@ -54,6 +60,9 @@
     --accent: oklch(0.371 0 0);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.704 0.191 22.216);
+    --success: oklch(0.7 0.16 145);
+    --warning: oklch(0.8 0.15 85);
+    --info: oklch(0.7 0.15 250);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
     --ring: oklch(0.556 0 0);
@@ -90,6 +99,9 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);

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

@@ -1,161 +0,0 @@
-import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
-import * as React from 'react';
-
-import { cn } from '../../../lib/utils';
-import { Button } from './button';
-
-function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
-  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
-}
-
-function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
-}
-
-function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
-  return (
-    <AlertDialogPrimitive.Backdrop
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogContent({
-  className,
-  size = 'default',
-  ...props
-}: AlertDialogPrimitive.Popup.Props & {
-  size?: 'default' | 'sm';
-}) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Popup
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
-          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-4 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(
-        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 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 AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn(
-        'text-sm font-medium 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-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  variant = 'default',
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, 'className'>) {
-  return <Button data-slot="alert-dialog-action" variant={variant} {...props} />;
-}
-
-function AlertDialogCancel({
-  variant = 'secondary',
-  size = 'default',
-  ...props
-}: Omit<AlertDialogPrimitive.Close.Props, 'className'> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
-  return (
-    <AlertDialogPrimitive.Close
-      data-slot="alert-dialog-cancel"
-      render={<Button variant={variant} size={size} />}
-      {...props}
-    />
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};