kbd

Kbd is used to display keyboard shortcuts.

Base Kbd

The base kbd component:

Exported source

kbd = SingleValueFactory("kbd", "Keyboard key or shortcut display component") # Kbd component

Kbd Sizes

Kbd size variants:

Exported source

kbd_sizes = enums_to_simple_factory(kbd, [DaisyUINamedSize], "Kbd size variants from extra small to extra large") # Kbd size variants

Kbd Test Examples

source

test_kbd_basic_examples

 test_kbd_basic_examples ()

Test basic kbd utilities.

Exported source

def test_kbd_basic_examples():
    """Test basic kbd utilities."""
    # Basic kbd
    assert str(kbd) == "kbd"
    
    # With modifiers
    assert str(kbd.hover) == "hover:kbd"
    assert str(kbd.md) == "md:kbd"
    assert str(kbd.dark) == "dark:kbd"

# Run the tests
test_kbd_basic_examples()

source

test_kbd_sizes_examples

 test_kbd_sizes_examples ()

Test kbd size variants.

Exported source

def test_kbd_sizes_examples():
    """Test kbd size variants."""
    assert str(kbd_sizes.xs) == "kbd-xs"
    assert str(kbd_sizes.sm) == "kbd-sm"
    assert str(kbd_sizes.md) == "kbd-md"
    assert str(kbd_sizes.lg) == "kbd-lg"
    assert str(kbd_sizes.xl) == "kbd-xl"
    
    # With responsive modifiers
    assert str(kbd_sizes.xs.sm) == "sm:kbd-xs"
    assert str(kbd_sizes.lg.md) == "md:kbd-lg"

# Run the tests
test_kbd_sizes_examples()

source

test_kbd_basic_fasthtml_examples

 test_kbd_basic_fasthtml_examples ()

Test basic kbd and sizes from daisyUI v5 documentation.

Exported source

def test_kbd_basic_fasthtml_examples():
    """Test basic kbd and sizes from daisyUI v5 documentation."""
    from fasthtml.common import Kbd, Div
    from cjm_fasthtml_tailwind.core.base import combine_classes
    
    # Basic kbd
    basic_kbd = Kbd("K", cls=str(kbd))
    assert basic_kbd.tag == "kbd"
    assert basic_kbd.attrs['class'] == "kbd"
    assert basic_kbd.children[0] == "K"
    
    # Kbd sizes
    kbd_xs_elem = Kbd("Xsmall", cls=combine_classes(kbd, kbd_sizes.xs))
    assert kbd_xs_elem.tag == "kbd"
    assert "kbd" in kbd_xs_elem.attrs['class']
    assert "kbd-xs" in kbd_xs_elem.attrs['class']
    assert kbd_xs_elem.children[0] == "Xsmall"
    
    kbd_sm_elem = Kbd("Small", cls=combine_classes(kbd, kbd_sizes.sm))
    assert "kbd" in kbd_sm_elem.attrs['class']
    assert "kbd-sm" in kbd_sm_elem.attrs['class']
    assert kbd_sm_elem.children[0] == "Small"
    
    kbd_md_elem = Kbd("Medium", cls=combine_classes(kbd, kbd_sizes.md))
    assert "kbd" in kbd_md_elem.attrs['class']
    assert "kbd-md" in kbd_md_elem.attrs['class']
    assert kbd_md_elem.children[0] == "Medium"
    
    kbd_lg_elem = Kbd("Large", cls=combine_classes(kbd, kbd_sizes.lg))
    assert "kbd" in kbd_lg_elem.attrs['class']
    assert "kbd-lg" in kbd_lg_elem.attrs['class']
    assert kbd_lg_elem.children[0] == "Large"
    
    kbd_xl_elem = Kbd("Xlarge", cls=combine_classes(kbd, kbd_sizes.xl))
    assert "kbd" in kbd_xl_elem.attrs['class']
    assert "kbd-xl" in kbd_xl_elem.attrs['class']
    assert kbd_xl_elem.children[0] == "Xlarge"
    
    # In text example
    kbd_in_text = Kbd("F", cls=combine_classes(kbd, kbd_sizes.sm))
    assert kbd_in_text.tag == "kbd"
    assert "kbd" in kbd_in_text.attrs['class']
    assert "kbd-sm" in kbd_in_text.attrs['class']
    assert kbd_in_text.children[0] == "F"
    
    # Return all elements in a Div
    return Div(
        basic_kbd,
        kbd_xs_elem,
        kbd_sm_elem,
        kbd_md_elem,
        kbd_lg_elem,
        kbd_xl_elem,
        kbd_in_text
    )

