321 lines
8.3 KiB
Plaintext
321 lines
8.3 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>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Badge ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Badge</h2>
|
|
<div class="flex flex-wrap gap-3">
|
|
$$BadgeDefault$$
|
|
$$BadgeSecondary$$
|
|
$$BadgeDestructive$$
|
|
$$BadgeOutline$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Card ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Card</h2>
|
|
<div class="max-w-sm">
|
|
$$CardDemo$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Separator ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Separator</h2>
|
|
<div class="space-y-4">
|
|
<p class="text-sm text-muted-foreground">Horizontal</p>
|
|
$$SeparatorH$$
|
|
<p class="text-sm text-muted-foreground">Vertical (inline)</p>
|
|
<div class="flex items-center gap-3 h-5 text-sm">
|
|
<span>Section</span>
|
|
$$SeparatorV$$
|
|
<span>Another</span>
|
|
$$SeparatorV$$
|
|
<span>More</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Skeleton ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Skeleton</h2>
|
|
<div class="flex flex-col gap-3 max-w-xs">
|
|
$$SkeletonTitle$$
|
|
$$SkeletonLine1$$
|
|
$$SkeletonLine2$$
|
|
$$SkeletonAvatar$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Avatar ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Avatar</h2>
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
$$AvatarSm$$
|
|
$$AvatarDefault$$
|
|
$$AvatarLg$$
|
|
$$AvatarImg$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Progress ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Progress</h2>
|
|
<div class="flex flex-col gap-4 max-w-md">
|
|
$$Progress25$$
|
|
$$Progress60$$
|
|
$$Progress100$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Alert ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Alert</h2>
|
|
<div class="flex flex-col gap-3 max-w-lg">
|
|
$$AlertDefault$$
|
|
$$AlertDestructive$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Breadcrumb ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Breadcrumb</h2>
|
|
$$BreadcrumbDemo$$
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Checkbox ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Checkbox</h2>
|
|
<div class="flex flex-col gap-3">
|
|
$$CheckboxAccept$$
|
|
$$CheckboxChecked$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── RadioGroup ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Radio Group</h2>
|
|
<div class="flex flex-wrap gap-8">
|
|
$$RadioGroupCol$$
|
|
$$RadioGroupRow$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Switch ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Switch</h2>
|
|
<div class="flex flex-col gap-3">
|
|
$$SwitchOff$$
|
|
$$SwitchOn$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Textarea ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Textarea</h2>
|
|
<div class="max-w-md">
|
|
$$TextareaDemo$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Slider ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Slider</h2>
|
|
<div class="flex flex-col gap-4 max-w-md">
|
|
$$SliderDemo$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── File Input ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">File Input</h2>
|
|
<div class="max-w-md">
|
|
$$FileInputDemo$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Table ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Table</h2>
|
|
$$TableDemo$$
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Pagination ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Pagination</h2>
|
|
$$PaginationDemo$$
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Tabs ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Tabs</h2>
|
|
<div class="max-w-lg">
|
|
$$TabsDemo$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Accordion ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Accordion</h2>
|
|
<div class="max-w-lg">
|
|
$$AccordionDemo$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Tooltip ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Tooltip</h2>
|
|
<div class="flex flex-wrap gap-6 items-center pt-4">
|
|
$$TooltipTop$$
|
|
$$TooltipBottom$$
|
|
$$TooltipRight$$
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Toast ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Toast</h2>
|
|
<div class="flex flex-wrap gap-3">
|
|
<button type="button"
|
|
onclick="showToast({ title: 'Saved!', description: 'Your changes have been saved.' })"
|
|
class="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground h-10 px-4 py-2 text-sm font-medium transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
|
|
Show Toast
|
|
</button>
|
|
<button type="button"
|
|
onclick="showToast({ title: 'Error', description: 'Something went wrong.', variant: 'destructive' })"
|
|
class="inline-flex items-center justify-center rounded-md bg-destructive text-destructive-foreground h-10 px-4 py-2 text-sm font-medium transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
|
|
Show Error Toast
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Dialog ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Dialog</h2>
|
|
<button type="button" data-dialog-open="demo-dialog"
|
|
class="inline-flex items-center justify-center rounded-md border border-input bg-background h-10 px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
|
|
Open Dialog
|
|
</button>
|
|
$$DialogDemo$$
|
|
</section>
|
|
|
|
<hr class="border-border" />
|
|
|
|
<!-- ── Dropdown Menu ── -->
|
|
<section>
|
|
<h2 class="mb-4 text-lg font-semibold text-foreground">Dropdown Menu</h2>
|
|
$$DropdownDemo$$
|
|
</section>
|
|
|
|
<!-- Toast viewport (fixed, outside the flow) -->
|
|
$$ToastViewportDemo$$
|
|
|
|
</div>
|