+@* ── shadcn/ui-style time picker with scrollable columns (JS-driven) ── *@
+@{
+ var use12 = Use12Hour;
+ var minStep = MinuteStep < 1 ? 1 : MinuteStep;
+ var selHour = 0;
+ var selMinute = 0;
+ var isPm = false;
+
+ if (SelectedTime is { } t)
+ {
+ if (use12)
+ {
+ isPm = t.Hour >= 12;
+ selHour = t.Hour % 12;
+ selMinute = t.Minute;
+ }
+ else
+ {
+ selHour = t.Hour;
+ selMinute = t.Minute;
+ }
+ }
+}
+
+
+
@* ── Hour column ── *@
Hr
@code {
- ///
The currently selected time (two-way bindable).
+ ///
The currently selected time (for initial render).
[Parameter] public TimeOnly? SelectedTime { get; set; }
- [Parameter] public EventCallback
SelectedTimeChanged { get; set; }
/// Use 12-hour format with AM/PM. Default is false (24-hour).
[Parameter] public bool Use12Hour { get; set; }
@@ -73,74 +103,13 @@
/// Minute step interval. Default is 1.
[Parameter] public int MinuteStep { get; set; } = 1;
+ /// The id of the linked hidden input to sync time value to.
+ [Parameter] public string? LinkedInputId { get; set; }
+
/// Any extra HTML attributes.
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary? AdditionalAttributes { get; set; }
- private int _selectedHour;
- private int _selectedMinute;
- private bool _isPm;
- private bool _use12Hour;
- private int _minuteStep = 1;
-
- protected override void OnInitialized()
- {
- _use12Hour = Use12Hour;
- _minuteStep = MinuteStep < 1 ? 1 : MinuteStep;
- ApplyFromValue();
- }
-
- protected override void OnParametersSet()
- {
- _use12Hour = Use12Hour;
- _minuteStep = MinuteStep < 1 ? 1 : MinuteStep;
- ApplyFromValue();
- }
-
- private void ApplyFromValue()
- {
- if (SelectedTime is { } t)
- {
- if (_use12Hour)
- {
- _isPm = t.Hour >= 12;
- _selectedHour = t.Hour % 12;
- _selectedMinute = t.Minute;
- }
- else
- {
- _selectedHour = t.Hour;
- _selectedMinute = t.Minute;
- }
- }
- }
-
- private async Task SelectHour(int hour)
- {
- _selectedHour = hour;
- await EmitValue();
- }
-
- private async Task SelectMinute(int minute)
- {
- _selectedMinute = minute;
- await EmitValue();
- }
-
- private async Task SelectPeriod(bool isPm)
- {
- _isPm = isPm;
- await EmitValue();
- }
-
- private async Task EmitValue()
- {
- var hour = _use12Hour ? (_selectedHour % 12) + (_isPm ? 12 : 0) : _selectedHour;
- var time = new TimeOnly(hour, _selectedMinute);
- SelectedTime = time;
- await SelectedTimeChanged.InvokeAsync(time);
- }
-
private static string TimeItemClass(bool isSelected)
{
const string baseClass = "h-9 w-full inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer";
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/FormModelBinder.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/FormModelBinder.cs
new file mode 100644
index 0000000..6b5b107
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/FormModelBinder.cs
@@ -0,0 +1,55 @@
+using System.Globalization;
+using System.Reflection;
+using Microsoft.AspNetCore.Http;
+
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public static class FormModelBinder
+{
+ public static TModel Bind(IFormCollection form) where TModel : new()
+ {
+ var model = new TModel();
+ var props = typeof(TModel).GetProperties(BindingFlags.Public | BindingFlags.Instance)
+ .Where(p => p.CanWrite);
+
+ foreach (var prop in props)
+ {
+ var key = form.Keys.FirstOrDefault(k =>
+ string.Equals(k, prop.Name, StringComparison.OrdinalIgnoreCase));
+
+ if (key is null) continue;
+
+ var raw = form[key].ToString();
+ var value = ConvertValue(raw, prop.PropertyType);
+ if (value is not null)
+ prop.SetValue(model, value);
+ }
+
+ return model;
+ }
+
+ private static object? ConvertValue(string raw, Type target)
+ {
+ var underlying = Nullable.GetUnderlyingType(target);
+ var isNullable = underlying is not null;
+ var type = underlying ?? target;
+
+ if (string.IsNullOrWhiteSpace(raw))
+ return isNullable ? null : (type == typeof(string) ? "" : null);
+
+ if (type == typeof(string)) return raw;
+ if (type == typeof(int)) return int.TryParse(raw, out var i) ? i : null;
+ if (type == typeof(long)) return long.TryParse(raw, out var l) ? l : null;
+ if (type == typeof(double)) return double.TryParse(raw, CultureInfo.InvariantCulture, out var d) ? d : null;
+ if (type == typeof(decimal)) return decimal.TryParse(raw, CultureInfo.InvariantCulture, out var m) ? m : null;
+ if (type == typeof(float)) return float.TryParse(raw, CultureInfo.InvariantCulture, out var f) ? f : null;
+ if (type == typeof(bool)) return bool.TryParse(raw, out var b) ? b : raw == "on" || raw == "1";
+ if (type == typeof(DateTime)) return DateTime.TryParse(raw, CultureInfo.InvariantCulture, DateTimeStyles.None, out var dt) ? dt : null;
+ if (type == typeof(DateOnly)) return DateOnly.TryParse(raw, CultureInfo.InvariantCulture, DateTimeStyles.None, out var d2) ? d2 : null;
+ if (type == typeof(TimeOnly)) return TimeOnly.TryParse(raw, CultureInfo.InvariantCulture, out var t) ? t : null;
+ if (type == typeof(Guid)) return Guid.TryParse(raw, out var g) ? g : null;
+ if (type.IsEnum) return Enum.TryParse(type, raw, ignoreCase: true, out var e) ? e : null;
+
+ return null;
+ }
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidationRule.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidationRule.cs
new file mode 100644
index 0000000..5e0190b
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidationRule.cs
@@ -0,0 +1,71 @@
+using System.Text.RegularExpressions;
+
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public sealed class FormValidationRule
+{
+ public required string Field { get; init; }
+ public string? DisplayName { get; init; }
+ public bool Required { get; init; }
+ public int? MinLength { get; init; }
+ public int? MaxLength { get; init; }
+ public string? Pattern { get; init; }
+ public double? Min { get; init; }
+ public double? Max { get; init; }
+ public string? Message { get; init; }
+ public Func? Custom { get; init; }
+
+ public string? Validate(string? value)
+ {
+ var label = DisplayName ?? ToTitleCase(Field);
+ var v = value?.Trim() ?? "";
+
+ if (Required && string.IsNullOrWhiteSpace(v))
+ return $"{label} is required.";
+
+ if (string.IsNullOrWhiteSpace(v))
+ return null;
+
+ if (MinLength.HasValue && v.Length < MinLength.Value)
+ return $"{label} must be at least {MinLength.Value} characters.";
+
+ if (MaxLength.HasValue && v.Length > MaxLength.Value)
+ return $"{label} must be at most {MaxLength.Value} characters.";
+
+ if (Pattern is not null && !Regex.IsMatch(v, Pattern))
+ return Message ?? $"{label} is not in the correct format.";
+
+ if (Min.HasValue || Max.HasValue)
+ {
+ if (!double.TryParse(v, out var num))
+ return $"{label} must be a number.";
+ if (Min.HasValue && num < Min.Value)
+ return $"{label} must be at least {Min.Value}.";
+ if (Max.HasValue && num > Max.Value)
+ return $"{label} must be at most {Max.Value}.";
+ }
+
+ if (Custom is not null)
+ {
+ var customError = Custom(v);
+ if (customError is not null)
+ return customError;
+ }
+
+ return null;
+ }
+
+ private static string ToTitleCase(string field)
+ {
+ if (string.IsNullOrEmpty(field)) return field;
+ var sb = new System.Text.StringBuilder();
+ sb.Append(char.ToUpper(field[0]));
+ for (int i = 1; i < field.Length; i++)
+ {
+ if (char.IsUpper(field[i]))
+ sb.Append(' ');
+ sb.Append(field[i]);
+ }
+ return sb.ToString();
+ }
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidator.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidator.cs
new file mode 100644
index 0000000..7954105
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidator.cs
@@ -0,0 +1,55 @@
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public abstract class FormValidator
+{
+ private readonly List _rules = [];
+
+ public IReadOnlyList Rules => _rules;
+ public IEnumerable Fields => _rules.Select(r => r.Field);
+
+ protected void RuleFor(
+ string field,
+ string? displayName = null,
+ bool required = false,
+ int? minLength = null,
+ int? maxLength = null,
+ string? pattern = null,
+ double? min = null,
+ double? max = null,
+ string? message = null,
+ Func? custom = null)
+ {
+ _rules.Add(new FormValidationRule
+ {
+ Field = field,
+ DisplayName = displayName,
+ Required = required,
+ MinLength = minLength,
+ MaxLength = maxLength,
+ Pattern = pattern,
+ Min = min,
+ Max = max,
+ Message = message,
+ Custom = custom
+ });
+ }
+
+ public string? ValidateField(string field, string? value)
+ {
+ var rule = _rules.FirstOrDefault(r => r.Field == field);
+ return rule?.Validate(value);
+ }
+
+ public Dictionary ValidateAll(Func valueAccessor)
+ {
+ var errors = new Dictionary();
+ foreach (var rule in _rules)
+ {
+ var value = valueAccessor(rule.Field);
+ var error = rule.Validate(value);
+ if (error is not null)
+ errors[rule.Field] = error;
+ }
+ return errors;
+ }
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationExtensions.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationExtensions.cs
new file mode 100644
index 0000000..d0ea91f
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationExtensions.cs
@@ -0,0 +1,79 @@
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Routing;
+
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public static class HtmxFormValidationExtensions
+{
+ public static RouteGroupBuilder MapFormValidation(
+ this IEndpointRouteBuilder endpoints,
+ string basePath,
+ string successMessage = "✓ Form submitted successfully!",
+ Func? onSuccess = null)
+ where TValidator : FormValidator, new()
+ {
+ var validator = new TValidator();
+ return MapEndpoints(endpoints, basePath, validator, successMessage, onSuccess);
+ }
+
+ public static RouteGroupBuilder MapFormValidation(
+ this IEndpointRouteBuilder endpoints,
+ string basePath,
+ Func onSuccess,
+ string successMessage = "✓ Form submitted successfully!")
+ where TValidator : FormValidator, new()
+ where TModel : new()
+ {
+ var validator = new TValidator();
+ return MapEndpoints(endpoints, basePath, validator, successMessage, async ctx =>
+ {
+ var model = FormModelBinder.Bind(ctx.Request.Form);
+ await onSuccess(model);
+ });
+ }
+
+ private static RouteGroupBuilder MapEndpoints(
+ IEndpointRouteBuilder endpoints,
+ string basePath,
+ FormValidator validator,
+ string successMessage,
+ Func? onSuccess)
+ {
+ var group = endpoints.MapGroup(basePath);
+
+ group.MapPost("/validate", (HttpContext ctx) =>
+ {
+ var form = ctx.Request.Form;
+ var field = form["_field"].ToString();
+ var value = form.ContainsKey(field) ? form[field].ToString() : "";
+
+ var error = validator.ValidateField(field, value);
+ var html = HtmxFormValidationRenderer.FieldErrorFragment(field, error);
+
+ return Results.Content(html, "text/html");
+ }).DisableAntiforgery();
+
+ group.MapPost("/submit", async (HttpContext ctx) =>
+ {
+ var form = ctx.Request.Form;
+ var errors = validator.ValidateAll(f => form.ContainsKey(f) ? form[f].ToString() : "");
+
+ ctx.Response.ContentType = "text/html; charset=utf-8";
+
+ if (errors.Count > 0)
+ {
+ var html = HtmxFormValidationRenderer.ErrorResponse(validator.Fields, errors);
+ return Results.Content(html, "text/html");
+ }
+
+ if (onSuccess is not null)
+ await onSuccess(ctx);
+
+ var successHtml = HtmxFormValidationRenderer.SuccessResponse(validator.Fields, successMessage);
+ return Results.Content(successHtml, "text/html");
+ }).DisableAntiforgery();
+
+ return group;
+ }
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationRenderer.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationRenderer.cs
new file mode 100644
index 0000000..d5dff31
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationRenderer.cs
@@ -0,0 +1,62 @@
+using System.Net;
+
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public static class HtmxFormValidationRenderer
+{
+ private const string ErrorClasses = "text-[0.8rem] font-medium text-destructive";
+ private const string HiddenClass = "hidden";
+ private const string SuccessClasses =
+ "rounded-md border border-green-500/30 bg-green-500/10 p-3 text-sm text-green-600 dark:text-green-400";
+
+ public static string FieldErrorFragment(string field, string? error)
+ {
+ var safeField = WebUtility.HtmlEncode(field);
+ if (string.IsNullOrEmpty(error))
+ return $"";
+ var safeError = WebUtility.HtmlEncode(error);
+ return $"{safeError}
";
+ }
+
+ public static string OobFieldErrorFragment(string field, string? error)
+ {
+ var safeField = WebUtility.HtmlEncode(field);
+ var oobAttr = $"hx-swap-oob=\"outerHTML:[data-field-error='{safeField}']\"";
+ if (string.IsNullOrEmpty(error))
+ return $"";
+ var safeError = WebUtility.HtmlEncode(error);
+ return $"{safeError}
";
+ }
+
+ public static string ErrorResponse(
+ IEnumerable allFields,
+ Dictionary errors,
+ string resultDivId = "form-result")
+ {
+ var html = "";
+ foreach (var field in allFields)
+ {
+ errors.TryGetValue(field, out var err);
+ html += OobFieldErrorFragment(field, err) + "\n";
+ }
+ html += $"";
+ return html;
+ }
+
+ public static string SuccessResponse(
+ IEnumerable allFields,
+ string successMessage,
+ string resultDivId = "form-result",
+ string? testId = "success-message")
+ {
+ var html = "";
+ foreach (var field in allFields)
+ html += OobFieldErrorFragment(field, null) + "\n";
+ var testIdAttr = testId is not null ? $" data-testid=\"{testId}\"" : "";
+ html += $"";
+ html += $"
";
+ html += WebUtility.HtmlEncode(successMessage);
+ html += " ";
+ return html;
+ }
+}
diff --git a/Enciphered.Blazor.UIComponents/wwwroot/css/app.css b/Enciphered.Blazor.UIComponents/wwwroot/css/app.css
index 06f48ca..f824e97 100644
--- a/Enciphered.Blazor.UIComponents/wwwroot/css/app.css
+++ b/Enciphered.Blazor.UIComponents/wwwroot/css/app.css
@@ -1,2 +1,2 @@
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:var(--radius);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border-color);--color-input:var(--input);--color-ring:var(--ring);--color-sidebar:var(--sidebar-background);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--sidebar-width:16rem;--sidebar-width-icon:3rem}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.right-0{right:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-40{z-index:40}.z-50{z-index:50}.mx-2{margin-inline:calc(var(--spacing) * 2)}.my-2{margin-block:calc(var(--spacing) * 2)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-52{height:calc(var(--spacing) * 52)}.h-full{height:100%}.h-px{height:1px}.h-svh{height:100svh}.max-h-52{max-height:calc(var(--spacing) * 52)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-svh{min-height:100svh}.w-7{width:calc(var(--spacing) * 7)}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-top-left{transform-origin:0 0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-tr-md{border-top-right-radius:var(--radius-md)}.rounded-br-md{border-bottom-right-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-border{border-color:var(--color-border)}.border-destructive{border-color:var(--color-destructive)}.border-input{border-color:var(--color-input)}.border-sidebar-border{border-color:var(--color-sidebar-border)}.bg-accent{background-color:var(--color-accent)}.bg-background{background-color:var(--color-background)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-card{background-color:var(--color-card)}.bg-destructive{background-color:var(--color-destructive)}.bg-popover{background-color:var(--color-popover)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-sidebar{background-color:var(--color-sidebar)}.bg-sidebar-accent{background-color:var(--color-sidebar-accent)}.bg-sidebar-border{background-color:var(--color-sidebar-border)}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-8{padding-right:calc(var(--spacing) * 8)}.text-left{text-align:left}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--color-accent-foreground)}.text-card-foreground{color:var(--color-card-foreground)}.text-destructive{color:var(--color-destructive)}.text-destructive-foreground{color:var(--color-destructive-foreground)}.text-foreground{color:var(--color-foreground)}.text-muted-foreground,.text-muted-foreground\/40{color:var(--color-muted-foreground)}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--color-muted-foreground) 40%, transparent)}}.text-popover-foreground{color:var(--color-popover-foreground)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-sidebar-accent-foreground{color:var(--color-sidebar-accent-foreground)}.text-sidebar-foreground,.text-sidebar-foreground\/70{color:var(--color-sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.text-sidebar-foreground\/70{color:color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent)}}.underline-offset-4{text-underline-offset:4px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition-\[width\,transform\]{transition-property:width,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:mx-auto:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){margin-inline:auto}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:hidden:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){display:none}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:size-8:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:items-center:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){align-items:center}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:justify-center:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){justify-content:center}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:p-0:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){padding:calc(var(--spacing) * 0)}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:px-0:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){padding-inline:calc(var(--spacing) * 0)}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-destructive\/90:hover{background-color:var(--color-destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--color-destructive) 90%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--color-secondary) 80%, transparent)}}.hover\:bg-sidebar-accent:hover{background-color:var(--color-sidebar-accent)}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:text-sidebar-accent-foreground:hover{color:var(--color-sidebar-accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-destructive:focus-visible{--tw-ring-color:var(--color-destructive)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-sidebar-ring:focus-visible{--tw-ring-color:var(--color-sidebar-ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-\[data-slot\=card-action\]\:grid:has(:is()){display:grid}.has-\[data-slot\=card-action\]\:grid-cols-\[1fr_auto\]:has(:is()){grid-template-columns:1fr auto}.has-\[data-slot\=card-action\]\:items-center:has(:is()){align-items:center}@media (min-width:48rem){.md\:z-10{z-index:10}}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\>\[data-slot\=card-description\]\]\:col-span-full>[data-slot=card-description]{grid-column:1/-1}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(98.5% 0 0);--border-color:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--radius:.625rem;--sidebar-background:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(14.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(14.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(98.5% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(98.5% 0 0);--border-color:oklch(26.9% 0 0);--input:oklch(26.9% 0 0);--ring:oklch(43.9% 0 0);--sidebar-background:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(98.5% 0 0);--sidebar-primary-foreground:oklch(20.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(26.9% 0 0);--sidebar-ring:oklch(55.6% 0 0)}input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date]::-webkit-date-and-time-value{text-align:left}input[type=time]::-webkit-date-and-time-value{text-align:left}input[type=datetime-local]::-webkit-date-and-time-value{text-align:left}input[type=date],input[type=time],input[type=datetime-local]{color-scheme:light}.dark input[type=date],.dark input[type=time],.dark input[type=datetime-local]{color-scheme:dark}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}.scrollbar-thin::-webkit-scrollbar{width:6px}.scrollbar-thin::-webkit-scrollbar-track{background:0 0;border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--muted);border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--muted-foreground)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"
";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
\ No newline at end of file
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-black:#000;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:var(--radius);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border-color);--color-input:var(--input);--color-ring:var(--ring);--color-sidebar:var(--sidebar-background);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--sidebar-width:16rem;--sidebar-width-icon:3rem}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.right-0{right:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-40{z-index:40}.z-50{z-index:50}.mx-2{margin-inline:calc(var(--spacing) * 2)}.my-2{margin-block:calc(var(--spacing) * 2)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-52{height:calc(var(--spacing) * 52)}.h-full{height:100%}.h-px{height:1px}.h-svh{height:100svh}.max-h-52{max-height:calc(var(--spacing) * 52)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-svh{min-height:100svh}.w-7{width:calc(var(--spacing) * 7)}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-top-left{transform-origin:0 0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-tr-md{border-top-right-radius:var(--radius-md)}.rounded-br-md{border-bottom-right-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-border{border-color:var(--color-border)}.border-destructive{border-color:var(--color-destructive)}.border-green-500\/30{border-color:#00c7584d}@supports (color:color-mix(in lab, red, red)){.border-green-500\/30{border-color:color-mix(in oklab, var(--color-green-500) 30%, transparent)}}.border-input{border-color:var(--color-input)}.border-sidebar-border{border-color:var(--color-sidebar-border)}.bg-accent{background-color:var(--color-accent)}.bg-background{background-color:var(--color-background)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-card{background-color:var(--color-card)}.bg-destructive{background-color:var(--color-destructive)}.bg-green-500\/10{background-color:#00c7581a}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/10{background-color:color-mix(in oklab, var(--color-green-500) 10%, transparent)}}.bg-popover{background-color:var(--color-popover)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-sidebar{background-color:var(--color-sidebar)}.bg-sidebar-accent{background-color:var(--color-sidebar-accent)}.bg-sidebar-border{background-color:var(--color-sidebar-border)}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-8{padding-right:calc(var(--spacing) * 8)}.text-left{text-align:left}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--color-accent-foreground)}.text-card-foreground{color:var(--color-card-foreground)}.text-destructive{color:var(--color-destructive)}.text-destructive-foreground{color:var(--color-destructive-foreground)}.text-foreground{color:var(--color-foreground)}.text-green-600{color:var(--color-green-600)}.text-muted-foreground,.text-muted-foreground\/40{color:var(--color-muted-foreground)}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--color-muted-foreground) 40%, transparent)}}.text-popover-foreground{color:var(--color-popover-foreground)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-sidebar-accent-foreground{color:var(--color-sidebar-accent-foreground)}.text-sidebar-foreground,.text-sidebar-foreground\/70{color:var(--color-sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.text-sidebar-foreground\/70{color:color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent)}}.underline-offset-4{text-underline-offset:4px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-\[width\,transform\]{transition-property:width,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:mx-auto:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){margin-inline:auto}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:hidden:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){display:none}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:size-8:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:items-center:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){align-items:center}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:justify-center:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){justify-content:center}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:p-0:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){padding:calc(var(--spacing) * 0)}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:px-0:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){padding-inline:calc(var(--spacing) * 0)}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-destructive\/90:hover{background-color:var(--color-destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--color-destructive) 90%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--color-secondary) 80%, transparent)}}.hover\:bg-sidebar-accent:hover{background-color:var(--color-sidebar-accent)}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:text-sidebar-accent-foreground:hover{color:var(--color-sidebar-accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-sidebar-ring:focus-visible{--tw-ring-color:var(--color-sidebar-ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-\[data-slot\=card-action\]\:grid:has(:is()){display:grid}.has-\[data-slot\=card-action\]\:grid-cols-\[1fr_auto\]:has(:is()){grid-template-columns:1fr auto}.has-\[data-slot\=card-action\]\:items-center:has(:is()){align-items:center}@media (min-width:48rem){.md\:z-10{z-index:10}}.dark\:text-green-400:where(.dark,.dark *){color:var(--color-green-400)}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\>\[data-slot\=card-description\]\]\:col-span-full>[data-slot=card-description]{grid-column:1/-1}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(98.5% 0 0);--border-color:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--radius:.625rem;--sidebar-background:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(14.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(14.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(98.5% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(98.5% 0 0);--border-color:oklch(26.9% 0 0);--input:oklch(26.9% 0 0);--ring:oklch(43.9% 0 0);--sidebar-background:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(98.5% 0 0);--sidebar-primary-foreground:oklch(20.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(26.9% 0 0);--sidebar-ring:oklch(55.6% 0 0)}input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date]::-webkit-date-and-time-value{text-align:left}input[type=time]::-webkit-date-and-time-value{text-align:left}input[type=datetime-local]::-webkit-date-and-time-value{text-align:left}input[type=date],input[type=time],input[type=datetime-local]{color-scheme:light}.dark input[type=date],.dark input[type=time],.dark input[type=datetime-local]{color-scheme:dark}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}.scrollbar-thin::-webkit-scrollbar{width:6px}.scrollbar-thin::-webkit-scrollbar-track{background:0 0;border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--muted);border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--muted-foreground)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
\ No newline at end of file
diff --git a/Enciphered.Blazor.UIComponents/wwwroot/js/forms.js b/Enciphered.Blazor.UIComponents/wwwroot/js/forms.js
new file mode 100644
index 0000000..bdc4f9b
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/wwwroot/js/forms.js
@@ -0,0 +1,619 @@
+let initialized = false;
+let bodyObserver = null;
+
+function openPopover(wrapper) {
+ const panel = wrapper.querySelector('[data-popover-panel]');
+ const backdrop = wrapper.querySelector('[data-popover-backdrop]');
+ if (!panel) return;
+ panel.style.display = '';
+ if (backdrop) backdrop.style.display = '';
+ wrapper.setAttribute('data-popover-open', 'true');
+}
+
+function closePopover(wrapper) {
+ const panel = wrapper.querySelector('[data-popover-panel]');
+ const backdrop = wrapper.querySelector('[data-popover-backdrop]');
+ if (!panel) return;
+ panel.style.display = 'none';
+ if (backdrop) backdrop.style.display = 'none';
+ wrapper.setAttribute('data-popover-open', 'false');
+}
+
+function togglePopover(wrapper) {
+ const isOpen = wrapper.getAttribute('data-popover-open') === 'true';
+ if (isOpen) closePopover(wrapper);
+ else openPopover(wrapper);
+}
+
+const DAY_HEADERS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function getCalendarState(cal) {
+ return {
+ displayYear: parseInt(cal.getAttribute('data-display-year')),
+ displayMonth: parseInt(cal.getAttribute('data-display-month')),
+ selectedDate: cal.getAttribute('data-selected-date') || '',
+ view: cal.getAttribute('data-view') || 'days', // 'days' | 'months' | 'years'
+ yearRangeStart: parseInt(cal.getAttribute('data-year-range-start') || '0'),
+ yearRangeEnd: parseInt(cal.getAttribute('data-year-range-end') || '0'),
+ };
+}
+
+function setCalendarState(cal, state) {
+ cal.setAttribute('data-display-year', state.displayYear);
+ cal.setAttribute('data-display-month', state.displayMonth);
+ if (state.selectedDate !== undefined) cal.setAttribute('data-selected-date', state.selectedDate);
+ cal.setAttribute('data-view', state.view);
+ cal.setAttribute('data-year-range-start', state.yearRangeStart);
+ cal.setAttribute('data-year-range-end', state.yearRangeEnd);
+ renderCalendar(cal);
+}
+
+function getCalendarDays(year, month) {
+ const days = [];
+ const firstOfMonth = new Date(year, month - 1, 1);
+ const startOffset = firstOfMonth.getDay(); // Sunday = 0
+ const start = new Date(firstOfMonth);
+ start.setDate(start.getDate() - startOffset);
+ for (let i = 0; i < 42; i++) {
+ const d = new Date(start);
+ d.setDate(d.getDate() + i);
+ days.push(d);
+ }
+ return days;
+}
+
+function formatDateISO(d) {
+ const yyyy = d.getFullYear();
+ const mm = String(d.getMonth() + 1).padStart(2, '0');
+ const dd = String(d.getDate()).padStart(2, '0');
+ return `${yyyy}-${mm}-${dd}`;
+}
+
+function parseDateISO(str) {
+ if (!str) return null;
+ const [y, m, d] = str.split('-').map(Number);
+ return new Date(y, m - 1, d);
+}
+
+function isSameDay(a, b) {
+ return a.getFullYear() === b.getFullYear() &&
+ a.getMonth() === b.getMonth() &&
+ a.getDate() === b.getDate();
+}
+
+function renderCalendar(cal) {
+ const state = getCalendarState(cal);
+ const contentEl = cal.querySelector('[data-calendar-content]');
+ if (!contentEl) return;
+
+ const monthLabel = cal.querySelector('[data-calendar-month]');
+ const yearLabel = cal.querySelector('[data-calendar-year]');
+ if (monthLabel) monthLabel.textContent = MONTH_NAMES_SHORT[state.displayMonth - 1];
+ if (yearLabel) yearLabel.textContent = state.displayYear;
+
+ const selectedParsed = parseDateISO(state.selectedDate);
+ const today = new Date();
+
+ if (state.view === 'months') {
+ contentEl.innerHTML = renderMonthPicker(state);
+ } else if (state.view === 'years') {
+ contentEl.innerHTML = renderYearPicker(state);
+ } else {
+ contentEl.innerHTML = renderDayGrid(state, selectedParsed, today);
+ }
+}
+
+function renderDayGrid(state, selectedParsed, today) {
+ const baseBtn = 'h-9 w-9 inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer';
+
+ let html = '';
+ for (const dow of DAY_HEADERS) {
+ html += `
${dow}
`;
+ }
+ html += '
';
+
+ const days = getCalendarDays(state.displayYear, state.displayMonth);
+ for (const d of days) {
+ const isOutside = d.getMonth() !== state.displayMonth - 1;
+ const isSelected = selectedParsed && isSameDay(d, selectedParsed);
+ const isToday = isSameDay(d, today);
+ const dateStr = formatDateISO(d);
+
+ let cls = baseBtn;
+ if (isSelected) cls += ' bg-primary text-primary-foreground font-semibold';
+ else if (isOutside) cls += ' text-muted-foreground/40 cursor-default';
+ else if (isToday) cls += ' bg-accent text-accent-foreground font-medium';
+ else cls += ' hover:bg-accent hover:text-accent-foreground';
+
+ html += ``;
+ }
+ html += '
';
+ return html;
+}
+
+function renderMonthPicker(state) {
+ let html = '';
+ for (let m = 0; m < 12; m++) {
+ const isCurrent = state.displayMonth === m + 1;
+ const cls = isCurrent
+ ? 'h-9 rounded-md text-sm transition-colors cursor-pointer bg-primary text-primary-foreground'
+ : 'h-9 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent hover:text-accent-foreground';
+ html += ``;
+ }
+ html += '
';
+ return html;
+}
+
+function renderYearPicker(state) {
+ let html = '';
+ for (let y = state.yearRangeStart; y <= state.yearRangeEnd; y++) {
+ const isCurrent = state.displayYear === y;
+ const cls = isCurrent
+ ? 'h-9 rounded-md text-sm transition-colors cursor-pointer bg-primary text-primary-foreground'
+ : 'h-9 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent hover:text-accent-foreground';
+ html += ``;
+ }
+ html += '
';
+ return html;
+}
+
+function calendarPrev(cal) {
+ const state = getCalendarState(cal);
+ if (state.view === 'years') {
+ state.yearRangeStart -= 20;
+ state.yearRangeEnd -= 20;
+ } else if (state.view === 'months') {
+ state.displayYear--;
+ state.yearRangeStart = state.displayYear - 10;
+ state.yearRangeEnd = state.displayYear + 10;
+ } else {
+ state.displayMonth--;
+ if (state.displayMonth < 1) { state.displayMonth = 12; state.displayYear--; }
+ state.yearRangeStart = state.displayYear - 10;
+ state.yearRangeEnd = state.displayYear + 10;
+ }
+ setCalendarState(cal, state);
+}
+
+function calendarNext(cal) {
+ const state = getCalendarState(cal);
+ if (state.view === 'years') {
+ state.yearRangeStart += 20;
+ state.yearRangeEnd += 20;
+ } else if (state.view === 'months') {
+ state.displayYear++;
+ state.yearRangeStart = state.displayYear - 10;
+ state.yearRangeEnd = state.displayYear + 10;
+ } else {
+ state.displayMonth++;
+ if (state.displayMonth > 12) { state.displayMonth = 1; state.displayYear++; }
+ state.yearRangeStart = state.displayYear - 10;
+ state.yearRangeEnd = state.displayYear + 10;
+ }
+ setCalendarState(cal, state);
+}
+
+function getTimePickerState(tp) {
+ return {
+ hour: parseInt(tp.getAttribute('data-selected-hour') || '0'),
+ minute: parseInt(tp.getAttribute('data-selected-minute') || '0'),
+ isPm: tp.getAttribute('data-selected-pm') === 'true',
+ use12Hour: tp.getAttribute('data-use-12-hour') === 'true',
+ };
+}
+
+function setTimePickerState(tp, state) {
+ tp.setAttribute('data-selected-hour', state.hour);
+ tp.setAttribute('data-selected-minute', state.minute);
+ tp.setAttribute('data-selected-pm', state.isPm);
+ renderTimePicker(tp);
+}
+
+function renderTimePicker(tp) {
+ const state = getTimePickerState(tp);
+
+ tp.querySelectorAll('[data-tp-hour]').forEach(btn => {
+ const val = parseInt(btn.getAttribute('data-tp-hour'));
+ updateTimeItemSelected(btn, val === state.hour);
+ });
+ tp.querySelectorAll('[data-tp-minute]').forEach(btn => {
+ const val = parseInt(btn.getAttribute('data-tp-minute'));
+ updateTimeItemSelected(btn, val === state.minute);
+ });
+ tp.querySelectorAll('[data-tp-period]').forEach(btn => {
+ const isPm = btn.getAttribute('data-tp-period') === 'pm';
+ updateTimeItemSelected(btn, isPm === state.isPm);
+ });
+}
+
+function updateTimeItemSelected(btn, isSelected) {
+ const base = 'h-9 w-full inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer';
+ if (isSelected) {
+ btn.className = base + ' bg-primary text-primary-foreground font-semibold';
+ } else {
+ btn.className = base + ' hover:bg-accent hover:text-accent-foreground';
+ }
+}
+
+function getTimePickerValue(tp) {
+ const state = getTimePickerState(tp);
+ let hour = state.hour;
+ if (state.use12Hour) {
+ hour = (state.hour % 12) + (state.isPm ? 12 : 0);
+ }
+ return { hour, minute: state.minute };
+}
+
+function formatTime24(hour, minute) {
+ return String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0');
+}
+
+function formatTime12(hour, minute) {
+ const isPm = hour >= 12;
+ let h12 = hour % 12;
+ if (h12 === 0) h12 = 12;
+ return String(h12).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ' ' + (isPm ? 'PM' : 'AM');
+}
+
+function handleNumberIncrement(wrapper, direction) {
+ const input = wrapper.querySelector('input[type="number"]');
+ if (!input) return;
+
+ const step = parseFloat(input.getAttribute('step')) || 1;
+ const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min')) : null;
+ const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max')) : null;
+
+ let current = parseFloat(input.value) || 0;
+ current += step * direction;
+
+ if (min !== null && current < min) current = min;
+ if (max !== null && current > max) current = max;
+
+ input.value = current;
+ input.dispatchEvent(new Event('input', { bubbles: true }));
+ input.dispatchEvent(new Event('change', { bubbles: true }));
+
+ updateStepperDisabledState(wrapper);
+}
+
+function updateStepperDisabledState(wrapper) {
+ const input = wrapper.querySelector('input[type="number"]');
+ if (!input) return;
+
+ const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min')) : null;
+ const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max')) : null;
+ const val = parseFloat(input.value);
+
+ const incBtn = wrapper.querySelector('[data-number-increment]');
+ const decBtn = wrapper.querySelector('[data-number-decrement]');
+
+ if (incBtn) {
+ incBtn.disabled = (max !== null && !isNaN(val) && val >= max);
+ }
+ if (decBtn) {
+ decBtn.disabled = (min !== null && !isNaN(val) && val <= min);
+ }
+}
+
+function syncDateTriggerText(hiddenInput) {
+ const triggerId = hiddenInput.getAttribute('data-trigger-id');
+ if (!triggerId) return;
+ const trigger = document.querySelector(`[data-testid="${triggerId}"]`);
+ if (!trigger) return;
+ const span = trigger.querySelector('span');
+ if (!span) return;
+
+ const val = hiddenInput.value;
+ if (val) {
+ const [y, m, d] = val.split('-').map(Number);
+ const date = new Date(y, m - 1, d);
+ const isDateTimePart = hiddenInput.hasAttribute('data-datetime-part');
+ const options = isDateTimePart
+ ? { month: 'short', day: 'numeric', year: 'numeric' }
+ : { month: 'long', day: 'numeric', year: 'numeric' };
+ span.textContent = date.toLocaleDateString('en-US', options);
+ span.classList.remove('text-muted-foreground');
+ } else {
+ span.textContent = hiddenInput.getAttribute('data-placeholder') || 'Select date';
+ span.classList.add('text-muted-foreground');
+ }
+}
+
+function syncTimeTriggerText(hiddenInput) {
+ const triggerId = hiddenInput.getAttribute('data-trigger-id');
+ if (!triggerId) return;
+ const trigger = document.querySelector(`[data-testid="${triggerId}"]`);
+ if (!trigger) return;
+ const span = trigger.querySelector('span');
+ if (!span) return;
+
+ const val = hiddenInput.value;
+ if (val) {
+ const [h, m] = val.split(':').map(Number);
+ span.textContent = formatTime12(h, m);
+ span.classList.remove('text-muted-foreground');
+ } else {
+ span.textContent = hiddenInput.getAttribute('data-placeholder') || 'Select time';
+ span.classList.add('text-muted-foreground');
+ }
+}
+
+function handleClick(e) {
+ const target = e.target;
+
+ const popoverTrigger = target.closest('[data-popover-trigger]');
+ if (popoverTrigger) {
+ const wrapper = popoverTrigger.closest('[data-popover]');
+ if (wrapper) {
+ e.stopPropagation();
+ togglePopover(wrapper);
+ return;
+ }
+ }
+
+ const backdrop = target.closest('[data-popover-backdrop]');
+ if (backdrop) {
+ const wrapper = backdrop.closest('[data-popover]');
+ if (wrapper) {
+ e.stopPropagation();
+ closePopover(wrapper);
+ return;
+ }
+ }
+
+ const prevBtn = target.closest('[data-calendar-prev]');
+ if (prevBtn) {
+ const cal = prevBtn.closest('[data-calendar]');
+ if (cal) { calendarPrev(cal); return; }
+ }
+
+ const nextBtn = target.closest('[data-calendar-next]');
+ if (nextBtn) {
+ const cal = nextBtn.closest('[data-calendar]');
+ if (cal) { calendarNext(cal); return; }
+ }
+
+ const monthHeader = target.closest('[data-calendar-month]');
+ if (monthHeader) {
+ const cal = monthHeader.closest('[data-calendar]');
+ if (cal) {
+ const state = getCalendarState(cal);
+ state.view = state.view === 'months' ? 'days' : 'months';
+ setCalendarState(cal, state);
+ return;
+ }
+ }
+
+ const yearHeader = target.closest('[data-calendar-year]');
+ if (yearHeader) {
+ const cal = yearHeader.closest('[data-calendar]');
+ if (cal) {
+ const state = getCalendarState(cal);
+ state.view = state.view === 'years' ? 'days' : 'years';
+ setCalendarState(cal, state);
+ return;
+ }
+ }
+
+ const monthBtn = target.closest('[data-calendar-select-month]');
+ if (monthBtn) {
+ const cal = monthBtn.closest('[data-calendar]');
+ if (cal) {
+ const state = getCalendarState(cal);
+ state.displayMonth = parseInt(monthBtn.getAttribute('data-calendar-select-month'));
+ state.view = 'days';
+ setCalendarState(cal, state);
+ return;
+ }
+ }
+
+ const yearBtn = target.closest('[data-calendar-select-year]');
+ if (yearBtn) {
+ const cal = yearBtn.closest('[data-calendar]');
+ if (cal) {
+ const state = getCalendarState(cal);
+ state.displayYear = parseInt(yearBtn.getAttribute('data-calendar-select-year'));
+ state.view = 'days';
+ state.yearRangeStart = state.displayYear - 10;
+ state.yearRangeEnd = state.displayYear + 10;
+ setCalendarState(cal, state);
+ return;
+ }
+ }
+
+ const dayBtn = target.closest('[data-calendar-day]');
+ if (dayBtn && !dayBtn.disabled) {
+ const cal = dayBtn.closest('[data-calendar]');
+ if (cal) {
+ const dateStr = dayBtn.getAttribute('data-calendar-day');
+ const [y, m, d] = dateStr.split('-').map(Number);
+ const state = getCalendarState(cal);
+ state.selectedDate = dateStr;
+ state.displayYear = y;
+ state.displayMonth = m;
+ setCalendarState(cal, state);
+
+ const inputId = cal.getAttribute('data-linked-input');
+ if (inputId) {
+ const hiddenInput = document.getElementById(inputId);
+ if (hiddenInput) {
+ hiddenInput.value = dateStr;
+ hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
+ syncDateTriggerText(hiddenInput);
+ }
+ }
+
+ const popover = cal.closest('[data-popover]');
+ if (popover) closePopover(popover);
+ return;
+ }
+ }
+
+ const hourBtn = target.closest('[data-tp-hour]');
+ if (hourBtn) {
+ const tp = hourBtn.closest('[data-timepicker]');
+ if (tp) {
+ const state = getTimePickerState(tp);
+ state.hour = parseInt(hourBtn.getAttribute('data-tp-hour'));
+ setTimePickerState(tp, state);
+ syncTimeToHiddenInput(tp);
+ return;
+ }
+ }
+
+ const minuteBtn = target.closest('[data-tp-minute]');
+ if (minuteBtn) {
+ const tp = minuteBtn.closest('[data-timepicker]');
+ if (tp) {
+ const state = getTimePickerState(tp);
+ state.minute = parseInt(minuteBtn.getAttribute('data-tp-minute'));
+ setTimePickerState(tp, state);
+ syncTimeToHiddenInput(tp);
+ return;
+ }
+ }
+
+ const periodBtn = target.closest('[data-tp-period]');
+ if (periodBtn) {
+ const tp = periodBtn.closest('[data-timepicker]');
+ if (tp) {
+ const state = getTimePickerState(tp);
+ state.isPm = periodBtn.getAttribute('data-tp-period') === 'pm';
+ setTimePickerState(tp, state);
+ syncTimeToHiddenInput(tp);
+ return;
+ }
+ }
+
+ const incBtn = target.closest('[data-number-increment]');
+ if (incBtn) {
+ const wrapper = incBtn.closest('[data-number-input]');
+ if (wrapper) { handleNumberIncrement(wrapper, 1); return; }
+ }
+
+ const decBtn = target.closest('[data-number-decrement]');
+ if (decBtn) {
+ const wrapper = decBtn.closest('[data-number-input]');
+ if (wrapper) { handleNumberIncrement(wrapper, -1); return; }
+ }
+}
+
+function syncTimeToHiddenInput(tp) {
+ const inputId = tp.getAttribute('data-linked-input');
+ if (!inputId) return;
+ const hiddenInput = document.getElementById(inputId);
+ if (!hiddenInput) return;
+
+ const { hour, minute } = getTimePickerValue(tp);
+ hiddenInput.value = formatTime24(hour, minute);
+ hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
+ syncTimeTriggerText(hiddenInput);
+}
+
+function handleInput(e) {
+ const target = e.target;
+ if (target.matches('[data-number-input] input[type="number"]')) {
+ const wrapper = target.closest('[data-number-input]');
+ if (wrapper) updateStepperDisabledState(wrapper);
+ }
+}
+
+function syncValidationStyling() {
+ document.querySelectorAll('[data-field-error]').forEach(errEl => {
+ const fieldName = errEl.getAttribute('data-field-error');
+ if (!fieldName) return;
+ const field = document.querySelector(`[data-form-field="${fieldName}"]`);
+ if (!field) return;
+ const input = field.querySelector('input, select, textarea');
+ if (!input) return;
+
+ const hasError = !errEl.classList.contains('hidden') && errEl.textContent.trim().length > 0;
+ if (hasError) {
+ input.classList.add('border-destructive');
+ input.classList.remove('border-input');
+ } else {
+ input.classList.remove('border-destructive');
+ input.classList.add('border-input');
+ }
+ });
+}
+
+function handleFormReset(e) {
+ if (e.target.tagName !== 'FORM') return;
+ const form = e.target;
+ setTimeout(() => {
+ form.querySelectorAll('[data-field-error]').forEach(errEl => {
+ errEl.classList.add('hidden');
+ errEl.textContent = '';
+ });
+ form.querySelectorAll('.border-destructive').forEach(input => {
+ input.classList.remove('border-destructive');
+ input.classList.add('border-input');
+ });
+ const result = form.querySelector('#form-result');
+ if (result) { result.className = 'hidden'; result.innerHTML = ''; }
+ }, 0);
+}
+
+function initComponents() {
+ document.querySelectorAll('[data-calendar]').forEach(cal => {
+ renderCalendar(cal);
+ });
+
+ document.querySelectorAll('[data-timepicker]').forEach(tp => {
+ renderTimePicker(tp);
+ });
+
+ document.querySelectorAll('[data-number-input]').forEach(wrapper => {
+ updateStepperDisabledState(wrapper);
+ });
+
+ document.querySelectorAll('[data-popover]').forEach(wrapper => {
+ if (wrapper.getAttribute('data-popover-open') !== 'true') {
+ closePopover(wrapper);
+ }
+ });
+}
+
+export function init() {
+ if (initialized) {
+ initComponents();
+ if (typeof htmx !== 'undefined') htmx.process(document.body);
+ return;
+ }
+ initialized = true;
+
+ initComponents();
+ if (typeof htmx !== 'undefined') htmx.process(document.body);
+
+ document.addEventListener('click', handleClick);
+ document.addEventListener('input', handleInput);
+ document.addEventListener('reset', handleFormReset, true);
+
+ document.addEventListener('htmx:afterSwap', () => {
+ syncValidationStyling();
+ });
+
+ document.addEventListener('blazor:enhanced-load', () => {
+ initComponents();
+ if (typeof htmx !== 'undefined') htmx.process(document.body);
+ });
+
+ bodyObserver = new MutationObserver(() => {
+ const uninitCals = document.querySelectorAll('[data-calendar]:not([data-initialized])');
+ uninitCals.forEach(cal => {
+ cal.setAttribute('data-initialized', 'true');
+ renderCalendar(cal);
+ });
+ });
+ bodyObserver.observe(document.body, { childList: true, subtree: true });
+}
+
+export function dispose() {
+ document.removeEventListener('click', handleClick);
+ document.removeEventListener('input', handleInput);
+ bodyObserver?.disconnect();
+ bodyObserver = null;
+ initialized = false;
+}
diff --git a/README.md b/README.md
index 0150318..9bced55 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,51 @@
-# Blazor UI Components
\ No newline at end of file
+# Enciphered.Blazor.UIComponents
+
+A **pure static SSR** Blazor component library styled with **Tailwind CSS v4** and **shadcn/ui** design tokens. All interactivity is powered by vanilla JavaScript — no SignalR, no WebAssembly, no `InteractiveServer` render mode required. Form validation and submission are handled entirely through **htmx**.
+
+## Features
+
+- **Zero Blazor interactivity** — components work with `AddRazorComponents()` alone
+- **Tailwind CSS v4** with oklch color tokens (light + dark mode)
+- **htmx form validation** — per-field blur validation and full form submission with a fluent `FormValidator` API
+- **Strongly-typed model binding** — bind submitted form data to POCOs automatically
+- **Sidebar layout** — collapsible, responsive, cookie-persisted
+- **Card components** — composable header/content/footer/image/action slots
+- **Dark mode** — toggle with localStorage persistence, FOUC-free
+- **Date/Time pickers** — calendar and time picker popovers with hidden native inputs
+
+## Quick Start
+
+```bash
+dotnet add package Enciphered.Blazor.UIComponents
+```
+
+> See the full [Getting Started guide](docs/getting-started.md) for setup instructions.
+
+## Documentation
+
+| Document | Description |
+|---|---|
+| [Getting Started](docs/getting-started.md) | Installation, prerequisites, and first-app setup |
+| [Sidebar](docs/components/sidebar.md) | Collapsible sidebar layout system |
+| [Card](docs/components/card.md) | Composable card components |
+| [Button](docs/components/button.md) | Button with variants and sizes |
+| [Form Inputs](docs/components/form-inputs.md) | TextInput, NumberInput, DateInput, TimeInput, DateTimeInput |
+| [Form Validation](docs/forms/validation.md) | htmx-powered validation with FormValidator |
+| [Form Submission](docs/forms/submission.md) | Handling form submit with model binding |
+| [Theme Toggle](docs/components/theme-toggle.md) | Dark/light mode toggle |
+
+## Architecture
+
+All interactive behavior (popovers, sidebar collapse, calendar navigation, number input steppers, form resets) is implemented via three vanilla JS modules that use `data-*` attribute selectors and event delegation:
+
+| Module | Purpose |
+|---|---|
+| `darkmode.js` | Theme toggle, localStorage persistence, SVG icon sync |
+| `sidebar.js` | Expand/collapse, mobile responsiveness, cookie persistence |
+| `forms.js` | Popover, calendar, time picker, number stepper, form reset |
+
+These modules survive Blazor enhanced navigation via `MutationObserver` patterns.
+
+## License
+
+ISC
\ No newline at end of file
diff --git a/docs/components/button.md b/docs/components/button.md
new file mode 100644
index 0000000..0bf2474
--- /dev/null
+++ b/docs/components/button.md
@@ -0,0 +1,148 @@
+# Button
+
+A styled button component with variant and size presets built from Tailwind utility classes.
+
+---
+
+## Basic Usage
+
+```razor
+
+
+
+```
+
+---
+
+## Variants
+
+Use the `Variant` parameter with constants from `ButtonVariant`:
+
+```razor
+
+
+
+
+
+
+```
+
+| Constant | Tailwind Classes |
+|---|---|
+| `ButtonVariant.Default` | `bg-primary text-primary-foreground shadow hover:bg-primary/90` |
+| `ButtonVariant.Destructive` | `bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90` |
+| `ButtonVariant.Outline` | `border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground` |
+| `ButtonVariant.Secondary` | `bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80` |
+| `ButtonVariant.Ghost` | `hover:bg-accent hover:text-accent-foreground` |
+| `ButtonVariant.Link` | `text-primary underline-offset-4 hover:underline` |
+
+You can also pass any custom Tailwind class string directly:
+
+```razor
+
+```
+
+### Creating Custom Variants
+
+Since `Variant` and `Size` are plain strings (not enums), you can create your own variant constants without modifying the library. Define a static class in your app with any Tailwind utility combinations you need:
+
+```csharp
+public static class AppButtonVariant
+{
+ public const string Success =
+ "bg-green-600 text-white shadow-sm hover:bg-green-700";
+
+ public const string Warning =
+ "bg-amber-500 text-white shadow-sm hover:bg-amber-600";
+
+ public const string Info =
+ "bg-sky-500 text-white shadow-sm hover:bg-sky-600";
+
+ public const string OutlineDestructive =
+ "border border-destructive text-destructive bg-transparent shadow-sm hover:bg-destructive/10";
+
+ public const string Gradient =
+ "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-sm hover:from-purple-600 hover:to-pink-600";
+}
+```
+
+Then use them exactly like the built-in variants:
+
+```razor
+
+
+
+```
+
+You can do the same for custom sizes:
+
+```csharp
+public static class AppButtonSize
+{
+ public const string Xs = "h-7 rounded-md px-2 text-xs";
+ public const string Xl = "h-12 rounded-lg px-10 text-base";
+ public const string Wide = "h-9 px-12 py-2";
+}
+```
+
+```razor
+
+```
+
+This approach works because the `Button` component simply concatenates the variant and size strings into the element's `class` attribute — there is no closed set of allowed values.
+
+---
+
+## Sizes
+
+Use the `Size` parameter with constants from `ButtonSize`:
+
+```razor
+
+
+
+
+```
+
+| Constant | Tailwind Classes |
+|---|---|
+| `ButtonSize.Default` | `h-9 px-4 py-2` |
+| `ButtonSize.Sm` | `h-8 rounded-md px-3 text-xs` |
+| `ButtonSize.Lg` | `h-10 rounded-md px-8` |
+| `ButtonSize.Icon` | `h-9 w-9` |
+
+---
+
+## Button with Icon
+
+Use the `Icon` render fragment to prepend an icon:
+
+```razor
+
+```
+
+---
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `ChildContent` | `RenderFragment?` | — | Button label content |
+| `Icon` | `RenderFragment?` | — | Icon slot rendered before the label |
+| `Type` | `string` | `"button"` | HTML button type (`button`, `submit`, `reset`) |
+| `Disabled` | `bool` | `false` | Disables the button |
+| `Variant` | `string` | `ButtonVariant.Default` | Visual style classes |
+| `Size` | `string` | `ButtonSize.Default` | Size classes |
+| `Class` | `string?` | — | Additional CSS classes appended |
+
+All unmatched HTML attributes (`data-testid`, `aria-*`, etc.) are passed through via `@attributes`.
diff --git a/docs/components/card.md b/docs/components/card.md
new file mode 100644
index 0000000..0787c77
--- /dev/null
+++ b/docs/components/card.md
@@ -0,0 +1,103 @@
+# Card
+
+A composable card component suite for displaying grouped content in a bordered container with optional header, footer, image, and action slots.
+
+---
+
+## Components
+
+| Component | Description |
+|---|---|
+| `Card` | Root container with border, shadow, and rounded corners |
+| `CardHeader` | Top section — contains title, description, and optional action |
+| `CardTitle` | `` heading styled for cards |
+| `CardDescription` | Muted paragraph below the title |
+| `CardAction` | Trailing action element (button/link) aligned to the header's right edge |
+| `CardContent` | Main body area |
+| `CardFooter` | Bottom area for buttons or metadata |
+| `CardImage` | Full-width image with optional wrapper styling |
+
+---
+
+## Basic Card
+
+```razor
+
+
+ Notifications
+ You have 3 unread messages.
+
+
+ Here is the main content of the card.
+
+
+
+
+
+```
+
+---
+
+## Card with Action
+
+The `CardAction` renders at the trailing edge of the header using CSS grid:
+
+```razor
+
+
+ Team Members
+ Manage your team.
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Card with Image
+
+```razor
+
+
+
+ Beautiful Scenery
+ A mountain landscape at sunset.
+
+
+ The image fills the card width and crops via object-cover.
+
+
+```
+
+---
+
+## Parameters
+
+### Card
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `ChildContent` | `RenderFragment?` | — | Card inner content |
+| `Class` | `string?` | — | Additional CSS classes |
+
+Base classes: `rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden`
+
+### CardImage
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `Src` | `string` | **required** | Image source URL |
+| `Alt` | `string` | `""` | Alt text for accessibility |
+| `Class` | `string?` | — | Additional classes on the `![]()
` |
+| `WrapperClass` | `string?` | — | Additional classes on the wrapper `` |
+
+### CardTitle, CardDescription, CardContent, CardFooter, CardAction
+
+All accept `ChildContent` and `Class` parameters. All support unmatched HTML attributes via `@attributes`.
diff --git a/docs/components/form-inputs.md b/docs/components/form-inputs.md
new file mode 100644
index 0000000..f5a905e
--- /dev/null
+++ b/docs/components/form-inputs.md
@@ -0,0 +1,192 @@
+# Form Inputs
+
+All input components extend a shared `InputBase
` class that provides consistent styling, htmx validation integration, and parameter unification. When placed inside an `HtmxForm` with a `FormField`, inputs automatically attach `hx-post`, `hx-trigger="blur"`, and `hx-target` attributes for real-time per-field validation.
+
+---
+
+## TextInput
+
+A standard text input for strings. Supports all HTML input types (`text`, `email`, `password`, `search`, etc.).
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `Type` | `string` | `"text"` | HTML input type |
+| `Id` | `string?` | — | Input element ID |
+| `Name` | `string?` | — | Form field name (submitted to the server) |
+| `Value` | `string?` | — | Current value |
+| `Placeholder` | `string?` | — | Placeholder text |
+| `Disabled` | `bool` | `false` | Disables the input |
+| `ReadOnly` | `bool` | `false` | Makes the input read-only |
+| `Class` | `string?` | — | Additional CSS classes |
+
+---
+
+## NumberInput
+
+A numeric input with built-in increment/decrement stepper buttons. Hides the browser's native spinner.
+
+```razor
+
+
+
+
+
+
+
+```
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `Min` | `string?` | — | Minimum allowed value |
+| `Max` | `string?` | — | Maximum allowed value |
+| `Step` | `string?` | — | Step increment |
+| `Value` | `double?` | — | Current numeric value |
+
+Inherits all parameters from `InputBase` (`Id`, `Name`, `Placeholder`, `Disabled`, `ReadOnly`, `Class`).
+
+The stepper buttons are disabled when the value reaches `Min` or `Max`. They are hidden when `Disabled` or `ReadOnly` is true.
+
+---
+
+## DateInput
+
+A date picker that combines a hidden `` with a popover calendar. Users select dates through the calendar UI — the native date picker chrome is hidden.
+
+```razor
+
+
+
+```
+
+### How it works
+
+1. A hidden `` holds the actual form value in `yyyy-MM-dd` format
+2. A styled button trigger shows the selected date (or placeholder)
+3. Clicking the trigger opens a `Popover` containing a `Calendar` component
+4. Selecting a day updates the hidden input and closes the popover
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `Value` | `DateOnly?` | — | Currently selected date |
+| `Min` | `string?` | — | Minimum date |
+| `Max` | `string?` | — | Maximum date |
+| `Placeholder` | `string?` | `"Select date"` | Trigger button placeholder |
+
+Inherits all parameters from `InputBase`.
+
+---
+
+## TimeInput
+
+A time picker that combines a hidden `` with a popover time picker. Features scrollable hour/minute columns and AM/PM toggle.
+
+```razor
+
+
+
+```
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `Value` | `TimeOnly?` | — | Currently selected time |
+| `Step` | `string?` | — | Minute step interval |
+| `Use12Hour` | `bool` | `true` | 12-hour format with AM/PM |
+| `Placeholder` | `string?` | `"Select time"` | Trigger button placeholder |
+
+Inherits all parameters from `InputBase`.
+
+---
+
+## DateTimeInput
+
+Combines a date picker and time picker side by side for selecting both date and time. Internally manages a hidden `` plus two helper hidden inputs for the date and time parts.
+
+```razor
+
+
+
+```
+
+### How it works
+
+1. A hidden `` holds the combined value in `yyyy-MM-ddTHH:mm` format
+2. Two helper hidden inputs hold the date-part and time-part separately
+3. Two popover triggers (calendar + time picker) are displayed side by side
+4. The `forms.js` module automatically combines the date-part and time-part values into the main hidden input
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `Value` | `DateTime?` | — | Currently selected date and time |
+| `Min` | `string?` | — | Minimum datetime |
+| `Max` | `string?` | — | Maximum datetime |
+| `Step` | `string?` | — | Minute step interval |
+| `Placeholder` | `string?` | `"Select date"` | Date trigger placeholder |
+
+Inherits all parameters from `InputBase`.
+
+---
+
+## FormField
+
+Wraps an input with a label, description, and error placeholder. The error element is used by htmx to display server-side validation messages.
+
+```razor
+
+
+
+```
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+|---|---|---|---|
+| `Label` | `string?` | — | Label text rendered as `