# Run the tests
test_kbd_basic_fasthtml_examples()

<div>
<kbd class="kbd">K</kbd><kbd class="kbd kbd-xs">Xsmall</kbd><kbd class="kbd kbd-sm">Small</kbd><kbd class="kbd kbd-md">Medium</kbd><kbd class="kbd kbd-lg">Large</kbd><kbd class="kbd kbd-xl">Xlarge</kbd><kbd class="kbd kbd-sm">F</kbd></div>

test_func = test_kbd_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_kbd_combination_fasthtml_examples

 test_kbd_combination_fasthtml_examples ()

Test key combinations and function keys from daisyUI v5 documentation.

Exported source

def test_kbd_combination_fasthtml_examples():
    """Test key combinations and function keys from daisyUI v5 documentation."""
    from fasthtml.common import Kbd, Div
    from cjm_fasthtml_tailwind.core.base import combine_classes
    
    # Key combination
    ctrl = Kbd("ctrl", cls=str(kbd))
    shift = Kbd("shift", cls=str(kbd))
    delete = Kbd("del", cls=str(kbd))
    
    assert ctrl.tag == "kbd"
    assert ctrl.attrs['class'] == "kbd"
    assert ctrl.children[0] == "ctrl"
    
    assert shift.tag == "kbd"
    assert shift.attrs['class'] == "kbd"
    assert shift.children[0] == "shift"
    
    assert delete.tag == "kbd"
    assert delete.attrs['class'] == "kbd"
    assert delete.children[0] == "del"
    
    # Function Keys
    cmd = Kbd("⌘", cls=str(kbd))
    option = Kbd("⌥", cls=str(kbd))
    shift_key = Kbd("⇧", cls=str(kbd))
    ctrl_key = Kbd("⌃", cls=str(kbd))
    
    assert cmd.tag == "kbd"
    assert cmd.attrs['class'] == "kbd"
    assert cmd.children[0] == "⌘"
    
    assert option.tag == "kbd"
    assert option.attrs['class'] == "kbd"
    assert option.children[0] == "⌥"
    
    assert shift_key.tag == "kbd"
    assert shift_key.attrs['class'] == "kbd"
    assert shift_key.children[0] == "⇧"
    
    assert ctrl_key.tag == "kbd"
    assert ctrl_key.attrs['class'] == "kbd"
    assert ctrl_key.children[0] == "⌃"
    
    # Return all elements in a Div
    return Div(
        # Key combination row
        Div(ctrl, shift, delete),
        # Function keys row
        Div(cmd, option, shift_key, ctrl_key)
    )

# Run the tests
test_kbd_combination_fasthtml_examples()

<div>
  <div>
<kbd class="kbd">ctrl</kbd><kbd class="kbd">shift</kbd><kbd class="kbd">del</kbd>  </div>
  <div>
<kbd class="kbd">⌘</kbd><kbd class="kbd">⌥</kbd><kbd class="kbd">⇧</kbd><kbd class="kbd">⌃</kbd>  </div>
</div>

test_func = test_kbd_combination_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_kbd_keyboard_fasthtml_examples

 test_kbd_keyboard_fasthtml_examples ()

Test full keyboard and arrow keys from daisyUI v5 documentation.

Exported source

