Alert

1import { type ComponentProps, splitProps } from "solid-js";2import { cva, type VariantProps } from "class-variance-authority";3import { cn } from "@/lib/utils";4import { sprawlify } from "@sprawlify/solid";56const alertVariants = cva(7  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",8  {9    variants: {10      variant: {11        default: "bg-card text-card-foreground",12        destructive:13          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",14      },15    },16    defaultVariants: {17      variant: "default",18    },19  },20);2122const Alert = (23  props: ComponentProps<typeof sprawlify.div> & VariantProps<typeof alertVariants>,24) => {25  const [local, others] = splitProps(props, ["variant", "class"]);2627  return (28    <sprawlify.div29      data-scope="alert"30      data-part="root"31      data-slot="alert"32      role="alert"33      class={cn(alertVariants({ variant: local.variant }), local.class)}34      {...others}35    />36  );37};3839const AlertTitle = (props: ComponentProps<typeof sprawlify.div>) => {40  const [local, others] = splitProps(props, ["class"]);4142  return (43    <sprawlify.div44      data-scope="alert"45      data-part="title"46      data-slot="alert-title"47      class={cn(48        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",49        local.class,50      )}51      {...others}52    />53  );54};5556const AlertDescription = (props: ComponentProps<typeof sprawlify.div>) => {57  const [local, others] = splitProps(props, ["class"]);5859  return (60    <sprawlify.div61      data-scope="alert"62      data-part="description"63      data-slot="alert-description"64      class={cn(65        "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",66        local.class,67      )}68      {...others}69    />70  );71};7273const AlertAction = (props: ComponentProps<typeof sprawlify.div>) => {74  const [local, others] = splitProps(props, ["class"]);7576  return (77    <sprawlify.div78      data-scope="alert"79      data-part="action"80      data-slot="alert-action"81      class={cn("absolute top-2 right-2", local.class)}82      {...others}83    />84  );85};8687export { Alert, AlertTitle, AlertDescription, AlertAction };88