feat(listbox): add baseline implementation of ListBox and ListBoxItem…

… components

src/LumexUI/Components/Listbox/ListboxContext.cs

@@ -0,0 +1,8 @@
+using LumexUI.Common;
+
+namespace LumexUI;
+
+internal class ListboxContext<T>( LumexListbox<T> owner ) : IComponentContext<LumexListbox<T>>
+{
+    public LumexListbox<T> Owner { get; } = owner;
+}

src/LumexUI/Components/Listbox/ListboxItemSlots.cs

@@ -0,0 +1,24 @@
+using LumexUI.Common;
+
+namespace LumexUI;
+
+/// <summary>
+/// 
+/// </summary>
+public class ListboxItemSlots : ISlot
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public string? Root { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public string? Wrapper { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public string? Title { get; set; }
+}

src/LumexUI/Components/Listbox/ListboxSlots.cs

@@ -0,0 +1,24 @@
+using LumexUI.Common;
+
+namespace LumexUI;
+
+/// <summary>
+/// 
+/// </summary>
+public class ListboxSlots : ISlot
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public string? Root { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public string? List { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public string? EmptyContent { get; set; }
+}

src/LumexUI/Components/Listbox/LumexListbox.razor

@@ -0,0 +1,36 @@
+@namespace LumexUI
+@inherits LumexComponentBase
+@typeparam T
+
+<CascadingValue TValue="ListboxContext<T>" Value="@_context" IsFixed="@true">
+    <div class="@_slots.Root"
+         style="@RootStyle"
+         data-slot="base"
+         @attributes="@AdditionalAttributes">
+        <LumexComponent As="@As"
+                        Class="@_slots.List"
+                        data-slot="list">
+            @if( !Items?.Any() ?? false )
+            {
+                <li>
+                    <div class="@_slots.EmptyContent" data-slot="empty-content">
+                        @EmptyContent
+                    </div>
+                </li>
+            }
+            @if( Items is not null )
+            {
+                foreach( var item in Items )
+                {
+                    <LumexListboxItem T="T" @key="@item">
+                        @item
+                    </LumexListboxItem>
+                }
+            }
+            else if( ChildContent is not null )
+            {
+                @ChildContent
+            }
+        </LumexComponent>
+    </div>
+</CascadingValue>

src/LumexUI/Components/Listbox/LumexListbox.razor.cs

@@ -0,0 +1,52 @@
+// Copyright (c) LumexUI 2024
+// LumexUI licenses this file to you under the MIT license
+// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
+
+using LumexUI.Styles;
+
+using Microsoft.AspNetCore.Components;
+
+namespace LumexUI;
+
+/// <summary>
+/// 
+/// </summary>
+/// <typeparam name="T"></typeparam>
+[CascadingTypeParameter( nameof( T ) )]
+public partial class LumexListbox<T> : LumexComponentBase
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    [Parameter] public RenderFragment? EmptyContent { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    [Parameter] public IEnumerable<T>? Items { get; set; }
+
+    private readonly ListboxContext<T> _context;
+
+    private ListboxSlots _slots = default!;
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="LumexListbox{T}"/>.
+    /// </summary>
+    public LumexListbox()
+    {
+        _context = new ListboxContext<T>( this );
+
+        As = "ul";
+    }
+
+    /// <inheritdoc />
+    protected override void OnParametersSet()
+    {
+        _slots ??= Listbox.GetStyles( this, TwMerge );
+    }
+}

src/LumexUI/Components/Listbox/LumexListboxItem.razor

@@ -0,0 +1,13 @@
+@namespace LumexUI
+@inherits LumexComponentBase
+@typeparam T
+
+<LumexComponent As="@As"
+                Class="@_slots.Root"
+                Style="@RootStyle"
+                data-slot="base"
+                @attributes="@AdditionalAttributes">
+    <span class="@_slots.Title" data-slot="title">
+        @ChildContent
+    </span>
+</LumexComponent>

src/LumexUI/Components/Listbox/LumexListboxItem.razor.cs

@@ -0,0 +1,46 @@
+// Copyright (c) LumexUI 2024
+// LumexUI licenses this file to you under the MIT license
+// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
+
+using LumexUI.Common;
+using LumexUI.Styles;
+
+using Microsoft.AspNetCore.Components;
+
+namespace LumexUI;
+
+/// <summary>
+/// 
+/// </summary>
+/// <typeparam name="T"></typeparam>
+public partial class LumexListboxItem<T> : LumexComponentBase
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    [CascadingParameter] internal ListboxContext<T> Context { get; set; } = default!;
+
+    private ListboxItemSlots _slots = default!;
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="LumexListboxItem{T}"/>.
+    /// </summary>
+    public LumexListboxItem()
+    {
+        As = "li";
+    }
+
+    /// <inheritdoc />
+    protected override void OnInitialized()
+    {
+        ContextNullException.ThrowIfNull( Context, nameof( LumexListboxItem<T> ) );
+    }
+
+    /// <inheritdoc />
+    protected override void OnParametersSet()
+    {
+        _slots ??= ListboxItem.GetStyles( this, TwMerge );
+    }
+}

src/LumexUI/Styles/Listbox.cs

@@ -0,0 +1,114 @@
+using System.Diagnostics.CodeAnalysis;
+
+using LumexUI.Utilities;
+
+using TailwindMerge;
+
+namespace LumexUI.Styles;
+
+[ExcludeFromCodeCoverage]
+internal class Listbox
+{
+    private readonly static string _base = ElementClass.Empty()
+        .Add( "relative" )
+        .Add( "w-full" )
+        .Add( "p-1" )
+        .Add( "gap-1" )
+        .Add( "flex" )
+        .Add( "flex-col" )
+        .ToString();
+
+    private readonly static string _list = ElementClass.Empty()
+        .Add( "w-full" )
+        .Add( "gap-0.5" )
+        .Add( "flex" )
+        .Add( "flex-col" )
+        .ToString();
+
+    private readonly static string _emptyContent = ElementClass.Empty()
+        .Add( "w-full" )
+        .Add( "h-10" )
+        .Add( "px-2" )
+        .Add( "py-1.5" )
+        .Add( "text-start" )
+        .Add( "text-foreground-400" )
+        .ToString();
+
+    public static ListboxSlots GetStyles<T>( LumexListbox<T> listbox, TwMerge twMerge )
+    {
+        return new ListboxSlots()
+        {
+            Root = twMerge.Merge(
+                ElementClass.Empty()
+                    .Add( _base )
+                    .Add( listbox.Class )
+                    .ToString() ),
+
+            List = twMerge.Merge(
+                ElementClass.Empty()
+                    .Add( _list )
+                    .ToString() ),
+
+            EmptyContent = twMerge.Merge(
+                ElementClass.Empty()
+                    .Add( _emptyContent )
+                    .ToString() ),
+        };
+    }
+}
+
+[ExcludeFromCodeCoverage]
+internal class ListboxItem
+{
+    private readonly static string _base = ElementClass.Empty()
+        .Add( "relative" )
+        .Add( "group" )
+        .Add( "w-full" )
+        .Add( "h-full" )
+        .Add( "px-2" )
+        .Add( "py-1.5" )
+        .Add( "gap-2" )
+        .Add( "flex" )
+        .Add( "items-center" )
+        .Add( "justify-between" )
+        .Add( "rounded-small" )
+        .Add( "cursor-pointer" )
+        // focus ring
+        .Add( Utils.FocusVisible )
+        .ToString();
+
+    private readonly static string _wrapper = ElementClass.Empty()
+        .Add( "w-full" )
+        .Add( "flex" )
+        .Add( "flex-col" )
+        .Add( "items-start" )
+        .Add( "justify-center" )
+        .ToString();
+
+    private readonly static string _title = ElementClass.Empty()
+        .Add( "flex-1" )
+        .Add( "text-small" )
+        .ToString();
+
+    public static ListboxItemSlots GetStyles<T>( LumexListboxItem<T> listboxItem, TwMerge twMerge )
+    {
+        return new ListboxItemSlots()
+        {
+            Root = twMerge.Merge(
+                ElementClass.Empty()
+                    .Add( _base )
+                    .Add( listboxItem.Class )
+                    .ToString() ),
+
+            Wrapper = twMerge.Merge(
+                ElementClass.Empty()
+                    .Add( _wrapper )
+                    .ToString() ),
+
+            Title = twMerge.Merge(
+                ElementClass.Empty()
+                    .Add( _title )
+                    .ToString() ),
+        };
+    }
+}