Alert

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { VariantProps } from "class-variance-authority";
3
import type { Component, ComponentProps, ValidComponent } from "solid-js";
4

5
import { splitProps } from "solid-js";
6
import * as AlertPrimitive from "@kobalte/core/alert";
7
import { cva } from "class-variance-authority";
8

9
import { cn } from "~/lib/utils";
10

11
const alertVariants = cva(
12
  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-base border-2 border-border px-4 py-3 text-sm shadow-shadow has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
13
  {
14
    variants: {
15
      variant: {
16
        default: "bg-primary text-primary-foreground",
17
        destructive: "border-black bg-black text-white shadow-destructive",
18
        neutral: "bg-secondary text-foreground",
19
      },
20
    },
21
    defaultVariants: {
22
      variant: "default",
23
    },
24
  },
25
);
26

27
type AlertRootProps<T extends ValidComponent = "div"> =
28
  AlertPrimitive.AlertRootProps<T> &
29
    VariantProps<typeof alertVariants> & { class?: string | undefined };
30

31
const 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: props.variant }), local.class)}
42
      {...others}
43
    />
44
  );
45
};
46

47
const AlertTitle: Component<ComponentProps<"h5">> = (props) => {
48
  const [local, others] = splitProps(props, ["class"]);
49
  return (
50
    <h5
51
      data-slot="alert-title"
52
      class={cn(
53
        "col-start-2 line-clamp-1 min-h-4 font-heading tracking-tight",
54
        local.class,
55
      )}
56
      {...others}
57
    />
58
  );
59
};
60

61
const 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
        "col-start-2 grid justify-items-start gap-1 text-sm font-base [&_p]:leading-relaxed",
68
        local.class,
69
      )}
70
      {...others}
71
    />
72
  );
73
};
74

75
export { Alert, AlertTitle, AlertDescription };