Alert

package alert

props {
  // Variant sets the tone: Default or Destructive.
  Variant  Variant = Default
  // Title is the heading of the alert. An empty value renders no heading.
  Title    string = ""
  // Icon is an svg icon shown in the column before the text. A nil value renders no icon column.
  Icon     gx.Node = nil
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the alert description. A nil value renders no description.
  Children gx.Node = nil
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div data-slot="alert" role="alert" class={p.class()} {...p.Attrs}>
  if p.Icon != nil {
    {p.Icon}
  }
  if p.Title != "" {
    <div data-slot="alert-title" class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">{p.Title}</div>
  }
  if p.Children != nil {
    <div data-slot="alert-description" class="col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed">{p.Children}</div>
  }
</div>

package alert

import (
	"github.com/alternayte/gx"
	"github.com/alternayte/gx/registry/icons"
)

var AlertFixtures = gx.Fixtures[AlertProps]{
	"Default":     {Title: "Heads up", Children: gx.Text("You can add components to your app.")},
	"Destructive": {Variant: Destructive, Title: "Error", Children: gx.Text("Your session expired. Sign in again.")},
	"Icon":        {Icon: icons.Info(icons.InfoProps{}), Title: "Heads up", Children: gx.Text("You can add components to your app.")},
	"DestructiveIcon": {
		Variant:  Destructive,
		Icon:     icons.TriangleAlert(icons.TriangleAlertProps{}),
		Title:    "Error",
		Children: gx.Text("Your session expired. Sign in again."),
	},
	"TitleOnly": {Icon: icons.CircleCheck(icons.CircleCheckProps{}), Title: "Your changes are saved."},
}

package alert

import "github.com/alternayte/gx"

// Variant is the tone of an alert.
type Variant string

// The variants of alert.Alert.
const (
	Default     Variant = "default"
	Destructive Variant = "destructive"
)

var variantClass = gx.Enum[Variant]{
	Default:     "bg-card text-card-foreground",
	Destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
}

// class returns the classes of one alert. The icon column opens when the
// alert holds an svg as a direct child.
func (p AlertProps) class() string {
	const base = "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border border-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"
	variant := p.Variant
	if variant == "" {
		variant = Default
	}
	return gx.Cx(base, variantClass[variant], p.Class)
}