1 files changed, 43 insertions, 0 deletions

diff --git a/src/ui/objects/Tabbar.tsx b/src/ui/objects/Tabbar.tsx
new file mode 100644
index 0000000..58c58fa
--- /dev/null
+++ b/src/ui/objects/Tabbar.tsx
@@ -0,0 +1,43 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"nav"> & {
+        "variant"?: "accent";
+        "quiet"?: boolean;
+        "adapt"?: boolean;
+        "tabs-class"?: unknown;
+};
+
+export const Tabbar = ({
+        children,
+        variant,
+        quiet,
+        adapt,
+        "tabs-class": tabsClass,
+        class: cls,
+        ...props
+}: Props) => (
+        <nav
+                class:list={[
+                        "o-tabbar",
+                        {
+                                [`o-tabbar--${variant}`]: variant,
+                                "o-tabbar--quiet": quiet,
+                                "o-tabbar--adapt": adapt,
+                        },
+                        "js-keyboard-nav",
+                        cls,
+                ]}
+                data-keyboard-nav-item=".o-tabbar__tab"
+                data-keyboard-nav-mode="nav"
+                {...props}
+        >
+                <div
+                        aria-label={props["aria-label"]}
+                        aria-orientation="horizontal"
+                        class:list={["o-tabbar__tabs", tabsClass]}
+                        role="tablist"
+                >
+                        {children}
+                </div>
+        </nav>
+);