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 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" import { cn } from "../../lib/utils"
export function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) { type TabsProps = TabsPrimitiveProps & { className?: string }
return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} /> 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 ( return (
<TabsPrimitive.List <TabsListBase
data-slot="tabs-list" 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)} className={cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-slate-100 p-[3px] text-slate-600", className)}
{...props} {...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 ( return (
<TabsPrimitive.Trigger <TabsTriggerBase
data-slot="tabs-trigger" data-slot="tabs-trigger"
className={cn( 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", "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 className
)} )}
value={value}
{...props} {...props}
/> />
) )
} }
export function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) { export function TabsContent({ className, value, ...props }: TabsContentProps) {
return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} /> return (
<TabsContentBase
data-slot="tabs-content"
className={cn("flex-1 outline-none", className)}
value={value}
{...props}
/>
)
} }