50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2775,"use client"; import * as React from "react"; import { Tabs as BaseTabs } from "@base-ui/react/tabs"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { solidSurface } from "@/registry/default/lib/elevated"; import { useAnimatedHeight } from "@/registry/default/hooks/use-animated-height"; type TabsVariant = "capsule" | "underline"; type TabsSize = "small" | "medium"; type TabsSide = "left" | "right"; /* ------------------------------------------------------------------------------------------------- * CVA Variants * -------------------------------------------------------------------------------------------------*/ const tabsListVariants = cva( [ "group/tabs-list text-muted-foreground relative z-0 inline-flex w-fit items-center justify-center gap-1", "data-[orientation=vertical]:flex-col data-[orientation=vertical]:self-start", ], { variants: { variant: { capsule: "bg-muted", underline: "data-[orientation=horizontal]:px-0 data-[orientation=horizontal]:pt-0 data-[orientation=vertical]:py-0", }, size: { small: "p-0.5 data-[orientation=horizontal]:gap-x-0.5", medium: "p-1 data-[orientation=horizontal]:gap-x-1", }, side: { left: "", right: "", }, }, compoundVariants: [ { variant: "capsule", size: "small", class: "rounded-md", }, { variant: "capsule", size: "medium", class: "rounded-xl", }, { variant: "underline", side: "left", class: "data-[orientation=vertical]:**:data-[slot=tabs-trigger]:justify-end", }, { variant: "underline", side: "right", class: "data-[orientation=vertical]:**:data-[slot=tabs-trigger]:justify-start", }, ], defaultVariants: { variant: "capsule", size: "medium", side: "left", }, }, ); const tabIndicatorVariants = cva( [ "ease-out-expo absolute z-[-1] transition-all duration-200", // Vertical orientation "data-[orientation=vertical]:top-0 data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:translate-y-(--active-tab-top)", // Horizontal orientation "data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:w-(--active-tab-width) data-[orientation=horizontal]:translate-x-(--active-tab-left) data-[orientation=horizontal]:-translate-y-1/2", ], { variants: { variant: { underline: [ "bg-neutral rounded-full", "data-[orientation=vertical]:w-0.75", "data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:top-auto data-[orientation=horizontal]:h-0.75 data-[orientation=horizontal]:translate-y-0", ], capsule: [ solidSurface(5, 1), "data-[orientation=vertical]:w-auto", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:h-(--active-tab-height)", ], }, size: { small: "", medium: "", }, side: { left: "", right: "", }, }, compoundVariants: [ { variant: "capsule", size: "small", class: "rounded-sm data-[orientation=vertical]:inset-x-0.5", }, { variant: "capsule", size: "medium", class: "rounded-md data-[orientation=vertical]:inset-x-1", }, { variant: "underline", side: "left", class: "data-[orientation=vertical]:right-0", }, { variant: "underline", side: "right", class: "data-[orientation=vertical]:left-0", }, ], defaultVariants: { variant: "capsule", size: "medium", side: "left", }, }, ); function Tabs({ className, ...props }: BaseTabs.Root.Props) { return ( ); } function TabsList({ variant = "capsule", size = "medium", side = "left", className, children, ...props }: BaseTabs.List.Props & { variant?: TabsVariant; size?: TabsSize; side?: TabsSide; }) { return ( {children}

); } function TabsTrigger({ className, ...props }: BaseTabs.Tab.Props) { return ( ); } function TabIndicator({ variant = "capsule", size = "medium", side = "left", className, ...props }: BaseTabs.Indicator.Props & { variant?: TabsVariant; size?: TabsSize; side?: TabsSide; }) { return ( ); } function TabsPanels({ className, children, ...props }: React.ComponentProps<"div">) { const { outerRef, innerRef } = useAnimatedHeight(); return (

_*_>_[data-ending-style]]:ease-out-expo has-[>_*_>_[data-ending-style]]:transition-[height] has-[>_*_>_[data-ending-style]]:duration-400", className, )} {...props} >

{children}

); } function TabsContent({ className, disableAnimation = false, ...props }: BaseTabs.Panel.Props & { disableAnimation?: boolean }) { return ( ); } export { Tabs, TabsList, TabsTrigger, TabsPanels, TabsContent }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@cubby-ui","registryDependencies":["@cubby-ui/elevated","@cubby-ui/use-animated-height"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/tabs/tabs.tsx","content":"$52","type":"registry:ui","target":"components/ui/cubby-ui/tabs.tsx"}],"className":"h-[70svh] min-h-80"}]]}]