shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created more components

Browse Source
This commit is contained in:
Enciphered
2026-05-04 18:58:48 +05:00
parent fb1cb8e834
commit 40a7d9018c
52 changed files with 2526 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Htmx.ApiDemo/Templates/Components/Accordion.htmx
+3
View File
@@ -0,0 +1,3 @@
<div class="accordion-root w-full" id="$$Id$$">
$$Items$$
</div>
Htmx.ApiDemo/Templates/Components/Accordion.htmx.cs
+55
View File
@@ -0,0 +1,55 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Accordion. Items collapse/expand client-side via components.js.
/// Pass a list of (Title, Content) tuples; set openIndex to expand one by default (-1 = all closed).
/// </summary>
public sealed class Accordion : AccordionBase
{
private const string ChevronSvg =
"""<svg class="accordion-chevron h-4 w-4 shrink-0 transition-transform duration-200" """ +
"""xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" """ +
"""stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>""";
private readonly byte[] _idData;
private readonly byte[] _itemsData;
public Accordion(string id, IEnumerable<(string Title, string Content)> items, int openIndex = -1)
{
_idData = id.ToUtf8Bytes();
var list = items.ToList();
var sb = new System.Text.StringBuilder();
for (int i = 0; i < list.Count; i++)
{
var (title, content) = list[i];
var expanded = i == openIndex;
var height = expanded ? "auto" : "0";
var opacity = expanded ? "1" : "0";
sb.Append($"""
<div class="accordion-item border-b border-border">
<h3 class="flex">
<button type="button"
class="accordion-trigger flex flex-1 items-center justify-between py-4 font-medium
transition-all hover:underline text-left"
aria-expanded="{(expanded ? "true" : "false")}">
{title}
{ChevronSvg}
</button>
</h3>
<div class="accordion-panel overflow-hidden text-sm transition-all duration-200"
style="height:{height};opacity:{opacity}">
<div class="pb-4 pt-0">{content}</div>
</div>
</div>
""");
}
_itemsData = sb.ToString().ToUtf8Bytes();
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderItems(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_itemsData);
}
Htmx.ApiDemo/Templates/Components/Alert.htmx
+7
View File
@@ -0,0 +1,7 @@
<div role="alert" class="$$Classes$$">
$$Icon$$
<div>
$$Title$$
$$Description$$
</div>
</div>
Htmx.ApiDemo/Templates/Components/Alert.htmx.cs
+40
View File
@@ -0,0 +1,40 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Alert component.
/// Variant: default | destructive
/// </summary>
public sealed class Alert : AlertBase
{
private static readonly Dictionary<string, string> VariantClasses = new()
{
["default"] = "relative w-full rounded-lg border border-border bg-background p-4 " +
"[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
["destructive"] = "relative w-full rounded-lg border border-destructive/50 p-4 text-destructive " +
"[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-destructive",
};
private readonly byte[] _classesData;
private readonly byte[] _iconData;
private readonly byte[] _titleData;
private readonly byte[] _descriptionData;
public Alert(
string title,
string description = "",
string variant = "default",
string icon = "")
{
_classesData = VariantClasses.GetValueOrDefault(variant, VariantClasses["default"]).ToUtf8Bytes();
_iconData = icon.ToUtf8Bytes();
_titleData = $"""<h5 class="mb-1 font-medium leading-none tracking-tight">{title}</h5>""".ToUtf8Bytes();
_descriptionData = string.IsNullOrEmpty(description)
? []
: $"""<div class="text-sm [&_p]:leading-relaxed">{description}</div>""".ToUtf8Bytes();
}
protected override void RenderClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_classesData);
protected override void RenderIcon(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_iconData);
protected override void RenderTitle(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_titleData);
protected override void RenderDescription(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_descriptionData);
}
Htmx.ApiDemo/Templates/Components/Avatar.htmx
+3
View File
@@ -0,0 +1,3 @@
<span class="relative flex $$SizeClasses$$ shrink-0 overflow-hidden rounded-full">
$$Content$$
</span>
Htmx.ApiDemo/Templates/Components/Avatar.htmx.cs
+31
View File
@@ -0,0 +1,31 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Avatar component. Shows an image or falls back to initials.
/// Size: sm (h-8 w-8) | default (h-10 w-10) | lg (h-14 w-14) | xl (h-20 w-20)
/// </summary>
public sealed class Avatar : AvatarBase
{
private static readonly Dictionary<string, string> Sizes = new()
{
["sm"] = "h-8 w-8",
["default"] = "h-10 w-10",
["lg"] = "h-14 w-14",
["xl"] = "h-20 w-20",
};
private readonly byte[] _sizeClassesData;
private readonly byte[] _contentData;
public Avatar(string fallback, string? src = null, string size = "default")
{
_sizeClassesData = Sizes.GetValueOrDefault(size, Sizes["default"]).ToUtf8Bytes();
_contentData = !string.IsNullOrEmpty(src)
? $"""<img src="{src}" alt="{fallback}" class="aspect-square h-full w-full object-cover" />""".ToUtf8Bytes()
: $"""<span class="flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium select-none">{fallback}</span>""".ToUtf8Bytes();
}
protected override void RenderSizeClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_sizeClassesData);
protected override void RenderContent(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_contentData);
}
Htmx.ApiDemo/Templates/Components/Badge.htmx
+1
View File
@@ -0,0 +1 @@
<span class="$$Classes$$">$$Text$$</span>
Htmx.ApiDemo/Templates/Components/Badge.htmx.cs
+33
View File
@@ -0,0 +1,33 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Badge component.
/// Variant: default | secondary | destructive | outline
/// </summary>
public sealed class Badge : BadgeBase
{
private static readonly Dictionary<string, string> VariantClasses = new()
{
["default"] = "bg-primary text-primary-foreground hover:bg-primary/80",
["secondary"] = "bg-secondary text-secondary-foreground hover:bg-secondary/80",
["destructive"] = "bg-destructive text-destructive-foreground hover:bg-destructive/80",
["outline"] = "text-foreground border border-input hover:bg-accent",
};
private const string BaseClasses =
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors " +
"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2";
private readonly byte[] _textData;
private readonly byte[] _classesData;
public Badge(string text, string variant = "default")
{
_textData = text.ToUtf8Bytes();
var v = VariantClasses.GetValueOrDefault(variant, VariantClasses["default"]);
_classesData = $"{BaseClasses} {v}".ToUtf8Bytes();
}
protected override void RenderText(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_textData);
protected override void RenderClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_classesData);
}
Htmx.ApiDemo/Templates/Components/Breadcrumb.htmx
+5
View File
@@ -0,0 +1,5 @@
<nav aria-label="Breadcrumb">
<ol class="flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground">
$$Items$$
</ol>
</nav>
Htmx.ApiDemo/Templates/Components/Breadcrumb.htmx.cs
+42
View File
@@ -0,0 +1,42 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Breadcrumb navigation.
/// Pass items as (Label, Href) tuples — empty Href renders a non-linked span.
/// The last item is always rendered as the current page (non-linked, foreground colour).
/// </summary>
public sealed class Breadcrumb : BreadcrumbBase
{
private const string ChevronSvg =
"""<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="m9 18 6-6-6-6"/></svg>""";
private readonly byte[] _itemsData;
public Breadcrumb(IEnumerable<(string Label, string Href)> items)
{
var list = items.ToList();
var sb = new System.Text.StringBuilder();
for (int i = 0; i < list.Count; i++)
{
var (label, href) = list[i];
bool isLast = i == list.Count - 1;
sb.Append("""<li class="inline-flex items-center gap-1.5">""");
if (isLast || string.IsNullOrEmpty(href))
sb.Append($"""<span class="{(isLast ? "font-normal text-foreground" : "")}">{label}</span>""");
else
sb.Append($"""<a href="{href}" class="hover:text-foreground transition-colors">{label}</a>""");
if (!isLast)
sb.Append($"""<span role="presentation" aria-hidden="true">{ChevronSvg}</span>""");
sb.Append("</li>");
}
_itemsData = sb.ToString().ToUtf8Bytes();
}
protected override void RenderItems(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_itemsData);
}
Htmx.ApiDemo/Templates/Components/Card.htmx
+5
View File
@@ -0,0 +1,5 @@
<div class="rounded-lg border border-border bg-card text-card-foreground shadow-sm $$ExtraClasses$$">
$$Header$$
<div class="p-6 pt-0">$$Content$$</div>
$$Footer$$
</div>
Htmx.ApiDemo/Templates/Components/Card.htmx.cs
+48
View File
@@ -0,0 +1,48 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Card component with optional header (title + description) and footer.
/// </summary>
public sealed class Card : CardBase
{
private readonly byte[] _extraClassesData;
private readonly byte[] _headerData;
private readonly byte[] _contentData;
private readonly byte[] _footerData;
public Card(
string content,
string title = "",
string description = "",
string footer = "",
string extraClasses = "")
{
_extraClassesData = extraClasses.ToUtf8Bytes();
_contentData = content.ToUtf8Bytes();
_headerData = (string.IsNullOrEmpty(title) && string.IsNullOrEmpty(description))
? []
: BuildHeader(title, description);
_footerData = string.IsNullOrEmpty(footer)
? []
: $"""<div class="flex items-center p-6 pt-0">{footer}</div>""".ToUtf8Bytes();
}
private static byte[] BuildHeader(string title, string description)
{
var sb = new System.Text.StringBuilder();
sb.Append("""<div class="flex flex-col space-y-1.5 p-6">""");
if (!string.IsNullOrEmpty(title))
sb.Append($"""<h3 class="text-2xl font-semibold leading-none tracking-tight">{title}</h3>""");
if (!string.IsNullOrEmpty(description))
sb.Append($"""<p class="text-sm text-muted-foreground">{description}</p>""");
sb.Append("</div>");
return sb.ToString().ToUtf8Bytes();
}
protected override void RenderExtraClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_extraClassesData);
protected override void RenderHeader(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_headerData);
protected override void RenderContent(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_contentData);
protected override void RenderFooter(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_footerData);
}
Htmx.ApiDemo/Templates/Components/Checkbox.htmx
+13
View File
@@ -0,0 +1,13 @@
<div class="flex items-center gap-2">
<input
type="checkbox"
id="$$Id$$"
name="$$Name$$"
value="$$Value$$"
$$Checked$$
class="h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
accent-primary cursor-pointer" />
$$Label$$
</div>
Htmx.ApiDemo/Templates/Components/Checkbox.htmx.cs
+35
View File
@@ -0,0 +1,35 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Checkbox with an optional label.
/// </summary>
public sealed class Checkbox : CheckboxBase
{
private readonly byte[] _idData;
private readonly byte[] _nameData;
private readonly byte[] _valueData;
private readonly byte[] _checkedData;
private readonly byte[] _labelData;
public Checkbox(
string id,
string label = "",
string name = "",
string value = "true",
bool @checked = false)
{
_idData = id.ToUtf8Bytes();
_nameData = (string.IsNullOrEmpty(name) ? id : name).ToUtf8Bytes();
_valueData = value.ToUtf8Bytes();
_checkedData = (@checked ? "checked" : "").ToUtf8Bytes();
_labelData = string.IsNullOrEmpty(label)
? []
: $"""<label for="{id}" class="text-sm font-medium leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{label}</label>""".ToUtf8Bytes();
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderName(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_nameData);
protected override void RenderValue(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_valueData);
protected override void RenderChecked(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_checkedData);
protected override void RenderLabel(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_labelData);
}
Htmx.ApiDemo/Templates/Components/Dialog.htmx
+11
View File
@@ -0,0 +1,11 @@
<dialog id="dlg-$$Id$$"
class="dialog-root rounded-lg border border-border bg-background p-0 shadow-lg
fixed left-1/2 top-1/2 m-0 w-full max-w-lg -translate-x-1/2 -translate-y-1/2
backdrop:bg-black/50 backdrop:backdrop-blur-sm
open:block">
<div class="flex flex-col gap-4 p-6">
$$Header$$
<div class="text-sm text-muted-foreground">$$Content$$</div>
$$Footer$$
</div>
</dialog>
Htmx.ApiDemo/Templates/Components/Dialog.htmx.cs
+55
View File
@@ -0,0 +1,55 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Dialog using the native HTML &lt;dialog&gt; element.
/// Open with data-dialog-open="id" on any button; close with data-dialog-close or .dialog-close.
/// JS wiring is in components.js.
/// </summary>
public sealed class Dialog : DialogBase
{
private readonly byte[] _idData;
private readonly byte[] _headerData;
private readonly byte[] _contentData;
private readonly byte[] _footerData;
public Dialog(
string id,
string content,
string title = "",
string description = "",
string footer = "")
{
_idData = id.ToUtf8Bytes();
_contentData = content.ToUtf8Bytes();
_headerData = (string.IsNullOrEmpty(title) && string.IsNullOrEmpty(description))
? []
: BuildHeader(id, title, description);
_footerData = string.IsNullOrEmpty(footer)
? []
: $"""<div class="flex justify-end gap-2">{footer}</div>""".ToUtf8Bytes();
}
private static byte[] BuildHeader(string id, string title, string description)
{
var sb = new System.Text.StringBuilder();
sb.Append("""<div class="flex items-start justify-between gap-4">""");
sb.Append("""<div class="flex flex-col gap-1.5">""");
if (!string.IsNullOrEmpty(title))
sb.Append($"""<h2 class="text-lg font-semibold leading-none tracking-tight">{title}</h2>""");
if (!string.IsNullOrEmpty(description))
sb.Append($"""<p class="text-sm text-muted-foreground">{description}</p>""");
sb.Append("</div>");
sb.Append("""<button type="button" data-dialog-close class="dialog-close rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" aria-label="Close">""");
sb.Append("""<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>""");
sb.Append("</button>");
sb.Append("</div>");
return sb.ToString().ToUtf8Bytes();
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderHeader(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_headerData);
protected override void RenderContent(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_contentData);
protected override void RenderFooter(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_footerData);
}
Htmx.ApiDemo/Templates/Components/DropdownMenu.htmx
+9
View File
@@ -0,0 +1,9 @@
<div class="dropdown-root relative inline-block">
<div class="dropdown-trigger $$TriggerClasses$$" role="button" tabindex="0" aria-haspopup="menu" aria-expanded="false">
$$Trigger$$
</div>
<div class="dropdown-content hidden absolute $$Position$$ z-50 min-w-40 rounded-md border border-border
bg-popover p-1 text-popover-foreground shadow-md" role="menu">
$$Items$$
</div>
</div>
Htmx.ApiDemo/Templates/Components/DropdownMenu.htmx.cs
+55
View File
@@ -0,0 +1,55 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// CSS-native DropdownMenu using &lt;details&gt;/&lt;summary&gt;.
/// Position: "left-0 top-full mt-1" (default) | "right-0 top-full mt-1" | etc.
/// Items: pre-built HTML — use BuildItem() helper for consistent styling.
/// </summary>
public sealed class DropdownMenu : DropdownMenuBase
{
private const string ItemClasses =
"relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm " +
"outline-none transition-colors hover:bg-accent hover:text-accent-foreground " +
"focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50";
private readonly byte[] _triggerClassesData;
private readonly byte[] _triggerData;
private readonly byte[] _positionData;
private readonly byte[] _itemsData;
public DropdownMenu(
IHtmxComponent trigger,
IEnumerable<(string Label, string Href, bool IsSeparator)> items,
string position = "left-0 top-full mt-1")
{
// Render trigger to bytes
var writer = new System.Buffers.ArrayBufferWriter<byte>();
trigger.Render(new HtmxRenderContext(writer));
_triggerData = writer.WrittenSpan.ToArray();
_triggerClassesData = []; // trigger already supplies its own classes
_positionData = position.ToUtf8Bytes();
var sb = new System.Text.StringBuilder();
foreach (var (label, href, isSeparator) in items)
{
if (isSeparator)
{
sb.Append("""<div class="-mx-1 my-1 h-px bg-border"></div>""");
}
else if (string.IsNullOrEmpty(href))
{
sb.Append($"""<button type="button" class="{ItemClasses}">{label}</button>""");
}
else
{
sb.Append($"""<a href="{href}" class="{ItemClasses}">{label}</a>""");
}
}
_itemsData = sb.ToString().ToUtf8Bytes();
}
protected override void RenderTriggerClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_triggerClassesData);
protected override void RenderTrigger(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_triggerData);
protected override void RenderPosition(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_positionData);
protected override void RenderItems(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_itemsData);
}
Htmx.ApiDemo/Templates/Components/FileInput.htmx
+18
View File
@@ -0,0 +1,18 @@
<div class="flex flex-col gap-1.5">
$$Label$$
<input
id="$$Id$$"
name="$$Name$$"
type="file"
$$Accept$$
$$Multiple$$
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm
ring-offset-background
file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground
placeholder:text-muted-foreground
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 $$ExtraClasses$$"
$$HxAttrs$$
/>
$$Description$$
</div>
Htmx.ApiDemo/Templates/Components/FileInput.htmx.cs
+51
View File
@@ -0,0 +1,51 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style FileInput component with optional label and description.
/// </summary>
public sealed class FileInput : FileInputBase
{
private readonly byte[] _idData;
private readonly byte[] _nameData;
private readonly byte[] _acceptData;
private readonly byte[] _multipleData;
private readonly byte[] _labelData;
private readonly byte[] _descriptionData;
private readonly byte[] _extraClassesData;
private readonly byte[] _hxAttrsData;
public FileInput(
string id,
string name = "",
string accept = "",
bool multiple = false,
string label = "",
string description = "",
string extraClasses = "",
string hxAttrs = "")
{
_idData = id.ToUtf8Bytes();
_nameData = (string.IsNullOrEmpty(name) ? id : name).ToUtf8Bytes();
_acceptData = string.IsNullOrEmpty(accept) ? [] : $"""accept="{accept}" """.ToUtf8Bytes();
_multipleData = multiple ? "multiple".ToUtf8Bytes() : [];
_extraClassesData = extraClasses.ToUtf8Bytes();
_hxAttrsData = hxAttrs.ToUtf8Bytes();
_labelData = string.IsNullOrEmpty(label)
? []
: $"""<label for="{id}" class="text-sm font-medium leading-none">{label}</label>""".ToUtf8Bytes();
_descriptionData = string.IsNullOrEmpty(description)
? []
: $"""<p class="text-xs text-muted-foreground">{description}</p>""".ToUtf8Bytes();
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderName(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_nameData);
protected override void RenderAccept(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_acceptData);
protected override void RenderMultiple(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_multipleData);
protected override void RenderLabel(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_labelData);
protected override void RenderDescription(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_descriptionData);
protected override void RenderExtraClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_extraClassesData);
protected override void RenderHxAttrs(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_hxAttrsData);
}
Htmx.ApiDemo/Templates/Components/Pagination.htmx
+5
View File
@@ -0,0 +1,5 @@
<nav aria-label="Pagination" class="flex items-center gap-1">
$$Prev$$
$$Pages$$
$$Next$$
</nav>
Htmx.ApiDemo/Templates/Components/Pagination.htmx.cs
+49
View File
@@ -0,0 +1,49 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Pagination. Generates prev/next and page-number buttons.
/// urlPattern: format string where {0} is replaced by the page number, e.g. "/items?page={0}"
/// </summary>
public sealed class Pagination : PaginationBase
{
private const string BtnBase =
"inline-flex items-center justify-center rounded-md border border-input bg-background " +
"px-3 h-9 text-sm font-medium ring-offset-background transition-colors " +
"hover:bg-accent hover:text-accent-foreground " +
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
"disabled:pointer-events-none disabled:opacity-50";
private const string ActiveBtn =
"inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground " +
"px-3 h-9 text-sm font-medium ring-offset-background " +
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
private readonly byte[] _prevData;
private readonly byte[] _pagesData;
private readonly byte[] _nextData;
public Pagination(int current, int total, string urlPattern = "?page={0}")
{
_prevData = current <= 1
? $"""<button type="button" class="{BtnBase}" disabled aria-label="Previous page">&#8249;</button>""".ToUtf8Bytes()
: $"""<a href="{string.Format(urlPattern, current - 1)}" class="{BtnBase}" aria-label="Previous page">&#8249;</a>""".ToUtf8Bytes();
_nextData = current >= total
? $"""<button type="button" class="{BtnBase}" disabled aria-label="Next page">&#8250;</button>""".ToUtf8Bytes()
: $"""<a href="{string.Format(urlPattern, current + 1)}" class="{BtnBase}" aria-label="Next page">&#8250;</a>""".ToUtf8Bytes();
var sb = new System.Text.StringBuilder();
for (int p = 1; p <= total; p++)
{
if (p == current)
sb.Append($"""<span class="{ActiveBtn}" aria-current="page">{p}</span>""");
else
sb.Append($"""<a href="{string.Format(urlPattern, p)}" class="{BtnBase}">{p}</a>""");
}
_pagesData = sb.ToString().ToUtf8Bytes();
}
protected override void RenderPrev(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_prevData);
protected override void RenderPages(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_pagesData);
protected override void RenderNext(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_nextData);
}
Htmx.ApiDemo/Templates/Components/Progress.htmx
+4
View File
@@ -0,0 +1,4 @@
<div class="relative $$HeightClass$$ w-full overflow-hidden rounded-full bg-secondary"
role="progressbar" aria-valuenow="$$ValueNow$$" aria-valuemin="0" aria-valuemax="100">
<div class="h-full bg-primary transition-all duration-300" style="width:$$ValueNow$$%"></div>
</div>
Htmx.ApiDemo/Templates/Components/Progress.htmx.cs
+26
View File
@@ -0,0 +1,26 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Progress bar. Value is clamped to 0–100.
/// Size: sm (h-2) | default (h-4) | lg (h-6)
/// </summary>
public sealed class Progress : ProgressBase
{
private readonly byte[] _valueNowData;
private readonly byte[] _heightClassData;
public Progress(int value = 0, string size = "default")
{
var clamped = Math.Clamp(value, 0, 100);
_valueNowData = clamped.ToString().ToUtf8Bytes();
_heightClassData = size switch
{
"sm" => "h-2".ToUtf8Bytes(),
"lg" => "h-6".ToUtf8Bytes(),
_ => "h-4".ToUtf8Bytes(),
};
}
protected override void RenderValueNow(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_valueNowData);
protected override void RenderHeightClass(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_heightClassData);
}
Htmx.ApiDemo/Templates/Components/RadioGroup.htmx
+6
View File
@@ -0,0 +1,6 @@
<div class="flex flex-col gap-2">
$$GroupLabel$$
<div class="flex $$Direction$$ gap-3" role="radiogroup">
$$Items$$
</div>
</div>
Htmx.ApiDemo/Templates/Components/RadioGroup.htmx.cs
+46
View File
@@ -0,0 +1,46 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style RadioGroup.
/// Direction: flex-col | flex-row
/// </summary>
public sealed class RadioGroup : RadioGroupBase
{
private readonly byte[] _groupLabelData;
private readonly byte[] _directionData;
private readonly byte[] _itemsData;
public RadioGroup(
string name,
IEnumerable<(string Value, string Label, bool Selected)> options,
string label = "",
string direction = "flex-col")
{
_groupLabelData = string.IsNullOrEmpty(label)
? []
: $"""<span class="text-sm font-medium leading-none">{label}</span>""".ToUtf8Bytes();
_directionData = direction.ToUtf8Bytes();
var sb = new System.Text.StringBuilder();
foreach (var (value, optLabel, selected) in options)
{
var optId = $"{name}-{value}";
var sel = selected ? " checked" : "";
sb.Append($"""
<label class="flex items-center gap-2 cursor-pointer text-sm">
<input type="radio" id="{optId}" name="{name}" value="{value}"{sel}
class="h-4 w-4 border border-input accent-primary
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
disabled:cursor-not-allowed disabled:opacity-50" />
{optLabel}
</label>
""");
}
_itemsData = sb.ToString().ToUtf8Bytes();
}
protected override void RenderGroupLabel(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_groupLabelData);
protected override void RenderDirection(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_directionData);
protected override void RenderItems(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_itemsData);
}
Htmx.ApiDemo/Templates/Components/Separator.htmx
+1
View File
@@ -0,0 +1 @@
<div class="$$Classes$$" role="separator" aria-orientation="$$Orientation$$"></div>
Htmx.ApiDemo/Templates/Components/Separator.htmx.cs
+24
View File
@@ -0,0 +1,24 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Separator component.
/// Orientation: horizontal | vertical
/// </summary>
public sealed class Separator : SeparatorBase
{
private readonly byte[] _classesData;
private readonly byte[] _orientationData;
public Separator(string orientation = "horizontal", string extraClasses = "")
{
var cls = orientation == "vertical"
? $"inline-block h-full w-px bg-border {extraClasses}"
: $"block h-px w-full bg-border {extraClasses}";
_classesData = cls.Trim().ToUtf8Bytes();
_orientationData = orientation.ToUtf8Bytes();
}
protected override void RenderClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_classesData);
protected override void RenderOrientation(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_orientationData);
}
Htmx.ApiDemo/Templates/Components/Skeleton.htmx
+1
View File
@@ -0,0 +1 @@
<div class="animate-pulse rounded-md bg-muted $$Classes$$"></div>
Htmx.ApiDemo/Templates/Components/Skeleton.htmx.cs
+17
View File
@@ -0,0 +1,17 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Skeleton loading placeholder.
/// Pass size classes via the classes parameter, e.g. "h-4 w-48" or "h-10 w-full".
/// </summary>
public sealed class Skeleton : SkeletonBase
{
private readonly byte[] _classesData;
public Skeleton(string classes = "h-4 w-full")
{
_classesData = classes.ToUtf8Bytes();
}
protected override void RenderClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_classesData);
}
Htmx.ApiDemo/Templates/Components/Slider.htmx
+17
View File
@@ -0,0 +1,17 @@
<div class="flex flex-col gap-2">
$$Label$$
<input
type="range"
id="$$Id$$"
name="$$Name$$"
min="$$Min$$"
max="$$Max$$"
step="$$Step$$"
value="$$Value$$"
class="h-2 w-full cursor-pointer appearance-none rounded-full bg-secondary accent-primary
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 $$ExtraClasses$$"
$$HxAttrs$$
/>
$$Description$$
</div>
Htmx.ApiDemo/Templates/Components/Slider.htmx.cs
+59
View File
@@ -0,0 +1,59 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Slider (range input) with optional label and description.
/// </summary>
public sealed class Slider : SliderBase
{
private readonly byte[] _idData;
private readonly byte[] _nameData;
private readonly byte[] _minData;
private readonly byte[] _maxData;
private readonly byte[] _stepData;
private readonly byte[] _valueData;
private readonly byte[] _labelData;
private readonly byte[] _descriptionData;
private readonly byte[] _extraClassesData;
private readonly byte[] _hxAttrsData;
public Slider(
string id,
string name = "",
int min = 0,
int max = 100,
int step = 1,
int value = 50,
string label = "",
string description = "",
string extraClasses = "",
string hxAttrs = "")
{
_idData = id.ToUtf8Bytes();
_nameData = (string.IsNullOrEmpty(name) ? id : name).ToUtf8Bytes();
_minData = min.ToString().ToUtf8Bytes();
_maxData = max.ToString().ToUtf8Bytes();
_stepData = step.ToString().ToUtf8Bytes();
_valueData = value.ToString().ToUtf8Bytes();
_extraClassesData = extraClasses.ToUtf8Bytes();
_hxAttrsData = hxAttrs.ToUtf8Bytes();
_labelData = string.IsNullOrEmpty(label)
? []
: $"""<label for="{id}" class="text-sm font-medium leading-none">{label}</label>""".ToUtf8Bytes();
_descriptionData = string.IsNullOrEmpty(description)
? []
: $"""<p class="text-xs text-muted-foreground">{description}</p>""".ToUtf8Bytes();
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderName(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_nameData);
protected override void RenderMin(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_minData);
protected override void RenderMax(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_maxData);
protected override void RenderStep(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_stepData);
protected override void RenderValue(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_valueData);
protected override void RenderLabel(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_labelData);
protected override void RenderDescription(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_descriptionData);
protected override void RenderExtraClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_extraClassesData);
protected override void RenderHxAttrs(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_hxAttrsData);
}
Htmx.ApiDemo/Templates/Components/Switch.htmx
+10
View File
@@ -0,0 +1,10 @@
<label class="inline-flex items-center gap-3 cursor-pointer">
<input type="checkbox" id="$$Id$$" name="$$Name$$" $$Checked$$
value="true" class="sr-only switch-checkbox" />
<span class="switch-track relative inline-flex h-6 w-11 shrink-0 items-center rounded-full
bg-input transition-colors duration-200">
<span class="switch-thumb pointer-events-none block h-5 w-5 rounded-full bg-white
shadow-lg ring-0 transition-transform duration-200 translate-x-0.5"></span>
</span>
$$Label$$
</label>
Htmx.ApiDemo/Templates/Components/Switch.htmx.cs
+32
View File
@@ -0,0 +1,32 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Switch (toggle). Rendered as a styled checkbox.
/// JS in components.js handles the visual on/off state.
/// </summary>
public sealed class Switch : SwitchBase
{
private readonly byte[] _idData;
private readonly byte[] _nameData;
private readonly byte[] _checkedData;
private readonly byte[] _labelData;
public Switch(
string id,
string label = "",
string name = "",
bool isChecked = false)
{
_idData = id.ToUtf8Bytes();
_nameData = (string.IsNullOrEmpty(name) ? id : name).ToUtf8Bytes();
_checkedData = (isChecked ? "checked" : "").ToUtf8Bytes();
_labelData = string.IsNullOrEmpty(label)
? []
: $"""<span class="text-sm font-medium leading-none">{label}</span>""".ToUtf8Bytes();
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderName(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_nameData);
protected override void RenderChecked(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_checkedData);
protected override void RenderLabel(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_labelData);
}
Htmx.ApiDemo/Templates/Components/Table.htmx
+14
View File
@@ -0,0 +1,14 @@
<div class="w-full overflow-auto rounded-md border border-border">
<table class="w-full caption-bottom text-sm">
$$Caption$$
<thead>
<tr class="border-b border-border bg-muted/50 transition-colors">
$$Headers$$
</tr>
</thead>
<tbody class="divide-y divide-border">
$$Rows$$
</tbody>
$$Footer$$
</table>
</div>
Htmx.ApiDemo/Templates/Components/Table.htmx.cs
+50
View File
@@ -0,0 +1,50 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Table component.
/// Headers: column header strings.
/// Rows: each row is an IEnumerable of cell strings.
/// Caption and Footer are optional.
/// </summary>
public sealed class Table : TableBase
{
private readonly byte[] _captionData;
private readonly byte[] _headersData;
private readonly byte[] _rowsData;
private readonly byte[] _footerData;
public Table(
IEnumerable<string> headers,
IEnumerable<IEnumerable<string>> rows,
string caption = "",
string footer = "")
{
_captionData = string.IsNullOrEmpty(caption)
? []
: $"""<caption class="mt-4 text-sm text-muted-foreground">{caption}</caption>""".ToUtf8Bytes();
var hSb = new System.Text.StringBuilder();
foreach (var h in headers)
hSb.Append($"""<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">{h}</th>""");
_headersData = hSb.ToString().ToUtf8Bytes();
var rSb = new System.Text.StringBuilder();
foreach (var row in rows)
{
rSb.Append("""<tr class="border-b border-border transition-colors hover:bg-muted/50">""");
foreach (var cell in row)
rSb.Append($"""<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">{cell}</td>""");
rSb.Append("</tr>");
}
_rowsData = rSb.ToString().ToUtf8Bytes();
_footerData = string.IsNullOrEmpty(footer)
? []
: $"""<tfoot><tr class="border-t border-border font-medium"><td colspan="99" class="p-4">{footer}</td></tr></tfoot>""".ToUtf8Bytes();
}
protected override void RenderCaption(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_captionData);
protected override void RenderHeaders(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_headersData);
protected override void RenderRows(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_rowsData);
protected override void RenderFooter(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_footerData);
}
Htmx.ApiDemo/Templates/Components/Tabs.htmx
+7
View File
@@ -0,0 +1,7 @@
<div class="tabs-root w-full" id="tabs-$$Id$$">
<div class="inline-flex h-10 w-full items-center justify-start rounded-md bg-muted p-1 text-muted-foreground"
role="tablist">
$$TabsList$$
</div>
$$TabsPanels$$
</div>
Htmx.ApiDemo/Templates/Components/Tabs.htmx.cs
+54
View File
@@ -0,0 +1,54 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Tabs component. Tabs are activated client-side via components.js.
/// Pass a list of (Id, Label, Content) tuples.
/// </summary>
public sealed class Tabs : TabsBase
{
private readonly byte[] _idData;
private readonly byte[] _tabsListData;
private readonly byte[] _tabsPanelsData;
private const string TriggerBase =
"tabs-trigger inline-flex items-center justify-center whitespace-nowrap rounded-sm " +
"px-3 py-1.5 text-sm font-medium ring-offset-background transition-all " +
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
"focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
private const string PanelBase =
"tabs-panel mt-2 ring-offset-background " +
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
public Tabs(string id, IEnumerable<(string Id, string Label, string Content)> tabs)
{
_idData = id.ToUtf8Bytes();
var tabList = tabs.ToList();
var triggerSb = new System.Text.StringBuilder();
var panelSb = new System.Text.StringBuilder();
foreach (var (tabId, label, content) in tabList)
{
triggerSb.Append($"""
<button type="button" role="tab" aria-selected="false" aria-controls="tabpanel-{tabId}"
class="{TriggerBase}">
{label}
</button>
""");
panelSb.Append($"""
<div id="tabpanel-{tabId}" role="tabpanel" class="{PanelBase}">
{content}
</div>
""");
}
_tabsListData = triggerSb.ToString().ToUtf8Bytes();
_tabsPanelsData = panelSb.ToString().ToUtf8Bytes();
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderTabsList(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_tabsListData);
protected override void RenderTabsPanels(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_tabsPanelsData);
}
Htmx.ApiDemo/Templates/Components/Textarea.htmx
+15
View File
@@ -0,0 +1,15 @@
<div class="flex flex-col gap-1.5">
$$Label$$
<textarea
id="$$Id$$"
name="$$Name$$"
rows="$$Rows$$"
placeholder="$$Placeholder$$"
class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm
ring-offset-background placeholder:text-muted-foreground
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
resize-y min-h-20 $$ExtraClasses$$"
$$HxAttrs$$>$$DefaultValue$$</textarea>
$$Description$$
</div>
Htmx.ApiDemo/Templates/Components/Textarea.htmx.cs
+55
View File
@@ -0,0 +1,55 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Textarea component with optional label and description.
/// </summary>
public sealed class Textarea : TextareaBase
{
private readonly byte[] _idData;
private readonly byte[] _nameData;
private readonly byte[] _rowsData;
private readonly byte[] _placeholderData;
private readonly byte[] _labelData;
private readonly byte[] _descriptionData;
private readonly byte[] _defaultValueData;
private readonly byte[] _extraClassesData;
private readonly byte[] _hxAttrsData;
public Textarea(
string id,
string name = "",
string placeholder = "",
string label = "",
string description = "",
string defaultValue = "",
string extraClasses = "",
string hxAttrs = "",
int rows = 4)
{
_idData = id.ToUtf8Bytes();
_nameData = (string.IsNullOrEmpty(name) ? id : name).ToUtf8Bytes();
_rowsData = rows.ToString().ToUtf8Bytes();
_placeholderData = placeholder.ToUtf8Bytes();
_extraClassesData = extraClasses.ToUtf8Bytes();
_hxAttrsData = hxAttrs.ToUtf8Bytes();
_defaultValueData = defaultValue.ToUtf8Bytes();
_labelData = string.IsNullOrEmpty(label)
? []
: $"""<label for="{id}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{label}</label>""".ToUtf8Bytes();
_descriptionData = string.IsNullOrEmpty(description)
? []
: $"""<p class="text-xs text-muted-foreground">{description}</p>""".ToUtf8Bytes();
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderName(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_nameData);
protected override void RenderRows(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_rowsData);
protected override void RenderPlaceholder(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_placeholderData);
protected override void RenderLabel(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_labelData);
protected override void RenderDescription(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_descriptionData);
protected override void RenderDefaultValue(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_defaultValueData);
protected override void RenderExtraClasses(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_extraClassesData);
protected override void RenderHxAttrs(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_hxAttrsData);
}
Htmx.ApiDemo/Templates/Components/Toast.htmx
+18
View File
@@ -0,0 +1,18 @@
<div class="toast-item pointer-events-auto relative flex w-full items-center justify-between
space-x-4 overflow-hidden rounded-md border border-border bg-background p-4
shadow-lg transition-all $$ExtraClasses$$"
role="alert">
<div class="grid gap-1">
$$Title$$
$$Description$$
</div>
<button type="button"
class="toast-close inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md
text-muted-foreground hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
aria-label="Dismiss">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
</svg>
</button>
</div>
Htmx.ApiDemo/Templates/Components/Toast.htmx.cs
+34
View File
@@ -0,0 +1,34 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// shadcn-style Toast notification. Typically created dynamically via window.showToast(),
/// but can also be server-rendered and injected via htmx.
/// </summary>
public sealed class Toast : ToastBase
{
private static readonly Dictionary<string, string> VariantClasses = new()
{
["default"] = "",
["destructive"] = "border-destructive text-destructive",
};
private readonly byte[] _titleData;
private readonly byte[] _descriptionData;
private readonly byte[] _extraClassesData;
public Toast(
string title,
string description = "",
string variant = "default")
{
_titleData = $"""<div class="text-sm font-semibold">{title}</div>""".ToUtf8Bytes();
_descriptionData = string.IsNullOrEmpty(description)
? []
: $"""<div class="text-sm opacity-90">{description}</div>""".ToUtf8Bytes();
_extraClassesData = VariantClasses.GetValueOrDefault(variant, "").ToUtf8Bytes();
}
protected override void RenderTitle(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_titleData);
protected override void RenderDescription(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_descriptionData);
protected override void RenderExtraClasses(HtmxRenderContext ctx)=> ctx.Writer.WriteUtf8(_extraClassesData);
}
Htmx.ApiDemo/Templates/Components/ToastViewport.htmx
+4
View File
@@ -0,0 +1,4 @@
<div class="fixed bottom-4 right-4 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px] pointer-events-none toast-viewport"
id="$$Id$$">
$$Toasts$$
</div>
Htmx.ApiDemo/Templates/Components/ToastViewport.htmx.cs
+20
View File
@@ -0,0 +1,20 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// Fixed viewport container for toast notifications.
/// Place once in the page (or layout). Toasts appear via window.showToast() from components.js.
/// </summary>
public sealed class ToastViewport : ToastViewportBase
{
private readonly byte[] _idData;
private readonly byte[] _toastsData;
public ToastViewport(string id = "toast-viewport")
{
_idData = id.ToUtf8Bytes();
_toastsData = [];
}
protected override void RenderId(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_idData);
protected override void RenderToasts(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_toastsData);
}
Htmx.ApiDemo/Templates/Components/Tooltip.htmx
+9
View File
@@ -0,0 +1,9 @@
<span class="group relative inline-flex items-center">
$$Trigger$$
<span class="pointer-events-none absolute $$Position$$ z-50 w-max max-w-xs
rounded-md bg-popover px-3 py-1.5 text-xs text-popover-foreground
shadow-md border border-border whitespace-nowrap
opacity-0 group-hover:opacity-100 transition-opacity duration-150">
$$Text$$
</span>
</span>
Htmx.ApiDemo/Templates/Components/Tooltip.htmx.cs
+36
View File
@@ -0,0 +1,36 @@
namespace Htmx.ApiDemo.Templates.Components;
/// <summary>
/// CSS-only Tooltip using group-hover. Wraps a trigger element.
/// Position: "top" | "bottom" | "left" | "right" (default: top)
/// </summary>
public sealed class Tooltip : TooltipBase
{
private static readonly Dictionary<string, string> PositionClasses = new()
{
["top"] = "bottom-full left-1/2 -translate-x-1/2 mb-2",
["bottom"] = "top-full left-1/2 -translate-x-1/2 mt-2",
["left"] = "right-full top-1/2 -translate-y-1/2 mr-2",
["right"] = "left-full top-1/2 -translate-y-1/2 ml-2",
};
private readonly byte[] _triggerData;
private readonly byte[] _textData;
private readonly byte[] _positionData;
public Tooltip(string text, IHtmxComponent trigger, string position = "top")
{
_textData = text.ToUtf8Bytes();
_positionData = PositionClasses.GetValueOrDefault(position, PositionClasses["top"]).ToUtf8Bytes();
var bufferWriter = new System.IO.Pipelines.Pipe().Writer;
// Render trigger to bytes via a simple ArrayBufferWriter
var writer = new System.Buffers.ArrayBufferWriter<byte>();
trigger.Render(new HtmxRenderContext(writer));
_triggerData = writer.WrittenSpan.ToArray();
}
protected override void RenderTrigger(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_triggerData);
protected override void RenderText(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_textData);
protected override void RenderPosition(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_positionData);
}
Htmx.ApiDemo/Templates/UiDemo.htmx
+252
View File
@@ -65,4 +65,256 @@
</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>
Htmx.ApiDemo/Templates/UiDemo.htmx.cs
+296 -9
View File
@@ -6,6 +6,7 @@ namespace Htmx.ApiDemo.Templates;
public sealed class UiDemo : UiDemoBase
{
// ── Buttons ──────────────────────────────────────────────────────────
public IHtmxComponent BtnDefault { get; }
public IHtmxComponent BtnDestructive { get; }
public IHtmxComponent BtnOutline { get; }
@@ -15,19 +16,106 @@ public sealed class UiDemo : UiDemoBase
public IHtmxComponent BtnSm { get; }
public IHtmxComponent BtnLg { get; }
// ── Inputs ───────────────────────────────────────────────────────────
public IHtmxComponent InputText { get; }
public IHtmxComponent InputEmail { get; }
public IHtmxComponent InputPassword { get; }
public IHtmxComponent InputSearch { get; }
public IHtmxComponent SelectDemo { get; }
public IHtmxComponent CalendarDemo { get; }
public IHtmxComponent CalendarRangeDemo{ get; }
// ── Select / Calendar / TimePicker ───────────────────────────────────
public IHtmxComponent SelectDemo { get; }
public IHtmxComponent CalendarDemo { get; }
public IHtmxComponent CalendarRangeDemo { get; }
public IHtmxComponent TimePickerDemo { get; }
public IHtmxComponent TimePicker12hDemo { get; }
// ── Badge ─────────────────────────────────────────────────────────────
public IHtmxComponent BadgeDefault { get; }
public IHtmxComponent BadgeSecondary { get; }
public IHtmxComponent BadgeDestructive { get; }
public IHtmxComponent BadgeOutline { get; }
// ── Card ──────────────────────────────────────────────────────────────
public IHtmxComponent CardDemo { get; }
// ── Separator ─────────────────────────────────────────────────────────
public IHtmxComponent SeparatorH { get; }
public IHtmxComponent SeparatorV { get; }
// ── Skeleton ──────────────────────────────────────────────────────────
public IHtmxComponent SkeletonTitle { get; }
public IHtmxComponent SkeletonLine1 { get; }
public IHtmxComponent SkeletonLine2 { get; }
public IHtmxComponent SkeletonAvatar { get; }
// ── Avatar ────────────────────────────────────────────────────────────
public IHtmxComponent AvatarSm { get; }
public IHtmxComponent AvatarDefault { get; }
public IHtmxComponent AvatarLg { get; }
public IHtmxComponent AvatarImg { get; }
// ── Progress ──────────────────────────────────────────────────────────
public IHtmxComponent Progress25 { get; }
public IHtmxComponent Progress60 { get; }
public IHtmxComponent Progress100 { get; }
// ── Alert ─────────────────────────────────────────────────────────────
public IHtmxComponent AlertDefault { get; }
public IHtmxComponent AlertDestructive { get; }
// ── Breadcrumb ────────────────────────────────────────────────────────
public IHtmxComponent BreadcrumbDemo { get; }
// ── Checkbox ──────────────────────────────────────────────────────────
public IHtmxComponent CheckboxAccept { get; }
public IHtmxComponent CheckboxChecked { get; }
// ── RadioGroup ────────────────────────────────────────────────────────
public IHtmxComponent RadioGroupCol { get; }
public IHtmxComponent RadioGroupRow { get; }
// ── Switch ────────────────────────────────────────────────────────────
public IHtmxComponent SwitchOff { get; }
public IHtmxComponent SwitchOn { get; }
// ── Textarea ──────────────────────────────────────────────────────────
public IHtmxComponent TextareaDemo { get; }
// ── Slider ────────────────────────────────────────────────────────────
public IHtmxComponent SliderDemo { get; }
// ── FileInput ─────────────────────────────────────────────────────────
public IHtmxComponent FileInputDemo { get; }
// ── Table ─────────────────────────────────────────────────────────────
public IHtmxComponent TableDemo { get; }
// ── Pagination ────────────────────────────────────────────────────────
public IHtmxComponent PaginationDemo { get; }
// ── Tabs ──────────────────────────────────────────────────────────────
public IHtmxComponent TabsDemo { get; }
// ── Accordion ─────────────────────────────────────────────────────────
public IHtmxComponent AccordionDemo { get; }
// ── Tooltip ───────────────────────────────────────────────────────────
public IHtmxComponent TooltipTop { get; }
public IHtmxComponent TooltipBottom { get; }
public IHtmxComponent TooltipRight { get; }
// ── Dialog ────────────────────────────────────────────────────────────
public IHtmxComponent DialogDemo { get; }
// ── Dropdown ──────────────────────────────────────────────────────────
public IHtmxComponent DropdownDemo { get; }
// ── Toast Viewport ────────────────────────────────────────────────────
public IHtmxComponent ToastViewportDemo { get; }
public UiDemo()
{
// Buttons
BtnDefault = new Button("Default");
BtnDestructive = new Button("Destructive", variant: "destructive");
BtnOutline = new Button("Outline", variant: "outline");
@@ -37,12 +125,14 @@ public sealed class UiDemo : UiDemoBase
BtnSm = new Button("Small", size: "sm");
BtnLg = new Button("Large", size: "lg");
// Inputs
InputText = new Input("username", label: "Username", placeholder: "Enter username");
InputEmail = new Input("email", inputType: "email", label: "Email", placeholder: "you@example.com");
InputPassword = new Input("password", inputType: "password", label: "Password", placeholder: "••••••••");
InputSearch = new Input("search", inputType: "search", label: "Search", placeholder: "Search…",
hxAttrs: "hx-get=\"/search\" hx-trigger=\"keyup changed delay:300ms\" hx-target=\"#search-results\"");
// Select / Calendar / TimePicker
SelectDemo = new Select(
id: "framework",
label: "Framework",
@@ -52,9 +142,151 @@ public sealed class UiDemo : UiDemoBase
CalendarDemo = new Calendar(id: "demo-cal", name: "demo-date");
CalendarRangeDemo = new CalendarRange(id: "demo-calr", name: "demo-range");
TimePickerDemo = new TimePicker(name: "time-24h", label: "Time (24h)");
TimePicker12hDemo = new TimePicker(name: "time-12h", label: "Time (12h)", use12h: true);
// Badge
BadgeDefault = new Badge("Default");
BadgeSecondary = new Badge("Secondary", variant: "secondary");
BadgeDestructive = new Badge("Destructive", variant: "destructive");
BadgeOutline = new Badge("Outline", variant: "outline");
// Card
CardDemo = new Card(
title: "Component Card",
description: "A reusable card surface with header and footer.",
content: "<p class=\"text-sm text-muted-foreground\">Cards group related content and provide a contained, elevated surface for information.</p>",
footer: "<button type=\"button\" class=\"inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground h-9 px-4 text-sm font-medium hover:bg-primary/90 transition-colors\">Action</button>");
// Separator
SeparatorH = new Separator();
SeparatorV = new Separator(orientation: "vertical");
// Skeleton
SkeletonTitle = new Skeleton("h-5 w-48");
SkeletonLine1 = new Skeleton("h-4 w-full");
SkeletonLine2 = new Skeleton("h-4 w-3/4");
SkeletonAvatar = new Skeleton("h-10 w-10 rounded-full");
// Avatar
AvatarSm = new Avatar("SM", size: "sm");
AvatarDefault = new Avatar("JD");
AvatarLg = new Avatar("AB", size: "lg");
AvatarImg = new Avatar("GitHub", src: "https://github.com/github.png", size: "default");
// Progress
Progress25 = new Progress(25);
Progress60 = new Progress(60);
Progress100 = new Progress(100);
// Alert
AlertDefault = new Alert("Information", description: "This is an informational alert with a default style.");
AlertDestructive = new Alert("Error", description: "Something went wrong. Please check your input.", variant: "destructive");
// Breadcrumb
BreadcrumbDemo = new Breadcrumb([
("Home", "/"),
("Components", "/components"),
("UI Demo", ""),
]);
// Checkbox
CheckboxAccept = new Checkbox("accept-terms", label: "Accept terms and conditions");
CheckboxChecked = new Checkbox("newsletter", label: "Subscribe to newsletter", @checked: true);
// RadioGroup
RadioGroupCol = new RadioGroup(
name: "plan-v",
label: "Plan (vertical)",
options: [
("starter", "Starter", true),
("pro", "Pro", false),
("enterprise", "Enterprise", false),
]);
RadioGroupRow = new RadioGroup(
name: "size-h",
label: "Size (horizontal)",
direction: "flex-row",
options: [
("sm", "SM", true),
("md", "MD", false),
("lg", "LG", false),
]);
// Switch
SwitchOff = new Switch("notif-off", label: "Notifications");
SwitchOn = new Switch("darkmode", label: "Dark mode", isChecked: true);
// Textarea
TextareaDemo = new Textarea(
id: "bio",
label: "Bio",
placeholder: "Tell us about yourself…",
description: "Max 200 characters.");
// Slider
SliderDemo = new Slider(id: "volume", label: "Volume", value: 40, description: "Drag to adjust");
// FileInput
FileInputDemo = new FileInput(
id: "avatar-upload",
label: "Profile picture",
accept: "image/*",
description: "PNG, JPG or GIF up to 2 MB.");
// Table
TableDemo = new Table(
headers: ["Name", "Role", "Status"],
rows: [
["Alice", "Admin", "Active"],
["Bob", "Editor", "Active"],
["Charlie", "Viewer", "Inactive"],
],
caption: "Team members");
// Pagination
PaginationDemo = new Pagination(current: 3, total: 7, urlPattern: "/ui-demo?page={0}");
// Tabs
TabsDemo = new Tabs("demo", [
("overview", "Overview", "<p class=\"text-sm text-muted-foreground\">This is the overview tab content.</p>"),
("settings", "Settings", "<p class=\"text-sm text-muted-foreground\">Manage your settings here.</p>"),
("billing", "Billing", "<p class=\"text-sm text-muted-foreground\">View billing information.</p>"),
]);
// Accordion
AccordionDemo = new Accordion("demo-acc", [
("What is htmx?", "htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML."),
("Is it production ready?", "Yes — htmx is used by thousands of projects in production worldwide."),
("Does it replace React?", "htmx is a different tool suited to server-driven UIs. Use whatever fits your team best."),
], openIndex: 0);
// Tooltip
TooltipTop = new Tooltip("Top tooltip", new Button("Hover me"), position: "top");
TooltipBottom = new Tooltip("Bottom tooltip", new Button("Bottom", variant: "secondary"), position: "bottom");
TooltipRight = new Tooltip("Right tooltip", new Button("Right", variant: "outline"), position: "right");
// Dialog
DialogDemo = new Dialog(
id: "demo-dialog",
title: "Are you sure?",
description: "This action cannot be undone.",
content: "Please confirm that you want to proceed with this operation.",
footer: "<button type=\"button\" data-dialog-close class=\"inline-flex items-center justify-center rounded-md border border-input bg-background h-9 px-4 text-sm font-medium hover:bg-accent transition-colors\">Cancel</button>" +
"<button type=\"button\" data-dialog-close class=\"inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground h-9 px-4 text-sm font-medium hover:bg-primary/90 transition-colors\">Confirm</button>");
// Dropdown
DropdownDemo = new DropdownMenu(
trigger: new Button("Options ▾", variant: "outline"),
items: [
("Edit", "/edit", false),
("Duplicate", "/dup", false),
("", "", true), // separator
("Delete", "/delete", false),
]);
// Toast Viewport
ToastViewportDemo = new ToastViewport();
}
protected override void RenderBtnDefault(HtmxRenderContext ctx) => BtnDefault.Render(ctx);
@@ -71,11 +303,66 @@ public sealed class UiDemo : UiDemoBase
protected override void RenderInputPassword(HtmxRenderContext ctx) => InputPassword.Render(ctx);
protected override void RenderInputSearch(HtmxRenderContext ctx) => InputSearch.Render(ctx);
protected override void RenderSelectDemo(HtmxRenderContext ctx) => SelectDemo.Render(ctx);
protected override void RenderCalendarDemo(HtmxRenderContext ctx) => CalendarDemo.Render(ctx);
protected override void RenderCalendarRangeDemo(HtmxRenderContext ctx) => CalendarRangeDemo.Render(ctx);
protected override void RenderTimePickerDemo(HtmxRenderContext ctx) => TimePickerDemo.Render(ctx);
protected override void RenderTimePicker12hDemo(HtmxRenderContext ctx) => TimePicker12hDemo.Render(ctx);
protected override void RenderSelectDemo(HtmxRenderContext ctx) => SelectDemo.Render(ctx);
protected override void RenderCalendarDemo(HtmxRenderContext ctx) => CalendarDemo.Render(ctx);
protected override void RenderCalendarRangeDemo(HtmxRenderContext ctx) => CalendarRangeDemo.Render(ctx);
protected override void RenderTimePickerDemo(HtmxRenderContext ctx) => TimePickerDemo.Render(ctx);
protected override void RenderTimePicker12hDemo(HtmxRenderContext ctx) => TimePicker12hDemo.Render(ctx);
protected override void RenderBadgeDefault(HtmxRenderContext ctx) => BadgeDefault.Render(ctx);
protected override void RenderBadgeSecondary(HtmxRenderContext ctx) => BadgeSecondary.Render(ctx);
protected override void RenderBadgeDestructive(HtmxRenderContext ctx) => BadgeDestructive.Render(ctx);
protected override void RenderBadgeOutline(HtmxRenderContext ctx) => BadgeOutline.Render(ctx);
protected override void RenderCardDemo(HtmxRenderContext ctx) => CardDemo.Render(ctx);
protected override void RenderSeparatorH(HtmxRenderContext ctx) => SeparatorH.Render(ctx);
protected override void RenderSeparatorV(HtmxRenderContext ctx) => SeparatorV.Render(ctx);
protected override void RenderSkeletonTitle(HtmxRenderContext ctx) => SkeletonTitle.Render(ctx);
protected override void RenderSkeletonLine1(HtmxRenderContext ctx) => SkeletonLine1.Render(ctx);
protected override void RenderSkeletonLine2(HtmxRenderContext ctx) => SkeletonLine2.Render(ctx);
protected override void RenderSkeletonAvatar(HtmxRenderContext ctx) => SkeletonAvatar.Render(ctx);
protected override void RenderAvatarSm(HtmxRenderContext ctx) => AvatarSm.Render(ctx);
protected override void RenderAvatarDefault(HtmxRenderContext ctx) => AvatarDefault.Render(ctx);
protected override void RenderAvatarLg(HtmxRenderContext ctx) => AvatarLg.Render(ctx);
protected override void RenderAvatarImg(HtmxRenderContext ctx) => AvatarImg.Render(ctx);
protected override void RenderProgress25(HtmxRenderContext ctx) => Progress25.Render(ctx);
protected override void RenderProgress60(HtmxRenderContext ctx) => Progress60.Render(ctx);
protected override void RenderProgress100(HtmxRenderContext ctx) => Progress100.Render(ctx);
protected override void RenderAlertDefault(HtmxRenderContext ctx) => AlertDefault.Render(ctx);
protected override void RenderAlertDestructive(HtmxRenderContext ctx) => AlertDestructive.Render(ctx);
protected override void RenderBreadcrumbDemo(HtmxRenderContext ctx) => BreadcrumbDemo.Render(ctx);
protected override void RenderCheckboxAccept(HtmxRenderContext ctx) => CheckboxAccept.Render(ctx);
protected override void RenderCheckboxChecked(HtmxRenderContext ctx) => CheckboxChecked.Render(ctx);
protected override void RenderRadioGroupCol(HtmxRenderContext ctx) => RadioGroupCol.Render(ctx);
protected override void RenderRadioGroupRow(HtmxRenderContext ctx) => RadioGroupRow.Render(ctx);
protected override void RenderSwitchOff(HtmxRenderContext ctx) => SwitchOff.Render(ctx);
protected override void RenderSwitchOn(HtmxRenderContext ctx) => SwitchOn.Render(ctx);
protected override void RenderTextareaDemo(HtmxRenderContext ctx) => TextareaDemo.Render(ctx);
protected override void RenderSliderDemo(HtmxRenderContext ctx) => SliderDemo.Render(ctx);
protected override void RenderFileInputDemo(HtmxRenderContext ctx)=> FileInputDemo.Render(ctx);
protected override void RenderTableDemo(HtmxRenderContext ctx) => TableDemo.Render(ctx);
protected override void RenderPaginationDemo(HtmxRenderContext ctx)=> PaginationDemo.Render(ctx);
protected override void RenderTabsDemo(HtmxRenderContext ctx) => TabsDemo.Render(ctx);
protected override void RenderAccordionDemo(HtmxRenderContext ctx)=> AccordionDemo.Render(ctx);
protected override void RenderTooltipTop(HtmxRenderContext ctx) => TooltipTop.Render(ctx);
protected override void RenderTooltipBottom(HtmxRenderContext ctx) => TooltipBottom.Render(ctx);
protected override void RenderTooltipRight(HtmxRenderContext ctx) => TooltipRight.Render(ctx);
protected override void RenderDialogDemo(HtmxRenderContext ctx) => DialogDemo.Render(ctx);
protected override void RenderDropdownDemo(HtmxRenderContext ctx) => DropdownDemo.Render(ctx);
protected override void RenderToastViewportDemo(HtmxRenderContext ctx) => ToastViewportDemo.Render(ctx);
}