Dialog

// Package dialog holds the site's example gsx components for ui/dialog.
package dialog

import (
	"github.com/gsxhq/gsxui/ui"
)

// Basic renders a confirm dialog. The trigger is a real Button carrying
// data-gsxui-dialog-trigger — the documented idiom for a styled trigger,
// no DialogTrigger wrapper needed (see docs/jsx-parity.md).
component Basic() {
	<ui.Dialog>
		<ui.Button variant="outline" data-gsxui-dialog-trigger>Delete account</ui.Button>
		<ui.DialogContent>
			<ui.DialogHeader>
				<ui.DialogTitle>Are you absolutely sure?</ui.DialogTitle>
				<ui.DialogDescription>This will permanently delete your account.</ui.DialogDescription>
			</ui.DialogHeader>
			<ui.DialogFooter>
				<ui.Button variant="outline" data-gsxui-dialog-close>Cancel</ui.Button>
				<ui.Button variant="destructive">Continue</ui.Button>
			</ui.DialogFooter>
		</ui.DialogContent>
	</ui.Dialog>
}

package dialog

import (
	"github.com/gsxhq/gsxui/ui"
)

// Footer shows DialogFooter's showCloseButton: true appends an outline
// Close button automatically, no explicit DialogClose needed.
component Footer() {
	<ui.Dialog>
		<ui.Button data-gsxui-dialog-trigger>Share</ui.Button>
		<ui.DialogContent>
			<ui.DialogHeader>
				<ui.DialogTitle>Share link</ui.DialogTitle>
				<ui.DialogDescription>Anyone with this link can view.</ui.DialogDescription>
			</ui.DialogHeader>
			<ui.DialogFooter showCloseButton>
				<ui.Button>Copy link</ui.Button>
			</ui.DialogFooter>
		</ui.DialogContent>
	</ui.Dialog>
}

package dialog

import (
	"github.com/gsxhq/gsxui/ui"
)

// Events shows the gsxui:open/gsxui:close CustomEvents dialog.js emits on
// the <dialog> element on every open/close path — trigger, Esc, light
// dismiss, and programmatic showModal()/close() alike.
component Events() {
	<ui.Dialog>
		<ui.Button data-gsxui-dialog-trigger>Open</ui.Button>
		<ui.DialogContent id="events-dialog">
			<ui.DialogTitle>Watched dialog</ui.DialogTitle>
			<ui.DialogDescription>Its open/close events log below.</ui.DialogDescription>
		</ui.DialogContent>
		<output id="events-log" class="mt-4 block text-sm text-muted-foreground">closed</output>
		<script>
			document.addEventListener("gsxui:open", (e) => {
				if (e.target.id === "events-dialog") document.getElementById("events-log").textContent = "open";
			});
			document.addEventListener("gsxui:close", (e) => {
				if (e.target.id === "events-dialog") document.getElementById("events-log").textContent = "closed";
			});
		</script>
	</ui.Dialog>
}