Skip to content
This repository was archived by the owner on Apr 5, 2026. It is now read-only.

Commit 1d81161

Browse files
author
phernandez
committed
feat: add tabs component and fix broken Icon references
1 parent ebd48b3 commit 1d81161

13 files changed

Lines changed: 170 additions & 7 deletions

File tree

‎components/ui/select/SelectContent.jinja‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
@mouseenter="$refs.viewport.scrollBy({ top: -40, behavior: 'smooth' }); checkScroll()"
2424
class="flex items-center justify-center py-1 cursor-pointer"
2525
>
26-
<ChevronUp class="h-4 w-4" />
26+
<ChevronUpIcon class="h-4 w-4" />
2727
</SelectScrollUpButton>
2828

2929
<div
@@ -39,6 +39,6 @@
3939
@mouseenter="$refs.viewport.scrollBy({ top: 40, behavior: 'smooth' }); checkScroll()"
4040
class="flex items-center justify-center py-1 cursor-pointer"
4141
>
42-
<ChevronDown class="h-4 w-4" />
42+
<ChevronDownIcon class="h-4 w-4" />
4343
</SelectScrollDownButton>
4444
</div>

‎components/ui/select/SelectScrollDownButton.jinja‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
@mouseleave="clearInterval(scrollInterval)"
1010
class="flex items-center justify-center py-1 cursor-pointer"
1111
>
12-
<ChevronDown class="h-4 w-4" />
12+
<ChevronDownIcon class="h-4 w-4" />
1313
</div>

‎components/ui/select/SelectScrollUpButton.jinja‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
@mouseleave="clearInterval(scrollInterval)"
1010
class="flex items-center justify-center py-1 cursor-pointer"
1111
>
12-
<ChevronUp class="h-4 w-4" />
12+
<ChevronUpIcon class="h-4 w-4" />
1313
</div>

‎components/ui/select/SelectTrigger.jinja‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
{{ attrs.render() }}
77
>
88
{{ content }}
9-
<ChevronDown className="h-4 w-4 opacity-50" />
9+
<ChevronDownIcon className="h-4 w-4 opacity-50" />
1010
</button>
1111
</div>

‎components/ui/tabs/Tabs.jinja‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{# Tabs.jinja #}
2+
{#def
3+
defaultValue: str = "",
4+
className: str = ""
5+
#}
6+
<div
7+
x-data="{ activeTab: '{{ defaultValue }}' }"
8+
class="{{ className }}"
9+
{{ attrs.render() }}
10+
>
11+
{{ content }}
12+
</div>

‎components/ui/tabs/TabsContent.jinja‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{# TabsContent.jinja #}
2+
{#def
3+
value: str = "",
4+
className: str = "",
5+
id: str = ""
6+
#}
7+
{% set id = id or 'tabpanel-' + value %}
8+
<div
9+
id="{{ id }}"
10+
role="tabpanel"
11+
x-show="activeTab === '{{ value }}'"
12+
x-cloak
13+
aria-labelledby="tab-{{ value }}"
14+
class="{{ cn(
15+
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
16+
className
17+
) }}"
18+
{{ attrs.render() }}
19+
>
20+
{{ content }}
21+
</div>

‎components/ui/tabs/TabsList.jinja‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{# TabsList.jinja #}
2+
{#def
3+
className: str = ""
4+
#}
5+
<div
6+
role="tablist"
7+
class="{{ cn(
8+
'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
9+
className
10+
) }}"
11+
{{ attrs.render() }}
12+
>
13+
{{ content }}
14+
</div>

‎components/ui/tabs/TabsTrigger.jinja‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{# TabsTrigger.jinja #}
2+
{#def
3+
value: str = "",
4+
className: str = "",
5+
id: str = ""
6+
#}
7+
{% set id = id or 'tab-' + value %}
8+
<button
9+
type="button"
10+
id="{{ id }}"
11+
role="tab"
12+
x-on:click="activeTab = '{{ value }}'"
13+
:class="activeTab === '{{ value }}' ? '{{ cn('bg-background text-foreground shadow-sm') }}' : ''"
14+
:aria-selected="(activeTab === '{{ value }}').toString()"
15+
aria-controls="tabpanel-{{ value }}"
16+
class="{{ cn(
17+
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
18+
className
19+
) }}"
20+
{{ attrs.render() }}
21+
>
22+
{{ content }}
23+
</button>

‎docs/content/components/tabs.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Tabs
3+
description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
4+
templates:
5+
- Tabs.jinja
6+
- TabsContent.jinja
7+
- TabsList.jinja
8+
- TabsTrigger.jinja
9+
---
10+
11+
12+
<TabPreview component="Tabs" template="examples/tabs.html"/>
13+
14+
15+
<Prose>
16+
17+
## Usage
18+
19+
</Prose>
20+
21+
<IncludeFile dir="docs/templates" file_name="examples/tabs.html"/>
22+
23+
<Prose>
24+
25+
## Attributes
26+
27+
| Component | Prop | Type | Default | Description |
28+
|-----------|----------------|--------|---------|----------------------------------|
29+
| Tabs | `defaultValue` | String | `` | The default tab to display. |
30+
| TableHead | `id` | String | `` | Id of the tab panel. |
31+
| TableHead | `value` | String | `` | Name of the tab panel. |
32+
| TableHead | `id` | String | `` | Id of the tab panel to select. |
33+
| TableHead | `value` | String | `` | Name of the tab panel to select. |
34+
35+
## Code
36+
37+
</Prose>
38+
39+
<IncludeComponents dir="tabs" :components="{{ metadata.templates }}" />
40+

‎docs/routes.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ def __init__(self, *args, **kwargs):
2020
router = HTMLRouter()
2121

2222
# web socket for hot reload
23-
router.add_websocket_route("/hot-reload", endpoint=hotreload, name="hot-reload")
23+
router.add_websocket_route("/hot-reload", endpoint=hotreload, name="hot-reload") # pyright: ignore [reportArgumentType]
2424

2525

2626
async def get_markdown_file(path, default="index"):

0 commit comments

Comments
 (0)