alert

1import * as AlertPrimitive from "@kobalte/core/alert";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import type { VariantProps } from "class-variance-authority";
6import { cva } from "class-variance-authority";
7import type { Component, ComponentProps, ValidComponent } from "solid-js";
8 
9import { splitProps } from "solid-js";
10 
11const alertVariants = cva(
12  "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 group/alert relative w-full",
13  {
14    variants: {
15      variant: {
16        default: "bg-card text-card-foreground",
17        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
18      },
19    },
20    defaultVariants: {
21      variant: "default",
22    },
23  },
24);
25 
26type AlertRootProps<T extends ValidComponent = "div"> =
27  & AlertPrimitive.AlertRootProps<T>
28  & VariantProps<typeof alertVariants>
29  & { class?: string | undefined };
30 
31const Alert = <T extends ValidComponent = "div">(
32  props: PolymorphicProps<T, AlertRootProps<T>>,
33) => {
34  const [local, others] = splitProps(props as AlertRootProps, [
35    "class",
36    "variant",
37  ]);
38  return (
39    <AlertPrimitive.Root
40      data-slot="alert"
41      class={cn(alertVariants({ variant: local.variant }), local.class)}
42      {...others}
43    />
44  );
45};
46 
47const AlertTitle: Component<ComponentProps<"div">> = (props) => {
48  const [local, others] = splitProps(props, ["class"]);
49  return (
50    <div
51      data-slot="alert-title"
52      class={cn(
53        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
54        local.class,
55      )}
56      {...others}
57    />
58  );
59};
60 
61const AlertDescription: Component<ComponentProps<"div">> = (props) => {
62  const [local, others] = splitProps(props, ["class"]);
63  return (
64    <div
65      data-slot="alert-description"
66      class={cn(
67        "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
68        local.class,
69      )}
70      {...others}
71    />
72  );
73};
74 
75const AlertAction: Component<ComponentProps<"div">> = (props) => {
76  const [local, others] = splitProps(props, ["class"]);
77// … truncated