shadcn, restyled · @jengacore/alert

Alert

Tinted ground + coloured icon + title. Tones info, success, warning, danger. No coloured left border.

Settlement window 1042 closes at 17:00.

Transfers after closing go to window 1043.

Batch B-0912 approved.

Equity Bank is at 93% of its net debit cap.

Ask the participant to pre-fund before 15:00 or raise the cap.

The settlement file was rejected by RTGS.

Fix the participant account mapping and resend the file.

Install

terminal

npx shadcn@latest add @jengacore/alert

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/alert.json

Registry dependencies

@jengacore/theme

npm packages

class-variance-authority

Source

components/ui/alert.tsx

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

/**
 * Inline message about the page or a record: tinted ground + coloured icon + title in `foreground`.
 * Never a coloured left border. Use role="alert" only for blocking errors (the default is "status").
 * The title states the fact; the description says what to do next and by when.
 */
const alertVariants = cva(
  "group/alert relative grid w-full gap-0.5 rounded-md px-3.5 py-3 text-left text-sm text-foreground has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 has-data-[slot=alert-action]:pr-28 *:[svg]:row-span-2 *:[svg]:size-5 *:[svg]:translate-y-px *:[svg]:stroke-[1.75] contrast:border contrast:border-current",
  {
    variants: {
      tone: {
        neutral: "bg-muted *:[svg]:text-muted-foreground",
        info: "bg-info-subtle *:[svg]:text-info contrast:text-info",
        success: "bg-success-subtle *:[svg]:text-success contrast:text-success",
        warning: "bg-warning-subtle *:[svg]:text-warning contrast:text-warning",
        danger: "bg-destructive-subtle *:[svg]:text-destructive contrast:text-destructive",
      },
    },
    defaultVariants: { tone: "neutral" },
  }
)

function Alert({
  className,
  tone,
  variant,
  role,
  ...props
}: React.ComponentProps<"div"> &
  VariantProps<typeof alertVariants> & {
    /** shadcn API: `destructive` maps to the danger tone. */
    variant?: "default" | "destructive" | null
  }) {
  const resolved = tone ?? (variant === "destructive" ? "danger" : undefined)
  return (
    <div
      data-slot="alert"
      data-tone={resolved ?? "neutral"}
      role={role ?? "status"}
      className={cn(alertVariants({ tone: resolved }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="alert-title" className={cn("col-start-2 font-medium leading-5", className)} {...props} />
}

function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn("col-start-2 text-[13px] leading-[18px] text-muted-foreground contrast:text-foreground [&_p]:leading-relaxed", className)}
      {...props}
    />
  )
}

function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="alert-action" className={cn("absolute top-2.5 right-3", className)} {...props} />
}

export { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants }