38:T1f8c,

import {
  Alert,
  AlertAction,
  AlertContent,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

const Demo = () => (
  <div className="grid w-full max-w-480 gap-12">
    <Alert>
      <AlertContent>
        <AlertTitle>Your trial ends in 3 days</AlertTitle>
        <AlertDescription>
          Upgrade to keep access to all screens and flows.
        </AlertDescription>
      </AlertContent>
      <AlertAction>
        <Button size="sm">Upgrade</Button>
      </AlertAction>
    </Alert>
    <Alert variant="negative">
      <AlertContent>
        <AlertTitle>Payment failed</AlertTitle>
        <AlertDescription>Check your card details and retry.</AlertDescription>
      </AlertContent>
    </Alert>
  </div>
)

export default Demo

35:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$38"}}],"$L39"]}] 3a:T44df,

import { cva, type VariantProps } from "class-variance-authority"

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

const alertVariants = cva(
  "relative flex w-full gap-12 rounded-16 p-16 text-compact [&>svg]:mt-[2px] [&>svg]:size-16 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default:
          "bg-glass-background-surface text-text-primary shadow-glass-surface backdrop-glass",
        negative:
          "bg-background-negative-secondary text-text-on-negative-secondary",
      },
    },
    defaultVariants: { variant: "default" },
  }
)

const Alert = ({
  className,
  variant,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) => (
  <div
    data-slot="alert"
    role="alert"
    className={cn(alertVariants({ variant, className }))}
    {...props}
  />
)

const AlertContent = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="alert-content"
    className={cn("flex min-w-0 flex-1 flex-col gap-4", className)}
    {...props}
  />
)

const AlertTitle = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="alert-title"
    className={cn("text-compact-bold", className)}
    {...props}
  />
)

const AlertDescription = ({
  className,
  ...props
}: React.ComponentProps<"div">) => (
  <div
    data-slot="alert-description"
    className={cn("text-compact opacity-80 [&_a]:underline", className)}
    {...props}
  />
)

const AlertAction = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="alert-action"
    className={cn("ml-auto flex shrink-0 items-center", className)}
    {...props}
  />
)

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

37:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3a"}}],"$L3b"]}]

Installation

Usage