def test_kbd_keyboard_fasthtml_examples():
    """Test full keyboard and arrow keys from daisyUI v5 documentation."""
    from fasthtml.common import Kbd, Div
    from cjm_fasthtml_tailwind.utilities.spacing import m
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, justify, flex_display
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.core.base import combine_classes
    
    # Full keyboard - first row
    row1 = Div(
        Kbd("q", cls=str(kbd)),
        Kbd("w", cls=str(kbd)),
        Kbd("e", cls=str(kbd)),
        Kbd("r", cls=str(kbd)),
        Kbd("t", cls=str(kbd)),
        Kbd("y", cls=str(kbd)),
        Kbd("u", cls=str(kbd)),
        Kbd("i", cls=str(kbd)),
        Kbd("o", cls=str(kbd)),
        Kbd("p", cls=str(kbd)),
        cls=combine_classes(m.y_1, flex_display, w.full, justify.center, gap._1)
    )
    assert row1.tag == "div"
    assert "m-y-1" in row1.attrs['class']
    assert "flex" in row1.attrs['class']
    assert "w-full" in row1.attrs['class']
    assert "justify-center" in row1.attrs['class']
    assert "gap-1" in row1.attrs['class']
    assert len(row1.children) == 10
    for i, letter in enumerate("qwertyuiop"):
        assert row1.children[i].tag == "kbd"
        assert row1.children[i].attrs['class'] == "kbd"
        assert row1.children[i].children[0] == letter
    
    # Second row
    row2 = Div(
        Kbd("a", cls=str(kbd)),
        Kbd("s", cls=str(kbd)),
        Kbd("d", cls=str(kbd)),
        Kbd("f", cls=str(kbd)),
        Kbd("g", cls=str(kbd)),
        Kbd("h", cls=str(kbd)),
        Kbd("j", cls=str(kbd)),
        Kbd("k", cls=str(kbd)),
        Kbd("l", cls=str(kbd)),
        cls=combine_classes(m.y_1, flex_display, w.full, justify.center, gap._1)
    )
    assert len(row2.children) == 9
    for i, letter in enumerate("asdfghjkl"):
        assert row2.children[i].children[0] == letter
    
    # Third row
    row3 = Div(
        Kbd("z", cls=str(kbd)),
        Kbd("x", cls=str(kbd)),
        Kbd("c", cls=str(kbd)),
        Kbd("v", cls=str(kbd)),
        Kbd("b", cls=str(kbd)),
        Kbd("n", cls=str(kbd)),
        Kbd("m", cls=str(kbd)),
        Kbd("/", cls=str(kbd)),
        cls=combine_classes(m.y_1, flex_display, w.full, justify.center, gap._1)
    )
    assert len(row3.children) == 8
    for i, char in enumerate("zxcvbnm/"):
        assert row3.children[i].children[0] == char
    
    # Arrow Keys
    # Up arrow
    up_row = Div(
        Kbd("▲", cls=str(kbd)),
        cls=combine_classes(flex_display, w.full, justify.center)
    )
    assert up_row.tag == "div"
    assert "flex" in up_row.attrs['class']
    assert "w-full" in up_row.attrs['class']
    assert "justify-center" in up_row.attrs['class']
    assert len(up_row.children) == 1
    assert up_row.children[0].children[0] == "▲"
    
    # Left and right arrows
    middle_row = Div(
        Kbd("◀︎", cls=str(kbd)),
        Kbd("▶︎", cls=str(kbd)),
        cls=combine_classes(flex_display, w.full, justify.center, gap._12)
    )
    assert "gap-12" in middle_row.attrs['class']
    assert len(middle_row.children) == 2
    assert middle_row.children[0].children[0] == "◀︎"
    assert middle_row.children[1].children[0] == "▶︎"
    
    # Down arrow
    down_row = Div(
        Kbd("▼", cls=str(kbd)),
        cls=combine_classes(flex_display, w.full, justify.center)
    )
    assert len(down_row.children) == 1
    assert down_row.children[0].children[0] == "▼"
    
    # Return all elements in a Div
    return Div(
        # Full keyboard
        Div(row1, row2, row3),
        # Arrow keys
        Div(up_row, middle_row, down_row)
    )

# Run the tests
test_kbd_keyboard_fasthtml_examples()

<div>
  <div>
    <div class="m-y-1 flex w-full justify-center gap-1">
<kbd class="kbd">q</kbd><kbd class="kbd">w</kbd><kbd class="kbd">e</kbd><kbd class="kbd">r</kbd><kbd class="kbd">t</kbd><kbd class="kbd">y</kbd><kbd class="kbd">u</kbd><kbd class="kbd">i</kbd><kbd class="kbd">o</kbd><kbd class="kbd">p</kbd>    </div>
    <div class="m-y-1 flex w-full justify-center gap-1">
<kbd class="kbd">a</kbd><kbd class="kbd">s</kbd><kbd class="kbd">d</kbd><kbd class="kbd">f</kbd><kbd class="kbd">g</kbd><kbd class="kbd">h</kbd><kbd class="kbd">j</kbd><kbd class="kbd">k</kbd><kbd class="kbd">l</kbd>    </div>
    <div class="m-y-1 flex w-full justify-center gap-1">
<kbd class="kbd">z</kbd><kbd class="kbd">x</kbd><kbd class="kbd">c</kbd><kbd class="kbd">v</kbd><kbd class="kbd">b</kbd><kbd class="kbd">n</kbd><kbd class="kbd">m</kbd><kbd class="kbd">/</kbd>    </div>
  </div>
  <div>
    <div class="flex w-full justify-center">
<kbd class="kbd">▲</kbd>    </div>
    <div class="flex w-full justify-center gap-12">
<kbd class="kbd">◀︎</kbd><kbd class="kbd">▶︎</kbd>    </div>
    <div class="flex w-full justify-center">
<kbd class="kbd">▼</kbd>    </div>
  </div>
</div>

test_func = test_kbd_keyboard_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()