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. One real Button carries both the dialog
// trigger style slot and the behavior/ARIA contract, so there is no
// button-in-button wrapper or duplicate control.
component Basic() {
	<ui.Dialog>
		<ui.Button
			variant="outline"
			data-gsxui-slot-dialog-trigger
			aria-haspopup="dialog"
			aria-expanded="false"
		>
			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-slot-dialog-trigger
			aria-haspopup="dialog"
			aria-expanded="false"
		>
			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 commandfor="events-dialog" command="show-modal">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.Button
				variant="outline"
				commandfor="events-dialog"
				command="request-close"
			>
				Close
			</ui.Button>
		</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>
}

package dialog

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

// Rtl keeps Basic's confirm-dialog shape (shadcn's own dialog-rtl demo is
// an edit-profile form using Field/Input, which this directory's Basic
// doesn't compose — DEVIATED from rather than invented) and translates its
// strings to Arabic, wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar">
		<ui.Dialog>
			<ui.Button
				variant="outline"
				data-gsxui-slot-dialog-trigger
				aria-haspopup="dialog"
				aria-expanded="false"
			>
				حذف الحساب
			</ui.Button>
			<ui.DialogContent>
				<ui.DialogHeader>
					<ui.DialogTitle>هل أنت متأكد تمامًا؟</ui.DialogTitle>
					<ui.DialogDescription>سيؤدي هذا إلى حذف حسابك نهائيًا.</ui.DialogDescription>
				</ui.DialogHeader>
				<ui.DialogFooter>
					<ui.Button variant="outline" data-gsxui-dialog-close>إلغاء</ui.Button>
					<ui.Button variant="destructive">متابعة</ui.Button>
				</ui.DialogFooter>
			</ui.DialogContent>
		</ui.Dialog>
	</div>
}