fix: corrige tipagem do componente de abas

This commit is contained in:
Esdras Renan 2025-10-17 21:44:58 -03:00
parent c00b4300c1
commit 0e97e4c0d6

View file

@ -1,15 +1,40 @@
import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import {
Root as TabsRootPrimitive,
List as TabsListPrimitive,
Trigger as TabsTriggerPrimitive,
Content as TabsContentPrimitive,
type TabsProps as TabsPrimitiveProps,
type TabsListProps as TabsPrimitiveListProps,
type TabsTriggerProps as TabsPrimitiveTriggerProps,
type TabsContentProps as TabsPrimitiveContentProps,
} from "@radix-ui/react-tabs"
import { cn } from "../../lib/utils"
export function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />
type TabsProps = TabsPrimitiveProps & { className?: string }
type TabsListProps = TabsPrimitiveListProps & { className?: string }
type TabsTriggerProps = TabsPrimitiveTriggerProps & { className?: string }
type TabsContentProps = TabsPrimitiveContentProps & { className?: string }
const TabsRoot = TabsRootPrimitive as unknown as React.ComponentType<TabsProps>
const TabsListBase = TabsListPrimitive as unknown as React.ComponentType<TabsListProps>
const TabsTriggerBase = TabsTriggerPrimitive as unknown as React.ComponentType<TabsTriggerProps>
const TabsContentBase = TabsContentPrimitive as unknown as React.ComponentType<TabsContentProps>
export function Tabs({ className, ...props }: TabsProps) {
return (
<TabsRoot
data-slot="tabs"
className={cn("flex flex-col gap-2", className)}
{...props}
/>
)
}
export function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
export function TabsList({ className, ...props }: TabsListProps) {
return (
<TabsPrimitive.List
<TabsListBase
data-slot="tabs-list"
className={cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-slate-100 p-[3px] text-slate-600", className)}
{...props}
@ -17,20 +42,27 @@ export function TabsList({ className, ...props }: React.ComponentProps<typeof Ta
)
}
export function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
export function TabsTrigger({ className, value, ...props }: TabsTriggerProps) {
return (
<TabsPrimitive.Trigger
<TabsTriggerBase
data-slot="tabs-trigger"
className={cn(
"inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium text-slate-800 transition-[color,box-shadow] data-[state=active]:bg-white data-[state=active]:shadow-sm",
className
)}
value={value}
{...props}
/>
)
}
export function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
export function TabsContent({ className, value, ...props }: TabsContentProps) {
return (
<TabsContentBase
data-slot="tabs-content"
className={cn("flex-1 outline-none", className)}
value={value}
{...props}
/>
)
}