Accordion

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

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

// Basic renders three items sharing name="faq" — native <details name>
// gives the group exclusive-open behavior, no JS. The first item opens.
component Basic() {
	<ui.Accordion name="faq">
		<ui.AccordionItem name="faq" open>
			<ui.AccordionTrigger>Is it accessible?</ui.AccordionTrigger>
			<ui.AccordionContent>Yes, it follows the WAI-ARIA design pattern.</ui.AccordionContent>
		</ui.AccordionItem>
		<ui.AccordionItem name="faq">
			<ui.AccordionTrigger>Is it styled?</ui.AccordionTrigger>
			<ui.AccordionContent>Yes, it comes with default styles.</ui.AccordionContent>
		</ui.AccordionItem>
		<ui.AccordionItem name="faq">
			<ui.AccordionTrigger>Is it animated?</ui.AccordionTrigger>
			<ui.AccordionContent>Yes, height is animated by default.</ui.AccordionContent>
		</ui.AccordionItem>
	</ui.Accordion>
}

package accordion

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

// Compact tightens both boxes with caller classes — the trigger's default
// py-2.5 and the content's default pb-2.5 — tailwind-merge drops each base
// utility, same class-merge story as every other component.
component Compact() {
	<ui.Accordion name="compact">
		<ui.AccordionItem name="compact" open>
			<ui.AccordionTrigger class="py-1.5">Shipping</ui.AccordionTrigger>
			<ui.AccordionContent class="pb-1">Ships within 2 business days.</ui.AccordionContent>
		</ui.AccordionItem>
		<ui.AccordionItem name="compact">
			<ui.AccordionTrigger class="py-1.5">Returns</ui.AccordionTrigger>
			<ui.AccordionContent class="pb-1">30-day return window.</ui.AccordionContent>
		</ui.AccordionItem>
	</ui.Accordion>
}

package accordion

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

// Rtl mirrors shadcn's own accordion-rtl demo: the same three FAQ
// question/answer pairs, translated to Arabic, wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar">
		<ui.Accordion name="faq-rtl" class="max-w-md">
			<ui.AccordionItem name="faq-rtl" open>
				<ui.AccordionTrigger>كيف يمكنني إعادة تعيين كلمة المرور؟</ui.AccordionTrigger>
				<ui.AccordionContent>
					انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطًا لإعادة تعيين
					كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.
				</ui.AccordionContent>
			</ui.AccordionItem>
			<ui.AccordionItem name="faq-rtl">
				<ui.AccordionTrigger>هل يمكنني تغيير خطة الاشتراك الخاصة بي؟</ui.AccordionTrigger>
				<ui.AccordionContent>
					نعم، يمكنك ترقية أو تخفيض خطتك في أي وقت من إعدادات حسابك. ستظهر التغييرات في دورة الفوترة التالية.
				</ui.AccordionContent>
			</ui.AccordionItem>
			<ui.AccordionItem name="faq-rtl">
				<ui.AccordionTrigger>ما هي طرق الدفع التي تقبلونها؟</ui.AccordionTrigger>
				<ui.AccordionContent>
					نقبل جميع بطاقات الائتمان الرئيسية و PayPal والتحويلات المصرفية. تتم معالجة جميع المدفوعات بأمان من خلال شركاء
					الدفع لدينا.
				</ui.AccordionContent>
			</ui.AccordionItem>
		</ui.Accordion>
	</div>
}