import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@kineticui/core"; import { AlertIcon, CheckIcon, InfoIcon, XIcon } from "@kineticui/icons"; const alertVariants = cva("flex items-start gap-3 rounded-xl border px-4 py-3 text-sm", { variants: { tone: { info: "border-info/30 bg-info-soft text-info", success: "border-success/30 bg-success-soft text-success", warning: "border-warning/30 bg-warning-soft text-warning", danger: "border-danger/30 bg-danger-soft text-danger", }, }, defaultVariants: { tone: "info" }, }); const icons = { info: InfoIcon, success: CheckIcon, warning: AlertIcon, danger: XIcon }; export type AlertProps = React.HTMLAttributes & VariantProps & { title?: React.ReactNode; /** Buttons or links on the right. */ action?: React.ReactNode; }; export function Alert({ tone = "info", title, action, className, children, ...props }: AlertProps) { const Icon = icons[tone ?? "info"]; return (

{title ? {title} : null} {children ? {children} : null}

{action}

); } export type EmptyStateProps = { icon?: React.ReactNode; title: React.ReactNode; description?: React.ReactNode; actions?: React.ReactNode; className?: string; }; export function EmptyState({ icon, title, description, actions, className }: EmptyStateProps) { return (

{icon ? (

{icon}

) : null}

{title}

{description ?

{description}

: null} {actions ?

{actions}

: null}

); }

Alert

No events yet

Installation

Exports