@loke/design-system
Version:
A design system with individually importable components
3 lines (2 loc) • 4.7 kB
JavaScript
"use client";
import{Button}from"@loke/design-system/button";import{cn}from"@loke/design-system/cn";import*as AlertDialogPrimitive from"@loke/ui/alert-dialog";import{forwardRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";function AlertDialog({...props}){return jsx(AlertDialogPrimitive.Root,{"data-slot":"alert-dialog",...props})}var AlertDialogTrigger=forwardRef((props,ref)=>jsx(AlertDialogPrimitive.Trigger,{"data-slot":"alert-dialog-trigger",ref,...props}));AlertDialogTrigger.displayName=AlertDialogPrimitive.Trigger.displayName;function AlertDialogPortal({...props}){return jsx(AlertDialogPrimitive.Portal,{"data-slot":"alert-dialog-portal",...props})}var AlertDialogOverlay=forwardRef(({className,...props},ref)=>jsx(AlertDialogPrimitive.Overlay,{className:cn("data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs",className),"data-slot":"alert-dialog-overlay",ref,...props}));AlertDialogOverlay.displayName=AlertDialogPrimitive.Overlay.displayName;var AlertDialogContent=forwardRef(({className,size="default",forceMount,...props},ref)=>jsxs(AlertDialogPortal,{forceMount,children:[jsx(AlertDialogOverlay,{forceMount}),jsx(AlertDialogPrimitive.Content,{className:cn("data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 outline-none ring-1 ring-foreground/10 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-closed:animate-out data-open:animate-in data-[size=default]:sm:max-w-sm",className),"data-size":size,"data-slot":"alert-dialog-content",forceMount,ref,...props})]}));AlertDialogContent.displayName=AlertDialogPrimitive.Content.displayName;function AlertDialogHeader({className,...props}){return jsx("div",{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),"data-slot":"alert-dialog-header",...props})}function AlertDialogFooter({className,...props}){return jsx("div",{className:cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 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),"data-slot":"alert-dialog-footer",...props})}function AlertDialogMedia({className,...props}){return jsx("div",{className:cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",className),"data-slot":"alert-dialog-media",...props})}var AlertDialogTitle=forwardRef(({className,...props},ref)=>jsx(AlertDialogPrimitive.Title,{className:cn("font-medium text-base sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",className),"data-slot":"alert-dialog-title",ref,...props}));AlertDialogTitle.displayName=AlertDialogPrimitive.Title.displayName;var AlertDialogDescription=forwardRef(({className,...props},ref)=>jsx(AlertDialogPrimitive.Description,{className:cn("text-balance text-muted-foreground text-sm md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",className),"data-slot":"alert-dialog-description",ref,...props}));AlertDialogDescription.displayName=AlertDialogPrimitive.Description.displayName;var AlertDialogAction=forwardRef(({className,variant="default",size="default",...props},ref)=>jsx(Button,{asChild:!0,size,variant,children:jsx(AlertDialogPrimitive.Action,{className:cn(className),"data-slot":"alert-dialog-action",ref,...props})}));AlertDialogAction.displayName=AlertDialogPrimitive.Action.displayName;var AlertDialogCancel=forwardRef(({className,variant="outline",size="default",...props},ref)=>jsx(Button,{asChild:!0,size,variant,children:jsx(AlertDialogPrimitive.Cancel,{className:cn(className),"data-slot":"alert-dialog-cancel",ref,...props})}));AlertDialogCancel.displayName=AlertDialogPrimitive.Cancel.displayName;export{AlertDialogTrigger,AlertDialogTitle,AlertDialogPortal,AlertDialogOverlay,AlertDialogMedia,AlertDialogHeader,AlertDialogFooter,AlertDialogDescription,AlertDialogContent,AlertDialogCancel,AlertDialogAction,AlertDialog};