Button

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

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

// Basic renders the default Button.
component Basic() {
	<ui.Button>Button</ui.Button>
}

package button

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

// Variants renders every Button variant side by side.
component Variants() {
	<div class="flex flex-wrap items-center gap-3">
		<ui.Button>Default</ui.Button>
		<ui.Button variant="secondary">Secondary</ui.Button>
		<ui.Button variant="destructive">Destructive</ui.Button>
		<ui.Button variant="outline">Outline</ui.Button>
		<ui.Button variant="ghost">Ghost</ui.Button>
		<ui.Button variant="link">Link</ui.Button>
		<ui.Button size="lg">Large</ui.Button>
		<ui.Button size="icon-sm" aria-label="Small icon"><span>+</span></ui.Button>
		<ui.Button size="icon-lg" aria-label="Large icon"><span>+</span></ui.Button>
		<ui.Button aria-invalid="true">Invalid</ui.Button>
	</div>
}

package button

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

// Rtl mirrors shadcn's own button-rtl demo: outline, destructive, an
// outline button with a trailing arrow that flips via rtl:rotate-180, an
// icon-only button, and a disabled secondary button with a loading
// spinner — translated to Arabic, wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar" class="flex flex-wrap items-center gap-2">
		<ui.Button variant="outline">زر</ui.Button>
		<ui.Button variant="destructive">حذف</ui.Button>
		<ui.Button variant="outline">
			إرسال
			<uiicon.ArrowRight class="rtl:rotate-180"/>
		</ui.Button>
		<ui.Button variant="outline" size="icon" aria-label="Add">
			<uiicon.Plus/>
		</ui.Button>
		<ui.Button variant="secondary" disabled>
			<ui.Spinner/>
			جاري التحميل
		</ui.Button>
	</div>
}