"use client" import * as React from "react" import { Tabs as TabsPrimitive } from "@base-ui/react/tabs" import { cva, type VariantProps } from "class-variance-authority" import { LayoutGroup, motion, useReducedMotion } from "motion/react" import { easeOutSoft, layoutTween } from "@/lib/motion" import { cn } from "@/lib/utils" const TabsPillContext = React.createContext("atro-tabs-pill") const TabsListVariantContext = React.createContext<"default" | "line">( "default" ) /** Peer-switch panel — opacity + y (Zajno fade+transform), easeOutSoft. */ const panelFade = { duration: 0.2, ease: easeOutSoft, } as const const PILL_CLASS = "absolute z-0 inset-0 bg-background shadow-sm ring-1 ring-border-subtle/70 " + "group-data-[variant=line]/tabs-list:inset-x-2 group-data-[variant=line]/tabs-list:top-auto " + "group-data-[variant=line]/tabs-list:bottom-0 group-data-[variant=line]/tabs-list:h-0.5 " + "group-data-[variant=line]/tabs-list:bg-foreground " + "group-data-[variant=line]/tabs-list:shadow-none group-data-[variant=line]/tabs-list:ring-0" function withoutDomAnimationHandlers>( props: T ) { const { onAnimationStart: _onAnimationStart, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...rest } = props return rest } /** * Tabs — Motion.dev Base UI pattern: * LayoutGroup + layoutId pill morph + layout height on panel. * Mira muted list / soft-rect chrome. */ function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) { const layoutId = React.useId() return ( ) } const tabsListVariants = cva( "relative inline-flex w-fit items-center justify-center rounded-[var(--radius)] p-0.5 text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", { variants: { variant: { default: "bg-muted/50", line: "gap-1 rounded-none bg-transparent p-0", }, }, defaultVariants: { variant: "default", }, } ) function TabsList({ className, variant = "default", ...props }: TabsPrimitive.List.Props & VariantProps) { return ( ) } function TabsTrigger({ className, children, ...props }: TabsPrimitive.Tab.Props) { const reduce = useReducedMotion() const pillId = React.useContext(TabsPillContext) const listVariant = React.useContext(TabsListVariantContext) // borderRadius via style so layoutId scale-correction stays soft-rect / line-flat const pillStyle = { borderRadius: listVariant === "line" ? 0 : "calc(var(--radius) - 2px)", } as const return ( ( )} /> ) } /** * No-op kept for API compatibility. The active mark morphs via * `layoutId` on TabsTrigger (theme-toggle pill pattern). */ function TabsIndicator(_props: TabsPrimitive.Indicator.Props) { return null } function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) { const reduce = useReducedMotion() return ( ( )} layout initial={false} animate={{ opacity: state.hidden ? 0 : 1, y: state.hidden ? 4 : 0, }} transition={{ opacity: panelFade, y: panelFade, layout: layoutTween, }} /> ) } /> ) } export { Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, tabsListVariants, }