Alert Dialog

1import { AlertDialog as AlertDialogPrimitive } from "@sprawlify/solid/alert-dialog";2import { cn } from "@/lib/utils";3import { Button } from "@/components/ui/button";4import { sprawlify } from "@sprawlify/solid";5import type { ComponentProps } from "solid-js";6import { splitProps } from "solid-js";7import { Portal } from "solid-js/web";89function AlertDialog(props: ComponentProps<typeof AlertDialogPrimitive.Root>) {10  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;11}1213function AlertDialogTrigger(props: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {14  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;15}1617function AlertDialogPortal(props: ComponentProps<typeof Portal>) {18  return <Portal data-slot="alert-dialog-portal" {...props} />;19}2021function AlertDialogBackdrop(props: ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {22  const [local, others] = splitProps(props, ["class"]);2324  return (25    <AlertDialogPrimitive.Backdrop26      data-slot="alert-dialog-backdrop"27      class={cn(28        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",29        local.class,30      )}31      {...others}32    />33  );34}3536function AlertDialogContent(37  props: ComponentProps<typeof AlertDialogPrimitive.Content> & {38    size?: "default" | "sm";39  },40) {41  const [local, others] = splitProps(props, ["class", "size", "children"]);42  const size = () => local.size ?? "default";4344  return (45    <AlertDialogPortal>46      <AlertDialogBackdrop />47      <AlertDialogPrimitive.Positioner>48        <AlertDialogPrimitive.Content49          data-slot="alert-dialog-content"50          data-size={size()}51          class={cn(52            "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 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",53            local.class,54          )}55          {...others}56        >57          {local.children}58        </AlertDialogPrimitive.Content>59      </AlertDialogPrimitive.Positioner>60    </AlertDialogPortal>61  );62}6364function AlertDialogHeader(props: ComponentProps<"div">) {65  const [local, others] = splitProps(props, ["class"]);6667  return (68    <sprawlify.div69      data-slot="alert-dialog-header"70      class={cn(71        "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]",72        local.class,73      )}74      {...others}75    />76  );77}7879function AlertDialogFooter(props: ComponentProps<"div">) {80  const [local, others] = splitProps(props, ["class"]);8182  return (83    <sprawlify.div84      data-slot="alert-dialog-footer"85      class={cn(86        "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",87        local.class,88      )}89      {...others}90    />91  );92}9394function AlertDialogMedia(props: ComponentProps<"div">) {95  const [local, others] = splitProps(props, ["class"]);9697  return (98    <sprawlify.div99      data-slot="alert-dialog-media"100      class={cn(101        "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",102        local.class,103      )}104      {...others}105    />106  );107}108109function AlertDialogTitle(props: ComponentProps<typeof AlertDialogPrimitive.Title>) {110  const [local, others] = splitProps(props, ["class"]);111112  return (113    <AlertDialogPrimitive.Title114      data-slot="alert-dialog-title"115      class={cn(116        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading",117        local.class,118      )}119      {...others}120    />121  );122}123124function AlertDialogDescription(props: ComponentProps<typeof AlertDialogPrimitive.Description>) {125  const [local, others] = splitProps(props, ["class"]);126127  return (128    <AlertDialogPrimitive.Description129      data-slot="alert-dialog-description"130      class={cn(131        "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",132        local.class,133      )}134      {...others}135    />136  );137}138139function AlertDialogCancel(140  props: ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &141    Pick<ComponentProps<typeof Button>, "variant" | "size">,142) {143  const [local, others] = splitProps(props, ["class", "variant", "size", "value", "children"]);144  const variant = () => local.variant ?? "outline";145  const size = () => local.size ?? "default";146  const value = () => local.value ?? "cancel";147148  return (149    <Button150      variant={variant()}151      size={size()}152      asChild={(props) => (153        <AlertDialogPrimitive.CloseTrigger154          data-slot="alert-dialog-cancel"155          class={cn(local.class)}156          value={value()}157          {...props()}158          {...others}159        >160          {local.children}161        </AlertDialogPrimitive.CloseTrigger>162      )}163    />164  );165}166167function AlertDialogAction(168  props: ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &169    Pick<ComponentProps<typeof Button>, "variant" | "size">,170) {171  const [local, others] = splitProps(props, ["class", "variant", "size", "children"]);172  const variant = () => local.variant ?? "default";173  const size = () => local.size ?? "default";174175  return (176    <Button177      variant={variant()}178      size={size()}179      asChild={(props) => (180        <AlertDialogPrimitive.CloseTrigger181          data-slot="alert-dialog-action"182          class={cn(local.class)}183          {...props()}184          {...others}185        >186          {local.children}187        </AlertDialogPrimitive.CloseTrigger>188      )}189    />190  );191}192193export {194  AlertDialog,195  AlertDialogCancel,196  AlertDialogAction,197  AlertDialogContent,198  AlertDialogDescription,199  AlertDialogFooter,200  AlertDialogHeader,201  AlertDialogMedia,202  AlertDialogBackdrop,203  AlertDialogPortal,204  AlertDialogTitle,205  AlertDialogTrigger,206};207