69 lines
1.5 KiB
Plaintext
69 lines
1.5 KiB
Plaintext
<div class="space-y-10">
|
|
|
|
<!-- ── Buttons ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Buttons</h2>
|
|
<div class="flex flex-wrap gap-3">
|
|
$$BtnDefault$$
|
|
$$BtnDestructive$$
|
|
$$BtnOutline$$
|
|
$$BtnSecondary$$
|
|
$$BtnGhost$$
|
|
$$BtnLink$$
|
|
$$BtnSm$$
|
|
$$BtnLg$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Inputs ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Inputs</h2>
|
|
<div class="grid max-w-xl grid-cols-1 gap-4 sm:grid-cols-2">
|
|
$$InputText$$
|
|
$$InputEmail$$
|
|
$$InputPassword$$
|
|
$$InputSearch$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Select ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Select</h2>
|
|
<div class="max-w-xs">
|
|
$$SelectDemo$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Calendar ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Calendar</h2>
|
|
$$CalendarDemo$$
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Calendar Range ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Calendar Range</h2>
|
|
$$CalendarRangeDemo$$
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Time Picker ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Time Picker</h2>
|
|
<div class="flex flex-wrap gap-8">
|
|
$$TimePickerDemo$$
|
|
$$TimePicker12hDemo$$
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|