feat: add core UI components and baseline tests

2026-03-19 16:56:27 +08:00
parent 12642e0a92
commit 063179933c
73 changed files with 5756 additions and 2 deletions
@@ -0,0 +1,66 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { tabsContentVariants, tabsListVariants, tabsTriggerVariants } from "./tabs.variants";
+import { cn } from "../lib/cn";
+import { createDataAttributes, createSlot } from "../lib/contracts";
+
+export function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: ComponentPropsWithoutRef<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({ orientation })}
+      className={cn("flex flex-col", className)}
+      orientation={orientation}
+    />
+  );
+}
+
+export const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(function TabsList({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.List
+      {...props}
+      {...createSlot("list")}
+      className={cn(tabsListVariants(), className)}
+      ref={ref}
+    />
+  );
+});
+
+export const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(function TabsTrigger({ className, disabled, ...props }, ref) {
+  return (
+    <TabsPrimitive.Trigger
+      {...props}
+      {...createSlot("trigger")}
+      {...createDataAttributes({ disabled })}
+      className={cn(tabsTriggerVariants(), className)}
+      disabled={disabled}
+      ref={ref}
+    />
+  );
+});
+
+export const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(function TabsContent({ className, ...props }, ref) {
+  return (
+    <TabsPrimitive.Content
+      {...props}
+      {...createSlot("content")}
+      className={cn(tabsContentVariants(), className)}
+      ref={ref}
+    />
+  );
+});