Alert

export * from "./alert";
export * as Alert from "./namespace";
export * from "./styles";

import type { VariantProps } from "cva";
import { AlertStyles } from "./styles";

export interface AlertRootProps
  extends React.ComponentProps<"div">,
    VariantProps<typeof AlertStyles.Root> {}

export function AlertRoot({ className, variant, ...props }: AlertRootProps) {
  return (
    <div
      className={AlertStyles.Root({ className, variant })}
      data-slot="alert-root"
      role="alert"
      {...props}
    />
  );
}

export interface AlertTitleProps extends React.ComponentProps<"div"> {}

export function AlertTitle({ className, ...props }: AlertTitleProps) {
  return (
    <div
      className={AlertStyles.Title({ className })}
      data-slot="alert-title"
      {...props}
    />
  );
}

export interface AlertDescriptionProps extends React.ComponentProps<"div"> {}

export function AlertDescription({
  className,
  ...props
}: AlertDescriptionProps) {
  return (
    <div
      className={AlertStyles.Description({ className })}
      data-slot="alert-description"
      {...props}
    />
  );
}

import { cva } from "~/registry/lib/cva";

export const AlertStyles = {
  Description: cva({
    base: [
      "col-start-2 grid justify-items-start gap-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
    ],
  }),
  Root: cva({
    base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm 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",
    defaultVariants: {
      variant: "default",
    },

    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
        warning:
          "bg-card text-amber-400 *:data-[slot=alert-description]:text-amber-400/90 [&>svg]:text-current",
      },
    },
  }),
  Title: cva({
    base: ["col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"],
  }),
};

export {
  AlertDescription as Description,
  AlertRoot as Root,
  AlertTitle as Title,
} from "./alert";